/* ==========================================================================
   STM Legal — main stylesheet
   --------------------------------------------------------------------------
   Design notes
   ------------
   The palette is taken from the STM Legal mark: teal #169ba0 on white, with a
   stroke that drops below the tile holding it. That gesture — a stroke that
   breaks its own frame — is the theme's single decorative motif. It appears as
   `.stm-stem`: a hairline that overhangs the block it belongs to. It is used on
   section headings and on cards, and nowhere else.

   The dark grounds are the logo's own hue driven down in lightness rather than
   a generic navy, so the mark sits inside the page instead of on top of it.

   Every colour and both font stacks arrive as custom properties written by
   inc/enqueue.php from the settings screen, so this file never hard-codes a
   brand value it cannot be overridden on.

   Logical properties (inline-start / inline-end) are used throughout, which is
   what lets one stylesheet serve both RTL and LTR. rtl.css only carries the few
   cases logical properties cannot express.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Accents — shared by both schemes. Overridden by inc/enqueue.php. */
	--stm-teal: #169ba0;
	--stm-gold: #d97706;

	/* Light scheme (default). */
	--stm-bg: #ffffff;
	--stm-bg-soft: #f4f8f8;
	--stm-card: #ffffff;
	--stm-ink: #0e2f34;
	--stm-heading: #0e2f34;
	--stm-body: #5b6f73;
	--stm-border: #e2ebec;

	--stm-font-display: "Manrope", system-ui, sans-serif;
	--stm-font-body: "Inter", system-ui, sans-serif;

	/* Derived */
	--stm-teal-deep: color-mix(in srgb, var(--stm-teal) 78%, #06181d);
	--stm-teal-soft: color-mix(in srgb, var(--stm-teal) 10%, transparent);
	--stm-gold-soft: color-mix(in srgb, var(--stm-gold) 14%, transparent);
	--stm-line: var(--stm-border);
	--stm-line-strong: color-mix(in srgb, var(--stm-teal) 38%, transparent);
	--stm-ink-on-teal: #ffffff;
	--stm-shadow: 0 1px 2px rgba(14, 47, 52, .05), 0 12px 32px -18px rgba(14, 47, 52, .28);
	--stm-shadow-lg: 0 24px 60px -28px rgba(14, 47, 52, .35);

	/* Legacy aliases kept so no rule silently loses its colour. */
	--stm-navy: var(--stm-bg);
	--stm-navy-soft: var(--stm-bg-soft);
	--stm-surface: var(--stm-card);
	--stm-paper: var(--stm-ink);
	--stm-muted: var(--stm-body);
	--stm-teal-bright: var(--stm-teal-deep);
	--stm-teal-dim: var(--stm-teal-soft);

	/* Spacing — a 4px base with a slow ramp, so the rhythm reads calm. */
	--stm-s1: 0.25rem;
	--stm-s2: 0.5rem;
	--stm-s3: 0.75rem;
	--stm-s4: 1rem;
	--stm-s5: 1.5rem;
	--stm-s6: 2rem;
	--stm-s7: 3rem;
	--stm-s8: 4rem;
	--stm-s9: 6rem;
	--stm-s10: 8rem;

	--stm-radius: 6px;
	--stm-radius-lg: 14px;

	--stm-container: 76rem;
	--stm-measure: 40rem;

	--stm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--stm-fast: 160ms;
	--stm-slow: 420ms;

	--stm-header-h: 80px;
}

/* Dark scheme. inc/enqueue.php writes the grounds; these are the derived
   values that cannot simply be inverted. */
[data-scheme="dark"] {
	--stm-teal-deep: color-mix(in srgb, var(--stm-teal) 72%, white);
	--stm-teal-soft: color-mix(in srgb, var(--stm-teal) 18%, transparent);
	--stm-gold-soft: color-mix(in srgb, var(--stm-gold) 18%, transparent);
	--stm-line-strong: color-mix(in srgb, var(--stm-teal) 45%, transparent);
	--stm-ink-on-teal: #04171a;
	--stm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -20px rgba(0, 0, 0, .8);
	--stm-shadow-lg: 0 26px 60px -22px rgba(0, 0, 0, .9);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--stm-teal-deep: #0f767a;
		--stm-teal-soft: rgba(22, 155, 160, .1);
		--stm-gold-soft: rgba(201, 162, 39, .14);
		--stm-line-strong: rgba(22, 155, 160, .38);
	}

	[data-scheme="dark"] {
		--stm-teal-deep: #4cc3c7;
		--stm-teal-soft: rgba(22, 155, 160, .18);
	}
}

/* The scheme change itself is animated once, not on every hover. */
html[data-scheme] body,
html[data-scheme] .stm-header,
html[data-scheme] .stm-card,
html[data-scheme] .stm-footer {
	transition: background-color var(--stm-slow) var(--stm-ease), color var(--stm-slow) var(--stm-ease), border-color var(--stm-slow) var(--stm-ease);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--stm-header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background: var(--stm-bg);
	color: var(--stm-ink);
	font-family: var(--stm-font-body);
	font-size: 1.0625rem;
	line-height: 1.8;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

a {
	color: var(--stm-teal-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--stm-fast) var(--stm-ease);
}

a:hover {
	color: var(--stm-ink);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--stm-teal-deep);
	outline-offset: 3px;
	border-radius: 2px;
}

hr {
	border: 0;
	border-block-start: 1px solid var(--stm-line);
	margin-block: var(--stm-s6);
}

::selection {
	background: var(--stm-teal);
	color: var(--stm-ink-on-teal);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--stm-font-display);
	overflow-wrap: break-word;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--stm-heading, var(--stm-ink));
	margin-block: 0 var(--stm-s4);
	text-wrap: balance;
	/* No inherited opacity, ever: headings are the one thing that must never
	   read as faded against the page. */
	opacity: 1;
}

/*
 * Arabic headings.
 *
 * The display face is calligraphic and sets optically smaller than Latin at the
 * same point size, so it is scaled up and set at its heaviest weight. It is a
 * colour font — it supplies its own ink and will not take a CSS `color` — so
 * legibility here is a matter of size and weight, plus enough leading for the
 * descenders and enough line spacing that the strokes never collide.
 */
.stm-lang-ar h1,
.stm-lang-ar h2,
.stm-lang-ar h3,
.stm-lang-ar h4,
.stm-lang-ur h1,
.stm-lang-ur h2,
.stm-lang-ur h3,
.stm-lang-ur h4 {
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.stm-lang-ar h1 { font-size: clamp(2.15rem, 1.4rem + 3.4vw, 4.6rem); line-height: 1.5; }
.stm-lang-ar h2:not(.stm-founder__name--script) { font-size: clamp(1.8rem, 1.35rem + 2.1vw, 3.25rem); line-height: 1.55; }
.stm-lang-ar h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
.stm-lang-ar h4 { font-size: 1.4rem; }

/* Urdu uses Nastaliq, which needs still more room between lines. */
.stm-lang-ur h1,
.stm-lang-ur h2,
.stm-lang-ur h3 {
	line-height: 2;
}

h1 { font-size: clamp(2.4rem, 1.7rem + 3.1vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 1.45rem + 1.8vw, 2.8rem); }
h3 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); }
h4 { font-size: 1.2rem; }

p {
	margin-block: 0 var(--stm-s4);
}

p:last-child {
	margin-block-end: 0;
}

strong, b {
	font-weight: 700;
	color: var(--stm-ink);
}

blockquote {
	margin: var(--stm-s6) 0;
	padding-inline-start: var(--stm-s5);
	border-inline-start: 2px solid var(--stm-teal);
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--stm-ink);
}

code, pre, kbd {
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 0.9em;
}

code {
	background: color-mix(in srgb, var(--stm-ink) 8%, transparent);
	padding: 0.15em 0.4em;
	border-radius: 3px;
}

