/* ==========================================================================
   Kleyman Yazamut — main stylesheet
   Design tokens sampled directly from the approved design + logo.
   ========================================================================== */

:root {
	/* Brand accents — used sparingly, background stays white/off-white. */
	--kleyman-blue: #0C163A;
	--kleyman-blue-dark: #1B2B5E;
	--kleyman-blue-on-dark: #5571B8; /* the navy accent where it sits on a navy surface */
	--kleyman-green: #11793A;
	--kleyman-brown: #8A5A33;
	--kleyman-dark: #0C163A;      /* navy — timeline / footer / CTA sections */
	--kleyman-dark-soft: #16224a;
	--kleyman-light: #F7F8FA;     /* off-white section background */
	--kleyman-white: #FFFFFF;

	--kleyman-text: #1A1D24;
	--kleyman-text-muted: #5B6270;
	--kleyman-border: #E4E7EC;

	--kleyman-font: 'Ploni', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	--kleyman-container: 1280px;
	--kleyman-radius-sm: 6px;
	--kleyman-radius-md: 14px;
	--kleyman-radius-lg: 28px;

	--kleyman-shadow-sm: 0 2px 10px rgba(12, 22, 58, 0.06);
	--kleyman-shadow-md: 0 10px 30px rgba(12, 22, 58, 0.12);

	--kleyman-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Header — floating navy bar, one shared system for every breakpoint
	   (Oct 2026 global-header rework). Single source of truth: change a
	   value here and it updates the header on every template at once,
	   since header.php has exactly one <header> markup block and nothing
	   below targets `.home`/`body:not(.home)` separately any more. */
	--header-side-gap-desktop: 32px;
	--header-side-gap-tablet: 22px;
	--header-side-gap-mobile: 14px;

	--header-radius-desktop: 30px;
	--header-radius-tablet: 26px;
	--header-radius-mobile: 24px;

	--header-height-desktop: 68px;
	--header-height-tablet: 66px;
	--header-height-mobile: 60px;

	--header-top-desktop: 20px;
	--header-top-tablet: 18px;
	--header-top-mobile: 12px;

	/* Hero / page-masthead shell — one shared system (Oct 2026 global-hero
	   rework), same idea as the header vars above. See the
	   "GLOBAL HERO / MASTHEAD SHELL" rule block further down: every
	   Hero/masthead section site-wide except the homepage's own
	   .kleyman-hero-frame (already floating/rounded/clipped on its own
	   95vw system, deliberately left untouched) reads these same values. */
	--hero-side-gap-desktop: 32px;
	--hero-side-gap-tablet: 22px;
	--hero-side-gap-mobile: 14px;

	--hero-radius-desktop: 30px;
	--hero-radius-tablet: 26px;
	--hero-radius-mobile: 20px;
}

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

body {
	margin: 0;
	direction: rtl;
	text-align: right;
	font-family: var(--kleyman-font);
	color: var(--kleyman-text);
	background: var(--kleyman-white);
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }
h1, h2, h3, h4, p { margin: 0; }
iframe { border: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

/* ==========================================================================
   PRELOADER — v1.0.80. Full-screen brand splash shown once per browser
   session on the site's first page load (see the inline script right
   after this element in header.php for the once-per-session logic, and
   the "hide" wiring in main.js). Plain CSS animations so the mark is
   already animating the instant the page paints, before any script has
   had a chance to run.
   ========================================================================== */
.kleyman-preloader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kleyman-dark);
	opacity: 1;
	visibility: visible;
	transition: opacity .5s var(--kleyman-ease), visibility 0s linear 0s;
	/* Belt-and-braces fallback for the rare case JS never runs at all
	   (main.js blocked, an error earlier in the page, etc.): force it
	   out of the way on its own after a few seconds so a visitor is
	   never staring at a splash screen forever. The normal path (JS
	   hides it right after 'load') fires well before this. */
	animation: kleyman-preloader-failsafe 0s 7.5s forwards;
}
.kleyman-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s var(--kleyman-ease), visibility 0s linear .5s;
}
/* Once-per-session skip (see the inline script in header.php): hide
   instantly, no transition, no flash of the splash before it's removed. */
.kleyman-no-preloader .kleyman-preloader { display: none; }

.kleyman-preloader__mark { position: relative; width: 138px; height: 138px; display: flex; align-items: center; justify-content: center; }
.kleyman-preloader__logo { position: relative; z-index: 1; width: 114px; height: auto; animation: kleyman-preloader-pulse 1.7s ease-in-out infinite; }
.kleyman-preloader__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,.16);
	border-top-color: var(--kleyman-green);
	animation: kleyman-preloader-spin 1s linear infinite;
}
@keyframes kleyman-preloader-spin { to { transform: rotate(360deg); } }
@keyframes kleyman-preloader-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes kleyman-preloader-failsafe { to { opacity: 0; visibility: hidden; } }

.kleyman-skip-link {
	position: absolute;
	top: -60px;
	right: 10px;
	background: var(--kleyman-dark);
	color: #fff;
	padding: 10px 18px;
	border-radius: var(--kleyman-radius-sm);
	z-index: 10000;
	transition: top .2s var(--kleyman-ease);
}
.kleyman-skip-link:focus { top: 10px; }

/* Visible focus, everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--kleyman-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

.kleyman-container {
	max-width: var(--kleyman-container);
	margin-inline: auto;
	padding-inline: 24px;
}

.kleyman-no-results {
	color: var(--kleyman-text-muted);
	padding: 40px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	grid-column: 1 / -1;
}
.kleyman-no-results__icon { color: var(--kleyman-border); }

/* Buttons / pills ---------------------------------------------------- */
.kleyman-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 30px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	transition: transform .25s var(--kleyman-ease), background-color .25s var(--kleyman-ease), color .25s var(--kleyman-ease), border-color .25s var(--kleyman-ease);
}
.kleyman-btn--primary {
	background: var(--kleyman-blue);
	color: #fff;
}
.kleyman-btn--primary:hover { background: var(--kleyman-blue-dark); transform: translateY(-2px); }
.kleyman-btn--outline {
	border: 1.5px solid var(--kleyman-border);
	color: var(--kleyman-text);
}
.kleyman-btn--outline:hover { border-color: var(--kleyman-blue); color: var(--kleyman-blue); transform: translateY(-2px); }
.kleyman-btn--outline-green {
	border: 1.5px solid var(--kleyman-green);
	color: var(--kleyman-green);
}
.kleyman-btn--outline-green:hover { background: var(--kleyman-green); color: #fff; transform: translateY(-2px); }
/* "לכל הפרויקטים" CTA — sized up to feel like a real closing action for
   the section, not an afterthought link. Hover fills solid brand blue
   (not just a border/text-color tint) with a lift + tinted shadow, so it
   reads as a deliberate, distinct interaction rather than a generic
   color change. */
.kleyman-btn--sm {
	padding: 15px 40px;
	font-size: 15px;
	font-weight: 500;
	color: var(--kleyman-text);
	background: var(--kleyman-white);
	border-width: 1.5px;
}
.kleyman-btn--sm:hover {
	color: #fff;
	background: var(--kleyman-blue);
	border-color: var(--kleyman-blue);
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(12, 22, 58, .22);
}

.kleyman-pill {
	padding: 10px 22px;
	border-radius: 999px;
	border: 1.5px solid var(--kleyman-border);
	color: var(--kleyman-text-muted);
	font-weight: 400;
	font-size: 14px;
	transition: all .25s var(--kleyman-ease);
	white-space: nowrap;
}
.kleyman-pill:hover,
.kleyman-pill.is-active {
	border-color: var(--kleyman-blue);
	color: var(--kleyman-blue);
	background: rgba(12, 22, 58, 0.06);
}

/* Each homepage filter pill hovers/activates in its OWN category color
   (same blue/green/brown the logo and the project cards already use for
   that category — see project-card.php's $cat_color map) instead of every
   pill turning the one generic blue. A small lift + tinted shadow makes
   the state change feel deliberate rather than a bare color swap. */
.kleyman-projects__tabs .kleyman-pill { transform: translateY(0); }
.kleyman-projects__tabs .kleyman-pill--blue:hover,
.kleyman-projects__tabs .kleyman-pill--blue.is-active {
	border-color: var(--kleyman-blue);
	color: var(--kleyman-blue);
	background: rgba(12, 22, 58, .07);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(12, 22, 58, .16);
}
.kleyman-projects__tabs .kleyman-pill--green:hover,
.kleyman-projects__tabs .kleyman-pill--green.is-active {
	border-color: var(--kleyman-green);
	color: var(--kleyman-green);
	background: rgba(17, 121, 58, .07);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(17, 121, 58, .16);
}
.kleyman-projects__tabs .kleyman-pill--brown:hover,
.kleyman-projects__tabs .kleyman-pill--brown.is-active {
	border-color: var(--kleyman-brown);
	color: var(--kleyman-brown);
	background: rgba(138, 90, 51, .08);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(138, 90, 51, .16);
}

.kleyman-status-pill {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 999px;
}
.kleyman-status-pill--lg { font-size: 14px; padding: 8px 20px; margin-bottom: 16px; }

.kleyman-meta-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,.12);
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
}

