/* ==========================================================================
   KLEYMAN SHOWCASE — motion/UX sandbox layer
   Loaded ONLY on the "קונספט מושן" page template (body.kleyman-showcase).
   Everything here is additive on top of main.css — no existing rule is
   overridden destructively, and nothing in main.css/main.js/animations.js
   was touched, so the real homepage is 100% unaffected.

   Implements, from the audit report:
   Part C — Motion Design System (premium/architectural/controlled)
   Part D — Brand Signature Motion (cube-based cursor + separators)
   Part K — Section Transitions (flow, not stacked divs)
   Part Q — Signature Interactions (Cube Cursor, Process Rail, Line-Draw)
   Part R/S — Top improvements + Quick Wins (hover states, focus, whitespace)
   Part O — Accessibility (prefers-reduced-motion, focus-visible, tap targets)
   ========================================================================== */

body.kleyman-showcase { --kleyman-flow-h: 90px; }

/* --------------------------------------------------------------------
   1. SECTION TRANSITIONS — Part K
   Each section gets a thin "living separator" (grown from the logo's
   hairline-divider language already used in the Numbers section) that
   draws itself in as the next section arrives, plus a very small
   negative-overlap + fade so sections stop reading as stacked divs.
   -------------------------------------------------------------------- */
body.kleyman-showcase .kleyman-about,
body.kleyman-showcase .kleyman-areas,
body.kleyman-showcase .kleyman-process,
body.kleyman-showcase .kleyman-projects,
body.kleyman-showcase .kleyman-numbers,
body.kleyman-showcase .kleyman-media {
	position: relative;
	z-index: 1;
}

.kleyman-flow-line {
	position: relative;
	height: 1px;
	margin: 0 auto;
	max-width: var(--kleyman-container);
	width: 90vw;
	background: linear-gradient(90deg, transparent, var(--kleyman-border) 15%, var(--kleyman-border) 85%, transparent);
	overflow: visible;
}
.kleyman-flow-line__fill {
	position: absolute;
	inset-inline-start: 50%;
	top: 0;
	height: 1px;
	width: 0;
	background: linear-gradient(90deg, var(--kleyman-blue), var(--kleyman-green));
	transform: translateX(50%);
}
.kleyman-flow-line__mark {
	position: absolute;
	top: 50%;
	inset-inline-start: 50%;
	width: 22px; height: 22px;
	transform: translate(-50%, -50%) rotate(0deg) scale(.4);
	opacity: 0;
	background: var(--kleyman-white);
	border-radius: 4px;
}
.kleyman-flow-line__mark svg { width: 100%; height: 100%; }
.kleyman-flow-line.is-in .kleyman-flow-line__fill { width: 220px; transition: width 1.1s var(--kleyman-ease); }
.kleyman-flow-line.is-in .kleyman-flow-line__mark { opacity: 1; transform: translate(-50%, -50%) rotate(225deg) scale(1); transition: opacity .6s ease .3s, transform .8s var(--kleyman-ease) .3s; }

/* --------------------------------------------------------------------
   2. CUBE CURSOR — Part D / Q (desktop pointer:fine only; never on touch)
   A minimal isometric-cube outline (echoing the logo mark) replaces the
   system cursor across interactive zones. Neutral/small by default,
   opens + tints on hover of anything clickable so it always signals
   "you can act here" before the click.
   -------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	body.kleyman-showcase.kleyman-cube-cursor-active,
	body.kleyman-showcase.kleyman-cube-cursor-active * { cursor: none !important; }

	.kleyman-cube-cursor {
		position: fixed;
		top: 0; left: 0;
		width: 26px; height: 26px;
		margin: -13px 0 0 -13px;
		pointer-events: none;
		z-index: 10000;
		opacity: 0;
		will-change: transform, opacity;
		transition: opacity .25s ease;
	}
	.kleyman-cube-cursor.is-visible { opacity: 1; }
	.kleyman-cube-cursor__shape {
		width: 100%; height: 100%;
		transform: rotate(0deg) scale(1);
		transition: transform .35s var(--kleyman-ease);
	}
	.kleyman-cube-cursor.is-hover .kleyman-cube-cursor__shape { transform: rotate(45deg) scale(1.6); }
	.kleyman-cube-cursor__shape path {
		fill: none;
		stroke: var(--kleyman-dark);
		stroke-width: 1.4;
	}
	.kleyman-cube-cursor.is-hover .kleyman-cube-cursor__shape path { stroke: var(--kleyman-green); }
	.kleyman-cube-cursor.is-on-dark .kleyman-cube-cursor__shape path { stroke: #fff; }
}

/* --------------------------------------------------------------------
   3. PROCESS / SCROLL RAIL — Part D / Q
   A slim fixed vertical progress rail (desktop only) tracking overall
   page scroll, with tick marks per section — the "digital signature"
   read even with the logo out of view: a hairline + moving joint,
   exactly the Numbers-section divider language, now running the whole
   page.
   -------------------------------------------------------------------- */
body.kleyman-rail-hidden .kleyman-scroll-rail { opacity: 0; pointer-events: none; }
.kleyman-scroll-rail {
	transition: opacity .3s ease;
	position: fixed;
	top: 50%;
	inset-inline-end: 22px;
	transform: translateY(-50%);
	width: 2px;
	height: 220px;
	background: rgba(12,22,58,.1);
	border-radius: 2px;
	z-index: 500;
	display: none;
}
.kleyman-scroll-rail__fill {
	position: absolute;
	top: 0; inset-inline-start: 0;
	width: 100%;
	height: 0%;
	background: linear-gradient(180deg, var(--kleyman-blue), var(--kleyman-green));
	border-radius: 2px;
}
.kleyman-scroll-rail__joint {
	position: absolute;
	inset-inline-start: 50%;
	top: 0%;
	width: 9px; height: 9px;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--kleyman-white);
	border: 1.5px solid var(--kleyman-green);
	transition: top .1s linear;
}
@media (min-width: 1200px) and (hover: hover) {
	.kleyman-scroll-rail { display: block; }
}

/* --------------------------------------------------------------------
   4. HERO — video kept exactly as-is; only added: scroll cue + slightly
   richer title stagger container (JS splits into spans) + subtle
   depth on trust badges. Part E.
   -------------------------------------------------------------------- */
body.kleyman-showcase .kleyman-hero__title .word {
	display: inline-block;
	overflow: hidden;
}
body.kleyman-showcase .kleyman-hero__title .word > span { display: inline-block; will-change: transform; }

/* Hero title accent: "באהבה" gets a slow-moving brand-color shimmer
   (blue → green → gold) instead of plain white, plus a faint warm glow
   behind it — a quiet, premium sparkle rather than anything flashy or
   animated-GIF-like. Respects reduced-motion (falls back to a static
   gradient, still on-brand). */
body.kleyman-showcase .kleyman-hero__title-shine {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(
		100deg,
		#eaf2ff 0%,
		#9fc3ff 18%,
		#ffffff 32%,
		#bfe8c9 46%,
		#ffffff 60%,
		#f0d9b8 74%,
		#ffffff 88%,
		#eaf2ff 100%
	);
	background-size: 260% auto;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
	filter: drop-shadow(0 0 18px rgba(255, 221, 170, .28));
	animation: kleymanHeroShine 7s ease-in-out infinite;
}
@keyframes kleymanHeroShine {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
	body.kleyman-showcase .kleyman-hero__title-shine { animation: none; background-position: 35% 50%; }
}

.kleyman-hero__scroll-cue {
	position: absolute;
	bottom: 22px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: #fff;
	opacity: 0;
	z-index: 3;
	font-size: 11px;
	letter-spacing: .12em;
}
.kleyman-hero__scroll-cue span.line {
	width: 1px; height: 28px;
	background: rgba(255,255,255,.55);
	position: relative;
	overflow: hidden;
}
.kleyman-hero__scroll-cue span.line::after {
	content: "";
	position: absolute;
	top: -100%; left: 0;
	width: 100%; height: 100%;
	background: #fff;
	animation: kleyman-cue-drip 1.8s ease-in-out infinite;
}
@keyframes kleyman-cue-drip {
	0% { top: -100%; }
	60% { top: 100%; }
	100% { top: 100%; }
}

/* --------------------------------------------------------------------
   5. MAGNETIC BUTTONS — quick win, applies to all .kleyman-btn on this
   page (subtle pull toward the cursor, CSS-driven via custom props JS
   sets on mousemove; safe no-op until JS runs).
   -------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	body.kleyman-showcase .kleyman-btn {
		transform: translate(var(--mx, 0), var(--my, 0));
		transition: transform .25s var(--kleyman-ease), background-color .2s ease, color .2s ease, border-color .2s ease;
	}
}

/* --------------------------------------------------------------------
   6. PROJECT FILTER PILLS — richer active state + clip-wipe on the grid
   swap (Part F: "filters must not feel like plain HTML buttons").
   -------------------------------------------------------------------- */
body.kleyman-showcase .kleyman-pill {
	position: relative;
	overflow: hidden;
	transition: transform .3s var(--kleyman-ease), color .25s ease, box-shadow .3s ease;
}
body.kleyman-showcase .kleyman-pill::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	background: currentColor;
	opacity: .08;
	transition: transform .45s var(--kleyman-ease);
	z-index: -1;
}
body.kleyman-showcase .kleyman-pill:hover::after,
body.kleyman-showcase .kleyman-pill.is-active::after { transform: scaleX(1); }
body.kleyman-showcase .kleyman-pill.is-active { box-shadow: var(--kleyman-shadow-sm); }
body.kleyman-showcase .kleyman-pill:active { transform: scale(.96); }

body.kleyman-showcase #kleyman-home-projects-grid {
	transition: opacity .35s ease;
}
body.kleyman-showcase #kleyman-home-projects-grid.is-filtering {
	opacity: 0;
}

/* --------------------------------------------------------------------
   7. PROJECT CARDS — richer hover: image scale + slow pan, title lift,
   consistent with "architectural, controlled" language (Part F).
   -------------------------------------------------------------------- */
body.kleyman-showcase .kleyman-project-card { will-change: transform; }
body.kleyman-showcase .kleyman-project-card img,
body.kleyman-showcase .kleyman-project-card video {
	transition: transform 1.1s var(--kleyman-ease);
}
body.kleyman-showcase .kleyman-project-card:hover img,
body.kleyman-showcase .kleyman-project-card:hover video { transform: scale(1.06); }

/* Curated showcase video thumbnails (project-card-showcase.php): same
   fill/cover box as the image cards (.kleyman-project-card__img already
   covers sizing via main.css), just muted-autoplay specific resets. */
body.kleyman-showcase .kleyman-project-card__video {
	display: block;
	pointer-events: none;
	background: #0c1b2b;
}

/* --------------------------------------------------------------------
   8. NUMBERS — individually staggered emphasis (Part H): each stat gets
   a tiny "settle" pop after the shared fade-up, driven by nth-child
   delay so it never depends on layout-order JS.
   -------------------------------------------------------------------- */
body.kleyman-showcase .kleyman-stat { transition: transform .4s var(--kleyman-ease); }
body.kleyman-showcase .kleyman-stat:hover { transform: translateY(-4px); }

