/* =========================================================================
   Atanga SkillBridge Theme: design system.
   Phase 3: the complete token set, component library, header/footer and
   animation system that Phases 4 to 7 compose their pages from.
   Phase 4 adds the homepage compositions (section 22), Phase 5 the service
   pages (23), Phase 6 the Work page (24), Phase 7 About/Contact/Insights
   (25), Phase 8 booking and forms (26), Phase 9 the AI assistant (27).

   Contents
   1.  Tokens                8.  Cards and grids       15. Forms
   2.  Reset and base        9.  Stats                 16. Tables
   3.  Typography           10.  Feature split         17. Media frames
   4.  Icons                11.  Process steps         18. CTA band, funnel ends
   5.  Buttons, badges      12.  Testimonials          19. Prose, insights, 404
   6.  Topbar and header    13.  Logo wall, marquee    20. Footer, WhatsApp float
   7.  Hero and sections    14.  Pricing, FAQ, tabs    21. Animations, utilities
                                                       22. Homepage compositions
                                                       23. Service compositions
                                                       24. Work compositions
                                                       25. About/Contact/Insights
                                                       26. Booking and forms
                                                       27. AI assistant widget
   ====================================================================== */

/* ---- 1. Tokens (blueprint section 3) ------------------------------------ */

:root {
	--asb-blue: #2E9E48;
	--asb-blue-deep: #1F7A34;
	--asb-blue-bright: #3FBB5E;
	--asb-navy: #0C1E3E;
	--asb-gold: #F4B740;
	--asb-sky: #E9F5EC;
	--asb-bg: #FFFFFF;
	--asb-surface: #F5F8F6;
	--asb-line: #E1E8E4;
	--asb-ink: #0C1E3E;
	--asb-muted: #4C5A6E;
	--asb-green: #2E9E48;
	--asb-red: #DC2626;
	--asb-grad-hero: linear-gradient(135deg, var(--asb-blue), var(--asb-blue-bright));
	--asb-grad-text: linear-gradient(110deg, var(--asb-blue) 10%, var(--asb-blue-bright) 55%, var(--asb-blue) 100%);

	--asb-font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	--asb-font-text: "Open Sans", ui-sans-serif, system-ui, sans-serif;

	--asb-container: 1200px;
	--asb-radius-sm: 10px;
	--asb-radius: 16px;
	--asb-radius-lg: 24px;
	--asb-shadow-sm: 0 1px 2px rgba(12, 30, 62, .06), 0 4px 12px -6px rgba(12, 30, 62, .10);
	--asb-shadow: 0 2px 4px rgba(12, 30, 62, .06), 0 16px 40px -20px rgba(12, 30, 62, .25);
	--asb-shadow-lg: 0 4px 8px rgba(12, 30, 62, .05), 0 32px 72px -32px rgba(12, 30, 62, .35);
	--asb-ease: cubic-bezier(.22, .61, .21, 1);
}

/* ---- 2. Reset and base --------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--asb-bg);
	color: var(--asb-ink);
	font-family: var(--asb-font-text);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--asb-blue); text-decoration: none; }
a:hover { color: var(--asb-blue-deep); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--asb-blue-bright);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Present a keyboard-only shortcut without adding visual noise. */
.asb-skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1000;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--asb-navy);
	color: #fff;
	font-weight: 700;
	transform: translateY(-160%);
	transition: transform .18s var(--asb-ease);
}

.asb-skip-link:focus { transform: translateY(0); color: #fff; }

.asb-main:focus { outline: none; }

/* Anchored sections land clear of the sticky header. */
[id] { scroll-margin-top: 96px; }

.asb-container {
	width: 100%;
	max-width: var(--asb-container);
	margin: 0 auto;
	padding: 0 24px;
}

.asb-container-narrow { max-width: 800px; }
.asb-container-wide { max-width: 1360px; }

.asb-section { padding: 84px 0; }
.asb-section-sm { padding: 56px 0; }

/* Section surface variants. */
.asb-section-tint { background: var(--asb-surface); }
.asb-section-sky { background: var(--asb-sky); }

.asb-section-dark {
	background:
		radial-gradient(70% 120% at 85% -20%, rgba(63, 187, 94, .28), transparent 60%),
		radial-gradient(50% 90% at 5% 110%, rgba(46, 158, 72, .35), transparent 55%),
		var(--asb-navy);
	color: rgba(255, 255, 255, .82);
}

.asb-section-dark .asb-h1, .asb-section-dark .asb-h2, .asb-section-dark .asb-h3 { color: #fff; }
.asb-section-dark .asb-sub { color: rgba(255, 255, 255, .78); }
.asb-section-dark .asb-kicker { background: rgba(255, 255, 255, .1); color: var(--asb-gold); }

@media (max-width: 679px) {
	.asb-section { padding: 64px 0; }
	.asb-section-sm { padding: 44px 0; }
}

/* ---- 3. Typography ------------------------------------------------------- */

.asb-h1, .asb-h2, .asb-h3 {
	font-family: var(--asb-font-display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0 0 16px;
	color: var(--asb-ink);
}

.asb-h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.asb-h1-xl { font-size: clamp(2.4rem, 5.6vw, 4.1rem); letter-spacing: -.025em; }
.asb-h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.asb-h3 { font-size: 1.25rem; }

/* Gradient highlight inside a heading: <span class="asb-grad-text">. */
.asb-grad-text {
	background: var(--asb-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Gold underline stroke inside a heading on dark bands. */
.asb-gold-text { color: var(--asb-gold); }

.asb-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--asb-sky);
	color: var(--asb-blue);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.asb-sub {
	margin: 0 0 24px;
	color: var(--asb-muted);
	font-size: 1.12rem;
	max-width: 680px;
}

.asb-note { color: var(--asb-muted); font-size: .92rem; margin: 0 0 20px; }

/* Standard section header: kicker + title + sub, optionally centered. */
.asb-section-head { max-width: 780px; margin-bottom: 40px; }
.asb-section-head .asb-sub { margin-bottom: 0; }

.asb-section-head-center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.asb-section-head-center .asb-sub { margin-left: auto; margin-right: auto; }

/* Split header: title left, action right. */
.asb-section-head-split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	max-width: none;
}

.asb-section-head-split > div { max-width: 680px; }

@media (max-width: 679px) {
	.asb-section-head-split { flex-direction: column; align-items: flex-start; }
}

/* ---- 4. Icons ------------------------------------------------------------ */

.asb-icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; vertical-align: -.22em; }

.asb-icon-badge {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--asb-sky);
	color: var(--asb-blue);
}

.asb-icon-badge .asb-icon { width: 24px; height: 24px; }

.asb-icon-badge-lg { width: 68px; height: 68px; border-radius: 20px; }
.asb-icon-badge-lg .asb-icon { width: 32px; height: 32px; }

.asb-icon-badge-gold { background: rgba(244, 183, 64, .18); color: #9A7A16; }
.asb-icon-badge-navy { background: var(--asb-navy); color: var(--asb-gold); }
.asb-icon-badge-grad { background: var(--asb-grad-hero); color: #fff; }

.asb-section-dark .asb-icon-badge { background: rgba(255, 255, 255, .1); color: var(--asb-gold); }

/* ---- 5. Buttons, badges, chips, alerts ----------------------------------- */

.asb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 999px;
	font-family: var(--asb-font-text);
	font-size: .98rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: transform .18s var(--asb-ease), box-shadow .18s var(--asb-ease), background .18s var(--asb-ease), color .18s var(--asb-ease), border-color .18s var(--asb-ease);
}

.asb-btn:hover { transform: translateY(-2px); }

.asb-btn-primary {
	background: var(--asb-grad-hero);
	color: #fff;
	box-shadow: 0 10px 24px -12px rgba(46, 158, 72, .55);
}

.asb-btn-primary:hover { color: #fff; box-shadow: 0 14px 30px -12px rgba(46, 158, 72, .6); }

.asb-btn-gold {
	background: var(--asb-gold);
	color: var(--asb-navy);
	box-shadow: 0 10px 24px -12px rgba(244, 183, 64, .6);
}

.asb-btn-gold:hover { color: var(--asb-navy); }

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

.asb-btn-ghost:hover { border-color: var(--asb-blue); color: var(--asb-blue); }

.asb-btn-ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
}

.asb-btn-ghost-light:hover { border-color: #fff; color: #fff; }

.asb-btn-white { background: #fff; color: var(--asb-blue); box-shadow: 0 10px 24px -14px rgba(12, 30, 62, .5); }
.asb-btn-white:hover { color: var(--asb-blue-deep); }

.asb-btn-sm { padding: 10px 20px; font-size: .9rem; }
.asb-btn-lg { padding: 16px 32px; font-size: 1.05rem; }

.asb-btn[disabled], .asb-btn.is-loading { opacity: .65; pointer-events: none; }

/* Text link with arrow. */
.asb-link-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--asb-blue);
	font-weight: 600;
	font-size: .97rem;
}

.asb-link-more .asb-icon { transition: transform .18s var(--asb-ease); }
.asb-link-more:hover .asb-icon { transform: translateX(3px); }

/* Badges and chips. */
.asb-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	background: var(--asb-sky);
	color: var(--asb-blue);
}

.asb-badge-gold { background: rgba(244, 183, 64, .2); color: #8A6D00; }
.asb-badge-green { background: rgba(22, 163, 74, .12); color: var(--asb-green); }
.asb-badge-navy { background: var(--asb-navy); color: var(--asb-gold); }
.asb-badge-outline { background: transparent; border: 1px solid var(--asb-line); color: var(--asb-muted); }

.asb-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.asb-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--asb-line);
	background: #fff;
	color: var(--asb-muted);
	font-size: .88rem;
	font-weight: 500;
}

.asb-chip .asb-icon { color: var(--asb-blue); }

.asb-section-dark .asb-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .85); }

/* Inline alerts (form feedback and notices). */
.asb-alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 14px 18px;
	border-radius: var(--asb-radius-sm);
	font-size: .95rem;
	border: 1px solid var(--asb-line);
	background: var(--asb-surface);
	color: var(--asb-ink);
}

.asb-alert .asb-icon { margin-top: 3px; }
.asb-alert-info { background: var(--asb-sky); border-color: rgba(46, 158, 72, .25); color: var(--asb-blue-deep); }
.asb-alert-success { background: rgba(22, 163, 74, .08); border-color: rgba(22, 163, 74, .3); color: #14532D; }
.asb-alert-error { background: rgba(220, 38, 38, .07); border-color: rgba(220, 38, 38, .3); color: #7F1D1D; }

/* ---- 6. Topbar and header ------------------------------------------------ */

.asb-topbar {
	background: var(--asb-navy);
	color: rgba(255, 255, 255, .92);
	font-size: .86rem;
}

.asb-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
	padding-top: 8px;
	padding-bottom: 8px;
}

.asb-topbar-text { display: inline-flex; align-items: center; gap: 8px; }
.asb-topbar-text .asb-icon { color: var(--asb-gold); }

.asb-topbar-link { color: var(--asb-gold); font-weight: 600; }
.asb-topbar-link:hover { color: #fff; }

.asb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s var(--asb-ease), box-shadow .2s var(--asb-ease);
}

/* Keep the sticky site header below WordPress' toolbar for logged-in users. */
body.admin-bar .asb-header {
	top: 32px;
}

body.admin-bar [id] {
	scroll-margin-top: 128px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .asb-header {
		top: 46px;
	}

	body.admin-bar [id] {
		scroll-margin-top: 142px;
	}
}

/* WordPress makes its toolbar non-fixed on narrow phones. */
@media screen and (max-width: 600px) {
	body.admin-bar .asb-header {
		top: 0;
	}

	body.admin-bar [id] {
		scroll-margin-top: 96px;
	}
}

.asb-header.is-stuck {
	border-bottom-color: var(--asb-line);
	box-shadow: 0 6px 24px -18px rgba(12, 30, 62, .3);
}

.asb-header-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.asb-logo { display: inline-flex; align-items: center; gap: 12px; }

.asb-logo-img {
	display: block;
	height: 60px;
	width: auto;
	max-width: min(230px, 44vw);
	object-fit: contain;
}

.asb-header .asb-logo-img {
	border-radius: 8px;
}

.asb-logo-text { display: flex; flex-direction: column; line-height: 1.15; }

.asb-logo-name {
	font-family: var(--asb-font-display);
	font-weight: 700;
	font-size: 1.06rem;
	color: var(--asb-ink);
	letter-spacing: -.01em;
}

.asb-logo-tagline { font-size: .72rem; color: var(--asb-muted); letter-spacing: .02em; }

.asb-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }

.asb-nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.asb-nav-list a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--asb-ink);
	font-weight: 500;
	font-size: .97rem;
	transition: background .15s var(--asb-ease), color .15s var(--asb-ease);
}

.asb-nav-list a:hover { background: var(--asb-sky); color: var(--asb-blue); }
.asb-nav-list a.asb-current,
.asb-nav-list .current-menu-item > a,
.asb-nav-list .current-menu-ancestor > a { color: var(--asb-blue); font-weight: 600; }

/* Dropdown submenus (WP menus, up to depth 3). */
.asb-nav-list li { position: relative; }

.asb-nav-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius-sm);
	box-shadow: var(--asb-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s var(--asb-ease), transform .18s var(--asb-ease), visibility .18s;
	z-index: 110;
}

.asb-nav-list li:hover > .sub-menu,
.asb-nav-list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.asb-nav-list .sub-menu a {
	display: block;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: .93rem;
}

/* A nested menu opens alongside its parent instead of below the header. */
.asb-nav-list .sub-menu .sub-menu {
	top: -8px;
	left: calc(100% + 8px);
}

.asb-nav-list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: 7px;
	width: 7px;
	height: 7px;
	border-right: 1.7px solid currentColor;
	border-bottom: 1.7px solid currentColor;
	transform: rotate(45deg) translateY(-3px);
}

.asb-nav-cta { display: flex; align-items: center; gap: 10px; }
.asb-nav-cta .asb-btn { padding: 11px 22px; font-size: .92rem; }

.asb-nav-toggle {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	border: 1px solid var(--asb-line);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.asb-nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--asb-ink);
	transition: transform .2s var(--asb-ease), opacity .2s var(--asb-ease);
}

.asb-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.asb-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.asb-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
	body.asb-nav-open { overflow: hidden; }

	.asb-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		background: #fff;
		border-bottom: 1px solid var(--asb-line);
		box-shadow: 0 24px 40px -24px rgba(12, 30, 62, .3);
		padding: 16px 24px 22px;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}

	.asb-nav.is-open { display: flex; }

	.asb-nav-list { flex-direction: column; align-items: stretch; }
	.asb-nav-list a { display: block; padding: 12px 14px; }
	.asb-nav-cta { flex-direction: column; align-items: stretch; }
	.asb-nav-cta .asb-btn { justify-content: center; }
	.asb-nav-toggle { display: flex; }

	/* Submenus render inline, indented, always visible. */
	.asb-nav-list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--asb-line);
		border-radius: 0;
		margin: 0 0 4px 16px;
		padding: 0 0 0 6px;
		min-width: 0;
	}

	.asb-nav-list .menu-item-has-children > a::after { display: none; }
}

/* ---- 7. Hero and ornaments ---------------------------------------------- */

.asb-hero {
	position: relative;
	padding: 96px 0 84px;
	background:
		radial-gradient(60% 90% at 85% -10%, rgba(63, 187, 94, .14), transparent 60%),
		radial-gradient(50% 80% at 10% 0%, rgba(244, 183, 64, .10), transparent 55%),
		var(--asb-surface);
	overflow: hidden;
}

.asb-hero-slim { padding: 68px 0 56px; }

/* Training hub hero: practical learning shown alongside the enrollment path. */
.asb-training-hero { padding: 68px 0 64px; }

.asb-training-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
	gap: 56px;
	align-items: center;
}

.asb-training-hero-copy .asb-h1 { max-width: 760px; }
.asb-training-hero-copy .asb-sub { max-width: 700px; }

.asb-training-hero-visual {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border: 7px solid rgba(255, 255, 255, .92);
	border-radius: 28px;
	background: var(--asb-surface);
	box-shadow: 0 28px 64px -32px rgba(12, 30, 62, .38);
}

.asb-training-hero-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 48%, rgba(12, 30, 62, .1));
}

.asb-training-hero-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 1023px) {
	.asb-training-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.asb-training-hero-visual { width: min(100%, 640px); }
}

@media (max-width: 679px) {
	.asb-training-hero { padding: 54px 0; }
	.asb-training-hero-visual { border-width: 5px; border-radius: 22px; }
}

/* The testimonial archive begins with two focused paths: browse or submit. */
.asb-testimonials-hero .asb-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.asb-testimonials-hero .asb-sub { margin-left: auto; margin-right: auto; }
.asb-testimonials-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }

@media (max-width: 479px) {
	.asb-testimonials-hero-actions .asb-btn { width: 100%; justify-content: center; }
}

/* Course heroes pair the course details with a purpose-built editorial image. */
.asb-course-hero { padding: 66px 0; }

.asb-course-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, .85fr);
	gap: 56px;
	align-items: center;
}

.asb-course-hero-copy .asb-course-meta { justify-content: flex-start; }

.asb-course-hero-visual {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 1.24;
	border: 7px solid rgba(255, 255, 255, .92);
	border-radius: 28px;
	background: var(--asb-surface);
	box-shadow: 0 28px 64px -32px rgba(12, 30, 62, .38);
}

.asb-course-hero-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 48%, rgba(12, 30, 62, .1));
}

.asb-course-hero-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1023px) {
	.asb-course-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.asb-course-hero-visual { width: min(100%, 640px); }
}

@media (max-width: 679px) {
	.asb-course-hero { padding: 54px 0; }
	.asb-course-hero-visual { border-width: 5px; border-radius: 22px; }
}

.asb-hero-inner { position: relative; }

.asb-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Two-column hero: copy left, visual right. */
.asb-hero-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: 48px;
	align-items: center;
}

@media (max-width: 1023px) { .asb-hero-cols { grid-template-columns: minmax(0, 1fr); } }

/* Services overview: copy and its editorial image share the hero on larger screens. */
.asb-services-overview-hero { padding: 72px 0; }

.asb-services-overview-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
	gap: 52px;
	align-items: center;
}

.asb-services-overview-hero-copy { max-width: 720px; }

.asb-services-overview-hero-visual {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 1.45;
	border: 7px solid rgba(255, 255, 255, .92);
	border-radius: 28px;
	background: var(--asb-surface);
	box-shadow: 0 28px 64px -32px rgba(12, 30, 62, .38);
}

.asb-services-overview-hero-visual picture,
.asb-services-overview-hero-visual img {
	display: block;
	width: 100%;
	height: 100%;
}

.asb-services-overview-hero-visual img {
	object-fit: cover;
	object-position: center;
}

@media (max-width: 1023px) {
	.asb-services-overview-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.asb-services-overview-hero-visual { width: min(100%, 640px); }
}

@media (max-width: 679px) {
	.asb-services-overview-hero { padding: 54px 0; }
	.asb-services-overview-hero-visual { border-width: 5px; border-radius: 22px; }
}

/* Trust strip under hero actions: avatars + rating + micro copy. */
.asb-hero-trust {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	color: var(--asb-muted);
	font-size: .92rem;
}

/* Dark hero (navy) variant. */
.asb-hero-dark {
	background:
		radial-gradient(70% 120% at 80% -20%, rgba(63, 187, 94, .32), transparent 60%),
		radial-gradient(40% 70% at 8% 8%, rgba(244, 183, 64, .12), transparent 55%),
		var(--asb-navy);
	color: rgba(255, 255, 255, .85);
}

.asb-hero-dark .asb-h1, .asb-hero-dark .asb-h2 { color: #fff; }
.asb-hero-dark .asb-sub { color: rgba(255, 255, 255, .78); }
.asb-hero-dark .asb-kicker { background: rgba(255, 255, 255, .1); color: var(--asb-gold); }
.asb-hero-dark .asb-hero-trust { color: rgba(255, 255, 255, .7); }

/* Floating ornament dots/shapes (decorative only). */
.asb-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(2px);
	opacity: .55;
	animation: asb-float 7s ease-in-out infinite;
}

.asb-orb-blue { background: radial-gradient(circle at 30% 30%, var(--asb-blue-bright), var(--asb-blue)); }
.asb-orb-gold { background: radial-gradient(circle at 30% 30%, #FFE070, var(--asb-gold)); animation-delay: -3.5s; }

@keyframes asb-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-16px); }
}

/* ---- 8. Cards and grids -------------------------------------------------- */

.asb-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.asb-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.asb-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

@media (max-width: 1023px) {
	.asb-grid-3, .asb-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 679px) {
	.asb-grid-2, .asb-grid-3, .asb-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.asb-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius);
	box-shadow: var(--asb-shadow-sm);
	transition: transform .2s var(--asb-ease), box-shadow .2s var(--asb-ease), border-color .2s var(--asb-ease);
}

a.asb-card { color: inherit; }

a.asb-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--asb-shadow);
	border-color: rgba(46, 158, 72, .35);
}

.asb-card-center { align-items: center; text-align: center; }

.asb-card-title {
	font-family: var(--asb-font-display);
	font-weight: 600;
	font-size: 1.12rem;
	color: var(--asb-ink);
	letter-spacing: -.01em;
}

.asb-card-text { color: var(--asb-muted); font-size: .97rem; }

.asb-card-more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--asb-blue);
	font-weight: 600;
	font-size: .93rem;
}

a.asb-card:hover .asb-card-more .asb-icon { transform: translateX(3px); }
.asb-card-more .asb-icon { transition: transform .18s var(--asb-ease); }

/* Highlighted card: gradient top border. */
.asb-card-featured {
	border-color: rgba(46, 158, 72, .4);
	box-shadow: var(--asb-shadow);
	position: relative;
	overflow: hidden;
}

.asb-card-featured::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--asb-grad-hero);
}

/* Dark card for navy bands. */
.asb-section-dark .asb-card {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
}

.asb-section-dark .asb-card-title { color: #fff; }
.asb-section-dark .asb-card-text { color: rgba(255, 255, 255, .72); }

/* ---- 9. Stats ------------------------------------------------------------ */

.asb-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	text-align: center;
}

.asb-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1023px) { .asb-stats, .asb-stats-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .asb-stats, .asb-stats-3 { grid-template-columns: minmax(0, 1fr); } }

.asb-stat { display: flex; flex-direction: column; gap: 4px; }

.asb-stat-value {
	font-family: var(--asb-font-display);
	font-weight: 800;
	font-size: clamp(1.9rem, 3.6vw, 2.7rem);
	letter-spacing: -.02em;
	color: var(--asb-ink);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.asb-stat-value .asb-stat-suffix { color: var(--asb-blue); }

.asb-stat-label { color: var(--asb-muted); font-size: .95rem; font-weight: 500; }

.asb-section-dark .asb-stat-value { color: #fff; }
.asb-section-dark .asb-stat-value .asb-stat-suffix { color: var(--asb-gold); }
.asb-section-dark .asb-stat-label { color: rgba(255, 255, 255, .7); }

/* ---- 10. Feature split (media + copy, alternating) ----------------------- */

.asb-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	align-items: center;
}

.asb-split + .asb-split { margin-top: 84px; }

.asb-split-reverse .asb-split-media { order: 2; }

@media (max-width: 1023px) {
	.asb-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.asb-split-reverse .asb-split-media { order: 0; }
	.asb-split + .asb-split { margin-top: 56px; }
}

.asb-split-media { position: relative; }

.asb-split-media img {
	width: 100%;
	border-radius: var(--asb-radius-lg);
	box-shadow: var(--asb-shadow-lg);
}

/* Checklist inside split copy. */
.asb-checklist { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.asb-checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--asb-ink); }

.asb-checklist .asb-icon { color: var(--asb-green); margin-top: 4px; width: 1.3em; height: 1.3em; }

.asb-checklist strong { font-weight: 600; }
.asb-checklist span { display: block; color: var(--asb-muted); font-size: .95rem; }

.asb-section-dark .asb-checklist li { color: rgba(255, 255, 255, .88); }
.asb-section-dark .asb-checklist .asb-icon { color: var(--asb-gold); }
.asb-section-dark .asb-checklist span { color: rgba(255, 255, 255, .65); }

/* ---- 11. Process steps --------------------------------------------------- */

.asb-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	counter-reset: asb-step;
}

.asb-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1023px) { .asb-steps, .asb-steps-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 679px) { .asb-steps, .asb-steps-3 { grid-template-columns: minmax(0, 1fr); } }

.asb-step {
	position: relative;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius);
	box-shadow: var(--asb-shadow-sm);
	counter-increment: asb-step;
}

.asb-step-num {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--asb-grad-hero);
	color: #fff;
	font-family: var(--asb-font-display);
	font-weight: 700;
	font-size: 1.05rem;
}

.asb-step-num::before { content: counter(asb-step, decimal-leading-zero); }

.asb-step-title {
	font-family: var(--asb-font-display);
	font-weight: 600;
	font-size: 1.08rem;
	margin: 0 0 6px;
	color: var(--asb-ink);
}

.asb-step-text { color: var(--asb-muted); font-size: .95rem; margin: 0; }

/* Vertical timeline variant. */
.asb-timeline { position: relative; padding-left: 34px; counter-reset: asb-step; }

.asb-timeline::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(var(--asb-blue-bright), rgba(46, 158, 72, .1));
	border-radius: 2px;
}

.asb-timeline-item { position: relative; padding-bottom: 28px; }
.asb-timeline-item:last-child { padding-bottom: 0; }

.asb-timeline-item::before {
	content: "";
	position: absolute;
	left: -30px;
	top: 7px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--asb-blue-bright);
	box-shadow: 0 0 0 4px var(--asb-sky);
}

/* ---- 12. Testimonials ---------------------------------------------------- */

.asb-quote-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 30px;
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius);
	box-shadow: var(--asb-shadow-sm);
}

.asb-quote-text { margin: 0; color: var(--asb-ink); font-size: 1.02rem; line-height: 1.7; }
.asb-quote-text::before { content: "\201C"; color: var(--asb-blue-bright); font-family: var(--asb-font-display); font-weight: 700; }
.asb-quote-text::after { content: "\201D"; color: var(--asb-blue-bright); font-family: var(--asb-font-display); font-weight: 700; }

.asb-quote-person { display: flex; align-items: center; gap: 12px; margin-top: auto; }

.asb-quote-name { font-weight: 600; color: var(--asb-ink); font-size: .97rem; display: block; line-height: 1.3; }
.asb-quote-role { color: var(--asb-muted); font-size: .86rem; }

/* Star rating. */
.asb-stars { display: inline-flex; gap: 2px; color: var(--asb-gold); }
.asb-stars .asb-icon { width: 1em; height: 1em; fill: currentColor; stroke: none; }

/* Avatars. */
.asb-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.asb-avatar-sm { width: 38px; height: 38px; }
.asb-avatar-lg { width: 64px; height: 64px; }

.asb-avatar-fallback {
	display: inline-grid;
	place-items: center;
	background: var(--asb-sky);
	color: var(--asb-blue);
	font-weight: 600;
	font-size: .9rem;
}

.asb-avatar-stack { display: flex; }
.asb-avatar-stack .asb-avatar { border: 2px solid #fff; margin-left: -10px; }
.asb-avatar-stack .asb-avatar:first-child { margin-left: 0; }

/* ---- 13. Logo wall and marquee ------------------------------------------- */

.asb-logo-wall {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 44px;
}

.asb-logo-wall img,
.asb-logo-item {
	height: 34px;
	width: auto;
	opacity: .6;
	filter: grayscale(1);
	transition: opacity .2s var(--asb-ease), filter .2s var(--asb-ease);
}

.asb-logo-wall img:hover, .asb-logo-item:hover { opacity: 1; filter: none; }

/* Marquee: [data-asb-marquee] wraps one .asb-marquee-track; JS clones the
   track for a seamless loop. Falls back to a static wrapped row. */
.asb-marquee {
	display: flex;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.asb-marquee-track {
	display: flex;
	align-items: center;
	gap: 56px;
	padding-right: 56px;
	flex: 0 0 auto;
	min-width: 100%;
	justify-content: space-around;
}

.asb-marquee.is-animated .asb-marquee-track { animation: asb-marquee 32s linear infinite; justify-content: flex-start; }
.asb-marquee:hover .asb-marquee-track { animation-play-state: paused; }

@keyframes asb-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

/* ---- 14. Pricing, FAQ accordion, tabs ------------------------------------ */

.asb-price-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius-lg);
	box-shadow: var(--asb-shadow-sm);
	position: relative;
}

.asb-price-card-featured {
	border-color: rgba(46, 158, 72, .45);
	box-shadow: var(--asb-shadow-lg);
}

.asb-price-flag {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: var(--asb-gold);
	color: var(--asb-navy);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	box-shadow: 0 6px 16px -8px rgba(244, 183, 64, .8);
}

.asb-price-amount {
	font-family: var(--asb-font-display);
	font-weight: 800;
	font-size: 2.3rem;
	letter-spacing: -.02em;
	color: var(--asb-ink);
	line-height: 1;
}

.asb-price-prefix { display: block; font-size: .88rem; font-weight: 500; color: var(--asb-muted); margin-bottom: 6px; }
.asb-price-period { font-size: 1rem; font-weight: 500; color: var(--asb-muted); letter-spacing: 0; }

.asb-price-card .asb-checklist { margin-bottom: 8px; }
.asb-price-card .asb-btn { justify-content: center; }

/* FAQ accordion: <div data-asb-accordion><details class="asb-acc-item">... */
.asb-accordion { display: flex; flex-direction: column; gap: 12px; }

.asb-acc-item {
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius-sm);
	overflow: hidden;
	transition: border-color .2s var(--asb-ease), box-shadow .2s var(--asb-ease);
}

.asb-acc-item[open] { border-color: rgba(46, 158, 72, .35); box-shadow: var(--asb-shadow-sm); }

.asb-acc-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-family: var(--asb-font-display);
	font-size: 1.02rem;
	color: var(--asb-ink);
}

.asb-acc-item summary::-webkit-details-marker { display: none; }

.asb-acc-item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--asb-blue);
	border-bottom: 2px solid var(--asb-blue);
	transform: rotate(45deg);
	transition: transform .2s var(--asb-ease);
	margin-top: -4px;
}

.asb-acc-item[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }

.asb-acc-body { padding: 0 22px 20px; color: var(--asb-muted); }
.asb-acc-body p { margin: 0 0 .8em; }
.asb-acc-body p:last-child { margin-bottom: 0; }

/* Tabs: [data-asb-tabs] > .asb-tab-list buttons + .asb-tab-panel siblings. */
.asb-tab-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 26px;
}

.asb-tab-btn {
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid var(--asb-line);
	background: #fff;
	color: var(--asb-muted);
	font-family: var(--asb-font-text);
	font-size: .93rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s var(--asb-ease), color .15s var(--asb-ease), border-color .15s var(--asb-ease);
}

.asb-tab-btn:hover { border-color: var(--asb-blue); color: var(--asb-blue); }

.asb-tab-btn[aria-selected="true"] {
	background: var(--asb-blue);
	border-color: var(--asb-blue);
	color: #fff;
}

.asb-tab-panel[hidden] { display: none; }

/* ---- 15. Forms ------------------------------------------------------------ */

.asb-form { display: flex; flex-direction: column; gap: 18px; }

.asb-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

@media (max-width: 679px) { .asb-form-row { grid-template-columns: minmax(0, 1fr); } }

.asb-field { display: flex; flex-direction: column; gap: 7px; }

.asb-field label {
	font-weight: 600;
	font-size: .92rem;
	color: var(--asb-ink);
}

.asb-field .asb-req { color: var(--asb-red); }

.asb-input, .asb-select, .asb-textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1.5px solid var(--asb-line);
	border-radius: var(--asb-radius-sm);
	background: #fff;
	color: var(--asb-ink);
	font-family: var(--asb-font-text);
	font-size: .98rem;
	line-height: 1.4;
	transition: border-color .15s var(--asb-ease), box-shadow .15s var(--asb-ease);
	appearance: none;
}

.asb-textarea { min-height: 130px; resize: vertical; }

.asb-input::placeholder, .asb-textarea::placeholder { color: #9AA3B8; }

.asb-input:focus, .asb-select:focus, .asb-textarea:focus {
	outline: none;
	border-color: var(--asb-blue-bright);
	box-shadow: 0 0 0 4px rgba(63, 187, 94, .14);
}

.asb-input[aria-invalid="true"], .asb-textarea[aria-invalid="true"] {
	border-color: var(--asb-red);
}

.asb-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%234A5670' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 42px;
}

.asb-field-hint { color: var(--asb-muted); font-size: .85rem; }

.asb-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .93rem;
	color: var(--asb-muted);
	font-weight: 400;
}

.asb-check input {
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: var(--asb-blue);
	flex: 0 0 auto;
}

/* Honeypot field: visually hidden, still in the DOM for bots. */
.asb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Forms sitting on dark bands. */
.asb-section-dark .asb-field label { color: #fff; }
.asb-section-dark .asb-field-hint, .asb-section-dark .asb-check { color: rgba(255, 255, 255, .65); }

/* Form panel: the framed white box a form usually sits in. */
.asb-panel {
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius-lg);
	box-shadow: var(--asb-shadow);
	padding: 36px;
}

@media (max-width: 679px) { .asb-panel { padding: 24px; } }

/* ---- 16. Tables ----------------------------------------------------------- */

.asb-table-wrap { overflow-x: auto; border: 1px solid var(--asb-line); border-radius: var(--asb-radius-sm); }

.asb-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }

.asb-table th, .asb-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--asb-line); }

.asb-table thead th {
	background: var(--asb-surface);
	font-family: var(--asb-font-display);
	font-weight: 600;
	font-size: .88rem;
	color: var(--asb-ink);
	white-space: nowrap;
}

.asb-table tbody tr:last-child td { border-bottom: 0; }
.asb-table tbody tr:hover { background: var(--asb-surface); }

.asb-table .asb-icon-yes { color: var(--asb-green); }
.asb-table .asb-icon-no { color: #C3CAD9; }

/* Pricing turns into labelled service cards on phones instead of requiring
   visitors to pan a wide three-column table. */
@media (max-width: 679px) {
	.asb-table-wrap { overflow: visible; border: 0; border-radius: 0; }
	.asb-table, .asb-table tbody, .asb-table tr, .asb-table td { display: block; width: 100%; min-width: 0; }
	.asb-table { font-size: .94rem; }
	.asb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.asb-table tbody { display: grid; gap: 14px; }
	.asb-table tbody tr { padding: 4px 0; border: 1px solid var(--asb-line); border-radius: var(--asb-radius-sm); background: #fff; box-shadow: var(--asb-shadow-sm); }
	.asb-table tbody tr:hover { background: #fff; }
	.asb-table td { display: grid; grid-template-columns: minmax(92px, .72fr) minmax(0, 1.28fr); gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--asb-line); }
	.asb-table td:last-child { border-bottom: 0; }
	.asb-table td::before { content: attr(data-label); color: var(--asb-muted); font-size: .76rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
	.asb-table td:first-child { padding-top: 16px; }
	.asb-table-price { align-items: center; color: var(--asb-ink); }
}

/* ---- 17. Media frames ----------------------------------------------------- */

/* Simple framed image. */
.asb-frame { border-radius: var(--asb-radius-lg); overflow: hidden; box-shadow: var(--asb-shadow-lg); }
.asb-frame img { display: block; width: 100%; }

/* Browser chrome mockup for portfolio screenshots. */
.asb-browser {
	border-radius: var(--asb-radius);
	overflow: hidden;
	border: 1px solid var(--asb-line);
	box-shadow: var(--asb-shadow-lg);
	background: #fff;
}

.asb-browser-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: var(--asb-surface);
	border-bottom: 1px solid var(--asb-line);
}

.asb-browser-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--asb-line); }
.asb-browser-dot:nth-child(1) { background: #F87171; }
.asb-browser-dot:nth-child(2) { background: #FBBF24; }
.asb-browser-dot:nth-child(3) { background: #34D399; }

.asb-browser-url {
	margin-left: 10px;
	flex: 1;
	padding: 4px 12px;
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: 999px;
	color: var(--asb-muted);
	font-size: .76rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.asb-browser img { display: block; width: 100%; }

/* Video thumb with play button (opens the real video). */
.asb-video {
	position: relative;
	display: block;
	border-radius: var(--asb-radius);
	overflow: hidden;
	box-shadow: var(--asb-shadow-lg);
}

.asb-video img { display: block; width: 100%; transition: transform .3s var(--asb-ease); }
.asb-video:hover img { transform: scale(1.03); }

.asb-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(12, 30, 62, .05), rgba(12, 30, 62, .35));
}

.asb-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: var(--asb-blue);
	box-shadow: 0 16px 40px -12px rgba(12, 30, 62, .6);
	transition: transform .2s var(--asb-ease);
}

.asb-video:hover .asb-video-play { transform: translate(-50%, -50%) scale(1.08); }
.asb-video-play .asb-icon { width: 30px; height: 30px; margin-left: 3px; }

/* ---- 18. CTA band and funnel-end pages ------------------------------------ */

.asb-cta-band {
	background:
		radial-gradient(70% 120% at 80% -20%, rgba(63, 187, 94, .35), transparent 60%),
		var(--asb-navy);
	color: #fff;
}

.asb-cta-band-inner { text-align: center; }
.asb-cta-band .asb-h2 { color: #fff; }
.asb-cta-band .asb-sub { color: rgba(255, 255, 255, .78); margin-left: auto; margin-right: auto; }
.asb-cta-band .asb-hero-actions { justify-content: center; }

.asb-funnel-end { padding: 110px 0; }
.asb-funnel-end-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.asb-funnel-end .asb-hero-actions { justify-content: center; }

/* ---- 19. Prose, insights, pagination, 404 --------------------------------- */

.asb-prose { font-size: 1.03rem; color: var(--asb-ink); }
.asb-prose h2, .asb-prose h3 { font-family: var(--asb-font-display); letter-spacing: -.01em; margin: 1.6em 0 .5em; }
.asb-prose p { margin: 0 0 1.1em; }
.asb-prose img { border-radius: var(--asb-radius-sm); }
.asb-prose ul, .asb-prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.asb-prose li { margin-bottom: .4em; }
.asb-prose blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--asb-blue-bright);
	color: var(--asb-muted);
	font-style: italic;
}

.asb-post-thumb { margin: 0 0 28px; }
.asb-post-thumb img { border-radius: var(--asb-radius); width: 100%; }

.asb-blog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius);
	overflow: hidden;
	box-shadow: var(--asb-shadow-sm);
	transition: transform .2s var(--asb-ease), box-shadow .2s var(--asb-ease);
}

.asb-blog-card:hover { transform: translateY(-4px); box-shadow: var(--asb-shadow); }

.asb-blog-card-media { display: block; aspect-ratio: 16 / 9; background: var(--asb-sky); overflow: hidden; }
.asb-blog-card-media img { width: 100%; height: 100%; object-fit: cover; }

.asb-blog-card-fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--asb-blue);
}

.asb-blog-card-fallback .asb-icon { width: 36px; height: 36px; }

.asb-blog-card-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; }
.asb-blog-card-date { font-size: .82rem; color: var(--asb-muted); }

.asb-blog-card-title {
	font-family: var(--asb-font-display);
	font-weight: 600;
	font-size: 1.06rem;
	color: var(--asb-ink);
	letter-spacing: -.01em;
}

.asb-blog-card-excerpt { color: var(--asb-muted); font-size: .93rem; }

.asb-pagination { margin-top: 40px; text-align: center; }
.asb-pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 12px;
	border-radius: 12px;
	border: 1px solid var(--asb-line);
	color: var(--asb-ink);
	font-weight: 600;
	font-size: .93rem;
	margin: 0 3px;
}
.asb-pagination .page-numbers.current { background: var(--asb-blue); border-color: var(--asb-blue); color: #fff; }
.asb-pagination .page-numbers:hover { border-color: var(--asb-blue); color: var(--asb-blue); }
.asb-pagination .page-numbers.current:hover { color: #fff; }

.asb-empty { text-align: center; color: var(--asb-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 0; }

.asb-404 { padding: 110px 0; }
.asb-404-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.asb-404-code {
	font-family: var(--asb-font-display);
	font-weight: 800;
	font-size: clamp(4rem, 12vw, 7rem);
	line-height: 1;
	background: var(--asb-grad-hero);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.asb-404 .asb-hero-actions { justify-content: center; }

/* Breadcrumbs. */
.asb-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .87rem;
	color: var(--asb-muted);
	margin: 0 0 18px;
}

.asb-crumbs a { color: var(--asb-muted); }
.asb-crumbs a:hover { color: var(--asb-blue); }
.asb-crumbs .asb-icon { width: .9em; height: .9em; opacity: .6; }

/* Divider ornament between sections. */
.asb-divider {
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(90deg, transparent, var(--asb-line), transparent);
}

/* ---- 20. Footer and WhatsApp float ---------------------------------------- */

.asb-footer {
	background: var(--asb-navy);
	color: rgba(255, 255, 255, .8);
	padding: 64px 0 28px;
	font-size: .95rem;
}

.asb-footer a { color: rgba(255, 255, 255, .8); }
.asb-footer a:hover { color: var(--asb-gold); }

.asb-footer-grid {
	display: grid;
	/* Size tracks to their content so the short Company column does not create
	   a noticeably wider empty space before Contact. */
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.05fr) minmax(0, .82fr) minmax(280px, 1.28fr);
	column-gap: clamp(32px, 3vw, 48px);
	row-gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

@media (max-width: 1023px) { .asb-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 679px) { .asb-footer-grid { grid-template-columns: 1fr; } }

.asb-logo-footer .asb-logo-name { color: #fff; }
.asb-logo-footer .asb-logo-tagline { color: rgba(255, 255, 255, .6); }
.asb-logo-footer .asb-logo-img {
	height: 60px;
	max-width: min(260px, 72vw);
}

@media (max-width: 679px) {
	.asb-logo-img { height: 48px; }
}

.asb-footer-about { margin: 16px 0 18px; max-width: 340px; }

.asb-footer-social { display: flex; gap: 10px; }

.asb-social-link {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .08);
	transition: background .15s var(--asb-ease), color .15s var(--asb-ease);
}

.asb-social-link:hover { background: var(--asb-gold); color: var(--asb-navy); }
.asb-social-link .asb-icon { width: 18px; height: 18px; }

.asb-footer-title {
	font-family: var(--asb-font-display);
	color: #fff;
	font-size: .98rem;
	font-weight: 600;
	margin: 6px 0 16px;
}

.asb-footer-list { list-style: none; margin: 0; padding: 0; }
.asb-footer-list li { margin: 0 0 10px; }

.asb-footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.asb-footer-contact .asb-icon { margin-top: 4px; color: var(--asb-gold); }

.asb-footer-bottom { padding-top: 24px; text-align: center; font-size: .88rem; color: rgba(255, 255, 255, .55); }
.asb-footer-credit { margin-left: 8px; }
.asb-footer-legal { display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
.asb-footer-legal a { color: rgba(255, 255, 255, .72); text-decoration: underline; text-underline-offset: 3px; }
.asb-footer-legal a:hover { color: #fff; }

/* Service cards use a single, predictable image treatment and a real CTA. */
.asb-service-card { overflow: hidden; }
.asb-service-card-media { width: 100%; aspect-ratio: 16 / 9; margin: -28px -28px 14px; width: calc(100% + 56px); overflow: hidden; background: var(--asb-surface); }
.asb-service-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.asb-service-card .asb-card-title {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.25;
}
.asb-service-card .asb-card-text { margin: 0; }
.asb-service-card-cta { margin-top: auto; align-self: flex-start; }

.asb-wa-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	box-shadow: 0 12px 28px -10px rgba(37, 211, 102, .65);
	transition: transform .18s var(--asb-ease);
}

.asb-wa-float:hover { transform: translateY(-3px) scale(1.05); color: #fff; }
.asb-wa-float .asb-icon { width: 28px; height: 28px; }

/* ---- 21. Animations and utilities ----------------------------------------- */

/* Reveal on scroll. Default: rise. Variants via the attribute value:
   data-reveal="left" | "right" | "scale" | "fade". */
[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--asb-ease), transform .6s var(--asb-ease);
}

[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="fade"] { transform: none; }

[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Stagger: parent carries data-reveal-stagger; JS assigns each direct child
   a growing transition delay and reveals them together. */
[data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--asb-ease), transform .6s var(--asb-ease);
}

[data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; }

/* Count-up numbers: <span data-count-to="500" data-count-suffix="+">.
   JS animates the integer; markup should contain the final value as
   fallback text for no-JS/reduced-motion. */

/* Utilities. */
.asb-text-center { text-align: center; }
.asb-mt-0 { margin-top: 0; }
.asb-mb-0 { margin-bottom: 0; }
.asb-mt-16 { margin-top: 16px; }
.asb-mt-24 { margin-top: 24px; }
.asb-mt-40 { margin-top: 40px; }
.asb-mb-24 { margin-bottom: 24px; }
.asb-mb-40 { margin-bottom: 40px; }
.asb-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- 22. Homepage compositions (Phase 4) ---------------------------------- */

/* Hero visual: browser frame holding a mini "AI at work" dashboard, with
   floating notification cards. Pure CSS/inline SVG, no image assets. */
.asb-hero-home { padding-bottom: 96px; }

.asb-hero-visual { position: relative; }

.asb-hero-screen {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px;
	background: linear-gradient(180deg, #fff, var(--asb-surface));
}

.asb-hero-chat { display: flex; flex-direction: column; gap: 10px; }

.asb-hero-msg {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 88%;
	font-size: .9rem;
	line-height: 1.5;
}

.asb-hero-msg-user { align-self: flex-end; flex-direction: row-reverse; }

.asb-hero-msg-bubble {
	padding: 10px 15px;
	border-radius: 14px;
	border: 1px solid var(--asb-line);
	background: #fff;
	color: var(--asb-ink);
}

.asb-hero-msg-user .asb-hero-msg-bubble {
	background: var(--asb-sky);
	border-color: transparent;
	border-bottom-right-radius: 4px;
}

.asb-hero-msg-ai .asb-hero-msg-bubble { border-bottom-left-radius: 4px; }

.asb-hero-msg .asb-icon-badge { width: 34px; height: 34px; border-radius: 10px; }
.asb-hero-msg .asb-icon-badge .asb-icon { width: 18px; height: 18px; }

.asb-hero-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.asb-hero-metric {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius-sm);
	text-align: center;
}

.asb-hero-metric-value {
	font-family: var(--asb-font-display);
	font-weight: 700;
	font-size: 1.08rem;
	color: var(--asb-blue);
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.asb-hero-metric-label { color: var(--asb-muted); font-size: .74rem; font-weight: 500; }

.asb-hero-chart { display: block; width: 100%; height: 84px; }

.asb-hero-float {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 12px;
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: 14px;
	box-shadow: var(--asb-shadow);
	font-size: .88rem;
	animation: asb-float 7s ease-in-out infinite;
}

.asb-hero-float strong { display: block; color: var(--asb-ink); font-size: .9rem; line-height: 1.3; }
.asb-hero-float span { color: var(--asb-muted); font-size: .78rem; }

.asb-hero-float .asb-icon-badge { width: 38px; height: 38px; border-radius: 11px; }
.asb-hero-float .asb-icon-badge .asb-icon { width: 19px; height: 19px; }

.asb-hero-float-1 { top: 26px; left: -34px; }
.asb-hero-float-2 { bottom: 30px; right: -26px; animation-delay: -3.2s; }

@media (max-width: 1279px) {
	.asb-hero-float-1 { left: -10px; }
	.asb-hero-float-2 { right: -8px; }
}

@media (max-width: 1023px) {
	.asb-hero-visual { max-width: 560px; }
	.asb-hero-float-1 { left: 8px; }
	.asb-hero-float-2 { right: 8px; }
}

/* Automation flow: stacked event cards joined by a dashed spine. */
.asb-flow {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 30px;
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius-lg);
	box-shadow: var(--asb-shadow-lg);
}

.asb-flow-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.asb-flow-item + .asb-flow-item::before {
	content: "";
	position: absolute;
	left: 23px;
	top: -20px;
	height: 20px;
	border-left: 2px dashed var(--asb-line);
}

.asb-flow-item strong { display: block; color: var(--asb-ink); font-weight: 600; line-height: 1.35; }
.asb-flow-item span { display: block; color: var(--asb-muted); font-size: .92rem; }

/* Marquee name items (text placeholders until the Phase 6 client logos). */
.asb-proof-name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--asb-font-display);
	font-weight: 600;
	color: var(--asb-muted);
	white-space: nowrap;
}

.asb-proof-name .asb-icon { color: var(--asb-blue); opacity: .8; }

/* Section-22 odds and ends. */
.asb-section-dark .asb-note { color: rgba(255, 255, 255, .6); }
figure.asb-quote-card { margin: 0; }

/* Founder story: balanced editorial split with a compact portrait card. */
.asb-founder-section {
	overflow: hidden;
}

.asb-founder-layout {
	grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
	gap: clamp(48px, 5vw, 80px);
}

.asb-founder-copy {
	max-width: 650px;
}

.asb-founder-copy .asb-sub {
	max-width: 620px;
}

.asb-founder-layout .asb-split-media {
	width: 100%;
	max-width: 440px;
	justify-self: end;
}

.asb-founder-card {
	position: relative;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius-lg);
	box-shadow: var(--asb-shadow-lg);
	overflow: hidden;
}

.asb-founder-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--asb-grad-hero);
}

.asb-founder-photo-wrap {
	aspect-ratio: 6 / 5;
	overflow: hidden;
	border-radius: calc(var(--asb-radius-lg) - 8px);
	background: var(--asb-surface);
}

.asb-founder-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 0;
	box-shadow: none;
	transition: transform .45s ease;
}

.asb-founder-card:hover .asb-founder-photo {
	transform: scale(1.015);
}

.asb-founder-details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 22px 10px 8px;
}

.asb-founder-initials {
	width: 84px;
	height: 84px;
	border-radius: 24px;
	font-size: 1.6rem;
}

.asb-founder-name {
	font-family: var(--asb-font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--asb-ink);
	letter-spacing: -.01em;
	line-height: 1.2;
	margin: 0;
}

.asb-founder-role {
	color: var(--asb-muted);
	font-size: .94rem;
	line-height: 1.5;
	margin: -2px 0 4px;
}

.asb-founder-quote {
	width: 100%;
	margin: 6px 0 2px;
	padding: 7px 0 7px 18px;
	border-left: 3px solid var(--asb-gold);
	color: var(--asb-muted);
	font-style: italic;
	line-height: 1.55;
}

.asb-founder-details .asb-chips {
	margin-top: 6px;
}

@media (max-width: 1023px) {
	.asb-founder-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 38px;
	}

	.asb-founder-copy {
		max-width: 700px;
	}

	.asb-founder-layout .asb-split-media {
		max-width: 480px;
		justify-self: start;
	}
}

@media (max-width: 679px) {
	.asb-founder-layout {
		gap: 30px;
	}

	.asb-founder-card {
		padding: 14px;
		border-radius: 22px;
	}

	.asb-founder-photo-wrap {
		aspect-ratio: 1 / 1;
		border-radius: 15px;
	}

	.asb-founder-details {
		padding: 18px 7px 7px;
	}

	.asb-founder-name {
		font-size: 1.18rem;
	}
}

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

/* ---- 23. Service page compositions (Phase 5) ------------------------------ */

/* "From $X" line on the service catalog cards. */
.asb-card-price {
	color: var(--asb-blue);
	font-family: var(--asb-font-display);
	font-weight: 600;
	font-size: .93rem;
}

/* Service hero: two-column copy and a service-specific editorial illustration. */
.asb-svc-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
	gap: clamp(40px, 5vw, 76px);
	align-items: center;
}

.asb-svc-hero-copy { min-width: 0; }

.asb-svc-hero-visual {
	position: relative;
	margin: 0;
	aspect-ratio: 5 / 3;
	border: 1px solid rgba(11, 35, 69, .09);
	border-radius: clamp(22px, 2.2vw, 34px);
	background: #fdf8ef;
	box-shadow: 0 24px 58px rgba(11, 35, 69, .14);
	overflow: hidden;
	isolation: isolate;
}

.asb-svc-hero-visual::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border: 7px solid rgba(255, 255, 255, .62);
	border-radius: inherit;
	pointer-events: none;
}

.asb-svc-hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.asb-svc-hero-icon { margin-bottom: 18px; }

.asb-svc-price-line {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 24px;
}

.asb-svc-price-line .asb-note { margin: 0; }

.asb-price-chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(244, 183, 64, .16);
	border: 1px solid rgba(244, 183, 64, .55);
	color: var(--asb-navy);
	font-family: var(--asb-font-display);
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: -.01em;
	white-space: nowrap;
}

@media (max-width: 1100px) {
	.asb-svc-hero-grid {
		grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
		gap: 36px;
	}
}

@media (max-width: 900px) {
	.asb-svc-hero-grid { grid-template-columns: minmax(0, 1fr); }
	.asb-svc-hero-visual { width: min(100%, 680px); }
}

@media (max-width: 679px) {
	.asb-svc-hero { padding-top: 48px; }
	.asb-svc-hero-grid { gap: 32px; }
	.asb-svc-hero-visual { border-radius: 22px; }
}

/* Pricing tiers: room for the floating flag; two-card grids stay narrow. */
.asb-pricing-grid { margin-top: 14px; }
.asb-pricing-grid.asb-grid-2 { max-width: 880px; margin-left: auto; margin-right: auto; }

/* Services overview pricing table. */
.asb-table-service {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--asb-font-display);
	font-weight: 600;
	color: var(--asb-ink);
}

.asb-table-service .asb-icon { color: var(--asb-blue); flex: 0 0 auto; }
.asb-table-service:hover { color: var(--asb-blue); }

.asb-table-price {
	font-family: var(--asb-font-display);
	font-weight: 700;
	color: var(--asb-ink);
	white-space: nowrap;
}

/* Accessible-only text (WP convention). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- 24. Work page compositions (Phase 6) --------------------------------- */

/* Hero: count-up stats row under the hero copy. */
.asb-work-hero-stats {
	margin-top: 44px;
	padding-top: 30px;
	border-top: 1px solid var(--asb-line);
}

/* Case studies: alternating split rows. */
.asb-case-list { display: grid; gap: 72px; margin-top: 14px; }

.asb-case {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.asb-case:nth-child(even) .asb-case-media { order: 2; }

.asb-case-media .asb-browser img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top;
}

.asb-case-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 12px;
}

.asb-case-client {
	font-family: var(--asb-font-display);
	font-weight: 700;
	font-size: .92rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--asb-blue);
}

.asb-case-title { font-size: 1.55rem; margin-bottom: 12px; }
.asb-case-text { color: var(--asb-muted); margin: 0 0 18px; }

.asb-case-chips {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.asb-case-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	color: var(--asb-ink);
}

.asb-case-chip .asb-icon { color: var(--asb-blue); flex: 0 0 auto; }

/* CSS-built product mock for case studies without a screenshot. */
.asb-case-mock .asb-case-mock-screen {
	aspect-ratio: 4 / 3;
	padding: 24px;
	display: grid;
	gap: 16px;
	align-content: start;
	background: linear-gradient(180deg, var(--asb-sky), #fff 70%);
}

.asb-case-mock-hero {
	background: var(--asb-grad-hero);
	border-radius: var(--asb-radius);
	padding: 28px;
	display: grid;
	gap: 12px;
	justify-items: start;
}

.asb-case-mock-logo {
	width: 56px;
	height: 56px;
	border-radius: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	font-family: var(--asb-font-display);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: .02em;
}

.asb-case-mock-bar { width: 70%; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .42); }
.asb-case-mock-bar-short { width: 45%; background: rgba(255, 255, 255, .24); }

.asb-case-mock-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.asb-case-mock-cards span {
	height: 64px;
	border-radius: var(--asb-radius-sm);
	background: #fff;
	border: 1px solid var(--asb-line);
	box-shadow: var(--asb-shadow-sm);
}

/* Portfolio gallery: browser-framed screenshot cards. */
.asb-work-grid { margin-top: 14px; }

.asb-work-card { display: block; text-decoration: none; }

.asb-work-card .asb-browser {
	display: block;
	transition: transform .25s var(--asb-ease), box-shadow .25s var(--asb-ease);
}

a.asb-work-card:hover .asb-browser,
a.asb-work-card:focus-visible .asb-browser {
	transform: translateY(-4px);
	box-shadow: var(--asb-shadow-lg);
}

.asb-work-card .asb-browser img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top;
	display: block;
}

.asb-work-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 12px 6px 0;
}

.asb-work-card-name { font-family: var(--asb-font-display); font-weight: 600; color: var(--asb-ink); }
.asb-work-card-industry { color: var(--asb-muted); font-size: .88rem; text-align: right; }

/* Video testimonials: native players in navy frames. */
.asb-work-video { margin: 0; }

.asb-work-video-frame {
	aspect-ratio: 16 / 9;
	border-radius: var(--asb-radius-lg);
	overflow: hidden;
	background: var(--asb-navy);
	box-shadow: var(--asb-shadow);
}

.asb-work-video-frame video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.asb-work-video .asb-quote-person { margin-top: 14px; }

@media (max-width: 1023px) {
	.asb-case { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.asb-case:nth-child(even) .asb-case-media { order: 0; }
	.asb-case-list { gap: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
	.asb-btn, .asb-card, .asb-blog-card, .asb-video img, .asb-video-play, .asb-work-card .asb-browser { transition: none; }
	.asb-orb, .asb-hero-float { animation: none; }
	.asb-marquee.is-animated .asb-marquee-track { animation: none; }
	.asb-marquee { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
}

/* ---- 25. About, Contact, and Insights compositions (Phase 7) -------------- */

/* About: story paragraphs and the journey year chips. */
.asb-about-para { margin-bottom: 1em; }
.asb-timeline-item .asb-about-year { margin-bottom: 8px; }

/* About hero: the leadership image is a Page Designer field, not a fixed
   decoration, so a growing team can keep this first impression current. */
.asb-about-hero { padding: 72px 0; }
.asb-about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .72fr); align-items: center; gap: 56px; }
.asb-about-hero-copy .asb-sub { margin-bottom: 26px; }
.asb-about-hero-media { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border: 7px solid rgba(255, 255, 255, .92); border-radius: 50% 50% 34% 34%; background: var(--asb-sky); box-shadow: 0 30px 72px -34px rgba(12, 30, 62, .42); }
.asb-about-hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .16), transparent 45%, rgba(12, 30, 62, .1)); }
.asb-about-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 1023px) { .asb-about-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .asb-about-hero-media { width: min(100%, 420px); } }
@media (max-width: 679px) { .asb-about-hero { padding: 54px 0; } .asb-about-hero-media { border-width: 5px; border-radius: 44% 44% 28% 28%; } }

/* About: team cards. */
.asb-team-card {
	background: #fff;
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius);
	overflow: hidden;
	box-shadow: var(--asb-shadow-sm);
	text-align: center;
	transition: transform .2s var(--asb-ease), box-shadow .2s var(--asb-ease);
}

.asb-team-card:hover { transform: translateY(-4px); box-shadow: var(--asb-shadow); }

.asb-team-photo {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--asb-sky);
}

.asb-team-initials {
	display: grid;
	place-items: center;
	font-family: var(--asb-font-display);
	font-weight: 700;
	font-size: 2.6rem;
	color: var(--asb-blue);
	letter-spacing: .04em;
}

.asb-team-name {
	display: block;
	font-family: var(--asb-font-display);
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--asb-ink);
	padding: 16px 16px 2px;
}

.asb-team-role {
	display: block;
	font-size: .88rem;
	color: var(--asb-muted);
	padding: 0 16px 18px;
}

/* About: recognition media strip (sits on the dark band). */
.asb-media-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
}

.asb-media-label { font-size: .87rem; color: var(--asb-muted); margin-right: 4px; }
.asb-section-dark .asb-media-label { color: rgba(255, 255, 255, .65); }

/* Insights: card meta row (category + date). */
.asb-blog-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.asb-blog-card-cat {
	display: inline-block;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--asb-blue);
	background: var(--asb-sky);
	border-radius: 999px;
	padding: 3px 10px;
}

/* Insights: featured latest article (wide split card). */
.asb-blog-featured-wrap { margin-bottom: 28px; }

.asb-blog-featured { display: grid; grid-template-columns: 1.15fr 1fr; }

.asb-blog-featured .asb-blog-card-media { aspect-ratio: auto; min-height: 280px; height: 100%; }

.asb-blog-featured .asb-blog-card-body {
	padding: 30px 32px;
	justify-content: center;
	gap: 10px;
}

.asb-blog-featured .asb-blog-card-title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.asb-blog-featured .asb-blog-card-excerpt { font-size: 1rem; }
.asb-blog-featured .asb-link-more { margin-top: 6px; }

/* Article: hero meta line. */
.asb-post-hero .asb-hero-inner {
	max-width: 980px;
	margin-inline: auto;
	text-align: center;
}

.asb-post-hero .asb-kicker { display: table; margin-inline: auto; }

.asb-post-meta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	color: var(--asb-muted);
	font-size: .92rem;
	margin: 14px 0 0;
}

/* Article: share bar. */
.asb-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid var(--asb-line);
}

.asb-share-label { font-size: .9rem; font-weight: 600; color: var(--asb-ink); margin-right: 6px; }

.asb-share-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--asb-line);
	background: #fff;
	color: var(--asb-ink);
	cursor: pointer;
	transition: color .2s var(--asb-ease), border-color .2s var(--asb-ease), transform .2s var(--asb-ease);
}

.asb-share-btn:hover { color: var(--asb-blue); border-color: var(--asb-blue); transform: translateY(-2px); }
.asb-share-btn .asb-icon { width: 18px; height: 18px; }
.asb-share-btn .asb-share-check { display: none; color: var(--asb-success, #1c9b57); }
.asb-share-btn.is-copied .asb-share-check { display: block; }
.asb-share-btn.is-copied .asb-icon:not(.asb-share-check) { display: none; }
.asb-share-btn.is-copied { border-color: var(--asb-success, #1c9b57); }

/* Article: author box. */
.asb-author-box {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 22px;
	padding: 20px 22px;
	background: var(--asb-surface);
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-radius);
}

.asb-author-box .asb-author-avatar { border-radius: 50%; flex-shrink: 0; }
.asb-author-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--asb-muted); }
.asb-author-name { display: block; font-family: var(--asb-font-display); font-weight: 600; color: var(--asb-ink); margin-top: 2px; }
.asb-author-bio { margin: 6px 0 0; font-size: .92rem; color: var(--asb-muted); }

@media (max-width: 767px) {
	.asb-blog-featured { grid-template-columns: minmax(0, 1fr); }
	.asb-blog-featured .asb-blog-card-media { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
}

/* ---- 26. Booking and forms (Phase 8) -------------------------------------- */

/* Consultation landing page: the form begins in the first viewport instead
   of sitting below a hero and a separate benefits section. */
.asb-consult-hero {
	position: relative;
	padding: 42px 0 72px;
	background:
		radial-gradient(60% 70% at 88% 0%, rgba(63, 187, 94, .12), transparent 62%),
		radial-gradient(45% 65% at 8% 0%, rgba(244, 183, 64, .09), transparent 58%),
		var(--asb-surface);
}

.asb-consult-layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(520px, 7fr);
	gap: clamp(34px, 5vw, 72px);
	align-items: start;
}

.asb-consult-intro { padding-top: 24px; }
.asb-consult-intro .asb-h1 { max-width: 650px; }
.asb-consult-intro .asb-sub { max-width: 590px; margin-bottom: 0; }

.asb-consult-panel {
	position: relative;
	z-index: 1;
	padding: clamp(24px, 3vw, 36px);
	box-shadow: 0 22px 55px rgba(16, 39, 68, .12);
}

.asb-consult-benefits {
	display: grid;
	gap: 14px;
	margin-top: 32px;
}

.asb-consult-benefits-title {
	margin: 0 0 2px;
	color: var(--asb-ink);
	font-family: var(--asb-font-display);
	font-weight: 600;
	font-size: 1.05rem;
}

.asb-consult-benefit { display: flex; gap: 12px; align-items: flex-start; }
.asb-consult-benefit .asb-icon-badge { flex: none; width: 36px; height: 36px; border-radius: 10px; }
.asb-consult-benefit .asb-icon-badge .asb-icon { width: 18px; height: 18px; }
.asb-consult-benefit strong { display: block; color: var(--asb-ink); font-size: .95rem; line-height: 1.35; }
.asb-consult-benefit small { display: block; margin-top: 2px; color: var(--asb-muted); font-size: .85rem; line-height: 1.45; }

@media (max-width: 1023px) {
	.asb-consult-layout { grid-template-columns: minmax(0, 1fr) minmax(460px, 1.05fr); gap: 28px; }
	.asb-consult-intro { padding-top: 12px; }
}

@media (max-width: 767px) {
	.asb-consult-hero { padding: 24px 0 48px; }
	.asb-consult-layout { display: flex; flex-direction: column; gap: 22px; }
	.asb-consult-intro { display: contents; }
	.asb-consult-intro > .asb-kicker,
	.asb-consult-intro > .asb-h1,
	.asb-consult-intro > .asb-sub { margin-left: 0; margin-right: 0; }
	.asb-consult-intro > .asb-kicker { order: 1; margin-bottom: -10px; }
	.asb-consult-intro > .asb-h1 { order: 2; margin-bottom: -12px; }
	.asb-consult-intro > .asb-sub { order: 3; }
	.asb-consult-panel { order: 4; width: 100%; padding: 22px 18px; }
	.asb-consult-benefits { order: 5; margin-top: 4px; }
}

/* Inline notices (form feedback, cancel confirmations). */
.asb-notice {
	display: block;
	margin: 0 auto 26px;
	max-width: 720px;
	padding: 13px 18px;
	border-radius: var(--asb-radius);
	font-size: .95rem;
	font-weight: 500;
	border: 1px solid transparent;
}

.asb-notice-success { background: #EBF9F0; border-color: #BFE8CF; color: #14532D; }
.asb-notice-error { background: #FDEEEE; border-color: #F5C6C6; color: #7F1D1D; }

/* Booking page layout: benefits beside the booking panel. */
.asb-book-layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 34px;
	align-items: start;
}

@media (max-width: 899px) { .asb-book-layout { grid-template-columns: minmax(0, 1fr); } }

.asb-book-aside { position: sticky; top: 96px; }

@media (max-width: 899px) { .asb-book-aside { position: static; } }

.asb-book-benefits { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }

.asb-book-benefit { display: flex; gap: 14px; align-items: flex-start; }

.asb-book-benefit .asb-card-title { display: block; margin-bottom: 3px; }

.asb-book-trust {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 22px;
	padding: 14px 16px;
	border-radius: var(--asb-radius);
	background: var(--asb-surface);
	color: var(--asb-muted);
	font-size: .9rem;
}

.asb-book-trust .asb-i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--asb-blue); }

/* Booking panel steps. */
.asb-book-step { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }

.asb-book-step-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--asb-font-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--asb-ink);
	margin-bottom: 14px;
}

.asb-book-step-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--asb-blue);
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
}

.asb-book-tz { margin: -6px 0 12px; }

/* Day chips (built by theme.js; server-rendered day groups are the
   no-JS fallback). */
.asb-book-days {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.asb-book-day-chip {
	appearance: none;
	border: 1.5px solid var(--asb-line);
	background: #fff;
	border-radius: 999px;
	padding: 8px 15px;
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	color: var(--asb-ink);
	cursor: pointer;
	transition: border-color .18s var(--asb-ease), background .18s var(--asb-ease), color .18s var(--asb-ease);
}

.asb-book-day-chip:hover { border-color: var(--asb-blue); color: var(--asb-blue); }

.asb-book-day-chip.is-active {
	background: var(--asb-blue);
	border-color: var(--asb-blue);
	color: #fff;
}

.asb-book-day-label { font-weight: 600; color: var(--asb-muted); font-size: .9rem; margin: 12px 0 8px; }

.asb-book-slots.is-tabbed .asb-book-day-label { display: none; }

/* Slot chips. */
.asb-slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
}

.asb-slot { position: relative; display: block; }

.asb-slot input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}

.asb-slot span {
	display: block;
	text-align: center;
	padding: 10px 6px;
	border: 1.5px solid var(--asb-line);
	border-radius: var(--asb-radius-sm);
	font-size: .92rem;
	font-weight: 600;
	color: var(--asb-ink);
	transition: border-color .18s var(--asb-ease), background .18s var(--asb-ease), color .18s var(--asb-ease), box-shadow .18s var(--asb-ease);
}

.asb-slot:hover span { border-color: var(--asb-blue); color: var(--asb-blue); }

.asb-slot input:checked + span {
	background: var(--asb-blue);
	border-color: var(--asb-blue);
	color: #fff;
	box-shadow: var(--asb-shadow-sm);
}

.asb-slot input:focus-visible + span { outline: 2px solid var(--asb-blue); outline-offset: 2px; }

.asb-book-note { margin-top: 10px; }

.asb-book-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; }

/* Booking-confirmed context card. */
.asb-section-flush { padding-top: 0; }

.asb-book-confirmed { display: flex; flex-direction: column; gap: 18px; }

.asb-book-confirmed-row { display: flex; gap: 16px; align-items: center; }

.asb-book-confirmed-when {
	font-family: var(--asb-font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--asb-ink);
	margin: 0;
}

/* ---- 27. AI assistant widget (Phase 9) ----------------------------------- */

/* Launcher: a branded pill stacked above the WhatsApp float. */
.asb-assistant { font-family: var(--asb-font-text); }

.asb-assistant-launcher {
	position: fixed;
	right: 22px;
	bottom: 92px;
	z-index: 120;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 20px 13px 16px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--asb-blue), #0E2E80);
	color: #fff;
	font-family: var(--asb-font-display);
	font-weight: 600;
	font-size: .92rem;
	cursor: pointer;
	box-shadow: 0 12px 28px -10px rgba(46, 158, 72, .6);
	transition: transform .18s var(--asb-ease), box-shadow .18s var(--asb-ease);
}

.asb-assistant-launcher:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -12px rgba(46, 158, 72, .7); }
.asb-assistant-launcher .asb-assistant-spark { width: 20px; height: 20px; color: var(--asb-gold); }
.asb-assistant.is-open .asb-assistant-launcher { opacity: 0; pointer-events: none; }

/* Panel. */
.asb-assistant-panel {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 130;
	display: flex;
	flex-direction: column;
	width: min(392px, calc(100vw - 32px));
	height: min(600px, calc(100dvh - 44px));
	background: #fff;
	border: 1px solid rgba(12, 30, 62, .08);
	border-radius: var(--asb-radius-lg);
	box-shadow: var(--asb-shadow-lg);
	overflow: hidden;
}

.asb-assistant-panel[hidden] { display: none; }

.asb-assistant-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--asb-blue), #0E2E80);
	color: #fff;
}

.asb-assistant-avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 12px;
	background: rgba(255, 255, 255, .14);
	color: var(--asb-gold);
}

.asb-assistant-avatar svg { width: 22px; height: 22px; }
.asb-assistant-head-text { flex: 1; min-width: 0; }

.asb-assistant-title {
	margin: 0;
	font-family: var(--asb-font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
}

.asb-assistant-tagline {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 0;
	font-size: .78rem;
	color: rgba(255, 255, 255, .78);
}

.asb-assistant-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0 3px rgba(52, 211, 153, .25);
}

.asb-assistant-close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
	transition: background .15s var(--asb-ease), color .15s var(--asb-ease);
}

.asb-assistant-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.asb-assistant-close svg { width: 18px; height: 18px; }

/* Conversation. */
.asb-assistant-messages {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #F7F9FE;
}

.asb-assistant-msg {
	max-width: 86%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: .92rem;
	line-height: 1.55;
	overflow-wrap: break-word;
}

.asb-assistant-msg-assistant {
	align-self: flex-start;
	background: #fff;
	color: var(--asb-ink);
	border: 1px solid rgba(12, 30, 62, .07);
	border-bottom-left-radius: 6px;
	box-shadow: var(--asb-shadow-sm);
}

.asb-assistant-msg-user {
	align-self: flex-end;
	background: var(--asb-blue);
	color: #fff;
	border-bottom-right-radius: 6px;
}

.asb-assistant-msg a { color: var(--asb-blue); font-weight: 600; text-decoration: underline; }
.asb-assistant-msg-user a { color: #fff; }

/* Typing indicator. */
.asb-assistant-typing { display: inline-flex; gap: 5px; padding: 14px 16px; }

.asb-assistant-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--asb-muted);
	opacity: .5;
	animation: asb-assistant-blink 1.2s infinite ease-in-out;
}

.asb-assistant-typing span:nth-child(2) { animation-delay: .18s; }
.asb-assistant-typing span:nth-child(3) { animation-delay: .36s; }

@keyframes asb-assistant-blink {
	0%, 80%, 100% { opacity: .35; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

/* Suggestion chips. */
.asb-assistant-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 16px 12px;
	background: #F7F9FE;
}

.asb-assistant-suggestions[hidden] { display: none; }

.asb-assistant-chip {
	padding: 8px 14px;
	border: 1px solid rgba(46, 158, 72, .25);
	border-radius: 999px;
	background: #fff;
	color: var(--asb-blue);
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s var(--asb-ease), color .15s var(--asb-ease);
}

.asb-assistant-chip:hover { background: var(--asb-blue); color: #fff; }

/* Input row. */
.asb-assistant-form {
	display: flex;
	gap: 10px;
	padding: 12px 14px;
	border-top: 1px solid rgba(12, 30, 62, .08);
	background: #fff;
}

.asb-assistant-input {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid rgba(12, 30, 62, .14);
	border-radius: 12px;
	font: inherit;
	font-size: .92rem;
	color: var(--asb-ink);
	background: #fff;
}

.asb-assistant-input:focus { outline: 2px solid var(--asb-blue); outline-offset: 1px; border-color: transparent; }

.asb-assistant-send {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 12px;
	background: var(--asb-blue);
	color: #fff;
	cursor: pointer;
	transition: background .15s var(--asb-ease), transform .15s var(--asb-ease);
}

.asb-assistant-send:hover { background: #0E2E80; transform: translateY(-1px); }
.asb-assistant-send svg { width: 20px; height: 20px; }
.asb-assistant.is-busy .asb-assistant-send { opacity: .55; pointer-events: none; }

.asb-assistant-disclaimer {
	margin: 0;
	padding: 0 16px 12px;
	background: #fff;
	color: var(--asb-muted);
	font-size: .72rem;
	text-align: center;
}

/* Keep Elementor's global form and button rules out of the widget. */
.asb-assistant .asb-assistant-panel {
	isolation: isolate;
	font-size: 16px;
	line-height: 1.5;
}

.asb-assistant .asb-assistant-launcher,
.asb-assistant .asb-assistant-close,
.asb-assistant .asb-assistant-chip,
.asb-assistant .asb-assistant-send {
	min-width: 0;
	min-height: 0;
	margin: 0;
	font-family: var(--asb-font-text);
	letter-spacing: normal;
	line-height: 1.25;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
}

.asb-assistant .asb-assistant-launcher {
	width: auto;
	padding: 13px 20px 13px 16px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--asb-blue), var(--asb-blue-deep));
	color: #fff;
}

.asb-assistant .asb-assistant-launcher svg,
.asb-assistant .asb-assistant-close svg,
.asb-assistant .asb-assistant-send svg {
	display: block;
	flex: 0 0 auto;
}

.asb-assistant .asb-assistant-head {
	min-height: 70px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--asb-navy), #153A6A);
	line-height: 1.25;
}

.asb-assistant .asb-assistant-avatar {
	width: 40px;
	height: 40px;
	padding: 0;
}

.asb-assistant .asb-assistant-title {
	display: block;
	font-size: 1rem;
	line-height: 1.3;
}

.asb-assistant .asb-assistant-tagline {
	margin-top: 3px;
	font-size: .78rem;
	line-height: 1.4;
}

.asb-assistant .asb-assistant-close {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .88);
	box-shadow: none;
}

.asb-assistant .asb-assistant-close:hover {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

.asb-assistant .asb-assistant-messages {
	min-height: 0;
	line-height: 1.5;
}

.asb-assistant .asb-assistant-msg {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
}

.asb-assistant .asb-assistant-suggestions {
	flex-direction: column;
	align-items: stretch;
	gap: 7px;
	padding: 0 16px 14px;
}

.asb-assistant .asb-assistant-chip {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid rgba(46, 158, 72, .28);
	border-radius: 10px;
	background: #fff;
	color: var(--asb-blue-deep);
	box-shadow: none;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
}

.asb-assistant .asb-assistant-chip:hover {
	border-color: var(--asb-blue);
	background: var(--asb-sky);
	color: var(--asb-blue-deep);
}

.asb-assistant .asb-assistant-form {
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
}

.asb-assistant .asb-assistant-input {
	width: 100%;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 10px 13px;
	border: 1px solid rgba(12, 30, 62, .18);
	border-radius: 11px;
	box-shadow: none;
	font-size: .9rem;
	line-height: 1.4;
}

.asb-assistant .asb-assistant-send {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 11px;
	background: var(--asb-blue);
	color: #fff;
	box-shadow: none;
}

.asb-assistant .asb-assistant-disclaimer {
	padding: 0 16px 11px;
	font-size: .7rem;
	line-height: 1.4;
}

/* Small screens: the panel takes over, floats tuck away while open. */
@media (max-width: 560px) {
	.asb-assistant-launcher { right: 16px; bottom: 88px; padding: 12px 16px 12px 14px; }
	.asb-assistant-panel {
		top: 8px;
		right: 8px;
		left: 8px;
		bottom: 8px;
		width: auto;
		height: auto;
		max-height: none;
		border-radius: 20px;
	}
	.asb-assistant .asb-assistant-head { min-height: 68px; padding: 12px 14px; }
	.asb-assistant .asb-assistant-messages { padding: 14px; }
	.asb-assistant .asb-assistant-suggestions { padding: 0 14px 12px; }
	.asb-assistant .asb-assistant-form { padding: 10px 12px; }
	.asb-assistant .asb-assistant-disclaimer { padding: 0 12px 10px; }
	.asb-assistant.is-open ~ .asb-wa-float,
	body:has(.asb-assistant.is-open) .asb-wa-float { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.asb-assistant-launcher,
	.asb-assistant-send,
	.asb-assistant-chip { transition: none; }
	.asb-assistant-typing span { animation: none; opacity: .8; }
}

/* ---- Homepage polish ----------------------------------------------------- */

/* Keep primary CTA copy readable when page-builder link rules load later. */
a.asb-btn.asb-btn-primary,
a.asb-btn.asb-btn-primary:hover,
a.asb-btn.asb-btn-primary:focus,
button.asb-btn.asb-btn-primary {
	color: #fff !important;
}

.asb-btn-primary .asb-icon {
	color: currentColor;
	stroke: currentColor;
}

/* Keep gold CTA copy on-brand when page-builder link colors load later. */
a.asb-btn.asb-btn-gold,
a.asb-btn.asb-btn-gold:hover,
a.asb-btn.asb-btn-gold:focus,
button.asb-btn.asb-btn-gold {
	color: var(--asb-navy) !important;
}

.asb-btn-gold .asb-icon {
	color: currentColor;
	stroke: currentColor;
}

/*
 * Footer links stay calm and readable by default. Green is reserved for the
 * interactive state so the footer does not compete with its gold icon accents.
 */
body .asb-footer a {
	color: rgba(255, 255, 255, .82) !important;
}

body .asb-footer a:hover,
body .asb-footer a:focus-visible {
	color: var(--asb-green) !important;
}

/* Editorial hero photo: human, mission-focused, and easy to crop responsively. */
.asb-hero-home .asb-hero-visual {
	isolation: isolate;
	padding: 24px 12px 24px 24px;
}

.asb-hero-photo-accent {
	position: absolute;
	inset: 7% 0 0 10%;
	z-index: -1;
	border-radius: 34px;
	background:
		radial-gradient(circle at 88% 12%, rgba(63, 187, 94, .32), transparent 28%),
		linear-gradient(145deg, rgba(233, 245, 236, .98), rgba(255, 255, 255, .3));
	transform: rotate(2.5deg);
}

.asb-hero-photo-frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1.34;
	margin: 0;
	border: 8px solid rgba(255, 255, 255, .92);
	border-radius: 30px;
	background: var(--asb-surface);
	box-shadow: 0 30px 80px -34px rgba(12, 30, 62, .48);
}

.asb-hero-photo-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 62%, rgba(12, 30, 62, .18));
}

.asb-hero-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 51% center;
}

.asb-hero-home .asb-hero-float-1 {
	top: 0;
	left: 0;
	max-width: min(310px, 72%);
}

/* Keep the homepage's core message and primary action inside the initial
   desktop viewport, below the announcement bar and site navigation. */
@media (min-width: 1024px) {
	.asb-hero-home {
		padding: 56px 0 52px;
	}

	.asb-hero-home .asb-hero-cols {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
		gap: 40px;
	}

	.asb-hero-home .asb-kicker {
		margin-bottom: 10px;
	}

	.asb-hero-home .asb-h1-xl {
		max-width: 760px;
		margin-bottom: 12px;
		font-size: clamp(2.85rem, 4vw, 3.65rem);
		line-height: 1.08;
	}

	.asb-hero-home .asb-sub {
		max-width: 700px;
		margin-bottom: 18px;
		font-size: 1.04rem;
		line-height: 1.55;
	}

	.asb-hero-home .asb-hero-visual {
		padding: 14px 8px 14px 14px;
	}

	.asb-hero-home .asb-hero-photo-frame {
		border-width: 6px;
		border-radius: 24px;
	}

	.asb-hero-home .asb-hero-float-1 {
		max-width: min(280px, 70%);
		padding: 10px 14px 10px 10px;
	}
}

/* Four home services form a balanced two-by-two catalog. */
.asb-home-services .asb-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.asb-home-services .asb-service-card {
	min-height: 330px;
}

/* Align the three process icons and keep the connector centered on them. */
.asb-flow { gap: 18px; }

.asb-flow-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	min-height: 68px;
}

.asb-flow-item > .asb-icon-badge {
	width: 56px;
	height: 56px;
	border-radius: 17px;
	place-self: center;
}

.asb-flow-item + .asb-flow-item::before {
	left: 27px;
	top: -18px;
	height: 18px;
}

/* The assistant belongs at the lower edge and no longer competes with chat. */
.asb-assistant-launcher,
.asb-assistant .asb-assistant-launcher {
	right: 24px;
	bottom: 24px;
}

.asb-assistant-panel {
	right: 24px;
	bottom: 24px;
	height: min(600px, calc(100dvh - 120px));
}

.asb-wa-float {
	right: auto;
	left: 22px;
}

@media (max-width: 679px) {
	.asb-home-services .asb-grid-2 { grid-template-columns: minmax(0, 1fr); }
	.asb-home-services .asb-service-card { min-height: 0; }
	.asb-hero-home .asb-hero-visual { padding: 18px 0 0; }
	.asb-hero-home .asb-hero-float-1 { top: 0; left: 12px; }
	.asb-hero-photo-frame { aspect-ratio: 1.12; border-width: 6px; border-radius: 24px; }
	.asb-assistant-launcher,
	.asb-assistant .asb-assistant-launcher { right: 16px; bottom: 16px; }
}

/* ---- Phase 3: technology-training cluster components ---------------------- */

/* Meta row on a course card (duration chip + price). */
.asb-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }

/* Course hero meta chips sit centered under the subtitle. */
.asb-course-meta { justify-content: center; margin: 4px 0 4px; }

/* A roomier framed panel (course certification note, wide callouts). */
.asb-panel-lg { padding: 44px; text-align: center; }
.asb-panel-lg .asb-icon-badge { margin: 0 auto; }
@media (max-width: 679px) { .asb-panel-lg { padding: 28px; } }

/* Numbered steps rendered as a vertical list inside a column (enroll page). */
.asb-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: asb-step; }
.asb-steps-list-item { display: flex; align-items: flex-start; gap: 14px; counter-increment: asb-step; }
.asb-steps-list-item .asb-step-num {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--asb-grad-hero);
	color: #fff;
	font-family: var(--asb-font-display);
	font-weight: 700;
	font-size: .95rem;
}
.asb-steps-list-item > div { display: flex; flex-direction: column; gap: 2px; }
.asb-steps-list-item strong { font-family: var(--asb-font-display); color: var(--asb-ink); }
.asb-steps-list-item span { color: var(--asb-muted); font-size: .95rem; }

/* Registration fee box on the enroll page. */
.asb-fee-box {
	border: 1px solid rgba(244, 183, 64, .5);
	background: rgba(244, 183, 64, .08);
	border-radius: var(--asb-radius);
	padding: 22px 24px;
}
.asb-fee-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.asb-fee-head > div { display: flex; flex-direction: column; }
.asb-fee-title { font-family: var(--asb-font-display); color: var(--asb-ink); font-size: .95rem; }
.asb-fee-amount { font-family: var(--asb-font-display); font-weight: 700; font-size: 1.5rem; color: var(--asb-navy); letter-spacing: -.01em; }