/*
Theme Name: Parsa Dev - A&S Immigration
Theme URI: https://www.as-immigration.co.uk/
Author: ParsaDev
Description: Bright right-to-left Persian theme for A&S Immigration, a UK immigration law practice. Navy, crimson and powder blue on off-white, girih geometry, Peyda display type over Yekan Bakh body copy.
Version: 2.3.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: as-immigration
Tags: rtl-language-support, custom-menu, one-column, translation-ready
*/

/* ==========================================================================
   1. Fonts
   ========================================================================== */

/* Body face. Regular only — see the font-synthesis note in the reset. */
@font-face {
	font-family: 'Yekan Bakh';
	src: url('assets/fonts/YekanBakh-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Display face. Three real cuts under one family name, so plain `font-weight`
   selects them and nothing is ever synthesised. Subset to Persian + Latin. */
@font-face {
	font-family: 'Peyda';
	src: url('assets/fonts/Peyda-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Peyda';
	src: url('assets/fonts/Peyda-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Peyda';
	src: url('assets/fonts/Peyda-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Cormorant Garamond';
	src: url('assets/fonts/CormorantGaramond-Latin.woff2') format('woff2');
	font-weight: 300 600;
	font-style: normal;
	font-display: swap;
	/* Latin only — Persian always falls through to Yekan Bakh. */
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ---------------------------------------------------------------------------
   Automatic Latin fallback.

   Any Latin run — inside Persian copy or on its own — is served by Times New
   Roman without needing a wrapper element or class anywhere in the markup. The
   mechanism is `unicode-range`: this family only ever claims Latin codepoints,
   so Persian always falls through to Yekan Bakh / Peyda.

   Two details matter:
     • U+2000–200F is deliberately NOT claimed. ZWNJ (U+200C) lives there and is
       load-bearing in Persian; it must stay with the Persian font.
     • U+0020 (the space) is withheld too. Claiming it made Times supply the
       gaps between Persian words, widening every Persian paragraph.
     • Windows ships a Times New Roman that also contains Arabic. Without the
       unicode-range cap it would hijack the Persian text entirely.

   All four styles are declared because `font-synthesis: none` is set globally —
   an undeclared bold or italic would silently render upright/regular.
   Sources are `local()` only, so this costs no download.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: 'Latin Serif';
	src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Times'),
		local('Tinos'), local('Liberation Serif'), local('Nimbus Roman');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+0021-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
		U+2010-2027, U+2030-205E, U+20AC, U+2122, U+2212;
}

@font-face {
	font-family: 'Latin Serif';
	src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Times Bold'),
		local('Tinos Bold'), local('Liberation Serif Bold'), local('Nimbus Roman Bold');
	font-weight: 700;
	font-style: normal;
	unicode-range: U+0021-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
		U+2010-2027, U+2030-205E, U+20AC, U+2122, U+2212;
}

@font-face {
	font-family: 'Latin Serif';
	src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Times Italic'),
		local('Tinos Italic'), local('Liberation Serif Italic');
	font-weight: 400;
	font-style: italic;
	unicode-range: U+0021-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
		U+2010-2027, U+2030-205E, U+20AC, U+2122, U+2212;
}

@font-face {
	font-family: 'Latin Serif';
	src: local('Times New Roman Bold Italic'), local('TimesNewRomanPS-BoldItalicMT'),
		local('Tinos Bold Italic'), local('Liberation Serif Bold Italic');
	font-weight: 700;
	font-style: italic;
	unicode-range: U+0021-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
		U+2010-2027, U+2030-205E, U+20AC, U+2122, U+2212;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
	/* Paper — the dominant field */
	--paper: #F1F8EF;
	--paper-warm: #F7FBF6;
	--white: #FFFFFF;

	/* Powder blue, stepped for tints and hairlines */
	--mist-50: #EAF4F4;
	--mist-100: #E1EFF0;
	--mist-200: #CFE4E6;
	--powder: #B9DADD;
	--powder-deep: #9AC6CB;

	/* Steel — secondary text, quiet strokes */
	--steel: #5B7C9D;
	--steel-deep: #47658A;
	--steel-soft: #95AFC6;

	/* Navy — primary text and the one dark band */
	--navy: #2C3A56;
	--navy-deep: #1F2B41;
	--navy-mid: #384A6B;
	--navy-soft: #445980;

	/* Crimson — the single hot accent, used sparingly */
	--crimson: #C93F4B;
	--crimson-deep: #A82F3B;
	--crimson-soft: #E4737C;
	--crimson-wash: rgba(201, 63, 75, 0.08);

	/* Brand artwork — exact values from the supplied logo file */
	--logo-navy: #000066;
	--logo-blue: #206397;
	--logo-amp: #B7D4E5;

	/* Channel colours for the contact / social icons */
	--teal: #2E7D6B;
	--brand-whatsapp: #25D366;
	--brand-telegram: #2AABEE;
	--brand-instagram: #EE2A7B;

	/* Hairlines */
	--line: rgba(91, 124, 157, 0.22);
	--line-mid: rgba(91, 124, 157, 0.38);
	--line-strong: rgba(44, 58, 86, 0.5);
	--line-on-navy: rgba(185, 218, 221, 0.2);
	--line-on-navy-mid: rgba(185, 218, 221, 0.34);

	/* Type */
	/* 'Latin Serif' leads the Persian stacks so Latin runs resolve to Times
	   automatically; its unicode-range keeps it away from Persian glyphs. */
	--font-fa: 'Latin Serif', 'Yekan Bakh', 'Peyda', 'Tahoma', sans-serif;
	--font-head: 'Latin Serif', 'Peyda', 'Yekan Bakh', 'Tahoma', sans-serif;

	/* Phone numbers and e-mail: Peyda's lining figures, never Times. */
	--font-num: 'Latin Serif', 'Peyda', 'Yekan Bakh', 'Tahoma', sans-serif;

	/* Explicit English runs. */
	--font-en: 'Latin Serif', 'Times New Roman', Times, serif;

	/* Logotype only — the wordmark and the English route kicker. */
	--font-latin: 'Cormorant Garamond', 'Latin Serif', Times, serif;

	/* Weight rungs. Peyda ships real cuts, so hierarchy is carried by weight
	   rather than by scale alone. */
	--w-display: 800;
	--w-head: 700;
	--w-ui: 500;

	/* Fluid scale */
	--step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
	--step-0: clamp(0.98rem, 0.94rem + 0.2vw, 1.09rem);
	--step-1: clamp(1.12rem, 1.05rem + 0.34vw, 1.34rem);
	--step-2: clamp(1.32rem, 1.19rem + 0.62vw, 1.72rem);
	--step-3: clamp(1.6rem, 1.36rem + 1.1vw, 2.35rem);
	--step-4: clamp(1.95rem, 1.5rem + 2vw, 3.3rem);
	--step-5: clamp(2.3rem, 1.55rem + 3.3vw, 4.6rem);

	/* Rhythm */
	--gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.6rem);
	--section-y: clamp(2.4rem, 1.8rem + 2.2vw, 3.8rem);
	--shell: 1220px;
	--shell-narrow: 880px;

	/* Motion */
	--ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
	--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

	/* Elevation — cool navy-tinted, never neutral grey */
	--shadow-sm: 0 1px 2px rgba(44, 58, 86, 0.07);
	--shadow-md: 0 10px 30px -12px rgba(44, 58, 86, 0.18);
	--shadow-lg: 0 28px 64px -26px rgba(44, 58, 86, 0.28);
	--shadow-crimson: 0 16px 40px -16px rgba(201, 63, 75, 0.42);
}

/* ==========================================================================
   3. Reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6.5rem;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--navy);
	font-family: var(--font-fa);
	font-size: var(--step-0);
	line-height: 1.95;
	/* Never let the browser fake a weight: Yekan Bakh is Regular-only, and a
	   synthesised bold visibly distorts Persian letterforms. Headings use Peyda,
	   which has genuine 500/700/800 cuts. */
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-head);
	font-weight: var(--w-head);
	line-height: 1.32;
	letter-spacing: -0.016em;
	color: var(--navy);
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--crimson); color: var(--white); }

:focus-visible {
	outline: 2px solid var(--crimson);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Latin runs inside Persian copy pick up the serif automatically. */
.latin, .en { font-family: var(--font-en); letter-spacing: 0.01em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	inset-inline-start: 50%;
	top: -100px;
	transform: translateX(50%);
	z-index: 999;
	padding: 0.8rem 1.6rem;
	background: var(--crimson);
	color: var(--white);
	transition: top 0.25s var(--ease-out);
}
.skip-link:focus { top: 0.75rem; }

/* ==========================================================================
   4. Atmosphere — paper grain + girih
   ========================================================================== */

/* Very light multiply grain so the large pale fields read as paper stock
   rather than flat #fff. */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.028;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.girih-field {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url('assets/img/girih.svg');
	background-size: 132px 132px;
	opacity: 0.055;
	mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 0%, transparent 78%);
}

/* The navy band gets the powder-stroked copy of the same tile. */
.section--navy .girih-field {
	background-image: url('assets/img/girih-powder.svg');
	opacity: 0.14;
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.shell--narrow { max-width: var(--shell-narrow); }

.section {
	position: relative;
	padding-block: var(--section-y);
	overflow: hidden;
}

/* --- Section surfaces --- */

.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--mist { background: linear-gradient(170deg, var(--mist-50), var(--mist-100)); }
.section--powder { background: linear-gradient(165deg, var(--powder), var(--mist-200)); }

.section--navy {
	background: linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);
	color: var(--mist-100);
}
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }

/* Hairline rules that fade at the ends — subtler than a full-width border. */
.section + .section:not(.section--navy)::before {
	content: '';
	position: absolute;
	inset-inline: 12%;
	top: 0;
	height: 1px;
	background: linear-gradient(to left, transparent, var(--line-mid), transparent);
}

/* ==========================================================================
   6. Section headers
   ========================================================================== */

.sec-head {
	max-width: 62ch;
	margin-block-end: clamp(1.5rem, 1.15rem + 1.3vw, 2.3rem);
}

.sec-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin-block-end: 1.15rem;
	font-family: var(--font-head);
	font-weight: var(--w-ui);
	color: var(--crimson-deep);
	font-size: var(--step-0);
	/* No tracking: Persian letters join, and spacing them apart breaks the
	   joins and hurts legibility. Latin-only labels may still be tracked. */
	letter-spacing: 0;
}

.eyebrow::before {
	content: '';
	width: clamp(1.6rem, 3vw, 2.8rem);
	height: 1px;
	background: linear-gradient(to left, var(--crimson), transparent);
}

.sec-head--center .eyebrow::after {
	content: '';
	width: clamp(1.6rem, 3vw, 2.8rem);
	height: 1px;
	background: linear-gradient(to right, var(--crimson), transparent);
}

.section--navy .eyebrow { color: var(--powder); }
.section--navy .eyebrow::before { background: linear-gradient(to left, var(--powder), transparent); }
.section--navy .sec-head--center .eyebrow::after { background: linear-gradient(to right, var(--powder), transparent); }

.sec-title {
	font-size: var(--step-4);
	line-height: 1.22;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

.sec-lede {
	margin-block-start: 1.3rem;
	font-size: var(--step-1);
	line-height: 1.9;
	color: var(--steel-deep);
	text-wrap: pretty;
}
.section--navy .sec-lede { color: var(--powder); }

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1.02rem 2.15rem;
	font-family: var(--font-head);
	font-weight: var(--w-ui);
	font-size: var(--step-0);
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out),
		transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn bdi {
	font-family: var(--font-num);
	font-weight: var(--w-head);
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: 0.02em;
}

/* Wash sweeps in from the trailing (right, in RTL) edge. */
.btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--navy);
	transform: translateX(101%);
	transition: transform 0.55s var(--ease-out);
}
[dir='rtl'] .btn::before { transform: translateX(-101%); }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }

.btn--solid {
	background: var(--crimson);
	color: var(--white);
	box-shadow: var(--shadow-crimson);
}
.btn--solid::before { background: var(--crimson-deep); }
.btn--solid:hover { transform: translateY(-2px); }

.btn--ghost {
	border-color: var(--line-strong);
	color: var(--navy);
}
.btn--ghost::before { background: var(--navy); }
.btn--ghost:hover, .btn--ghost:focus-visible {
	color: var(--white);
	border-color: var(--navy);
	transform: translateY(-2px);
}

.section--navy .btn--ghost,
.section--powder .btn--ghost { border-color: var(--line-on-navy-mid); }
.section--navy .btn--ghost { color: var(--white); }
.section--navy .btn--ghost::before { background: var(--powder); }
.section--navy .btn--ghost:hover { color: var(--navy); border-color: var(--powder); }

.section--powder .btn--ghost { border-color: rgba(44, 58, 86, 0.34); }

/* ==========================================================================
   8. Top bar
   ========================================================================== */

.topbar {
	position: relative;
	z-index: 60;
	background: var(--navy-deep);
	font-size: var(--step--1);
	color: var(--powder);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 46px;
	padding-block: 0.35rem;
}

.topbar__contacts {
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 2vw, 1.9rem);
	flex-wrap: wrap;
}

.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: color 0.3s var(--ease-out);
}
.topbar__item svg { width: 0.95rem; height: 0.95rem; color: var(--brand-whatsapp); flex: none; transition: color 0.3s var(--ease-out); }
.topbar__item:hover svg { color: var(--powder); }
.topbar__item:hover { color: var(--white); }
.topbar__item bdi {
	font-family: var(--font-num);
	font-weight: var(--w-head);
	font-variant-numeric: lining-nums tabular-nums;
	font-size: 1.02em;
	letter-spacing: 0.02em;
	color: var(--white);
}
.topbar__item:hover bdi { color: var(--powder); }

/* ==========================================================================
   9. Social icons
   ========================================================================== */

