/* ==========================================================================
   Al Merwi Co — Theme (glass restyle)
   Single stylesheet. Replaces global.css / font-awesome.min.css / site.css /
   fonts.css from the previous (pre-restyle) build — see DESIGN_NOTES.md.
   ========================================================================== */

/* ---- fonts: Nekst, licensed files expected in ../fonts/ (see README) ---- */
@font-face {
	font-family: 'Nekst';
	src: url('../fonts/Nekst-Light.woff2') format('woff2'),
	     url('../fonts/Nekst-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Nekst';
	src: url('../fonts/Nekst-Regular.woff2') format('woff2'),
	     url('../fonts/Nekst-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Nekst';
	src: url('../fonts/Nekst-Medium.woff2') format('woff2'),
	     url('../fonts/Nekst-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Nekst';
	src: url('../fonts/Nekst-SemiBold.woff2') format('woff2'),
	     url('../fonts/Nekst-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Nekst';
	src: url('../fonts/Nekst-Bold.woff2') format('woff2'),
	     url('../fonts/Nekst-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---- fonts: IBM Plex Sans Arabic (SIL OFL 1.1), self-hosted, Arabic-script
   subset only (Latin/numerals on Arabic pages still come from Nekst/system
   fonts via the stack order below). See PHOTO_CREDITS.md for the licence
   note. ---- */
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	src: url('../fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	src: url('../fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	src: url('../fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	src: url('../fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---- design tokens ---- */
:root {
	/* brand blue — the ONE source of truth; every other blue is derived from this */
	--brand-blue: #1569C7;
	--brand-blue-dark: #0F4C99;   /* hover state, text-on-light */
	--brand-blue-bright: #4C9BFF;/* links/accents on dark backgrounds */
	--brand-blue-tint: #E6F1FD;  /* light section backgrounds, icon badge fills */
	--brand-blue-deep: #0a2f58;  /* dark chrome base: header/footer/dropdown/bands — replaces the old grey-navy so dark surfaces read as blue, not grey */

	/* colour */
	--color-primary: var(--brand-blue);
	--color-primary-dark: var(--brand-blue-dark);
	--color-primary-bright: var(--brand-blue-bright);
	--color-primary-tint: var(--brand-blue-tint);
	--color-ink: #0B1B2B;
	--color-body: #3F5266;
	--color-surface: #F5F8FC;
	--color-white: #FFFFFF;

	--color-sanitary: #C73838;      /* text/icons */
	--color-sanitary-fill: #E85D5D; /* fills/backgrounds */
	--color-engineering: var(--color-ink); /* Engineering division's own accent only — see DESIGN_NOTES.md */

	/* glass — tinted with brand blue, not grey */
	--glass-light: rgba(255, 255, 255, 0.62);
	--glass-light-strong: rgba(255, 255, 255, 0.8);
	--glass-dark: rgba(10, 47, 88, 0.6);
	--glass-dark-strong: rgba(10, 47, 88, 0.82);
	--glass-border-light: rgba(255, 255, 255, 0.5);
	--glass-border-dark: rgba(255, 255, 255, 0.18);
	--glass-blur: blur(18px) saturate(160%);
	--card-text-scrim: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.28));

	/* elevation / shape */
	--radius-lg: 24px;
	--radius-md: 16px;
	--radius-sm: 10px;
	--shadow-soft: 0 20px 60px -20px rgba(11, 27, 43, 0.35);
	--shadow-softer: 0 10px 30px -14px rgba(11, 27, 43, 0.25);

	/* type */
	--font-body: 'Nekst', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--fs-eyebrow: 0.8rem;
	--fs-small: 0.9rem;
	--fs-body: 1rem;
	--fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
	--fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
	--fs-hero: clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem);
	--fs-stat: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--lh-body: 1.6;

	/* spacing */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 5rem;
	--space-7: 7rem;

	/* fluid section-spacing scale — home page vertical rhythm between sections
	   (see CHANGES.md). --space-section between distinct sections,
	   --space-block for the breathing room within/around a single band. */
	--space-section: clamp(88px, 8vw, 128px);
	--space-block: clamp(32px, 4vw, 56px);

	color-scheme: light;
}

/* reduced-transparency / unsupported backdrop-filter fallback:
   near-opaque solid surfaces instead of blur */
@media (prefers-reduced-transparency: reduce) {
	:root {
		--glass-light: #FFFFFF;
		--glass-light-strong: #FFFFFF;
		--glass-dark: var(--brand-blue-deep);
		--glass-dark-strong: #082240;
		--glass-blur: none;
	}
}
@supports not (backdrop-filter: blur(1px)) {
	:root {
		--glass-blur: none;
	}
	.glass, .glass-dark {
		background: #FFFFFF;
	}
	.glass-dark {
		background: var(--brand-blue-deep);
	}
}

/* ---- reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@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;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-body);
	background: var(--color-surface);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; flex-shrink: 0; }
svg use { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--color-ink);
	line-height: 1.2;
	margin: 0 0 var(--space-2);
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p { margin: 0 0 var(--space-2); }

/* ==========================================================================
   RTL (Arabic pages: <html lang="ar" dir="rtl">)
   Nekst has no Arabic glyphs, so it's listed first — Latin characters/digits
   still render in Nekst, and the browser falls through per-glyph to IBM
   Plex Sans Arabic for Arabic script, exactly as asked ("Nekst-first,
   Arabic-second"). Logical properties elsewhere in this file do the actual
   mirroring; this block only covers typography that doesn't make sense in
   Arabic (uppercase, tracked-out letter-spacing) and line-height.
   ========================================================================== */
[dir="rtl"] body {
	font-family: 'Nekst', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
	line-height: 1.8;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .btn,
[dir="rtl"] .stat .stat-label,
[dir="rtl"] .contact-card h3,
[dir="rtl"] .footer-col h3,
[dir="rtl"] .main-nav a {
	text-transform: none;
	letter-spacing: normal;
}
/* directional arrow icons (not logos/photos/phone/brand/social icons) mirror
   in RTL so "forward" still points the right way */
[dir="rtl"] svg:has(use[href="#icon-arrow-right"]) {
	transform: scaleX(-1);
}
/* the "Learn more" hover nudge should move toward the reading direction too */
[dir="rtl"] .link-more:hover svg { transform: scaleX(-1) translateX(3px); }

a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-primary-dark); }

ul { padding-inline-start: 1.2em; }

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-3);
}

.row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--space-3) * -1); }
.col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-12 { padding: 0 var(--space-3); width: 100%; }
@media (min-width: 768px) {
	.col-md-4  { width: 33.3333%; }
	.col-md-5  { width: 41.6667%; }
	.col-md-6  { width: 50%; }
	.col-md-7  { width: 58.3333%; }
	.col-md-8  { width: 66.6667%; }
	.col-md-12 { width: 100%; }
}

