/* ==========================================================================
   A Better Idea — main stylesheet
   Colors/fonts come from CSS variables emitted by the Customizer.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
	margin: 0;
	overflow-x: hidden;
	background: #fff;
	color: var(--abi-text);
	font-family: var(--abi-font-body);
	font-size: var(--abi-font-size);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--abi-primary); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--abi-font-heading);
	color: var(--abi-primary);
	line-height: 1.15;
	margin: 0 0 .6em;
}

.abi-wrap {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --- Buttons -------------------------------------------------------------- */

.abi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	border: 0;
	border-radius: calc(var(--abi-radius) / 2);
	background: var(--abi-accent);
	color: #fff;
	font-family: var(--abi-font-heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.abi-btn:hover { filter: brightness(1.08); }
.abi-btn--ghost {
	background: rgba(13, 29, 54, .45);
	border: 1.5px solid rgba(255, 255, 255, .75);
	color: #fff;
	backdrop-filter: blur(2px);
}
.abi-btn--ghost:hover { background: rgba(13, 29, 54, .62); border-color: #fff; }
.abi-btn--light { background: #fff; color: var(--abi-primary); }
.abi-btn--outline {
	background: transparent;
	border: 1px solid var(--abi-border);
	color: var(--abi-primary);
}
.abi-btn--sm { padding: 10px 18px; font-size: 14px; }

/* --- Header --------------------------------------------------------------- */

.abi-header {
	background: #fff;
	position: relative;
	z-index: 50;
}

/* Navy utility bar: nav on the left, phones and social on the right. */
.abi-topbar {
	background: var(--abi-primary);
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
}
.abi-topbar .abi-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 9px;
	padding-bottom: 9px;
}
.abi-topbar a { color: inherit; text-decoration: none; }
.abi-topbar a:hover { color: #fff; }
.abi-topbar .abi-sep { opacity: .45; }

.abi-topnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 26px;
}
.abi-topnav a {
	color: #dbe2ee;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}
.abi-topnav .current-menu-item > a { color: var(--abi-accent-2); }

.abi-topbar__aside {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}
.abi-topbar__phones {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--abi-font-heading);
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	white-space: nowrap;
}
.abi-topbar__phones a { color: #fff; }
.abi-topbar__rule { width: 1px; height: 20px; background: rgba(255, 255, 255, .22); }
.abi-topbar__social { display: flex; align-items: center; gap: 9px; }
.abi-topbar__social a { color: #c3cddd; display: flex; }
.abi-topbar__social a:hover { color: #fff; }

/* White main bar: oversized logo plus the search call to action. */
.abi-mainbar { border-bottom: 1px solid var(--abi-border); }
.abi-mainbar .abi-wrap {
	display: flex;
	align-items: center;
	gap: 36px;
	padding-top: 22px;
	padding-bottom: 22px;
}
.abi-logo { flex-shrink: 0; display: block; }
.abi-logo img { height: 82px; width: auto; max-width: 100%; display: block; }
.abi-logo-text {
	font-family: var(--abi-font-heading);
	font-weight: 800;
	font-size: 26px;
	color: var(--abi-primary);
	text-decoration: none;
}

.abi-searchlabel {
	flex-shrink: 0;
	font-family: var(--abi-font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: 18px;
	color: var(--abi-accent);
}

.abi-search {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: stretch;
	height: 58px;
	border: 2px solid #d0d5dd;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.abi-search:focus-within {
	border-color: var(--abi-accent);
	box-shadow: 0 0 0 4px rgba(214, 38, 111, .12);
}
.abi-search input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	padding: 0 22px;
	font-family: var(--abi-font-body);
	font-size: 17px;
	color: var(--abi-primary);
}
.abi-search button {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 30px;
	border: none;
	background: var(--abi-accent);
	color: #fff;
	font-family: var(--abi-font-heading);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: filter .15s ease;
}
.abi-search button:hover { filter: brightness(1.08); }

.abi-burger {
	display: none;
	width: 48px; height: 48px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	border: 1px solid var(--abi-border);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	flex-shrink: 0;
}
.abi-burger span {
	display: block;
	width: 22px; height: 2px;
	background: var(--abi-primary);
	transition: transform .2s ease, opacity .2s ease;
}
.abi-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.abi-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.abi-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.abi-mobile-nav {
	display: none;
	background: #fff;
	border-bottom: 1px solid var(--abi-border);
	box-shadow: 0 12px 24px rgba(20, 41, 74, .12);
}
.abi-mobile-nav.is-open { display: block; }
.abi-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.abi-mobile-nav ul a {
	display: block;
	padding: 14px 24px;
	border-bottom: 1px solid var(--abi-surface);
	color: var(--abi-primary);
	font-weight: 600;
	text-decoration: none;
}
.abi-mobile-block { padding: 16px 24px; }
.abi-mobile-block--social { border-top: 1px solid var(--abi-surface); }
.abi-mobile-block__label {
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--abi-muted);
}
.abi-mobile-phones { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.abi-mobile-phones a {
	font-family: var(--abi-font-heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--abi-accent);
	text-decoration: none;
}
.abi-mobile-social { display: flex; align-items: center; gap: 12px; }
.abi-mobile-social a {
	width: 36px; height: 36px;
	border-radius: 8px;
	background: var(--abi-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Hero ----------------------------------------------------------------- */

.abi-hero {
	position: relative;
	min-height: 340px;
	height: min(70vh, 560px);
	overflow: hidden;
	background: var(--abi-primary-dark);
}
.abi-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease;
}
.abi-hero__slide.is-active { opacity: 1; }
.abi-hero__scrim {
	position: absolute;
	inset: 0;
	/* Two passes: a vertical wash for the whole frame, plus a stronger left-hand
	   ramp so the headline and buttons stay readable on light slides. */
	background:
		linear-gradient(90deg, rgba(13, 29, 54, .78) 0%, rgba(13, 29, 54, .55) 42%, rgba(13, 29, 54, .10) 72%),
		linear-gradient(0deg, rgba(13, 29, 54, .55), rgba(13, 29, 54, .15));
}
.abi-hero__inner {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.abi-hero h1 {
	font-weight: 800;
	font-size: clamp(30px, 5vw, 52px);
	color: #fff;
	max-width: 640px;
	margin: 0 0 18px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.abi-hero p {
	font-size: 18px;
	color: rgba(255, 255, 255, .92);
	max-width: 560px;
	margin: 0 0 30px;
}
.abi-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.abi-hero__dots {
	position: absolute;
	left: 0; right: 0; bottom: 18px;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.abi-hero__dots button {
	width: 9px; height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
}
.abi-hero__dots button.is-active { background: #fff; }

/* --- Page banner (interior pages) ---------------------------------------- */

.abi-banner {
	background: var(--abi-primary);
	color: #fff;
	text-align: center;
	padding: 54px 0;
}
.abi-banner h1 { color: #fff; margin-bottom: 10px; font-size: clamp(26px, 4vw, 40px); }
.abi-banner p {
	margin: 0 auto;
	max-width: 620px;
	color: rgba(255, 255, 255, .85);
}

/* --- Sections ------------------------------------------------------------- */

.abi-section { padding: 56px 0; }
.abi-section--tint { background: var(--abi-surface); }
.abi-section--tint-2 { background: var(--abi-surface-2); }
.abi-section__head { text-align: center; margin-bottom: 32px; }
.abi-eyebrow {
	font-family: var(--abi-font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: var(--abi-accent);
}
.abi-eyebrow--alt { color: var(--abi-accent-2); }
.abi-eyebrow--green { color: #2ea84f; }
.abi-catalog-link { text-align: center; margin-top: 34px; }
.abi-catalog-link a {
	color: var(--abi-primary);
	font-family: var(--abi-font-heading);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border-bottom: 2px solid var(--abi-accent);
	padding-bottom: 2px;
}
.abi-catalog-link a:hover { border-bottom-color: var(--abi-primary); }
.abi-section__head h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; margin-bottom: 8px; }
.abi-section__head p { color: var(--abi-muted); max-width: 620px; margin: 0 auto; }

/* --- Category grid -------------------------------------------------------- */

.abi-cat-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 16px;
}
.abi-cat-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--abi-border);
	border-radius: var(--abi-radius);
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
}
.abi-cat-card:hover {
	box-shadow: 0 10px 24px rgba(20, 41, 74, .14);
	transform: translateY(-2px);
}
.abi-cat-card img {
	width: 100%;
	aspect-ratio: 165 / 98;
	object-fit: contain;
	padding: 10px;
	background: #fff;
}
.abi-cat-card__name {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 10px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--abi-text);
	text-align: center;
	line-height: 1.3;
}
.abi-cat-card__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 165 / 98;
	background: var(--abi-surface);
	color: var(--abi-muted);
	font-size: 13px;
	padding: 8px;
	text-align: center;
}

/* --- Specialty banners ---------------------------------------------------- */

.abi-sbanners {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.abi-sbanner {
	display: block;
	position: relative;
	text-decoration: none;
	border: 1px solid var(--abi-border);
	border-radius: calc(var(--abi-radius) + 2px);
	overflow: hidden;
	background: #fff;
	transition: box-shadow .15s ease, transform .15s ease;
}
a.abi-sbanner:hover {
	box-shadow: 0 12px 28px rgba(20, 41, 74, .14);
	transform: translateY(-2px);
}
.abi-sbanner img {
	display: block;
	width: 100%;
	height: auto;
}
.abi-sbanner__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.abi-section__lede {
	max-width: 760px;
	margin: 10px auto 0;
	font-style: italic;
	color: var(--abi-muted);
}

/* --- SEO copy block ------------------------------------------------------- */

.abi-section--seo { padding-top: 0; }
.abi-seo__title {
	max-width: 900px;
	margin: 0 auto 14px;
	font-size: 22px;
}
.abi-seo__body {
	max-width: 900px;
	margin: 0 auto;
	color: var(--abi-muted);
	font-size: 15px;
	line-height: 1.75;
}
.abi-seo__body p { margin: 0 0 12px; }

/* --- Trending feed -------------------------------------------------------- */

.abi-feed__note { color: #8a93a3; font-size: 14px; margin: 8px 0 0; }
.abi-feed {
	min-height: 560px;
	background: #fff;
	border: 1px solid var(--abi-border);
	border-radius: 12px;
	padding: 28px;
	overflow: hidden;
}
.abi-feed__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 22px;
}
.abi-feed__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	margin: 0;
	color: var(--abi-muted);
}
.abi-tile {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}
.abi-tile__media {
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 1px solid #eef1f5;
	border-radius: var(--abi-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s ease;
}
.abi-tile:hover .abi-tile__media { border-color: var(--abi-primary); }
.abi-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abi-tile__placeholder { color: #9aa3b2; font-size: 13px; }
.abi-tile__name {
	/* Two lines plus the top padding, so a long name never shifts the price
	   out of line with its neighbours in the row. */
	min-height: 48px;
	padding: 12px 2px 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--abi-primary);
	text-align: center;
}
.abi-tile__price {
	padding-top: 4px;
	font-size: 13px;
	color: var(--abi-muted);
	text-align: center;
}
.abi-feed__more { text-align: center; margin-top: 32px; }
.abi-btn--navy { background: var(--abi-primary); padding: 14px 40px; }

/* --- Category landing page ------------------------------------------------ */

.abi-landing__head { padding-bottom: 8px; text-align: center; }
.abi-landing__head h1 {
	font-size: clamp(28px, 4.4vw, 44px);
	line-height: 1.14;
	margin: 0 0 14px;
}
.abi-landing__lede {
	max-width: 600px;
	margin: 0 auto;
	color: var(--abi-muted);
	font-size: 16px;
}

.abi-landing__photos { padding: 36px 0 8px; }
.abi-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1000px;
	margin: 0 auto;
}
.abi-photo {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--abi-border);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	padding: 0;
	cursor: zoom-in;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.abi-photo:hover { border-color: var(--abi-primary); box-shadow: 0 10px 24px rgba(20, 41, 74, .12); }
.abi-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abi-photo__zoom {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(20, 41, 74, .82);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .15s ease;
}
.abi-photo:hover .abi-photo__zoom, .abi-photo:focus-visible .abi-photo__zoom { opacity: 1; }
.abi-photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--abi-surface);
	color: var(--abi-muted);
	font-size: 14px;
	cursor: default;
}

.abi-landing__actions { padding: 44px 0 8px; }
.abi-actions {
	display: flex;
	gap: 20px;
	justify-content: center;
	max-width: 1000px;
	margin: 0 auto;
}
.abi-action {
	flex: 1;
	max-width: 480px;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 24px 30px;
	border-radius: 14px;
	color: #fff;
	text-decoration: none;
	transition: filter .15s ease, transform .15s ease;
}
.abi-action:hover { filter: brightness(1.08); transform: translateY(-2px); }
.abi-action--primary { background: var(--abi-primary); box-shadow: 0 10px 26px rgba(20, 41, 74, .22); }
.abi-action--secondary { background: var(--abi-accent); box-shadow: 0 10px 26px rgba(214, 38, 111, .22); }
.abi-action__icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	display: flex;
	align-items: center;
	justify-content: center;
}
.abi-action__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	font-family: var(--abi-font-heading);
	line-height: 1.25;
	text-align: left;
}
.abi-action__text strong { font-weight: 700; font-size: 16px; }
.abi-action__text small { font-weight: 600; font-size: 12.5px; opacity: .82; }
.abi-action__arrow { flex-shrink: 0; display: flex; }

.abi-landing__copy { padding-top: 52px; }
.abi-landing__copy h2 { font-size: 22px; margin: 0 0 16px; }
.abi-landing__copy .abi-wrap { max-width: 860px; }

/* Lightbox for the landing-page photos. */
.abi-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(13, 29, 54, .88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	cursor: zoom-out;
}
.abi-lightbox img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.abi-lightbox__close {
	position: absolute;
	top: 22px;
	right: 26px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

/* --- FAQ ------------------------------------------------------------------ */

.abi-faq { max-width: 820px; margin: 0 auto; border: 1px solid var(--abi-border); border-radius: var(--abi-radius); overflow: hidden; }
.abi-faq details { border-bottom: 1px solid var(--abi-border); }
.abi-faq details:last-child { border-bottom: 0; }
.abi-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 22px;
	font-family: var(--abi-font-heading);
	font-weight: 700;
	color: var(--abi-primary);
	display: flex;
	align-items: center;
	gap: 12px;
}
.abi-faq summary::-webkit-details-marker { display: none; }
.abi-faq summary::before {
	content: "+";
	color: var(--abi-accent-2);
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}
.abi-faq details[open] summary::before { content: "-"; }
.abi-faq__body { padding: 0 22px 20px 52px; color: var(--abi-muted); }

/* --- Contact -------------------------------------------------------------- */

.abi-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 40px;
	align-items: start;
}
.abi-contact-list { list-style: none; margin: 0; padding: 0; }
.abi-contact-list li { display: flex; gap: 12px; margin-bottom: 18px; }
.abi-contact-list .abi-icon { color: var(--abi-accent); flex-shrink: 0; margin-top: 3px; }
.abi-contact-list a { color: var(--abi-primary); text-decoration: none; font-weight: 600; }

.abi-form {
	background: var(--abi-surface);
	border: 1px solid var(--abi-border);
	border-radius: var(--abi-radius);
	padding: 26px;
}
.abi-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.abi-form label { display: block; font-size: 13px; font-weight: 600; color: var(--abi-muted); margin-bottom: 6px; }
.abi-form input,
.abi-form textarea,
.abi-form select {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--abi-border);
	border-radius: calc(var(--abi-radius) / 2);
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--abi-text);
	margin-bottom: 16px;
}
.abi-form textarea { min-height: 130px; resize: vertical; }
.abi-form input:focus,
.abi-form textarea:focus { outline: 2px solid var(--abi-accent); outline-offset: 1px; }

/* --- Blog listing --------------------------------------------------------- */

.abi-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.abi-post-card {
	display: block;
	border: 1px solid var(--abi-border);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
}
.abi-post-card:hover { box-shadow: 0 12px 28px rgba(20, 41, 74, .12); transform: translateY(-2px); }
.abi-post-card__media { aspect-ratio: 16 / 9; background: var(--abi-surface); }
.abi-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.abi-post-card__body { padding: 20px; }
.abi-post-card__meta {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--abi-accent);
	letter-spacing: .04em;
	margin-bottom: 8px;
}
.abi-post-card h2 {
	font-size: 18px;
	font-weight: 700;
	color: var(--abi-primary);
	line-height: 1.3;
	margin: 0 0 8px;
}
.abi-post-card p { color: var(--abi-muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* --- Single post ---------------------------------------------------------- */

.abi-post { max-width: 760px; margin: 0 auto; padding: 44px 24px 72px; }
.abi-post__back {
	color: #8a93a3;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
.abi-post__back:hover { color: var(--abi-primary); }
.abi-post__eyebrow {
	font-family: var(--abi-font-heading);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--abi-accent);
	letter-spacing: .05em;
	text-transform: uppercase;
	margin: 22px 0 12px;
}
.abi-post__title {
	font-size: clamp(28px, 4.4vw, 40px);
	font-weight: 800;
	line-height: 1.18;
	margin: 0 0 20px;
}
.abi-post__byline {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--abi-border);
}
.abi-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--abi-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--abi-font-heading);
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
}
.abi-post__author { font-weight: 700; color: var(--abi-primary); font-size: 14.5px; line-height: 1.4; }
.abi-post__date { color: #8a93a3; font-size: 13px; line-height: 1.4; }
.abi-post__hero {
	margin: 36px 0;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: var(--abi-surface);
}
.abi-post__hero img { width: 100%; height: 100%; object-fit: cover; }

.abi-post__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.abi-post__tags a {
	background: var(--abi-surface);
	border: 1px solid var(--abi-border);
	color: var(--abi-muted);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 20px;
	text-decoration: none;
}
.abi-post__tags a:hover { border-color: var(--abi-accent); color: var(--abi-accent); }

.abi-post__bio {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 36px;
	padding: 24px;
	background: var(--abi-surface);
	border: 1px solid var(--abi-border);
	border-radius: 10px;
}
.abi-post__bio .abi-avatar { width: 60px; height: 60px; font-size: 20px; }
.abi-post__bio strong { font-family: var(--abi-font-heading); color: var(--abi-primary); font-size: 16px; display: block; }
.abi-post__bio p { color: var(--abi-muted); font-size: 14px; line-height: 1.6; margin: 4px 0 0; }

.abi-post__nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--abi-border);
}
.abi-post__nav a { color: var(--abi-primary); font-weight: 700; text-decoration: none; font-size: 14.5px; }
.abi-post__nav a:hover { color: var(--abi-accent); }

/* --- Long-form body copy (posts + rich pages) ----------------------------- */

.abi-article { max-width: 760px; margin: 0 auto; }
.abi-prose p { font-size: 17px; line-height: 1.85; color: var(--abi-text); margin: 0 0 22px; }
.abi-prose > p:first-child { font-size: 19px; color: var(--abi-primary); font-weight: 500; }
.abi-prose h2 { font-size: 26px; font-weight: 700; margin: 44px 0 16px; line-height: 1.25; }
.abi-prose h3 { font-size: 20px; font-weight: 700; margin: 34px 0 12px; }
.abi-prose a {
	color: var(--abi-accent);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(214, 38, 111, .35);
}
.abi-prose a:hover { border-bottom-color: var(--abi-accent); }
.abi-prose ul,
.abi-prose ol { font-size: 17px; line-height: 1.8; color: var(--abi-text); margin: 0 0 22px; padding-left: 24px; }
.abi-prose li { margin-bottom: 8px; }
.abi-prose li::marker { color: var(--abi-accent); font-weight: 700; }
.abi-prose strong { color: var(--abi-primary); font-weight: 700; }
.abi-prose mark { background: #fff2c9; padding: 1px 4px; border-radius: 3px; color: #5a4a12; }
.abi-prose blockquote {
	margin: 28px 0;
	padding: 20px 26px;
	border-left: 4px solid #2f8fd1;
	background: #f2f7fb;
	border-radius: 0 8px 8px 0;
	font-size: 19px;
	line-height: 1.6;
	color: #1d3a63;
	font-style: italic;
}
.abi-prose blockquote p { font-size: inherit; color: inherit; margin: 0; }
.abi-prose blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-style: normal;
	color: var(--abi-muted);
	font-weight: 600;
}
.abi-prose figure { margin: 32px 0; }
.abi-prose figure img { border-radius: 10px; }
.abi-prose figcaption { font-size: 13.5px; color: #8a93a3; text-align: center; margin-top: 10px; }
.abi-prose hr { border: none; border-top: 1px solid var(--abi-border); margin: 40px 0; }
.abi-prose code {
	font-family: 'SFMono-Regular', Consolas, monospace;
	background: #f0f2f5;
	color: #b31f63;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 14.5px;
}
.abi-prose pre {
	background: var(--abi-primary);
	color: #e8edf4;
	padding: 20px 22px;
	border-radius: 8px;
	overflow-x: auto;
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.6;
}
.abi-prose pre code { background: none; color: inherit; padding: 0; }
.abi-prose table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 15px; }
.abi-prose thead th {
	background: var(--abi-primary);
	color: #fff;
	font-family: var(--abi-font-heading);
	font-weight: 600;
	text-align: left;
	padding: 12px 16px;
}
.abi-prose td { padding: 12px 16px; border-bottom: 1px solid var(--abi-border); color: var(--abi-text); }
.abi-prose tbody tr:nth-child(even) { background: #f8f9fb; }
.abi-table-scroll { overflow-x: auto; }

/* --- CTA band ------------------------------------------------------------- */

.abi-cta { text-align: center; }
.abi-cta h2 { font-size: clamp(23px, 3.2vw, 30px); font-weight: 800; }
.abi-cta p { color: var(--abi-muted); max-width: 560px; margin: 0 auto 22px; }

/* --- Reference link band -------------------------------------------------- */

.abi-linkband {
	background: var(--abi-surface);
	border-top: 1px solid var(--abi-border);
	padding: 48px 0;
}
.abi-linkband__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 28px 48px;
}
.abi-linkband__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 0 14px;
	border: none;
	background: none;
	text-align: left;
	font-family: var(--abi-font-heading);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--abi-primary);
	cursor: default;
}
.abi-linkband__chev { display: none; color: #8a93a3; transition: transform .2s ease; }
.abi-linkband__list {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.5;
}
.abi-linkband__list--cols {
	display: block;
	column-width: 160px;
	column-gap: 28px;
}
.abi-linkband__list--cols a { display: block; margin-bottom: 9px; break-inside: avoid; }
.abi-linkband__list a { color: var(--abi-muted); text-decoration: none; }
.abi-linkband__list a:hover { color: var(--abi-accent); }

/* --- Footer --------------------------------------------------------------- */

.abi-footer {
	background: var(--abi-secondary);
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
}
.abi-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.abi-footer a:hover { color: #fff; }
.abi-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 36px;
	padding-top: 56px;
	padding-bottom: 36px;
}
.abi-footer h4 {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	margin: 0 0 16px;
	text-transform: uppercase;
}
.abi-footer ul { list-style: none; margin: 0; padding: 0; }
.abi-footer li { margin-bottom: 10px; }
.abi-footer__logo img { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .92; margin-bottom: 14px; }
.abi-footer__about { max-width: 320px; line-height: 1.7; }
.abi-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.abi-footer__social a {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.abi-footer__social a:hover { background: rgba(255, 255, 255, .24); }
.abi-footer__highlight { color: var(--abi-accent-2) !important; font-weight: 600; }
.abi-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .16);
	padding: 18px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .62);
}
.abi-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }

/* --- About ---------------------------------------------------------------- */

.abi-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.abi-split__media {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	background: var(--abi-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--abi-muted);
	font-size: 14px;
}
.abi-split__media img { width: 100%; height: 100%; object-fit: cover; }
.abi-split h2 { font-size: 22px; font-weight: 700; margin: 0 0 16px; }
.abi-split p { color: var(--abi-muted); font-size: 15.5px; line-height: 1.8; margin: 0 0 16px; }
.abi-split p:last-child { margin-bottom: 0; }

.abi-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	text-align: center;
}
.abi-stat__num {
	font-family: var(--abi-font-heading);
	font-weight: 800;
	font-size: 34px;
	line-height: 1.1;
}
.abi-stat__label { color: var(--abi-muted); font-size: 14.5px; font-weight: 600; margin-top: 6px; }
.abi-section--bordered {
	background: var(--abi-surface);
	border-top: 1px solid var(--abi-border);
	border-bottom: 1px solid var(--abi-border);
}

/* --- 404 / thanks --------------------------------------------------------- */

.abi-centered { text-align: center; padding: 90px 0; }
.abi-thanks-mark {
	width: 74px; height: 74px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: #eaf7ee;
	color: #1f7d3c;
	font-size: 36px;
	line-height: 74px;
}
.abi-centered .abi-eyebrow { color: var(--abi-accent); }
.abi-centered h1 { font-size: clamp(30px, 6vw, 56px); font-weight: 800; }
.abi-centered p { color: var(--abi-muted); max-width: 520px; margin: 0 auto 26px; }
.abi-centered__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
	.abi-cat-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 900px) {
	.abi-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
	.abi-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.abi-contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
	.abi-linkband__grid { grid-template-columns: 1fr; }
	.abi-feed__grid { grid-template-columns: repeat(3, 1fr); }
	/* Below this width the navy bar is dropped: its links live in the burger
	   menu instead, and the search box takes a full row of its own. */
	.abi-topbar { display: none; }
	.abi-burger { display: flex; }
	.abi-mainbar .abi-wrap {
		flex-wrap: wrap;
		gap: 14px 20px;
		padding-top: 16px;
		padding-bottom: 16px;
	}
	.abi-logo { margin-right: auto; }
	.abi-searchlabel { display: none; }
	.abi-search { flex: 1 0 100%; order: 3; height: 52px; }
	.abi-search input { font-size: 16px; padding: 0 18px; }
	.abi-search button { padding: 0 22px; }
}

@media (max-width: 900px) {
	.abi-split { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 720px) {
	.abi-wrap { padding: 0 18px; }
	.abi-photo-grid { grid-template-columns: 1fr; gap: 14px; }
	.abi-actions { flex-direction: column; align-items: stretch; }
	.abi-action { max-width: none; padding: 20px 22px; }
	.abi-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
	/* Banner artwork gets too small to read on phones — repeat the name as text. */
	.abi-sbanner__sr {
		position: static;
		display: block;
		width: auto;
		height: auto;
		clip: auto;
		white-space: normal;
		padding: 12px 14px;
		border-top: 1px solid var(--abi-border);
		color: var(--abi-primary);
		font-family: var(--abi-font-heading);
		font-weight: 700;
		font-size: 15px;
	}
	a.abi-sbanner .abi-sbanner__sr::after { content: " →"; color: var(--abi-accent); }
	.abi-post { padding: 32px 18px 56px; }
	.abi-prose p, .abi-prose ul, .abi-prose ol { font-size: 16px; }
	.abi-prose h2 { font-size: 22px; margin-top: 34px; }
	.abi-section { padding: 42px 0; }
	.abi-logo img { height: 56px; }
	.abi-hero__actions .abi-btn { flex: 1 1 auto; justify-content: center; }
	.abi-hero h1 { font-size: clamp(26px, 8vw, 34px); }
	.abi-hero p { font-size: 16px; }
	.abi-form__row { grid-template-columns: 1fr; }
	.abi-footer__grid { grid-template-columns: 1fr; padding-top: 42px; }
}

@media (max-width: 560px) {
	.abi-cat-grid { grid-template-columns: repeat(2, 1fr); }
	/* Collapse each column so the band stays short on a phone. */
	.abi-linkband { padding: 32px 0; }
	.abi-linkband__toggle { cursor: pointer; padding: 14px 0; }
	.abi-linkband__chev { display: block; }
	.abi-linkband__toggle[aria-expanded="true"] .abi-linkband__chev { transform: rotate(180deg); }
	.abi-linkband__list { display: none; padding-bottom: 14px; }
	.abi-linkband__toggle[aria-expanded="true"] + .abi-linkband__list { display: flex; }
	.abi-linkband__toggle[aria-expanded="true"] + .abi-linkband__list--cols { display: block; }
	.abi-linkband__col { border-bottom: 1px solid var(--abi-border); }
	.abi-feed__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.abi-feed { padding: 18px; min-height: 0; }
	.abi-logo img { height: 46px; }
	.abi-search { height: 48px; }
	.abi-search button span { display: none; }
	.abi-search button { padding: 0 18px; }
}