/*
 Theme Name:   Alongside (GeneratePress child)
 Theme URI:    https://generatepress.com
 Description:  Alongside — classic GeneratePress + GenerateBlocks build. Tokens in theme.json, components here (prefix als-).
 Author:       Lucet Creative
 Author URI:   https://lucetcreative.com
 Template:     generatepress
 Version:      0.1.0
*/

/* -------------------------------------------------------------------------
   0. Fonts. Polymath comes from Adobe Fonts (functions.php). VC Henrietta is
   the display serif; Fraunces is the fallback in the font stack.
   ------------------------------------------------------------------------- */
@font-face {
	font-family: "VC Henrietta";
	src: url("assets/fonts/VCHenrietta-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "VC Henrietta";
	src: url("assets/fonts/VCHenrietta-RegularItalic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/fraunces-variable-latin.woff2") format("woff2-variations"),
	     url("assets/fonts/fraunces-variable-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------------
   1. Base type. Headings track at 2%, everything else at 5%.
   ------------------------------------------------------------------------- */
body {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.05em;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--wp--preset--color--black);
	margin: 0;
}

h1, .als-h1 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xxxxl);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

/* The serif face: H2s and the second line of an H1. */
.als-display,
h2, .als-h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxl);
	letter-spacing: 0.02em;
	line-height: 1.2;
	font-weight: 400;
}
.als-display { font-size: inherit; }

h3, .als-h3 { /* .als-h3: an h2 that is a card title (keeps the heading order h1 > h2 where there is no section heading above the cards) */
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

h4 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.2;
}

p { margin: 0; }
p + p { margin-top: 1.5em; }

.als-kicker {
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: 0.05em;
	line-height: 1.5;
}

.als-eyebrow-compact {
	color: var(--wp--preset--color--black-600);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

.als-caption {
	color: var(--wp--preset--color--black-600);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	line-height: 1.5;
}

/* Theme-wide measurements that must not drift between components. */
:root {
	--als-rule: 2px;           /* every underline: arrow links, nav, breadcrumb, subnav, hover underlines, pagination */
	--als-rule-offset: 4px;    /* text-underline-offset for the plain hover underlines */
	--als-crumb-gap: 59px;     /* breadcrumb → title, every hero (tertiary frames; Our expertise's 48 was the outlier) */
}
@media (max-width: 1024px) {
	:root { --als-crumb-gap: 2rem; }
}

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

/* GP layout resets: pages are built from full-bleed sections. */
.als-page .site-content,
.als-page .site-main,
.als-page .inside-article,
.als-page .entry-content { margin: 0; padding: 0; }
.als-page .grid-container { max-width: none; padding: 0; }
.als-page .entry-content > * { margin-top: 0; }
.als-page .entry-content .alignfull { margin-left: 0; margin-right: 0; max-width: none; width: auto; }
.als-page .entry-content .wp-block-shortcode { margin: 0; }
/* PHP templates (posts page, single post, search) print <main> straight into GP's flex .site-content;
   without this it shrinks to its content and sits left on wide screens. */
.als-page .site-content > main { flex: 1 1 100%; min-width: 0; width: 100%; }
.site-footer { background: none; }

/* -------------------------------------------------------------------------
   2. Layout
   ------------------------------------------------------------------------- */
.als-container {
	margin-inline: auto;
	max-width: calc(var(--als-content) + 2 * var(--als-gutter));
	padding-inline: var(--als-gutter);
	width: 100%;
}

.als-section { padding-block: var(--wp--preset--spacing--8); }
.als-section--near-white { background: var(--wp--preset--color--near-white-100); }
.als-section--white { background: var(--wp--preset--color--white); }

@media (max-width: 640px) {
	:root { --als-gutter: 1rem; }
	.als-section { padding-block: var(--wp--preset--spacing--7); }
}

/* -------------------------------------------------------------------------
   3. Links, buttons, inputs
   ------------------------------------------------------------------------- */

/* Arrow link ("About us →"). The arrow is ::after so it can change colour on
   its own. The underline is a border so it can carry the accent colour and
   because browsers draw borders a whole number of device pixels thick: a
   positioned 2px box came out 2 or 3 pixels depending on where it landed on
   scaled displays, so links in one row looked heavier than the next. On hover
   the text goes bold and the arrow takes the accent; the rule stays put. */
.als-link {
	--als-link-accent: var(--wp--preset--color--blue);
	border-bottom: var(--als-rule) solid var(--als-link-accent);
	color: var(--wp--preset--color--black);
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.05em;
	line-height: 1.5;
	padding-bottom: 1px;
	position: relative;
	text-decoration: none;
}
.als-link--yellow { --als-link-accent: var(--wp--preset--color--yellow); }
.als-link--red    { --als-link-accent: var(--wp--preset--color--red); }
.als-link::after {
	content: "→";
	content: "→" / "";
	display: inline-block;
	margin-left: 0.3em;
	transition: color 0.2s ease;
}
.als-link:hover,
.als-link:focus-visible {
	color: var(--wp--preset--color--black);
	font-weight: 700;
}
.als-link:hover::after,
.als-link:focus-visible::after { color: var(--als-link-accent); }

/* Growing underline for the navigation family: breadcrumb, section sidebar,
   nav dropdown items. It's a background gradient so it follows wrapped text,
   which is why the labels are wrapped in spans. Everything else gets a plain
   underline on hover (next rule). */
.als-breadcrumb a,
.als-subnav__text,
.als-nav__sub-text {
	background-image: linear-gradient(var(--als-uline, currentColor), var(--als-uline, currentColor));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 var(--als-rule);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-bottom: 2px;
	text-decoration: none;
	transition: background-size 0.2s ease, color 0.2s ease;
}
.als-breadcrumb a:hover, .als-breadcrumb a:focus-visible,
.als-subnav__list a:hover .als-subnav__text, .als-subnav__list a:focus-visible .als-subnav__text,
.als-subnav__heading:hover .als-subnav__text, .als-subnav__heading:focus-visible .als-subnav__text,
.main-navigation .main-nav ul ul li:hover > a .als-nav__sub-text, .main-navigation .main-nav ul ul li > a:focus-visible .als-nav__sub-text {
	background-size: 100% var(--als-rule);
}
@media (prefers-reduced-motion: reduce) {
	.als-breadcrumb a, .als-subnav__text, .als-nav__sub-text { transition: none; }
}

/* Plain hover underline: footer, external links, post titles. */
.als-ext-link:hover .als-ext-link__text, .als-ext-link:focus-visible .als-ext-link__text,
.als-family__menu a:hover .als-family__text, .als-family__menu a:focus-visible .als-family__text,
.als-footer__links a:hover, .als-footer__links a:focus-visible,
.als-footer__heading:hover, .als-footer__heading:focus-visible,
.als-footer__legal a:hover, .als-footer__legal a:focus-visible,
.als-post-card__title a:hover, .als-post-card__title a:focus-visible,
.als-post-card__title-link:hover .als-post-card__title, .als-post-card__title-link:focus-visible .als-post-card__title,
.als-featured-post__title a:hover, .als-featured-post__title a:focus-visible,
.als-featured-post__title-link:hover .als-featured-post__title, .als-featured-post__title-link:focus-visible .als-featured-post__title {
	text-decoration: underline;
	text-decoration-thickness: var(--als-rule);
	text-underline-offset: var(--als-rule-offset);
}

/* Pill button. Every state is pinned because GP recolours buttons on hover and
   focus. Padding sits in its own single-class rule so size variants (--lg,
   .als-signup) aren't outranked by the :hover selectors and shrink on hover. */
.als-btn,
.als-btn:hover, .als-btn:active, .als-btn:focus, .als-btn:focus-visible {
	background-color: var(--wp--preset--color--blue) !important;
	border: 0;
	border-radius: 500px;
	color: var(--wp--preset--color--white) !important;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}
.als-btn { padding: 0.5rem 1.5rem; }
.als-btn:hover, .als-btn:focus-visible { background-color: var(--wp--preset--color--blue-dark) !important; }
.als-btn--lg { padding-block: 0.75rem; }
.als-btn:focus-visible { outline: 2px solid var(--wp--preset--color--black); outline-offset: 3px; }

/* Underlined text input. */
input.als-input,
input.als-input:focus {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--black);
	border-radius: 0;
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.05em;
	line-height: 1.5;
	outline: 0;
	padding: 0 0 0.75rem;
	width: 100%;
}
input.als-input::placeholder { color: var(--wp--preset--color--black-600); opacity: 1; }
input.als-input:focus-visible { border-bottom-color: var(--wp--preset--color--blue); box-shadow: 0 1px 0 var(--wp--preset--color--blue); }

/* External link: 26px medium with the blue box-arrow icon. */
.als-ext-links { list-style: none; margin: 0; padding: 0; }
.als-ext-link {
	color: var(--wp--preset--color--black);
	display: inline;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-decoration: none;
}
.als-ext-link:hover, .als-ext-link:focus-visible { color: var(--wp--preset--color--blue); }
.als-ext-link__text { transition: color 0.2s ease; }
.als-ext-link__end { white-space: nowrap; }
.als-ext-link__icon {
	color: var(--wp--preset--color--blue);
	display: inline-block;
	height: 18px;
	margin-left: 0.25rem;
	vertical-align: -1px;
	width: 18px;
}

/* Gravity Forms inside .als-signup. Strips the gravity-theme styling so the
   fields look like the plain markup above. */
.als-signup.als-signup--gf { display: block; }
.als-signup--gf .gform_wrapper { width: 100%; }
.als-signup--gf .gform_wrapper.gravity-theme,
.als-signup--gf .gform_wrapper.gravity-theme form { margin: 0; }
.als-signup--gf .gform_wrapper.gravity-theme .gform_heading,
.als-signup--gf .gform_wrapper.gravity-theme .gform_required_legend { display: none; }
/* Labels stay in the accessibility tree (display: none would leave the inputs
   unlabelled); the placeholder is the visible prompt. */
.als-signup--gf .gform_wrapper.gravity-theme .gfield_label {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.als-signup--gf .gform_wrapper.gravity-theme .gform-body,
.als-signup--gf .gform_wrapper.gravity-theme .gform_fields,
.als-signup--gf .gform_wrapper.gravity-theme .gfield { margin: 0; padding: 0; }
.als-signup--gf .gform_wrapper.gravity-theme .gform_fields { display: block; width: 100%; }
.als-signup--gf .gform_wrapper.gravity-theme .gfield { grid-column: auto; width: 100%; }
.als-signup--gf .gform_wrapper.gravity-theme .ginput_container { width: 100%; }
.als-signup--gf .gform_wrapper .gform_validation_container,
.als-signup--gf .gform_wrapper .gfield--type-honeypot { display: none !important; }
/* The footer form collects email only for now (client, 2026-10-05). The name
   field stays in the form so the Mailchimp feed mapping is untouched; delete
   this rule and the :not(.als-gf__name) below to bring it back. */
.als-signup--gf .gform_wrapper .als-gf__name { display: none !important; }
.als-signup--gf .gform_wrapper.gravity-theme .ginput_container { margin: 0; }
.als-signup--gf .gform_wrapper.gravity-theme input[type="text"],
.als-signup--gf .gform_wrapper.gravity-theme input[type="email"],
.als-signup--gf .gform_wrapper.gravity-theme input[type="text"]:focus,
.als-signup--gf .gform_wrapper.gravity-theme input[type="email"]:focus {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--black);
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.05em;
	line-height: 1.5 !important; /* GF's small-screen sheet forces line-height 2 + min-height 32px with a long :not() chain */
	min-height: 0 !important;
	outline: 0;
	padding: 0 0 0.75rem;
	width: 100%;
}
.als-signup--gf .gform_wrapper.gravity-theme input::placeholder { color: var(--wp--preset--color--black-600); opacity: 1; }
.als-signup--gf .gform_wrapper.gravity-theme input:focus-visible { border-bottom-color: var(--wp--preset--color--blue); box-shadow: 0 1px 0 var(--wp--preset--color--blue); }
.als-signup--gf .gform_wrapper.gravity-theme .gform_footer { margin: 0; padding: 0; }
.als-signup--gf .gform_wrapper.gravity-theme .gform_footer .gform_button,
.als-signup--gf .gform_wrapper.gravity-theme .gform_footer .gform_button:hover,
.als-signup--gf .gform_wrapper.gravity-theme .gform_footer .gform_button:focus {
	background-color: var(--wp--preset--color--blue) !important;
	border: 0;
	border-radius: 500px;
	color: var(--wp--preset--color--white) !important;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.5;
	margin: 0;
	padding: 0.75rem 1.5rem;
	transition: background-color 0.2s ease;
	white-space: nowrap;
	width: auto;
	display: inline-flex;
	text-decoration: none;
}
.als-signup--gf .gform_wrapper.gravity-theme .gform_footer .gform_button:hover { background-color: var(--wp--preset--color--blue-dark) !important; }
.als-signup--gf .gform_wrapper.gravity-theme .gform_validation_errors,
.als-signup--gf .gform_wrapper.gravity-theme .gfield_validation_message {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--wp--preset--color--red);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0.5rem 0 0;
	padding: 0;
}
.als-signup--gf .gform_wrapper.gravity-theme .gform_validation_errors { display: none; } /* the per-field message is enough */
.als-signup--gf .gform_wrapper.gravity-theme .gfield_error input { border-bottom-color: var(--wp--preset--color--red); }
.als-signup--gf .gform_confirmation_message { font-size: var(--wp--preset--font-size--sm); }
/* Light version (sign-up band): email and button on one line. */
.als-signup--light.als-signup--gf .gform_wrapper.gravity-theme form { align-items: center; display: flex; gap: 15px; }
.als-signup--light.als-signup--gf .gform_wrapper.gravity-theme .gform-body { flex: 1 1 344px; max-width: 344px; }
.als-signup--light.als-signup--gf .gform_wrapper.gravity-theme .gform_footer { flex: none; }
/* Dark version (footer): stacked, white rules, white pill. */
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme form { display: block; }
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme .gform-body { width: 100%; }
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme .gfield:not(.gfield--type-honeypot):not(.als-gf__name) ~ .gfield:not(.gfield--type-honeypot):not(.als-gf__name) { margin-top: 30px; } /* between visible fields only: the hidden honeypot is a .gfield too */
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme input[type="text"],
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme input[type="email"] {
	border-bottom-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xs);
	padding-bottom: 6px;
}
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme input::placeholder { color: var(--wp--preset--color--white); }
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme .gform_footer { margin-top: 32px; }
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme .gform_footer .gform_button,
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme .gform_footer .gform_button:hover,
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme .gform_footer .gform_button:focus {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--blue) !important;
	padding-block: 0.5rem;
}
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme .gform_footer .gform_button:hover,
.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme .gform_footer .gform_button:focus-visible { background-color: transparent !important; box-shadow: inset 0 0 0 2px var(--wp--preset--color--white); color: var(--wp--preset--color--white) !important; }
.als-signup--dark.als-signup--gf .gform_confirmation_message,
.als-signup--dark.als-signup--gf .gfield_validation_message { color: var(--wp--preset--color--white); }
@media (max-width: 640px) {
	.als-signup--light.als-signup--gf .gform_wrapper.gravity-theme form { align-items: flex-start; flex-direction: column; gap: 2.5rem; }
	.als-signup--light.als-signup--gf .gform_wrapper.gravity-theme .gform-body { flex: none; width: 100%; }
}

/* -------------------------------------------------------------------------
   4. Header: utility bar (64px) and masthead (128px)
   ------------------------------------------------------------------------- */

/* Utility bar */
.als-utility {
	background: var(--wp--preset--color--near-white-100);
	/* Sits above the GP header and the page so the open dropdown paints over them, below the off-canvas menu. */
	position: relative;
	z-index: 500;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	line-height: 1.5;
}
.als-utility__inner {
	align-items: center;
	display: flex;
	gap: 2rem;
	justify-content: flex-end;
	margin-inline: auto;
	max-width: calc(var(--als-content) + 2 * var(--als-gutter));
	min-height: 64px;
	padding-inline: var(--als-gutter);
}

.als-search { margin: 0; width: 240px; }
.als-search__field {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--black);
	display: flex;
	gap: 0.5rem;
	padding-bottom: 1px;
}
.als-search__field:focus-within { border-bottom-color: var(--wp--preset--color--blue); box-shadow: 0 1px 0 var(--wp--preset--color--blue); } /* colour and weight, like the other underlined inputs */
input.als-search__input,
input.als-search__input:focus {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--black);
	flex: 1 1 auto;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	line-height: 1.5;
	min-width: 0;
	outline: 0;
	padding: 0;
}
input.als-search__input::placeholder { color: var(--wp--preset--color--black-600); opacity: 1; }
.als-search__input::-webkit-search-decoration,
.als-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.als-search__btn,
.als-search__btn:hover, .als-search__btn:focus {
	background: transparent !important;
	border: 0;
	color: var(--wp--preset--color--blue) !important;
	cursor: pointer;
	display: inline-flex;
	line-height: 0;
	padding: 0;
}
.als-search__btn svg { height: 18px; width: 18px; }
/* Mobile-only controls (search toggle, Submit pill, round close buttons) */
.als-search .als-search__toggle, .als-search .als-search__submit, .als-utility .als-utility__close { display: none; }
.als-family__panel { display: contents; }

.als-family { position: relative; }
.als-family__toggle,
.als-family__toggle:hover, .als-family__toggle:focus {
	align-items: center;
	background: transparent !important;
	border: 0;
	color: var(--wp--preset--color--black) !important;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--xs);
	gap: 0.75rem;
	letter-spacing: 0.05em;
	line-height: 1.5;
	padding: 0;
}
.als-family__chevron { color: var(--wp--preset--color--blue); height: 16px; transition: transform 0.2s ease; width: 16px; }
.als-family.is-open .als-family__chevron { transform: rotate(180deg); }
.als-family__menu {
	background: var(--wp--preset--color--white);
	border-radius: 0 0 16px 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	display: none;
	list-style: none;
	margin: 0;
	min-width: 320px;
	padding: 1rem 0;
	position: absolute;
	right: 0;
	top: calc(100% + 19px);
	z-index: 60;
}
.als-family.is-open .als-family__menu { display: block; }
.als-family__menu li { margin: 0; }
.als-family__menu a {
	align-items: center;
	color: var(--wp--preset--color--black);
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	padding: 0.5rem 1.5rem;
	text-decoration: none;
}
.als-family__menu a:hover, .als-family__menu a:focus-visible { color: var(--wp--preset--color--blue); }
.als-family__text { transition: color 0.2s ease; }
.als-family__icon { color: var(--wp--preset--color--blue); flex: none; height: 16px; width: 16px; }

/* Masthead: GeneratePress header and navigation restyled to the design.
   Donate is a menu item with the class als-nav__cta. Under 1024px GP's menu
   toggle opens the Menu Plus overlay. */
.site-header { background: var(--wp--preset--color--white); }
.site-header .inside-header {
	align-items: center;
	display: flex;
	margin-inline: auto;
	max-width: calc(var(--als-content) + 2 * var(--als-gutter));
	min-height: 128px;
	padding: 0 var(--als-gutter);
}
.site-header .site-logo,
.site-header .site-branding-container { display: inline-flex; flex: none; line-height: 0; }
.site-header .site-logo img { height: 45px; width: auto; } /* design spec 45px (client, 2026-09-25) */
.site-header .site-branding { display: none; } /* logo only */
@media (min-width: 1200px) { .site-header .site-logo { margin-left: -21px; } } /* the mark overhangs the gutter in the design */

.main-navigation { background: transparent; margin-left: auto; }
.main-navigation .inside-navigation { padding: 0; }
.main-navigation .main-nav > ul { align-items: center; display: flex; gap: 2rem; }
.main-navigation .main-nav > ul > li { position: relative; }
.main-navigation .main-nav ul li a {
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.5;
	padding: 0.25rem 0;
	text-transform: none;
	transition: none;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a { background: transparent !important; color: var(--wp--preset--color--black) !important; } /* !important: GP's Customizer colours print after this sheet */
/* Narrow desktop (13" tablets in portrait are 1032 wide): tighter gaps so Donate stays on the row. */
@media (min-width: 1025px) and (max-width: 1199px) { .main-navigation .main-nav > ul { flex-wrap: nowrap; gap: 1.25rem; } }
/* Current page: off-white pill, no underline. Negative margins cancel the
   padding so the gaps between items don't change. */
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
	background: var(--wp--preset--color--near-white-200) !important;
	border-radius: 4px;
	margin: 0 -0.75rem;
	padding: 0.25rem 0.75rem;
}
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after { display: none; }
/* Hover underline on top-level items */
.main-navigation .main-nav > ul > li > a { position: relative; }
.main-navigation .main-nav > ul > li > a::after {
	background: var(--wp--preset--color--blue);
	bottom: -2px;
	content: "";
	height: var(--als-rule);
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
	width: 100%;
}
.main-navigation .main-nav > ul > li:hover > a::after,
.main-navigation .main-nav > ul > li.sfHover > a::after,
.main-navigation .main-nav > ul > li > a:focus-visible::after { transform: scaleX(1); }
/* No dropdown arrows on desktop */
.main-navigation .main-nav ul li a .dropdown-menu-toggle { display: none; }
/* Donate pill */
.main-navigation .main-nav > ul > li.als-nav__cta > a,
.main-navigation .main-nav > ul > li.als-nav__cta:hover > a,
.main-navigation .main-nav > ul > li.als-nav__cta.sfHover > a,
.main-navigation .main-nav > ul > li.als-nav__cta.current-menu-item > a {
	background: var(--wp--preset--color--blue) !important;
	border-radius: 500px;
	color: var(--wp--preset--color--white) !important;
	font-weight: 500;
	margin: 0;
	padding: 0.5rem 1.5rem;
}
.main-navigation .main-nav > ul > li.als-nav__cta:hover > a,
.main-navigation .main-nav > ul > li.als-nav__cta.sfHover > a,
.main-navigation .main-nav > ul > li.als-nav__cta > a:focus-visible { background: var(--wp--preset--color--blue-dark) !important; color: var(--wp--preset--color--white) !important; }
.main-navigation .main-nav > ul > li.als-nav__cta > a::after { display: none; }
/* Dropdown panels sit 12px under the item; the ::before bridge keeps hover
   alive across that gap. */
.main-navigation ul ul {
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	left: -1.5rem;
	padding: 1rem 0;
	top: calc(100% + 12px);
	width: 320px;
}
.main-navigation ul ul::before { content: ""; height: 12px; left: 0; position: absolute; right: 0; top: -12px; }
.main-navigation .main-nav ul ul li a {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	padding: 0.5rem 1.5rem;
}
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li.sfHover > a,
.main-navigation .main-nav ul ul li > a:focus-visible { color: var(--wp--preset--color--blue) !important; }
.als-nav__sub-text { --als-uline: var(--wp--preset--color--blue); transition: color 0.2s ease; }
/* Hamburger */
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover, .main-navigation .menu-toggle:focus {
	background: transparent;
	color: var(--wp--preset--color--black);
	padding: 0.5rem;
}
.main-navigation .menu-toggle .gp-icon svg { height: 24px; width: 24px; }
/* GP prints two toggles; we only want the inline one */
.main-navigation .inside-navigation .menu-toggle { display: none; }

/* Off-canvas overlay (Menu Plus) */
.slideout-navigation.main-navigation.do-overlay { background: var(--wp--preset--color--white); }
.slideout-navigation.main-navigation.do-overlay .inside-navigation { max-width: none; padding: 128px var(--als-gutter) 3rem; } /* .do-overlay: outranks Menu Plus's own padding */
.slideout-navigation.main-navigation .main-nav > ul { display: block; text-align: center; }
.slideout-navigation.main-navigation .main-nav ul li { margin: 0; }
.slideout-navigation.main-navigation .main-nav ul li a {
	color: var(--wp--preset--color--black);
	display: inline-block;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	line-height: 1.35;
	padding: 1rem 0;
	position: relative;
}
.slideout-navigation.main-navigation .main-nav ul li.current-menu-item > a,
.slideout-navigation.main-navigation .main-nav ul li.current-menu-ancestor > a {
	background: var(--wp--preset--color--near-white-200) !important;
	border-radius: 4px;
	margin: 0.25rem 0;
	padding: 0.75rem 1rem;
}
.slideout-navigation.main-navigation .main-nav ul li.current-menu-item:hover > a,
.slideout-navigation.main-navigation .main-nav ul li.current-menu-ancestor:hover > a { background: var(--wp--preset--color--near-white-200) !important; }
/* The overlay's first 80px is a copy of the header row: logo left, close button right */
.slideout-navigation .als-slideout__brand { left: var(--als-gutter); line-height: 0; position: absolute; top: 22px; }
.slideout-navigation .als-slideout__brand img { height: 36px; width: auto; }
/* No hover effects in the overlay: the desktop underline and pill rules above also match this nav. */
.slideout-navigation.main-navigation .main-nav > ul > li > a::after { display: none; }
.slideout-navigation.main-navigation .main-nav ul li a { -webkit-tap-highlight-color: transparent; }
.slideout-navigation.main-navigation .main-nav ul li:hover > a,
.slideout-navigation.main-navigation .main-nav ul li > a:focus { background: transparent !important; color: var(--wp--preset--color--black) !important; }
.slideout-navigation.main-navigation .main-nav ul li.als-nav__cta { margin-top: 1rem; }
.slideout-navigation.main-navigation .main-nav ul li.als-nav__cta > a {
	background: var(--wp--preset--color--blue);
	border-radius: 500px;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.05em;
	padding: 0.5rem 1.5rem;
}
/* Pinned in EVERY state with .do-overlay in the selector: Menu Plus's own
   `.slideout-navigation.do-overlay .slideout-exit { position: fixed; width: 100% }`
   otherwise wins the moment the button loses focus, and it jumps into the flow on
   top of the first link, so taps release on the X instead of the link. */
.slideout-navigation.do-overlay button.slideout-exit,
.slideout-navigation.do-overlay button.slideout-exit:hover,
.slideout-navigation.do-overlay button.slideout-exit:focus,
.slideout-navigation.do-overlay button.slideout-exit:active {
	background: transparent;
	color: var(--wp--preset--color--black);
	line-height: 0;
	padding: 0.5rem;
	position: absolute;
	right: var(--als-gutter);
	top: 12px; /* same box as the header's hamburger */
	width: auto;
}
.slideout-navigation button.slideout-exit svg { height: 24px; width: 24px; }
.slideout-overlay { background: rgba(0, 0, 0, 0.2); }

@media (max-width: 1024px) {
	.als-utility__inner { justify-content: space-between; min-height: 48px; }
	.als-search, .als-family { position: static; }
	.als-search { width: auto; }
	.als-family__toggle { white-space: nowrap; }
	/* Search icon toggles the panel; it turns into an X while open */
	.als-search .als-search__toggle,
	.als-search .als-search__toggle:hover, .als-search .als-search__toggle:focus {
		background: transparent !important;
		border: 0;
		color: var(--wp--preset--color--blue) !important;
		cursor: pointer;
		display: inline-flex;
		line-height: 0;
		padding: 0;
	}
	.als-search__toggle svg { height: 18px; width: 18px; }
	.als-search__toggle-close, .als-search.is-open .als-search__toggle-open { display: none; }
	.als-search.is-open .als-search__toggle-close { display: block; }
	/* Panels: full-width near-white sheets under the bar, painting over the header and page */
	.als-search__panel, .als-family__panel {
		background: var(--wp--preset--color--near-white-100);
		display: none;
		left: 0;
		position: absolute;
		right: 0;
		text-align: center;
		top: 100%;
		z-index: 60;
	}
	.als-search.is-open .als-search__panel, .als-family.is-open .als-family__panel { display: block; }
	.als-search__panel { padding: 80px var(--als-gutter) 41px; }
	.als-search__field { text-align: left; }
	input.als-search__input, input.als-search__input:focus { font-size: var(--wp--preset--font-size--sm); letter-spacing: 0; }
	.als-search__btn svg { height: 24px; width: 24px; }
	.als-search.is-open .als-search__submit { display: flex; margin: 24px auto 0; padding: 12px 24px; }
	/* One rule for every state (hover/focus must not change the box, or the button jumps) */
	.als-utility .als-utility__close,
	.als-utility .als-utility__close:hover, .als-utility .als-utility__close:focus, .als-utility .als-utility__close:active {
		background: transparent !important;
		border: 0;
		color: var(--wp--preset--color--black) !important;
		cursor: pointer;
		display: flex;
		line-height: 0;
		margin-inline: auto;
		padding: 0;
	}
	.als-utility__close svg { height: 32px; width: 32px; }
	.als-utility .als-search__panel .als-utility__close { margin-top: 57px; }
	.als-family__panel { padding: 41px var(--als-gutter); }
	.als-family__menu { background: transparent; border-radius: 0; box-shadow: none; display: block; min-width: 0; padding: 0; position: static; }
	.als-family__menu li + li { margin-top: 32px; }
	.als-family__menu a { display: inline; font-size: 1.5rem; letter-spacing: 0; line-height: 1.35; padding: 0; }
	.als-family__icon { display: inline; vertical-align: middle; }
	.als-utility .als-family__panel .als-utility__close { margin-top: 43px; }
	/* No hover styling in the touch panels (a tap would leave it stuck on) */
	.als-family__menu a:hover, .als-family__menu a:focus-visible,
	.als-family__menu a:hover .als-family__text, .als-family__menu a:focus-visible .als-family__text { color: var(--wp--preset--color--black); text-decoration: none; }
	.als-family__menu a:focus-visible { outline: 2px solid var(--wp--preset--color--blue); outline-offset: 4px; }
	.site-header .inside-header { min-height: 80px; }
	.site-header .site-logo img { height: 36px; }
	.main-navigation .menu-toggle { display: inline-flex; }
	/* Off-canvas menu open: the bar pins to the top, above the overlay, which starts under it */
	.slide-opened .als-utility { left: 0; position: fixed; right: 0; top: 0; z-index: 100001; }
	.slideout-navigation.main-navigation.do-overlay { top: 48px; }
}

/* -------------------------------------------------------------------------
   5. Homepage and Our expertise sections
   ------------------------------------------------------------------------- */

/* 5.1 Hero: text beside a framed photo, with the chain graphic overlapping */
.als-hero {
	overflow: hidden;
	padding-block: 43px 80px;
	position: relative;
}
.als-hero__grid {
	align-items: start;
	display: grid;
	gap: 2rem 10%;
	grid-template-columns: minmax(0, 600fr) minmax(0, 498fr);
}
.als-hero__text { padding-top: 57px; }
.als-hero__title { margin-bottom: 2rem; }
.als-hero__title-sans + .als-hero__title-serif { color: var(--wp--preset--color--blue); }
.als-hero__lede { margin-bottom: 2rem; }
.als-hero__media { position: relative; }
/* Photo stage: the photo sits in a rounded frame; the optional cut-out layer
   is the same crop laid on top so the people overlap the frame's top edge. */
.als-hero__stage { aspect-ratio: 497 / 386; overflow: hidden; position: relative; }
.als-hero__frame {
	border-radius: 16px;
	inset: 0;
	overflow: hidden;
	position: absolute;
}
.als-hero__photo,
.als-hero__cutout { display: block; height: 100%; object-fit: cover; width: 100%; }
.als-hero__stage--layered .als-hero__frame { inset: 7% 0 0; }
.als-hero__stage--layered .als-hero__photo,
.als-hero__stage--layered .als-hero__cutout {
	height: auto;
	left: -27.86%;
	position: absolute;
	top: -6.5%;
	width: 174.45%;
	max-width: none;
}
.als-hero__stage--layered .als-hero__photo { top: -14.45%; }
.als-hero__stage--layered .als-hero__cutout { z-index: 1; }
.als-hero__title-sans, .als-hero__title-serif { display: block; }
/* The serif sits lower in its line than the sans, so the sans → serif step is
   about 0.06em more than the line-height. When the serif line wraps, its own
   lines take that same step; the margins keep the first line where it was. */
@media (min-width: 1025px) {
	.als-hero__title-sans + .als-hero__title-serif { line-height: 1.262; margin-block: -0.031em; }
}
.als-hero__credit { margin-top: 10px; }
.als-hero__chain {
	height: auto;
	left: calc(100% - 302px);
	pointer-events: none;
	position: absolute;
	top: 175px;
	/* The art is the full unclipped chain, sized so the visible part matches the design at 1440. */
	width: 479px;
	z-index: 1;
}
@media (max-width: 1024px) {
	.als-hero { padding-block: 2.5rem 3rem; }
	.als-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.als-hero__text { padding-top: 0; }
	.als-hero__media { max-width: 500px; }
	.als-hero__chain { left: 56%; top: 60%; width: 71.1%; } /* anchored left so the extra art grows off-screen */
	.als-hero--framed { padding-bottom: 78px; } /* mobile comp: photo credit to the tile band, which leaves ~40px under the chain */
}
@media (max-width: 640px) {
	.als-hero__title-sans, .als-hero__title-serif { display: inline; }
	.als-hero__chain { top: calc(60% + 17px); }
}
/* The mobile design puts the tile band above the intro cards. */
@media (max-width: 1024px) {
	.als-page .entry-content { display: flex; flex-direction: column; }
	.als-page .entry-content > * { width: 100%; }
	.als-page .entry-content > .als-hero { order: -2; }
	.als-page .entry-content > .als-tile-band { order: -1; }
}

/* 5.2 Intro cards: three columns divided by rules, links pinned to the bottom */
.als-intro-cards { padding-block: 0 114px; }
.als-intro-cards__grid {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.als-intro-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 227px;
	padding-right: 2.5rem;
}
.als-intro-card + .als-intro-card {
	border-left: 1px solid var(--wp--preset--color--black);
	padding-left: 2.5rem;
}
.als-intro-card:last-child { padding-right: 0; }
.als-intro-card__link { align-self: flex-start; margin-top: auto; padding-top: 0.5rem; }
@media (max-width: 1024px) {
	.als-intro-cards { padding-block: 2.5rem; } /* the tile band sits above the cards here, so they need their own top gap */
	.als-intro-cards__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.als-intro-card { min-height: 0; padding: 0; }
	.als-intro-card + .als-intro-card { border-left: 0; border-top: 1px solid var(--wp--preset--color--black); padding: 2.5rem 0 0; }
}

/* 5.3 Tile band: the patterned strip between sections */
.als-tile-band {
	background: url("assets/images/tile-band.png") center top / auto 96px repeat-x;
	height: 96px;
}
@media (max-width: 640px) { .als-tile-band { background-size: auto 56px; height: 56px !important; } } /* mobile comp: 56px strip; the block's inline 96px height prints after this sheet */

/* 5.4 The latest: post cards from the latest-posts query loop */
.als-post-card { display: flex; flex-direction: column; gap: 2rem; }
.als-post-card__media { display: block; line-height: 0; }
.als-post-card__img {
	aspect-ratio: 393 / 288;
	border-radius: 16px;
	object-fit: cover;
	width: 100%;
}
.als-post-card__body { display: flex; flex-direction: column; gap: 1rem; padding-right: 1.5rem; }
.als-post-card__cat { margin-bottom: -0.5rem; }
.als-post-card__title {
	color: var(--wp--preset--color--blue-dark);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.2;
}
.als-post-card__title a, .als-post-card__title-link { color: inherit; text-decoration: none; }
.als-post-card__title-link .als-post-card__title { display: inline; } /* so the underline follows the text, not the card width */
.als-post-card__title a:hover, .als-post-card__title a:focus-visible,
.als-post-card__title-link:hover .als-post-card__title, .als-post-card__title-link:focus-visible .als-post-card__title { color: var(--wp--preset--color--blue-dark); }
.als-post-card__cat:empty { display: none; }
.als-latest__more { margin-top: 3rem; text-align: right; }
@media (max-width: 640px) {
	.als-post-card { gap: 1rem; }
	.als-post-card__body { padding-right: 0; }
}

/* 5.5 Chain divider: a 240px band, near-white on top, white below */
.als-chain-divider {
	background: linear-gradient(to bottom, var(--wp--preset--color--near-white-100) 50%, var(--wp--preset--color--white) 50%);
	height: 240px;
	overflow: hidden;
	position: relative;
}
.als-chain-divider__art {
	display: block;
	height: 240px;
	/* 34px left of the content column, so at 1440 the red loop bleeds off the edge as in the design and
	   the whole chain only shows on wider screens (the same idea as the hero chain on the right). */
	left: max(-34px, (100% - (var(--als-content) + 2 * var(--als-gutter))) / 2 - 34px);
	position: absolute;
	top: 0;
	width: 639px;
}
@media (max-width: 640px) {
	.als-chain-divider { height: 160px; }
	.als-chain-divider__art { height: auto; left: -76px; max-width: none; top: 50%; transform: translateY(-50%); width: 435px; } /* scaled down, still bleeding off the left like the mobile comp */
}

/* 5.6 Family websites */
.als-family-sites__grid {
	align-items: center;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 705fr) minmax(0, 496fr);
}
.als-family-sites__links .als-ext-links {
	display: grid;
	gap: 2rem 1.625rem;
	grid-template-columns: repeat(2, minmax(0, 289px));
	margin-bottom: 2.5rem;
}
.als-family-sites__figure img {
	aspect-ratio: 496 / 540;
	border-radius: 16px;
	display: block;
	object-fit: cover;
	width: 100%;
}
@media (max-width: 1024px) {
	.als-family-sites__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.als-family-sites__figure img { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
	.als-family-sites__links .als-ext-links { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* 5.7 Sign-up band and the plain (non-Gravity) form markup */
.als-signup-band__grid {
	align-items: center;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 495px) minmax(0, 501px);
	justify-content: space-between;
}
.als-signup { align-items: center; display: flex; gap: 15px; margin: 0; }
.als-signup .als-input { max-width: 344px; }
.als-signup .als-btn { padding-block: 0.75rem; }
@media (max-width: 1024px) { .als-signup-band__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
	.als-signup-band__grid { gap: 4rem; } /* mobile comp: 64px from the lede to the field, 40px field to button */
	.als-signup { align-items: flex-start; flex-direction: column; gap: 2.5rem; }
	.als-signup .als-input { max-width: none; }
}

/* Breadcrumb */
.als-breadcrumb { font-size: var(--wp--preset--font-size--sm); letter-spacing: 0.05em; line-height: 1.25; }
.als-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.als-breadcrumb li { margin: 0; }
.als-breadcrumb li + li::before { content: "/"; padding: 0 0.4em; }
.als-breadcrumb a { --als-uline: var(--wp--preset--color--blue); color: var(--wp--preset--color--black); text-decoration: none; }
.als-breadcrumb a:hover, .als-breadcrumb a:focus-visible { color: var(--wp--preset--color--black); }
.als-breadcrumb [aria-current] { color: var(--wp--preset--color--black-600); }

/* Hero with breadcrumb and plain art (Our expertise). */
.als-hero--crumb { padding-top: 78px; }
.als-hero--crumb .als-hero__grid { align-items: start; }
.als-hero--crumb .als-hero__text { padding-top: var(--als-crumb-gap); }
.als-hero--plain { padding-bottom: 57px; }
.als-hero--plain + .als-text, .als-hero--plain + .als-page-list { padding-top: 0; } /* intro text starts where the feature grid does on the other landing pages */
.als-hero--plain .als-hero__grid { grid-template-columns: minmax(0, 601fr) minmax(0, 504fr); gap: 2rem 10.6%; }
.als-hero--crumb.als-hero--plain .als-hero__media { margin-top: -25px; } /* art top-aligns with the breadcrumb */
.als-hero--plain .als-hero__lede:last-child { margin-bottom: 0; }
.als-hero__art { display: block; height: auto; width: 100%; }
.als-hero--plain .als-hero__title { margin-bottom: 2rem; }
@media (max-width: 1024px) {
	.als-hero--crumb { padding-top: 2rem; }
	.als-hero--crumb .als-hero__text { padding-top: var(--als-crumb-gap); }
	.als-hero--plain .als-hero__grid { grid-template-columns: 1fr; }
	.als-hero--plain .als-hero__media, .als-hero--crumb.als-hero--plain .als-hero__media { margin-top: 0; max-width: 420px; }
}

/* Intro paragraph band */
.als-intro-text { padding-block: 0 4rem; }
.als-intro-text__body { max-width: 807px; }

/* Feature grid: icon, heading, copy and link in three columns */
.als-feature-grid { padding-block: 0 4.5rem; }
.als-feature-grid__grid {
	display: grid;
	gap: 3rem 47px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.als-feature { display: flex; flex-direction: column; }
.als-feature__icon { display: block; height: 80px; margin-bottom: 1.5rem; width: 80px; }
.als-feature__icon img { display: block; height: 80px; width: 80px; }
.als-feature :is(h2, h3) { margin-bottom: 1rem; }
.als-feature p { margin-bottom: 1.5rem; }
.als-feature .als-link { margin-top: auto; align-self: flex-start; }
.als-feature .als-link + .als-link { margin-top: 0.75rem; } /* Programs: Learn more + Visit site */
.als-feature-grid--band { padding-top: 4.5rem; } /* when it does not sit flush under the Our expertise hero */
@media (max-width: 1024px) { .als-feature-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; } }
@media (max-width: 640px) { .als-feature-grid__grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------------------- */
.als-footer {
	background: var(--wp--preset--color--blue-dark);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	line-height: 1.5;
	padding-block: 52px 26px;
}
.als-footer__inner {
	display: grid;
	gap: 0 26px;
	grid-template-columns: minmax(0, 1fr) 287px;
	grid-template-areas:
		"cols aside"
		"badge aside"
		"legal legal";
}
.als-footer__cols { display: flex; gap: 60px; grid-area: cols; }
.als-footer__stack { display: contents; } /* pairs of columns; only a box in the stacked (mobile) layout */
.als-footer__col { width: 184px; }
.als-footer__heading {
	color: inherit;
	display: inline-block;
	font-weight: 700; /* one step bolder than the design's 600 so the hierarchy reads (client, 2026-09-25) */
	margin-bottom: 0.5rem;
	text-decoration: none;
}
.als-footer__links { list-style: none; margin: 0; padding: 0; }
.als-footer__links li { margin: 0 0 0.5rem; }
.als-footer__links a { color: inherit; text-decoration: none; }
.als-footer__links a:hover, .als-footer__links a:focus-visible,
.als-footer__heading:hover, .als-footer__heading:focus-visible { color: inherit; } /* GP's a:hover colour would win otherwise */
.als-footer__links--bold { font-weight: 700; }
.als-footer__links--bold li { margin-bottom: 1.5rem; }

.als-footer__aside { display: flex; flex-direction: column; grid-area: aside; }
.als-footer__signup-title {
	color: inherit;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.2;
	margin-bottom: 2rem;
}
.als-signup--dark { align-items: flex-start; flex-direction: column; gap: 0; }
.als-signup--dark input.als-input,
.als-signup--dark input.als-input:focus {
	border-bottom-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xs);
	margin-bottom: 30px;
	max-width: none;
	padding-bottom: 6px;
}
.als-signup--dark input.als-input::placeholder { color: var(--wp--preset--color--white); }
.als-signup--dark .als-btn,
.als-signup--dark .als-btn:hover, .als-signup--dark .als-btn:active, .als-signup--dark .als-btn:focus {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--blue) !important;
	margin-top: 2px;
}
.als-signup--dark .als-btn { padding-block: 0.5rem; }
.als-signup--dark .als-btn:hover, .als-signup--dark .als-btn:focus-visible { background-color: transparent !important; box-shadow: inset 0 0 0 2px var(--wp--preset--color--white); color: var(--wp--preset--color--white) !important; }

.als-social { display: flex; gap: 26px; list-style: none; margin: 1rem 0 0; padding: 0; } /* under the bold links */
.als-social li { margin: 0; }
.als-social a { color: inherit; display: inline-flex; line-height: 0; }
.als-social svg { height: 24px; width: 24px; }
.als-social a:hover, .als-social a:focus-visible { color: var(--wp--preset--color--yellow); }

.als-footer__badge { grid-area: badge; margin: 1.5rem 0 0; width: 134px; }
.als-footer__badge img { display: block; height: 134px; width: 134px; }
.als-footer__legal {
	border-top: 1px solid var(--wp--preset--color--white);
	grid-area: legal;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
}
.als-footer__legal a { color: inherit; text-decoration: none; }
.als-footer__legal a:hover, .als-footer__legal a:focus-visible { color: inherit; }

/* Narrow desktop: the four columns get the full row, the sign-up moves under
   them on the right, beside the badge. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.als-footer__inner {
		grid-template-areas:
			"cols  cols"
			"badge aside"
			"legal legal";
	}
	.als-footer__cols { gap: 2rem; }
	.als-footer__col { flex: 1 1 0; width: auto; }
	.als-footer__aside, .als-footer__badge { margin-top: 3rem; }
}

/* Stacked footer (mobile comp): link groups run down two columns, the social
   icon sits under the right-hand column's bold links, then the sign-up form
   full width. The columns wrapper and the aside drop out (display: contents)
   so their children can be placed on one grid. */
@media (max-width: 1024px) {
	.als-footer__inner {
		gap: 0 2rem;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"stack-a stack-b"
			"title   title"
			"form    form"
			"badge   badge"
			"legal   legal";
	}
	.als-footer__cols, .als-footer__aside { display: contents !important; } /* the aside's GB inline display prints after this sheet */
	.als-footer__stack { display: flex; flex-direction: column; gap: 2rem; grid-area: stack-a; }
	.als-footer__stack + .als-footer__stack { grid-area: stack-b; }
	.als-footer__col { width: auto; }
	.als-footer__links li:last-child { margin-bottom: 0; }
	.als-footer__links--bold li { margin-bottom: 0.5rem; }
	.als-social { margin-top: 2.5rem; }
	.als-footer__signup-title { grid-area: title; margin: 3.25rem 0 1.5rem; }
	.als-footer__inner > .als-signup, .als-footer__aside > .als-signup { grid-area: form; }
	.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme .gfield:not(.gfield--type-honeypot):not(.als-gf__name) ~ .gfield:not(.gfield--type-honeypot):not(.als-gf__name),
	.als-signup--dark.als-signup--gf .gform_wrapper.gravity-theme .gform_footer { margin-top: 1.5rem; }
	.als-signup--dark input.als-input { margin-bottom: 1.5rem; }
	.als-footer__badge { margin-top: 2.5rem; }
}

/* -------------------------------------------------------------------------
   7. Blog: single post and the posts page. 814px content column plus a
   173px share/tags rail.
   ------------------------------------------------------------------------- */
.als-post__inner {
	margin-inline: auto;
	max-width: calc(1092px + 2 * var(--als-gutter));
	padding-inline: var(--als-gutter);
	width: 100%;
}
/* The design puts the 1092px block 210px from the left edge at 1440, i.e. 36px right of centre. */
@media (min-width: 1200px) {
	.als-post__inner { padding-inline: calc(var(--als-gutter) + 36px) calc(var(--als-gutter) - 36px); }
}
.als-post__hero { padding-block: 64px 54px; }
.als-post__heading { margin-top: var(--als-crumb-gap); max-width: 814px; } /* same column as the body */
.als-post__cat { margin-bottom: 1rem; }
.als-post__cat a { color: inherit; text-decoration: none; }
.als-post__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxxl);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin-bottom: 1.5rem;
}
.als-post__subtitle {
	font-size: var(--wp--preset--font-size--xxl);
	letter-spacing: 0.05em;
	line-height: 1.3;
	margin-bottom: 2.5rem;
}
.als-post__byline { font-size: var(--wp--preset--font-size--sm); }

.als-post__layout {
	display: grid;
	gap: 0 105px;
	grid-template-columns: minmax(0, 814px) 173px;
	justify-content: space-between;
}
.als-post__body { padding-bottom: 4.5rem; }
.als-post__content { max-width: 814px; }
.als-prose > * { margin-block: 0 0; }
.als-prose > * + * { margin-top: 1.5rem; }
.als-post__figure { margin: 0 0 3rem; }
.als-post__image, .als-prose .wp-block-image img {
	aspect-ratio: 812 / 531;
	border-radius: 16px;
	display: block;
	object-fit: cover;
	width: 100%;
}
.als-post__figure figcaption, .als-prose .wp-block-image figcaption, .als-prose figcaption {
	color: var(--wp--preset--color--black-600);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	line-height: 1.5;
	margin: 16px 0 0;
	text-align: left;
}
.als-prose .wp-block-image { margin-block: 3rem; }
.als-prose h2 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xxl);
	font-variation-settings: normal;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin-top: 3rem;
}
.als-prose h3 {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.2;
	margin-top: 2.5rem;
}
.als-prose h2 + *, .als-prose h3 + * { margin-top: 1rem; }
.als-prose ul, .als-prose ol { margin: 0; padding-left: 1.5rem; }
.als-prose blockquote, .als-prose blockquote p, .als-prose .wp-block-pullquote p { font-style: normal; }
.als-prose li { margin-bottom: 0.5rem; }
.als-prose li strong { font-weight: 600; }
/* Accordion answers are body copy too, but sit outside .als-prose. */
.als-prose a:not(.als-link):not(.als-btn), .wp-block-accordion-panel a:not(.als-link):not(.als-btn) { color: var(--wp--preset--color--blue); text-decoration: underline; text-decoration-thickness: var(--als-rule); text-underline-offset: var(--als-rule-offset); }
.als-prose a:not(.als-link):not(.als-btn):hover, .als-prose a:not(.als-link):not(.als-btn):focus-visible,
.wp-block-accordion-panel a:not(.als-link):not(.als-btn):hover, .wp-block-accordion-panel a:not(.als-link):not(.als-btn):focus-visible { color: var(--wp--preset--color--blue-dark); }
/* Blockquote: blue rule on the left */
.als-prose blockquote,
.als-prose .wp-block-quote {
	border-left: 2px solid var(--wp--preset--color--blue);
	margin: 2.5rem 0;
	padding: 0 0 0 22px;
}
.als-prose blockquote p { font-size: var(--wp--preset--font-size--sm); }
.als-prose blockquote cite { display: block; font-style: normal; margin-top: 0.5rem; }
/* Pull quote: the design's 48x32 blue quote mark at the column's left edge, text 80px in */
.als-prose .wp-block-pullquote {
	border: 0;
	margin: 2.5rem 0;
	padding: 0 0 0 80px;
	position: relative;
	text-align: left;
}
.als-prose .wp-block-pullquote blockquote { border: 0; margin: 0; padding: 0; text-align: left; }
.als-prose .wp-block-pullquote::before {
	background-color: var(--wp--preset--color--blue);
	content: "";
	height: 32px;
	left: 0;
	-webkit-mask: url("assets/images/quote-mark.svg") no-repeat center / contain;
	mask: url("assets/images/quote-mark.svg") no-repeat center / contain;
	position: absolute;
	top: 6px;
	width: 48px;
}
.als-prose .wp-block-pullquote p {
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: 0.05em;
	line-height: 1.3;
}
.als-prose .wp-block-pullquote cite { display: block; font-size: var(--wp--preset--font-size--xs); font-style: normal; margin-top: 1rem; }
/* Callout box */
.als-callout {
	background: var(--wp--preset--color--near-white-100);
	border-radius: 16px;
	margin-block: 2.5rem;
	padding: 40px 43px;
}
.als-prose .als-callout > * { max-width: none; }
.als-prose .als-callout h3 { margin-top: 0; }
.als-prose .als-callout h3 + p { margin-top: 1rem; }

/* Share / tags rail */
.als-post__rail { font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.05em; line-height: 1.5; }
.als-share__label { font-weight: 600; margin-bottom: 1rem; }
.als-share__list, .als-tags__list { list-style: none; margin: 0; padding: 0; }
.als-share__list li { margin: 0 0 1rem; }
.als-share__list a, .als-share__copy,
.als-share__copy:hover, .als-share__copy:focus {
	align-items: center;
	background: transparent !important;
	border: 0;
	color: var(--wp--preset--color--black) !important;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 18px;
	letter-spacing: inherit;
	padding: 0;
	text-decoration: none;
}
.als-share__list svg { color: var(--wp--preset--color--blue); flex: none; height: 24px; width: 24px; }
.als-share__list a:hover span, .als-share__copy:hover span { text-decoration: underline; text-decoration-thickness: var(--als-rule); text-underline-offset: var(--als-rule-offset); }
.als-tags { margin-top: 3rem; }
.als-tags__list { display: flex; flex-direction: column; gap: 1rem; }
.als-tags__list li { margin: 0; }
.als-tag {
	border: 1px solid var(--wp--preset--color--black);
	border-radius: 500px;
	color: var(--wp--preset--color--black);
	display: inline-block;
	padding: 3px 11px;
	text-decoration: none;
}
.als-tag:hover, .als-tag:focus-visible { background: var(--wp--preset--color--near-white-200); }
/* Desktop design: the rail is Share + LinkedIn only; tags appear on the mobile comp only. */
.als-tags { display: none; }
/* Mobile design: a row of four share icons under the byline (no labels). */
.als-post__share-row { display: none; list-style: none; margin: 0; padding: 0; }
.als-post__share-row li { margin: 0; }
.als-post__share-row a, .als-post__share-row .als-share__copy,
.als-post__share-row .als-share__copy:hover, .als-post__share-row .als-share__copy:focus {
	background: transparent !important;
	border: 0;
	color: var(--wp--preset--color--blue) !important;
	cursor: pointer;
	display: block;
	line-height: 0;
	padding: 0;
}
.als-post__share-row svg { display: block; height: 24px; width: 24px; }
@media (max-width: 1024px) {
	.als-post__hero { padding-block: 2rem 2rem; }
	.als-post__heading { margin-top: var(--als-crumb-gap); }
	.als-post__share-row { display: flex; gap: 32px; margin-top: 40px; }
	.als-post__layout { grid-template-columns: 1fr; gap: 2.5rem; }
	.als-page .als-post__content { display: block; } /* the mobile flex-column rule in section 6 stops margins collapsing */
	.als-post__figure { margin-bottom: 2.5rem; }
	.als-share { display: none; }
	.als-tags { display: block; margin-top: 0; }
	.als-tags__list { flex-direction: row; flex-wrap: wrap; }
	.als-prose .wp-block-pullquote { padding-left: 64px; }
	.als-prose .wp-block-pullquote::before { height: 27px; top: 8px; width: 40px; }
	.als-callout { padding: 1.5rem; }
}

/* Posts page: hero, featured post, grid, pagination */
.als-page-hero { padding-block: 72px 71px; }
.als-page-hero__title { display: block; font-size: var(--wp--preset--font-size--xxxxl); margin-top: var(--als-crumb-gap); }
.als-archive__list { padding-top: 0; }
.als-featured-post {
	align-items: center;
	display: grid;
	gap: 66px;
	grid-template-columns: minmax(0, 599fr) minmax(0, 560fr);
	margin-bottom: 4.5rem;
}
.als-featured-post__img { aspect-ratio: 599 / 439; border-radius: 16px; display: block; object-fit: cover; width: 100%; }
.als-featured-post__body .als-eyebrow-compact { margin-bottom: 1rem; }
.als-featured-post__title { margin-bottom: 1.5rem; }
.als-featured-post__title a { color: inherit; text-decoration: none; }
.als-featured-post__title a:hover, .als-featured-post__title a:focus-visible { color: inherit; }
.als-featured-post__sub { margin-bottom: 2rem; }
.als-archive__grid {
	display: grid;
	gap: 4rem 1.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.als-pagination { margin-top: 4.5rem; }
.als-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.als-pagination .page-numbers { color: var(--wp--preset--color--black); text-decoration: none; }
.als-pagination .page-numbers.current { border-bottom: var(--als-rule) solid var(--wp--preset--color--blue); }
.als-pagination .prev { margin-right: 1.5rem; }
.als-pagination .next { margin-left: 1.5rem; }
.als-pagination .screen-reader-text { position: absolute; left: -9999px; }
@media (max-width: 1024px) {
	.als-page-hero { padding-block: 2rem; }
	.als-page-hero__title { margin-top: var(--als-crumb-gap); }
	.als-featured-post { grid-template-columns: 1fr; gap: 2rem; }
	.als-archive__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .als-archive__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* -------------------------------------------------------------------------
   8. Page modules. One component per module; the patterns only carry
   classes and content, so every instance changes together.
   ------------------------------------------------------------------------- */

/* Shared bits */
.als-eyebrow { font-size: var(--wp--preset--font-size--lg); letter-spacing: 0.05em; line-height: 1.2; }
.als-kitchen-sink .als-ks-label {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.2;
	margin: 0 auto;
	max-width: calc(var(--als-content) + 2 * var(--als-gutter));
	padding: 64px var(--als-gutter) 24px;
}
.als-kitchen-sink .als-ks-label:first-child { padding-top: 24px; }

/* 8.1 Hero layouts (modules 1A–1D). The base hero rules are in 5.1. */
.als-hero--layout-bleed-right,
.als-hero--layout-bleed-left { padding-block: 0; }
.als-hero--layout-bleed-right .als-container { max-width: none; padding-inline: var(--als-gutter) 0; }
.als-hero--layout-bleed-left  .als-container { max-width: none; padding-inline: 0 var(--als-gutter); }
.als-hero--layout-bleed-right .als-hero__grid { grid-template-columns: minmax(0, 495fr) minmax(0, 708fr); column-gap: 9.6%; }
.als-hero--layout-bleed-left  .als-hero__grid { grid-template-columns: minmax(0, 708fr) minmax(0, 495fr); column-gap: 9.6%; }
.als-hero--layout-bleed-left  .als-hero__text { order: 2; }
.als-hero--layout-bleed-right .als-hero__text,
.als-hero--layout-bleed-left  .als-hero__text { padding-top: 174px; }
.als-hero--layout-bleed-right .als-hero__title,
.als-hero--layout-bleed-left  .als-hero__title { margin-bottom: 2.5rem; }
.als-hero--layout-bleed-right .als-hero__lede,
.als-hero--layout-bleed-left  .als-hero__lede { margin-bottom: 2.5rem; }
.als-hero__bleed { aspect-ratio: 708 / 640; display: block; height: auto; object-fit: cover; width: 100%; }
.als-hero--layout-bleed-right .als-hero__bleed { border-radius: 16px 0 0 16px; }
.als-hero--layout-bleed-left  .als-hero__bleed { border-radius: 0 16px 16px 0; }

.als-hero--layout-split-text { padding-block: 71px 58px; }
.als-hero--layout-split-text .als-hero__grid { grid-template-columns: minmax(0, 492fr) minmax(0, 597fr); column-gap: 10.8%; align-items: start; }
.als-hero--layout-split-text .als-hero__title { margin-bottom: 0; }
.als-hero--layout-split-text .als-hero__lede { margin-bottom: 2.5rem; }

.als-hero--layout-text-only { padding-block: 76px; }
.als-hero--layout-text-only .als-hero__grid { grid-template-columns: 1fr; }
.als-hero--layout-text-only .als-hero__text { padding-top: 0; }
.als-hero--layout-text-only .als-hero__title { margin-bottom: 3rem; max-width: 1015px; }
.als-hero--layout-text-only .als-hero__lede { margin-bottom: 0; max-width: 1015px; }
.als-hero .als-hero__text > .als-hero__title:last-child { margin-bottom: 0; } /* no lede or link under the title: drop the gap meant to separate them */
.als-hero__lede--body { font-size: var(--wp--preset--font-size--sm); letter-spacing: 0.05em; line-height: 1.5; }
.als-hero__lede--body + .als-link { margin-top: 2.5rem; }
/* Tertiary page hero */
.als-hero--layout-text-only.als-hero--crumb { padding-block: 64px 62px; }
.als-hero--layout-text-only.als-hero--crumb .als-hero__text { padding-top: var(--als-crumb-gap); }
.als-hero--layout-text-only.als-hero--crumb .als-hero__title { margin-bottom: 1.5rem; max-width: 913px; }
.als-hero--layout-text-only.als-hero--crumb .als-hero__lede { max-width: 809px; }
.als-hero--layout-text-only.als-hero--crumb .als-hero__title-serif { display: block; }
@media (max-width: 1024px) {
	.als-hero--layout-bleed-right .als-container,
	.als-hero--layout-bleed-left  .als-container { padding-inline: var(--als-gutter); }
	.als-hero--layout-bleed-right .als-hero__grid,
	.als-hero--layout-bleed-left  .als-hero__grid,
	.als-hero--layout-split-text  .als-hero__grid { grid-template-columns: 1fr; }
	.als-hero--layout-bleed-left  .als-hero__text { order: 0; }
	.als-hero--layout-bleed-right .als-hero__text,
	.als-hero--layout-bleed-left  .als-hero__text { padding-top: 2.5rem; }
	.als-hero--layout-bleed-right,
	.als-hero--layout-bleed-left { padding-block: 0 2.5rem; }
	.als-hero__bleed { aspect-ratio: 345 / 225; border-radius: 16px !important; }
	.als-hero--layout-split-text,
	.als-hero--layout-text-only { padding-block: 2rem 2.5rem; }
	.als-hero--layout-split-text .als-hero__title { margin-bottom: 1.5rem; }
	.als-hero--layout-text-only.als-hero--crumb { padding-block: 37px 38px; }
	.als-hero--layout-text-only.als-hero--crumb .als-hero__text { padding-top: var(--als-crumb-gap); }
	.als-hero--layout-text-only .als-hero__title { margin-bottom: 1rem; }
}

/* 8.2 Three-column text (2A / 2B / 2C) */
.als-cols { padding-block: 56px; }
.als-cols:has(.als-cols__heading) { padding-block: 72px; }
.als-cols--h2 { padding-block: 63px 64px; }
.als-cols__grid { display: grid; gap: 3rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.als-col { display: flex; flex-direction: column; }
.als-col .als-link { align-self: flex-start; margin-top: auto; }
@media (max-width: 1024px) { .als-cols__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; } }
@media (max-width: 640px) { .als-cols__grid { grid-template-columns: 1fr; } .als-cols, .als-cols:has(.als-cols__heading), .als-cols--h2 { padding-block: 3rem; } }

/* 8.3 Card band (2C icons / 2D photos): white cards with colour bars on a tiled band */
.als-card-band { overflow: hidden; padding-block: 105px; position: relative; }
.als-card-band::after {
	background: url("assets/images/tile-band.png") center top / auto 96px repeat;
	bottom: 0;
	content: "";
	height: 320px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
}
.als-card-band .als-container { position: relative; z-index: 1; }
.als-card-band__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.als-card {
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	min-height: 496px;
	overflow: hidden;
	padding: 25px 32px 48px;
	position: relative;
}
.als-card::after { bottom: 0; content: ""; height: 24px; left: 0; position: absolute; right: 0; }
.als-card--blue::after   { background: var(--wp--preset--color--blue); }
.als-card--yellow::after { background: var(--wp--preset--color--yellow); }
.als-card--red::after    { background: var(--wp--preset--color--red); }
.als-card__icon { align-self: flex-end; height: 96px; margin: 0 0 72px; width: 96px; }
.als-card__icon img { display: block; height: 96px; object-fit: contain; width: 96px; }
.als-card__body { display: flex; flex: 1; flex-direction: column; }
.als-card__body .als-link + .als-link { margin-top: 0.75rem; } /* Programs cards: Learn more + Visit site */
.als-card__body .als-link { align-self: flex-start; margin-top: auto; }
.als-card-band--photo .als-card { padding-top: 0; }
.als-card__photo { margin: 0 -32px 34px; }
.als-card__photo img { display: block; height: 159px; object-fit: cover; width: 100%; }
@media (max-width: 1024px) { .als-card-band__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } .als-card { min-height: 0; } .als-card-band { padding-block: 4rem; } }

/* 8.4 Featured post band (3A). The card itself is shared with the posts page. */
.als-featured-band { padding-block: 112px 98px; }
.als-featured-band .als-featured-post { margin-bottom: 0; }
/* A band pinned to one post (About us → the name-change post) hides while that post is unpublished. Front end only,
   so editors still see it; !important beats GB's inline display. */
body:not(.editor-styles-wrapper) .als-featured-band:not(:has(.als-featured-post)) { display: none !important; }
.als-featured-post__title-link { color: inherit; display: block; text-decoration: none; }
.als-featured-post__title-link .als-featured-post__title { display: inline; margin-bottom: 0; } /* underline follows the text */
.als-featured-post__title-link:hover .als-featured-post__title, .als-featured-post__title-link:focus-visible .als-featured-post__title { color: inherit; }
.als-featured-post__sub:empty { display: none; }
.als-featured-post__body { align-items: flex-start; display: flex; flex-direction: column; }
@media (max-width: 1024px) { .als-featured-band { padding-block: 3rem; } }

/* 8.5 Page list (3B): rows of photo and text */
.als-page-list { padding-block: 118px 98px; }
.als-page-list:has(.als-team__intro) { padding-top: 32px; }
.als-page-list__rows { display: grid; gap: 40px; }
.als-page-row { align-items: center; display: grid; gap: 66px; grid-template-columns: 400px minmax(0, 1fr); }
.als-page-row__media { margin: 0; }
.als-page-row__media img { aspect-ratio: 400 / 225; border-radius: 16px; display: block; object-fit: cover; width: 100%; }
.als-page-row__body { display: flex; flex-direction: column; align-items: flex-start; }
.als-page-row__body .als-link + .als-link { margin-top: 0.75rem; } /* Programs: Learn more + Visit site */
@media (max-width: 1024px) { .als-page-list { padding-block: 3rem; } .als-page-row { grid-template-columns: 1fr; gap: 1.5rem; } }

/* 8.6 Text beside image (4A) */
.als-text-image { padding-block: 98px 97px; }
.als-text-image__grid { align-items: center; display: grid; column-gap: 10.45%; row-gap: 2.5rem; grid-template-columns: minmax(0, 495fr) minmax(0, 600fr); }
.als-text-image--reverse .als-text-image__grid { grid-template-columns: minmax(0, 600fr) minmax(0, 495fr); }
.als-text-image__text { display: flex; flex-direction: column; align-items: flex-start; }
.als-text-image__media { margin: 0; }
.als-text-image__media img { aspect-ratio: 600 / 440; border-radius: 16px; display: block; object-fit: cover; width: 100%; }
@media (max-width: 1024px) {
	.als-text-image { padding-block: 3rem; }
	.als-text-image__grid, .als-text-image--reverse .als-text-image__grid { grid-template-columns: 1fr; }
	.als-text-image--reverse .als-text-image__media { order: 1; } /* stacked: text then photo for both variants, so every link sits above its image */
}

/* 8.7 CTA bands (5B colour chain and tile strip / 5C tonal chain) */
.als-cta { overflow: hidden; padding-block: 94px 148px; position: relative; }
.als-cta .als-container { position: relative; z-index: 1; }
.als-cta__text { display: flex; flex-direction: column; align-items: flex-start; max-width: 703px; }
.als-cta__art { height: 100%; left: auto; position: absolute; right: 0; top: 0; width: auto; max-width: none; pointer-events: none; }
.als-cta::after {
	background: url("assets/images/tile-band.png") center top / auto 96px repeat-x;
	bottom: 0;
	content: "";
	height: 96px;
	left: 0;
	position: absolute;
	right: 0;
}
.als-cta--tonal { padding-block: 80px; } /* shorter than the Modules frame's 146/96 (client, 2026-10-02); the art is 100% tall, so it shrinks with the band */
.als-cta--tonal::after { display: none; }
@media (max-width: 1024px) {
	.als-cta { padding-block: 3rem calc(3rem + 96px); }
	.als-cta--tonal { padding-block: 3rem; }
	.als-cta:not(.als-cta--tonal) .als-cta__art { opacity: 0.35; } /* the colour chain fades behind the text; the tonal one is already faint */
}

/* 8.8 Text modules (6A one column / 6B two columns / 6C heading beside copy) */
.als-text--one { padding-block: 80px; }
.als-text__col { max-width: 1014px; }
.als-text--two { padding-block: 76px; }
.als-text--two .als-text__grid { display: grid; gap: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.als-text--two .als-text__grid > p { margin: 0; }
.als-text--side { overflow: hidden; padding-block: 69px 127px; position: relative; }
.als-text--side .als-container { position: relative; z-index: 1; }
.als-text--side .als-text__grid { display: grid; column-gap: 10.1%; row-gap: 2rem; grid-template-columns: minmax(0, 395fr) minmax(0, 709fr); align-items: start; }
.als-text__chain { height: 240px; left: -139px; pointer-events: none; position: absolute; top: 241px; width: 639px; max-width: none; }
@media (max-width: 1024px) {
	.als-text--one, .als-text--two, .als-text--side { padding-block: 3rem; }
	.als-text--two .als-text__grid, .als-text--side .als-text__grid { grid-template-columns: 1fr; }
	.als-text__chain { display: none; }
}
/* Two unbanded sections stack their 3rem paddings; on phones that reads as a gap, so close it to 64px (About us). */
@media (max-width: 640px) {
	.als-text:not(.als-section--near-white) + .als-cols:not(.als-section--near-white) { padding-top: 1rem; }
}

/* 8.9 Team listings (7A photos / 7B tinted cards) */
.als-team { padding-block: 72px; }
.als-team--intro { padding-top: 42px; }
.als-team__grid { display: grid; gap: 64px 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.als-team--cards .als-team__grid { gap: 24px; }
.als-person { display: flex; flex-direction: column; }
.als-person__photo { margin: 0 0 24px; max-width: 288px; width: 100%; }
.als-person__photo img { aspect-ratio: 1; border-radius: 16px; display: block; object-fit: cover; width: 100%; }
.als-person__body { display: flex; flex-direction: column; align-items: flex-start; }
.als-person__title { color: var(--wp--preset--color--black-600); }
.als-team--cards .als-person { background: var(--wp--preset--color--near-white-100); border-radius: 16px; padding: 26px 32px; }
@media (max-width: 1024px) { .als-team__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .als-team { padding-block: 3rem; } .als-team__grid { grid-template-columns: 1fr; gap: 2.5rem; } .als-person__photo { max-width: none; } } /* mobile comp: photo fills the column */

/* 8.10 Accordion: intro text beside the core Accordion block */
.als-accordion { padding-block: 93px; }
.als-accordion__grid { display: grid; column-gap: 10.45%; row-gap: 2.5rem; grid-template-columns: minmax(0, 496fr) minmax(0, 600fr); align-items: start; }
.als-accordion__text { display: flex; flex-direction: column; align-items: flex-start; }
.als-accordion__list .wp-block-accordion-item { border-bottom: 1px solid var(--wp--preset--color--black-600); padding-block: 40px; }
.als-accordion__list .wp-block-accordion-item:first-child { padding-top: 0; }
.als-accordion__list .wp-block-accordion-item:last-child { border-bottom: 0; padding-bottom: 0; }
.als-accordion__list .wp-block-accordion-heading { margin: 0; }
.als-accordion__list .wp-block-accordion-heading__toggle,
.als-accordion__list .wp-block-accordion-heading__toggle:hover,
.als-accordion__list .wp-block-accordion-heading__toggle:focus {
	align-items: center;
	background: transparent !important;
	border: 0;
	color: var(--wp--preset--color--black) !important;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 80px;
	justify-content: space-between;
	letter-spacing: inherit;
	line-height: inherit;
	padding: 0;
	text-align: left;
	width: 100%;
}
.als-accordion__list .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { color: var(--wp--preset--color--blue); text-decoration: none; } /* blue alone: core's hover underline lingered on the heading just opened (and sticks after a tap) */
.als-accordion__list .wp-block-accordion-heading__toggle:focus-visible { outline: 2px solid var(--wp--preset--color--blue); outline-offset: 4px; }
.als-accordion__list .wp-block-accordion-heading__toggle-icon {
	color: var(--wp--preset--color--blue);
	flex: none;
	font-size: 32px;
	font-weight: 400;
	height: 24px;
	line-height: 24px;
	position: relative;
	text-align: center;
	width: 24px;
}
.als-accordion__list .is-open .wp-block-accordion-heading__toggle-icon { color: transparent; transform: none !important; }
.als-accordion__list .is-open .wp-block-accordion-heading__toggle-icon::after {
	background: var(--wp--preset--color--blue);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	top: 11px;
}
.als-accordion__list .wp-block-accordion-panel { padding-top: 24px; }
.als-accordion__list .wp-block-accordion-panel > * { margin: 0; }
.als-accordion__list .wp-block-accordion-panel > * + * { margin-top: 1rem; }
@media (max-width: 1024px) { .als-accordion { padding-block: 3rem; } .als-accordion__grid { grid-template-columns: 1fr; } .als-accordion__list .wp-block-accordion-heading__toggle { gap: 1.5rem; } .als-accordion__list .wp-block-accordion-item { padding-block: 1.5rem; } }

/* -------------------------------------------------------------------------
   9. Tertiary pages: 814px content column plus the section sidebar, which
   becomes a dropdown under the breadcrumb on mobile.
   ------------------------------------------------------------------------- */
.als-tertiary { padding-block: 54px 99px; position: relative; }
.als-tertiary--flush { padding-bottom: 0; }
/* Neither section has a background, so their paddings would stack into one wide gap: the content's bottom padding is enough.
   A tinted band keeps its own. */
.als-tertiary + .als-featured-band:not(.als-section--near-white) { padding-top: 0; }
/* A column that opens with text rather than a photo sits right under the hero band, as in the design. */
.als-tertiary:not(:has(.als-tertiary__main > .wp-block-image:first-child)) { padding-top: 0; }
.als-tertiary__grid { display: grid; column-gap: 92px; grid-template-columns: minmax(0, 1fr) 318px; align-items: start; }
.als-tertiary__main { max-width: 814px; }
.als-tertiary__main > .wp-block-image:first-child, .als-tertiary__figure { margin: 0 0 3rem; }
.als-tertiary__art { height: 252px; left: max(-10px, (100% - (var(--als-content) + 2 * var(--als-gutter))) / 2 - 10px); pointer-events: none; position: absolute; top: -85px; width: 242px; z-index: 1; } /* anchored to the content column so it stays on the photo's corner on wide screens */
.als-subnav { font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.05em; line-height: 1.5; }
.als-subnav__panel { border-top: 2px solid var(--wp--preset--color--blue); padding-top: 16px; }
.als-subnav__heading, .als-subnav__list a, .als-subnav__current { color: var(--wp--preset--color--black); display: block; padding: 8px 18px; text-decoration: none; }
.als-subnav__heading { font-weight: 600; }
.als-subnav__list { list-style: none; margin: 0; padding: 0; }
.als-subnav__list li { margin: 0; }
.als-subnav__list a:hover, .als-subnav__list a:focus-visible, .als-subnav__heading:hover, .als-subnav__heading:focus-visible { color: var(--wp--preset--color--black); }
.als-subnav__text { --als-uline: var(--wp--preset--color--blue); }
.als-subnav__list .is-current > *, .als-subnav__heading.is-current { background: var(--wp--preset--color--near-white-200); border-radius: 4px; } /* the page you're on is a span (not clickable); an ancestor section stays a link */
.als-subnav__toggle,
.als-subnav__toggle:hover, .als-subnav__toggle:focus {
	align-items: center;
	background: transparent !important;
	border: 1px solid var(--wp--preset--color--black);
	border-radius: 2px;
	color: var(--wp--preset--color--black) !important;
	cursor: pointer;
	display: flex;
	font: inherit;
	justify-content: space-between;
	letter-spacing: inherit;
	padding: 12px 12px;
	text-align: left;
	width: 100%;
}
.als-subnav__chevron { height: 24px; transition: transform 0.2s ease; width: 24px; }
.als-subnav.is-open .als-subnav__chevron { transform: rotate(180deg); }
.als-subnav--desktop .als-subnav__toggle { display: none; }
.als-subnav--mobile { display: none; margin: var(--als-crumb-gap) 0; position: relative; } /* breadcrumb → dropdown → title use the same gap */
.als-subnav--mobile .als-subnav__panel {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--black);
	border-top: 0;
	display: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 5;
}
.als-subnav--mobile.is-open .als-subnav__panel { display: block; }
.als-hero:has(.als-subnav--mobile.is-open) { overflow: visible; } /* the hero clips its art; an open dropdown is taller than a short hero and lost its last items */
@media (max-width: 1024px) {
	.als-tertiary { padding-block: 0 3rem; }
	.als-tertiary__grid { grid-template-columns: 1fr; }
	.als-tertiary__side, .als-tertiary__art { display: none !important; } /* GB's inline display:block on the aside prints after this sheet; the hero's dropdown replaces it */
	.als-subnav--mobile { display: block; }
	.als-hero--layout-text-only.als-hero--crumb .als-subnav--mobile + .als-hero__grid .als-hero__text { padding-top: 0; }
}

/* Plain pages (privacy policy, terms): hero + prose column printed by the the_content filter in functions.php */
.als-plain { padding-block: 0 99px; }
.als-plain__main { max-width: 814px; }
.als-page .als-plain__main h2 { font-size: var(--wp--preset--font-size--xxl); }
@media (max-width: 1024px) { .als-plain { padding-bottom: 3rem; } }

/* Prose spacing, written with .als-page so it outranks the entry-content reset in section 1. */
.als-page .als-prose > * + * { margin-top: 1.5rem; }
.als-page .als-prose h2 { margin-top: 3rem; }
.als-page .als-prose h3 { margin-top: 2.5rem; }
.als-page .als-prose h2 + *, .als-page .als-prose h3 + * { margin-top: 1rem; }
.als-page .als-prose .wp-block-image { margin-block: 3rem; }
.als-page .als-prose > .wp-block-image:first-child { margin-top: 0; }
.als-page .als-prose blockquote, .als-page .als-prose .wp-block-pullquote, .als-page .als-prose .als-callout { margin-block: 2.5rem; }
.als-page .als-prose h2 + .wp-block-image { margin-top: 1rem; }
/* Placeholder copy from compose scripts (bracketed, waiting on the client) */
.als-placeholder { color: var(--wp--preset--color--black-600); font-style: italic; }
/* Board cards: an extra line under the title (e.g. "Board member since 2015") */
.als-person__meta { color: var(--wp--preset--color--black-600); }
.als-person__body > :last-child { margin-bottom: 0 !important; }
.als-person__body > p + p { margin-top: 0; } /* card lines (role, title, tenure) stack tight; the global p + p gap is for prose */
/* Two-column plain list (partners) */
.als-list--two-col { columns: 2; column-gap: 3rem; }
.als-list--two-col li { break-inside: avoid; }
@media (max-width: 640px) { .als-list--two-col { columns: 1; } }
/* Serif H2 inside a content column */
.als-prose h2.als-h2 { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xxxl); font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; }
/* Heading and intro paragraph above a team grid or page list */
.als-team__intro { margin-bottom: 4.5rem; max-width: 814px; }
.als-team__intro > h2 { margin-bottom: 1rem; }
.als-team__intro > * { max-width: none; }
.als-featured-band .als-featured-post__title-link { margin-bottom: 1.5rem; }
.als-featured-band .als-featured-post__sub { margin-bottom: 2rem; }

/* -------------------------------------------------------------------------
   10. Search results (search.php): posts-page hero plus one row per result.
   ------------------------------------------------------------------------- */
.als-page-hero__sub { margin-top: 1rem; }
.als-search-form { align-items: center; display: flex; gap: 1rem; margin: 0 0 4rem; max-width: 600px; }
.als-search-form .als-input { flex: 1 1 auto; }
.als-search-list { display: grid; gap: 2.5rem; max-width: 814px; }
.als-search-result { border-top: 1px solid var(--wp--preset--color--near-white-200); padding-top: 2.5rem; }
.als-search-result:first-child { border-top: 0; padding-top: 0; }
.als-search-list + .als-pagination .nav-links { justify-content: flex-start; }
.als-search-result__type { margin-bottom: 0.5rem; }
.als-search-result__title { font-size: var(--wp--preset--font-size--xxl); margin-bottom: 0.75rem; } /* h2 for the outline, h3 size on the page */
.als-search-result__title { font-family: var(--wp--preset--font-family--sans); font-weight: 500; letter-spacing: 0.02em; line-height: 1.3; }
.als-search-result__title a { color: var(--wp--preset--color--black); text-decoration: none; }
.als-search-result__title a:hover, .als-search-result__title a:focus-visible { color: var(--wp--preset--color--blue-dark); text-decoration: underline; text-decoration-thickness: var(--als-rule); text-underline-offset: var(--als-rule-offset); }
.als-search-result__excerpt { margin-bottom: 1rem; }
.als-search-result__excerpt strong, .als-search-result__title strong { font-weight: 600; } /* Relevanssi's highlighted search terms */
.als-search-results__none { max-width: 814px; }
@media (max-width: 640px) { .als-search-form { align-items: stretch; flex-direction: column; } }

/* 404 (shares the search page's hero, form and body class) */
.als-404__body { padding-bottom: 99px; }
.als-404 .als-search-form { margin-bottom: 0; }
.als-404__home { color: inherit; text-decoration: underline; text-decoration-thickness: var(--als-rule); text-underline-offset: var(--als-rule-offset); }
.als-404__home:hover, .als-404__home:focus-visible { color: var(--wp--preset--color--blue-dark); }
@media (max-width: 1024px) { .als-404__body { padding-bottom: 3rem; } }

/* -------------------------------------------------------------------------
   11. Bios (single-als_bio.php, Figma round 7): the posts-page hero plus the
   job title, then the portrait over the bio text in the 814px column, then
   post-card bands (Featured pieces, Posts by <name>, the topic band).
   ------------------------------------------------------------------------- */
.als-bio-hero__role { margin-top: 1rem; }
.als-bio { padding-top: 0; }
.als-bio__main { max-width: 814px; }
.als-bio__photo { margin: 0 0 2.5rem; max-width: 288px; }
.als-bio__photo img { aspect-ratio: 1; border-radius: 16px; display: block; object-fit: cover; width: 100%; }
.als-post-band__heading { margin-bottom: 3rem; }
.als-post-band .als-archive__grid { row-gap: 3rem; }
/* Same as links in body copy (.als-prose a) */
.als-post__byline a { color: var(--wp--preset--color--blue); text-decoration: underline; text-decoration-thickness: var(--als-rule); text-underline-offset: var(--als-rule-offset); }
.als-post__byline a:hover, .als-post__byline a:focus-visible { color: var(--wp--preset--color--blue-dark); }

/* -------------------------------------------------------------------------
   12. Contact page: Google Maps embeds and the program-site buttons in the
   814px prose column.
   ------------------------------------------------------------------------- */
.als-map { aspect-ratio: 16 / 9; border: 0; border-radius: 16px; display: block; width: 100%; }
.als-prose > .als-btn { display: flex; width: fit-content; }