pre {
	background: var(--stm-bg-soft);
	border: 1px solid var(--stm-line);
	padding: var(--stm-s4);
	border-radius: var(--stm-radius);
	overflow-x: auto;
}

/* Numbers, phone numbers and Latin fragments inside RTL text. */
bdi,
.stm-ltr {
	unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.stm-container {
	width: min(100% - 2.5rem, var(--stm-container));
	margin-inline: auto;
}

@media (min-width: 48em) {
	.stm-container {
		width: min(100% - 5rem, var(--stm-container));
	}
}

.stm-section {
	padding-block: clamp(3rem, 1.8rem + 5vw, var(--stm-s8));
	position: relative;
}

.stm-section--tight {
	padding-block: clamp(2.25rem, 1.4rem + 3vw, var(--stm-s6));
}

.stm-section--soft {
	background: var(--stm-bg-soft);
}

.stm-section--surface {
	background: var(--stm-card);
}

/* A hairline that separates stacked sections without a heavy border. */
.stm-section + .stm-section::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 1px;
	background: linear-gradient(
		to var(--stm-grad-dir, right),
		transparent,
		var(--stm-line) 22%,
		var(--stm-line) 78%,
		transparent
	);
}

.stm-grid {
	display: grid;
	gap: var(--stm-s5);
}

@media (min-width: 40em) {
	.stm-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62em) {
	.stm-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.stm-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 40em) and (max-width: 61.99em) {
	.stm-grid--3,
	.stm-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.stm-measure {
	max-width: var(--stm-measure);
}

/* --------------------------------------------------------------------------
   5. The signature motif — a stroke that breaks its frame
   -------------------------------------------------------------------------- */

.stm-stem,
.stm-seal-rule {
	display: block;
	width: 1px;
	height: 2.75rem;
	margin-block: var(--stm-s4) 0;
	background: linear-gradient(
		to bottom,
		var(--stm-teal) 0%,
		var(--stm-teal) 62%,
		var(--stm-gold) 62%,
		var(--stm-gold) 100%
	);
	position: relative;
}

.stm-heading--center .stm-stem,
.stm-heading--center .stm-seal-rule {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   6. Section headings
   -------------------------------------------------------------------------- */

.stm-heading {
	margin-block-end: var(--stm-s7);
}

.stm-heading--center {
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
}

/*
 * The section eyebrow. It sets the subject of the block, so it is sized and
 * spaced to read as part of the heading pair rather than as a stray caption —
 * and it is amber-orange rather than the earlier yellow, which went pale
 * against a white ground and looked accidental.
 */
.stm-heading__eyebrow {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--stm-gold);
	margin-block-end: var(--stm-s3);
	line-height: 1.4;
}

/* Arabic and Urdu do not have upper case, and letter-spacing breaks their
   joins outright, so both are dropped and the size raised instead. */
.stm-lang-ar .stm-heading__eyebrow,
.stm-lang-ur .stm-heading__eyebrow {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.1rem;
}

.stm-heading__title {
	margin-block-end: 0;
	color: var(--stm-teal-deep);
}

[data-scheme="dark"] .stm-heading__title {
	color: var(--stm-ink);
}

.stm-heading__lead {
	margin-block-start: var(--stm-s5);
	color: var(--stm-body);
	font-size: 1.15rem;
	line-height: 1.9;
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.stm-btn {
	--btn-bg: var(--stm-teal);
	--btn-fg: var(--stm-ink-on-teal);
	--btn-border: var(--stm-teal);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--stm-s2);
	padding: 0.85rem 1.75rem;
	min-height: 48px;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-border);
	border-radius: var(--stm-radius);
	font-family: var(--stm-font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--stm-fast) var(--stm-ease),
		color var(--stm-fast) var(--stm-ease),
		border-color var(--stm-fast) var(--stm-ease),
		transform var(--stm-fast) var(--stm-ease);
}

.stm-btn:hover {
	--btn-bg: var(--stm-teal-deep);
	--btn-border: var(--stm-teal-deep);
	color: var(--stm-ink-on-teal);
	transform: translateY(-1px);
}

.stm-btn:active {
	transform: translateY(0);
}

.stm-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--stm-ink);
	--btn-border: var(--stm-line-strong);
}

.stm-btn--ghost:hover {
	--btn-bg: color-mix(in srgb, var(--stm-teal) 16%, transparent);
	--btn-border: var(--stm-teal);
	color: var(--stm-ink);
}

.stm-btn--quiet {
	--btn-bg: transparent;
	--btn-fg: var(--stm-teal-deep);
	--btn-border: transparent;
	padding-inline: 0;
	min-height: 0;
}

.stm-btn--quiet:hover {
	--btn-bg: transparent;
	color: var(--stm-ink);
	transform: none;
}

.stm-btn__arrow {
	inline-size: 1.5rem;
	block-size: 1px;
	background: currentColor;
	transition: inline-size var(--stm-fast) var(--stm-ease);
}

.stm-btn--quiet:hover .stm-btn__arrow {
	inline-size: 2.25rem;
}

.stm-btn--whatsapp {
	--btn-bg: #1faa54;
	--btn-fg: #ffffff;
	--btn-border: #1faa54;
}

.stm-btn--whatsapp:hover {
	--btn-bg: #24c463;
	--btn-border: #24c463;
	color: #ffffff;
}

.stm-btn--whatsapp .stm-social-icon {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

.stm-btn[aria-disabled="true"],
.stm-btn:disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. Icons
   -------------------------------------------------------------------------- */

.stm-icon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	flex: none;
}

.stm-social-icon {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	flex: none;
}

/* Arrows must mirror in RTL — a "next" arrow points the way reading goes. */
.stm-dir-rtl .stm-btn__arrow {
	transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */

.stm-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--stm-bg) 92%, transparent);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	border-block-end: 1px solid var(--stm-border);
	transition: background var(--stm-fast) var(--stm-ease);
}

.stm-header.is-scrolled {
	background: color-mix(in srgb, var(--stm-bg) 98%, transparent);
	box-shadow: var(--stm-shadow);
}

.stm-header__bar {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--stm-s4);
	min-height: var(--stm-header-h);
}

@media (min-width: 78em) {
	.stm-header__bar {
		gap: var(--stm-s5);
	}
}

.stm-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--stm-s3);
	text-decoration: none;
	flex: none;
}

.stm-logo__img {
	block-size: 36px;
	inline-size: auto;
}

.stm-logo__tagline {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stm-body);
	border-inline-start: 1px solid var(--stm-line);
	padding-inline-start: var(--stm-s3);
}

.stm-header__nav {
	margin-inline-start: auto;
	display: none;
}

/*
 * Whether the horizontal nav can be shown is a question of measurement, not of
 * viewport width. "Contact" is 7 characters in English and "Makipag-ugnayan" is
 * 15; a breakpoint tuned on one language collides on another — which is exactly
 * what happened in Tagalog and Tamil, where the menu ran under the language
 * button and the call to action.
 *
 * So main.js measures the real width of the row and adds .stm-header--roomy
 * only when everything genuinely fits. Until it says so, the burger stands.
 */
@media (min-width: 62em) {
	.js .stm-header--roomy .stm-header__nav {
		display: block;
		min-inline-size: 0;
	}

	.js .stm-header--roomy .stm-burger {
		display: none;
	}
}

/*
 * Without JavaScript there is nothing to measure, so a conservative breakpoint
 * takes over: wide enough that even the longest translations fit. The drawer
 * still works without JS being required to reach the menu at all.
 */
@media (min-width: 84em) {
	html:not(.js) .stm-header__nav {
		display: block;
		min-inline-size: 0;
	}

	html:not(.js) .stm-burger {
		display: none;
	}

	html:not(.js) .stm-header__actions {
		margin-inline-start: 0;
	}

	html:not(.js) .stm-header__cta {
		display: inline-flex;
		white-space: nowrap;
	}
}