.socials { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Filled with the platform's own colour by default; the hover *removes* colour
   and leaves a two-tone outline. Deliberately the reverse of the usual pattern
   — the resting state is the interesting one. */
.social {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	color: var(--white);
	border: 1.5px solid transparent;
	border-radius: 50%;
	background: var(--navy);
	transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
		background 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.social svg { width: 0.98rem; height: 0.98rem; }

.social--whatsapp  { background: var(--brand-whatsapp); }
.social--telegram  { background: var(--brand-telegram); }
.social--instagram { background: linear-gradient(45deg, #F9CE34, #EE2A7B 52%, #6228D7); }

.social:hover,
.social:focus-visible {
	background: transparent;
	border-color: currentColor;
	transform: translateY(-2px);
}
.social--whatsapp:hover,  .social--whatsapp:focus-visible  { color: var(--brand-whatsapp); }
.social--telegram:hover,  .social--telegram:focus-visible  { color: var(--brand-telegram); }
.social--instagram:hover, .social--instagram:focus-visible { color: var(--brand-instagram); }

.social--lg { width: 2.85rem; height: 2.85rem; }
.social--lg svg { width: 1.22rem; height: 1.22rem; }

/* On the navy top bar the outline hover needs a touch more presence. */
.topbar .social:hover { border-width: 1.5px; }

/* ==========================================================================
   10. Header + navigation
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(241, 248, 239, 0.86);
	backdrop-filter: blur(16px) saturate(1.2);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	border-block-end: 1px solid var(--line);
	transition: background-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.site-header.is-stuck {
	background: rgba(255, 255, 255, 0.95);
	box-shadow: var(--shadow-md);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 78px;
	transition: min-height 0.45s var(--ease-out);
}
.site-header.is-stuck .site-header__inner { min-height: 64px; }

/* ---- Brand lockup ---- */

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	flex: none;
	min-width: 0;
}

.brand__mark {
	display: block;
	width: 3rem;
	flex: none;
	transition: transform 0.6s var(--ease-out);
}
.brand:hover .brand__mark { transform: translateY(-2px) scale(1.03); }

.brand__art { width: 100%; height: auto; display: block; }
/* The A and S are white negative space, so the plate must stay opaque. */
.brand__art-bg { fill: #fff; }

.brand__text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }

.brand__row {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 0.55rem;
	direction: rtl;
	white-space: nowrap;
	color: var(--logo-blue);
}

.brand__fa {
	direction: rtl;
	unicode-bidi: isolate;
	font-family: var(--font-head);
	font-weight: var(--w-head);
	font-size: 1.02rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.brand__latin {
	direction: ltr;
	unicode-bidi: isolate;
	flex: 0 0 auto;
	/* Times, matching every other English run on the site. The brand file
	   specifies Georgia — see TASKS.md if that needs revisiting. */
	font-family: var(--font-en);
	font-weight: 700;
	font-size: 1.06rem;
	line-height: 1;
	letter-spacing: -0.03em;
}

.brand__tag {
	direction: rtl;
	unicode-bidi: isolate;
	font-family: var(--font-head);
	font-weight: var(--w-ui);
	font-size: 0.68rem;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--crimson);
	white-space: nowrap;
}

/* Footer and drawer get a roomier version. */
.brand--lg { gap: 0.9rem; }
.brand--lg .brand__mark { width: 3.9rem; }
.brand--lg .brand__fa { font-size: 1.2rem; }
.brand--lg .brand__latin { font-size: 1.26rem; }
.brand--lg .brand__tag { font-size: 0.76rem; }

@media (max-width: 420px) {
	.brand { gap: 0.5rem; }
	.brand__mark { width: 2.5rem; }
	.brand__fa { font-size: 0.88rem; }
	.brand__latin { font-size: 0.92rem; }
	.brand__tag { font-size: 0.62rem; }
}

/* On the navy drawer the blue line needs lifting off the background. */
.drawer .brand__row { color: var(--powder); }
.drawer .brand__tag { color: var(--crimson-soft); }

/* ---- Desktop menu ---- */

.nav { display: none; }

@media (min-width: 1060px) {
	.nav { display: block; }
	.nav__list { display: flex; align-items: center; gap: clamp(0.3rem, 1.1vw, 1.1rem); }

	.nav__list > li { position: relative; }

	.nav__list > li > a {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.55rem 0.45rem;
		font-family: var(--font-head);
		font-weight: var(--w-ui);
		font-size: 0.97rem;
		color: var(--navy);
		white-space: nowrap;
		transition: color 0.32s var(--ease-out);
	}

	/* Crimson underline grows from the leading (right) edge in RTL. */
	.nav__list > li > a::after {
		content: '';
		position: absolute;
		inset-inline: 0.45rem;
		bottom: 0.15rem;
		height: 1.5px;
		background: var(--crimson);
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform 0.42s var(--ease-out);
	}
	[dir='ltr'] .nav__list > li > a::after { transform-origin: left center; }

	.nav__list > li > a:hover,
	.nav__list > li.is-open > a,
	.nav__list > li.current-menu-item > a,
	.nav__list > li.current-menu-ancestor > a { color: var(--crimson); }

	.nav__list > li > a:hover::after,
	.nav__list > li.is-open > a::after,
	.nav__list > li.current-menu-item > a::after,
	.nav__list > li.current-menu-ancestor > a::after { transform: scaleX(1); }

	.nav__toggle-icon {
		width: 0.62rem;
		height: 0.62rem;
		color: var(--steel);
		transition: transform 0.36s var(--ease-out);
	}
	.nav__list > li.is-open > a .nav__toggle-icon { transform: rotate(180deg); }

	/* ---- Mega panel ---- */

	/* The panel is anchored to the sticky header rather than to its own list
	   item, so it can be far wider than the trigger. `position: static` on the
	   item is what hands that job to the header. */
	.nav__list > li.has-mega { position: static; }

	.mega {
		position: absolute;
		top: calc(100% - 1px);
		/* Physical `left`, not `inset-inline-start`: in RTL the logical property
		   resolves to `right`, and translateX(-50%) then pushes the panel off
		   the leading edge instead of centring it. */
		left: 50%;
		right: auto;
		transform: translateX(-50%) translateY(-10px);
		width: min(64rem, calc(100vw - 3rem));
		padding: 1px;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		/* visibility is switched with a delay, not interpolated: on open it flips
		   immediately (so the links are focusable the moment the panel opens),
		   on close it waits for the fade to finish. Transitioning visibility
		   itself makes focusability depend on the transition actually running,
		   which it does not in a background tab. */
		transition: opacity 0.38s var(--ease-out), transform 0.38s var(--ease-out),
			visibility 0s linear 0.38s;

		/* Glassmorphism: a translucent pane that samples the page behind it. */
		background: linear-gradient(148deg, rgba(255, 255, 255, 0.93), rgba(250, 253, 249, 0.85));
		backdrop-filter: blur(34px) saturate(1.8);
		-webkit-backdrop-filter: blur(34px) saturate(1.8);
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 6px;
		box-shadow:
			0 32px 80px -28px rgba(44, 58, 86, 0.42),
			0 2px 10px -4px rgba(44, 58, 86, 0.16),
			inset 0 1px 0 rgba(255, 255, 255, 0.95),
			inset 0 -1px 0 rgba(255, 255, 255, 0.35);
	}

	.nav__list > li.has-mega:hover > .mega,
	.nav__list > li.has-mega.is-open > .mega,
	.nav__list > li.has-mega:focus-within > .mega {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
		transition-delay: 0s;
	}

	/* Slow drifting highlight — the "fluid" part of the glass. */
	.mega__sheen {
		position: absolute;
		inset: -40%;
		pointer-events: none;
		background:
			radial-gradient(38% 55% at 22% 30%, rgba(185, 218, 221, 0.55), transparent 70%),
			radial-gradient(32% 48% at 78% 68%, rgba(201, 63, 75, 0.16), transparent 72%),
			radial-gradient(30% 40% at 60% 12%, rgba(255, 255, 255, 0.75), transparent 70%);
		filter: blur(18px);
		opacity: 0.85;
		animation: mega-drift 18s var(--ease-soft) infinite alternate;
	}

	@keyframes mega-drift {
		0%   { transform: translate3d(-4%, -3%, 0) scale(1); }
		50%  { transform: translate3d(5%, 4%, 0) scale(1.08); }
		100% { transform: translate3d(-2%, 5%, 0) scale(1.02); }
	}

	.mega__inner {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
		padding: 1.25rem;
	}

	.mega__col {
		display: flex;
		flex-direction: column;
		padding: 0.85rem;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.5);
		border: 1px solid rgba(255, 255, 255, 0.72);
		transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
			transform 0.35s var(--ease-out);
	}
	.mega__col:hover {
		background: rgba(255, 255, 255, 0.86);
		border-color: rgba(255, 255, 255, 0.85);
		transform: translateY(-3px);
	}

	.mega__head {
		display: block;
		margin-block-end: 0.85rem;
		color: var(--navy);
	}

	.mega__thumb {
		display: block;
		height: 6.6rem;
		margin-block-end: 0.8rem;
		border-radius: 3px;
		background-size: cover;
		background-position: center;
		box-shadow: 0 8px 22px -10px rgba(44, 58, 86, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
		transition: transform 0.6s var(--ease-out), box-shadow 0.4s var(--ease-out);
	}
	.mega__col:hover .mega__thumb {
		transform: scale(1.035);
		box-shadow: 0 14px 30px -12px rgba(44, 58, 86, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
	}

	.mega__title {
		display: block;
		font-family: var(--font-head);
		font-weight: var(--w-head);
		font-size: 1.02rem;
		letter-spacing: -0.01em;
		color: var(--navy);
		padding-block-end: 0.65rem;
		border-block-end: 1px solid rgba(44, 58, 86, 0.14);
	}

	.mega__list { display: grid; gap: 0.1rem; }

	.mega__list a {
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 0.55rem;
		padding: 0.46rem 0.3rem;
		/* Semi-bold: Peyda Medium sits between the body regular and the 700
		   branch headings, so the services read as their own tier. */
		font-family: var(--font-head);
		font-weight: var(--w-ui);
		font-size: 0.88rem;
		line-height: 1.6;
		color: var(--navy);
		border-radius: 3px;
		transition: color 0.28s var(--ease-out), background-color 0.28s var(--ease-out);
	}

	/* Crimson lozenge bullet, matching the visa cards. */
	.mega__list a::before {
		content: '';
		width: 5px;
		height: 5px;
		margin-block-start: 0.62em;
		flex: none;
		background: var(--crimson);
		transform: rotate(45deg);
		opacity: 0.55;
		transition: opacity 0.28s var(--ease-out), transform 0.35s var(--ease-out);
	}

	.mega__list a:hover,
	.mega__list .current-menu-item > a {
		color: var(--crimson);
		background: rgba(255, 255, 255, 0.7);
	}
	.mega__list a:hover::before { opacity: 1; transform: rotate(135deg) scale(1.15); }

	/* Without backdrop-filter support, fall back to a solid pane. */
	@supports not (backdrop-filter: blur(2px)) {
		.mega { background: rgba(252, 253, 251, 1); }
	}

	@media (prefers-reduced-motion: reduce) {
		.mega__sheen { animation: none; }
	}

	/* ---- Submenus (levels 2 and 3) ---- */

	/* Physical sides, not logical ones: in RTL `inline-end` resolves to *left*,
	   which flips a dropdown to the wrong side of its anchor. Panels must hang
	   from the item's right edge and grow leftwards. */
	.nav .sub-menu {
		position: absolute;
		top: calc(100% + 0.55rem);
		right: 0;
		left: auto;
		min-width: 19rem;
		padding: 0.6rem;
		background: var(--white);
		border: 1px solid var(--line);
		box-shadow: var(--shadow-lg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out),
			visibility 0s linear 0.32s;
	}

	/* Crimson cap on each dropdown. */
	.nav .sub-menu::before {
		content: '';
		position: absolute;
		inset-inline: 0;
		top: 0;
		height: 2px;
		background: linear-gradient(to left, transparent, var(--crimson), transparent);
	}

	.nav li.is-open > .sub-menu,
	.nav li:hover > .sub-menu,
	.nav li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}

	/* Third level flies clear of the second, continuing leftwards. */
	.nav .sub-menu .sub-menu {
		top: -0.6rem;
		right: calc(100% + 0.55rem);
		left: auto;
		transform: translateX(10px);
	}
	.nav .sub-menu li.is-open > .sub-menu,
	.nav .sub-menu li:hover > .sub-menu,
	.nav .sub-menu li:focus-within > .sub-menu { transform: translateX(0); }

	/* Mirror the whole cascade for left-to-right locales. */
	[dir='ltr'] .nav .sub-menu { right: auto; left: 0; }
	[dir='ltr'] .nav .sub-menu .sub-menu {
		right: auto;
		left: calc(100% + 0.55rem);
		transform: translateX(-10px);
	}
	[dir='ltr'] .nav .sub-menu .nav__toggle-icon { transform: rotate(-90deg); }

	.nav .sub-menu a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.72rem 0.95rem;
		font-size: 0.92rem;
		line-height: 1.6;
		color: var(--navy-mid);
		transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
	}
	.nav .sub-menu a::before {
		content: '';
		position: absolute;
		inset-inline-start: 0;
		top: 50%;
		width: 2px;
		height: 0;
		background: var(--crimson);
		transform: translateY(-50%);
		transition: height 0.3s var(--ease-out);
	}
	.nav .sub-menu a:hover,
	.nav .sub-menu li.current-menu-item > a {
		color: var(--crimson);
		background: var(--mist-50);
	}
	.nav .sub-menu a:hover::before,
	.nav .sub-menu li.current-menu-item > a::before { height: 62%; }

	.nav .sub-menu .nav__toggle-icon { transform: rotate(90deg); }
}

/* ---- Header actions ---- */

.header__actions { display: flex; align-items: center; gap: 0.9rem; }
.header__cta { display: none; }
@media (min-width: 1240px) {
	.header__cta { display: inline-flex; padding: 0.78rem 1.5rem; font-size: 0.92rem; }
}

/* ---- Burger ---- */

.burger {
	display: grid;
	place-items: center;
	width: 2.85rem;
	height: 2.85rem;
	border: 1px solid var(--line-mid);
	color: var(--navy);
	transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.burger:hover { background: var(--mist-50); color: var(--crimson); }
@media (min-width: 1060px) { .burger { display: none; } }

.burger__box { position: relative; width: 20px; height: 14px; }
.burger__box span {
	position: absolute;
	inset-inline: 0;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 6.25px; }
.burger__box span:nth-child(3) { bottom: 0; }
.burger[aria-expanded='true'] .burger__box span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__box span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

/* ==========================================================================
   11. Mobile drawer
   ========================================================================== */

.drawer {
	position: fixed;
	inset: 0;
	z-index: 80;
	visibility: hidden;
	pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(31, 43, 65, 0.6);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.45s var(--ease-out);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(25rem, 89vw);
	display: flex;
	flex-direction: column;
	background: linear-gradient(200deg, var(--navy), var(--navy-deep));
	color: var(--mist-100);
	box-shadow: var(--shadow-lg);
	transform: translateX(100%);
	transition: transform 0.52s var(--ease-out);
	overflow-y: auto;
	overscroll-behavior: contain;
}
[dir='rtl'] .drawer__panel { transform: translateX(-100%); }
.drawer.is-open .drawer__panel { transform: translateX(0); }

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

.drawer__close {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	color: var(--powder);
	border: 1px solid var(--line-on-navy);
	transition: color 0.3s, background-color 0.3s;
}
.drawer__close:hover { color: var(--navy); background: var(--powder); }
.drawer__close svg { width: 0.9rem; height: 0.9rem; }

.drawer__body { flex: 1; padding: 1.2rem var(--gutter) 2rem; }

.drawer__foot {
	padding: 1.4rem var(--gutter) 2rem;
	border-block-start: 1px solid var(--line-on-navy);
	display: grid;
	gap: 1.1rem;
	justify-items: center;
}

/* ---- Accordion menu ---- */

.m-menu li { border-block-end: 1px solid var(--line-on-navy); }
.m-menu li:last-child { border-block-end: 0; }

.m-menu__row { display: flex; align-items: stretch; }

.m-menu a {
	flex: 1;
	padding: 0.95rem 0;
	font-family: var(--font-head);
	font-weight: var(--w-ui);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--mist-100);
	transition: color 0.28s var(--ease-out);
}
.m-menu a:hover, .m-menu .current-menu-item > .m-menu__row > a { color: var(--powder); }

.m-menu__expand {
	display: grid;
	place-items: center;
	width: 2.6rem;
	flex: none;
	color: var(--powder);
	transition: color 0.3s;
}
.m-menu__expand svg {
	width: 0.72rem; height: 0.72rem;
	transition: transform 0.4s var(--ease-out);
}
.m-menu__expand[aria-expanded='true'] svg { transform: rotate(180deg); }

.m-menu .sub-menu {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s var(--ease-out);
	padding-inline-start: 1rem;
	border-inline-start: 1px solid var(--line-on-navy);
	margin-inline-start: 0.25rem;
}
.m-menu .sub-menu > * { overflow: hidden; }
.m-menu li.is-open > .sub-menu { grid-template-rows: 1fr; }
.m-menu .sub-menu a { font-size: 0.92rem; padding-block: 0.72rem; color: var(--powder); }

/* ==========================================================================
   12. Hero
   ========================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(86svh, 48rem);
	padding-block: clamp(2.6rem, 2rem + 2.8vw, 4.4rem);
	background: var(--paper);
	overflow: hidden;
	isolation: isolate;
}

/* Layered radial wash: powder from the top-trailing corner, a whisper of
   crimson low on the leading side. */
.hero__mesh {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(58rem 40rem at 84% 4%, rgba(185, 218, 221, 0.85), transparent 62%),
		radial-gradient(44rem 32rem at 6% 94%, rgba(201, 63, 75, 0.1), transparent 64%),
		radial-gradient(34rem 28rem at 40% 46%, rgba(241, 248, 239, 0.9), transparent 70%),
		linear-gradient(175deg, var(--paper-warm), var(--mist-50));
}

/* Hero photograph. The scrim is a left-ward gradient: in RTL the copy sits on
   the right, so the paper stays near-opaque there and thins out to reveal the
   image on the leading edge. */
.hero__photo {
	position: absolute;
	inset: 0;
	z-index: -3;
	background-size: cover;
	background-position: center 32%;
}

.hero--photo .hero__mesh {
	background:
		radial-gradient(58rem 40rem at 84% 4%, rgba(185, 218, 221, 0.5), transparent 62%),
		radial-gradient(44rem 32rem at 6% 94%, rgba(201, 63, 75, 0.1), transparent 64%),
		linear-gradient(to left,
			rgba(241, 248, 239, 0.97) 0%,
			rgba(241, 248, 239, 0.93) 32%,
			rgba(241, 248, 239, 0.6) 62%,
			rgba(241, 248, 239, 0.22) 100%);
}

@media (max-width: 1023px) {
	/* Single column: the card sits over the photo, so lift the scrim overall. */
	.hero--photo .hero__mesh {
		background:
			radial-gradient(50rem 34rem at 80% 6%, rgba(185, 218, 221, 0.45), transparent 62%),
			linear-gradient(to bottom, rgba(241, 248, 239, 0.9), rgba(241, 248, 239, 0.96));
	}
}

.hero .girih-field { z-index: -1; }

.hero__grid {
	display: grid;
	gap: clamp(2.6rem, 1.8rem + 3.6vw, 5rem);
	align-items: center;
}
@media (min-width: 1024px) {
	.hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); }
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.48rem 1.15rem;
	margin-block-end: 1.7rem;
	font-size: var(--step-0);
	letter-spacing: 0;
	color: var(--crimson-deep);
	border: 1px solid rgba(201, 63, 75, 0.28);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.66);
}
.hero__eyebrow span.dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--crimson);
	box-shadow: 0 0 0 4px rgba(201, 63, 75, 0.16);
	animation: pulse 2.8s var(--ease-soft) infinite;
}
@keyframes pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(201, 63, 75, 0.18); }
	50% { box-shadow: 0 0 0 8px rgba(201, 63, 75, 0.02); }
}