/* --------------------------------------------------------------------
   9. FOOTER — architectural line reveal + slightly stronger close
   (Part J: "must feel like a strong ending").
   -------------------------------------------------------------------- */
/* More clean white space above the floating navy footer card (it had
   margin only on the sides/bottom, none on top, so it sat flush against
   the Media section right above it). */
body.kleyman-showcase .kleyman-footer { position: relative; overflow: hidden; margin-top: 56px; }
body.kleyman-showcase .kleyman-footer__line {
	position: absolute;
	top: 0; inset-inline-start: 0;
	height: 1px;
	width: 0;
	background: linear-gradient(90deg, var(--kleyman-blue-on-dark), var(--kleyman-green), var(--kleyman-brown));
}
body.kleyman-showcase .kleyman-footer__line.is-in { width: 100%; transition: width 1.4s var(--kleyman-ease); }
body.kleyman-showcase .kleyman-social-icon,
body.kleyman-showcase .kleyman-footer__links-grid a {
	transition: transform .25s var(--kleyman-ease), opacity .25s ease, color .2s ease;
}
body.kleyman-showcase .kleyman-social-icon:hover { transform: translateY(-3px); }
body.kleyman-showcase .kleyman-footer__links-grid a:hover { padding-inline-start: 4px; opacity: .85; }

/* --------------------------------------------------------------------
   10. ACCESSIBILITY / QUICK WINS — Part O
   -------------------------------------------------------------------- */
body.kleyman-showcase a:focus-visible,
body.kleyman-showcase button:focus-visible {
	outline: 2px solid var(--kleyman-green);
	outline-offset: 3px;
	border-radius: 4px;
}
body.kleyman-showcase .kleyman-pill,
body.kleyman-showcase .kleyman-btn,
body.kleyman-showcase .kleyman-timeline__hit {
	min-height: 40px;
}

@media (prefers-reduced-motion: reduce) {
	body.kleyman-showcase .kleyman-cube-cursor,
	body.kleyman-showcase .kleyman-scroll-rail,
	body.kleyman-showcase .kleyman-hero__scroll-cue { display: none !important; }
	body.kleyman-showcase .kleyman-flow-line__fill,
	body.kleyman-showcase .kleyman-flow-line__mark,
	body.kleyman-showcase .kleyman-footer__line { transition: none !important; width: 100% !important; opacity: 1 !important; }
}

/* --------------------------------------------------------------------
   11. MOBILE — Part M: lighter/shorter, no cursor effects, no rail,
   smaller magnetic pull disabled entirely (see JS: it's gated to
   hover:hover+pointer:fine anyway, this is belt-and-braces).
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.kleyman-scroll-rail,
	.kleyman-cube-cursor { display: none !important; }
	body.kleyman-showcase .kleyman-btn { transform: none !important; }
}
@media (max-width: 640px) {
	.kleyman-flow-line { width: 82vw; }
}

/* ==========================================================================
   ROUND 2 — approved feedback (Oct 1): header glass-on-scroll + per-section
   hierarchy/clarity/interaction pass. This page is now treated as THE
   homepage going forward; still additive-only (showcase.css/js + the
   home-showcase/ + footer-showcase.php copies) so the real front-page.php
   stays untouched until this is promoted.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. HEADER — persistent glass on scroll (stays docked via JS adding
   position:fixed is handled below; .is-scrolled toggles the glass).
   -------------------------------------------------------------------- */
body.kleyman-showcase .kleyman-header {
	position: fixed;
	/* Centered via inset-inline/margin-inline, not left:50%+transform —
	   see the matching comment on the base .kleyman-header rule in
	   main.css for why: the nav-fade-down entrance reveal and main.js's
	   reveal safety net both drive `transform`, which was clobbering a
	   translateX(-50%) used for centering and left the header pinned to
	   the left half of the page. */
	left: auto;
	inset-inline: 0;
	transform: none;
	margin-inline: auto;
	transition: top .4s var(--kleyman-ease), box-shadow .4s ease, border-radius .4s ease;
}
/* Glass lives on a pseudo-element: backdrop-filter on the header itself
   makes it the containing block for the position:fixed mobile drawer,
   which then got clipped to the header pill whenever the page was scrolled. */
body.kleyman-showcase .kleyman-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background: rgba(12,22,58,0);
	transition: background-color .4s ease;
}
body.kleyman-showcase .kleyman-header.is-scrolled {
	top: 14px;
	box-shadow: 0 10px 34px rgba(12,22,58,.2);
	border-radius: 999px;
}
body.kleyman-showcase .kleyman-header.is-scrolled::before {
	background: rgba(12,22,58,.52);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
}
body.kleyman-showcase .kleyman-header.is-scrolled .kleyman-header__inner { min-height: 76px; }
@media (max-width: 1024px) {
	body.kleyman-showcase .kleyman-header.is-scrolled { border-radius: 24px; }
}

/* --------------------------------------------------------------------
   2. HERO — nav legibility fade, CTA button, slow ambient zoom.
   -------------------------------------------------------------------- */
.kleyman-hero__nav-fade {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 180px;
	background: linear-gradient(180deg, rgba(5,10,28,.55), transparent);
	z-index: 2;
	pointer-events: none;
}
/* Per client feedback: the slow ambient zoom on the hero media read as
   "stuck/laggy" rather than premium — removed. */
.kleyman-btn--hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 1.5px solid #fff;
	color: #fff;
	padding: 11px 30px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 16px;
	transition: transform .3s var(--kleyman-ease), box-shadow .3s ease, background-color .25s ease, border-color .25s ease;
	box-shadow: none;
}
.kleyman-btn--hero-cta:hover { background: rgba(255,255,255,.12); border-color: var(--kleyman-green); color: #fff; transform: translateY(-3px); }
.kleyman-btn--hero-cta svg { transform: scaleX(-1); transition: transform .3s var(--kleyman-ease); }
.kleyman-btn--hero-cta:hover svg { transform: scaleX(-1) translateX(-3px); }
body.kleyman-showcase .kleyman-hero__trust { border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; }
/* Equalise the gap above/below the CTA button (title→button vs
   button→trust-badges) without moving the title's or the badges' own
   on-screen position: .kleyman-hero__trust is absolutely positioned
   (bottom:40px, independent of the button), so the only lever is the
   button's own margin-top together with the content block's bottom
   padding, solved together so the title doesn't shift either. */
/* Per client feedback (round 2): the equalised gaps above still read as
   too much overall air — tightened both by the same amount so they
   stay equal to each other while sitting closer together. */
.kleyman-btn--hero-cta { margin-top: 18px; }
/* Oct 2026: trust badges removed from the hero — title + button drop down
   to just above the scroll cue (cue sits at bottom:22px, ~50px tall). */
body.kleyman-showcase .kleyman-hero__content { padding-block: 40px 92px; }
@media (max-width: 1024px) { body.kleyman-showcase .kleyman-hero__content { padding-block: 32px 86px; } }
@media (max-width: 700px) { body.kleyman-showcase .kleyman-hero__content { padding-block: 28px 80px; } }

/* Header's own "צרו קשר" CTA (shared/global, header.php) — shown over
   the hero on this page too; just trimming its vertical padding here,
   scoped to the showcase body so header.php itself stays untouched. */
body.kleyman-showcase .kleyman-header__cta { padding: 10px 28px; }

/* --------------------------------------------------------------------
   3. ABOUT — flag sentence + lighter/bigger watermark.
   -------------------------------------------------------------------- */
.kleyman-about__flag {
	font-size: clamp(19px, 1.9vw, 24px);
	font-weight: 700;
	color: var(--kleyman-dark);
	border-right: 3px solid var(--kleyman-green);
	padding-inline-start: 18px;
	margin-block: 18px 6px;
	line-height: 1.45;
}
body.kleyman-showcase .kleyman-about__watermark {
	font-size: clamp(54px, 7vw, 92px);
	opacity: .05;
}
body.kleyman-showcase .kleyman-about__collage-frame,
body.kleyman-showcase .kleyman-about__collage-photo {
	will-change: transform;
	transition: transform .1s linear;
}
body.kleyman-showcase .kleyman-about .kleyman-btn--outline-green {
	padding: 15px 34px;
	font-size: 16.5px;
}

/* Section title: a touch larger than the protected default, with real
   breathing room above it (on top of the section's own top padding) so
   it doesn't feel cramped against whatever sits above. */
body.kleyman-showcase .kleyman-projects__title {
	font-size: clamp(34px, 4vw, 48px);
	margin-top: 20px;
}
/* More room below the "לכל הפרויקטים" button before the section ends. */
body.kleyman-showcase .kleyman-projects__more { margin-bottom: 28px; }

/* Category filter pills (Projects section) — a bit bigger, a bit more
   air between them, and a resting shadow instead of only a hover one. */
body.kleyman-showcase .kleyman-projects__tabs { gap: 24px; }
body.kleyman-showcase .kleyman-projects__tabs .kleyman-pill {
	padding: 18px 42px;
	font-size: 16.5px;
	box-shadow: 0 6px 16px rgba(12,22,58,.07);
}

/* --------------------------------------------------------------------
   4. ACTIVITY AREAS — bigger/aligned labels, hover description, calmer
   panel edge.
   -------------------------------------------------------------------- */
/* Per client feedback: the section felt cramped against whatever comes
   next — more breathing room below the 4-card row before the section
   ends (main.css's own bottom padding here is 96px). */
body.kleyman-showcase .kleyman-areas { padding-bottom: 160px; }
body.kleyman-showcase .kleyman-area__label {
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 700;
}

/* Per-client feedback: the hover shadow on these cards was flat black
   for every card, regardless of its own brand-color accent (blue/green/
   brown). Swap it for a more pronounced, color-matched glow — each
   card's own accent color, not black — and make the lift read a touch
   stronger to match. Overrides main.css's single generic
   ".kleyman-area:hover { filter: drop-shadow(...) }" rule (kept as the
   fallback for any area without a known modifier class). */
body.kleyman-showcase .kleyman-area:hover {
	transform: translateY(-10px);
}
body.kleyman-showcase .kleyman-area--blue:hover {
	filter: drop-shadow(0 22px 38px rgba(12, 22, 58, .38));
}
body.kleyman-showcase .kleyman-area--green:hover {
	filter: drop-shadow(0 22px 38px rgba(17, 121, 58, .38));
}
body.kleyman-showcase .kleyman-area--brown:hover {
	filter: drop-shadow(0 22px 38px rgba(138, 90, 51, .38));
}
/* Per client feedback: the trailing arrow on each card is unnecessary —
   drop it. */
body.kleyman-showcase .kleyman-area__arrow { display: none; }

/* --------------------------------------------------------------------
   5. PROCESS — all 11 original steps as a true horizontally-scrollable
   timeline. Replaces the old GSAP-pin-and-pan mechanism (page vertical
   scroll driving a transform) with a native overflow-x scroller: mouse
   wheel, trackpad, mouse-drag and touch swipe all move the row directly
   (see showcase.js), with gentle scroll-snap. RTL reading order (step 1
   at the physical right, step 11 at the left) lives in the ltr-direction
   + row-reverse trick on stage/track, same as before; JS sets the
   resting scroll position to the "step 1" end on load. Same mechanism
   at every breakpoint — mobile is not a vertical stack, it's a
   single-card-at-a-time version of the same scroller.
   -------------------------------------------------------------------- */
.kleyman-process {
	padding-block: 104px 96px;
	position: relative;
}
/* Item 14: an almost-invisible radial glow for depth — never a dark bg. */
.kleyman-process::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 35%, rgba(12, 22, 58,.035), transparent 55%);
	pointer-events: none;
	z-index: 0;
}
.kleyman-process > * { position: relative; z-index: 1; }