.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* visible, high-contrast keyboard focus ring everywhere, incl. over glass/photos */
:focus-visible {
	outline: 3px solid var(--brand-blue-bright);
	outline-offset: 2px;
}

/* skip-to-content link: off-screen until focused, then jumps above the header */
.skip-link {
	position: fixed;
	top: -100px;
	inset-inline-start: var(--space-2);
	z-index: 1100;
	background: #fff;
	color: var(--color-ink);
	padding: 0.8em 1.4em;
	border-radius: var(--radius-sm);
	font-weight: 600;
	box-shadow: var(--shadow-soft);
	transition: top 0.2s ease;
}
.skip-link:focus {
	top: var(--space-2);
}

/* ---- eyebrow + section heading rhythm ---- */
.eyebrow {
	display: inline-block;
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-1);
}
.eyebrow.on-dark { color: var(--color-primary-bright); }

.section-head { max-width: 720px; margin: 0 0 var(--space-4); }
.section-head p { color: var(--color-body); }
.section-head.center { margin-inline: auto; text-align: center; }

.section { padding: var(--space-6) 0; }
.section.alt { background: var(--color-primary-tint); }
.section.ink { background: var(--brand-blue-deep); color: rgba(255,255,255,0.82); }
.section.ink h2, .section.ink h3 { color: #fff; }
/* Home page only (.section.ink is only ever used for the homepage numbers
   band): equal top/bottom padding around its content, on the new fluid scale,
   so the stats are vertically centred with clear room above and below. */
.section.ink { padding: var(--space-block) 0; }
/* Home page only (new class, not used elsewhere): the closing "Who We Are"
   section gets the larger section-to-section gap, symmetric top/bottom, so
   there's --space-section both above its heading and below its link, and the
   same amount again before the footer. */
.section.home-outro { padding: var(--space-section) 0; }

/* ---- glass utility ---- */
.glass {
	background: var(--glass-light);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-softer);
}
.glass-dark {
	background: var(--glass-dark);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-dark);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	color: #fff;
}

