/* ==========================================================================
   KAUSTYA INFOTECH — visual system v3.1 ("Signal")

   Built to the supplied design brief: white background, dark navy #0B1F3A,
   electric blue #007BFF, light grey sections, generous whitespace, 12–20px
   radii, soft shadows, glassmorphism where it earns its place, Poppins
   ExtraBold headings over Inter body, subtle gradients, micro-interactions.

   Loads after main.css and after the Customizer's inline variables, so it
   restyles components without changing a single line of template markup.
   That is what keeps plugins, shortcodes, ACF content, forms, the sitemap
   builder and every SEO output working exactly as before.

   Delete the one `kaustya-redesign` enqueue line in inc/enqueue.php to
   revert the whole visual system.

   1.  Tokens
   2.  Typography
   3.  Section labels
   4.  Buttons
   5.  Cards and surfaces
   6.  Header, navigation, mega menu
   7.  Heroes
   8.  Statistics and counters
   9.  Forms
   10. Blog and article
   11. Footer and floating controls
   12. Motion and micro-interactions
   13. Accessibility floor
   14. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* --- Surfaces --------------------------------------------------- */
	--bg: #FFFFFF;
	--bg-alt: #F5F7FA;          /* light grey section */
	--card: #FFFFFF;
	--ink: #0B1F3A;             /* dark navy */
	--ink-2: #16305A;
	--body: #4A5B72;
	--muted: #7C8CA3;
	--line: #E4E9F0;
	--line-soft: #F0F3F7;

	--dark-bg: #0B1F3A;
	--dark-bg-2: #132C52;
	--dark-ink: #FFFFFF;
	--dark-body: rgba(255, 255, 255, .76);
	--dark-muted: rgba(255, 255, 255, .55);
	--dark-line: rgba(255, 255, 255, .14);

	/* --- Glass: the sticky header, and controls on dark sections ----- */
	--glass: rgba(255, 255, 255, .82);
	--glass-line: rgba(228, 233, 240, .9);
	--glass-dark: rgba(255, 255, 255, .07);
	--glass-dark-line: rgba(255, 255, 255, .16);

	/* --- Gradients: subtle, never on body copy ---------------------- */
	--grad-brand: linear-gradient(135deg, var(--color-primary) 0%, #3D9BFF 100%);
	--grad-brand-soft: linear-gradient(135deg, rgba(var(--color-primary-rgb), .10), rgba(var(--color-primary-rgb), .04));
	--grad-teal: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	--grad-text: linear-gradient(100deg, var(--color-primary), #3D9BFF);
	--grad-navy: linear-gradient(160deg, #0B1F3A 0%, #132C52 55%, #0B1F3A 100%);

	/* --- Type -------------------------------------------------------- */
	--font-mono: var(--font-body);

	--text-xs: 0.8125rem;
	--text-sm: 0.9375rem;
	--text-base: 1.0625rem;
	--text-md: 1.1875rem;
	--text-lg: 1.375rem;
	--text-xl: 1.625rem;
	--text-2xl: 1.9375rem;
	--text-3xl: 2.375rem;
	--text-4xl: clamp(2.125rem, 3.6vw, 3rem);
	--text-5xl: clamp(2.5rem, 4.8vw, 3.75rem);
	--text-hero: clamp(2.75rem, 5.6vw, 4.75rem);

	/* --- Whitespace: the brief asks for plenty ----------------------- */
	--section-py: clamp(88px, 10vw, 148px);
	--section-py-tight: clamp(56px, 6.5vw, 88px);
	--container: 1280px;

	/* --- Radius 12–20px --------------------------------------------- */
	--radius-xs: 8px;
	--radius-sm: 12px;
	--radius-md: 16px;
	--radius-lg: 20px;
	--radius-xl: 24px;
	--radius-full: 9999px;

	/* --- Soft shadows, navy-tinted ---------------------------------- */
	--shadow-xs: 0 1px 2px rgba(11, 31, 58, .04);
	--shadow-sm: 0 2px 8px rgba(11, 31, 58, .05);
	--shadow-md: 0 8px 24px rgba(11, 31, 58, .07);
	--shadow-lg: 0 18px 44px rgba(11, 31, 58, .10);
	--shadow-xl: 0 32px 72px rgba(11, 31, 58, .15);
	--shadow-brand: 0 8px 22px rgba(var(--color-primary-rgb), .26);
	--shadow-brand-lg: 0 16px 38px rgba(var(--color-primary-rgb), .32);

	--header-h: 78px;
}

[data-theme="dark"] {
	--bg: #081729;
	--bg-alt: #0B1F3A;
	--card: #0F2645;
	--ink: #FFFFFF;
	--ink-2: #E8EEF6;
	--body: rgba(255, 255, 255, .76);
	--muted: rgba(255, 255, 255, .54);
	--line: rgba(255, 255, 255, .13);
	--line-soft: rgba(255, 255, 255, .07);
	--glass: rgba(8, 23, 41, .84);
	--glass-line: rgba(255, 255, 255, .13);
}

html { scroll-behavior: smooth; }

/* ==========================================================================
   2. TYPOGRAPHY — Poppins ExtraBold display over Inter body
   ========================================================================== */

body { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.7; }

h1, h2, h3, h4, h5, h6,
.hero__title, .section-title, .page-hero__title, .card__title, .h5 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.14;
	color: var(--ink);
}

/* ExtraBold is reserved for the big statements. */
.hero__title,
.page-hero__title,
.section-title,
.cta-strip__title { font-weight: 800; letter-spacing: -0.032em; line-height: 1.08; }

.section-title { font-size: var(--text-4xl); }
.section-sub { font-size: var(--text-md); color: var(--body); max-width: 62ch; }

/* Emphasis inside a headline takes the electric-blue gradient. */
.section-title em,
.hero__title em,
.section-title > span:not(.word),
.hero__title > span:not(.word) {
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-style: normal;
}

/* On navy, a solid light blue reads better than a gradient fill. */
.page-hero__title em,
.page-hero__title > span:not(.word) { color: #7FC0FF; font-style: normal; -webkit-text-fill-color: currentColor; background: none; }

.btn { font-weight: 600; }

/* ==========================================================================
   3. SECTION LABELS
   ========================================================================== */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px 7px 12px;
	border-radius: var(--radius-full);
	background: rgba(var(--color-primary-rgb), .08);
	border: 1px solid rgba(var(--color-primary-rgb), .18);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 20px;
}

.eyebrow__rule {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--color-primary);
	flex: none;
}

.eyebrow--light {
	background: var(--glass-dark);
	border-color: var(--glass-dark-line);
	color: #fff;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.eyebrow--light .eyebrow__rule { background: #7FC0FF; }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn {
	border-radius: var(--radius-sm);
	padding: 15px 28px;
	font-size: var(--text-sm);
	letter-spacing: -0.005em;
	transition: transform var(--base) var(--ease-out),
	            box-shadow var(--base) var(--ease-out),
	            background-color var(--fast) var(--ease-out),
	            border-color var(--fast) var(--ease-out),
	            color var(--fast) var(--ease-out);
}

.btn--primary {
	background: var(--grad-brand);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--shadow-brand);
}

.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-brand-lg); }

.btn--ghost,
.btn--outline {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}

.btn--ghost:hover,
.btn--outline:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: rgba(var(--color-primary-rgb), .05);
	transform: translateY(-2px);
}

/* On a dark background an outline button becomes glass. */
.hero .btn--ghost,
.cta-strip .btn--ghost,
.page-hero .btn--ghost {
	background: var(--glass-dark);
	border-color: var(--glass-dark-line);
	color: #fff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.hero .btn--ghost:hover,
.cta-strip .btn--ghost:hover,
.page-hero .btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }

.btn svg { transition: transform 280ms var(--ease-spring); }
.btn:hover svg { transform: translateX(4px); }

/* A light sweep across the primary button on hover. */
.btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 55%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-18deg);
	transition: left 640ms var(--ease-out);
	pointer-events: none;
	display: block;
}

.btn--primary:hover::after { left: 130%; }

/* ==========================================================================
   5. CARDS AND SURFACES
   ========================================================================== */

.card,
.widget,
.case-card,
.leader,
.comment-item__inner,
.author-card,
.comment-respond,
.verse__inner {
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	background: var(--card);
}

.card { padding: 30px 28px; }

.card:hover {
	transform: translateY(-6px);
	border-color: rgba(var(--color-primary-rgb), .30);
	box-shadow: var(--shadow-lg);
}

/* An electric-blue hairline draws across the top edge on hover. */
.card::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--grad-brand);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 460ms var(--ease-out);
	display: block;
	opacity: 1;
	z-index: 1;
}

.card:hover::before { transform: scaleX(1); }

.card__icon {
	width: 54px;
	height: 54px;
	border-radius: var(--radius-sm);
	background: var(--grad-brand-soft);
	border: 1px solid rgba(var(--color-primary-rgb), .16);
	color: var(--color-primary);
	margin-bottom: 22px;
	transition: transform var(--base) var(--ease-spring), background var(--base) var(--ease-out), color var(--base) var(--ease-out);
}

