/* ============================================================
   tsl — قالب توسعه صنعت لنجان
   Direction 1a «اقتدار صنعتی»: gold #C9A227 on charcoal #1B1915,
   warm paper #F7F5F0. RTL native. Local fonts only.
   ============================================================ */

/* ---------- Fonts (local woff2, no CDN) ---------- */
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/VazirmatnRegular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/VazirmatnMedium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/VazirmatnSemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/VazirmatnBold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Estedad'; src: url('../fonts/EstedadMedium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Estedad'; src: url('../fonts/EstedadSemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Estedad'; src: url('../fonts/EstedadExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Estedad'; src: url('../fonts/EstedadBlack.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* Latin-1 Supplement + Latin Extended-A companions (accented Latin only --
   Basic Latin is already covered by the faces above). unicode-range keeps
   these fetched only when a page actually renders a character in that
   range, so plain Persian or plain-ASCII English pages never pull them. */
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/VazirmatnRegularLatinExt.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+00A0-00FF, U+0100-017F; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/VazirmatnMediumLatinExt.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+00A0-00FF, U+0100-017F; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/VazirmatnSemiBoldLatinExt.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+00A0-00FF, U+0100-017F; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/VazirmatnBoldLatinExt.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+00A0-00FF, U+0100-017F; }
@font-face { font-family: 'Estedad'; src: url('../fonts/EstedadMediumLatinExt.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+00A0-00FF, U+0100-017F; }
@font-face { font-family: 'Estedad'; src: url('../fonts/EstedadSemiBoldLatinExt.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+00A0-00FF, U+0100-017F; }
@font-face { font-family: 'Estedad'; src: url('../fonts/EstedadExtraBoldLatinExt.woff2') format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+00A0-00FF, U+0100-017F; }
@font-face { font-family: 'Estedad'; src: url('../fonts/EstedadBlackLatinExt.woff2') format('woff2'); font-weight: 900; font-display: swap; unicode-range: U+00A0-00FF, U+0100-017F; }

/* ---------- Tokens ---------- */
:root {
	--charcoal: #1B1915;
	--charcoalDeep: #14120F;
	--footerBg: #181613;
	--paper: #F7F5F0;
	--card: #FFFFFF;
	--line: #E7E2D6;
	--lineDark: #DED8CA;
	--ink: #211E19;
	--mut: #7A7568;
	--mut2: #5C574B;
	--litMut: #B9B3A4;
	--litText: #D8D3C6;
	--litBody: #CFC9BA;
	--gold: #C9A227;
	--goldHover: #DDB53A;
	--goldLight: #D9BC5E;
	--goldPale: #F0D98A;
	--goldLink: #8F7113;
	--goldDeep: #A8861F;
	--chip: #F3EAD2;
	--copyMut: #8C8677;
	--fontBody: 'Vazirmatn', Tahoma, sans-serif;
	--fontHead: 'Estedad', 'Vazirmatn', Tahoma, sans-serif;
	--mHeadH: 90px;
	--radius: 12px;
	--shadowCard: 0 12px 32px rgba(33, 30, 25, .10);
	/* Shared motion scale — one easing family, three speeds */
	--durFast: 150ms;
	--dur: 220ms;
	--durSlow: 500ms;
	--ease: cubic-bezier(.4, 0, .2, 1);
	--easeOut: cubic-bezier(.16, 1, .3, 1);
	--rise: 16px;
	/* Archive filter swap — main.js reads these, so they stay the one source
	   of truth. Out + the capped stagger + in must stay under a second. */
	--durSwapOut: 260ms;
	--durSwapIn: 450ms;
	--swapStagger: 110ms;
	/* Sticky header compression (visible height = bar height minus shrink) */
	--headShrink: 24px;
	--mHeadShrink: 14px;
	/* Physical direction of the two effects CSS cannot express logically:
	   the drawer's off-screen slide and the nav underline's growth origin. */
	--drawerHide: 100%;
	--originInline: right;
}

/* The only rules that must know the physical direction. Everything else is
   written with logical properties and needs no counterpart here. */
[dir="ltr"] {
	--drawerHide: -100%;
	--originInline: left;
}

/* The navigational chevrons (breadcrumb separators, pagination buttons and
   the prev/next project cards) are authored pointing the RTL way; mirror
   the glyphs — not the layout — on the LTR side. */
[dir="ltr"] .crumbs svg,
[dir="ltr"] .pagerTsl .pagerBtn svg,
[dir="ltr"] .pnCard svg {
	transform: scaleX(-1);
}

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

/* Direction comes from the dir attribute WordPress prints on <html>, never
   from CSS, so the same stylesheet serves an LTR translation unchanged.
   Everything below uses logical properties; the few physical ones left are
   marked with why they must stay physical. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 15px/1.9 var(--fontBody);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
/* WebP <picture> wrappers must stay invisible to layout: the real <img> inside keeps every existing size/position rule. */
picture { display: contents; }

h1, h2, h3, h4, h5, h6 { font-family: var(--fontHead); margin: 0; }

p { margin: 0; }

a { color: var(--goldLink); text-decoration: none; transition: color var(--durFast) var(--ease); }
a:hover { color: var(--gold); }

button { font-family: inherit; }

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

svg { flex: 0 0 auto; }

/* Visible keyboard focus per the design system sheet */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.siteHeader :focus-visible,
.hero :focus-visible,
.statStrip :focus-visible,
.secAbout :focus-visible,
.siteFooter :focus-visible,
.mDrawer :focus-visible,
.archHero :focus-visible,
.ctaBand :focus-visible,
.stickyBar :focus-visible { outline-color: var(--goldPale); }

.skipLink {
	position: absolute;
	top: -60px;
	inset-inline-start: 16px;
	z-index: 200;
	background: var(--gold);
	color: var(--charcoal);
	font: 700 14px var(--fontBody);
	padding: 10px 18px;
	border-radius: 0 0 8px 8px;
	transition: top var(--durFast) var(--ease);
}
.skipLink:focus { top: 0; color: var(--charcoal); }

/* Anchor targets land below the pinned header */
#services, #about, #certificates, #projects, #partners, #news, #contact {
	scroll-margin-top: calc(104px - var(--headShrink) + 16px);
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.container { max-width: 1264px; margin-inline: auto; padding-inline: 32px; }

/* Desktop/mobile copy variants */
.mOnly { display: none !important; }

/* ---------- Buttons ---------- */
.btnGold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--gold);
	color: var(--charcoal);
	padding: 14px 26px;
	border-radius: 8px;
	font: 700 15px var(--fontBody);
	transition: background var(--durFast) var(--ease);
}
.btnGold:hover { background: var(--goldHover); color: var(--charcoal); }

.btnOutlineLight {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	font: 600 15px var(--fontBody);
	transition: all var(--durFast) var(--ease);
}
.btnOutlineLight:hover { border-color: var(--gold); color: var(--gold); }

.btnBlock { display: flex; width: 100%; height: 48px; padding: 0 16px; }

/* ============================================================
   Header — utility bar
   ============================================================ */
.topBar {
	background: var(--charcoalDeep);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	position: relative;
	z-index: 110; /* above the sticky main bar so the dropdown drops over it */
}

/* 1px marker between the bars: when it leaves the viewport, the header pins */
.headSentinel {
	position: relative;
	height: 1px;
	margin-bottom: -1px;
	visibility: hidden;
	pointer-events: none;
}
.topBarIn {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font: 500 14px var(--fontBody);
}
.sysNav { display: flex; align-items: center; gap: 20px; }
.sysNav > a, .navDropBtn { color: var(--goldLight); }
.sysNav > a:hover, .navDropBtn:hover { color: var(--goldPale); }
.dotSep { width: 3px; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .25); }

.navDrop { position: relative; display: inline-flex; }
.navDropBtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	font: 500 14px var(--fontBody);
	cursor: pointer;
	transition: color var(--durFast) var(--ease);
}
.dropPanel {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-start: 0;
	background: var(--ink);
	border: 1px solid rgba(201, 162, 39, .4);
	border-radius: 10px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 250px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
	z-index: 95;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all var(--durFast) var(--ease);
}
/* hover bridge across the 8px gap */
.dropPanel::after { content: ""; position: absolute; top: -9px; inset-inline: 0; height: 9px; }
.navDrop:hover .dropPanel,
.navDrop:focus-within .dropPanel,
.navDrop.isOpen .dropPanel { opacity: 1; visibility: visible; transform: translateY(0); }
.dropPanel a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--litText);
	font: 600 13px var(--fontBody);
	padding: 11px 14px;
	border-radius: 8px;
	white-space: nowrap;
}
.dropPanel a:hover { background: rgba(201, 162, 39, .12); color: var(--goldPale); }

.topContact { display: flex; align-items: center; gap: 24px; color: var(--litMut); }
.topItem { display: inline-flex; gap: 7px; align-items: center; }
.topItem svg { color: var(--gold); }
a.topItem { color: var(--litMut); }
a.topItem:hover { color: var(--goldPale); }

/* Language switcher: a physical toggle whose gold thumb is a state
   indicator, never a hover effect. At rest it sits on the current page's
   language; hover/focus only brighten the other label as the invitation.
   A real click hands the thumb over immediately (.isGoing, set by
   main.js) and it holds the target side through the whole navigation
   delay — the motion confirms the click registered and doubles as the
   loading state; the landing page then renders with the thumb already
   there. Fixed-width slots keep the thumb's two stops exact. Selected
   state is thumb + heavier weight, not color alone; aria-current carries
   it for AT. */
.langSwitch { position: relative; display: inline-flex; align-items: center; gap: 2px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 3px; }
.langSwitch::before { content: ""; position: absolute; inset-block: 3px; inline-size: 38px; inset-inline-start: 3px; border-radius: 999px; background: var(--gold); transition: inset-inline-start var(--dur) var(--ease); }
.langSwitch:has(a.isNow:nth-child(2))::before { inset-inline-start: calc(3px + 38px + 2px); }
/* Click-commit: whichever side is .isGoing owns the thumb, current or not. */
.langSwitch:has(a:first-child.isGoing)::before { inset-inline-start: 3px; }
.langSwitch:has(a:nth-child(2).isGoing)::before { inset-inline-start: calc(3px + 38px + 2px); }
.langSwitch a { position: relative; z-index: 1; inline-size: 38px; text-align: center; padding: 2px 0; border-radius: 999px; font: 600 11.5px var(--fontBody); letter-spacing: .03em; color: var(--litMut); transition: color var(--dur) var(--ease); }
/* Letter-spacing would break the joined فا — Latin only. */
.langSwitch a[lang="fa"] { letter-spacing: 0; }
.langSwitch a.isNow { color: var(--charcoal); font-weight: 700; }
/* Hover/focus invitation: the inactive label brightens toward gold; the
   thumb does not move. */