/* ---- buttons / links ---- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.9em 1.8em;
	border-radius: 999px;
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	border: 1px solid transparent;
	cursor: pointer;
}
.btn-primary {
	background: var(--color-primary);
	color: #fff;
	box-shadow: 0 14px 30px -12px rgba(21, 105, 199, 0.55);
}
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-2px); }
.btn-glass {
	background: var(--glass-light-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	color: var(--color-ink);
	border-color: var(--glass-border-light);
}
.btn-glass:hover { transform: translateY(-2px); color: var(--color-ink); }

.link-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	font-size: var(--fs-small);
}
.link-more svg { width: 1em; height: 1em; transition: transform 0.2s ease; }
.link-more:hover svg { transform: translateX(3px); }

/* ---- icon badges ---- */
.icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--color-primary-tint);
	color: var(--color-primary);
	flex-shrink: 0;
}
.icon-badge svg {
	width: 28px;
	height: 28px;
	stroke: currentColor;
	fill: none;
	display: block;
}
.icon-badge.on-glass {
	background: var(--glass-light-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-light);
	color: var(--color-primary);
}
.icon-badge.sanitary { background: #fbe9e9; color: var(--color-sanitary); }
.icon-badge.ink { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid var(--glass-border-dark); }
.icon-badge.sm { width: 40px; height: 40px; }
.icon-badge.sm svg { width: 18px; height: 18px; }
/* contact-card icons: 48–56px circle / 22–26px glyph, per DESIGN_NOTES */
.icon-badge.contact { width: 52px; height: 52px; }
.icon-badge.contact svg { width: 24px; height: 24px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--glass-dark-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid var(--glass-border-dark);
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88px;
}
.site-header .logo img { height: 48px; width: auto; }

.main-nav { display: none; }
.main-nav > ul {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: rgba(255,255,255,0.88);
	font-weight: 500;
	font-size: var(--fs-small);
	letter-spacing: 0.02em;
}
.main-nav a svg { display: block; flex-shrink: 0; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: #fff; }
.main-nav a[aria-current="page"] { position: relative; }
.main-nav a[aria-current="page"]::after {
	content: '';
	position: absolute;
	inset-inline: 0; bottom: -8px;
	height: 2px;
	background: var(--color-primary-bright);
	border-radius: 2px;
}

.has-dropdown { position: relative; }
.dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 14px);
	/* plain left+translateX on purpose: this centres the dropdown under its
	   parent, which is a symmetric effect that shouldn't mirror in RTL. */
	left: 50%;
	transform: translateX(-50%);
	min-width: 220px;
	padding: var(--space-2);
	list-style: none;
	margin: 0;
	background: var(--glass-dark-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-dark);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }
.dropdown li a { display: block; padding: 0.6em 0.8em; border-radius: var(--radius-sm); }
.dropdown li a:hover { background: rgba(255,255,255,0.1); }

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--glass-light-strong);
	border: 1px solid var(--glass-border-light);
	color: var(--color-ink);
	cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* groups the language switcher + hamburger at the header's end, so
   justify-content:space-between on .site-header .container still reads as
   logo / nav / (lang + menu) at every width */