.hero__title {
	font-family: var(--font-head);
	font-weight: var(--w-display);
	font-size: var(--step-5);
	line-height: 1.18;
	letter-spacing: -0.028em;
	color: var(--navy);
	text-wrap: balance;
}

/* Wordmark as an engraved lockup above the headline — deliberately restrained
   so the Persian line carries the scale. Never allowed to break mid-name. */
.hero__wordmark {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-block-end: 0.85rem;
	font-family: var(--font-en);
	font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.3rem);
	font-weight: 500;
	letter-spacing: 0.19em;
	line-height: 1.1;
	white-space: nowrap;
	direction: ltr;
	color: var(--steel-deep);
}

.hero__wordmark span { color: var(--navy); }

.hero__wordmark::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, var(--steel), transparent);
}

.hero__lede {
	max-width: 54ch;
	margin-block-start: 1.85rem;
	font-size: var(--step-1);
	line-height: 2;
	color: var(--navy-mid);
	text-wrap: pretty;
}

.hero__lede + .hero__lede { margin-block-start: 1rem; color: var(--steel-deep); font-size: var(--step-0); }

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.95rem;
	margin-block-start: 2.5rem;
}

/* ---- Hero contact card ---- */

.hero__card {
	position: relative;
	padding: clamp(1.7rem, 1.2rem + 1.7vw, 2.7rem);
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--line);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow-lg);
}

