/*
 * ALWAYS ON — front-end responsive rules that core blocks + theme.json can't
 * express on their own. Loaded via wp_enqueue_style (see inc/setup.php).
 * Editor-only parity lives in editor.css; do not duplicate front-end chrome
 * (sticky header, full-bleed) there.
 */

/* ============================================================
   Layout — the first full-bleed band butts against the sticky
   header; kill the flow blockGap that WordPress inserts above <main>
   (otherwise a background-coloured stripe shows between them).
   ============================================================ */
main {
	margin-block-start: 0;
}

/* Sticky footer: on short pages (e.g. the "coming soon" skeletons) push the
   footer to the bottom of the viewport instead of leaving a blank gap below it. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* dvh tracks the *visible* viewport, so the footer lands at the true bottom
	   on mobile where the toolbar makes 100vh taller than the screen. */
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
	margin-block: 0;
}

/* …and no blockGap stripe between the last band and the (black) footer. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Full-bleed colour bands butt directly against each other — otherwise the
   constrained-layout blockGap leaves a 24px stripe of body background showing
   between them (glaringly white where a gray band meets a black one). Each band
   carries its own padding-block, so zero margin is correct. */
.is-style-band-black,
.is-style-band-white,
.is-style-band-gray {
	margin-block: 0;
}

/* Text links on black bands use the light brand magenta: the global link
   color (a darker pink chosen for AA on white) is only ~3:1 on black. :where()
   keeps this a default that page or block rules can still override. */
.is-style-band-black :where(a:not(.wp-element-button)) {
	color: var(--wp--preset--color--magenta);
}

/* ============================================================
   Header — sticky, black, bold-sans nav with gold pipe dividers
   ============================================================ */
/* Sticky goes on the template part's <header> wrapper, not the inner
   .site-header group: the wrapper is exactly the group's height, so a
   sticky group inside it has no room to stick. top clears the admin bar. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* Below 600px WordPress lets the admin bar scroll away (position:absolute),
   so the header sticks to the very top there. */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.site-header__bar {
	gap: clamp(12px, 3vw, 32px);
}

.site-header .wp-block-navigation,
.site-footer .wp-block-navigation {
	--ao-nav-gap: clamp(10px, 1.8vw, 24px);
	column-gap: 0;
	row-gap: 0.4rem;
	align-items: center;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	letter-spacing: 0.2px;
}

/* Header nav: larger, and spread across the whole bar with each item
   centered in an equal share, so the pipes fall midway between labels. */
.site-header .wp-block-navigation {
	flex: 1;
	font-size: clamp(0.75rem, 1.55vw, 1.375rem);
}

.site-header .wp-block-navigation__container {
	flex: 1;
	justify-content: space-between;
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item {
	flex: 1 1 auto;
	justify-content: center;
	/* The spread supplies the spacing; keep the padding to a breath so all
	   eight labels fit on one line. */
	padding-inline: clamp(4px, 0.6vw, 10px);
	white-space: nowrap;
}

/* Collapsed (phone) nav: keep the menu button on the right. */
@media (max-width: 599px) {
	.site-header .wp-block-navigation {
		justify-content: flex-end;
	}
}

.site-header .wp-block-navigation-item,
.site-footer .wp-block-navigation-item {
	padding-inline: var(--ao-nav-gap);
}

/* Gold pipe between adjacent items (never before the first). */
.site-header .wp-block-navigation-item + .wp-block-navigation-item,
.site-footer .wp-block-navigation-item + .wp-block-navigation-item {
	border-left: 1px solid var(--wp--custom--nav--pipe);
}

/* The footer links wrap below 1024px, where a pipe would start a row, so
   there they're separated by space instead. */
@media (max-width: 1023px) {
	.site-footer .wp-block-navigation-item + .wp-block-navigation-item {
		border-left: 0;
	}

	.site-footer .wp-block-navigation__container {
		row-gap: 0.5rem;
	}
}

.site-header .wp-block-navigation-item a,
.site-footer .wp-block-navigation-item a {
	color: #fff;
	text-decoration: none;
}

.site-header .wp-block-navigation-item a:hover,
.site-header .wp-block-navigation-item a:focus-visible,
.site-footer .wp-block-navigation-item a:hover,
.site-footer .wp-block-navigation-item a:focus-visible {
	color: var(--wp--preset--color--gold);
}

/* Keyboard focus needs more than a colour swap (WCAG 2.4.7 / 1.4.11). */
.site-header .wp-block-navigation-item a:focus-visible,
.site-footer .wp-block-navigation-item a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

/* ------------------------------------------------------------
   Mobile overlay menu — full-screen black panel with big bold-sans links,
   centred across and listed from the top (the default overlay is a plain white corner list).
   overlayBackgroundColor/overlayTextColor set the black/white in
   header.html; this handles layout, scale and the gold accents.
   ------------------------------------------------------------ */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(2rem, 9vw, 5rem) clamp(1.5rem, 7vw, 4rem);
}