.card:hover .card__icon {
	background: var(--grad-brand);
	border-color: transparent;
	color: #fff;
	transform: translateY(-3px) scale(1.05);
}

.card__title { font-size: var(--text-lg); }
.card__text { color: var(--body); font-size: var(--text-sm); }
.card__badge { border-radius: var(--radius-full); background: var(--grad-brand); font-weight: 600; letter-spacing: .06em; }
.card__media img { border-radius: 0; }

.section--surface { background: var(--bg-alt); border-block: 0; }

/* ==========================================================================
   6. HEADER, NAVIGATION, MEGA MENU
   Glass over the hero, solid white once scrolled.
   ========================================================================== */

.site-header {
	border-bottom: 1px solid transparent;
	background: var(--glass);
	backdrop-filter: saturate(160%) blur(18px);
	-webkit-backdrop-filter: saturate(160%) blur(18px);
	transition: background var(--base) var(--ease-out), box-shadow var(--base) var(--ease-out), border-color var(--base) var(--ease-out);
}

/* Superseded by section 15c, which keys the solid state to .is-scrolled —
   .is-stuck only toggles on overlay pages. Kept as a fallback for the case
   where main.js does not load at all. */
.site-header.is-stuck {
	background: #fff;
	border-bottom-color: var(--line);
	box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .site-header.is-stuck { background: #081729; }

.nav__links > li > a {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--ink);
	transition: color var(--fast) var(--ease-out);
}

.nav__links > li > a:hover { color: var(--color-primary); }
.nav__links > li > a::after { height: 2px; bottom: -7px; background: var(--grad-brand); }

.mega {
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-xl);
}

.burger,
.theme-toggle {
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	transition: border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}

.burger:hover,
.theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

.topbar { background: var(--ink); font-size: var(--text-xs); }

/* ==========================================================================
   7. HEROES
   ========================================================================== */

.page-hero {
	background: var(--grad-navy);
	position: relative;
	overflow: hidden;
}

/* Ambient technology field: a fine measured grid, faded out. */
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(120% 100% at 20% 0%, #000 0%, transparent 72%);
	-webkit-mask-image: radial-gradient(120% 100% at 20% 0%, #000 0%, transparent 72%);
	pointer-events: none;
}

/* A soft electric-blue bloom in the top right. */
.page-hero::after {
	content: "";
	position: absolute;
	top: -30%;
	right: -8%;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--color-primary-rgb), .28), transparent);
	filter: blur(30px);
	pointer-events: none;
}

.page-hero__inner { position: relative; z-index: 1; }
.page-hero__title { color: #fff; }
.page-hero__text { color: var(--dark-body); font-size: var(--text-md); }

.breadcrumbs { font-size: var(--text-xs); letter-spacing: .02em; }

/* ==========================================================================
   8. STATISTICS AND COUNTERS
   main.js already animates the count-up; this is the presentation.
   ========================================================================== */

.stat { text-align: center; }

.stat__value,
.stat__number {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(135deg, #FFFFFF 28%, #7FC0FF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.stats { background: var(--grad-navy); }
.stat__suffix { -webkit-text-fill-color: currentColor; color: #7FC0FF; }
.stat__icon { color: #7FC0FF; }

.stat__label { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--dark-muted); }

/* ==========================================================================
   9. FORMS
   ========================================================================== */

.kfield input,
.kfield select,
.kfield textarea,
.kform--comment input,
.kform--comment textarea,
.searchform input {
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--card);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}

.kfield input:focus,
.kfield select:focus,
.kfield textarea:focus,
.kform--comment input:focus,
.kform--comment textarea:focus,
.searchform input:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), .13);
}

.kfield label,
.kform--comment .kfield label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: none;
	color: var(--ink);
}

.searchform button { border-radius: var(--radius-sm); background: var(--grad-brand); box-shadow: var(--shadow-brand); }
.searchform button:hover { transform: translateY(-2px); }

/* ==========================================================================
   10. BLOG AND ARTICLE
   ========================================================================== */

.topic-pill {
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
}

.topic-pill.is-active { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: var(--shadow-brand); }
.topic-pill:hover { border-color: rgba(var(--color-primary-rgb), .45); color: var(--color-primary); transform: translateY(-1px); }

.card--post .card__cat { font-family: var(--font-body); letter-spacing: .08em; }

.prose--article h2::before { width: 44px; height: 3px; border-radius: 3px; background: var(--grad-brand); margin-bottom: 18px; }
.prose--article ul li::before { border-radius: 999px; width: 7px; height: 7px; background: var(--grad-brand); }
.prose--article ol li::before { border-radius: 999px; background: rgba(var(--color-primary-rgb), .10); color: var(--color-primary); font-family: var(--font-body); font-weight: 700; }

.prose--article blockquote {
	border-image: none;
	border-left: 3px solid var(--color-primary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	background: var(--bg-alt);
}

.pagination .page-numbers { border-radius: var(--radius-sm); }
.pagination .page-numbers.current { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: var(--shadow-brand); }

.share-btn { border-radius: var(--radius-sm); }
.share-btn:hover { background: var(--grad-brand); border-color: transparent; color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-brand); }

.read-progress__fill { background: var(--grad-brand); box-shadow: 0 0 12px rgba(var(--color-primary-rgb), .5); }

.widget--cta { background: var(--grad-navy); border-color: transparent; box-shadow: var(--shadow-lg); }
.widget--cta .btn--primary { background: #fff; color: var(--color-primary); }

/* ==========================================================================
   11. FOOTER AND FLOATING CONTROLS
   ========================================================================== */

.site-footer { background: var(--grad-navy); border-top: 0; }

.footer-col__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-sm);
	letter-spacing: .01em;
	text-transform: none;
	color: #fff;
}

.socials a { border-radius: var(--radius-sm); }
.socials a:hover { background: var(--grad-brand); border-color: transparent; transform: translateY(-3px) scale(1.06); box-shadow: var(--shadow-brand); }

.footer-bottom { font-size: var(--text-xs); }

.float-btn { border-radius: var(--radius-full); box-shadow: var(--shadow-lg); }
.float-btn--top { background: var(--grad-brand); }

/* ==========================================================================
   12. MOTION AND MICRO-INTERACTIONS
   ========================================================================== */

.has-spotlight::after {
	display: block;
	background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--color-primary-rgb), .10), transparent 62%);
}

.has-motion .btn--primary,
.has-motion .float-btn,
.has-motion .share-btn { transform: translate3d(var(--pull-x, 0), var(--pull-y, 0), 0); }
.has-motion .btn--primary:hover { transform: translate3d(var(--pull-x, 0), calc(var(--pull-y, 0px) - 2px), 0); }

.is-split .word { transform: translateY(0.44em); }

/* Accordion and testimonial controls pick up the accent. */
.accordion__item { border-radius: var(--radius-md); }
.accordion__item.is-open .accordion__btn { color: var(--color-primary); }
.accordion__btn:hover { color: var(--color-primary); }
.testi__card { border-radius: var(--radius-lg); }
.testi__arrow { border-radius: var(--radius-sm); transition: all var(--fast) var(--ease-out); }
.testi__arrow:hover { background: var(--grad-brand); border-color: transparent; color: #fff; }
.testi__stars { color: var(--color-primary); }

/* ==========================================================================
   13. ACCESSIBILITY FLOOR
   ========================================================================== */

:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-xs); }
::selection { background: rgba(var(--color-primary-rgb), .20); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn svg, .card, .card__icon, .card::before { transition: none; }
	.card:hover { transform: none; }
	.btn--primary::after { display: none; }
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
	.page-hero::after { width: 420px; height: 420px; }
}

@media (max-width: 860px) {
	.card { padding: 26px 24px; }
	.card__icon { width: 50px; height: 50px; margin-bottom: 18px; }
}

@media (max-width: 640px) {
	:root {
		--section-py: clamp(60px, 13vw, 88px);
		--section-py-tight: clamp(44px, 10vw, 60px);
		--radius-lg: 16px;
		--radius-xl: 18px;
	}

	.card { padding: 24px 20px; }
	.card:hover { transform: none; }
	.card__icon { width: 46px; height: 46px; margin-bottom: 16px; }
	.btn { padding: 14px 22px; }
	.eyebrow { font-size: 11px; padding: 6px 14px 6px 10px; margin-bottom: 16px; }
	.page-hero::before { background-size: 44px 44px; }
	.page-hero::after { width: 300px; height: 300px; top: -18%; }
}

@media (max-width: 380px) {
	.card { padding: 20px 17px; }
	.btn { padding: 13px 18px; font-size: var(--text-xs); }
}

@media (hover: none) {
	.card::before { display: none; }
	.has-spotlight::after { display: none; }
	.btn--primary::after { display: none; }
}