/* Measured off-screen before the decision is made, so nothing flashes. */
.stm-header--measuring .stm-header__nav {
	display: block;
	position: absolute;
	visibility: hidden;
	pointer-events: none;
}

.stm-header__actions {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: var(--stm-s3);
}

@media (min-width: 62em) {
	.js .stm-header--roomy .stm-header__actions {
		margin-inline-start: 0;
	}
}

.stm-header__actions {
	flex: none;
}

.stm-header__cta {
	display: none;
}

@media (min-width: 62em) {
	.js .stm-header--roomy .stm-header__cta {
		display: inline-flex;
		white-space: nowrap;
	}

	/* Stage two: the menu stays, the button steps aside. */
	.js .stm-header--no-cta .stm-header__cta {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   10. Primary menu
   -------------------------------------------------------------------------- */

.stm-menu {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.stm-menu__item {
	position: relative;
}

.stm-menu__link {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 0.7rem;
	color: var(--stm-ink);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
	border-radius: var(--stm-radius);
	white-space: nowrap;
	transition: color var(--stm-fast) var(--stm-ease);
}

/* The stem again: the active item carries a short overhanging stroke. */
.stm-menu__link > span {
	position: relative;
	padding-block-end: 2px;
}

.stm-menu__link > span::after {
	content: "";
	position: absolute;
	inset-block-end: -2px;
	inset-inline-start: 0;
	inline-size: 0;
	block-size: 1px;
	background: var(--stm-teal);
	transition: inline-size var(--stm-slow) var(--stm-ease);
}

.stm-menu__link:hover > span::after,
.stm-menu__item.is-current > .stm-menu__link > span::after {
	inline-size: 100%;
}

.stm-menu__item.is-current > .stm-menu__link {
	color: var(--stm-teal-deep);
}

.stm-menu__toggle {
	background: none;
	border: 0;
	padding: 0.4rem;
	cursor: pointer;
	color: var(--stm-body);
	display: inline-flex;
	border-radius: var(--stm-radius);
}

.stm-menu__toggle .stm-icon {
	inline-size: 1rem;
	block-size: 1rem;
	transition: transform var(--stm-fast) var(--stm-ease);
}

.stm-menu__toggle[aria-expanded="true"] .stm-icon {
	transform: rotate(180deg);
}

.stm-menu__item--parent > .stm-menu__link {
	padding-inline-end: 0.25rem;
}

.stm-menu__sub {
	list-style: none;
	margin: 0;
	padding: var(--stm-s2);
	position: absolute;
	inset-block-start: calc(100% + 0.5rem);
	inset-inline-start: 0;
	min-inline-size: 15rem;
	background: var(--stm-card);
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius-lg);
	box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.85);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--stm-fast) var(--stm-ease),
		transform var(--stm-fast) var(--stm-ease),
		visibility var(--stm-fast);
	z-index: 5;
}

.stm-menu__item--parent:hover > .stm-menu__sub,
.stm-menu__item--parent:focus-within > .stm-menu__sub,
.stm-menu__toggle[aria-expanded="true"] + .stm-menu__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.stm-menu__sub .stm-menu__link {
	display: block;
	inline-size: 100%;
	padding: 0.6rem 0.75rem;
	font-size: 0.92rem;
}

.stm-menu__sub .stm-menu__link:hover {
	background: color-mix(in srgb, var(--stm-teal) 14%, transparent);
	color: var(--stm-teal-deep);
}

/* --------------------------------------------------------------------------
   11. Mobile drawer
   -------------------------------------------------------------------------- */

.stm-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	background: none;
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius);
	color: var(--stm-ink);
	cursor: pointer;
}

/* Hidden only once the header has measured itself as roomy — see main.js. */

.stm-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: 1fr min(88%, 24rem);
	visibility: hidden;
	pointer-events: none;
}

.stm-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.stm-drawer__scrim {
	background: rgba(3, 12, 15, 0.72);
	opacity: 0;
	transition: opacity var(--stm-slow) var(--stm-ease);
	border: 0;
	cursor: pointer;
}

.stm-drawer.is-open .stm-drawer__scrim {
	opacity: 1;
}

.stm-drawer__panel {
	background: var(--stm-bg-soft);
	border-inline-start: 1px solid var(--stm-line);
	padding: var(--stm-s5);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--stm-slow) var(--stm-ease);
	display: flex;
	flex-direction: column;
	gap: var(--stm-s5);
}

.stm-dir-rtl .stm-drawer__panel {
	transform: translateX(-100%);
}

.stm-drawer.is-open .stm-drawer__panel {
	transform: translateX(0);
}

.stm-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--stm-s4);
	padding-block-end: var(--stm-s4);
	border-block-end: 1px solid var(--stm-line);
}

.stm-drawer__close {
	inline-size: 44px;
	block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius);
	color: var(--stm-ink);
	cursor: pointer;
}

.stm-drawer .stm-menu {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.stm-drawer .stm-menu__item {
	border-block-end: 1px solid var(--stm-line);
}

.stm-drawer .stm-menu__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.stm-drawer .stm-menu__link {
	flex: 1;
	padding: 0.95rem 0;
	font-size: 1.02rem;
}

.stm-drawer .stm-menu__sub {
	position: static;
	inline-size: 100%;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	background: transparent;
	padding: 0 0 var(--stm-s3);
	display: none;
}

.stm-drawer .stm-menu__toggle[aria-expanded="true"] + .stm-menu__sub {
	display: block;
}

.stm-drawer .stm-menu__sub .stm-menu__link {
	padding-inline-start: var(--stm-s4);
	color: var(--stm-body);
}

.stm-drawer__foot {
	margin-block-start: auto;
	display: grid;
	gap: var(--stm-s3);
}

body.stm-locked {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   12. Language switcher + colour-scheme toggle
   --------------------------------------------------------------------------
   Every row is laid out identically — flag, then name, then the check — and
   the whole list follows the *page* direction. Letting each row inherit its own
   script direction is what made the previous version look ragged: Arabic and
   Urdu jumped to the opposite edge while the rest stayed put. The `lang`
   attribute is still on each row, so shaping and font selection stay correct;
   only the alignment is normalised.
   -------------------------------------------------------------------------- */

.stm-lang {
	position: relative;
}

.stm-lang__button,
.stm-scheme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--stm-s2);
	min-height: 44px;
	padding: 0.5rem 0.8rem;
	background: var(--stm-bg);
	border: 1px solid var(--stm-border);
	border-radius: var(--stm-radius);
	color: var(--stm-ink);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--stm-fast) var(--stm-ease), background var(--stm-fast) var(--stm-ease);
}

.stm-lang__button:hover,
.stm-scheme:hover {
	border-color: var(--stm-teal);
	background: var(--stm-teal-soft);
}

.stm-scheme {
	inline-size: 44px;
	padding: 0;
}

.stm-scheme__sun { display: none; }
.stm-scheme__moon { display: block; }

[data-scheme="dark"] .stm-scheme__sun { display: block; }
[data-scheme="dark"] .stm-scheme__moon { display: none; }

.stm-lang__flag {
	font-size: 1.15rem;
	line-height: 1;
	flex: none;
}

.stm-lang__code {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8rem;
}

.stm-lang__chevron {
	inline-size: 0.9rem;
	block-size: 0.9rem;
	color: var(--stm-body);
	transition: transform var(--stm-fast) var(--stm-ease);
}

.stm-lang__button[aria-expanded="true"] .stm-lang__chevron {
	transform: rotate(180deg);
}

/* ---- Panel ------------------------------------------------------------- */

.stm-lang__panel {
	position: absolute;
	inset-block-start: calc(100% + 0.6rem);
	inset-inline-end: 0;
	inline-size: 34rem;
	max-inline-size: calc(100vw - 2rem);
	background: var(--stm-card);
	border: 1px solid var(--stm-border);
	border-radius: var(--stm-radius-lg);
	box-shadow: var(--stm-shadow-lg);
	padding: var(--stm-s4);
	z-index: 70;
	display: none;
}