/* Make the close/dialog/content wrappers fill the panel, then list the links
   from the top, centred across. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	height: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	/* !important beats the header nav's is-content-justification-* rule (it
	   spreads the inline nav across the bar), which would otherwise carry
	   over and misalign the overlay list. */
	align-items: center !important;
	justify-content: center;
	gap: clamp(0.9rem, 4vw, 1.6rem);
	width: 100%;
	/* Don't let WP stretch the list to fill the panel; keep it content-height. */
	flex: 0 0 auto;
}

/* Drop the gold pipes; the overlay is a vertical, centred list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-left: 0;
	padding-inline: 0;
	align-self: center !important;
	text-align: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: clamp(1.6rem, 7vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: 0.5px;
	color: #fff;
	text-decoration: none;
	transition: color 0.18s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item.current-menu-item
	a,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item
	a[aria-current] {
	color: var(--wp--preset--color--gold);
}

/* Bigger, gold-on-hover open/close controls. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 0.35rem;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 2rem;
	height: 2rem;
}

.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-close:focus-visible {
	color: var(--wp--preset--color--gold);
}

.site-copyright {
	margin-block-start: 1.25rem;
	opacity: 0.7;
}

/* ============================================================
   Pill buttons — centred bold-sans label + a tactile hover
   (the default core button is a flat inline-block; centre the label
   and give it lift/press/focus states).
   ============================================================ */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		filter 0.18s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
	filter: brightness(1.06);
}

.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition: none;
	}
	.wp-block-button__link:hover {
		transform: none;
	}
}

/* ============================================================
   Eyebrow-square — signature section label with an accent square
   flush against the screen edge. Place the atom as alignwide.
   Per-instance accent set via an ao-sq-<color> class; label colour via textColor.
   ============================================================ */
/* The eyebrow group must NOT be its own containing block, so the square's
   ::before resolves to the position:relative, full-bleed band and sits flush
   with the screen edge. */
.is-style-eyebrow-square-tl,
.is-style-eyebrow-square-tr {
	position: static;
}

.is-style-eyebrow-square-tr {
	text-align: right;
}

/* Label sits above the square (both share the band's stacking context because
   the eyebrow group itself is NOT positioned — the square's ::before resolves
   to the position:relative, full-bleed band). */
.is-style-eyebrow-square-tl .ao-eyebrow,
.is-style-eyebrow-square-tr .ao-eyebrow {
	position: relative;
	z-index: 1;
	/* override the constrained-layout contentSize cap so the label sits at the
	   group's edge (beside the square), not centred in the column. */
	max-width: none;
	margin: 0;
	line-height: 1;
}

/* Keep the label's text clear of the square. The label starts at the wide
   column's edge — the larger of the root padding and the centering gutter —
   so pad it by however much of the square (plus a gap) reaches past that.
   Zero on wide screens; on phones it stops long labels running into it. */
.is-style-eyebrow-square-tl .ao-eyebrow {
	padding-inline-start: max(0px, calc(var(--wp--custom--square--size) + clamp(1rem, 2vw, 2rem) - max(var(--wp--style--root--padding-left), (100vw - var(--wp--style--global--wide-size)) / 2)));
}

