/* ==========================================================================
   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.
   -------------------------------------------------------------------------- */
.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;
}

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

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

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

.site-header:not(.is-scrolled) .burger,
.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);
}

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

.site-header:not(.is-scrolled) .burger:hover,
.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); }

.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) {
	/* "Contact Us" is the first thing to go: Contact already sits in the
	   Company menu, in the footer, and the primary button goes to the same
	   place. Losing it costs nothing and buys back about 100px. */
	.site-header__actions .link-ghost { display: none; }
	.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; }
}

/* --------------------------------------------------------------------------
   16j. Brand lockup

   The new mark is roughly 8:1 where the previous one was 3:1. Sized by height
   alone it would run over 500px wide in the header and undo the navigation fit
   work in 3.3.0, so it is capped by width and allowed to find its own height.
   240px is the smallest width at which the Devanagari still reads cleanly.
   -------------------------------------------------------------------------- */
.brand__logo {
	height: auto;
	width: auto;
	max-width: 215px;
	max-height: 32px;
}

.footer-brand__logo {
	height: auto;
	width: auto;
	max-width: 280px;
	max-height: 40px;
}

@media (max-width: 1320px) {
	.brand__logo { max-width: 210px; }
}

@media (max-width: 640px) {
	.brand__logo { max-width: 186px; max-height: 28px; }
	.footer-brand__logo { max-width: 220px; }
}

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