.langSwitch a:not(.isNow):hover,
.langSwitch a:not(.isNow):focus-visible { color: var(--goldPale); }
/* While committing, colors follow the thumb: the target darkens to read
   against the gold and the departing side lightens so it never turns
   charcoal-on-charcoal once the thumb has left. */
.langSwitch.isGoing a.isGoing { color: var(--charcoal); font-weight: 700; }
.langSwitch.isGoing a.isNow:not(.isGoing) { color: var(--litText); }
/* Keyboard focus rings the pill itself; activation is what moves the thumb. */
.langSwitch a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@supports selector(:has(a)) {
	.langSwitch a:focus-visible { outline: none; }
	.langSwitch:has(a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
}
/* Without :has() the thumb cannot follow the active side — fall back to
   the plain gold chip; .isGoing still hands it over on click. */
@supports not selector(:has(a)) {
	.langSwitch::before { content: none; }
	.langSwitch a.isNow { background: var(--gold); }
	.langSwitch.isGoing a.isNow:not(.isGoing) { background: none; color: var(--litMut); }
	.langSwitch.isGoing a.isGoing { background: var(--gold); }
}
.mLangSwitch { margin-bottom: 14px; }

/* A full phone number is one unbreakable, individually tappable unit */
.telLink { white-space: nowrap; color: inherit; }
.telLink:hover { color: var(--goldPale); }

/* ---------- Sticky header ----------
   The whole .siteHeader is the sticky element (children cannot stick beyond
   their parent). Its negative top lets the utility bar scroll away and crops
   the main bar to its compressed height; layout height never changes, so the
   document does not shift at the boundary. */
.siteHeader {
	position: sticky;
	top: calc(-44px - var(--headShrink));
	z-index: 120; /* above the drawer overlay */
}

.mainBar {
	background: var(--charcoal);
	position: relative;
	z-index: 100;
	transition: box-shadow var(--dur) var(--ease);
}
body.headPinned .mainBar { box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.mainBarIn {
	height: 104px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-top: 0;
	transition: padding-top var(--dur) var(--ease);
}
body.headPinned .mainBarIn { padding-top: var(--headShrink); }
.brand { display: inline-flex; align-items: center; }
.brandLogo { height: 86px; width: auto; display: block; transition: height var(--dur) var(--ease); }
body.headPinned .brandLogo { height: 62px; }

.mainNavList { display: flex; align-items: center; gap: 26px; font: 500 16px var(--fontBody); }
.mainNavList a { color: var(--litText); transition: color var(--durFast) var(--ease); }
.mainNavList a:hover { color: #fff; }
.mainNavList .current-menu-item > a,
.mainNavList .current_page_item > a,
.mainNavList .isActive > a { color: var(--gold); font-weight: 700; }
.navCta { padding: 12px 22px; font-size: 14px; }

/* ---------- Mobile header ---------- */
.mHeader {
	display: none;
	background: var(--charcoal);
	padding: 12px 16px;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 120;
	height: var(--mHeadH);
	transition: box-shadow var(--dur) var(--ease), padding-top var(--dur) var(--ease);
}
body.headPinned .mHeader {
	padding-top: calc(12px + var(--mHeadShrink));
	box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.brandLogoM { height: 66px; width: auto; display: block; transition: height var(--dur) var(--ease); }
body.headPinned .brandLogoM { height: 56px; }
.mBtns { display: flex; gap: 10px; }
.mIconBtn {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	cursor: pointer;
	color: #F7F5F0;
	padding: 0;
}
.mPhoneBtn { color: var(--gold); }
.mMenuBtn .icoMenu, .mMenuBtn .icoClose { display: flex; }
.mMenuBtn .icoClose { display: none; color: var(--gold); }
body.drawerOpen .mMenuBtn { border-color: rgba(201, 162, 39, .55); }
body.drawerOpen .mMenuBtn .icoMenu { display: none; }
body.drawerOpen .mMenuBtn .icoClose { display: flex; }

/* ---------- Mobile drawer ---------- */
.mOverlay {
	position: fixed;
	top: var(--mHeadH);
	inset-inline: 0;
	bottom: 0;
	background: rgba(20, 18, 14, .45);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.mDrawer {
	position: fixed;
	top: var(--mHeadH);
	inset-inline-start: 0;
	bottom: 0;
	width: min(330px, 86vw);
	background: var(--charcoal);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	z-index: 110;
	/* transform has no logical axis, so the off-screen direction is a token
	   that flips with the document direction. */
	transform: translateX(var(--drawerHide));
	visibility: hidden;
	transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
body.drawerOpen .mOverlay { opacity: 1; visibility: visible; }
body.drawerOpen .mDrawer { transform: translateX(0); visibility: visible; }
body.drawerOpen { overflow: hidden; }
body.headPinned .mOverlay,
body.headPinned .mDrawer { top: calc(var(--mHeadH) - var(--mHeadShrink)); }

.mNavList { display: flex; flex-direction: column; font: 600 15px var(--fontBody); }
.mNavList a {
	color: var(--litText);
	padding: 13px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	display: block;
}
.mNavList li:last-child a { border-bottom: 0; }
.mNavList .current-menu-item > a,
.mNavList .current_page_item > a,
.mNavList .isActive > a { color: var(--gold); }

.mSysLabel {
	font: 700 12px var(--fontBody);
	color: var(--copyMut);
	letter-spacing: .04em;
	margin: 20px 0 10px;
}
.mSysGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mSysGrid a {
	border: 1px solid rgba(201, 162, 39, .4);
	border-radius: 10px;
	padding: 11px 12px;
	font: 600 12.5px var(--fontBody);
	color: var(--goldLight);
	text-align: center;
}
.mSysGrid a:hover { color: var(--goldPale); border-color: rgba(201, 162, 39, .7); }

.mDrawerFoot { margin-top: auto; padding-top: 24px; }
.mDrawerFoot .btnGold { margin-bottom: 14px; font-size: 14.5px; }
.mDrawerContact { font: 400 12.5px/2 var(--fontBody); color: var(--litMut); }

/* ============================================================
   Hero + stat strip
   ============================================================ */
.hero { position: relative; height: 620px; background: var(--charcoal); }
.heroMedia { position: absolute; inset: 0; overflow: hidden; }
.heroMedia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.heroShade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(27, 25, 21, .25), rgba(27, 25, 21, .82) 55%, rgba(27, 25, 21, .95));
}
/* Ambient particle canvas: above the photo and shade, below the text
   (.heroIn is a later sibling), never catching the pointer. main.js only
   draws while the hero is on screen and the tab is visible. */
.heroFx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.heroIn { position: relative; padding-top: 84px; }

.kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 600 13.5px var(--fontBody);
	color: var(--goldDeep);
}
.kickerLight, .kickerGold { color: var(--gold); font-size: 14px; }
.kickerDash { width: 32px; height: 2px; background: var(--gold); display: inline-block; }

.heroTitle {
	font: 900 46px/1.55 var(--fontHead);
	color: #fff;
	margin: 20px 0 14px;
	max-width: 680px;
}
.heroText { font: 400 16.5px/2 var(--fontBody); color: var(--litBody); max-width: 560px; margin: 0 0 32px; }
.heroBtns { display: flex; gap: 14px; }

.statStrip { position: absolute; inset-inline: 0; bottom: 0; }
.statGrid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: rgba(24, 22, 18, .8);
	border: 1px solid rgba(201, 162, 39, .35);
	border-bottom: none;
	border-radius: 16px 16px 0 0;
	padding: 26px 32px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
/* Micro-moment: once the count-up lands (main.js adds .statShine), a single
   thin gold shimmer sweeps the strip's top hairline in reading direction
   and parks off-canvas. top:-1px overlays the border, which sits outside
   the padding box that anchors the pseudo-element. */
.statGrid.statShine::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(to right, transparent, var(--goldPale) 50%, transparent) no-repeat;
	background-size: 220px 1px;
	animation: tslShimmerRtl 900ms var(--ease) forwards;
}
[dir="ltr"] .statGrid.statShine::after { animation-name: tslShimmerLtr; }
@keyframes tslShimmerRtl {
	from { background-position: calc(100% + 220px) 0; }
	to { background-position: -220px 0; }
}
@keyframes tslShimmerLtr {
	from { background-position: -220px 0; }
	to { background-position: calc(100% + 220px) 0; }
}
.statItem { padding: 0 16px; }
.statItem + .statItem { border-inline-start: 1px solid rgba(255, 255, 255, .12); }
.statNum { font: 800 34px var(--fontHead); color: var(--gold); }
.statLabel { font: 500 13px var(--fontBody); color: var(--litMut); margin-top: 6px; }

/* ============================================================
   Section scaffolding
   ============================================================ */
.secHead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 40px;
	gap: 16px;
}
.secTitle { font: 800 31px var(--fontHead); color: var(--ink); margin-top: 10px; }
.secTitleSm { font-size: 26px; }
.secTitleLight { color: #fff; }
.secLink { font: 600 14px var(--fontBody); color: var(--goldLink); white-space: nowrap; }
.secLink:hover { color: var(--gold); }
.secEmpty { color: var(--mut); }

/* ---------- Services ---------- */
.secServices { padding: 96px 0; }
.svcGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svcCard {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
	transition: all var(--durFast) var(--ease);
}
.svcCard:hover { border-color: var(--gold); box-shadow: var(--shadowCard); transform: translateY(-3px); }
.svcIcon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: var(--chip);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--goldDeep);
	flex: 0 0 auto;
}
.svcCard h3 { font: 600 17px var(--fontHead); margin: 20px 0 10px; }
.svcCard p { font: 400 13.5px/2 var(--fontBody); color: var(--mut); }

