/*
 * SMH base stylesheet: token aliases, global defaults, the shared identity primitives and the CSS of the
 * "Living Network" motion engine (assets/js/living.js). Design: mockup A "Living Network" (approved by Sadeq
 * 2026-09-29; Drive design/mockups-2026-09-29/a-living-network). Contract: docs/ARCHITECTURE.md 3, 4.4, 5.0.
 * Owner: chrome + motion engine. Section builders use these primitives and write assets/css/sections/<section>.css.
 * Browser floor: Chromium 114 (no nesting, no :dir(), no @starting-style, no subgrid, no light-dark(), no
 * scroll-driven animation: every scroll effect is done in living.js).
 * Colours: always var(--smh-*) / var(--wp--preset--*) (or the A-compat aliases below); never a raw hex in section CSS.
 * Motion rules: per-frame changes are transform / opacity only; hidden states are prefixed `.js` (set in <head> by
 * functions.php; removed again if living.js never boots), so a page without JS shows everything.
 */

/* ---------- 1. Aliases (single source: theme.json) ---------- */
:root {
	--smh-petrol: var(--wp--preset--color--petrol);
	--smh-petrol-light: var(--wp--preset--color--petrol-light);
	--smh-petrol-deep: var(--wp--preset--color--petrol-deep);
	--smh-abyss: var(--wp--preset--color--abyss);
	--smh-steel: var(--wp--preset--color--steel);
	--smh-steel-mid: var(--wp--preset--color--steel-mid);
	--smh-grey-80: var(--wp--preset--color--grey-80);
	--smh-ink: var(--wp--preset--color--ink);
	--smh-muted: var(--wp--preset--color--muted);
	--smh-ground: var(--wp--preset--color--ground);
	--smh-line: var(--wp--preset--color--line);
	--smh-white: var(--wp--preset--color--white);
	--smh-mist: var(--wp--preset--color--mist);
	--smh-mist-2: rgb(220 230 233 / 0.74); /* secondary text on petrol (A: --on-p2) */
	--smh-error: var(--wp--preset--color--error);
	--smh-success: var(--wp--preset--color--success);
	--smh-grad-cover: var(--wp--preset--gradient--cover);
	--smh-grad-cover-v: var(--wp--preset--gradient--cover-vertical);
	--smh-grad-logo: var(--wp--preset--gradient--logo);
	--smh-grad-logo-s: var(--wp--preset--gradient--logo-s);
	--smh-grad-stops: #ACB1BA 0%, #8896A4 25%, #657E8F 50%, #416880 75%, #18566B 100%; /* the logo's 5 stops (physical: steel left) */
	--smh-r-control: var(--wp--custom--radius--control);
	--smh-r-tab: var(--wp--custom--radius--tab);
	--smh-r-pocket: var(--wp--custom--radius--pocket);
	--smh-bracket-bar: var(--wp--custom--bracket--bar);
	--smh-bracket-arm: var(--wp--custom--bracket--arm);
	--smh-dur: var(--wp--custom--motion--duration);
	--smh-delay: var(--wp--custom--motion--delay);
	--smh-ease: var(--wp--custom--motion--ease);
	--smh-state: var(--wp--custom--motion--state);
	--smh-e-out: var(--wp--custom--motion--ease-out);   /* cubic-bezier(.16,1,.3,1): arrivals, lifts */
	--smh-e-std: var(--wp--custom--motion--ease-std);   /* cubic-bezier(.2,0,0,1): fades */
	--smh-e-io: var(--wp--custom--motion--ease-io);     /* cubic-bezier(.65,0,.35,1): draw-ons */
	--smh-sh-1: var(--wp--preset--shadow--lift);
	--smh-sh-2: var(--wp--preset--shadow--float);
	--smh-sh-3: var(--wp--preset--shadow--deep);
	--smh-gutter: var(--wp--custom--gutter);
	--smh-wide: var(--wp--style--global--wide-size, 1240px);
	--smh-measure: var(--wp--custom--measure);
	--smh-focus: var(--wp--preset--color--petrol-light);
	--smh-lh-loose: var(--wp--custom--line-height--loose);
	--smh-lh-relaxed: var(--wp--custom--line-height--relaxed);
	--smh-lh-normal: var(--wp--custom--line-height--normal);
	--smh-lh-snug: var(--wp--custom--line-height--snug);
	--smh-fs-control: var(--wp--custom--font-size--control);
	--smh-target: var(--wp--custom--target--min);
	--smh-target-touch: var(--wp--custom--target--touch);
	--smh-line-on-petrol: var(--wp--custom--line-on-petrol);
	/* The fixed header (parts/header.html): 88 px, 76 px below 1080, 68 px below 760. A band that sits under the
	   transparent header pads its top by calc(var(--smh-hdr) + <its own space>). */
	--smh-hdr: var(--wp--custom--header-height);
	--smh-header-h: var(--smh-hdr);
	--smh-header-h-compact: var(--wp--custom--header-height-compact);
	/* The travelling line's x: the middle of the page gutter (inline start). */
	--smh-railx: calc(max(var(--smh-gutter), (100vw - var(--smh-wide)) / 2) / 2);
	--smh-wa-font: "SMH Tajawal", "SMH Riyal", Tahoma, "Segoe UI", sans-serif;

	/* A-compat aliases: mockup A's own custom property names, so its CSS ports without renaming. Tokens only. */
	--petrol: var(--smh-petrol); --petrol-l: var(--smh-petrol-light); --petrol-d: var(--smh-petrol-deep);
	--abyss: var(--smh-abyss); --ink: var(--smh-ink); --steel: var(--smh-steel); --steel-m: var(--smh-steel-mid);
	--grey: var(--smh-grey-80); --muted: var(--smh-muted); --ground: var(--smh-ground); --line: var(--smh-line);
	--on-p: var(--smh-mist); --on-p2: var(--smh-mist-2); --grad: var(--smh-grad-stops);
	--e-out: var(--smh-e-out); --e-std: var(--smh-e-std); --e-io: var(--smh-e-io);
	--g: var(--smh-gutter); --maxw: var(--smh-wide); --hdr: var(--smh-hdr); --railx: var(--smh-railx);
	--sh-1: var(--smh-sh-1); --sh-2: var(--smh-sh-2); --sh-3: var(--smh-sh-3);
}
@media (max-width: 1079px) { :root { --smh-hdr: var(--wp--custom--header-height-tablet); } }
@media (max-width: 759px) { :root { --smh-hdr: var(--wp--custom--header-height-compact); } }