/* ==========================================================================
   15. CORRECTIONS AND COMPONENT REDESIGN (v3.2)

   Three fixes and two redesigns, all reported from live screenshots.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15a. FIX — the homepage headline was unreadable

   Section 2 sets `color: var(--ink)` on every heading, which is navy. The
   homepage hero sits on a dark photograph, so main.css sets .hero__title to
   white — and this stylesheet loads afterwards and overrode it. The first two
   lines of the headline were rendering navy-on-navy.

   Headings on dark surfaces are now excluded explicitly rather than relying on
   source order.
   -------------------------------------------------------------------------- */
.hero__title,
.hero .section-title,
.cta-strip__title,
.stats .section-title,
.section--dark .section-title,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: #fff; }

/* The accent line keeps a light blue that holds up against a photograph.
   Electric blue #007BFF is too dark to read over dark imagery. */
.hero__title em {
	display: block;
	background: linear-gradient(100deg, #7FC0FF 0%, #4DA6FF 55%, #7FE0D4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* A readability scrim under the headline, so copy stays legible whatever
   photograph the client swaps in. */
.hero__title,
.hero__text { text-shadow: 0 1px 24px rgba(11, 31, 58, .45); }

/* --------------------------------------------------------------------------
   15b. FIX — partner names chopped mid-word

   The marquee mask was applied to a viewport sitting inside .container, so
   the fade ended at the container padding and names were cut off hard at the
   screen edge. The viewport is now full-bleed with a wider fade, so a name
   dissolves instead of being sliced.
   -------------------------------------------------------------------------- */
.trusted { padding-block: clamp(40px, 4.5vw, 60px); }

.trusted__viewport {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.trusted__title { margin-bottom: 26px; }

.trusted__word {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-lg);
	letter-spacing: -0.02em;
	color: var(--muted);
	opacity: .72;
	transition: color var(--base) var(--ease-out), opacity var(--base) var(--ease-out);
}

.trusted__item:hover .trusted__word { color: var(--ink); opacity: 1; }

/* --------------------------------------------------------------------------
   15c. REDESIGN — the navigation

   Transparent over the hero, solid white once scrolled, as the brief asks.
   Every template opens with a dark hero, so the transparent state is safe;
   the 404 screen has no hero and is given the solid treatment explicitly.
   -------------------------------------------------------------------------- */
/*
 * These rules paint the header for a DARK HERO behind it, so every one of them
 * is scoped to a page that actually has one.
 *
 * They used to be written as `.site-header:not(.is-scrolled) …` alone. On an
 * interior page the header is solid white but is NOT `.is-scrolled` until the
 * visitor scrolls, so the white text below still applied — and because the
 * hover and current-item selectors carry one more class than the
 * `.has-solid-header` override further down, they won the cascade. The result
 * was white-on-white: the current menu item was invisible on every interior
 * page, and every item vanished on hover. Scoping them to
 * `body:not(.has-solid-header):not(.error404)` limits them to the pages they
 * were written for and lets the solid rules apply everywhere else.
 */
body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: rgba(255, 255, 255, .12);
	box-shadow: none;
}

body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) .nav__links > li > a,
body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) .link-ghost { color: rgba(255, 255, 255, .88); }

body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) .nav__links > li > a:hover,
body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) .nav__links > li.current-menu-item > a,
body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) .nav__links > li.current-menu-ancestor > a { color: #fff; }

body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) .nav__links > li > a::after { background: #7FC0FF; }

body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) .burger,
body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) .theme-toggle {
	border-color: rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) .burger span { background: #fff; }

body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) .burger:hover,
body:not(.has-solid-header):not(.error404) .site-header:not(.is-scrolled) .theme-toggle:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .16); color: #fff; }

/* Safety net: a page that opts into a solid header, or the 404 screen, has no
   hero behind the bar, so the transparent state must never apply there. */
.has-solid-header .site-header,
.error404 .site-header {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom-color: var(--line);
}

.has-solid-header .site-header .nav__links > li > a,
.has-solid-header .site-header .link-ghost,
.error404 .site-header .nav__links > li > a { color: var(--ink); }

/*
 * On a white header the active item and the hovered item read as brand blue,
 * which is what the underline beneath them already uses.
 */
.has-solid-header .site-header .nav__links > li > a:hover,
.has-solid-header .site-header .nav__links > li.current-menu-item > a,
.has-solid-header .site-header .nav__links > li.current-menu-ancestor > a,
.has-solid-header .site-header .nav__links > li.current_page_parent > a,
.has-solid-header .site-header .nav__links > li.current_page_ancestor > a,
.error404 .site-header .nav__links > li > a:hover { color: var(--color-primary); }

[data-theme="dark"] .has-solid-header .site-header .nav__links > li > a,
[data-theme="dark"] .error404 .site-header .nav__links > li > a { color: rgba(255, 255, 255, .88); }

[data-theme="dark"] .has-solid-header .site-header .nav__links > li > a:hover,
[data-theme="dark"] .has-solid-header .site-header .nav__links > li.current-menu-item > a,
[data-theme="dark"] .has-solid-header .site-header .nav__links > li.current-menu-ancestor > a { color: #fff; }

.has-solid-header .site-header .burger,
.has-solid-header .site-header .theme-toggle,
.error404 .site-header .burger,
.error404 .site-header .theme-toggle {
	border-color: var(--line);
	background: transparent;
	color: var(--ink);
}

.has-solid-header .site-header .burger span,
.error404 .site-header .burger span { background: var(--ink); }

[data-theme="dark"] .has-solid-header .site-header,
[data-theme="dark"] .error404 .site-header { background: rgba(8, 23, 41, .92); }

/* Scrolled state: white, hairline, soft shadow. */
.site-header {
	transition: background var(--base) var(--ease-out),
	            border-color var(--base) var(--ease-out),
	            box-shadow var(--base) var(--ease-out),
	            backdrop-filter var(--base) var(--ease-out);
}

.site-header.is-scrolled {
	background: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom-color: var(--line);
	box-shadow: 0 4px 20px rgba(11, 31, 58, .07);
}

[data-theme="dark"] .site-header.is-scrolled { background: rgba(8, 23, 41, .88); }

/* Nav links: more air, an active pill, a cleaner underline. */
.nav__links { gap: 4px; }

.nav__links > li > a {
	padding: 9px 14px;
	border-radius: var(--radius-sm);
	font-weight: 500;
	transition: color var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}

.site-header.is-scrolled .nav__links > li > a:hover { background: rgba(var(--color-primary-rgb), .07); }
.site-header:not(.is-scrolled) .nav__links > li > a:hover { background: rgba(255, 255, 255, .10); }
.nav__links > li > a::after { left: 14px; right: 14px; bottom: 2px; }

/* The header CTA carries the conversion weight, so it gets full contrast in
   both states. */
.site-header__actions .btn--primary { box-shadow: var(--shadow-brand); }
.site-header:not(.is-scrolled) .link-ghost:hover { color: #fff; }

/* --------------------------------------------------------------------------
   15d. REDESIGN — the statistics band

   Reported problems: six figures in one flat row, low-contrast grey icon
   boxes, and a white-to-blue gradient on the numerals that made "14" read
   lighter at the top than "3000" did.

   Now: each figure is a glass panel, the numeral is solid white for maximum
   contrast, the suffix carries the electric blue, and the icon is a small
   blue mark rather than a grey box. Panels wrap cleanly at any width, which a
   divider-based row does not.
   -------------------------------------------------------------------------- */
.stats { padding-block: clamp(56px, 6vw, 84px); }

/* The original double radial wash fought with the panels. */
.stats::after {
	background:
		radial-gradient(900px 320px at 12% -10%, rgba(var(--color-primary-rgb), .26), transparent 68%),
		radial-gradient(700px 280px at 92% 110%, rgba(var(--color-accent-rgb), .16), transparent 70%);
}

.stats__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr));
	gap: 14px;
}

.stat {
	position: relative;
	padding: 26px 16px 22px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background var(--base) var(--ease-out), border-color var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}

.stat:hover {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(127, 192, 255, .45);
	transform: translateY(-4px);
}

.stat__icon {
	width: 34px;
	height: 34px;
	border-radius: var(--radius-xs);
	background: rgba(127, 192, 255, .14);
	border: 1px solid rgba(127, 192, 255, .22);
	color: #7FC0FF;
	margin-bottom: 14px;
}

/* Solid white numerals — a gradient across a numeral makes equal figures look
   unequal, which is the opposite of what a statistic should do. */
.stat__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 1px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	line-height: 1;
	letter-spacing: -0.035em;
	background: none;
	-webkit-text-fill-color: currentColor;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.stat__number {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: #fff;
}

.stat__suffix {
	-webkit-text-fill-color: currentColor;
	color: #7FC0FF;
	font-size: .72em;
	font-weight: 700;
}

