/*
 * PSI tokens. Every colour and every font family lives here and nowhere else (master 1.4, A4).
 * Values marked "current site" were measured on psi.local (recon T1, FINDINGS-PSI-PRE-THEME-RECON.md).
 * Values marked "contrast fix" are the smallest change that passes AA (recon/contrast-fixes.md), decided by
 * Samer 2026-10-27 row by row.
 *
 * Breakpoints (master Part 5.2), as media queries cannot read custom properties:
 *   @media (min-width: 768px)   phoneWide look, to 1024
 *   @media (min-width: 1025px)  desktop
 */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans Arabic (Stage 6 C1, ruling 1): AK's four static files, Arabic characters only, so Latin text
   inside Arabic stays Montserrat. OFL: assets/fonts/OFL-ibm-plex-sans-arabic.txt. */
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-arabic-400.v1.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-arabic-500.v1.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-arabic-600.v1.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-arabic-700.v1.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
	/* Colour roles */
	--psi-color-primary: #005aaf;          /* current site */
	--psi-color-text: #6e6d6b;             /* current site */
	--psi-color-accent: #a87f3d;           /* current site */
	--psi-color-highlight: #e8c68e;        /* current site */
	--psi-color-on-primary: #ffffff;       /* current site */
	--psi-color-bg: #ffffff;               /* current site */
	--psi-color-bg-alt: #d9d7d7;           /* current site */
	--psi-color-bg-tint: #e9eef6;          /* current site */
	--psi-color-bg-warm: #f3f2f1;          /* current site */
	--psi-color-ink: #000000;              /* current site */
	--psi-color-ink-soft: #333333;         /* current site */
	--psi-color-label-bg: rgba(249, 249, 249, 0.62); /* current site */

	/* Contrast fixes, decided by Samer 2026-10-27 (recon/contrast-fixes.md) */
	--psi-color-accent-on-primary: #e3d0b1;    /* contrast fix, row 3 (footer current item); current site #a87f3d */
	--psi-color-placeholder: #767676;          /* contrast fix, row 4; current site #999999 */
	--psi-color-accent-text: #957036;          /* contrast fix, rows 5 and 6 (current item, B&A nav hover); current site #a87f3d */
	--psi-color-highlight-on-primary: #ebcf9f; /* contrast fix, row 7 (footer link hover); current site #e8c68e */
	--psi-color-text-on-tint: #6d6c6a;         /* contrast fix, row 8; current site #6e6d6b */
	--psi-color-text-on-photo: #333333;        /* contrast fix, rows 9 and 10: darker text, no scrim (9.35 worst at 1440); current site #6e6d6b */
	/* Row 1 (menu hover): the link keeps its colour and gains an underline in --psi-color-highlight. */
	/* Row 2 (button hover), option B: --psi-color-ink-soft text on --psi-color-highlight fill. */

	/* Header and floating button (current site, measured on the Divi render) */
	--psi-shadow-header: 0 2px 18px 0 rgba(0, 0, 0, 0.3); /* current site */
	--psi-shadow-dropdown: 0 2px 5px 0 rgba(0, 0, 0, 0.1); /* current site, Divi menu default */
	--psi-color-whatsapp: #25d366;             /* current site (Click to Chat) */
	--psi-color-whatsapp-ring: #e0e0e0;        /* current site (Click to Chat style 3 outer ring) */
	--psi-color-on-whatsapp: #ffffff;          /* current site */
	--psi-color-whatsapp-button: #167a41;      /* new (Stage 4 P1): the procedure pages' "Ask on WhatsApp" button; white text 5.39 (#25d366 gives 1.98) */
	--psi-header-top: 44px;
	--psi-shadow-compare-line: 0 0 15px 0 rgba(0, 0, 0, 0.33); /* current site, compare slider handle line */
	--psi-color-error: #b00020;                /* new (M2 Phase C): the form's field errors; no current-site equivalent. 5.11 on bg-alt, 7.33 on white */

	/* Section veils over decorative waves (current site, Divi gradient stops) */
	--psi-veil-offer-start: rgba(255, 255, 255, 0.24); /* current site, Home What We Offer */
	--psi-veil-offer-end: rgba(255, 255, 255, 0.58);   /* current site */
	--psi-veil-about-start: #ffffff;                    /* current site, About Who We Are */
	--psi-veil-about-end: rgba(255, 255, 255, 0.7);    /* current site */                    /* current site: the fixed header sits 44 px below the window top, from 1025 */

	/* Fonts */
	--psi-font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--psi-font-arabic: "IBM Plex Sans Arabic", var(--psi-font-body);   /* Stage 6 C1: Plex for Arabic characters, Montserrat for the rest; applied under :lang(ar) */

	/* Type and spacing (current site, recon T1) */
	--psi-font-size-base: 14px;
	--psi-line-height-base: 1.8;
	--psi-space-section: 60px;
	--psi-space-row: 40px;
	--psi-space-column: 30px;
	--psi-gap-row: 5.5%;
	--psi-content-width: 80%;
	--psi-content-width-wide: 90%;
	--psi-content-max: 1920px;
}

/* Base. Logical properties only (A6); colours and fonts by token (A4). */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--psi-color-bg);
	color: var(--psi-color-text);
	font-family: var(--psi-font-body);
	font-size: var(--psi-font-size-base);
	line-height: var(--psi-line-height-base);
	font-weight: 400;
}

:lang(ar) {
	font-family: var(--psi-font-arabic);
}

/* Stage 6 C5: phone numbers and email addresses read left to right inside Arabic text, isolated so the Arabic around
   them keeps its order (as on Jana: digits and "+" reorder otherwise). Every number and address the theme prints is a
   tel: or mailto: link; links typed into page content are covered by the same rule. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
	direction: ltr;
	unicode-bidi: isolate;
}

/* A phone number never breaks across lines, in any language (Samer, 2026-11-12, Imad round 1 D7: Arabic Home wrapped
   after "+961 1"). */
a[href^="tel:"] {
	white-space: nowrap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--psi-color-primary);
	font-weight: 700;
	line-height: 1;
	margin-block: 0 0.6em;
}

a {
	color: var(--psi-color-primary);
}

img {
	max-inline-size: 100%;
	block-size: auto;
}

:focus-visible {
	outline: 2px solid var(--psi-color-primary);
	outline-offset: 2px;
}

::placeholder {
	color: var(--psi-color-placeholder);
	opacity: 1;
}

.psi-page {
	inline-size: var(--psi-content-width);
	max-inline-size: var(--psi-content-max);
	margin-inline: auto;
	padding-block: var(--psi-space-section);
}

.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * Header (M1 Phase B). Geometry measured on the Divi render (FINDINGS-PSI-THEME-M1.md):
 * logo column 33.33% below 1280 and 14.65% from 1280, filled by the logo (ratio 0.4398);
 * social row 98% wide, icons end-aligned, 14 px apart.
 * Below 1280 the header sits in the flow and sticks to the top when scrolled; from 1280 it is fixed
 * --psi-header-top below the window top and the content scrolls underneath (Samer's must-keep).
 * Logical properties only (A6); colours and fonts by token (A4).
 */

.psi-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 1000;
}

.psi-header__bar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	background: var(--psi-color-bg);
	box-shadow: var(--psi-shadow-header);
	position: relative;
	z-index: 2;
}

.psi-header__logo a,
.psi-header__logo-img {
	display: block;
	inline-size: 100%;
}

.psi-header__logo-img {
	block-size: auto;
}

.psi-header__nav {
	display: flex;
	justify-content: center;
	align-items: center;
}

.psi-header__consult {
	display: flex;
	justify-content: flex-end;
	padding-inline-end: 10px;
}

/* The button only: the language switcher's links also sit in this column from 1280 (Stage 6 E2, E3). */
.psi-header__consult > a {
	display: block;
	inline-size: 100%;
}

/* Free consultation (Stage 6 C4, ruling 6): text drawn to match the old 672 x 143 picture (attachment 1111),
   measured on it: circle the full height with an 11 px ring and the phone icon, pill outline 9 px in from top and
   bottom with an 11.75 px ring, capitals 34 px high starting at x 165, all in the primary colour. Sizes are in
   container units (cqi = 1% of the button's width), so it scales with its column exactly as the picture did. */
.psi-consult {
	position: relative;
	display: block;
	inline-size: 100%;
	aspect-ratio: 672 / 143;
	container-type: inline-size;
	color: var(--psi-color-primary);
	text-decoration: none;
}

.psi-consult::before {
	content: "";
	position: absolute;
	inset-block: 6.29%;
	inset-inline-start: 10.6%;
	inset-inline-end: 0.45%;
	border: 1.75cqi solid currentColor;
	border-radius: 100cqi;
}

.psi-consult__icon {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	box-sizing: border-box;
	aspect-ratio: 1;
	block-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.64cqi solid currentColor;
	border-radius: 50%;
	background: var(--psi-color-bg);
}

.psi-consult__icon .psi-icon {
	inline-size: 10.5cqi;
	block-size: 10.5cqi;
	fill: currentColor;
}

.psi-consult__text {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 24.55%;
	transform: translateY(-50%);
	/* The picture's lettering is narrower than Montserrat Bold: this keeps its span (x 165 to 628, 69% of the
	   width), with capitals about 86% of its height. */
	font-size: 6.2cqi;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* French (Stage 6 E3b, Samer 2026-11-10): «CONSULTATION GRATUITE» is a quarter longer than the English and ran past
   its pill. Wording unchanged; it starts 4 px after the circle, a little tighter, and at the size that leaves 4 px clear
   at its end (13 px from a 228 px button), never under 12 px (the 210 px button from 1280). */
.psi-consult__text:lang(fr) {
	inset-inline-start: calc(21.28% + 4px);
	font-size: max(12px, calc(6cqi - 0.63px));
	letter-spacing: -0.056em;
}

/* Social row: transparent, so content shows behind it while scrolling (as today). Icons only: the language
   switcher left it for the white header in Stage 6 E2 (it was unreadable over the Home picture). */
.psi-header__social {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 18px;
	inline-size: 98%;
	margin-block-start: 1px;
	padding-block-start: 12px;
	padding-inline-end: 3px;
	block-size: 32px;
	position: relative;
	z-index: 1;
}

.psi-social {
	display: flex;
	justify-content: flex-end;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.psi-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--psi-social-size, 18px);
	block-size: var(--psi-social-size, 18px);
	border-radius: 50%;
	background: var(--psi-color-primary);
	color: var(--psi-color-on-primary);
	transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.psi-social__link .psi-icon {
	inline-size: 50%;
	block-size: 50%;
	fill: currentColor;
}

.psi-social__link:hover,
.psi-social__link:focus-visible {
	background: var(--psi-color-highlight);
	transform: scale(1.25);
}

/* Language switcher "EN · ع · FR" (Stage 6 C2, rulings 2 and 3): from 1280 on the white header above the
   consultation button, centred on it (Stage 6 E2, E3); beside the menu button in the top bar to 1279.
   Always left to right; the dots are decoration, not read aloud. */
.psi-langs__list {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.psi-langs__item + .psi-langs__item::before {
	content: "\00b7";
	content: "\00b7" / "";
	margin-inline: 7px;
	color: var(--psi-color-text);
}

.psi-langs__link {
	display: inline-block;
	padding-block: 4px;
	color: var(--psi-color-primary);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	text-underline-offset: 4px;
}

.psi-langs__link:lang(ar) {
	font-size: 15px;
}

.psi-langs__link[aria-current] {
	color: var(--psi-color-accent-text);
	text-decoration: underline 2px var(--psi-color-highlight);
}

.psi-langs__link:hover,
.psi-langs__link:focus-visible {
	text-decoration: underline 2px var(--psi-color-highlight);
}

.psi-langs--head {
	display: none;
}

@media (max-width: 767px) {
	.psi-langs__item + .psi-langs__item::before {
		margin-inline: 4px;
	}

	.psi-langs__link {
		font-size: 12px;
	}

	.psi-langs__link:lang(ar) {
		font-size: 14px;
	}

	.psi-header__nav {
		gap: 8px;
	}
}

.psi-header__nav {
	gap: 12px;
}

/* Phone toggle */
.psi-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--psi-color-primary);
	cursor: pointer;
}

.psi-menu-toggle .psi-icon {
	inline-size: 32px;
	block-size: 32px;
	fill: currentColor;
}

.psi-menu-toggle__close,
.psi-menu-toggle[aria-expanded="true"] .psi-menu-toggle__open {
	display: none;
}

.psi-menu-toggle[aria-expanded="true"] .psi-menu-toggle__close {
	display: block;
}

.psi-nav {
	display: none;
}

/* Without the script, the toggle has nothing to do: hide it and show the panel in the flow. */
html:not(.psi-js) .psi-menu-toggle {
	display: none;
}

@media (min-width: 768px) {
	.psi-header__consult {
		padding-inline-end: 28px;
	}

	.psi-header__social {
		margin-block-start: 13px;
		padding-block-start: 0;
		padding-inline-end: 0;
		block-size: 28px;
	}

	.psi-social--header {
		--psi-social-size: 28px;
	}
}

@media (min-width: 1280px) {
	.psi-header {
		position: fixed;
		inset-block-start: var(--psi-header-top);
		inset-inline: 0;
	}

	.psi-header__bar {
		/* The button's column is at least 238 px, so its text is at least 13 px (6.2% of the button; Stage 6 E3, Samer). */
		grid-template-columns: 14.65% 1fr max(12.22%, 238px);
		/* Never under 92.7 px (Stage 6 E3b, Samer 2026-11-10): the logo's height is less below about 1440, and the
		   13 px button left the switcher no white above it (+10.2 px at 1280, +4.7 at 1366). The logo stays centred. */
		min-block-size: 92.7px;
	}

	.psi-header__social {
		margin-block-start: 12px;
		padding-block-start: 2px;
		block-size: 26px;
	}

	.psi-social--header {
		--psi-social-size: 24px;
	}

	.psi-menu-toggle,
	.psi-menu-panel {
		display: none !important;
	}

	.psi-langs--bar {
		display: none;
	}

	/* The switcher sits on the white bar above the button, centred on it, near the bar's top edge (Stage 6 E3, Samer):
	   the button stays centred in the bar's height as before, and the switcher's letters sit midway between the bar's
	   top and the button's top. Bar = the logo's height, 14.65vw x 0.4398; button = (12.22vw - 28px) x 143 / 672;
	   the switcher's top = (bar - button) / 4 - 12px (the link's 4 px padding and the font's line box; measured so the
	   white above and below the letters is equal), and never less than 3 px from the bar's top. The button is
	   max(12.22vw - 28px, 210px) wide (its 13 px minimum, E3), 143 / 672 of that high. */
	.psi-header__consult {
		position: relative;
		align-self: stretch;
		align-items: center;
	}

	.psi-langs--head {
		display: flex;
		justify-content: center;
		position: absolute;
		inset-block-start: max(0px, calc((max(6.443vw, 92.7px) - max(12.22vw - 28px, 210px) * 0.2128) / 4 - 12px));
		inset-inline: 0 28px;
	}

	/* E3b: 2 px above and below the letters here (4 elsewhere), so the ink (capitals, the Arabic letter's tail and the
	   gold underline) sits centred between the bar's top and the button's ring with the bar at its 92.7 px minimum. */
	.psi-langs--head .psi-langs__link {
		padding-block: 2px;
	}

	.psi-nav {
		display: block;
	}
}

/* Logged in (M2 close): the header moves down by WordPress's admin bar, read from core's own
   --wp-admin--admin-bar--height, so the strip above it keeps its logged-out size. Above 600 px core
   fixes the bar to the window; at 600 and below core makes it scroll away, so the sticky header
   keeps top 0 there, as logged out. */
@media (min-width: 601px) {
	.admin-bar .psi-header {
		inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	}
}

@media (min-width: 1280px) {
	.admin-bar .psi-header {
		inset-block-start: calc(var(--psi-header-top) + var(--wp-admin--admin-bar--height, 0px));
	}
}

/* The content starts below the header's in-flow height, as Divi's placeholder made it; anchors land
   below the header (today they land under it). */
@media (min-width: 1280px) {
	.psi-main {
		padding-block-start: calc(max(14.65vw * 0.4398, 92.7px) + 38px);
	}

	html {
		scroll-padding-block-start: calc(var(--psi-header-top) + max(14.65vw * 0.4398, 92.7px) + 38px);
	}
}

@media (max-width: 767px) {
	html {
		scroll-padding-block-start: calc(33.333vw * 0.4398 + 33px);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	html {
		scroll-padding-block-start: calc(33.333vw * 0.4398 + 41px);
	}
}

/* 1025 to 1279 (Stage 6 E3, Samer): the compact header keeps its size at 1024 (three 341.33 px columns, bar
   150.2 px) instead of growing with the window up to the full header at 1280. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.psi-header__bar {
		grid-template-columns: 341.33px 1fr 341.33px;
	}

	html {
		scroll-padding-block-start: calc(341.33px * 0.4398 + 41px);
	}
}

/* Phones to 719 (Stage 6 E3b, Samer 2026-11-10): the button's column there is too narrow for 13 px text in all three
   languages (French needs a 227 px button, from 712), so the button leaves the top row for its own row of the white
   bar under the logo, menu button and switcher: centred, 240 px wide (text 14.9 px, French 13.8), 51 px tall. */
@media (max-width: 719px) {
	.psi-header__consult {
		grid-column: 1 / -1;
		justify-content: center;
		padding-block: 2px 10px;
		padding-inline: 0;
	}

	.psi-header__consult > a {
		inline-size: 240px;
	}

	/* French: a fixed 13.2 px here (the size formula above is drawn on 768's button; Montserrat widens a little more
	   than in proportion, and 13.8 px left no clear space at the end of the 240 px button). */
	.psi-consult__text:lang(fr) {
		font-size: 13.2px;
	}

	html {
		scroll-padding-block-start: calc(33.333vw * 0.4398 + 33px + 63px);
	}
}

/* Skip link */
.psi-skip-link {
	position: absolute;
	inset-inline-start: 8px;
	inset-block-start: -100px;
	z-index: 2000;
	padding: 10px 16px;
	background: var(--psi-color-bg);
	color: var(--psi-color-primary);
	font-weight: 600;
}

.psi-skip-link:focus {
	inset-block-start: 8px;
}

/* Floating WhatsApp button (Click to Chat's place: bottom 15 px, end 15 px, 50 px). */
.psi-whatsapp {
	position: fixed;
	/* Click to Chat on live: 10 px from the corner on phones, 15 px from 768 (P2 brief call 8; Stage 3 A.4). */
	inset-block-end: 10px;
	inset-inline-end: 10px;
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 50px;
	block-size: 50px;
	border-radius: 50%;
	border: 2px solid var(--psi-color-whatsapp-ring);
	background: var(--psi-color-whatsapp);
	color: var(--psi-color-on-whatsapp);
}

@media (min-width: 768px) {
	.psi-whatsapp {
		inset-block-end: 15px;
		inset-inline-end: 15px;
	}
}

.psi-whatsapp .psi-icon {
	inline-size: 26px;
	block-size: 26px;
	fill: currentColor;
}

/*
 * Footer (M1 Phase B). Measured on the Divi render: 23 px white strip; primary band with a 75 px spacer
 * and the Crisalix row (CRP image, cover, 50% 9%); the main band (LRG image, cover, 100% 0) with three
 * columns (stacked below 768, content-sized 768 to 1024, equal thirds with a 5.5% gap from 1025), 40 px
 * h2 titles, 19 px 600 links; 32 px social circles; a 100 px end spacer. No Juicer band.
 */

.psi-footer__strip {
	block-size: 23px;
	background: var(--psi-color-bg);
}

.psi-footer__band {
	background: var(--psi-color-primary);
}

.psi-footer__band-spacer {
	block-size: 75px;
}

.psi-footer__crisalix {
	margin-block-start: 60px; /* Divi's section row gap, measured */
	min-block-size: 340px;
	/* After the banner Divi keeps its 50 px divider, the empty Juicer text module and a divider: measured
	   73 px from the card's foot to the band's foot at 390, 768 and 1440 (M4, D1). */
	padding-block-end: 73px;
	background-size: cover;
	background-position: 50% 9%;
	background-repeat: no-repeat;
}

/* Crisalix draws its own banner; two of Divi's site-wide rules reached into it and are kept (M4, D1, D2):
   links are not underlined (the whole card is one link), and headings carry a 10 px bottom padding. */
.psi-footer__crisalix a {
	text-decoration: none;
}

.psi-footer__crisalix h3 {
	padding-block-end: 10px;
}

.psi-footer__main {
	padding-block-start: 22px;
	background-color: var(--psi-color-bg);
	background-size: cover;
	background-position: 100% 0;
	background-repeat: no-repeat;
	color: var(--psi-color-on-primary);
	text-align: center;
}

.psi-footer__cols {
	display: flex;
	flex-direction: column;
	row-gap: 62px;
}

.psi-footer__title {
	margin: 0;
	padding-block-end: 10px;
	color: var(--psi-color-on-primary);
	font-size: 40px;
	line-height: 40px;
	font-weight: 700;
}

.psi-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.psi-footer__menu a,
.psi-footer__contact a {
	display: inline-block;
	color: var(--psi-color-on-primary);
	font-size: 19px;
	font-weight: 600;
	line-height: 14px;
	padding-block: 8px 0;
	text-decoration: none;
}

.psi-footer__col--footer-information .psi-footer__menu {
	padding-block-start: 10px;
}

.psi-footer__col--footer-information .psi-footer__menu li + li {
	margin-block-start: 12px;
}

.psi-footer__menu .current-menu-item > a {
	color: var(--psi-color-accent-on-primary);
}

.psi-footer__menu a:hover,
.psi-footer__menu a:focus-visible,
.psi-footer__contact a:hover,
.psi-footer__contact a:focus-visible {
	color: var(--psi-color-highlight-on-primary);
}

.psi-footer__contact {
	margin: 20px 0 0;
	line-height: 2;
}

.psi-footer__social {
	margin-block-start: 60px;
	padding-block-start: 27px;
	block-size: 89px;
}

.psi-social--footer {
	--psi-social-size: 32px;
	justify-content: center;
}

.psi-social--footer .psi-social__link {
	background: var(--psi-color-bg);
	color: var(--psi-color-primary);
}

.psi-social--footer .psi-social__link:hover,
.psi-social--footer .psi-social__link:focus-visible {
	background: var(--psi-color-highlight);
}

.psi-footer__end {
	margin-block-start: 60px; /* Divi's section row gap, measured */
	block-size: 100px;
}

/* "Cookie settings" (Stage 5 B4.5), inside the end spacer so the footer keeps its height. It carries CookieAdmin's
   class cookieadmin_re_consent, so CookieAdmin's script opens the choices from it. That script also shows and hides
   the FIRST element with that class by inline style (its own corner icon, which the free version never shows); the
   !important keeps this link on screen through every choice. CookieAdmin styles button.cookieadmin_re_consent only, so
   an <a> is untouched by its round fixed icon rule. */
/* The privacy and cookie page link (launch P3), beside "Cookie settings" and styled like it. Both links carry 16px
   on each side (32px between them), so each stays centred when a narrow phone puts them on two lines. */
.psi-footer__end .psi-footer__privacy {
	display: inline-block;
	margin-inline: 16px;
	color: var(--psi-color-on-primary);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.psi-footer__end .psi-footer__privacy:hover,
.psi-footer__end .psi-footer__privacy:focus-visible {
	color: var(--psi-color-highlight-on-primary);
}

.psi-footer__end .psi-cookie-settings {
	display: inline-block !important;
	margin-inline: 16px;
	color: var(--psi-color-on-primary);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.psi-footer__end .psi-cookie-settings:hover,
.psi-footer__end .psi-cookie-settings:focus-visible {
	color: var(--psi-color-highlight-on-primary);
}

@media (min-width: 768px) {
	.psi-footer__cols {
		flex-direction: row;
		column-gap: 5.5%;
	}

	.psi-footer__col {
		flex: 1 1 auto;
	}
}

/* Three-column footer at tablet widths only (navigation F5): a heading or label that wraps here ("Before & After",
   "Skin & non-surgical") gets a line height that holds two lines without overlap (the text box is 1.225 em). The
   negative margin gives back the extra half-leading, so a line that does not wrap sits exactly where it did. */
@media (min-width: 768px) and (max-width: 1024px) {
	.psi-footer__title {
		line-height: 50px;
		margin-block: -5px;
	}

	.psi-footer__menu a,
	.psi-footer__contact a {
		line-height: 24px;
		margin-block: -5px;
	}
}

@media (min-width: 1025px) {
	.psi-footer__col {
		flex: 0 0 calc((100% - 11%) / 3);
	}

	.psi-footer__social {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding-block-start: 0;
		block-size: 32px;
	}
}

/* Right to left (Stage 6 E3): the two footer waves mirrored (copies in assets/img/rtl/; the page sets the English
   files inline, so these override it), the large one anchored to the left as the English one is to the right. */
[dir="rtl"] .psi-footer__crisalix {
	background-image: url("../img/rtl/PSI-Main-Footer-BKG-CRP-rtl.webp") !important;
}

[dir="rtl"] .psi-footer__main {
	background-image: url("../img/rtl/PSI-Main-Footer-BKG-LRG-rtl.webp") !important;
	background-position: 0 0;
}

/* Crisalix's banner places its picture by physical left and right, so on Arabic pages its text box moved onto the
   picture. The banner is laid out left to right as in English; its Arabic text stays right to left, aligned right,
   in its own box. Crisalix's words are untouched (ruling 7). */
[dir="rtl"] .psi-crisalix .crx-banner {
	direction: ltr;
}

[dir="rtl"] .psi-crisalix .crx-banner__content {
	direction: rtl;
	text-align: right;
}

/*
 * Menus (M1 Phase B): the desktop list with its dropdown, and the phone panel (master Part 5.3).
 * Hover: the link keeps its colour and gains an underline in today's gold (contrast row 1, Samer).
 * Current page: --psi-color-accent-text (contrast rows 5 and 6).
 */

.psi-nav__list,
.psi-nav__list .sub-menu,
.psi-menu-panel__list,
.psi-menu-panel__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.psi-nav__list a,
.psi-menu-panel__list a {
	color: var(--psi-color-primary);
	text-decoration: none;
}

.psi-nav__list a:hover,
.psi-nav__list a:focus-visible,
.psi-menu-panel__list a:hover,
.psi-menu-panel__list a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--psi-color-highlight);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.psi-nav__list .current-menu-item > a,
.psi-menu-panel__list .current-menu-item > a,
.psi-nav__list .current-menu-ancestor > a, /* the current section: "Before & After" on its 8 pages, as Divi (M4, D3) */
.psi-menu-panel__list .current-menu-ancestor > a {
	color: var(--psi-color-accent-text);
}

/* Desktop list: 18 px 600, centred in its column. Item to item: 32 px (Stage 6 E3, Samer: was 40 px, with the list
   shifted 20 px toward the logo to match Divi, which put English's first item 7 px into the logo at 1280). Centred
   with 32 px, English has 20 px clear of the logo and the button from 1243 (33 px at 1280), French from 1183, Arabic
   below 1100. With the 13 px button (column 238 px) and English's short label «3D Consultation», English has 20 px clear
   from 1262, French one row from 1273 (20 px from 1293), Arabic below 1245: the full menu shows from 1280. */
.psi-nav__list {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 32px;
	/* 16 px below centre, as Divi's list (measured at 1025 to 1440). */
	padding-inline: 11px;
	position: relative;
	margin-block-start: 16px;
	row-gap: 3px;
}

.psi-nav__list > li {
	position: relative;
}

.psi-nav__list > li > a {
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 0.8;
	padding-block: 4px 8px;
}

.psi-nav__list > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	inline-size: 12px;
	block-size: 12px;
	margin-inline-start: 6px;
	background-color: currentColor;
	mask: url("../svg/chevron-down.svg") center / contain no-repeat;
}

/* Dropdown: 240 px, 3 px gold top border, 20 px padding, 14 px 600 items (measured). */
.psi-nav__list .sub-menu {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: calc(100% - 1px);
	inline-size: 240px;
	padding-block: 20px;
	background: var(--psi-color-bg);
	border-block-start: 3px solid var(--psi-color-highlight);
	box-shadow: var(--psi-shadow-dropdown);
	z-index: 10;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s, visibility 0.2s;
}

.psi-nav__list li:hover > .sub-menu,
.psi-nav__list li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	/* Opening: visible at once, so its links take the focus however fast Tab is pressed (a box still hidden at the
	   first frame is skipped); the fade in is the same 0.2 s opacity as before. Closing keeps the rule above, so the
	   box stays visible while it fades out (navigation brief 1.0.11 F2). */
	transition: opacity 0.2s, visibility 0s;
}

.psi-nav__list .sub-menu li {
	padding: 6px 12px;
}

.psi-nav__list .sub-menu a {
	display: block;
	padding: 6px 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 0.8;
}

/* Phone panel: under the bar, full width, 16 px text, a visible close control (master Part 5.3). */
.psi-menu-panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 3;
	max-block-size: calc(100vh - 60px);
	overflow-y: auto;
	padding: 8px 20px 20px;
	background: var(--psi-color-bg);
	border-block-start: 3px solid var(--psi-color-highlight);
	box-shadow: var(--psi-shadow-header);
}

.psi-js .psi-menu-panel:not(.is-open) {
	display: none;
}

/* Without the script the panel is a plain list in the flow. */
html:not(.psi-js) .psi-menu-panel {
	position: static;
	box-shadow: none;
}

html:not(.psi-js) .psi-menu-close {
	display: none;
}

.psi-menu-close {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--psi-color-primary);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.psi-menu-close .psi-icon {
	inline-size: 18px;
	block-size: 18px;
	fill: currentColor;
}

.psi-menu-panel__list a {
	display: block;
	padding-block: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.psi-menu-panel__list .sub-menu {
	padding-inline-start: 20px;
}

.psi-menu-panel__list .sub-menu a {
	font-weight: 500;
}

/* ---------- Third level (navigation brief 1.0.10): Procedures > group > procedure ----------
   Desktop: a group's procedures open beside it, the same box as the dropdown (240 px, gold top border, shadow).
   Its top lines up with the group's row: the box's 20 px top padding plus its 3 px border, less the row's 6 px. */
.psi-nav__list .sub-menu .sub-menu {
	inset-inline-start: 100%;
	inset-block-start: -23px;
	/* As wide as its longest name, never narrower than the dropdown: a wrapped name on the dropdown's 0.8 line
	   height overlaps itself ("Breast Implant Removal" did at 240 px). */
	inline-size: max-content;
	min-inline-size: 240px;
}

.psi-nav__list .sub-menu .sub-menu a {
	white-space: nowrap;
}

.psi-nav__list .sub-menu > li {
	position: relative;
}

.psi-nav__list .sub-menu > .menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.psi-nav__list .sub-menu > .menu-item-has-children > a::after {
	content: "";
	flex: none;
	inline-size: 10px;
	block-size: 10px;
	background-color: currentColor;
	mask: url("../svg/chevron-down.svg") center / contain no-repeat;
	rotate: -90deg;
}

[dir="rtl"] .psi-nav__list .sub-menu > .menu-item-has-children > a::after {
	rotate: 90deg;
}

/* Escape closes the open level (menu.js): the dismissed item's box stays shut until focus or the pointer leaves it. */
.psi-nav__list li.is-dismissed > .sub-menu {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s, visibility 0.2s; /* closes with the same fade as moving away */
}

/* Phone panel: a group's procedures open on a tap of the button beside it (menu.js adds the buttons; without the
   script every list stays open, so every link is reachable). */
.psi-menu-panel__list .sub-menu .sub-menu {
	padding-inline-start: 20px;
}

.psi-menu-panel__list .psi-menu-sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.psi-menu-sub-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--psi-color-primary);
	cursor: pointer;
}

.psi-menu-sub-toggle::before {
	content: "";
	inline-size: 14px;
	block-size: 14px;
	background-color: currentColor;
	mask: url("../svg/chevron-down.svg") center / contain no-repeat;
	transition: rotate 0.2s;
}

.psi-menu-sub-toggle[aria-expanded="true"]::before {
	rotate: 180deg;
}

.psi-js .psi-menu-panel__list .sub-menu .sub-menu:not(.is-open) {
	display: none;
}

/* ---------- The procedures index (the Procedures page and the four group pages) ---------- */
.psi-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--psi-space-row) var(--psi-space-column);
	margin-block-start: var(--psi-space-row);
}

.psi-index__title {
	margin: 0 0 12px;
	font-size: 22px; /* under the page's 28 px h1 */
	line-height: 1.2;
}

.psi-index__title a,
.psi-index__list a {
	color: var(--psi-color-primary);
	text-decoration: none;
}

.psi-index__title a:hover,
.psi-index__title a:focus-visible,
.psi-index__list a:hover,
.psi-index__list a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--psi-color-highlight);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.psi-index__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.psi-index__list li {
	font-size: 16px;
	line-height: 25.2px;
}

.psi-index__list li + li {
	margin-block-start: 10px;
}

/*
 * Page components (M2 Phase A), built against recon/block-mapping.md and the Stage 0 baseline.
 * Model, measured on the Home baseline: Home's sections and rows stack their blocks with no gap (Divi's
 * flex gaps are switched off there); headings carry Divi's 10 px bottom padding and paragraphs 1em
 * between them. A row (.psi-row) is 90% of the window, or 80% (.psi-row--80) where Divi kept its default.
 * Logical properties only (A6); colours and fonts by token (A4).
 */

/* Full-width pages (templates/no-title.php) */
.psi-page--full {
	inline-size: 100%;
	max-inline-size: none;
	padding-block: 0;
}

.psi-sect {
	display: flex;
	flex-direction: column;
	margin-block: 0;
}

.psi-sect--gap {
	row-gap: var(--psi-space-section);
}

.psi-row {
	display: flex;
	flex-direction: column;
	inline-size: var(--psi-content-width-wide);
	max-inline-size: var(--psi-content-max);
	margin-inline: auto;
}

.psi-row--80 {
	inline-size: var(--psi-content-width);
}

.psi-sect :where(p, h1, h2, h3, h4, h5, h6, ul, figure),
.psi-row > * {
	margin-block: 0;
}

.psi-sect figure.wp-block-image {
	margin: 0; /* core gives image blocks a 1em bottom margin */
}

.psi-sect p + p {
	margin-block-start: 1em;
}

.psi-sect :where(h1, h2, h3, h4, h5, h6) {
	padding-block-end: 10px;
	color: var(--psi-color-primary);
}

/* Heading scale by level, from About (recon T1: 36 / 31 / 28 px, line-height 1, 700; no change with
   width). Home's larger headings keep their own sizes in their components below. */
.psi-sect h2 { font-size: 36px; line-height: 1; }
/* French on narrow phones (Stage 6 E3c, 2026-11-10): long French words («accompagnement» is 348 px at 36 px) ran past
   the 80% column and, at 360, past the screen. Below 450 px French section headings scale with the window so the
   longest word fits its column (28.8 px at 360, 31.2 at 390); wording and its no-break space unchanged. */
.psi-sect h2:lang(fr) { font-size: min(36px, 8vw); }
.psi-sect h3 { font-size: 31px; line-height: 1; }
.psi-sect :where(h4, h5, h6) { font-size: 28px; line-height: 1; }

/* Body text in content sections: 18 px on Divi's fixed 25.2 px line (About, Contact); lists 16 px. */
.psi-sect p {
	font-size: 18px;
	line-height: 25.2px;
}

.psi-sect li {
	font-size: 16px;
	line-height: 25.2px;
}

.psi-row--gap30,
.psi-row--gap30 .wp-block-column {
	row-gap: var(--psi-space-column);
}

.psi-row--gap30 .wp-block-column {
	display: flex;
	flex-direction: column;
}

.psi-sect .wp-block-columns {
	column-gap: var(--psi-gap-row);
	row-gap: var(--psi-space-column);
	margin-block-end: 0;
}

/* Buttons: Divi's default button, pill-shaped as on Home (radius 30 px). Hover: contrast row 2B. */
.psi-sect .wp-block-button__link {
	display: inline-block;
	padding: 0.3em 1em;
	border: 2px solid var(--psi-color-primary);
	border-radius: 30px;
	background: var(--psi-color-primary);
	color: var(--psi-color-on-primary);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.psi-sect .wp-block-button__link:hover,
.psi-sect .wp-block-button__link:focus-visible {
	background: var(--psi-color-highlight);
	border-color: var(--psi-color-highlight);
	color: var(--psi-color-ink-soft);
}

/* A text-style button ("Learn More"): body colour, no fill; hover as menu links (row 1). */
.psi-sect .psi-button-plain .wp-block-button__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--psi-color-text);
	font-size: 16px;
}

.psi-sect .psi-button-plain .wp-block-button__link:hover,
.psi-sect .psi-button-plain .wp-block-button__link:focus-visible {
	background: none;
	color: var(--psi-color-text);
	text-decoration: underline;
	text-decoration-color: var(--psi-color-highlight);
	text-underline-offset: 6px;
}

/* Divi's divider-only sections between Home's bands */
.psi-spacer-100 { block-size: 100px; }
/* Divi: a 50 px divider section (with 106 px top margin below 1025), then a 50 px top margin; after
   Support, Home's closing divider section (measured 23 px on the baselines, all three widths) */
.psi-support {
	margin-block-start: 206px;
	margin-block-end: 23px;
}

/* ---------- Home hero: core/cover (block-mapping Home 1 to 3) ---------- */
.psi-hero.wp-block-cover {
	display: block;
	position: relative;
	inset-block-start: -37px; /* Divi: the hero section is shifted up, -37 / -60 / -180 px */
	min-block-size: 0;
	padding: 0;
	overflow: visible;
}

.psi-hero .wp-block-cover__image-background {
	object-fit: contain;
	object-position: 50% 0;
}

.psi-hero .wp-block-cover__background {
	display: none;
}

.psi-hero .wp-block-cover__inner-container {
	inline-size: 100%;
	max-inline-size: none;
	color: var(--psi-color-text);
}

.psi-hero__row1 { padding-block-start: 197px; }
.psi-hero__row2 { padding-block-start: 82px; }
.psi-hero__row3 { padding-block-start: 105px; }

.psi-hero h1 {
	font-size: 42px;
	line-height: 1.5;
	font-weight: 600;
}

.psi-hero__row2 h2 {
	font-size: 33.6px;
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: -1px;
}

.psi-sect .psi-hero__lead,
.psi-sect .psi-hero__note {
	font-size: 20px;
	line-height: 1.6;
	color: var(--psi-color-text-on-photo);
}

.psi-hero__lead {
	font-weight: 600;
}

.psi-hero .wp-block-buttons {
	margin-block-start: 65px;
}

.psi-hero .wp-block-button__link {
	font-size: 18px;
}

.psi-hero__row3 h2 {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
}

.psi-hero__intro {
	padding-block-start: 37px;
}

.psi-sect .psi-hero__intro p {
	font-size: 19px;
	line-height: 1.6;
}

.psi-hero__end {
	block-size: 73px;
}

/* ---------- Features band (Home 4) ---------- */
.psi-features {
	background: var(--psi-color-bg-tint);
}

.psi-features__grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--psi-space-column);
	align-items: center;
}

.psi-features__items p {
	font-size: 14px;
}

.psi-features__items {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 24px;
	padding-block-start: 0;
	text-align: center;
	color: var(--psi-color-text-on-tint);
	font-weight: 700;
}

.psi-features__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: 100%;
}

/* Icon box measured on the baseline (the PNGs carry transparent margins): 16.2vw below 768, 14vw to 1024, 20% of the column from 1025. */
.psi-features__items figure {
	inline-size: 16.2vw;
}

.psi-features__items p {
	margin-block-start: 0;
}

.psi-features__items img {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

.psi-features__photo {
	margin-block-start: 47px;
}

.psi-features__photo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.psi-features__text {
	color: var(--psi-color-text-on-tint);
	padding-block: 42px 67px;
}

.psi-features__text h3 {
	font-size: 43px;
	padding-block-end: 10px;
}

.psi-features__text h4 {
	padding-block-start: 23px;
	padding-block-end: 10px;
	font-size: 28px;
	font-weight: 700;
	color: var(--psi-color-text-on-tint);
}

/* Testimonial: core/quote (master Part 5.7) */
.psi-features .wp-block-quote {
	margin: 0;
	padding: 12px 0 0;
	padding-inline-start: 4px; /* Stage 6 C5: was the shorthand 12px 0 0 4px, the one physical side in the theme */
	border: 0;
	font-size: 21px;
	line-height: 1.6;
}

.psi-sect.psi-features .wp-block-quote p {
	font-size: 21px;
	line-height: 1.6;
}

.psi-features .wp-block-quote cite {
	display: block;
	margin-block-start: 1em;
	font-size: 14px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
}

.psi-features .wp-block-buttons {
	margin-block-start: 39px;
}

.psi-features .wp-block-button__link {
	font-size: 17px;
}

/* ---------- What We Offer (Home 5) ---------- */
.psi-offer-sect {
	background-image: linear-gradient(180deg, var(--psi-veil-offer-start) 0%, var(--psi-veil-offer-end) 100%), url("/wp-content/uploads/2025/09/Wave-1-scaled.theme.webp");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

.psi-offer-sect h2 {
	font-size: 42px;
	padding-block-end: 60px;
}

.psi-offer {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 100px;
}

.psi-offer__card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-block-start: 10px; /* Divi: 10 px on phones, 90 px from 768 */
	box-shadow: var(--psi-shadow-header);
	transition: transform 0.3s ease-in-out;
}

.psi-offer__card:hover,
.psi-offer__card:focus-within {
	transform: scale(1.05);
}

.psi-offer__head {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	block-size: 165px;
	padding-block-start: 30px;
	background: var(--psi-color-bg);
	text-align: center;
}

.psi-offer__head h3 {
	font-size: 28px;
	line-height: 1;
	font-weight: 500;
	color: var(--psi-color-ink);
}

.psi-offer__head .wp-block-buttons {
	justify-content: center;
}

/* The whole card is clickable, as on Divi: the "Learn More" link's box is stretched over the card,
   so each card stays ONE link for keyboards and screen readers. */
.psi-offer__head .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
}

.psi-offer__image {
	display: flex;
	align-items: safe center;
	justify-content: center;
	block-size: 260px;
	margin-block-start: 43px;
	overflow: hidden;
}

/* Half the card's width at every width (measured: 135 of 272 at 1440, 307 of 614 at 768); a taller
   image is clipped by the 260 px area, keeping its top. */
.psi-offer__image figure {
	inline-size: 50%;
}

.psi-offer__image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* ---------- Icon pairs (Home 6, Contact 2) ---------- */
.psi-support__pairs {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 7px;
	inline-size: 70%;
	margin-inline: auto;
	margin-block-start: 15px;
	text-align: center;
}

.psi-pair {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 7px;
}

.psi-pair p {
	font-size: 14px;
	line-height: 1.8;
}

.psi-icon-link {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 80px;
	block-size: 80px;
	border-radius: 50%;
	background: var(--psi-color-primary);
	color: var(--psi-color-on-primary);
	transition: transform 0.3s, background-color 0.3s;
}

.psi-icon-link .psi-icon {
	inline-size: 44px;
	block-size: 44px;
	fill: currentColor;
}

.psi-icon-link:hover,
.psi-icon-link:focus-visible {
	background: var(--psi-color-highlight);
	transform: scale(1.1);
}



.psi-support > .psi-row {
	row-gap: 10px; /* Divi: this column's own rowGap (stored), the 9 px Support was short at 1440 */
}

.psi-sect .psi-support__lead {
	font-size: 17px;
	line-height: 1.8; /* the section's height on the baseline fits Divi's 1.8em here, not the fixed 25.2 px */
}

/* ---------- Lists set as plain lines (About "What We Commonly Do") ---------- */
.psi-sect .psi-plain-list {
	padding: 0;
	list-style: none;
}

.psi-sect .psi-plain-list li + li {
	margin-block-start: 1em;
}

/* ---------- About: Our Story (M3), measured on the Stage 0 About baseline ----------
   The photo, then the warm grey box (45 px side margins, content centred); stacked 40 px apart below
   1025, side by side above (photo 6 of 24 columns, 1.5% gap, the box as tall as the photo). The box's
   heading is the page's one h1 (Samer, 2026-10-30), sized as Divi's h4 here. */
.psi-story__row { row-gap: 40px; }

/* After Our Story: Divi's 84 px spacer row from 1025; below 1025, 40 px (on Divi, Who We Are ran straight into
   the box on phones, a bug fixed by Samer's decision, plan 29). After Who We Are: the closing divider
   section, 23 px as on Home. */
.psi-story { margin-block-end: var(--psi-space-row); }
.psi-story + .psi-wave-about { margin-block-end: 23px; }

/* "What We Commonly Do" sat in a Divi nested row 90% of its column (start-aligned): at 390 it wraps
   "What We / Commonly Do", as today (M4, D4). */
.psi-wave-about h3 { max-inline-size: 90%; }

.psi-sect .psi-story__image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.psi-story__box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: var(--psi-space-column); /* About keeps Divi's 30 px between blocks */
	padding-block: 45px; /* the text never touches the box's edges (plan 29); at 1440 it sits inside the photo's height as before */
	padding-inline: 45px;
	background: var(--psi-color-bg-warm);
}

.psi-sect .psi-story__title {
	font-size: 36px;
	line-height: 1;
}

/* ---------- Decorative section backgrounds (theme CSS, not content) ---------- */
.psi-wave-about {
	background-image: linear-gradient(180deg, var(--psi-veil-about-start) 0%, var(--psi-veil-about-end) 100%), url("/wp-content/uploads/2025/09/wave-BnA-e1757914725985.theme.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.psi-wave-ba {
	background-image: url("/wp-content/uploads/2025/10/Wave2.theme.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ---------- Entrance fades (fade.js); visible without JS and under reduced motion ---------- */
.psi-js .psi-fade:not(.is-in) {
	opacity: 0;
}

.psi-js .psi-fade {
	transition: opacity 1s ease-in-out;
}

/* ---------- Phones only, below 768: Home's "What We Offer" with about a third less space (Imad, 2026-11-11;
   round 1 D6, FINDINGS-PSI-IMAD-ROUND1.md). Desktop and 768 to 1024 unchanged. French keeps its own fitted heading
   size (.psi-sect h2:lang(fr), which outranks the rule below). Only the spacer directly before the section changes:
   .psi-spacer-100 is used on every page. ---------- */
@media (max-width: 767px) {
	.psi-spacer-100:has(+ .psi-offer-sect) { block-size: 66px; }
	.psi-offer-sect h2 {
		font-size: 32px;
		padding-block-end: 40px;
	}
	.psi-offer { row-gap: 64px; } /* plus the card's 10 px: 74 between cards */
	.psi-offer__head h3 { font-size: 24px; }
	/* Option B (Samer, 2026-11-12): a third less inside the cards too; the photo (156 px at 390) still fits. */
	.psi-offer__head {
		block-size: 110px;
		padding-block-start: 20px;
	}
	.psi-offer__image {
		block-size: 174px;
		margin-block-start: 29px;
	}
	.psi-support { margin-block-start: 138px; }
}

/* ---------- 768 to 1024: phoneWide look ---------- */
@media (min-width: 768px) {
	.psi-hero.wp-block-cover { inset-block-start: -60px; }
	.psi-hero__row1 { padding-block-start: 311px; }
	.psi-hero h1 { font-size: 70px; }
	.psi-hero__row2 h2 { font-size: 42px; }
	.psi-hero__row3 h2 { font-size: 40px; }
	.psi-offer { row-gap: 70px; }
	.psi-offer__card { margin-block-start: 90px; }
	.psi-features__items figure { inline-size: 14vw; }
	.psi-features__items p { margin-block-start: 2px; }
}

/* ---------- Home hero only: desktop from 981, as today's site (Samer, plan decision 30). A component
   rule, not a site breakpoint: everything else keeps 768 and 1025. ---------- */
@media (min-width: 981px) {
	.psi-hero.wp-block-cover { inset-block-start: -180px; }
	.psi-hero .wp-block-cover__image-background { object-fit: cover; }
	.psi-hero__row1 { padding-block-start: 250px; }
	.psi-hero h1 { font-size: 67.2px; }
	.psi-hero__row3 h2 { font-size: 50px; line-height: 1.3; }
	.psi-sect .psi-hero__lead,
	.psi-sect .psi-hero__note { inline-size: 35%; }
	.psi-hero__row3 h2 { inline-size: 68%; }
	.psi-hero__intro { inline-size: 62%; }
}

/* ---------- 1025 and up: desktop ---------- */
@media (min-width: 1025px) {
	.psi-support { margin-block-start: 100px; }
	.psi-story__row {
		flex-direction: row;
		column-gap: 1.5%;
	}
	.psi-story__image { flex: 0 0 23.85%; } /* measured: 309 of the 1296 px row at 1440 */
	.psi-story__box { flex: 1 1 auto; }
	.psi-story { margin-block-end: 84px; }

	.psi-features__grid {
		grid-template-columns: 14.8% 28.4% 1fr;
		column-gap: 5.5%;
	}
	.psi-features__items { padding-block-start: 0; row-gap: 20px; }
	.psi-features__items figure { inline-size: 20%; }
	.psi-features__items p { margin-block-start: 0; }
	.psi-features__photo { margin-block-start: 0; }
	.psi-features__text {
		padding-block: 42px 0;
		padding-inline-start: 63px;
	}

	.psi-offer {
		grid-template-columns: repeat(4, 1fr);
		column-gap: 2%;
		row-gap: 0;
	}
	.psi-offer__card { margin-block-start: 0; }

	.psi-support__pairs {
		flex-direction: row;
		justify-content: center;
		column-gap: 2%;
		text-align: start;
	}
	.psi-pair {
		flex: 1 1 0;
		flex-direction: row;
		column-gap: 20px;
	}
	.psi-icon-link { flex: none; }
}

/* ---------- Right to left: pictures (Stage 6 E3, Samer 2026-11-09) ----------
   On Arabic pages the text sits on the right, so pictures of people and the wave decorations are mirrored to face
   and lead the other way. Never mirrored: pictures that carry words, the logo, the before-and-after photos, Imad's
   drawings. Photos by CSS (the file is untouched); background waves by mirrored copies in assets/img/rtl/
   (made with Pillow from the uploads, exact mirrors). */
[dir="rtl"] .psi-hero .wp-block-cover__image-background, /* Home hero (attachment 1226): her face leaves the text side */
[dir="rtl"] img.wp-image-1480 { /* About: the woman in the knitted sweater looks toward the text, not off the page */
	transform: scaleX(-1);
}

[dir="rtl"] .psi-offer-sect {
	background-image: linear-gradient(180deg, var(--psi-veil-offer-start) 0%, var(--psi-veil-offer-end) 100%), url("../img/rtl/Wave-1-scaled-rtl.webp");
}

[dir="rtl"] .psi-wave-about {
	background-image: linear-gradient(180deg, var(--psi-veil-about-start) 0%, var(--psi-veil-about-end) 100%), url("../img/rtl/wave-BnA-e1757914725985-rtl.webp");
}

[dir="rtl"] .psi-wave-ba {
	background-image: url("../img/rtl/Wave2-rtl.webp");
}

/*
 * Before-and-after template and the compare slider (M2 Phase B), measured on the Stage 0 baseline
 * (Abdominoplasty and Facelift at 390, 768, 1440). Logical properties only (A6); tokens only (A4).
 */

/* Layout: a 48 px top band (Divi's 25 px margin and 23 px divider), the 90% row; the nav column
   21.03% and the main column beside it from 1025, both stacked below. */
.psi-ba__top {
	block-size: 48px;
}

.psi-ba__row {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--psi-space-row); /* 40 px when the columns stack (recon T1: Divi's row gap) */
}

.psi-ba .psi-ba__label {
	margin: 0;
	padding-block-end: 10px;
	color: var(--psi-color-primary);
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
}

.psi-ba__list {
	display: flex;
	flex-direction: column;
	row-gap: 6px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.psi-ba__list a {
	display: inline-block;
	padding: 8px 20px;
	color: var(--psi-color-primary);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	text-decoration: none;
	transition: color 0.3s;
}

/* Current page and hover: contrast rows 5 and 6. */
.psi-ba__list a[aria-current="page"],
.psi-ba__list a:hover,
.psi-ba__list a:focus-visible {
	color: var(--psi-color-accent-text);
}

.psi-ba__main {
	display: flex;
	flex-direction: column;
	row-gap: var(--psi-space-column);
}

.psi-ba__divider {
	block-size: 23px;
}

.psi-ba__title {
	margin: 0;
	padding-block-end: 10px;
	color: var(--psi-color-primary);
	font-size: 31px;
	font-weight: 700;
	line-height: 1;
}

.psi-ba__content {
	display: flex;
	flex-direction: column;
	row-gap: var(--psi-space-column);
}

.psi-ba__content > * {
	margin-block: 0;
}

.psi-ba__content p {
	font-size: 16px;
	line-height: 25.2px;
}

/* Paragraphs in a row came from ONE Divi text module: 1em apart there, not the 30 px between blocks
   (M3: Facelift and Rhinoplasty end with an empty paragraph, Fat Grafting with an empty one). */
.psi-ba__content > p + p {
	margin-block-start: calc(1em - var(--psi-space-column));
}

/* The closing divider row on every page but Abdominoplasty: a 200 px divider, measured 230 px on the
   baselines (all three widths, Breast Lift, Breast Reduction, Liposuction Thighs: each 30 to 32 px short at 200). */
.psi-ba-end {
	block-size: 230px;
}

/* Compare groups: stacked 30 px apart; two to a row (1% gap) from 1025 when grouped as two-up. */
.psi-compare-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--psi-space-column);
}

/* A two-up row's columns, stacked below 1025, sit Divi's 40 px column row gap apart; separate rows and the
   sliders of one column stay 30 px apart (M4, D5, measured on Facelift, Fat Grafting, Rhinoplasty). */
.psi-compare-grid--2 { row-gap: var(--psi-space-row); }

/* ---------- The compare slider ---------- */
.psi-compare {
	position: relative;
	margin: 0;
}

.psi-compare figure {
	margin: 0;
}

.psi-compare img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Without the script: before, then after, one under the other. */
.psi-compare:not(.is-ready) figure + figure {
	margin-block-start: 10px;
}

.psi-compare.is-ready {
	--psi-compare-pos: 50%;
	overflow: hidden;
	/* One finger sideways drives the slider; vertical scrolling and two-finger zoom stay the browser's (P2: pinch-zoom). */
	touch-action: pan-y pinch-zoom;
	user-select: none;
	cursor: ew-resize;
}

.psi-compare.is-ready figure + figure {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--psi-compare-pos));
	transition: clip-path 0.1s ease-out;
}

.psi-compare.is-ready figure + figure img {
	block-size: 100%;
	object-fit: cover;
}

[dir="rtl"] .psi-compare.is-ready figure + figure {
	clip-path: inset(0 var(--psi-compare-pos) 0 0);
}

.psi-compare__handle {
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--psi-compare-pos);
	z-index: 2;
	inline-size: 50px;
	margin-inline-start: -25px;
	transition: inset-inline-start 0.1s ease-out;
}

.psi-compare__handle::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 24px;
	inline-size: 2px;
	background: var(--psi-color-ink-soft);
	box-shadow: var(--psi-shadow-compare-line);
}

.psi-compare__circle {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 1px;
	inline-size: 48px; /* measured on the baseline */
	block-size: 48px;
	margin-block-start: -24px;
	border: 2px solid var(--psi-color-ink-soft);
	border-radius: 50%;
	backdrop-filter: blur(5px);
	box-shadow: var(--psi-shadow-compare-line);
}

/* The two arrows inside the circle, drawn as chevrons. */
.psi-compare__circle::before,
.psi-compare__circle::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inline-size: 9px;
	block-size: 9px;
	margin-block-start: -5px;
	border-block-start: 3px solid var(--psi-color-ink-soft);
	border-inline-start: 3px solid var(--psi-color-ink-soft);
}

.psi-compare__circle::before {
	inset-inline-start: 11px;
	transform: rotate(-45deg);
}

.psi-compare__circle::after {
	inset-inline-end: 11px;
	transform: rotate(135deg);
}

[dir="rtl"] .psi-compare__circle::before {
	transform: rotate(45deg);
}

[dir="rtl"] .psi-compare__circle::after {
	transform: rotate(-135deg);
}

.psi-compare__handle:focus-visible {
	outline: none;
}

.psi-compare__handle:focus-visible .psi-compare__circle {
	outline: 3px solid var(--psi-color-primary);
	outline-offset: 2px;
}

/* Labels: mid-height, at each end (measured on the baseline; the recon's "top" was wrong). */
.psi-compare__label {
	position: absolute;
	inset-block-start: 50%;
	z-index: 1;
	padding: 7px 13px;
	transform: translateY(-50%);
	background: var(--psi-color-label-bg);
	color: var(--psi-color-ink-soft);
	font-size: 16px;
	line-height: 1.4;
	pointer-events: none;
}

.psi-compare__label--before {
	inset-inline-start: 16px;
}

.psi-compare__label--after {
	inset-inline-end: 16px;
}

@media (min-width: 1025px) {
	.psi-ba__row {
		grid-template-columns: 21.03% 1fr;
		column-gap: var(--psi-gap-row);
	}

	.psi-compare-grid--2 {
		grid-template-columns: 1fr 1fr;
		column-gap: 1%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.psi-compare.is-ready figure + figure,
	.psi-compare__handle {
		transition: none;
	}
}

/*
 * Contact (M2 Phase C), measured on the Stage 0 Contact baseline at 390, 768 and 1440:
 * a 100 px top spacer, the h1, a 23 px spacer, three icon pairs (icon above two or three lines of
 * 18/25.2 px text, 30 px apart; in a row from 981 px, stacked 40 px apart below), a 70 px spacer, the
 * grey band (40 px padding, heading, 60 px, the form in a row half the window wide) and the map.
 * The form is Fluent Forms (inc/forms.php); labels stay for screen readers and are hidden visually,
 * as today's form showed only placeholders.
 */

.psi-sect .psi-contact__title {
	font-size: 36px;
	line-height: 1;
}

.psi-contact__title + * { margin-block-start: 0; }

.psi-contact__pairs {
	margin-block-start: 23px;
	row-gap: 40px;
	text-align: center;
}

.psi-contact__pair {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 30px;
}

.psi-sect .psi-contact__pair p {
	inline-size: 100%;
	font-size: 18px;
	line-height: 25.2px;
}

.psi-contact__band {
	display: flex;
	flex-direction: column;
	row-gap: 60px;
	margin-block-start: 70px;
	padding-block: 40px;
	background: var(--psi-color-bg-alt);
}

.psi-contact__form-row {
	inline-size: 50%; /* today's; the Turnstile widget is invisible (M2 close), so no 300 px minimum */
}

/* ---------- The form (Fluent Forms markup) ----------
   Selectors carry .fluentform so they outrank Fluent's base stylesheet, which loads after the theme. */
.psi-form-contact .fluentform .ff-el-group {
	margin: 0 0 15px;
}

.psi-form-contact .fluentform .ff-el-input--label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.psi-form-contact .fluentform .ff-el-form-control {
	display: block;
	inline-size: 100%;
	block-size: 50px;
	padding: 16px;
	border: 0;
	border-radius: 30px;
	background: var(--psi-color-bg);
	color: var(--psi-color-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 18px;
}

.psi-form-contact .fluentform textarea.ff-el-form-control {
	block-size: 150px;
	resize: vertical;
}

.psi-form-contact .fluentform .ff-el-form-control::placeholder {
	color: var(--psi-color-placeholder);
	opacity: 1;
}

.psi-form-contact .fluentform .ff-el-form-control:focus-visible {
	outline: 2px solid var(--psi-color-primary);
	outline-offset: 2px;
}

.psi-form-contact .fluentform .ff-el-is-error .ff-el-form-control {
	outline: 2px solid var(--psi-color-error);
}

.psi-form-contact .fluentform .error,
.psi-form-contact .fluentform .ff-el-is-error .text-danger {
	margin-block-start: 5px;
	padding-inline-start: 16px;
	color: var(--psi-color-error);
	font-size: 14px;
	line-height: 1.4;
}

/* The Message error sits inside the empty box, not below it. Fluent clears that error only when the box
   loses focus, so an error line below it vanished as the visitor pressed Send: the button jumped 25 px
   between press and release and the click was lost (measured, M2 Phase C A9). Message's only rule is
   "required", so the box is always empty while the error shows. */
.psi-form-contact .fluentform .ff-el-input--content {
	position: relative;
}

.psi-form-contact .fluentform textarea.ff-el-form-control + .error {
	position: absolute;
	inset-block-end: 16px;
	inset-inline: 16px;
	margin: 0;
	padding: 0;
}

.psi-form-contact .fluentform .ff-el-turnstile {
	display: flex;
	justify-content: flex-end;
}

/* The widget is invisible (Samer, M2 close) and draws 0 px; Fluent still keeps its 15 px group gap
   under it, which added that much to the band. */
.psi-form-contact .fluentform .ff-el-group:has(.ff-el-turnstile) {
	margin-block-end: 0;
}

.psi-form-contact .fluentform .ff_submit_btn_wrapper {
	margin: 0;
	text-align: end;
}

.psi-form-contact .fluentform .ff-btn-submit {
	padding: 0.3em 1em;
	border: 0;
	border-radius: 30px;
	background: var(--psi-color-primary);
	color: var(--psi-color-on-primary);
	font-family: inherit;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.psi-form-contact .fluentform .ff-btn-submit:hover,
.psi-form-contact .fluentform .ff-btn-submit:focus-visible {
	background: var(--psi-color-highlight);
	color: var(--psi-color-ink-soft); /* contrast row 2B */
}

.psi-form-contact .fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid var(--psi-color-primary);
	outline-offset: 2px;
}

.psi-form-contact .fluentform .ff-message-success {
	padding: 16px;
	border-radius: 30px;
	background: var(--psi-color-bg);
	color: var(--psi-color-text);
	font-size: 18px;
	line-height: 25.2px;
	text-align: center;
}

/* ---------- The map ---------- */
.psi-map__frame {
	display: block;
	inline-size: 100%;
	block-size: 450px;
	border: 0;
}

@media (min-width: 981px) {
	.psi-contact__pairs {
		flex-direction: row;
		align-items: flex-start;
		column-gap: var(--psi-gap-row);
	}
	.psi-contact__pair { flex: 1 1 0; }
}

/*
 * Procedure pages (Stage 4 P1, single-psi-service.php): new design from the procedure mockup 0.1.10 (the page
 * Imad saw), less its "At a glance" box and hotspots. Logical properties only (A6); colours and fonts by token
 * (A4). Breakpoints as the master: two columns from 768, the contents beside the parts from 1025.
 */

.psi-proc {
	/* No bottom padding: the closing contact runs into the footer's band (P2 Unit 1, the footer tidy). */
	padding-block: 24px 0;
}

.psi-proc__wrap {
	inline-size: var(--psi-content-width-wide);
	max-inline-size: 1180px;
	margin-inline: auto;
}

.psi-proc p,
.psi-proc li {
	font-size: 16px;
	line-height: 1.7;
}

.psi-proc p {
	margin-block: 0 1em;
}

.psi-proc :where(h2, h3, h4) {
	margin-block: 0 0.5em;
	line-height: 1.2;
}

.psi-proc h2 {
	font-size: 31px;
}

.psi-proc h3 {
	color: var(--psi-color-ink-soft);
	font-size: 20px;
	font-weight: 600;
}

.psi-proc h4 {
	color: var(--psi-color-primary);
	font-size: 18px;
	font-weight: 600;
}

.psi-proc .wp-block-image {
	margin: 0 0 1.5em;
}

.psi-proc .wp-block-image img {
	display: block;
}

.psi-proc .wp-element-caption {
	margin-block-start: 8px;
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- Breadcrumb ---------- */
.psi-proc-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.psi-proc-crumbs li + li::before {
	content: "/";
	margin-inline: 8px;
	opacity: 0.6;
}

.psi-proc-crumbs a {
	text-decoration: none;
}

.psi-proc-crumbs a:hover,
.psi-proc-crumbs a:focus-visible {
	text-decoration: underline;
}

/* ---------- Hero ---------- */
.psi-proc-hero {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 28px;
	align-items: center;
	padding-block-end: 40px;
}

.psi-proc-hero__title {
	margin: 0 0 0.15em;
	/* 38 px from 366 up; narrower, a long word ("Reconstruction" at 320) still fits whole (P2 A2). A longer word
	   than that breaks rather than overflows. */
	font-size: min(38px, 10.4vw);
	line-height: 1.1;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.psi-proc .psi-proc-alias {
	margin-block-end: 16px;
	color: var(--psi-color-accent-text);
	font-size: 18px;
	font-weight: 600;
}

.psi-proc .psi-proc-lede {
	color: var(--psi-color-ink-soft);
	font-size: 19px;
	font-style: italic;
}

.psi-proc-actions {
	margin-block-start: 22px;
}

.psi-proc-hero__image .wp-block-image {
	margin: 0;
}

.psi-proc-hero__image img {
	inline-size: auto;
	max-block-size: 380px;
	margin-inline: auto;
	border-radius: 14px;
}

/* ---------- Buttons (the theme draws them) ---------- */
.psi-proc-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.psi-proc-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0.45em 1.2em;
	border: 2px solid var(--psi-color-primary);
	border-radius: 30px;
	background: var(--psi-color-primary);
	color: var(--psi-color-on-primary);
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.psi-proc-btn--whatsapp {
	border-color: var(--psi-color-whatsapp-button);
	background: var(--psi-color-whatsapp-button);
}

.psi-proc-btn .psi-icon {
	inline-size: 1.1em;
	block-size: 1.1em;
	fill: currentColor;
	flex: none;
}

/* Hover: contrast row 2B, as every button on the site. */
.psi-proc-btn:hover,
.psi-proc-btn:focus-visible {
	border-color: var(--psi-color-highlight);
	background: var(--psi-color-highlight);
	color: var(--psi-color-ink-soft);
}

.psi-proc-btn--plain {
	background: var(--psi-color-bg);
	color: var(--psi-color-primary);
	font-size: 16px;
}

.psi-proc-btn--plain:hover,
.psi-proc-btn--plain:focus-visible {
	border-color: var(--psi-color-primary);
	background: var(--psi-color-bg-tint);
	color: var(--psi-color-primary);
}

.psi-proc-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* ---------- On this page ---------- */
.psi-proc-toc {
	margin-block-end: 32px;
	font-size: 15px;
}

.psi-proc-toc__title {
	margin: 0 0 10px;
	color: var(--psi-color-ink-soft);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.psi-proc-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	border-inline-start: 2px solid var(--psi-color-bg-alt);
}

.psi-proc-toc a {
	display: block;
	margin-inline-start: -2px;
	padding: 6px 14px;
	border-inline-start: 2px solid transparent;
	color: var(--psi-color-text);
	line-height: 1.4;
	text-decoration: none;
}

.psi-proc-toc a:hover,
.psi-proc-toc a:focus-visible,
.psi-proc-toc a[aria-current] {
	border-inline-start-color: var(--psi-color-primary);
	color: var(--psi-color-primary);
}

.psi-proc-toc a[aria-current] {
	font-weight: 600;
}

.psi-proc-toc__num {
	margin-inline-end: 6px;
	color: var(--psi-color-accent-text);
	font-weight: 600;
}

/* ---------- Parts ---------- */
.psi-part {
	margin-block-end: 40px;
	padding-block-end: 40px;
	border-block-end: 1px solid var(--psi-color-bg-alt);
}

.psi-part:last-child {
	border-block-end: 0;
}

.psi-proc .psi-eyebrow {
	margin-block-end: 6px;
	color: var(--psi-color-accent-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.psi-part > h2 + p {
	color: var(--psi-color-ink-soft);
	font-size: 19px;
}

.psi-proc .psi-note {
	font-size: 14px;
	font-style: italic;
}

.psi-proc .psi-proc-more {
	font-weight: 600;
}

.psi-proc .wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 32px;
	margin-block: 0 1em;
}

.psi-proc .wp-block-column > :last-child {
	margin-block-end: 0;
}

/* Lists */
.psi-proc :where(.psi-part) ul:not([class*="psi-"]) {
	margin-block: 0 1em;
	padding-inline-start: 20px;
}

.psi-proc .psi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.2em;
	padding: 0;
	list-style: none;
}

.psi-proc .psi-chips li {
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--psi-color-bg-warm);
	color: var(--psi-color-ink-soft);
	font-size: 15px;
	font-weight: 500;
}

.psi-proc .psi-tick {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.psi-proc .psi-tick li {
	position: relative;
	margin-block-end: 6px;
	padding-inline-start: 28px;
}

.psi-proc .psi-tick li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.5em;
	inset-inline-start: 2px;
	inline-size: 13px;
	block-size: 7px;
	border-block-end: 2px solid var(--psi-color-primary);
	border-inline-start: 2px solid var(--psi-color-primary);
	transform: rotate(-45deg);
}

/* Mirrored, the corner sits on the right: the tick turns the other way. */
[dir="rtl"] .psi-proc .psi-tick li::before {
	transform: rotate(45deg);
}

/* Callout */
.psi-callout {
	margin-block: 0 1.5em;
	padding: 16px 20px;
	border-inline-start: 4px solid var(--psi-color-accent);
	border-start-end-radius: 14px;
	border-end-end-radius: 14px;
	background: var(--psi-color-bg-warm);
}

.psi-callout > :last-child {
	margin-block-end: 0;
}

/* Self-check */
.psi-selfcheck {
	margin-block: 0 1.5em;
	padding: 18px 20px;
	border: 1px solid var(--psi-color-bg-alt);
	border-radius: 14px;
}

.psi-selfcheck ul {
	margin-block: 0 1em;
}

.psi-proc .psi-selfcheck-out {
	margin: 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--psi-color-bg-tint);
	color: var(--psi-color-ink-soft);
}

/* Checkbox lists, once the script has made them (self-check, questions) */
.is-ready > ul[role="group"] {
	padding: 0;
	list-style: none;
}

.is-ready > ul[role="group"] label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-block: 4px;
	cursor: pointer;
}

.is-ready > ul[role="group"] input {
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	margin: 3px 0 0;
	accent-color: var(--psi-color-primary);
}

/* Steps: numbered; the drawing beside the text from 1025, above it below */
.psi-steps {
	counter-reset: psi-step;
	margin-block-end: 1.5em;
}

.psi-step {
	counter-increment: psi-step;
	display: grid;
	grid-template-columns: 1fr;
	margin-block-end: 16px;
	padding: 16px 18px;
	border: 1px solid var(--psi-color-bg-alt);
	border-radius: 14px;
}

.psi-step > .wp-block-image {
	margin: 0 0 12px;
}

.psi-step > .wp-block-image img {
	inline-size: 180px;
	border-radius: 10px;
}

.psi-step > h3 {
	display: flex;
	align-items: center;
	gap: 10px;
}

.psi-step > h3::before {
	content: counter(psi-step);
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background: var(--psi-color-primary);
	color: var(--psi-color-on-primary);
	font-size: 14px;
	font-weight: 700;
}

.psi-step > p:last-child {
	margin-block-end: 0;
}

/* A row of drawings (P2): as many across as fit at 240 px or wider, one per line at 390; each drawing at most
   240 px tall on phones and 360 px from 768; his caption under each, his note under the row. */
.psi-figures {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 24px;
	margin-block: 0 1.5em;
}

.psi-proc .psi-figures > .wp-block-image {
	flex: 1 1 240px;
	margin: 0;
	text-align: center;
}

.psi-proc .psi-figures > .wp-block-image img {
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
	max-block-size: 240px;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.psi-proc .psi-figures > .wp-block-image img {
		max-block-size: 360px;
	}
}

.psi-proc .psi-figures .wp-element-caption {
	text-align: center;
}

.psi-proc .psi-figures-note {
	flex-basis: 100%;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.psi-step > .psi-figures {
	margin-block: 8px 0;
}

.psi-steps > .psi-figures {
	margin-block: 0 16px;
}

/* A row of four or more drawings (not counting a key): 200 px minimum, so four sit on one line at 1440 (Samer,
   2026-11-03); the drawings keep one size, so one that wraps (narrower screens) does not grow to the full width. */
.psi-proc .psi-figures:has(> .wp-block-image:not(.psi-figures-key) ~ .wp-block-image:not(.psi-figures-key) ~ .wp-block-image:not(.psi-figures-key) ~ .wp-block-image:not(.psi-figures-key)) > .wp-block-image:not(.psi-figures-key) {
	flex: 0 1 200px;
}

/* A key to the row's drawings (line samples with his words): its own line, at most 440 px wide. */
.psi-proc .psi-figures > .psi-figures-key {
	flex-basis: 100%;
}

.psi-proc .psi-figures > .psi-figures-key img {
	inline-size: min(100%, 440px);
	max-block-size: none;
}

/* A table (P2): his header row and cells; below 768 it scrolls sideways inside its own box (a labelled,
   focusable region, set by inc/procedure.php), never the page. */
.psi-proc .psi-table {
	margin: 0 0 1.5em;
}

.psi-proc .psi-table table {
	inline-size: 100%;
	border-collapse: collapse;
}

.psi-proc .psi-table :where(th, td) {
	padding: 10px 12px;
	border: 0;
	border-block-end: 1px solid var(--psi-color-bg-alt);
	font-size: 15px;
	line-height: 1.55;
	text-align: start;
	vertical-align: top;
}

.psi-proc .psi-table thead th {
	border-block-end: 0;
	background: var(--psi-color-primary);
	color: var(--psi-color-on-primary);
	font-weight: 600;
}

.psi-proc .psi-table tbody td:first-child {
	color: var(--psi-color-ink-soft);
	font-weight: 600;
}

.psi-proc .psi-table:focus-visible {
	outline: 2px solid var(--psi-color-primary);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.psi-proc .psi-table {
		overflow-x: auto;
	}

	.psi-proc .psi-table table {
		min-inline-size: 560px;
	}
}

/* Before and after on a procedure page: the images keep the slider's own zero margin. */
.psi-proc .psi-compare {
	margin-block: 0 12px;
}

.psi-proc .psi-compare .wp-block-image {
	margin: 0;
}

/* Recovery timeline: a plain list without the script; tabs with it */
.psi-timeline {
	margin-block-end: 1em;
}

.psi-tl-step {
	padding-inline-start: 18px;
	border-inline-start: 3px solid var(--psi-color-bg-tint);
}

.psi-tl-step + .psi-tl-step {
	margin-block-start: 16px;
}

.psi-tl-step > h3 {
	color: var(--psi-color-accent-text);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* A sideways swipe belongs to the timeline (not to the browser's back gesture); vertical scrolling and two-finger
   zoom stay the browser's (P2: pinch-zoom). */
.psi-timeline.is-ready {
	touch-action: pan-y pinch-zoom;
}

.psi-timeline.is-ready .psi-tl-step {
	min-block-size: 120px;
	padding: 18px 22px;
	border: 0;
	border-radius: 14px;
	background: var(--psi-color-bg-tint);
	color: var(--psi-color-text-on-tint);
}

.psi-timeline.is-ready .psi-tl-step + .psi-tl-step {
	margin-block-start: 0;
}

/* The stage label is the tab's name; in the panel it stays for screen readers only. */
.psi-timeline.is-ready .psi-tl-step > h3 {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.psi-timeline.is-ready .psi-tl-step > :last-child {
	margin-block-end: 0;
}

.psi-timeline__tabs {
	position: relative;
	display: flex;
	margin-block-end: 14px;
}

.psi-timeline__tabs::before {
	content: "";
	position: absolute;
	inset-block-start: 19px;
	inset-inline: 10%;
	block-size: 3px;
	background: var(--psi-color-bg-alt);
}

.psi-timeline__tabs [role="tab"] {
	position: relative;
	flex: 1 1 0;
	min-inline-size: 0;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--psi-color-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
}

.psi-timeline__dot {
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	margin: 0 auto 8px;
	border: 3px solid var(--psi-color-bg-alt);
	border-radius: 50%;
	background: var(--psi-color-bg);
	font-weight: 700;
}

.psi-timeline__tabs [aria-selected="true"] {
	color: var(--psi-color-primary);
	font-weight: 600;
}

.psi-timeline__tabs [aria-selected="true"] .psi-timeline__dot {
	border-color: var(--psi-color-primary);
	background: var(--psi-color-primary);
	color: var(--psi-color-on-primary);
}

.psi-timeline__nav {
	display: flex;
	justify-content: space-between;
	margin-block-start: 12px;
}

.psi-timeline__nav .psi-proc-btn {
	font-size: 15px;
}

/* Arrows: chevrons drawn with borders, mirrored under dir="rtl". */
.psi-timeline__prev::before,
.psi-timeline__next::after {
	content: "";
	inline-size: 0.5em;
	block-size: 0.5em;
	border-block-start: 2px solid currentColor;
}

.psi-timeline__prev::before {
	border-inline-start: 2px solid currentColor;
	transform: rotate(-45deg);
}

.psi-timeline__next::after {
	border-inline-end: 2px solid currentColor;
	transform: rotate(45deg);
}

[dir="rtl"] .psi-timeline__prev::before {
	transform: rotate(45deg);
}

[dir="rtl"] .psi-timeline__next::after {
	transform: rotate(-45deg);
}

/* Questions to ask */
.psi-questions__status {
	min-block-size: 1.7em;
	margin-block: 8px 0;
	color: var(--psi-color-ink-soft);
	font-weight: 600;
}

.psi-questions__fallback {
	inline-size: 100%;
	padding: 8px;
	font-family: inherit;
	font-size: 15px;
	resize: vertical;
}

/* The guide download */
.psi-proc .wp-block-file {
	margin-block: 1.5em 0;
}

.psi-proc .wp-block-file a {
	display: inline-block;
	padding: 0.45em 1.2em;
	border: 2px solid var(--psi-color-primary);
	border-radius: 30px;
	color: var(--psi-color-primary);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.psi-proc .wp-block-file a:hover,
.psi-proc .wp-block-file a:focus-visible {
	background: var(--psi-color-bg-tint);
}

/* ---------- The footer on a procedure page (P2 Unit 1) ----------
   The closing contact is a full-width band of the footer's own blue, so the footer's white strip and the empty
   top of its band (spacer and row gap) read as a gap and a second band here; on procedure pages only they go,
   and the contact runs into the Crisalix band. Every other page keeps its footer exactly. */
.single-psi-service:not(.psi-group) .psi-footer__strip, /* not on the four group pages: they end in white, not in the contact band */
.single-psi-service:not(.psi-group) .psi-footer__band-spacer {
	display: none;
}

.single-psi-service:not(.psi-group) .psi-footer__crisalix {
	margin-block-start: 0;
}

/* ---------- Closing contact ---------- */
.psi-proc-cta {
	padding: 48px 5%;
	background: var(--psi-color-primary);
	color: var(--psi-color-on-primary);
	text-align: center;
}

.psi-proc-cta h2 {
	color: var(--psi-color-on-primary);
}

.psi-proc .psi-proc-cta .psi-eyebrow {
	color: var(--psi-color-accent-on-primary);
}

.psi-proc-cta__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 28px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.psi-proc-cta__facts span {
	font-weight: 600;
}

.psi-proc-cta a:not(.psi-proc-btn) {
	color: var(--psi-color-on-primary);
}

.psi-proc-cta .psi-proc-buttons {
	justify-content: center;
	margin-block-end: 24px;
}

.psi-proc-cta .psi-proc-btn:not(.psi-proc-btn--whatsapp) {
	border-color: var(--psi-color-on-primary);
	background: var(--psi-color-on-primary);
	color: var(--psi-color-primary);
}

.psi-proc-cta .psi-proc-btn:hover,
.psi-proc-cta .psi-proc-btn:focus-visible {
	border-color: var(--psi-color-highlight);
	background: var(--psi-color-highlight);
	color: var(--psi-color-ink-soft);
}

.psi-proc .psi-proc-cta .psi-note {
	max-inline-size: 720px;
	margin: 0 auto;
}

.psi-proc-cta :focus-visible {
	outline-color: var(--psi-color-on-primary);
}

@media (min-width: 768px) {
	.psi-proc-hero {
		grid-template-columns: 1.15fr 0.85fr;
		column-gap: 48px;
	}

	.psi-proc-hero__title {
		font-size: 48px;
	}

	.psi-proc-hero__image img {
		max-block-size: 520px;
	}

	.psi-proc .wp-block-columns {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.psi-proc__layout {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		column-gap: 56px;
		align-items: start;
	}

	.psi-proc-toc {
		position: sticky;
		inset-block-start: calc(var(--psi-header-top) + max(14.65vw * 0.4398, 92.7px) + 58px);
	}

	.psi-proc-hero__title {
		font-size: 56px;
	}

	/* A step with its own drawing (Tummy Tuck): the drawing beside the text. Steps without one stay one column. */
	.psi-step:has(> .wp-block-image) {
		grid-template-columns: 180px minmax(0, 1fr);
		column-gap: 22px;
		align-items: start;
	}

	.psi-step > .wp-block-image {
		grid-row: 1 / span 3;
		margin: 0;
	}

	.psi-step:has(> .wp-block-image) > :not(.wp-block-image) {
		grid-column: 2;
	}
}

/*
 * Compatibility with plugins still active on the site. Each rule names its plugin and the milestone that
 * removes it; delete the rule with the plugin.
 *
 * None at present. (M5 removed the DiviFlash preloader rule: DiviFlash is switched off on the clone.)
 */