/* Generated by kindling-onboard. Do not edit by hand — re-run `kindling-onboard generate`. */

/* Default :focus-visible ring */
:where(a, button, .wp-element-button, input, select, textarea, [tabindex]):focus-visible {
	outline: var(--wp--custom--motion--focus-ring--outline, 2px solid var(--wp--preset--color--theme-04));
	outline-offset: var(--wp--custom--motion--focus-ring--outline-offset, 2px);
}

:where(a, button, .wp-element-button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

@keyframes kindling-reveal-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.is-style-reveal-fade-up {
	opacity: 0;
	will-change: opacity, transform;
}

.is-style-reveal-fade-up.is-revealed {
	animation: kindling-reveal-fade-up 200ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes kindling-reveal-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.is-style-reveal-fade-in {
	opacity: 0;
	will-change: opacity, transform;
}

.is-style-reveal-fade-in.is-revealed {
	animation: kindling-reveal-fade-in 200ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes kindling-reveal-scale-in {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

.is-style-reveal-scale-in {
	opacity: 0;
	will-change: opacity, transform;
}

.is-style-reveal-scale-in.is-revealed {
	animation: kindling-reveal-scale-in 320ms cubic-bezier(0.3, 0, 0, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[class*="is-style-reveal-"] {
		opacity: 1;
		transform: none;
	}
}

/* @kindling:keep:start */
/* ============ APLS client chrome (appended 2026-08-03) ============ */

/* WHY: Figma places the nav INSIDE every hero (transparent over the image);
   theme.json has no positioning mechanism, so the header part overlays here. */
.apls-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	background: transparent;
}

/* WHY: core/navigation hard-codes its 600px overlay breakpoint; APLS design only
   fits the 7-item uppercase nav + logo + CONTACT at >=1200 (~1150px intrinsic). */
@media (min-width: 600px) and (max-width: 1199px) {
	.apls-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.apls-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* WHY: Rule 22 reusable CTA — trailing arrow is fixed chrome (Figma vector
   33067:576/18919:32084), rendered as a currentColor mask so no per-button
   markup or icon media is needed; circle-in-pill variants come per-section. */
.apls-cta .wp-block-button__link {
	white-space: nowrap;
	/* Figma simple button 33145:3324 / 33186:1016: pill is pl20/pr4/py4 hugging a
	   33px arrow circle (41px tall), label Bold 2% tracking — theme base button
	   (12/24, 500, 10% tracking) read visibly wider + taller than every artboard. */
	display: inline-flex;
	align-items: center;
	padding: 4px 4px 4px 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	min-height: 41px;
}
/* WHY: theme.json styles.elements.button sets text-transform:uppercase for
   EVERY button. Client 2026-08-07 asked for TitleCase and then for Figma to be
   the source of truth on casing. Figma's rule is NOT black-vs-white, it is
   CONTENT vs CHROME — read off the artboards:
     TitleCase  body pills, both variants — "Earn Your Certification" /
                "Book Corporate Training" (33092:602, black) and
                "Get More Info" / "Shop Now" (33093:1065, white/inverse)
     UPPERCASE  header pill "CONTACT" (33092:481) and the closing CTA band
                "CONTACT US" (33101:1508) — the two chrome buttons
     UPPERCASE  the DiSC tab strip (33165:8234) — not .apls-cta at all, so it
                is untouched here and already correct
   Scoped to .apls-cta rather than flipping the theme.json element default, so
   non-CTA buttons (Gravity Forms submit, the tab strip) are not collateral.
   Block content already stores TitleCase, so dropping the transform is all
   that is needed; labels stored literally uppercase are fixed in
   scripts/qa-round-33145-b.php instead. */
.apls-cta .wp-block-button__link {
	text-transform: none;
}
/* ...and the two chrome buttons stay shouting, per the artboards above. */
header .apls-cta .wp-block-button__link,
.apls-cta-band .apls-cta .wp-block-button__link {
	text-transform: uppercase;
}
.apls-cta .wp-block-button__link::after {
	content: "";
	display: inline-block;
	flex: none;
	/* The 33px frame is the ARROW CONTAINER (p2.853); the glyph inside is NOT 33
	   or 27 but 18.26px — Figma nests it 'Arrow right' 27.386 -> Icon inset
	   20.83% -> inner inset -7.14% (27.386 x .5834 x 1.1428). We had read the
	   27.386 frame as the glyph size and drew it ~1.6x too large, with a stroke
	   to match (3.375px vs the design's 2.282px). Measured: Figma ink 17.0px
	   square, ours 27.0px. Audit 2026-08-07. */
	width: 33px;
	height: 33px;
	margin-left: 10px;
	vertical-align: middle;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018.2576%2018.2576'%20fill='none'%3E%3Cpath%20d='M1.1411%209.12881H17.1165M9.12881%2017.1165L17.1165%209.12881L9.12881%201.1411'%20stroke='black'%20stroke-width='2.2822'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18.26px 18.26px;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018.2576%2018.2576'%20fill='none'%3E%3Cpath%20d='M1.1411%209.12881H17.1165M9.12881%2017.1165L17.1165%209.12881L9.12881%201.1411'%20stroke='black'%20stroke-width='2.2822'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18.26px 18.26px;
}

/* WHY: Rule-22 state matrix, CONFIRMED against the Figma "Button states" sheet on
   2026-08-07 (Base Components 33152:549; the three node IDs Alex supplied —
   33152:765 / 33152:766 / 33167:9249 — are the stroke-only annotation rectangles
   over each row, so every value here was pixel-sampled from a native-scale render
   of the parent sheet). This SUPERSEDES the earlier derived matrix, which guessed
   hover -> theme-07 tint and active -> navy; both were wrong. Full sampling notes,
   run counts and contrast table: clients/apls/figma-artifacts/button-states/.
   Columns Neutral/Hover/Click/Focus/Inactive map to rest/:hover/:active/
   :focus-visible/[aria-]disabled. The generator only emits :hover for fill
   variants, so everything else lives here. */
.apls-cta--inverse .wp-block-button__link {
	background-color: var(--wp--custom--color--button--fill-inverse--background);
	color: var(--wp--custom--color--button--fill-inverse--text);
	/* Figma 33145:3324: white pill labels are Helvetica Bold, NEGATIVE 2% tracking,
	   lh 1.1 — unlike the solid pills (body font, +2%). */
	font-family: var(--wp--preset--font-family--helvetica-neue);
	letter-spacing: -0.02em;
	line-height: 1.1;
	/* Button audit 2026-08-07 (B2/B3): the white pill is SHORTER than the black
	   one — 33145:3043 renders 106x33 and the header pill 33145:2968 renders
	   133x33, both `pl-[20px]` with NO right or vertical padding: the height is
	   set entirely by the 33px arrow frame. We were inheriting the black pill's
	   41px min-height + 4/4/4/20 padding. */
	min-height: 33px;
	padding: 0 0 0 20px;
}
/* WHY: the white pill draws a BARE arrow, not a circled one — corrected by the
   button audit 2026-08-07 (B1). Both Figma variants export the SAME glyph and
   differ only in stroke colour (white on the black pill, black on the white
   one); the 33px frame behind it is `bg-black` on the black pill (invisible, so
   it reads bare) and has NO fill at all on the white pill (33145:3045 /
   33145:2970 carry no background). The previous rule painted a real black disc
   with a white glyph, which is what shipped on 23 buttons site-wide. Inheriting
   the base currentColor mask gives the black-on-white arrow the design wants;
   only the 4px gap (vs the black pill's 10px) is variant-specific. */
.apls-cta--inverse .wp-block-button__link::after {
	margin-left: 4px;
}
.apls-cta--inverse .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--button--fill-inverse--hover--background);
	color: var(--wp--custom--color--button--fill-inverse--hover--text);
}
/* Click + Inactive are IDENTICAL across rows 1 and 3 in the sheet, so they belong
   on the shared rule rather than per-variant. Only Hover differs (and it differs by
   being an exact inverse: #959595/#151515 swap surface and ink), which the
   fill / fill-inverse hover tokens already carry. */
.wp-element-button:active {
	background-color: var(--wp--custom--color--button--state--press--background);
	color: var(--wp--custom--color--button--state--press--text);
}

/* Inactive is a painted fill in the design, NOT the opacity fade we had before. */
.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"] {
	background-color: var(--wp--custom--color--button--state--disabled--background);
	color: var(--wp--custom--color--button--state--disabled--text);
	pointer-events: none;
}

/* Focus ring hugs the pill — sampled runs go straight from #84C661 into the fill
   with no backdrop between them, so outline-offset is 0, not the 2px global
   default. `outline` (not `border`) keeps it out of layout; the global 2px/2px
   focusRing token still governs links and form fields. */
.apls-cta .wp-block-button__link:focus-visible,
.apls-cta--inverse .wp-block-button__link:focus-visible {
	outline: var(--wp--custom--color--button--state--focus--width) solid var(--wp--custom--color--button--state--focus--ring);
	outline-offset: 0;
}

/* Row 2 — round arrow FAB. outermost/icon-block's save() writes background-color
   and color INLINE on .icon-container, so state overrides need !important
   (Rule 22 gotcha). Ring is 3px here, not 4 — measured on the circle. */
.apls-arrow-btn .icon-container:hover {
	background-color: var(--wp--custom--color--button--state--fab--hover-background) !important;
	color: var(--wp--custom--color--button--state--fab--hover-icon) !important;
}
.apls-arrow-btn .icon-container:active {
	background-color: var(--wp--custom--color--button--state--press--background) !important;
	color: var(--wp--custom--color--button--state--press--text) !important;
}
.apls-arrow-btn .icon-container:focus-visible {
	outline: var(--wp--custom--color--button--state--focus--width-fab) solid var(--wp--custom--color--button--state--focus--ring);
	outline-offset: 0;
}
.apls-arrow-btn .icon-container[aria-disabled="true"] {
	background-color: var(--wp--custom--color--button--state--disabled--background-fab) !important;
	color: var(--wp--custom--color--button--state--disabled--text) !important;
	pointer-events: none;
}

/* Ease the surface/ink swap so Hover and Click don't snap. The global
   prefers-reduced-motion block above already stills this. */
.apls-cta .wp-block-button__link,
.apls-cta--inverse .wp-block-button__link,
.apls-arrow-btn .icon-container {
	transition: background-color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard),
		color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard);
}

/* WHY: Figma paper texture (Footer node 33062:3150 fill) is a blend-mode image
   overlay; block background supports neither opacity nor blend modes. */
/* WHY: the header part is position:absolute (zero-height in flow), so the root
   blockGap before post-content would show as a white strip above the hero. */
.wp-site-blocks > main.wp-block-post-content {
	margin-block-start: 0;
}

.apls-paper {
	position: relative;
	isolation: isolate;
}
.apls-paper::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* 1740px = the asset's NATIVE width. Figma object-covers this texture across
	   each section (~100% scale, QA 33145:2975 2026-08-05); the earlier 870px
	   tile rendered every speck at half size and the paper read nearly flat. */
	background: url(../images/apls-texture-speckle.jpg) repeat top left / 1740px auto;
	mix-blend-mode: difference;
	opacity: 0.2;
	pointer-events: none;
	border-radius: inherit;
}

/* WHY: two numbers, both measured off Figma 33111:8793 (Insights, native 1440):
     - grey band top edge      y=329  (white->grey transition, sampled at x=20)
     - video top edge          y=265  => the video OVERLAPS the grey band by 62px
                                         (metadata agrees: "image block" y=-62)
     - heading ink ends        y=192  => heading -> video gap = ~70px
   Both were wrong in the build: the figure carried a viewport-fluid
   clamp(-62px,-4.31vw,-24px) left over from when this band was an IMAGE, so the
   overlap drifted AND the gap came out negative on desktop (the video sat 27px
   above the heading's bottom at 1440).
   Solved as two independent equations so neither can drift:
     overlap = -(bandPT + figMT) = -(0 + -62)              = 62 ✓
     gap     = secPB + bandMT + bandPT + figMT
             = P70  + (132 - P70) + 0 + (-62)              = 70 ✓
   The calc cancels the intro section's fluid var(--wp--preset--spacing--70), so
   both hold at every desktop width, not just at 1440. This intentionally
   replaces the site-wide -32px rounded-section tuck for THIS adjacency — the
   132px is what the artboard shows, and the section above is white like the
   page, so the rounded corners look identical either way.
   !important: the band's padding/margin are inline block-attribute styles. */
@media (min-width: 768px) {
	.apls-intro-section + .apls-image-band {
		/* 132 + bandPT(1) + figMT(-63) = 70 */
		margin-top: calc(132px - var(--wp--preset--spacing--70)) !important;
		/* 1px, NOT 0 — this is a margin-collapse guard, and it is why the block
		   shipped with padding-top:1px. At 0 the figure's negative margin has no
		   padding/border to butt against, collapses out through the parent, and
		   drags the whole BAND up by 62 instead of lifting the video inside it:
		   the gap still measured 70 but the overlap silently read 0. */
		padding-top: 1px !important;
	}
	.apls-intro-section + .apls-image-band > .apls-video-band {
		margin-top: -63px; /* 1px padding + -63 = the 62px overlap */
	}
}
/* <768 has no Figma artboard, and a site-wide normalizer
   (main.wp-block-post-content > [class*="apls-"][style*="padding-top"], 0-3-1
   !important) pins every section to 40px top padding there. Rather than carve
   out an exception, mobile keeps the tuck the old clamp resolved to at its
   small end (-24px), i.e. exactly how it looked before this change. */
@media (max-width: 767px) {
	.apls-intro-section + .apls-image-band > .apls-video-band {
		margin-top: -24px;
	}
}

/* WHY: core's responsive-embed contract is "the .wp-block-embed__wrapper gets a
   ::before padding-top spacer (56.25% = 720px at 1280) that reserves the box,
   and the embed is absolutely positioned ON TOP of it" — but core's rule only
   ever targets `> iframe`. Our click-to-load facade (functions.php
   embed_oembed_html) is a <button>, so it missed the overlay rule and instead
   STACKED below the spacer: 720 spacer + 720 button = a 1440px figure with 720px
   of dead space above the poster. That is the "huge gap above the video" on
   /insights/ (and Home — same band). Only the pre-click state was affected; the
   iframe the facade swaps in on click IS matched by core's rule and lands
   correctly, which is why it looked fine the moment you pressed play.
   position is !important because the facade carries `position:relative` inline. */
.wp-has-aspect-ratio .wp-block-embed__wrapper > .apls-video-facade {
	position: absolute !important;
	inset: 0;
	height: 100%;
}

/* WHY: Figma 33145:3288 is a whole-card link, but outermost/icon-block hard-codes
   its <a> to the icon's own box, so only the 33px arrow was clickable. Rather
   than wrap the group in hand-rolled anchor markup (unedittable in the site
   editor, and it would nest a link inside a link), stretch the EXISTING anchor:
   the card becomes the containing block and the anchor's ::after covers it. The
   link keeps its href and aria-label, so nothing changes for a screen reader —
   only the pointer hit area grows. Scoped to .apls-link-card so the black
   course cards, which use the same .apls-arrow-btn, are unaffected. */
.apls-link-card {
	position: relative;
}
.apls-link-card .apls-arrow-btn .icon-container::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* 32px mirrors the card's block-level radius. NOT `inherit`: inherit resolves
	   against the originating element, which is the 999px arrow pill, so the
	   overlay came out pill-shaped — its rounded caps carved chunks out of the
	   card's left and right ends and clicks there fell through to the card div.
	   Hit-testing follows border-radius, so this value has to track the card. */
	border-radius: 32px;
}
/* the arrow circle itself must stay unpositioned, or ::after would resolve
   against it instead of the card and the stretch would collapse to 33px. */
.apls-link-card .apls-arrow-btn .icon-container {
	position: static;
}
/* ...and for the same reason the anchor must never take a TRANSFORM either: a
   transform makes an element a containing block for its absolutely-positioned
   descendants, so the plugin's own
     .wp-block-outermost-icon-block a:hover { transform: scale(1.1) }
   (icon-block build/style.css) silently collapsed the stretched ::after from
   421x81 back to 33x33 the instant the pointer arrived — the overlay measured
   correct at rest and the whole card looked fixed, but every real click landed
   on the card div. Keep the designed hover growth by moving it to the svg, via
   the independent `scale` property so it composes with the plugin's
   rotate/flip transform instead of clobbering it. */
.apls-link-card .apls-arrow-btn a:hover {
	transform: none;
}
.apls-link-card .apls-arrow-btn a svg {
	transition: scale var(--wp--custom--motion--duration--fast, 0.1s) var(--wp--custom--motion--easing--standard, ease-in-out);
}
.apls-link-card .apls-arrow-btn a:hover svg {
	scale: 1.1;
}

/* WHY: the stats card (33145:2978) carries a FILM GRAIN over the brand gradient
   that get_design_context does not report — only the raw linear-gradient comes
   back, so the built card rendered dead smooth (Rule 16: screenshot wins).
   Measured off the native-res Figma render: monochrome (channel corr 0.88-0.99),
   fine (~1px), sigma ~4-5/255 on the mid-tones. This is NOT apls-texture-speckle
   (that asset is sparse bright specks on black for the paper sections) and it is
   NOT on the other brand-gradient surfaces — the contact-form card 33109:8401
   measures sigma 0.3, i.e. flat. So: card-scoped, and generated rather than
   shipped as an asset (feTurbulence is spec-defined, so it is stable across
   browsers, and it tiles at any card size). overlay against a 0.5-grey plate
   leaves the gradient's own luminance untouched and only adds the deviation. */
.apls-grain {
	position: relative;
	isolation: isolate;
}
.apls-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	/* fractalNoise -> desaturate -> force alpha opaque, so the plate is pure
	   grey-scale noise around 0.5 and `overlay` reads as +/- luminance only. */
	/* color-interpolation-filters='sRGB' is LOAD-BEARING: SVG filters default to
	   linearRGB, where feTurbulence's mean-0.5 plate maps to ~0.735 in sRGB and
	   `overlay` then lifts the whole card ~22 levels lighter than the gradient
	   stops. Measured; do not drop the attribute. */
	/* The plate is fully specified here (mean AND spread), so opacity stays 1 and
	   the two are tuned independently. feFunc linear: slope = spread, and
	   intercept = mean - 0.5*slope.
	     slope 0.30     -> matches Figma's measured grain sigma
	     intercept 0.27 -> plate mean 0.42, NOT 0.5
	   0.42 is measured, not chosen: solving the overlay equation backwards from
	   the Figma render at three different backdrop levels returns s = 0.417 /
	   0.418 / 0.425 for R/G/B independently. Figma's noise fill darkens; a
	   mean-0.5 plate would leave the card ~8% too light.
	   NOTE: this therefore renders the card slightly darker than the raw brand
	   stops #006FBA/#84C661. That is what the artboard does. If brand-hex
	   fidelity is preferred over artboard fidelity, set intercept to 0.35
	   (mean 0.5) and the gradient returns to the exact token colours. */
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type='linear'%20slope='0.3'%20intercept='0.27'/%3E%3CfeFuncG%20type='linear'%20slope='0.3'%20intercept='0.27'/%3E%3CfeFuncB%20type='linear'%20slope='0.3'%20intercept='0.27'/%3E%3CfeFuncA%20type='discrete'%20tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23g)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 160px 160px;
	mix-blend-mode: overlay;
	opacity: 1;
}
/* the card's own text sits in the same stacking context; keep it above the plate */
.apls-grain > * {
	position: relative;
	z-index: 1;
}

/* WHY: GF renders its own field markup; pill input (Figma 33062:3167 — tint bg,
   999px radius) can't be expressed through block attributes on a plugin form. */
/* Figma 33145:3426: the whole newsletter stack spans its 262px column — GF's
   wrapper otherwise shrink-wraps to the input's 240px min-width. */
.apls-footer .gform_wrapper {
	width: 100%;
}
.apls-footer .gform_wrapper input[type="email"] {
	background: var(--wp--preset--color--theme-07);
	border: none;
	border-radius: 999px;
	padding: 12px 16px;
	min-width: 240px;
	/* Figma 33145:3430: input spans the full 262px newsletter column. */
	width: 100%;
}
/* !important: GF's Orbital theme stylesheet loads after motion.css and re-paints
   the submit button; same override class of problem as icon-block inline styles. */
.apls-footer .gform_wrapper input[type="submit"] {
	/* Figma 33145:3434 "Submit" = the same simple-button pill: pl20/pr4/py4,
	   41px tall, Bold +2% tracking, 27px arrow in a 33px slot at the right.
	   Inputs can't carry ::after, so the arrow rides as a background-image. */
	background-color: var(--wp--preset--color--theme-08) !important; /* B4: base pill is #000, not #111 */
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018.2576%2018.2576'%20fill='none'%3E%3Cpath%20d='M1.1411%209.12881H17.1165M9.12881%2017.1165L17.1165%209.12881L9.12881%201.1411'%20stroke='white'%20stroke-width='2.2822'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 7px center !important;
	background-size: 18.26px 18.26px !important;
	color: var(--wp--preset--color--theme-01) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 4px 47px 4px 20px !important;
	min-height: 41px !important;
	font-family: var(--wp--preset--font-family--onest) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	cursor: pointer;
}
.apls-footer .gform_wrapper input[type="submit"]:hover {
	/* background-color (not shorthand) so the arrow background-image survives */
	background-color: var(--wp--custom--color--button--fill--hover--background) !important;
	color: var(--wp--custom--color--button--fill--hover--text) !important;
}
.apls-footer .gform_wrapper input[type="submit"]:active {
	background-color: var(--wp--preset--color--theme-08) !important;
	color: var(--wp--preset--color--theme-01) !important;
}

/* WHY: Figma navy sections (Split Content 01 navy 33062:2842 et al) layer a
   soft luminosity glow (overlay blend .73, object-bottom) over theme-02 that
   block attributes can't express; texture ships with the theme like
   apls-texture-speckle. Pair with .apls-paper (supplies position+isolation). */
.apls-navy-glow::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url(../images/apls-bg-glow.jpg) no-repeat bottom center / cover;
	mix-blend-mode: overlay;
	opacity: 0.73;
	pointer-events: none;
	border-radius: inherit;
}

/* WHY: GF renders its own field markup (contact form 2, Figma 33109:8401 —
   white-70 fields on the brand-gradient card, radius 4, Inter 16/1.7) — not
   expressible via block attributes. !important where Orbital re-paints. */
.apls-contact-form .gform_wrapper input:not([type="submit"]):not([type="checkbox"]),
.apls-contact-form .gform_wrapper select,
.apls-contact-form .gform_wrapper textarea {
	background: rgba(255, 255, 255, 0.7) !important;
	border: none !important;
	border-radius: 4px !important;
	padding: 8px !important;
	font: 400 1rem/1.7 var(--wp--preset--font-family--inter) !important;
	color: var(--wp--preset--color--theme-08) !important;
	width: 100%;
}
.apls-contact-form .gform_wrapper textarea {
	min-height: 139px;
}
.apls-contact-form .gform_wrapper ::placeholder {
	color: var(--wp--preset--color--theme-08);
	opacity: 1;
}
/* SEND pill: white, CAPS, brand arrow — needs <button> (gform_submit_button_2
   filter in functions.php); inputs cannot carry ::after content. */
.apls-contact-form .gform_wrapper button[type="submit"] {
	background: var(--wp--preset--color--theme-01) !important;
	color: var(--wp--preset--color--theme-08) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 10px 8px 10px 20px !important;
	font-family: var(--wp--preset--font-family--helvetica-neue) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	white-space: nowrap;
}
/* content/display !important: Orbital resets button ::after to content:none. */
.apls-contact-form .gform_wrapper button[type="submit"]::after {
	content: "" !important;
	display: inline-block !important;
	width: 1em;
	height: 1em;
	margin-left: 12px;
	vertical-align: -0.12em;
	/* NOT currentColor. The mask plate needs a paint source, and something in
	   Gravity Forms' Orbital theme resolves the pseudo's color to white here —
	   the arrow was rendering as a white shape on the white pill, i.e. a 20px
	   invisible gap after "SEND" (the box was reserved, just unpainted).
	   Pin it to the button's ink instead, and flip it on :active where the pill
	   inverts to navy. */
	background-color: var(--wp--preset--color--theme-08) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018.2576%2018.2576'%20fill='none'%3E%3Cpath%20d='M1.1411%209.12881H17.1165M9.12881%2017.1165L17.1165%209.12881L9.12881%201.1411'%20stroke='black'%20stroke-width='2.2822'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018.2576%2018.2576'%20fill='none'%3E%3Cpath%20d='M1.1411%209.12881H17.1165M9.12881%2017.1165L17.1165%209.12881L9.12881%201.1411'%20stroke='black'%20stroke-width='2.2822'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.apls-contact-form .gform_wrapper button[type="submit"]:hover {
	background: var(--wp--preset--color--theme-07) !important;
}
.apls-contact-form .gform_wrapper button[type="submit"]:active {
	background: var(--wp--preset--color--theme-02) !important;
	color: var(--wp--preset--color--theme-01) !important;
}

/* WHY: logo-carousel row renders at 72% opacity in Figma (slider 33186:920,
   revised Home 33145:2975 relocated it onto the light center-content paper
   2026-08-05); core/image has no opacity attribute. Logos are full-color at
   75px (the navy-era brightness(0) invert(1) knockout would render them
   invisible on the light field); chevrons share the row opacity. */
.apls-logo-carousel .wp-block-image img {
	opacity: 0.72;
	max-height: 75px;
	width: auto;
	object-fit: contain;
}
/* WHY: continuous right-to-left marquee (Alex 2026-08-05) — kindling/splide has
   no autoScroll and no global Splide to extend, so this is the LDT CSS-ticker
   recipe: 2x duplicated 10-logo sequence, -50% translate = exactly one sequence,
   seamless loop. 276px slots x 4 = the 1104px band; edge fade masks the mid-logo
   cut a moving strip always has. Global prefers-reduced-motion rule stills it. */
@keyframes apls-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.apls-logo-ticker {
	overflow: hidden;
	-webkit-mask: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	mask: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.apls-logo-ticker__track {
	width: max-content;
	animation: apls-ticker-scroll 70s linear infinite;
}
.apls-logo-ticker:hover .apls-logo-ticker__track {
	animation-play-state: paused;
}
.apls-logo-ticker__track .wp-block-image {
	flex: 0 0 276px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
/* WHY: mobile logo row is drawn MUCH smaller than desktop — artboard 33153:6689
   'Traditions: Logo Slider' is 390x42 with three marks visible on ~118px pitch
   (glyph boxes ~26-30 tall inside a 42 row). We were rendering the desktop 75px
   logos in 215px slots inside a 30/30-padded band: 200px tall vs the design's
   42, which alone put the whole section +158 over the artboard (audit
   2026-08-07 D2). Band padding collapses too — the design spaces the row with
   the section's own 56 gap, not band padding. */
@media (max-width: 767px) {
	.apls-logo-ticker__track .wp-block-image {
		flex-basis: 118px;
	}
	.apls-logo-carousel .wp-block-image img {
		max-height: 42px;
	}
	.apls-logo-carousel {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* WHY: kindling style.css resets svg { max-width:100% }; inside the shrink-to-fit
   nav toggle buttons that percentage is cyclic and resolves the 24x24 core icon
   to 0 width - hamburger invisible below 1200 (caught by nav gate 2026-08-04).
   Applies to every Kindling site; starter-theme fix queued in kindling-onboard. */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	max-width: none;
}

/* WHY: post-grid thumbs are 16:9 in Figma (405x228 desktop node 33145:5607) but
   rendered 3:2 and stretched unevenly by is-content-justification-stretch when a
   sibling card ran taller (section-qa gate). Mobile overrides to 188/166 below. */
.apls-post-grid .wp-block-post-featured-image,
.apls-post-grid .wp-block-post-featured-image img {
	aspect-ratio: 16/9 !important;
	height: auto !important;
}

/* WHY: Amanda's mobile artboards (canvas 33145:2861, 2026-08-04) define
   structural 430 treatments block attrs can't express per-viewport. */
@media (max-width: 767px) {
	/* feature cards -> compact pills (33153:6689): radius 32->16, icons 75% (75->56),
	   pill padding 16 (not 24) and 8px between pills; wrap sits 16 below body not
	   spacing-80 — Figma pill block is 376 tall, ours was 491 (section-qa gate) */
	.apls-feature-cards > .wp-block-group {
		border-radius: 16px !important;
		padding: 16px !important;
	}
	.apls-feature-cards {
		gap: 8px !important;
	}
	.wp-block-group:has(> .apls-feature-cards) {
		margin-top: 16px !important;
	}
	.apls-feature-cards .wp-block-image img {
		width: 56px !important;
		height: auto !important;
	}
	/* navy split (33153:6738): Figma is 878 tall, ours was 1114 (section-qa gate).
	   Carousel chrome collapses (slot mt 40 + pads 60 + splide pads 96 -> ~32 total),
	   icons scale 75% (Amanda mobile rule), content stack gap 17 per Figma autolayout,
	   button hugs the body (Figma gap 16 vs our 24+24 margin) */
	.apls-split-content .wp-block-image.is-resized img {
		width: 85px !important;
		height: auto !important;
	}
	.apls-split-content .wp-block-image.size-full.has-custom-border img {
		width: 350px !important;
		max-width: 100%;
		aspect-ratio: 350/300 !important;
		height: auto !important;
		object-fit: cover; /* the design's inset photo card (350x300) — matches bio/core-values */
	}
	.apls-split-content .is-vertical.wp-block-group {
		gap: 17px !important;
	}
	.apls-split-content .wp-block-buttons {
		margin-top: 0 !important;
	}
	/* bio split (33165:8772): photo stacks FIRST on mobile; photo is the design's
	   inset 350x300; name 25/30, kicker + gradient-card copy 19/23; paragraph
	   rhythm 24; stack gap 16 (Figma 1538, ours was 1852 — section-qa gate) */
	.apls-bio-split .apls-split-grid .wp-block-kindling-grid-item:has(> figure) {
		order: -1;
	}
	.apls-bio-split .apls-split-grid figure img {
		width: 350px;
		max-width: 100%;
		aspect-ratio: 350/300;
		height: auto !important;
		object-fit: cover;
	}
	.apls-bio-split h2 {
		font-size: 25px !important;
		line-height: 1.2 !important;
	}
	.apls-bio-split .is-vertical.wp-block-group {
		gap: 16px !important;
	}
	.apls-bio-split p.has-theme-03-color,
	.apls-bio-split .has-brand-gradient-gradient-background p {
		font-size: 19px !important;
		line-height: 23px !important;
		letter-spacing: 0 !important;
	}
	.apls-bio-split h2 + p.has-theme-03-color {
		margin-top: -12px !important; /* Figma name->kicker gap is 4, stack gap is 16 */
	}
	.apls-bio-split .has-brand-gradient-gradient-background {
		padding: 24px !important;
		margin-top: 8px !important; /* stack gap 16 + 8 = Figma's 24 socials->card */
	}
	.apls-bio-split .is-nowrap img {
		width: 33px !important;
		height: auto !important; /* icons 75% on mobile (42 -> 33, Figma) */
	}
	.apls-bio-split .wp-block-paragraph {
		margin-block-start: 0 !important;
		margin-block-end: 0 !important;
	}
	.apls-bio-split .wp-block-paragraph + .wp-block-paragraph {
		margin-block-start: 24px !important;
	}
	.apls-bio-split .wp-block-buttons {
		margin-top: 24px !important;
	}
	/* stats card stays 2-up with the vertical divider (33153:6689), never stacks */
	.apls-stats-card {
		flex-wrap: nowrap !important;
	}
	.apls-stats-card > .wp-block-group {
		min-width: 0;
	}
	/* post grid (33165:8591): mobile keeps TWO columns of compact cards (188px wide,
	   188/166 thumbs) — not stacked 16:9 — and the section heading stays 38px
	   (artboard measures 38, overriding the x-large 21 floor; Figma mobile = truth) */
	.apls-post-grid > h2 {
		font-size: 38px !important;
		line-height: 1.2 !important;
	}
	.apls-post-grid .wp-block-post-template {
		grid-template-columns: 1fr 1fr !important;
		gap: 32px 8px !important;
	}
	.apls-post-grid .wp-block-post-featured-image,
	.apls-post-grid .wp-block-post-featured-image img {
		aspect-ratio: 188/166 !important;
		height: auto !important;
	}
	.apls-post-grid .wp-block-post-title {
		line-height: 1.5 !important;
	}
	.apls-post-grid .wp-block-query {
		margin-top: 40px !important;
	}
	/* Amanda A8: Featured shows 4 on mobile; Trending's first card would then
	   duplicate post #4 — hide it (Trending renders its remaining 2). */
	.apls-post-grid ~ .apls-post-grid .wp-block-post-template li:first-child {
		display: none;
	}
	/* Amanda 2026-08-05: follow per-node text styles — small mobile headings
	   (21/25px classes) carry ZERO tracking, not the global -3%. */
	.apls-center-content h2,
	.apls-bio-split h2,
	.apls-features-courses > h2,
	.apls-course-cards h3 {
		letter-spacing: 0 !important;
	}
	/* core values mobile (33165:7537): photo stacks FIRST at the design's 350x300,
	   value rhythm = title/body 8, block/block 40 (ours was photo-middle at 585) */
	.apls-core-values .wp-block-kindling-grid-item:has(> figure) {
		order: -1;
	}
	.apls-core-values figure img {
		width: 350px !important;
		max-width: 100%;
		aspect-ratio: 350/300 !important;
		height: auto !important;
		object-fit: cover;
	}
	.apls-core-values .wp-block-kindling-grid-item > .is-vertical {
		gap: 40px !important; /* between value blocks */
	}
	.apls-core-values .is-vertical .is-vertical {
		gap: 8px !important; /* title -> body */
	}
	.apls-core-values .is-vertical h3 {
		font-size: 25px !important;
		line-height: 1.2 !important;
		text-align: left !important; /* desktop right/left pair alignment resets on mobile */
	}
	.apls-core-values .is-vertical p {
		text-align: left !important;
	}
	/* disc-tabs mobile (33165:8234): stack gaps 40, tab-pill gap 18 per artboard */
	.apls-proven-solutions .wp-block-cover__inner-container > * {
		margin-top: 40px !important;
	}
	.apls-proven-solutions .wp-block-cover__inner-container > *:first-child {
		margin-top: 0 !important;
	}
	.apls-proven-solutions .wp-block-buttons {
		gap: 24px !important;
	}
	.apls-catalyst .wp-block-buttons,
	.apls-other-solutions .wp-block-buttons {
		flex-wrap: nowrap !important; /* artboards keep both pills on one row */
		gap: 16px !important;
	}
	/* DiSC card sections mobile (33165:8330 catalyst / 33165:8480 other-solutions):
	   cards pad 16 / inner gap 8, titles 19/23, grid gap 16 — ours carried the
	   desktop card chrome and ran +273/+395 over the artboards */
	.apls-catalyst .has-theme-08-background-color,
	.apls-other-solutions .has-theme-08-background-color {
		padding: 16px !important;
		gap: 8px !important;
	}
	.apls-catalyst .has-theme-08-background-color h3,
	.apls-other-solutions .has-theme-08-background-color h3 {
		font-size: 19px !important;
		line-height: 23px !important;
	}
	.apls-catalyst .is-layout-grid,
	.apls-other-solutions .is-layout-grid {
		gap: 16px !important;
	}
	.apls-catalyst .apls-split-grid,
	.apls-catalyst .apls-split-grid .is-vertical {
		gap: 16px !important; /* intro column + check rows, artboard gap 16 */
	}
	/* who-for cards (33165:8047): icons 75% on mobile (84 -> 63), labels 25/30 */
	.apls-who-its-for .wp-block-image img {
		width: 63px !important;
		height: auto !important;
	}
	.apls-who-its-for h3 {
		font-size: 25px !important;
		line-height: 1.2 !important;
	}
	.apls-who-its-for .is-layout-flex:has(h3) {
		gap: 24px !important; /* card pitch 195 - card 171 in 33165:8047 */
	}
	.apls-who-its-for .is-layout-flex > .wp-block-group {
		padding: 16px !important;
	}
	/* team cards mobile (33165:7762): 2-col grid of square-photo cards (193px,
	   col gap 8 / row gap 20), names 18/500 — ours stacked 5 full-width cards */
	.apls-team-section .is-layout-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 20px 8px !important;
	}
	.apls-team-section .is-layout-grid h3 {
		font-size: 18px !important;
		font-weight: 500;
		line-height: 1.5 !important;
		letter-spacing: 0.02em !important;
	}
	/* CTA band mobile (33165:7255, Home mobile artboard): 317-tall band (was 475).
	   Heading 33/40 x2 lines + centered pill match already; pill arrow glyph is
	   27px in a 33px frame on the artboard (ours was 1em/14). */
	.wp-block-cover.apls-cta-band {
		min-height: 317px !important;
		height: 317px !important;
	}
	.apls-cta-band .apls-cta .wp-block-button__link::after {
		width: 27px;
		height: 27px;
		vertical-align: middle;
	}
	/* course cards mobile (33153:6899, Home mobile artboard): horizontal-scroll row
	   of 400x237 cards — cover PHOTO dropped, gradient icon sits left of the text,
	   title 25/30, arrow bottom-right. Ours stacked three 622px photo cards. */
	.apls-features-courses > h2 {
		font-size: 25px !important;
		line-height: 1.2 !important;
	}
	.apls-course-cards {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.apls-course-cards > .wp-block-group {
		flex: 0 0 400px;
		width: 400px;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 16px !important;
		border-radius: 16px;
		padding: 16px !important;
		scroll-snap-align: start;
	}
	.apls-course-cards .wp-block-cover {
		flex: 0 0 76px;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
	}
	.apls-course-cards .wp-block-cover > img.wp-block-cover__image-background,
	.apls-course-cards .wp-block-cover .wp-block-cover__background {
		display: none !important;
	}
	.apls-course-cards .wp-block-cover__inner-container,
	.apls-course-cards .wp-block-cover figure {
		width: 100% !important;
	}
	.apls-course-cards .wp-block-cover figure img {
		width: 100% !important;
		height: auto !important;
	}
	.apls-course-cards > .wp-block-group > .is-vertical {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 !important;
		gap: 8px !important;
	}
	.apls-course-cards .apls-arrow-btn {
		margin-top: 0 !important;
	}
	.apls-course-cards h3 {
		font-size: 25px !important;
		line-height: 1.2 !important;
	}
	/* footer (33167:9247): 5 partner badges fit one row (90px inline width -> 56),
	   nav links 19/23 gap 8 per artboard. Figma footer is 716 tall, ours was 1137:
	   logo 196 (not 340), pad-top 24, stack/grid gaps 24/40, badge band + divider +
	   legal margins 40/24 with no extra pads, newsletter form on one row */
	.apls-footer .wp-block-image img[style*="width:90px"] {
		width: 56px !important;
	}
	.apls-footer .wp-block-navigation,
	.apls-footer .wp-block-navigation a {
		font-size: 19px !important;
		line-height: 23px !important;
	}
	.apls-footer .wp-block-navigation ul {
		gap: 8px !important;
	}
	.apls-footer .is-vertical.wp-block-group:has(.gform_wrapper) {
		gap: 16px !important;
	}
	.apls-footer hr.wp-block-separator + .wp-block-group {
		row-gap: 8px !important;
	}
	.apls-footer .is-vertical figure img[class*="wp-image"] {
		width: 196px !important;
		height: auto !important;
	}
	.apls-footer > .alignwide.is-layout-grid {
		gap: 40px !important;
	}
	.apls-footer .is-vertical.wp-block-group {
		gap: 24px !important;
	}
	.apls-footer .wp-block-group:has(> figure + figure) {
		margin-top: 40px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.apls-footer hr.wp-block-separator {
		margin-top: 40px !important;
	}
	.apls-footer hr.wp-block-separator + .wp-block-group {
		margin-top: 24px !important;
		padding-top: 0 !important;
	}
	.apls-footer .gform_wrapper form {
		display: flex;
		align-items: stretch;
		gap: 12px;
	}
	.apls-footer .gform_wrapper .gform_body {
		flex: 1 1 auto;
		min-width: 0;
	}
	.apls-footer .gform_wrapper .gform_footer {
		flex: 0 0 auto;
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* WHY: desktop footer (33145:3328) is 633 tall; ours was 843 (section-qa gate).
   Figma: nav links 24/26 (lh 1.1), container gap 56 to the badge strip with no
   band pads, divider + legal sit 24 below their neighbors. */
/* WHY: Amanda A7 (2026-08-05): testimonials are STATIC on both viewports — no
   carousel. Splide still initializes (markup untouched, DB-driven), so CSS
   neutralizes it everywhere: clones + arrows hidden, list un-transformed.
   3-across only fits >=1024 (768 renders ~230px cards — tablet-matrix catch);
   768-1023 stacks compact cards centered at 640. */
@media (min-width: 1024px) {
	/* testimonials static row (33101:1455): 3 cards side by side */
	.apls-testimonials .splide__list {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 24px;
	}
	.apls-testimonials .splide__slide {
		width: auto !important;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.apls-testimonials .splide__list {
		display: block !important;
		width: auto !important;
	}
	.apls-testimonials .splide__slide {
		width: auto !important;
		max-width: 640px;
		display: block;
		margin: 0 auto 12px !important;
	}
	.apls-testimonials .splide__slide > .wp-block-group {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 31px !important;
		padding: 32px !important;
		border-radius: 16px;
		min-height: 0 !important;
	}
	.apls-testimonials .splide__slide .wp-block-image {
		flex: 0 0 50px;
	}
	.apls-testimonials .splide__slide .wp-block-image img {
		width: 50px !important;
		height: auto !important;
	}
	.apls-testimonials .splide__slide .is-vertical {
		flex: 1 1 auto;
		min-width: 0;
		min-height: 0 !important;
	}
}
.apls-testimonials .splide__slide--clone {
	display: none !important;
}
.apls-testimonials .splide__arrows,
.apls-testimonials .splide__pagination,
.apls-testimonials .navigation-arrows {
	display: none !important;
}
.apls-testimonials .splide__list {
	transform: none !important;
	width: auto !important;
}
.apls-testimonials .splide__track {
	overflow: visible;
}

@media (min-width: 768px) {
	/* Section-qa full-site sweep (2026-08-05): these sections were authored with
	   lighter pads than the design's uniform 120 (covers had spacing-70 = 65.6,
	   the rest spacing-80 = 105 whose clamp only reaches 120 past 1550px). Pin
	   to the design value; mobile keeps the 40px artboard pad via the <768 block. */
	.apls-who-its-for,
	.apls-proven-solutions,
	.apls-catalyst,
	.apls-other-solutions,
	.apls-how-it-works,
	/* added 2026-08-07 (audit D3): the navy split was missed by the original
	   sweep — it carried spacing-80 (105.125 at 1440) against the design's 120
	   in 33145:3023 'Split Content 01'. */
	.apls-navy-glow.apls-split-content {
		padding-top: 120px !important;
		padding-bottom: 120px !important;
	}
	/* WHY: measured against the artboard, the text column's icon->heading (64)
	   and heading->paragraph (32) steps ALREADY match — only paragraph->button
	   is short, 64 live vs 80 in Figma (paragraph 33145:3041 ends y659, button
	   y739). Flex gap (32) and margin stack, so 48 here yields the design's 80.
	   !important because core's layout stylesheet sets margin-block-start on
	   this child later in the cascade. Audit 2026-08-07 D3. */
	/* WHY: pixel-measuring the artboard render (Rule 16 — screenshot wins) puts
	   the photo 173px from the section top AND bottom: the 120 section pad plus
	   53px of slack inside the content row, with both columns centred in it.
	   Padding the row reproduces that without breaking the design system's
	   uniform 120 section padding. 604 photo + 106 = 710 vs the artboard's 706. */
	.apls-navy-glow.apls-split-content .apls-split-grid {
		padding-block: 53px;
	}
	.apls-navy-glow.apls-split-content .wp-block-group.is-vertical > h2 {
		margin-top: 32px; /* + the 32 flex gap = the artboard's 64 icon->heading */
	}
	.apls-navy-glow.apls-split-content .wp-block-group.is-vertical > .wp-block-buttons {
		margin-top: 48px !important;
	}
	.apls-how-it-works .is-layout-grid {
		gap: 72px !important; /* design 'Main' gap 72 between step cells */
	}
	/* 2026-08-19: the old `.apls-post-grid ... li:nth-child(4){display:none}` rule
	   lived here. It existed only to trim the Featured query's 4 posts down to 3
	   on desktop (it queried 4 for the mobile 2x2). Featured now queries 6 via a
	   category taxQuery, so the trim is obsolete — and because the selector was
	   never scoped to one query, it would have started eating Trending's 4th card
	   as soon as Trending grew past 3 posts. Removed rather than re-scoped. */
	.apls-footer .wp-block-navigation {
		line-height: 1.1;
	}
	.apls-team-section .is-layout-grid h3 {
		text-transform: capitalize !important; /* 33089:10627 name style */
		letter-spacing: -0.02em !important; /* desktop node draws -2% (mobile +2%) */
	}
	.apls-footer .wp-block-group:has(> figure + figure) {
		margin-top: 84px !important; /* measured columns->badges gap in 33145:3328 */
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.apls-footer hr.wp-block-separator {
		margin-top: 24px !important;
	}
	.apls-footer hr.wp-block-separator + .wp-block-group {
		margin-top: 24px !important;
		padding-top: 0 !important;
	}
}

/* WHY: nav 39 is shared by header AND footer; the design footer is a FLAT link
   list — the Everything DiSC submenu (added 2026-08-05, Amanda A6) must not
   surface there. Chevron + panel are header-only chrome. */
.apls-footer .wp-block-navigation__submenu-container,
.apls-footer .wp-block-navigation__submenu-icon {
	display: none !important;
}

/* WHY: nav bar mobile (33167:9248) = logo + "MENU" label + 3-bar burger and NO
   header CONTACT pill below the collapse width; core renders a bare 2-bar svg
   and the pill is desktop chrome. Pill lives INSIDE the overlay instead. */
@media (max-width: 1199px) {
	.apls-header .wp-block-buttons {
		display: none;
	}
}
.apls-header .wp-block-navigation__responsive-container-open {
	gap: 13px;
	color: #fff;
	align-items: center;
}
.apls-header .wp-block-navigation__responsive-container-open::before {
	content: "MENU";
	font-family: var(--wp--preset--font-family--helvetica-neue);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	line-height: 1;
}
.apls-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}
.apls-header .wp-block-navigation__responsive-container-open::after {
	content: "";
	width: 30px;
	height: 18px;
	background: linear-gradient(currentColor 0 2.5px, transparent 2.5px 100%) 0 0 / 30px 7.75px repeat-y;
}

/* WHY: mobile overlay (33167:9246) — green close X; the Contact nav item renders
   as a white pill in the overlay only (desktop keeps the separate header pill). */
.apls-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--theme-04);
}
.apls-header .wp-block-navigation__responsive-container:not(.is-menu-open) .apls-nav-contact {
	display: none;
}
.apls-header .is-menu-open .apls-nav-contact {
	margin-top: 16px;
}
.apls-header .is-menu-open .apls-nav-contact .wp-block-navigation-item__content {
	background: #fff;
	color: #000 !important;
	border-radius: 999px;
	padding: 12px 24px;
}

/* WHY: dropdown submenu panel style (33167:9753) — white sheet, rounded bottom,
   black CAPS links. Dormant until Everything DiSC children are defined. */
.apls-header .wp-block-navigation__submenu-container {
	background: #fff !important;
	border: 0 !important;
	border-radius: 0 0 16px 16px;
	padding: 12px 8px !important;
}
.apls-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #111 !important;
}
/* WHY: the pill nav is items-justified-right, so core right-aligns every dropdown
   panel (left:auto;right:0) — child text landed ~108px left of its parent link.
   Anchor panels left and pull back exactly the panel pad (8) + item pad (16) so
   dropdown text x-aligns with the parent link text (parent links have 0 padding).
   The <1024 overlay renders panels position:static, which ignores left/right. */
.apls-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	left: -24px !important;
	right: auto !important;
}

/* WHY: refinements after first 430 verify — the partner badges have varied
   inline widths (only some were 90px) so size the whole set by height for a
   single compact row (33167:9247); and the overlay-only Contact nav item must
   not surface in the footer's link list (design footer has no Contact link). */
@media (max-width: 767px) {
	.apls-footer img[class*="wp-image-2"] {
		width: auto !important;
		height: 32px !important;
	}
	.apls-footer .wp-block-group:has(> .wp-block-image img[class*="wp-image-2"]) {
		gap: 12px !important;
		flex-wrap: nowrap !important;
	}
}
.apls-footer .apls-nav-contact {
	display: none;
}

/* WHY: section-qa gate 2026-08-04 — mobile hero heights per artboards (Home 452
   / inner 344 vs desktop inline min-heights 697/514, style-attr match because
   the two hero tiers share .apls-hero), and mobile hero ls is -1% not -3%. */
@media (max-width: 767px) {
	.apls-hero[style*="min-height:697px"] {
		min-height: 452px !important;
	}
	.apls-hero[style*="min-height:514px"] {
		min-height: 344px !important;
	}
	.apls-hero h1 {
		letter-spacing: -0.01em;
	}
}

/* WHY: mobile artboards are source of truth (user ruling 2026-08-04). Sections
   run 150-460px taller at 430 than designed: mobile vertical padding is 40 and
   split/grid gaps compress; testimonials render as 3 STACKED cards (33163:6978
   settles the carousel question — Splide inlines transforms, hence !important). */
@media (max-width: 767px) {
	main.wp-block-post-content > [class*="apls-"][style*="padding-top"] {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
	.wp-block-group.apls-split-grid,
	.wp-block-group.apls-split-grid--flip,
	.wp-block-group.apls-split-grid--even {
		gap: 24px !important;
	}
	.apls-testimonials .splide__track {
		overflow: visible;
	}
	.apls-testimonials .splide__list {
		display: block !important;
		transform: none !important;
		width: auto !important;
	}
	.apls-testimonials .splide__slide {
		width: auto !important;
		display: block;
		margin: 0 0 8px !important;
	}
	/* loop-mode clones must hide or the stack shows 7 cards (section-qa gate:
	   2381px vs the artboard's 864). Card compacts to the 33163:6975 shape:
	   icon 50px LEFT of the quote, pad 32, radius 16. */
	.apls-testimonials .splide__slide--clone {
		display: none !important;
	}
	.apls-testimonials .splide {
		padding: 0 20px !important;
	}
	.apls-testimonials .splide__slide > .wp-block-group {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 31px !important;
		padding: 32px !important;
		border-radius: 16px;
		min-height: 0 !important; /* inline 290px is desktop card equalization */
	}
	.apls-testimonials .splide__slide .is-vertical {
		min-height: 0 !important;
		gap: 8px !important;
	}
	.apls-testimonials h2 {
		margin-bottom: 16px !important; /* + carousel mt 24 = the artboard's 40 */
	}
	.apls-testimonials .splide__slide p.has-text-align-right {
		font-size: 16px !important;
		line-height: 24px !important;
	}
	.wp-block-cover.apls-testimonials {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
	.apls-testimonials .splide__slide .wp-block-image {
		flex: 0 0 50px;
	}
	.apls-testimonials .splide__slide .wp-block-image img {
		width: 50px !important;
		height: auto !important;
	}
	.apls-testimonials .splide__slide .is-vertical {
		flex: 1 1 auto;
		min-width: 0;
	}
	.apls-testimonials .splide__arrows,
	.apls-testimonials .splide__pagination {
		display: none !important;
	}
	.apls-footer {
		padding-top: 24px !important; /* artboard 33167:9247 pad-top (was 40 in round 1) */
	}
}

/* @kindling:keep:end */

/* WHY: the <768 block pins the Insights post grid to 1fr 1fr; above it the core
   block's own auto-fill minmax(~380px,1fr) takes over, and at 768 the 704px
   container fits only ONE track — so the grid rendered 2-up on phone, 1-up on
   iPad portrait, then 2-up again at 900. Non-monotonic, and invisible to the
   overflow matrix because a 1-column grid overflows nothing. Pin 2 columns
   across the tablet band only; 1200+ still resolves to 3 on its own.
   Audit 2026-08-07 D4. */
@media (min-width: 768px) and (max-width: 1199px) {
	.apls-post-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* WHY: the :active pill inverts to navy, so the masked arrow has to invert too. */
.apls-contact-form .gform_wrapper button[type="submit"]:active::after {
	background-color: var(--wp--preset--color--theme-01) !important;
}

/* WHY: Figma 33109:8304 renders the contact email + phone as plain body text —
   sampled rgb(50,50,50) over white, i.e. exactly rgba(0,0,0,.8), the same ink as
   the office address beside them. They were inheriting the global link style
   (brand blue #006EB8 + underline) purely because they are <a> elements.
   NOTE: the office address <p> next to them currently computes pure #000, where
   Figma has it at the same .8 — left alone because only email/phone were in
   scope; one selector away if that should match too. */
.apls-contact-section p a[href^="mailto"],
.apls-contact-section p a[href^="tel"] {
	color: rgba(0, 0, 0, 0.8);
	text-decoration: none;
}
/* keep a pointer/keyboard affordance even though the rest state is undecorated */
.apls-contact-section p a[href^="mailto"]:hover,
.apls-contact-section p a[href^="tel"]:hover,
.apls-contact-section p a[href^="mailto"]:focus-visible,
.apls-contact-section p a[href^="tel"]:focus-visible {
	text-decoration: underline;
}

/* ============ Certification page QA vs Figma 33192:1524 (2026-08-07) ============ */

/* Spec pill 33194:1530 is a FIXED 1026px rounded rect, not a fluid pill. Radius,
   padding and 25px type are block attributes (scripts/certification-qa.php);
   only the width has to live here. */
.apls-cert-pill {
	/* width, NOT max-width: the pill is a flex item in an
	   is-content-justification-center row, so it shrink-wraps its text and a
	   max-width alone left it at 968. */
	width: 1026px;
	max-width: 100%;
	margin-inline: auto;
	/* the `large` preset carries lh 1.5; Headline S is 1.2, which is what makes
	   the bar 78 tall (24 + 30 + 24) instead of 86. */
	line-height: 1.2;
}

/* Course-detail squares 33199:2008 are 371x283 in a centred 2x2, with the copy
   centred inside. Built as 536x187 two-up, left-aligned. The grid columns come
   from the block's grid layout, so they need overriding at the parent; :has()
   avoids having to add a class to a block that has none. */
.apls-cert-card {
	min-height: 283px;
	text-align: center;
	justify-content: center;
}
/* the 371px pair is a DESKTOP fact — 371*2 + 32 = 774, so below ~900 it has to
   go back to fluid or the page scrolls sideways (it did: 602px scrollWidth at
   430). Figma has no mobile artboard for this page. */
@media (min-width: 900px) {
	.wp-block-group.is-layout-grid:has(> .apls-cert-card) {
		grid-template-columns: 371px 371px;
		justify-content: center;
		gap: 32px;
	}
}

/* "Things to know" accordion 33199:2127: heading is Headline XS (19px), not the
   25px `large` the theme.json accordion rule applies; body is 16/1.7 at
   rgba(0,0,0,.7); every row is separated by a hairline, including one ABOVE the
   first (core/details only gives us a bottom border). */
.apls-accordion summary {
	font-size: 19px;
}
.apls-accordion .wp-block-details p {
	font-size: 16px;
	line-height: 1.7;
	color: rgba(0, 0, 0, 0.7);
}
.apls-accordion .wp-block-details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--theme-07);
}

/* Accreditation badges 33199:2175 — the row is 1078 wide overall: four logos at
   282/232/234/219 with a 37px gutter between each (967 + 3x37 = 1078). Widths
   are block attributes; only the gutter is here. */
.wp-block-group.is-content-justification-center:has(> figure img[src*="badge-shrm"]) {
	gap: 37px;
}

/* "Things to know" split is 513 / 698 with a 70px gutter in the artboard
   (33199:2084); the section was built on the shared --even variant, which is a
   symmetric 587/587. Scoped to this section so the other --even splits are
   untouched. */
@media (min-width: 1024px) {
	.apls-things-to-know .apls-split-grid {
		grid-template-columns: 513px minmax(0, 1fr);
		gap: 70px;
	}
}

/* WHY: mobile overlay rebuilt against Figma "Mobile Nav" 33167:9246 (Alex, 2026-08-07)
   after a 430 measure showed the built version had drifted badly from the artboard:
     - items were RIGHT-aligned; the design stacks them LEFT (`items-start`)
     - zero side gutter. Core derives the overlay's padding from
       `--wp--style--root--padding-*`, and this theme keeps root padding at 0 (Kindling
       pads per section), so every link AND the close X sat flush at x=430. Design is
       px-30 / py-36, so set it explicitly rather than moving root padding globally.
     - links rendered at 14px; the design's "Headline/headline S" is 25px/1.2 #f0efe9
     - the overlay had no logo; the artboard puts the white mark top-left, opposite
       the close X, with 40px down to the link list
     - the desktop dropdown's `color:#111` leaked into the overlay, where core forces
       the submenu panel transparent -> "Our Clients" / "Suite of Products" /
       "Certification" rendered near-black on navy (~1.3:1) and were effectively
       invisible. This is the one genuine a11y defect of the set.
   Everything is scoped to `.is-menu-open`, so the desktop inline nav and the footer
   (which share wp_navigation 39) are untouched. Logo URL is root-relative so it
   survives the staging domain change (Rule 21). */
.apls-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 36px 30px;
}
/* !important throughout this block: core ships equal-specificity rules for the open
   overlay (align, gap, and a 56px content padding-top) that otherwise win on order. */
.apls-header .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	padding-top: 0 !important;
	gap: 40px !important;
}
/* The artboard's top row: white mark left, close X right. Rendered as a ::before so
   no markup change is needed and nothing leaks into the desktop nav or the footer. */
.apls-header .is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "";
	display: block;
	flex: none;
	width: 186px;
	height: 72.63px;
	background: url("/wp-content/uploads/2026/08/apls-logo-white.svg") no-repeat left center / contain;
}
/* 0/0, not 36/30: the close button's containing block is the responsive-dialog,
   which already sits inside the container's padding, so repeating the gutter here
   double-counted it and parked the X 60px in from the corner. */
.apls-header .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
}
.apls-header .is-menu-open ul.wp-block-navigation__container {
	align-items: flex-start !important;
	gap: 24px !important;
	width: 100%;
}
/* Each overlay li is itself a flex column inheriting `align-items:flex-end` from the
   header nav's right-justification - that, not any text-align, is what shoved the
   links and the whole submenu panel against the viewport edge. */
.apls-header .is-menu-open ul.wp-block-navigation__container > li {
	align-items: flex-start !important;
	width: 100%;
	margin: 0;
	padding: 0;
}
/* Headline/headline S — 25px, 1.2, #f0efe9, the 8px indent off the artboard's `pl-8`. */
.apls-header .is-menu-open ul.wp-block-navigation__container > li > .wp-block-navigation-item__content {
	font-size: 25px;
	line-height: 1.2;
	color: #f0efe9;
	padding-left: 8px;
}
/* Parent rows run full width so the chevron parks at the right edge (33153:6389). */
.apls-header .is-menu-open ul.wp-block-navigation__container > li.has-child {
	width: 100%;
}
.apls-header .is-menu-open ul.wp-block-navigation__container > li.has-child > .wp-block-navigation-submenu__toggle,
.apls-header .is-menu-open ul.wp-block-navigation__container > li.has-child > .wp-block-navigation-item__content {
	width: 100%;
	justify-content: space-between;
}
/* The a11y fix: children inherit the overlay's ink, not the white dropdown's black.
   Higher specificity than the desktop panel rule above, and scoped to the open
   overlay so the desktop dropdown keeps its black-on-white treatment. Core pins the
   panel `position:static` in the overlay, so these are always expanded - the artboard
   shows them collapsed behind the chevron, which would need `openSubmenusOnClick`
   and would change desktop from hover to click. Left expanded deliberately; the size
   step is inferred (the artboard has no open-state spec). */
.apls-header .is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	width: 100% !important;
	min-width: 0 !important;
	padding: 8px 0 0 !important;
	gap: 8px;
}
.apls-header .is-menu-open .wp-block-navigation__submenu-container > li {
	align-items: flex-start !important;
	width: 100%;
	margin: 0;
	padding: 0;
}
.apls-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #f0efe9 !important;
	font-size: 19px;
	line-height: 1.2;
	padding: 0 0 0 24px;
}
/* CONTACT is the artboard's white "simple button" (33153:6373) - same 123x33 pl-20
   pill as .apls-cta--inverse, left-aligned at the foot of the stack. */
/* Selector carries `ul ... > li.apls-nav-contact` so it outranks the 25px headline
   rule above, which would otherwise win on specificity and blow the pill up. */
.apls-header .is-menu-open ul.wp-block-navigation__container > li.apls-nav-contact > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 33px;
	padding: 0 0 0 20px;
	font-size: 14px;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.apls-header .is-menu-open ul.wp-block-navigation__container > li.apls-nav-contact {
	width: auto;
}
.apls-header .is-menu-open .apls-nav-contact .wp-block-navigation-item__content::after {
	content: "";
	display: inline-block;
	flex: none;
	width: 33px;
	height: 33px;
	margin-left: 4px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018.2576%2018.2576'%20fill='none'%3E%3Cpath%20d='M1.1411%209.12881H17.1165M9.12881%2017.1165L17.1165%209.12881L9.12881%201.1411'%20stroke='black'%20stroke-width='2.2822'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18.26px 18.26px;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018.2576%2018.2576'%20fill='none'%3E%3Cpath%20d='M1.1411%209.12881H17.1165M9.12881%2017.1165L17.1165%209.12881L9.12881%201.1411'%20stroke='black'%20stroke-width='2.2822'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18.26px 18.26px;
}

/* WHY: mobile nav bar, Figma 33167:9248 — the artboard puts the logo at x=20 and the
   MENU toggle's right edge at 410, i.e. a 20px page gutter. The header group ships
   32px, which is right for the wide layouts, so narrow the gutter on phones only. */
@media (max-width: 600px) {
	.apls-header {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* WHY: mobile footer nav, Figma 33167:9247 — the artboard left-aligns the link list
   with the logo, socials and NEWSLETTER SIGNUP, but it was rendering centred. Cause is
   the same family as the LDT constrained-layout trap: `.apls-footer-cols` is a grid and
   WP hands a flex-layout child with no explicit justification `justify-self:center`, so
   the shrink-to-fit nav floated to the middle of its cell while every sibling group
   filled the full column. Scoped under the 781px stack breakpoint so the multi-column
   desktop footer keeps its own alignment. */
@media (max-width: 781px) {
	.apls-footer .apls-footer-cols > .wp-block-navigation {
		justify-self: start;
	}
}

/* WHY: footer legal row (Privacy / Cookie / Terms) rendered brand blue + underlined
   purely because they are bare <a> elements inheriting the global link style, where
   Amanda's footer artboard 33167:9247 shows plain dark text. Same default-link-blue
   leak already fixed on the Contact page's email/phone, so matched to that treatment
   (rgba(0,0,0,.8)). Hook class added by scripts/footer-legal-links.php rather than
   selecting on /privacy-policy/ etc, so a slug change cannot silently un-style it. */
.apls-footer-legal p a {
	color: rgba(0, 0, 0, 0.8);
	text-decoration: none;
}
/* keep a pointer/keyboard affordance even though the rest state is undecorated */
.apls-footer-legal p a:hover,
.apls-footer-legal p a:focus-visible {
	text-decoration: underline;
}