/* Over a photograph the card needs to be near-solid, or the image reads
   through the phone numbers. */
.hero--photo .hero__card {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(16px) saturate(1.1);
	box-shadow: 0 34px 80px -30px rgba(44, 58, 86, 0.45);
}

/* Engraved corner brackets — the certificate/deed cue. */
.corner-frame::before,
.corner-frame::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--crimson);
	opacity: 0.8;
	transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out);
}
.corner-frame::before {
	top: -1px; inset-inline-start: -1px;
	border-inline-end: 0; border-block-end: 0;
}
.corner-frame::after {
	bottom: -1px; inset-inline-end: -1px;
	border-inline-start: 0; border-block-start: 0;
}
.corner-frame:hover::before, .corner-frame:hover::after { width: 34px; height: 34px; }

.hero__card-title {
	margin-block-end: 1.5rem;
	padding-block-end: 1.15rem;
	font-size: var(--step-2);
	border-block-end: 1px solid var(--line);
}

.contact-rows { display: grid; gap: 0.35rem; }

.contact-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.8rem 0.55rem;
	transition: background-color 0.32s var(--ease-out);
}
.contact-row:hover { background: var(--mist-50); }

/* Filled and colour-coded at rest; the hover empties them to an outline —
   matching the social icons, and the reverse of the usual convention. */
.contact-row__icon {
	display: grid;
	place-items: center;
	width: 2.55rem;
	height: 2.55rem;
	flex: none;
	color: var(--white);
	background: var(--navy);
	border: 1.5px solid transparent;
	/* Circular everywhere: hero card, contact page and footer all match the
	   social icons. */
	border-radius: 50%;
	transition: color 0.32s, background-color 0.32s, border-color 0.32s, transform 0.4s var(--ease-out);
}
.contact-row__icon--mobile { background: var(--crimson); }
.contact-row__icon--phone  { background: var(--navy); }
.contact-row__icon--mail   { background: var(--steel); }
.contact-row__icon--pin    { background: var(--teal); }

.contact-row:hover .contact-row__icon {
	background: transparent;
	border-color: currentColor;
	transform: translateY(-2px);
}
.contact-row:hover .contact-row__icon--mobile { color: var(--crimson); }
.contact-row:hover .contact-row__icon--phone  { color: var(--navy); }
.contact-row:hover .contact-row__icon--mail   { color: var(--steel); }
.contact-row:hover .contact-row__icon--pin    { color: var(--teal); }
.contact-row__icon svg { width: 1.05rem; height: 1.05rem; }

.contact-row__body { min-width: 0; }

.contact-row__label {
	font-family: var(--font-head);
	font-weight: var(--w-ui);
	font-size: 0.84rem;
	letter-spacing: 0;
	color: var(--steel-deep);
}

.contact-row__value {
	display: block;
	font-size: 1.02rem;
	color: var(--navy);
	word-break: break-word;
}
.contact-row__value bdi {
	font-family: var(--font-num);
	font-weight: var(--w-head);
	font-variant-numeric: lining-nums tabular-nums;
	font-size: 1.08em;
	letter-spacing: 0.015em;
}

.hero__card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-block-start: 1.6rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--line);
}
.hero__card-foot span { font-size: 0.86rem; color: var(--steel); }

/* ==========================================================================
   13. Cards — visa categories (the showcase grid)
   ========================================================================== */

.card-grid {
	display: grid;
	gap: clamp(1.1rem, 0.7rem + 1.4vw, 1.9rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

/* Fixed 1 / 2 / 4 track counts for the four visa categories. auto-fit would
   drop to three columns in the 1024–1180px band and leave a lone orphan. */
.card-grid--quad { grid-template-columns: 1fr; }

@media (min-width: 600px) {
	.card-grid--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
	.card-grid--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vcard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem);
	background: var(--white);
	border: 1px solid var(--line);
	overflow: hidden;
	isolation: isolate;
	box-shadow: var(--shadow-sm);
	transition: transform 0.55s var(--ease-out), border-color 0.55s var(--ease-out),
		box-shadow 0.55s var(--ease-out);
}

/* Powder glow blooms from the top-trailing corner on hover. */
.vcard::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(22rem 16rem at 88% -8%, rgba(185, 218, 221, 0.55), transparent 68%);
	opacity: 0;
	transition: opacity 0.55s var(--ease-out);
}

/* Girih medallion, bled off the corner. Rotates slowly on hover. */
.vcard__ornament {
	position: absolute;
	top: -2.6rem;
	inset-inline-end: -2.6rem;
	width: 9.5rem;
	height: 9.5rem;
	z-index: -1;
	color: var(--steel);
	opacity: 0.16;
	transition: opacity 0.6s var(--ease-out), transform 1.4s var(--ease-out);
}
.vcard:hover {
	transform: translateY(-6px);
	border-color: rgba(201, 63, 75, 0.4);
	box-shadow: var(--shadow-lg);
}
.vcard:hover::before { opacity: 1; }
.vcard:hover .vcard__ornament { opacity: 0.3; transform: rotate(60deg); }

.vcard__index {
	font-family: var(--font-en);
	font-size: 0.86rem;
	letter-spacing: 0.16em;
	color: var(--crimson-deep);
}

.vcard__title {
	margin-block: 0.55rem 1.3rem;
	padding-block-end: 1.2rem;
	font-size: var(--step-2);
	line-height: 1.45;
	border-block-end: 1px solid var(--line);
	text-wrap: balance;
}

.vcard__list { display: grid; gap: 0.15rem; }

.vcard__list a,
.vcard__list > li > span {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.72rem;
	padding: 0.52rem 0;
	font-size: 0.96rem;
	line-height: 1.75;
	color: var(--navy-mid);
	transition: color 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}

/* Small crimson lozenge as the bullet — a girih diamond, not a disc. */
.vcard__list a::before,
.vcard__list > li > span::before {
	content: '';
	width: 6px; height: 6px;
	margin-block-start: 0.62em;
	flex: none;
	background: var(--crimson);
	transform: rotate(45deg);
	opacity: 0.7;
	transition: opacity 0.32s var(--ease-out), transform 0.42s var(--ease-out);
}

.vcard__list a:hover { color: var(--crimson); }
.vcard__list a:hover::before { opacity: 1; transform: rotate(135deg) scale(1.15); }
[dir='rtl'] .vcard__list a:hover { transform: translateX(-4px); }

/* Card variant on the navy band */
.section--navy .vcard {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--line-on-navy);
	box-shadow: none;
}
.section--navy .vcard:hover { border-color: var(--powder-deep); }
.section--navy .vcard__list a, .section--navy .vcard__list > li > span { color: var(--mist-100); }
.section--navy .vcard__list a:hover { color: var(--powder); }
.section--navy .vcard__list a::before,
.section--navy .vcard__list > li > span::before { background: var(--crimson-soft); }
.section--navy .vcard__index { color: var(--crimson-soft); }
.section--navy .vcard__title { border-color: var(--line-on-navy); }
.section--navy .vcard__ornament { color: var(--powder); }
.section--navy .vcard::before {
	background: radial-gradient(22rem 16rem at 88% -8%, rgba(185, 218, 221, 0.16), transparent 68%);
}