.stat__label {
	margin-top: 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .13em;
	line-height: 1.45;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

/* --------------------------------------------------------------------------
   15e. RESPONSIVE for the two redesigned components
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.stats { padding-block: clamp(40px, 10vw, 56px); }
	.stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.stat { padding: 20px 12px 18px; }
	.stat:hover { transform: none; }
	.stat__icon { width: 30px; height: 30px; margin-bottom: 10px; }
	.stat__value { font-size: clamp(1.625rem, 7vw, 2rem); }
	.stat__label { font-size: 10px; letter-spacing: .1em; margin-top: 9px; }
	.trusted__word { font-size: var(--text-base); }
	.trusted__viewport {
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
	}
}

@media (max-width: 380px) {
	.stat__value { font-size: 1.5rem; }
	.stat__label { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
	.trusted__track { animation: none; }
	.stat:hover { transform: none; }
}

/* ==========================================================================
   16. NAVIGATION FIT (v3.3)

   Reported: "Enterprise Solutions" and "Engineering & Automation" broke onto
   two lines, leaving the nav row ragged and the header double height.

   Cause, and it is mine: restoring the header CTA in 3.2.0 added roughly
   150px of button plus a "Contact Us" link to .site-header__actions. The
   header sits in a 1280px .container, .nav is flex:1 and the actions are
   flex:none — so the nav absorbed the whole loss and the two longest labels
   wrapped.

   Three measures, in order of preference: never break a label, give the bar
   more room, then shed the least valuable element before the nav suffers.
   ========================================================================== */

/* 1. A menu label is a single unit. It may never break mid-phrase. */
.nav__links > li > a,
.site-header__actions .btn,
.site-header__actions .link-ghost { white-space: nowrap; }

/* 2. The header bar gets its own width, wider than the content container,
      because it carries more in a single row than any page section does. */
.site-header .container,
.topbar .container { max-width: 1480px; }

/* 3. Between 1024px and 1440px the row tightens progressively rather than
      collapsing all at once. */
@media (max-width: 1440px) {
	.nav__links > li > a { padding-inline: 11px; }
	.site-header__actions { gap: 10px; }
}

@media (max-width: 1320px) {
	.nav__links > li > a { padding-inline: 9px; font-size: 0.9rem; }
}

@media (max-width: 1180px) {
	/* Last resort before the burger takes over at 1024px: the button keeps
	   its label but loses the arrow and some padding. */
	.nav__links > li > a { padding-inline: 7px; font-size: 0.875rem; }
	.nav__links { gap: 0; }
	.site-header__actions .btn--sm { padding-inline: 16px; }
	.site-header__actions .btn--sm svg { display: none; }
	.site-header__inner { gap: 14px; }
}

/* The underline follows the padding at every width. */
@media (max-width: 1440px) { .nav__links > li > a::after { left: 11px; right: 11px; } }
@media (max-width: 1320px) { .nav__links > li > a::after { left: 9px; right: 9px; } }
@media (max-width: 1180px) { .nav__links > li > a::after { left: 7px; right: 7px; } }

/* Guarantee a single-line bar whatever the label lengths. */
.site-header__inner { flex-wrap: nowrap; min-height: var(--header-h); }
.nav { flex: 1 1 auto; min-width: 0; }
.nav__links { flex-wrap: nowrap; }

/* --------------------------------------------------------------------------
   16b. The burger takes over earlier, and the CTA survives longer

   Measuring the row at each width shows the six labels plus the button still
   need about 1080px between 1025px and 1180px, where only ~944px is available.
   main.css hands over to the burger at 1024px, which is one step too late, so
   the handover moves to 1200px.

   The same rule in main.css also hides the primary button at 1024px. That is
   the one element on the bar that exists to convert, so it stays visible down
   to small phones instead — a burger plus a visible "Get a Quote" is the
   standard tablet pattern and costs nothing.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.nav { display: none; }
	.site-header__actions .link-ghost { display: none; }
	.burger { display: flex; }
}

@media (max-width: 1200px) and (min-width: 561px) {
	.site-header__actions .btn { display: inline-flex; }
	.site-header__actions .btn--sm { padding: 10px 18px; }
	.site-header__actions .btn--sm svg { display: none; }
}

/* Below 560px the bar keeps only the logo, the theme toggle and the burger;
   the floating WhatsApp button already covers the call to action there. */
@media (max-width: 560px) {
	.site-header__actions .btn { display: none; }
}

/* --------------------------------------------------------------------------
   16c. The logo strip now carries real marks, not words

   Real logos vary wildly in aspect ratio — Capgemini is a long script
   wordmark, Intel is almost square. Sizing by height alone makes the wide
   ones dominate, so each mark is boxed and constrained on both axes, which
   gives the strip an even optical rhythm.
   -------------------------------------------------------------------------- */
.trusted__item {
	display: grid;
	place-items: center;
	height: 46px;
	padding-inline: 4px;
}

.trusted__item img {
	max-height: 40px;
	max-width: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .55;
	transition: filter var(--base) var(--ease-out), opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}

.trusted__item:hover img { filter: none; opacity: 1; transform: scale(1.04); }

.trusted__track { gap: clamp(34px, 5vw, 68px); }

@media (max-width: 860px) {
	.trusted__item { height: 40px; }
	.trusted__item img { max-height: 34px; max-width: 124px; }
	.trusted__track { gap: 34px; }
}

@media (max-width: 560px) {
	.trusted__item { height: 34px; }
	.trusted__item img { max-height: 28px; max-width: 104px; }
	.trusted__track { gap: 26px; }
}

/* On a touch screen there is no hover, so show the marks in colour. */
@media (hover: none) {
	.trusted__item img { filter: grayscale(1); opacity: .62; }
}

/* --------------------------------------------------------------------------
   16d. Photo cards

   Industry and service cards can now carry a photograph. The band sits above
   the icon, the icon overlaps its lower edge so the two read as one object,
   and a navy scrim keeps the white icon legible over any image.

   Cards without a photograph are untouched — the two styles sit side by side
   in the same grid without looking mismatched, because the padding and type
   are identical below the band.
   -------------------------------------------------------------------------- */
.card--photo { padding-top: 0; overflow: hidden; }

.card__photo {
	display: block;
	position: relative;
	margin-inline: -28px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-alt);
}

.card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 720ms var(--ease-out);
}

/* A scrim at the base of the image so the icon plate always has contrast. */
.card__photo::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 52%;
	background: linear-gradient(to top, rgba(11, 31, 58, .55), transparent);
	pointer-events: none;
}

.card--photo:hover .card__photo img { transform: scale(1.05); }

/* The icon rides the seam between photo and body. */
.card--photo .card__icon {
	position: relative;
	z-index: 2;
	margin-top: -27px;
	margin-bottom: 16px;
	background: var(--card);
	border-color: var(--line);
	box-shadow: var(--shadow-sm);
}

.card--photo:hover .card__icon { background: var(--grad-brand); border-color: transparent; color: #fff; }

/* The badge sits over the photo rather than the body copy. */
.card--photo .card__badge { position: absolute; top: 14px; left: 14px; z-index: 3; }

/* The top hairline would be hidden behind the image. */
.card--photo::before { display: none; }

/* Restore the horizontal padding the body copy needs. */
.card--photo .card__title,
.card--photo .card__text,
.card--photo .card__more { padding-inline: 0; }

@media (max-width: 860px) {
	.card__photo { margin-inline: -24px; }
	.card--photo .card__icon { margin-top: -25px; }
}

@media (max-width: 640px) {
	.card__photo { margin-inline: -20px; }
	.card--photo .card__icon { margin-top: -23px; }
	.card--photo:hover .card__photo img { transform: none; }
}

@media (max-width: 380px) {
	.card__photo { margin-inline: -17px; }
}

@media (prefers-reduced-motion: reduce) {
	.card__photo img { transition: none; }
	.card--photo:hover .card__photo img { transform: none; }
}

/* --------------------------------------------------------------------------
   16e. Hero photography

   The hero can now carry a featured image. main.css renders it at 18% opacity
   with no scrim, which is enough to muddy the headline without reading as a
   photograph. It gets a proper treatment instead: stronger image, navy
   gradient over it, and the grid pattern suppressed so the two do not fight.
   -------------------------------------------------------------------------- */
.page-hero--image .page-hero__media { opacity: .42; }

.page-hero--image::before { opacity: .35; }

.page-hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	top: auto;
	right: auto;
	width: 100%;
	height: 100%;
	border-radius: 0;
	filter: none;
	background: linear-gradient(90deg, rgba(11, 31, 58, .94) 0%, rgba(11, 31, 58, .78) 42%, rgba(11, 31, 58, .42) 100%);
}

@media (max-width: 860px) {
	.page-hero--image .page-hero__media { opacity: .30; }
	.page-hero--image::after { background: linear-gradient(180deg, rgba(11, 31, 58, .82) 0%, rgba(11, 31, 58, .92) 100%); }
}

/* --------------------------------------------------------------------------
   16f. Technology platforms — the wall

   Replaces the scrolling ticker for a small, fixed set of marks. A ticker
   implies the list is too long to show, which is the wrong signal when there
   are nine and they are the point. The wall reads as a considered statement:
   a bordered lattice, every logo visible at once, nothing moving.

   The lattice is drawn with a single outer border plus one border per cell,
   with negative margins collapsing them into hairlines — so the grid stays
   even however the cells wrap.
   -------------------------------------------------------------------------- */
.trusted--wall {
	padding-block: var(--section-py-tight);
	background: var(--bg-alt);
	border-block: 1px solid var(--line);
	overflow: visible;
}

.trusted__head {
	max-width: 46ch;
	margin: 0 auto clamp(26px, 3.2vw, 40px);
	text-align: center;
}
.trusted:not(.trusted--wall) { padding-block: var(--section-py-tight); }

/* Scoped to .trusted, not .trusted--wall: main.css styles this as a small
   uppercase caption, and it must read as a heading in either branch. */
.trusted .trusted__title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.18;
	color: var(--ink);
	text-align: center;
	text-transform: none;
	margin-bottom: 0;
}

.trusted__sub {
	font-size: var(--text-base);
	line-height: 1.65;
	color: var(--body);
	margin: 0;
}

.trusted__wall {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	/* Top and left come from the container, right and bottom from each cell.
	   That closes the lattice on all four sides however the rows wrap, with no
	   nth-child arithmetic that breaks when the column count changes. */
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
	overflow: hidden;
}

.trusted__cell {
	display: grid;
	place-items: center;
	min-height: 132px;
	padding: 26px 22px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--card);
	transition: background var(--base) var(--ease-out);
	position: relative;
}

.trusted__cell:hover { background: var(--bg-alt); }

.trusted__cell img {
	max-height: 42px;
	max-width: 152px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .58;
	transition: filter var(--base) var(--ease-out), opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}

.trusted__cell:hover img { filter: none; opacity: 1; transform: scale(1.05); }

/* A partner who has not supplied a mark is set as type. In a bordered wall
   with a consistent cell height that reads as deliberate — unlike the old
   ticker, where words and images sat on different baselines and the mix looked
   like a fault. */
.trusted__cell .trusted__word {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-lg);
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-align: center;
	color: var(--muted);
	opacity: .78;
	transition: color var(--base) var(--ease-out), opacity var(--base) var(--ease-out);
}

.trusted__cell:hover .trusted__word { color: var(--ink); opacity: 1; }

@media (max-width: 860px) {
	.trusted__cell .trusted__word { font-size: var(--text-base); }
	.trusted__cell { min-height: 110px; padding: 20px 16px; }
	.trusted__cell img { max-height: 34px; max-width: 122px; }
	/* Scoped to .trusted, not .trusted--wall: main.css styles this as a small
   uppercase caption, and it must read as a heading in either branch. */
.trusted .trusted__title { font-size: var(--text-2xl); }
	.trusted__sub { font-size: var(--text-sm); }
}

@media (max-width: 560px) {
	.trusted__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trusted__cell { min-height: 92px; padding: 16px 12px; }
	.trusted__cell img { max-height: 28px; max-width: 100px; }
	.trusted__cell .trusted__word { font-size: var(--text-sm); }
}

@media (hover: none) {
	.trusted__cell img { filter: grayscale(1); opacity: .65; }
	.trusted__cell:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   16g. Technology stack — category boards

   Each category now shows its illustrated board rather than a chip list that
   repeats what the board already says. The boards are dark artwork, so they
   sit on the dark section with a hairline rather than a card, and the whole
   image is shown — these carry embedded type, so cropping would cut words.
   -------------------------------------------------------------------------- */
.tech__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

.tech__group--board {
	padding: 0;
	border: 0;
	background: none;
}

/* main.css lifts .tech__group on hover. The board lifts its own figure, so
   the group itself must stay put or the two movements compound. */
.tech__group--board:hover { transform: none; border-color: transparent; }

.tech__group--board .tech__cat {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
	text-transform: none;
}

.tech__group--board .tech__cat::before {
	content: "";
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--grad-brand);
	flex: none;
}

.tech__board {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .03);
	line-height: 0;
	transition: border-color var(--base) var(--ease-out), transform var(--base) var(--ease-out), box-shadow var(--base) var(--ease-out);
}

.tech__board img {
	width: 100%;
	height: auto;
	display: block;
	/* The artwork is already dark; a touch of contrast keeps the small print
	   legible once it is scaled down into a grid cell. */
	filter: saturate(1.04) contrast(1.03);
}

.tech__group--board:hover .tech__board {
	border-color: rgba(127, 192, 255, .48);
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}

@media (max-width: 1024px) {
	.tech__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
}

@media (max-width: 640px) {
	.tech__grid { grid-template-columns: 1fr; gap: 22px; }
	.tech__group--board .tech__cat { font-size: var(--text-base); margin-bottom: 10px; }
	.tech__board { border-radius: var(--radius-md); }
	.tech__group--board:hover .tech__board { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tech__board { transition: none; }
	.tech__group--board:hover .tech__board { transform: none; }
}

/* --------------------------------------------------------------------------
   16h. Why Choose Us — photo cards

   These six sit in one row of the homepage, so they need a shorter band than
   a service card: the reason and its explanation are the content, and the
   photograph is support. A 21:9 strip gives the picture presence without
   pushing the copy below the fold.
   -------------------------------------------------------------------------- */
.card--why.card--photo .card__photo { aspect-ratio: 21 / 9; }

.card--why.card--photo .card__icon {
	margin-top: -26px;
	background: var(--card);
	box-shadow: var(--shadow-sm);
}

.card--why.card--photo:hover .card__icon {
	background: var(--grad-brand);
	border-color: transparent;
	color: #fff;
}

/* Several of these photographs are bright — a yellow backdrop, a white desk —
   so the scrim is warmed and strengthened to hold the icon plate. */
.card--why.card--photo .card__photo::after {
	height: 58%;
	background: linear-gradient(to top, rgba(11, 31, 58, .48), transparent);
}

@media (max-width: 860px) {
	.card--why.card--photo .card__photo { aspect-ratio: 2 / 1; }
	.card--why.card--photo .card__icon { margin-top: -24px; }
}

@media (max-width: 640px) {
	.card--why.card--photo .card__photo { aspect-ratio: 16 / 9; }
	.card--why.card--photo .card__icon { margin-top: -22px; }
}

/* --------------------------------------------------------------------------
   16i. The Pasaydan panel — horizon

   The sunrise band from the supplied poster sits at the foot of the panel as a
   horizon, with the verse set live above it. The panel keeps its warm paper
   tint, so the photograph reads as the ground the words stand on rather than
   as a picture that happens to be nearby.
   -------------------------------------------------------------------------- */
.verse--horizon .verse__inner {
	padding-bottom: 0;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(var(--color-primary-rgb), .05), transparent 60%),
		var(--card);
}

.verse__horizon {
	display: block;
	margin: clamp(28px, 3.4vw, 44px) calc(-1 * clamp(24px, 4vw, 60px)) 0;
	position: relative;
	line-height: 0;
}

.verse__horizon img {
	width: 100%;
	height: auto;
	display: block;
}

/* The band's own sky is bright at the top edge, so it is faded into the panel
   rather than butting against the text with a hard seam. */
.verse__horizon::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 46%;
	background: linear-gradient(to bottom, var(--card), transparent);
	pointer-events: none;
}

/* The gradient hairline at the top of the panel is redundant once the panel
   carries a photograph. */
.verse--horizon .verse__inner::after { display: none; }

@media (max-width: 640px) {
	/* The strip is 5.5:1. Below about 520px that becomes a sliver, so it is
	   cropped to a taller slice through the middle of the sky instead. */
	.verse__horizon {
		height: 96px;
		overflow: hidden;
		margin-inline: calc(-1 * clamp(20px, 5vw, 28px));
	}

	.verse__horizon img {
		height: 100%;
		object-fit: cover;
		object-position: 62% 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.verse__horizon { transition: none; }
}

/* --------------------------------------------------------------------------
   16k. Hero badge

   The hero badge predates the section-label system and was never brought into
   it: its dot still uses the secondary teal, which is the only teal accent
   left on the page and reads as a stray from an earlier palette. It now
   matches the electric-blue eyebrow used in every other section.
   -------------------------------------------------------------------------- */
.hero__badge {
	border-color: var(--glass-dark-line);
	background: var(--glass-dark);
	font-weight: 600;
	letter-spacing: .12em;
}

.hero__badge-dot { background: #7FC0FF; box-shadow: 0 0 0 4px rgba(127, 192, 255, .18); }

/* --------------------------------------------------------------------------
   16l. Floating call button

   Sits above WhatsApp in the right-hand stack. Green is already taken by
   WhatsApp, so the call button uses the brand blue — two green circles would
   read as one control split in half.

   The stack now holds three buttons, so each is a little smaller and the label
   appears on hover at desktop width, where there is room for it.
   -------------------------------------------------------------------------- */
.float-btn--call { background: var(--grad-brand); color: #fff; }
.float-btn--call:hover { background: var(--color-primary-dark); }

.floats { gap: 10px; }

@media (min-width: 1025px) {
	.float-btn { position: relative; }

	.float-btn__label {
		display: block;
		position: absolute;
		right: calc(100% + 10px);
		top: 50%;
		transform: translateY(-50%) translateX(6px);
		padding: 7px 12px;
		border-radius: var(--radius-sm);
		background: var(--ink);
		color: #fff;
		font-size: var(--text-xs);
		font-weight: 600;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out);
	}

	.float-btn:hover .float-btn__label,
	.float-btn:focus-visible .float-btn__label { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@media (max-width: 640px) {
	/* Three buttons plus the back-to-top is a lot of screen on a phone, so
	   they shrink rather than stack taller. */
	.float-btn { width: 44px; height: 44px; }
	.float-btn--top { width: 38px; height: 38px; }
	.floats { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.float-btn__label { transition: none; }
}

/* --------------------------------------------------------------------------
   16m. Header lockup

   The full letterhead does not work as a header logo and no amount of sizing
   fixes that: at 1.79:1 it is a document, and a document in a navigation bar
   either dwarfs the menu or becomes unreadable. Three attempts confirmed it —
   a band above the menu (hidden behind the overlay header), a recoloured
   version on the hero (the green and red bars washed out), and the whole sheet
   on a white plate (a 380x212 rectangle dominating the page).

   The header now carries the letterhead's own masthead: the ॥ कौस्त्य ॥
   KAUSTYA line plus the GROUP OF COMPANIES INTERNATIONAL bar. That is 5.36:1 —
   a real logo proportion — and it still names both the company and the group.
   The five companies, the chakra, the website, the email and the Marathi
   tagline stay on the full letterhead in the footer, which is where a
   letterhead belongs.
   -------------------------------------------------------------------------- */

.site-header__inner {
	min-height: 104px;
	transition: min-height 320ms var(--ease-out);
}

.site-header.is-scrolled .site-header__inner { min-height: 78px; }

/* A white plate, because the ©, ® and the group bar's edge need paper to read
   against a photograph. Small enough now to look like a logo, not a document. */
.brand {
	background: #fff;
	border-radius: var(--radius-sm);
	padding: 10px 13px;
	box-shadow: 0 2px 10px rgba(11, 31, 58, .12);
	transition: padding 320ms var(--ease-out), box-shadow var(--base) var(--ease-out);
}

.site-header.is-scrolled .brand {
	padding: 7px 10px;
	box-shadow: none;
	border: 1px solid var(--line-soft);
}

.brand:hover { box-shadow: 0 4px 16px rgba(11, 31, 58, .18); }
.brand:hover .brand__logo { transform: none; }

.brand__logo {
	height: auto;
	width: auto;
	max-width: 300px;
	max-height: 60px;
	transition: max-width 320ms var(--ease-out);
}

.site-header.is-scrolled .brand__logo { max-width: 220px; }

/* Both img variants point at the same file, so only one may show. */
.brand__logo--light { display: none; }
body:not(.has-solid-header) .site-header .brand__logo--light { display: none; }
body:not(.has-solid-header) .site-header .brand__logo--dark { display: block; }

:root { --header-h: 104px; }

/* --- Footer keeps the complete letterhead --- */
.footer-brand__logo--full {
	max-width: 420px;
	max-height: 240px;
	width: auto;
	height: auto;
	background: #fff;
	border-radius: var(--radius-md);
	padding: 12px 16px;
}

/* 1201–1320px is the tightest range that still shows the full menu. */
@media (max-width: 1320px) {
	.brand__logo { max-width: 240px; }
	.brand { padding: 9px 11px; }
}

@media (max-width: 1024px) {
	.footer-brand__logo--full { max-width: 380px; max-height: 216px; }
}

@media (max-width: 640px) {
	.site-header__inner { min-height: 84px; }
	.site-header.is-scrolled .site-header__inner { min-height: 70px; }
	.brand { padding: 8px 10px; }
	.brand__logo { max-width: 210px; max-height: 44px; }
	.site-header.is-scrolled .brand__logo { max-width: 176px; }
	.footer-brand__logo--full { max-width: 300px; max-height: 172px; padding: 10px 12px; }
	:root { --header-h: 84px; }
}

@media (max-width: 380px) {
	.brand__logo { max-width: 172px; max-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header__inner,
	.brand,
	.brand__logo { transition: none; }
}

/* --------------------------------------------------------------------------
   16d. The header row actually fits

   Measuring the bar on the live site showed "Contact Us" sitting on top of
   "Company" at every desktop width — 5px of overlap at 1920px, 64px at
   1210px. The cause is a combination of two earlier changes: the brand plate
   grew to a 300px logo in 16c, while `.nav { flex: 1 1 auto; min-width: 0 }`
   lets the nav box shrink below its own content. `.nav__links` is `nowrap`,
   so the labels overflow the shrunken box and the actions on the right are
   painted straight over them.

   Two fixes, in order of preference:

   1. The group bar carries a permanent "Contact Us" at every desktop width,
      so the duplicate ghost link in the header is redundant. Removing it
      returns roughly 90px — more than the worst-case overlap — and leaves
      "Get a Quote", the element that actually converts, untouched.

   2. When the group bar is switched off in the Customizer there is no second
      Contact Us, so the ghost link stays and the brand plate steps down
      instead. Same result, no lost link.
   -------------------------------------------------------------------------- */

@media (min-width: 1201px) {
	.has-group-nav .site-header__actions .link-ghost { display: none; }

	body:not(.has-group-nav) .brand__logo { max-width: 232px; }
	body:not(.has-group-nav) .site-header.is-scrolled .brand__logo { max-width: 190px; }
}

@media (min-width: 1201px) and (max-width: 1500px) {
	.brand__logo { max-width: 250px; }
	.site-header.is-scrolled .brand__logo { max-width: 200px; }

	body:not(.has-group-nav) .brand__logo { max-width: 200px; }
	body:not(.has-group-nav) .site-header.is-scrolled .brand__logo { max-width: 175px; }
}

@media (min-width: 1201px) and (max-width: 1340px) {
	.brand__logo { max-width: 215px; }
	.site-header.is-scrolled .brand__logo { max-width: 185px; }

	body:not(.has-group-nav) .brand__logo { max-width: 172px; }
	body:not(.has-group-nav) .site-header.is-scrolled .brand__logo { max-width: 158px; }

	.brand { padding: 8px 10px; }
}

/* Belt and braces: never let the labels bleed out of the nav box. */
@media (min-width: 1201px) {
	.nav { min-width: 0; }
	.nav__links { max-width: 100%; }
}

/* The last 60px before the burger takes over at 1200px. */
@media (min-width: 1201px) and (max-width: 1260px) {
	.brand__logo { max-width: 176px; }
	.site-header.is-scrolled .brand__logo { max-width: 160px; }
	.brand { padding: 7px 9px; }
	.nav__links > li > a { padding-inline: 6px; font-size: .84rem; }
	.nav__links > li > a::after { left: 6px; right: 6px; }
	.site-header__actions .btn--sm { padding-inline: 14px; }
	.site-header__inner { gap: 12px; }
}

/* --------------------------------------------------------------------------
   16e. Long dropdowns go multi-column

   The advisory taxonomy added in v3.26.0 gives Services 24 children and
   Industries 21. A single column would be roughly 900px tall — off the bottom
   of most screens. :has() counts the children and splits the list instead.
   Browsers without :has() get the single column, which is tall but works.
   -------------------------------------------------------------------------- */

@media (min-width: 1201px) {
	.nav__links .sub-menu:has(> li:nth-child(9)) {
		min-width: 520px;
		columns: 2;
		column-gap: 4px;
	}

	.nav__links .sub-menu:has(> li:nth-child(17)) {
		min-width: 760px;
		columns: 3;
	}

	.nav__links .sub-menu li { break-inside: avoid; }

	/* Panels belonging to the right-hand half of the bar open right-aligned so
	   a three-column list cannot run off the screen. */
	.nav__links > li:nth-last-child(-n+4) .sub-menu {
		left: auto;
		right: 0;
		transform-origin: top right;
	}

	.nav__links .sub-menu { max-width: min(820px, calc(100vw - 80px)); }
}

/* --------------------------------------------------------------------------
   16f. The brand plate makes room for the longer bar

   Eight top-level items need roughly 200px more than the six they replaced.
   The plate gives it back; the logo stays legible because it is a wordmark,
   not fine print.
   -------------------------------------------------------------------------- */

@media (min-width: 1201px) {
	.brand__logo { max-width: 224px; }
	.site-header.is-scrolled .brand__logo { max-width: 186px; }
}

@media (min-width: 1201px) and (max-width: 1500px) {
	.brand__logo { max-width: 196px; }
	.site-header.is-scrolled .brand__logo { max-width: 168px; }
}

@media (min-width: 1201px) and (max-width: 1340px) {
	.brand__logo { max-width: 170px; }
	.site-header.is-scrolled .brand__logo { max-width: 152px; }
}

@media (min-width: 1201px) and (max-width: 1260px) {
	.brand__logo { max-width: 152px; }
	.site-header.is-scrolled .brand__logo { max-width: 140px; }
}

/* --------------------------------------------------------------------------
   16g. A ninth top-level item

   Events took the primary bar from eight labels to nine and it overflowed at
   six of the ten widths measured — worst case 64px at 1366px. Section 35 noted
   eight was the practical ceiling; this is what it costs to pass it.

   The brand plate steps down again and the labels tighten. The plate is a
   wordmark rather than fine print, so it survives the reduction; below 1200px
   the burger takes over and full size is restored.
   -------------------------------------------------------------------------- */

@media (min-width: 1201px) {
	.brand__logo { max-width: 176px; }
	.site-header.is-scrolled .brand__logo { max-width: 154px; }
	.brand { padding: 8px 10px; }
	.nav__links > li > a { padding-inline: 9px; }
	.nav__links > li > a::after { left: 9px; right: 9px; }
}

@media (min-width: 1201px) and (max-width: 1500px) {
	.brand__logo { max-width: 158px; }
	.site-header.is-scrolled .brand__logo { max-width: 144px; }
	.nav__links > li > a { padding-inline: 7px; font-size: .845rem; }
	.nav__links > li > a::after { left: 7px; right: 7px; }
}

@media (min-width: 1201px) and (max-width: 1380px) {
	.brand__logo { max-width: 140px; }
	.site-header.is-scrolled .brand__logo { max-width: 130px; }
	.nav__links > li > a { padding-inline: 6px; font-size: .81rem; letter-spacing: -.008em; }
	.nav__links > li > a::after { left: 6px; right: 6px; }
	.site-header__inner { gap: 12px; }
}

/* --------------------------------------------------------------------------
   16h. The logo made legible again

   Sections 16d, 16f and 16g each shrank the brand plate to make room for
   another menu item, taking it from 300px to 140px. At that width the
   wordmark is about 12px tall — present, but not readable.

   The header now uses brand-header.png, which is the wordmark and the GROUP OF
   COMPANIES band only, at roughly 5:1. That shape carries far more legible
   wordmark per pixel of width than the full 1.79:1 plate, so the logo can grow
   substantially without taking the room back from the nine menu labels.

   At 320px wide the wordmark stands about 35px tall, against 12px before.
   -------------------------------------------------------------------------- */

/*
 * The content container stops growing at 1480px, so a wide viewport gives the
 * bar no extra room — the sizes below are driven by the container, not the
 * screen. Each was measured against the nine labels rather than guessed.
 */
@media (min-width: 1201px) {
	.brand__logo { max-width: 276px; }
	.site-header.is-scrolled .brand__logo { max-width: 238px; }
	.brand { padding: 9px 13px; }
}

@media (min-width: 1201px) and (max-width: 1400px) {
	.brand__logo { max-width: 256px; }
	.site-header.is-scrolled .brand__logo { max-width: 220px; }
}

@media (min-width: 1201px) and (max-width: 1300px) {
	.brand__logo { max-width: 186px; }
	.site-header.is-scrolled .brand__logo { max-width: 172px; }
}

/* Phones and tablets have no nav competing for the width, so the lockup can
   run larger there than it does on a crowded desktop bar. */
@media (max-width: 1200px) {
	.brand__logo { max-width: min(300px, 58vw); }
}

@media (max-width: 480px) {
	.brand__logo { max-width: min(230px, 62vw); }
}

/* ==========================================================================
   17. STACKED HEADER — the full logo, shown whole

   The supplied logo is a 1.79:1 plate carrying the wordmark, the GROUP OF
   COMPANIES band, five company lines, the Ashoka Chakra, a website, an email
   and the Marathi tagline. Shown whole it is nearly as tall as it is wide, so
   it cannot share a row with nine menu labels and a call to action — that is
   what forced it down to a 140px strip in earlier versions.

   The header is now two rows: the plate and the actions on the first, the
   navigation across the full width of the second. The logo gets the height it
   needs, the nav gets the width it needs, and neither is squeezed.
   ========================================================================== */

@media (min-width: 1201px) {

	.site-header--stacked .site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 28px;
		min-height: 0;
		padding-block: 14px;
	}

	/* The plate, whole and unclipped. */
	.site-header--stacked .brand {
		flex: none;
		padding: 10px 14px;
		background: #fff;
		border-radius: var(--radius-md, 14px);
		box-shadow: 0 2px 14px rgba(15, 23, 42, .1);
	}

	/*
	 * Section 16 capped the plate at max-height 60px and max-width 300px so it
	 * could sit beside the nav. On its own row it needs neither cap, and both
	 * have to be cleared explicitly or the height below is ignored.
	 */
	.site-header--stacked .brand__logo {
		width: auto;
		height: 104px;      /* 1.79:1 → about 186px wide */
		max-width: none;
		max-height: none;
	}

	.site-header--stacked .site-header__aside {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: none;
	}

	/* Row two: navigation across the whole width. */
	.site-header--stacked .site-header__navrow {
		border-top: 1px solid var(--line-soft, rgba(15, 23, 42, .07));
		background: inherit;
	}

	.site-header--stacked .site-header__navinner {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
	}

	.site-header--stacked .nav { flex: 0 1 auto; min-width: 0; }

	.site-header--stacked .nav__links {
		justify-content: center;
		flex-wrap: nowrap;
	}

	/* With a row to itself the nav can breathe again. */
	.site-header--stacked .nav__links > li > a {
		padding-inline: 13px;
		font-size: .9rem;
	}

	.site-header--stacked .nav__links > li > a::after { left: 13px; right: 13px; }

	.site-header--stacked .burger { display: none; }

	/* Scrolled: the plate steps down so the sticky header stays shallow. */
	.site-header--stacked.is-scrolled .brand__logo { height: 62px; max-height: none; }
	.site-header--stacked.is-scrolled .site-header__inner { padding-block: 8px; }
	.site-header--stacked.is-scrolled .site-header__navinner { min-height: 46px; }

	.site-header--stacked .brand__logo,
	.site-header--stacked .site-header__inner,
	.site-header--stacked .site-header__navinner {
		transition: height .22s ease, padding .22s ease, min-height .22s ease;
	}
}

/* A little more height where there is room for it. */
@media (min-width: 1500px) {
	.site-header--stacked .brand__logo { height: 118px; max-height: none; }
	.site-header--stacked .nav__links > li > a { padding-inline: 15px; font-size: .92rem; }
}

/* Over the dark hero the plate keeps its white card so the artwork stays legible. */
body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .site-header__navrow {
	border-top-color: rgba(255, 255, 255, .16);
}

/* --------------------------------------------------------------------------
   Tablet and phone: one row, burger, plate scaled to the space available.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.site-header--stacked .site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
	}

	.site-header--stacked .brand {
		padding: 7px 9px;
		background: #fff;
		border-radius: var(--radius-sm, 10px);
	}

	.site-header--stacked .brand__logo {
		width: auto;
		height: clamp(48px, 11vw, 78px);
		max-width: none;
		max-height: none;
	}

	.site-header--stacked .site-header__navrow { display: none; }

	.site-header--stacked .site-header__aside { display: flex; align-items: center; gap: 8px; }
	.site-header--stacked .site-header__aside .btn { display: none; }
	.site-header--stacked .qe-trigger__text { display: none; }
	.site-header--stacked .qe-trigger { padding: 9px; }
}

@media (max-width: 520px) {
	.site-header--stacked .brand__logo { height: clamp(42px, 13vw, 58px); max-height: none; }
}

/* --------------------------------------------------------------------------
   17b. The stacked header always sits in the flow

   The front page used to float a thin transparent header over the hero. A
   two-row header carrying a 118px-tall logo plate cannot do that — the group
   bar was pinned to the old `--header-h`, so the two rows landed on top of
   each other over the hero.

   The stacked header is opaque and in the flow on every page, front page
   included. The hero starts beneath it. This also retires the whole class of
   overlay offsets that needed maintaining in sections 16d and 16h.
   -------------------------------------------------------------------------- */

.site-header--stacked {
	position: sticky;
	top: 0;
	background: var(--card, #fff);
	border-bottom: 1px solid var(--line, rgba(15, 23, 42, .1));
	box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}

[data-theme="dark"] .site-header--stacked { background: #0B1424; }

/* Undo the transparent-hero treatment for this header only. */
body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) {
	background: var(--card, #fff);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: var(--line, rgba(15, 23, 42, .1));
}

body:not(.has-solid-header):not(.error404) .site-header--stacked .nav__links > li > a,
body:not(.has-solid-header):not(.error404) .site-header--stacked .link-ghost { color: var(--ink); }

body:not(.has-solid-header):not(.error404) .site-header--stacked .nav__links > li > a:hover,
body:not(.has-solid-header):not(.error404) .site-header--stacked .nav__links > li.current-menu-item > a,
body:not(.has-solid-header):not(.error404) .site-header--stacked .nav__links > li.current-menu-ancestor > a { color: var(--color-primary); }

body:not(.has-solid-header):not(.error404) .site-header--stacked .burger span { background: var(--ink); }

body:not(.has-solid-header):not(.error404) .site-header--stacked .burger,
body:not(.has-solid-header):not(.error404) .site-header--stacked .theme-toggle {
	border-color: var(--line, rgba(15, 23, 42, .12));
	background: transparent;
	color: var(--ink);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

[data-theme="dark"] body:not(.has-solid-header) .site-header--stacked .nav__links > li > a { color: rgba(255, 255, 255, .88); }

/* The group bar returns to normal flow directly beneath the header. */
.site-header--stacked + .gnav,
body:not(.has-solid-header) .site-header--stacked + .gnav {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	z-index: 40;
	background: var(--color-primary);
	background-image: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark, var(--color-primary)) 100%);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-top: 0;
}

/* The hero no longer sits under the header, so it does not need the offset. */
@media (min-width: 1201px) {
	body.has-group-nav:not(.has-solid-header) .hero__inner { padding-top: clamp(48px, 6vw, 84px); }
}

body:not(.has-solid-header) .rb-hero { padding-top: clamp(56px, 7vw, 96px); }

/* --------------------------------------------------------------------------
   17c. The logo crop that fits the screen it is on

   The full plate is 1.79:1 — fine on desktop where it has a row to itself, but
   on a phone it can only be about 50px tall, at which size the five company
   lines and the Marathi tagline are illegible. Below 1200px the header swaps
   to brand-compact.png: the wordmark and the GROUP OF COMPANIES band only, at
   roughly 4.5:1, so the same width carries far more readable logo.
   -------------------------------------------------------------------------- */

.brand__pic { display: contents; }

@media (max-width: 1200px) {
	.site-header--stacked .brand__logo {
		height: auto;
		width: auto;
		max-height: clamp(34px, 8.5vw, 54px);
		max-width: min(300px, 62vw);
	}
}

@media (max-width: 520px) {
	.site-header--stacked .brand__logo { max-height: clamp(30px, 9vw, 42px); max-width: 66vw; }
	.site-header--stacked .brand { padding: 6px 8px; }
}

/* --------------------------------------------------------------------------
   17d. The brand row, fitted

   The plate sat in a deep white card with a shadow, which read as a box
   containing a logo rather than as the logo itself, and the row it sat in was
   taller than it needed to be — leaving a wide empty band between the plate
   and the search box.

   The card is now a thin surround, the plate is sized to the row rather than
   the row to the plate, and the row's own padding comes down. The header loses
   roughly 40px of height without the logo losing any.
   -------------------------------------------------------------------------- */

@media (min-width: 1201px) {
	.site-header--stacked .site-header__inner { padding-block: 10px; gap: 24px; }

	.site-header--stacked .brand {
		padding: 6px 10px;
		border-radius: var(--radius-sm, 10px);
		box-shadow: 0 1px 6px rgba(15, 23, 42, .08);
	}

	.site-header--stacked .brand__logo { height: 88px; }
	.site-header--stacked.is-scrolled .brand__logo { height: 56px; }
	.site-header--stacked.is-scrolled .site-header__inner { padding-block: 6px; }
}

@media (min-width: 1500px) {
	.site-header--stacked .brand__logo { height: 96px; }
}

/* On a phone the compact crop should fill the width it is given, not float in
   a card that is wider than the artwork. */
@media (max-width: 1200px) {
	.site-header--stacked .brand { padding: 5px 8px; }
}

/* --------------------------------------------------------------------------
   17e. Less space above the menu

   The brand row still carried more height than the plate needed, and the plate
   was the only thing setting that height — the search and CTA beside it are
   both shorter. Trimming the row's padding and the plate together takes the
   header down again without the logo losing meaningful size.
   -------------------------------------------------------------------------- */

@media (min-width: 1201px) {
	.site-header--stacked .site-header__inner { padding-block: 6px; }
	.site-header--stacked .brand { padding: 4px 8px; }
	.site-header--stacked .brand__logo { height: 76px; }
	.site-header--stacked.is-scrolled .brand__logo { height: 50px; }
	.site-header--stacked.is-scrolled .site-header__inner { padding-block: 4px; }
}

@media (min-width: 1500px) {
	.site-header--stacked .brand__logo { height: 84px; }
}

@media (max-width: 1200px) {
	.site-header--stacked .site-header__inner { padding-block: 8px; }
}

/* --------------------------------------------------------------------------
   17f. The brand row, filled

   The row held the plate on the left and the search on the right with roughly
   800px of white between them. Vertical padding was already down to 6px, so
   the gap being complained about was horizontal, not vertical.

   The contact details now occupy it — the same phone and email the footer and
   the floating call button use. Below 1200px they fold away and the burger
   takes over, so the row stays compact on a phone.
   -------------------------------------------------------------------------- */

.site-header__contact { display: none; }

@media (min-width: 1201px) {
	.site-header--stacked .site-header__inner { gap: 20px; }

	.site-header__contact {
		display: flex;
		align-items: center;
		gap: 26px;
		flex: 1 1 auto;
		justify-content: center;
		min-width: 0;
	}

	.hcontact {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		text-decoration: none;
		color: var(--ink, #0b1f3a);
	}

	.hcontact svg { flex: none; color: var(--color-primary); }

	.hcontact__k {
		display: block;
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: .66rem;
		font-weight: 600;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--muted, #64748b);
	}

	.hcontact__v { display: block; font-size: .88rem; font-weight: 700; }
	.hcontact:hover .hcontact__v { color: var(--color-primary); }

	/* The plate no longer has to carry the row's height on its own. */
	.site-header--stacked .brand__logo { height: 68px; }
	.site-header--stacked.is-scrolled .brand__logo { height: 48px; }
}

@media (min-width: 1500px) {
	.site-header--stacked .brand__logo { height: 74px; }
	.site-header__contact { gap: 36px; }
}

/* Below 1360px the labels would crowd the search box. */
@media (min-width: 1201px) and (max-width: 1360px) {
	.hcontact__k { display: none; }
	.site-header__contact { gap: 18px; }
}

/* --------------------------------------------------------------------------
   18. Mobile audit fixes (v3.46.0)

   Found by walking 14 pages across 8 widths and measuring, rather than by
   eye. Overflow and console errors came back clean everywhere; these are the
   four things that did not.
   -------------------------------------------------------------------------- */

/* 3. The back-to-top button was 38px against 44px for its neighbours. */
@media (max-width: 900px) {
	.float-btn { width: 46px; height: 46px; }
	.floats { gap: 10px; }
}

/*
 * 4. Small screens: tighten the rhythm so sections do not run to three screens
 *    each, and keep headings from breaking mid-word on a 320px display.
 */
@media (max-width: 480px) {
	.rb-section { padding-block: clamp(36px, 9vw, 56px); }
	.rb-h2, .fq-title, .ev-title { overflow-wrap: break-word; hyphens: auto; }
	.rb-hero__title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
	.container { padding-inline: 16px; }
}

@media (max-width: 360px) {
	.container { padding-inline: 14px; }
	.rb-btn { padding-inline: 20px; font-size: .88rem; }
}

/* ==========================================================================
   GALLERY PREVIEW — HOME PAGE (v3.51.0)

   A strip of photographs above the closing call to action, linking through to
   the Gallery page. It reuses the card radius, border and shadow already in
   the system rather than introducing a new picture treatment.
   ========================================================================== */

.gp-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 18px);
	margin: 0 0 clamp(28px, 3vw, 40px);
	padding: 0;
	list-style: none;
}

.gp-cell { min-width: 0; }

.gp-link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-lg, 16px);
	border: 1px solid var(--line);
	background: var(--card);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	transition: transform .28s var(--ease-out, ease), box-shadow .28s var(--ease-out, ease);
}

.gp-link:hover,
.gp-link:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

.gp-link img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .4s var(--ease-out, ease);
}

.gp-link:hover img { transform: scale(1.05); }

/*
 * The caption sits over the foot of the picture on a scrim rather than under
 * it, so every cell in a row is the same height whatever the caption length.
 */
.gp-cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 26px 12px 10px;
	background: linear-gradient(to top, rgba(8, 20, 40, .86) 0%, rgba(8, 20, 40, 0) 100%);
	color: #fff;
	font-size: .78rem;
	line-height: 1.35;
	font-weight: 600;
	overflow-wrap: break-word;
}

.gp-more { margin: 0; text-align: center; }

@media (max-width: 1100px) {
	.gp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
	.gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gp-cap { font-size: .74rem; padding: 22px 10px 9px; }
}

/* One column would make the strip taller than the rest of the page on a
   phone, so two are kept and the aspect is squared up a little instead. */
@media (max-width: 420px) {
	.gp-grid { gap: 10px; }
	.gp-link img { aspect-ratio: 4 / 3; }
	.gp-cap { font-size: .7rem; padding: 18px 8px 8px; }
	.gp-more .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.gp-link,
	.gp-link img { transition: none; }
	.gp-link:hover { transform: none; }
	.gp-link:hover img { transform: none; }
}