/* ---------- 2. Document ---------- */
html {
	scroll-padding-top: calc(var(--smh-hdr) + 16px); /* the header is fixed */
	scroll-padding-bottom: var(--smh-wa-lane, 0px); /* WhatsApp tab host contract (WHATSAPP-WIDGET.md section 10) */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
	overflow-x: clip; /* not a scroll container: position: sticky keeps working */
}
html { overflow-x: hidden; } /* the viewport: no sideways scroll or zoom-out on phones from a decorative bleed */
/* The header is position: fixed; its in-flow wrapper is empty, so main starts at the very top (under the header). */
.wp-site-blocks > main, .wp-site-blocks > header.wp-block-template-part + * { margin-block-start: 0; }
/* A page whose first band is not a dark band under the header: reserve the header's height. Opt in to the
   transparent header with .smh-under-header on that first dark band (the hero .smh-hero counts automatically). */
body:not(:has(.smh-under-header, .smh-hero)) .wp-site-blocks { padding-block-start: var(--smh-hdr); }
.smh-under-header { padding-block-start: calc(var(--smh-hdr) + var(--wp--preset--spacing--70)); }

html[lang|="en"] body { line-height: var(--wp--custom--line-height--body-en); }
html[lang|="en"] :where(h1, h2, h3, h4, h5, h6, .wp-block-post-title) { line-height: var(--wp--custom--line-height--heading-en); }
html[lang|="en"] :where(h1, h2, .has-display-font-size, .has-xxx-large-font-size, .has-xx-large-font-size, .has-section-font-size, .has-hero-font-size) { letter-spacing: -0.01em; }
.smh-measure { max-width: var(--smh-measure); }
img { max-width: 100%; height: auto; }
::selection { background: var(--smh-petrol); color: var(--smh-white); }
a { text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Section titles (A: .h2): the `section` size, 1.3 line pitch, balanced lines. */
.smh-section-title, .has-section-font-size { line-height: 1.3; text-wrap: balance; }
.has-hero-font-size { line-height: 1.2; }
.smh-on-petrol, .on-dark { color: var(--smh-white); }
.smh-on-petrol :where(h1, h2, h3, h4, h5, h6), .on-dark :where(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* ---------- 3. Focus (never removed; white on dark grounds) ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--smh-focus);
	outline-offset: 3px;
}
:where(.smh-on-petrol, .on-dark, .smh-header) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--smh-white); }

/* ---------- 4. Bidi and numbers ---------- */
bdi { unicode-bidi: isolate; }
.smh-ltr, .ltr { direction: ltr; unicode-bidi: isolate; }
.smh-num, .num { font-variant-numeric: lining-nums tabular-nums; direction: ltr; unicode-bidi: isolate; }
.num { display: inline-block; letter-spacing: 0.02em; }
.smh-latin-caps:lang(en) { text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- 5. Accessibility helpers ---------- */
.screen-reader-text, .smh-visually-hidden, .vh {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important; white-space: nowrap;
}
.screen-reader-text:focus {
	background: var(--smh-white); color: var(--smh-petrol); clip: auto !important; clip-path: none;
	display: block; height: auto; width: auto; inset-inline-start: 8px; top: 8px; padding: 12px 20px; z-index: 100000;
	text-decoration: none; outline: 2px solid var(--smh-focus);
}
:root .skip-link.screen-reader-text:focus {
	inset-inline: 8px auto;
	inline-size: auto;
	background: var(--smh-white);
	color: var(--smh-petrol-deep);
	font-weight: 700;
	line-height: var(--smh-lh-snug);
	box-shadow: var(--smh-sh-2);
	z-index: 100001;
}

/* ---------- 6. Identity primitives (docs/ARCHITECTURE.md 5.0, restyled to mockup A) ---------- */

/* 6.1 Cover ground: the folder cover / card back. */
.smh-cover {
	position: relative;
	isolation: isolate;
	background: var(--smh-grad-cover);
	color: var(--smh-white);
}
.smh-cover--deep { background: var(--smh-petrol-deep); }
.smh-cover :where(h1, h2, h3, h4, a:not(.wp-element-button)) { color: inherit; }

/* 6.2 Network lines (static texture; the live network is .smh-live, section 11). */
.smh-net { position: relative; isolation: isolate; }
.smh-net::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: url(../svg/network-card.svg) center / cover no-repeat;
	opacity: var(--wp--custom--motif--network-on-white);
}
:where(.smh-cover, .smh-on-petrol).smh-net::before { opacity: var(--wp--custom--motif--network-on-petrol); }
@media (max-width: 599px) {
	.smh-net::before { background-image: url(../svg/network-portrait.svg); }
}
.smh-net--foot::before {
	top: auto;
	height: min(40%, 280px);
	background-position: center bottom;
	-webkit-mask-image: linear-gradient(to top, black 45%, transparent);
	mask-image: linear-gradient(to top, black 45%, transparent);
}

/* 6.3 Ghost S watermark. Max one per page. */
.smh-ghost { position: relative; isolation: isolate; overflow: clip; }
.smh-ghost::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: min(88%, 640px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: url(../svg/mark-petrol.svg) center / contain no-repeat;
	opacity: var(--wp--custom--motif--ghost-on-white);
}
[dir="rtl"] .smh-ghost::after { transform: translate(50%, -50%); }
:where(.smh-cover, .smh-on-petrol).smh-ghost::after { background-image: url(../svg/mark-white.svg); opacity: var(--wp--custom--motif--ghost-on-petrol); }
.smh-ghost--end::after { inset-inline-start: auto; inset-inline-end: -12%; width: min(60vw, 720px); transform: translateY(-50%); }
[dir="rtl"] .smh-ghost--end::after { transform: translateY(-50%); }

/* 6.4 Bracket frame (A): the mark's top and bottom brackets, the top bar in the logo gradient (steel left, petrol
   right: physical, never mirrored), the arms steel (left) and petrol (right). living.js opens every .smh-frame
   from its centre line when it enters the view; a direct h1/h2 child is revealed exactly between the brackets.
   .smh-frame--hug shrink-wraps a title; .smh-frame--static never animates; on petrol the 2 px white variant. */
.smh-frame {
	--arm: clamp(10px, 1.1vw, 15px);
	--bw: 3px;
	--bg1: linear-gradient(90deg, var(--smh-grad-stops));
	--c1: var(--smh-steel);
	--c2: var(--smh-petrol);
	--fpad-b: clamp(16px, 1.9vw, 28px);
	--fpad-i: clamp(18px, 2.2vw, 32px);
	position: relative;
	padding: var(--fpad-b) var(--fpad-i);
}
.smh-frame--hug { display: block; width: fit-content; max-width: 100%; }
.smh-frame::before,
.smh-frame::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: var(--arm);
	pointer-events: none;
	background:
		var(--bg1) 0 0 / 100% var(--bw) no-repeat,
		linear-gradient(var(--c1), var(--c1)) 0 0 / var(--bw) 100% no-repeat,
		linear-gradient(var(--c2), var(--c2)) 100% 0 / var(--bw) 100% no-repeat;
}
.smh-frame::before { top: 0; }
.smh-frame::after { bottom: 0; transform: scaleY(-1); }
:where(.smh-cover, .smh-on-petrol, .on-dark) .smh-frame, .smh-frame--on-petrol, .smh-frame.smh-on-petrol {
	--bw: 2px;
	--bg1: linear-gradient(90deg, rgb(172 177 186 / 0.75), #fff);
	--c1: rgb(172 177 186 / 0.75);
	--c2: #fff;
}
.smh-frame > :where(h1, h2, h3) { margin-block: 0; }
.js .smh-frame:not(.smh-frame--static)::before { opacity: 0; transform: translateY(var(--half, 40px)) scaleX(.06); }
.js .smh-frame:not(.smh-frame--static)::after { opacity: 0; transform: translateY(calc(-1 * var(--half, 40px))) scaleX(.06) scaleY(-1); }
.js .smh-frame.is-open::before { animation: smh-brT var(--wp--custom--motion--frame, 1.5s) both; }
.js .smh-frame.is-open::after { animation: smh-brB var(--wp--custom--motion--frame, 1.5s) both; }
@keyframes smh-brT {
	0% { opacity: 0; transform: translateY(var(--half)) scaleX(.06); animation-timing-function: cubic-bezier(.16,1,.3,1); }
	34% { opacity: 1; transform: translateY(var(--half)) scaleX(1); animation-timing-function: cubic-bezier(.7,0,.15,1); }
	100% { opacity: 1; transform: translateY(0) scaleX(1); }
}
@keyframes smh-brB {
	0% { opacity: 0; transform: translateY(calc(-1 * var(--half))) scaleX(.06) scaleY(-1); animation-timing-function: cubic-bezier(.16,1,.3,1); }
	34% { opacity: 1; transform: translateY(calc(-1 * var(--half))) scaleX(1) scaleY(-1); animation-timing-function: cubic-bezier(.7,0,.15,1); }
	100% { opacity: 1; transform: translateY(0) scaleX(1) scaleY(-1); }
}
.js .smh-frame:not(.smh-frame--static) > :is(h1, h2) { clip-path: inset(50% -12% 50% -12%); }
/* At rest the title is never clipped (fill backwards, then clip-path none): tall marks such as the hamza over the alef
   of «أرقام» stay whole at every size, and a mid-visit switch to low-power cannot leave a clip behind. */
.js .smh-frame.is-open > :is(h1, h2) { clip-path: none; animation: smh-clipOpen var(--wp--custom--motion--frame, 1.5s) backwards; }
@keyframes smh-clipOpen {
	0%, 34% { clip-path: inset(50% -12% 50% -12%); animation-timing-function: cubic-bezier(.7,0,.15,1); }
	100% { clip-path: inset(calc(-1 * clamp(16px, 1.9vw, 28px)) -12% calc(-1 * clamp(16px, 1.9vw, 28px)) -12%); }
}
/* Optional line split inside the title: <span class="ln"><span>line</span></span> rises after the brackets open. */
.smh-frame .ln { display: block; }
.smh-frame .ln > span { display: block; }
.js .smh-frame:not(.smh-frame--static) .ln > span { transform: translateY(22%); opacity: .2; }
.js .smh-frame.is-open .ln > span { transform: none; opacity: 1; transition: transform 1.4s var(--smh-e-out) calc(.5s + var(--i, 0) * .08s), opacity 1s var(--smh-e-std) calc(.5s + var(--i, 0) * .08s); }

/* 6.5 Icon tab: the business-card contact square. */
.smh-tab {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: var(--smh-r-tab);
	background: var(--smh-petrol);
	color: var(--smh-white);
}
.smh-tab svg { inline-size: 1.125rem; block-size: 1.125rem; }
:where(.smh-cover, .smh-on-petrol) .smh-tab, .smh-tab--inverse { background: var(--smh-white); color: var(--smh-petrol); }

/* 6.6 Folder pocket: one element per page, one corner. */
.smh-pocket { border-end-end-radius: var(--smh-r-pocket); }

/* 6.7 Hairline rule. */
.smh-rule { border: 0; border-block-start: 1px solid var(--smh-line); margin: 0; }

/* 6.8 Band grounds. */
.smh-band-ground { background: var(--smh-ground); }

/* 6.9 Card (A): white paper on layered shadows; a link card lifts and shows the logo-gradient bar on hover. */
.smh-card {
	position: relative;
	isolation: isolate;
	border-radius: var(--smh-r-tab);
	background: var(--smh-white);
	color: var(--smh-ink);
	box-shadow: var(--smh-sh-1), inset 0 0 0 1px rgb(172 177 186 / 0.5);
	transition: transform .7s var(--smh-e-out), box-shadow .7s var(--smh-e-out);
}
.smh-card::after {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 3px;
	border-radius: var(--smh-r-tab) var(--smh-r-tab) 0 0;
	background: linear-gradient(90deg, var(--smh-grad-stops));
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .8s var(--smh-e-out);
	pointer-events: none;
}
html:not([dir="rtl"]) .smh-card::after { transform-origin: left; }
:is(a.smh-card, .smh-card:has(a)):hover { transform: translateY(-8px); box-shadow: var(--smh-sh-2), inset 0 0 0 1px rgb(25 100 120 / 0.28); }
:is(a.smh-card, .smh-card:has(a)):is(:hover, :focus-within)::after { transform: scaleX(1); }

/* ---------- 7. Buttons and links (A) ---------- */
/* Primary = petrol fill; is-style-on-petrol = white fill, petrol-deep text; is-style-text = the A text link.
   Every button lifts 2 px and a light sweeps across it on hover; the arrow (assets/svg/icons/arrow.svg) points
   forward (left in Arabic, right in English) and steps 5 px forward on hover. */
.wp-element-button, .wp-block-button__link {
	font-weight: 700;
	transition: transform .5s var(--smh-e-out), box-shadow .5s var(--smh-e-out), background-color .3s, color .3s;
}
.wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-block-size: 58px;
	padding-block: 0.5rem;
	padding-inline: 28px;
	border-radius: var(--smh-r-control);
	font-size: 1.0625rem;
	line-height: var(--smh-lh-snug);
	text-decoration: none;
	box-shadow: 0 14px 30px -14px rgb(15 61 76 / 0.7);
}
.wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.22) 48%, transparent 66%);
	transform: translateX(110%);
	transition: transform 0s;
}
.wp-block-button__link::after {
	content: "";
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	background: currentColor;
	-webkit-mask: url(../svg/icons/arrow.svg) center / contain no-repeat;
	mask: url(../svg/icons/arrow.svg) center / contain no-repeat;
	transition: transform .5s var(--smh-e-out);
}
html:not([dir="rtl"]) .wp-block-button__link::after { transform: scaleX(-1); }
.wp-block-button__link:hover { transform: translateY(-2px); background-color: var(--smh-petrol-light); color: var(--smh-white); box-shadow: 0 20px 40px -16px rgb(15 61 76 / 0.75); }
.wp-block-button__link:hover::before { transform: translateX(-110%); transition: transform .9s var(--smh-e-out); }
.wp-block-button__link:hover::after { transform: translateX(-5px); }
html:not([dir="rtl"]) .wp-block-button__link:hover::after { transform: scaleX(-1) translateX(-5px); }
.wp-block-button__link:active { background: var(--smh-petrol-deep); transform: none; }
.smh-no-arrow .wp-block-button__link::after, .wp-block-button__link.smh-no-arrow::after { display: none; }
/* On petrol: white fill (A: .btn--light). */
.wp-block-button.is-style-on-petrol .wp-block-button__link {
	background: var(--smh-white);
	color: var(--smh-petrol-deep);
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 14px 34px -14px rgb(0 0 0 / 0.55);
}
.wp-block-button.is-style-on-petrol .wp-block-button__link::before { background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.55) 48%, transparent 66%); }
.wp-block-button.is-style-on-petrol .wp-block-button__link:hover { background: var(--smh-white); color: var(--smh-petrol-deep); box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 22px 44px -16px rgb(0 0 0 / 0.6); }
.wp-block-button.is-style-on-petrol .wp-block-button__link:active { background: var(--smh-mist); }
/* Text link (A: .tlink): 700, petrol, a hairline that redraws on hover, the arrow. */
.wp-block-button.is-style-text .wp-block-button__link, .smh-tlink {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-block-size: var(--smh-target);
	padding: 6px 0;
	background: none;
	box-shadow: none;
	color: var(--smh-petrol);
	font-weight: 700;
	text-decoration: none;
	overflow: visible;
}
.wp-block-button.is-style-text .wp-block-button__link::before, .smh-tlink::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block: auto 4px;
	z-index: 0;
	height: 1px;
	background: currentColor;
	opacity: .35;
	transform: none;
	transform-origin: right;
	transition: opacity .3s;
}
html:not([dir="rtl"]) :is(.wp-block-button.is-style-text .wp-block-button__link, .smh-tlink)::before { transform-origin: left; }
.wp-block-button.is-style-text .wp-block-button__link::after { inline-size: 18px; block-size: 18px; }
.wp-block-button.is-style-text .wp-block-button__link:hover, .smh-tlink:hover { transform: none; background: none; box-shadow: none; color: var(--smh-petrol-deep); }
.wp-block-button.is-style-text .wp-block-button__link:hover::before, .smh-tlink:hover::before { opacity: 1; animation: smh-uline .7s var(--smh-e-out); }
@keyframes smh-uline { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
/* .smh-tlink set as a core/button className lands on the wrapper too: the link inside carries the look, so the
   wrapper draws no second hairline (integrator 2026-10-01). */
.wp-block-button.smh-tlink { min-block-size: 0; padding: 0; }
.wp-block-button.smh-tlink::before { content: none; }
:where(.smh-cover, .smh-on-petrol, .on-dark) .wp-block-button.is-style-text .wp-block-button__link,
:where(.smh-cover, .smh-on-petrol, .on-dark) .smh-tlink,
:where(.smh-cover, .smh-on-petrol, .on-dark) .wp-block-button.is-style-text .wp-block-button__link:hover,
:where(.smh-cover, .smh-on-petrol, .on-dark) .smh-tlink:hover { color: var(--smh-white); }
@media (max-width: 759px) {
	.wp-block-button__link { min-block-size: 56px; }
}
@media (forced-colors: active) {
	.wp-element-button, .wp-block-button__link, .smh-cta__link { border: 1px solid ButtonText; }
}

/* ---------- 8. WhatsApp tab host contract + A's look (the plugin prints the tab; WHATSAPP-WIDGET.md 10) ---------- */
.smh-wa-lane { padding-block-end: max(var(--smh-wa-lane, 0px), 1.5rem) !important; }
@media (min-width: 1024px) and (max-width: 1359px) {
	[dir="rtl"] .wp-site-blocks > main { --wp--style--root--padding-left: 5rem; }
	html:not([dir="rtl"]) .wp-site-blocks > main { --wp--style--root--padding-right: 5rem; }
}
/* A: a 56 px petrol tile with radius 4 and a soft drop shadow, rising into place once the page is live. Position,
   label reveal and Esc behaviour stay the shipped tab's. The clip insets are widened (not the open/shut logic) so
   the shadow can show around the tile. */
html:root { --smh-wa-size: 56px; }
@media (max-width: 759px) { html:root { --smh-wa-size: 52px; } }
html .smh-wa.smh-wa { --smh-wa-line: transparent; }
html .smh-wa.smh-wa:any-link { border-radius: var(--smh-r-tab); }
html .smh-wa .smh-wa__tile { border-radius: var(--smh-r-tab); box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 16px 34px -12px rgb(8 40 50 / 0.65); }
html .smh-wa .smh-wa__label { font-weight: 700; }
html .smh-wa.smh-wa svg { width: 26px; height: 26px; }
html .smh-wa.smh-wa[dir=rtl] { --smh-wa-shut: inset(-40px calc(100% - var(--smh-wa-size) - 2px) -40px -40px); }
html .smh-wa.smh-wa[dir=ltr] { --smh-wa-shut: inset(-40px -40px -40px calc(100% - var(--smh-wa-size) - 2px)); }
html .smh-wa.smh-wa:focus-visible { --smh-wa-clip: inset(-40px); }
@media (hover: hover) and (pointer: fine) {
	html .smh-wa.smh-wa:hover { --smh-wa-clip: inset(-40px); --smh-wa-fill: var(--smh-petrol-light); }
}
html.js .smh-wa.smh-wa { opacity: 0; transform: translate3d(0, 130%, 0); transition: clip-path var(--smh-wa-dur) var(--smh-wa-ease) var(--smh-wa-wait), transform .9s var(--smh-e-out), opacity .4s; }
html.js.is-live .smh-wa.smh-wa { opacity: 1; transform: none; transition-delay: var(--smh-wa-wait), 1.8s, 1.8s; }

/* ---------- 9. Motion engine: reveals, hero entrance, digit reveal ---------- */
/* Reveal on entering the view: [data-reveal] or .smh-reveal; delay --d (inline) or .smh-d-<n> (n x 0.1 s);
   .smh-stagger / [data-stagger] staggers its children by 80 ms. living.js adds .in. */
.js :is([data-reveal], .smh-reveal) {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
	transition: opacity var(--wp--custom--motion--reveal, 1s) var(--smh-e-out) var(--d, 0s), transform var(--wp--custom--motion--reveal-move, 1.2s) var(--smh-e-out) var(--d, 0s);
}
.js :is([data-reveal], .smh-reveal).in { opacity: 1; transform: none; }
/* The hero's entrance on load (no scroll needed): [data-in] or .smh-in, delay --d. living.js adds html.is-live. */
.js :is([data-in], .smh-in) { opacity: 0; transform: translate3d(0, 26px, 0); }
.js.is-live :is([data-in], .smh-in) { opacity: 1; transform: none; transition: opacity 1.1s var(--smh-e-out) var(--d, 0s), transform 1.3s var(--smh-e-out) var(--d, 0s); }
.smh-d-05 { --d: .05s; } .smh-d-1 { --d: .1s; } .smh-d-2 { --d: .2s; } .smh-d-3 { --d: .3s; } .smh-d-4 { --d: .4s; }
.smh-d-5 { --d: .5s; } .smh-d-6 { --d: .6s; } .smh-d-7 { --d: .7s; } .smh-d-8 { --d: .8s; } .smh-d-9 { --d: .9s; }
.smh-d-10 { --d: 1s; } .smh-d-11 { --d: 1.1s; } .smh-d-12 { --d: 1.2s; } .smh-d-13 { --d: 1.3s; } .smh-d-14 { --d: 1.4s; }
.smh-d-15 { --d: 1.5s; } .smh-d-16 { --d: 1.6s; } .smh-d-17 { --d: 1.7s; }
/* Digit reveal (mockup C's, at Sadeq's request): [data-roll] / .smh-roll. living.js splits the number into
   aria-hidden .dg digits (+ a visually hidden copy) that fade up one after another, 45 ms apart. */
:is([data-roll], .smh-roll) .dg { display: inline-block; opacity: 0; transform: translate3d(0, .35em, 0); transition: opacity .5s, transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--rd, 0s) + var(--i) * var(--wp--custom--motion--roll-step, 45ms)); }
:is([data-roll], .smh-roll).is-on .dg { opacity: 1; transform: none; }
:is([data-roll], .smh-roll).is-done .dg { transition: none; }

/* ---------- 10. The travelling line ([data-rail] / .smh-rail sections; living.js adds .seg, .node, .branch, .pen) ---------- */
:is([data-rail], .smh-rail) { position: relative; }
.seg { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--smh-railx); width: 1px; pointer-events: none; z-index: 1; }
.seg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(101 126 143 / 0), rgb(101 126 143 / .28) 12%, rgb(101 126 143 / .28) 88%, rgb(101 126 143 / 0)); }
.seg i { position: absolute; inset: 0; width: 1px; background: linear-gradient(180deg, rgb(25 100 120 / .2), var(--smh-petrol-light)); transform-origin: top; transform: scaleY(0); will-change: transform; }
:is(.on-dark, .smh-on-petrol) > .seg::before { background: linear-gradient(180deg, rgb(214 236 242 / 0), rgb(214 236 242 / .16) 12%, rgb(214 236 242 / .16) 88%, rgb(214 236 242 / 0)); }
:is(.on-dark, .smh-on-petrol) > .seg i { background: linear-gradient(180deg, rgb(214 236 242 / .1), rgb(214 236 242 / .85)); }
.node { position: absolute; inset-inline-start: calc(var(--smh-railx) - 4px); top: 0; width: 9px; height: 9px; z-index: 2; pointer-events: none; border: 1px solid rgb(101 126 143 / .55); background: var(--smh-white); transition: background .5s, border-color .5s, box-shadow .6s; }
.node.is-on { background: var(--smh-petrol-light); border-color: var(--smh-petrol-light); box-shadow: 0 0 0 5px rgb(25 100 120 / .12); }
:is(.on-dark, .smh-on-petrol) > .node { background: var(--smh-petrol-deep); border-color: rgb(214 236 242 / .4); }
:is(.on-dark, .smh-on-petrol) > .node.is-on { background: var(--smh-white); border-color: var(--smh-white); box-shadow: 0 0 14px 3px rgb(170 220 232 / .55); }
.branch { position: absolute; top: 0; height: 1px; inset-inline-start: calc(var(--smh-railx) + 5px); pointer-events: none; z-index: 1; background: linear-gradient(to left, var(--smh-petrol-light), rgb(25 100 120 / .25)); transform-origin: right; transform: scaleX(0); transition: transform 1s var(--smh-e-out); }
html:not([dir="rtl"]) .branch { transform-origin: left; background: linear-gradient(to right, var(--smh-petrol-light), rgb(25 100 120 / .25)); }
:is(.on-dark, .smh-on-petrol) > .branch { background: linear-gradient(to left, rgb(214 236 242 / .8), rgb(214 236 242 / .15)); }
html:not([dir="rtl"]) :is(.on-dark, .smh-on-petrol) > .branch { background: linear-gradient(to right, rgb(214 236 242 / .8), rgb(214 236 242 / .15)); }
.branch.is-on { transform: scaleX(1); }
.pen { position: fixed; top: 0; left: 0; z-index: 5; width: 7px; height: 7px; margin: -3px 0 0 -3px; pointer-events: none; background: var(--smh-petrol-light); box-shadow: 0 0 0 4px rgb(25 100 120 / .14), 0 0 18px 4px rgb(25 100 120 / .35); opacity: 0; transition: opacity .4s, background .4s, box-shadow .4s; }
.pen.is-on { opacity: 1; }
.pen.is-dark { background: var(--smh-white); box-shadow: 0 0 0 4px rgb(214 236 242 / .16), 0 0 20px 5px rgb(170 220 232 / .6); }
@media (max-width: 759px) { .seg, .node, .branch, .pen { display: none; } } /* phones: the gutter is too narrow for it */