/* ---------- About ---------- */
.secAbout { background: var(--charcoal); padding: 96px 0; }
.aboutGrid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 64px;
	align-items: center;
}
.aboutText .secTitle { font-size: 30px; margin: 12px 0 18px; }
.aboutText p { font: 400 15px/2.1 var(--fontBody); color: var(--litMut); margin: 0 0 14px; }
.aboutText p:last-of-type { margin-bottom: 32px; }
.aboutBtns { display: flex; gap: 14px; }
.aboutBtns .btnGold, .aboutBtns .btnOutlineLight { padding: 13px 24px; font-size: 14.5px; }
.aboutMedia { position: relative; }
.aboutFrame {
	position: absolute;
	top: 18px; inset-inline-start: -18px; bottom: -18px; inset-inline-end: 18px;
	border: 1px solid rgba(201, 162, 39, .5);
	border-radius: 16px;
}
.aboutMedia img {
	position: relative;
	width: 100%;
	height: 360px;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

/* ---------- Certificates ---------- */
.secCerts { padding: 72px 0; }
.secCerts .secHead { margin-bottom: 32px; }
.certGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.certCard {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: border-color var(--durFast) var(--ease);
	color: var(--goldDeep);
}
.certCard:hover { border-color: var(--gold); }
.certName { font: 600 14.5px var(--fontBody); color: var(--ink); }
.certSub { font: 400 12.5px var(--fontBody); color: var(--mut); margin-top: 4px; }

/* ---------- Cards (projects and news) ---------- */
.secProjects {
	position: relative;
	background: var(--card);
	border-bottom: 1px solid var(--line);
	padding: 96px 0;
}
.secProjects::before { background: var(--line); }
.projGrid, .newsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.projCard, .newsCard {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: all var(--durFast) var(--ease);
	display: flex;
	flex-direction: column;
}
.projCard { background: var(--paper); }
.newsCard { background: var(--card); }
.projCard:hover, .newsCard:hover { border-color: var(--gold); box-shadow: var(--shadowCard); transform: translateY(-3px); }

.cardThumb { display: block; position: relative; height: 220px; background: #EAE5D8; }
.newsCard .cardThumb { height: 190px; }
.cardThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cardThumbEmpty { position: absolute; inset: 0; background: linear-gradient(135deg, #EFEAE0, #E0D9C8); }

.projCard .cardBody { padding: 20px; }
.newsCard .cardBody { padding: 22px; }
.cardMeta { font: 600 12.5px var(--fontBody); color: var(--goldDeep); }
.cardTitle { font: 600 16.5px/1.8 var(--fontHead); margin: 10px 0 0; }
.newsCard .cardTitle { font-size: 16px; line-height: 1.9; }
.cardTitle a { color: var(--ink); }
.cardTitle a:hover { color: var(--goldLink); }
.cardExcerpt { font: 400 13px/1.9 var(--fontBody); color: var(--mut); margin: 10px 0 0; }
.cardMore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 13px var(--fontBody);
	color: var(--goldLink);
	margin-top: 12px;
	align-self: flex-start;
}
.newsCard .cardMore { font-size: 13.5px; margin-top: 14px; }
.cardMore:hover { color: var(--gold); }

/* ---------- Partners ---------- */
.secPartners { padding: 80px 0; }
.secPartners .secHead { margin-bottom: 32px; }
.partnerGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.partnerCard {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--durFast) var(--ease);
}
.partnerCard:hover { border-color: var(--gold); }
.partnerCard img {
	height: 64px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .85;
	transition: all var(--durFast) var(--ease);
}
.partnerCard:hover img { filter: grayscale(0); opacity: 1; }
/* Slot filled with a name but no logo yet. */
.partnerName {
	height: 64px;
	display: flex;
	align-items: center;
	text-align: center;
	font: 700 14px var(--fontBody);
	color: var(--mut);
}

/* ---------- News section spacing ---------- */
.secNews { padding: 16px 0 96px; }

/* ============================================================
   Footer
   ============================================================ */
.siteFooter { background: var(--footerBg); color: var(--litMut); padding: 72px 0 0; }
.footGrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; }
.footLogo { height: 94px; width: auto; display: block; }
.footAbout { font: 400 13px/2.1 var(--fontBody); margin: 20px 0 24px; }
.footSocial { display: flex; gap: 10px; }
.footSocial a {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gold);
	transition: border-color var(--durFast) var(--ease);
}
.footSocial a:hover { border-color: var(--gold); }
.footTitle { font: 600 15px var(--fontHead); color: #fff; margin: 6px 0 20px; }
.footLinks { display: flex; flex-direction: column; gap: 12px; font: 400 13.5px var(--fontBody); }
.footLinks a { color: var(--litMut); }
.footLinks a:hover { color: var(--gold); }
.footContact { display: flex; flex-direction: column; gap: 14px; font: 400 13.5px/1.9 var(--fontBody); }
.footContactRow { display: flex; gap: 10px; align-items: center; }
.footContactRow svg { color: var(--gold); }
.footAddr { align-items: flex-start; }
.footAddr svg { margin-top: 4px; }

/* Stacked phone numbers: one number per line, never broken inside */
.footPhonesRow { align-items: flex-start; }
.footPhonesRow svg { margin-top: 4px; }
.footPhones { display: flex; flex-direction: column; gap: 4px; }
.footPhones .telLink { color: var(--litMut); align-self: flex-start; }
.footPhones .telLink:hover { color: var(--gold); }

.footBottom { position: relative; margin-top: 56px; }
.footBottom::before { background: rgba(255, 255, 255, .08); }
.footBottomIn {
	padding: 20px 32px;
	display: flex;
	justify-content: space-between;
	font: 400 12.5px var(--fontBody);
	color: var(--copyMut);
}
.footCredit {
	text-align: center;
	font: 400 11.5px var(--fontBody);
	color: #6E695D;
	padding-bottom: 16px;
}
/* The Saturn Designs credit is a real link: a quiet permanent underline
   says clickable at rest, hover warms it to gold while the nav-style
   underline grows in (see the hover-motion block) and the resting line
   fades out beneath it. */
.footCreditLink {
	position: relative;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(110, 105, 93, .55);
	text-underline-offset: 3px;
	transition: color var(--durFast) var(--ease), text-decoration-color var(--durFast) var(--ease);
}
.footCreditLink:hover,
.footCreditLink:focus-visible { color: var(--gold); }

/* ---------- Sticky mobile call bar ---------- */
.stickyBar {
	display: none;
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	background: rgba(20, 18, 15, .97);
	border-top: 1px solid rgba(201, 162, 39, .4);
	padding: 10px 12px;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	z-index: 90;
}
.stickyCall {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--gold);
	color: var(--charcoal);
	height: 48px;
	border-radius: 10px;
	font: 700 14px var(--fontBody);
}
.stickyCall:hover { background: var(--goldHover); color: var(--charcoal); }
.stickyWa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid rgba(201, 162, 39, .55);
	color: var(--gold);
	height: 48px;
	border-radius: 10px;
	font: 700 14px var(--fontBody);
}
.stickyWa:hover { color: var(--goldPale); border-color: var(--gold); }

/* ============================================================
   Archive pages (پروژه‌ها 2a/2b — اخبار 3a/3b)
   ============================================================ */
.archHero {
	background: var(--charcoal);
	border-top: 1px solid rgba(255, 255, 255, .06);
	padding: 56px 0 64px;
}
.crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 500 13px var(--fontBody);
	color: var(--copyMut);
	flex-wrap: wrap;
}
.crumbs a { color: var(--litMut); }
.crumbs a:hover { color: var(--gold); }
.crumbCurrent { color: var(--gold); }

.archHeroIn {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	margin-top: 20px;
}
.archTitle { font: 900 40px/1.6 var(--fontHead); color: #fff; margin: 14px 0 12px; }
.archLead { font: 400 15.5px/2 var(--fontBody); color: var(--litMut); max-width: 640px; }
.archStat { display: flex; align-items: baseline; gap: 12px; flex: 0 0 auto; padding-bottom: 6px; }
.archStatNum { font: 800 44px var(--fontHead); color: var(--gold); }
.archStatLabel { font: 500 14px var(--fontBody); color: var(--litMut); }

/* Filter / sort bar */
.filterBar { background: var(--card); border-bottom: 1px solid var(--line); }
.filterBarIn {
	padding: 20px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.pillRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--line);
	background: var(--card);
	color: #55503F;
	padding: 10px 20px;
	border-radius: 999px;
	font: 600 13.5px var(--fontBody);
	transition: all var(--durFast) var(--ease);
}
.pill:hover { border-color: var(--gold); color: var(--goldLink); }
.pill.isOn { background: var(--gold); border-color: var(--gold); color: var(--charcoal); font-weight: 700; }
.pillCount { font: 600 11.5px var(--fontBody); color: #9A9384; }
.pill.isOn .pillCount { color: var(--charcoal); }
.pillSm { padding: 8px 16px; font-size: 12.5px; }
.filterCount { font: 500 13px var(--fontBody); color: #9A9384; flex: 0 0 auto; }
.sortWrap { display: flex; align-items: center; gap: 12px; }
.sortLabel { font: 600 13.5px var(--fontBody); color: var(--mut); }

.archBody { padding: 64px 0 80px; }

/* Category chip + hover «ادامه مطلب» cover on archive cards */
.cardChip {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	background: rgba(20, 18, 14, .78);
	color: var(--goldLight);
	font: 600 11.5px var(--fontBody);
	padding: 5px 11px;
	border-radius: 999px;
	pointer-events: none;
	z-index: 2;
}
.moreCover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 18, 14, .45);
	opacity: 0;
	transform: translateY(6px);
	transition: all var(--durFast) var(--ease);
	pointer-events: none;
	z-index: 1;
}
.moreCover > span {
	background: var(--gold);
	color: var(--charcoal);
	font: 700 13.5px var(--fontBody);
	padding: 11px 24px;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.cardHasMore:hover .moreCover,
.cardHasMore:focus-within .moreCover { opacity: 1; transform: translateY(0); }

.cardViews {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #9A9384;
	font-weight: 500;
	margin-inline-start: 14px;
}

/* Pagination */
.pagerTsl {
	margin-top: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.pagerBtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--line);
	background: var(--card);
	border-radius: 10px;
	font: 600 13.5px var(--fontBody);
	color: #55503F;
	transition: all var(--durFast) var(--ease);
}
.pagerBtn:hover { border-color: var(--gold); color: var(--goldLink); }
.pagerBtn.isOff { color: #9A9384; pointer-events: none; }
.pagerNum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	background: var(--card);
	border-radius: 10px;
	font: 600 14.5px var(--fontBody);
	color: #55503F;
	transition: all var(--durFast) var(--ease);
}
.pagerNum:hover { border-color: var(--gold); color: var(--goldLink); }
.pagerNum.isNow { background: var(--gold); border-color: var(--gold); color: var(--charcoal); font-weight: 700; }
.pagerDots {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	width: 32px;
	height: 44px;
	font: 600 14.5px var(--fontBody);
	color: #9A9384;
}

