/* ==========================================================================
   Abrion Solutions — shared site theme
   Tokens extracted from the Abrion Solutions Design canvas (dark, tech-forward).
   Dark is the default. A light palette is defined further down under
   :root[data-theme="light"] — every colour below is a token so the whole site
   flips from that one block. Never hardcode a colour in a component rule.
   ========================================================================== */

:root {
	--ab-bg: #08090B;
	--ab-bg-alt: #0A0C10;
	--ab-bg-panel: #0B0D10;
	--ab-bg-card: #0C0F14;

	--ab-text: #F2F4F7;
	--ab-text-strong: #FFFFFF;
	--ab-text-body: #A8B0BC;
	--ab-text-muted: #98A0AC;
	--ab-text-mute-2: #8A919D;
	--ab-text-mute-3: #7A8290;
	--ab-text-faint: #6A727E;

	--ab-accent: #7FA6FF;
	--ab-accent-light: #9BBBFF;
	--ab-accent-link: #A9C4FF;
	--ab-accent-link-hover: #D9E4FF;
	--ab-success: #6EE7A8;
	--ab-whatsapp: #25D366;
	--ab-warn: #FFC978;
	--ab-danger: #FF9A9A;

	--ab-border: rgba(255,255,255,0.09);
	--ab-border-soft: rgba(255,255,255,0.06);
	--ab-border-strong: rgba(255,255,255,0.16);

	/* Raised surfaces, layered over --ab-bg */
	--ab-surface-1: rgba(255,255,255,0.025);
	--ab-surface-2: rgba(255,255,255,0.04);
	--ab-surface-3: rgba(255,255,255,0.07);
	--ab-hairline: rgba(255,255,255,0.08);
	--ab-grid-line: rgba(255,255,255,0.032);

	/* Inverted pair — used by primary buttons, which sit opposite the page */
	--ab-invert-bg: #F2F4F7;
	--ab-invert-bg-hover: #FFFFFF;
	--ab-invert-text: #08090B;

	--ab-header-bg: rgba(8,9,11,0.80);
	--ab-input-bg: rgba(0,0,0,0.30);
	--ab-shadow-strong: rgba(0,0,0,0.92);
	--ab-scrim: rgba(8,9,11,0.93);
	--ab-mock-border: rgba(255,255,255,0.16);

	/* Solid card used by the animated hero modules — needs a real fill, not a
	   translucent surface, because cards overlap each other mid-animation. */
	--ab-card-solid: linear-gradient(160deg, rgba(22,29,44,0.96), rgba(11,14,20,0.96));
	--ab-card-border: rgba(127,166,255,0.28);
	--ab-bubble-bg: radial-gradient(120% 160% at 30% 20%, #2B4B92, #0C1018);
	--ab-glow-strong: rgba(62,108,222,0.42);
	--ab-glow-soft: rgba(62,108,222,0.10);

	--ab-font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
	--ab-font-head: 'Instrument Sans', 'Hanken Grotesk', system-ui, sans-serif;
	--ab-font-mono: 'Martian Mono', ui-monospace, monospace;

	--ab-radius-sm: 10px;
	--ab-radius-md: 14px;
	--ab-radius-lg: 18px;
	--ab-radius-pill: 999px;

	--ab-container: 1180px;
	--ab-gutter: 20px;
}

/* --------------------------------------------------------------------------
   Light palette. Applied when <html data-theme="light">, set by the header
   toggle (abrion-site.js) and persisted in localStorage. Dark stays default,
   so a visitor with JS disabled gets the dark site rather than a half-themed
   one.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
	--ab-bg: #FFFFFF;
	--ab-bg-alt: #F6F8FB;
	--ab-bg-panel: #FFFFFF;
	--ab-bg-card: #FFFFFF;

	--ab-text: #10141B;
	--ab-text-strong: #05070A;
	--ab-text-body: #414A58;
	--ab-text-muted: #4E5766;
	--ab-text-mute-2: #5A6373;
	--ab-text-mute-3: #6B7482;
	--ab-text-faint: #7C8593;

	--ab-accent: #2C5BD6;
	--ab-accent-light: #1E47B4;
	--ab-accent-link: #2350CC;
	--ab-accent-link-hover: #16307F;
	--ab-success: #17794C;
	--ab-warn: #8A5A00;
	--ab-danger: #B3261E;

	--ab-border: rgba(5,7,10,0.14);
	--ab-border-soft: rgba(5,7,10,0.09);
	--ab-border-strong: rgba(5,7,10,0.22);

	--ab-surface-1: rgba(5,7,10,0.022);
	--ab-surface-2: rgba(5,7,10,0.045);
	--ab-surface-3: rgba(5,7,10,0.07);
	--ab-hairline: rgba(5,7,10,0.10);
	--ab-grid-line: rgba(5,7,10,0.05);

	--ab-invert-bg: #10141B;
	--ab-invert-bg-hover: #05070A;
	--ab-invert-text: #FFFFFF;

	--ab-header-bg: rgba(255,255,255,0.85);
	--ab-input-bg: #FFFFFF;
	--ab-shadow-strong: rgba(16,20,27,0.20);
	--ab-scrim: rgba(255,255,255,0.93);
	--ab-mock-border: rgba(5,7,10,0.18);

	/* White cards in light mode — the dark fill was what made the hero
	   animation unreadable, since the card text uses --ab-text-strong. */
	--ab-card-solid: #FFFFFF;
	--ab-card-border: rgba(44,91,214,0.28);
	--ab-bubble-bg: #FFFFFF;
	/* The blue wash was tuned against black; at full strength it smears across
	   a white page. */
	--ab-glow-strong: rgba(62,108,222,0.13);
	--ab-glow-soft: rgba(62,108,222,0.04);
}