/* ==========================================================================
   14. Appeal section
   ========================================================================== */

.appeal__grid {
	display: grid;
	gap: clamp(2.2rem, 1.6rem + 2.6vw, 4rem);
	align-items: start;
}
@media (min-width: 980px) {
	.appeal__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}

.appeal__question {
	margin-block-end: 1.4rem;
	font-size: var(--step-3);
	line-height: 1.5;
	text-wrap: balance;
}
.appeal__question em {
	font-style: normal;
	color: var(--crimson-deep);
	/* Hand-drawn crimson underline. */
	background: linear-gradient(to top, rgba(201, 63, 75, 0.22) 0 0.22em, transparent 0.22em);
}

.subhead {
	margin-block-end: 1.3rem;
	font-weight: var(--w-head);
	font-size: 0.95rem;
	letter-spacing: 0;
	color: var(--crimson-deep);
}

.case-list { display: grid; gap: 0.85rem; }

.case-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.15rem;
	padding: 1.15rem 1.4rem;
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	transition: transform 0.42s var(--ease-out), border-color 0.42s var(--ease-out),
		box-shadow 0.42s var(--ease-out);
}

.case-item__label { flex: 1; font-size: 1rem; line-height: 1.7; color: var(--navy); }

.case-item:hover {
	transform: translateY(-3px);
	border-color: rgba(201, 63, 75, 0.4);
	box-shadow: var(--shadow-md);
}

/* Persian numeral in a crimson-hairline lozenge. */
.case-item__num {
	display: grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	flex: none;
	font-family: var(--font-num);
	font-weight: var(--w-head);
	font-size: 0.98rem;
	color: var(--crimson-deep);
	background: var(--mist-50);
	border: 1px solid rgba(201, 63, 75, 0.28);
	transition: background-color 0.42s var(--ease-out), color 0.42s var(--ease-out);
}
.case-item:hover .case-item__num { background: var(--crimson); color: var(--white); }

/* ==========================================================================
   15. Services / statistics
   ========================================================================== */

/* Two-up rather than four: these cards carry paragraphs, and a 2x2 block keeps
   the measure readable instead of squeezing Persian text into narrow columns. */
.svc-grid {
	display: grid;
	gap: clamp(1.2rem, 0.8rem + 1.4vw, 2rem);
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.svc {
	position: relative;
	padding: clamp(1.7rem, 1.3rem + 1.3vw, 2.5rem);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--line-on-navy);
	overflow: hidden;
	transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out),
		background-color 0.5s var(--ease-out);
}
.svc:hover {
	transform: translateY(-5px);
	border-color: var(--powder-deep);
	background: rgba(255, 255, 255, 0.08);
}

.svc__stat {
	display: flex;
	align-items: baseline;
	gap: 0.28rem;
	margin-block-end: 0.9rem;
	line-height: 1;
}
.svc__stat b {
	font-family: var(--font-head);
	font-weight: var(--w-display);
	font-size: clamp(2.7rem, 1.9rem + 3.2vw, 4.6rem);
	letter-spacing: -0.03em;
	background: linear-gradient(160deg, var(--white) 6%, var(--powder) 56%, var(--powder-deep));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.svc__stat i {
	font-style: normal;
	font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.55rem);
	color: var(--crimson-soft);
}

.svc__icon {
	display: grid;
	place-items: center;
	width: 3.1rem;
	height: 3.1rem;
	margin-block-end: 1.2rem;
	color: var(--white);
	background: var(--crimson);
	border: 1px solid var(--crimson);
	transition: transform 0.55s var(--ease-out);
}
.svc:hover .svc__icon { transform: rotate(-8deg); }
.svc__icon svg { width: 1.32rem; height: 1.32rem; }

.svc__title {
	margin-block-end: 0.85rem;
	font-size: var(--step-2);
	line-height: 1.45;
	text-wrap: balance;
}

.svc__text { font-size: 0.99rem; line-height: 1.95; color: var(--powder); text-wrap: pretty; }

/* ==========================================================================
   16. CTA band
   ========================================================================== */

.cta {
	position: relative;
	padding-block: clamp(2.3rem, 1.8rem + 2.2vw, 3.6rem);
	background: linear-gradient(160deg, var(--powder), var(--mist-200) 70%, var(--mist-100));
	overflow: hidden;
	isolation: isolate;
}
.cta::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background: radial-gradient(38rem 24rem at 88% 10%, rgba(255, 255, 255, 0.7), transparent 62%);
}

.cta__inner {
	position: relative;
	display: grid;
	gap: 2rem;
	align-items: center;
	padding: clamp(2rem, 1.4rem + 2.4vw, 3.6rem);
	border: 1px solid rgba(44, 58, 86, 0.16);
	background: rgba(255, 255, 255, 0.62);
	backdrop-filter: blur(8px);
	text-align: center;
	justify-items: center;
}
@media (min-width: 900px) {
	.cta__inner { grid-template-columns: 1fr auto; text-align: start; justify-items: start; }
}

.cta__title { font-size: var(--step-3); text-wrap: balance; }
.cta__text { margin-block-start: 0.75rem; color: var(--navy-mid); max-width: 46ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* ==========================================================================
   17. Footer
   ========================================================================== */

.site-footer {
	position: relative;
	background: linear-gradient(172deg, var(--paper-warm), var(--mist-50));
	color: var(--navy);
	border-block-start: 1px solid var(--line);
	overflow: hidden;
}

.footer__top {
	position: relative;
	display: grid;
	gap: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
	padding-block: clamp(2rem, 1.6rem + 1.8vw, 3rem);
}
@media (min-width: 860px) {
	.footer__top { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); }
}

.footer__brandblock { max-width: 40ch; }
.footer__about { margin-block-start: 1.35rem; font-size: 0.95rem; line-height: 1.95; color: var(--navy-mid); }

.footer__heading {
	margin-block-end: 1.3rem;
	font-weight: var(--w-head);
	font-size: 0.98rem;
	letter-spacing: 0;
	color: var(--crimson-deep);
}

.footer__links { display: grid; gap: 0.72rem; }
.footer__links a, .footer__links span {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.95rem;
	color: var(--navy);
	transition: color 0.3s var(--ease-out), gap 0.3s var(--ease-out);
}
.footer__links a::before, .footer__links span::before {
	content: '';
	width: 5px; height: 5px;
	flex: none;
	background: var(--crimson);
	transform: rotate(45deg);
	transition: background-color 0.3s;
}
.footer__links a:hover { color: var(--crimson); gap: 0.85rem; }

/* Latin prose (the postal address). Peyda draws U+002C with a Persian comma —
   correct inside Persian text, wrong in an English address — so Latin-first
   here lets Cormorant supply the punctuation. Its unicode-range covers Latin
   only, and Peyda picks up anything it lacks. */
.latin-text {
	font-family: var(--font-en) !important;
	font-weight: 600 !important;
	font-variant-numeric: lining-nums !important;
	letter-spacing: 0.015em !important;
}

.footer__contact bdi {
	font-family: var(--font-num);
	font-weight: var(--w-head);
	font-variant-numeric: lining-nums tabular-nums;
	font-size: 1.04em;
	letter-spacing: 0.02em;
	color: var(--navy);
}
.footer__contact a:hover bdi { color: var(--crimson); }

/* ---- Footer contact channels: icon + label + value ---- */

.footer__contact { display: grid; gap: 0.3rem; }

.footer__contact a,
.footer__contact-static {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.5rem 0.45rem;
	transition: background-color 0.3s var(--ease-out);
}
.footer__contact a:hover { background: rgba(201, 63, 75, 0.06); }

.footer__contact-icon {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	flex: none;
	color: var(--white);
	background: var(--navy);
	border: 1.5px solid transparent;
	/* Circular, to match the social icons in the same footer. */
	border-radius: 50%;
	transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out),
		border-color 0.3s var(--ease-out);
}
.footer__contact-icon svg { width: 0.92rem; height: 0.92rem; }

.footer__contact-icon--mobile { background: var(--crimson); }
.footer__contact-icon--phone  { background: var(--navy); }
.footer__contact-icon--mail   { background: var(--steel); }
.footer__contact-icon--pin    { background: var(--teal); }

.footer__contact a:hover .footer__contact-icon,
.footer__contact-static:hover .footer__contact-icon {
	background: transparent;
	border-color: currentColor;
}
.footer__contact a:hover .footer__contact-icon--mobile { color: var(--crimson); }
.footer__contact a:hover .footer__contact-icon--phone  { color: var(--navy); }
.footer__contact a:hover .footer__contact-icon--mail   { color: var(--steel); }

.footer__contact-body { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }

.footer__contact-label {
	font-family: var(--font-head);
	font-weight: var(--w-ui);
	font-size: 0.8rem;
	letter-spacing: 0;
	color: var(--steel-deep);
}

.footer__contact .latin-text { font-size: 0.94em; color: var(--navy-mid); text-wrap: balance; }
.footer__links a:hover::before { background: var(--crimson-deep); }

.footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block: 1.1rem;
	border-block-start: 1px solid var(--line);
	font-size: 0.87rem;
	color: var(--steel-deep);
}
.footer__bottom a:hover { color: var(--crimson); }

/* ==========================================================================
   18. Interior pages
   ========================================================================== */

.page-hero {
	position: relative;
	padding-block: clamp(2.1rem, 1.6rem + 1.9vw, 3.2rem);
	background: linear-gradient(168deg, var(--paper-warm), var(--mist-100));
	overflow: hidden;
	isolation: isolate;
}
.page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background: radial-gradient(44rem 28rem at 84% 4%, rgba(185, 218, 221, 0.8), transparent 62%);
}

/* Featured image as a banner behind the title. */
.page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	background-size: cover;
	background-position: center 38%;
}

.page-hero--image { padding-block: clamp(3.2rem, 2.5rem + 3.4vw, 5.6rem); }

.page-hero--image::before {
	/* Every alpha here is 20% lighter than it was, so the photograph reads more
	   clearly through the veil. Measured before changing: the navy title still
	   sits at 7.1:1 against the worst realistic case (a dark area of the photo
	   behind the text), comfortably above the 4.5:1 the standard asks for. */
	background:
		radial-gradient(40rem 26rem at 86% 2%, rgba(185, 218, 221, 0.28), transparent 62%),
		linear-gradient(to left,
			rgba(241, 248, 239, 0.78) 0%,
			rgba(241, 248, 239, 0.72) 38%,
			rgba(241, 248, 239, 0.44) 70%,
			rgba(241, 248, 239, 0.20) 100%);
}

@media (max-width: 767px) {
	.page-hero--image::before {
		/* Narrow screens stack the title over the middle of the photograph
		   rather than beside it, so this veil is flat rather than directional.
		   Lightened by the same 20%. */
		background: linear-gradient(to bottom, rgba(241, 248, 239, 0.70), rgba(241, 248, 239, 0.78));
	}
}
.page-hero__title {
	font-weight: var(--w-display);
	font-size: var(--step-4);
	letter-spacing: -0.024em;
	text-wrap: balance;
}

/* English route name above the Persian H1. Direction is left alone so the
   block stays right-aligned with the title while bidi orders the Latin run. */
.page-hero__en {
	margin-block-end: 0.45rem;
	font-family: var(--font-en);
	font-size: clamp(1.05rem, 0.92rem + 0.62vw, 1.5rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.15em;
	color: var(--crimson-deep);
}

.crumbs {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
	margin-block-end: 1.1rem;
	font-size: 0.86rem;
	color: var(--steel);
}
.crumbs a { color: var(--crimson); transition: color 0.3s; }
.crumbs a:hover { color: var(--crimson-deep); }
.crumbs span[aria-hidden] { color: var(--steel-soft); }

.prose { font-size: var(--step-0); line-height: 2.05; color: var(--navy-mid); }
.prose > * + * { margin-block-start: 1.3em; }
.prose h2 { font-size: var(--step-3); margin-block-start: 2.2em; }
.prose h3 { font-size: var(--step-2); color: var(--crimson-deep); margin-block-start: 1.8em; }
/* Yekan Bakh has no bold and font-synthesis is off, so <strong> would be
   invisible on Persian runs. Emphasise with colour instead of weight — which is
   the correct convention for Persian typography anyway. Latin runs inside a
   <strong> still pick up Cormorant's heavier axis. */
.prose strong, .prose b {
	font-weight: 600;
	color: var(--navy);
}

.prose a { color: var(--crimson); border-block-end: 1px solid rgba(201, 63, 75, 0.4); }
.prose a:hover { color: var(--crimson-deep); border-color: var(--crimson-deep); }
.prose ul { display: grid; gap: 0.65rem; }
.prose ul li { display: flex; align-items: flex-start; gap: 0.75rem; }
.prose ul li::before {
	content: '';
	width: 6px; height: 6px;
	margin-block-start: 0.68em;
	flex: none;
	background: var(--crimson);
	transform: rotate(45deg);
	opacity: 0.75;
}
.prose blockquote {
	margin: 2em 0;
	padding: 1.3rem 1.7rem;
	border-inline-start: 2px solid var(--crimson);
	background: var(--crimson-wash);
	color: var(--navy);
}
.prose img { margin-block: 1.6em; border: 1px solid var(--line); }

/* ==========================================================================
   18b. Contact page
   ========================================================================== */

.contact-page {
	display: grid;
	gap: clamp(2rem, 1.4rem + 2.4vw, 3.6rem);
	align-items: start;
}
@media (min-width: 940px) {
	/* Details column first in the source so it leads on mobile, but it sits in
	   the trailing track on desktop so the prose keeps the leading edge. */
	.contact-page { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
	.contact-page__details { order: 2; }
	.contact-page__body { order: 1; }
}

.contact-card {
	position: relative;
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-md);
}

/* The address is not a link, so it must not pick up the hover affordance. */
.contact-row--static { cursor: default; }
.contact-row--static:hover { background: none; }
.contact-row--static:hover .contact-row__icon {
	color: var(--crimson);
	background: none;
	border-color: var(--line-mid);
	transform: none;
}

/* ==========================================================================
   18b2. Office location + map
   ========================================================================== */

.office {
	display: grid;
	gap: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
	align-items: center;
}
@media (min-width: 900px) {
	.office { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}

.office__card {
	position: relative;
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-md);
}

.office__label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 1rem;
}

.office__pin {
	display: grid;
	place-items: center;
	width: 2.55rem;
	height: 2.55rem;
	flex: none;
	color: var(--white);
	background: var(--teal);
	border: 1.5px solid transparent;
	border-radius: 50%;
}
.office__pin svg { width: 1.05rem; height: 1.05rem; }

.office__address {
	font-family: var(--font-en);
	font-weight: 600;
	font-size: clamp(1.05rem, 0.94rem + 0.5vw, 1.3rem);
	line-height: 1.7;
	color: var(--navy);
	margin-block-end: 1.2rem;
}

.office__note { font-size: 0.93rem; color: var(--steel-deep); margin-block-end: 1.4rem; }

/* The embed keeps its aspect ratio and never overflows its column. */
.map-frame {
	position: relative;
	aspect-ratio: 16 / 10;
	min-height: 18rem;
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	background: var(--mist-100);
}
.map-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 599px) {
	.map-frame { aspect-ratio: 4 / 3; min-height: 15rem; }
}

/* ==========================================================================
   18c. Enquiry form
   ========================================================================== */

.enquiry { margin-block-start: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem); }

.enquiry__form {
	display: grid;
	gap: 1.05rem;
	margin-block-start: 1.4rem;
}
@media (min-width: 620px) {
	.enquiry__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.field--wide, .enquiry__actions { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }

.field label {
	font-family: var(--font-head);
	font-weight: var(--w-ui);
	font-size: 0.86rem;
	letter-spacing: 0.02em;
	color: var(--navy);
}
.field .req { color: var(--crimson); }

.field input,
.field select,
.field textarea {
	font: inherit;
	font-size: 0.98rem;
	color: var(--navy);
	padding: 0.82rem 0.95rem;
	background: var(--white);
	border: 1px solid var(--line-mid);
	border-radius: 0;
	transition: border-color 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
	-webkit-appearance: none;
	appearance: none;
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.85; }

/* Native arrow is suppressed above, so draw one that respects RTL. */
.field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B7C9D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m5 8.5 7 7 7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.95rem center;
	background-size: 0.85rem;
	padding-inline-start: 2.6rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--crimson);
	box-shadow: 0 0 0 3px var(--crimson-wash);
}

.field small { font-size: 0.78rem; color: var(--steel); }

.field--captcha input { max-width: 9rem; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.enquiry__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.enquiry__actions {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-wrap: wrap;
	margin-block-start: 0.5rem;
}
.enquiry__privacy { font-size: 0.82rem; color: var(--steel); max-width: 34ch; margin: 0; }

.form-note {
	padding: 0.95rem 1.15rem;
	margin-block-start: 1.2rem;
	font-size: 0.95rem;
	border-inline-start: 3px solid;
}
.form-note--ok  { background: rgba(46, 125, 107, 0.09); border-color: var(--teal); color: #1F5A4C; }
.form-note--err { background: var(--crimson-wash); border-color: var(--crimson); color: var(--crimson-deep); }

/* --- submission receipt, with the reference number ----------------------- */

.enquiry__receipt {
	margin-block-start: 1.2rem;
	padding: 1.35rem 1.5rem;
	background: rgba(46, 125, 107, 0.08);
	/* Physical, not logical: inset-inline-start resolves to the RIGHT edge in
	   RTL, which would put the accent on the wrong side of the panel. */
	border-right: 3px solid var(--teal);
}

.enquiry__thanks {
	margin: 0;
	font-size: 1rem;
	line-height: 2;
	color: #1F5A4C;
}

.enquiry__ticket {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.9rem;
	margin-block-start: 1.1rem;
	padding: 0.85rem 1.05rem;
	background: #fff;
	border: 1px solid rgba(46, 125, 107, 0.28);
}

.enquiry__ticket-label {
	font-size: 0.85rem;
	color: var(--steel);
}

.enquiry__ticket-no {
	/* A reference the client may read aloud, retype, or quote on the phone —
	   so Latin serif with Western digits, never Persian numerals, and never
	   letter-spaced. Selectable on purpose: people copy these. */
	font-family: var(--font-en);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--crimson-deep);
	user-select: all;
}

.enquiry__receipt-note {
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
	line-height: 1.95;
	color: var(--steel);
}

/* ==========================================================================
   18d. Scroll progress
   ========================================================================== */

.scroll-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 200;
	height: 3px;
	pointer-events: none;
	background: rgba(44, 58, 86, 0.07);
}

.scroll-progress__bar {
	display: block;
	height: 100%;
	width: var(--progress, 0%);
	background: linear-gradient(to left, var(--crimson), var(--crimson-soft) 55%, var(--powder-deep));
	box-shadow: 0 0 10px -2px rgba(201, 63, 75, 0.7);
	/* transform would be smoother, but width keeps the gradient from stretching. */
	transition: width 0.08s linear;
}

/* ==========================================================================
   18e. Welcome curtain (front page)
   ========================================================================== */

.welcome {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	background: linear-gradient(168deg, var(--paper-warm), var(--mist-100));
	/* The curtain lifts itself. If JS never runs, this still clears the page. */
	animation: welcome-lift 4.5s var(--ease-out) forwards;
}

.welcome__field {
	position: absolute;
	inset: 0;
	background-image: url('assets/img/girih.svg');
	background-size: 132px 132px;
	opacity: 0.07;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 20%, #000 75%);
}

.welcome__logo {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.55rem;
	padding: var(--gutter);
	text-align: center;
}

.welcome__art {
	width: clamp(6.5rem, 18vw, 9.5rem);
	height: auto;
	animation: welcome-mark 1.3s var(--ease-out) both;
}

.welcome__row {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	direction: rtl;
	margin: 0;
	color: var(--logo-blue);
	white-space: nowrap;
	animation: welcome-rise 0.9s var(--ease-out) 0.6s both;
}

.welcome__fa {
	font-family: var(--font-head);
	font-weight: var(--w-head);
	font-size: clamp(1.15rem, 0.9rem + 1.5vw, 2rem);
	letter-spacing: -0.02em;
}

.welcome__latin {
	direction: ltr;
	font-family: var(--font-en);
	font-weight: 700;
	font-size: clamp(1.2rem, 0.95rem + 1.5vw, 2.1rem);
	letter-spacing: -0.03em;
}

.welcome__tag {
	margin: 0;
	font-family: var(--font-head);
	font-weight: var(--w-ui);
	font-size: clamp(0.8rem, 0.72rem + 0.4vw, 1rem);
	color: var(--crimson);
	animation: welcome-rise 0.9s var(--ease-out) 0.85s both;
}

/* A hairline sweeps under the lockup as the curtain settles. */
.welcome__logo::after {
	content: '';
	display: block;
	width: min(16rem, 60vw);
	height: 1px;
	margin-block-start: 0.4rem;
	background: linear-gradient(to left, transparent, var(--crimson), transparent);
	transform-origin: center;
	animation: welcome-rule 1s var(--ease-out) 1.1s both;
}

@keyframes welcome-mark {
	0%   { opacity: 0; transform: translateY(14px) scale(0.86) rotate(-6deg); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

@keyframes welcome-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@keyframes welcome-rule {
	from { opacity: 0; transform: scaleX(0); }
	to   { opacity: 1; transform: scaleX(1); }
}

@keyframes welcome-lift {
	0%, 78%  { opacity: 1; visibility: visible; }
	100%     { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Dismissed early by JS, or skipped on a repeat visit. */
.welcome.is-done {
	animation: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}

.welcome.is-skipped { display: none; }

@media (prefers-reduced-motion: reduce) {
	/* No theatre: clear it immediately and drop the inner animations. */
	.welcome { animation: none; opacity: 0; visibility: hidden; pointer-events: none; }
	.welcome__art,
	.welcome__row,
	.welcome__tag,
	.welcome__logo::after { animation: none; }
	.scroll-progress__bar { transition: none; }
}

/* ==========================================================================
   19. Reveal animations
   ========================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
	transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Hero reveals on load rather than on scroll. */
.load-in > * { animation: rise 1s var(--ease-out) both; }
.load-in > *:nth-child(1) { animation-delay: 0.08s; }
.load-in > *:nth-child(2) { animation-delay: 0.18s; }
.load-in > *:nth-child(3) { animation-delay: 0.28s; }
.load-in > *:nth-child(4) { animation-delay: 0.38s; }
.load-in > *:nth-child(5) { animation-delay: 0.48s; }

@keyframes rise {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: none; }
}

@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;
	}
	.reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   20. Utilities
   ========================================================================== */

.no-scroll { overflow: hidden; }
.text-center { text-align: center; }
.mt-lg { margin-block-start: clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem); }

/* WordPress core alignment classes */
.alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.wp-caption-text, figcaption {
	margin-block-start: 0.6rem;
	font-size: 0.86rem;
	color: var(--steel);
	text-align: center;
}

/* --- reCAPTCHA ----------------------------------------------------------- */

.field--recaptcha {
	/* Google renders a fixed-width 304px widget that cannot be restyled. Left
	   in an RTL flex row it hangs off the edge on narrow screens, so give it
	   its own block and let it scroll rather than overflow the page. */
	display: block;
	overflow-x: auto;
	padding-block-start: 0.35rem;
}

.field--recaptcha .g-recaptcha {
	/* The widget's own content is LTR regardless of the page. */
	direction: ltr;
	display: inline-block;
}

.enquiry__nojs {
	margin: 0;
	padding: 0.85rem 1.05rem;
	font-size: 0.9rem;
	background: var(--crimson-wash);
	border-right: 3px solid var(--crimson);
	color: var(--crimson-deep);
}

/* Shown only when reCAPTCHA could not load — see theme.js. `hidden` alone is
   overridden by the `display: flex` these fields carry, so restate it. */
.field--captcha[hidden] {
	display: none;
}

/* --- required / optional markers ----------------------------------------- */

.enquiry__legend {
	/* Spans the whole grid so it reads as an instruction for the form, not a
	   caption on the first field. */
	grid-column: 1 / -1;
	margin: 0 0 0.35rem;
	font-size: 0.85rem;
	color: var(--steel);
}

.enquiry__legend .req {
	/* Inline in a sentence here rather than trailing a label, so it needs no
	   left margin — otherwise it drifts away from the words around it. */
	margin: 0;
}

.field label .opt {
	/* Deliberately quiet: "optional" should reassure at a glance, not compete
	   with the field name for attention. */
	font-size: 0.8em;
	font-weight: 400;
	color: var(--steel-soft);
	margin-inline-start: 0.3em;
}

/* --- field-level guidance ------------------------------------------------- */

.field__note {
	/* Sits under the textarea it warns about, not in the footer with the rest
	   of the small print — a caution nobody reads next to the risk is no
	   caution at all. */
	display: block;
	margin-block-start: 0.45rem;
	font-size: 0.82rem;
	line-height: 1.85;
	color: var(--steel);
}