/* Kleyman mark (SVG cube) --------------------------------------------- */
.kleyman-mark--cube { width: 28px; height: 32px; }
.kleyman-mark__face--top { fill: #1755C0; } /* logo keeps original brand colours */
.kleyman-mark__face--left { fill: #1CA148; }
.kleyman-mark__face--right { fill: #AF794D; }

/* Breadcrumbs ----------------------------------------------------------- */
.kleyman-breadcrumbs { margin: 16px 0; font-size: 13px; color: var(--kleyman-text-muted); }
.kleyman-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.kleyman-breadcrumbs li:not(:last-child)::after { content: '‹'; margin-inline-start: 6px; }
.kleyman-breadcrumbs a:hover { color: var(--kleyman-blue); }
.kleyman-project-hero .kleyman-breadcrumbs,
.kleyman-archive-hero .kleyman-breadcrumbs { color: rgba(255,255,255,.75); }
.kleyman-project-hero .kleyman-breadcrumbs a:hover,
.kleyman-archive-hero .kleyman-breadcrumbs a:hover { color: #fff; }

/* ==========================================================================
   Hero shell — the 90vw premium "card" on the white page (opened/closed
   entirely inside hero.php). REWORK: this used to be a padded container
   holding a narrower card; now the shell itself IS 90vw (capped 1800px),
   so the video runs edge-to-edge inside it and real page-margin shows on
   both sides at any desktop width — not a few hundred extra pixels of
   image inside a still-narrow frame.
   ========================================================================== */
.kleyman-hero-frame {
	position: relative;
	width: 95vw;
	max-width: 1900px;
	margin-inline: auto;
	padding-top: 20px;
}

/* ==========================================================================
   GLOBAL HERO / MASTHEAD SHELL (Oct 2026). One reusable "frame" every
   Hero / page masthead site-wide shares — side gaps, rounded corners,
   overflow:hidden clipping for whatever media/overlay/gradient lives
   inside it — so no page has a full-bleed hero next to another page's
   framed one. Single source of truth: these selectors only, nothing
   duplicated per template.
   Deliberately does NOT include .kleyman-hero-frame (the homepage hero)
   — brief: "לא לשנות את ה-content הקיים" on the homepage, and it already
   has its own equivalent floating/rounded/clipped treatment (see the
   rule right above this one), just built on a 95vw-based system instead
   of this fixed-gap one. Every other Hero/masthead in the theme —
   project-inner, press, about, the project archive, category masthead,
   and the generic inner-page hero shared by Contact/the rest — used to
   render full-bleed (no margin, no radius, no clipping) and now joins
   this one shared shell instead. Content inside each section (title,
   image, video, CTA, breadcrumbs, overlays, existing min-height per
   page) is untouched — only the container's own width/margin/radius/
   overflow, same as the header rework earlier this project.
   NOTE: .kleyman-header itself is explicitly NOT touched by this rule
   block — this is the Hero/masthead shell only. */
.kleyman-sp-hero,
.kleyman-pr-hero,
.kleyman-inner-hero,
.kleyman-cat-masthead,
.kleyman-archive-hero,
.kleyman-ab-hero {
	margin-inline: var(--hero-side-gap-desktop);
	/* Small top clearance so the now-rounded top corner doesn't sit flush
	   against the very top of the viewport — same offset the floating
	   header itself uses (--header-top-desktop etc.), so the hero reads
	   as "floating just below the header" rather than introducing a new,
	   unrelated spacing value. The header is position:fixed and these
	   sections start at the true page top (header-spacer is height:0), so
	   this margin is what actually creates that visual gap. */
	margin-block-start: var(--header-top-desktop);
	width: calc(100% - (var(--hero-side-gap-desktop) * 2));
	border-radius: var(--hero-radius-desktop);
	overflow: hidden;
	position: relative;
}
@media (max-width: 1024px) {
	.kleyman-sp-hero,
	.kleyman-pr-hero,
	.kleyman-inner-hero,
	.kleyman-cat-masthead,
	.kleyman-archive-hero,
	.kleyman-ab-hero {
		margin-inline: var(--hero-side-gap-tablet);
		margin-block-start: var(--header-top-tablet);
		width: calc(100% - (var(--hero-side-gap-tablet) * 2));
		border-radius: var(--hero-radius-tablet);
	}
}
@media (max-width: 640px) {
	.kleyman-sp-hero,
	.kleyman-pr-hero,
	.kleyman-inner-hero,
	.kleyman-cat-masthead,
	.kleyman-archive-hero,
	.kleyman-ab-hero {
		margin-inline: var(--hero-side-gap-mobile);
		margin-block-start: var(--header-top-mobile);
		width: calc(100% - (var(--hero-side-gap-mobile) * 2));
		border-radius: var(--hero-radius-mobile);
	}
}

/* ==========================================================================
   Header — GLOBAL FLOATING NAVY BAR (Oct 2026 rework). One single rule
   set, used as-is on every template (home included — the header no
   longer goes transparent/no-background on the front page to blend into
   the hero video; it is now the same solid navy pill everywhere, per the
   brief: "אין header full-width בעמוד אחד ו-floating בעמוד אחר"). Content,
   menu order, logo asset, CTA label/link and all functionality are
   unchanged from before this rework — only the container's visual
   structure (width/margin/radius/height/background) changed.
   ========================================================================== */
.kleyman-header {
	/*
	 * position:fixed (not sticky) is deliberate, carried over from the
	 * pre-rework inner-page implementation: .kleyman-header-spacer below
	 * forces its wrapper to height:0 so the header never reserves
	 * document-flow space (the hero/content that follows always starts at
	 * the very top of the page, behind the floating header). A sticky
	 * element can only stick within its own containing block, and with a
	 * 0-height parent it has nowhere to stick to — it would scroll away
	 * after the first pixel. Fixed has no such constraint, so the header
	 * stays visible while scrolling on every template, which is the
	 * "floating even on scroll" behavior the brief asks for.
	 * Centered via inset-inline:0 + margin-inline:auto rather than
	 * left:50%+transform:translateX(-50%) — a transformed ancestor would
	 * become the containing block for the mobile off-canvas nav drawer
	 * (also position:fixed), trapping it inside the header's own box
	 * instead of letting it cover the full viewport height.
	 */
	position: fixed;
	top: var(--header-top-desktop);
	left: auto;
	inset-inline: 0;
	transform: none;
	margin-inline: var(--header-side-gap-desktop);
	width: calc(100% - (var(--header-side-gap-desktop) * 2));
	max-width: none;
	z-index: 100;
	border-radius: var(--header-radius-desktop);
	background: var(--kleyman-dark);
	border: none;
	/* Oct 2026 fix: NOT overflow:hidden here — see the comment in
	   header.php above .kleyman-header__brand-mark-clip. The crop now
	   lives on that small dedicated wrapper instead, so it never clips
	   the mobile nav drawer (also a descendant of this element). */
	/* Soft brand-green ambient glow so the floating pill reads as
	   unmistakably "Kleyman" against whatever content scrolls underneath
	   it, plus a thin inset highlight for a touch of premium depth. */
	box-shadow:
		0 22px 50px rgba(17, 121, 58, .22),
		0 10px 28px rgba(0, 0, 0, .3),
		0 1px 0 rgba(255, 255, 255, .08) inset,
		0 0 0 1px rgba(17, 121, 58, .28);
}
/* Subtle brand detail — the original kleyman-symbol.svg at 1:1, white
   outline, very low opacity, cropped on one side so it reads as a quiet
   architectural texture, never a repeating pattern/wallpaper. */
.kleyman-header__brand-mark-clip {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.kleyman-header__brand-mark {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: -6%;
	transform: translateY(-50%);
	height: 220%;
	width: auto;
	opacity: .05;
	pointer-events: none;
	z-index: 0;
}

.kleyman-header__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--header-height-desktop);
	padding-inline: clamp(22px, 2vw, 28px);
}
.kleyman-logo { display: flex; align-items: center; gap: 10px; }
/* Hidden by default (desktop): the nav-embedded logo is the one shown.
   The mobile-only duplicate (see header.php) takes over under 640px. */
.kleyman-logo--mobile { display: none; }
.kleyman-logo__text { font-size: 22px; font-weight: 700; color: #fff; }
.kleyman-header .kleyman-logo__mark .kleyman-mark__face--top,
.kleyman-header .kleyman-logo__mark .kleyman-mark__face--left,
.kleyman-header .kleyman-logo__mark .kleyman-mark__face--right { fill-opacity: 1; }
/* Kept within the brief's 46–52px logo max-height so it comfortably fits
   the compact 68px-tall floating bar with room for its own padding. Same
   asset, same proportions — only the rendered height changed. */
.kleyman-logo__img { height: 48px; width: auto; display: block; }

/* Nav: two half-lists with the logo centered between them. .kleyman-nav
   is the ONLY flex child in .kleyman-header__inner (it spans the header's
   full width), and its 1fr/auto/1fr grid centers the logo on that full
   width — the CTA lives INSIDE the end-side column (grouped with the
   second nav list, see .kleyman-nav__end-group below) instead of
   floating separately, so it can never collide with or unbalance it. */
.kleyman-nav {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	/* Also the fixed logo↔nearest-item distance (grid `gap` sets the gutter
	   between every column regardless of how content aligns inside them).
	   Deliberately wider than .kleyman-nav__list's own item gap below —
	   the logo needs its own clear breathing room on both sides, distinct
	   from the (tighter, equal) spacing between the nav links themselves. */
	gap: 108px;
}
/*
 * Both halves now STRETCH across their whole 1fr grid column instead of
 * hugging the outer edge — previously that left a big block of dead
 * space between the nearest item and the logo. `justify-content:
 * space-between` (combined with `gap` as a floor) spreads every item
 * evenly across the full width; the grid's own 24px column gap is what
 * sets the logo-to-nearest-item distance, so that distance is already
 * identical on both sides by construction.
 */
.kleyman-nav__list { display: flex; align-items: center; gap: 56px; }
/*
 * The list box itself stretches to fill its whole grid column (so it
 * isn't left dangling far from the logo with dead space in between —
 * that was the earlier complaint), but its ITEMS pack toward the
 * logo-side edge of that box with the same fixed 56px gap as the grid
 * gap above, instead of spreading edge-to-edge: that's what kept
 * producing a tiny gap next to the logo and huge, uneven gaps between
 * the links themselves. Any leftover column width just becomes quiet
 * margin near the header's outer corner, which reads as normal
 * breathing room rather than a layout glitch.
 */
.kleyman-nav__list--start { justify-self: stretch; justify-content: flex-end; }
.kleyman-nav .kleyman-logo { justify-self: center; }
.kleyman-nav__end-group {
	justify-self: stretch;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
/* Two children only here — the nav list and the CTA — so space-between
   is unambiguous: the list packs flush against the logo-side edge
   (its own items use the same fixed 48px gap via .kleyman-nav__list
   above), and the CTA is pinned to the header's true outer corner,
   exactly like before. */
.kleyman-nav__link {
	color: rgba(255,255,255,.9);
	font-size: 21px;
	font-weight: 400;
	position: relative;
	padding-block: 4px;
}
.kleyman-nav__link::after {
	content: '';
	position: absolute;
	bottom: -2px; right: 0; left: 0;
	height: 2px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s var(--kleyman-ease), background-color .25s var(--kleyman-ease);
}
.kleyman-nav__link:hover::after,
.kleyman-nav__item.is-current .kleyman-nav__link::after { transform: scaleX(1); }
/*
 * Bring the logo's own three-color language into the nav: each link's
 * underline (and hover glow) cycles blue → green → brown, the same
 * palette as the logo mark and the timeline gradient elsewhere on the
 * page — so every item lights up a different one of the logo's colors
 * on hover instead of a single flat white line.
 */
.kleyman-nav__item:nth-child(3n+1) .kleyman-nav__link::after { background: var(--kleyman-blue-on-dark); }
.kleyman-nav__item:nth-child(3n+2) .kleyman-nav__link::after { background: var(--kleyman-green); }
.kleyman-nav__item:nth-child(3n) .kleyman-nav__link::after { background: var(--kleyman-brown); }
.kleyman-nav__item:nth-child(3n+1) .kleyman-nav__link:hover { text-shadow: 0 0 14px rgba(85, 113, 184,.6); }
.kleyman-nav__item:nth-child(3n+2) .kleyman-nav__link:hover { text-shadow: 0 0 14px rgba(17, 121, 58,.6); }
.kleyman-nav__item:nth-child(3n) .kleyman-nav__link:hover { text-shadow: 0 0 14px rgba(138, 90, 51,.6); }

.kleyman-header__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: none;
	/* Pill shape (border-radius: 999px) is already inherited from
	   .kleyman-btn. Sized here to the brief's 48–52px button height and
	   24–30px inline padding, transparent navy fill with a soft white
	   border — down from the larger 15px/34px/21px size the old
	   taller 96px header bar needed. */
	border: 1px solid rgba(255,255,255,.45);
	background: transparent;
	color: #fff;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 700;
	overflow: hidden;
	z-index: 0;
}
/* Same logo palette again, this time as the CTA's hover fill — a soft
   blue → green → brown sweep instead of the generic single-color
   outline hover it inherits from .kleyman-btn--outline. */
.kleyman-header__cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--kleyman-blue-on-dark), var(--kleyman-green), var(--kleyman-brown));
	opacity: 0;
	transition: opacity .3s var(--kleyman-ease);
	z-index: -1;
}
.kleyman-header__cta:hover { border-color: transparent; color: #fff; }
.kleyman-header__cta:hover::before { opacity: 1; }

.kleyman-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}
.kleyman-nav-toggle__bar { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
.kleyman-nav-toggle[aria-expanded="true"] .kleyman-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kleyman-nav-toggle[aria-expanded="true"] .kleyman-nav-toggle__bar:nth-child(2) { opacity: 0; }
.kleyman-nav-toggle[aria-expanded="true"] .kleyman-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/*
 * .kleyman-header-spacer: forces the wrapper around <header> to zero
 * height so the fixed header below never reserves document-flow space
 * (see the long comment in header.php) — the hero/content that follows
 * always starts at the very top of the page, with the header floating
 * over it, on every template alike (home included, now that .kleyman-header
 * is position:fixed everywhere rather than only on inner pages).
 */
.kleyman-header-spacer { height: 0; overflow: visible; }

/* ==========================================================================
   HERO — the 90vw card itself. REWORK: rounded on every corner at a
   larger, more confident radius; a single directional overlay (darker
   behind the text, lighter over the buildings) instead of a flat tint;
   one precisely-sized text block instead of type stretched to the
   container; true vertical centering (padding does the "slightly below
   middle" work) instead of bottom-anchoring.
   ========================================================================== */
.kleyman-hero {
	position: relative;
	display: flex;
	min-height: clamp(680px, 38vw, 780px);
	overflow: hidden;
	border-radius: 30px;
	isolation: isolate;
}
@media (min-width: 1800px) {
	.kleyman-hero { min-height: 820px; }
}
.kleyman-hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--kleyman-dark); }
.kleyman-hero__img,
.kleyman-hero__video {
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.03);
	will-change: transform;
}
/*
 * Centered composition (title/CTA/trust all share the hero's vertical
 * axis — see .kleyman-hero__content below), so the overlay is a plain
 * top+bottom vignette rather than a one-sided darken: a soft fade behind
 * the header band, buildings left clear in the middle, and a gentle
 * darken low down for the centered text + trust marks.
 */
.kleyman-hero__overlay {
	position: absolute; inset: 0;
	/*
	 * Two darkened bands: a soft one behind the header (0–20%), and a
	 * second, slightly deeper one that ramps in around the title's own
	 * height (roughly the bottom quarter, where the title + trust marks
	 * sit) so the white text reads clearly against the busy building
	 * photo without flattening the buildings in the clear middle band.
	 * Near-black navy rather than a pure tint, per the brief.
	 */
	background: linear-gradient(180deg,
		rgba(4,10,26,.52) 0%,
		rgba(4,10,26,0) 18%,
		rgba(4,10,26,0) 50%,
		rgba(4,10,26,.6) 74%,
		rgba(4,10,26,.78) 100%);
}
.kleyman-hero__content {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	padding-inline: clamp(28px, 5vw, 64px);
	/* Bottom padding trimmed (132 → 100) per client feedback — pulls the
	   title/button block down closer to the trust-badge strip beneath
	   it (which sits independently, `position: absolute; bottom: 40px`
	   on the hero) instead of leaving a big gap between them. */
	padding-block: 40px 100px;
	text-align: center;
}
.kleyman-hero__text { max-width: none; display: flex; flex-direction: column; align-items: center; }
.kleyman-hero__title {
	/* Enlarged per client feedback — still `white-space: nowrap`, which
	   is what actually guarantees the one-line read at any of these
	   sizes; the clamp's own max (76px) was sanity-checked against the
	   longest real headline ("משפחה שבונה באהבה") at the narrowest width
	   this rule still applies to (desktop, >1024px) and stays well
	   inside the hero's text column with room to spare. */
	font-size: clamp(38px, 4.2vw, 76px);
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-align: center;
}
.kleyman-hero__cta-row { margin-top: 18px; }
.kleyman-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--kleyman-dark);
	border: 1px solid #fff;
	border-radius: 999px;
	/* Slightly smaller per client feedback, and pulled closer to the
	   title above (margin-top reduced) + the trust badges below
	   (padding-block bottom reduced in .kleyman-hero__content) so the
	   whole title → button → badges cluster reads as one tight group
	   instead of three loosely related rows. */
	padding: 13px 28px;
	font-size: 14px;
	font-weight: 700;
	transition: background .25s var(--kleyman-ease), color .25s var(--kleyman-ease);
}
.kleyman-hero__cta:hover { background: transparent; color: #fff; }

/*
 * Trust strip: Dun's 100 + BDI Coface — these are the client's real,
 * finished award-badge graphics (each already a self-contained rounded
 * card with its own white/navy background and "2026" lettering baked
 * in), not flat logos, so they're shown as-is — no color inversion, no
 * extra pill wrapper competing with their own edges, and a light lift
 * (not a heavy shadow) so they read as credentials, not decoration.
 */
.kleyman-hero__trust {
	/*
	 * Centered without a `transform`, on purpose: this element also has
	 * data-animate="fade-up" (see animations.js), which animates its own
	 * `y` and — being the first GSAP tween to touch this element — ends
	 * up owning the whole `transform` property, silently dropping any
	 * centering done via `left:50% + transform:translateX(-50%)` (this
	 * is exactly what caused the Duns/BDI badges to render off-center
	 * once the entrance animation ran). inset-inline + margin-inline:auto
	 * centers an absolutely-positioned, intrinsically-sized element with
	 * no transform involved, so it can't collide with GSAP's own.
	 */
	position: absolute;
	inset-inline: 0;
	width: fit-content;
	margin-inline: auto;
	bottom: 40px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
}
.kleyman-hero__trust-logo {
	height: 72px;
	width: auto;
	display: block;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* ==========================================================================
   ABOUT
   Compact, horizontal composition matching the approved sketch 1:1: a large
   image hugging the gap on the left, a compact text block on the right,
   centered together on the same vertical axis. No watermark, no huge
   whitespace gulf between the columns.
   ========================================================================== */
.kleyman-about { padding-block: 70px; overflow: hidden; }
.kleyman-about .kleyman-container { max-width: min(92vw, 1450px); }
.kleyman-about__grid {
	display: grid;
	/* First-listed track sits at the inline-start (right, in this RTL site);
	   text (order:1) lands there small, the image (order:2) gets the larger
	   track and sits to its left, close against the gap. */
	grid-template-columns: minmax(360px, .75fr) minmax(0, 1.35fr);
	column-gap: clamp(55px, 6vw, 110px);
	align-items: center;
}
.kleyman-about__media { order: 2; }
.kleyman-about__text { order: 1; position: relative; max-width: 470px; }
.kleyman-about__collage {
	position: relative;
	/* Nudged further left, away from the gap/text column — width shrinks by
	   the same amount as the start margin so it never overflows its track. */
	width: calc(100% - clamp(20px, 3vw, 40px));
	max-width: 760px;
	aspect-ratio: 931 / 471;
	margin-inline-start: clamp(20px, 3vw, 40px);
}
.kleyman-about__collage-frame,
.kleyman-about__collage-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.kleyman-about__collage-frame {
	z-index: 1;
	opacity: .32;
}
.kleyman-about__collage-photo {
	z-index: 2;
	animation: kleyman-about-float 7s ease-in-out infinite;
	will-change: transform;
}
@keyframes kleyman-about-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-10px) rotate(-.4deg); }
}
@media (prefers-reduced-motion: reduce) {
	.kleyman-about__collage-photo { animation: none; }
}

.kleyman-about__title { position: relative; font-size: clamp(44px, 3.2vw, 60px); font-weight: 700; line-height: 1.08; }
.kleyman-about__title-blue { color: var(--kleyman-blue); display: block; }
.kleyman-about__title-green { color: var(--kleyman-green); display: block; }
.kleyman-about__subtitle { position: relative; color: var(--kleyman-brown); font-size: 40px; font-weight: 400; margin-top: 12px; }
.kleyman-about__body { position: relative; z-index: 1; margin-top: 22px; color: var(--kleyman-text-muted); display: grid; gap: 20px; max-width: 460px; font-size: 18px; line-height: 1.75; }
/* Justify re-attempted per request. The earlier word-breaking was traced
   live to the Ploni webfont's kerning/ligature glyph substitution
   interacting with Chrome's justification pass — not a fundamental RTL
   justify issue (confirmed by swapping to a system font, which justified
   cleanly). Disabling kerning/ligatures on this paragraph keeps the glyphs
   intact while still allowing clean inter-word justification. */
.kleyman-about__body p {
	text-align: justify;
	text-align-last: right;
	text-justify: inter-word;
	font-kerning: none;
	font-variant-ligatures: none;
	font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "calt" 0;
}
/* Pale background watermark, BEHIND the body copy — its original spot,
   right above the paragraphs, now pulled down further so it overlaps the
   first two lines of body text, sitting on a lower z-index than the
   (opaque) paragraph text above it. */
.kleyman-about__watermark {
	position: relative;
	margin-top: 18px;
	margin-bottom: -80px;
	font-family: -apple-system, "Segoe UI", Arial, sans-serif; /* Latin text only — see .kleyman-stat__value comment on the Ploni bold-digit bug */
	font-size: clamp(40px, 4.4vw, 58px);
	line-height: 1;
	font-weight: 700;
	color: rgba(12, 22, 58, .08);
	text-align: center;
	z-index: 0;
	pointer-events: none;
	letter-spacing: 2px;
	white-space: nowrap;
}
/* Small, subtle outline pill flush against the LEFT edge of the text
   column (matching the sketch) — not a bold green CTA at rest, but a
   green shine sweep + green outline on hover. */
.kleyman-about__text .kleyman-btn {
	position: relative;
	overflow: hidden;
	margin-top: 30px;
	display: flex;
	align-items: center;
	width: fit-content;
	margin-inline-start: auto;
	margin-inline-end: 0;
	height: 44px;
	padding-inline: 28px;
	border: 1px solid #C4C8CE;
	border-radius: 999px;
	background: transparent;
	color: var(--kleyman-text);
	font-size: 14px;
	font-weight: 600;
	transition: border-color .3s var(--kleyman-ease), color .3s var(--kleyman-ease), background-color .3s var(--kleyman-ease);
}
.kleyman-about__text .kleyman-btn::after {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-start: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .85), transparent);
	transform: skewX(-20deg);
	transition: inset-inline-start .65s var(--kleyman-ease);
	pointer-events: none;
}
.kleyman-about__text .kleyman-btn:hover {
	border-color: var(--kleyman-green);
	color: var(--kleyman-green);
	background: rgba(17, 121, 58, .06);
	transform: none;
}
.kleyman-about__text .kleyman-btn:hover::after {
	inset-inline-start: 120%;
}