/* The dashboard mockup and the weighbridge widget depict a dark application
   screen. Re-declaring the tokens on their roots keeps every descendant rule
   dark in both themes, instead of half-flipping into an unreadable mix. */
.ab-dash, .ab-wb-demo {
	--ab-text-strong: #FFFFFF;
	--ab-text: #E7EAEF;
	--ab-text-body: #C7CDD6;
	--ab-text-muted: #98A0AC;
	--ab-text-mute-2: #8A919D;
	--ab-text-mute-3: #7A8290;
	--ab-text-faint: #6A727E;
	--ab-accent: #7FA6FF;
	--ab-accent-light: #9BBBFF;
	--ab-success: #6EE7A8;
	--ab-warn: #FFC978;
	--ab-danger: #FF9A9A;
	--ab-border: rgba(255,255,255,0.09);
	--ab-border-soft: rgba(255,255,255,0.06);
	--ab-border-strong: rgba(255,255,255,0.16);
	--ab-surface-1: rgba(255,255,255,0.025);
	--ab-surface-2: rgba(255,255,255,0.04);
	--ab-hairline: rgba(255,255,255,0.08);
	--ab-bg-panel: #0B0D10;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ab-body {
	margin: 0;
	background: var(--ab-bg);
	color: var(--ab-text);
	font-family: var(--ab-font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img { max-width: 100%; height: auto; }
a { color: var(--ab-accent-link); text-decoration: none; }
a:hover { color: var(--ab-accent-link-hover); }
:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ab-accent); color: var(--ab-text-strong); }
input::placeholder, textarea::placeholder { color: var(--ab-text-faint); }

.ab-container { max-width: var(--ab-container); margin: 0 auto; padding: 0 var(--ab-gutter); }

/* Header */
.ab-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--ab-header-bg);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--ab-border-soft);
}
.ab-header-inner { display: flex; align-items: center; gap: 16px; height: 68px; }
.ab-logo { font-family: var(--ab-font-head); font-size: 19px; font-weight: 600; letter-spacing: -0.025em; color: var(--ab-text-strong); white-space: nowrap; }
.ab-logo span { color: var(--ab-accent); }
.ab-nav { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.ab-nav a { padding: 8px 10px; font-size: 14.5px; color: var(--ab-text-body); border-radius: 8px; white-space: nowrap; }
.ab-nav a:hover { color: var(--ab-text); background: var(--ab-border-soft); }
.ab-header-cta { margin-left: auto; }
.ab-burger { display: none; }
.ab-mobile-nav { display: none; }

.ab-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 46px; padding: 0 22px; border-radius: var(--ab-radius-sm);
	font-family: var(--ab-font-head); font-size: 15px; font-weight: 600;
	border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.ab-btn-primary { background: var(--ab-invert-bg); color: var(--ab-invert-text); }
.ab-btn-primary:hover { background: var(--ab-invert-bg-hover); color: var(--ab-invert-text); }
.ab-btn-ghost { border-color: var(--ab-border-strong); background: var(--ab-surface-2); color: var(--ab-text); }
.ab-btn-ghost:hover { background: var(--ab-border); color: var(--ab-text-strong); }
.ab-btn-sm { height: 40px; padding: 0 18px; font-size: 14.5px; }

/* Mobile + tablet nav — the full 6-link nav plus logo and CTA button
   doesn't fit at iPad widths (768-1024px), so this covers phones and
   tablets alike, not just phones. */
@media (max-width: 1024px) {
	.ab-nav { display: none; }
	.ab-header-cta { display: none; }
	.ab-burger {
		display: inline-flex; margin-left: auto; width: 42px; height: 42px;
		align-items: center; justify-content: center; border-radius: 10px;
		border: 1px solid var(--ab-border); background: var(--ab-surface-2);
		color: var(--ab-text); cursor: pointer;
	}
	.ab-mobile-nav { display: none; border-top: 1px solid var(--ab-border-soft); padding: 8px 20px 18px; background: var(--ab-bg-panel); }
	.ab-mobile-nav.is-open { display: grid; }
	.ab-mobile-nav a { padding: 13px 4px; font-size: 16px; color: var(--ab-text-body); border-bottom: 1px solid var(--ab-border-soft); }
}

/* Sections */
.ab-section { padding: clamp(56px, 7vw, 96px) var(--ab-gutter); border-top: 1px solid var(--ab-border-soft); }
.ab-section:first-of-type { border-top: none; }
.ab-section-alt { background: linear-gradient(180deg, var(--ab-bg-alt), var(--ab-bg)); }
.ab-kicker { margin: 0 0 14px; font-family: var(--ab-font-mono); font-size: 10.5px; letter-spacing: -0.01em; color: var(--ab-accent); }
.ab-h1 { margin: 0; font-family: var(--ab-font-head); font-weight: 600; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -0.035em; color: var(--ab-text-strong); }
.ab-h2 { margin: 0; font-family: var(--ab-font-head); font-weight: 600; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.032em; color: var(--ab-text-strong); }
.ab-h3 { margin: 0; font-family: var(--ab-font-head); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--ab-text-strong); }
.ab-lede { margin: 16px 0 0; max-width: 680px; font-size: 17px; line-height: 1.62; color: var(--ab-text-body); }
.ab-copy { font-size: 16px; line-height: 1.72; color: var(--ab-text-body); }
.ab-copy h2 { font-family: var(--ab-font-head); font-size: 26px; letter-spacing: -0.025em; color: var(--ab-text-strong); margin: 40px 0 14px; }
.ab-copy h3 { font-family: var(--ab-font-head); font-size: 20px; letter-spacing: -0.02em; color: var(--ab-text-strong); margin: 28px 0 10px; }
.ab-copy p { margin: 0 0 16px; }
.ab-copy ul, .ab-copy ol { margin: 0 0 16px; padding-left: 22px; }
.ab-copy li { margin: 0 0 8px; }
.ab-copy strong { color: var(--ab-text); }