/* CTA band (پروژه‌ای در دست دارید؟) */
.ctaBand { background: var(--charcoal); padding: 56px 0; }
.ctaBandIn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}
.ctaBandTitle { font: 800 24px var(--fontHead); color: #fff; margin: 0 0 10px; }
.ctaBandText { font: 400 14.5px/2 var(--fontBody); color: var(--litMut); }
.ctaBandBtns { display: flex; gap: 14px; flex: 0 0 auto; }
.ctaBandBtns .btnGold, .ctaBandBtns .btnOutlineLight { padding: 13px 24px; font-size: 14.5px; }

/* ============================================================
   Single project (2c / 2d)
   ============================================================ */
.detailHero { padding: 48px 0 56px; }
.detailHeroIn {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	margin-top: 18px;
}
.detailTitle { font: 900 34px/1.7 var(--fontHead); color: #fff; margin: 0; max-width: 820px; }
.catPill {
	flex: 0 0 auto;
	background: rgba(201, 162, 39, .16);
	border: 1px solid rgba(201, 162, 39, .45);
	color: var(--goldLight);
	font: 600 13px var(--fontBody);
	padding: 8px 16px;
	border-radius: 999px;
	margin-bottom: 4px;
}

.projSingle { padding: 64px 0 88px; }
.projLayout {
	display: grid;
	grid-template-columns: 560px 1fr;
	gap: 64px;
	align-items: start;
}
.galMain {
	position: relative;
	height: 420px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: #EAE5D8;
}
.galMain img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galThumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.galThumb {
	position: relative;
	height: 88px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--line);
	padding: 0;
	background: #EAE5D8;
	cursor: pointer;
}
.galThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galThumb.isActive { border: 2px solid var(--gold); }

.projContent { margin-bottom: 32px; }
.projContent h2 { font: 800 24px var(--fontHead); color: var(--ink); margin: 10px 0 18px; }
.projContent p { font: 400 15px/2.2 var(--fontBody); color: #55503F; margin: 0 0 14px; }
.projContent p:last-child { margin-bottom: 0; }

.infoCard {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}
.infoRow {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border-bottom: 1px solid #EDE8DC;
}
.infoRow:last-child { border-bottom: 0; }
.infoIcon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--chip);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--goldDeep);
}
.infoLabel { font: 400 12px var(--fontBody); color: var(--mut); }
.infoValue { font: 600 14.5px var(--fontBody); color: var(--ink); margin-top: 3px; }

.projActions { display: flex; gap: 14px; margin-top: 24px; }
.projActions .btnGold { padding: 13px 24px; font-size: 14.5px; }
.btnOutlineDark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 24px;
	border-radius: 8px;
	border: 1px solid var(--ink);
	color: var(--ink);
	font: 600 14.5px var(--fontBody);
	transition: all var(--durFast) var(--ease);
}
.btnOutlineDark:hover { background: var(--ink); color: #fff; }

/* Prev / next cards */
.pnGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.pnCard {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 20px;
	transition: border-color var(--durFast) var(--ease);
	color: var(--goldDeep);
}
.pnCard:hover { border-color: var(--gold); }
.pnCardNext { justify-content: flex-end; text-align: end; }
.pnLabel { font: 400 12px var(--fontBody); color: var(--mut); }
.pnTitle { font: 600 14.5px var(--fontHead); color: var(--ink); margin-top: 4px; }

.relatedStrip { margin-top: 64px; }
.relatedStrip .secHead { margin-bottom: 28px; }

/* ============================================================
   Single news (3c / 3d)
   ============================================================ */
.newsHero { padding: 48px 0 52px; }
.newsTitle { font: 900 32px/1.75 var(--fontHead); color: #fff; margin: 16px 0 18px; max-width: 900px; }
.newsMetaRow {
	display: flex;
	align-items: center;
	gap: 24px;
	font: 500 13.5px var(--fontBody);
	color: var(--litMut);
	flex-wrap: wrap;
}
.newsMetaItem { display: inline-flex; align-items: center; gap: 7px; }
.newsMetaItem svg { color: var(--gold); }

.newsSingle { padding: 56px 0 88px; }
.newsFeature {
	position: relative;
	height: 460px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: #EAE5D8;
}
.newsFeature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.newsColumn { max-width: 820px; margin: 44px auto 0; }
.newsBody p { font: 400 15px/2.3 var(--fontBody); color: #55503F; margin: 0 0 18px; }
.newsBody > p:first-child { font: 500 17px/2.2 var(--fontBody); color: #37332B; margin-bottom: 20px; }
.newsBody h2, .newsBody h3 { font: 800 22px var(--fontHead); color: var(--ink); margin: 28px 0 14px; }
.newsBody img { border-radius: 12px; }

.chipsRow {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 24px;
	margin-top: 32px;
}
.chipsRow::before { background: #E0DACB; }
.chipsLabel { font: 600 13px var(--fontBody); color: var(--mut); }

/* Comment card */
.commentArea { margin-top: 40px; }
.commentCard {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 32px;
}
.commentHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.commentTitle { font: 800 20px var(--fontHead); color: var(--ink); margin: 0; }
.commentNote { font: 500 12.5px var(--fontBody); color: #9A9384; }
.commentFields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 0; }
.commentField { margin: 0; }
.commentCard input[type="text"],
.commentCard input[type="email"] {
	width: 100%;
	height: 52px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	padding: 0 16px;
	font: 400 14px var(--fontBody);
	color: var(--ink);
	box-sizing: border-box;
}
/* Physical on purpose: an address is LTR content whichever way the page runs. */
.commentCard input[type="email"] { text-align: left; direction: ltr; }
.commentTextWrap { margin: 14px 0 0; }
.commentCard textarea {
	width: 100%;
	box-sizing: border-box;
	height: 140px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	padding: 14px 16px;
	font: 400 14px/1.9 var(--fontBody);
	color: var(--ink);
	resize: none;
}
.commentCard input[type="text"]:focus,
.commentCard input[type="email"]:focus,
.commentCard textarea:focus {
	outline: none;
	border-color: var(--gold);
	background: #fff;
}
.commentCookies { margin: 16px 0 20px; }
.commentCookies label {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 400 13px var(--fontBody);
	color: var(--mut);
	cursor: pointer;
}
.commentCookies input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--gold); }
.commentSubmit { margin: 0; }
.commentSend {
	border: 0;
	cursor: pointer;
	padding: 13px 26px;
	font-size: 14.5px;
	gap: 9px;
}
.logged-in-as { font: 400 13px var(--fontBody); color: var(--mut); margin: 12px 0 0; }
.logged-in-as a { color: var(--goldLink); }
.commentCancel a { font: 600 12.5px var(--fontBody); color: var(--goldLink); }

.commentList {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 24px 28px;
	margin-bottom: 24px;
}
.commentListTitle { font: 800 18px var(--fontHead); margin: 0 0 8px; }
.commentItems { list-style: none; margin: 0; padding: 0; }
.commentItems .comment { border-bottom: 1px solid #EDE8DC; padding: 16px 0; }
.commentItems .comment:last-child { border-bottom: 0; }
.commentItems .comment-author { display: flex; align-items: center; gap: 10px; font: 600 14px var(--fontBody); }
.commentItems .comment-author img { border-radius: 99px; }
.commentItems .comment-metadata { font: 400 12px var(--fontBody); color: #9A9384; margin-top: 2px; }
.commentItems .comment-metadata a { color: #9A9384; }
.commentItems .comment-content { font: 400 14px/2 var(--fontBody); color: #55503F; margin-top: 8px; }
.commentItems .reply a { font: 600 12.5px var(--fontBody); color: var(--goldLink); }

/* ============================================================
   Generic inner pages (archives, single) — session-one fallback
   ============================================================ */
.pageHero { background: var(--charcoal); padding: 48px 0; }
.pageTitle { font: 800 32px/1.6 var(--fontHead); color: #fff; }
.pageBody { padding: 56px 32px 96px; }
.archiveGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.singleArticle { max-width: 820px; }
.singleMeta { font: 600 13px var(--fontBody); color: var(--goldDeep); margin-bottom: 18px; }
.singleThumb img { border-radius: var(--radius); }
.singleContent { font: 400 15px/2.1 var(--fontBody); color: var(--ink); }
.singleContent p { margin: 0 0 16px; }
.singleContent img { border-radius: var(--radius); }
.pagerWrap { margin-top: 48px; }
.pagerWrap .nav-links { display: flex; gap: 8px; }
.pagerWrap .page-numbers {
	display: inline-flex;
	min-width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--card);
	font: 600 13px var(--fontBody);
	color: var(--ink);
}
.pagerWrap .page-numbers.current { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }

/* WP core alignment helpers */
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }

/* ============================================================
   Motion system — transform/opacity only
   ============================================================ */

/* Scroll entrances: JS marks below-fold elements, IO reveals them once */
/* Section divider hairlines (.secProjects, .chipsRow, .footBottom carry a
   shared ::before line instead of a border) draw in along the reading
   direction on first reveal. Without JS, or under reduced motion, .linePre
   is never added and the plain line is simply there from the start. */
.secProjects::before,
.chipsRow::before,
.footBottom::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 1px;
	pointer-events: none;
}
.linePre::before { transform: scaleX(0); transform-origin: var(--originInline); }
.linePre.lineIn::before { transform: scaleX(1); transition: transform var(--durSlow) var(--easeOut); }

.preIn { opacity: 0; transform: translateY(var(--rise)); }
.preIn.isIn {
	opacity: 1;
	transform: none;
	transition: opacity var(--durSlow) var(--easeOut), transform var(--durSlow) var(--easeOut);
	transition-delay: var(--stagger, 0ms);
}

/* Hero entrance cascade on load (kicker → title → text → buttons) */
@keyframes heroRise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
.heroContent > * { animation: heroRise var(--durSlow) var(--easeOut) backwards; }
.heroContent > :nth-child(1) { animation-delay: 60ms; }
.heroContent > :nth-child(2) { animation-delay: 180ms; }
.heroContent > :nth-child(3), .heroContent > :nth-child(4) { animation-delay: 300ms; }
.heroContent > :nth-child(5) { animation-delay: 420ms; }

/* Desktop-only hover motion */
@media (hover: hover) and (pointer: fine) {
	.btnGold, .btnOutlineLight, .btnOutlineDark, .stickyCall, .stickyWa {
		transition: background var(--durFast) var(--ease), color var(--durFast) var(--ease), border-color var(--durFast) var(--ease), transform var(--durFast) var(--ease);
	}
	.btnGold:hover, .btnOutlineLight:hover, .btnOutlineDark:hover { transform: translateY(-1px); }

	/* Nav gold underline grows in from the reading side */
	.mainNavList a { position: relative; }
	.mainNavList a::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		bottom: -6px;
		width: 100%;
		height: 2px;
		background: var(--gold);
		transform: scaleX(0);
		transform-origin: var(--originInline);
		transition: transform var(--durFast) var(--ease);
	}
	.mainNavList a:hover::after,
	.mainNavList a:focus-visible::after { transform: scaleX(1); }

	/* Footer credit link: same grow-in underline, sized for the small line. */
	.footCreditLink::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		bottom: -1px;
		width: 100%;
		height: 1px;
		background: var(--gold);
		transform: scaleX(0);
		transform-origin: var(--originInline);
		transition: transform var(--durFast) var(--ease);
	}
	.footCreditLink:hover,
	.footCreditLink:focus-visible { text-decoration-color: transparent; }
	.footCreditLink:hover::after,
	.footCreditLink:focus-visible::after { transform: scaleX(1); }
}

/* Animated archive filtering: outgoing cards fade and shrink, incoming
   cards fade up with a short stagger; the wrapper height is tweened once
   so the grid reflow reads as one motion. */
.gridOut > * {
	opacity: 0;
	transform: scale(.97);
	transition: opacity var(--durSwapOut) var(--ease), transform var(--durSwapOut) var(--ease);
}
.swapIn { opacity: 0; transform: translateY(12px); }
.swapIn.swapGo {
	opacity: 1;
	transform: none;
	transition: opacity var(--durSwapIn) var(--easeOut), transform var(--durSwapIn) var(--easeOut);
	transition-delay: var(--stagger, 0ms);
}
.archSwapWrap { transition: height var(--durSwapIn) var(--ease); overflow: hidden; }

/* Changing hero/header text fades out, swaps, fades back up with the
   cards; the counter simply crossfades. Each direction borrows the card
   duration it travels with, so text and grid stay in step. */
.txtFade { transition: opacity var(--durSwapIn) var(--easeOut), transform var(--durSwapIn) var(--easeOut); }
.txtFade.isOut {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--durSwapOut) var(--ease), transform var(--durSwapOut) var(--ease);
}
.countFade { transition: opacity var(--durSwapIn) var(--easeOut); }
.countFade.isOut { opacity: 0; transition: opacity var(--durSwapOut) var(--ease); }

/* Cross-document view transitions: a fast whole-page crossfade on
   internal navigations; the header keeps its own group and swaps
   instantly so it never flickers. No-support browsers just navigate. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 250ms; animation-timing-function: var(--ease); }
.siteHeader { view-transition-name: tsl-header; }
::view-transition-group(tsl-header) { animation-duration: 0s; }
::view-transition-old(tsl-header),
::view-transition-new(tsl-header) { animation: none; }

/* Language switches carry their own transition type (added in main.js via
   pageswap/pagereveal). An RTL⇄LTR flip must never show both directions
   blended mid-frame, so instead of the straight crossfade the old side
   fades fully out into the page background and the new side fades in from
   it — slightly longer and softer than a regular navigation. The header
   joins the fade here: its usual instant swap would flip direction while
   the rest of the page is still mid-fade. */
html:active-view-transition-type(lang-switch)::view-transition { background: var(--paper); }
html:active-view-transition-type(lang-switch)::view-transition-old(root),
html:active-view-transition-type(lang-switch)::view-transition-old(tsl-header) { animation: tslLangOut 220ms var(--easeOut) both; }
html:active-view-transition-type(lang-switch)::view-transition-new(root),
html:active-view-transition-type(lang-switch)::view-transition-new(tsl-header) { animation: tslLangIn 300ms var(--easeOut) 200ms both; }
@keyframes tslLangOut { to { opacity: 0; } }
@keyframes tslLangIn { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.heroContent > * { animation: none; }
	.heroFx { display: none; }
	.preIn { opacity: 1; transform: none; }
	.gridOut > * { opacity: 1; transform: none; }
	.swapIn { opacity: 1; transform: none; }
	.txtFade, .txtFade.isOut { opacity: 1; transform: none; transition: none; }
	.countFade, .countFade.isOut { opacity: 1; transition: none; }
	@view-transition { navigation: none; }
}

/* ============================================================
   Batch 2 pages — گواهینامه‌ها (4a/4b)، درباره ما (8a/8b)، ارتباط با ما (9a/9b)
   ============================================================ */

/* Shared: kicker sits between the crumbs and the h1 on simple page heroes */
.pageKicker { margin-top: 18px; }

.isDisabled { pointer-events: none; opacity: .55; }

/* ---------- Certificates ---------- */
.certPageGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.certSheet {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	transition: all var(--durFast) var(--ease);
}
.certSheet:hover { border-color: var(--gold); box-shadow: var(--shadowCard); transform: translateY(-3px); }
.certScan { position: relative; height: 400px; background: #F0EDE5; }
.certScan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.certScanEmpty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #9A9384;
	font: 500 12.5px var(--fontBody);
}
.certSheetBody { padding: 22px; }
.certSheetTitle { font: 600 17px var(--fontHead); color: var(--ink); margin: 0 0 6px; }
.certSheetSub { font: 400 13px var(--fontBody); color: var(--mut); }
.certChipRow { display: flex; align-items: center; gap: 8px; margin: 14px 0 18px; }
.certChip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #F0EDE5;
	color: var(--mut);
	font: 600 12px var(--fontBody);
	padding: 6px 12px;
	border-radius: 999px;
}
.certChipOk { background: #F3EAD2; color: var(--goldLink); }
.certActions { display: flex; gap: 10px; }
.certView { flex: 1; justify-content: center; height: 44px; padding: 0 12px; font-size: 13px; }
.certPdf { height: 44px; padding: 0 16px; font-size: 13px; }

/* ---------- About page ---------- */
.aboutPage { padding: 72px 0 0; }
.aboutPageGrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.aboutLead { font: 500 16.5px/2.2 var(--fontBody); color: #37332B; margin: 0 0 16px; }
.aboutPara { font: 400 15px/2.2 var(--fontBody); color: #55503F; margin: 0 0 28px; }
.missionCard { background: var(--charcoal); border-radius: 12px; padding: 28px 32px; }
.missionLabel { font: 600 13px var(--fontBody); color: var(--gold); margin-bottom: 10px; }
.missionCard p { font: 500 15.5px/2.2 var(--fontBody); color: var(--litText); margin: 0; }
.aboutPageBtns { display: flex; gap: 14px; margin-top: 28px; }
.aboutPageMedia { position: relative; }
.aboutPageMedia .aboutFrame {
	position: absolute;
	top: 18px;
	inset-inline-start: -18px;
	bottom: -18px;
	inset-inline-end: 18px;
	border: 1px solid rgba(201, 162, 39, .5);
	border-radius: 16px;
}
.aboutPageMedia img {
	position: relative;
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 16px;
}
.svcChecklistWrap { margin-top: 80px; }
.svcChecklistHead { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.svcChecklistHead h2 { font: 800 28px var(--fontHead); color: var(--ink); margin: 0; }
.svcChecklistRule { flex: 1; height: 1px; background: #E0DACB; }
.svcChecklistCount { font: 600 13px var(--fontBody); color: #9A9384; white-space: nowrap; }
.svcChecklist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.svcCheckRow {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 16px 18px;
}
.svcCheckRow svg { color: var(--goldDeep, #A8861F); flex: 0 0 auto; margin-top: 3px; }
.svcCheckRow span { font: 500 14px/1.9 var(--fontBody); color: #37332B; }
.statBand { background: var(--charcoal); margin-top: 80px; }
.statBandIn { display: grid; grid-template-columns: repeat(5, 1fr); padding: 40px 0; }
.statBandItem { padding: 0 24px; }
.statBandItem + .statBandItem { border-inline-start: 1px solid rgba(255, 255, 255, .12); }
.statBandNum { font: 800 34px var(--fontHead); color: var(--gold); }
.statBandLabel { font: 500 13px var(--fontBody); color: var(--litMut); margin-top: 6px; }

/* ---------- Contact page ---------- */
.mapWrap { padding-top: 32px; }
.mapStrip {
	position: relative;
	height: 420px;
	background: #E8E4DB;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.mapStrip iframe { display: block; width: 100%; height: 100%; border: 0; }
.mapDirBtn {
	position: absolute;
	top: 16px;
	/* Physical on purpose: the embed puts its own controls at the top left in
	   both directions, so the button stays clear of them on the right. */
	right: 16px;
	z-index: 2;
	background: #fff;
	height: 44px;
	padding: 0 18px;
	font-size: 13.5px;
	box-shadow: 0 6px 20px rgba(33, 30, 25, .18);
}
.mapDirBtn:hover { background: var(--ink); color: #fff; }
.mapPin {
	position: absolute;
	/* Physical, but symmetric: the edge is pinned to the centre and the
	   translate pulls it back by half its width, which centres either way. */
	right: 50%;
	top: 50%;
	transform: translate(50%, -100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	pointer-events: none;
}
.mapPinChip {
	background: var(--charcoal);
	color: var(--gold);
	font: 600 12.5px var(--fontBody);
	padding: 8px 14px;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
	white-space: nowrap;
}
.contactBody { padding: 64px 0 80px; }
.contactLayout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.contactFormCard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 36px; }
.contactFormCard h2 { font: 800 22px var(--fontHead); color: var(--ink); margin: 0 0 6px; }
.contactFormNote { font: 400 13.5px/2 var(--fontBody); color: var(--mut); margin: 0 0 24px; }
.formNotice { border-radius: 10px; padding: 14px 16px; font: 500 13.5px/1.9 var(--fontBody); margin-bottom: 18px; }
.formNoticeOk { background: #F3EAD2; color: #6E5710; border: 1px solid rgba(201, 162, 39, .5); }
.formNoticeErr { background: #F7E9E4; color: #8A3B22; border: 1px solid #E4C4B7; }
.contactForm .formRow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contactForm input[type="text"],
.contactForm textarea {
	width: 100%;
	box-sizing: border-box;
	height: 52px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	padding: 0 16px;
	font: 400 14px var(--fontBody);
	color: var(--ink);
	outline: none;
	transition: border-color var(--durFast) var(--ease), background var(--durFast) var(--ease);
}
.contactForm input[type="text"] { margin-top: 0; }
.contactForm > input[type="text"] { margin-top: 14px; }
.contactForm textarea { height: 150px; padding: 14px 16px; line-height: 1.9; resize: none; margin-top: 14px; }
.contactForm input[type="text"]:focus,
.contactForm textarea:focus { border-color: var(--gold); background: #fff; }
.contactSend { margin-top: 20px; padding: 14px 28px; font-size: 14.5px; }
/* Honeypot: visually removed, still in the DOM for bots */
.hpField {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	margin: -1px;
}
.contactInfoCol { display: flex; flex-direction: column; gap: 16px; }
.contactInfoCard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 22px;
	display: flex;
	gap: 14px;
}
.contactInfoIcon {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: #F3EAD2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--goldDeep, #A8861F);
}
.contactInfoTitle { font: 600 14.5px var(--fontHead); color: var(--ink); }
.contactInfoCard p { font: 400 13.5px/2.1 var(--fontBody); color: #55503F; margin: 6px 0 0; }
.contactPhones { display: flex; flex-direction: column; gap: 2px; }
.contactPhones .telLink { color: #55503F; font-weight: 500; }
.contactPhones .telLink:hover { color: var(--goldLink); }
.contactMail { color: #55503F; font-weight: 500; }
.contactMail:hover { color: var(--goldLink); }
.contactChatBtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contactWa,
.contactTg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 52px;
	border-radius: 10px;
	font: 700 13.5px var(--fontBody);
	transition: all var(--durFast) var(--ease);
}
.contactWa { background: var(--charcoal); color: var(--gold); }
.contactWa:hover { background: #14120F; }
.contactTg { border: 1px solid var(--charcoal); color: var(--ink); }

/* ============================================================
   Batch 3 pages — پرتال کارکنان (5a/5b)، استعلام‌ها (7a/7b)، ارسال فایل (10a/10b)
   ============================================================ */

/* Utility bar: current page highlight (bold pale gold per artboards) */
.sysNav a.isNow,
.navDropBtn.isNow { color: var(--goldPale); font-weight: 700; }

/* ---------- Gateway ---------- */
.portalBody { padding: 64px 0 80px; }
.portalGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.portalCard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 32px; }
.portalCardHead { display: flex; align-items: center; gap: 16px; }
.portalIcon {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: #F3EAD2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--goldDeep, #A8861F);
}
.portalCardHead h2 { font: 800 19px var(--fontHead); color: var(--ink); margin: 0 0 4px; }
.portalSub { font: 400 13px var(--fontBody); color: var(--mut); }
.portalChips { display: flex; align-items: center; gap: 8px; margin: 20px 0; }
.portalEnter { width: 100%; justify-content: center; height: 52px; font-size: 14.5px; }
.portalSysList { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.portalSysRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 14px 16px;
	font: 600 13.5px var(--fontBody);
	color: #37332B;
	transition: border-color var(--durFast) var(--ease), color var(--durFast) var(--ease);
}
.portalSysRow:hover { border-color: var(--gold); color: var(--goldLink); }
.helpStrip {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #F3EAD2;
	border-radius: 12px;
	padding: 16px 20px;
	font: 500 13px/1.9 var(--fontBody);
	color: #5C4A0E;
	margin-top: 24px;
}
.helpStrip svg { flex: 0 0 auto; color: var(--goldLink); }
.helpStrip .telLink { color: inherit; font-weight: 700; }
.helpStrip .telLink:hover { color: var(--goldLink); }

/* ---------- Inquiries ---------- */
.stepsStrip { background: #fff; border-bottom: 1px solid var(--line); }
.stepsStripIn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px 0; }
.stepItem { display: flex; align-items: center; gap: 14px; }
.stepNum {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #F3EAD2;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 800 17px var(--fontHead);
	color: var(--goldDeep, #A8861F);
	flex: 0 0 auto;
}
.stepItem > span:last-child { font: 500 13.5px/1.9 var(--fontBody); color: #55503F; }
.inqBody { padding: 56px 0 80px; }
.inqList { display: flex; flex-direction: column; gap: 16px; }
.inqRow {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 24px 28px;
	display: flex;
	align-items: center;
	gap: 20px;
	transition: border-color var(--durFast) var(--ease);
}
.inqRow:hover { border-color: var(--gold); }
.inqIcon {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: #F3EAD2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--goldDeep, #A8861F);
}
.inqMain { flex: 1; min-width: 0; }
.inqMain h3 { font: 600 17px var(--fontHead); color: var(--ink); margin: 0 0 8px; }
.inqMeta { display: flex; align-items: center; gap: 16px; font: 500 12.5px var(--fontBody); color: var(--mut); flex-wrap: wrap; }
.inqMetaItem { display: inline-flex; align-items: center; gap: 6px; }
.inqMetaItem svg { color: var(--goldDeep, #A8861F); }
.inqChip {
	display: inline-flex;
	align-items: center;
	background: #F3EAD2;
	color: var(--goldLink);
	font: 700 11.5px var(--fontBody);
	padding: 5px 12px;
	border-radius: 999px;
}
.inqActions { display: flex; gap: 10px; flex: 0 0 auto; }
.inqActions .btnGold,
.inqActions .btnOutlineDark { height: 46px; padding: 0 20px; font-size: 13.5px; }
.helpStripInfo { margin-top: 8px; }

/* ---------- Send file ---------- */
.sendBody { padding: 64px 0 80px; }
.sendLayout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.uploadCard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 36px; }
.uploadForm .fieldWrap { margin-top: 16px; }
.uploadForm .formRow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.uploadForm .formRow2 .fieldWrap { margin-top: 0; }
.uploadForm label { display: block; font: 600 13px var(--fontBody); color: #55503F; margin-bottom: 8px; }
.reqStar { color: var(--goldDeep, #A8861F); }
.uploadForm input[type="text"],
.uploadForm textarea {
	width: 100%;
	box-sizing: border-box;
	height: 52px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	padding: 0 16px;
	font: 400 14px var(--fontBody);
	color: var(--ink);
	outline: none;
	transition: border-color var(--durFast) var(--ease), background var(--durFast) var(--ease);
}
.uploadForm textarea { height: 130px; padding: 14px 16px; line-height: 1.9; resize: none; }
.uploadForm input[type="text"]:focus,
.uploadForm textarea:focus { border-color: var(--gold); background: #fff; }
.dropZone {
	border: 2px dashed #D9C88F;
	border-radius: 10px;
	background: #FDFBF5;
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--durFast) var(--ease), background var(--durFast) var(--ease);
}
.dropZone:hover,
.dropZone.isOver { border-color: var(--gold); }
.dropZone.isOver { background: #FBF6E6; }
.dropZone svg { color: var(--goldDeep, #A8861F); }
.dropMain { font: 600 14px var(--fontBody); color: #37332B; }
.dropSub { font: 400 12.5px var(--fontBody); color: #9A9384; }
/* Physical on purpose: file names read LTR whichever way the page runs. */
.dropPicked { font: 600 13px var(--fontBody); color: var(--goldLink); direction: ltr; }
.uploadForm .fieldWrap:focus-within .dropZone { border-color: var(--gold); outline: 2px solid var(--goldPale); outline-offset: 2px; }
.upNote { font: 500 12.5px/1.9 var(--fontBody); color: #8A3B22; margin: 8px 0 0; }
.upProgress {
	height: 8px;
	border-radius: 99px;
	background: #EFEAE0;
	margin-top: 18px;
	overflow: hidden;
}
.upFill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: var(--gold);
	transition: width var(--durFast) linear;
}
.uploadSend { margin-top: 22px; padding: 14px 30px; font-size: 14.5px; }
.sendSideCol { display: flex; flex-direction: column; gap: 16px; }
.sendSideCol .helpStrip { margin-top: 0; }
.guideCard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.guideCard h3 { font: 600 15.5px var(--fontHead); color: var(--ink); margin: 0 0 14px; }
.guideList { display: flex; flex-direction: column; gap: 12px; }
.guideRow { display: flex; gap: 10px; font: 400 13.5px/2 var(--fontBody); color: #55503F; }
.guideRow svg { flex: 0 0 auto; margin-top: 5px; color: var(--goldDeep, #A8861F); }
.promoCard {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--charcoal);
	border-radius: 12px;
	padding: 22px;
	transition: background var(--durFast) var(--ease);
}
.promoCard:hover { background: #14120F; }
.promoIcon {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: rgba(201, 162, 39, .15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--gold);
}
.promoTitle { display: block; font: 600 14.5px var(--fontHead); color: #fff; }
.promoSub { display: block; font: 400 12.5px var(--fontBody); color: var(--litMut); margin-top: 4px; }

/* ============================================================
   Search and not found
   ============================================================ */
.searchForm { display: flex; align-items: center; gap: 6px; }
.searchForm input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	font: 400 13.5px var(--fontBody);
	color: var(--ink);
	transition: border-color var(--durFast) var(--ease);
}
.searchForm input[type="search"]::placeholder { color: var(--mut); }
.searchForm input[type="search"]:focus { outline: none; border-color: var(--gold); }
.searchForm button {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 10px;
	background: var(--gold);
	color: var(--charcoal);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--durFast) var(--ease);
}
.searchForm button:hover { background: var(--goldPale, #F0D98A); }

/* Top bar: compact field between the systems nav and the contact cluster. */
.topSearch { flex: 0 1 220px; }
.topSearch .searchForm input[type="search"] {
	height: 30px;
	padding: 0 10px;
	font-size: 12.5px;
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	color: var(--litText);
}
.topSearch .searchForm input[type="search"]::placeholder { color: rgba(255, 255, 255, .45); }
.topSearch .searchForm input[type="search"]:focus { border-color: var(--gold); background: rgba(255, 255, 255, .1); }
.topSearch .searchForm button { width: 30px; height: 30px; border-radius: 8px; }

/* Drawer: full width above the systems grid. */
.mSearch { margin: 16px 0 4px; }

.searchBar .searchForm { flex: 0 1 340px; }
.resultCard .cardBody { padding-top: 22px; }
.resultExcerpt { font: 400 13px/2 var(--fontBody); color: var(--mut); margin: 8px 0 0; }

.searchEmpty {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 48px 32px;
	text-align: center;
}
.searchEmptyIcon {
	display: inline-flex;
	width: 68px;
	height: 68px;
	border-radius: 99px;
	background: rgba(201, 162, 39, .12);
	color: var(--gold);
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.searchEmpty p { font: 400 14.5px/2 var(--fontBody); color: var(--mut); margin: 0 auto 22px; max-width: 520px; }

.notFoundCard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 36px;
	max-width: 760px;
	margin: 0 auto;
}
.notFoundSearch h2 { font: 800 18px var(--fontHead); color: var(--ink); margin: 0 0 14px; }
.notFoundLinks { margin-top: 28px; }
.notFoundLinksLabel { font: 600 13px var(--fontBody); color: var(--mut); margin-bottom: 12px; }
.notFoundMenu {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.notFoundMenu a {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 99px;
	font: 600 13.5px var(--fontBody);
	color: var(--ink);
	transition: all var(--durFast) var(--ease);
}
.notFoundMenu a:hover { border-color: var(--gold); color: var(--goldDeep, #A8861F); }
.notFoundCard .helpStrip { margin-top: 26px; }

@media (max-width: 991px) {
	.topSearch { display: none; }
	.searchBar .filterBarIn { flex-direction: column; align-items: stretch; gap: 10px; }
	.searchBar .searchForm { flex: 1 1 auto; }
}

@media (max-width: 767px) {
	.notFoundCard { padding: 20px; }
	.notFoundSearch h2 { font-size: 16px; }
	.notFoundMenu a { height: 36px; padding: 0 13px; font-size: 12.5px; }
	.searchEmpty { padding: 32px 18px; }
	.searchEmpty p { font-size: 13px; }
	.searchEmptyIcon { width: 56px; height: 56px; }
}

@media (max-width: 991px) {
	.portalGrid { grid-template-columns: 1fr; gap: 14px; }
	.stepsStripIn { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
	.sendLayout { grid-template-columns: 1fr; gap: 16px; }
	.inqRow { flex-wrap: wrap; }
	.inqActions { width: 100%; }
	.inqActions .btnGold, .inqActions .btnOutlineDark { flex: 1; justify-content: center; }
}

@media (max-width: 767px) {
	.portalBody, .inqBody, .sendBody { padding: 20px 0 28px; }
	.portalCard { padding: 20px; }
	.portalCardHead h2 { font-size: 16px; }
	.portalIcon { width: 46px; height: 46px; }
	.portalEnter { height: 48px; font-size: 14px; }
	.portalSysRow { padding: 13px 14px; font-size: 12.5px; }
	.helpStrip { padding: 14px 16px; font-size: 12px; margin-top: 14px; }
	.stepNum { width: 38px; height: 38px; font-size: 15px; }
	.stepItem > span:last-child { font-size: 12.5px; }
	.inqRow { padding: 16px; gap: 12px; }
	.inqIcon { width: 44px; height: 44px; }
	.inqMain h3 { font-size: 14.5px; }
	.inqMeta { gap: 10px; font-size: 11.5px; }
	.uploadCard { padding: 20px; }
	.uploadForm .formRow2 { grid-template-columns: 1fr; gap: 12px; }
	.uploadForm .formRow2 .fieldWrap + .fieldWrap { margin-top: 0; }
	.uploadForm input[type="text"], .uploadForm textarea { height: 50px; font-size: 13.5px; }
	.uploadForm textarea { height: 110px; }
	.dropZone { padding: 24px 16px; }
	.uploadSend { width: 100%; justify-content: center; height: 48px; }
	.guideCard { padding: 18px; }
	.promoCard { padding: 18px; }
}

@media (max-width: 991px) {
	.certPageGrid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.aboutPageGrid { grid-template-columns: 1fr; gap: 32px; }
	.aboutPageMedia .aboutFrame { display: none; }
	.svcChecklist { grid-template-columns: 1fr; }
	.statBandIn { grid-template-columns: 1fr 1fr; gap: 24px 0; }
	/* Two per row, so every row opener drops the divider; the fifth spans. */
	.statBandItem:nth-child(odd) { border-inline-start: 0; }
	.statBandItem:nth-child(5) { grid-column: 1 / -1; text-align: center; }
	.contactLayout { grid-template-columns: 1fr; gap: 24px; }
	.contactInfoCol { order: -1; }
	.mapStrip { height: 320px; }
}

@media (max-width: 767px) {
	.certPageGrid { grid-template-columns: 1fr; gap: 14px; }
	.certScan { height: 300px; }
	.certSheetBody { padding: 16px; }
	.certSheetTitle { font-size: 15px; margin-bottom: 4px; }
	.certSheetSub { font-size: 12px; }
	.certChipRow { margin: 12px 0 14px; }
	.certActions { gap: 8px; }
	.certView, .certPdf { font-size: 12.5px; }

	.aboutPage { padding: 20px 0 0; }
	.aboutLead { font-size: 13.5px; margin-bottom: 12px; }
	.missionCard { padding: 20px; }
	.missionCard p { font-size: 13px; }
	.aboutPageBtns { margin-top: 14px; }
	.aboutPageBtns .btnGold { flex: 1; justify-content: center; height: 48px; font-size: 14px; }
	.aboutPageMedia img { height: 210px; border-radius: 12px; }
	.aboutPageGrid { gap: 14px; }
	.svcChecklistWrap { margin-top: 28px; }
	.svcChecklistHead { margin-bottom: 14px; }
	.svcChecklistHead h2 { font-size: 18px; }
	.svcCheckRow { padding: 13px 14px; }
	.svcCheckRow span { font-size: 12.5px; }
	.statBand { margin-top: 24px; background: none; }
	.statBand .container { padding: 0 16px; }
	.statBandIn { background: var(--charcoal); border-radius: 12px; padding: 20px; gap: 16px; }
	.statBandItem { padding: 0; }
	.statBandItem + .statBandItem { border-inline-start: 0; }
	.statBandNum { font-size: 24px; }
	.statBandLabel { font-size: 11.5px; margin-top: 4px; }

	.mapWrap { padding-top: 16px; }
	.mapStrip { height: 240px; }
	.mapDirBtn { top: 12px; right: 12px; height: 38px; padding: 0 12px; font-size: 12px; }
	.mapPinChip { font-size: 11.5px; padding: 7px 12px; }
	.contactBody { padding: 20px 0 28px; }
	.contactLayout { gap: 12px; }
	.contactInfoCol { gap: 12px; }
	.contactInfoCard { padding: 16px; gap: 12px; }
	.contactInfoIcon { width: 42px; height: 42px; }
	.contactFormCard { padding: 20px; }
	.contactFormCard h2 { font-size: 17px; }
	.contactForm .formRow2 { grid-template-columns: 1fr; gap: 12px; }
	.contactForm input[type="text"], .contactForm textarea { height: 50px; font-size: 13.5px; }
	.contactForm > input[type="text"] { margin-top: 12px; }
	.contactForm textarea { height: 110px; margin-top: 12px; }
	.contactSend { width: 100%; justify-content: center; height: 48px; margin-top: 16px; }
}

/* ============================================================
   Breakpoint: below 1240 — fluid container
   ============================================================ */
@media (max-width: 1239px) {
	.heroTitle { font-size: 40px; }
	.mainBarIn { gap: 20px; }
	.mainNavList { gap: 18px; font-size: 15px; }
}

/* ============================================================
   Breakpoint: below 992 — mobile header, static stat tiles
   ============================================================ */
@media (max-width: 991px) {
	.topBar, .mainBar { display: none; }
	.mHeader { display: flex; }
	.siteHeader { top: calc(-1 * var(--mHeadShrink)); }

	/* Hero becomes a flowing block: media band, content overlay, then stat tiles */
	.hero { height: auto; }
	.heroMedia { position: relative; height: 520px; }
	.heroIn {
		position: absolute;
		top: 0;
		inset-inline: 0;
		height: 520px;
		padding-top: 64px;
	}
	.heroTitle { font-size: 36px; max-width: 560px; }

	.statStrip { position: static; background: var(--charcoal); padding: 16px; }
	.statStrip .container { padding-inline: 0; max-width: none; }
	.statGrid {
		background: none;
		border: 0;
		border-radius: 0;
		padding: 0;
		gap: 12px;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.statItem {
		background: rgba(255, 255, 255, .05);
		border: 1px solid rgba(201, 162, 39, .35);
		border-radius: 12px;
		padding: 16px;
	}
	.statItem + .statItem { border-inline-start: 1px solid rgba(201, 162, 39, .35); }
	/* Five tiles on tablets: three across, the last two centered beneath them. */
	.statGrid { grid-template-columns: repeat(6, 1fr); }
	.statItem { grid-column: span 2; }
	.statItem:nth-child(4) { grid-column: 2 / span 2; }
	.statNum { font-size: 28px; }
	.statLabel { font-size: 12px; margin-top: 4px; }

	.svcGrid { grid-template-columns: repeat(2, 1fr); }
	.certGrid { grid-template-columns: repeat(2, 1fr); }
	.projGrid, .newsGrid, .archiveGrid { grid-template-columns: repeat(2, 1fr); }
	.partnerGrid { grid-template-columns: repeat(3, 1fr); }

	.aboutGrid { grid-template-columns: 1fr; gap: 40px; }
	.aboutMedia img { height: 320px; }

	.footGrid { grid-template-columns: 1fr 1fr; gap: 40px; }

	/* Batch 1 pages */
	.projLayout { grid-template-columns: 1fr; gap: 40px; }
	.galMain { height: 360px; }
	.newsFeature { height: 380px; }
	.detailTitle { font-size: 28px; }
	.archTitle { font-size: 34px; }

	/* Anchor targets under the pinned mobile header */
	#services, #about, #certificates, #projects, #partners, #news, #contact {
		scroll-margin-top: calc(var(--mHeadH) - var(--mHeadShrink) + 16px);
	}
}

/* Admin bar offsets for the sticky mobile header and drawer */
@media (max-width: 991px) {
	body.admin-bar .mHeader { top: 32px; }
	body.admin-bar .mOverlay, body.admin-bar .mDrawer { top: calc(var(--mHeadH) + 32px); }
}
@media (max-width: 782px) {
	body.admin-bar .mHeader { top: 46px; }
	body.admin-bar .mOverlay, body.admin-bar .mDrawer { top: calc(var(--mHeadH) + 46px); }
}

/* ============================================================
   Breakpoint: below 768 — the 390 mobile artboard
   ============================================================ */
@media (max-width: 767px) {
	.dOnly { display: none !important; }
	.mOnly { display: revert !important; }
	span.mOnly, a.mOnly { display: inline !important; }

	body { padding-bottom: 68px; } /* room for the sticky bar */
	.container { padding-inline: 16px; }

	.stickyBar { display: grid; }

	/* Hero */
	.heroMedia { height: 460px; }
	.heroShade { background: linear-gradient(to bottom, rgba(27, 25, 21, .4), rgba(27, 25, 21, .92) 75%); }
	.heroIn {
		height: 460px;
		padding: 0;
		display: flex;
		align-items: flex-end;
	}
	.heroContent { width: 100%; padding: 0 16px 20px; }
	.kickerLight { font-size: 12.5px; gap: 8px; }
	.kickerDash { width: 24px; }
	.heroTitle { font-size: 27px; line-height: 1.65; margin: 12px 0 10px; }
	.heroText { font-size: 13.5px; margin-bottom: 18px; }
	.heroBtns { flex-direction: column; gap: 10px; }
	.heroBtns .btnGold, .heroBtns .btnOutlineLight {
		width: 100%;
		height: 48px;
		padding: 0 16px;
		font-size: 14.5px;
	}

	/* Phones: 2×2 tiles with the fifth centered across the last row. */
	.statGrid { grid-template-columns: 1fr 1fr; }
	.statItem, .statItem:nth-child(4) { grid-column: auto; }
	.statItem:nth-child(5) { grid-column: 1 / -1; text-align: center; }
	.statNum { font-size: 26px; }

	/* Sections */
	.secHead { margin-bottom: 16px; align-items: baseline; }
	.kicker { font-size: 12.5px; }
	.secTitle { font-size: 20px; margin-top: 8px; }
	.secLink { font-size: 12.5px; }

	.secServices { padding: 48px 0 8px; }
	.secServices .secTitle { font-size: 23px; margin: 8px 0 4px; }
	.secServices .secHead { margin-bottom: 20px; }
	.svcGrid { grid-template-columns: 1fr; gap: 12px; }
	.svcCard { padding: 18px; display: flex; gap: 14px; align-items: flex-start; }
	.svcCard:hover { transform: none; box-shadow: none; }
	.svcIcon { width: 44px; height: 44px; border-radius: 10px; }
	.svcIcon svg { width: 22px; height: 22px; }
	.svcCard h3 { font-size: 15px; margin: 0 0 6px; }
	.svcCard p { font-size: 12.5px; line-height: 1.9; }

	.secAbout { margin-top: 40px; padding: 40px 0; }
	.aboutGrid { gap: 0; }
	.aboutText .secTitle { font-size: 22px; margin: 10px 0 12px; }
	.aboutText p { font-size: 13px; line-height: 2; }
	.aboutText p:last-of-type { margin-bottom: 20px; }
	.aboutMedia { margin-bottom: 20px; order: -1; }
	.aboutGrid { display: flex; flex-direction: column-reverse; }
	.aboutFrame { display: none; }
	.aboutMedia img { height: 200px; border-radius: 12px; }
	.aboutBtns .btnGold { width: 100%; height: 48px; padding: 0 16px; font-size: 14.5px; }

	.secCerts { padding: 40px 0 0; }
	.certGrid { gap: 10px; }
	.certCard { padding: 14px; gap: 10px; }
	.certCard svg { width: 22px; height: 22px; }
	.certName { font-size: 12.5px; }

	.secProjects { padding: 48px 0 0; background: none; border: 0; }
	.projGrid { grid-template-columns: 1fr; gap: 14px; }
	.projCard { background: var(--card); }
	.projCard:hover, .newsCard:hover { transform: none; box-shadow: none; }
	.projCard .cardThumb { height: 180px; }
	.projCard .cardBody { padding: 16px; }
	.cardMeta { font-size: 11.5px; }
	.projCard .cardTitle { font-size: 15px; margin-top: 8px; }
	.projCard .cardMore { font-size: 12.5px; margin-top: 10px; }

	.secPartners { padding: 48px 0 0; }
	.partnerGrid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.partnerCard { padding: 12px; }
	.partnerCard img { height: 44px; }

	.secNews { padding: 48px 0; }
	.newsGrid { grid-template-columns: 1fr; gap: 14px; }
	/* Homepage and related-strip news cards collapse to thumbnail rows;
	   archive cards stay stacked per artboard 3b. */
	.secNews .newsCard, .relatedStrip .newsCard { flex-direction: row; padding: 16px; gap: 14px; }
	.secNews .newsCard .cardThumb, .relatedStrip .newsCard .cardThumb {
		width: 96px;
		height: 96px;
		flex: 0 0 auto;
		border-radius: 10px;
		overflow: hidden;
	}
	.secNews .newsCard .cardBody, .relatedStrip .newsCard .cardBody { padding: 0; }
	.secNews .newsCard .cardTitle, .relatedStrip .newsCard .cardTitle { font-size: 13.5px; line-height: 1.9; margin-top: 6px; }
	.secNews .newsCard .cardExcerpt, .secNews .newsCard .cardMore,
	.relatedStrip .newsCard .cardExcerpt, .relatedStrip .newsCard .cardMore { display: none; }
	.archBody .newsCard .cardThumb { height: 180px; }
	.archBody .newsCard .cardBody { padding: 16px; }
	.archBody .newsCard .cardExcerpt { display: none; }
	.archBody .newsCard .cardTitle { font-size: 15px; margin-top: 8px; }
	.archBody .newsCard .cardMore { font-size: 12.5px; margin-top: 10px; }

	/* Footer */
	.siteFooter { padding: 40px 0 0; }
	.footGrid { display: block; }
	.footLogo { height: 78px; }
	.footAbout { font-size: 12.5px; line-height: 2; margin: 16px 0 20px; }
	.footTitle { display: none; }
	.footCol + .footCol { margin-top: 0; }
	.footLinks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12.5px; margin-bottom: 10px; }
	.footLinksSys a,
	.footLinksSvc a { color: var(--goldLight); }
	.footContact { gap: 6px; font-size: 12px; line-height: 2; color: var(--copyMut); margin-top: 10px; }
	.footContactRow svg { display: none; }
	.footBottom { margin-top: 20px; }
	.footBottomIn { padding: 14px 16px 6px; justify-content: center; font-size: 11.5px; }
	.footCredit { padding-bottom: 12px; font-size: 11px; }

	/* Generic pages */
	.pageHero { padding: 32px 0; }
	.pageTitle { font-size: 24px; }
	.pageBody { padding: 32px 16px 64px; }
	.archiveGrid { grid-template-columns: 1fr; gap: 14px; }

	/* ---------- Archive pages (2b / 3b) ---------- */
	.archHero { padding: 24px 0 28px; }
	.crumbs { font-size: 12px; gap: 8px; }
	.crumbs svg { width: 11px; height: 11px; }
	.archHeroIn { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 0; }
	.archTitle { font-size: 27px; margin: 14px 0 10px; }
	.archLead { font-size: 13.5px; margin-bottom: 16px; }
	.archStat { padding-bottom: 0; gap: 10px; }
	.archStatNum { font-size: 32px; }
	.archStatLabel { font-size: 13px; }

	.filterBarIn { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
	.pillRow { gap: 8px; }
	.pill { padding: 9px 16px; font-size: 12.5px; gap: 6px; }
	.pillCount { font-size: 11px; }
	.filterCount { font-size: 11.5px; }
	.sortWrap { flex-direction: column; align-items: flex-start; gap: 10px; }
	.sortLabel { font-size: 12px; }

	.archBody { padding: 24px 0 40px; }
	.archBody .projCard .cardThumb { height: 200px; }
	.cardChip { font-size: 11px; padding: 5px 10px; }
	.cardViews { margin-inline-start: 12px; }

	.pagerTsl { margin-top: 28px; }
	.pagerBtn { width: 44px; padding: 0; font-size: 0; gap: 0; justify-content: center; }
	.pagerNum { font-size: 14px; }
	.pagerDots { width: 24px; font-size: 14px; }

	.ctaBand { padding: 32px 0; }
	.ctaBandIn { flex-direction: column; align-items: stretch; gap: 18px; }
	.ctaBandTitle { font-size: 20px; margin-bottom: 8px; }
	.ctaBandText { font-size: 13px; }
	.ctaBandBtns { flex-direction: column; gap: 10px; }
	.ctaBandBtns .btnGold, .ctaBandBtns .btnOutlineLight { height: 48px; padding: 0 16px; }

	/* ---------- Single project (2d) ---------- */
	.detailHero { padding: 24px 0 28px; }
	.detailHeroIn { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 0; }
	.detailTitle { font-size: 21px; line-height: 1.8; margin: 12px 0 10px; }
	.catPill { font-size: 12px; padding: 6px 14px; margin-bottom: 0; }

	.projSingle { padding: 20px 0 40px; }
	.projLayout { gap: 24px; }
	.galMain { height: 250px; }
	.galThumbs { gap: 8px; margin-top: 8px; }
	.galThumb { height: 64px; border-radius: 8px; }
	.projContent { margin-bottom: 20px; }
	.projContent h2 { font-size: 18px; line-height: 1.8; margin: 8px 0 12px; }
	.projContent p { font-size: 13.5px; line-height: 2.1; margin-bottom: 12px; }
	.infoRow { padding: 14px 16px; gap: 12px; }
	.infoIcon { width: 40px; height: 40px; }
	.infoLabel { font-size: 11.5px; }
	.infoValue { font-size: 13.5px; margin-top: 2px; }
	.projActions { flex-direction: column; gap: 10px; margin: 20px 0 8px; }
	.projActions .btnGold, .projActions .btnOutlineDark { height: 48px; padding: 0 16px; }

	.pnGrid { display: none; }
	.relatedStrip { margin-top: 40px; }

	/* ---------- Single news (3d) ---------- */
	.newsHero { padding: 24px 0 20px; }
	.newsTitle { font-size: 22px; line-height: 1.8; margin: 12px 0 12px; }
	.newsMetaRow { gap: 12px; font-size: 11.5px; }
	.newsMetaItem { gap: 0; }
	.newsMetaItem svg { display: none; }
	.newsMetaItem + .newsMetaItem::before { content: "·"; margin-inline-end: 12px; color: var(--litMut); }

	.newsSingle { padding: 16px 0 40px; }
	.newsFeature { height: 210px; }
	.newsColumn { margin-top: 18px; }
	.newsBody p { font-size: 13px; line-height: 2.2; margin-bottom: 12px; }
	.newsBody > p:first-child { font-size: 14px; line-height: 2.1; margin-bottom: 12px; }
	.chipsRow { padding-top: 14px; margin-top: 16px; gap: 8px; }
	.pillSm { padding: 7px 14px; font-size: 12px; }

	.commentArea { margin-top: 20px; }
	.commentCard { padding: 20px; }
	.commentTitle { font-size: 17px; }
	.commentFields { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
	.commentCard input[type="text"],
	.commentCard input[type="email"] { height: 50px; background: #fff; padding: 0 14px; font-size: 13.5px; }
	.commentCard textarea { height: 110px; background: #fff; padding: 12px 14px; font-size: 13.5px; margin: 0; }
	.commentTextWrap { margin-top: 12px; }
	.commentSend { width: 100%; height: 48px; justify-content: center; padding: 0 16px; font-size: 14px; }
	.commentList { padding: 18px 20px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}