.stm-lang__panel.is-open {
	display: block;
}

.stm-lang__head {
	margin-block-end: var(--stm-s3);
	padding-block-end: var(--stm-s3);
	border-block-end: 1px solid var(--stm-border);
}

.stm-lang__title {
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stm-body);
	margin: 0;
	font-weight: 700;
}

.stm-lang-ar .stm-lang__title,
.stm-lang-ur .stm-lang__title {
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.95rem;
}

.stm-lang__count {
	font-size: 0.78rem;
	color: var(--stm-body);
	white-space: nowrap;
}

.stm-lang__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
}

@media (min-width: 56em) {
	.stm-lang__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.stm-lang__link {
	display: flex;
	align-items: center;
	gap: var(--stm-s3);
	inline-size: 100%;
	padding: 0.65rem 0.7rem;
	border-radius: var(--stm-radius);
	text-decoration: none;
	color: var(--stm-ink);
	font-size: 0.98rem;
	line-height: 1.3;
	/* Normalise alignment regardless of the row's own script direction. */
	text-align: start;
	transition: background var(--stm-fast) var(--stm-ease);
}

.stm-lang__link:hover {
	background: var(--stm-teal-soft);
	color: var(--stm-ink);
}

.stm-lang__link[aria-current="true"] {
	background: var(--stm-teal-soft);
	color: var(--stm-teal-deep);
	font-weight: 700;
}

.stm-lang__native {
	flex: 1;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Isolate so an Arabic name inside an LTR row cannot drag the row over. */
	unicode-bidi: isolate;
	text-align: start;
}

.stm-lang__check {
	inline-size: 1rem;
	block-size: 1rem;
	flex: none;
	color: var(--stm-teal-deep);
}

.stm-lang__note {
	margin-block: var(--stm-s3) 0;
	padding-block-start: var(--stm-s3);
	border-block-start: 1px solid var(--stm-border);
	font-size: 0.82rem;
	color: var(--stm-body);
	line-height: 1.6;
}

/* ---- Phones: a bottom sheet, which is far easier to hit than a dropdown --
   --------------------------------------------------------------------------
   The header must drop its backdrop-filter at this width. A filtered element
   becomes the containing block for any position:fixed descendant, so with the
   blur active the sheet anchored itself to the 80px-tall header instead of the
   viewport and rendered as a clipped strip under the toolbar. Dropping the blur
   on phones fixes it outright — and the blur was costing paint time there for
   an effect nobody can see on a small screen anyway.
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.stm-header {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: var(--stm-bg);
	}

	.stm-lang__panel {
		position: fixed;
		inset-block-start: auto;
		inset-block-end: 0;
		inset-inline: 0;
		inline-size: 100%;
		max-inline-size: 100%;
		max-block-size: 78vh;
		overflow-y: auto;
		border-radius: var(--stm-radius-lg) var(--stm-radius-lg) 0 0;
		border-inline: 0;
		border-block-end: 0;
		padding: var(--stm-s5) var(--stm-s4) calc(var(--stm-s5) + env(safe-area-inset-bottom, 0));
		z-index: 96;
	}

	.stm-lang__panel.is-open {
		display: block;
		animation: stm-sheet-in var(--stm-slow) var(--stm-ease);
	}

	/*
	 * The scrim is drawn as an outward box-shadow rather than a ::before.
	 * The panel is a stacking context, so a negative-z-index child paints on top
	 * of the panel's own background and washed the sheet out to grey; a spread
	 * shadow only ever paints outside the border box, which is exactly right.
	 */
	.stm-lang__panel.is-open {
		box-shadow: 0 0 0 100vmax rgba(6, 24, 29, .55);
	}

	.stm-lang__list {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.stm-lang__link {
		padding: 0.85rem 0.6rem;
		border-block-end: 1px solid var(--stm-border);
		border-radius: 0;
		font-size: 1.02rem;
	}

	.stm-lang__list li:last-child .stm-lang__link {
		border-block-end: 0;
	}
}

@keyframes stm-sheet-in {
	from { transform: translateY(14px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

/* --------------------------------------------------------------------------
   13. Hero
   -------------------------------------------------------------------------- */

.stm-hero {
	position: relative;
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
	overflow: hidden;
	isolation: isolate;
}

.stm-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	object-fit: cover;
	inline-size: 100%;
	block-size: 100%;
	opacity: 0.28;
}

/* The default backdrop is drawn, not photographed: a field of fine vertical
   strokes, most of them clipped, one of them running past the edge. */
.stm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	background-image:
		radial-gradient(90% 70% at 50% 0%, var(--stm-teal-soft) 0%, transparent 70%),
		repeating-linear-gradient(
			90deg,
			transparent 0 63px,
			var(--stm-border) 63px 64px
		);
	mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
	opacity: .9;
}

/*
 * The dotted teal grid the previous site used, kept as a quiet echo.
 *
 * It is sized to the gutter rather than given a fixed width, so it can never
 * reach under the text column — at 1440px the old fixed 7rem block started
 * outside the container and ended inside it, printing dots straight through the
 * headline. Below 82em there is no gutter worth the name, so it is hidden.
 */
.stm-hero::after {
	content: "";
	position: absolute;
	inset-block: 14%;
	inset-inline-start: 1.5rem;
	inline-size: max(0px, calc((100vw - var(--stm-container)) / 2 - 3rem));
	background-image: radial-gradient(var(--stm-teal) 1.4px, transparent 1.4px);
	background-size: 18px 18px;
	opacity: .2;
	z-index: -1;
	pointer-events: none;
}

@media (max-width: 82em) {
	.stm-hero::after { display: none; }
}

.stm-hero__inner {
	max-width: 46rem;
}

.stm-hero--center .stm-hero__inner {
	margin-inline: auto;
	text-align: center;
}

.stm-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--stm-s2);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stm-teal-deep);
	margin-block-end: var(--stm-s4);
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--stm-line-strong);
	border-radius: 100px;
}

.stm-lang-ar .stm-hero__eyebrow,
.stm-lang-ur .stm-hero__eyebrow {
	letter-spacing: 0.02em;
	text-transform: none;
	font-size: 0.9rem;
}

.stm-hero__title {
	margin-block-end: var(--stm-s5);
}

.stm-hero__title em {
	font-style: normal;
	color: var(--stm-teal-deep);
}

.stm-hero__text {
	font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
	color: var(--stm-body);
	line-height: 1.9;
	margin-block-end: var(--stm-s6);
	max-width: 34rem;
}

.stm-hero--center .stm-hero__text {
	margin-inline: auto;
}

.stm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stm-s3);
}

.stm-hero--center .stm-hero__actions {
	justify-content: center;
}

.stm-hero__facts {
	margin-block-start: var(--stm-s8);
	display: flex;
	flex-wrap: wrap;
	gap: var(--stm-s5) var(--stm-s7);
	padding-block-start: var(--stm-s5);
	border-block-start: 1px solid var(--stm-line);
}

.stm-hero__fact {
	display: flex;
	align-items: flex-start;
	gap: var(--stm-s3);
	max-width: 17rem;
}

.stm-hero__fact .stm-icon {
	color: var(--stm-teal);
	margin-block-start: 0.15rem;
}

.stm-hero__fact-label {
	font-size: 0.9rem;
	color: var(--stm-body);
	line-height: 1.6;
	margin: 0;
}

/* --------------------------------------------------------------------------
   14. Cards
   -------------------------------------------------------------------------- */

.stm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--stm-s3);
	padding: var(--stm-s6) var(--stm-s5);
	background: var(--stm-card);
	border: 1px solid var(--stm-border);
	border-radius: var(--stm-radius-lg);
	overflow: hidden;
	box-shadow: var(--stm-shadow);
	transition:
		border-color var(--stm-slow) var(--stm-ease),
		box-shadow var(--stm-slow) var(--stm-ease),
		transform var(--stm-slow) var(--stm-ease);
}

.stm-section--soft .stm-card {
	background: var(--stm-card);
}

/* The stem, once more: a stroke anchored above the card that slides down
   through it on hover. Restrained — 1px, no colour change elsewhere. */
.stm-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: var(--stm-s5);
	inline-size: 1px;
	block-size: 0;
	background: var(--stm-teal);
	transition: block-size var(--stm-slow) var(--stm-ease);
}

.stm-card:hover,
.stm-card:focus-within {
	border-color: var(--stm-line-strong);
	box-shadow: var(--stm-shadow-lg);
	transform: translateY(-3px);
}

.stm-card:hover::before,
.stm-card:focus-within::before {
	block-size: 100%;
}

/* Icon tiles: a soft tinted square with a prominent stroke mark inside —
   bigger and more legible than the hairline outline it replaces. */
.stm-card__icon {
	--tile: var(--stm-teal);

	inline-size: 3.5rem;
	block-size: 3.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 12px;
	background: color-mix(in srgb, var(--tile) 12%, transparent);
	color: var(--tile);
	margin-block-end: var(--stm-s3);
	position: relative;
	transition: background var(--stm-slow) var(--stm-ease), transform var(--stm-slow) var(--stm-ease);
}

.stm-card__icon--gold { --tile: var(--stm-gold); }
.stm-card__icon--teal { --tile: var(--stm-teal); }

.stm-card:hover .stm-card__icon {
	background: color-mix(in srgb, var(--tile) 20%, transparent);
	transform: translateY(-1px);
}

.stm-card__icon .stm-icon {
	inline-size: 1.85rem;
	block-size: 1.85rem;
	stroke-width: 1.6;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.stm-card__icon { background: rgba(22, 155, 160, .12); }
	.stm-card__icon--gold { background: rgba(201, 162, 39, .12); }
}

.stm-card__title {
	font-size: 1.28rem;
	margin: 0;
	color: var(--stm-teal-deep);
}

[data-scheme="dark"] .stm-card__title {
	color: var(--stm-ink);
}

.stm-card__title a {
	color: inherit;
	text-decoration: none;
}

.stm-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.stm-card__text {
	color: var(--stm-body);
	font-size: 1.03rem;
	line-height: 1.8;
	margin: 0;
	flex: 1;
}

.stm-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--stm-s2);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--stm-teal-deep);
	margin-block-start: var(--stm-s2);
}

.stm-card__more .stm-icon {
	inline-size: 1rem;
	block-size: 1rem;
	transition: transform var(--stm-fast) var(--stm-ease);
}

.stm-dir-rtl .stm-card__more .stm-icon {
	transform: scaleX(-1);
}

.stm-card:hover .stm-card__more .stm-icon {
	transform: translateX(3px);
}

.stm-dir-rtl .stm-card:hover .stm-card__more .stm-icon {
	transform: scaleX(-1) translateX(3px);
}

/* --------------------------------------------------------------------------
   15. Article cards
   -------------------------------------------------------------------------- */

.stm-article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--stm-bg-soft);
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius-lg);
	overflow: hidden;
	transition: border-color var(--stm-slow) var(--stm-ease), transform var(--stm-slow) var(--stm-ease);
}

.stm-article-card:hover {
	border-color: var(--stm-line-strong);
	transform: translateY(-2px);
}

.stm-article-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--stm-card);
}

.stm-article-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--stm-slow) var(--stm-ease);
}

.stm-article-card:hover .stm-article-card__media img {
	transform: scale(1.03);
}

.stm-article-card__body {
	padding: var(--stm-s5);
	display: flex;
	flex-direction: column;
	gap: var(--stm-s3);
	flex: 1;
}

.stm-article-card__cat {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stm-teal-deep);
	font-weight: 600;
}

.stm-lang-ar .stm-article-card__cat {
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.85rem;
}

.stm-article-card__title {
	font-size: 1.12rem;
	margin: 0;
	line-height: 1.4;
}

.stm-article-card__title a {
	color: inherit;
	text-decoration: none;
}

.stm-article-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.stm-article-card__excerpt {
	color: var(--stm-body);
	font-size: 1.01rem;
	margin: 0;
	flex: 1;
}

.stm-post-meta {
	font-size: 0.82rem;
	color: var(--stm-body);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--stm-s2);
}

.stm-post-meta__dot {
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   16. Founder block
   -------------------------------------------------------------------------- */

.stm-founder__layout {
	display: grid;
	gap: var(--stm-s6);
	align-items: center;
}

@media (min-width: 56em) {
	.stm-founder__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
		gap: var(--stm-s8);
	}
}

.stm-founder__media {
	position: relative;
	border-radius: var(--stm-radius-lg);
	overflow: hidden;
	border: 1px solid var(--stm-line);
	background: var(--stm-card);
}

.stm-founder__media img {
	inline-size: 100%;
	block-size: auto;
	/* The supplied photograph is already monochrome. This only steadies the
	   tone across browsers; no feature of the image is altered. */
	filter: grayscale(100%) contrast(1.02);
}

.stm-founder__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--stm-bg) 55%, transparent) 0%,
		transparent 40%
	);
	pointer-events: none;
}

.stm-founder__media {
	box-shadow: var(--stm-shadow-lg);
}

.stm-founder__name {
	margin-block: 0 var(--stm-s2);
	font-size: clamp(1.4rem, 1.2rem + 0.9vw, 2rem);
	color: var(--stm-teal-deep);
}

/* The signature treatment. Aref Ruqaa Ink is a colour font, so the name keeps
   its own ink tone; the fallback colour below only applies if it fails to load. */
.stm-founder__name--script {
	/*
	 * The signature stack is written out in full rather than inheriting
	 * --stm-font-display, because on non-Arabic pages that variable holds a
	 * Latin face with no Arabic coverage — the name then fell through to the
	 * browser's default naskh and stopped being the mark at all.
	 */
	font-family: "Aref Ruqaa Ink", "Aref Ruqaa", "Amiri", "Noto Naskh Arabic", serif;
	font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
	line-height: 1.9;
	font-weight: 400;
	margin-block-end: var(--stm-s1);
	color: var(--stm-teal-deep);
}

[data-scheme="dark"] .stm-founder__name--script {
	color: var(--stm-gold);
}

/*
 * The transliteration sits under the calligraphy as a quiet caption: small,
 * widely tracked capitals, so the eye reads the mark first and the name second.
 */
.stm-founder__name-sub,
.stm-founder__name-latin {
	font-family: var(--stm-font-body);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--stm-body);
	margin-block: 0 var(--stm-s5);
	line-height: 1.7;
}

/* Scripts without capitals keep their own size and spacing. */
.stm-lang-hi .stm-founder__name-sub,
.stm-lang-ml .stm-founder__name-sub,
.stm-lang-bn .stm-founder__name-sub,
.stm-lang-ta .stm-founder__name-sub,
.stm-lang-ne .stm-founder__name-sub,
.stm-lang-ur .stm-founder__name-sub {
	text-transform: none;
	letter-spacing: 0.04em;
	font-size: 1.02rem;
}

.stm-founder__role {
	color: var(--stm-teal-deep);
	font-size: 0.92rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-block-end: var(--stm-s5);
}

.stm-lang-ar .stm-founder__role {
	letter-spacing: 0;
	text-transform: none;
	font-size: 1rem;
}

.stm-founder__text {
	color: var(--stm-body);
	line-height: 1.95;
	font-size: 1.02rem;
}

.stm-founder__caption {
	margin-block-start: var(--stm-s4);
	font-size: 0.82rem;
	color: var(--stm-body);
}

/* --------------------------------------------------------------------------
   17. Process / steps
   -------------------------------------------------------------------------- */

.stm-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--stm-s5);
	counter-reset: stm-step;
}

@media (min-width: 56em) {
	.stm-steps--4 { grid-template-columns: repeat(4, 1fr); }
	.stm-steps--3 { grid-template-columns: repeat(3, 1fr); }
}

.stm-step {
	counter-increment: stm-step;
	position: relative;
	padding-block-start: var(--stm-s5);
	border-block-start: 1px solid var(--stm-line);
}

.stm-step::before {
	content: counter(stm-step, decimal-leading-zero);
	font-family: var(--stm-font-display);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--stm-teal);
	display: block;
	margin-block-end: var(--stm-s3);
}

/* The connecting stroke between steps — the motif at section scale. */
.stm-step::after {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 0;
	inline-size: 2rem;
	block-size: 1px;
	background: var(--stm-teal);
}

.stm-step__title {
	font-size: 1.05rem;
	margin-block: 0 var(--stm-s2);
}

.stm-step__text {
	color: var(--stm-body);
	font-size: 0.94rem;
	margin: 0;
}

/* --------------------------------------------------------------------------
   18. FAQ accordion
   -------------------------------------------------------------------------- */

.stm-faq {
	max-width: 52rem;
	margin-inline: auto;
	display: grid;
	gap: var(--stm-s3);
}

.stm-faq__item {
	background: var(--stm-bg-soft);
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius);
	overflow: hidden;
	transition: border-color var(--stm-fast) var(--stm-ease);
}

.stm-section--soft .stm-faq__item {
	background: var(--stm-card);
}

.stm-faq__item.is-open {
	border-color: var(--stm-line-strong);
}

.stm-faq__q {
	inline-size: 100%;
	display: flex;
	align-items: center;
	gap: var(--stm-s4);
	padding: var(--stm-s5);
	background: none;
	border: 0;
	text-align: start;
	cursor: pointer;
	color: var(--stm-ink);
	font-family: var(--stm-font-display);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.55;
	min-height: 56px;
}

.stm-faq__q:hover {
	color: var(--stm-teal-deep);
}

.stm-faq__marker {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	flex: none;
	position: relative;
	margin-inline-start: auto;
	color: var(--stm-teal);
}

.stm-faq__marker::before,
.stm-faq__marker::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	background: currentColor;
	transition: transform var(--stm-slow) var(--stm-ease), opacity var(--stm-fast) var(--stm-ease);
}

.stm-faq__marker::before {
	inline-size: 14px;
	block-size: 1px;
	transform: translate(-50%, -50%);
}

.stm-faq__marker::after {
	inline-size: 1px;
	block-size: 14px;
	transform: translate(-50%, -50%);
}

.stm-faq__item.is-open .stm-faq__marker::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.stm-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--stm-slow) var(--stm-ease);
}

.stm-faq__item.is-open .stm-faq__a {
	grid-template-rows: 1fr;
}

.stm-faq__a-inner {
	overflow: hidden;
}

.stm-faq__a-inner > div {
	padding: 0 var(--stm-s5) var(--stm-s5);
	color: var(--stm-body);
	line-height: 1.9;
	border-block-start: 1px solid transparent;
}

.stm-faq__item.is-open .stm-faq__a-inner > div {
	border-block-start-color: var(--stm-line);
	padding-block-start: var(--stm-s4);
}

/* --------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */

.stm-form {
	background: var(--stm-bg-soft);
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, var(--stm-s7));
}

.stm-section--soft .stm-form {
	background: var(--stm-card);
}

.stm-form__title {
	margin-block: 0 var(--stm-s3);
	font-size: 1.45rem;
}

.stm-form__lead {
	color: var(--stm-body);
	margin-block-end: var(--stm-s6);
	font-size: 0.98rem;
}

.stm-form__trap {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.stm-form__grid {
	display: grid;
	gap: var(--stm-s4);
}

@media (min-width: 44em) {
	.stm-form__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.stm-field {
	display: flex;
	flex-direction: column;
	gap: var(--stm-s2);
	margin: 0;
}

.stm-field--full {
	grid-column: 1 / -1;
}

.stm-field label {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--stm-ink);
}

.stm-field__req {
	color: var(--stm-teal-deep);
	margin-inline-start: 0.2em;
}

.stm-field input[type="text"],
.stm-field input[type="email"],
.stm-field input[type="tel"],
.stm-field input[type="url"],
.stm-field select,
.stm-field textarea,
.stm-search__input {
	inline-size: 100%;
	padding: 0.8rem 1rem;
	min-height: 48px;
	background: color-mix(in srgb, var(--stm-bg) 60%, transparent);
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius);
	color: var(--stm-ink);
	font-size: 1rem;
	transition: border-color var(--stm-fast) var(--stm-ease), background var(--stm-fast) var(--stm-ease);
}

.stm-field textarea {
	resize: vertical;
	min-height: 8rem;
	line-height: 1.75;
}

.stm-field input:focus,
.stm-field select:focus,
.stm-field textarea:focus {
	border-color: var(--stm-teal);
	outline-offset: 1px;
}

.stm-field input::placeholder,
.stm-field textarea::placeholder {
	color: color-mix(in srgb, var(--stm-body) 70%, transparent);
}

.stm-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387a3a8' stroke-width='1.5'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 1.1rem;
	padding-inline-end: 2.6rem;
}

.stm-dir-rtl .stm-field select {
	background-position: left 0.9rem center;
	padding-inline-end: 1rem;
	padding-inline-start: 2.6rem;
}

.stm-field select option {
	background: var(--stm-card);
	color: var(--stm-ink);
}

.stm-field--consent {
	margin-block-start: var(--stm-s5);
}

.stm-field--consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--stm-s3);
	font-weight: 400;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--stm-body);
	cursor: pointer;
}

.stm-field--consent input[type="checkbox"] {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin-block-start: 0.28rem;
	accent-color: var(--stm-teal);
	flex: none;
}

.stm-field__error {
	font-size: 0.82rem;
	color: #ff8f8f;
	min-height: 0;
}

.stm-field__error:empty {
	display: none;
}

.stm-field.has-error input,
.stm-field.has-error select,
.stm-field.has-error textarea {
	border-color: #ff8f8f;
}

.stm-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stm-s3);
	margin-block-start: var(--stm-s6);
}

.stm-form__status {
	margin-block-start: var(--stm-s4);
	font-size: 0.95rem;
	line-height: 1.7;
}

.stm-form__status:empty {
	display: none;
}

.stm-form__status.is-ok {
	color: #7fe0a5;
}

.stm-form__status.is-error {
	color: #ff8f8f;
}

.stm-form.is-busy .stm-form__submit {
	opacity: 0.6;
	pointer-events: none;
}

.stm-toast {
	position: fixed;
	inset-block-end: 5.5rem;
	inset-inline: 1rem;
	margin-inline: auto;
	max-inline-size: 28rem;
	padding: var(--stm-s4) var(--stm-s5);
	border-radius: var(--stm-radius);
	background: var(--stm-card);
	border: 1px solid var(--stm-line-strong);
	z-index: 95;
	font-size: 0.95rem;
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}

.stm-toast--ok { border-color: #2f9d63; }
.stm-toast--error { border-color: #b45252; }

/* --------------------------------------------------------------------------
   20. Search
   -------------------------------------------------------------------------- */

.stm-search {
	display: flex;
	gap: var(--stm-s2);
	max-width: 32rem;
}

.stm-search__label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   21. Contact strip & map
   -------------------------------------------------------------------------- */

.stm-contact-grid {
	display: grid;
	gap: var(--stm-s5);
}

@media (min-width: 56em) {
	.stm-contact-grid {
		grid-template-columns: 0.9fr 1.1fr;
		gap: var(--stm-s8);
		align-items: start;
	}
}

.stm-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--stm-s4);
}

.stm-contact-item {
	display: flex;
	gap: var(--stm-s4);
	align-items: flex-start;
	padding-block-end: var(--stm-s4);
	border-block-end: 1px solid var(--stm-line);
}

.stm-contact-item:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.stm-contact-item .stm-icon {
	color: var(--stm-teal);
	margin-block-start: 0.2rem;
}

.stm-contact-item__label {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stm-body);
	margin-block-end: 0.2rem;
}

.stm-lang-ar .stm-contact-item__label {
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.85rem;
}

.stm-contact-item__value {
	color: var(--stm-ink);
	text-decoration: none;
	font-size: 1.02rem;
	font-weight: 500;
}

.stm-contact-item__value:hover {
	color: var(--stm-teal-deep);
}

.stm-map {
	border-radius: var(--stm-radius-lg);
	overflow: hidden;
	border: 1px solid var(--stm-line);
	background: var(--stm-card);
	aspect-ratio: 4 / 3;
	position: relative;
}

.stm-map iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	filter: grayscale(0.35) contrast(1.05);
}

.stm-map__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: var(--stm-s4);
	text-align: center;
	padding: var(--stm-s5);
	color: var(--stm-body);
}

/* --------------------------------------------------------------------------
   22. CTA band
   -------------------------------------------------------------------------- */

.stm-cta {
	background:
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--stm-teal) 22%, var(--stm-bg)) 0%,
			var(--stm-bg) 62%
		);
	border-block: 1px solid var(--stm-line-strong);
}

.stm-cta__inner {
	display: grid;
	gap: var(--stm-s5);
	align-items: center;
	text-align: center;
	justify-items: center;
}

@media (min-width: 56em) {
	.stm-cta__inner {
		grid-template-columns: 1fr auto;
		text-align: start;
		justify-items: start;
	}
}

.stm-cta__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem);
}

.stm-cta__text {
	color: var(--stm-body);
	margin-block-start: var(--stm-s3);
	max-width: 40rem;
}

.stm-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stm-s3);
	justify-content: center;
}

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */

.stm-footer {
	background: var(--stm-bg-soft);
	border-block-start: 1px solid var(--stm-line);
	padding-block: var(--stm-s8) var(--stm-s5);
	font-size: 0.94rem;
}

.stm-footer__grid {
	display: grid;
	gap: var(--stm-s7);
	padding-block-end: var(--stm-s7);
	border-block-end: 1px solid var(--stm-line);
}

@media (min-width: 44em) {
	.stm-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 68em) {
	.stm-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
		gap: var(--stm-s6);
	}
}

.stm-footer__title {
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stm-ink);
	margin-block: 0 var(--stm-s4);
	font-family: var(--stm-font-body);
	font-weight: 700;
}

.stm-lang-ar .stm-footer__title {
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.98rem;
}

.stm-footer__about {
	color: var(--stm-body);
	line-height: 1.85;
	margin-block: var(--stm-s4) var(--stm-s5);
	max-width: 30rem;
}

.stm-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--stm-s3);
}

.stm-footer__list a {
	color: var(--stm-body);
	text-decoration: none;
	transition: color var(--stm-fast) var(--stm-ease);
}

.stm-footer__list a:hover {
	color: var(--stm-teal-deep);
}

.stm-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--stm-s2);
}

.stm-social a {
	inline-size: 42px;
	block-size: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius);
	color: var(--stm-gold);
	transition:
		border-color var(--stm-fast) var(--stm-ease),
		color var(--stm-fast) var(--stm-ease),
		background var(--stm-fast) var(--stm-ease);
}

.stm-social a:hover {
	border-color: var(--stm-gold);
	background: color-mix(in srgb, var(--stm-gold) 12%, transparent);
	color: var(--stm-gold);
}

.stm-footer__bottom {
	padding-block-start: var(--stm-s5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--stm-s4);
	align-items: center;
	justify-content: space-between;
	color: var(--stm-body);
	font-size: 0.86rem;
}

.stm-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--stm-s4);
}

.stm-footer__legal a {
	color: var(--stm-body);
	text-decoration: none;
}

.stm-footer__legal a:hover {
	color: var(--stm-teal-deep);
}

.stm-footer__note {
	margin-block-start: var(--stm-s4);
	font-size: 0.82rem;
	color: color-mix(in srgb, var(--stm-body) 82%, transparent);
	line-height: 1.75;
	max-width: 60rem;
}

.stm-footer__langs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stm-s2);
	list-style: none;
	margin: var(--stm-s5) 0 0;
	padding: 0;
}

.stm-footer__langs a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius);
	font-size: 0.85rem;
	color: var(--stm-body);
	text-decoration: none;
}

.stm-footer__langs a[aria-current="true"] {
	border-color: var(--stm-teal);
	color: var(--stm-teal-deep);
}

/* --------------------------------------------------------------------------
   24. Floating WhatsApp + mobile bar + back to top
   -------------------------------------------------------------------------- */

.stm-wa {
	position: fixed;
	inset-block-end: 1.5rem;
	inset-inline-end: 1.5rem;
	z-index: 80;
	display: flex;
	align-items: center;
	gap: var(--stm-s3);
}

/* Clear of the fixed bottom bar with room to spare — at 5.5rem the button was
   grazing the bar and, on pages ending in the contact block, overlapping it. */
body.has-mobile-bar .stm-wa {
	inset-block-end: calc(7rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 48em) {
	body.has-mobile-bar .stm-wa {
		inset-block-end: 1.5rem;
	}
}

.stm-wa__button {
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background: #1faa54;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 30px -8px rgba(31, 170, 84, 0.6);
	transition: transform var(--stm-fast) var(--stm-ease), background var(--stm-fast) var(--stm-ease);
}

.stm-wa__button .stm-social-icon {
	inline-size: 1.7rem;
	block-size: 1.7rem;
}

.stm-wa__button:hover {
	background: #24c463;
	transform: scale(1.05);
	color: #fff;
}

.stm-wa__bubble {
	display: none;
	max-inline-size: 15rem;
	padding: var(--stm-s3) var(--stm-s4);
	background: var(--stm-card);
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius-lg);
	font-size: 0.84rem;
	line-height: 1.6;
	color: var(--stm-body);
	box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.85);
	position: relative;
}

@media (min-width: 62em) {
	.stm-wa--with-bubble .stm-wa__bubble {
		display: block;
	}
}

.stm-wa__bubble-close {
	position: absolute;
	inset-block-start: 0.25rem;
	inset-inline-end: 0.25rem;
	inline-size: 24px;
	block-size: 24px;
	background: none;
	border: 0;
	color: var(--stm-body);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.stm-wa__bubble-close .stm-icon {
	inline-size: 0.85rem;
	block-size: 0.85rem;
}

.stm-bottombar {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 75;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: color-mix(in srgb, var(--stm-bg) 96%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-block-start: 1px solid var(--stm-line);
	padding-block-end: env(safe-area-inset-bottom, 0);
}

@media (min-width: 48em) {
	.stm-bottombar {
		display: none;
	}
}

.stm-bottombar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.6rem 0.25rem;
	min-height: 60px;
	color: var(--stm-body);
	text-decoration: none;
	font-size: 0.7rem;
	text-align: center;
}

.stm-bottombar a:hover,
.stm-bottombar a:focus-visible {
	color: var(--stm-teal-deep);
}

.stm-bottombar .stm-icon,
.stm-bottombar .stm-social-icon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.stm-bottombar__wa {
	color: #35c46e !important;
}

.stm-totop {
	position: fixed;
	inset-block-end: 1.5rem;
	inset-inline-start: 1.5rem;
	inline-size: 44px;
	block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--stm-card);
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius);
	color: var(--stm-ink);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--stm-fast) var(--stm-ease), transform var(--stm-fast) var(--stm-ease), visibility var(--stm-fast);
	z-index: 78;
}

.stm-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

body.has-mobile-bar .stm-totop {
	inset-block-end: 5.5rem;
}