/* GSAP ScrollTrigger pins/releases .kleyman-process-hscroll itself (via
   its own auto-inserted spacer) within this wrapper's bounds — no fixed
   height needed here, ScrollTrigger sizes its spacer to match the pin
   distance computed in showcase.js. Desktop only; on mobile/tablet no
   ScrollTrigger instance is created, so this stays a plain wrapper. */
/* padding-top (not a margin-top on the pinned element itself) on
   purpose: .kleyman-process-hscroll is what GSAP ScrollTrigger pins
   below (desktop only), and a margin on a pinned element can collapse
   into/out of GSAP's auto-generated pin-spacer in a way that doesn't
   stay in sync when the user scrolls back UP through the pin boundary
   — visible as a large blank gap between this section and the next
   one. A margin on .kleyman-process-pin itself (the ScrollTrigger
   TRIGGER element, never the pinned one) reproduces the same visual
   gap and the same effective trigger position GSAP measures — so the
   pin's start/engage point stays exactly where it was — while keeping
   .kleyman-process-hscroll (the element GSAP actually pins/wraps in
   its own spacer) margin-free, which is what fixed the scroll-up gap.
   (An earlier attempt used padding-top here instead, which shifted the
   trigger element's own measured top position and broke the pin's
   sticky engagement — reverted.) Kept as a margin on
   .kleyman-process-hscroll for the mobile/tablet breakpoint further
   down, which never pins, so it's unaffected either way. */
.kleyman-process-pin { position: relative; margin-top: 40px; }
.kleyman-process-hscroll { position: relative; }
.kleyman-process-hscroll__stage {
	--kleyman-process-amp: 36px;
	direction: ltr;
	display: flex;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	/* `proximity` as the baseline (gentle, won't yank a slow touch-swipe
	   mid-gesture on mobile/tablet); desktop upgrades to `mandatory`
	   below now that the old pin-scrub is permanently off (hsUsePin) and
	   this is a plain wheel/drag-panned row — a firm per-card snap is
	   what makes a non-pinned row read as fast/responsive rather than a
	   long strip you have to scroll "through". */
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;
	cursor: grab;
	padding-block: 68px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(16px, 4vw, 48px), #000 calc(100% - clamp(16px, 4vw, 48px)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 clamp(16px, 4vw, 48px), #000 calc(100% - clamp(16px, 4vw, 48px)), transparent 100%);
}
.kleyman-process-hscroll__stage::-webkit-scrollbar { display: none; height: 0; }
.kleyman-process-hscroll__stage.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
@media (min-width: 1025px) {
	.kleyman-process-hscroll__stage { scroll-snap-type: x mandatory; }
}
.kleyman-process-hscroll__track {
	direction: ltr;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	flex: 0 0 auto;
	gap: clamp(24px, 2vw, 36px);
	padding-inline: clamp(20px, 4vw, 56px);
	position: relative;
}
/* Centre baseline the cards alternate above/below — a deliberate, gentle
   wave rather than a random-looking scatter — with a soft brand-tinted
   line (not flat gray, not loud) running behind the whole row. */
.kleyman-process-hscroll__track::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 2.5px;
	background: linear-gradient(90deg, rgba(12, 22, 58,.5), rgba(17, 121, 58,.5) 50%, rgba(138, 90, 51,.5));
	transform: translateY(-1.25px);
	z-index: 0;
}
.kleyman-process-hscroll__track { counter-reset: hsstep; }
.kleyman-process-hscroll__item {
	--ty: 0px;
	--scale: 1;
	direction: rtl;
	position: relative;
	z-index: 1;
	flex: 0 0 288px;
	min-height: 302px;
	background: var(--kleyman-white);
	border: 1px solid var(--kleyman-border);
	border-radius: 20px;
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 10px 28px rgba(12,22,58,.055);
	transform: translateY(var(--ty)) scale(var(--scale));
	transition: box-shadow .4s var(--kleyman-ease), border-color .4s var(--kleyman-ease), transform .4s var(--kleyman-ease), opacity .4s ease;
	overflow: hidden;
	counter-increment: hsstep;
	opacity: .88;
	scroll-snap-align: center;
}
.kleyman-process-hscroll__item::before {
	content: '';
	position: absolute;
	top: 0; right: 0; left: 0;
	height: 4px;
}
.kleyman-process-hscroll__item--blue::before { background: linear-gradient(90deg, #2E6FE0, var(--kleyman-blue-dark)); }
.kleyman-process-hscroll__item--green::before { background: linear-gradient(90deg, #24C158, #14793A); }
.kleyman-process-hscroll__item--brown::before { background: linear-gradient(90deg, #C7976A, #8F6039); }
/* Big faint watermark number behind the content — item 4: kept to a
   barely-there 4% so it reads as texture, not clutter; the focused
   centre card gets a touch more presence. */
.kleyman-process-hscroll__item-title::after {
	content: counter(hsstep, decimal-leading-zero);
	position: absolute;
	top: 10px;
	inset-inline-end: 18px;
	font-size: 58px;
	font-weight: 900;
	line-height: 1;
	color: var(--kleyman-text);
	opacity: .04;
	z-index: -1;
	pointer-events: none;
	transition: opacity .4s ease;
}
.kleyman-process-hscroll__item.is-active .kleyman-process-hscroll__item-title::after { opacity: .07; }
.kleyman-process-hscroll__item:nth-child(odd) { --ty: calc(var(--kleyman-process-amp, 36px) * -1); }
.kleyman-process-hscroll__item:nth-child(even) { --ty: var(--kleyman-process-amp, 36px); }
/* Item 6: hover always lifts the card a further 6px toward the top,
   whichever side of the wave it started on, plus a deeper, brand-tinted
   shadow and border — never a plain flat black shadow. */
.kleyman-process-hscroll__item:nth-child(odd):hover { --ty: calc(var(--kleyman-process-amp, 36px) * -1 - 6px); }
.kleyman-process-hscroll__item:nth-child(even):hover { --ty: calc(var(--kleyman-process-amp, 36px) - 6px); }
.kleyman-process-hscroll__item--blue:hover { border-color: rgba(12, 22, 58,.38); box-shadow: 0 22px 44px rgba(12, 22, 58,.16); }
.kleyman-process-hscroll__item--green:hover { border-color: rgba(17, 121, 58,.38); box-shadow: 0 22px 44px rgba(17, 121, 58,.16); }
.kleyman-process-hscroll__item--brown:hover { border-color: rgba(138, 90, 51,.38); box-shadow: 0 22px 44px rgba(138, 90, 51,.16); }
.kleyman-process-hscroll__item::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--kleyman-white);
	border: 2px solid var(--kleyman-border);
	transform: translateX(-50%);
	transition: box-shadow .35s ease, border-color .35s ease;
	z-index: 2;
}
.kleyman-process-hscroll__item:nth-child(odd)::after { bottom: calc(var(--kleyman-process-amp, 36px) * -1); }
.kleyman-process-hscroll__item:nth-child(even)::after { top: calc(var(--kleyman-process-amp, 36px) * -1); }
.kleyman-process-hscroll__item--blue::after { border-color: var(--kleyman-blue); background: var(--kleyman-blue); box-shadow: 0 0 0 3px var(--kleyman-white); }
.kleyman-process-hscroll__item--green::after { border-color: var(--kleyman-green); background: var(--kleyman-green); box-shadow: 0 0 0 3px var(--kleyman-white); }
.kleyman-process-hscroll__item--brown::after { border-color: var(--kleyman-brown); background: var(--kleyman-brown); box-shadow: 0 0 0 3px var(--kleyman-white); }
/* The stem — a clear, solid, brand-colored thread from each card's edge
   down/up to its connector dot on the line, so the row reads
   unmistakably as "11 linked steps" rather than cards that happen to be
   near a faint line. Kept thin (2px) so it stays elegant, not bulky. */
.kleyman-process-hscroll__item-stem {
	content: '';
	position: absolute;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	z-index: 1;
	opacity: .55;
}
.kleyman-process-hscroll__item:nth-child(odd) .kleyman-process-hscroll__item-stem {
	bottom: calc(var(--kleyman-process-amp, 36px) * -1 + 5px);
	height: calc(var(--kleyman-process-amp, 36px) - 5px);
}
.kleyman-process-hscroll__item:nth-child(even) .kleyman-process-hscroll__item-stem {
	top: calc(var(--kleyman-process-amp, 36px) * -1 + 5px);
	height: calc(var(--kleyman-process-amp, 36px) - 5px);
}
.kleyman-process-hscroll__item--blue .kleyman-process-hscroll__item-stem { background: var(--kleyman-blue); }
.kleyman-process-hscroll__item--green .kleyman-process-hscroll__item-stem { background: var(--kleyman-green); }
.kleyman-process-hscroll__item--brown .kleyman-process-hscroll__item-stem { background: var(--kleyman-brown); }
.kleyman-process-hscroll__item:hover .kleyman-process-hscroll__item-stem,
.kleyman-process-hscroll__item.is-active .kleyman-process-hscroll__item-stem { opacity: .85; }
.kleyman-process-hscroll__item--blue:hover::after,
.kleyman-process-hscroll__item--blue.is-active::after { box-shadow: 0 0 0 6px rgba(12, 22, 58,.16); }
.kleyman-process-hscroll__item--green:hover::after,
.kleyman-process-hscroll__item--green.is-active::after { box-shadow: 0 0 0 6px rgba(17, 121, 58,.16); }
.kleyman-process-hscroll__item--brown:hover::after,
.kleyman-process-hscroll__item--brown.is-active::after { box-shadow: 0 0 0 6px rgba(138, 90, 51,.16); }
/* Item 7: the card nearest the stage's centre gets a very subtle
   "in-focus" lift — not a childish carousel zoom. Everything else sits
   a touch back at reduced opacity. */
.kleyman-process-hscroll__item.is-active {
	--scale: 1.02;
	opacity: 1;
	box-shadow: 0 20px 44px rgba(12,22,58,.14);
	border-color: currentColor;
}
.kleyman-process-hscroll__item-head { display: flex; align-items: center; justify-content: space-between; }
.kleyman-process-hscroll__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px; height: 54px;
	border-radius: 16px;
	color: #fff;
	box-shadow: 0 8px 18px rgba(12,22,58,.14), inset 0 1px 0 rgba(255,255,255,.3);
	position: relative;
	transition: transform .4s var(--kleyman-ease), box-shadow .4s ease;
}
.kleyman-process-hscroll__item--blue .kleyman-process-hscroll__item-icon { background: linear-gradient(145deg, #3C7CE8, var(--kleyman-blue-dark)); }
.kleyman-process-hscroll__item--green .kleyman-process-hscroll__item-icon { background: linear-gradient(145deg, #2FCB63, #14793A); }
.kleyman-process-hscroll__item--brown .kleyman-process-hscroll__item-icon { background: linear-gradient(145deg, #D4A97C, #8F6039); }
.kleyman-process-hscroll__item:hover .kleyman-process-hscroll__item-icon,
.kleyman-process-hscroll__item.is-active .kleyman-process-hscroll__item-icon { transform: translateY(-2px) scale(1.06); }
.kleyman-process-hscroll__item-n {
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -.01em;
	line-height: 1;
	color: var(--kleyman-border);
	opacity: .8;
	transition: opacity .35s ease;
}
.kleyman-process-hscroll__item:hover .kleyman-process-hscroll__item-n,
.kleyman-process-hscroll__item.is-active .kleyman-process-hscroll__item-n { opacity: 1; }
.kleyman-process-hscroll__item--blue .kleyman-process-hscroll__item-n { color: var(--kleyman-blue); }
.kleyman-process-hscroll__item--green .kleyman-process-hscroll__item-n { color: var(--kleyman-green); }
.kleyman-process-hscroll__item--brown .kleyman-process-hscroll__item-n { color: var(--kleyman-brown); }
.kleyman-process-hscroll__item-title { font-size: 20px; font-weight: 800; color: var(--kleyman-text); line-height: 1.32; letter-spacing: -.005em; }
.kleyman-process-hscroll__item-desc { font-size: 14px; color: #4B5160; line-height: 1.7; max-width: 95%; }

.kleyman-process-hscroll__progress {
	display: block;
	max-width: var(--kleyman-container);
	margin: 22px auto 0;
	padding-inline: clamp(20px, 4vw, 56px);
	height: 2.5px;
	background: var(--kleyman-border);
	border-radius: 2px;
	overflow: hidden;
}
.kleyman-process-hscroll__progress-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--kleyman-blue), var(--kleyman-green), var(--kleyman-brown));
	transition: width .12s linear;
}

/* Item 11: staggered entrance — each card fades/rises in 80ms after the
   previous one, driven by the --i index set in process.php, triggered
   once by showcase.js adding .is-in the first time the row is seen. */
.kleyman-process-hscroll__item {
	opacity: 0;
	transform: translateY(calc(var(--ty) + 20px)) scale(var(--scale));
	transition: opacity .6s var(--kleyman-ease), transform .6s var(--kleyman-ease), box-shadow .4s var(--kleyman-ease), border-color .4s var(--kleyman-ease);
	transition-delay: calc(var(--i, 0) * 80ms);
}
.kleyman-process-hscroll.is-in .kleyman-process-hscroll__item {
	opacity: .88;
	transform: translateY(var(--ty)) scale(var(--scale));
}
.kleyman-process-hscroll.is-in .kleyman-process-hscroll__item.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.kleyman-process-hscroll__item { transition-delay: 0ms !important; opacity: .88 !important; transform: translateY(var(--ty)) scale(var(--scale)) !important; }
}

@media (max-width: 1280px) {
	.kleyman-process-hscroll__item { flex-basis: 268px; min-height: 290px; }
}

/* Item 15: tablet/mobile stay the SAME horizontally-scrollable timeline
   — never a long vertical grid — just one primary card per view with
   the next one peeking at the edge, and the vertical wave flattened
   (there's no row context left to read a "wave" against). */
@media (max-width: 1024px) {
	.kleyman-process-hscroll__stage { --kleyman-process-amp: 0px; padding-block: 36px; }
	.kleyman-process-hscroll__item { flex-basis: 78vw; min-height: 270px; }
	.kleyman-process-hscroll__item::after { display: none; }
	.kleyman-process-hscroll__item-stem { display: none; }
	.kleyman-process-hscroll__track::before { display: none; }
}
@media (max-width: 768px) {
	/* Mobile-appropriate gap, overriding the desktop 40px via source
	   order (not pin-relevant here — mobile never pins). */
	.kleyman-process-pin { margin-top: 28px; }
	.kleyman-process-hscroll__track { gap: 16px; padding-inline: 20px; }
	.kleyman-process-hscroll__item { flex-basis: 85vw; min-height: 250px; padding: 24px 22px; }
	.kleyman-process-hscroll__item-title::after { font-size: 48px; }
}
@media (max-width: 400px) {
	.kleyman-process-hscroll__item { flex-basis: 88vw; }
}

/* Swipe hint: desktop pins/pans via vertical scroll, so this stays
   hidden there; mobile/tablet get an explicit "drag sideways" cue, with
   a small looping left-right nudge on the arrow so it reads as motion,
   not just a static label. */
.kleyman-process-hscroll__swipe-hint { display: none; }
@media (max-width: 1024px) {
	.kleyman-process-hscroll__swipe-hint {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 14px auto 0;
		color: var(--kleyman-text-muted);
		font-size: 13px;
		font-weight: 600;
	}
	.kleyman-process-hscroll__swipe-hint svg {
		transform: scaleX(-1); /* RTL: point toward the next (leftward) card */
		animation: kleyman-swipe-nudge 1.6s ease-in-out infinite;
	}
}
@keyframes kleyman-swipe-nudge {
	0%, 100% { transform: scaleX(-1) translateX(0); }
	50% { transform: scaleX(-1) translateX(-6px); }
}
@media (prefers-reduced-motion: reduce) {
	.kleyman-process-hscroll__swipe-hint svg { animation: none; }
}

/* --------------------------------------------------------------------
   6. PROJECTS — enable the "לפרויקט" arrow on hover (hidden on the
   stock homepage grid), stronger caption legibility.
   -------------------------------------------------------------------- */
body.kleyman-showcase .kleyman-projects__grid .kleyman-project-card__arrow { display: block; }
body.kleyman-showcase .kleyman-project-card__overlay {
	background: linear-gradient(180deg, rgba(12,22,58,0) 30%, rgba(12,22,58,.86) 100%);
}
body.kleyman-showcase .kleyman-projects__grid .kleyman-project-card__name { font-weight: 800; }
body.kleyman-showcase .kleyman-projects__grid .kleyman-project-card__city { font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; }
@media (max-width: 640px) {
	/* Client feedback: city/project name read too small on mobile cards. */
	body.kleyman-showcase .kleyman-projects__grid .kleyman-project-card__city { font-size: 18px; }
	body.kleyman-showcase .kleyman-projects__grid .kleyman-project-card__name { font-size: 26px; }
}

/* Filter pills: belt-and-braces against text clipping on mobile — the
   row already scrolls horizontally (main.css), but a flex item's default
   min-width:auto can still let it get squeezed by the row's own
   max-width/centering math before the browser hands control to the
   scrollbar. Pinning flex-shrink:0 + flex-basis:auto guarantees every
   pill always renders at its full natural (text) size, never compressed. */
@media (max-width: 640px) {
	body.kleyman-showcase .kleyman-projects__tabs .kleyman-pill {
		flex: 0 0 auto;
		padding: 13px 24px;
		font-size: 15px;
	}
}

/* Per client feedback ("ממש נגיעה קלה"): a light-touch bump to the
   decorative bg graphic's size and to each card's own width — main.css
   has the bg at 122%/max 1900px and the grid at max 1560px/26px gap. */
body.kleyman-showcase .kleyman-projects__bg { width: 130%; max-width: 2000px; }

/* Per client correction: keep the arrow in its original left:20 spot
   and the caption right-aligned as normal Hebrew/RTL — only the arrow
   GLYPH itself flips to point left (was a right-pointing chevron). */
body.kleyman-showcase .kleyman-projects__grid .kleyman-project-card__arrow svg { transform: scaleX(-1); }
body.kleyman-showcase .kleyman-projects__grid { max-width: min(96vw, 1660px); gap: 22px; }

/* --------------------------------------------------------------------
   7. NUMBERS — bigger figures, quieter watermark, underline reveal.
   -------------------------------------------------------------------- */
body.kleyman-showcase .kleyman-stat__value { font-size: clamp(42px, 5.6vw, 64px); }
body.kleyman-showcase .kleyman-numbers__subtitle { font-size: clamp(18px, 1.6vw, 21px); }
/* Per client feedback: the "+" belongs to the LEFT of the number, not
   trailing it. The count-up script (protected main.js) always appends
   its suffix after the digits it animates, so the "+" is split out into
   its own element here instead and the wrapper is forced to render
   left-to-right — in that order the "+" (first in source) lands on the
   left and the number (second) on the right, giving "+30" rather than
   "30+", while the digits themselves still count up exactly as before. */
body.kleyman-showcase .kleyman-stat__value-wrap {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
}
body.kleyman-showcase .kleyman-stat__plus {
	font-size: clamp(42px, 5.6vw, 64px);
	font-weight: inherit;
	line-height: 1;
}
.kleyman-stat__underline {
	display: block;
	width: 0;
	height: 3px;
	border-radius: 2px;
	margin: 8px 0 10px;
	background: currentColor;
}
.kleyman-stat--blue .kleyman-stat__underline { color: var(--kleyman-blue); }
.kleyman-stat--green .kleyman-stat__underline { color: var(--kleyman-green); }
.kleyman-stat--brown .kleyman-stat__underline { color: var(--kleyman-brown); }
.kleyman-stat.is-in .kleyman-stat__underline {
	width: 46px;
	transition: width .7s var(--kleyman-ease) calc(var(--stat-index, 0) * 80ms + .3s);
}

/* --------------------------------------------------------------------
   8. MEDIA — Press Spotlight Cover Flow, v2 (proportion/perspective
   redesign). The old version let each card's own aspect-ratio and
   main.css's 560px min-height fight it out, which is why cards came out
   almost full-screen-tall; this version gives every card one explicit,
   capped box (client's own clamp() numbers) so the carousel reads as a
   small, precise, premium strip — never three near-full-height pages
   side by side. The side cards are no longer just smaller/faded: real
   perspective + rotateY + translateZ + translateX (no skew, no image
   distortion) turns them to visibly face the centre card, like a stage
   curving gently around the visitor. main.js's existing infinite-loop /
   drag / --card-scale / --card-opacity engine is reused as-is (not
   touched — it's in the protected main.js); showcase.js now also writes
   --card-tilt / --card-tz / --card-tx from the same centre-distance
   measurement, and this file clamps scale/opacity into the tighter,
   more premium range and turns them into the 3D transform.
   -------------------------------------------------------------------- */
body.kleyman-showcase .kleyman-media { padding-block: 64px 132px; }
body.kleyman-showcase .kleyman-media__head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: 72px; }
body.kleyman-showcase .kleyman-media__eyebrow {
	/* Per client feedback: thinner, bigger, and sitting closer to the
	   heading right below it (was 800/26px/14px gap — read as too heavy
	   and too far from the title it introduces). */
	font-size: clamp(23px, 2.6vw, 30px);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kleyman-green);
	margin-bottom: 6px;
}
body.kleyman-showcase .kleyman-media__title { margin-bottom: 10px; }
body.kleyman-showcase .kleyman-media__subhead {
	font-size: clamp(16.5px, 1.65vw, 19px);
	color: var(--kleyman-text-muted);
	line-height: 1.6;
	margin: 0;
}

body.kleyman-showcase .kleyman-media__carousel { position: relative; }
body.kleyman-showcase .kleyman-media__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(560px, 55vw);
	height: 280px;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(12, 22, 58,.13), rgba(17, 121, 58,.08) 45%, transparent 72%);
	filter: blur(40px);
	pointer-events: none;
	z-index: 0;
}

body.kleyman-showcase .kleyman-media__viewport {
	position: relative;
	z-index: 1;
	perspective: 1400px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.kleyman-showcase .kleyman-media__track {
	gap: 40px;
	/* Bottom padding well past the shadow's own blur radius: .kleyman-
	   media__viewport (protected main.css) is overflow-y:hidden and
	   auto-sizes to this track, so whatever room the track doesn't leave
	   here is where the card shadow below gets hard-clipped into the
	   sharp line the client flagged — this margin is what fixes that
	   without touching the protected viewport rule itself. */
	padding-block: 20px 56px;
	transform-style: preserve-3d;
}

/* Item: one explicit, capped size for every card (the "smaller side
   card" read comes entirely from scale(), exactly like the reference
   perspective/rotateY/scale() example) — not driven by the source
   screenshot's own proportions. */
body.kleyman-showcase .kleyman-media-card {
	/* Per client feedback: every card 20% smaller than the original
	   clamp(420,33vw,570) / clamp(480,58vh,630) — same proportions,
	   scaled down. */
	flex: 0 0 clamp(336px, 26.5vw, 456px);
	width: clamp(336px, 26.5vw, 456px);
	min-height: 0;
	height: clamp(384px, 46.5vh, 504px);
	max-height: 504px;
	border-radius: 20px;
	/* Per client feedback: soft, in brand colors — not a hard black-ish
	   edge. Two layered shadows (blue + a touch of green) instead of one
	   near-black rgba(15,23,42) shadow. */
	box-shadow: 0 30px 60px -10px rgba(12, 22, 58,.18), 0 14px 32px -6px rgba(17, 121, 58,.10);
	transition: opacity .45s var(--kleyman-ease), transform .75s cubic-bezier(.22,1,.36,1), box-shadow .4s var(--kleyman-ease), filter .4s var(--kleyman-ease);
}
body.kleyman-showcase .kleyman-media-card.is-focus { z-index: 3; }
/* Side cards: dimmed only — never blurred. They have to stay legible
   enough that a visitor immediately reads "there's more to browse". */
body.kleyman-showcase .kleyman-media-card:not(.is-focus) { filter: brightness(.94); }
body.kleyman-showcase .kleyman-media-card.is-focus { filter: none; }

/* Real 3D — perspective + rotateY + translateZ + translateX + scale,
   nothing else. --card-tilt/--card-tz/--card-tx come from showcase.js
   (same centre-distance measurement main.js already does for
   --card-scale/--card-opacity); scale/opacity are clamped here into the
   0.84–1 / 0.55–1 range the client asked for rather than main.js's own
   wider curve. */
body.kleyman-showcase .kleyman-media-card {
	transform:
		perspective(1400px)
		rotateY(var(--card-tilt, 0deg))
		translateX(var(--card-tx, 0px))
		translateZ(var(--card-tz, 0px))
		scale(clamp(0.84, var(--card-scale, 1), 1));
	opacity: clamp(0.55, var(--card-opacity, 1), 1);
}
body.kleyman-showcase .kleyman-media-card.is-focus { opacity: 1; }
/* Hover: a side card visibly turns a little further toward the visitor
   (less rotation, a touch bigger, a touch more opaque) rather than just
   lifting; the centre card gets only a hair more lift/shadow. Scaling
   --card-tilt/--card-tz by a fraction (not replacing them outright)
   keeps the correct left/right sign for whichever side the card is on. */
body.kleyman-showcase .kleyman-media-card:not(.is-focus):hover,
body.kleyman-showcase .kleyman-media-card:not(.is-focus):focus-within {
	transform:
		perspective(1400px)
		rotateY(calc(var(--card-tilt, 0deg) * .65))
		translateX(calc(var(--card-tx, 0px) * .7))
		translateZ(calc(var(--card-tz, 0px) * .5))
		scale(calc(clamp(0.84, var(--card-scale, 1), 1) + 0.03));
	opacity: .88;
	box-shadow: 0 30px 60px -8px rgba(12, 22, 58,.22), 0 14px 34px -6px rgba(17, 121, 58,.12);
	cursor: pointer;
}
body.kleyman-showcase .kleyman-media-card.is-focus:hover,
body.kleyman-showcase .kleyman-media-card.is-focus:focus-within {
	transform: perspective(1400px) translateZ(calc(var(--card-tz, 0px) + 18px)) scale(1.015);
	box-shadow: 0 34px 70px -8px rgba(12, 22, 58,.26), 0 16px 38px -6px rgba(17, 121, 58,.14);
}
body.kleyman-showcase .kleyman-media-card--lead { min-width: 0; }

/* Item: the preview is a fixed viewport, not the screenshot's own
   height — this (together with the explicit card height above) is what
   keeps the carousel from inflating to the size of whatever press
   screenshot happens to be tallest. */
body.kleyman-showcase .kleyman-media-card--photo {
	display: block;
	background: transparent;
}
body.kleyman-showcase .kleyman-media-card__media {
	position: absolute;
	inset: 0;
	height: 100%;
	overflow: hidden;
	background: transparent;
}
/* Reverted per client feedback: contain (full, letterboxed image) read
   as flatter/weaker with the 3D perspective than the original cover
   crop — the angled coverflow needs the image filling the card
   edge-to-edge to actually sell the depth. Back to cover/top. */
body.kleyman-showcase .kleyman-media-card__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
body.kleyman-showcase .kleyman-media-card:hover .kleyman-media-card__img { transform: scale(1.05); }
body.kleyman-showcase .kleyman-media-card--photo .kleyman-media-card__overlay { display: none; }
body.kleyman-showcase .kleyman-media-card--photo .kleyman-media-card__body { display: none; }

/* Unified (non-photo) fallback card keeps the existing dark treatment. */
body.kleyman-showcase .kleyman-media-card:not(.kleyman-media-card--photo) {
	background: linear-gradient(145deg, var(--kleyman-dark), var(--kleyman-dark-soft));
	color: #fff;
	padding: 22px;
}
body.kleyman-showcase .kleyman-media-card:not(.kleyman-media-card--photo) .kleyman-media-card__kicker { color: rgba(255,255,255,.7); }
body.kleyman-showcase .kleyman-media-card:not(.kleyman-media-card--photo) .kleyman-media-card__title,
body.kleyman-showcase .kleyman-media-card:not(.kleyman-media-card--photo) .kleyman-media-card__more { color: #fff; }
body.kleyman-showcase .kleyman-media-card:not(.kleyman-media-card--photo) .kleyman-media-card__date { color: rgba(255,255,255,.6); }
body.kleyman-showcase .kleyman-media-card:not(.kleyman-media-card--photo) .kleyman-media-card__desc { color: rgba(255,255,255,.65); }

/* Nav row — minimal: two small arrows either side of a slim "01 / 06"
   counter + a hairline progress fill. */
body.kleyman-showcase .kleyman-media__nav { gap: 20px; margin-top: 40px; position: relative; z-index: 1; }
body.kleyman-showcase .kleyman-media__arrow { width: 42px; height: 42px; }
.kleyman-media__pager {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 0;
	font-size: 13px;
	color: var(--kleyman-text-muted);
	letter-spacing: .02em;
}
.kleyman-media__pager-current { font-weight: 700; color: var(--kleyman-dark); }
body.kleyman-showcase .kleyman-media__progress {
	position: relative;
	width: 110px;
	height: 2px;
	border-radius: 2px;
	background: var(--kleyman-border);
	overflow: hidden;
}
body.kleyman-showcase .kleyman-media__progress-fill {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 12.5%;
	background: var(--kleyman-green);
	border-radius: 2px;
	transition: width .4s var(--kleyman-ease);
}

/* Tablet: smaller cards, same mechanism, a gentler angle (handled by
   showcase.js tapering --card-tilt's amplitude at this width). */
@media (max-width: 1024px) {
	body.kleyman-showcase .kleyman-media-card { flex: 0 0 min(400px, 62vw); width: min(400px, 62vw); height: clamp(420px, 52vh, 520px); }
	body.kleyman-showcase .kleyman-media__track { gap: 28px; }
}
/* Mobile: one primary card, a real peek of its neighbours, swipe only —
   showcase.js zeroes the tilt amplitude at this width, so cards stay
   flat (no rotateY/translateZ) and the whole thing is just the existing
   scroll-snap carousel at a sane size. */
@media (max-width: 640px) {
	body.kleyman-showcase .kleyman-media__viewport { -webkit-mask-image: none; mask-image: none; }
	body.kleyman-showcase .kleyman-media-card { flex: 0 0 82vw; width: 82vw; height: clamp(360px, 62vh, 440px); filter: none !important; }
	body.kleyman-showcase .kleyman-media__track { gap: 16px; }
	body.kleyman-showcase .kleyman-media__progress { width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
	body.kleyman-showcase .kleyman-media-card { transition: opacity .3s ease; }
}

/* --------------------------------------------------------------------
   9. FOOTER — icon next to each contact item, bigger links-grid text
   (headings + links were too small), phone/email kept to one line each
   at a uniform size (phone's own oversized font was wrapping it to two
   lines), a quieter/more minimal icon treatment, and a redesigned
   bottom strip (bigger social icons + a divider before the badges).
   -------------------------------------------------------------------- */
body.kleyman-showcase .kleyman-footer__value--phone { font-size: 17.5px; font-weight: 600; }
/* Not a blanket nowrap: the email value is long enough that forcing it
   not to wrap just overflows its column and overlaps the next one —
   only the phone (now the same font-size as the others) needs it. */
body.kleyman-showcase .kleyman-footer__value--phone { white-space: nowrap; }
/* Email: per client feedback, a smaller font than its neighbours read
   like a mistake — kept at the SAME size as phone/office (17.5px, the
   shared .kleyman-footer__value base) and still one line. It's the last
   (left-edge) column, which was sitting at an equal third of the row
   while its own content needed less — that's the "empty space on the
   left" the client flagged — so it also gets a bigger share of the row
   instead of an equal third, which is what actually makes the full-size
   text fit on one line. */
body.kleyman-showcase .kleyman-footer__value--email { white-space: nowrap; font-size: 17.5px; }
body.kleyman-showcase .kleyman-footer__contact-item { display: flex; align-items: flex-start; gap: 10px; }
/* The previous fix (sizing phone/email to content, handing address
   "whatever's left" of the single shared row) still only left the
   address column ~137–180px wide in practice — nowhere near enough for
   "ת.ד 663, מגדל העמק, מיקוד 2310502", so it kept wrapping into cramped,
   scrambled-looking lines. Real fix: stop sharing one row across all
   three. Phone and office sit on their own top row (each sized to its
   own content, a gap between), and address drops to its own full-width
   row below — giving it the row's entire ~630px, which is comfortably
   enough for the whole address on one line. */
body.kleyman-showcase .kleyman-footer__contact-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "phone gap email" "address address address";
	column-gap: 32px;
	row-gap: 12px;
	align-items: start;
}
body.kleyman-showcase .kleyman-footer__contact-item:nth-child(1) { grid-area: phone; }
body.kleyman-showcase .kleyman-footer__contact-item:nth-child(2) { grid-area: address; }
body.kleyman-showcase .kleyman-footer__contact-item:last-child { grid-area: email; }
/* Mobile QA fix: the grid above (and the phone/email `nowrap` a few
   rules up) has no width guard, so its higher specificity (two classes)
   was silently beating main.css's own protected mobile rule —
   `.kleyman-footer__contact-row { flex-direction: column }` at
   ≤640px — forcing phone+email into one tight grid row on a phone,
   where nowrap text has no room and the row would overflow instead of
   gracefully stacking. Explicitly hand control back to that stacked,
   full-width-per-item layout below the same breakpoint main.css uses. */
@media (max-width: 640px) {
	body.kleyman-showcase .kleyman-footer__contact-row {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	body.kleyman-showcase .kleyman-footer__value--phone,
	body.kleyman-showcase .kleyman-footer__value--email {
		white-space: normal;
	}
}
/* Belt-and-braces: isolate each value's bidi run per line so a digit
   sequence (house/zip numbers) embedded in Hebrew text can never pull
   neighbouring words out of order at a wrap point, even if the address
   ever does wrap on a narrower viewport. */
body.kleyman-showcase .kleyman-footer__value { unicode-bidi: plaintext; }
/* Per client feedback: the icon + label above each value read too
   small/cramped — sized both up a notch. */
body.kleyman-showcase .kleyman-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	flex: none;
	margin-top: 1px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.22);
	background: transparent;
	color: var(--kleyman-green);
}
body.kleyman-showcase .kleyman-footer__contact-icon svg { width: 16px; height: 16px; stroke-width: 1.5; }
body.kleyman-showcase .kleyman-footer__label { font-size: 15px; margin-bottom: 10px; }
body.kleyman-showcase .kleyman-footer__heading {
	font-size: 19px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	position: relative;
}
/* Per client feedback: a full-width 1px rule read too thin/too wide —
   swap it for a short, thicker accent mark under the heading instead
   of a full border-bottom. */
body.kleyman-showcase .kleyman-footer__heading::after {
	content: '';
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	width: 30px;
	height: 2.5px;
	background: rgba(255,255,255,.4);
	border-radius: 2px;
}
body.kleyman-showcase .kleyman-footer__col a { font-size: 17.5px; }
body.kleyman-showcase .kleyman-footer__col ul { gap: 22px; }

/* Bottom strip: bigger, more deliberate social icons, a slim divider
   ahead of the certificate badges, and a touch more breathing room. */
body.kleyman-showcase .kleyman-footer__bottom {
	gap: 28px;
	padding-top: 26px;
	margin-top: 26px;
	border-top: 1px solid rgba(255,255,255,.1);
}
body.kleyman-showcase .kleyman-footer__social { gap: 12px; position: relative; padding-inline-end: 24px; }
body.kleyman-showcase .kleyman-footer__social::after {
	content: '';
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 26px;
	background: rgba(255,255,255,.16);
}
body.kleyman-showcase .kleyman-social-icon {
	width: 46px; height: 46px;
	border-color: rgba(255,255,255,.3);
	color: rgba(255,255,255,.85);
	transition: border-color .25s, background-color .25s, color .25s, transform .25s var(--kleyman-ease);
}
body.kleyman-showcase .kleyman-social-icon svg { width: 20px; height: 20px; }
body.kleyman-showcase .kleyman-social-icon:hover { background: var(--kleyman-green); border-color: var(--kleyman-green); color: #fff; transform: translateY(-3px); }
@media (max-width: 640px) {
	body.kleyman-showcase .kleyman-footer__social { padding-inline-end: 0; }
	body.kleyman-showcase .kleyman-footer__social::after { display: none; }
}

/* --------------------------------------------------------------------
   9b. FOOTER — compact pass (client feedback: "שלא נצטרך גלילה כדי
   לראות את כל הפוטר, שיהיה בגובה של מסך אחד"). The section above made
   the footer noticeably TALLER (bigger fonts/icons/gaps on top of
   main.css's own already-sizeable spacing), which is what pushed it
   past one viewport in the first place — this tightens every vertical
   gap/padding back down (horizontal spacing, column widths and font
   sizes themselves are untouched, so it reads denser, not smaller) to
   bring the whole footer back under ~600px tall, comfortably inside a
   single screen on real laptop/desktop viewports with the fixed header
   accounted for. Desktop-focused (that's what the brief showed); mobile
   keeps its own already-stacked, inherently-scrollable layout.

   Mobile QA fix: that last sentence was only true in intent — every rule
   below is a plain `.kleyman-footer*` selector with no width guard, so at
   two classes (body.kleyman-showcase + the element) it silently out-ranks
   main.css's own protected mobile rules for the same classes (1 class,
   inside a @media max-width block — a media guard doesn't add
   specificity), regardless of viewport. `.kleyman-footer__inner` was the
   worst case: this block's unguarded `padding: 34px 64px 20px` (64px
   horizontal) was winning over main.css's mobile `padding: 44px 24px
   28px` / `padding: 48px 40px 28px`, squeezing real phone/tablet content
   with desktop-sized side padding. Wrapping the whole desktop-only pass
   in the same min-width guard as its own comment's claim actually
   restores main.css's mobile values below it, as intended. */
@media (min-width: 1025px) {
	body.kleyman-showcase .kleyman-footer { min-height: 0; margin-top: 40px; }
	body.kleyman-showcase .kleyman-footer__inner { padding: 34px 64px 20px; }
	body.kleyman-showcase .kleyman-footer__cta-title { margin-bottom: 0; }
	body.kleyman-showcase .kleyman-footer__contact-row { margin-top: 20px; padding-bottom: 16px; }
	body.kleyman-showcase .kleyman-footer__divider { margin-bottom: 18px; }
	body.kleyman-showcase .kleyman-footer__links-grid { padding-bottom: 18px; }
	body.kleyman-showcase .kleyman-footer__col ul { gap: 10px; }
	body.kleyman-showcase .kleyman-footer__col a { line-height: 1.5; }
	body.kleyman-showcase .kleyman-footer__heading { margin-bottom: 10px; padding-bottom: 8px; }
	body.kleyman-showcase .kleyman-footer__bottom { padding-top: 14px; margin-top: 14px; }
	body.kleyman-showcase .kleyman-logo--small .kleyman-logo__img { height: 44px; }
	body.kleyman-showcase .kleyman-badge--img { height: 38px; }
	body.kleyman-showcase .kleyman-social-icon { width: 36px; height: 36px; }
}
body.kleyman-showcase .kleyman-social-icon svg { width: 17px; height: 17px; }
body.kleyman-showcase .kleyman-footer__copy { margin-top: 12px; }

/* --------------------------------------------------------------------
   12. HEADINGS — broadly bigger across every section (client feedback:
   "להגדיל גורף את הגודל של כל הכותרות"), plus per-section entrance
   variety instead of one repeated fade-up, plus an optional shimmer
   accent on one colored word per heading. Entrance states driven by
   [data-heading-fx] + .is-revealed (toggled once by an IntersectionObserver
   in showcase.js) rather than GSAP, so this stays independent of the
   generic [data-animate="fade-up"] handler in the protected animations.js
   — no double-animating the same element from two systems.
   -------------------------------------------------------------------- */

/* -- Bigger, section by section (clamp() keeps it fluid/responsive) --
   Hero title ("משפחה שבונה באהבה") deliberately excluded per client
   feedback — reverted back to its original size (main.css's own,
   untouched clamp(34px, 3.4vw, 58px) desktop / smaller-breakpoint
   values) while every other section heading below stays bigger. */
body.kleyman-showcase .kleyman-about__title { font-size: clamp(44px, 3.8vw, 66px); }
body.kleyman-showcase .kleyman-areas__title { font-size: clamp(36px, 4.6vw, 54px); }
body.kleyman-showcase .kleyman-process__title { font-size: clamp(34px, 4.6vw, 52px); }
body.kleyman-showcase .kleyman-projects__title { font-size: clamp(36px, 4.6vw, 54px); }
body.kleyman-showcase .kleyman-numbers__title-main { font-size: clamp(42px, 5.8vw, 68px); }
body.kleyman-showcase .kleyman-numbers__title-sub { font-size: clamp(24px, 3.2vw, 36px); }
body.kleyman-showcase .kleyman-media__title { font-size: clamp(36px, 4.6vw, 54px); }
body.kleyman-showcase .kleyman-footer__cta-title { font-size: clamp(28px, 2.4vw, 40px); }
@media (max-width: 768px) {
	/* Keep the big-type move from crowding small screens — still
	   noticeably larger than the pre-existing mobile sizes, just not at
	   the full desktop scale. */
	body.kleyman-showcase .kleyman-about__title { font-size: clamp(38px, 9vw, 48px); }
	body.kleyman-showcase .kleyman-areas__title,
	body.kleyman-showcase .kleyman-media__title { font-size: clamp(28px, 7vw, 36px); }
	/* A bit bigger than the shared group above per client feedback on
	   these two specifically. */
	body.kleyman-showcase .kleyman-process__title,
	body.kleyman-showcase .kleyman-projects__title { font-size: clamp(31px, 8.5vw, 40px); }
	body.kleyman-showcase .kleyman-numbers__title-main { font-size: clamp(36px, 11vw, 48px); }
	body.kleyman-showcase .kleyman-numbers__title-sub { font-size: clamp(20px, 5.5vw, 26px); }
	body.kleyman-showcase .kleyman-footer__cta-title { font-size: clamp(30px, 8vw, 40px); }
}

/* -- Shimmer accent — reusable sweep, two palettes --------------------
   The original (used on the hero's "באהבה" and the dark-bg footer CTA)
   is a light/white-led gradient, which only reads on a dark/video
   background. For headings on the light section backgrounds (about,
   areas, process, projects, numbers, media), each color variant below
   keeps the brand hue itself as the dominant tone and only sweeps a
   lighter tint of that SAME hue through it, so contrast against
   --kleyman-light / white stays solid at every point of the animation. */
body.kleyman-showcase .kleyman-heading-shine {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(
		100deg,
		#eaf2ff 0%, #9fc3ff 18%, #ffffff 32%, #bfe8c9 46%,
		#ffffff 60%, #f0d9b8 74%, #ffffff 88%, #eaf2ff 100%
	);
	background-size: 260% auto;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: kleymanHeroShine 7s ease-in-out infinite;
}
body.kleyman-showcase .kleyman-heading-shine--blue,
body.kleyman-showcase .kleyman-heading-shine--green,
body.kleyman-showcase .kleyman-heading-shine--brown {
	position: relative;
	display: inline-block;
	background-size: 240% auto;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: kleymanHeroShine 7s ease-in-out infinite;
}
body.kleyman-showcase .kleyman-heading-shine--blue {
	background-image: linear-gradient( 100deg, #050A1E 0%, var(--kleyman-blue) 28%, #5571B8 50%, var(--kleyman-blue) 72%, #050A1E 100% );
}
body.kleyman-showcase .kleyman-heading-shine--green {
	background-image: linear-gradient( 100deg, #0A5226 0%, var(--kleyman-green) 28%, #4FB574 50%, var(--kleyman-green) 72%, #0A5226 100% );
}
body.kleyman-showcase .kleyman-heading-shine--brown {
	background-image: linear-gradient( 100deg, #5E3B20 0%, var(--kleyman-brown) 28%, #C29466 50%, var(--kleyman-brown) 72%, #5E3B20 100% );
}
@keyframes kleymanHeroShine {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
	body.kleyman-showcase .kleyman-heading-shine,
	body.kleyman-showcase .kleyman-heading-shine--blue,
	body.kleyman-showcase .kleyman-heading-shine--green,
	body.kleyman-showcase .kleyman-heading-shine--brown { animation: none; background-position: 35% 50%; }
}

/* -- Entrance variety — one distinct reveal per section heading ------- */
body.kleyman-showcase [data-heading-fx] { position: relative; }

/* about__title: slides in from the reading-start edge. */
body.kleyman-showcase [data-heading-fx="slide"] {
	opacity: 0;
	transform: translateX(44px);
	transition: opacity .9s var(--kleyman-ease), transform .9s var(--kleyman-ease);
}
body.kleyman-showcase [data-heading-fx="slide"].is-revealed { opacity: 1; transform: translateX(0); }

/* areas__title: a soft pop/settle, slight overshoot. */
body.kleyman-showcase [data-heading-fx="pop"] {
	opacity: 0;
	transform: scale(.82) rotate(-2deg);
	transition: opacity .7s var(--kleyman-ease), transform .9s cubic-bezier(.34,1.56,.64,1);
}
body.kleyman-showcase [data-heading-fx="pop"].is-revealed { opacity: 1; transform: scale(1) rotate(0deg); }

/* process__title: each colored line rises in with its own stagger. */
body.kleyman-showcase [data-heading-fx="lines"] > span {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .65s var(--kleyman-ease), transform .65s var(--kleyman-ease);
}
body.kleyman-showcase [data-heading-fx="lines"].is-revealed > span { opacity: 1; transform: translateY(0); }
body.kleyman-showcase [data-heading-fx="lines"].is-revealed > span:nth-child(1) { transition-delay: 0s; }
body.kleyman-showcase [data-heading-fx="lines"].is-revealed > span:nth-child(2) { transition-delay: .12s; }
body.kleyman-showcase [data-heading-fx="lines"].is-revealed > span:nth-child(3) { transition-delay: .24s; }

/* projects__title: fades up and draws a short accent rule beneath it. */
body.kleyman-showcase [data-heading-fx="underline"] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s var(--kleyman-ease), transform .8s var(--kleyman-ease);
}
body.kleyman-showcase [data-heading-fx="underline"].is-revealed { opacity: 1; transform: translateY(0); }
body.kleyman-showcase [data-heading-fx="underline"]::after {
	content: '';
	position: absolute;
	bottom: -12px;
	inset-inline-start: 50%;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--kleyman-blue), var(--kleyman-green));
	border-radius: 2px;
	transform: translateX(-50%);
	transition: width .7s var(--kleyman-ease) .3s;
}
body.kleyman-showcase [data-heading-fx="underline"].is-revealed::after { width: 64px; }

/* numbers__title: scales up out of a soft blur, like a figure coming into focus. */
body.kleyman-showcase [data-heading-fx="scale-blur"] {
	opacity: 0;
	transform: scale(.88);
	filter: blur(7px);
	transition: opacity .8s var(--kleyman-ease), transform .8s var(--kleyman-ease), filter .8s var(--kleyman-ease);
}
body.kleyman-showcase [data-heading-fx="scale-blur"].is-revealed { opacity: 1; transform: scale(1); filter: blur(0); }

/* media__title: a clip-path shutter wipe, start-to-end (RTL reading order). */
body.kleyman-showcase [data-heading-fx="clip"] {
	/* Partially (not fully) hidden at rest — a full inset(...100%) made
	   the title read as simply missing if the reveal observer fired a
	   beat after the surrounding eyebrow/subtitle text (client feedback:
	   "נעלמה הכותרת"). Starting already ~55% visible keeps the wipe
	   motion without ever showing a fully blank heading. */
	clip-path: inset(0 0 0 45%);
	transition: clip-path .7s var(--kleyman-ease);
}
body.kleyman-showcase [data-heading-fx="clip"].is-revealed { clip-path: inset(0 0 0 0); }

/* footer CTA title: rises in with a brief soft glow pulse (dark bg). */
body.kleyman-showcase [data-heading-fx="glow"] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .9s var(--kleyman-ease), transform .9s var(--kleyman-ease);
}
body.kleyman-showcase [data-heading-fx="glow"].is-revealed {
	opacity: 1;
	transform: translateY(0);
	animation: kleymanHeadingGlowPulse 1.6s ease-out .25s 1;
}
@keyframes kleymanHeadingGlowPulse {
	0%   { text-shadow: 0 0 0 rgba(255,255,255,0); }
	45%  { text-shadow: 0 0 30px rgba(255,255,255,.5); }
	100% { text-shadow: 0 0 0 rgba(255,255,255,0); }
}

@media (prefers-reduced-motion: reduce) {
	body.kleyman-showcase [data-heading-fx] {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		animation: none !important;
	}
	body.kleyman-showcase [data-heading-fx] > span { opacity: 1 !important; transform: none !important; }
	body.kleyman-showcase [data-heading-fx="underline"]::after { width: 64px !important; transition: none !important; }
}

/* --------------------------------------------------------------------
   9. PROJECTS — "FOCUS MODE" v2: a dramatic, cinematic HERO-style hover
   per the client's explicit re-brief (scale ~1.6, not a subtle lift).
   Base design, images, curated order and section structure are
   untouched; this is purely an additive interaction layer on top of
   the existing curated grid. Unlike the first pass, the active/
   inactive state and each card's position RELATIVE TO the active one
   are computed in JS (showcase.js section 9) and expressed as classes
   + custom properties — "--klx/--kly" (repulsion), "--kl-px/--kl-py"
   (image micro-parallax), "--kl-rx/--kl-ry" (tilt), "--kl-safe-x/-y"
   (viewport-edge correction) — so the CSS below only renders state,
   never decides it. Everything animates via transform/opacity/filter
   only (no layout properties), so the grid's own height/columns never
   move and nothing reflows.
   -------------------------------------------------------------------- */

/* Shared baseline (all pointer types). */
body.kleyman-showcase .kleyman-project-tile { position: relative; transform-origin: center center; }
body.kleyman-showcase .kleyman-project-tile .kleyman-project-card { display: block; }
body.kleyman-showcase .kleyman-project-tile .kleyman-project-card__arrow {
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
}
body.kleyman-showcase .kleyman-project-card__arrow-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}
/* The extra "category · city" line — exists only for the active card;
   hidden/offset at rest exactly like the arrow, revealed slightly
   ahead of it (spec: 120–180ms stagger between the two). */
body.kleyman-showcase .kleyman-project-card__meta {
	display: block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	color: rgba(255,255,255,.75);
	margin-top: -2px;
	margin-bottom: 4px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
}

/* ---- Fine pointer (real mouse/trackpad) only. Touch gets the much
   lighter .is-tapped treatment further down — never this block, since
   there's no hover to drive it. ---- */
@media (hover: hover) and (pointer: fine) {

	/* The protected .kleyman-projects keeps its own overflow-x: clip
	   (hides the oversized decorative bg graphic) — the grid and its
	   wrap stay visible so a focused card can grow past its own cell
	   and overlap neighbours without being cut off ("אין לחתוך אותו
	   בגלל overflow"). */
	body.kleyman-showcase .kleyman-projects__grid-wrap,
	body.kleyman-showcase .kleyman-projects__grid { overflow: visible; }

	body.kleyman-showcase .kleyman-projects__grid .kleyman-project-tile:nth-child(4n+1) { transform-origin: right center; }
	body.kleyman-showcase .kleyman-projects__grid .kleyman-project-tile:nth-child(4n)   { transform-origin: left center; }

	body.kleyman-showcase .kleyman-project-tile .kleyman-project-card__link {
		transition: box-shadow .5s cubic-bezier(.22,1,.36,1);
	}
	body.kleyman-showcase .kleyman-project-tile .kleyman-project-card__caption {
		transition: transform .45s cubic-bezier(.22,1,.36,1);
	}
	body.kleyman-showcase .kleyman-project-tile .kleyman-project-card__overlay {
		transition: background .5s cubic-bezier(.22,1,.36,1);
	}

	/* THE ACTIVE CARD — the "almost a mini hero" state. Scale is the
	   loud part on purpose (client: "זה לא טעות, אני בכוונה רוצה scale
	   משמעותי מאוד"); translateY lifts it, --kl-safe-x/-y (set by JS
	   only when needed) nudge it back inside the viewport without ever
	   touching the scale itself, and --kl-rx/-ry add the very small
	   mouse-driven tilt. */
	/* !important below (active + inactive + image transforms): each
	   tile carries data-animate="fade-up", and the protected
	   animations.js keeps a live GSAP tween on it that re-writes an
	   inline transform/opacity every single frame — not just once on
	   entrance — which would otherwise always win over a plain
	   stylesheet rule no matter its specificity. An !important author
	   rule is the one thing that still outranks that inline write. */
	body.kleyman-showcase .kleyman-project-tile--active {
		transform:
			translate(var(--kl-safe-x, 0px), calc(-25px + var(--kl-safe-y, 0px)))
			scale(1.6)
			rotateX(var(--kl-rx, 0deg))
			rotateY(var(--kl-ry, 0deg)) !important;
		z-index: 100;
		filter: brightness(1.04) saturate(1.08) !important;
		opacity: 1 !important;
		transition: transform .62s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.22,1,.36,1);
	}
	body.kleyman-showcase .kleyman-project-tile--active .kleyman-project-card__link {
		box-shadow:
			0 60px 110px -28px rgba(12,22,58,.48),
			0 22px 48px -16px rgba(12,22,58,.28),
			0 0 0 1px rgba(255,255,255,.08) inset;
	}
	body.kleyman-showcase .kleyman-project-tile--active .kleyman-project-card__img,
	body.kleyman-showcase .kleyman-project-tile--active .kleyman-project-card__video {
		transform: scale(1.085) translate(var(--kl-px, 0px), var(--kl-py, 0px)) !important;
		transition: transform .8s cubic-bezier(.22,1,.36,1);
	}
	/* A touch more contrast under the much-bigger card so the title
	   stays crisp (spec #7) without darkening the photo itself. */
	body.kleyman-showcase .kleyman-project-tile--active .kleyman-project-card__overlay {
		background: linear-gradient(180deg, rgba(12,22,58,0) 20%, rgba(12,22,58,.92) 100%);
	}
	body.kleyman-showcase .kleyman-project-tile--active .kleyman-project-card__caption { transform: translateY(-14px); }
	body.kleyman-showcase .kleyman-project-tile--active .kleyman-project-card__meta {
		opacity: 1;
		transform: translateY(0);
		transition-delay: .12s;
	}
	body.kleyman-showcase .kleyman-project-tile--active .kleyman-project-card__arrow {
		opacity: 1;
		transform: translateY(0);
		transition-delay: .18s;
	}

	/* EVERY OTHER CARD — recedes hard and gets pushed out of the active
	   card's way. Direction + distance (--klx/--kly) are computed per
	   card in JS from real grid position, so a card two columns over
	   moves further than its immediate neighbour — this is what makes
	   the grid read as "opening up" around the active one rather than
	   just dimming uniformly. */
	body.kleyman-showcase .kleyman-project-tile--inactive {
		transform: translate(var(--klx, 0px), var(--kly, 0px)) scale(.85) !important;
		opacity: .4 !important;
		filter: blur(.8px) saturate(.75) brightness(.82) !important;
		transition: transform .52s cubic-bezier(.22,1,.36,1), opacity .5s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.22,1,.36,1);
		z-index: 1;
	}

	/* Restrained nod to "use the existing geometric lines": the static
	   bg graphic dims and a soft brand-blue glow fades in behind the
	   active card (position set by JS) — no new graphic language. */
	body.kleyman-showcase .kleyman-projects__grid-wrap::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		opacity: 0;
		background: radial-gradient(460px 460px at var(--kleyman-glow-x, 50%) var(--kleyman-glow-y, 50%), rgba(12, 22, 58,.16), transparent 70%);
		transition: opacity .5s ease;
	}
	body.kleyman-showcase .kleyman-projects__grid-wrap:has(.kleyman-project-tile--active)::before { opacity: 1; }
	body.kleyman-showcase .kleyman-projects__grid-wrap:has(.kleyman-project-tile--active) .kleyman-projects__bg {
		opacity: .3;
		transition: opacity .5s ease;
	}

	/* Narrower fine-pointer viewports (small laptops, large/regular
	   tablets with a trackpad) get a less extreme scale so the active
	   card can't out-grow the viewport — direction/intent unchanged,
	   just a gentler number (spec #16). */
	@media (max-width: 1365px) {
		body.kleyman-showcase .kleyman-project-tile--active {
			transform:
				translate(var(--kl-safe-x, 0px), calc(-20px + var(--kl-safe-y, 0px)))
				scale(1.38)
				rotateX(var(--kl-rx, 0deg)) rotateY(var(--kl-ry, 0deg)) !important;
		}
	}
	@media (max-width: 1024px) {
		body.kleyman-showcase .kleyman-project-tile--active {
			transform:
				translate(var(--kl-safe-x, 0px), calc(-14px + var(--kl-safe-y, 0px)))
				scale(1.22)
				rotateX(var(--kl-rx, 0deg)) rotateY(var(--kl-ry, 0deg)) !important;
		}
	}
}

/* ---- Touch / coarse pointer: a lighter tap-triggered focus instead of
   hover — scale stays modest (spec #16: "אין לבצע scale 1.6 במובייל"),
   siblings are left alone entirely, no repulsion. Toggled by
   showcase.js (first tap focuses + swallows the click, second tap or
   an outside tap navigates/clears). ---- */
body.kleyman-showcase .kleyman-project-tile.is-tapped {
	transform: translateY(-6px) scale(1.1) !important;
	z-index: 5;
	transition: transform .4s cubic-bezier(.22,1,.36,1);
}
body.kleyman-showcase .kleyman-project-tile.is-tapped .kleyman-project-card__link {
	box-shadow: 0 24px 46px -16px rgba(12,22,58,.28);
}
body.kleyman-showcase .kleyman-project-tile.is-tapped .kleyman-project-card__caption { transform: translateY(-8px); }
body.kleyman-showcase .kleyman-project-tile.is-tapped .kleyman-project-card__meta,
body.kleyman-showcase .kleyman-project-tile.is-tapped .kleyman-project-card__arrow {
	opacity: 1;
	transform: translateY(0);
}

/* prefers-reduced-motion: keep the basic "something is focused" read
   (opacity + a small scale) but drop everything that moves things
   around — repulsion, parallax, tilt, the shadow/overlay swap stays
   since it doesn't animate position. */
@media (prefers-reduced-motion: reduce) {
	body.kleyman-showcase .kleyman-project-tile,
	body.kleyman-showcase .kleyman-project-tile .kleyman-project-card__link,
	body.kleyman-showcase .kleyman-project-tile .kleyman-project-card__caption,
	body.kleyman-showcase .kleyman-project-tile .kleyman-project-card__meta,
	body.kleyman-showcase .kleyman-project-tile .kleyman-project-card__arrow,
	body.kleyman-showcase .kleyman-project-tile .kleyman-project-card__img,
	body.kleyman-showcase .kleyman-project-tile .kleyman-project-card__video {
		transition: opacity .25s ease !important;
	}
	body.kleyman-showcase .kleyman-project-tile--active {
		transform: scale(1.04) !important;
		filter: none !important;
	}
	body.kleyman-showcase .kleyman-project-tile--inactive {
		transform: none !important;
		opacity: .7 !important;
		filter: none !important;
	}
	body.kleyman-showcase .kleyman-project-tile--active .kleyman-project-card__img,
	body.kleyman-showcase .kleyman-project-tile--active .kleyman-project-card__video {
		transform: none !important;
	}
	body.kleyman-showcase .kleyman-project-tile.is-tapped { transform: scale(1.04) !important; }
	body.kleyman-showcase .kleyman-projects__grid-wrap::before { display: none !important; }
}

/* ==========================================================================
   Oct 2026 — mobile About block, round 2.
   Round 1 put these bumps in main.css, but this file loads AFTER main.css
   and already had its own (smaller) rules for the same elements — the
   `.kleyman-about__flag` base rule above and the
   `body.kleyman-showcase .kleyman-about__title` mobile clamp — so round 1
   never actually reached a phone. Scoped with body.kleyman-showcase and
   placed last so it wins.
   ========================================================================== */
@media (max-width: 640px) {
	/* "מהיסודות של משפחה" — was 38px on a 375px phone. */
	body.kleyman-showcase .kleyman-about__title { font-size: clamp(48px, 14vw, 60px); line-height: 1.05; }

	/* "Since 1993" watermark sat in normal flow between the subtitle and
	   the flag line, opening a ~74px hole. Kept (it's the brand texture)
	   but pulled up underneath the flag so the flag reads right below
	   "לעשייה של שלושה עשורים". */
	body.kleyman-showcase .kleyman-about__watermark { font-size: 40px; line-height: 1; margin-top: 4px; margin-bottom: -36px; }

	/* "אנחנו לא בונים בניינים. אנחנו בונים משפחות." — was 19px. */
	body.kleyman-showcase .kleyman-about__flag {
		position: relative;
		z-index: 1;
		font-size: clamp(23px, 6.6vw, 27px);
		line-height: 1.35;
		margin-top: 0;
		text-wrap: balance;
	}

	/* Collage under "הכירו את קליימן" — was 280×142px. It's a wide band
	   of photo panels, so it now bleeds past both screen edges (sides
	   clipped by the media wrapper) for a much larger, full-width image:
	   ~132vw wide ≈ 250px tall on a 375px phone. */
	body.kleyman-showcase .kleyman-about { overflow-x: clip; }
	body.kleyman-showcase .kleyman-about__media {
		width: 100vw;
		max-width: none;
		margin-inline: calc(50% - 50vw);
		margin-top: 22px;
		overflow: hidden;
		display: flex;
		justify-content: center;
	}
	body.kleyman-showcase .kleyman-about__collage {
		flex: none;
		width: 132vw;
		max-width: none;
		margin-inline: 0;
	}
}

/* Mobile QA (Oct 2026): numbers — keep each label tight to its own number
   (it was floating closer to the next stat than to its value). */
@media (max-width: 900px) {
	body.kleyman-showcase .kleyman-numbers__grid .kleyman-stat { gap: 8px; }
	body.kleyman-showcase .kleyman-stat__value-wrap { line-height: 1; }
	body.kleyman-showcase .kleyman-stat__value { line-height: 1; }
	body.kleyman-showcase .kleyman-stat__underline { margin-top: 2px; }
}

/* --------------------------------------------------------------------
   Oct 2026 — alternating section backgrounds (client request: not all
   white — one white, one light grey). Order:
   about (white) → areas (grey) → projects (white) → process (grey) →
   numbers (white) → media (grey) → footer.
   -------------------------------------------------------------------- */
body.kleyman-showcase { --kleyman-section-alt: #F1F3F6; }
body.kleyman-showcase .kleyman-about,
body.kleyman-showcase .kleyman-projects,
body.kleyman-showcase .kleyman-media { background-color: #fff; }
body.kleyman-showcase .kleyman-areas,
body.kleyman-showcase .kleyman-process { background-color: var(--kleyman-section-alt); }
/* numbers = navy anchor band (see end of file); order: about W → areas G →
   projects W → numbers NAVY → process G → media W → footer. */
/* The flow-line separator sits exactly on the colour seam; give its
   hairline a transparent track so only the animated fill + cube mark show. */
body.kleyman-showcase .kleyman-flow-line { background: transparent; z-index: 2; }


/* Oct 2026 — approved: numbers section as the one navy anchor band. */
body.kleyman-showcase .kleyman-numbers { background-color: #0C163A; color: #fff; }
body.kleyman-showcase .kleyman-numbers .kleyman-numbers__watermark { color: rgba(255, 255, 255, .05); -webkit-text-stroke: 0; }
body.kleyman-showcase .kleyman-numbers .kleyman-numbers__title-main { background: none; -webkit-text-fill-color: #fff; color: #fff; }
body.kleyman-showcase .kleyman-numbers .kleyman-numbers__title-sub { color: #4FB574; }
body.kleyman-showcase .kleyman-numbers .kleyman-numbers__subtitle { color: rgba(255, 255, 255, .72); }
body.kleyman-showcase .kleyman-numbers .kleyman-stat__value,
body.kleyman-showcase .kleyman-numbers .kleyman-stat__plus { color: #fff; }
body.kleyman-showcase .kleyman-numbers .kleyman-stat__label { color: rgba(255, 255, 255, .7); }
body.kleyman-showcase .kleyman-numbers .kleyman-stat--blue .kleyman-stat__accent { background: #8FA6E0; }
body.kleyman-showcase .kleyman-numbers .kleyman-stat--green .kleyman-stat__accent { background: #4FB574; }
body.kleyman-showcase .kleyman-numbers .kleyman-stat--brown .kleyman-stat__accent { background: #C29466; }
body.kleyman-showcase .kleyman-numbers .kleyman-numbers__divider { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); }
body.kleyman-showcase .kleyman-numbers .kleyman-numbers__rule { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); }
body.kleyman-showcase .kleyman-numbers .kleyman-numbers__joint { background: #0C163A; box-shadow: none; }
body.kleyman-showcase .kleyman-numbers .kleyman-stat__underline { color: rgba(255, 255, 255, .35); }

/* --------------------------------------------------------------------------
   Full-bleed video band (Oct 2026) — sits between About and the 4 areas.
   Edge to edge, no text, no rounding: just footage.
   -------------------------------------------------------------------------- */
.kleyman-reel { padding: 0; margin: 0; }
.kleyman-reel__frame {
	position: relative;
	width: 100%;
	height: clamp(240px, 25vw, 440px);
	overflow: hidden;
	background: var(--kleyman-dark);
}
.kleyman-reel__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	display: block;
}
@media (max-width: 700px) {
	.kleyman-reel__frame { height: min(115vw, 480px); }
}