.is-style-eyebrow-square-tr .ao-eyebrow {
	padding-inline-end: max(0px, calc(var(--wp--custom--square--size) + clamp(1rem, 2vw, 2rem) - max(var(--wp--style--root--padding-right), (100vw - var(--wp--style--global--wide-size)) / 2)));
}

.is-style-eyebrow-square-tl::before,
.is-style-eyebrow-square-tr::before {
	content: "";
	position: absolute;
	z-index: 0;
	width: var(--wp--custom--square--size);
	height: var(--wp--custom--square--size);
	background: var(--ao-sq, var(--wp--preset--color--gold));
	/* top:auto keeps the square at its static (eyebrow) vertical position;
	   nudge up so it centres on the label rather than starting at its top. */
	margin-top: calc(0.5em - var(--wp--custom--square--size) / 2);
}

/* Square accent color, picked per instance with an ao-sq-<color> class (a
   class, not an inline style, so the group block stays valid in the editor). */
.ao-sq-gold { --ao-sq: var(--wp--preset--color--gold); }
.ao-sq-orange { --ao-sq: var(--wp--preset--color--orange); }
.ao-sq-aqua { --ao-sq: var(--wp--preset--color--aqua); }
.ao-sq-teal { --ao-sq: var(--wp--preset--color--teal); }
.ao-sq-magenta { --ao-sq: var(--wp--preset--color--magenta); }

/* Flush with the screen edge, fully visible (as in the designs): the band is
   the containing block and is already full-bleed, so its edge is the screen's. */
.is-style-eyebrow-square-tl::before {
	inset-inline-start: 0;
}

.is-style-eyebrow-square-tr::before {
	inset-inline-end: 0;
}

/* Body copy is the designs' light weight (300); `bolder` from there is only
   400, so bold text is set to the bold weight explicitly. */
strong,
b {
	font-weight: 700;
}

/* ============================================================
   Arrow link — orange ▶▶▶ + label
   ============================================================ */
/* Kept as a block (not inline-flex) so has-text-align-* still positions it.

   A link that wraps hangs its second line under the text, not the arrows:
   the arrows sit in a slot exactly --ao-arrow-hang wide, and the paragraph
   is indented by the same amount. Registering the property makes the em
   resolve on the paragraph, so the slot matches even though the arrows are
   set at a larger size. Centered and right-aligned links don't hang. */
@property --ao-arrow-hang {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

.ao-arrow {
	--ao-arrow-hang: 2.9em;
	box-sizing: border-box;
	padding-inline-start: var(--ao-arrow-hang);
	text-indent: calc(-1 * var(--ao-arrow-hang));
}

.ao-arrow.has-text-align-center,
.ao-arrow.has-text-align-right {
	padding-inline-start: 0;
	text-indent: 0;
}

/* Upright and un-underlined at rest, as in the designs: the arrows mark the
   link. The underline returns on hover and focus. A few design links are
   italic; they take .ao-arrow--italic. */
.ao-arrow > a {
	text-decoration: none;
}

.ao-arrow > a:hover,
.ao-arrow > a:focus {
	text-decoration: underline;
}

.ao-arrow--italic {
	font-style: italic;
}

.ao-arrow::before {
	content: "\25B6\25B6\25B6";
	inline-size: var(--ao-arrow-hang);
	font-style: normal;
	text-indent: 0;
	font-size: 1.05em;
	letter-spacing: -0.12em;
	color: var(--ao-arrow-color, var(--wp--preset--color--orange));
	white-space: nowrap;
	display: inline-block;
	transition: transform 0.18s ease;
}

.ao-arrow.has-text-align-center::before,
.ao-arrow.has-text-align-right::before {
	inline-size: auto;
	margin-inline-end: 0.5em;
}

.ao-arrow--teal {
	--ao-arrow-color: var(--wp--preset--color--aqua);
}

/* ============================================================
   Formula heading (Purpose + Positivity = Possibilities)
   ============================================================ */
/* Display-sized by default (zero specificity), so the band reads as a
   heading wherever it's inserted; pages and size presets override it. */
:where(.ao-formula) {
	font-size: var(--wp--preset--font-size--display);
}

.ao-formula {
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	line-height: 1.05;
	text-wrap: balance;
}

/* ============================================================
   Starter-Guide email opt-in (visual only until the client's ESP
   form/endpoint is wired in — see readme.txt)
   ============================================================ */
.ao-signup label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--magenta);
	font-style: italic;
}

.ao-signup__row {
	display: flex;
	max-width: 460px;
}

.ao-signup input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 0.8rem 1rem;
	border: none;
	background: #fff;
	color: #111;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
}

.ao-signup__btn {
	padding: 0.8rem 1.4rem;
	border: none;
	background: var(--wp--preset--color--magenta);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	cursor: pointer;
}

.ao-signup__btn:hover,
.ao-signup__btn:focus-visible {
	filter: brightness(1.08);
}

/* ============================================================
   Journey timeline — coloured dots; vertical stepper on mobile,
   horizontal with a connector line on desktop.
   ============================================================ */
.ao-timeline .ao-node {
	text-align: center;
}

.ao-node::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--ao-dot, var(--wp--preset--color--operator-gray));
	position: relative;
	z-index: 1;
}

.ao-node--yellow  { --ao-dot: var(--wp--preset--color--gold); }
.ao-node--magenta { --ao-dot: var(--wp--preset--color--magenta); }
.ao-node--teal    { --ao-dot: var(--wp--preset--color--teal); }
.ao-node--orange  { --ao-dot: var(--wp--preset--color--orange); }

.ao-node :is(h4, p) {
	margin-top: 0;
}

/* Timeline labels are set in the bold sans in the designs (card-style h4s
   elsewhere keep the slab). */
.ao-node h4 {
	font-family: var(--wp--preset--font-family--sans);
}

/* ============================================================
   Cutouts that stand on their band's bottom edge, as in the designs.
   Put .ao-cutout-col on the column and .ao-cutout on its image block; the
   columns block must end the band. The image's negative margin cancels the
   band's bottom padding. On phones the cutout comes after the copy and is
   capped in height so a photo never fills the screen (.ao-cutout--full for
   head-to-toe figures, which get a little more).
   ============================================================ */
.wp-block-column.ao-cutout-col {
	align-self: flex-end;
}

.wp-block-image.ao-cutout {
	margin-block: 0 calc(-1 * var(--wp--preset--spacing--80));
}

.ao-cutout img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	/* If a cutout links somewhere, its hover zoom grows from the feet, so it
	   never drops below the band edge it stands on. */
	transform-origin: 50% 100%;
}

@media (max-width: 781px) {
	.wp-block-columns > .wp-block-column.ao-cutout-col {
		order: 99;
	}

	.ao-cutout img {
		max-height: var(--ao-cut-h, min(40svh, 300px));
	}

	.ao-cutout--full {
		--ao-cut-h: min(46svh, 340px);
	}
}

/* ============================================================
   Hero art that runs off the viewport's left edge, as in the designs. Put
   .ao-bleed-start on the image block in the first column of an alignwide
   columns block inside a full-width band; the figure widens by the gutter.
   ============================================================ */
@media (min-width: 782px) {
	.wp-block-image.ao-bleed-start,
	.wp-block-group.ao-bleed-start {
		margin-block: 0;
		margin-inline-start: calc(-1 * max(var(--wp--style--root--padding-left), (100vw - var(--wp--style--global--wide-size)) / 2));
	}

	.ao-bleed-start img {
		display: block;
		width: 100%;
	}
}

/* ============================================================
   Peeking cutouts — transparent portraits that stand on their band's
   bottom edge (Home's Journey woman). On phones she closes the band,
   centered; from 782px she's pinned to the band's bottom-right corner.
   ============================================================ */
/* .wp-block-image.ao-peek outranks core's constrained-layout
   `:last-child { margin-block-end: 0 }`, which would leave the band's
   padding showing under her. */
.wp-block-image.ao-peek {
	margin-block: var(--wp--preset--spacing--50) calc(-1 * var(--wp--preset--spacing--80));
}

.ao-peek img {
	display: block;
	width: 100%;
	height: auto;
}

.ao-peek--journey { width: min(78%, 340px); }

.ao-book-band .wp-block-image.size-medium img { max-width: min(100%, 280px); }

@media (min-width: 782px) {
	.wp-block-image.ao-peek--journey {
		position: absolute;
		bottom: 0;
		z-index: 0;
		margin: 0;
		/* Right edge of the wide column, under the last timeline stop. */
		right: max(var(--wp--style--root--padding-right), (100% - var(--wp--style--global--wide-size)) / 2);
		width: clamp(220px, 22vw, 320px);
	}

	/* Give the woman her own height below the timeline: the button row is
	   at least as tall as she is (less the band's bottom padding), with the
	   button centered beside her, as in the design. */
	.ao-journey-band > .wp-block-buttons {
		min-height: calc(clamp(220px, 22vw, 320px) * 0.65 - var(--wp--preset--spacing--80));
		align-items: center;
	}
}

/* Book band: three columns, as in the design: the couple, the book with its
   button, then the copy. The couple stands on the band's bottom edge (her
   negative margin cancels the band's bottom padding); on phones her column
   moves last so she closes the band, centered. */
.wp-block-image.ao-book-couple {
	margin-block: 0 calc(-1 * var(--wp--preset--spacing--80));
}

.ao-book-couple img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	.ao-book-couple-col {
		order: 3;
	}

	.wp-block-image.ao-book-couple {
		width: min(80%, 360px);
		margin-inline: auto;
	}
}

/* Tablets and small laptops: three columns would squeeze the book's button
   onto several lines, so the book and copy share the row and the couple
   closes the band below. */
@media (min-width: 782px) and (max-width: 1199px) {
	.ao-book-band > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.ao-book-band > .wp-block-columns > .wp-block-column {
		flex-basis: 45% !important;
	}

	.ao-book-band > .wp-block-columns > .wp-block-column:last-child {
		flex-basis: 50% !important;
	}

	.ao-book-band > .wp-block-columns > .ao-book-couple-col {
		order: 3;
		flex-basis: 100% !important;
	}

	.wp-block-image.ao-book-couple {
		width: min(50%, 360px);
		margin-inline: auto;
	}
}

/* Small desktops: lend the book column a little width so its button stays on
   one line. */
@media (min-width: 1200px) and (max-width: 1399px) {
	.ao-book-band > .wp-block-columns > .ao-book-couple-col {
		flex-basis: 25% !important;
	}

	.ao-book-band > .wp-block-columns > .ao-book-cover-col {
		flex-basis: 33% !important;
	}
}

@media (min-width: 782px) {
	.ao-timeline {
		position: relative;
	}
	.ao-timeline::before {
		content: "";
		position: absolute;
		top: 11px;
		left: 12%;
		right: 12%;
		height: 3px;
		background: var(--wp--preset--color--operator-gray);
		z-index: 0;
	}
}

/* ============================================================
   Life-strategy triangle (inline SVG; labels are real text)
   ============================================================ */
.ao-tri {
	margin: 0;
}

.ao-tri svg {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	margin-inline: auto;
}

.ao-tri__lbl {
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	font-size: 20px;
}

.ao-tri__out {
	margin: 0.3rem 0 0;
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--wp--preset--color--teal);
	text-align: center;
}

/* ============================================================
   Story video — a core/embed (YouTube) in a branded 16:9 frame.
   Core supplies the aspect ratio via .wp-embed-aspect-16-9; we add
   the brand frame. Renders once the client pastes a video link.
   ============================================================ */
.ao-story-embed {
	margin-block: 0;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 0 18px rgba(255, 153, 0, 0.25);
}

.ao-story-embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Until a link is pasted, the design's placeholder: a white portrait frame
   with an orange play button (inc/embeds.php). */
.ao-video-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	width: min(100%, 320px);
	margin-inline: auto;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--orange);
	box-shadow: none;
}

.ao-video-placeholder svg {
	width: clamp(48px, 6vw, 72px);
	height: auto;
}

/* Founder — a standalone portrait in its own column, bottom-aligned with the
   video so he stands beside it at a natural size (not stretched, not floating). */
.ao-founder {
	margin-block: 0;
}

.ao-founder img {
	display: block;
	width: auto;
	max-width: 100%;
	/* keep him roughly the video's height so the column doesn't balloon */
	max-height: clamp(320px, 40vw, 540px);
}

.ao-founder-credit {
	margin-block-start: 0.75rem;
}

/* Stacked on mobile: centre the portrait and its credit. */
@media (max-width: 781px) {
	.ao-founder img {
		max-height: 62vh;
		margin-inline: auto;
	}
	.ao-founder-credit {
		text-align: center;
	}
}

/* ============================================================
   Phase-2 "coming soon" skeleton pages — small uppercase kicker
   above a centred title.
   ============================================================ */
.ao-eyebrow-kicker {
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: var(--wp--preset--color--magenta);
}

/* ============================================================
   Motion — a light, tasteful layer. Bands fade/rise into view as
   you scroll (added by JS so no-JS users see everything), and a few
   elements respond to hover. All of it is disabled under
   prefers-reduced-motion (see the block at the end of the file).
   ============================================================ */
.ao-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.ao-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Arrow links nudge forward on hover (the ::before transition is declared on
   the base rule in the arrow-link section above). */
.ao-arrow:hover::before {
	transform: translateX(4px);
}

/* An image that links somewhere lifts subtly on hover or keyboard focus, as
   a cue that it's clickable; plain imagery stays still. */
.wp-block-image a img {
	transition: transform 0.35s ease;
}

.wp-block-image a:hover img,
.wp-block-image a:focus-visible img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	/* No reveal animation — show everything immediately. */
	.ao-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.ao-arrow:hover::before,
	.wp-block-image a:hover img,
	.wp-block-image a:focus-visible img {
		transform: none;
	}
}

/* ============================================================
   Neon sign hero (hero-dark-neon): the sign flickers on as the page loads.
   The box holds the video (poster: the sign dark), the lit still, and "The"
   / "Approach" set as text around the sign. By default the lit still shows;
   inc/hero-video.php adds .ao-hero-anim to <html> before first paint when
   the video should play, and assets/js/hero-video.js falls back to the lit
   still if it can't. The video and the still share one 1000:720 box, so
   swapping them never shifts the layout.
   ============================================================ */
.ao-hero-sign {
	position: relative;
	aspect-ratio: 1000 / 720;
	container-type: inline-size;
	margin-block: 0;
}

.ao-hero-sign > figure {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ao-hero-sign video,
.ao-hero-sign img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Fade into the black band so the art never reads as a box. */
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 10%, #000 85%, transparent),
		linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent, #000 10%, #000 85%, transparent),
		linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
	mask-composite: intersect;
}

.ao-hero-sign__video {
	display: none;
}

.ao-hero-anim .ao-hero-sign__video {
	display: block;
}

.ao-hero-anim .ao-hero-sign__lit {
	display: none;
}

/* "The" and "Approach" around the sign, in the lockup's white slab. */
.ao-hero-sign > p {
	position: absolute;
	z-index: 1;
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	font-size: 4.6cqi;
	line-height: 1;
}

.ao-hero-sign__the {
	inset-inline-end: 75%;
	top: 15%;
}

.ao-hero-sign__approach {
	inset-inline-end: 0;
	top: 86%;
}

@media (min-width: 782px) {
	/* The left edge is the viewport's, so only the inner edges fade. */
	.ao-hero-sign video,
	.ao-hero-sign img {
		-webkit-mask-image:
			linear-gradient(to right, #000 80%, transparent),
			linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
		mask-image:
			linear-gradient(to right, #000 80%, transparent),
			linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
	}
}

/* Phones: a shorter sign keeps the headline and the CTA on the first screen. */
@media (max-width: 781px) {
	.ao-hero-sign {
		width: min(100%, calc(34svh * 1000 / 720));
		margin-inline: auto;
	}
}