/* Cards / grids */
.ab-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ab-card {
	padding: 26px 24px 28px; border: 1px solid var(--ab-border); border-radius: 16px;
	background: linear-gradient(180deg, var(--ab-surface-2), var(--ab-surface-1));
}
.ab-card:hover { border-color: rgba(127,166,255,0.4); }
.ab-card-num {
	display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
	border-radius: 10px; background: rgba(127,166,255,0.14); color: var(--ab-accent-light);
	font-family: var(--ab-font-mono); font-size: 12px;
}
.ab-hairline-grid {
	margin: 0; padding: 0; list-style: none; display: grid; gap: 1px;
	background: var(--ab-hairline); border: 1px solid var(--ab-hairline);
	border-radius: 14px; overflow: hidden;
}
.ab-hairline-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ab-hairline-item { background: var(--ab-bg-panel); padding: 20px 22px; }
.ab-hairline-item.center { text-align: center; padding: 20px 18px; }

.ab-pill { display: inline-block; padding: 5px 11px; border-radius: 999px; background: rgba(110,231,168,0.14); color: var(--ab-success); font-family: var(--ab-font-mono); font-size: 10px; }
.ab-check { flex: none; margin-top: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(110,231,168,0.16); color: var(--ab-success); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }

/* Hero */
.ab-hero { position: relative; padding: clamp(48px, 7vw, 88px) var(--ab-gutter) clamp(40px, 5vw, 72px); overflow: hidden; }
.ab-hero-glow { position: absolute; top: -340px; left: 50%; transform: translateX(-50%); width: 1000px; max-width: 200vw; height: 640px; background: radial-gradient(closest-side, var(--ab-glow-strong), var(--ab-glow-soft) 55%, transparent 78%); pointer-events: none; }
.ab-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--ab-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--ab-grid-line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(closest-side at 50% 30%, #000 34%, transparent 80%); -webkit-mask-image: radial-gradient(closest-side at 50% 30%, #000 34%, transparent 80%); pointer-events: none; }
.ab-hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; }
.ab-hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ab-breadcrumb-hero .ab-hero-inner { text-align: left; margin: 0; max-width: 100%; }
/* Everything else in a breadcrumb hero is left-aligned; the buttons inherited the
   centred rule above, which text-align cannot override on a flex container. */
.ab-breadcrumb-hero .ab-hero-actions { justify-content: flex-start; }

/* Breadcrumbs */
.ab-breadcrumbs { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--ab-text-mute-3); }
.ab-breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.ab-breadcrumbs a { color: var(--ab-text-mute-2); }
.ab-breadcrumbs a:hover { color: var(--ab-text); }
.ab-breadcrumbs li[aria-current] { color: var(--ab-text-body); }

/* Stats strip */
.ab-stats { margin: clamp(28px, 3.5vw, 44px) auto 0; max-width: 1040px; }
.ab-stat-num { margin: 0; font-family: var(--ab-font-head); font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--ab-text-strong); }
.ab-stat-label { margin: 4px 0 0; font-size: 13.5px; color: var(--ab-text-mute-2); }

/* FAQ */
/* FAQ accordion styles live in the components block further down. */

/* Table */
.ab-table-wrap { overflow-x: auto; border: 1px solid var(--ab-border); border-radius: 14px; }
.ab-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.ab-table th, .ab-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--ab-border-soft); }
.ab-table th { font-family: var(--ab-font-head); color: var(--ab-text-strong); background: var(--ab-surface-1); font-size: 13.5px; }
.ab-table td { color: var(--ab-text-body); }
.ab-table tr:last-child td { border-bottom: none; }

/* Contact form */
.ab-form { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--ab-border); border-radius: 18px; background: linear-gradient(180deg, var(--ab-surface-2), var(--ab-surface-1)); display: grid; gap: 16px; }
.ab-field { display: grid; gap: 7px; min-width: 0; }
.ab-field label { font-size: 14px; font-weight: 500; color: var(--ab-text-body); }
.ab-field input, .ab-field textarea, .ab-field select {
	width: 100%; min-width: 0; box-sizing: border-box; padding: 0 14px; height: 46px;
	border-radius: 10px; border: 1px solid var(--ab-border-strong); background: var(--ab-input-bg);
	color: var(--ab-text); font-family: inherit; font-size: 15.5px;
}
.ab-field textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.ab-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.ab-form-status { margin: 0; min-height: 18px; font-size: 14px; color: var(--ab-success); }
.ab-form-status.is-error { color: var(--ab-danger); }

/* Footer */
.ab-footer { padding: 44px var(--ab-gutter) 36px; border-top: 1px solid var(--ab-border-soft); background: var(--ab-bg-alt); }
.ab-footer-top { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.ab-footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ab-footer-nav a { font-size: 14.5px; color: var(--ab-text-mute-2); }
.ab-footer-nav a:hover { color: var(--ab-text); }
.ab-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ab-border-strong); color: var(--ab-text-body); }
.ab-social:hover { background: var(--ab-surface-3); color: var(--ab-text-strong); }
.ab-footer-bottom { max-width: var(--ab-container); margin: 28px auto 0; padding-top: 22px; border-top: 1px solid var(--ab-border-soft); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13.5px; color: var(--ab-text-faint); }
.ab-whatsapp-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ab-whatsapp); box-shadow: 0 10px 26px -6px rgba(37,211,102,0.55); }
.ab-whatsapp-float:hover { background: #1FBE5B; }

@media (max-width: 719px) {
	.ab-card-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Weighbridge demo widget (used on /weighbridge-software-qatar)
   ========================================================================== */
.ab-wb-demo { border: 1px solid var(--ab-mock-border); border-radius: 16px; background: linear-gradient(180deg, #0C0F14, #090B0F); overflow: hidden; }
.ab-wb-scene { position: relative; height: 190px; overflow: hidden; }
.ab-wb-gridbg { position: absolute; inset: 0; background-image: linear-gradient(rgba(127,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(127,166,255,0.05) 1px, transparent 1px); background-size: 34px 34px; }
.ab-wb-platform { position: absolute; left: 8%; right: 8%; bottom: 34px; height: 12px; border-radius: 3px; background: linear-gradient(180deg, #2A3140, #161B24); box-shadow: 0 0 0 1px rgba(127,166,255,0.22) inset, 0 -12px 30px -14px rgba(127,166,255,0.5); animation: ab-settle 9s ease-in-out infinite; }
.ab-wb-supports { position: absolute; left: 8%; right: 8%; bottom: 22px; height: 12px; display: flex; justify-content: space-between; }
.ab-wb-supports span { width: 3px; height: 100%; background: #1B2029; }
.ab-wb-groundline { position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: var(--ab-hairline); }
.ab-wb-truck { position: absolute; left: 12%; right: 12%; bottom: 46px; will-change: transform; transform: translateX(-58%); }
.ab-wb-live { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); }
.ab-wb-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ab-success); animation: ab-pulse 1.6s ease-in-out infinite; }
.ab-wb-live span:last-child { font-family: var(--ab-font-mono); font-size: 8.5px; color: var(--ab-text-mute-2); }
.ab-wb-panel { padding: 18px 18px 20px; border-top: 1px solid var(--ab-border-soft); }
.ab-wb-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.ab-wb-ticket { font-family: var(--ab-font-mono); font-size: 10px; color: var(--ab-text-mute-3); }
.ab-wb-status { padding: 3px 9px; border-radius: 999px; background: rgba(110,231,168,0.15); color: var(--ab-success); font-size: 11px; }
.ab-wb-rows { display: grid; gap: 11px; }
.ab-wb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ab-wb-row .label { font-size: 14px; color: var(--ab-text-mute-2); }
.ab-wb-row .value { font-family: var(--ab-font-head); font-size: 20px; font-weight: 600; color: var(--ab-text); font-variant-numeric: tabular-nums; }
.ab-wb-row .value.net { font-size: 24px; color: var(--ab-accent); }
.ab-wb-row .label.net { color: var(--ab-text-body); }
.ab-wb-divider { height: 1px; background: var(--ab-hairline); }
.ab-wb-meta { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--ab-hairline); display: grid; gap: 6px; font-size: 13.5px; color: var(--ab-text-mute-2); }
.ab-wb-meta-row { display: flex; justify-content: space-between; gap: 12px; }
.ab-wb-meta-row span:last-child { color: var(--ab-text-body); }

@keyframes ab-settle { 0%, 18% { transform: translateY(0); } 24% { transform: translateY(2.5px); } 30% { transform: translateY(1px); } 36%, 100% { transform: translateY(1.6px); } }
@keyframes ab-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.ab-wb-platform, .ab-wb-live .dot { animation: none; }
}

/* ==========================================================================
   Scroll reveal — JS (initReveal) adds .is-in as each block enters view.
   Blocks start visible and are only hidden once JS confirms it will run, so
   a JS failure or a no-JS visitor still sees all the content.
   ========================================================================== */
.js-reveal .ab-reveal { opacity: 0; transform: translateY(18px); }
.ab-reveal { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.ab-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js-reveal .ab-reveal { opacity: 1; transform: none; }
	.ab-reveal { transition: none; }
}

/* Built-on strip */
.ab-builton {
	max-width: var(--ab-container); margin: 0 auto; padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid var(--ab-border-soft);
	display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 4vw, 52px);
}
.ab-builton img { height: 30px; width: auto; opacity: 0.92; }
.ab-builton .tech { font-family: var(--ab-font-head); font-size: 19px; font-weight: 600; letter-spacing: -0.025em; color: var(--ab-text-body); }
.ab-builton .note { margin: 0; max-width: 340px; font-size: 14px; line-height: 1.55; color: var(--ab-text-mute-3); }

/* ==========================================================================
   Platform section — illustrative ERPNext dashboard, built in CSS (no image)
   ========================================================================== */
.ab-dash { border: 1px solid var(--ab-mock-border); border-radius: 18px; background: linear-gradient(180deg, #0E1117 0%, #0A0C10 100%); box-shadow: 0 50px 100px -34px rgba(0,0,0,0.92); overflow: hidden; }
.ab-dash-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ab-border); background: var(--ab-surface-1); }
.ab-dash-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3A404A; }
.ab-dash-bar span { margin-left: 10px; font-family: var(--ab-font-mono); font-size: 9.5px; color: var(--ab-text-faint); }
.ab-dash-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ab-dash-side { max-width: 200px; padding: 16px 12px; border-right: 1px solid var(--ab-border-soft); }
.ab-dash-side p { margin: 0 0 12px 9px; font-family: var(--ab-font-mono); font-size: 8.5px; color: var(--ab-text-mute-3); }
.ab-dash-side div { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; font-size: 12.5px; color: var(--ab-text-mute-2); }
.ab-dash-side div i { width: 5px; height: 5px; border-radius: 50%; background: #3A404A; }
.ab-dash-side div.on { background: rgba(127,166,255,0.14); color: #C8DBFF; }
.ab-dash-side div.on i { background: var(--ab-accent); }
.ab-dash-main { min-width: 0; padding: clamp(16px, 2.2vw, 22px); display: grid; gap: 14px; }
.ab-dash-title { margin: 0; font-family: var(--ab-font-head); font-size: 16px; font-weight: 600; color: var(--ab-text-strong); }
.ab-dash-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--ab-text-mute-3); }
.ab-dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.ab-dash-kpi { padding: 14px; border: 1px solid var(--ab-border); border-radius: 11px; background: var(--ab-surface-1); }
.ab-dash-kpi p:first-child { margin: 0; font-family: var(--ab-font-mono); font-size: 8.5px; color: var(--ab-text-mute-3); }
.ab-dash-kpi .num { margin: 9px 0 0; font-family: var(--ab-font-head); font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; letter-spacing: -0.03em; color: var(--ab-text-strong); font-variant-numeric: tabular-nums; }
.ab-dash-kpi .delta { margin: 4px 0 0; font-size: 11.5px; color: var(--ab-success); }
.ab-dash-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ab-dash-panel { min-width: 0; padding: 14px; border: 1px solid var(--ab-border); border-radius: 11px; background: var(--ab-surface-1); }
.ab-dash-panel .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ab-dash-panel .head p { margin: 0; font-family: var(--ab-font-mono); font-size: 8.5px; color: var(--ab-text-mute-3); }
.ab-dash-chart { margin-top: 16px; display: flex; align-items: flex-end; gap: 7px; height: 92px; }
.ab-dash-chart > div { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.ab-dash-chart span { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--ab-accent); }
.ab-dash-chart span.alt { background: rgba(127,166,255,0.26); }
.ab-dash-legend { margin-top: 10px; display: flex; gap: 14px; font-family: var(--ab-font-mono); font-size: 8px; color: var(--ab-text-faint); }
.ab-dash-legend span { display: flex; align-items: center; gap: 5px; }
.ab-dash-legend i { width: 7px; height: 7px; border-radius: 2px; background: var(--ab-accent); }
.ab-dash-legend i.alt { background: rgba(127,166,255,0.26); }
.ab-dash-rows { display: grid; gap: 9px; }
.ab-dash-rows > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ab-text-body); }
.ab-dash-rows .ok { color: var(--ab-success); }
.ab-dash-progress { margin-top: 13px; height: 6px; border-radius: 999px; background: var(--ab-surface-3); overflow: hidden; }
.ab-dash-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ab-accent), var(--ab-success)); }
.ab-dash-txn { display: grid; grid-template-columns: minmax(0,88px) minmax(0,1fr) minmax(0,auto) minmax(0,auto); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ab-border-soft); }
.ab-dash-txn .id { font-family: var(--ab-font-mono); font-size: 9px; color: var(--ab-text-mute-3); }
.ab-dash-txn .desc { font-size: 12.5px; color: var(--ab-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-dash-txn .amt { font-size: 12.5px; color: var(--ab-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-dash-txn .tag { padding: 3px 8px; border-radius: 999px; font-size: 10.5px; white-space: nowrap; }
.ab-dash-txn .tag.paid { background: rgba(110,231,168,0.15); color: var(--ab-success); }
.ab-dash-txn .tag.unpaid { background: rgba(255,201,120,0.15); color: var(--ab-warn); }
.ab-dash-txn .tag.overdue { background: rgba(255,154,154,0.15); color: var(--ab-danger); }
.ab-dash-txn .tag.sub { background: rgba(127,166,255,0.15); color: var(--ab-accent-light); }
.ab-dash-note { margin: 14px 0 0; font-size: 13.5px; color: var(--ab-text-faint); }

/* Screenshot figures */
.ab-figure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.ab-figure { margin: 0; border: 1px solid var(--ab-border-strong); border-radius: 14px; background: var(--ab-bg-panel); overflow: hidden; }
.ab-figure img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--ab-border); }
.ab-figure figcaption { padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ab-text-mute-2); }

/* Migration system pills */
.ab-pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-sys-pill { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--ab-border-strong); background: var(--ab-surface-2); font-size: 14.5px; color: var(--ab-text-body); }

/* Case-study cards (Insights) */
.ab-case { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--ab-border); border-radius: 14px; background: var(--ab-surface-1); }
.ab-case:hover { border-color: rgba(127,166,255,0.4); }
.ab-case .tag { margin: 0 0 13px; font-family: var(--ab-font-mono); font-size: 9px; color: var(--ab-accent); }
.ab-case h3 { margin: 0 0 10px; font-family: var(--ab-font-head); font-size: 18.5px; font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; color: var(--ab-text-strong); }
.ab-case p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--ab-text-muted); }
.ab-case details { margin-top: auto; }
.ab-case summary { cursor: pointer; font-family: var(--ab-font-head); font-size: 14.5px; font-weight: 500; color: var(--ab-accent-light); list-style: none; }
.ab-case summary::-webkit-details-marker { display: none; }
.ab-case details p { margin: 12px 0 0; font-size: 15px; line-height: 1.62; color: var(--ab-text-body); }

/* FAQ accordion (faq_block.html) */
.ab-faq { margin: 0; padding: 0; list-style: none; display: block; border-bottom: 1px solid var(--ab-border); }
.ab-faq-item { border: none; border-top: 1px solid var(--ab-border); border-radius: 0; background: none; padding: 0; }
.ab-faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: flex-start; gap: 14px; padding: 20px 0; font-family: var(--ab-font-head); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ab-text-strong); }
.ab-faq-item summary::-webkit-details-marker { display: none; }
.ab-faq-item summary .n { flex: none; margin-top: 1px; font-family: var(--ab-font-mono); font-size: 11px; color: var(--ab-accent); }
.ab-faq-a { margin: 0 0 22px 30px; max-width: 74ch; font-size: 15.5px; line-height: 1.65; color: var(--ab-text-body); }

/* Theme toggle — sits beside the CTA on desktop, beside the burger on mobile */
.ab-theme-toggle {
	margin-left: auto; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 10px;
	border: 1px solid var(--ab-border); background: var(--ab-surface-2);
	color: var(--ab-text-body); cursor: pointer;
}
.ab-theme-toggle:hover { color: var(--ab-text-strong); background: var(--ab-surface-3); }
.ab-header-cta { margin-left: 10px; }
/* Show the icon for the theme you'd switch TO */
.ab-theme-toggle .ab-icon-sun { display: inline; }
.ab-theme-toggle .ab-icon-moon { display: none; }
:root[data-theme="light"] .ab-theme-toggle .ab-icon-sun { display: none; }
:root[data-theme="light"] .ab-theme-toggle .ab-icon-moon { display: inline; }
@media (max-width: 1024px) {
	.ab-theme-toggle { margin-left: auto; margin-right: 8px; }
	.ab-burger { margin-left: 0; }
}

/* Card icons — inherit currentColor so they flip with the theme */
.ab-icon-badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px;
	background: rgba(127,166,255,0.14); color: var(--ab-accent);
}
:root[data-theme="light"] .ab-icon-badge { background: rgba(44,91,214,0.10); }
.ab-card .ab-icon-badge + .ab-h3 { margin-top: 0; }

/* Live-demo button sits before the CTA; hidden on tablet/mobile where the
   burger menu carries the same link. */
.ab-header-demo { margin-left: 10px; }
@media (max-width: 1024px) { .ab-header-demo { display: none; } }

/* Free-trial dialog (native <dialog>, so focus trapping and Esc come free) */
.ab-dialog {
	width: min(560px, calc(100vw - 32px));
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid var(--ab-border-strong);
	border-radius: var(--ab-radius-lg);
	background: var(--ab-bg-card);
	color: var(--ab-text);
	box-shadow: 0 40px 90px -30px var(--ab-shadow-strong);
}
.ab-dialog::backdrop { background: rgba(0,0,0,0.62); backdrop-filter: blur(3px); }
.ab-dialog-close-form { margin: 0; float: right; }
.ab-dialog-close {
	width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
	border: 1px solid var(--ab-border); background: var(--ab-surface-2);
	color: var(--ab-text-body); font-size: 20px; line-height: 1;
}
.ab-dialog-close:hover { color: var(--ab-text-strong); background: var(--ab-surface-3); }
.ab-dialog .ab-form { box-shadow: none; border: none; padding: 0; background: none; }

/* Screenshot placeholder — stands in for a product shot that has not been
   produced yet, so the page never renders a broken image. Swap the whole
   block for an <img> inside .ab-figure once the asset exists. */
.ab-shot {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; padding: clamp(28px, 6vw, 64px) 20px; text-align: center;
	background:
		linear-gradient(var(--ab-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--ab-grid-line) 1px, transparent 1px);
	background-size: 32px 32px;
	background-color: var(--ab-surface-1);
	border-bottom: 1px solid var(--ab-border);
	min-height: 200px;
}
.ab-shot .label { font-family: var(--ab-font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ab-accent); }
.ab-shot .name { font-family: var(--ab-font-head); font-size: 15px; font-weight: 600; color: var(--ab-text-body); }
.ab-shot .dims { font-family: var(--ab-font-mono); font-size: 11px; color: var(--ab-text-faint); }

/* Products & Services dropdown. Opens on hover for mouse users and on click
   for keyboard and touch; JS only manages aria-expanded and the click path,
   so the menu still opens on hover if the script fails. */
.ab-menu { position: relative; }
.ab-menu-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 10px; border: 0; border-radius: 8px; cursor: pointer;
	font-family: inherit; font-size: 14.5px; color: var(--ab-text-body);
	background: none; white-space: nowrap;
}
.ab-menu-btn:hover, .ab-menu[data-open] .ab-menu-btn { color: var(--ab-text); background: var(--ab-border-soft); }
.ab-menu-btn svg { transition: transform .18s ease; }
.ab-menu[data-open] .ab-menu-btn svg { transform: rotate(180deg); }
.ab-menu-panel {
	position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
	min-width: 310px; padding: 10px;
	border: 1px solid var(--ab-border-strong); border-radius: var(--ab-radius-md);
	background: var(--ab-bg-card);
	box-shadow: 0 30px 70px -28px var(--ab-shadow-strong);
	display: none;
}
.ab-menu:hover .ab-menu-panel, .ab-menu:focus-within .ab-menu-panel, .ab-menu[data-open] .ab-menu-panel { display: block; }
/* Keeps the pointer from falling through the gap between button and panel */
.ab-menu-panel::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.ab-menu-group {
	margin: 6px 0 4px; padding: 0 10px;
	font-family: var(--ab-font-mono); font-size: 9px; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--ab-text-faint);
}
.ab-menu-group + a { margin-top: 0; }
.ab-menu-panel a {
	display: block; padding: 8px 10px; border-radius: 9px; color: var(--ab-text-body);
}
.ab-menu-panel a:hover, .ab-menu-panel a:focus-visible { background: var(--ab-surface-2); color: var(--ab-text-strong); }
.ab-menu-panel a span { display: block; font-family: var(--ab-font-head); font-size: 14.5px; font-weight: 600; color: var(--ab-text-strong); }
.ab-menu-panel a small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: var(--ab-text-mute-3); }

/* Section labels inside the mobile drawer */
.ab-mobile-group {
	margin: 14px 0 2px; font-family: var(--ab-font-mono); font-size: 9px;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--ab-text-faint);
	border-bottom: 0 !important;
}

/* "Keep reading" cards. The heading is the link so the whole card reads as
   one destination rather than a paragraph with a link buried in it. */
.ab-card h3 a { color: var(--ab-text-strong); text-decoration: none; }
.ab-card h3 a:hover { color: var(--ab-accent-link); text-decoration: underline; }

/* ==========================================================================
   Hero
   Editorial, image-backed. Replaces the pinned-scroll card spread — that
   version cost 260vh of scroll before a visitor reached any content, and its
   per-frame layout reads were what put INP at 2752ms.
   ========================================================================== */

.ab-home-hero {
	position: relative;
	min-height: min(92vh, 860px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: clamp(40px, 6vw, 72px) 0 0;
	isolation: isolate;
}

/* Doha skyline — the furthest-back layer, full width. Anchored to the bottom
   so the city sits on the horizon line rather than floating mid-frame, and
   held well behind the copy: this is atmosphere, not something to read. */
.ab-home-hero-sky {
	/* Deliberately taller than the hero and anchored to its base. The
	   photograph is a 2.65:1 panorama, so on a wide, short viewport a plain
	   inset:0 box makes object-fit:cover scale by width and reveal the whole
	   frame — including the photographer's credit mark in the far corner. An
	   over-tall box forces cover to scale by height at every aspect ratio, so
	   the left and right edges are always cropped. The hero's own
	   overflow:hidden clips the excess. */
	position: absolute; inset: auto 0 0 0; height: 136%; z-index: -3;
	overflow: hidden;
	opacity: var(--ab-hero-sky-opacity, 0.9);
	/* Fades in from just under the header so the city rises into the frame
	   rather than being cropped flat across the top. */
	/* Fades in below the header, and back out across the last tenth. That
	   bottom fade is load-bearing: the photographer's credit mark is burned
	   into the very bottom edge of the source frame, and fading the edge keeps
	   it out of sight at every viewport width without touching the file. The
	   area it covers is dark water reflection, so nothing is lost. */
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 72%, transparent 90%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 72%, transparent 90%);
}
.ab-home-hero-sky img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	/* Bottom-anchored: the skyline is a wide panorama, so filling the hero
	   height means showing its lower two thirds — sky on the left, towers and
	   their reflection through the middle. */
	object-fit: cover; object-position: 34% 74%;
	display: block;
}

/* Artwork sits right-of-centre on desktop and is masked into the background
   on both axes, so the headline never fights it for contrast. */
.ab-home-hero-bg {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(54%, 900px);
	z-index: -2;
	-webkit-mask-image:
		linear-gradient(90deg, transparent 0%, #000 46%, #000 90%, transparent 100%),
		linear-gradient(180deg, #000 0%, #000 56%, transparent 92%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent 0%, #000 46%, #000 90%, transparent 100%),
		linear-gradient(180deg, #000 0%, #000 56%, transparent 92%);
	mask-composite: intersect;
}
.ab-home-hero-bg img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: 66% 20%;
	display: block;
}

/* Sits above the image, below the copy — carries the left-to-right fade that
   makes body text legible over artwork at every breakpoint. */
.ab-home-hero-scrim {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--ab-bg) 82%, transparent) 0%, color-mix(in srgb, var(--ab-bg) 70%, transparent) 42%, color-mix(in srgb, var(--ab-bg) 40%, transparent) 64%, transparent 86%),
		linear-gradient(0deg, color-mix(in srgb, var(--ab-bg) 68%, transparent) 0%, transparent 36%);
}

.ab-home-hero-inner { position: relative; max-width: 760px; margin-right: auto; }

.ab-home-hero-eyebrow {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 22px;
	font-size: 13px; font-weight: 600; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--ab-accent);
}
.ab-home-hero-eyebrow span { width: 32px; height: 1px; background: currentColor; flex: none; }

.ab-home-hero-title {
	margin: 0;
	font-family: 'Anton', var(--ab-font-head), sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.95;
	letter-spacing: 0.005em;
	font-size: clamp(46px, 7vw, 108px);
	color: var(--ab-text-strong);
	text-wrap: balance;
}
.ab-home-hero-for {
	display: block;
	margin: 10px 0 14px;
	font-family: var(--ab-font-head);
	font-style: italic; font-weight: 500;
	text-transform: none; letter-spacing: 0;
	font-size: 0.34em; line-height: 1.2;
	color: var(--ab-text-mute-3);
}
.ab-home-hero-accent { color: var(--ab-accent); display: block; }

.ab-home-hero-lede {
	margin: 26px 0 0;
	max-width: 560px;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.6;
	color: var(--ab-text-body);
	text-wrap: pretty;
}

.ab-home-hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }

.ab-home-hero-modules { position: relative; margin-top: clamp(44px, 6vw, 72px); }
.ab-home-hero-modules-label {
	margin: 0 0 14px;
	font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--ab-accent);
}
.ab-home-hero-modules ul {
	list-style: none; margin: 0; padding: 18px 0 0;
	border-top: 1px solid var(--ab-border);
	display: flex; flex-wrap: wrap; align-items: center;
}
.ab-home-hero-modules li { border-left: 1px solid var(--ab-border); }
.ab-home-hero-modules li:first-child { border-left: none; }
.ab-home-hero-modules li:first-child a { padding-left: 0; }
.ab-home-hero-modules a {
	display: block; padding: 4px 22px;
	font-size: 14.5px; color: var(--ab-text-mute-3); text-decoration: none;
}
.ab-home-hero-modules a:hover { color: var(--ab-text-strong); }

/* Below the artwork's useful width the image stops being a backdrop and starts
   being a distraction behind the headline, so it drops out entirely. */
@media (max-width: 899px) {
	.ab-home-hero { min-height: 0; padding-bottom: 8px; }
	.ab-home-hero-bg {
		position: relative; inset: auto; width: auto;
		margin: 0 0 clamp(24px, 5vw, 36px);
		aspect-ratio: 16 / 9;
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
		mask-composite: add; -webkit-mask-composite: source-over;
	}
	.ab-home-hero-scrim { display: none; }
	.ab-home-hero-modules ul { gap: 2px 0; }
	.ab-home-hero-modules a { padding: 4px 14px; font-size: 13.5px; }
}

/* The skyline is a dusk photograph — on the light palette it has to sit back
   further, or its dark mass competes with the headline for attention. */
:root[data-theme="light"] .ab-home-hero-sky { --ab-hero-sky-opacity: 0.62; }

/* ==========================================================================
   Interior-page hero backdrop (opt-in via `hero_bg`)
   ========================================================================== */

/* The hero establishes its own stacking context so the backdrop can sit behind
   the glow and grid without escaping into the page below. */
.ab-hero.has-bg { isolation: isolate; }

.ab-hero-backdrop {
	position: absolute; inset: 0; z-index: -1;
	overflow: hidden;
	pointer-events: none;
	opacity: var(--ab-hero-bg-opacity, 0.5);
	/* Fades out downward so the section below it starts on clean background
	   rather than against a hard horizontal seam. */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%);
	mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%);
}
.ab-hero-backdrop img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 40%;
	display: block;
}

/* A veil in the page's own background colour, so the headline keeps its
   contrast whatever the artwork behind it happens to be doing. Stronger on
   the left, where the copy sits. */
.ab-hero.has-bg::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--ab-bg) 82%, transparent) 0%, color-mix(in srgb, var(--ab-bg) 62%, transparent) 46%, color-mix(in srgb, var(--ab-bg) 46%, transparent) 100%),
		linear-gradient(0deg, var(--ab-bg) 0%, transparent 42%);
}

/* The artwork is a dark illustration. On the light palette it has to sit much
   further back or it reads as a dirty smear behind black text; the veil is
   also lightened so the page still feels like a light page. */
:root[data-theme="light"] .ab-hero-backdrop { --ab-hero-bg-opacity: 0.28; }
:root[data-theme="light"] .ab-hero.has-bg::before {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--ab-bg) 88%, transparent) 0%, color-mix(in srgb, var(--ab-bg) 74%, transparent) 46%, color-mix(in srgb, var(--ab-bg) 60%, transparent) 100%),
		linear-gradient(0deg, var(--ab-bg) 0%, transparent 46%);
}

@media (max-width: 719px) {
	/* Less room for the headline, so the plate goes further back still. A 16:9
	   plate cropped into a tall narrow box keeps only its middle, which is where
	   this artwork carries its wordmark — so bias the crop right, onto the
	   quieter side of the illustration. */
	.ab-hero-backdrop { --ab-hero-bg-opacity: 0.22; }
	.ab-hero-backdrop img { object-position: 68% 42%; }
	:root[data-theme="light"] .ab-hero-backdrop { --ab-hero-bg-opacity: 0.16; }
}