.header-end {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* language switcher: plain link to the twin page in the other language.
   Globe icon + language label, glass pill, 44px min touch target. */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	height: 44px;
	padding: 0 var(--space-2);
	border-radius: 999px;
	background: var(--glass-light-strong);
	border: 1px solid var(--glass-border-light);
	color: var(--color-ink);
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.02em;
}
.lang-switch svg { width: 18px; height: 18px; }
.lang-switch:hover,
.lang-switch:focus-visible {
	background: #fff;
	color: var(--color-primary);
}
[dir="rtl"] .lang-switch { letter-spacing: normal; }

@media (min-width: 1024px) {
	.main-nav { display: block; }
	.nav-toggle { display: none; }
}

/* mobile menu panel */
.mobile-nav {
	position: fixed;
	inset: 88px 0 0 0;
	background: var(--glass-dark-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	overflow-y: auto;
	padding: var(--space-4) var(--space-3);
	z-index: 99;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--glass-border-dark); }
.mobile-nav a {
	display: block;
	padding: var(--space-2) 0;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 500;
}
.mobile-nav .sub-list { padding-inline-start: var(--space-2); }
.mobile-nav .sub-list a { color: rgba(255,255,255,0.75); font-size: 1rem; padding: 0.5em 0; }
/* the language switcher keeps its own compact glass-pill look even inside
   the mobile menu's full-width link list (overrides .mobile-nav a). */
.mobile-nav a.lang-switch {
	display: inline-flex;
	width: auto;
	padding: 0 var(--space-3);
	color: var(--color-ink);
	font-size: var(--fs-small);
}
@media (min-width: 1024px) {
	.mobile-nav { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	min-height: 86vh;
	display: flex;
	align-items: flex-end;
	color: #fff;
	overflow: hidden;
}
.hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(11,27,43,0.35) 0%, rgba(11,27,43,0.55) 55%, rgba(11,27,43,0.82) 100%);
}
.hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	/* bottom padding = the division-grid's overlap depth (--space-7) + a clear,
	   visible gap (--space-block) so the panel and the overlapping cards never
	   crowd each other, however deep the overlap is. */
	padding: var(--space-6) 0 calc(var(--space-7) + var(--space-block));
}
.hero h1 {
	color: #fff;
	font-size: var(--fs-hero);
	font-weight: 700;
	max-width: 16ch;
	margin-bottom: var(--space-3);
}
.hero-panel {
	max-width: 620px;
	padding: var(--space-4);
}
.hero-panel p { color: rgba(255,255,255,0.88); font-size: 1.1rem; }
.hero .btn { margin-top: var(--space-2); }

/* inner-page banner (About/Constructions/Sanitary-Ware/Engineering/Contact) —
   one shared component: title (and optional .tagline) centred both axes,
   with equal space above/below at every width. No breadcrumb (removed). */
.page-hero {
	position: relative;
	min-height: 46vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	overflow: hidden;
}
.page-hero .hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(11,27,43,0.35), rgba(11,27,43,0.78));
}
.page-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: var(--space-4) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.page-hero h1 {
	color: #fff;
	font-weight: 700;
	font-size: clamp(2.75rem, 2.1rem + 16.7vw, 4.5rem);
	line-height: 1.1;
	margin: 0;
	max-width: 18ch;
}
.page-hero .tagline {
	margin: var(--space-2) 0 0;
	color: rgba(255,255,255,0.88);
	font-size: 1.1rem;
	max-width: 50ch;
}

/* ==========================================================================
   Division cards (Home)
   ========================================================================== */
.division-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
	margin-top: calc(var(--space-7) * -1);
	/* clear, visible light-background gap before the numbers band — the cards
	   must never touch it. */
	padding-bottom: var(--space-block);
	position: relative;
	z-index: 2;
}
@media (max-width: 900px) {
	.division-grid { grid-template-columns: 1fr; gap: var(--space-block); margin-top: var(--space-block); }
}

.division-card {
	display: block;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 380px;
	color: #fff;
	box-shadow: var(--shadow-soft);
}
.division-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.division-card:hover img { transform: scale(1.06); }
.division-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(21,105,199,0.25) 0%, rgba(10,47,88,0.88) 100%);
}
.division-card.accent-sanitary::before {
	background: linear-gradient(180deg, rgba(199,56,56,0.2) 0%, rgba(50,10,10,0.85) 100%);
}
.division-card.accent-engineering::before {
	background: linear-gradient(180deg, rgba(11,27,43,0.3) 0%, rgba(2,8,14,0.9) 100%);
}
.division-card-body {
	position: absolute;
	inset-inline: 0; bottom: 0;
	z-index: 1;
	padding: var(--space-4);
	padding-top: calc(var(--space-4) + 30px);
	background: rgba(10,47,88,0.4);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-top: 1px solid var(--glass-border-dark);
}
.division-card .icon-badge {
	position: absolute;
	top: -30px;
	inset-inline-start: var(--space-3);
	border: 3px solid #fff;
	box-shadow: var(--shadow-softer);
}
.division-card h2 { color: #fff; font-size: 1.4rem; margin-bottom: 0.4em; }
.division-card p { color: rgba(255,255,255,0.88); font-size: var(--fs-small); margin-bottom: 0.8em; }
.division-card .link-more { color: #fff; }

/* ==========================================================================
   Stats / highlights band
   ========================================================================== */
.stats-band {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-3);
	text-align: center;
}
.stat .stat-num {
	font-size: var(--fs-stat);
	font-weight: 700;
	color: var(--color-primary);
	display: block;
	line-height: 1;
	margin-bottom: 0.3em;
}
.section.ink .stat .stat-num { color: var(--color-primary-bright); }
.stat .stat-label {
	font-size: var(--fs-small);
	color: var(--color-body);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.section.ink .stat .stat-label { color: rgba(255,255,255,0.7); }

/* ==========================================================================
   Content cards (image + icon + title + text + link)
   ========================================================================== */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-4);
}
.content-card {
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-softer);
	display: flex;
	flex-direction: column;
}
.content-card .card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.content-card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.content-card .icon-badge { position: absolute; inset-inline-start: var(--space-2); bottom: calc(var(--space-2) * -1); box-shadow: var(--shadow-softer); }
.content-card .card-body { padding: var(--space-4) var(--space-3) var(--space-3); flex: 1; display: flex; flex-direction: column; }
.content-card h3 { font-size: 1.15rem; }
.content-card p { font-size: var(--fs-small); flex: 1; }

/* simple feature tiles (values, categories, services) without photos */
.tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-3);
}
.tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	background: var(--glass-light);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-light);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	text-align: center;
	box-sizing: border-box;
}
.tile .icon-badge { margin: 0 auto var(--space-2); }
/* .row > .col-md-* wraps .tile in some sections (Vision/Mission/Goal); make the
   column a vertical flex container so a single .tile child can stretch to fill
   the row's full height (all three cards end up the same height). Using
   flex-direction:column keeps every other use of .row > .col-md-* (paragraphs,
   images) stacking exactly as before — only a direct .tile child is affected. */
.row > [class*="col-"] { display: flex; flex-direction: column; }
.row > [class*="col-"] > .tile { flex: 1; }
.tile h3 { font-size: 1rem; margin-bottom: 0.3em; }
.tile p { font-size: var(--fs-small); margin: 0; }

/* photo + caption chip */
.photo-chip-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.photo-chip-wrap img { width: 100%; }

/* Map card + office photo: forced to the same aspect ratio so the two columns
   in a .row (which stretches by default) always render at equal width AND
   equal height, regardless of the photo's native aspect ratio. */
.media-match { aspect-ratio: 4 / 3; height: 100%; }
.media-match.photo-chip-wrap img { width: 100%; height: 100%; object-fit: cover; }
.caption-chip {
	position: absolute;
	inset-inline-start: var(--space-2);
	bottom: var(--space-2);
	padding: 0.5em 1em;
	font-size: var(--fs-small);
	font-weight: 600;
	color: #fff;
	background: var(--glass-dark);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-dark);
	border-radius: 999px;
}

/* ==========================================================================
   Contact cards (replace forms)
   ========================================================================== */
/* Flexbox, not grid, on purpose: when a card count doesn't divide evenly into a
   row (Contact Us has 5), a wrapped last row with justify-content:center sits
   centred automatically — grid would leave it pinned to the left instead.
   .contact-grid--4 (About Us: 4 cards) and .contact-grid--5 (Contact Us: 5
   cards) both resolve to full, evenly-spaced, equal-width/height rows: 1 / 2 /
   then 4 or 5 respectively (5-up fits in one row on wide screens; an odd
   trailing card at the 2-up tablet step — i.e. 2+2+1 — is centred). */
.contact-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--space-3);
}
.contact-grid .contact-card { flex: 1 1 100%; }
@media (min-width: 640px) {
	.contact-grid .contact-card { flex: 0 1 calc((100% - var(--space-3)) / 2); }
}
@media (min-width: 1024px) {
	.contact-grid--4 .contact-card { flex: 0 1 calc((100% - var(--space-3) * 3) / 4); }
	.contact-grid--5 .contact-card { flex: 0 1 calc((100% - var(--space-3) * 4) / 5); }
}
.contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	gap: var(--space-1);
	height: 100%;
	background: #fff;
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-3);
	box-shadow: var(--shadow-softer);
}
.contact-card .icon-badge { margin-bottom: var(--space-1); }
.contact-card h3 { margin: 0; font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-body); }
.contact-card a, .contact-card p { font-weight: 600; color: var(--color-ink); margin: 0; overflow-wrap: anywhere; }
.contact-card a:hover { color: var(--color-primary); }

/* ==========================================================================
   Engineering product gallery + lightbox (behaviour unchanged, glass skin)
   ========================================================================== */
.product-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-3);
}
.product-thumb {
	cursor: pointer;
	background: var(--glass-light);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-light);
	border-radius: var(--radius-md);
	overflow: hidden;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-thumb:hover { transform: translateY(-4px); box-shadow: var(--shadow-softer); }
.product-thumb .thumb-media { aspect-ratio: 4/3; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb h3 { font-size: var(--fs-small); font-weight: 600; margin: var(--space-2); }

.lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(11,27,43,0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3);
	z-index: 1000;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-box {
	background: var(--glass-light-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-light);
	border-radius: var(--radius-lg);
	max-width: 700px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	box-shadow: var(--shadow-soft);
}
.lightbox-box img { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.lightbox-spec { padding: var(--space-3); white-space: pre-line; font-size: var(--fs-small); color: var(--color-body); }
.lightbox-close {
	position: absolute;
	top: var(--space-2);
	inset-inline-end: var(--space-2);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--glass-light-strong);
	border: 1px solid var(--glass-border-light);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background:
		radial-gradient(1100px 420px at 15% -10%, rgba(76,155,255,0.35), transparent 60%),
		linear-gradient(180deg, var(--brand-blue-deep), #051830);
	color: rgba(255,255,255,0.75);
	padding: var(--space-6) 0 var(--space-3);
}
.footer-glass {
	background: var(--glass-dark);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-dark);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: var(--space-4);
}
.footer-top {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--space-4);
	padding-bottom: var(--space-4);
}
@media (max-width: 900px) {
	.footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.footer-top { grid-template-columns: 1fr; }
	/* centre logo / tagline / social / copyright on one shared centre line on mobile */
	.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
	.footer-brand img { margin-inline: auto; }
	.footer-brand p { max-width: none; }
	.footer-col { text-align: center; }
	.footer-bottom { justify-content: center; text-align: center; }
}
.footer-brand img { height: 42px; margin-bottom: var(--space-2); }
.footer-brand p { font-size: var(--fs-small); max-width: 32ch; }
.footer-col h3 { color: #fff; font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.6em; }
.footer-col a { color: rgba(255,255,255,0.7); font-size: var(--fs-small); overflow-wrap: anywhere; }
.footer-col a:hover { color: #fff; }

.footer-social { display: flex; gap: var(--space-1); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	border: 1px solid var(--glass-border-dark);
	color: #fff;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 20px; height: 20px; display: block; }

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-top: var(--space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: space-between;
	font-size: var(--fs-small);
}

/* ==========================================================================
   Engineering long-form text sections (verbatim archived copy)
   ========================================================================== */
.prose h2 { font-size: var(--fs-h3); margin-top: var(--space-4); }
.prose ul { margin-bottom: var(--space-3); }

/* utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }