/**
 * Badshah Group — main stylesheet.
 *
 *  1. Dark-mode colour overrides + semantic vars
 *  2. Base / full-width layout / smooth transition
 *  3. Header, brand, desktop nav + mobile overlay, dark-light toggle
 *  4. Buttons
 *  5. Hero slider
 *  6. Section headings / eyebrow
 *  7. Cards, services, stats, clients, CTA, forms, map
 *  8. Animations (reveal, counters)
 *  9. Footer
 * 10. Responsive
 */

/* ============================================================
   1. PALETTE  — clay-light system (CodePen reference): soft grey
   page, white cards, ink text, electric-blue + teal accents.
   Presets are overridden here because theme.json is locked.
   ============================================================ */
:root {
	--wp--preset--color--base: #ececef;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--contrast: #0a0a0c;
	--wp--preset--color--muted: #74747c;
	--wp--preset--color--primary: #1a8aff;
	--wp--preset--color--primary-600: #0f6fd6;
	--wp--preset--color--accent: #2cb7b3;
	--wp--preset--color--border: rgba(0, 0, 0, 0.1);

	--wp--preset--gradient--primary-hero: linear-gradient(135deg, #0d1b2e 0%, #14406e 55%, #0a1521 100%);
}
[data-theme="dark"] {
	--wp--preset--color--base: #0e1014;
	--wp--preset--color--surface: #17191f;
	--wp--preset--color--contrast: #f2f2f4;
	--wp--preset--color--muted: #9a9aa3;
	--wp--preset--color--primary: #4aa3ff;
	--wp--preset--color--primary-600: #6cb5ff;
	--wp--preset--color--accent: #35d6d1;
	--wp--preset--color--border: rgba(255, 255, 255, 0.12);

	--wp--preset--gradient--primary-hero: linear-gradient(135deg, #0b1626 0%, #103252 55%, #0a111c 100%);
}

:root {
	--bg-card: var(--wp--preset--color--surface);
	--bg-page: var(--wp--preset--color--base);
	--fg: var(--wp--preset--color--contrast);
	--fg-muted: var(--wp--preset--color--muted);
	--brand: var(--wp--preset--color--primary);
	--accent: var(--wp--preset--color--accent);
	--border: var(--wp--preset--color--border);
	--shadow: 0 10px 30px -12px rgba(10, 25, 60, 0.25);
	--shadow-lg: 0 26px 60px -24px rgba(10, 25, 60, 0.45);
	--radius: 16px;
	--radius-sm: 10px;
	--header-h: 84px;

	/* ---- Glassmorphism tokens (light) ---- */
	--glass-bg: rgba(255, 255, 255, 0.42);
	--glass-bg-strong: rgba(255, 255, 255, 0.62);
	--glass-border: rgba(255, 255, 255, 0.75);
	--glass-hi: rgba(255, 255, 255, 0.95);          /* top inner highlight */
	--glass-blur: 14px;
	--glass-sat: 150%;
	--glass-shadow: 0 12px 40px -14px rgba(10, 25, 60, 0.28);
	--glass-shadow-lg: 0 30px 70px -24px rgba(10, 25, 60, 0.4);
}
[data-theme="dark"] {
	--shadow: 0 10px 34px -10px rgba(0, 0, 0, 0.6);
	--shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.7);

	/* ---- Glassmorphism tokens (dark) ---- */
	--glass-bg: rgba(23, 25, 31, 0.38);
	--glass-bg-strong: rgba(23, 25, 31, 0.55);
	--glass-border: rgba(255, 255, 255, 0.16);
	--glass-hi: rgba(255, 255, 255, 0.22);
	--glass-shadow: 0 16px 44px -14px rgba(0, 0, 0, 0.6);
	--glass-shadow-lg: 0 34px 80px -26px rgba(0, 0, 0, 0.72);
}

/* ============================================================
   2. BASE / FULL-WIDTH LAYOUT / TRANSITION
   ============================================================ */
/* overflow-x on the root too: body's alone doesn't stop mobile browsers from
   widening the layout viewport past device-width (the nowrap .bg-text is
   ~1100px wide), which strands viewport-fixed elements like the contact FAB
   off the right edge of the screen. */
html { scroll-behavior: smooth; overflow-x: clip; }
body { background: var(--bg-page); color: var(--fg); overflow-x: clip; }

/* ---- Ambient gradient mesh — the colour the frosted glass refracts ----
   A fixed, blurred field of brand/accent orbs sits behind the whole page so
   every translucent section + glass card has something to frost over. */
body::before {
	content: "";
	position: fixed;
	inset: -15vmax;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(40vmax 40vmax at 12% 16%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 60%),
		radial-gradient(36vmax 36vmax at 88% 8%, color-mix(in srgb, var(--accent) 48%, transparent), transparent 60%),
		radial-gradient(46vmax 46vmax at 78% 92%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 62%),
		radial-gradient(40vmax 40vmax at 8% 86%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%),
		radial-gradient(50vmax 38vmax at 50% 50%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 66%);
	/* Static by design: animating a fixed viewport-sized blurred layer forces
	   the GPU to recomposite every backdrop-filter element each frame and was
	   the main cause of scroll jank. */
	filter: saturate(135%);
	opacity: 0.85;
}
[data-theme="dark"] body::before { opacity: 0.85; }

/* True edge-to-edge sections. The constrained <main> carries 40px global
   padding, so alignfull children must escape it with WP's negative margins —
   a plain margin:0 here leaves every section inset by that padding. */
.wp-site-blocks .has-global-padding > .alignfull {
	width: auto;
	max-width: none;
	margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
}
.wp-site-blocks main { width: 100%; }
/* Seamless vertical stacking — sections carry their own padding, so the
   layout block-gap would otherwise show page-background strips between them. */
.wp-site-blocks > *,
.wp-site-blocks main > .alignfull,
.wp-block-post-content > .alignfull { margin-block-start: 0; }

/* ---- Translucent sections so the ambient mesh shows through ----
   Section wrappers carry their colour as an inline preset var; we soften that
   to a translucent tint (base vs surface preserved via the inline value).
   Hero & CTA use their own classes (no .has-background) so they're untouched. */
.wp-site-blocks .alignfull.has-background[style*="color--base"] {
	/* Near-solid tiles (Apple-style): the ambient mesh now shows only in the
	   gaps between boxed sections, so each tile reads calm and contained. */
	background-color: color-mix(in srgb, var(--bg-page) 88%, transparent) !important;
	background-image: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, transparent) 0%, transparent 45%, color-mix(in srgb, var(--accent) 7%, transparent) 100%);
}
.wp-site-blocks .alignfull.has-background[style*="color--surface"] {
	/* No backdrop-filter here: blurring an entire section is one of the most
	   expensive things a page can composite. The translucent tint alone reads
	   the same over the static mesh. */
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 88%, transparent) !important;
	background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--brand) 8%, transparent) 100%);
}
/* Browsers without backdrop-filter (or transparency) keep readable solid fills. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-site-blocks .alignfull.has-background[style*="color--base"] { background-color: var(--bg-page) !important; }
	.wp-site-blocks .alignfull.has-background[style*="color--surface"] { background-color: var(--wp--preset--color--surface) !important; }
}

/* Keep section inner content from hugging the screen edges on big monitors. */
.is-layout-constrained > .alignwide { margin-left: auto; margin-right: auto; }

body,
.wp-site-blocks,
.badshah-card,
.badshah-header,
.badshah-stat,
.wp-block-group {
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   3. HEADER / NAV + TOGGLE
   ============================================================ */
/* ---- Clay pill header (CodePen port) — in-flow floating pill:
   logo mark + text, icon nav pills, Get-a-Quote CTA, theme toggle. ---- */
.clay-topbar {
	position: relative;
	z-index: 20;
	max-width: 1360px;
	margin: 0 auto;
	padding: 28px clamp(20px, 3vw, 40px) 0;
}
.header {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.65);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 8px 28px rgba(20, 40, 80, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .header {
	background: rgba(23, 25, 31, 0.75);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 8px 28px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
}

.logo { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; flex-shrink: 0; }
.logo-mark {
	width: 40px;
	height: 40px;
	background: var(--wp--preset--color--contrast);
	border-radius: 10px;
	display: grid;
	place-items: center;
	color: #fff;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
		inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .logo-mark { background: #fff; }
.logo-mark svg { width: 22px; height: 22px; }
.logo-mark img { height: 32px; width: auto; filter: brightness(0) invert(1); }
[data-theme="dark"] .logo-mark img { filter: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text .a { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.logo-text .b { font-size: 11px; color: var(--fg-muted); margin-top: 3px; }

.nav-pills { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; position: relative; }
.nav-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--fg);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.25s, color 0.25s, transform 0.25s, opacity 0.3s;
}
.nav-pill svg { width: 16px; height: 16px; opacity: 0.7; flex: 0 0 auto; }
.nav-pill:hover { background: rgba(0, 0, 0, 0.05); transform: translateY(-1px); }
[data-theme="dark"] .nav-pill:hover { background: rgba(255, 255, 255, 0.08); }
.nav-pill[aria-current="page"] { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.nav-pill[aria-current="page"] svg { opacity: 0.9; }

.header-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 22px;
	background: var(--wp--preset--color--surface);
	border-radius: 999px;
	text-decoration: none;
	color: var(--fg);
	flex-shrink: 0;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 14px rgba(0, 0, 0, 0.08);
	transition: transform 0.25s, box-shadow 0.3s;
}
.header-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 20px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .header-cta { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 14px rgba(0, 0, 0, 0.4); }
.cta-dot {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -3px 5px rgba(0, 0, 0, 0.4);
}
.cta-dot svg { width: 14px; height: 14px; }
.cta-text { font-size: 14.5px; font-weight: 500; padding-right: 4px; }
.cta-arrows { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; color: var(--fg-muted); }
.cta-arrows svg { width: 14px; height: 14px; }

/* Hamburger button — lives in the pill, hidden until the pill collapses. */
.badshah-nav-toggle {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 58px;
	height: 58px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	opacity: 0;
	transform: scale(0);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.badshah-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--fg); border-radius: 2px; transition: transform 0.4s ease, opacity 0.3s ease; }

/* Header is in-flow (scrolls with the page) per the reference design. */

/* ---- Open menu (hamburger tapped) → floating glass panel under the header.
   Previously the open menu grew from the *centre of the 64px header*, so half
   of it rendered above the top of the viewport and links were unreachable.
   The panel is now fixed just below the header and scrolls internally if the
   viewport is short. Applies to both the scrolled-desktop and mobile states. ---- */
.badshah-header.nav-open .badshah-nav,
.badshah-header.nav-open .badshah-nav a {
	/* width:100% + rem padding must not overflow the panel */
	box-sizing: border-box;
}
.badshah-header.nav-open .badshah-nav {
	position: fixed;
	top: calc(var(--header-h) + 0.4rem);
	left: 50%;
	bottom: auto;
	transform: translateX(-50%);
	width: min(92vw, 400px);
	height: auto;
	max-height: calc(100dvh - var(--header-h) - 1.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	flex-direction: column;
	align-items: stretch;
	padding: 0.55rem;
	gap: 0.25rem;
	border-radius: 24px;
	/* Near-opaque so links stay readable over busy page content. */
	background: color-mix(in srgb, var(--bg-card) 92%, transparent);
	animation: badshah-menu-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes badshah-menu-in {
	from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.badshah-header.nav-open .badshah-nav a {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	width: 100%;
	overflow: visible;
	text-align: center;
	font-size: 1.05rem;
	padding: 0.85rem 1.6rem !important; /* comfortable 44px+ touch target */
}
/* Close button stays visible at the top of the panel as an X.
   margin must be reset: the base rule's `margin: auto` would re-center it. */
.badshah-header.nav-open .badshah-nav-toggle {
	position: static;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	order: -1;
	align-self: flex-end;
	margin: 0;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
}
.badshah-header.nav-open .badshah-nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.badshah-header.nav-open .badshah-nav-toggle span:nth-child(2) { opacity: 0; }
.badshah-header.nav-open .badshah-nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- Page blur while the menu is open ---- */
.wp-site-blocks > main,
.badshah-footer { transition: filter 0.7s ease, transform 0.7s ease, opacity 0.7s ease; }
body.badshah-menu-open { overflow: hidden; }
body.badshah-menu-open .wp-site-blocks > main,
body.badshah-menu-open .badshah-footer {
	/* Lighter blur, no scale: blurring + scaling the whole page at 16px made
	   opening the menu visibly stutter on mid-range phones. */
	filter: blur(6px);
	opacity: 0.45;
	pointer-events: none;
}

/* Tablet: tighter pills, drop the CTA chevrons (reference behaviour). */
@media (max-width: 1100px) {
	.header-cta .cta-arrows { display: none; }
	.nav-pill { padding: 8px 14px; font-size: 13.5px; }
}

/* Mobile bar order: hamburger LEFT, logo CENTRE, then the language pill and
   the dark-mode toggle on the RIGHT (in that order).
   The shared .badshah-header.nav-open rules above provide the open panel. */
@media (max-width: 900px) {
	:root { --header-h: 72px; }
	.header { gap: 10px; flex-wrap: nowrap; }
	/* Centered via inset+margin (not transform) — the GSAP header intro
	   tweens transform on .header > * and would wipe a translate(-50%,-50%).
	   Selector is .badshah-header .logo so it outranks the §28 logo rule,
	   whose asymmetric padding otherwise pushed the mark off true centre. */
	.badshah-header .logo {
		position: absolute;
		inset: 0;
		margin: auto;
		width: 52px;
		height: 52px;
		padding: 0;
		gap: 0;
		justify-content: center;
	}
	.logo-text { display: none; }
	.logo-mark { width: 46px; height: 46px; }
	.logo-mark img { height: 38px; }
	.header-cta { display: none; }
	/* Explicit flex order — DOM order is logo, nav, cta, lang, theme. */
	.badshah-lang { order: 2; }
	.badshah-theme-toggle { order: 3; }
	.badshah-header:not(.nav-open) .badshah-nav {
		order: 1;
		position: static;
		flex: 0 0 auto;
		margin-left: 0;
		margin-right: auto;
		width: 52px;
		height: 52px;
		padding: 0;
		gap: 0;
	}
	.badshah-header:not(.nav-open) .badshah-nav > a { opacity: 0; transform: scale(0.4); pointer-events: none; padding: 0 !important; width: 0; overflow: hidden; }
	.badshah-header:not(.nav-open) .badshah-nav-toggle { opacity: 1; transform: scale(1); pointer-events: auto; width: 52px; height: 52px; }
}

/* Header is in-flow now, so banners only need their own breathing room. */
.badshah-page-header { padding-top: var(--wp--preset--spacing--60, 3.5rem) !important; }

/* ---- Desktop navigation ---- */
.badshah-header .wp-block-navigation { font-weight: 600; }
.badshah-header .wp-block-navigation a.wp-block-navigation-item__content {
	color: var(--fg);
	position: relative;
	padding: 0.35rem 0.15rem;
}
/* Animated underline */
.badshah-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	height: 2px;
	width: 0;
	background: var(--accent);
	transition: width 0.25s ease;
}
.badshah-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.badshah-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
	width: 100%;
}
.badshah-header .wp-block-navigation-item:hover a.wp-block-navigation-item__content { color: var(--brand); }
.badshah-header .wp-block-navigation-item.current-menu-item a.wp-block-navigation-item__content { color: var(--brand); }

/* ---- Mobile nav: hamburger + left drawer ----
   The WP overlay container becomes a full-screen scrim; the inner dialog is a
   panel that slides in from the left. WP's view script handles open/close,
   focus-trap and scroll-lock — we only restyle the open state. */
.badshah-header .wp-block-navigation__responsive-container-open,
.badshah-header .wp-block-navigation__responsive-container-close {
	color: var(--fg);
}

.badshah-header .wp-block-navigation__responsive-container.is-menu-open {
	/* Dim, dismiss-on-tap scrim behind the drawer. */
	background: rgba(8, 14, 26, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	padding: 0;
	align-items: stretch;
	justify-content: flex-start;
}
.badshah-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
}
/* The sliding drawer panel. */
.badshah-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(82vw, 340px);
	margin: 0;
	padding: 1.25rem 1.5rem 2rem;
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(22px) saturate(var(--glass-sat));
	backdrop-filter: blur(22px) saturate(var(--glass-sat));
	border-right: 1px solid var(--glass-border);
	box-shadow: 14px 0 48px -16px rgba(0, 0, 0, 0.55);
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: badshah-drawer-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes badshah-drawer-in {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}
.badshah-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	margin: 0;
}
.badshah-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	margin-top: 2.75rem;
	width: 100%;
}
.badshah-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
}
.badshah-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--border);
}
.badshah-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	color: var(--fg);
	font-size: 1.15rem;
	font-weight: 700;
	padding: 0.95rem 0.25rem;
}
.badshah-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
.badshah-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content { color: var(--accent); }

/* Dark/Light toggle button */
.badshah-theme-toggle {
	--size: 42px;
	width: var(--size);
	height: var(--size);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--glass-border);
	border-radius: 50%;
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	color: var(--fg);
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s ease, background 0.3s ease, border-color 0.3s ease;
}
.badshah-theme-toggle:hover { transform: translateY(-2px) rotate(-8deg); border-color: var(--accent); }
.badshah-theme-toggle svg { width: 20px; height: 20px; }
.badshah-theme-toggle .icon-sun { display: none; }
.badshah-theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .badshah-theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .badshah-theme-toggle .icon-moon { display: none; }

/* ============================================================
   4. BUTTONS
   ============================================================ */
.wp-block-button__link {
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--brand) 60%, transparent); }
.is-style-outline .wp-block-button__link { box-shadow: none; }

/* Outline buttons on the dark hero / CTA gradients */
.badshah-hero .is-style-outline .wp-block-button__link,
.badshah-cta .is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.65);
	background: transparent;
}
.badshah-hero .is-style-outline .wp-block-button__link:hover,
.badshah-cta .is-style-outline .wp-block-button__link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--wp--preset--color--contrast);
}

/* ============================================================
   5. HERO SLIDER
   ============================================================ */
.badshah-hero {
	position: relative;
	color: #fff;
	background: var(--wp--preset--gradient--primary-hero, linear-gradient(135deg, #0A2A66, #123A85));
	overflow: hidden;
}
/* Layered light + subtle grid texture */
.badshah-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 500px at 78% -10%, rgba(245, 166, 35, 0.22), transparent 60%),
		radial-gradient(700px 500px at 0% 110%, rgba(77, 124, 254, 0.28), transparent 55%),
		linear-gradient(transparent 95%, rgba(255, 255, 255, 0.06) 95%) 0 0 / 100% 38px,
		linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.06) 95%) 0 0 / 38px 100%;
	pointer-events: none;
	/* Parallax: JS sets --badshah-parallax on the hero as the page scrolls. */
	transform: translate3d(0, var(--badshah-parallax, 0px), 0);
	will-change: transform;
}
.badshah-hero > * { position: relative; z-index: 1; }
.badshah-hero :where(h1, h2, h3, p) { color: #fff; }
.badshah-hero .badshah-eyebrow {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
}
.badshah-slider { position: relative; min-height: clamp(480px, 78vh, 760px); display: grid; align-content: center; }
.badshah-slide {
	grid-area: 1 / 1;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.9s ease, transform 6s ease;
	pointer-events: none;
}
.badshah-slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }
.badshah-slide h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); }

.badshah-slider-dots {
	position: absolute;
	bottom: 1.75rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.55rem;
	z-index: 3;
}
.badshah-slider-dot {
	width: 11px; height: 11px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	padding: 0;
	transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}
.badshah-slider-dot.is-active { background: var(--accent); width: 26px; border-radius: 999px; }

/* ============================================================
   6. SECTION HEADINGS / EYEBROW
   ============================================================ */
.badshah-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--accent);
	margin-bottom: 0.7rem;
}

/* ============================================================
   7. CARDS / SERVICES / STATS / CLIENTS / CTA
   ============================================================ */
.badshah-card {
	position: relative;
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	padding: 2rem 1.85rem;
	height: 100%;
	box-shadow: var(--glass-shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
	overflow: hidden;
}
/* Top edge light-catch — the signature frosted-glass highlight. */
.badshah-card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--glass-hi), transparent);
	opacity: 0.8;
	pointer-events: none;
}
.badshah-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--brand));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}
.badshah-card:hover {
	transform: translateY(-8px);
	background: var(--glass-bg-strong);
	border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border));
	box-shadow: var(--glass-shadow-lg);
}
.badshah-card:hover::before { transform: scaleX(1); }
.badshah-card-icon {
	width: 60px; height: 60px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 14px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--brand) 20%, transparent));
	color: var(--accent);
	margin-bottom: 1.1rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.badshah-card-icon svg {
	width: 28px;
	height: 28px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}
/* Icon lifts and glows in sympathy with its card on hover. */
.badshah-card:hover .badshah-card-icon {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Stats */
.badshah-stat { text-align: center; padding: 1.25rem 1rem; position: relative; }
.badshah-stat .badshah-count {
	font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4rem);
	font-weight: 800;
	line-height: 1;
	color: var(--accent);
	display: block;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.badshah-stat .badshah-stat-label {
	display: block;
	margin-top: 0.6rem;
	color: var(--fg-muted);
	font-weight: 600;
	letter-spacing: 0.02em;
}
/* Accent bar under each metric — grows in once the column reveals. */
.badshah-stat::after {
	content: "";
	display: block;
	width: 0;
	height: 3px;
	margin: 1rem auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--accent), var(--brand));
	transition: width 0.6s ease 0.3s;
}
.badshah-reveal.is-visible .badshah-stat::after { width: 40px; }
/* Vertical separators between metrics on wide screens. */
@media (min-width: 782px) {
	.badshah-reveal .wp-block-column + .wp-block-column .badshah-stat::before {
		content: "";
		position: absolute;
		left: 0;
		top: 14%;
		height: 72%;
		width: 1px;
		background: var(--border);
	}
}

/* Clients strip */
.badshah-clients { display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; align-items: center; justify-content: center; }
.badshah-client {
	font-weight: 700;
	color: var(--fg-muted);
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	/* No backdrop-filter: these chips ride the infinite marquee, and blurring
	   behind a moving element re-renders the blur every single frame. */
	background: color-mix(in srgb, var(--bg-card) 80%, transparent);
	transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.badshah-client:hover {
	color: var(--brand);
	border-color: var(--brand);
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

/* CTA band */
.badshah-cta {
	position: relative;
	background: var(--wp--preset--gradient--primary-hero, linear-gradient(135deg, #0A2A66, #123A85));
	color: #fff;
	border-radius: calc(var(--radius) + 6px);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}
.badshah-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(600px 300px at 85% 0%, rgba(245, 166, 35, 0.28), transparent 60%);
	pointer-events: none;
}
.badshah-cta > * { position: relative; z-index: 1; }
.badshah-cta :where(h1, h2, h3, p) { color: #fff; }

/* Forms */
.badshah-form label { font-weight: 600; display: block; }
.badshah-form input,
.badshah-form textarea {
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.75rem 0.95rem;
	background: color-mix(in srgb, var(--bg-page) 45%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--fg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-sm);
	font: inherit;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.badshah-form input:focus,
.badshah-form textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.badshah-form button { border: 0; cursor: pointer; }
.badshah-map iframe { display: block; border-radius: var(--radius); }

/* Generic page header banner */
.badshah-page-header { position: relative; text-align: center; }
.badshah-page-header .wp-block-post-title { margin: 0; }

/* ============================================================
   8. ANIMATIONS
   ============================================================ */
.badshah-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}
.badshah-reveal.is-visible { opacity: 1; transform: none; }
.badshah-reveal.delay-1 { transition-delay: 0.1s; }
.badshah-reveal.delay-2 { transition-delay: 0.2s; }
.badshah-reveal.delay-3 { transition-delay: 0.3s; }

/* ============================================================
   9. FOOTER
   ============================================================ */
.badshah-footer {
	position: relative;
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	border-top: 1px solid var(--glass-border);
}
.badshah-footer a { color: var(--fg-muted); text-decoration: none; transition: color 0.25s ease; }
.badshah-footer a:hover { color: var(--accent); }
.badshah-footer .wp-block-page-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.badshah-footer h4 { color: var(--fg); }

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 781px) {
	:root { --header-h: 64px; }
	.badshah-header-inner { gap: 0.5rem; }
	.badshah-slider { min-height: clamp(440px, 80vh, 620px); }
	.badshah-card { padding: 1.6rem 1.4rem; }
	/* Stack any side-by-side columns with comfortable spacing (WP stacks at 781). */
	.wp-block-columns { gap: 1.25rem; }
}

@media (max-width: 480px) {
	.badshah-client { padding: 0.6rem 1.05rem; font-size: 0.9rem; }
	.badshah-theme-toggle { --size: 38px; }
}

/* ============================================================
   11. SERVICE TABS + CAPABILITY CHIPS  (Allcargo-style)
   ============================================================ */
.badshah-service-tabs { margin-top: var(--wp--preset--spacing--50); }

.badshah-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin-bottom: 1.85rem;
}
.badshah-tab {
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.72rem 1.25rem;
	border-radius: 999px;
	color: var(--fg-muted);
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	border: 1px solid var(--glass-border);
	transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.badshah-tab svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; flex: 0 0 auto; }
.badshah-tab:hover { color: var(--fg); transform: translateY(-2px); }
.badshah-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.badshah-tab[aria-selected="true"] {
	color: #fff;
	background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent)));
	border-color: transparent;
	box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--brand) 70%, transparent);
}

.badshah-tabpanels { position: relative; }
.badshah-tabpanel { display: none; }
.badshah-tabpanel.is-active { display: block; animation: badshah-fade-up 0.45s ease both; }
@keyframes badshah-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Panel inner reuses the glass card; lay out icon/title + copy side by side. */
.badshah-tabpanel .badshah-tab-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
	gap: 1.5rem 2.5rem;
	align-items: center;
}
@media (max-width: 781px) {
	.badshah-tabpanel .badshah-tab-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* Capability badge chips. */
.badshah-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.badshah-chips-label {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	font-weight: 800;
	color: var(--fg-muted);
	margin: 1.25rem 0 0.6rem;
}
.badshah-chip {
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.42rem 0.9rem;
	border-radius: 999px;
	color: var(--fg);
	background: color-mix(in srgb, var(--accent) 14%, color-mix(in srgb, var(--bg-card) 75%, transparent));
	border: 1px solid var(--glass-border);
	transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.badshah-chip:hover { transform: translateY(-2px); color: var(--brand); border-color: color-mix(in srgb, var(--accent) 50%, var(--glass-border)); }

/* ============================================================
   12. CLIENT LOGO MARQUEE
   ============================================================ */
.badshah-marquee {
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.badshah-marquee-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.25rem;
	width: max-content;
	animation: badshah-marquee 34s linear infinite;
}
.badshah-marquee:hover .badshah-marquee-track,
.badshah-marquee:focus-within .badshah-marquee-track { animation-play-state: paused; }
.badshah-marquee .badshah-client { white-space: nowrap; }
@keyframes badshah-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   13. FLOATING QUICK-CONTACT WIDGET
   ============================================================ */
.badshah-fab {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 95;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
}
.badshah-fab-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.6rem;
}
.badshah-fab-item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	opacity: 0;
	transform: translateY(12px) scale(0.92);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.badshah-fab.is-open .badshah-fab-item { opacity: 1; transform: none; pointer-events: auto; }
.badshah-fab.is-open .badshah-fab-item:nth-child(1) { transition-delay: 0.04s; }
.badshah-fab.is-open .badshah-fab-item:nth-child(2) { transition-delay: 0.08s; }
.badshah-fab.is-open .badshah-fab-item:nth-child(3) { transition-delay: 0.12s; }
.badshah-fab.is-open .badshah-fab-item:nth-child(4) { transition-delay: 0.16s; }
.badshah-fab-label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--fg);
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	white-space: nowrap;
}
.badshah-fab-ico {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--brand);
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	transition: transform 0.2s ease, color 0.2s ease;
}
.badshah-fab-item:hover .badshah-fab-ico { transform: scale(1.08); color: var(--accent); }
.badshah-fab-ico svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }

.badshah-fab-toggle {
	width: 58px;
	height: 58px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
	background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--brand)));
	box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--accent) 75%, transparent);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.badshah-fab-toggle:hover { transform: translateY(-2px) scale(1.04); }
.badshah-fab-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.badshah-fab-toggle svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; fill: none; transition: opacity 0.2s ease, transform 0.3s ease; }
.badshah-fab-toggle .icon-close { display: none; }
.badshah-fab.is-open .badshah-fab-toggle { transform: rotate(90deg); }
.badshah-fab.is-open .badshah-fab-toggle .icon-open { display: none; }
.badshah-fab.is-open .badshah-fab-toggle .icon-close { display: block; }

/* A soft attention pulse on first load (once). */
@keyframes badshah-fab-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 16px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.badshah-fab:not(.is-open) .badshah-fab-toggle { animation: badshah-fab-pulse 2.6s ease-out 1.2s 2; }

/* ============================================================
   14. SCROLL PROGRESS BAR
   ============================================================ */
.badshah-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--brand), var(--accent));
	box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
	z-index: 200;
	pointer-events: none;
}

/* Stronger, springier scroll-reveal so sections clearly animate in. */
.badshah-reveal {
	transform: translateY(40px) scale(0.985);
}
.badshah-reveal.is-visible { transform: none; }

/* ============================================================
   15. HEADER CTA  — "Get a Quote" pill in the nav
   ============================================================ */
.badshah-nav-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: 0.35rem;
	color: #fff !important;
	background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--brand)));
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.badshah-nav-cta svg { width: 18px; height: 18px; flex: 0 0 auto; }
.badshah-nav-cta:hover {
	color: #fff;
	background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--brand)));
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--accent) 85%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.badshah-nav-cta:active { transform: translateY(0) scale(0.97); }
/* Inside the open mobile panel the CTA becomes a full-width bar. */
.badshah-header.nav-open .badshah-nav-cta { margin-left: 0; justify-content: center; }

/* ============================================================
   16. 3D  — hero container-crate scene (pure CSS 3D)
   Floating shipping containers built from three faces each; transform-only
   animation so the GPU keeps three small cached layers. Desktop only.
   ============================================================ */
.badshah-hero-scene {
	position: absolute;
	inset: 0;
	pointer-events: none;
	perspective: 1100px;
	z-index: 0;
}
.badshah-crate {
	position: absolute;
	transform-style: preserve-3d;
	animation: badshah-crate-float 9s ease-in-out infinite;
	--w: 150px;  /* container length  */
	--h: 64px;   /* container height  */
	--d: 56px;   /* container depth   */
	--crate: var(--accent);
	width: var(--w);
	height: var(--h);
	opacity: 0.55;
}
.badshah-crate i { position: absolute; display: block; border-radius: 3px; }
/* Corrugated long face. */
.badshah-crate .crate-front {
	width: var(--w);
	height: var(--h);
	background:
		repeating-linear-gradient(90deg,
			rgba(255, 255, 255, 0.16) 0 3px,
			transparent 3px 14px),
		linear-gradient(180deg,
			color-mix(in srgb, var(--crate) 88%, #fff) 0%,
			var(--crate) 55%,
			color-mix(in srgb, var(--crate) 70%, #000) 100%);
	transform: translateZ(calc(var(--d) / 2));
}
/* Short end face. */
.badshah-crate .crate-side {
	width: var(--d);
	height: var(--h);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--crate) 62%, #000) 0%,
		color-mix(in srgb, var(--crate) 42%, #000) 100%);
	transform: rotateY(90deg) translateZ(calc(var(--w) - var(--d) / 2));
}
/* Lid. */
.badshah-crate .crate-top {
	width: var(--w);
	height: var(--d);
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--crate) 96%, #fff) 0%,
		color-mix(in srgb, var(--crate) 78%, #fff) 100%);
	transform: rotateX(90deg) translateZ(calc(var(--d) / 2));
}
.badshah-crate--1 {
	top: 16%;
	right: 6%;
	transform: rotateX(-22deg) rotateY(-34deg);
	animation-delay: 0s;
}
.badshah-crate--2 {
	bottom: 18%;
	right: 13%;
	--w: 110px; --h: 48px; --d: 42px;
	--crate: var(--brand);
	transform: rotateX(-18deg) rotateY(28deg);
	animation-delay: -3s;
	opacity: 0.45;
}
.badshah-crate--3 {
	top: 24%;
	left: 5%;
	--w: 92px; --h: 40px; --d: 36px;
	--crate: #7e8da6;
	transform: rotateX(-24deg) rotateY(-20deg);
	animation-delay: -6s;
	opacity: 0.35;
}
@keyframes badshah-crate-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -18px; }
}
/* Keep the text layer above the scene. */
.badshah-hero .badshah-slider { position: relative; z-index: 1; }
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
	.badshah-hero-scene { display: none; }
}

/* ============================================================
   17. 3D  — pointer tilt on glass cards (vanilla-tilt pattern,
   dependency-free; interactions.js sets the custom properties)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
	.badshah-card.has-tilt {
		transform: perspective(900px)
			rotateX(var(--tilt-x, 0deg))
			rotateY(var(--tilt-y, 0deg));
		transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
	}
	.badshah-card.has-tilt:hover {
		transform: perspective(900px)
			rotateX(var(--tilt-x, 0deg))
			rotateY(var(--tilt-y, 0deg))
			translateY(-8px);
	}
}

/* ============================================================
   17b. PRODUCT TILES  — Apple-homepage-style content grid.
   Full-bleed grid: one wide feature tile per section plus 2-up
   half tiles, each a centred stack of title / sub / pill links
   with a large visual anchored at the bottom.
   ============================================================ */
.badshah-tilegrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	margin: 0 0 12px;
}
.badshah-tile {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-height: clamp(400px, 52vh, 500px);
	padding: clamp(2.75rem, 6vh, 4rem) 1.5rem 0;
	background: linear-gradient(180deg, #fafbfd 0%, #e9eef6 100%);
	color: #1d1d1f;
}
[data-theme="dark"] .badshah-tile {
	background: linear-gradient(180deg, #1a1d24 0%, #121419 100%);
	color: var(--fg);
}
.badshah-tile--wide {
	grid-column: 1 / -1;
	min-height: clamp(470px, 64vh, 590px);
}
/* Dark feature tile — stays dark in both themes (Apple's black tiles). */
.badshah-tile--dark,
[data-theme="dark"] .badshah-tile--dark {
	background: var(--wp--preset--gradient--primary-hero, linear-gradient(135deg, #0A2A66, #123A85));
	color: #fff;
}
.badshah-tile--dark :where(h2, h3, p) { color: #fff; }

.badshah-tile-kicker {
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 0.5rem;
}
.badshah-tile-title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.08;
	margin: 0;
}
.badshah-tile--wide .badshah-tile-title { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); }
.badshah-tile-sub {
	font-size: 1.02rem;
	max-width: 46ch;
	margin: 0.65rem auto 0;
	color: color-mix(in srgb, currentColor 72%, transparent);
}
.badshah-tile-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	margin-top: 1.15rem;
}

/* Small Apple-style pill buttons. */
.badshah-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.62em 1.25em;
	border-radius: 999px;
	text-decoration: none;
	color: #fff;
	background: var(--brand);
	border: 1px solid var(--brand);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.badshah-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--brand) 75%, transparent); color: #fff; }
.badshah-pill--ghost { background: transparent; color: var(--brand); }
.badshah-pill--ghost:hover { background: var(--brand); color: #fff; }
.badshah-tile--dark .badshah-pill { background: #fff; border-color: #fff; color: #0A2A66; }
.badshah-tile--dark .badshah-pill:hover { color: #0A2A66; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.5); }
.badshah-tile--dark .badshah-pill--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.badshah-tile--dark .badshah-pill--ghost:hover { background: #fff; color: #0A2A66; }

/* Visual area pinned to the tile's lower half. */
.badshah-tile-visual {
	margin-top: auto;
	padding: 2.25rem 0 2.75rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
/* Oversized app-icon-style badge holding the service glyph. */
.badshah-tile-icon {
	width: clamp(110px, 16vw, 150px);
	aspect-ratio: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 26%;
	color: var(--accent);
	background:
		radial-gradient(120% 120% at 18% 12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%),
		linear-gradient(145deg, color-mix(in srgb, var(--brand) 24%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
	border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
	box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--brand) 55%, transparent);
	transition: transform 0.3s ease;
}
.badshah-tile:hover .badshah-tile-icon { transform: translateY(-6px) scale(1.04); }
.badshah-tile-icon svg {
	width: 46%;
	height: 46%;
	stroke: currentColor;
	stroke-width: 1.6;
	fill: none;
}

/* Section heading band above a tile grid ("Endless entertainment." style). */
.badshah-band {
	width: 100%;
	text-align: center;
	padding: clamp(2.5rem, 6vh, 4rem) 1.5rem 1.6rem;
}
.badshah-band h2, .badshah-band h3 { margin: 0; }
.badshah-band .badshah-tile-sub { max-width: 60ch; }

/* Stat counters row inside a tile. */
.badshah-tile-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	width: min(100%, 1100px);
	margin: auto 0 0;
	padding: 2.5rem 0 3rem;
}

/* 3D crate cluster for the feature tile (reuses hero crate faces). */
.badshah-tile-scene {
	position: relative;
	width: min(560px, 88%);
	height: 240px;
	perspective: 1100px;
	pointer-events: none;
}
.badshah-tile-scene .badshah-crate { position: absolute; opacity: 0.95; }
.badshah-tile-scene .badshah-crate--1 { top: 18%; right: 2%; left: auto; --w: 190px; --h: 82px; --d: 70px; }
.badshah-tile-scene .badshah-crate--2 { bottom: 0; right: auto; left: 36%; --w: 150px; --h: 64px; --d: 56px; }
.badshah-tile-scene .badshah-crate--3 { top: 22%; left: 0; opacity: 0.8; --w: 120px; --h: 52px; --d: 46px; }

/* Text-led tile (no big visual): natural height, breathing room below. */
.badshah-tile--text {
	min-height: 0;
	padding-bottom: clamp(2.5rem, 5vh, 3.5rem);
}
.badshah-tile--text .badshah-tile-sub { max-width: 64ch; }

/* Chips / value pills centred inside tiles. */
.badshah-tile .badshah-chips,
.badshah-tile .badshah-clients { justify-content: center; margin-top: 1.4rem; }
.badshah-tile--dark .badshah-chip,
.badshah-tile--dark .badshah-client {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.1);
}

/* Enquiry form inside a tile. */
.badshah-tile .badshah-form {
	width: min(100%, 560px);
	text-align: left;
	margin: 1.4rem auto clamp(2.5rem, 5vh, 3.5rem);
}

/* Edge-to-edge map tile. */
.badshah-tile--map { min-height: 0; padding: 0; display: block; }
.badshah-tile--map iframe { display: block; width: 100%; height: clamp(320px, 48vh, 440px); border: 0; }

@media (max-width: 860px) {
	.badshah-tilegrid { grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
	.badshah-tile { min-height: 380px; }
	.badshah-tile--wide { min-height: 430px; }
	.badshah-tile--text, .badshah-tile--map { min-height: 0; }
	.badshah-tile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.badshah-tile-scene { height: 190px; }
}

/* ============================================================
   18. TYPOGRAPHY & POLISH  (Apple-inspired scale, full-width layout)
   ============================================================ */
/* ---- Apple-scale typography: big, tight, confident ---- */
main h2.wp-block-heading {
	font-size: clamp(1.9rem, 1.15rem + 2.4vw, 3.1rem);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.1;
}
.badshah-hero h1 {
	font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
}
.badshah-page-header .wp-block-post-title {
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* Page title banner joins the tile system: dark gradient band with the same
   12px gap before the first content tile. */
.badshah-page-header {
	background: var(--wp--preset--gradient--primary-hero, linear-gradient(135deg, #0A2A66, #123A85)) !important;
	margin-bottom: 12px !important;
	padding-bottom: var(--wp--preset--spacing--50, 2.5rem) !important;
}
.badshah-page-header .wp-block-post-title {
	color: #fff;
	font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.6rem);
}
@media (max-width: 860px) {
	.badshah-page-header { margin-bottom: 8px !important; }
}

/* Cards match the tile language: larger radius, calmer solid surface. */
.badshah-card { border-radius: 22px; }

/* ============================================================
   19. CLAY HERO  (CodePen port) — wave visual, giant bg text,
   animated title, spinning badge, resource list, clay cards.
   ============================================================ */
.clay-stage { position: relative; overflow: visible; }
.clay-hero {
	position: relative;
	z-index: 1;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 clamp(20px, 3vw, 40px) 60px;
}

/* ---- Soft pastel glow blobs (the hero atmosphere) ---- */
/* Soft glows via gradient falloff alone — no blur() filter, so GSAP
   transforms stay composited instead of re-rasterizing each frame. */
.wave-glow {
	position: absolute;
	top: -80px;
	right: -120px;
	width: 60%;
	aspect-ratio: 1;
	background: radial-gradient(closest-side, rgba(40, 190, 255, 0.32), rgba(40, 190, 255, 0.12) 45%, transparent 72%);
	z-index: 1;
	pointer-events: none;
	will-change: transform;
}
.wave-glow.b {
	top: 30%;
	right: 10%;
	width: 40%;
	background: radial-gradient(closest-side, rgba(70, 230, 180, 0.28), rgba(70, 230, 180, 0.1) 45%, transparent 72%);
}

/* ---- Giant background text — sits below the hero title, hugging the slide bottom ---- */
.bg-text {
	position: absolute;
	left: 50%;
	top: auto;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 1;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 800;
	font-size: clamp(140px, 20vw, 300px);
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(15, 15, 25, 0.08);
	pointer-events: none;
	white-space: nowrap;
	user-select: none;
}
[data-theme="dark"] .bg-text { -webkit-text-stroke-color: rgba(240, 240, 250, 0.09); }

/* ---- Hero title block ---- */
.clay-hero .hero { position: relative; z-index: 5; padding: 60px 0 16px; }
.clay-hero .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--fg);
	margin-bottom: 14px;
}
.clay-hero .eyebrow::before { content: ""; display: inline-block; width: 10px; height: 1px; background: currentColor; }
.clay-hero .eyebrow::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-left: 4px; }

.clay-hero .title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(38px, 6.4vw, 92px);
	line-height: 0.94;
	letter-spacing: -0.025em;
	color: var(--fg);
	margin: 0;
	position: relative;
	z-index: 4;
	font-weight: 800;
	text-shadow: none;
}
.title-line { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); flex-wrap: wrap; }
.title-desc {
	font-family: inherit;
	font-weight: 400;
	font-size: clamp(11px, 0.95vw, 14px);
	line-height: 1.35;
	color: var(--fg-muted);
	max-width: 24ch;
	letter-spacing: 0;
	margin: 0;
	align-self: center;
}
.paren-group { display: inline-flex; align-items: center; gap: 6px; line-height: 0.94; }
.paren-group .paren { color: var(--fg); display: inline-block; transform: translateY(-2%); font-weight: 400; }
.avatar-group { display: flex; }
.avatar-group svg,
.avatar-group img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--surface);
	margin-left: -15px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	background: var(--wp--preset--color--surface);
}
.avatar-group svg:first-child { margin-left: 0; }

.icon-tile {
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 100px;
	background: var(--brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fafaf7;
	box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.5), 0 10px 20px -6px rgba(0, 0, 0, 0.32),
		0 3px 6px -1px rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.12),
		inset 0 -3px 6px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	z-index: 10;
	transition: box-shadow 0.5s cubic-bezier(0.6, 0, 0.2, 1);
	will-change: transform;
}
.icon-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, transparent 35%, transparent 70%, rgba(0, 0, 0, 0.3) 100%);
	pointer-events: none;
	border-radius: inherit;
}
.icon-tile:hover {
	box-shadow: 0 32px 50px -16px rgba(0, 0, 0, 0.6), 0 14px 26px -6px rgba(0, 0, 0, 0.38),
		0 4px 8px -1px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.15),
		inset 0 -3px 6px rgba(0, 0, 0, 0.5);
}

.hero-desc-right {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	text-align: left;
	font-size: 0.9rem;
	color: var(--fg);
	font-weight: 500;
	letter-spacing: normal;
}
.hero-desc-right .tag-ico { width: 18px; height: 18px; color: var(--brand); flex: 0 0 auto; }
.future-tag {
	font-weight: 500;
	font-size: clamp(11px, 0.9vw, 13px);
	line-height: 1.35;
	color: var(--fg-muted);
	align-self: center;
	margin-left: 4px;
}

/* ---- Circular spinning badge ---- */
.clay-hero .badge {
	position: absolute;
	right: 12px;
	top: 60px;
	width: 100px;
	height: 100px;
	z-index: 6;
	color: var(--fg);
}
.clay-hero .badge .ring { position: absolute; inset: 0; animation: clay-spin 18s linear infinite; }
.clay-hero .badge:hover .ring { animation-duration: 6s; }
@keyframes clay-spin { to { transform: rotate(360deg); } }
.badge-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--border);
	display: grid;
	place-items: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.badge-center svg { width: 14px; height: 14px; color: var(--fg); }

/* ---- Bottom clay cards ---- */
.clay-hero .bottom {
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
	margin: 24px 0 40px;
	align-items: start;
}
.clay-card {
	background: var(--wp--preset--color--surface);
	border-radius: 24px;
	border: 1px solid var(--line, rgba(0, 0, 0, 0.06));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 4px rgba(0, 0, 0, 0.03),
		0 12px 36px rgba(20, 40, 80, 0.07), 0 30px 60px rgba(20, 40, 80, 0.04);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s;
}
[data-theme="dark"] .clay-card {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 4px rgba(0, 0, 0, 0.3),
		0 12px 36px rgba(0, 0, 0, 0.4);
}
.clay-card:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 4px rgba(0, 0, 0, 0.04),
		0 18px 50px rgba(20, 40, 80, 0.1), 0 40px 80px rgba(20, 40, 80, 0.06);
}
.doctor-cluster { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.doctor-card { padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.doctor-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: linear-gradient(135deg, #d9a07a, #8b5e3c);
	box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2);
	display: grid;
	place-items: center;
}
.doctor-avatar svg { width: 100%; height: 100%; }
.doctor-meta { flex: 1; line-height: 1.2; }
.doctor-meta .name { font-weight: 600; font-size: 15px; color: var(--fg); }
.doctor-meta .role { font-size: 12.5px; color: var(--fg-muted); margin-top: 3px; }
.search-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--bg-page);
	display: grid;
	place-items: center;
	color: var(--fg);
	transition: background 0.25s, transform 0.25s, color 0.25s;
}
.search-btn:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); transform: rotate(-8deg); }
.search-btn svg { width: 16px; height: 16px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-card { padding: 18px; min-height: 140px; }
.info-card .ic-head {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fg);
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--bg-page);
	margin-bottom: 12px;
}
.info-card .ic-head svg { width: 14px; height: 14px; }
.info-card p { font-size: 13px; line-height: 1.45; color: var(--fg-muted); margin: 0; }

.treatments { display: flex; flex-direction: column; gap: 14px; margin-left: auto; max-width: 440px; width: 100%; }
.treatment { padding: 20px 22px; }
.treatment .head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.treatment .icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--bg-page);
	border: 1px solid var(--border);
	display: grid;
	place-items: center;
	color: var(--fg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.treatment .icon svg { width: 16px; height: 16px; }
.treatment h3 { flex: 1; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--fg); }
.menu-dots {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: transparent;
	display: grid;
	place-items: center;
	color: var(--fg-muted);
	transition: background 0.25s;
}
.menu-dots:hover { background: var(--bg-page); color: var(--fg); }
.menu-dots svg { width: 18px; height: 18px; }
.treatment p { font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); margin: 0 0 14px; }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }
.clay-hero .tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--bg-page);
	border: 1px solid var(--border);
	font-size: 12px;
	color: var(--fg);
	font-weight: 500;
}
.clay-hero .tag svg { width: 13px; height: 13px; color: var(--fg-muted); }

/* ---- Footer row: social + discover ---- */
.footer-row { position: relative; z-index: 6; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; margin-top: 20px; }
.social { display: inline-flex; gap: 10px; }
.social-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--border);
	display: grid;
	place-items: center;
	color: var(--fg);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s, background 0.3s, color 0.3s;
}
.social-btn:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); transform: translateY(-3px) scale(1.05); }
.social-btn svg { width: 16px; height: 16px; }
.discover { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--fg); font-size: 13.5px; text-decoration: none; }
.discover .arrow-down {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--border);
	display: grid;
	place-items: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	animation: clay-bounce 1.8s ease-in-out infinite;
}
.discover .arrow-down svg { width: 14px; height: 14px; }
@keyframes clay-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

/* ---- Clay hero responsive ---- */
@media (max-width: 1100px) {
	.clay-hero .badge { right: 0; top: 48px; transform: scale(0.9); }
}
@media (max-width: 900px) {
	.clay-hero .bottom { grid-template-columns: 1fr; }
	.doctor-cluster, .treatments { margin: 0 auto; max-width: 500px; }
	.footer-row { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
	.clay-hero .badge { position: relative; left: auto; right: auto; top: auto; margin: 18px 0; }
	.bg-text { font-size: clamp(110px, 28vw, 200px); }
}
@media (max-width: 540px) {
	.clay-hero { padding: 0 16px 40px; }
	.clay-hero .title { font-size: clamp(38px, 12vw, 62px); }
	.paren-group { font-size: clamp(38px, 12vw, 62px); }
	.info-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   21. GLASS STORY FRONT — the neobrutal story structure re-skinned
   as glassmorphism on the clay palette: frosted panels, glass
   borders, rounded tiles and blue/teal glows on the ambient mesh.
   ============================================================ */
.bs-stage {
	position: relative;
	z-index: 1;
	font-family: var(--bs-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	max-width: 1360px;
	margin: 0 auto;
	padding: 10px clamp(20px, 3vw, 40px) 60px;
}
:root {
	--bs-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--bs-display: var(--wp--preset--font-family--heading, inherit);
	--bs-r: 24px;
	--bs-r-sm: 14px;
}

/* ---- Shared glass panel recipe ---- */
.bs-ticker,
.bs-chapter-text,
.bs-visual,
.bs-break-text,
.bs-stat-card,
.bs-epi-card,
.bs-cta,
.bs-motto {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}

/* ---- Grain (kept very subtle behind glass) ---- */
.bs-grain { position: relative; }
.bs-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ---- Ghost display text ---- */
.bs-ghost {
	position: absolute;
	font-family: var(--bs-display);
	font-size: clamp(5rem, 14vw, 12rem);
	font-weight: 800;
	color: var(--fg);
	opacity: 0.04;
	white-space: nowrap;
	pointer-events: none;
	line-height: 1;
	z-index: 0;
	user-select: none;
}
.bs-ghost-break { top: -1rem; right: 0; font-size: clamp(4rem, 9vw, 8rem); opacity: 0.08; color: #fff; }
.bs-ghost-thread { top: -1.5rem; left: 0.5rem; color: #fff; opacity: 0.06; }
.bs-ghost-epi { top: -1.5rem; right: 0; }

/* ---- Chips: frosted pills ---- */
.bs-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--bs-mono);
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--glass-border);
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	box-shadow: inset 0 1px 0 var(--glass-hi);
	color: var(--fg);
	line-height: 1.4;
	width: fit-content;
}
.bs-chip.filled {
	background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent)));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand) 70%, transparent);
}
.bs-chip-row, .bs-tags { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-top: 1.8rem; position: relative; z-index: 1; }

.bs-stroke { -webkit-text-stroke: 2.5px var(--brand); color: transparent !important; }

/* ---- Ticker: sticky frosted bar ---- */
.bs-ticker {
	color: var(--brand);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 10px 0;
	overflow: hidden;
	white-space: nowrap;
	position: sticky;
	top: 10px;
	z-index: 60;
	border-radius: 999px;
	margin: 6px 0 26px;
}
.bs-ticker-inner { display: inline-block; animation: bs-ticker 40s linear infinite; }
@keyframes bs-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bs-ticker-inner { animation: none; } }

/* ---- Chapters: two glass tiles per row ---- */
.bs-chapter { margin-bottom: 28px; }
.bs-chapter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.bs-flip { direction: rtl; }
.bs-chapter-text {
	padding: clamp(2rem, 4.5vw, 3.6rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 2;
	border-radius: var(--bs-r);
	direction: ltr;
	color: var(--fg);
}
.bs-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 440px;
	z-index: 1;
	border-radius: var(--bs-r);
	direction: ltr;
}
.bs-visual-col { flex-direction: column; gap: 1.8rem; padding: 2.5rem; }

/* Per-chapter glow tints over the glass */
.bs-ch1 .bs-chapter-text { background-image: linear-gradient(150deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent 55%); }
.bs-ch1 .bs-visual { background-image: radial-gradient(120% 100% at 80% 15%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 65%); }
.bs-ch2 .bs-chapter-text { background-image: linear-gradient(150deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%); }
.bs-ch2 .bs-visual { background-image: radial-gradient(120% 100% at 20% 15%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 65%); }
.bs-ch3 .bs-chapter-text { background-image: linear-gradient(150deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 55%); }
.bs-ch3 .bs-visual { background-image: radial-gradient(120% 100% at 50% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }

.bs-num {
	font-family: var(--bs-display);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.bs-num::before { content: ""; display: block; width: 2rem; height: 2px; background: currentColor; border-radius: 2px; }
.bs-ch1 .bs-num, .bs-ch3 .bs-num { color: var(--brand); }
.bs-ch2 .bs-num { color: var(--accent); }
.bs-title {
	font-family: var(--bs-display);
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	font-weight: 800;
	line-height: 1.02;
	margin: 0 0 1.4rem;
	color: var(--fg);
}
.bs-ch2 .bs-title .bs-stroke { -webkit-text-stroke-color: var(--accent); }
.bs-body { font-size: clamp(0.82rem, 1.05vw, 0.95rem); line-height: 1.9; max-width: 46ch; color: var(--fg-muted); }
.bs-body strong, .bs-body em { color: var(--fg); }
.bs-body p { margin: 0; }
.bs-body p + p { margin-top: 1rem; }

/* Ch1 visual: glass frame + container yard + floating glyphs */
.bs-frame {
	position: absolute;
	border-radius: var(--bs-r-sm);
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-lg);
	color: var(--brand);
	display: grid;
	place-items: center;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.bs-frame:hover { transform: scale(1.03) rotate(0deg) !important; z-index: 10; }
.bs-frame svg { width: 86%; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--brand) 45%, transparent)); }
.bs-frame-ch1 { width: 56%; height: 50%; bottom: 8%; left: 6%; transform: rotate(-2deg); z-index: 2; padding: 1rem; }
.bs-yard {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 3px;
	width: min(250px, 44%);
	padding: 8px;
	border-radius: var(--bs-r-sm);
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
	position: absolute;
	top: 9%;
	right: 6%;
	z-index: 3;
}
.bs-yard-cell {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	border-radius: 5px;
	background: color-mix(in srgb, var(--fg) 5%, transparent);
	color: transparent;
}
.bs-yard-cell.c1 { color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); text-shadow: 0 0 10px color-mix(in srgb, var(--brand) 70%, transparent); }
.bs-yard-cell.c2 { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); }
.bs-glyph {
	position: absolute;
	font-family: var(--bs-display);
	font-weight: 800;
	color: color-mix(in srgb, var(--brand) 30%, transparent);
	pointer-events: none;
	animation: bs-float 6s ease-in-out infinite;
	z-index: 1;
}
.bs-glyph.g1 { top: 10%; left: 6%; font-size: 2.5rem; }
.bs-glyph.g2 { top: 40%; right: 8%; font-size: 1.8rem; animation-delay: 0.8s; }
.bs-glyph.g3 { bottom: 14%; right: 12%; font-size: 1.5rem; animation-delay: 1.5s; }
.bs-glyph.g4 { top: 64%; left: 12%; font-size: 1.6rem; animation-delay: 0.4s; }
.bs-glyph.g5 { bottom: 34%; left: 46%; font-size: 1.3rem; animation-delay: 2s; }
@keyframes bs-float {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50% { transform: translateY(-12px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .bs-glyph, .bs-plane { animation: none !important; } }

/* Ch2 visual: ship glow + frosted client manifest + plane */
.bs-visual-stack { flex-direction: column; justify-content: flex-end; }
.bs-stack-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 44%;
	display: grid;
	place-items: center;
	color: var(--accent);
	border-bottom: 1px solid var(--glass-border);
}
.bs-stack-top svg { width: min(300px, 62%); filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--accent) 50%, transparent)); }
.bs-manifest { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 1.4rem 0 2rem; width: 100%; }
.bs-spine {
	width: clamp(190px, 24vw, 260px);
	height: 40px;
	border-radius: 12px;
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
	display: flex;
	align-items: center;
	padding: 0 0.9rem 0 1.3rem;
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--fg);
	position: relative;
	overflow: hidden;
	transition: transform 0.25s;
	cursor: pointer;
}
.bs-spine:hover { transform: translateX(8px); z-index: 5; }
.bs-spine span { position: absolute; left: 0; top: 0; width: 7px; height: 100%; }
.bs-spine.s1 span { background: var(--brand); box-shadow: 0 0 12px var(--brand); }
.bs-spine.s2 span { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.bs-spine.s3 span { background: color-mix(in srgb, var(--brand) 55%, var(--accent)); }
.bs-spine.s4 span { background: var(--wp--preset--color--primary-600); }
.bs-spine.s5 span { background: var(--accent); }
.bs-plane { position: absolute; bottom: 1.4rem; right: 1.4rem; z-index: 4; color: var(--fg); opacity: 0.85; animation: bs-float 4s ease-in-out infinite; }
.bs-plane-dot { fill: var(--brand); }

/* Ch3 visual: glass terminal + glowing tonnage bars */
.bs-terminal {
	width: clamp(250px, 30vw, 380px);
	border-radius: var(--bs-r-sm);
	overflow: hidden;
	border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--glass-shadow-lg);
	background: rgba(10, 14, 22, 0.82);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	color: var(--accent);
	font-family: var(--bs-mono);
	font-size: 0.74rem;
	position: relative;
	z-index: 3;
}
.bs-terminal-bar { background: rgba(0, 0, 0, 0.45); padding: 0.5rem 0.9rem; display: flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.bs-terminal-path { font-size: 0.64rem; color: #8a8a94; margin-left: 0.4rem; }
.bs-dot { width: 10px; height: 10px; border-radius: 50%; }
.bs-dot.r { background: #ff5f57; }
.bs-dot.y { background: #ffbd2e; }
.bs-dot.g { background: #28ca41; }
.bs-terminal-body { padding: 1rem 1.2rem; line-height: 2; }
.bs-prompt { color: #6cb5ff; }
.bs-cmd { color: #fff; }
.bs-out { color: #35d6d1; opacity: 0.9; }
.bs-tgap { margin-top: 0.4rem; }
.bs-cursor { display: inline-block; width: 8px; height: 1em; background: #35d6d1; animation: bs-blink 0.9s step-end infinite; vertical-align: text-bottom; }
@keyframes bs-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.bs-tonnage { display: flex; gap: 8px; align-items: flex-end; z-index: 2; padding-bottom: 1.2rem; }
.bs-ton {
	width: 36px;
	border-radius: 8px 8px 4px 4px;
	background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 45%, transparent));
	box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
	position: relative;
	transition: filter 0.2s;
}
.bs-ton:nth-child(even) { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent)); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.bs-ton:hover { filter: brightness(1.15); }
.bs-ton i {
	position: absolute;
	bottom: -1.35rem;
	left: 50%;
	transform: translateX(-50%);
	font-style: normal;
	font-size: 0.54rem;
	font-weight: 700;
	color: var(--fg-muted);
}

/* ---- Interlude: gradient stat tile + frosted teal tile ---- */
.bs-break { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.bs-break-stat {
	background: var(--wp--preset--gradient--primary-hero);
	border-radius: var(--bs-r);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow-lg);
	display: grid;
	place-content: center;
	text-align: center;
	gap: 0.6rem;
	padding: 3.5rem 3rem;
	overflow: hidden;
	position: relative;
}
.bs-break-stat::before {
	content: "";
	position: absolute;
	inset: -30%;
	background: radial-gradient(40% 40% at 30% 30%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 70%),
		radial-gradient(35% 35% at 75% 70%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
	filter: blur(30px);
	pointer-events: none;
}
.bs-break-num {
	font-family: var(--bs-display);
	font-weight: 800;
	font-size: clamp(5rem, 10vw, 9rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 3px #fff;
	position: relative;
}
.bs-break-num span { -webkit-text-stroke-color: var(--accent); }
.bs-break-cap { font-family: var(--bs-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); position: relative; }
.bs-break-text {
	border-radius: var(--bs-r);
	background-image: linear-gradient(150deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
	color: var(--fg);
	padding: clamp(2.2rem, 5vw, 4rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.bs-break-text .bs-chip { margin-bottom: 1.2rem; position: relative; z-index: 1; }
.bs-break-text .bs-chip.filled { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--brand))); }
.bs-break-text h2 {
	font-family: var(--bs-display);
	font-size: clamp(1.8rem, 3.6vw, 3.2rem);
	font-weight: 800;
	line-height: 1;
	margin: 0;
	position: relative;
	z-index: 1;
	color: var(--fg);
}
.bs-break-text h2 .bs-stroke { -webkit-text-stroke-color: var(--accent); }
.bs-break-text p { margin: 1.2rem 0 0; font-size: clamp(0.8rem, 1.1vw, 0.95rem); line-height: 1.8; max-width: 42ch; position: relative; z-index: 1; color: var(--fg-muted); }
.bs-break-chip { margin-top: 1.5rem; position: relative; z-index: 1; }

/* ---- Numbers strip: frosted stat tiles ---- */
.bs-strip { margin-bottom: 28px; }
.bs-strip-label {
	font-family: var(--bs-display);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 1.2rem;
}
.bs-strip-row {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 1rem;
	scrollbar-width: thin;
	scrollbar-color: var(--brand) transparent;
}
.bs-strip-row::-webkit-scrollbar { height: 4px; }
.bs-strip-row::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 4px; }
.bs-stat-card {
	flex-shrink: 0;
	min-width: 175px;
	border-radius: 18px;
	color: var(--fg);
	padding: 1.4rem 1.5rem 1.2rem;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
}
.bs-stat-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-lg); }
.bs-stat-num { font-family: var(--bs-display); font-weight: 800; font-size: 2.1rem; line-height: 1; background: linear-gradient(120deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bs-stat-cap { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin-top: 0.5rem; }

/* ---- The long haul: gradient glass panel ---- */
.bs-thread {
	position: relative;
	overflow: hidden;
	border-radius: calc(var(--bs-r) + 4px);
	background: var(--wp--preset--gradient--primary-hero);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow-lg);
	margin-bottom: 28px;
}
.bs-thread-inner { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 70vh; position: relative; z-index: 1; }
.bs-thread-text {
	padding: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 1;
}
.bs-thread h2 {
	font-family: var(--bs-display);
	font-size: clamp(2rem, 4.6vw, 4rem);
	font-weight: 800;
	color: #fff;
	line-height: 0.97;
	margin: 0;
}
.bs-thread h2 .bs-stroke { -webkit-text-stroke-color: #fff; }
.bs-quote {
	font-size: clamp(0.9rem, 1.4vw, 1.1rem);
	color: rgba(255, 255, 255, 0.88);
	max-width: 52ch;
	line-height: 1.8;
	margin: 2rem 0 0;
}
.bs-quote strong { color: #9fe8e4; }
.bs-timeline { display: flex; align-items: center; margin-top: 3rem; flex-wrap: wrap; row-gap: 1.5rem; }
.bs-tnode { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.bs-tdot {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	color: #fff;
	transition: background 0.2s, transform 0.2s;
}
.bs-tdot:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
.bs-tlabel { font-size: 0.56rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); text-align: center; text-transform: uppercase; letter-spacing: 0.08em; }
.bs-tline { flex: 1; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 60%, transparent), color-mix(in srgb, var(--accent) 60%, transparent)); border-radius: 2px; min-width: 1.2rem; }
.bs-thread-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; padding: clamp(1.5rem, 3vw, 2.5rem); }
.bs-thread-cell {
	display: grid;
	place-items: center;
	color: rgba(255, 255, 255, 0.92);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
	transition: background 0.25s, transform 0.25s;
}
.bs-thread-cell:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-3px); }
.bs-thread-cell svg { width: 52%; max-width: 160px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35)); }

/* ---- Epilogue ---- */
.bs-epilogue { position: relative; overflow: visible; padding-top: 1rem; }
.bs-epilogue h2 {
	font-family: var(--bs-display);
	font-size: clamp(2rem, 5.4vw, 4.8rem);
	font-weight: 800;
	line-height: 0.94;
	max-width: 16ch;
	margin: 0;
	position: relative;
	z-index: 2;
	color: var(--fg);
}
.bs-epilogue h2 .bs-stroke { -webkit-text-stroke-color: var(--brand); }
.bs-epi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 2.5rem; position: relative; z-index: 2; }
.bs-epi-card {
	padding: 1.8rem;
	border-radius: 20px;
	color: var(--fg);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
	position: relative;
	overflow: hidden;
}
.bs-epi-card:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-lg); z-index: 2; }
.bs-epi-card.e1 { background-image: linear-gradient(155deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent 65%); }
.bs-epi-card.e2 { background-image: linear-gradient(155deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%); }
.bs-epi-card.e3 { background-image: linear-gradient(155deg, color-mix(in srgb, var(--brand) 12%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); }
.bs-epi-card.e4 { background-image: linear-gradient(155deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%); }
.bs-epi-icon {
	font-size: 1.4rem;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--glass-bg-strong);
	border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 var(--glass-hi);
	margin-bottom: 0.9rem;
}
.bs-epi-card h3 { font-family: var(--bs-display); font-size: 0.95rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--fg); }
.bs-epi-card p { font-size: 0.78rem; line-height: 1.65; color: var(--fg-muted); margin: 0; }

.bs-mottos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.5rem; position: relative; z-index: 2; }
.bs-motto {
	padding: 0.9rem 1.5rem;
	border-radius: 999px;
	font-family: var(--bs-display);
	font-size: clamp(0.85rem, 1.1vw, 1rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--fg);
	transition: transform 0.2s, box-shadow 0.2s;
}
.bs-motto:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-lg); }
.bs-motto-stroke { color: transparent !important; -webkit-text-stroke: 1.5px var(--brand); }

.bs-cta {
	margin-top: 2.5rem;
	border-radius: var(--bs-r);
	padding: clamp(1.6rem, 3.5vw, 2.6rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
	background-image: linear-gradient(130deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent 45%, color-mix(in srgb, var(--accent) 9%, transparent));
}
.bs-cta h3 { font-family: var(--bs-display); font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.7rem); margin: 0 0 0.4rem; color: var(--fg); }
.bs-cta p { margin: 0; font-size: 0.82rem; line-height: 1.6; color: var(--fg-muted); max-width: 46ch; }
.bs-cta-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.bs-btn {
	display: inline-flex;
	align-items: center;
	font-family: var(--bs-mono);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.9rem 1.6rem;
	border-radius: 999px;
	border: 1px solid var(--glass-border);
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
	color: var(--fg);
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
}
.bs-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-lg); }
.bs-btn.filled {
	background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent)));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--brand) 70%, transparent);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.bs-epi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.bs-chapter-inner, .bs-break, .bs-thread-inner { grid-template-columns: 1fr; }
	.bs-visual { min-height: 380px; }
	.bs-thread-grid { min-height: 280px; }
	.bs-frame-ch1 { width: 64%; }
	.bs-yard { width: min(220px, 54%); }
	.bs-terminal { width: min(340px, 92%); }
	.bs-break-stat { padding: 2.5rem 2rem; }
}
@media (max-width: 500px) {
	.bs-epi-grid { grid-template-columns: 1fr; }
	.bs-glyph.g5 { display: none; }
	.bs-ticker { border-radius: 0; margin-left: -20px; margin-right: -20px; }
}

/* ============================================================
   22. GLASS INNER PAGES — the tile system (About / Services /
   Clients / Contact) re-skinned to match the glass story front:
   same structure & tiling, frosted-glass surfaces on the clay
   palette. Overrides section 17b visuals; layout is unchanged.
   ============================================================ */

/* Constrain bands + grids to the same 1360px stage as the front
   (1440px border-box incl. the 40px side padding). border-box is
   load-bearing: both carry width:100%, so content-box sizing pushes
   them 40px past the viewport on phones. */
.badshah-band,
.badshah-tilegrid {
	box-sizing: border-box;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 3vw, 40px);
	padding-right: clamp(20px, 3vw, 40px);
}
.badshah-tilegrid { gap: 24px; margin-bottom: 24px; }

/* Tiles become frosted glass panels. */
.badshah-tile,
[data-theme="dark"] .badshah-tile {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	border: 1px solid var(--glass-border);
	border-radius: 24px;
	box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
	color: var(--fg);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.badshah-tile:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-lg); }

/* Feature tile keeps the hero gradient (matches the front "Long Haul"
   panel) but picks up the glass border + radius. */
.badshah-tile--dark,
[data-theme="dark"] .badshah-tile--dark {
	background: var(--wp--preset--gradient--primary-hero, linear-gradient(135deg, #0a2a66, #123a85));
	border: 1px solid var(--glass-border);
	color: #fff;
}

/* Alternate tiles get soft brand/teal glow tints over the glass. */
.badshah-tile:not(.badshah-tile--dark):nth-child(odd) {
	background-image: linear-gradient(155deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%);
}
.badshah-tile:not(.badshah-tile--dark):nth-child(even) {
	background-image: linear-gradient(155deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%);
}

/* Kicker takes the front page's mono eyebrow voice. */
.badshah-tile-kicker {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	color: var(--brand);
}
.badshah-tile--dark .badshah-tile-kicker { color: #9fe8e4; }
.badshah-band { text-align: center; padding-top: 1rem; }
.badshah-band .wp-block-heading { font-weight: 800; }

/* Capability chips → frosted pills. */
.badshah-chip {
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 var(--glass-hi);
	color: var(--fg);
}
.badshah-tile--dark .badshah-chip {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.24);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* Pills → the front page's gradient glass buttons. */
.badshah-pill,
.badshah-tile--dark .badshah-pill {
	background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent)));
	border: 1px solid transparent;
	color: #fff;
	box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--brand) 70%, transparent);
}
.badshah-pill:hover,
.badshah-tile--dark .badshah-pill:hover { color: #fff; }
.badshah-pill--ghost,
.badshah-tile--dark .badshah-pill--ghost {
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border: 1px solid var(--glass-border);
	color: var(--fg);
	box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}

/* Client names → frosted pills (marquee + static lists). */
.badshah-client {
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 var(--glass-hi);
	color: var(--fg);
}

/* Contact form → glass inputs. */
.badshah-form input,
.badshah-form textarea {
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	box-shadow: inset 0 1px 0 var(--glass-hi);
	color: var(--fg);
}
.badshah-form input:focus,
.badshah-form textarea:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
	outline: none;
}

/* Map tile: clip the iframe to the glass radius. */
.badshah-tile--map { padding: 0; }
.badshah-tile--map iframe { border-radius: inherit; }

/* Page-title banner: transparent over the ambient mesh, story voice. */
.badshah-page-header,
.badshah-page-header.has-background { background: transparent !important; }
.badshah-page-header .wp-block-post-title {
	color: var(--fg); /* the old gradient-band rule forced #fff */
	font-weight: 800;
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	letter-spacing: -0.02em;
}
.badshah-page-header::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	border-radius: 4px;
	margin: 1.1rem auto 0;
	background: linear-gradient(90deg, var(--brand), var(--accent));
}

@media (max-width: 760px) {
	.badshah-tilegrid { gap: 16px; }
}

/* Explicit sub colours — the old color-mix(currentColor) resolves stale
   values after a theme toggle and left light-mode subs near-white. */
.badshah-tile-sub { color: var(--fg-muted); }
.badshah-tile--dark .badshah-tile-sub,
.badshah-tile--dark :where(p) { color: rgba(255, 255, 255, 0.8); }

/* ============================================================
   23. PERFORMANCE — backdrop-filter is expensive per-element, and
   sections 21/22 had put it on dozens of small items (chips, pills,
   spines, cards, inputs). Blur stays ONLY on the large panels
   (ticker, chapter tiles, .badshah-tile, terminal, frame, CTA);
   small elements keep their translucent fill, which already reads
   as glass against the blurry ambient mesh.
   ============================================================ */
.bs-chip,
.badshah-chip,
.bs-spine,
.bs-yard,
.bs-motto,
.bs-stat-card,
.bs-epi-card,
.bs-epi-icon,
.bs-btn,
.badshah-pill--ghost,
.badshah-tile--dark .badshah-pill--ghost,
.badshah-client,
.badshah-form input,
.badshah-form textarea,
.bs-tdot,
.bs-thread-cell {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
/* Slightly more solid fill compensates for the missing blur on the
   handful that sat on busy backgrounds. */
.bs-epi-card,
.bs-stat-card,
.bs-motto {
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 55%, transparent);
}

/* ============================================================
   24. CARGO JOURNEY v6 — timeline rail LEFT (numbered dots +
   scrubbed progress line + glass milestone cards) with the
   serpentine animation column RIGHT (big photoreal cards over
   gradient dashed SVG paths whose dashes stream with scroll).
   ============================================================ */
.jr-stage {
	padding: clamp(48px, 7vw, 110px) 0 clamp(40px, 6vw, 90px);
	overflow: clip;
}
.jr-head {
	max-width: 720px;
	margin: 0 auto clamp(32px, 4vw, 60px);
	padding: 0 clamp(16px, 4vw, 48px);
	text-align: center;
}
.jr-head h2 {
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0.35em 0;
}
.jr-lede {
	color: var(--fg-muted);
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	margin: 0 auto;
	max-width: 54ch;
}

/* ---- duo container ---- */
.jr-duo {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px clamp(16px, 4vw, 48px) 10px;
	--jrDash: 0px;
}

/* progress track down the left rail */
.jr-track {
	position: absolute;
	left: calc(clamp(16px, 4vw, 48px) + 21px);
	top: 60px;
	bottom: 80px;
	width: 4px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--fg) 14%, transparent);
	overflow: hidden;
	z-index: 0;
}
.jr-track-fill {
	position: absolute;
	inset: 0;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--brand), var(--accent));
	transform: scaleY(0);
	transform-origin: top center;
}

/* serpentine dashed paths behind the right column */
.jr-paths {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 58%;
	height: 100%;
	z-index: 0;
	opacity: 0.42;
	pointer-events: none;
}
[data-theme="dark"] .jr-paths {
	opacity: 0.85;
}
.jr-line {
	fill: none;
	stroke: url(#jrGrad);
	stroke-linecap: round;
	stroke-dashoffset: var(--jrDash);
}
.jr-l1 {
	stroke-width: 16;
	stroke-dasharray: 16px 46px 110px 46px 16px 46px 280px 46px 16px 46px 140px 46px 16px 20000px;
}
.jr-l2 {
	stroke-width: 28;
	stroke-dasharray: 28px 60px 120px 60px 28px 60px 300px 60px 28px 60px 150px 60px 28px 20000px;
}
.jr-l3 {
	stroke-width: 12;
	stroke-dasharray: 12px 38px 90px 38px 12px 38px 220px 38px 12px 38px 120px 38px 12px 20000px;
}

/* ---- rows: rail step left, animation card right ---- */
.jr-row {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	margin-bottom: clamp(48px, 7vh, 96px);
}

/* left rail milestone card (old timeline layout) */
.jr-step {
	position: relative;
	margin-left: 56px;
	background: var(--glass-bg-strong);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	padding: clamp(18px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
	opacity: 0.45;
	transition: opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.jr-step.is-active {
	opacity: 1;
	border-color: color-mix(in srgb, var(--brand) 45%, transparent);
	box-shadow: 0 22px 50px -22px color-mix(in srgb, var(--brand) 55%, transparent);
}
.jr-dot {
	position: absolute;
	left: -53px;
	top: calc(50% - 20px);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bg-card);
	border: 2px solid color-mix(in srgb, var(--fg) 25%, transparent);
	color: var(--fg-muted);
	font: 700 0.78rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.jr-step.is-active .jr-dot {
	background: linear-gradient(135deg, var(--brand), var(--accent));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 18%, transparent);
}
.jrc-num {
	display: inline-block;
	font: 700 0.72rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	letter-spacing: 0.22em;
	color: var(--brand);
	background: color-mix(in srgb, var(--brand) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
	border-radius: 999px;
	padding: 6px 12px;
	margin-bottom: 10px;
}
.jr-step h3 {
	margin: 0 0 6px;
	font-size: clamp(1.1rem, 1.9vw, 1.5rem);
	letter-spacing: -0.01em;
	color: var(--fg);
}
.jr-step p {
	margin: 0;
	color: var(--fg-muted);
	font-size: clamp(0.85rem, 1.15vw, 1rem);
	line-height: 1.55;
}

/* right animation card (big photoreal scene) */
.jr-card2 {
	position: relative;
	width: 100%;
	background: var(--glass-bg-strong);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	overflow: hidden;
}
@media (min-width: 900px) {
	.jr-row:nth-of-type(odd) .jr-card2 { transform: translateX(-4%); }
	.jr-row:nth-of-type(even) .jr-card2 { transform: translateX(4%); }
}
.jr-c2-media {
	position: relative;
	aspect-ratio: 16 / 9;
}
.jr-c2-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jr-c2-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(8, 16, 34, 0.5));
}
.jr-c2-num {
	position: absolute;
	left: 20px;
	bottom: 8px;
	z-index: 1;
	font: 800 3.6rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	letter-spacing: 0.02em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.92);
	filter: drop-shadow(0 2px 8px rgba(6, 16, 38, 0.45));
}

/* ---- responsive: stack text over image per milestone ---- */
@media (max-width: 899px) {
	.jr-duo {
		padding-left: 16px;
		padding-right: 16px;
	}
	.jr-track {
		left: 30px;
		top: 40px;
		bottom: 60px;
	}
	.jr-paths {
		width: 100%;
		opacity: 0.35;
	}
	[data-theme="dark"] .jr-paths {
		opacity: 0.55;
	}
	.jr-row {
		display: block;
		margin-bottom: clamp(40px, 6vh, 64px);
	}
	.jr-step {
		margin-left: 44px;
		margin-bottom: 16px;
	}
	.jr-dot {
		left: -44px;
		top: calc(50% - 16px);
		width: 32px;
		height: 32px;
		font-size: 0.66rem;
	}
	.jr-card2 {
		width: auto;
		margin-left: 44px;
	}
}

/* ============================================================
   25. HERO TILES — 2 stacked cards (legacy / fleet) + About Us
   card, directly after the hero "Discover more" row.
   ============================================================ */
.hero-tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: clamp(14px, 2vw, 26px);
	max-width: 1360px;
	margin: clamp(28px, 4vw, 60px) auto 0;
}
.ht-col {
	display: grid;
	gap: clamp(14px, 2vw, 26px);
	align-content: stretch;
}
.ht-card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	padding: clamp(22px, 2.6vw, 36px);
	position: relative;
	overflow: hidden;
}
.ht-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--glass-hi), transparent);
}
.ht-kicker {
	font: 700 0.8rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brand);
	margin: 0 0 12px;
}
.ht-card h3 {
	margin: 0 0 10px;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.ht-card p {
	margin: 0 0 12px;
	color: var(--fg-muted);
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.6;
}
.ht-stat {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: 4px;
}
.ht-statrow {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 36px;
	margin-top: 8px;
}
.ht-stat strong {
	font-size: clamp(2.4rem, 4vw, 3.4rem);
	line-height: 1;
	background: linear-gradient(120deg, var(--brand), var(--accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.ht-stat > span { color: var(--fg-muted); font-size: 1.15rem; font-weight: 600; }
.ht-stat strong span { font-size: inherit; color: inherit; -webkit-text-fill-color: inherit; }
.ht-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ht-chip {
	font: 600 0.78rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	color: var(--fg);
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
	border-radius: 999px;
	padding: 8px 14px;
}
.ht-about h3 { font-size: clamp(1.4rem, 2.4vw, 2.05rem); }
.ht-list {
	list-style: none;
	margin: 4px 0 18px;
	padding: 0;
	display: grid;
	gap: 9px;
}
.ht-list li {
	position: relative;
	padding-left: 30px;
	color: var(--fg);
	font-size: clamp(0.9rem, 1.15vw, 1rem);
}
.ht-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--accent) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 13l5 5L20 7"/%3E%3C/svg%3E') center/12px no-repeat;
}
.ht-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 700 0.92rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	color: #fff;
	background: linear-gradient(120deg, var(--brand), var(--accent));
	border-radius: 999px;
	padding: 14px 24px;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--brand) 70%, transparent);
}
.ht-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--brand) 80%, transparent);
	color: #fff;
}
.ht-btn svg { width: 17px; height: 17px; }
@media (max-width: 781px) {
	.hero-tiles { grid-template-columns: 1fr; }
}

/* ============================================================
   26. SERVICE SLIDER — hero right column. Five glassmorphic
   service cards (photo top, outlined number, gradient icon
   badge) sliding one at a time with dots + arrows.
   ============================================================ */
/* the slider lives inside a grid/flex item — allow it to shrink */
.treatments {
	min-width: 0;
}
.svc-slider {
	position: relative;
	width: 100%;
	min-width: 0;
}
.svc-card {
	min-width: 0;
}
.svc-viewport {
	overflow: hidden;
	border-radius: var(--radius);
}
.svc-track {
	display: flex;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
	.svc-track { transition: none; }
}
.svc-card {
	flex: 0 0 100%;
	background: var(--glass-bg-strong);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	overflow: hidden;
}
.svc-media {
	position: relative;
	aspect-ratio: 16 / 9.4;
}
.svc-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.svc-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 52%, rgba(8, 16, 34, 0.55));
}
.svc-num {
	position: absolute;
	left: 16px;
	bottom: 6px;
	z-index: 1;
	font: 800 3.1rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	letter-spacing: 0.02em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.92);
	filter: drop-shadow(0 2px 8px rgba(6, 16, 38, 0.45));
}
.svc-ico {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--brand), var(--accent));
	color: #fff;
	box-shadow:
		0 0 0 5px color-mix(in srgb, var(--bg-card) 45%, transparent),
		0 12px 26px -10px rgba(6, 16, 38, 0.6);
}
.svc-ico svg {
	width: 22px;
	height: 22px;
}
.svc-body {
	padding: 16px 20px 18px;
}
.svc-body h3 {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--fg);
}
.svc-body p {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--fg-muted);
	min-height: 42px;
}
.svc-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 700 0.85rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	color: var(--brand);
	text-decoration: none;
}
.svc-more svg {
	width: 16px;
	height: 16px;
	transition: transform 0.25s ease;
}
.svc-more:hover svg {
	transform: translateX(4px);
}
[data-theme="dark"] .svc-more {
	color: var(--accent);
}

/* controls */
.svc-ctrl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}
.svc-nav {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--glass-bg-strong);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	color: var(--fg);
	cursor: pointer;
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.svc-nav:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.svc-nav svg {
	width: 18px;
	height: 18px;
}
.svc-dots {
	display: flex;
	align-items: center;
	gap: 8px;
}
.svc-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--fg) 22%, transparent);
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}
.svc-dot.is-on {
	width: 26px;
	background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* ============================================================
   27. TEMP — hero cards disabled, subtle header.
   Delete this whole block to restore the founder/info cards
   and the 5-slide service carousel (markup is untouched).
   ============================================================ */
.clay-hero .bottom {
	display: none;
}
.clay-hero .wave-glow {
	opacity: 0.45;
}
.clay-hero .bg-text {
	opacity: 0.5;
}

/* ============================================================
   28. HEADER LOGO — the transparent PNG B-mark (alpha padding
   trimmed, artwork untouched) sized to the pill nav bar and
   hugging its far-left edge, with the wordmark tight beside it.
   Two artworks ship: the black mark for light mode and the white
   mark (badshah-logo-white.png) for dark mode, swapped on
   [data-theme] rather than faked with filters — the old
   drop-shadow glow only ever made the black mark tolerable.
   ============================================================ */
.logo {
	gap: 9px;
	padding: 4px 14px 4px 2px;
}
.logo-img {
	display: block;
	height: 50px;
	width: auto;
	margin: -3px 0;
	position: relative;
	z-index: 3;
	pointer-events: none;
}
.logo-img--dark { display: none; }
[data-theme="dark"] .logo-img--light { display: none; }
[data-theme="dark"] .logo-img--dark {
	display: block;
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}
.logo-text .a {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.015em;
}
.logo-text .b {
	font-size: 12px;
	letter-spacing: 0.02em;
	margin-top: 4px;
}
@media (max-width: 781px) {
	.logo-img {
		height: 40px;
		margin: -2px 0;
	}
	.logo-text .a { font-size: 16px; }
	.logo-text .b { font-size: 10.5px; }
}

/* ============================================================
   29. JOURNEY CTA BAND — horizontal Get-a-Quote block after the
   door-to-door animation, plus the larger section eyebrow.
   ============================================================ */
.jr-head .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 700 clamp(1rem, 1.6vw, 1.3rem)/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--brand);
	margin: 0 0 6px;
}
.jr-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(18px, 3vw, 40px);
	flex-wrap: wrap;
	max-width: 1280px;
	margin: clamp(30px, 5vh, 60px) auto 0;
	padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 56px);
	background: var(--glass-bg-strong);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
@media (min-width: 900px) {
	.jr-cta {
		margin-left: max(calc((100% - 1280px) / 2 + clamp(16px, 4vw, 48px)), clamp(16px, 4vw, 48px));
		margin-right: max(calc((100% - 1280px) / 2 + clamp(16px, 4vw, 48px)), clamp(16px, 4vw, 48px));
	}
}
@media (max-width: 899px) {
	.jr-cta {
		margin-left: 16px;
		margin-right: 16px;
	}
}
.jr-cta-text h3 {
	margin: 0 0 6px;
	font-size: clamp(1.4rem, 2.6vw, 2.1rem);
	letter-spacing: -0.015em;
	color: var(--fg);
}
.jr-cta-text p {
	margin: 0;
	color: var(--fg-muted);
	font-size: clamp(0.95rem, 1.25vw, 1.1rem);
}
.jr-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 30px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--brand), var(--accent));
	color: #fff;
	font: 700 1rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--brand) 70%, transparent);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	white-space: nowrap;
}
.jr-cta-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 44px -16px color-mix(in srgb, var(--brand) 80%, transparent);
}
.jr-cta-btn svg {
	width: 18px;
	height: 18px;
}

/* ============================================================
   30. HERO SLIDER — three header slides (road/brand, ocean
   freight, air freight), each with a thin-outline line-art
   backdrop in the same transparent style as the giant bg-text.
   ============================================================ */
.hero-slider {
	position: relative;
	z-index: 5;
	overflow: clip;
}
.hs-track {
	display: flex;
	transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
	.hs-track { transition: none; }
}
.hero-slide {
	flex: 0 0 100%;
	min-width: 0;
	position: relative;
	overflow: clip;
	min-height: clamp(500px, 64vh, 700px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hero-art path,
.hero-art circle,
.hero-art rect {
	fill: none;
}
.hero-art-map {
	stroke-width: 1.1;
	width: min(1150px, 96%);
	top: 50%;
}
.word-rt {
	font-size: 0.78em;
	white-space: nowrap;
}
/* "one company" — lowercase italic outline, contrasts the solid caps above it */
.word-outline {
	font-style: italic;
	font-weight: 700;
	text-transform: lowercase;
	letter-spacing: 0.02em;
	color: var(--fg);
}
@supports (-webkit-text-stroke: 1px currentColor) {
	.word-outline {
		color: transparent;
		-webkit-text-stroke: 0.03em var(--fg);
	}
}
/* slide 1: open up the vertical rhythm of the stacked text */
.hero-slide .eyebrow {
	margin-bottom: clamp(20px, 4vh, 42px);
}
.hero-slide .title .title-line {
	margin-bottom: clamp(16px, 3.2vh, 36px);
}
.hero-slide .title .title-line:last-child {
	margin-bottom: 0;
}
.hero-slide .title .future-tag {
	display: inline-flex;
	margin-top: clamp(14px, 2.8vh, 30px);
}
.hero-art {
	position: absolute;
	left: 50%;
	top: 52%;
	transform: translate(-50%, -50%);
	width: min(1050px, 94%);
	height: auto;
	z-index: 1;
	pointer-events: none;
	stroke: rgba(15, 15, 25, 0.16);
	stroke-width: 2;
}
[data-theme="dark"] .hero-art {
	stroke: rgba(240, 240, 250, 0.13);
}
/* slide 2 ocean scene: finer but more visible line work, pushed right of the text */
.hero-art-ocean {
	width: min(1180px, 97%);
	top: 50%;
	stroke: rgba(15, 15, 25, 0.24);
	stroke-width: 1.6;
}
[data-theme="dark"] .hero-art-ocean {
	stroke: rgba(240, 240, 250, 0.2);
}
.hero-alt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.hs-big {
	position: relative;
	z-index: 2;
	margin: 0 0 clamp(22px, 4vh, 44px);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 800;
	font-size: clamp(44px, 7.5vw, 96px);
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--fg);
}
.hs-desc {
	position: relative;
	z-index: 2;
	max-width: 54ch;
	margin: 0;
	color: var(--fg-muted);
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	line-height: 1.6;
}
.hero-alt .eyebrow {
	position: relative;
	z-index: 2;
	margin-bottom: clamp(18px, 3.4vh, 38px);
}
/* slide 3 air scene: same finer line treatment as the ocean scene */
.hero-art-air {
	width: min(1180px, 97%);
	top: 50%;
	stroke: rgba(15, 15, 25, 0.24);
	stroke-width: 1.6;
}
[data-theme="dark"] .hero-art-air {
	stroke: rgba(240, 240, 250, 0.2);
}
/* slide 4 earth-moving scene: machinery sits right of the copy, so it can
   carry more line weight than the ocean/air scenes without fighting the text */
.hero-art-earth {
	width: min(1180px, 97%);
	top: 50%;
	stroke: rgba(15, 15, 25, 0.34);
	stroke-width: 1.8;
}
[data-theme="dark"] .hero-art-earth {
	stroke: rgba(240, 240, 250, 0.3);
}
/* trust chips row on alt slides */
.hs-chips {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: clamp(18px, 3vh, 30px) 0 0;
}
.hs-chip {
	display: inline-flex;
	align-items: center;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.62em 1.1em;
	border-radius: 999px;
	color: var(--fg-muted);
	background: color-mix(in srgb, var(--fg) 5%, transparent);
	border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
	white-space: nowrap;
}
.hero-alt .hero-cta-row {
	position: relative;
	z-index: 2;
	margin: clamp(20px, 3.5vh, 34px) 0 0;
}
.hs-ctrl {
	position: relative;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 14px 0 4px;
}

/* ============================================================
   31. CONTACT — head-office card beside the glassmorphic
   Request-a-Quote form (two-column, equal heights).
   ============================================================ */
.ct-hiw {
	display: grid;
	grid-template-columns: minmax(300px, 1fr) minmax(0, 1.05fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: stretch;
	max-width: 1200px;
	margin: 0 auto clamp(40px, 6vw, 80px);
	padding: 0 clamp(16px, 4vw, 48px);
}
.ct-hiw > .badshah-tile--info {
	box-sizing: border-box;
}

/* quote card */
.ct-quote {
	background: var(--glass-bg-strong);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	padding: clamp(26px, 3.5vw, 48px);
}
.ct-quote h2 {
	margin: 0 0 24px;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	letter-spacing: -0.02em;
	color: var(--fg);
}
.ct-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.ct-field {
	position: relative;
	display: block;
}
.ct-wide {
	grid-column: 1 / -1;
}
.ct-form input,
.ct-form select {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 54px;
	padding: 0 46px 0 16px;
	border-radius: 14px;
	border: 1px solid var(--glass-border);
	background: color-mix(in srgb, var(--bg-card) 55%, transparent);
	color: var(--fg);
	font: inherit;
	font-size: 0.98rem;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ct-form input::placeholder {
	color: var(--fg-muted);
}
.ct-form select:invalid {
	color: var(--fg-muted);
}
.ct-form input:focus,
.ct-form select:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--brand) 55%, transparent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}
.ct-field > svg {
	position: absolute;
	right: 15px;
	top: 50%;
	translate: 0 -50%;
	width: 18px;
	height: 18px;
	color: var(--fg-muted);
	pointer-events: none;
}
.ct-submit {
	grid-column: 1 / -1;
	justify-self: start;
	border: 0;
	cursor: pointer;
	margin-top: 6px;
}
@media (max-width: 899px) {
	.ct-hiw {
		display: block;
	}
	.ct-hiw > .badshah-tile--info {
		margin-bottom: 34px;
	}
	.ct-form {
		grid-template-columns: 1fr;
	}
}

/* ---- hero slide 1: supporting content under the title ---- */
.hero-extra {
	position: relative;
	z-index: 5;
	margin-top: clamp(22px, 4vh, 44px);
	max-width: 640px;
}
.hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(16px, 2.6vh, 26px);
}
.hero-ghost-btn {
	display: inline-flex;
	align-items: center;
	padding: 15px 26px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
	color: var(--fg);
	font: 700 0.95rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	text-decoration: none;
	transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.hero-ghost-btn:hover {
	border-color: color-mix(in srgb, var(--brand) 55%, transparent);
	background: color-mix(in srgb, var(--brand) 10%, transparent);
	transform: translateY(-2px);
}

/* ============================================================
   32. ABOUT PAGE TILES — alternating 7/5 tiling with flat
   illustrated backgrounds (Flux JPGs full-bleed via --img,
   corner line-art SVGs via --art). Light tiles invert their
   baked-in off-white artwork in dark mode; --dark tiles stay
   dark in both themes like the rest of the tile system.
   ============================================================ */
.badshah-tilegrid--about {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}
.badshah-tilegrid--about .badshah-tile--s7 { grid-column: span 7; }
.badshah-tilegrid--about .badshah-tile--s5 { grid-column: span 5; }
.badshah-tilegrid--about .badshah-tile--wide { grid-column: 1 / -1; }

.badshah-tile--about {
	align-items: flex-start;
	text-align: left;
	min-height: clamp(320px, 40vh, 420px);
	padding: clamp(2rem, 4.5vh, 3rem) clamp(1.5rem, 3vw, 2.75rem) clamp(2.25rem, 4.5vh, 3rem);
	border-radius: 22px;
	border: 1px solid color-mix(in srgb, var(--brand) 10%, transparent);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
[data-theme="dark"] .badshah-tile--about {
	border-color: rgba(240, 240, 250, 0.08);
}
.badshah-tile--about:hover {
	transform: translateY(-5px);
	box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--brand) 55%, transparent);
}
.badshah-tile--about .badshah-tile-sub {
	margin-left: 0;
	margin-right: 0;
	max-width: 56ch;
}
.badshah-tile--about .badshah-clients { justify-content: flex-start; }

/* Index number chip above each card title */
.about-num {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--accent);
	margin-bottom: 1.1rem;
}
.about-num::after {
	content: "";
	width: 44px;
	height: 1.5px;
	background: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Background artwork layer */
.badshah-tile--img::before,
.badshah-tile--art::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--tile-img);
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 0;
}
.badshah-tile--img::before {
	background-size: cover;
	background-position: bottom right;
}
.badshah-tile--art::before {
	background-size: auto clamp(120px, 34%, 190px);
	background-position: right clamp(16px, 4%, 40px) bottom clamp(16px, 6%, 36px);
}
.badshah-tile--about > * { position: relative; z-index: 1; }
/* Light-tile JPG/SVG art carries an off-white field — dim and invert it in dark mode */
[data-theme="dark"] .badshah-tile--img:not(.badshah-tile--dark)::before {
	filter: invert(1) hue-rotate(195deg);
	opacity: 0.55;
}
[data-theme="dark"] .badshah-tile--art:not(.badshah-tile--dark)::before {
	filter: invert(0.55) hue-rotate(195deg);
}

/* Bulleted list inside a tile (accent chevron markers) */
.about-list {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
	max-width: 56ch;
	display: grid;
	gap: 0.55rem;
}
.about-list li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 1.02rem;
	line-height: 1.5;
	color: color-mix(in srgb, currentColor 78%, transparent);
}
.about-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.62em;
	height: 0.62em;
	border-right: 2px solid var(--accent);
	border-top: 2px solid var(--accent);
	transform: rotate(45deg);
}

/* Vision flagship tile — full-width, extra breathing room, pillar row */
.badshah-tile--vision {
	min-height: clamp(520px, 66vh, 640px);
}
.badshah-tile--vision::before {
	background-position: center bottom;
}
.about-vision-lead {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.8rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: #fff;
	max-width: 30ch;
}
.badshah-tile--vision .about-vision-lead { max-width: 34ch; }
.about-pillars {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	width: 100%;
	margin-top: auto;
	padding-top: clamp(2rem, 5vh, 3.5rem);
}
.about-pillar {
	border-top: 1.5px solid rgba(255, 255, 255, 0.22);
	padding-top: 1rem;
}
.about-pillar h4 {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 0.4rem;
	color: var(--accent);
}
.about-pillar p {
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 860px) {
	.badshah-tilegrid--about { grid-template-columns: 1fr; }
	.badshah-tilegrid--about .badshah-tile--s7,
	.badshah-tilegrid--about .badshah-tile--s5,
	.badshah-tilegrid--about .badshah-tile--wide { grid-column: 1 / -1; }
	.badshah-tile--about { min-height: 0; }
	.badshah-tile--vision { min-height: 0; }
	.about-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
	/* keep artwork clear of stacked text on small screens */
	.badshah-tile--art::before { background-size: auto 110px; opacity: 0.7; }
	.badshah-tile--img::before { opacity: 0.4; }
	[data-theme="dark"] .badshah-tile--img:not(.badshah-tile--dark)::before { opacity: 0.3; }
	.badshah-tile--vision::before { opacity: 1; }
}
@media (max-width: 520px) {
	.about-pillars { grid-template-columns: 1fr; }
}

/* ============================================================
   33. SERVICES PAGE — immersive photo panels. Each card is a
   full-bleed photoreal background (inline --svc-img) under a
   navy scrim, content pinned bottom-left, spec strip + chips.
   Grid mirrors the about page's 12-col tiling (wide / 7 / 5).
   Text is always white over the scrim, so light & dark themes
   share one look. Ends with a 4-step glass process strip.
   ============================================================ */
.badshah-tilegrid--svc {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}
.badshah-tilegrid--svc .badshah-tile--svc7 { grid-column: span 7; }
.badshah-tilegrid--svc .badshah-tile--svc5 { grid-column: span 5; }
.badshah-tilegrid--svc .badshah-tile--svc-wide { grid-column: 1 / -1; }

.badshah-tile--svc,
[data-theme="dark"] .badshah-tile--svc {
	align-items: flex-start;
	justify-content: flex-end;
	text-align: left;
	min-height: clamp(480px, 58vh, 600px);
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	border-radius: 24px;
	background: #0b1424; /* paints behind the image while it loads */
	background-image: none; /* cancel the §22 nth-child tint gradients */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: #fff;
}
.badshah-tile--svc-wide { min-height: clamp(540px, 68vh, 680px); }

/* Photo layer (scales on hover) + scrim layer. Same z-index —
   ::after paints above ::before by tree order. */
.badshah-tile--svc::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--svc-img);
	background-size: cover;
	background-position: center;
	transform: scale(1.02);
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
	z-index: 0;
}
.badshah-tile--svc:hover::before { transform: scale(1.07); }
.badshah-tile--svc::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(6, 11, 22, 0.94) 0%, rgba(6, 11, 22, 0.62) 42%, rgba(6, 11, 22, 0.22) 70%, rgba(6, 11, 22, 0.05) 100%),
		linear-gradient(105deg, rgba(6, 11, 22, 0.55) 0%, transparent 55%);
	z-index: 0;
}
.badshah-tile--svc > * { position: relative; z-index: 1; }

/* Numbered kicker — mono voice, teal, trailing rule. */
.svc-num {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #7fe0dc;
	margin: 0 0 0.8rem;
}
.svc-num::after {
	content: "";
	width: 44px;
	height: 1.5px;
	background: color-mix(in srgb, #7fe0dc 55%, transparent);
}

.badshah-tile--svc .badshah-tile-title {
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(6, 11, 22, 0.55);
}
.badshah-tile--svc .badshah-tile-sub {
	color: rgba(255, 255, 255, 0.85);
	margin-left: 0;
	margin-right: 0;
	max-width: 62ch;
	text-shadow: 0 1px 12px rgba(6, 11, 22, 0.55);
}

/* Spec strip — headline number + label pairs over a hairline. */
.svc-specs {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 3vw, 2.75rem);
	list-style: none;
	width: 100%;
	margin: 1.3rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.svc-spec strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	background: linear-gradient(90deg, #6db4ff, #7fe0dc);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.svc-spec span {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

/* Chips & labels on photo cards — frosted white over the scrim. */
.badshah-tile--svc .badshah-chips { justify-content: flex-start; margin-top: 0.7rem; }
.badshah-tile--svc .badshah-chips-label { color: rgba(255, 255, 255, 0.6); }
.badshah-tile--svc .badshah-chip {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.26);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #fff;
}
.badshah-tile--svc .badshah-chip:hover { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.badshah-tile--svc .badshah-tile-links { justify-content: flex-start; margin-top: 1.35rem; }
.badshah-tile--svc .badshah-pill--ghost,
.badshah-tile--dark .badshah-tile--svc .badshah-pill--ghost {
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}
.badshah-tile--svc .badshah-pill--ghost:hover { background: #fff; color: #0a2a66; }

/* Process strip — 4 numbered glass steps on the 1360px stage. */
.svc-process {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	max-width: 1360px;
	margin: 0 auto 24px;
	padding-left: clamp(20px, 3vw, 40px);
	padding-right: clamp(20px, 3vw, 40px);
}
.svc-step {
	position: relative;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 18px;
	box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svc-step:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-lg);
}
.svc-step-num {
	display: block;
	font-family: var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	font-size: clamp(2.2rem, 3.4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: transparent;
	-webkit-text-stroke: 1.5px currentColor;
	-webkit-text-stroke-color: color-mix(in srgb, var(--brand) 55%, var(--fg-muted));
	margin-bottom: 0.7rem;
}
.svc-step h4 {
	font-family: var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	font-size: 1.08rem;
	font-weight: 700;
	margin: 0 0 0.4rem;
	color: var(--fg);
}
.svc-step p {
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
	color: var(--fg-muted);
}

/* Services page CTA band gets breathing room before the footer. */
.svc-process + .jr-cta,
.badshah-tilegrid--svc ~ .jr-cta { margin-bottom: clamp(30px, 5vh, 60px); }

@media (max-width: 980px) {
	.svc-process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 860px) {
	.badshah-tilegrid--svc { grid-template-columns: 1fr; }
	.badshah-tilegrid--svc .badshah-tile--svc7,
	.badshah-tilegrid--svc .badshah-tile--svc5,
	.badshah-tilegrid--svc .badshah-tile--svc-wide { grid-column: 1 / -1; }
	.badshah-tile--svc,
	.badshah-tile--svc-wide { min-height: clamp(420px, 60vh, 540px); }
	/* deepen the scrim — text stacks taller on narrow cards */
	.badshah-tile--svc::after {
		background:
			linear-gradient(to top, rgba(6, 11, 22, 0.95) 0%, rgba(6, 11, 22, 0.72) 55%, rgba(6, 11, 22, 0.3) 80%, rgba(6, 11, 22, 0.12) 100%);
	}
}
@media (max-width: 520px) {
	.svc-process { grid-template-columns: 1fr; }
	.svc-specs { gap: 1.1rem 1.5rem; }
}

/* ============================================================
   34. CONTACT INFO — head-office card styles (card now lives
   beside the quote form in .ct-hiw) + full-width map row.
   ============================================================ */
.badshah-tilegrid--contact {
	grid-template-columns: 1fr;
}
.badshah-tile--info {
	align-items: flex-start;
	text-align: left;
	justify-content: center;
	min-height: 0;
	padding: clamp(2rem, 4vw, 3.25rem);
}
.badshah-tile--info .badshah-tile-title {
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
}
.ct-info-list {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: grid;
	gap: 20px;
	width: 100%;
}
.ct-info-list li {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 16px;
	align-items: start;
}
.ct-info-ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--accent);
}
.ct-info-ico svg {
	width: 21px;
	height: 21px;
}
.ct-info-list strong {
	display: block;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 58%, transparent);
	margin: 2px 0 3px;
}
.ct-info-list p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.55;
}
.ct-info-list a {
	color: inherit;
	text-decoration: none;
}
.ct-info-list a:hover {
	color: var(--accent);
}
.badshah-tilegrid--contact .badshah-tile--map iframe {
	height: clamp(380px, 52vh, 520px);
}
@media (max-width: 899px) {
	.badshah-tilegrid--contact .badshah-tile--map iframe {
		height: 340px;
	}
}

/* ============================================================
   35. MEGA FOOTER (.bf) — CTA band, brand + links + contact
   grid, newsletter strip, legal bar, giant outlined watermark.
   Stays navy in BOTH themes (like the --dark tiles); overrides
   the old §9 glass footer rules by file order.
   ============================================================ */
.bf,
[data-theme="dark"] .bf {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(900px 420px at 85% 0%, color-mix(in srgb, #2cb7b3 12%, transparent), transparent 70%),
		radial-gradient(900px 480px at 8% 18%, color-mix(in srgb, #1a8aff 14%, transparent), transparent 70%),
		linear-gradient(180deg, #0b1626 0%, #081020 55%, #060b16 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: #eaf0fa;
	padding: 0;
}
.bf-wrap {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 72px) clamp(18px, 4vw, 48px) clamp(22px, 3vw, 34px);
}

/* --- CTA band --- */
.bf-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 3vw, 48px);
	flex-wrap: wrap;
	padding: clamp(24px, 3.5vw, 44px);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	margin-bottom: clamp(36px, 5vw, 60px);
}
.bf-kicker {
	margin: 0 0 6px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7fe0dc;
}
.bf-cta h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem);
	letter-spacing: -0.02em;
	line-height: 1.12;
}
.bf-cta h2 em {
	font-style: normal;
	color: #6db4ff;
}
.bf-cta-sub {
	margin: 10px 0 0;
	color: rgba(234, 240, 250, 0.65);
	font-size: 0.98rem;
	max-width: 52ch;
}
.bf-cta-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.bf-ghost {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 26px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff !important;
	font: 700 0.95rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	text-decoration: none;
	transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.bf-ghost:hover {
	border-color: rgba(127, 224, 220, 0.6);
	background: rgba(127, 224, 220, 0.1);
	transform: translateY(-2px);
	color: #fff !important;
}
.bf-ghost svg { width: 17px; height: 17px; }

/* --- main grid --- */
.bf-grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 3.4fr);
	gap: clamp(28px, 4vw, 56px);
	margin-bottom: clamp(34px, 5vw, 56px);
}
.bf-h {
	margin: 6px 0 18px;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7fe0dc;
}
.bf-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.bf-links a {
	position: relative;
	color: rgba(234, 240, 250, 0.68);
	text-decoration: none;
	font-size: 0.98rem;
	padding-left: 0;
	transition: color 0.22s ease, padding-left 0.22s ease;
}
.bf-links a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #6db4ff, #7fe0dc);
	transition: width 0.22s ease;
}
.bf-links a:hover {
	color: #fff;
	padding-left: 18px;
}
.bf-links a:hover::before { width: 12px; }

/* brand column */
.bf-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	margin-bottom: 16px;
}
/* The footer is dark in both themes, so it always uses the white mark. */
.bf-logo img {
	width: auto;
	height: 54px;
	filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.5));
}
.bf-logo-text { display: grid; gap: 2px; }
.bf-logo-text strong {
	color: #fff;
	font-family: var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}
.bf-logo-text em {
	font-style: normal;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(234, 240, 250, 0.55);
}
.bf-blurb {
	margin: 0 0 22px;
	color: rgba(234, 240, 250, 0.65);
	font-size: 0.97rem;
	line-height: 1.65;
	max-width: 40ch;
}
.bf-stats {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: clamp(18px, 2vw, 34px);
	padding: 16px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 22px;
}
.bf-stats strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	background: linear-gradient(90deg, #6db4ff, #7fe0dc);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.bf-stats span {
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(234, 240, 250, 0.55);
}
.bf-social {
	display: flex;
	gap: 10px;
}
.bf-social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(234, 240, 250, 0.75);
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.bf-social a:hover {
	background: linear-gradient(135deg, #1a8aff, #2cb7b3);
	border-color: transparent;
	color: #fff;
	transform: translateY(-3px);
}
.bf-social svg { width: 19px; height: 19px; }

/* contact rows */
.bf-info {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}
.bf-info li {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 12px;
	align-items: start;
}
.bf-info-ico {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #7fe0dc;
}
.bf-info-ico svg { width: 17px; height: 17px; }
.bf-info a,
.bf-info li > span:not(.bf-info-ico) {
	color: rgba(234, 240, 250, 0.68);
	text-decoration: none;
	font-size: 0.94rem;
	line-height: 1.55;
	padding-top: 6px;
	transition: color 0.22s ease;
}
.bf-info a:hover { color: #7fe0dc; }

/* --- newsletter strip --- */
.bf-news {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(18px, 3vw, 40px);
	flex-wrap: wrap;
	padding: clamp(20px, 2.5vw, 28px) clamp(22px, 3vw, 34px);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: clamp(26px, 3.5vw, 40px);
}
.bf-news-text h4 {
	margin: 0 0 4px;
	color: #fff;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}
.bf-news-text p {
	margin: 0;
	color: rgba(234, 240, 250, 0.6);
	font-size: 0.9rem;
	max-width: 56ch;
}
.bf-news-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.bf-news-form label { flex: 1 1 240px; }
.bf-news-form input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 50px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(0, 0, 0, 0.28);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.bf-news-form input::placeholder { color: rgba(234, 240, 250, 0.45); }
.bf-news-form input:focus {
	outline: none;
	border-color: rgba(109, 180, 255, 0.6);
	box-shadow: 0 0 0 4px rgba(26, 138, 255, 0.16);
}
.bf-news-form .jr-cta-btn {
	border: 0;
	cursor: pointer;
}

/* --- bottom bar --- */
.bf-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: clamp(18px, 2.5vw, 24px);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.bf-bottom p {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(234, 240, 250, 0.5);
}
.bf-legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
}
.bf-legal a {
	color: rgba(234, 240, 250, 0.5);
	text-decoration: none;
	font-size: 0.85rem;
	transition: color 0.22s ease;
}
.bf-legal a:hover { color: #7fe0dc; }
.bf-top {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: rgba(234, 240, 250, 0.7);
	font: 700 0.82rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.bf-top:hover {
	border-color: rgba(127, 224, 220, 0.55);
	color: #fff;
	transform: translateY(-2px);
}
.bf-top svg { width: 14px; height: 14px; }

/* --- giant outlined watermark --- */
.bf-mark {
	position: absolute;
	left: 50%;
	bottom: -0.28em;
	translate: -50% 0;
	z-index: 0;
	font-family: var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	font-size: clamp(96px, 17vw, 260px);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.07);
	pointer-events: none;
	user-select: none;
}

/* --- responsive --- */
@media (max-width: 1080px) {
	.bf-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(28px, 4vw, 44px);
	}
	.bf-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.bf-grid { grid-template-columns: 1fr; }
	.bf-cta { display: block; }
	.bf-cta-actions { margin-top: 20px; }
	.bf-news { display: block; }
	.bf-news-form { margin-top: 16px; }
	.bf-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.bf-stats { grid-template-columns: repeat(3, auto); gap: 20px; }
	.bf-mark { font-size: clamp(72px, 24vw, 120px); }
}

/* §9's .badshah-footer a (0,1,1) mutes the CTA pills — restore them. */
.bf .jr-cta-btn,
.bf .jr-cta-btn:hover {
	color: #fff;
}

/* Newsletter: let the form claim a flexible share of the strip so the
   input and button sit inline on desktop instead of wrapping. */
.bf-news-text { flex: 1 1 320px; }
.bf-news-form { flex: 1 1 400px; max-width: 560px; }
.bf-news-form label { flex: 1 1 180px; }
.bf-news-form .jr-cta-btn { flex: 0 0 auto; }

/* ============================================================
   33b. SERVICES PAGE WIDE-BOXED — a stage between the 1360px
   boxed cap and full-bleed: photo cards, process strip and CTA
   band cap at 1680px, with a clear clamp gutter to the browser
   edge at every viewport.
   ============================================================ */
.badshah-tilegrid--svc,
.svc-process {
	max-width: 1680px;
	padding-left: clamp(24px, 4vw, 64px);
	padding-right: clamp(24px, 4vw, 64px);
}
.badshah-tilegrid--svc ~ .jr-cta {
	max-width: none;
	/* match the grid's inner card edge: stage cap minus both gutters */
	width: min(1552px, 100% - 2 * clamp(24px, 4vw, 64px));
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   36. CLIENTS PAGE (.cl-) — logo wall of monogram lockups,
   testimonial cards with avatar initials, dark trust-number
   band (reuses .badshah-tile-stats counters) and the jr-cta.
   Marks are muted at rest and take their brand gradient on
   hover; tiles stay on the §22 glass system in both themes.
   ============================================================ */
.cl-logowall {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cl-logo,
[data-theme="dark"] .cl-logo {
	min-height: 0;
	justify-content: center;
	gap: 0.35rem;
	padding: clamp(2rem, 4vh, 2.75rem) 1.5rem;
}
/* Logo plate — a fixed-height slot so wordmarks of different widths all sit
   on the same baseline across the wall. Holds either the client's SVG or the
   monogram fallback. */
.cl-logo-plate {
	display: grid;
	place-items: center;
	width: 100%;
	height: 68px;
	margin-bottom: 0.85rem;
}
.cl-logo-img {
	width: auto;
	height: auto;
	max-width: min(200px, 100%);
	max-height: 62px;
	/* Muted at rest, brand colour on hover — same behaviour as the monograms,
	   but a lighter mute: wordmarks lose legibility at the 0.85 the solid
	   gradient monogram blocks tolerate. */
	filter: grayscale(0.55);
	opacity: 0.9;
	transition: filter 0.35s, opacity 0.35s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cl-logo:hover .cl-logo-img {
	filter: none;
	opacity: 1;
	transform: scale(1.05) translateY(-2px);
}
/* Dark tiles: lift the marks off the glass so mid-tone brand colours hold up. */
[data-theme="dark"] .cl-logo-img { filter: grayscale(0.55) brightness(1.3); }
[data-theme="dark"] .cl-logo:hover .cl-logo-img { filter: brightness(1.12); }

.cl-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--m1, #0A2A66), var(--m2, #123A85));
	color: #fff;
	font-family: var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--m1, #0A2A66) 55%, transparent);
	filter: grayscale(0.8);
	opacity: 0.85;
	transition: filter 0.35s, opacity 0.35s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cl-logo:hover .cl-mark {
	filter: none;
	opacity: 1;
	transform: scale(1.06) translateY(-2px);
}
.cl-logo-name {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.cl-logo-sector {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-muted);
}
.cl-logo--join {
	border-style: dashed;
	border-width: 1.5px;
}
.cl-logo--join .badshah-pill { margin-top: 0.9rem; }
.cl-mark--join {
	background: transparent;
	border: 1.5px dashed color-mix(in srgb, var(--fg) 35%, transparent);
	color: var(--fg-muted);
	box-shadow: none;
	filter: none;
	opacity: 1;
	font-size: 1.7rem;
	font-weight: 600;
}

/* Testimonials — left-aligned glass cards, big serif quote glyph,
   avatar-initials footer. */
.cl-quotes {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}
.cl-quote,
[data-theme="dark"] .cl-quote {
	min-height: 0;
	margin: 0;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	padding: clamp(1.75rem, 3.5vh, 2.4rem) clamp(1.5rem, 2.5vw, 2.1rem) clamp(1.75rem, 3.5vh, 2.2rem);
}
.cl-quote-glyph {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4rem;
	line-height: 0.6;
	margin-bottom: 0.9rem;
	background: linear-gradient(90deg, var(--accent, #0A66C2), #7fe0dc);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.cl-quote blockquote {
	margin: 0 0 1.4rem;
	padding: 0;
	border: 0;
	font-size: 1.02rem;
	line-height: 1.65;
	color: color-mix(in srgb, var(--fg) 88%, transparent);
}
.cl-quote figcaption {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: auto;
	padding-top: 1.1rem;
	width: 100%;
	border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.cl-quote-avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--m1, #0A2A66), var(--m2, #123A85));
	color: #fff;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.03em;
}
.cl-quote-who { display: flex; flex-direction: column; gap: 0.1rem; }
.cl-quote-who strong {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.cl-quote-who span {
	font-size: 0.78rem;
	color: var(--fg-muted);
}

@media (max-width: 1100px) {
	.cl-logowall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-quotes { grid-template-columns: 1fr; }
}
@media (max-width: 781px) {
	.cl-logowall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-logo, [data-theme="dark"] .cl-logo { padding: 1.5rem 1rem; }
	.cl-mark { width: 56px; height: 56px; border-radius: 15px; font-size: 1.1rem; }
	.cl-logo-name { font-size: 0.98rem; }
}
@media (max-width: 480px) {
	.cl-logowall { grid-template-columns: 1fr; }
}

/* ============================================================
   37. LANGUAGE SWITCHER (.badshah-lang) — glass pill dropdown
   in the header (EN / HI / AR / ZH) driving the Google Translate
   widget via its googtrans cookie, plus cleanup rules that hide
   every visual artifact the widget injects (banner, tooltips,
   text highlights).
   ============================================================ */
.badshah-lang {
	position: relative;
	flex: 0 0 auto;
}
.badshah-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 42px;
	padding: 0 13px;
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	color: var(--fg);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: transform 0.2s ease, background 0.3s ease, border-color 0.3s ease;
}
.badshah-lang-toggle:hover {
	transform: translateY(-1px);
}
.badshah-lang-toggle svg {
	width: 17px;
	height: 17px;
	opacity: 0.75;
	flex: 0 0 auto;
}
.badshah-lang-toggle .badshah-lang-caret {
	width: 12px;
	height: 12px;
	transition: transform 0.25s ease;
}
.badshah-lang.is-open .badshah-lang-caret {
	transform: rotate(180deg);
}
.badshah-lang-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 40;
	min-width: 196px;
	margin: 0;
	padding: 6px;
	list-style: none;
	/* More opaque than --glass-bg-strong: the menu often opens over the
	   giant hero headline, which bled through at the shared opacity. */
	background: color-mix(in srgb, var(--bg-card) 86%, transparent);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	backdrop-filter: blur(22px) saturate(150%);
	border: 1px solid var(--glass-border);
	border-radius: 18px;
	box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 40px -18px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(-6px) scale(0.97);
	transform-origin: top right;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.badshah-lang.is-open .badshah-lang-menu {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.badshah-lang-menu button {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 12px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--fg);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.badshah-lang-menu button .badshah-flag {
	flex: 0 0 auto;
	width: 21px;
	height: 14px;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 20%, transparent);
}
.badshah-flag svg {
	display: block;
	width: 100%;
	height: 100%;
}
.badshah-lang-menu button > span:not(.badshah-flag) {
	flex: 1;
	white-space: nowrap;
}
.badshah-lang-menu button em {
	font-style: normal;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--fg-muted);
}
.badshah-lang-menu button:hover {
	background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.badshah-lang-menu button.is-on {
	background: var(--wp--preset--color--contrast, #0a2a66);
	color: var(--wp--preset--color--base, #fff);
}
.badshah-lang-menu button.is-on em {
	color: inherit;
	opacity: 0.7;
}
/* Mobile bar: the pill sits in the right-hand group just before the theme
   toggle, so the dropdown stays right-anchored to remain on screen. */
@media (max-width: 900px) {
	.badshah-lang { order: 2; }
	.badshah-lang-toggle { padding: 0 10px; gap: 5px; }
	.badshah-lang-menu {
		right: 0;
		left: auto;
		transform-origin: top right;
	}
}
@media (max-width: 380px) {
	/* Very narrow phones: drop the globe glyph so the pill can't crowd
	   the centred logo. */
	.badshah-lang-toggle > svg:first-child { display: none; }
}

/* --- Google Translate widget cleanup: no banner, no tooltips, no
   highlight boxes; the switcher pill is the only visible control. --- */
#google_translate_element,
.goog-te-banner-frame,
body > .skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip {
	display: none !important;
}
body {
	top: 0 !important;
}
.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}
font[style] {
	background: none !important;
	box-shadow: none !important;
}

/* ============================================================
   38. QUOTE FORM PLUMBING — result notices + spam honeypot.
   ============================================================ */
.ct-notice {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 0.95rem;
	font-weight: 600;
	border: 1px solid transparent;
}
.ct-notice--ok {
	color: #2f9e6e;
	background: color-mix(in srgb, #2f9e6e 12%, transparent);
	border-color: color-mix(in srgb, #2f9e6e 35%, transparent);
}
.ct-notice--err {
	color: #d96363;
	background: color-mix(in srgb, #d96363 12%, transparent);
	border-color: color-mix(in srgb, #d96363 35%, transparent);
}
/* Honeypot field — invisible to people, tempting to bots. */
.ct-form .ct-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ============================================================
   39. CLIENT MOSAIC (.cl2-) — the animated alternative to the
   uniform §36 logo wall. A dense bento grid of three tile sizes
   over a 4-column stage, each tile carrying its client's brand
   pair in --b1/--b2. Three motion layers, all driven by
   assets/js/clients-mosaic.js:
     · entrance  — GSAP grid stagger, tiles rise into place
     · spotlight — an ambient sweep adds .is-lit one tile at a
                   time so the wall is never static
     · pointer   — desktop-only 3D tilt + a sheen that tracks the
                   cursor via --mx/--my
   Only opacity and transform are animated (no filter/blur
   tweens, no extra backdrop-filter) to keep the wall cheap.
   §36's .cl-logowall rules are untouched — swapping the markup
   back in patterns/clients.php restores the old grid.
   ============================================================ */
.cl2-mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(170px, auto);
	grid-auto-flow: dense;
	gap: clamp(0.75rem, 1.2vw, 1.1rem);
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: clamp(20px, 3vw, 40px);
	perspective: 1200px;
}
.cl2-tile--lg { grid-column: span 2; grid-row: span 2; }
.cl2-tile--md { grid-column: span 2; }

.cl2-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.15rem, 1.8vw, 1.6rem);
	overflow: hidden;
	border: 1px solid var(--glass-border);
	border-radius: 22px;
	background: var(--glass-bg);
	box-shadow: inset 0 1px 0 var(--glass-hi);
	transform-style: preserve-3d;
	will-change: transform;
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Brand aura — a soft corner bloom, lit by .is-lit or hover. */
.cl2-aura {
	position: absolute;
	inset: -30% -30% auto -30%;
	height: 150%;
	background: radial-gradient(60% 60% at 30% 20%, var(--b1, #1a8aff) 0%, transparent 70%);
	opacity: 0;
	transform: scale(0.75);
	transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
.cl2-tile.is-lit .cl2-aura,
.cl2-tile:hover .cl2-aura {
	opacity: 0.22;
	transform: scale(1);
}
[data-theme="dark"] .cl2-tile.is-lit .cl2-aura,
[data-theme="dark"] .cl2-tile:hover .cl2-aura { opacity: 0.34; }

/* Cursor sheen — position comes from --mx/--my set by the script. */
.cl2-sheen {
	position: absolute;
	inset: 0;
	background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--b2, #2cb7b3) 42%, transparent), transparent 65%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.cl2-tile:hover .cl2-sheen { opacity: 0.5; }

.cl2-tile.is-lit,
.cl2-tile:hover {
	border-color: color-mix(in srgb, var(--b1, #1a8aff) 45%, transparent);
	box-shadow: inset 0 1px 0 var(--glass-hi),
		0 20px 44px -26px color-mix(in srgb, var(--b1, #1a8aff) 80%, transparent);
}

/* Corner index numeral, outlined so it reads as a design mark. */
.cl2-num {
	position: relative;
	align-self: flex-end;
	font-family: var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	color: var(--fg-muted);
	opacity: 0.5;
	transition: color 0.4s ease, opacity 0.4s ease;
}
.cl2-tile.is-lit .cl2-num,
.cl2-tile:hover .cl2-num { color: var(--b1, #1a8aff); opacity: 1; }

.cl2-plate {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-height: 56px;
}
.cl2-img {
	width: auto;
	height: auto;
	max-width: min(210px, 100%);
	max-height: 58px;
	filter: grayscale(0.5);
	opacity: 0.9;
	transition: filter 0.4s ease, opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Feature tiles carry twice the area, so the mark scales with them — at the
   standard cap an --lg tile just reads as empty space. This needs an explicit
   width: the SVGs are natively 220x64, and a max-width alone can only shrink
   an image, never grow it. */
.cl2-tile--lg .cl2-img {
	width: min(320px, 90%);
	max-width: none;
	max-height: none;
}
.cl2-tile.is-lit .cl2-img,
.cl2-tile:hover .cl2-img {
	filter: none;
	opacity: 1;
	transform: translateY(-3px) scale(1.04);
}
[data-theme="dark"] .cl2-img { filter: grayscale(0.5) brightness(1.3); }
[data-theme="dark"] .cl2-tile.is-lit .cl2-img,
[data-theme="dark"] .cl2-tile:hover .cl2-img { filter: brightness(1.12); }

.cl2-meta {
	position: relative;
	display: grid;
	gap: 0.28rem;
}
.cl2-name {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--fg);
}
.cl2-tile--lg .cl2-name { font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
.cl2-sector {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--fg-muted);
}
/* Brand rule that grows in when the tile lights. */
.cl2-rule {
	position: relative;
	display: block;
	width: 26px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--b1, #1a8aff), var(--b2, #2cb7b3));
	transform-origin: left center;
	transform: scaleX(0.55);
	opacity: 0.6;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.cl2-tile.is-lit .cl2-rule,
.cl2-tile:hover .cl2-rule { transform: scaleX(2.4); opacity: 1; }

/* Join tile — dashed invitation, same motion system. */
.cl2-tile--join {
	border-style: dashed;
	border-width: 1.5px;
	justify-content: center;
	gap: 0.55rem;
	text-align: left;
}
.cl2-tile--join .cl2-name { font-size: 1.1rem; }
.cl2-tile--join .badshah-pill { margin-top: 0.55rem; align-self: flex-start; }

@media (max-width: 1100px) {
	.cl2-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.cl2-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(158px, auto); }
	.cl2-tile--lg { grid-row: span 1; }
}
@media (max-width: 520px) {
	.cl2-mosaic { grid-template-columns: 1fr; }
	.cl2-tile--lg,
	.cl2-tile--md { grid-column: span 1; }
}
/* No motion: the script skips its timelines, so make sure tiles are
   visible and the tilt/perspective rig is inert. */
@media (prefers-reduced-motion: reduce) {
	.cl2-mosaic { perspective: none; }
	.cl2-tile { transform: none !important; }
	.cl2-aura, .cl2-sheen { transition: none; }
}

/* ============================================================
   40. FAQ ANSWER BLOCK (.badshah-faq) + BREADCRUMBS (.badshah-crumbs)
   The answer-engine surface. Questions render as real <h3>s with
   the answer in the very next <p> — no accordion, no JS — so
   crawlers and LLM retrievers get the text without executing
   anything, and it matches the FAQPage JSON-LD word for word.
   Deliberately no backdrop-filter here: this block sits low on
   long pages and glass layers there cost more than they show.
   ============================================================ */
.badshah-faq {
	position: relative;
	padding: clamp(56px, 7vw, 110px) clamp(16px, 4vw, 48px);
	background: var(--bg-page);
}
.badshah-faq-inner {
	max-width: 1180px;
	margin: 0 auto;
}
.badshah-faq-head {
	max-width: 720px;
	margin: 0 auto clamp(32px, 4vw, 56px);
	text-align: center;
}
.badshah-faq-head .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 700 0.82rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brand);
}
.badshah-faq-head .eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
}
.badshah-faq-head h2 {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0.4em 0 0.35em;
}
.badshah-faq-lede {
	color: var(--fg-muted);
	font-size: clamp(0.98rem, 1.3vw, 1.1rem);
	margin: 0 auto;
	max-width: 52ch;
}
.badshah-faq-lede a {
	color: var(--brand);
	text-underline-offset: 3px;
}

.badshah-faq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}
.badshah-faq-item {
	position: relative;
	padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 30px);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-card);
	box-shadow: var(--shadow);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.badshah-faq-item::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	border-radius: var(--radius) 0 0 var(--radius);
	background: linear-gradient(180deg, var(--brand), var(--accent));
	opacity: 0;
	transition: opacity 0.35s ease;
}
.badshah-faq-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}
.badshah-faq-item:hover::before { opacity: 1; }

.badshah-faq-num {
	display: block;
	font: 700 0.72rem/1 var(--wp--preset--font-family--heading, "Lexend", sans-serif);
	letter-spacing: 0.18em;
	color: color-mix(in srgb, var(--brand) 70%, transparent);
	margin-bottom: 0.9rem;
}
.badshah-faq-q {
	font-size: clamp(1.05rem, 1.5vw, 1.24rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 0.6rem;
	color: var(--fg);
}
.badshah-faq-a {
	margin: 0;
	color: var(--fg-muted);
	font-size: clamp(0.94rem, 1.15vw, 1.02rem);
	line-height: 1.68;
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.badshah-faq-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.badshah-faq-item { transition: none; }
	.badshah-faq-item:hover { transform: none; }
}

/* ---- Breadcrumbs — sits above the <h1> in the page header band ---- */
.badshah-crumbs {
	max-width: 1180px;
	margin: 0 auto 1.1rem;
	padding: 0 clamp(16px, 4vw, 48px);
	font-size: 0.86rem;
	color: var(--fg-muted);
}
.badshah-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.badshah-crumbs li { display: inline-flex; align-items: center; gap: 0.45rem; }
.badshah-crumbs li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.55;
}
.badshah-crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.badshah-crumbs a:hover { color: var(--brand); }
.badshah-crumbs [aria-current="page"] { color: var(--fg); font-weight: 600; }