/* Process track ([data-steps] / .smh-steps; living.js injects .steps__track and positions it on the step numbers). */
:is([data-steps], .smh-steps) { position: relative; }
.steps__track { position: absolute; top: 0; height: 1px; width: 0; pointer-events: none; background: repeating-linear-gradient(to left, rgb(101 126 143 / .55) 0 6px, transparent 6px 12px); }
.steps__fill { position: absolute; inset: 0; height: 2px; top: -.5px; background: linear-gradient(to left, var(--smh-petrol), var(--smh-petrol-light)); transform-origin: right; transform: scaleX(0); box-shadow: 0 0 12px rgb(25 100 120 / .45); will-change: transform; }
html:not([dir="rtl"]) .steps__fill { transform-origin: left; background: linear-gradient(to right, var(--smh-petrol), var(--smh-petrol-light)); }
.steps__head { position: absolute; top: 0; inset-inline-start: 0; width: 9px; height: 9px; margin-block-start: -4.5px; margin-inline-start: -4.5px; background: var(--smh-petrol-light); box-shadow: 0 0 0 5px rgb(25 100 120 / .15), 0 0 20px 4px rgb(25 100 120 / .4); will-change: transform; opacity: 0; transition: opacity .4s; }
.is-moving > .steps__track .steps__head { opacity: 1; }
.is-vertical > .steps__track { background: repeating-linear-gradient(to bottom, rgb(101 126 143 / .55) 0 6px, transparent 6px 12px); }
.is-vertical > .steps__track .steps__fill { inset: 0; width: 2px; height: auto; top: 0; inset-inline-start: -.5px; transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, var(--smh-petrol), var(--smh-petrol-light)); }

/* ---------- 11. The living network background (.smh-live--hero / --contact / --band on a section; living.js
   injects .smh-live with its canvases). The host's own background is the lit petrol ground, so the section is
   right before (and without) the script. Do not combine with .smh-net on the same element. ---------- */
:is(.smh-live--hero, .smh-live--contact, .smh-live--band) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--smh-white);
	background-color: var(--smh-petrol-deep);
	background-image: radial-gradient(62% 80% at 26% 46%, rgb(44 132 156 / .42) 0%, rgb(30 110 132 / .16) 42%, rgb(25 100 120 / 0) 72%), var(--smh-grad-cover);
}
html:not([dir="rtl"]) .smh-live--hero { background-image: radial-gradient(62% 80% at 74% 46%, rgb(44 132 156 / .42) 0%, rgb(30 110 132 / .16) 42%, rgb(25 100 120 / 0) 72%), var(--smh-grad-cover); }
.smh-live--contact { background-image: radial-gradient(55% 70% at 72% 40%, rgb(44 132 156 / .32) 0%, rgb(25 100 120 / 0) 70%), var(--smh-grad-cover); }
html:not([dir="rtl"]) .smh-live--contact { background-image: radial-gradient(55% 70% at 28% 40%, rgb(44 132 156 / .32) 0%, rgb(25 100 120 / 0) 70%), var(--smh-grad-cover); }
.smh-live--band { background-image: radial-gradient(60% 90% at 22% 40%, rgb(44 132 156 / .34) 0%, rgb(25 100 120 / 0) 70%), var(--smh-grad-cover); }
html:not([dir="rtl"]) .smh-live--band { background-image: radial-gradient(60% 90% at 78% 40%, rgb(44 132 156 / .34) 0%, rgb(25 100 120 / 0) 70%), var(--smh-grad-cover); }
.smh-live { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Injected engine elements sit outside the host's layout flow (core's constrained/flow margins never apply). */
html .smh-live, html .seg, html .node, html .branch, html .steps__track { margin: 0 !important; max-width: none !important; }
.smh-live > * { position: absolute; inset: 0; }
.smh-live__layer { will-change: transform; }
.smh-live__layer canvas { position: absolute; left: -70px; top: -70px; width: calc(100% + 140px); height: calc(100% + 140px); display: block; }
.smh-live__grid { position: absolute; inset: -70px; background-image: radial-gradient(rgb(214 236 242 / .5) .9px, transparent 1.35px); background-size: 30px 30px; background-position: 15px 15px; opacity: .22;
	-webkit-mask-image: radial-gradient(34% 46% at 30% 49%, #000 0%, rgb(0 0 0 / .35) 55%, transparent 100%); mask-image: radial-gradient(34% 46% at 30% 49%, #000 0%, rgb(0 0 0 / .35) 55%, transparent 100%); }
html:not([dir="rtl"]) .smh-live__grid { -webkit-mask-image: radial-gradient(34% 46% at 70% 49%, #000 0%, rgb(0 0 0 / .35) 55%, transparent 100%); mask-image: radial-gradient(34% 46% at 70% 49%, #000 0%, rgb(0 0 0 / .35) 55%, transparent 100%); }
.smh-live__bloom { left: 0; top: 0; right: auto; bottom: auto; width: 1200px; height: 1200px; margin: -600px 0 0 -600px; border-radius: 50%; background: radial-gradient(closest-side, rgb(140 205 222 / .17), rgb(120 190 210 / .06) 52%, rgb(120 190 210 / 0)); will-change: transform; }
.smh-live__shade { background: radial-gradient(120% 95% at 40% 42%, rgb(6 34 43 / 0) 46%, rgb(6 34 43 / .62) 100%), linear-gradient(180deg, rgb(6 34 43 / .35) 0%, rgb(6 34 43 / 0) 22%, rgb(6 34 43 / 0) 62%, rgb(6 30 38 / .55) 100%); }
.smh-live--contact .smh-live__shade, .smh-live--band .smh-live__shade { background: radial-gradient(120% 100% at 50% 50%, rgb(6 34 43 / 0) 45%, rgb(6 34 43 / .5) 100%); }
.smh-live__shade2 { background: linear-gradient(270deg, rgb(7 38 48 / .52) 0%, rgb(7 38 48 / .18) 42%, rgb(7 38 48 / 0) 60%); }
html:not([dir="rtl"]) .smh-live__shade2 { background: linear-gradient(90deg, rgb(7 38 48 / .52) 0%, rgb(7 38 48 / .18) 42%, rgb(7 38 48 / 0) 60%); }
.smh-live__grain { background-image: var(--smh-grain, none); background-repeat: repeat; opacity: .5; }
.smh-live__geo { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; white-space: nowrap; direction: ltr; opacity: 0; transition: opacity 1.2s var(--smh-e-std) 1.9s; }
.is-live .smh-live__geo { opacity: 1; }
.smh-live__geo i { display: block; width: 64px; height: 1px; background: linear-gradient(90deg, rgb(214 236 242 / .75), rgb(214 236 242 / 0)); }
.smh-live__geo span { font-size: 11px; font-weight: 500; letter-spacing: .2em; line-height: 1.7; color: rgb(214 236 242 / .62); text-transform: uppercase; }
.smh-live__geo b { display: block; font-weight: 500; color: rgb(236 246 249 / .86); }
.smh-live .smh-live__layer, .smh-live .smh-live__grid { opacity: 0; transition: opacity 1.8s var(--smh-e-std); }
.is-live .smh-live .smh-live__layer { opacity: 1; }
.is-live .smh-live .smh-live__grid { opacity: .22; transition-delay: .5s; }
.smh-lowpower .smh-live__bloom, .smh-lowpower .smh-live__grain, .smh-lowpower .smh-live__geo { display: none; }
@media (max-width: 759px) { .smh-live__geo { display: none; } }

/* Hover light inside a card ([data-light] / .smh-light: living.js writes --mx / --my on pointer move). */
.smh-light-spot { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 0%), rgb(25 100 120 / .085), transparent 62%); opacity: 0; transition: opacity .5s var(--smh-e-std); }
:is([data-light], .smh-light):hover > .smh-light-spot { opacity: 1; }

/* ---------- 11b. Low-power mode (html.smh-lowpower, set by living.js on small screens, few cores, little memory,
   Save-Data or slow frames): shorter, shorter-travel reveals, and the titles fade between the brackets instead of
   a clip-path reveal (clip-path is painted on the main thread in Chromium 114, not composited). ---------- */
/* Low-power: content blocks are simply there (no fade-and-rise). Measured on an emulated mid-range phone
   (tools/qa/scroll-perf.mjs, 390 px, CPU x4): with the reveals running, the services band scrolled at 6-15 main-thread
   frames a second; with them off, at ~55 (integrator 2026-10-01). The brackets, the digit reveal, the hero entrance and
   the networks keep moving. */
.js.smh-lowpower :is([data-reveal], .smh-reveal) { opacity: 1; transform: none; transition: none; }
.js.smh-lowpower .smh-frame:not(.smh-frame--static) > :is(h1, h2) { clip-path: none; opacity: 0; transition: opacity .7s var(--smh-e-std) .35s; }
.js.smh-lowpower .smh-frame.is-open > :is(h1, h2) { animation: none; opacity: 1; }
.js.smh-lowpower .smh-frame .ln > span { transform: none; opacity: 1; transition: none; }
/* Low-power: the contact / band networks do not parallax (no far plane), so their canvases need no layer of their own;
   a promoted full-band canvas also promoted everything drawn over it (overlap), and those layers were re-layerized every
   frame while scrolling (integrator 2026-10-01, tools/qa/scroll-perf.mjs). */
html.smh-lowpower :is(.smh-live--contact, .smh-live--band) .smh-live__layer { will-change: auto; }

/* ---------- 12. Reduced motion and the "still" view: the same layers, drawn once and held (living.js adds .rm) ---------- */
.rm *, .rm *::before, .rm *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
.rm :is([data-reveal], .smh-reveal, [data-in], .smh-in) { opacity: 1 !important; transform: none !important; }
.rm .js-still { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
	:is([data-reveal], .smh-reveal, [data-in], .smh-in) { opacity: 1 !important; transform: none !important; }
}

/* ---------- 13. Print ---------- */
@media print {
	.smh-wa, .smh-wa-note, .smh-no-print, .wp-block-navigation, .smh-lang-switch, .pen, .seg, .node, .branch, .smh-live { display: none !important; }
	.smh-header { position: static !important; }
	.smh-cover, .smh-on-petrol, :is(.smh-live--hero, .smh-live--contact, .smh-live--band) { background: none !important; color: #000 !important; }
	.smh-cover *, .smh-on-petrol * { color: #000 !important; }
	.smh-net::before, .smh-ghost::after { display: none !important; }
	:is([data-reveal], .smh-reveal, [data-in], .smh-in) { opacity: 1 !important; transform: none !important; }
	.smh-frame > :is(h1, h2) { clip-path: none !important; }
	a { color: #000; }
}