/* ==========================================================================
   ACTIVITY AREAS
   ========================================================================== */
.kleyman-areas { padding-block: 40px 96px; text-align: center; }
.kleyman-areas .kleyman-container { max-width: min(94vw, 1450px); }
/* Base is Regular on purpose — only the <strong> accent phrase is Bold,
   matching the design's mixed-weight headings (never the whole title
   uniformly bold). */
.kleyman-areas__title { font-size: clamp(30px, 3.6vw, 42px); font-weight: 400; color: var(--kleyman-blue); }
.kleyman-areas__title strong { color: var(--kleyman-green); font-weight: 700; }
.kleyman-areas__subtitle { color: var(--kleyman-text-muted); margin-top: 10px; font-size: clamp(17px, 1.4vw, 20px); }

.kleyman-areas__grid {
	display: flex;
	justify-content: center;
	gap: 32px;
	margin-top: 56px;
	flex-wrap: wrap;
}
/* Each area image (1.png–4.png, 387×308) is a single pre-composed graphic:
   photo half + solid brand-color half + hexagon outline, all baked in by
   the designer. We show it whole (no clip-path cropping) and lay the label
   over the solid-color half as a separate absolutely-positioned layer,
   since that half's position/shape is identical across all four images.
   The solid-color half sits on the image's visual RIGHT side, so the panel
   is inset from the physical right (a small inset-inline-start in RTL,
   where inline-start = right) and physical left (a larger inset-inline-end,
   where inline-end = left) — swapping these would put the label over the
   photo half instead. */
.kleyman-area {
	position: relative;
	display: block;
	width: clamp(230px, 21vw, 312px);
	text-align: start;
	transition: transform .3s var(--kleyman-ease), filter .3s var(--kleyman-ease);
}
.kleyman-area__photo {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
}
.kleyman-area__photo img { display: block; width: 100%; height: auto; }

.kleyman-area__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 3%;
	inset-inline-end: 45%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	padding-inline-start: 7%;
	color: #fff;
	z-index: 1;
	pointer-events: none;
}
/* Medium weight ("a bit thicker" than the ULight we first tried) + vertical
   centering matches the reference sketch's label placement. Each label is
   forced onto exactly two lines via two separate spans rather than
   relying on natural wrapping — a single-word line (e.g. "ציבור") would
   otherwise sit on one line at this panel width and break the rhythm
   with the longer two-word labels. */
.kleyman-area__label { display: flex; flex-direction: column; gap: 3px; font-size: clamp(16px, 1.7vw, 20px); font-weight: 500; line-height: 1.3; }
.kleyman-area__label-line { display: block; white-space: nowrap; }
/* The arrow SVG is authored pointing right; mirrored here so it points
   toward the reading-start (left) side, matching RTL "forward" direction —
   the raw markup isn't flipped so a future LTR variant wouldn't need to
   re-draw the path. */
.kleyman-area__arrow { transition: transform .3s var(--kleyman-ease); }
.kleyman-area__arrow svg { transform: scaleX(-1); }
/* Hover lifts the whole card (image + panel move together as one unit,
   nothing scales inside its own box) so there's no risk of the artwork's
   edges getting clipped by the photo container's overflow:hidden — the
   scale-on-hover we tried earlier did exactly that. The entrance animation
   for these cards (animations.js, "area-reveal") deliberately never sets
   an inline transform on .kleyman-area itself — only on its children —
   so this CSS :hover transform is never shadowed by a leftover inline
   style the way it was when these cards used the generic fade-up tween. */
.kleyman-area:hover { transform: translateY(-8px); filter: drop-shadow(0 18px 28px rgba(15, 23, 42, .2)); }
.kleyman-area:hover .kleyman-area__arrow { transform: translateX(-4px); }

/* ==========================================================================
   PROCESS TIMELINE
   ========================================================================== */
.kleyman-process { background: #F6F6F6; color: var(--kleyman-text); padding-block: 110px; }
/* Mixed weight/color by design: three phrases, first Regular + blue, the
   other two Bold in green/brown — not one uniform-weight, single-tone line. */
.kleyman-process__title { text-align: center; font-size: clamp(28px, 3.6vw, 40px); }
.kleyman-process__title-blue { color: var(--kleyman-blue); font-weight: 400; }
.kleyman-process__title-brown { color: var(--kleyman-brown); font-weight: 700; }
.kleyman-process__title-green { color: var(--kleyman-green); font-weight: 700; }
.kleyman-process__subtitle { text-align: center; color: var(--kleyman-text-muted); max-width: none; white-space: nowrap; margin: 18px auto 0; font-size: 20px; }

.kleyman-timeline {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin-top: 146px;
	padding-top: 84px;
	padding-bottom: 169px;
	/* No flex-direction override here on purpose: the page is dir="rtl",
	   so the default `row` already flows right-to-left — step 1 (first
	   in source order) lands rightmost and step N lands leftmost, which
	   is the correct reading order. `row-reverse` was flipping that back
	   to an LTR-looking layout (step 1 on the left), which is the bug
	   this comment used to describe as intentional. */
}
/* Decorative chevron-diamond graphic behind the line/icons — purely
   ornamental (client-supplied asset), centered on the timeline's own
   horizontal axis so the line and dots always paint over it. Sits first
   in source order (behind everything else, no z-index tug-of-war needed
   since every sibling after it is itself position:absolute/relative and
   paints later in the same stacking context). */
.kleyman-timeline__deco {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: min(760px, 64%);
	pointer-events: none;
}
.kleyman-timeline__deco img { display: block; width: 100%; height: auto; }
.kleyman-timeline__line {
	position: absolute;
	top: 50%; right: 0; left: 0;
	height: 2px;
	background: var(--kleyman-border);
	transform: translateY(-50%);
}
.kleyman-timeline__line-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--kleyman-blue), var(--kleyman-green), var(--kleyman-brown));
}
.kleyman-timeline__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}
/* Each step is a hoverable/focusable/tappable "hot spot" — bigger hit
   target than the icon alone, and the cursor + outline say so. */
.kleyman-timeline__hit {
	position: absolute;
	inset: 0;
	z-index: 3;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}
.kleyman-timeline__hit:focus-visible { outline: none; }
.kleyman-timeline__hit:focus-visible ~ .kleyman-timeline__icon { box-shadow: 0 0 0 4px rgba(12, 22, 58,.25); }
.kleyman-timeline__icon {
	position: absolute;
	width: 84px; height: 84px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	border: 4px solid #F6F6F6;
	/* Depth over flatness: a soft outer drop shadow (colored, not just
	   grey) plus a top inner highlight and bottom inner shade, so the
	   circle reads as a lit sphere rather than a flat tinted dot — this
	   is what was making the icons feel "cheap" against the busy deco
	   graphic behind them. */
	box-shadow:
		0 12px 22px -8px rgba(12, 22, 58, .38),
		inset 0 2px 3px rgba(255, 255, 255, .3),
		inset 0 -4px 7px rgba(0, 0, 0, .16);
	transition: transform .3s var(--kleyman-ease), box-shadow .3s var(--kleyman-ease);
}
.kleyman-timeline__icon svg { width: 30px; height: 30px; stroke-width: 1.8; position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.kleyman-timeline__step--above .kleyman-timeline__icon { bottom: calc(100% + 56px); }
.kleyman-timeline__step--below .kleyman-timeline__icon { top: calc(100% + 56px); }
.kleyman-timeline__step--blue .kleyman-timeline__icon { background: linear-gradient(145deg, #2E6FE0, var(--kleyman-blue-dark)); }
.kleyman-timeline__step--green .kleyman-timeline__icon { background: linear-gradient(145deg, #24C158, #14793A); }
.kleyman-timeline__step--brown .kleyman-timeline__icon { background: linear-gradient(145deg, #C7976A, #8F6039); }
.kleyman-timeline__step:hover .kleyman-timeline__icon,
.kleyman-timeline__step.is-active .kleyman-timeline__icon,
.kleyman-timeline__hit:focus-visible ~ .kleyman-timeline__icon { transform: scale(1.1); }
.kleyman-timeline__connector {
	position: absolute;
	width: 1.5px;
	background: var(--kleyman-border);
	left: 50%;
}
.kleyman-timeline__step--above .kleyman-timeline__connector { bottom: 50%; height: 56px; }
.kleyman-timeline__step--below .kleyman-timeline__connector { top: 50%; height: 56px; }
.kleyman-timeline__dot {
	width: 38px; height: 38px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: -apple-system, "Segoe UI", Arial, sans-serif; /* digits only — see .kleyman-stat__value comment on the Ploni bold-digit bug */
	font-size: 16px; font-weight: 700;
	color: #fff;
	position: relative;
	z-index: 2;
	border: 3px solid #F6F6F6;
	box-shadow:
		0 6px 12px -4px rgba(12, 22, 58, .35),
		inset 0 1px 2px rgba(255, 255, 255, .3),
		inset 0 -2px 4px rgba(0, 0, 0, .16);
	transition: transform .3s var(--kleyman-ease);
}
.kleyman-timeline__step--blue .kleyman-timeline__dot { background: linear-gradient(145deg, #2E6FE0, var(--kleyman-blue-dark)); }
.kleyman-timeline__step--green .kleyman-timeline__dot { background: linear-gradient(145deg, #24C158, #14793A); }
.kleyman-timeline__step--brown .kleyman-timeline__dot { background: linear-gradient(145deg, #C7976A, #8F6039); }
.kleyman-timeline__step:hover .kleyman-timeline__dot,
.kleyman-timeline__step.is-active .kleyman-timeline__dot { transform: scale(1.15); }
.kleyman-timeline__label {
	position: absolute;
	font-size: 17px;
	white-space: nowrap;
	color: var(--kleyman-text);
	font-weight: 400;
	text-align: center;
	transition: color .25s var(--kleyman-ease);
}
.kleyman-timeline__step--above .kleyman-timeline__label { bottom: calc(100% + 142px); }
.kleyman-timeline__step--below .kleyman-timeline__label { top: calc(100% + 142px); }
.kleyman-timeline__step--blue:hover .kleyman-timeline__label,
.kleyman-timeline__step--blue.is-active .kleyman-timeline__label { color: var(--kleyman-blue); }
.kleyman-timeline__step--green:hover .kleyman-timeline__label,
.kleyman-timeline__step--green.is-active .kleyman-timeline__label { color: var(--kleyman-green); }
.kleyman-timeline__step--brown:hover .kleyman-timeline__label,
.kleyman-timeline__step--brown.is-active .kleyman-timeline__label { color: var(--kleyman-brown); }

/* ---------------------------------------------------------------------
   Hover/tap detail card — the "experiential" layer. Anchored to the
   icon and always opening toward the icon's own side (above steps open
   further up, below steps open further down), so it never collides with
   the label that already sits past the icon on the same side. Pure
   overlay (absolute, own z-index): it's fine for it to pass over
   neighbouring steps' content while open, exactly like the reference
   site's own popovers do.
   ------------------------------------------------------------------- */
.kleyman-timeline__detail {
	position: absolute;
	left: 50%;
	width: 320px;
	transform: translateX(-50%) scale(.94);
	background: #fff;
	border-radius: var(--kleyman-radius-md);
	box-shadow: var(--kleyman-shadow-md);
	padding: 24px 26px;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s var(--kleyman-ease), transform .25s var(--kleyman-ease);
	z-index: 5;
}
.kleyman-timeline__step--above .kleyman-timeline__detail { bottom: calc(100% + 20px); transform: translateX(-50%) translateY(8px) scale(.94); }
.kleyman-timeline__step--below .kleyman-timeline__detail { top: calc(100% + 20px); transform: translateX(-50%) translateY(-8px) scale(.94); }
.kleyman-timeline__step:hover .kleyman-timeline__detail,
.kleyman-timeline__step.is-active .kleyman-timeline__detail,
.kleyman-timeline__hit:focus-visible ~ .kleyman-timeline__detail {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0) scale(1);
}
/* Little tail pointing back at the icon. */
.kleyman-timeline__detail::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 14px; height: 14px;
	background: #fff;
	transform: translateX(-50%) rotate(45deg);
}
.kleyman-timeline__step--above .kleyman-timeline__detail::after { bottom: -6px; box-shadow: 3px 3px 6px rgba(12,22,58,.04); }
.kleyman-timeline__step--below .kleyman-timeline__detail::after { top: -6px; box-shadow: -3px -3px 6px rgba(12,22,58,.04); }
.kleyman-timeline__detail-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
}
.kleyman-timeline__step--blue .kleyman-timeline__detail-title { color: var(--kleyman-blue); }
.kleyman-timeline__step--green .kleyman-timeline__detail-title { color: var(--kleyman-green); }
.kleyman-timeline__step--brown .kleyman-timeline__detail-title { color: var(--kleyman-brown); }
.kleyman-timeline__detail-text {
	font-size: 15px;
	line-height: 1.65;
	color: var(--kleyman-text-muted);
	white-space: normal;
}

/* ==========================================================================
   PROJECTS — rebuilt 1:1 against the approved sketch (v1.0.57). Clean,
   quiet, luxury tiles: no corner bracket, no hover arrow, no heavy shadow —
   those belong to the Project Archive's card treatment only (scoped off
   below), not to this homepage grid.
   ========================================================================== */
.kleyman-projects { padding-block: 100px; background: var(--kleyman-white); overflow-x: clip; }
/* Mixed weight by design: base title text is Regular dark, the accent word
   is Bold + brand blue — not a uniformly bold heading. */
/* Same scale as the activity-areas title right above this section
   ("ארבע תחומים. חזון אחד.") — was noticeably smaller before, which read
   as a lesser heading instead of a matching section title. */
/* width: fit-content + margin-inline: auto shrinks the heading's own box
   to the rendered text's actual width (rather than the full-width block
   box text-align:center alone would leave it), so the [data-heading-fx
   ="underline"] ::after rule's "centered at 50% of my own box" is
   guaranteed to land under the visible text's real center — not just the
   container's center — on every line-wrap/viewport combination. */
.kleyman-projects__title { text-align: center; font-size: clamp(30px, 3.6vw, 42px); font-weight: 400; color: var(--kleyman-text); width: fit-content; margin-inline: auto; }
.kleyman-projects__title-accent { color: var(--kleyman-blue); font-weight: 700; }

/* Filter pills: white chip, hairline border, pill radius, quiet gray text —
   identical order/labels/wording to the sketch (no reordering, no active
   state shown by default). */
/* Centered row, pills grouped close together (matches the sketch) rather
   than stretched edge-to-edge with justify-content:space-between — that
   read as too spaced out once the pills were sized up. Still bigger pills,
   just clustered instead of spread across the full grid width. */
.kleyman-projects__tabs { position: relative; display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 32px; flex-wrap: wrap; max-width: min(94vw, 1560px); margin-inline: auto; }
.kleyman-projects__tabs .kleyman-pill {
	padding: 17px 38px;
	font-size: 16px;
	font-weight: 400;
	background: var(--kleyman-white);
	border-color: var(--kleyman-border);
}

/* Grid sits over a subtle decorative outline graphic; the image itself has
   an opaque light-gray fill (not a transparent PNG), so mix-blend-mode is
   what makes only the colored facet lines read against the white section —
   plain opacity would leave a visible gray box. */
.kleyman-projects__grid-wrap { position: relative; margin-top: 44px; }
.kleyman-projects__bg {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
	width: 122%;
	max-width: 1900px;
	mix-blend-mode: multiply;
	opacity: .6;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
.kleyman-projects__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	max-width: min(94vw, 1560px);
	margin-inline: auto;
}
/* Invisible filler cells the JS filter appends when a category has fewer
   than 8 real projects (e.g. "מסחר ותעסוקה"), so the grid always keeps its
   full 2-row (or breakpoint-equivalent) height instead of collapsing to
   however many cards actually matched — the section shouldn't visibly
   jump/shrink depending on which pill is active. Same box as a real card
   (aspect-ratio + radius) so it reserves identical grid-track space, just
   with nothing drawn and no interaction. */
.kleyman-projects__grid-filler {
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	visibility: hidden;
	pointer-events: none;
}
.kleyman-projects__more { text-align: center; margin-top: 44px; }

/* Live per-category counts on each pill (e.g. "מגורים 16") — filled in by
   JS from the public REST API once on load, so a person can see how much
   is actually behind a category before clicking it. Quiet by default,
   picks up the pill's own active color once selected. */
.kleyman-pill__count {
	display: inline-block;
	min-width: 1em;
	margin-inline-start: 6px;
	font-size: 12px;
	font-weight: 700;
	opacity: .55;
	transition: opacity .25s var(--kleyman-ease);
}
.kleyman-projects__tabs .kleyman-pill:hover .kleyman-pill__count,
.kleyman-projects__tabs .kleyman-pill.is-active .kleyman-pill__count { opacity: .9; }
.kleyman-pill__count:empty { display: none; }

/* Slim progress bar near the tabs while an AJAX category fetch is in
   flight, instead of dimming the whole grid to gray (which reads as
   "broken" for a moment). Fades in only once a request is actually
   running, and only if it takes long enough to notice. */
.kleyman-projects__loadbar {
	position: absolute;
	right: 50%;
	bottom: -14px;
	transform: translateX(50%);
	width: 64px;
	height: 3px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(12, 22, 58, .12);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s var(--kleyman-ease);
}
.kleyman-projects__loadbar.is-active { opacity: 1; }
.kleyman-projects__loadbar::after {
	content: '';
	position: absolute;
	inset: 0;
	width: 40%;
	background: var(--kleyman-blue);
	border-radius: 999px;
	animation: kleyman-loadbar-sweep 1s ease-in-out infinite;
}
@keyframes kleyman-loadbar-sweep {
	0%   { transform: translateX(-140%); }
	100% { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) {
	.kleyman-projects__loadbar::after { animation: none; }
}

.kleyman-project-card { position: relative; }
.kleyman-project-card__link {
	position: relative;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	box-shadow: var(--kleyman-shadow-sm);
}
.kleyman-project-card__corner {
	position: absolute;
	top: 0; right: 0;
	width: 46px; height: 46px;
	border-top: 2px solid var(--kleyman-blue);
	border-inline-end: 2px solid var(--kleyman-blue);
	border-start-end-radius: var(--kleyman-radius-md);
	z-index: 3;
	opacity: .8;
}
.kleyman-project-card--green .kleyman-project-card__corner { border-color: var(--kleyman-green); }
.kleyman-project-card--brown .kleyman-project-card__corner { border-color: var(--kleyman-brown); }
.kleyman-project-card__media { position: absolute; inset: 0; }
/* Oct 2026 — new brief ("cinematic... project-discovery grid with
   controlled hover-scale, 1.15–1.25x"): was scale(1.04), barely
   perceptible. This is the shared project-card component used on the
   homepage grid, every category page and the project archive, so the one
   change reaches all of them. Slower duration (.6s → .9s) so the zoom reads
   as a deliberate, confident move rather than a snap. */
.kleyman-project-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--kleyman-ease); }
.kleyman-project-card__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12,22,58,0) 42%, rgba(12,22,58,.78) 100%);
	transition: opacity .3s var(--kleyman-ease);
}
.kleyman-project-card .kleyman-status-pill { position: absolute; top: 16px; left: 16px; z-index: 2; }
.kleyman-project-card__caption {
	position: absolute;
	bottom: 20px; right: 20px; left: 20px;
	z-index: 2;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 2px;
	transition: transform .3s var(--kleyman-ease);
}
.kleyman-project-card__city { font-size: 13px; opacity: .85; }
.kleyman-project-card__name { font-size: 22px; font-weight: 700; }
.kleyman-project-card__arrow {
	position: absolute;
	bottom: 20px; left: 20px;
	z-index: 2;
	color: #fff;
	opacity: 0;
	transition: opacity .3s var(--kleyman-ease), transform .3s var(--kleyman-ease);
}
.kleyman-project-card__link:hover .kleyman-project-card__img { transform: scale(1.18); }
.kleyman-project-card__link:hover .kleyman-project-card__caption { transform: translateY(-4px); }
.kleyman-project-card__link:hover .kleyman-project-card__arrow { opacity: 1; transform: translateX(-3px); }

/* Homepage grid only: no corner bracket, no hover arrow (not in the
   sketch), smaller/quieter status pill and caption scaled to the smaller
   tile, no shadow-on-hover flourish — the Project Archive keeps its own
   look untouched since it shares this same partial. */
.kleyman-projects__grid .kleyman-project-card__corner,
.kleyman-projects__grid .kleyman-project-card__arrow { display: none; }
.kleyman-projects__grid .kleyman-status-pill { top: 16px; left: 16px; right: auto; font-size: 14px; font-weight: 700; padding: 8px 20px; }
.kleyman-projects__grid .kleyman-project-card__caption { bottom: 20px; right: 20px; left: 20px; gap: 6px; }
/* City/name sized up again in step with the wider grid (the section now
   uses much more of the viewport width, so the cards themselves are
   bigger — text needed to grow proportionally with them, not stay fixed
   while the tiles around it grew). */
.kleyman-projects__grid .kleyman-project-card__city { font-size: 16px; opacity: .85; }
.kleyman-projects__grid .kleyman-project-card__name { font-size: 29px; font-weight: 700; line-height: 1.15; }

/* ==========================================================================
   NUMBERS — rebuilt v1.0.66: a real architectural 3x2 grid of stat blocks,
   held together by a divider system built FROM the logo mark itself (two
   hairlines + the isometric cube sitting on each of their two junctions),
   not a stray icon floating next to a number. See __divider/__joint below.
   ========================================================================== */
.kleyman-numbers { background: var(--kleyman-light); padding-block: 110px; text-align: center; position: relative; overflow: hidden; }

/* Kicker: dropped the small tracked-out label + rules in favour of the
   same big, pale, English-watermark treatment already established in the
   "מהיסודות של משפחה" section (see .kleyman-about__watermark) — large,
   bold, low-opacity brand blue, sitting absolutely behind the title so it
   reads as one quiet architectural mark the headline sits in front of,
   not a separate eyebrow line stacked above it. */
.kleyman-numbers__title-wrap { position: relative; }
.kleyman-numbers__watermark {
	position: absolute;
	top: -0.3em;
	left: 50%;
	transform: translateX(-50%);
	font-family: -apple-system, "Segoe UI", Arial, sans-serif; /* Latin only */
	font-size: clamp(52px, 7.4vw, 104px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 3px;
	color: rgba(12, 22, 58, .08);
	white-space: nowrap;
	z-index: 0;
	pointer-events: none;
}

/* Title: clearer weight hierarchy than before — the headline figure reads
   as the dominant line, the second line quietly supports it rather than
   matching it stroke-for-stroke. Sized up a step so it reads as a proper
   section headline against the (now much bigger) watermark behind it. */
.kleyman-numbers__title { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kleyman-numbers__title-main { font-size: clamp(36px, 4.8vw, 54px); font-weight: 700; color: var(--kleyman-brown); line-height: 1.15; }
.kleyman-numbers__title-sub { font-size: clamp(21px, 2.7vw, 30px); font-weight: 400; color: var(--kleyman-green); line-height: 1.3; }
.kleyman-numbers__subtitle { position: relative; z-index: 1; color: var(--kleyman-text-muted); margin-top: 18px; font-size: 17.5px; line-height: 1.7; max-width: 48ch; margin-inline: auto; }

/* Short fading rule between the subtitle and the grid — same visual
   language as the divider hairlines inside the grid, so the whole section
   reads as one composed system instead of a title stacked on top of a
   separate data block. */
.kleyman-numbers__rule { display: block; width: 120px; height: 1px; margin: 40px auto 0; background: linear-gradient(90deg, transparent, var(--kleyman-border), transparent); }

.kleyman-numbers__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1px 1fr 1px 1fr;
	grid-template-rows: auto 1px auto;
	column-gap: 34px;
	row-gap: 40px;
	margin-top: 44px;
	align-items: start;
}
.kleyman-numbers__grid .kleyman-stat:nth-child(1) { grid-column: 1; grid-row: 1; }
.kleyman-numbers__grid .kleyman-stat:nth-child(2) { grid-column: 3; grid-row: 1; }
.kleyman-numbers__grid .kleyman-stat:nth-child(3) { grid-column: 5; grid-row: 1; }
.kleyman-numbers__grid .kleyman-stat:nth-child(4) { grid-column: 1; grid-row: 3; }
.kleyman-numbers__grid .kleyman-stat:nth-child(5) { grid-column: 3; grid-row: 3; }
.kleyman-numbers__grid .kleyman-stat:nth-child(6) { grid-column: 5; grid-row: 3; }

.kleyman-stat { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.kleyman-stat__accent { width: 22px; height: 2px; border-radius: 1px; }
.kleyman-stat--blue .kleyman-stat__accent { background: var(--kleyman-blue); }
.kleyman-stat--green .kleyman-stat__accent { background: var(--kleyman-green); }
.kleyman-stat--brown .kleyman-stat__accent { background: var(--kleyman-brown); }
/*
 * font-family override: the client-supplied "Ploni" bold cuts (700/800)
 * have broken advance-width metrics on several digits (confirmed via
 * isolated render test: "1" and "9" glyphs visually collide with the
 * digit right after them, reproducible at every weight/size, and only
 * in Ploni — Arial/system-ui render the exact same string cleanly). This
 * is a defect in the font file itself, not something CSS kerning can
 * patch. These elements only ever hold digits (+ , . -), never Hebrew
 * text, so it's safe to render them in the system font stack instead of
 * chasing a fix inside a broken webfont.
 */
.kleyman-stat__value { font-family: -apple-system, "Segoe UI", Arial, sans-serif; font-size: clamp(36px, 4.6vw, 52px); font-weight: 700; letter-spacing: -0.01em; color: var(--kleyman-text); direction: ltr; unicode-bidi: isolate; }
.kleyman-stat__label { color: var(--kleyman-text-muted); font-size: 18px; font-weight: 500; line-height: 1.5; max-width: 19ch; }

/* Divider system: two vertical hairlines (the column boundaries) and one
   horizontal hairline (the row boundary), each fading out at its ends
   instead of hard-cutting, plus the logo's cube sitting exactly on the
   two points where a vertical and the horizontal line meet. The joint's
   background matches the section background, so the hairlines visually
   terminate INTO the mark rather than being crossed by a random icon —
   this is the "logo as structural divider" the brief calls for. */
.kleyman-numbers__divider { pointer-events: none; }
.kleyman-numbers__divider--v1,
.kleyman-numbers__divider--v2 {
	grid-row: 1 / 4;
	width: 1px;
	justify-self: center;
	background: linear-gradient(180deg, transparent 0%, var(--kleyman-border) 20%, var(--kleyman-border) 80%, transparent 100%);
}
.kleyman-numbers__divider--v1 { grid-column: 2; }
.kleyman-numbers__divider--v2 { grid-column: 4; }
.kleyman-numbers__divider--h {
	grid-column: 1 / 6;
	grid-row: 2;
	align-self: center;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--kleyman-border) 10%, var(--kleyman-border) 90%, transparent 100%);
}
.kleyman-numbers__joint {
	grid-row: 2;
	align-self: center;
	justify-self: center;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 68px;
	/* Same background-match trick as before: the hairlines visually
	   terminate into this box, which is invisible against the section
	   background — the client's own logo PNG (transparent, tall/vertical)
	   sits on top of it, unobstructed since it has no backdrop of its own. */
	background: var(--kleyman-light);
}
.kleyman-numbers__joint--1 { grid-column: 2; }
.kleyman-numbers__joint--2 { grid-column: 4; }
.kleyman-numbers__joint-img { width: 32px; height: auto; display: block; }

/* Tablet ONLY (901-1024px): 3 columns don't have room, fold to 2
   columns / 3 rows. The divider system re-flows with them rather than
   disappearing — one vertical hairline down the middle, two horizontal
   hairlines (reusing the --v2/--h elements, repurposed via grid
   placement, not duplicated markup) and the two joints stay exactly
   where the lines still cross.
   Oct 2026 fix: this used to run at every width <=1024px, which meant
   real phones up to and including large/landscape ones (anything
   between 641-1024px) got this 2-per-row layout too — reported as
   "messy, 2 per row, diagonal", since each row's height varies with the
   label's line count and the two stats in a row don't bottom-align. The
   single-column mobile layout below now takes over earlier (<=900px)
   specifically so this cramped 2-column version is reserved for actual
   tablet widths only. */
@media (min-width: 901px) and (max-width: 1024px) {
	.kleyman-numbers__grid {
		grid-template-columns: 1fr 1px 1fr;
		grid-template-rows: auto 1px auto 1px auto;
		row-gap: 36px;
	}
	.kleyman-numbers__grid .kleyman-stat:nth-child(1) { grid-column: 1; grid-row: 1; }
	.kleyman-numbers__grid .kleyman-stat:nth-child(2) { grid-column: 3; grid-row: 1; }
	.kleyman-numbers__grid .kleyman-stat:nth-child(3) { grid-column: 1; grid-row: 3; }
	.kleyman-numbers__grid .kleyman-stat:nth-child(4) { grid-column: 3; grid-row: 3; }
	.kleyman-numbers__grid .kleyman-stat:nth-child(5) { grid-column: 1; grid-row: 5; }
	.kleyman-numbers__grid .kleyman-stat:nth-child(6) { grid-column: 3; grid-row: 5; }

	.kleyman-numbers__divider--v1 { grid-row: 1 / 6; }
	.kleyman-numbers__divider--h { grid-column: 1 / 4; grid-row: 2; }
	/* Repurposed as the SECOND horizontal hairline (between rows 2 and 3)
	   instead of the desktop's second vertical column boundary — same
	   element, same visual language, different job at this width. */
	.kleyman-numbers__divider--v2 {
		grid-column: 1 / 4;
		grid-row: 4;
		width: auto;
		height: 1px;
		background: linear-gradient(90deg, transparent 0%, var(--kleyman-border) 10%, var(--kleyman-border) 90%, transparent 100%);
	}
	.kleyman-numbers__joint--1 { grid-column: 2; grid-row: 2; }
	.kleyman-numbers__joint--2 { grid-column: 2; grid-row: 4; }
}

/* Mobile (<=900px): single column, one number per row. Dropping the
   logo-joint system here on purpose (repeating the mark five times down
   a narrow stack reads as clutter, not rhythm) in favour of plain quiet
   hairlines between stats. Widened from 640px to 900px (Oct 2026) so
   every phone — including large/landscape ones — gets this clean
   one-per-row stack instead of the tablet 2-column layout above. */
@media (max-width: 900px) {
	.kleyman-numbers { padding-block: 72px; }
	.kleyman-numbers__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		row-gap: 32px;
	}
	/* Oct 2026 fix (round 2): `:nth-child(n)` is REQUIRED here. The desktop
	   placement rules above are `.kleyman-numbers__grid .kleyman-stat:nth-child(2)
	   { grid-column: 3 }` etc. — specificity 0,3,0 — which silently beat a plain
	   `.kleyman-numbers__grid .kleyman-stat` (0,2,0) reset, so on phones stats
	   were still pushed into columns 3/5 (created as implicit, narrow tracks):
	   3 uneven items per row, visually staggered. Matching the specificity
	   (and coming later) makes the one-per-row reset actually win. */
	.kleyman-numbers__grid .kleyman-stat,
	.kleyman-numbers__grid .kleyman-stat:nth-child(n) { grid-column: 1 / -1; grid-row: auto; padding-top: 32px; position: relative; width: 100%; align-items: center; text-align: center; }
	.kleyman-numbers__grid .kleyman-stat:first-child { padding-top: 0; }
	/* Belt-and-braces: these two spans had no display rule at all (plain
	   inline), which left their RTL/LTR ordering ("+" before/after the
	   digits) to the browser's own bidi resolution — inconsistent on some
	   mobile engines and part of why this looked "messy" stacked at full
	   width. Pinning them to an explicit, isolated inline-flex row removes
	   that ambiguity. */
	.kleyman-stat__value-wrap { display: inline-flex; align-items: baseline; direction: ltr; unicode-bidi: isolate; }
	.kleyman-stat__value { font-size: 40px; }
	.kleyman-numbers__grid .kleyman-stat:not(:first-child)::before {
		content: '';
		position: absolute;
		top: 0; right: 50%;
		transform: translateX(50%);
		width: 64px;
		height: 1px;
		background: var(--kleyman-border);
	}
	.kleyman-numbers__divider,
	.kleyman-numbers__joint { display: none; }
}

/* ==========================================================================
   MEDIA / NEWS — rebuilt v1.0.67: a real drag/swipe "editorial wall"
   carousel. Cards alternate tall/short for rhythm, the one nearest the
   centre of the viewport sits at full size while the rest quietly recede
   (a JS-driven IntersectionObserver "spotlight", see main.js), and two
   round arrow buttons step through one card at a time. Native horizontal
   scroll + snap underneath, so trackpad/touch/keyboard all keep working
   even if JS is slow to attach.
   ========================================================================== */
.kleyman-media { padding-block: 96px 110px; overflow: hidden; }
/* Mixed weight by design: base title text is Regular, the accent word is
   Bold + brand blue — not a uniformly bold heading. */
.kleyman-media__title { text-align: center; font-size: clamp(30px, 3.6vw, 42px); font-weight: 400; margin-bottom: 48px; }
.kleyman-media__title-accent { color: var(--kleyman-blue); font-weight: 700; }

.kleyman-media__carousel { position: relative; }
.kleyman-media__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.kleyman-media__viewport::-webkit-scrollbar { display: none; }
.kleyman-media__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.kleyman-media__viewport:focus-visible { outline: 2px solid var(--kleyman-blue); outline-offset: -2px; }
.kleyman-media__track {
	display: flex;
	align-items: center;
	gap: 24px;
	width: max-content;
	/* Edges line up with the normal container gutter, but the row itself
	   is full-bleed — cards can run past the container's max-width and
	   peek at the viewport edge instead of being boxed in. */
	padding-inline: max(24px, calc((100vw - var(--kleyman-container)) / 2 + 24px));
	padding-block: 34px;
}

.kleyman-media-card {
	/* v1.0.77: narrower and taller than before, so a portrait press-
	   clipping screenshot (the actual featured images here) has the
	   headroom to show at its own full proportions instead of being
	   force-cropped into a near-square box. */
	flex: 0 0 clamp(210px, 19vw, 260px);
	min-height: 560px;
	scroll-snap-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: var(--kleyman-radius-md);
	overflow: hidden;
	background: var(--kleyman-white);
	box-shadow: var(--kleyman-shadow-sm);
	color: var(--kleyman-text);
	transition: opacity .45s var(--kleyman-ease), transform .45s var(--kleyman-ease), box-shadow .3s var(--kleyman-ease);
}
/* The "coverflow" depth effect only applies inside the homepage carousel
   track. main.js measures every card's distance from the viewport's
   centre on each scroll/drag frame and writes it as --card-scale /
   --card-opacity — a continuous gradient, not an on/off switch: the
   card nearest the centre reads at full size, and each card further to
   either side shrinks and fades a little more than the last. The custom
   properties default to 1 so a no-JS visitor (or the very first paint,
   before main.js has measured anything) simply sees full-size cards.
   Cards reused elsewhere (e.g. the plain blog listing in index.php) are
   NOT inside .kleyman-media__track, so they're untouched by any of this. */
.kleyman-media__track .kleyman-media-card {
	transform: scale(var(--card-scale, 1));
	opacity: var(--card-opacity, 1);
	transition: transform .3s var(--kleyman-ease), opacity .3s var(--kleyman-ease), box-shadow .3s var(--kleyman-ease);
	will-change: transform, opacity;
}
.kleyman-media-card.is-focus { box-shadow: var(--kleyman-shadow-lg, 0 24px 50px rgba(17,24,39,.16)); }
.kleyman-media__viewport.no-js .kleyman-media-card { opacity: 1 !important; transform: scale(1) !important; }
.kleyman-media-card:hover { box-shadow: var(--kleyman-shadow-md); }
/* Plain wrap layout for non-carousel usage (index.php fallback listing). */
.kleyman-media__grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding-block: 8px 12px; }
.kleyman-media__grid .kleyman-media-card { min-height: 320px; }

/* Top accent bar — the same brand-color rotation used elsewhere (pills,
   stat accents), so this section reads as part of the same system. */
.kleyman-media-card::before {
	content: '';
	position: absolute;
	top: 0; right: 0; left: 0;
	height: 4px;
}
.kleyman-media-card--blue::before { background: var(--kleyman-blue); }
.kleyman-media-card--green::before { background: var(--kleyman-green); }
.kleyman-media-card--brown::before { background: var(--kleyman-brown); }

/* All text now lives in one "body" panel pinned to the card's bottom —
   on a plain colour card it's just the card's own padding (transparent),
   but on a photo card it becomes an actual floating rounded panel over
   the image (blurred glass background), the way the reference site's
   cards carry a distinct light panel over the photo rather than a flat
   dark wash across the whole image. */
.kleyman-media-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
}
.kleyman-media-card__kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--kleyman-text-muted);
}
.kleyman-media-card__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.kleyman-media-card--blue .kleyman-media-card__dot { background: var(--kleyman-blue-on-dark); }
.kleyman-media-card--green .kleyman-media-card__dot { background: var(--kleyman-green); }
.kleyman-media-card--brown .kleyman-media-card__dot { background: var(--kleyman-brown); }
.kleyman-media-card__title {
	font-weight: 700;
	font-size: 19px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kleyman-media-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.kleyman-media-card__date { font-size: 12.5px; color: var(--kleyman-text-muted); }
.kleyman-media-card__more { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--kleyman-blue); white-space: nowrap; }
.kleyman-media-card__more svg { transition: transform .25s var(--kleyman-ease); }
.kleyman-media-card:hover .kleyman-media-card__more svg { transform: translateX(-3px); }

/* Photo variant — a real project/press photo fills the card. A light,
   mostly-transparent gradient (not a heavy dark wash) keeps the photo
   readable as a photo, and the text sits in its own floating glass panel
   near the bottom — inset from the edges, blurred, rounded — echoing the
   reference site's "content card over the image" treatment rather than
   text printed straight onto the photo. */
.kleyman-media-card__media { position: absolute; inset: 0; z-index: 0; }
.kleyman-media-card__img {
	width: 100%;
	height: 100%;
	/* v1.0.79: back to a full-bleed crop, not "contain" — showing each
	   clipping's untouched proportions (tried in v1.0.77/78) left grey
	   letterbox margins around most images, which read as an unfinished
	   layout gap rather than a deliberate frame. object-position biases
	   the crop toward the top of the image, since that's where a press
	   clipping's own headline/lede sits — the part worth keeping visible
	   when the card's own aspect ratio doesn't match the source photo's. */
	object-fit: cover;
	object-position: center top;
	transition: transform .6s var(--kleyman-ease);
}
.kleyman-media-card__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12,22,58,0) 55%, rgba(12,22,58,.4) 100%);
}
.kleyman-media-card--photo .kleyman-media-card__body {
	margin: 14px;
	padding: 18px;
	border-radius: var(--kleyman-radius-sm);
	background: rgba(12,22,58,.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/* Hidden by default so the photo itself is what shows at rest; the
	   panel fades/lifts in only on hover (or keyboard focus, so the card
	   stays usable without a mouse) rather than sitting permanently over
	   the image. */
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s var(--kleyman-ease), transform .25s var(--kleyman-ease);
	pointer-events: none;
}
.kleyman-media-card--photo:hover .kleyman-media-card__body,
.kleyman-media-card--photo:focus-within .kleyman-media-card__body,
.kleyman-media-card--photo.is-focus .kleyman-media-card__body {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.kleyman-media-card--photo .kleyman-media-card__kicker { color: rgba(255,255,255,.75); }
.kleyman-media-card--photo .kleyman-media-card__title,
.kleyman-media-card--photo .kleyman-media-card__more { color: #fff; }
.kleyman-media-card--photo .kleyman-media-card__date { color: rgba(255,255,255,.65); }
.kleyman-media-card--photo:hover .kleyman-media-card__img { transform: scale(1.06); }
/* The bottom-shadow gradient exists to keep the (now hover-only) text
   legible once it appears; keep it just as unobtrusive at rest by fading
   it in alongside the body panel instead of washing the photo permanently. */
.kleyman-media-card--photo .kleyman-media-card__overlay {
	opacity: 0;
	transition: opacity .25s var(--kleyman-ease);
}
.kleyman-media-card--photo:hover .kleyman-media-card__overlay,
.kleyman-media-card--photo:focus-within .kleyman-media-card__overlay,
.kleyman-media-card--photo.is-focus .kleyman-media-card__overlay {
	opacity: 1;
}

/* Nav — two round arrow buttons, centred under the carousel. */
.kleyman-media__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.kleyman-media__arrow {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid var(--kleyman-border);
	background: var(--kleyman-white);
	color: var(--kleyman-text);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .25s var(--kleyman-ease);
}
.kleyman-media__arrow:hover { border-color: var(--kleyman-blue); color: var(--kleyman-blue); background: rgba(12, 22, 58,.06); transform: translateY(-2px); }
.kleyman-media__arrow:active { transform: translateY(0); }

/* A card is now a role="button" div, not a link — give it the same
   affordance a link would have (pointer cursor, visible focus ring for
   keyboard users tabbing to it). */
.kleyman-media-card { cursor: pointer; }
.kleyman-media-card:focus-visible { outline: 2px solid var(--kleyman-blue); outline-offset: 3px; }

/* ==========================================================================
   PREVIEW MODAL — v1.0.76. Clicking a media/news card no longer navigates
   away (not even to the external press URL); it opens this single shared
   dialog instead, with that post's content cloned in from its <template>
   (see template-parts/home/media.php) by main.js. The external link, when
   the post has one, becomes an explicit "read at the source" CTA inside
   the modal — the only action left that still leaves the site, and only
   when the visitor chooses it.
   ========================================================================== */
.kleyman-preview-modal[hidden] { display: none; }
.kleyman-preview-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.kleyman-preview-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12,22,58,.6);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .25s var(--kleyman-ease);
}
.kleyman-preview-modal__panel {
	position: relative;
	z-index: 1;
	/* v1.0.80: much larger than the original text-summary card — this
	   panel now usually hosts the real source page in an iframe, so it
	   needs real reading room, not a small popover's worth. */
	width: min(1120px, 100%);
	height: min(88vh, 920px);
	background: var(--kleyman-white);
	border-radius: var(--kleyman-radius, 20px);
	box-shadow: 0 30px 70px rgba(12,22,58,.35);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(18px) scale(.98);
	transition: opacity .25s var(--kleyman-ease), transform .25s var(--kleyman-ease);
}
.kleyman-preview-modal.is-open .kleyman-preview-modal__backdrop { opacity: 1; }
.kleyman-preview-modal.is-open .kleyman-preview-modal__panel { opacity: 1; transform: translateY(0) scale(1); }
.kleyman-preview-modal__close {
	position: absolute;
	top: 16px;
	inset-inline-end: 16px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: rgba(12,22,58,.55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color .2s var(--kleyman-ease);
}
.kleyman-preview-modal__close:hover { background: var(--kleyman-blue); }
/* v1.0.80: the slot fills the whole panel and is itself the flex
   column — a fixed-height topbar (kicker/title/"open in a new tab")
   plus one flexible area below it that's either the iframe wrap (the
   normal case, a post with an external_url) or a scrollable text
   fallback (a post with none). Only one of those two exists per
   template, so exactly one flex child fills the remaining height. */
.kleyman-preview-modal__slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kleyman-preview-modal__topbar {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 18px;
	padding: 20px 60px 16px 26px; /* extra inline-end padding clears the absolute-positioned close button */
	border-bottom: 1px solid var(--kleyman-border);
}
.kleyman-preview-modal__kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--kleyman-text-muted);
	flex: 0 0 100%;
}
.kleyman-preview-modal__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--kleyman-blue); }
.kleyman-preview-modal__dot.kleyman-media-card--green { background: var(--kleyman-green); }
.kleyman-preview-modal__dot.kleyman-media-card--brown { background: var(--kleyman-brown); }
.kleyman-preview-modal__date { color: var(--kleyman-text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.kleyman-preview-modal__title { font-size: clamp(17px, 1.8vw, 20px); font-weight: 700; line-height: 1.3; margin-inline-end: auto; }
.kleyman-preview-modal__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--kleyman-blue);
	white-space: nowrap;
	flex: none;
}
.kleyman-preview-modal__cta svg { transition: transform .25s var(--kleyman-ease); }
.kleyman-preview-modal__cta:hover svg { transform: translate(2px, -2px); }

/* The real source page, embedded — see the long comment in
   template-parts/home/media.php on why an iframe, the sandbox choice,
   and why the CTA above stays visible as a fallback regardless. */
.kleyman-preview-modal__frame-wrap { flex: 1; min-height: 0; background: var(--kleyman-light); }
.kleyman-preview-modal__frame { display: block; width: 100%; height: 100%; border: 0; }

/* Fallback for a post with no external_url — nothing to embed, so this
   shows the post's own content instead, scrolling on its own. */
.kleyman-preview-modal__scroll-inner { flex: 1; min-height: 0; overflow-y: auto; }
.kleyman-preview-modal__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 56vh;
	overflow: hidden;
	background: var(--kleyman-white);
}
.kleyman-preview-modal__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 56vh;
	object-fit: contain;
	margin: 0 auto;
}
.kleyman-preview-modal__content { padding: 20px 26px; color: var(--kleyman-text); line-height: 1.8; font-size: 15px; }
.kleyman-preview-modal__content p { margin: 0 0 1em; }
.kleyman-preview-modal__content p:last-child { margin-bottom: 0; }
.kleyman-preview-modal__note {
	margin: 18px 26px 0;
	padding: 10px 14px;
	background: var(--kleyman-light);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--kleyman-text-muted);
}

@media (max-width: 640px) {
	.kleyman-preview-modal { padding: 0; align-items: flex-end; }
	.kleyman-preview-modal__panel { width: 100%; height: 94vh; border-radius: 22px 22px 0 0; }
	.kleyman-preview-modal__panel { transform: translateY(100%); }
	.kleyman-preview-modal.is-open .kleyman-preview-modal__panel { transform: translateY(0); }
	.kleyman-preview-modal__topbar { padding: 18px 54px 14px 18px; }
}

/* ==========================================================================
   BRAND PATTERN — subtle Kleyman-mark line pattern, navy backgrounds only.
   Opt-in utility (`.kleyman-navy-pattern`), hand-added only to specific
   dark/navy sections below (footer, project CTA, category-page statement
   & numbers strips) — never global, never on white backgrounds, never on
   a busy/content-heavy section. Vector tile (assets/images/kleyman-pattern-
   navy.svg — the client's exact mark, not redrawn), so it stays crisp at
   any size. Opacity/scale/spacing are tuned here only; each host section
   also gives its own content wrapper `position:relative; z-index:1` (see
   each section's own rules) so text/buttons always sit above the pattern.
   ========================================================================== */
.kleyman-navy-pattern { position: relative; }
.kleyman-navy-pattern::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url('../images/kleyman-pattern-navy.svg');
	background-repeat: repeat;
	background-position: center;
	background-size: var(--kleyman-pattern-size, 260px) auto;
	/* Default 0.05; a host section can quiet it further (denser text,
	   tighter UI) by setting --kleyman-pattern-opacity on itself. */
	opacity: var(--kleyman-pattern-opacity, .05);
}

/* ==========================================================================
   SPLIT-WEIGHT HEADING SYSTEM — Oct 2026. Sitewide reusable component for
   any H1/H2 with a natural semantic split ("פרויקטים | למגורים", "הסיפור
   שלנו | מתחיל במשפחה"). Same font-family as everywhere else on the site
   (var(--kleyman-font)) — no new font is loaded. Reserved for a handful
   of central headings, never body copy, nav, form labels, card titles or
   other small UI (see each caller for the actual split text).
   ========================================================================== */
.split-heading { font-family: var(--kleyman-font); }
.split-heading .heading-light { font-weight: 300; }
.split-heading .heading-strong { font-weight: 800; }

/* ==========================================================================
   FOOTER — v1.0.75 scale-up/refinement pass on top of the v1.0.74 two-column
   rebuild. The composition (content-left / photo-right) stays; this pass
   only fixes scale, hierarchy and presence — the content column was reading
   as a shrunk-down website crammed into a footer, not a confident hero-
   footer element. Every layer (title, contact, nav, logo/badges) is sized
   up in concert (type + spacing + widths together, not just font-size),
   the content column is wider, and the content/photo seam is tightened
   with a slight overlap instead of a flat gap. See footer.php for the
   physical-ltr/inner-rtl reasoning.
   ========================================================================== */
.kleyman-footer {
	position: relative;
	/* Pattern sits at z-index 0, behind both __media (1) and __inner (2)
	   below — visible only in the empty navy around the content column
	   and the content/photo blend seam, never competing with the photo
	   or the contact-row text. Slightly quieter than the default 0.05
	   since this column carries the densest text of any pattern host. */
	--kleyman-pattern-opacity: .045;
	direction: ltr; /* pins content-left / photo-right physically, regardless of page RTL */
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background: var(--kleyman-dark);
	color: rgba(255,255,255,.9);
	border-radius: 34px;
	margin: 0 20px 20px;
	min-height: 560px;
}

/* Left column — clean solid navy, all content, never shares space with
   the photo. Reset to RTL internally so the Hebrew reads correctly.
   Widened to 57% with a much larger max-width so the bigger type actually
   has room to breathe instead of being capped back down to a narrow
   column — that cap was the real source of the "dead space" next to the
   photo, not the column width itself. */
.kleyman-footer__inner {
	direction: rtl;
	position: relative;
	z-index: 2;
	flex: 0 0 57%;
	max-width: 760px;
	box-sizing: border-box;
	padding: 66px 76px 42px;
	display: flex;
	flex-direction: column;
}

/* Right column — the client's photo, boxed to its own ~43% panel and
   anchored to ITS OWN right edge, so the outline/buildings land inside
   this panel instead of bleeding across the whole footer. Pulled left by
   a negative margin so it slightly overlaps the content column's own
   padding (permitted per the brief — "the photo can bleed slightly past
   45% via overlay/blend"), which is what actually closes the dead gap in
   the middle: the content column's empty padding now has the photo's
   faded edge sitting under it instead of flat unbroken navy. */
.kleyman-footer__media { flex: 0 0 43%; position: relative; z-index: 1; overflow: hidden; margin-inline-start: -64px; }
.kleyman-footer__media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.kleyman-footer__media::before {
	/* Soft, fairly tight blend at the seam — not a hard line, and not a
	   wide dead zone either — so content and photo read as one composition. */
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(90deg, var(--kleyman-dark) 0%, rgba(12,22,58,.45) 8%, transparent 20%);
}

/* Title: the dominant element of the whole left column — three words,
   three exact colours per the brief ("יחד" white, "נבנה את" green,
   "הפרויקט הבא" white) as real spans, not a fragile ::first-line trick.
   Kept to one line with a viewport-scaled size (rather than a fixed
   max-width, which is what forced a wrap onto "הבא" in an earlier pass). */
.kleyman-footer__cta-title { font-size: clamp(34px, 2.7vw, 46px); font-weight: 800; line-height: 1.1; white-space: nowrap; }
.kleyman-footer__cta-word { color: #fff; }
.kleyman-footer__cta-word--accent { color: var(--kleyman-green); }

/* Contact: three clear, roomy columns — טלפון / משרד ראשי / דוא"ל — a
   small label on top, a real semibold value underneath (not thin). */
.kleyman-footer__contact-row {
	display: flex;
	gap: 40px;
	margin-top: 44px;
	padding-bottom: 34px;
}
.kleyman-footer__contact-item { flex: 1 1 0; min-width: 0; }
.kleyman-footer__label { font-size: 13.5px; font-weight: 400; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.kleyman-footer__value { display: block; font-size: 17.5px; font-weight: 600; color: #fff; line-height: 1.4; }
.kleyman-footer__value--phone { font-family: -apple-system, "Segoe UI", Arial, sans-serif; direction: ltr; unicode-bidi: isolate; } /* digits only — see .kleyman-stat__value comment on the Ploni bold-digit bug */
a.kleyman-footer__value:hover { color: var(--kleyman-green); }

/* Divider — thin, quiet, ~80% of the content column's own width (not
   full-bleed), directly below the contact row per the brief. */
.kleyman-footer__divider { display: block; width: 80%; height: 1px; background: rgba(255,255,255,.16); margin-bottom: 38px; }

/* Nav columns — real footer navigation, not micro text: bigger headings,
   bigger links, generous line-height and more room between columns. */
.kleyman-footer__links-grid {
	display: flex;
	gap: 68px;
	padding-bottom: 46px;
}
.kleyman-footer__col ul { display: flex; flex-direction: column; gap: 17px; }
.kleyman-footer__col a { font-size: 16px; line-height: 2; color: rgba(255,255,255,.8); }
.kleyman-footer__col a:hover { color: #fff; }
.kleyman-footer__heading { font-size: 16.5px; font-weight: 700; color: var(--kleyman-brown); margin-bottom: 22px; }

.kleyman-footer__bottom {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: auto;
}
.kleyman-footer__social { display: flex; gap: 10px; }
.kleyman-social-icon {
	width: 38px; height: 38px;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	transition: border-color .25s, background-color .25s;
}
.kleyman-social-icon:hover { background: var(--kleyman-blue); border-color: var(--kleyman-blue); }
.kleyman-social-icon svg { width: 18px; height: 18px; }
.kleyman-footer__badges { display: flex; align-items: center; gap: 12px; }
.kleyman-badge--img {
	height: 50px; width: auto;
	background: #fff;
	border-radius: var(--kleyman-radius-sm);
	padding: 5px 7px;
	object-fit: contain;
}
.kleyman-logo--small { display: flex; align-items: center; }
.kleyman-logo--small .kleyman-logo__img { height: 62px; width: auto; }
.kleyman-footer__copy { margin-top: 28px; font-size: 12.5px; color: rgba(255,255,255,.45); }
.kleyman-footer__credit-sep { margin: 0 6px; }
.kleyman-footer__credit { color: rgba(255,255,255,.45); text-decoration: none; transition: color .2s var(--kleyman-ease); }
.kleyman-footer__credit:hover { color: rgba(255,255,255,.8); }

/* ==========================================================================
   Single Project
   ========================================================================== */
.kleyman-project-hero { position: relative; min-height: 70vh; display: flex; align-items: flex-end; overflow: hidden; }
.kleyman-project-hero__media { position: absolute; inset: 0; }
.kleyman-project-hero__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }
.kleyman-project-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,22,58,.35) 0%, rgba(12,22,58,.85) 100%); }
.kleyman-project-hero__content { position: relative; z-index: 2; padding-bottom: 56px; color: #fff; }
.kleyman-project-hero__title { font-size: clamp(28px, 4vw, 48px); font-weight: 700; margin-top: 8px; }
.kleyman-project-hero__subtitle { margin-top: 8px; font-size: 18px; color: rgba(255,255,255,.85); }
.kleyman-project-hero__meta { display: flex; gap: 10px; margin-top: 16px; }

.kleyman-project-intro { padding-block: 48px; font-size: 19px; max-width: 70ch; color: var(--kleyman-text-muted); }

.kleyman-project-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 24px;
	padding: 40px 0;
	border-top: 1px solid var(--kleyman-border);
	border-bottom: 1px solid var(--kleyman-border);
}
.kleyman-project-stats__item { text-align: center; }
.kleyman-project-stats__value { display: block; font-size: 28px; font-weight: 700; color: var(--kleyman-blue); }
.kleyman-project-stats__label { display: block; margin-top: 4px; color: var(--kleyman-text-muted); font-size: 14px; }

.kleyman-project-section { padding-block: 56px; max-width: 80ch; }
.kleyman-project-section h2 { font-size: 26px; font-weight: 700; margin-bottom: 20px; }
.kleyman-wysiwyg { color: var(--kleyman-text-muted); line-height: 1.8; }
.kleyman-wysiwyg p { margin-bottom: 14px; }

/* Oct 2026 — brief-wide consistency pass: this template hadn't picked up
   the diamond ♦ signature mark the rest of the site now carries on its
   section headings (About, category pages). CSS-only — a ::before on the
   h2 itself, no markup change, so it costs nothing per-project regardless
   of how much ACF content that project actually has filled in. */
.kleyman-project-section h2,
.kleyman-project-gallery h2,
.kleyman-project-related h2 {
	display: flex;
	align-items: center;
	gap: 10px;
}
.kleyman-project-section h2::before,
.kleyman-project-gallery h2::before,
.kleyman-project-related h2::before {
	content: '';
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	background: var(--kleyman-green);
	transform: rotate(45deg);
}

.kleyman-project-gallery { padding-block: 56px; max-width: none; }
.kleyman-project-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kleyman-project-gallery__item { border-radius: var(--kleyman-radius-md); overflow: hidden; aspect-ratio: 4/3; }
/* Oct 2026 — same "barely-perceptible hover" issue the brief flagged on
   the project-discovery grids (was scale(1.05)/.4s here too). Kept a touch
   more restrained than the 1.18x card standard since this is a dense 3-up
   wall of thumbnails, not a single showcase tile — 1.1x still reads as a
   deliberate, confident move without images colliding with their neighbors. */
.kleyman-project-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--kleyman-ease); }
.kleyman-project-gallery__item:hover img { transform: scale(1.1); }
.kleyman-project-gallery__item:focus-visible { outline: 2px solid var(--kleyman-blue); outline-offset: 3px; }

/* Gallery lightbox v2 (assets/js/lightbox.js) — zoom from thumbnail, swipe, thumbnail strip. */
html.kleyman-lb-lock, html.kleyman-lb-lock body { overflow: hidden; }
.kleyman-lightbox { position: fixed; inset: 0; z-index: 10002; display: grid; grid-template-rows: auto 1fr auto auto; direction: rtl; }
.kleyman-lightbox[hidden] { display: none; }
.kleyman-lightbox__backdrop { position: absolute; inset: 0; background: rgba(6, 11, 28, .94); opacity: 0; transition: opacity .35s ease; }
.kleyman-lightbox.is-open .kleyman-lightbox__backdrop { opacity: var(--lb-dim, 1); }
.kleyman-lightbox__top, .kleyman-lightbox__stage, .kleyman-lightbox__thumbs, .kleyman-lightbox__hint { position: relative; z-index: 1; opacity: 0; transition: opacity .3s ease .1s; }
.kleyman-lightbox.is-open .kleyman-lightbox__top,
.kleyman-lightbox.is-open .kleyman-lightbox__stage,
.kleyman-lightbox.is-open .kleyman-lightbox__thumbs,
.kleyman-lightbox.is-open .kleyman-lightbox__hint { opacity: 1; }
.kleyman-lightbox__stage { opacity: 1; }
.kleyman-lightbox__top { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; }
.kleyman-lightbox__count { color: rgba(255, 255, 255, .8); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; }
.kleyman-lightbox__stage { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 22px; min-height: 0; }
.kleyman-lightbox__viewport { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.kleyman-lightbox__img { max-width: 100%; max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); user-select: none; -webkit-user-drag: none; transform-origin: center; will-change: transform; }
.kleyman-lightbox__close, .kleyman-lightbox__nav {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 48px; height: 48px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.kleyman-lightbox__close:hover, .kleyman-lightbox__nav:hover,
.kleyman-lightbox__close:focus-visible, .kleyman-lightbox__nav:focus-visible { background: rgba(255, 255, 255, .24); transform: scale(1.06); outline: none; }
.kleyman-lightbox__thumbs { display: flex; gap: 8px; justify-content: center; padding: 14px 22px 22px; overflow-x: auto; scrollbar-width: none; }
.kleyman-lightbox__thumbs::-webkit-scrollbar { display: none; }
.kleyman-lightbox__thumb { flex: none; width: 74px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .5; transition: opacity .2s ease, border-color .2s ease; }
.kleyman-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kleyman-lightbox__thumb:hover { opacity: .85; }
.kleyman-lightbox__thumb.is-active { opacity: 1; border-color: var(--kleyman-green); }
.kleyman-lightbox__hint { display: none; margin: 0; padding: 0 0 18px; text-align: center; color: rgba(255, 255, 255, .55); font-size: 13px; }
@media (max-width: 760px) {
	/* v1.17: arrows stay visible on phones too (client couldn't move between images). */
	.kleyman-lightbox__stage { padding: 0 10px; position: relative; }
	.kleyman-lightbox__nav { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; background: rgba(12, 22, 58, .55); }
	.kleyman-lightbox__nav--prev { right: 14px; }
	.kleyman-lightbox__nav--next { left: 14px; }
	.kleyman-lightbox__thumbs { justify-content: flex-start; padding-bottom: 10px; }
	.kleyman-lightbox__thumb { width: 56px; height: 42px; }
	.kleyman-lightbox__hint { display: block; }
	.kleyman-lightbox__img { max-height: calc(100dvh - 190px); }
}

.kleyman-project-team__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.kleyman-project-team__list dt { font-size: 13px; color: var(--kleyman-text-muted); }
.kleyman-project-team__list dd { margin: 0; font-weight: 700; }
.kleyman-project-partners { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.kleyman-project-partners__item { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.kleyman-project-partners__item img { width: 40px; height: 40px; object-fit: contain; }

.kleyman-project-map { margin-top: 20px; border-radius: var(--kleyman-radius-md); overflow: hidden; aspect-ratio: 16/7; }
.kleyman-project-map iframe { width: 100%; height: 100%; }

.kleyman-project-cta { display: flex; gap: 16px; padding-block: 40px; flex-wrap: wrap; }
.kleyman-project-related { padding-block: 64px 96px; max-width: none; }
.kleyman-project-related h2 { font-size: 26px; font-weight: 700; margin-bottom: 24px; }

/* Archive hero ---------------------------------------------------------- */
.kleyman-archive-hero { background: var(--kleyman-dark); color: #fff; padding-block: 124px 56px; }
/* Oct 2026 QA: main hero heading centered on every inner page — see the
   matching comment on .kleyman-ab-hero__title / .kleyman-inner-hero__title. */
.kleyman-archive-hero__title { font-size: clamp(30px, 4vw, 46px); font-weight: 700; text-align: center; }
.kleyman-archive-hero__subtitle { margin-top: 12px; color: rgba(255,255,255,.7); max-width: 60ch; }
.kleyman-projects--archive { padding-top: 56px; }

/* Archive — sticky flagship showcase ------------------------------------
   Oct 2026 — brief: "sticky flagship project showcase". Two-column layout:
   a pinned flagship project card on one side, the filterable/load-more
   grid scrolling past it on the other. Only the archive gets this — the
   .kleyman-projects__tabs/__grid classes are shared with the homepage's
   own tab-filter section, so everything archive-specific is scoped under
   .kleyman-archive-layout/.kleyman-archive-main rather than touching the
   shared class rules above. RTL: flagship as the first grid item sits on
   the visual right, matching reading order. */
.kleyman-archive-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
	align-items: start;
	gap: clamp(24px, 3vw, 48px);
	max-width: min(94vw, 1560px);
}
.kleyman-archive-flagship { position: sticky; top: 104px; }
.kleyman-archive-main { min-width: 0; }
.kleyman-archive-flagship__card {
	position: relative;
	display: block;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	isolation: isolate;
}
.kleyman-archive-flagship__media { position: absolute; inset: 0; display: block; }
.kleyman-archive-flagship__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--kleyman-ease); }
.kleyman-archive-flagship__card:hover .kleyman-archive-flagship__img,
.kleyman-archive-flagship__card:focus-visible .kleyman-archive-flagship__img { transform: scale(1.08); }
.kleyman-archive-flagship__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(8,15,38,0) 32%, rgba(8,15,38,.92) 100%);
}
.kleyman-archive-flagship__badge {
	position: absolute; top: 20px; inset-inline-start: 20px; z-index: 1;
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 700; letter-spacing: .04em;
	color: #0b1626; background: var(--kleyman-green);
	padding: 7px 14px; border-radius: 100px;
}
.kleyman-archive-flagship__meta {
	position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
	padding: clamp(20px, 2.4vw, 32px);
	display: flex; flex-direction: column; gap: 6px;
	color: #fff;
}
.kleyman-archive-flagship__status { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--kleyman-green); }
.kleyman-archive-flagship__name { font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; line-height: 1.2; }
.kleyman-archive-flagship__city { font-size: 14px; color: rgba(255,255,255,.78); }
.kleyman-archive-flagship__desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); margin-top: 4px; max-width: 42ch; }
.kleyman-archive-flagship__cta {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 700; color: #fff;
	margin-top: 10px;
}
.kleyman-archive-flagship__cta svg { transform: scaleX(-1); transition: transform .3s var(--kleyman-ease); }
.kleyman-archive-flagship__card:hover .kleyman-archive-flagship__cta svg,
.kleyman-archive-flagship__card:focus-visible .kleyman-archive-flagship__cta svg { transform: scaleX(-1) translateX(-4px); }
.kleyman-archive-main .kleyman-projects__grid { grid-template-columns: repeat(2, 1fr); max-width: none; margin-inline: 0; }
.kleyman-archive-main .kleyman-projects__tabs { justify-content: flex-start; max-width: none; margin-inline: 0; }
@media (max-width: 1200px) {
	.kleyman-archive-main .kleyman-projects__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
	/* minmax(0,…): a plain 1fr track took the nowrap filter-chip row's
	   min-content width (~800px), pushing every card off-screen on phones. */
	.kleyman-archive-layout { grid-template-columns: minmax(0, 1fr); }
	.kleyman-archive-flagship { position: static; margin-bottom: 8px; }
	.kleyman-archive-flagship__card { aspect-ratio: 16/9; }
	.kleyman-archive-main .kleyman-projects__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.kleyman-archive-main .kleyman-projects__grid { grid-template-columns: minmax(0, 1fr); }
	.kleyman-archive-flagship__card { aspect-ratio: 4 / 5; }
	.kleyman-archive-layout { max-width: none; }
}

/* Generic pages ----------------------------------------------------------- */
.kleyman-generic-page { padding-block: 150px 96px; max-width: 900px; } /* clears the fixed floating header (breadcrumbs were hidden under it) */
.kleyman-generic-page__title { font-size: 34px; font-weight: 700; margin-bottom: 24px; }
@media (max-width: 640px) { .kleyman-generic-page { padding-block: 108px 72px; } .kleyman-generic-page__title { font-size: 30px; } }
.kleyman-generic-page__thumb { border-radius: var(--kleyman-radius-md); overflow: hidden; margin-bottom: 32px; }
.kleyman-404 { padding-block: 140px; text-align: center; }
.kleyman-404 h1 { font-size: 32px; margin-bottom: 12px; }
.kleyman-404 p { color: var(--kleyman-text-muted); margin-bottom: 24px; }

/* ==========================================================================
   Scroll-reveal base state (JS adds .is-visible; see animations.js).
   Kept as a graceful CSS-only fallback if JS/GSAP fails to load.
   ========================================================================== */
[data-animate] { opacity: 1; }
.js-anim-ready [data-animate="fade-up"] {
	opacity: 0;
	transform: translateY(24px);
}
.js-anim-ready [data-animate].is-visible {
	opacity: 1;
	transform: none;
}
/* Header entrance (nav-fade-down): REMOVED (Oct 2026). This used to slide
   the header down from translateY(-24px) to its resting position once a
   JS-added `.is-revealed` class landed. In production the reveal class
   itself was observed to land (confirmed via the DOM) while the
   transform stayed stuck at its -24px "from" state indefinitely — the
   header floating 24px higher than its real `top` offset, permanently.
   Exactly the kind of thing the header — the one persistent nav on every
   page — can never depend on. There is no safe middle ground here (any
   entrance transform risks the same stuck-from-state failure), so the
   header now simply renders at its resting position immediately, with no
   transform-based entrance at all. */
.kleyman-header[data-animate="nav-fade-down"] {
	transform: none;
}
/* "mask-reveal" wrappers stay visible at the container level — the reveal
   itself happens on each inner <img> (clip-path + opacity, driven by GSAP
   in animations.js). Hiding the wrapper here left it permanently at
   opacity:0 whenever GSAP is loaded, because the CSS-only IntersectionObserver
   fallback below intentionally defers to GSAP and never adds .is-visible. */

@media (prefers-reduced-motion: reduce) {
	.js-anim-ready [data-animate] { opacity: 1 !important; transform: none !important; }
	.kleyman-hero__img, .kleyman-project-hero__img { transform: none !important; }
}

/* ==========================================================================
   Responsive — REAL breakpoints, not a shrunk desktop.
   ========================================================================== */

/* Desktop XL polish */
@media (min-width: 1440px) {
	.kleyman-container { padding-inline: 40px; }
}

/* Tablet */
@media (max-width: 1024px) {
	/* The desktop single-line subtitle is sized for the wide container;
	   let it wrap normally once there's no room to guarantee one line. */
	.kleyman-process__subtitle { white-space: normal; max-width: 56ch; font-size: 18px; }
	.kleyman-nav { gap: 60px; }
	.kleyman-nav__list { gap: 28px; }
	.kleyman-about__grid { grid-template-columns: 1fr; gap: 40px; }
	.kleyman-about__media { order: 1; }
	.kleyman-about__collage { width: 72%; max-width: 380px; }
	.kleyman-about__text { order: 2; max-width: none; }
	.kleyman-projects__grid { grid-template-columns: repeat(2, 1fr); }
	.kleyman-footer { min-height: 520px; }
	.kleyman-footer__inner { flex-basis: 58%; max-width: none; padding: 48px 40px 28px; }
	.kleyman-footer__media { flex-basis: 42%; margin-inline-start: -28px; }
	.kleyman-footer__cta-title { font-size: clamp(28px, 3.4vw, 38px); }
	.kleyman-footer__links-grid { gap: 32px; }
	.kleyman-project-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	/* .kleyman-numbers__grid's own tablet layout is defined alongside the
	   rest of the NUMBERS section rules above, not here. */

	/* Tablet hero/header: hero keeps its own wider 96vw frame; the header
	   is the same floating pill as desktop, just with the tablet gap/
	   radius/height tokens. */
	.kleyman-hero-frame { width: 96vw; max-width: none; }
	.kleyman-header {
		margin-inline: var(--header-side-gap-tablet);
		width: calc(100% - (var(--header-side-gap-tablet) * 2));
		max-width: none;
		top: var(--header-top-tablet);
		border-radius: var(--header-radius-tablet);
	}
	.kleyman-header__inner { min-height: var(--header-height-tablet); padding-inline: clamp(20px, 3vw, 28px); }
	.kleyman-logo__img { height: 44px; }
	.kleyman-hero { border-radius: 24px; min-height: clamp(560px, 52vw, 700px); }
	.kleyman-hero__content {
		padding-inline: clamp(20px, 4vw, 40px);
		padding-block: 32px 112px;
	}
	.kleyman-hero__text { max-width: none; }
	.kleyman-hero__title { font-size: clamp(32px, 5vw, 46px); }
	.kleyman-hero__trust { bottom: 34px; gap: 22px; }
	.kleyman-hero__trust-logo { height: 60px; }

	/* Timeline stays horizontal at tablet width, just smaller — 11 items
	   at the full desktop icon/spacing size would overlap. */
	.kleyman-timeline { margin-top: 96px; padding-top: 84px; padding-bottom: 84px; }
	.kleyman-timeline__deco { width: min(560px, 60%); }
	.kleyman-timeline__icon { width: 64px; height: 64px; }
	.kleyman-timeline__icon svg { width: 22px; height: 22px; }
	.kleyman-timeline__step--above .kleyman-timeline__icon { bottom: calc(100% + 42px); }
	.kleyman-timeline__step--below .kleyman-timeline__icon { top: calc(100% + 42px); }
	.kleyman-timeline__step--above .kleyman-timeline__connector { height: 42px; }
	.kleyman-timeline__step--below .kleyman-timeline__connector { height: 42px; }
	.kleyman-timeline__dot { width: 30px; height: 30px; font-size: 13px; }
	.kleyman-timeline__label { font-size: 14px; }
	.kleyman-timeline__step--above .kleyman-timeline__label { bottom: calc(100% + 112px); }
	.kleyman-timeline__step--below .kleyman-timeline__label { top: calc(100% + 112px); }
	.kleyman-timeline__detail { width: 250px; padding: 18px 20px; }
	.kleyman-timeline__detail-title { font-size: 16px; }
	.kleyman-timeline__detail-text { font-size: 14px; }
}

/* Mobile */
@media (max-width: 640px) {
	.kleyman-hero-frame { width: calc(100vw - 16px); max-width: none; margin-inline: auto; padding-top: 12px; }
	.kleyman-header {
		left: auto; inset-inline: 0; transform: none;
		margin-inline: var(--header-side-gap-mobile);
		width: calc(100% - (var(--header-side-gap-mobile) * 2));
		max-width: none;
		/* iPhone/mobile safe-area: adds the notch/Dynamic Island inset on
		   top of the normal breathing room, instead of under it. */
		top: calc(var(--header-top-mobile) + env(safe-area-inset-top));
		border-radius: var(--header-radius-mobile);
	}
	.kleyman-header__inner { min-height: var(--header-height-mobile); padding-inline: 16px; }
	.kleyman-logo__img { height: 34px; }
	.kleyman-header__brand-mark { opacity: .035; }
	/* The nav-embedded logo swaps out for the always-in-flow mobile one
	   (see the comment on .kleyman-logo--mobile and in header.php) so it
	   stays visible once <nav> becomes an off-canvas drawer below. */
	.kleyman-nav .kleyman-logo { display: none; }
	/*
	 * Mobile header bar: hamburger pinned to the true screen-right edge,
	 * logo dead-centered on the bar — both pulled out of the inner flex
	 * flow and absolutely positioned against .kleyman-header__inner
	 * (already `position: relative`), rather than relying on flex `order`
	 * + RTL axis direction, which only clustered both together on one
	 * side with a lopsided gap instead of actually centering anything.
	 */
	.kleyman-logo--mobile {
		display: flex;
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
	}
	.kleyman-nav-toggle {
		display: flex;
		position: absolute;
		top: 50%; right: 8px;
		transform: translateY(-50%);
		z-index: 101; /* stays above the drawer (99) + header (100) so it's always reachable/visible as the close (×) button */
	}
	.kleyman-nav {
		position: fixed;
		top: 0; bottom: 0;
		right: 0; left: auto;
		width: min(360px, 86vw);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		background:
			radial-gradient(640px 520px at 100% 0%, rgba(17, 121, 58,.16), transparent 60%),
			radial-gradient(520px 480px at 0% 100%, rgba(12, 22, 58,.20), transparent 62%),
			var(--kleyman-dark);
		padding: 112px 32px 28px;
		transform: translateX(100%);
		transition: transform .45s var(--kleyman-ease);
		z-index: 99;
		border-radius: 0;
		gap: 20px;
		overflow-y: auto;
		box-shadow: -40px 0 90px -30px rgba(0,0,0,.5);
		/* Reset here (once), not per-<ul>, so the index numbering below
		   counts continuously across both nav-list halves (they're two
		   separate <ul>s in the markup, split for the desktop layout —
		   see header.php) instead of restarting at 01 partway down. */
		counter-reset: kleyman-nav-count;
	}
	/* Large, soft watermark numeral behind the links — the one bit of
	   "unique/premium" texture in an otherwise calm, dark panel; purely
	   decorative so it's aria-hidden via being a ::before on the nav
	   itself (no DOM node, can't be read out or tabbed to). */
	.kleyman-nav::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background-image: linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
		background-size: 34px 100%;
		-webkit-mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.5) 30%, rgba(0,0,0,.5) 75%, transparent);
		mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.5) 30%, rgba(0,0,0,.5) 75%, transparent);
	}
	/* Explicit right:auto/left:0 (not an inset shorthand) so the panel's
	   resting position is unambiguous — a fixed element with a shorthand
	   `inset` mixing an explicit edge and `auto` can resolve to an
	   on-screen "used value" in some engines, which left the drawer
	   overlapping the hero instead of sitting off-canvas. */
	[dir="rtl"] .kleyman-nav { right: auto; left: 0; transform: translateX(-100%); }
	.kleyman-nav.is-open { transform: translateX(0); }
	.kleyman-nav__list,
	.kleyman-nav__list--start,
	.kleyman-nav__list--end { flex-direction: column; align-items: flex-start; gap: 6px; justify-self: auto; width: 100%; }
	.kleyman-nav .kleyman-logo { order: -1; justify-self: auto; margin-bottom: 20px; position: relative; z-index: 1; }
	/* Unwrap the desktop-only end-group so its list drops back into the
	   drawer's own column stacking above, as if it were never grouped. */
	.kleyman-nav__end-group { display: contents; }

	/* Each link as its own full-width row: a large index number that
	   counts up the list (pure CSS counter, no markup change needed),
	   the link itself, and a hairline under each row — reads as an
	   editorial index rather than a stock dropdown menu. */
	.kleyman-nav__item {
		counter-increment: kleyman-nav-count;
		width: 100%;
		display: flex;
		align-items: baseline;
		gap: 14px;
		padding-block: 10px;
		border-bottom: 1px solid rgba(255,255,255,.1);
		position: relative;
		z-index: 1;
		/* Staggered entrance: each row starts slightly below/transparent
		   and rises in with a short per-row delay once the drawer opens,
		   instead of the whole list just appearing at once. */
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .4s var(--kleyman-ease), transform .4s var(--kleyman-ease);
	}
	.kleyman-nav.is-open .kleyman-nav__item { opacity: 1; transform: none; }
	.kleyman-nav__item:nth-child(1) { transition-delay: .08s; }
	.kleyman-nav__item:nth-child(2) { transition-delay: .13s; }
	.kleyman-nav__item:nth-child(3) { transition-delay: .18s; }
	.kleyman-nav__item:nth-child(4) { transition-delay: .23s; }
	.kleyman-nav__item:nth-child(5) { transition-delay: .28s; }
	.kleyman-nav__item:nth-child(6) { transition-delay: .33s; }
	.kleyman-nav__item::before {
		content: counter(kleyman-nav-count, decimal-leading-zero);
		font-size: 13px;
		font-weight: 700;
		color: var(--kleyman-green);
		letter-spacing: .04em;
		min-width: 20px;
	}
	.kleyman-nav__item .kleyman-nav__link { font-size: 26px; font-weight: 600; padding-block: 2px; }
	.kleyman-nav__item .kleyman-nav__link::after { display: none; } /* desktop underline-on-hover doesn't apply to a touch drawer */
	.kleyman-nav__item.is-current .kleyman-nav__link { color: var(--kleyman-green); }

	/* The "צרו קשר" CTA, hidden in the compact header bar, resurfaces
	   here as the drawer's confident closing move: full-width, filled
	   (not the outline style used in the header bar), pinned after the
	   link list with its own stagger delay. */
	.kleyman-nav .kleyman-header__cta {
		display: flex;
		position: relative;
		z-index: 1;
		width: 100%;
		justify-content: center;
		margin-top: 12px;
		background: var(--kleyman-green);
		border-color: var(--kleyman-green);
		color: #fff;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .4s var(--kleyman-ease), transform .4s var(--kleyman-ease), filter .25s ease;
		transition-delay: .4s;
	}
	.kleyman-nav.is-open .kleyman-header__cta { opacity: 1; transform: none; }
	.kleyman-nav .kleyman-header__cta:hover { filter: brightness(1.08); }
	.kleyman-nav .kleyman-header__cta::before { display: none; }

	.kleyman-hero { min-height: clamp(620px, 150vw, 720px); border-radius: 22px; }
	.kleyman-hero__content { padding-inline: 16px; padding-block: 28px 76px; align-items: center; }
	.kleyman-hero__text { max-width: none; }
	/* Bigger, but vw-scaled + nowrap so "משפחה שבונה באהבה" is guaranteed
	   to stay on one line down to the narrowest phone widths. */
	.kleyman-hero__title { font-size: clamp(27px, 8.5vw, 38px); line-height: 1.15; white-space: nowrap; }
	.kleyman-hero__cta-row { margin-top: 20px; }
	/* Slightly smaller CTA + less air above it, so the title/button/trust
	   badges read as one tight group instead of three spaced blocks. */
	.kleyman-btn--hero-cta { margin-top: 14px; padding: 9px 24px; font-size: 14px; }
	.kleyman-hero__trust { bottom: 16px; gap: 16px; }
	.kleyman-hero__trust-logo { height: 50px; }

	.kleyman-about { padding-block: 64px; }
	.kleyman-about__watermark { font-size: 34px; white-space: normal; margin-bottom: -16px; }
	/* Oct 2026 feedback: "מהיסודות של משפחה" / "אנחנו לא בונים בניינים..."
	   read too small on mobile — bumped up a step. */
	.kleyman-about__title { font-size: clamp(48px, 11vw, 56px); }
	/* Oct 2026 feedback: this 4-word line was wrapping to two lines on
	   mobile at the fixed 40px desktop size — scaled down with vw +
	   nowrap (same guaranteed-one-line technique as the hero title) so it
	   always fits the width instead of wrapping. */
	.kleyman-about__subtitle { font-size: clamp(22px, 7vw, 30px); white-space: nowrap; }
	/* Explicit mobile order (text → button, THEN the photo collage below
	   it) instead of relying on the tablet breakpoint's order to cascade
	   down — makes the stacking predictable regardless of viewport. The
	   collage itself is capped + centered so it reads as a calm closing
	   image, not an oversized, off-center block. */
	.kleyman-about__text { order: 1; }
	.kleyman-about__media { order: 2; display: flex; justify-content: center; margin-top: 8px; }
	/* Oct 2026 feedback: "the image below the 'הכירו את קליימן' button
	   needs significant enlargement" — was 62%/240px, a small closing
	   thumbnail; roughly 60% bigger now. */
	.kleyman-about__collage { width: 90%; max-width: 380px; margin-inline: auto; }
	.kleyman-about__flag { font-size: 23px; }

	.kleyman-areas__grid { flex-direction: column; align-items: center; gap: 48px; }

	.kleyman-timeline {
		flex-direction: column;
		align-items: flex-start;
		gap: 36px;
		padding: 0;
		margin-top: 48px;
	}
	.kleyman-timeline__line { display: none; }
	/* Horizontal chevron motif doesn't fit the stacked vertical list. */
	.kleyman-timeline__deco { display: none; }
	.kleyman-timeline__step,
	.kleyman-timeline__step--above,
	.kleyman-timeline__step--below {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		width: 100%;
	}
	.kleyman-timeline__icon,
	.kleyman-timeline__step--above .kleyman-timeline__icon,
	.kleyman-timeline__step--below .kleyman-timeline__icon {
		position: static;
		flex-shrink: 0;
		width: 62px; height: 62px;
	}
	.kleyman-timeline__icon svg { width: 24px; height: 24px; }
	.kleyman-timeline__connector { display: none; }
	.kleyman-timeline__dot { position: static; width: 30px; height: 30px; font-size: 13px; margin-inline-start: -10px; }
	.kleyman-timeline__label,
	.kleyman-timeline__step--above .kleyman-timeline__label,
	.kleyman-timeline__step--below .kleyman-timeline__label {
		position: static;
		text-align: start;
	}
	/* On touch, hover doesn't exist — the detail card becomes an inline
	   expanding panel under the row instead of a floating popover, opened
	   by tapping the step (JS toggles .is-active). */
	.kleyman-timeline__hit { cursor: pointer; }
	.kleyman-timeline__step { flex-wrap: wrap; }
	.kleyman-timeline__detail {
		position: static;
		width: 100%;
		left: auto;
		transform: none !important;
		max-height: 0;
		opacity: 0;
		padding: 0 4px;
		box-shadow: none;
		background: #fff;
		text-align: start;
		overflow: hidden;
		margin-top: 0;
		transition: max-height .3s var(--kleyman-ease), opacity .25s var(--kleyman-ease), padding .3s var(--kleyman-ease), margin-top .3s var(--kleyman-ease);
	}
	.kleyman-timeline__detail::after { display: none; }
	.kleyman-timeline__step.is-active .kleyman-timeline__detail {
		max-height: 320px;
		opacity: 1;
		padding: 14px 16px;
		margin-top: 4px;
	}

	.kleyman-projects__grid { grid-template-columns: 1fr; }
	.kleyman-projects__tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }

	/* .kleyman-numbers__grid's own mobile layout is defined alongside the
	   rest of the NUMBERS section rules above, not here. */

	/* Mobile: the physical left/right split only makes sense with real
	   width to spare, so stack instead — content column first, a shorter
	   photo band underneath (not a faint background wash behind text). */
	.kleyman-footer { flex-direction: column; direction: rtl; margin: 0 12px 12px; border-radius: 22px; min-height: 0; }
	.kleyman-footer__inner { direction: rtl; flex: 1 1 auto; max-width: none; padding: 44px 24px 28px; }
	/* Bigger bottom photo band per client feedback ("the bottom image is
	   way too small") — was 200px, now a third taller. */
	.kleyman-footer__media { flex: 0 0 280px; order: 2; margin-inline-start: 0; }
	.kleyman-footer__media img { object-position: 82% center; } /* towers sit in the right third of the source — "center" showed only empty navy */
	.kleyman-footer__media::before { background: linear-gradient(180deg, var(--kleyman-dark) 0%, rgba(12,22,58,.15) 22%, transparent 45%); }
	.kleyman-footer__cta-title { white-space: normal; }
	.kleyman-footer__contact-row { flex-direction: column; gap: 20px; }
	/* 2 columns instead of one long stacked list ("מאוד בלאגן" — a single
	   column of 3 link groups reads as one long undifferentiated scroll;
	   2 columns gives it visible structure in less vertical space). The
	   3rd column ("מידע") naturally wraps to its own row underneath. */
	.kleyman-footer__links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-bottom: 36px; }
	.kleyman-footer__bottom { flex-wrap: wrap; row-gap: 16px; column-gap: 20px; justify-content: flex-start; }

	.kleyman-project-gallery__grid { grid-template-columns: 1fr; }
	.kleyman-project-team__list { grid-template-columns: 1fr; }
	.kleyman-project-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Oct 2026: decorative background videos never show the browser's own
   "start playback" glyph (iOS/Safari overlays one whenever it declines
   to autoplay). The poster / first frame shows instead, and main.js
   starts the video on the visitor's first tap. */
.kleyman-hero__video::-webkit-media-controls,
.kleyman-hero__video::-webkit-media-controls-panel,
.kleyman-hero__video::-webkit-media-controls-overlay-play-button,
.kleyman-hero__video::-webkit-media-controls-start-playback-button,
.kleyman-project-card__video::-webkit-media-controls,
.kleyman-project-card__video::-webkit-media-controls-panel,
.kleyman-project-card__video::-webkit-media-controls-overlay-play-button,
.kleyman-project-card__video::-webkit-media-controls-start-playback-button,
.kleyman-sp-hero__video::-webkit-media-controls,
.kleyman-sp-hero__video::-webkit-media-controls-panel,
.kleyman-sp-hero__video::-webkit-media-controls-overlay-play-button,
.kleyman-sp-hero__video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
	opacity: 0 !important;
}

/* Oct 2026 fix: between 1025px and ~1640px the fixed 56px link gap + 21px
   links didn't fit, so two-word items ("התחדשות עירונית", "מבני ציבור")
   wrapped onto two lines inside the header pill. Links never wrap now,
   and gap/size scale down fluidly in that range (verified single-line at
   1040, 1100, 1300, 1500 and 1640px). */
.kleyman-nav__link { white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1640px) {
	.kleyman-nav__list { gap: clamp(20px, 2.4vw, 56px); }
	.kleyman-nav__link { font-size: clamp(17px, 1.25vw, 21px); }
}

/* ==========================================================================
   Masthead photo — Oct 2026. One shared treatment for every dark inner
   header (category pages, contact, press, projects archive): a real
   project photo at very low opacity, desaturated a touch, under a navy
   gradient that stays darkest behind the (right-aligned, RTL) text.
   ========================================================================== */
.kleyman-cat-masthead,
.kleyman-inner-hero,
.kleyman-pr-hero,
.kleyman-archive-hero { position: relative; isolation: isolate; overflow: hidden; }
.kleyman-mh-photo {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-position: center;
	background-size: cover;
	opacity: .24;
	filter: grayscale(.3) contrast(1.05);
	animation: kleyman-mh-drift 22s ease-out both;
}
.kleyman-mh-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(270deg, rgba(12, 22, 58, .9) 0%, rgba(12, 22, 58, .45) 62%, rgba(12, 22, 58, .25) 100%),
		linear-gradient(0deg, rgba(12, 22, 58, .55) 0%, rgba(12, 22, 58, 0) 45%);
}
@keyframes kleyman-mh-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .kleyman-mh-photo { animation: none; } }
/* The shared .kleyman-mh-symbol (below) replaces the category page's own symbol. */
.kleyman-cat-masthead .kleyman-cat-masthead__symbol { display: none; }
.kleyman-archive-hero > .kleyman-container,
.kleyman-pr-hero__inner,
.kleyman-cat-masthead__inner,
.kleyman-inner-hero > .kleyman-container { position: relative; z-index: 1; }
@media (max-width: 700px) {
	.kleyman-mh-photo { opacity: .2; }
	.kleyman-mh-photo::after { background: linear-gradient(0deg, rgba(12, 22, 58, .8) 0%, rgba(12, 22, 58, .45) 100%); }
}

/* Footer contact icons on pages that use footer-showcase.php without the
   body.kleyman-showcase class (About etc.): icon sat on its own line above
   the label. Same icon-beside-text treatment everywhere. */
.kleyman-footer__contact-item:has(> .kleyman-footer__contact-icon) { display: flex; align-items: flex-start; gap: 12px; }
.kleyman-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .22);
	color: var(--kleyman-green);
}
.kleyman-footer__contact-icon svg { width: 16px; height: 16px; }

/* ==========================================================================
   Page-to-page curtain (Oct 2026 QA): a short navy curtain with the logo
   covers the page on internal navigation and lifts off the next page —
   instead of a hard white flash. Leaving: .kleyman-pt element (main.js).
   Arriving: html.kpt-in, set by an inline <head> script only when the
   visitor came from an internal link, so a direct visit never sees it.
   ========================================================================== */
.kleyman-pt,
html.kpt-in::before {
	content: '';
	position: fixed; inset: 0; z-index: 100000;
	background: var(--kleyman-dark) url('../icons/logo-white.png') center / min(220px, 46vw) auto no-repeat;
	pointer-events: none;
}
.kleyman-pt { transform: translateY(100%); transition: transform .42s cubic-bezier(.76, 0, .24, 1); }
.kleyman-pt::before {
	content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--kleyman-blue-on-dark), var(--kleyman-green), var(--kleyman-brown));
}
.kleyman-pt.is-in { transform: none; }
html.kpt-in::before { transform: none; }
html.kpt-in.kpt-out::before { transform: translateY(-100%); transition: transform .55s cubic-bezier(.76, 0, .24, 1); }
@media (prefers-reduced-motion: reduce) {
	.kleyman-pt { display: none; }
	html.kpt-in::before { display: none; }
}
.kleyman-footer__subvalue { margin: 4px 0 0; font-size: 14px; color: rgba(255, 255, 255, .55); }

/* Oct 2026 QA — one alignment rule for every dark inner-page header:
   eyebrow, H1, subtitle and meta line are centered (breadcrumbs stay at the
   reading edge, as the site's navigation trail). */
.kleyman-inner-hero .kleyman-inner-hero__eyebrow,
.kleyman-pr-hero .kleyman-pr-hero__eyebrow { display: block; text-align: center; }
.kleyman-archive-hero .kleyman-archive-hero__subtitle { margin-inline: auto; text-align: center; }
.kleyman-cat-masthead .kleyman-cat-masthead__eyebrow {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding-inline-start: 0; text-align: center;
}
.kleyman-cat-masthead .kleyman-cat-masthead__eyebrow::before { position: static; transform: none; flex: none; }
.kleyman-cat-masthead .kleyman-cat-intro__title { text-align: center; }
.kleyman-cat-masthead .kleyman-cat-intro__subtitle { margin-inline: auto; text-align: center; }
.kleyman-cat-masthead .kleyman-cat-masthead__detail { text-align: center; }
/* Oct 2026 QA: flagship copy sits over the photo — darker scrim so the status/description stay legible on bright renders. */
.kleyman-archive-flagship__overlay { background: linear-gradient(180deg, rgba(12,22,58,.15) 0%, rgba(12,22,58,.35) 35%, rgba(12,22,58,.9) 72%, rgba(12,22,58,.96) 100%) !important; }

/* Header logo build (main.js) */
.kleyman-logo-build__part { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; }
.kleyman-logo-build__part--brown { animation: kleyman-cube-drop .55s cubic-bezier(.34, 1.56, .64, 1) .05s both; }
.kleyman-logo-build__part--green { animation: kleyman-cube-drop .55s cubic-bezier(.34, 1.56, .64, 1) .3s both; }
.kleyman-logo-build__part--blue  { animation: kleyman-cube-drop .55s cubic-bezier(.34, 1.56, .64, 1) .55s both; }
.kleyman-logo-build__part--text  { animation: kleyman-logo-text .7s ease .85s both; }
@keyframes kleyman-cube-drop { from { opacity: 0; transform: translateY(-55%); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes kleyman-logo-text { from { opacity: 0; transform: translateX(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* Oct 2026 — white line Kleyman symbol on the right edge of every dark
   masthead (as it was before the photo backgrounds), cropped by the frame. */
.kleyman-mh-symbol {
	position: absolute;
	z-index: 0;
	inset-inline-start: 3%;
	top: 50%;
	transform: translateY(-50%);
	height: 150%;
	width: auto;
	max-width: none;
	opacity: .34;
	pointer-events: none;
	user-select: none;
}
@media (max-width: 700px) {
	.kleyman-mh-symbol { height: 120%; inset-inline-start: -12%; opacity: .22; }
}

/* Oct 2026 — breadcrumbs pinned just under the floating header on every
   dark masthead (they used to sit lower, inside the vertically-centred
   content block). The header overlaps the frame's top by its own height. */
.kleyman-hero-crumbs {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	top: calc(var(--header-height-desktop, 68px) + 18px);
}
.kleyman-hero-crumbs .kleyman-breadcrumbs { margin: 0; color: rgba(255, 255, 255, .64); }
.kleyman-hero-crumbs .kleyman-breadcrumbs a { color: rgba(255, 255, 255, .78); }
.kleyman-hero-crumbs .kleyman-breadcrumbs a:hover { color: #fff; }
@media (max-width: 1024px) { .kleyman-hero-crumbs { top: calc(var(--header-height-tablet, 66px) + 14px); } }
@media (max-width: 640px)  { .kleyman-hero-crumbs { top: calc(var(--header-height-mobile, 60px) + 12px); } }


/* ==========================================================================
   Oct 2026 — project card polish (approved preview): dark status tag with a
   colour dot, category · city line, brand stripe, hover reveal + photo zoom.
   ========================================================================== */
.kleyman-project-card { border-radius: 18px; overflow: hidden; }
.kleyman-project-card .kleyman-status-pill {
	background: rgba(12, 22, 58, .78); color: #fff; border: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 14px; font-weight: 600; letter-spacing: .01em;
}
.kleyman-project-card .kleyman-status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--card-dot, #fff); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.kleyman-status-pill--marketing { --card-dot: #4FD27E; }
.kleyman-status-pill--construction { --card-dot: #FFC400; }
.kleyman-status-pill--planning { --card-dot: #C29466; }
.kleyman-status-pill--done { --card-dot: #B8C2D9; }
.kleyman-project-card .kleyman-project-card__overlay { background: linear-gradient(0deg, rgba(12, 22, 58, .88) 0%, rgba(12, 22, 58, .45) 34%, rgba(12, 22, 58, 0) 62%); opacity: 1; }
.kleyman-project-card { --card-cat: #5571B8; --card-cat-line: #8FA6E0; }
.kleyman-project-card--green { --card-cat: #11793A; --card-cat-line: #4FB574; }
.kleyman-project-card--brown { --card-cat: #8A5A33; --card-cat-line: #C29466; }
.kleyman-project-card .kleyman-project-card__link::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--card-cat); z-index: 3; }
.kleyman-project-card__cat { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .82); margin-bottom: 4px; }
.kleyman-project-card__cat::before { content: ''; width: 18px; height: 2px; background: var(--card-cat-line); }
.kleyman-project-card__more {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, .18); font-size: 13.5px; color: rgba(255, 255, 255, .85);
	max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease;
}
.kleyman-project-card__more b { color: #fff; font-weight: 600; }
.kleyman-project-card__img { transition: transform .6s var(--kleyman-ease, ease); }
@media (hover: hover) {
	.kleyman-project-card:hover .kleyman-project-card__more,
	.kleyman-project-card:focus-within .kleyman-project-card__more { max-height: 60px; opacity: 1; }
	.kleyman-project-card:hover .kleyman-project-card__img { transform: scale(1.05); }
}
/* Touch: no hover — keep the role line hidden, the whole card is the link. */

.kleyman-cat-card .kleyman-status-pill {
	background: rgba(12, 22, 58, .78); color: #fff; border: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 14px; font-weight: 600;
}
.kleyman-cat-card .kleyman-status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--card-dot, #fff); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }