/* =========================================================================
   Amy Porto - section components
   Loaded after main.css. One block per ACF flexible-content layout.
   ========================================================================= */

/* ---------- Shared ---------- */
.ap-buttons { margin: 28px 0 0; }
.ap-buttons--center { text-align: center; }
.ap-buttons--right  { text-align: right; }
.ap-buttons .ap-btn + .ap-btn { margin-left: 12px; }

.ap-spacer { width: 100%; }

/* Decorations live INSIDE their section and are positioned against its box,
   which is what makes the stored percentages mean anything. Default z-index is
   below the copy; opt an item above it with "Above content". */
.ap-decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.ap-section { overflow: hidden; }
.ap-section > .ap-container { position: relative; z-index: 1; }
/* The shape divider is ABSOLUTE. Lifting it into the flow (which an earlier
   version of this rule did) makes it a flex sibling of the hero content,
   squeezes the container from 1140px to 646px and wraps the headline onto up
   to eight lines. */
.ap-section > .ap-shape { position: absolute; z-index: 2; }
.ap-decor__item {
	position: absolute;
	display: block;
	transform: translate(-50%, -50%) translateY(var(--ap-parallax, 0px));
}
.ap-decor__item--above { z-index: 5; }
.ap-decor__item img { width: 100%; height: auto; }

@media (max-width: 767px) {
	/* Absolute cut-outs sized for a 1440px band land on top of the copy at
	   390px. Live puts them back in the flow; so do we. */
	.ap-decor { position: static; overflow: visible; }
	.ap-decor__item {
		position: static;
		transform: none;
		margin: 24px auto;
		width: auto !important;
		max-width: 60%;
	}
}

/* ---------- Hero ---------- */
.ap-hero {
	--ap-hero-min: 0px;
	min-height: var(--ap-hero-min);
	display: flex;
	align-items: center;
	overflow: hidden;
}
/* Live's split hero is elementor-section-items-top: its columns hang from the
   top of the 950px band with a 350px margin, they are not vertically centred.
   Centring them pushed the headline 96px down. */
.ap-hero--split { align-items: flex-start; padding-inline: 5%; }
.ap-hero--split .ap-hero__col { padding-inline: 10px; }
.ap-hero.ap-hero--has-bg {
	background-image: var(--ap-hero-bg);
	background-size: cover;
	background-position: center;
}
/* Live's split hero is FULL WIDTH with 5% side padding and columns
   50% / 5% gutter / 44.332%, not a 1140px container. Measured: the left
   headline starts at x=81 and is 621px wide, so it stays on one line. */
.ap-hero--split .ap-container,
.ap-hero--split .ap-hero__inner { max-width: none; padding-inline: 0; }
.ap-hero__inner {
	display: grid;
	align-items: start;
	gap: 0;
	width: 100%;
}
.ap-hero--split .ap-hero__inner {
	/* 44.332% is live's own figure, but it was measured for Trade Gothic. The
	   substituted face sets 'BECAUSE OF DIET CULTURE' 6% narrower, so at that
	   width it fits on ONE line where live wraps it over two, flush right.
	   36% restores live's break without touching the left column. */
	grid-template-columns: 50% 5% 36%;
}
.ap-hero__heading { color: var(--ap-white); }
/* The hero body sits on the orange ground and has to be white with it. Only
   the heading was coloured, so the copy fell back to --ap-text and rendered
   #414042 on #e0682c -- sampled as 1999 near-black glyph pixels where live has
   1953 pure-white ones. */
.ap-hero--has-bg .ap-hero__body,
.ap-hero--has-bg .ap-hero__body p { color: var(--ap-white); }
/* Live pushes the hero copy 90px below the headline and insets it 36% on the
   right, which is what gives the 398px measured paragraph width. */
.ap-hero__body { margin-top: 90px; padding-right: 36%; }
.ap-hero .ap-buttons { margin-top: 30px; }
.ap-hero--split .ap-hero__col--left { margin-top: 350px; }
.ap-hero--split .ap-hero__col--right { margin-top: 350px; }
.ap-hero__col--media { align-self: end; }
/* The portrait renders at its OWN size, bounded by the column, rather than
   being stretched to fill it. Live's contact portrait is a 300x286 file shown
   at 300px; forcing width:100% blew it up to the full 570px column. */
.ap-hero__portrait { max-width: 100%; width: auto; height: auto; margin-inline: auto; }

/* Inner-page heroes on live are a 50/50 two-column section: the heading on the
   left, and either an empty column (terms, privacy, cookie) or a portrait
   (about, contact) on the right. */
/* Measured on live: the band is full-bleed inside the section's 71.25px side
   padding (1283px), the heading column is 770px and the portrait column 513px
   flush to the right edge. A centred 1140px container wraps the headline. */
.ap-hero--with-portrait { padding-inline: 5%; }
.ap-hero--with-portrait .ap-container,
.ap-hero--with-portrait .ap-hero__inner {
	max-width: none;
	padding-inline: 0;
}
.ap-hero--with-portrait .ap-hero__inner {
	grid-template-columns: 770fr 513fr;
	align-items: center;
	gap: 0;
}
.ap-hero--with-portrait .ap-hero__portrait { margin-left: auto; }
.ap-hero--with-portrait .ap-hero__col--single { max-width: none; }
.ap-hero--with-portrait .ap-hero__col--media { align-self: end; }

.ap-hero--width-half:not(.ap-hero--with-portrait) .ap-hero__col--single { max-width: 50%; }
/* ...but the copy inside it runs to 738px on live, not to half the band. */
.ap-hero--width-half .ap-hero__body { max-width: 745px; }
.ap-hero--width-full .ap-hero__col--single { max-width: none; }

.ap-hero--center .ap-hero__inner { justify-items: center; text-align: center; }
.ap-hero--center .ap-hero__col--single { max-width: none; }

@media (max-width: 767px) {
	.ap-hero--width-half .ap-hero__col--single { max-width: none; }
	.ap-hero--with-portrait .ap-hero__inner { grid-template-columns: minmax(0, 1fr); }
}
.ap-hero--center .ap-hero__body { margin-inline: auto; max-width: 60ch; }

@media (max-width: 1024px) {
	.ap-hero--split .ap-hero__col--left,
	.ap-hero--split .ap-hero__col--right { margin-top: 200px; }
	.ap-hero__body { margin-top: 60px; }
}

@media (max-width: 767px) {
	.ap-hero { min-height: 0; }
	.ap-hero--split { padding-inline: 3%; padding-block: 30px 0; }
	.ap-hero--split .ap-hero__col--left,
	.ap-hero--split .ap-hero__col--right { margin-top: 0; }
	.ap-hero__body { padding-right: 0; margin-top: 24px; margin-inline: auto; }
	.ap-hero--split .ap-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		text-align: center;
	}
	/* Live's mobile hero is ONE headline, then the copy, then the button, then
	   the portrait. display:contents promotes the left column's children into
	   the grid so the second half of the split headline can sit directly under
	   the first instead of after the button. */
	.ap-hero--split .ap-hero__col--left { display: contents; }
	.ap-hero--split .ap-hero__col--left > .ap-hero__heading { order: 1; }
	.ap-hero--split .ap-hero__col--right { order: 2; }
	.ap-hero--split .ap-hero__body { order: 3; }
	.ap-hero--split .ap-buttons { order: 4; }
	.ap-hero--split .ap-hero__col--media { order: 5; }
	.ap-hero__col--right .ap-hero__heading { text-align: center; }
	.ap-hero .ap-buttons { text-align: center; }
}

/* ---------- Intro ---------- */
/* Live's centred intros cap BOTH the heading and the copy well inside the
   container: the heading column measures 713px on the indigo band and the copy
   765px on the white one. Letting the heading run the full 1140px puts it on
   one line where live wraps it onto two. */
.ap-intro__body { margin-top: 20px; max-width: 765px; }
.ap-intro .ap-text-center .ap-intro__body { margin-inline: auto; }
.ap-intro .ap-container:not(.ap-container--wide) .ap-display { max-width: 1000px; margin-inline: auto; }
.ap-intro .ap-container:not(.ap-container--wide) .ap-eyebrow { max-width: 760px; margin-inline: auto; }
.ap-intro .ap-eyebrow + .ap-display { margin-bottom: 0.3em; }

/* ---------- Text + media ---------- */
.ap-textmedia__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: center;
}
.ap-textmedia--60-40 .ap-textmedia__inner { grid-template-columns: 3fr 2fr; }
.ap-textmedia--40-60 .ap-textmedia__inner { grid-template-columns: 2fr 3fr; }
.ap-textmedia--media-left .ap-textmedia__text  { order: 2; }
.ap-textmedia--media-left .ap-textmedia__media { order: 1; }
.ap-textmedia__img { width: 100%; height: auto; }
.ap-textmedia .ap-prose { margin-top: 18px; }

@media (max-width: 767px) {
	.ap-textmedia__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.ap-textmedia--media-left .ap-textmedia__text,
	.ap-textmedia--media-left .ap-textmedia__media { order: initial; }
}

/* ---------- Cards ---------- */
/* Measured on live: the heading column is 541px wide and the card copy 389px,
   so the split is nearer 55/45 with a wider gutter than a plain half-and-half. */
.ap-cards__inner {
	display: grid;
	grid-template-columns: 1fr 0.86fr;
	gap: 70px;
	align-items: start;
}
.ap-cards__aside-img { margin-top: 24px; width: 100%; height: auto; }
/* With no heading, copy or image in the aside, the two-column grid leaves a
   dead column and squeezes the cards. Collapse to one column instead. */
.ap-cards__aside:empty { display: none; }
.ap-cards__inner:has(.ap-cards__aside:empty) {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}
.ap-cards__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }

.ap-card {
	position: relative;
	border-radius: var(--ap-card-radius);
	padding: 26px 30px 26px 46px;
	color: var(--ap-white);
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.ap-card--sky       { background: var(--ap-sky); }
.ap-card--accent    { background: var(--ap-accent); }
.ap-card--secondary { background: var(--ap-secondary); }
.ap-card--indigo    { background: var(--ap-indigo); }
.ap-card--green     { background: var(--ap-green); }
.ap-card--primary   { background: var(--ap-primary); }

/* Live renders the card copy as an h3 in Lato 20/700 white, NOT the display
   face. Measured: font-family Lato, font-size 20px, weight 700, colour #fff. */
.ap-card__text {
	margin: 0;
	font-family: var(--ap-font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	/* Live capitalises every card line. Verified against the rendered page. */
	text-transform: capitalize;
}
.ap-card__icon {
	position: absolute;
	top: -18px;
	left: -18px;
	width: 62px;
	display: block;
}
.ap-card__icon-img { width: 100%; height: auto; }

@media (max-width: 767px) {
	.ap-cards__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.ap-card { padding: 22px 22px 22px 40px; }
	.ap-card__icon { width: 48px; top: -14px; left: -14px; }
}

/* ---------- Icon list ---------- */
.ap-iconlist__head { margin-bottom: 20px; }
.ap-iconlist__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}
.ap-iconlist--media-right .ap-iconlist__text  { order: 2; }
.ap-iconlist--media-right .ap-iconlist__items { order: 1; }
/* media-content: imagery in one column, copy AND list stacked in the other. */
.ap-iconlist--media-content .ap-iconlist__media { align-self: end; }
.ap-iconlist--media-content.ap-iconlist--media-right .ap-iconlist__media { order: 2; }
.ap-iconlist--media-content.ap-iconlist--media-right .ap-iconlist__items { order: 1; }
.ap-iconlist__body { margin-bottom: 26px; }
.ap-iconlist--media-content .ap-iconlist__label { margin-top: 26px; }
.ap-iconlist__img { margin-top: 26px; width: 100%; height: auto; }
.ap-iconlist__label { margin-bottom: 18px; }
/* Live's list rows sit ~110px apart with 16px copy; 12px of gap plus the
   copy's own line-height lands on the same rhythm. */
.ap-iconlist__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Flex, not grid: the icon slot is always rendered but may be empty, and a
   fixed grid column would strand the copy in a 40px column whenever it was. */
.ap-iconlist__item { display: flex; gap: 16px; align-items: flex-start; }
.ap-iconlist__icon { flex: 0 0 34px; line-height: 0; }
.ap-iconlist__icon:empty { display: none; }
.ap-iconlist__icon img { width: 34px; height: auto; }
.ap-iconlist__copy { flex: 1 1 auto; min-width: 0; }

/* The theme's inline icon set, in place of a 1,600-glyph icon font. */
.ap-icon { width: 34px; height: 34px; fill: var(--ap-primary); display: block; }

@media (max-width: 767px) {
	.ap-iconlist__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.ap-iconlist--media-right .ap-iconlist__text,
	.ap-iconlist--media-right .ap-iconlist__items,
	.ap-iconlist--media-content .ap-iconlist__media,
	.ap-iconlist--media-content .ap-iconlist__items { order: initial; }
}

/* ---------- Logo carousel ---------- */
.ap-logos__heading {
	font-family: var(--ap-font-display);
	font-size: var(--ap-h3-size);
	color: var(--ap-text);
	margin-bottom: 26px;
}
.ap-carousel {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 8px;
}
.ap-carousel__dots { grid-column: 1 / -1; }
/* The focusable, scrolling viewport wraps the list; the list keeps its own
   semantics so screen readers still announce it as a list of N items. */
.ap-carousel__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ap-carousel__viewport::-webkit-scrollbar { display: none; }
.ap-carousel__viewport:focus-visible { outline: 3px solid var(--ap-secondary); outline-offset: 4px; }
.ap-carousel__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 30px;
}
.ap-carousel__slide {
	flex: 0 0 calc((100% - 60px) / 3);
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
}
.ap-logos__img { max-height: 90px; width: auto; object-fit: contain; }

.ap-carousel__arrow {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	color: var(--ap-text);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
.ap-carousel__arrow:hover, .ap-carousel__arrow:focus { color: var(--ap-accent); }

.ap-carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; grid-column: 1 / -1; }
.ap-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
.ap-carousel__dot.is-active { background: var(--ap-text); }

@media (max-width: 900px) { .ap-carousel__slide { flex-basis: calc((100% - 30px) / 2); } }
@media (max-width: 600px) { .ap-carousel__slide { flex-basis: 100%; } }

/* ---------- CTA band ---------- */
.ap-cta__body { margin-top: 18px; }
/* Live sets the CTA pull-quote in the display face at 40px on a 1.5 pitch;
   inheriting .ap-prose blockquote's 20px body size halved it. */
.ap-cta .ap-prose blockquote p {
	font-family: var(--ap-font-display);
	font-size: 40px;
	line-height: 1.5;
}
/* Live's CTA copy column is far narrower than the 640px narrow container:
   its longest line runs 494px on the green band, 411px on section 11. */
.ap-cta__body { max-width: 520px; margin-inline: auto; }
/* ...but a CTA holding a pull-quote is not one of those: live sets the
   quote 690px wide over four lines. At 520px it took six. */
.ap-cta__body:has(blockquote) { max-width: 700px; }
.ap-cta .ap-prose blockquote { max-width: 700px; margin-inline: auto; }
/* Live's opening mark is small -- 40x14 of ink, not the 70px the default
   prose blockquote draws. */
/* Live centres the mark on its own line above the quote; the default prose
   treatment hangs it in the left margin. */
.ap-cta .ap-prose blockquote::before {
	position: static;
	display: block;
	text-align: center;
	font-size: 44px;
	line-height: 0.8;
	margin-bottom: 14px;
}
.ap-cta__media { margin-top: 40px; }
.ap-cta__img { margin-inline: auto; max-width: 460px; width: 100%; height: auto; }

/* ---------- Form section ---------- */
.ap-formsection { overflow: hidden; }
.ap-formsection__inner { position: relative; z-index: 2; }
/* Live's rhythm inside the form band, measured: h2 bottom -> copy top 80px,
   copy bottom -> form top 80px. */
.ap-formsection__body { margin-top: 80px; }
.ap-form-wrap { margin-top: 80px; }

/* form_section's imagery now uses the standard decorations layer, so its
   position and size are editable per section instead of pinned in CSS. */

/* ---------- Link list ---------- */
.ap-linklist__body { margin-top: 16px; }
/* Live's buttons run on a 108px pitch: 48px tall with 60px between them,
   in a 720px column rather than the 640px narrow default. */
.ap-linklist__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 60px; }
.ap-linklist > .ap-container--narrow { max-width: 740px; }
.ap-linklist__item .ap-btn { padding-inline: 24px; }

/* ---------- Rich text ----------
   Measured against live's /terms-of-use/: the clause headings are the FULL
   display size (70px, line-height 1, peach), the prose runs the full 1120px
   container with no measure cap, and every gap between a heading and its body
   is exactly 20px. */
.ap-richtext { padding-block: 30px 0; }
.ap-richtext .ap-page-title { margin-bottom: 0.5em; color: var(--ap-text); }
.ap-richtext .ap-prose { max-width: none; }
.ap-richtext .ap-prose h2 {
	font-size: var(--ap-display-size);
	line-height: var(--ap-display-lh);
	color: var(--ap-primary);
	/* 34px, not 20px: live's paragraph carries a 14.4px bottom margin INSIDE its
	   own widget and the 20px widget gap sits on top of it. Margin collapsing
	   would otherwise swallow the 14.4px and every clause would sit 14px high. */
	margin: 34px 0 20px;
}
.ap-richtext .ap-prose h3 { font-size: var(--ap-h2-size); margin: 34px 0 20px; }
.ap-richtext .ap-prose > :first-child { margin-top: 0; }
.ap-richtext .ap-prose p { margin-bottom: 14.4px; }

/* ---------- Tabs ---------- */
.ap-tabs__head { margin-bottom: 30px; }
.ap-tabs__nav {
	list-style: none;
	margin: 0 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
/* Colours read off live's compiled CSS, not chosen:
   inactive tab #f1f1f1, hover #333/#fff, active #444/#fff with a 10px
   downward pointer, panel on the accent orange with #333 copy at 17px. */
.ap-tabs__tab {
	position: relative;
	appearance: none;
	border: 0;
	cursor: pointer;
	background: #f1f1f1;
	color: var(--ap-text);
	font-family: var(--ap-font-display);
	font-size: var(--ap-display-size);
	font-weight: 700;
	line-height: 1.1;
	text-transform: capitalize;
	padding: 10px 34px;
	border-radius: 0;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.ap-tabs__tab:hover { background: #333; color: var(--ap-white); }
.ap-tabs__tab.is-active { background: #444; color: var(--ap-white); }
.ap-tabs__tab.is-active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border: 10px solid transparent;
	border-top-color: #444;
}
.ap-tabs__panel {
	background: var(--ap-accent);
	color: #333;
	border: 0;
	border-radius: 0;
	padding: 34px;
	font-size: 17px;
}
/* The compiled rule sets the panel to #333, but every widget inside it
   overrides that to white on live - which is what the visitor actually sees. */
.ap-tabs__panel { color: var(--ap-white); }
.ap-tabs__panel .ap-iconlist__copy,
.ap-tabs__panel .ap-prose { color: var(--ap-white); font-size: 17px; }
.ap-tabs__panel .ap-icon { fill: var(--ap-white); }
/* Live draws the tick discs in sky, on the orange tab panel and on both
   sky-pale icon lists. The generic .ap-icon fill is peach, which is right
   for the food glyphs and wrong for every check -- so scope it to the
   glyph, not to the page. Listed after the panel rule so it wins there. */
.ap-icon--check,
.ap-tabs__panel .ap-icon--check { fill: var(--ap-sky); }
.ap-tabs__eyebrow { text-align: center; color: var(--ap-sky); }
.ap-tabs__heading { text-align: center; margin-bottom: 26px; }
.ap-tabs__panel .ap-iconlist__list { max-width: 900px; margin-inline: auto; }
.ap-tabs__panel[hidden] { display: none; }

@media (max-width: 1024px) { .ap-tabs__tab { font-size: var(--ap-h2-size); } }
@media (max-width: 767px) {
	.ap-tabs__nav { flex-direction: column; gap: 2px; }
	.ap-tabs__tab { width: 100%; font-size: var(--ap-h3-size); }
	.ap-tabs__tab.is-active::after { display: none; }
	.ap-tabs__panel { padding: 22px; }
}

/* ---------- Popup ---------- */
.ap-popup-open { overflow: hidden; }
.ap-popup {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.ap-popup[hidden] { display: none; }
.ap-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}
.ap-popup__dialog {
	position: relative;
	width: 640px;
	max-width: calc(100vw - 32px);
	background: var(--ap-white-75);
	backdrop-filter: blur(4px);
	border-radius: 0 10px 10px 0;
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
	padding: 26px;
}
.ap-popup__close {
	position: absolute;
	top: 8px;
	right: 12px;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	color: var(--ap-text);
	cursor: pointer;
}
.ap-popup__inner {
	display: grid;
	grid-template-columns: 20% 1fr;
	gap: 20px;
	align-items: center;
}
.ap-popup__title {
	font-family: var(--ap-font-body);
	font-size: var(--ap-body-lg-size);
	font-weight: 700;
	text-align: center;
	color: var(--ap-text);
	margin-bottom: 12px;
}
.ap-popup__img { width: 100%; height: auto; }

.ap-quotes { position: relative; }
.ap-quotes__track { list-style: none; margin: 0; padding: 0; }
.ap-quotes__slide { display: none; padding: 20px; text-align: center; }
.ap-quotes__slide.is-active { display: block; }
.ap-quotes__text {
	font-family: var(--ap-font-body);
	font-size: var(--ap-body-lg-size);
	margin: 0;
}
.ap-quotes__dots { display: flex; gap: 8px; justify-content: center; }
.ap-quotes__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
.ap-quotes__dot.is-active { background: var(--ap-indigo); }

@media (max-width: 767px) {
	.ap-popup__inner { grid-template-columns: minmax(0, 1fr); }
	.ap-popup__media { max-width: 120px; margin-inline: auto; }
	.ap-popup__dialog { border-radius: 10px; margin-inline: auto; }
	.ap-popup { justify-content: center; }
}

/* ---------- Animated headline circle ---------- */
.ap-mark {
	position: relative;
	background: transparent;
	color: var(--ap-secondary);
	padding-inline: 0.1em;
}
.ap-mark__svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
.ap-mark__svg path {
	fill: none;
	stroke: var(--ap-accent);
	stroke-width: 9;
	stroke-linecap: round;
	stroke-dasharray: 0 1500;
}
.ap-mark.is-drawn .ap-mark__svg path {
	animation: ap-mark-draw 1.2s ease-in forwards;
}
@keyframes ap-mark-draw {
	to { stroke-dasharray: 1500 1500; }
}

/* ---------- Parallax ---------- */
[data-parallax] { will-change: transform; }
/* The base rule centres the cut-out with translate(-50%,-50%); writing only
   translateY here REPLACED that, so any decoration carrying parallax went
   silently corner-anchored and sat half its own size down and to the right. */
.ap-decor__item[data-parallax] {
	transform: translate(-50%, -50%) translateY(var(--ap-parallax, 0px));
}

/* ---------- Icon cards ----------
   Live's "Values that Drive My Work": five full-width horizontal bands, the
   first white with dark text, the rest coloured with white text. Icon and
   heading share a line; the copy sits beneath at body size. */
.ap-iconcards__head { margin-bottom: 34px; }
.ap-iconcards__intro { margin-top: 16px; }
.ap-iconcards__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

.ap-iconcard {
	border-radius: var(--ap-card-radius);
	padding: 26px 34px 32px;
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.12);
}
.ap-iconcard--white     { background: var(--ap-white); color: var(--ap-text); }
.ap-iconcard--secondary { background: var(--ap-secondary); color: var(--ap-white); }
.ap-iconcard--accent    { background: var(--ap-accent); color: var(--ap-white); }
.ap-iconcard--sky       { background: var(--ap-sky); color: var(--ap-white); }
.ap-iconcard--green     { background: var(--ap-green); color: var(--ap-white); }
.ap-iconcard--indigo    { background: var(--ap-indigo); color: var(--ap-white); }
.ap-iconcard--primary   { background: var(--ap-primary); color: var(--ap-white); }

/* Live's card is an icon COLUMN beside a text column, so the body copy hangs
   under the title rather than running back to the card's edge. Measured off
   the About capture: icon 70px, title cap-height 36px (~50px display), body
   18px -- the first build had 52/44/16 with the body full-bleed, which read as
   a visibly smaller, differently-shaped card. */
.ap-iconcard { display: flex; align-items: flex-start; gap: 40px; }
.ap-iconcard__icon { flex: 0 0 70px; line-height: 0; padding-top: 4px; }
.ap-iconcard__icon .ap-icon { width: 70px; height: 70px; fill: currentColor; }
/* On the white card live tints the glyph indigo; the coloured cards keep the
   white of their own copy, which currentColor already gives us. */
.ap-iconcard--white .ap-iconcard__icon .ap-icon { fill: var(--ap-indigo); }
.ap-iconcard__text { flex: 1 1 auto; min-width: 0; }
.ap-iconcard__title {
	margin: 0 0 6px;
	font-family: var(--ap-font-display);
	font-size: 60px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: capitalize;
	color: inherit;
}
/* 50px gave a 30px cap where live's is 36px. Saira Extra Condensed runs about
   12% narrower per unit of cap height than the Trade Gothic it replaces, so
   the two cannot both match; cap height is the one the eye reads first. */
.ap-iconcard__body {
	margin: 0;
	font-family: var(--ap-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: inherit;
}

@media (max-width: 767px) {
	.ap-iconcard { padding: 18px 20px 22px; gap: 16px; }
	.ap-iconcard__title { font-size: 26px; }
	.ap-iconcard__icon { flex-basis: 34px; padding-top: 2px; }
	.ap-iconcard__icon .ap-icon { width: 34px; height: 34px; }
	.ap-iconcard__body { font-size: 16px; }
}