/**
 * Home page layout (loaded on the front page only).
 *
 * Content lives in Elementor widgets; this file only positions them to match Figma.
 *
 * Scale variable --s:
 * Figma desktop artboard = 1325px, mobile artboard = 402px. Every Figma pixel value is written
 * as calc(N * var(--s)), where --s = min(1px, 100cqw / artboard). That makes each section exact at
 * the artboard width, shrink uniformly below it, and keep its design size above it.
 * Horizontal offsets use % of the section (Figma px ÷ 1325) so wide screens keep the design's balance.
 *
 * Sections are size containers, so cqw / % measure the section itself. Unlike vw they never
 * include a classic (Windows / desktop Firefox) scrollbar.
 */

/* ==========================================================================
   Hero (Figma "15" 70:1537 / mobile "iPhone 17 - 1" 70:920)
   ========================================================================== */
.av-hero.e-con {
	--s: min(1px, calc(100cqw / 1325));
	container-type: inline-size;
	/* Section 2 slides over the hero (Figma note "אזור 2 עולה בגלילה על אזור 1").
	   If the hero is taller than the viewport it first scrolls to its end, then sticks. */
	position: sticky;
	top: min(0px, calc(100vh - min(720px, 54.34vw)));
	top: min(0px, calc(100svh - min(720px, 54.34vw)));
	z-index: 0;
	/* = calc(720 * --s): 1325×720 artboard, never taller than 720px */
	aspect-ratio: 1325 / 720;
	max-height: 720px;
	overflow: hidden;
	/* Scale the global type styles used inside the hero together with the composition. */
	--e-global-typography-primary-font-size: calc(120 * var(--s));
	--e-global-typography-primary-line-height: calc(80 * var(--s));
	--e-global-typography-primary-letter-spacing: calc(-1.6 * var(--s));
	--e-global-typography-text-font-size: calc(20 * var(--s));
	--e-global-typography-text-line-height: calc(25 * var(--s));
}

.av-hero.e-con > .elementor-element {
	position: absolute;
	width: auto;
	margin: 0;
}

/* Elementor caps widgets with `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }`. */
.elementor.elementor .av-hero.e-con > .elementor-element {
	max-width: none;
}

.av-hero.e-con > .av-hero__signature {
	z-index: 0;
	top: calc(149 * var(--s));
	left: -11.32%;
	width: 122.64%;
	aspect-ratio: 1625 / 553;
	background: url("../img/hero-signature.svg") no-repeat 0 0 / 100% 100%;
}

/* The real <h1> ("מעטפת משפטית מקצה לקצה") is visible on mobile only; desktop shows the split, decorative copy. */
.av-hero.e-con > .av-hero__h1 {
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.av-hero.e-con > .av-hero__title {
	z-index: 1;
	top: calc(232 * var(--s));
}

.av-hero.e-con > .av-hero__title--start {
	right: 10.83%;
	text-align: right;
}

.av-hero.e-con > .av-hero__title--end {
	left: 10.83%;
	text-align: left;
}

.av-hero.e-con > .av-hero__portrait {
	z-index: 2;
	top: calc(149 * var(--s));
	left: 50%;
	width: calc(347 * var(--s));
	transform: translateX(-50%);
}

.av-hero__portrait img {
	display: block;
	width: 100%;
	height: auto;
}

.av-hero.e-con > .av-hero__text {
	z-index: 3;
	top: calc(545 * var(--s));
	right: 11.09%;
	width: calc(327 * var(--s));
	text-align: right;
}

.av-hero__text p {
	margin: 0;
}

.av-hero.e-con > .av-hero__buttons {
	z-index: 3;
	width: max-content;
	top: calc(616 * var(--s));
	left: 10.42%;
	--gap: 0 7px;
	--column-gap: 7px;
}

/* ≤1023: mobile artboard (402px), centred. */
@media (max-width: 1023px) {
	.av-hero.e-con {
		--s: min(1.25px, calc(100cqw / 402));
		top: min(0px, calc(100vh - min(1092.5px, 217.41vw)));
		top: min(0px, calc(100svh - min(1092.5px, 217.41vw)));
		aspect-ratio: 402 / 874;
		max-height: calc(874 * 1.25px); /* the mobile scale tops out at 1.25 (portrait tablets) */
		--e-global-typography-primary-font-size: calc(52 * var(--s));
		--e-global-typography-primary-line-height: calc(44 * var(--s));
		--e-global-typography-primary-letter-spacing: calc(-1.6 * var(--s));
	}

	.av-hero.e-con > .av-hero__signature {
		top: calc(229 * var(--s));
		left: calc(50% - 411 * var(--s));
		width: calc(719.2 * var(--s));
	}

	.av-hero.e-con > .av-hero__h1 {
		z-index: 2;
		top: calc(99 * var(--s));
		left: 0;
		width: 100%;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		text-align: center;
	}

	.av-hero.e-con > .av-hero__portrait {
		z-index: 1;
		top: calc(200 * var(--s));
		width: calc(336 * var(--s));
	}

	.av-hero__portrait img {
		height: calc(603 * var(--s));
		object-fit: cover;
		object-position: top center;
	}

	/* Figma "Rectangle 19": cream fade over the lower part of the portrait. */
	.av-hero.e-con > .av-hero__portrait::after {
		content: "";
		position: absolute;
		top: calc(236 * var(--s));
		left: calc(-37 * var(--s));
		width: calc(410 * var(--s));
		height: calc(367 * var(--s));
		background: linear-gradient(180deg, rgba(245, 242, 236, 0) 0%, rgba(245, 242, 236, 0.54) 30%, rgba(245, 242, 236, 0.97) 63%, #F5F2EC 99%);
		pointer-events: none;
	}

	.av-hero.e-con > .av-hero__text {
		top: calc(643 * var(--s));
		right: auto;
		left: 50%;
		width: calc(333 * var(--s));
		transform: translateX(-50%);
		text-align: center;
	}

	.av-hero.e-con > .av-hero__buttons {
		top: calc(762 * var(--s));
		left: 50%;
		transform: translateX(-50%);
		--gap: 0 6px;
		--column-gap: 6px;
	}
}

/* ==========================================================================
   Section 2 — belief quote (Figma "2" 70:1572 / mobile "iPhone 17 - 2" 70:945)
   Everything is positioned from the section's horizontal centre (--cx), so the
   pills stay on their gaps in the quote at any width.
   ========================================================================== */
.av-belief.e-con {
	--s: min(1px, calc(100cqw / 1325));
	--cx: 662.5; /* Figma centre x */
	container-type: inline-size;
	position: relative;
	z-index: 1;
	aspect-ratio: 1325 / 720;
	max-height: 720px;
	border-radius: calc(45 * var(--s));
	--e-global-typography-avquote-font-size: calc(82 * var(--s));
	--e-global-typography-avquote-line-height: calc(80 * var(--s));
	--e-global-typography-avquote-letter-spacing: calc(-1.6 * var(--s));
	--e-global-typography-text-font-size: calc(20 * var(--s));
	--e-global-typography-text-line-height: calc(25 * var(--s));
}

.av-belief.e-con > .elementor-element {
	position: absolute;
	width: auto;
	margin: 0;
}

.elementor.elementor .av-belief.e-con > .elementor-element {
	max-width: none;
}

/* Positions an element whose Figma box starts at (--x, --y) with width --w. */
.av-belief .av-at,
.av-belief.e-con > .av-at {
	left: calc(50% + (var(--x) - var(--cx)) * var(--s));
	top: calc(var(--y) * var(--s));
	width: calc(var(--w) * var(--s));
}

.av-belief__quote {
	--x: 85;
	--y: 149;
	--w: 1156;
	z-index: 2;
}

.av-belief__quote .elementor-heading-title {
	white-space: pre; /* keep Figma's space gaps and line breaks */
	text-align: center;
}

.av-belief__text {
	--x: 245.5;
	--y: 497;
	--w: 835;
	z-index: 2;
	text-align: center;
}

.av-belief__text p {
	margin: 0;
	white-space: nowrap; /* every line break is explicit in Figma */
}

.av-belief__text br.m {
	display: none;
}

/* Decorative layer: quote marks + icon pills. */
.av-belief.e-con > .av-belief__decor {
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.av-belief__decor span {
	position: absolute;
	left: calc(50% + (var(--x) - var(--cx)) * var(--s));
	top: calc(var(--y) * var(--s));
	width: calc(var(--w) * var(--s));
}

.av-qm {
	height: calc(var(--h) * var(--s));
	color: var(--e-global-color-secondary);
	font-family: "Futurism", Arial, sans-serif;
	font-weight: 700;
	font-size: calc(var(--fs) * var(--s));
	line-height: calc(var(--h) * var(--s));
	letter-spacing: calc(var(--ls) * var(--s));
	text-align: center;
}

.av-qm--a { --x: 1021; --y: 124; --w: 67; --h: 123.6; --fs: 126.727; --ls: -2.47; }
.av-qm--b { --x: 117; --y: 384; --w: 44; --h: 80; --fs: 82; --ls: -1.6; }

.av-pill {
	--w: 84;
	height: calc(60 * var(--s));
	border-radius: calc(40 * var(--s));
	background: #2C2C2C no-repeat center / calc(var(--icon) * var(--s)) auto;
	box-shadow: 0 calc(6 * var(--s)) calc(18 * var(--s)) calc(-10 * var(--s)) rgba(44, 44, 44, 0.5);
}

.av-pill--knight { --x: 666; --y: 248; --icon: 46; background-image: url("../img/icon-crown.svg"); }
.av-pill--compass { --x: 351; --y: 328; --icon: 48; background-image: url("../img/icon-compass.svg"); }
.av-pill--shield { --x: 549; --y: 409; --icon: 50; background-image: url("../img/icon-shield.svg"); }

/* White notch with the scroll-down arrow on the section's top edge (Figma "Group 1" 70:1538). */
.av-belief.e-con > .av-belief__notch {
	z-index: 3;
	top: calc(-36 * var(--s));
	left: 50%;
	width: calc(94.39 * var(--s));
	transform: translateX(-50%);
}

.av-notch {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 94.39 / 58;
	background: url("../img/hero-notch.svg") no-repeat 0 0 / 100% 100%;
}

.av-notch::after {
	content: "";
	position: absolute;
	top: calc(6 * var(--s));
	left: 50%;
	width: calc(24 * var(--s));
	height: calc(24 * var(--s));
	transform: translateX(-50%);
	background: url("../img/icon-arrow-down.svg") no-repeat center / 100% 100%;
	transition: transform 0.3s ease;
}

.av-notch:hover::after,
.av-notch:focus-visible::after {
	transform: translate(-50%, calc(3 * var(--s)));
}

@media (max-width: 1023px) {
	.av-belief.e-con {
		--s: min(1.25px, calc(100cqw / 402));
		--cx: 201;
		aspect-ratio: 402 / 522;
		max-height: calc(522 * 1.25px); /* the mobile scale tops out at 1.25 (portrait tablets) */
		border-radius: calc(35 * var(--s));
		--e-global-typography-avquote-font-size: calc(45 * var(--s));
		--e-global-typography-avquote-line-height: calc(43 * var(--s));
		--e-global-typography-avquote-letter-spacing: calc(-0.51 * var(--s));
	}

	.av-belief__quote { --x: 16; --y: 56; --w: 370; }
	.av-belief__text { --x: 25; --y: 383; --w: 349; }

	.av-belief__text br.m {
		display: inline;
	}

	.av-qm--a { --x: 320; --y: 15; --w: 75; --h: 138.7; --fs: 142.124; --ls: -2.77; }
	.av-qm--b { --x: 53; --y: 305; --w: 75; --h: 138.7; --fs: 142.124; --ls: -2.77; }

	.av-pill {
		--w: 46;
		height: calc(32.9 * var(--s));
		border-radius: calc(21.9 * var(--s));
		box-shadow: 0 calc(3.29 * var(--s)) calc(9.86 * var(--s)) calc(-5.48 * var(--s)) rgba(44, 44, 44, 0.5);
	}

	.av-pill--knight { --x: 144; --y: 109; --icon: 26.9; }
	.av-pill--compass { --x: 300; --y: 194; --icon: 26.9; }
	.av-pill--shield { --x: 154; --y: 281; --icon: 30; }

	/* The mobile artboard has no notch. */
	.av-belief.e-con > .av-belief__notch {
		display: none;
	}
}

/* ==========================================================================
   Section 3 — about intro over the office photo (Figma "3" 70:1598 / mobile "iPhone 17 - 3" 70:971)
   The paragraph has the scroll text reveal (class av-reveal).
   ========================================================================== */
.av-about.e-con {
	--s: min(1px, calc(100cqw / 1325));
	container-type: inline-size;
	position: relative;
	z-index: 1;
	/* No height cap: wider than 1325 the section keeps Figma's proportions, so the office photo is
	   never cropped (a 720px cap cut off the desk on big screens). Text keeps its size. */
	aspect-ratio: 1325 / 720;
	overflow: hidden;
	--e-global-typography-text-font-size: calc(20 * var(--s));
	--e-global-typography-text-line-height: calc(25 * var(--s));
}

.av-about.e-con > .elementor-element {
	position: absolute;
	width: auto;
	margin: 0;
}

.elementor.elementor .av-about.e-con > .elementor-element {
	max-width: none;
}

/* Photo: Figma 1325×746 from the top (the whole photo); the extra 26px run under the next section.
   Scales with the width at any size (746 / 1325 = 56.302cqw). */
.av-about.e-con > .av-about__bg {
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 56.302cqw;
}

.av-about__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.av-about.e-con > .av-about__text,
.av-about.e-con > .av-about__button {
	z-index: 2;
	left: 9.057%;
	width: calc(485 * var(--s));
}

.av-about.e-con > .av-about__text {
	/* Figma top 67 of 1325 wide; proportional (5.057cqw) so on big screens the text stays in the same
	   spot on the photo. The button follows 344 below it. */
	top: 5.057cqw;
	text-align: right;
}

.av-about__text p {
	margin: 0;
}

.av-about__text p + p {
	margin-top: calc(25 * var(--s));
}

.av-about.e-con > .av-about__button {
	top: calc(5.057cqw + 344 * var(--s));
}

/* Decorative layer: gold divider (desktop) / cream fade (mobile). */
.av-about.e-con > .av-about__decor {
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.av-about__line {
	position: absolute;
	bottom: 0;
	left: calc(50% + 0.5 * var(--s));
	width: calc(140 * var(--s));
	/* Figma: 9px gold stroke centred on the bottom edge (both halves show at ≥1024, below). */
	height: calc(4.5 * var(--s));
	background: var(--e-global-color-primary);
	transform: translateX(-50%);
}

.av-about__fade {
	display: none;
}

/* Client (2026-09-27): the whole 9px divider shows, straddling the edge as in Figma. The section
   sits above the services section and lets the line out; the photo is clipped to the section instead
   (746 − 720 = 26px = 1.9623cqw). */
@media (min-width: 1024px) {
	.av-about.e-con {
		z-index: 2;
		overflow: visible;
	}

	.av-about.e-con > .av-about__bg {
		clip-path: inset(0 0 1.9623cqw 0);
	}

	.av-about__line {
		bottom: calc(-4.5 * var(--s));
		height: calc(9 * var(--s));
	}
}

@media (max-width: 1023px) {
	.av-about.e-con {
		--s: min(1.25px, calc(100cqw / 402));
		aspect-ratio: 402 / 1048;
		max-height: calc(1048 * 1.25px); /* the mobile scale tops out at 1.25 (portrait tablets) */
	}

	.av-about.e-con > .av-about__bg {
		top: calc(324 * var(--s));
		left: 50%;
		width: max(calc(407.5 * var(--s)), 100%);
		height: calc(724 * var(--s));
		transform: translateX(-50%);
	}

	.av-about__bg img {
		object-position: center bottom;
	}

	.av-about.e-con > .av-about__text,
	.av-about.e-con > .av-about__button {
		left: calc(50% - 178 * var(--s));
		width: calc(357 * var(--s));
	}

	.av-about.e-con > .av-about__text {
		top: calc(40 * var(--s));
	}

	.av-about.e-con > .av-about__button {
		top: calc(484 * var(--s));
	}

	.av-about__line {
		display: none;
	}

	/* Figma "Rectangle 19": solid cream to 44%, fading out by 721px. */
	.av-about__fade {
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		width: max(calc(410 * var(--s)), 100%);
		height: calc(721 * var(--s));
		transform: translateX(-50%);
		background: linear-gradient(180deg, #F5F2EC 44%, rgba(245, 242, 236, 0) 100%);
	}
}

/* ==========================================================================
   Sections 5 + 12 — services (Figma "5" 70:1605 / "12" 70:1657; mobile "iPhone 17 - 4" / "- 7")
   The list itself is the Avitanslaw Services widget (assets/css/services.css).
   On desktop the vertical word "SERVICES" runs from section 5 ("SERVIC…") into section 12 ("ES").
   ========================================================================== */
.av-services.e-con {
	--s: min(1px, calc(100cqw / 1325));
	container-type: inline-size;
	position: relative;
	z-index: 1;
	aspect-ratio: 1325 / 720;
	max-height: 720px;
	overflow: hidden;
	--e-global-typography-accent-font-size: calc(30 * var(--s));
	--e-global-typography-accent-line-height: calc(20 * var(--s));
	--e-global-typography-accent-letter-spacing: calc(-1.6 * var(--s));
	--e-global-typography-avheadm-font-size: calc(52 * var(--s));
	--e-global-typography-avheadm-line-height: calc(44 * var(--s));
	--e-global-typography-avheadm-letter-spacing: calc(-1.6 * var(--s));
	--e-global-typography-text-font-size: calc(20 * var(--s));
	--e-global-typography-text-line-height: calc(25 * var(--s));
}

.av-services--realestate.e-con { --strip-top: 2; --word-top: -24; --label-top: 69; --label-pr-m: 77; --desc-r: calc(445 * var(--s)); }
.av-services--business.e-con { --strip-top: 0; --word-top: -55; --label-top: 71; --label-pr-m: 88; --desc-r: calc(455 * var(--s)); }

.av-services.e-con > .elementor-element {
	position: absolute;
	width: auto;
	margin: 0;
}

.elementor.elementor .av-services.e-con > .elementor-element {
	max-width: none;
}

.av-services.e-con > .av-services__decor {
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.av-services__strip {
	position: absolute;
	top: calc(var(--strip-top) * var(--s));
	right: 0;
	bottom: 0;
	width: calc(150 * var(--s));
	background: var(--e-global-color-secondary);
}

.av-services__word {
	position: absolute;
	top: calc(var(--word-top) * var(--s));
	right: calc(10 * var(--s));
	writing-mode: vertical-rl;
	color: rgba(176, 153, 117, 0.19);
	font-family: "Futurism", Arial, sans-serif;
	font-weight: 700;
	font-size: calc(249.937 * var(--s));
	line-height: calc(93 * var(--s));
	letter-spacing: calc(-1.86 * var(--s));
	white-space: nowrap;
}

.av-services__word--mobile {
	display: none;
}

/* Gold divider on the top edge of section 5 (continues the one at the bottom of section 3). */
.av-services__line {
	position: absolute;
	top: calc(1.5 * var(--s));
	left: calc(50% - 69.5 * var(--s));
	width: calc(140 * var(--s));
	height: calc(9 * var(--s));
	background: var(--e-global-color-primary);
}

.av-services.e-con > .av-services__label {
	z-index: 1;
	top: calc(var(--label-top) * var(--s));
	right: 0;
	/* Left padding +2: CSS adds letter-spacing after the last glyph (Figma doesn't), so the text is ~2px narrower. */
	padding: calc(10 * var(--s)) calc(73.5 * var(--s)) calc(10 * var(--s)) calc(12 * var(--s));
	background: var(--e-global-color-primary);
}

/* Figma "Services Grid": x 75 → 1100, i.e. 75px from the left and 75px before the cream strip
   (1100 = 1325 − 150 − 75). The right edge follows the strip (both anchored right) and the left keeps
   the 5.66% gutter, so on screens wider than 1325 the list widens instead of drifting from the label. */
.av-services.e-con > .av-services__list {
	z-index: 1;
	top: calc(165 * var(--s));
	right: calc(225 * var(--s));
	left: 5.66%;
}

@media (max-width: 1023px) {
	.av-services.e-con {
		--s: min(1.25px, calc(100cqw / 402));
		--e-global-typography-avheadm-font-size: calc(30 * var(--s));
		--e-global-typography-avheadm-line-height: calc(20 * var(--s));
		--e-global-typography-avheadm-letter-spacing: calc(-1.6 * var(--s));
	}

	/* The list flows (a longer description can open), so the height is content-driven:
	   112 (top) + list 530 + bottom 62 / 29 = Figma 704 / 671. */
	.av-services.e-con {
		aspect-ratio: auto;
		max-height: none;
		padding: calc(112 * var(--s)) 0 calc(var(--pad-b-m) * var(--s));
	}

	.av-services--realestate.e-con { --pad-b-m: 62; }
	.av-services--business.e-con { --pad-b-m: 29; }

	.av-services__strip {
		top: 0;
		width: calc(68 * var(--s));
	}

	.av-services__word {
		top: 0;
		right: calc(-78 * var(--s));
		font-size: calc(263 * var(--s));
	}

	.av-services__word--desktop {
		display: none;
	}

	.av-services__word--mobile {
		display: block;
	}

	.av-services__line {
		display: none;
	}

	.av-services.e-con > .av-services__label {
		top: calc(55 * var(--s));
		padding: calc(10 * var(--s)) calc(var(--label-pr-m) * var(--s)) calc(10 * var(--s)) calc(11.7 * var(--s));
	}

	.av-services.e-con > .av-services__list {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		align-self: flex-end; /* RTL column: flex-end = left edge */
		width: calc(314 * var(--s));
		margin-left: calc(50% - 190 * var(--s));
	}
}

/* ==========================================================================
   Section 11 — process steps (Figma "11" 70:1688 / mobile "iPhone 17 - 5" 70:1075)
   The cards are native containers in a horizontal slider (class av-drag-scroll): touch scrolls
   natively, the mouse drags ("towed carousel"), and both snap card by card.
   Client (2026-09-26): desktop shows ~2 full cards and part of the third, so the cards are wider
   than Figma's 345px; the texts keep their Figma widths so the lines break as designed.
   ========================================================================== */
.av-process.e-con {
	--s: min(1px, calc(100cqw / 1325));
	container-type: inline-size;
	position: relative;
	z-index: 1;
	aspect-ratio: 1325 / 529;
	max-height: 529px;
	overflow: hidden;
	--e-global-typography-primary-font-size: calc(120 * var(--s));
	--e-global-typography-primary-line-height: calc(80 * var(--s));
	--e-global-typography-primary-letter-spacing: calc(-1.6 * var(--s));
	--e-global-typography-text-font-size: calc(20 * var(--s));
	--e-global-typography-text-line-height: calc(25 * var(--s));
	--e-global-typography-avnumbr-font-size: calc(39.25 * var(--s));
	--e-global-typography-avnumbr-line-height: calc(26.2 * var(--s));
	--e-global-typography-avnumbr-letter-spacing: calc(-0.52 * var(--s));
	--e-global-typography-avstep1-font-size: calc(22 * var(--s));
	--e-global-typography-avstep1-line-height: calc(28 * var(--s));
	--e-global-typography-avbodxs-font-size: calc(15 * var(--s));
	--e-global-typography-avbodxs-line-height: calc(24.75 * var(--s));
}

.av-process.e-con > .elementor-element {
	position: absolute;
	width: auto;
	margin: 0;
}

.elementor.elementor .av-process.e-con > .elementor-element {
	max-width: none;
}

.av-process.e-con > .av-process__title {
	z-index: 1;
	top: calc(36 * var(--s));
	right: 5.66%;
	white-space: nowrap;
}

.av-process.e-con > .av-process__intro {
	z-index: 1;
	top: calc(47 * var(--s));
	left: 5.58%;
	width: calc(462 * var(--s));
	text-align: right;
}

.av-process__intro p {
	margin: 0;
}

/* Watermark "AVITAN" letters (Figma "Group 7", white 5%). The artwork (assets/img/process-watermark.svg)
   is added by functions.php only when the file exists, so there is no 404 until it is exported. */
.av-process.e-con > .av-process__wm {
	z-index: 0;
	top: calc(298 * var(--s));
	left: -0.075%;
	width: 100.2%;
	aspect-ratio: 1327.6 / 235.2;
	background: no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

/* Track: full width so cards can run off the left edge; the first card starts 75px from the right. */
.av-process.e-con > .av-process__track {
	z-index: 1;
	top: calc(209 * var(--s));
	left: 0;
	width: 100%;
	--padding-right: 5.66%;
	--padding-left: 5.66%;
	--gap: 0 calc(20 * var(--s));
	--column-gap: calc(20 * var(--s));
	scroll-padding-inline: 5.66%;
}

.av-process__track > .av-step.e-con {
	flex: 0 0 auto;
	/* 75 + 2 × (500 + 20) = 1115 → 210px (42%) of card 3 shows. Above 1325 the cards keep growing with
	   the section (500/1325 = 37.74%), so wide screens still show ~2.4 cards, not 3. */
	width: max(calc(500 * var(--s)), 37.74cqw);
	height: calc(209 * var(--s));
}

/* Number badge: cream outlined square, a gold bar masks its right edge where the number sits. */
.av-step.e-con > .av-step__num {
	position: relative;
	width: calc(48.6 * var(--s));
	height: calc(47 * var(--s));
	margin-bottom: calc(26.4 * var(--s));
}

.av-step__num::before,
.av-step__num::after {
	content: "";
	position: absolute;
	right: calc(1.1 * var(--s));
}

.av-step__num::before {
	top: 0;
	width: calc(47.5 * var(--s));
	height: calc(47 * var(--s));
	border: calc(3.958 * var(--s)) solid var(--e-global-color-secondary);
}

.av-step__num::after {
	top: calc(10.4 * var(--s));
	width: calc(11.9 * var(--s));
	height: calc(32.7 * var(--s));
	background: var(--e-global-color-primary);
}

.av-step__num .elementor-heading-title {
	position: absolute;
	z-index: 1;
	top: calc(11.9 * var(--s));
	right: 0;
}

.av-step.e-con > .av-step__text {
	margin-top: calc(15.8 * var(--s));
}

.av-step__text p {
	margin: 0;
}

@media (max-width: 1023px) {
	.av-process.e-con {
		--s: min(1.25px, calc(100cqw / 402));
		aspect-ratio: 402 / 608;
		max-height: calc(608 * 1.25px); /* the mobile scale tops out at 1.25 (portrait tablets) */
		--e-global-typography-primary-font-size: calc(52 * var(--s));
		--e-global-typography-primary-line-height: calc(44 * var(--s));
		--e-global-typography-primary-letter-spacing: calc(-1.6 * var(--s));
	}

	.av-process.e-con > .av-process__title {
		top: calc(45 * var(--s));
		right: calc(50% - 176 * var(--s));
	}

	.av-process.e-con > .av-process__intro {
		top: calc(102 * var(--s));
		left: auto;
		right: calc(50% - 177 * var(--s));
		width: calc(302 * var(--s));
	}

	.av-process.e-con > .av-process__wm {
		top: calc(373 * var(--s));
		left: calc(50% - 1127 * var(--s));
		width: calc(1327.6 * var(--s));
	}

	.av-process.e-con > .av-process__track {
		top: calc(248 * var(--s));
		--padding-right: calc(50% - 176 * var(--s));
		--padding-left: calc(50% - 176 * var(--s));
		--gap: 0;
		--column-gap: 0;
		scroll-padding-inline: calc(50% - 176 * var(--s));
	}

	/* Mobile keeps Figma: one card plus the start of the next. */
	.av-process__track > .av-step.e-con {
		width: calc(345 * var(--s));
	}

	/* Figma mobile track has a -30px gap: cards overlap on their empty (left) side. */
	.av-process__track > .av-step.e-con + .av-step.e-con {
		margin-right: calc(-30 * var(--s));
	}
}

/* ==========================================================================
   Section 4 — early legal planning (Figma "4" 70:1770 / mobile "iPhone 17 - 8" 70:1155)
   The gavel (rotated cut-out, above the heading) tilts with the mouse (class av-tilt).
   ========================================================================== */
.av-planning.e-con {
	--s: min(1px, calc(100cqw / 1325));
	container-type: inline-size;
	position: relative;
	z-index: 1;
	aspect-ratio: 1325 / 720;
	max-height: 720px;
	overflow: hidden;
	--e-global-typography-secondary-font-size: calc(80 * var(--s));
	--e-global-typography-secondary-line-height: calc(80 * var(--s));
	--e-global-typography-secondary-letter-spacing: calc(-1.6 * var(--s));
	--e-global-typography-avbodyb-font-size: calc(25 * var(--s));
	--e-global-typography-avbodyb-line-height: calc(25 * var(--s));
	--e-global-typography-text-font-size: calc(20 * var(--s));
	--e-global-typography-text-line-height: calc(25 * var(--s));
	--e-global-typography-accent-font-size: calc(30 * var(--s));
	--e-global-typography-accent-line-height: calc(20 * var(--s));
	--e-global-typography-accent-letter-spacing: calc(-1.6 * var(--s));
}

.av-planning.e-con > .elementor-element {
	position: absolute;
	width: auto;
	margin: 0;
}

.elementor.elementor .av-planning.e-con > .elementor-element {
	max-width: none;
}

.av-planning.e-con > .av-planning__title {
	z-index: 1;
	top: calc(192.5 * var(--s));
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	white-space: nowrap;
}

/* Figma: a 444px square rotated 15.28° whose bounding box is 545.6px, centred at (684.6, 272.8). */
.av-planning.e-con > .av-planning__gavel {
	z-index: 2;
	top: calc(50.7 * var(--s));
	left: calc(50% - 200 * var(--s));
	width: calc(444.2 * var(--s));
	transform: rotate(15.28deg);
	pointer-events: none;
}

.av-planning__gavel img {
	display: block;
	width: 100%;
	height: auto;
}

.av-planning.e-con > .av-planning__body {
	z-index: 3;
	top: calc(444 * var(--s));
	left: 50%;
	width: calc(892 * var(--s));
	transform: translateX(-50%);
	--gap: calc(18 * var(--s)) 0;
	--row-gap: calc(18 * var(--s));
	text-align: center;
}

/* Doubled class: Elementor caps widgets with `.elementor.elementor .e-con > .elementor-widget`. */
.elementor.elementor .av-planning__body > .elementor-widget-heading {
	align-self: stretch;
}

.elementor.elementor .av-planning__body > .elementor-widget-text-editor {
	width: calc(794 * var(--s));
	max-width: none;
}

.av-planning__body p {
	margin: 0;
}

@media (max-width: 1023px) {
	/* Figma's mobile frames are full phone screens, which left ~276px of white between the knowledge
	   arrows and the gavel. Tightened to ~100px (user request, 2026-09-27): this section's content moves
	   up 40 (title 171→131, gavel 52.1→12.1, body 444→404) and the section is 40 shorter. */
	.av-planning.e-con {
		--s: min(1.25px, calc(100cqw / 402));
		aspect-ratio: 402 / 834;
		max-height: calc(834 * 1.25px); /* the mobile scale tops out at 1.25 (portrait tablets) */
		/* Client: mobile uses the desktop font (Leon), at the mobile artboard size 74/59. */
		--e-global-typography-secondary-font-size: calc(74 * var(--s));
		--e-global-typography-secondary-line-height: calc(59 * var(--s));
	}

	/* Two lines, as drawn (explicit <br>); never let a wider fallback font add a third. */
	.av-planning.e-con > .av-planning__title {
		top: calc(131 * var(--s));
	}

	.av-planning.e-con > .av-planning__gavel {
		top: calc(12.1 * var(--s));
		left: calc(50% - 167.9 * var(--s));
		width: calc(345 * var(--s));
		transform: rotate(19.17deg);
	}

	.av-planning.e-con > .av-planning__body {
		top: calc(404 * var(--s));
		width: calc(340 * var(--s));
	}

	.elementor.elementor .av-planning__body > .elementor-widget-text-editor {
		width: calc(342 * var(--s));
	}
}

/* ==========================================================================
   Section 10 — FAQ (Figma "10" 70:1805 / mobile "iPhone 17 - 10" 70:1191)
   "Avitanslaw FAQ" widget (inc/widgets/class-faq-widget.php: <details>/<summary>, one open, FAQ schema
   on). It replaced the Nested Accordion on 2026-10-03; its base CSS is assets/css/faq.css.
   Figma rows: 32 / 25 / 32 closed (+1px divider) = 90; open = 32 + 25 + 23 + answer + 32.
   ========================================================================== */
.av-faq.e-con {
	--s: min(1px, calc(100cqw / 1325));
	container-type: inline-size;
	position: relative;
	z-index: 1;
	aspect-ratio: 1325 / 720;
	max-height: 720px;
	overflow: hidden;
	--e-global-typography-primary-font-size: calc(120 * var(--s));
	--e-global-typography-primary-line-height: calc(80 * var(--s));
	--e-global-typography-primary-letter-spacing: calc(-1.6 * var(--s));
	--e-global-typography-avbodyb-font-size: calc(25 * var(--s));
	--e-global-typography-avbodyb-line-height: calc(25 * var(--s));
	--e-global-typography-text-font-size: calc(20 * var(--s));
	--e-global-typography-text-line-height: calc(25 * var(--s));
}

.av-faq.e-con > .elementor-element {
	position: absolute;
	width: auto;
	margin: 0;
}

.elementor.elementor .av-faq.e-con > .elementor-element {
	max-width: none;
}

.av-faq.e-con > .av-faq__title {
	top: calc(123 * var(--s));
	right: 5.66%;
	text-align: right;
}

.av-faq.e-con > .av-faq__intro {
	top: calc(327 * var(--s));
	right: 5.66%;
	width: calc(403 * var(--s));
	text-align: right;
}

.av-faq__intro p {
	margin: 0;
}

.av-faq.e-con > .av-faq__list {
	top: calc(123 * var(--s));
	left: 5.35%;
	width: calc(662 * var(--s));
}

.av-faq__list .av-acc__item + .av-acc__item {
	border-top: 1px solid rgba(28, 29, 31, 0.18);
}

/* Smooth open/close: faq.js animates each item's height between measured sizes, so nothing may
   change size between the open and closed states (a padding switch made the item snap 32px at the
   end of every close). The question keeps its padding; the answer is pulled up 9px instead
   (32 − 9 = Figma's 23px gap), so the final layout is still Figma's. */
.av-faq__list .av-acc__q {
	padding: calc(32 * var(--s)) 0;
	text-align: right;
	transition: transform 0.4s ease;
}

/* The questions are <h3>s: use the Figma "Body 25" style, not the kit's global H3 (Heading M). */
.av-faq__list .av-acc__title {
	margin: 0;
	color: inherit;
	font-family: var(--e-global-typography-avbodyb-font-family), Arial, sans-serif;
	font-size: var(--e-global-typography-avbodyb-font-size);
	font-weight: var(--e-global-typography-avbodyb-font-weight);
	line-height: var(--e-global-typography-avbodyb-line-height);
	letter-spacing: normal;
}

/* Thin gold chevron (Figma: 10×10 square, left + bottom 1px borders, rotated −45°). */
.av-faq__list .av-acc__q::after {
	content: "";
	flex: 0 0 auto;
	align-self: flex-start;
	width: calc(10 * var(--s));
	height: calc(10 * var(--s));
	margin-left: calc(6 * var(--s));
	border-left: 1px solid var(--e-global-color-primary);
	border-bottom: 1px solid var(--e-global-color-primary);
	transform: rotate(-45deg);
	transition: transform 0.3s ease;
}

.av-faq__list .av-acc__item[open] > .av-acc__q::after {
	transform: rotate(135deg);
}

.av-faq__list .av-acc__a {
	padding: 0 0 calc(32 * var(--s));
}

.av-faq__list .av-acc__text {
	margin-top: calc(-9 * var(--s));
	width: calc(548 * var(--s));
	color: rgba(28, 29, 31, 0.82);
	text-align: right;
}

.av-faq__list .av-acc__text p {
	margin: 0;
}

/* The client adds questions (2026-10-02): the list flows so the section grows past Figma's 720 when it
   needs to. With Figma's 4 questions it ends exactly at 720 (123 + list 507 + 90); the aspect ratio
   (min-height 720 above 1325) keeps that height when the answers are short or all are closed. */
@media (min-width: 1024px) {
	.av-faq.e-con {
		max-height: none;
		overflow: visible; /* not hidden or clip: WebKit then stops the aspect-ratio box growing */
	}

	.elementor.elementor .av-faq.e-con > .av-faq__list {
		position: relative;
		top: auto;
		left: auto;
		align-self: flex-end;
		margin: calc(123 * var(--s)) 0 calc(90 * var(--s)) 5.35%;
	}
}

@media (min-width: 1326px) {
	.av-faq.e-con {
		aspect-ratio: auto;
		min-height: 720px;
	}
}

@media (max-width: 1023px) {
	.av-faq.e-con {
		--s: min(1.25px, calc(100cqw / 402));
		aspect-ratio: auto;
		max-height: none;
		/* Grows with the open answer; ends ~66px after the last question (list padding 31.6 + 34). It was a
		   full 874px phone screen, which left ~226px of white before the contact section (user request,
		   2026-09-27). */
		min-height: 0;
		padding-top: calc(219 * var(--s));
		padding-bottom: calc(34 * var(--s));
		--e-global-typography-primary-font-size: calc(52 * var(--s));
		--e-global-typography-primary-line-height: calc(44 * var(--s));
	}

	.av-faq__title br {
		display: none;
	}

	.av-faq.e-con > .av-faq__title {
		top: calc(19 * var(--s));
		right: calc(50% - 176 * var(--s));
		white-space: nowrap;
	}

	.av-faq__title .elementor-heading-title {
		color: #2C2C2C;
	}

	.av-faq.e-con > .av-faq__intro {
		top: calc(79 * var(--s));
		right: calc(50% - 176 * var(--s));
		width: calc(302 * var(--s));
		color: var(--e-global-color-avbody2);
	}

	/* The list flows so opening an item can grow the section. */
	.av-faq.e-con > .av-faq__list {
		position: relative;
		top: auto;
		left: auto;
		align-self: flex-start;
		width: calc(348 * var(--s));
		margin-right: calc(50% - 176 * var(--s));
		padding-bottom: calc(31.6 * var(--s));
	}

	.av-faq__list .av-acc__item {
		border-bottom: 1px solid var(--e-global-color-secondary);
	}

	.av-faq__list .av-acc__item:not(:last-child) {
		margin-bottom: calc(10 * var(--s));
	}

	.av-faq__list .av-acc__item + .av-acc__item {
		border-top: 0;
	}

	.av-faq__list .av-acc__q {
		padding: calc(15 * var(--s)) 0;
	}

	/* Figma lifts the open question 6px (15 → 9): a transform, so the item's size doesn't change. */
	.av-faq__list .av-acc__item[open] > .av-acc__q {
		transform: translateY(calc(-6 * var(--s)));
	}

	/* Figma's box is 308, but its Polin Bold runs slightly wider than our Regular + stroke; 298 gives
	   Figma's exact line breaks for all four questions in every engine (290–302 all do). */
	.av-faq__list .av-acc__title {
		width: calc(298 * var(--s));
	}

	/* Figma: the chevron sits beside the question's first line, also on two-line questions. */
	.av-faq__list .av-acc__q::after {
		align-self: flex-start;
		margin-top: calc(3 * var(--s));
	}

	.av-faq__list .av-acc__a {
		padding-bottom: calc(9 * var(--s));
	}

	.av-faq__list .av-acc__text {
		width: 100%;
	}
}

/* ==========================================================================
   Carousel arrows (sections 7 + 8): cream squares with gold top/bottom/outer lines and a dark
   chevron (Figma "חץ לכפתור", 32.6px). In RTL Elementor's `-prev` element advances (aria "next") and
   sits in the left square (←); `-next` goes back (aria "previous") and sits in the right square (→).
   ========================================================================== */
.av-carousel .elementor-swiper-button {
	width: calc(32.6 * var(--s));
	height: calc(32.6 * var(--s));
	padding: 0;
	background: var(--e-global-color-secondary);
	border: 1px solid var(--e-global-color-primary);
	border-radius: 0;
	cursor: pointer;
}

.av-carousel .elementor-swiper-button > * {
	display: none;
}

.av-carousel .elementor-swiper-button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	/* Figma "Union" chevron, 11.6 × 19, pointing left. */
	width: calc(11.6 * var(--s));
	height: calc(19 * var(--s));
	background: #2B2C2B;
	-webkit-mask: url("../img/icon-chevron.svg") no-repeat center / 100% 100%;
	mask: url("../img/icon-chevron.svg") no-repeat center / 100% 100%;
	transform: translate(-50%, -50%);
}

.av-carousel .elementor-swiper-button-prev {
	border-right: 0;
}

.av-carousel .elementor-swiper-button-next {
	border-left: 0;
}

.av-carousel .elementor-swiper-button-next::after {
	transform: translate(-50%, -50%) scaleX(-1);
}

.av-carousel .elementor-swiper-button.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* ==========================================================================
   Section 7 — knowledge centre (Figma "7" 70:1742 / mobile "iPhone 17 - 6" 70:1129)
   Loop Carousel of posts; the card is the Loop Item "Knowledge card" (.av-post-card).
   ========================================================================== */
.av-knowledge.e-con {
	--s: min(1px, calc(100cqw / 1325));
	container-type: inline-size;
	position: relative;
	z-index: 1;
	aspect-ratio: 1325 / 720;
	max-height: 720px;
	overflow: hidden;
	--e-global-typography-primary-font-size: calc(120 * var(--s));
	--e-global-typography-primary-line-height: calc(80 * var(--s));
	--e-global-typography-primary-letter-spacing: calc(-1.6 * var(--s));
	--e-global-typography-text-font-size: calc(20 * var(--s));
	--e-global-typography-text-line-height: calc(25 * var(--s));
}

.av-knowledge.e-con > .elementor-element {
	position: absolute;
	width: auto;
	margin: 0;
}

.elementor.elementor .av-knowledge.e-con > .elementor-element {
	max-width: none;
}

.av-knowledge.e-con > .av-knowledge__title {
	top: calc(51 * var(--s));
	right: 5.36%;
	white-space: nowrap;
}

.av-knowledge.e-con > .av-knowledge__intro {
	top: calc(68 * var(--s));
	left: 13.74%;
	width: calc(512 * var(--s));
	text-align: right;
}

.av-knowledge__intro p {
	margin: 0;
}

.av-knowledge.e-con > .av-knowledge__carousel {
	top: calc(223 * var(--s));
	right: 5.66%;
	width: calc(1165.7 * var(--s));
}

/* Wider than 1325 the carousel keeps its Figma width, so the extra width would be blank on the left.
   Let the next slides show there instead, up to Figma's 84px (6.34%) left gutter. The inset is
   carousel-left − gutter = (94.34 − 6.34)cqw − 1165.7·s, which is 0 at 1325 (identical to Figma). */
.av-knowledge__carousel .swiper {
	overflow: visible;
	clip-path: inset(-100px 0 -100px calc(1165.7 * var(--s) - 88cqw));
}

/* Arrows: 387px below the carousel top, right-aligned (Figma x 1174.7–1250), via Elementor's variables:
   `-prev` (advances, ←) is the left square, `-next` (goes back, →) the right square. */
.elementor .elementor-element.av-carousel.elementor-widget-loop-carousel {
	--arrow-prev-top-align: 0px;
	--arrow-next-top-align: 0px;
	--arrow-prev-caption-spacing: 0px;
	--arrow-next-caption-spacing: 0px;
	--arrow-prev-translate-y: 0px;
	--arrow-next-translate-y: 0px;
	--arrow-prev-left-align: 0px;
	--arrow-next-right-align: 0px;
}

.elementor .elementor-element.av-knowledge__carousel.elementor-widget-loop-carousel {
	--arrow-prev-top-position: calc(387 * var(--s));
	--arrow-next-top-position: calc(387 * var(--s));
	--arrow-prev-left-position: calc((1165.7 - 75.3) * var(--s));
	--arrow-next-right-position: 0px;
}

.av-knowledge.e-con > .av-knowledge__all {
	top: calc(613 * var(--s));
	right: calc(188 * var(--s));
}

@media (max-width: 1023px) {
	/* 874 in Figma (a full phone screen); ends 57px below the arrows instead (user request, 2026-09-27). */
	.av-knowledge.e-con {
		--s: min(1.25px, calc(100cqw / 402));
		aspect-ratio: 402 / 740;
		max-height: calc(740 * 1.25px); /* the mobile scale tops out at 1.25 (portrait tablets) */
		--e-global-typography-primary-font-size: calc(52 * var(--s));
		--e-global-typography-primary-line-height: calc(44 * var(--s));
	}

	.av-knowledge.e-con > .av-knowledge__title {
		top: calc(72 * var(--s));
		right: calc(50% - 176 * var(--s));
	}

	.av-knowledge__title .elementor-heading-title {
		color: #2C2C2C;
	}

	.av-knowledge.e-con > .av-knowledge__intro {
		top: calc(129 * var(--s));
		left: auto;
		right: calc(50% - 177 * var(--s));
		width: calc(302 * var(--s));
	}

	/* One card at the right; the next cards peek in from the left (section clips them). */
	.av-knowledge.e-con > .av-knowledge__carousel {
		top: calc(263 * var(--s));
		right: calc(50% - 176 * var(--s));
		width: calc(252.1 * var(--s));
	}

	.av-knowledge__carousel .swiper {
		overflow: visible;
		clip-path: none;
	}

	.elementor .elementor-element.av-knowledge__carousel.elementor-widget-loop-carousel {
		--arrow-prev-left-position: calc((252.1 - 75.3) * var(--s));
	}

	.av-knowledge.e-con > .av-knowledge__all {
		display: none;
	}
}

/* ==========================================================================
   Section 8 — testimonials (Figma "8" 70:1778 / mobile "iPhone 17 - 9" 70:1164)
   Loop Carousel of the "המלצות" post type; card = Loop Item "Testimonial card" (.av-testimonial).
   A testimonial with a featured image is a video card (thumbnail + gold fade + play button).
   ========================================================================== */
.av-testimonials.e-con {
	--s: min(1px, calc(100cqw / 1325));
	container-type: inline-size;
	position: relative;
	z-index: 1;
	aspect-ratio: 1325 / 720;
	max-height: 720px;
	overflow: hidden;
	--e-global-typography-primary-font-size: calc(120 * var(--s));
	--e-global-typography-primary-line-height: calc(80 * var(--s));
	--e-global-typography-primary-letter-spacing: calc(-1.6 * var(--s));
	--e-global-typography-text-font-size: calc(20 * var(--s));
	--e-global-typography-text-line-height: calc(25 * var(--s));
}

.av-testimonials.e-con > .elementor-element {
	position: absolute;
	width: auto;
	margin: 0;
}

.elementor.elementor .av-testimonials.e-con > .elementor-element {
	max-width: none;
}

.av-testimonials.e-con > .av-testimonials__title {
	top: calc(76 * var(--s));
	right: 5.66%;
	white-space: nowrap;
}

.av-testimonials.e-con > .av-testimonials__intro {
	top: calc(92 * var(--s));
	left: 27.7%;
	width: calc(383 * var(--s));
	text-align: right;
}

.av-testimonials__intro p {
	margin: 0;
}

/* Five cards (230 wide, 39 apart) end at x 1250; the fifth runs off the left edge. */
.av-testimonials.e-con > .av-testimonials__carousel {
	top: calc(224 * var(--s));
	right: 5.66%;
	width: calc(1306 * var(--s));
}

/* As in Figma the carousel runs off the left edge (x −56 at 1325). Wider than 1325 it would stop short
   and leave a blank strip, so the slides show up to the section's left edge (the inset is carousel-left). */
.av-testimonials__carousel .swiper {
	overflow: visible;
	clip-path: inset(-100px 0 -100px calc(1306 * var(--s) - 94.34cqw));
}

.elementor .elementor-element.av-testimonials__carousel.elementor-widget-loop-carousel {
	--arrow-prev-top-position: calc(378 * var(--s));
	--arrow-next-top-position: calc(378 * var(--s));
	--arrow-prev-left-position: calc((1306 - 75.3) * var(--s));
	--arrow-next-right-position: 0px;
}

/* Card (Figma component "קומפוננט המלצה", 230 × 351). Units follow the card's own width. */
.av-testimonial.e-con {
	--u: calc(100cqw / 230);
	container-type: inline-size;
	position: relative;
	width: 100%;
	aspect-ratio: 230 / 351;
	padding: 0;
}

.av-testimonial.e-con > .elementor-element {
	position: absolute;
	margin: 0;
}

.elementor.elementor .av-testimonial.e-con > .elementor-element {
	max-width: none;
}

.av-testimonial.e-con::before,
.av-testimonial.e-con::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.av-testimonial.e-con::before {
	z-index: 2;
	left: calc(-1 * var(--u));
	top: calc(7 * var(--u));
	width: calc(222 * var(--u));
	height: calc(337 * var(--u));
	border: calc(7 * var(--u)) solid var(--e-global-color-primary);
}

.av-testimonial.e-con::after {
	z-index: 3;
	left: calc(211 * var(--u));
	top: calc(255 * var(--u));
	width: calc(10 * var(--u));
	height: calc(62 * var(--u));
	background: #FFFFFF;
}

.av-testimonial.e-con > .av-testimonial__text {
	z-index: 1;
	left: calc(13 * var(--u));
	top: calc(26 * var(--u));
	width: calc(190 * var(--u));
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), Arial, sans-serif;
	font-size: calc(18 * var(--u));
	line-height: calc(20 * var(--u));
	text-align: right;
}

.av-testimonial__text p {
	margin: 0;
}

.av-testimonial.e-con > .av-testimonial__name {
	z-index: 4;
	left: calc(48 * var(--u));
	top: calc(264 * var(--u));
	width: calc(173 * var(--u));
	padding: calc(8 * var(--u)) calc(5 * var(--u));
	background: var(--e-global-color-secondary);
}

.av-testimonial__name .elementor-heading-title {
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-avbodyb-font-family), Arial, sans-serif;
	font-size: calc(25 * var(--u));
	font-weight: 400;
	line-height: calc(25 * var(--u));
	letter-spacing: 0;
	text-align: right;
}

/* Video card: thumbnail with a gold fade, play button; no quote text. */
.av-testimonial.e-con > .av-testimonial__img,
.av-testimonial.e-con > .av-testimonial__play {
	display: none;
}

.av-testimonial.e-con:has(.av-testimonial__img img) > .av-testimonial__img {
	display: block;
	z-index: 1;
	left: calc(12 * var(--u));
	top: calc(18 * var(--u));
	width: calc(194 * var(--u));
	height: calc(312 * var(--u));
}

.av-testimonial__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.av-testimonial__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(102, 102, 102, 0) 3%, #B09975 100%);
	pointer-events: none;
}

.av-testimonial.e-con:has(.av-testimonial__img img) > .av-testimonial__text {
	display: none;
}

.av-testimonial.e-con:has(.av-testimonial__img img) > .av-testimonial__play {
	display: block;
	z-index: 4;
	left: calc(88 * var(--u));
	top: calc(160 * var(--u));
}

/* Play button: Figma "play 1" (41 × 41 outlined triangle), an uploaded SVG icon. */
.av-testimonial__play .elementor-icon {
	display: block;
	font-size: calc(41 * var(--u));
	line-height: 0;
	color: var(--e-global-color-secondary);
	fill: var(--e-global-color-secondary);
	transition: transform 0.25s ease;
}

.av-testimonial__play .elementor-icon svg {
	width: calc(41 * var(--u));
	height: calc(41 * var(--u));
	fill: currentColor;
}

.av-testimonial__play .elementor-icon:hover {
	transform: scale(1.08);
}

@media (max-width: 1023px) {
	/* Figma's frame is a full phone screen (874); tightened so the gaps to the sections around it are
	   ~100px like the others (user request, 2026-09-27): content up 38, section ends 72 below the arrows. */
	.av-testimonials.e-con {
		--s: min(1.25px, calc(100cqw / 402));
		aspect-ratio: 402 / 683;
		max-height: calc(683 * 1.25px); /* the mobile scale tops out at 1.25 (portrait tablets) */
		--e-global-typography-primary-font-size: calc(52 * var(--s));
		--e-global-typography-primary-line-height: calc(44 * var(--s));
	}

	.av-testimonials.e-con > .av-testimonials__title {
		top: calc(34 * var(--s));
		right: calc(50% - 176 * var(--s));
	}

	.av-testimonials__title .elementor-heading-title {
		color: #2C2C2C;
	}

	.av-testimonials.e-con > .av-testimonials__intro {
		top: calc(91 * var(--s));
		left: auto;
		right: calc(50% - 177 * var(--s));
		width: calc(302 * var(--s));
	}

	.av-testimonials.e-con > .av-testimonials__carousel {
		top: calc(200 * var(--s));
		right: calc(50% - 187 * var(--s));
		width: calc(230 * var(--s));
	}

	.av-testimonials__carousel .swiper {
		overflow: visible;
		clip-path: none;
	}

	.elementor .elementor-element.av-testimonials__carousel.elementor-widget-loop-carousel {
		--arrow-prev-left-position: calc(146.7 * var(--s));
		--arrow-next-right-position: calc(8 * var(--s));
	}
}

/* ==========================================================================
   TABLET (768–1023px, Elementor's tablet breakpoint) — no Figma design; user request 2026-09-27.
   Phones get the mobile artboard (scaled up to 1.25 on wider phones). On tablets that left a narrow
   ~500px column, so here the sections flow at full width instead: 6% gutters, text at a fixed 1.15
   scale of the mobile sizes, wider text blocks, more cards per carousel, the form in two columns.
   Hero and section 2 (centred compositions) keep the mobile layout.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
	.av-about.e-con,
	.av-services.e-con,
	.av-process.e-con,
	.av-knowledge.e-con,
	.av-planning.e-con,
	.av-testimonials.e-con,
	.av-faq.e-con {
		--s: 1.15px;
		--G: max(32px, 6vw);
		aspect-ratio: auto;
		max-height: none;
		min-height: 0;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 72px var(--G) 80px;
	}

	.elementor.elementor :is(.av-about, .av-process, .av-knowledge, .av-planning, .av-testimonials, .av-faq).e-con > .elementor-element {
		position: relative;
		inset: auto;
		width: auto;
		max-width: 100%;
		margin: 0;
		transform: none;
	}

	/* Headings / intros: start-aligned (right), intros at a comfortable measure. */
	:is(.av-process__intro, .av-knowledge__intro, .av-testimonials__intro, .av-faq__intro) {
		max-width: 560px;
		margin-top: 14px !important;
	}

	/* ---- About: text, then the landscape photo full width. ---- */
	.av-about.e-con {
		padding: 64px var(--G) 0;
	}

	.elementor.elementor .av-about.e-con > .av-about__text {
		max-width: 640px;
	}

	.elementor.elementor .av-about.e-con > .av-about__button {
		align-self: flex-start;
		margin-top: 24px;
	}

	.elementor.elementor .av-about.e-con > .av-about__bg {
		order: 3; /* the photo is first in the markup; show it under the text */
		width: auto;
		max-width: none; /* full bleed: the negative margins take it past the gutters */
		height: auto;
		margin: 48px calc(-1 * var(--G)) 0;
	}

	.av-about__bg img {
		height: auto;
		object-fit: fill;
	}

	.av-about.e-con > .av-about__decor {
		display: none;
	}

	/* ---- Services: label + vertical word stay; the list uses the width left of the cream strip. ---- */
	.av-services.e-con {
		padding: calc(112 * var(--s)) 0 72px;
	}

	.av-services.e-con > .av-services__list {
		width: calc(100% - 68 * var(--s) - var(--G) - 28px);
		margin-left: var(--G);
	}

	/* ---- Process: ~2.3 cards across the full width. ---- */
	.av-process.e-con {
		padding-bottom: 72px;
	}

	.elementor.elementor .av-process.e-con > .av-process__wm {
		position: absolute;
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0;
	}

	.elementor.elementor .av-process.e-con > .av-process__track {
		margin: 44px calc(-1 * var(--G)) 0;
		--padding-right: var(--G);
		--padding-left: var(--G);
		--gap: 0 24px;
		--column-gap: 24px;
		scroll-padding-inline: var(--G);
	}

	.av-process__track > .av-step.e-con,
	.av-process__track > .av-step.e-con + .av-step.e-con {
		width: calc((100cqw - var(--G) - 48px) / 2.3);
		margin: 0;
	}

	/* ---- Carousels (knowledge: 2 per view, testimonials: 3): full width, the next card peeks in
	   on the left, arrows under the cards on the right. ---- */
	/* Same specificity as the reset above (and later), so these margins win over its margin: 0. */
	.elementor.elementor :is(.av-knowledge, .av-testimonials).e-con > :is(.av-knowledge__carousel, .av-testimonials__carousel) {
		margin-top: 44px;
		margin-bottom: 68px;
	}

	:is(.av-knowledge__carousel, .av-testimonials__carousel) .swiper {
		overflow: visible;
		clip-path: none;
	}

	.elementor .elementor-element:is(.av-knowledge__carousel, .av-testimonials__carousel).elementor-widget-loop-carousel {
		--arrow-prev-top-position: calc(100% + 24px);
		--arrow-next-top-position: calc(100% + 24px);
		--arrow-prev-left-position: calc(100% - 75.3 * var(--s));
		--arrow-next-right-position: 0px;
	}

	.elementor.elementor .av-knowledge.e-con > .av-knowledge__all {
		display: block;
		align-self: flex-end; /* RTL: the left end, on the arrows' row */
		margin-top: -40px;
	}

	/* ---- Planning: gavel + title as designed, the text column wider below them. ---- */
	.av-planning.e-con {
		padding: calc(404 * var(--s)) var(--G) 80px;
	}

	.elementor.elementor .av-planning.e-con > .av-planning__title {
		position: absolute;
		top: calc(131 * var(--s));
		left: 0;
		right: 0;
	}

	.elementor.elementor .av-planning.e-con > .av-planning__gavel {
		position: absolute;
		top: calc(12.1 * var(--s));
		left: calc(50% - 167.9 * var(--s));
		width: calc(345 * var(--s));
		transform: rotate(19.17deg);
	}

	.elementor.elementor .av-planning.e-con > .av-planning__body {
		align-self: center;
		width: min(640px, 100%);
	}

	.elementor.elementor .av-planning__body > .elementor-widget-text-editor {
		width: 100%;
	}

	/* ---- FAQ: the list full width. ---- */
	.av-faq.e-con {
		padding-top: 72px;
	}

	.elementor.elementor .av-faq.e-con > .av-faq__list {
		width: 100%;
		max-width: 760px;
		margin-top: 36px;
	}

	.av-faq__list .av-acc__title {
		flex: 1 1 auto;
		width: auto;
	}
}