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

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

/* clip, not hidden: overflow-x: hidden turns these into scroll containers and a
   sticky header inside one never sticks. clip crops the same way without that. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
	margin: 0;
	overflow-x: clip;
	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-navy {
	background: transparent;
	border: 1.5px solid var(--abi-primary);
	color: var(--abi-primary);
}
.abi-btn--outline-navy:hover { background: var(--abi-primary); color: #fff; }
.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 --------------------------------------------------------------- */

/*
 * Sticky, but only the white bar. The header is pulled up by the navy bar's own
 * height (measured in JS into --abi-topbar-h), so the navy bar scrolls out of
 * sight and the logo, search box and Browse link stay put.
 */
.abi-header {
	background: #fff;
	position: sticky;
	top: calc(var(--abi-topbar-h, 0px) * -1);
	z-index: 50;
}
/* Only once it is actually stuck, so the page does not look boxed in at rest. */
.abi-header.is-stuck { box-shadow: 0 6px 18px rgba(20, 41, 74, .10); }

@media (prefers-reduced-motion: no-preference) {
	.abi-header .abi-mainbar .abi-wrap { transition: padding .22s ease; }
	.abi-header .abi-logo img { transition: height .22s ease; }
	.abi-header .abi-search { transition: height .22s ease; }
	.abi-header .abi-burger { transition: width .22s ease, height .22s ease; }
	.abi-header { transition: box-shadow .22s ease; }
}

/* 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: 12px; }
.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: 16px;
	padding-bottom: 16px;
}
.abi-logo { flex-shrink: 0; display: block; }
.abi-logo img { height: 96px; 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-searchcol {
	flex: 1;
	min-width: 0;
}
/* The advanced-search line and the Browse button share the row under the field. */
.abi-searchcol__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}
/* Reads as a link rather than a second button, so it does not compete with the
   pink search button beside it. The arrow carries the "go" meaning the border
   used to. Same arrow the specialty banners use. */
.abi-btn--browse {
	margin-left: auto;
	padding: 9px 2px;
	background: transparent;
	border: 0;
	color: var(--abi-primary);
	font-size: 15px;
	white-space: nowrap;
}
.abi-btn--browse::after {
	/* No margin here: .abi-btn already puts an 8px gap between its flex items. */
	content: "→";
	color: var(--abi-accent);
	font-weight: 800;
	transition: transform .15s ease;
	display: inline-block;
}
.abi-btn--browse:hover { filter: none; color: var(--abi-accent); }
.abi-btn--browse:hover::after { transform: translateX(3px); }
.abi-search {
	width: 100%;
	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); }

/* A quiet second line under the search box: the storefront's advanced search.
   Kept small and muted so the main search stays the single obvious action. */
.abi-advsearch {
	margin: 7px 0 0;
	padding-left: 2px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--abi-muted);
}
.abi-advsearch a {
	color: var(--abi-accent);
	font-weight: 700;
	font-style: italic;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.abi-advsearch a:hover { border-bottom-color: var(--abi-accent); }
.abi-advsearch span::before { content: ": "; }

.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 { background: #fff; }
/* The slides are wide pre-made banners with their own baked-in text. Show each
   one in full, uncropped, by giving the stage the banner's own aspect ratio. */
.abi-hero__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 2192 / 480;
	background: var(--abi-primary-dark);
	overflow: hidden;
}
.abi-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 1s ease;
}
.abi-hero__slide.is-active { opacity: 1; }

.abi-hero__dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-bottom: 16px;
}
/* The dot stays 9px, but the button around it is 24px so it is big enough to
   tap on a phone. The dot itself is drawn with the ::before. */
.abi-hero__dots button {
	width: 24px; height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.abi-hero__dots button::before {
	content: "";
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--abi-border);
	transition: background .15s ease, transform .15s ease;
}
.abi-hero__dots button:hover::before { background: var(--abi-muted); }
.abi-hero__dots button.is-active::before { background: var(--abi-accent); transform: scale(1.15); }

/* The buttons that lived here are gone, so the bar is only the slider dots now. */
.abi-hero__bar {
	background: var(--abi-surface);
	border-bottom: 1px solid var(--abi-border);
	padding: 14px 0 4px;
}
.abi-hero__dots { margin-bottom: 0; }

/* --- Blog hero (logo) ----------------------------------------------------- */

/* The artwork carries a lot of its own padding, so the section adds little of
   its own, otherwise the tagline is pushed well below the fold on a phone. */
.abi-blog-hero {
	background: #fff;
	border-bottom: 1px solid var(--abi-border);
	padding: 12px 0 26px;
	text-align: center;
}
.abi-blog-hero__logo {
	display: block;
	margin: 0 auto;
	max-height: 190px;
	width: auto;
}
.abi-blog-hero__sub {
	max-width: 860px;
	margin: 4px auto 0;
	color: var(--abi-muted);
	font-size: 16px;
	line-height: 1.65;
}
@media (max-width: 560px) {
	.abi-blog-hero { padding: 6px 0 20px; }
	.abi-blog-hero__logo { max-height: 118px; }
	.abi-blog-hero__sub { font-size: 15px; }
}

/* --- 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; }
/* The category buttons run straight into the featured products below them, so
   the gap between the two is closed up rather than a full section apart. */
.abi-section--cats { padding-bottom: 22px; }
.abi-section--cats + .abi-section { padding-top: 30px; }

/* The specialty banners follow the slider, so they sit closer to it, and the
   client wants his sentence there on two lines rather than three. */
.abi-section--banners { padding-top: 30px; }
.abi-section--banners .abi-section__head { margin-bottom: 24px; }
.abi-section--banners .abi-section__head p { max-width: 940px; }
.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);
}
/* Darkened from the brand orange, which only reached 2.2:1 on the tinted
   background. Same hue, now readable. */
.abi-eyebrow--alt { color: #a35f00; }
.abi-eyebrow--green { color: #1f7a37; }
.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: 3 / 2;
	object-fit: contain;
	padding: 6px;
	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 {
	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 -------------------------------------------------------- */

/* Both feed taglines are the client's own words and he wants them set apart. */
.abi-feed__note {
	color: #6c7686;
	font-size: 15px;
	font-style: italic;
	line-height: 1.6;
	max-width: 680px;
	margin: 10px auto 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); }
/* The client swaps these himself and his shots come in every shape, so show the
   whole image rather than cropping to the square. */
.abi-tile__media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8px; }
.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; }
.abi-feed__cta {
	max-width: 720px;
	margin: 0 auto 22px;
	font-size: 17px;
	font-style: italic;
	line-height: 1.65;
	color: var(--abi-primary);
}
.abi-feed__calls { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.abi-btn--call { padding: 14px 32px; font-size: 16px; }
.abi-feed__calls-note { margin: 14px 0 0; font-size: 13.5px; color: var(--abi-muted); }
@media (max-width: 560px) {
	.abi-feed__calls { flex-direction: column; align-items: stretch; }
	.abi-feed__cta { font-size: 16px; }
}

/* --- 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; }
/* Flyers carry their own headline, so show the whole sheet instead of cropping. */
.abi-photo-grid--flyer .abi-photo img { object-fit: contain; }
.abi-photo-grid--flyer .abi-photo { padding: 6px; }
/* Pages that carry a full quarter of flyers need more tiles per row, and the
   tiles follow the portrait shape of the sheets so the wording stays readable. */
.abi-photo-grid--dense { grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; }
.abi-photo-grid--dense .abi-photo { aspect-ratio: 3 / 4; }
.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; }

/* Category button reused as a banner introducing the copy below it. */
.abi-landing__banner { margin: 0 0 34px; text-align: center; }
.abi-landing__banner img {
	width: 100%;
	max-width: 560px;
	height: auto;
	/* The global reset sets img{display:block}, so the text-align:center on the
	   wrapper above never applied and the banner sat hard left. 2026-08-13. */
	margin-left: auto;
	margin-right: auto;
	border: 1px solid var(--abi-border);
	border-radius: 12px;
	background: #fff;
}
@media (max-width: 560px) {
	.abi-landing__banner { margin-bottom: 26px; }
}

/* 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; }
.abi-form input[type="file"] { padding: 9px 13px; background: #fff; }
.abi-form__hint {
	margin: -8px 0 18px;
	font-size: 12.5px;
	color: var(--abi-muted);
}
/* The spam trap. Off-screen rather than display:none, which some bots skip. */
.abi-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Client's own wording, sitting above Get in Touch. */
.abi-contact-intro { margin-bottom: 28px; }
.abi-contact-intro p { margin: 0 0 14px; }

/* --- 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; }
/* No forced ratio here. The client's header artwork has wording built into the
   image and runs anywhere from square to very wide, so cropping it to a fixed
   shape cuts his own words off. The height cap keeps a square one from taking
   over the screen. */
.abi-post__hero {
	margin: 36px 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--abi-surface);
	text-align: center;
}
.abi-post__hero img {
	width: auto;
	max-width: 100%;
	max-height: 520px;
	margin: 0 auto;
}

.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 h2 {
	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: 980px) {
	.abi-cat-grid { grid-template-columns: repeat(6, 1fr); }
}

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

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

/* Above the burger breakpoint the navy bar still carries eight menu items, two
   phone numbers and six icons. Tighten its spacing so the last icons are not
   pushed off the right edge on a 1024 screen. */
@media (max-width: 1180px) {
	.abi-topnav ul { gap: 16px; }
	.abi-topnav a { font-size: 13.5px; }
	.abi-topbar__aside { gap: 12px; }
	.abi-topbar__social { gap: 10px; }
	.abi-topbar__phones { gap: 8px; font-size: 13.5px; }
}

@media (max-width: 980px) {
	.abi-linkband__grid { grid-template-columns: 1fr; }
	.abi-feed__grid { grid-template-columns: repeat(3, 1fr); }
	/* Phones: once the bar sticks, the advanced-search line and the Browse link
	   fold away and the logo shrinks, so it takes a strip rather than a third of
	   the screen. Everything is back the moment you scroll to the top.
	   It collapses rather than switching to display:none, which would snap. */
	.abi-searchcol__foot {
		overflow: hidden;
		max-height: 120px;
		opacity: 1;
		transition: max-height .22s ease, opacity .16s ease, margin .22s ease;
	}
	.abi-header.is-stuck .abi-searchcol__foot {
		max-height: 0;
		opacity: 0;
		margin-top: -4px;
	}
	.abi-header.is-stuck .abi-logo img { height: 46px; }
	.abi-header.is-stuck .abi-mainbar .abi-wrap { padding-top: 10px; padding-bottom: 10px; }
	.abi-header.is-stuck .abi-search { height: 46px; }
	.abi-header.is-stuck .abi-burger { width: 42px; height: 42px; }
	/* 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. Raised from
	   980 once the Browse button joined the header, because the logo, the label,
	   the field and the button no longer fit on one line under that. */
	.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-searchcol { flex: 1 0 100%; order: 3; }
	.abi-search { 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-photo-grid--dense { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	/* Hanging off to the right looks like a mistake on a narrow screen. */
	.abi-searchcol__foot { flex-direction: column; align-items: stretch; gap: 12px; }
	/* A full-width link with no border reads as a broken button, so on phones it
	   just sits under the line above, left aligned like the link it now is. */
	.abi-btn--browse { margin-left: 0; align-self: flex-start; padding-left: 0; }
	.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-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); }
	/* A 4.5:1 banner is a sliver on a phone, so give it a floor and fill it.
	   The banner text is not legible at this width regardless; client is having
	   phone-sized banner art made. */
	.abi-hero__stage { aspect-ratio: auto; height: 150px; }
	.abi-hero__slide { object-fit: cover; }
	/* 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; }
}

/* Quiet reference links at the foot of the home page: terms, FAQ, artwork specs.
   Deliberately understated, they are for looking up rather than clicking through. */
.abi-fineprint {
	padding: 22px 0 26px;
	background: #fff;
	border-top: 1px solid var(--abi-border);
	text-align: center;
	font-size: 13px;
	color: var(--abi-muted);
}
.abi-fineprint a {
	color: var(--abi-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.abi-fineprint a:hover { color: var(--abi-primary); border-bottom-color: var(--abi-border); }
.abi-fineprint span { margin: 0 10px; opacity: .5; }
@media (max-width: 560px) {
	.abi-fineprint { line-height: 2.1; }
	.abi-fineprint span { margin: 0 7px; }
}

/* Invitation between the photo grid and the two action buttons, laid out the way
   the client drew it: a pink line, a navy line, the body copy, then the phone.
   Colour sits on the section, not on the p, so the class rules below win without
   having to out-specify anything. */
.abi-landing__pitch {
	padding: 30px 0 4px;
	text-align: center;
	color: var(--abi-text);
}
.abi-landing__pitch .abi-wrap { max-width: 820px; }
.abi-landing__pitch p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.7;
}
.abi-pitch__lead {
	font-family: var(--abi-font-heading);
	font-size: 21px;
	color: var(--abi-accent);
}
.abi-pitch__sub {
	font-size: 17px;
	color: var(--abi-primary);
}
.abi-pitch__call strong { color: var(--abi-accent); }
.abi-pitch__call a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(214, 38, 111, .35);
}
.abi-pitch__call a:hover { border-bottom-color: var(--abi-accent); }
@media (max-width: 560px) {
	.abi-landing__pitch { padding-top: 22px; }
	.abi-pitch__lead { font-size: 19px; }
	.abi-landing__pitch p { font-size: 15.5px; }
}