@media (min-width: 48em) {
	body.has-mobile-bar .stm-totop {
		inset-block-end: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   25. Cookie notice
   -------------------------------------------------------------------------- */

.stm-cookie {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 92;
	background: var(--stm-card);
	border-block-start: 1px solid var(--stm-line-strong);
	padding: var(--stm-s4) 0;
	transform: translateY(110%);
	transition: transform var(--stm-slow) var(--stm-ease);
}

.stm-cookie.is-visible {
	transform: translateY(0);
}

.stm-cookie__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--stm-s4);
	justify-content: space-between;
}

.stm-cookie__text {
	margin: 0;
	font-size: 0.9rem;
	color: var(--stm-body);
	max-width: 46rem;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   26. Breadcrumbs, pagination, disclaimer, share
   -------------------------------------------------------------------------- */

.stm-breadcrumbs {
	padding-block: var(--stm-s4);
	border-block-end: 1px solid var(--stm-line);
	background: var(--stm-bg-soft);
}

.stm-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--stm-s2);
	font-size: 0.84rem;
	color: var(--stm-body);
}

.stm-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--stm-s2);
}

.stm-breadcrumbs__item a {
	color: var(--stm-body);
	text-decoration: none;
}

.stm-breadcrumbs__item a:hover {
	color: var(--stm-teal-deep);
}

.stm-breadcrumbs__sep .stm-icon {
	inline-size: 0.85rem;
	block-size: 0.85rem;
	opacity: 0.5;
}

.stm-breadcrumbs__item [aria-current="page"] {
	color: var(--stm-ink);
}

.stm-pagination {
	margin-block-start: var(--stm-s7);
}

.stm-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--stm-s2);
	justify-content: center;
}

.stm-pagination a,
.stm-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 0.75rem;
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius);
	text-decoration: none;
	color: var(--stm-body);
	font-size: 0.9rem;
}

.stm-pagination a:hover {
	border-color: var(--stm-teal);
	color: var(--stm-teal-deep);
}

.stm-pagination .current {
	background: var(--stm-teal);
	border-color: var(--stm-teal);
	color: var(--stm-ink-on-teal);
	font-weight: 600;
}

.stm-disclaimer {
	display: flex;
	gap: var(--stm-s4);
	align-items: flex-start;
	padding: var(--stm-s5);
	margin-block-start: var(--stm-s7);
	background: var(--stm-bg-soft);
	border: 1px solid var(--stm-line);
	border-inline-start: 2px solid var(--stm-gold);
	border-radius: var(--stm-radius);
}

.stm-disclaimer p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--stm-body);
	line-height: 1.8;
}

.stm-disclaimer__icon {
	color: var(--stm-gold);
	flex: none;
	margin-block-start: 0.2rem;
}

.stm-share {
	display: flex;
	align-items: center;
	gap: var(--stm-s4);
	flex-wrap: wrap;
	margin-block-start: var(--stm-s6);
	padding-block-start: var(--stm-s5);
	border-block-start: 1px solid var(--stm-line);
}

.stm-share__label {
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stm-body);
}

.stm-lang-ar .stm-share__label {
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.9rem;
}

.stm-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--stm-s2);
}

.stm-share__list a,
.stm-share__copy {
	inline-size: 40px;
	block-size: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius);
	color: var(--stm-body);
	background: none;
	cursor: pointer;
	transition: color var(--stm-fast) var(--stm-ease), border-color var(--stm-fast) var(--stm-ease);
}

.stm-share__list a:hover,
.stm-share__copy:hover {
	color: var(--stm-teal-deep);
	border-color: var(--stm-teal);
}

/* --------------------------------------------------------------------------
   27. Editorial content (the_content)
   -------------------------------------------------------------------------- */

.stm-prose {
	max-width: 44rem;
	font-size: 1.15rem;
	line-height: 1.95;
	color: color-mix(in srgb, var(--stm-ink) 88%, var(--stm-body));
}

.stm-prose > * + * {
	margin-block-start: var(--stm-s5);
}

.stm-prose h2 {
	margin-block-start: var(--stm-s7);
	font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.8rem);
	color: var(--stm-ink);
}

.stm-prose h3 {
	margin-block-start: var(--stm-s6);
	color: var(--stm-ink);
}

.stm-prose ul,
.stm-prose ol {
	padding-inline-start: 1.4rem;
	display: grid;
	gap: var(--stm-s3);
}

.stm-prose li::marker {
	color: var(--stm-teal);
}

.stm-prose img,
.stm-prose figure {
	border-radius: var(--stm-radius-lg);
	overflow: hidden;
}

.stm-prose a {
	color: var(--stm-teal-deep);
}

.stm-prose table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.stm-prose th,
.stm-prose td {
	padding: var(--stm-s3) var(--stm-s4);
	border: 1px solid var(--stm-line);
	text-align: start;
}

.stm-prose th {
	background: var(--stm-bg-soft);
	color: var(--stm-ink);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   28. Page shells
   -------------------------------------------------------------------------- */

.stm-pagehead {
	padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
	background: var(--stm-bg-soft);
	position: relative;
	overflow: hidden;
}

.stm-pagehead::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: max(2.5rem, calc((100vw - var(--stm-container)) / 2));
	inline-size: 1px;
	background: linear-gradient(to bottom, transparent, var(--stm-teal) 40%, transparent);
	opacity: 0.4;
}

.stm-pagehead__title {
	margin: 0;
	max-width: 42rem;
}

.stm-pagehead__lead {
	margin-block-start: var(--stm-s4);
	color: var(--stm-body);
	max-width: 42rem;
	font-size: 1.15rem;
	line-height: 1.9;
}

.stm-single__layout {
	display: grid;
	gap: var(--stm-s7);
}

@media (min-width: 62em) {
	body:not(.stm-no-sidebar) .stm-single__layout {
		grid-template-columns: minmax(0, 1fr) 18rem;
		gap: var(--stm-s8);
	}
}

.stm-widget {
	margin-block-end: var(--stm-s6);
	padding: var(--stm-s5);
	background: var(--stm-bg-soft);
	border: 1px solid var(--stm-line);
	border-radius: var(--stm-radius-lg);
}

.stm-widget__title {
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-block: 0 var(--stm-s4);
}

.stm-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--stm-s3);
	font-size: 0.94rem;
}

.stm-widget a {
	color: var(--stm-body);
	text-decoration: none;
}

.stm-widget a:hover {
	color: var(--stm-teal-deep);
}

.stm-featured {
	border-radius: var(--stm-radius-lg);
	overflow: hidden;
	border: 1px solid var(--stm-line);
	margin-block-end: var(--stm-s6);
}

/* 404 */
.stm-404 {
	text-align: center;
	padding-block: clamp(4rem, 2rem + 8vw, 7rem);
}

.stm-404__code {
	font-family: var(--stm-font-display);
	font-size: clamp(4rem, 3rem + 8vw, 8rem);
	font-weight: 800;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--stm-line-strong);
	margin: 0 0 var(--stm-s4);
}

.stm-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stm-s3);
	justify-content: center;
	margin-block-start: var(--stm-s6);
}

/* Empty states */
.stm-empty {
	text-align: center;
	padding: var(--stm-s8) var(--stm-s5);
	border: 1px dashed var(--stm-line);
	border-radius: var(--stm-radius-lg);
	color: var(--stm-body);
}

/* --------------------------------------------------------------------------
   29. Reveal on scroll (progressive — content is visible without JS)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.js .stm-reveal {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity var(--stm-slow) var(--stm-ease), transform var(--stm-slow) var(--stm-ease);
	}

	.js .stm-reveal.is-in {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   30. Print
   -------------------------------------------------------------------------- */

@media print {
	.stm-header,
	.stm-footer,
	.stm-wa,
	.stm-bottombar,
	.stm-totop,
	.stm-cookie,
	.stm-drawer,
	.stm-share,
	.stm-form {
		display: none !important;
	}

	body {
		background: #fff;
		color: #111;
	}

	.stm-prose {
		max-width: none;
		color: #111;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #555;
	}
}