/* == partial: tokens == */
/* Sec 5.2 alias layer - every alias resolves to a theme.json preset. */
:root {
	--elx-ink: var(--wp--preset--color--ink);
	--elx-navy: var(--wp--preset--color--navy);
	--elx-slate: var(--wp--preset--color--slate);
	--elx-green: var(--wp--preset--color--green);
	--elx-green-deep: var(--wp--preset--color--green-deep);
	--elx-white: var(--wp--preset--color--white);
	--elx-surface: var(--wp--preset--color--surface);
	--elx-divider: var(--wp--preset--color--divider);
	/* Sec 3.3 - the ONE gutter mechanism. Literal values only inside min(). */
	--wp--style--global--content-size: min(1210px, 100vw - 3rem) !important;
	--wp--style--global--wide-size: min(1210px, 100vw - 3rem) !important;
	--elx-block-gap: clamp(0.85rem, 2vw, 1.25rem);
}

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

/* Double ring (ruling R2): ink ring + white halo is visible on white and on dark bands (green on white is 2.16:1). */
:focus-visible { outline: 2px solid var(--elx-ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--elx-white); }

@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;
	}
}
/* == partial: blocks == */
/* Sec 3.5 flow-content rhythm - blockGap does not reach plain flow. */
:where(h1, h2, h3, h4, h5, h6, p, ul, ol) { margin-block: 0; }
:is(h1, h2, h3, h4, h5, h6, p, ul, ol) + :is(h1, h2, h3, h4, h5, h6, p, ul, ol) { margin-block-start: var(--elx-block-gap); }

/* Bands (sections). Vertical rhythm comes from --elx-section-pad (site.css owns the value;
   the editor gets the fallback). */
.elx-band { padding-block: var(--elx-section-pad, 3.125rem); }
.elx-band--navy { background-color: var(--elx-navy); color: var(--elx-white); }
.elx-band--slate { background-color: var(--elx-slate); color: var(--elx-white); }
.elx-band--ink { background-color: var(--elx-ink); color: var(--elx-white); }
.elx-band--navy a, .elx-band--slate a, .elx-band--ink a { color: var(--elx-green); }

/* Buttons - two classes to clear WP's (0,1,0) global-styles tie (Sec 5.7.6).
   Label is ink on green: white on green measures 2.16:1 (fails AA). */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-element-button {
	background-color: var(--elx-green);
	color: var(--elx-ink);
	border: 0;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-element-button:hover {
	background-color: var(--elx-ink);
	color: var(--elx-green);
	box-shadow: inset 0 0 0 2px var(--elx-green); /* keyline so the hover never dissolves on an ink band (#44) */
}
/* Focus keeps the hover look but must retain the R2 white halo, or the ring vanishes on dark bands. */
.wp-block-button .wp-block-button__link:focus-visible,
.wp-block-button .wp-element-button:focus-visible {
	background-color: var(--elx-ink);
	color: var(--elx-green);
	outline: 2px solid var(--elx-ink);
	outline-offset: 2px;
	box-shadow: inset 0 0 0 2px var(--elx-green), 0 0 0 4px var(--elx-white);
}

/* Boxed page title (inner-page hero) - live: 34px/300 white on ink, 2.4px green border, pad 10px 50px. */
.elx-boxed-title {
	display: inline-block;
	margin-inline: auto;
	padding: 10px 50px;
	background-color: var(--elx-ink);
	color: var(--elx-white);
	border: 2.4px solid var(--elx-green);
}

/* "What we do" cards - live: surface bg, radius 3px, pad 45/20/20, faint shadow, green round icon badge. */
.elx-card {
	position: relative;
	background-color: var(--elx-surface);
	border-radius: 3px;
	padding: 45px 20px 20px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
	text-align: center;
	color: var(--elx-ink);
}
.elx-card .elx-card__icon {
	position: absolute;
	inset-block-start: -26px;
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: 53px;
	block-size: 53px;
	border-radius: 50%;
	background-color: var(--elx-green);
	color: var(--elx-white); /* icon paths are fill=currentColor, so colour (not fill) drives the glyph */
	display: grid;
	place-items: center;
}
.elx-card .elx-card__icon svg { inline-size: 22px; block-size: 22px; }
.elx-card h3 { font-size: var(--wp--preset--font-size--md); font-weight: 600; }
/* Card title link: heading colour, no resting underline, underline on hover/focus. The whole-card overlay, lift and ring are
   front-end only (site.css) so the editor canvas keeps normal card selection. */
.elx-card h3 a, .elx-card h3 a:hover { color: inherit; text-decoration: none; }
.elx-card h3 a:hover, .elx-card h3 a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

/* Client logos - greyscale (live quick CSS). Marquee motion is shell (site.css). */
.elx-logos img { filter: grayscale(100%); max-block-size: 70px; inline-size: auto; object-fit: contain; }

/* Contact icon list. */
.elx-contact-item { display: grid; grid-template-columns: 54px 1fr; gap: 1rem; align-items: center; margin-block-end: 1.25rem; }
.elx-contact-item .elx-contact-item__icon { inline-size: 54px; block-size: 54px; border-radius: 50%; background-color: var(--elx-ink); color: var(--elx-white); display: grid; place-items: center; }
.elx-contact-item .elx-contact-item__icon svg { inline-size: 22px; block-size: 22px; }
.elx-contact-item .elx-contact-item__label { color: var(--elx-green-deep); font-weight: 600; }

/* Gravity Forms (Sec 13.1). The live form uses the LEGACY theme (.gform_wrapper.gravity-theme.gform-theme--no-framework);
   2.7+ framework markup is covered too. Fields: visible 1px slate boundary (7.56:1 on white, WCAG 1.4.11). Specificity:
   .gform_wrapper.gform_wrapper .gfield <type> = (0,4,1) vs GF legacy `.gform_wrapper.gravity-theme input[type=text]` (0,3,1)
   and framework `.gform-theme--framework input[type=text]` (0,2,1); border/background carry !important because GF's reset
   zeroes them. The global :focus-visible ring is left alone (no outline rule here), so GF cannot remove it. */
.gform_wrapper.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="search"], :not([type])),
.gform_wrapper.gform_wrapper .gfield textarea,
.gform_wrapper.gform_wrapper .gfield select {
	inline-size: 100%;
	box-sizing: border-box;
	border: 1px solid var(--elx-slate) !important;
	border-radius: 0 !important;
	background-color: var(--elx-white) !important;
	color: var(--elx-ink);
	padding: 0.6rem 0.75rem !important;
	font: inherit;
}
/* Submit: GF 2.7+ framework renders <button>, the legacy theme <input class="gform_button button">, and it is not reliably
   inside .gform_footer, so cover all three non-footer + footer variants. (0,2,1)/(0,3,1) + !important beats GF's
   `.gform_wrapper.gravity-theme .gform_footer input[type=submit]` (0,3,1) non-important rules. */
.gform_wrapper.gform_wrapper button[type="submit"],
.gform_wrapper.gform_wrapper input[type="submit"],
.gform_wrapper.gform_wrapper .gform_button,
.gform_wrapper.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper.gform_wrapper .gform_page_footer input[type="submit"] {
	background-color: var(--elx-green) !important;
	color: var(--elx-ink) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--montserrat) !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	padding: 15px 30px 13px !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.gform_wrapper.gform_wrapper button[type="submit"]:hover,
.gform_wrapper.gform_wrapper input[type="submit"]:hover,
.gform_wrapper.gform_wrapper .gform_button:hover,
.gform_wrapper.gform_wrapper button[type="submit"]:focus-visible,
.gform_wrapper.gform_wrapper input[type="submit"]:focus-visible,
.gform_wrapper.gform_wrapper .gform_button:focus-visible {
	background-color: var(--elx-ink) !important;
	color: var(--elx-green) !important;
	box-shadow: inset 0 0 0 2px var(--elx-green) !important; /* keyline so hover never dissolves on ink (#44) */
}
.gform_wrapper.gform_wrapper button[type="submit"]:focus-visible,
.gform_wrapper.gform_wrapper input[type="submit"]:focus-visible,
.gform_wrapper.gform_wrapper .gform_button:focus-visible {
	outline: 2px solid var(--elx-ink);
	outline-offset: 2px;
	box-shadow: inset 0 0 0 2px var(--elx-green), 0 0 0 4px var(--elx-white) !important; /* R2 halo */
}
.gform_required_legend { display: none !important; }

/* Inner-page hero (Sec 6.4) - live 433px, green 2px rule at the bottom, boxed title straddling it. */
.wp-block-cover.page-hero { min-height: 433px !important; border-block-end: 2px solid var(--elx-green); }
/* R4 (Sec 6.4): no featured image = the hero collapses; the title clears the header instead of straddling nothing. */
.wp-block-cover.page-hero:not(:has(.wp-block-cover__image-background)) { display: none; }
/* Two classes (0,2,0+) so the straddle margin beats the flush chain's single-class margin reset. */
.wp-block-cover.page-hero + .page-title-wrap { margin-block-start: -40px !important; position: relative; z-index: 1; }
.wp-block-cover.page-hero:not(:has(.wp-block-cover__image-background)) + .page-title-wrap { margin-block-start: var(--elx-section-pad, 3.125rem) !important; }
@media (max-width: 640px) { .elx-boxed-title { padding: 10px 15px; } }

/* Blog cards (Sec 14.1) - one card for the blog page, archives and search. Context-free (no page-shell selectors), so the editor canvas gets it too.
   Every margin/spacing rule is two classes (0,2,0+) because core's flow/constrained layout injection (0,1,0) ties a single class and wins on source order.
   Grid: 18rem minimum column reflows 3 -> 2 -> 1; the li is a flex row so the card fills the grid cell and the excerpt can push "Read article" to the card bottom. */
.wp-block-query .wp-block-post-template.is-layout-grid { gap: 3rem 2rem; }
.wp-block-post-template.is-layout-grid > .wp-block-post { display: flex; margin: 0; min-inline-size: 0; }
.wp-block-post-template > .wp-block-post > .elx-blog-card { display: flex !important; flex-direction: column !important; flex: 1 1 auto; inline-size: 100%; max-inline-size: none; min-inline-size: 0; margin: 0 !important; }
/* The card is a constrained group, whose layout gives every child margin-inline:auto !important + a content-size cap;
   in a column flex container auto inline margins stop cross-axis stretch, which shrank + centred the date (owner review).
   Two classes + !important beat the layout rules. */
.elx-blog-card.elx-blog-card > * { margin-block: 0 !important; margin-inline: 0 !important; max-inline-size: none !important; align-self: stretch; }
.elx-blog-card .wp-block-post-featured-image { overflow: hidden; aspect-ratio: 3 / 2; }
.elx-blog-card .wp-block-post-featured-image a { display: block; inline-size: 100%; block-size: 100%; }
.elx-blog-card .wp-block-post-featured-image img { display: block; inline-size: 100%; block-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
	.elx-blog-card .wp-block-post-featured-image img { transition: transform 0.35s ease; }
	.elx-blog-card:hover .wp-block-post-featured-image img { transform: scale(1.04); }
}
.elx-blog-card > .wp-block-post-date { margin-block-start: 1rem !important; text-align: left; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.04em; color: var(--elx-slate); }
.elx-blog-card > .wp-block-post-title { margin-block-start: 0.35rem !important; font-size: var(--wp--preset--font-size--md); font-weight: 600; line-height: 1.3; text-align: left; }
.elx-blog-card > .wp-block-post-title a { text-decoration: none; }
.elx-blog-card > .wp-block-post-title a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 0.2em; }
.elx-blog-card > .wp-block-post-excerpt { flex: 1 1 auto; display: flex; flex-direction: column; margin-block-start: 0.6rem !important; text-align: left; }
.elx-blog-card .wp-block-post-excerpt__excerpt { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.elx-blog-card .wp-block-post-excerpt__more-text { margin: auto 0 0; padding-block-start: 1rem; }
.elx-blog-card .wp-block-post-excerpt__more-link { display: inline-block; }

/* Single post (owner request 2026-10-13). Readable ~46rem column: the .elx-post group is constrained with contentSize 46rem INSIDE the
   .elx-band group, so the Sec 3.3 min() override still owns the side gutters (the band's child is capped at min(1210px, 100vw - 3rem);
   46rem only narrows its children). Section pad stays on .elx-band. Every margin rule is two+ classes (core flow/constrained injection is (0,1,0)).
   Title: xl preset (34px), weight 400 (site headings are 300 - one step heavier reads as an article headline, same family), line-height 1.2. */
.elx-post.elx-post > .elx-post-back { margin-block: 0 1.5rem; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.04em; }
.elx-post-back a { display: inline-block; padding-block: 0.25rem; color: var(--elx-green-deep); text-decoration: none; }
.elx-post-back a::before { content: "\2190"; content: "\2190" / ""; display: inline-block; margin-inline-end: 0.45em; }
.elx-post-back a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 0.2em; }
.elx-post.elx-post > .elx-post-title { margin-block: 0 0.5rem; font-weight: 400; line-height: 1.2; }
.elx-post.elx-post > .elx-post-meta { margin-block: 0 1.5rem; padding-block-end: 1.5rem; border-block-end: 1px solid var(--elx-divider); font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.04em; color: var(--elx-slate); }
.elx-post.elx-post > .elx-post-image { margin-block: 0 1.5rem; }
/* Never upscale (ruling): a small original stays its natural size, centred; tall images are capped at 40rem (a 4:3 landscape fills the 46rem column: 736x552). */
.elx-post-image img { display: block; inline-size: auto; max-inline-size: 100%; block-size: auto; max-block-size: 40rem; margin-inline: auto; object-fit: cover; }
.elx-post.elx-post > .elx-post-content { margin-block: 0; line-height: 1.7; }
.elx-post .elx-post-content > :is(h2, h3, h4) { margin-block-start: 2rem; }
.elx-post .elx-post-content img { max-inline-size: 100%; block-size: auto; }
.elx-post .elx-post-content > :is(figure, .wp-caption, p:has(> img:only-child)) { margin-block: 1.5rem; max-inline-size: 100%; }
.elx-post .elx-post-content figcaption, .elx-post .elx-post-content .wp-caption-text { margin-block-start: 0.5rem; font-size: var(--wp--preset--font-size--xs); color: var(--elx-slate); text-align: center; }
.elx-post .elx-post-content :is(ul, ol) { padding-inline-start: 1.25rem; }
.elx-post .elx-post-content :is(iframe, video, table) { max-inline-size: 100%; }
/* Footer: divider, prev/next row (2 cols, stacks on mobile), then the "All news" link. */
.elx-post.elx-post > .elx-post-footer { margin-block: 2.5rem 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--elx-divider); }
.elx-post-footer.elx-post-footer > * { margin-block: 0; max-inline-size: none; }
.elx-post-footer.elx-post-footer > .elx-post-back--all { margin-block-start: 1.5rem; text-align: center; }
.elx-post-nav.elx-post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.elx-post-nav .wp-block-post-navigation-link { flex: 0 1 calc(50% - 0.75rem); min-inline-size: 0; margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 0.45rem; align-items: start; font-size: var(--wp--preset--font-size--sm); }
.elx-post-nav .post-navigation-link-next { grid-template-columns: 1fr auto; margin-inline-start: auto; text-align: end; }
.elx-post-nav .wp-block-post-navigation-link a { text-decoration: none; font-weight: 600; }
.elx-post-nav .wp-block-post-navigation-link a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 0.2em; }
.elx-post-nav .post-navigation-link__label { display: block; margin-block-end: 0.15rem; font-size: var(--wp--preset--font-size--xs); font-weight: 400; letter-spacing: 0.04em; color: var(--elx-slate); }
@media (max-width: 600px) {
	.elx-post-nav.elx-post-nav { flex-direction: column; }
	.elx-post-nav .wp-block-post-navigation-link { flex-basis: auto; inline-size: 100%; }
}

/* Home hero (Task 7) - title strip: a FULL-WIDTH translucent band flush under the header, text centred (live: ~75px at 1440).
   R5: color-mix is the sanctioned alpha form. Core's cover padding (1em), the constrained inner container and the constrained
   child's content-size max-width all tie or beat one class, so every rule is two classes (0,2,0+). The cover's min-height is untouched. */
.wp-block-cover.elx-home-hero { padding: 0; }
.elx-home-hero .wp-block-cover__inner-container { inline-size: 100%; max-inline-size: none; padding: 0; }
.wp-block-cover.elx-home-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container { inline-size: 100%; margin-inline: 0; }
.elx-home-hero .elx-home-hero__title { max-inline-size: none; margin-inline: 0 !important; margin-block: 0; background-color: color-mix(in srgb, var(--elx-ink) 60%, transparent); color: var(--elx-white); padding: 10px; line-height: 1.65; }
/* Owner review 2026-10-13: on phones the 34px / 1.65 strip ran ~188px tall (3 lines). Smaller type + tighter rhythm = ~73px, 2 lines. */
@media (max-width: 767px) { .elx-home-hero .elx-home-hero__title { font-size: 1.25rem; line-height: 1.35; padding: 0.6rem 1rem; } }

/* Voice band - left-aligned copy column. Core's constrained auto margins are !important, so use the inset
   formula (content area left edge) with !important (fse-narrow-block-left-align-formula). */
.elx-voice { background-image: var(--elx-voice-bg, none); background-repeat: no-repeat; background-position: right bottom; }
.elx-voice.elx-band > * { max-inline-size: 960px; margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; margin-inline-end: auto !important; }

/* Services + clients. */
.elx-services .elx-cards { gap: 50px 30px; margin-block-start: 3rem; }
.elx-clients .elx-clients__title { font-size: 1.25rem; font-weight: 300; }

/* YouTube click-to-load facade */
.elx-yt { position: relative; display: block; inline-size: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; background: var(--elx-ink); }
.elx-yt img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.elx-yt__play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; inline-size: 68px; block-size: 48px; border-radius: 12px; background: var(--elx-green); }
.elx-yt__play::after { content: ""; position: absolute; inset: 50% auto auto 54%; translate: -50% -50%; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--elx-ink); }
.elx-yt-wrap iframe { inline-size: 100%; aspect-ratio: 16 / 9; block-size: auto; border: 0; }

/* Visually-hidden utility (core's .screen-reader-text is not guaranteed on the front end of a block theme). Used by the
   listing template's h1 and the skip link (site.css restyles the skip link on :focus). */
.screen-reader-text:not(:focus):not(:focus-within) { clip-path: inset(50%); position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; margin: -1px; padding: 0; border: 0; white-space: nowrap; }
/* == partial: site == */
/* Sec 3.3 companions */
.alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.wp-site-blocks { overflow-x: clip; }

/* Sec 3.4 section rhythm - plain custom property, one responsive step. Live: 50px. */
.wp-site-blocks { --elx-section-pad: 3.125rem; }
@media (max-width: 640px) { .wp-site-blocks { --elx-section-pad: 2.5rem; } }

/* Sec 4.7 flush chain - margins only. */
.site-main { margin-block: 0 !important; padding-block: 0 !important; }
.site-main > .wp-block-post-content { margin-block: 0 !important; padding-block: 0 !important; }
.site-main > .wp-block-post-content > :first-child { margin-block-start: 0 !important; }
.site-main > .wp-block-post-content > :last-child { margin-block-end: 0 !important; }
/* Stacked full-bleed sections in post_content: core blockGap ((0,1,0) `:where(.is-layout-constrained) > * + *`)
   would otherwise open 14-20px white strips between them (home hero/voice/services, video cover/band). */
.site-main > .wp-block-post-content > :is(.alignfull, .alignfull + *) { margin-block-start: 0 !important; }
.site-main > * { margin-block: 0 !important; }
.wp-site-blocks > * { margin-block: 0 !important; }
.is-flush-header { padding-block-start: 0 !important; }
.is-flush-footer { padding-block-end: 0 !important; }

/* Sec 4.3 skip-link companion + branding */
.wp-site-blocks > header.wp-block-template-part, .wp-site-blocks > main { margin-block-start: 0 !important; }
a.skip-link.screen-reader-text:focus {
	clip: auto; clip-path: none; height: auto; width: auto; display: block;
	background: var(--elx-green); color: var(--elx-ink);
	font-weight: 700; left: 1rem; top: 1rem; padding: 0.75rem 1.25rem; text-decoration: none; z-index: 100001;
}

/* Client logo marquee (motion = shell; reduced-motion stops it via tokens.css). Hover/focus pauses it.
   Exactly N logos span the viewport (container query on the marquee): every figure is a fixed 1/N of the container, so each
   half of the doubled set (16 figures) is the same width and the -50% loop is seamless. Core's gallery rules carry a
   :not(#individual-image) id-weight selector, so width/flex/object-fit here are !important. Time-per-logo is constant
   (60s per 16 logos = 3.75s each); speed in px scales with the figure width. The animation runs ONLY on
   .elx-logos--looped, which inc/logo-marquee.php adds when the duplicate set exists - if the transform bails, the strip
   stays static instead of scrolling into blank space. */
.elx-logos--marquee { --elx-logos-n: 6; overflow: hidden; container-type: inline-size; }
.elx-logos--marquee > .wp-block-gallery { flex-wrap: nowrap !important; gap: 0 !important; inline-size: max-content; }
.elx-logos--marquee > .wp-block-gallery.elx-logos--looped { will-change: transform; animation: elx-marquee 60s linear infinite; }
.elx-logos--marquee:hover > .wp-block-gallery.elx-logos--looped, .elx-logos--marquee:focus-within > .wp-block-gallery.elx-logos--looped { animation-play-state: paused; }
.elx-logos--marquee .wp-block-gallery figure.wp-block-image { flex: 0 0 auto !important; inline-size: calc(100cqi / var(--elx-logos-n)) !important; width: calc(100cqi / var(--elx-logos-n)) !important; margin: 0 !important; padding: 0; display: flex; align-items: center; justify-content: center; }
.elx-logos--marquee .wp-block-gallery figure.wp-block-image img { flex: 0 1 auto !important; inline-size: auto !important; width: auto !important; block-size: auto !important; height: auto !important; max-inline-size: 80%; max-block-size: 70px; object-fit: contain !important; }
@media (max-width: 1023px) { .elx-logos--marquee { --elx-logos-n: 4; } }
@media (max-width: 767px) { .elx-logos--marquee { --elx-logos-n: 3; } }
@keyframes elx-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* == Header (Task 4). Sec 4.2 fixed header. Live: 118px, ink, logo 253x116 left, nav + socials right. Shrunk 60px (measured live 2026-10-13). == */
.wp-site-blocks { padding-top: var(--header-height, 118px); }
.site-header {
	position: fixed !important;
	top: var(--wp-admin--admin-bar--height, 0px) !important;
	left: 0 !important; right: 0 !important;
	width: 100%;
	height: 118px;
	z-index: 100;
	background-color: var(--elx-ink);
	transition: height 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-shrunk { height: 60px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
/* site.js measureHeader() adds this while it measures the unshrunk height, so a mid-transition read cannot return 60px (Sec 4.2). */
.site-header.is-measuring, .site-header.is-measuring * { transition: none !important; }
.site-header__inner { max-width: var(--wp--style--global--content-size, 1210px); margin-inline: auto; width: 100%; height: 100%; }
.wp-block-site-logo { flex-shrink: 0; }
.wp-block-site-logo a { display: block; line-height: 0; }
.wp-block-site-logo img { display: block; height: auto; width: 100%; }
/* Literal px heights (measured live): desktop 116 -> 58 shrunk, mobile 80 -> 40. width:auto !important beats any inline width from core. */
.site-header .wp-block-site-logo img { height: 116px; width: auto !important; max-width: none; transition: height 0.3s ease; }
.site-header.is-shrunk .wp-block-site-logo img { height: 58px; }
.site-header .site-header__right { gap: 2.5rem; }
.site-header .wp-block-navigation__container > li > .wp-block-navigation-item__content { color: var(--elx-white); font-size: 15px; padding-inline: 13px; text-decoration: none; }
.site-header .wp-block-navigation__container > li > .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__container > li.current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation__container > li > .wp-block-navigation-item__content[aria-current] { color: var(--elx-green); }
.site-header__social .wp-social-link { color: var(--elx-white); }
/* K1: global ring is ink-on-ink inside the header. (0,2,0) beats tokens.css :focus-visible (0,1,0); the social anchors
   restate the full white ring at (0,3,1) in case core/social-links zeroes outline or box-shadow. */
.site-header :focus-visible { outline-color: var(--elx-white); }
.site-header .wp-social-link a:focus-visible { outline: 2px solid var(--elx-white); outline-offset: 2px; box-shadow: 0 0 0 4px var(--elx-ink); }

/* Desktop dropdown - live: ink panel, 208px, 2px white top keyline, 12px white links, pad 8px 15px, gap -1px (no bridge needed). */
.site-header .wp-block-navigation__submenu-container { background-color: var(--elx-ink) !important; border: 0 !important; border-top: 2px solid var(--elx-white) !important; min-width: 208px !important; }
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--elx-white); font-size: 12px; padding: 8px 15px; }
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--elx-green); }

/* Sec 4.6 drawer - breakpoint 1024 (decision 2026-10-13). */
@media (max-width: 1023px) {
	/* Live mobile header stays 82px when scrolled (only the logo shrinks) - measured 2026-10-13. */
	.wp-site-blocks { padding-top: var(--header-height, 82px); }
	.site-header, .site-header.is-shrunk { height: 82px; }
	.site-header .wp-block-site-logo img { height: 80px; }
	.site-header.is-shrunk .wp-block-site-logo img { height: 40px; }
	.site-header .wp-block-navigation__responsive-container-open { display: flex !important; color: var(--elx-white); }
	.site-header .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.site-header .site-header__social.wp-block-social-links { display: none; }
}
@media (min-width: 1024px) {
	.site-header .wp-block-navigation__responsive-container-open { display: none !important; }
	/* K2 (WCAG 2.5.8): submenu chevron toggle was 10x10; 24x24 hit area, glyph centred, no layout shift beyond ~7px. */
	.site-header .wp-block-navigation-submenu__toggle { min-inline-size: 24px; min-block-size: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
	/* Owner review 2026-10-13: live shows no chevron and no extra gap after "Services". The toggle stays in the tab
	   order (it is the keyboard way to open the panel) but is visually hidden until it has keyboard focus, then
	   appears as a 24x24 chevron just right of the link - out of flow, so the item spacing matches live. */
	.site-header .wp-block-navigation__container > .has-child { position: relative; }
	.site-header .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle { position: absolute; inset-inline-end: -24px; inset-block-start: 50%; transform: translateY(-50%); clip-path: inset(50%); overflow: hidden; }
	.site-header .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle:focus-visible { clip-path: none; color: var(--elx-white); }
	/* Panel geometry = live: LEFT-aligned to the item (core's items-justified-right flips it to right:0, which hung it
	   ~92px left of "Services") and its top on the header's bottom edge in both header states. The nav is vertically
	   centred in a fixed-height header, so from the item's top the header bottom is 50% (half the item) + half the
	   header height. --elx-hdr-h mirrors the literal heights above; the ::before bridge spans the gap so hover holds. */
	.site-header { --elx-hdr-h: 118px; }
	.site-header.is-shrunk { --elx-hdr-h: 60px; }
	.site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container { left: 0 !important; right: auto !important; top: calc(50% + var(--elx-hdr-h) / 2) !important; }
	.site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: calc(var(--elx-hdr-h) / 2 - 12px); } /* 12px = half the 24px item */
	.site-header .wp-block-navigation__responsive-container { display: block; position: static; background: transparent; width: auto; }
}
.site-header .wp-block-navigation__container { flex-wrap: nowrap; }
.site-header .wp-block-navigation__responsive-container-open:hover,
.site-header .wp-block-navigation__responsive-container-open:focus-visible { color: var(--elx-green); }
body:has(.wp-block-navigation__responsive-container.is-menu-open) { overflow: hidden; }
@media (max-width: 1023px) {
	.site-header .wp-block-navigation__responsive-close { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.5) !important; z-index: 9998 !important; }
	body .site-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important;
		background: none !important; z-index: 9998 !important; box-shadow: none !important;
		padding: 0 !important; animation: none !important; overflow: visible !important;
	}
	.site-header .wp-block-navigation__responsive-dialog {
		position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
		width: 320px !important; max-width: 85vw !important; height: 100dvh !important;
		background: var(--elx-ink) !important; z-index: 9999 !important; overflow-y: auto !important;
		padding: var(--header-height, 82px) 1.5rem 2rem !important;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25) !important;
		animation: site-drawer-in 0.25s ease-out !important; display: flex !important; flex-direction: column !important;
	}
	@keyframes site-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
	.site-header .wp-block-navigation__responsive-container-close {
		position: absolute !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important;
		width: 4rem !important; height: var(--header-height, 82px) !important; margin: 0 !important; padding: 0 !important;
		display: flex !important; align-items: center !important; justify-content: center !important;
		z-index: 1 !important; background: transparent !important; border: 0 !important; cursor: pointer !important;
		color: var(--elx-white) !important;
	}
	.site-header .is-menu-open .wp-block-navigation__container {
		flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 0 !important;
		position: static !important; margin: 0 !important; padding: 0 !important; list-style: none;
	}
	.site-header .is-menu-open .wp-block-navigation-item { width: 100% !important; }
	/* Live: Services children always expanded, dash prefix. */
	.site-header .is-menu-open .wp-block-navigation__submenu-container { position: static !important; opacity: 1 !important; visibility: visible !important; width: auto !important; height: auto !important; border: 0 !important; padding-inline-start: 0.75rem !important; padding-top: 0.25rem !important; background: transparent !important; }
	/* Owner review 2026-10-13: tighter drawer - core's 56px content top padding gone; whole menu fits a 812px phone (was 966px). */
	.site-header .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0.5rem !important; gap: 0 !important; }
	.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: flex !important; align-items: baseline; font-size: 0.875rem !important; padding: 0.45rem 0 !important; }
	/* Hanging indent: the dash is a flex item, so a wrapped label lines up under its own first word (owner review 2026-10-13). */
	.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before { content: "- "; color: var(--elx-slate); flex: none; margin-inline-end: 0.3em; }
	.site-header .is-menu-open .wp-block-navigation-submenu__toggle { display: none !important; }
}
.site-header .is-menu-open .wp-block-navigation-item__content {
	display: block !important; width: 100% !important; padding: 0.6rem 0 !important; text-align: left !important;
	color: var(--elx-white) !important; font-size: 1rem !important; line-height: 1.4 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.wp-block-navigation__responsive-dialog :focus-visible, .site-footer :focus-visible { outline-color: var(--elx-white); }

/* Footer - live: ink, 4 cols, green 22.1px/400 headings, white 17px text, news 14.45px. */
.site-footer { color: var(--elx-white); }
.site-footer .site-footer__title { color: var(--elx-green); font-size: 1.38rem; font-weight: 400; }
.site-footer a { color: var(--elx-white); }
.site-footer a:hover { color: var(--elx-green); }
.site-footer .site-footer__news { padding: 0; font-size: 0.9rem; }
/* Each item is a 2-column grid: thumbnail | title above date, both in the text column (long titles wrap there, never under the thumbnail).
   Core floats the thumbnail wrapper (.alignleft) and clears it with li overflow:hidden; both are reset here. */
.site-footer .site-footer__news li { display: grid; grid-template-columns: 36px 1fr; grid-template-areas: "img title" "img date"; column-gap: 0.75rem; align-items: start; margin-block-end: 1rem; overflow: visible; }
.site-footer .site-footer__news li:not(:has(.wp-block-latest-posts__featured-image)) { grid-template-columns: 1fr; grid-template-areas: "title" "date"; }
.site-footer .site-footer__news li .wp-block-latest-posts__featured-image { grid-area: img; float: none; margin: 0; }
.site-footer .site-footer__news li .wp-block-latest-posts__post-title { grid-area: title; }
.site-footer .site-footer__news li .wp-block-latest-posts__post-date { grid-area: date; }
.site-footer .site-footer__news a { color: var(--elx-green); text-decoration: none; }
.site-footer .site-footer__news a:hover, .site-footer .site-footer__news a:focus-visible { text-decoration: underline; }
.site-footer .site-footer__news time { display: block; color: var(--elx-divider); font-size: 0.8rem; }
/* Socket - live: green bar, 11px. Text is ink (white on green = 2.16:1, fails AA). */
.elx-socket { background-color: var(--elx-green); color: var(--elx-ink); font-size: var(--wp--preset--font-size--xs); padding-block: 0.9rem; }
.elx-socket a, .elx-socket .wp-social-link { color: var(--elx-ink); }

/* Whole-card clickable (front end only): the title link's ::after stretches over the card (the icon badge sits inside it).
   Hover/focus lift the card; the card shows the focus ring, so the link's own is off. Colour/underline live in blocks.css. */
.elx-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.elx-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.elx-card:hover, .elx-card:has(h3 a:focus-visible) { transform: translateY(-3px); box-shadow: 0 8px 20px color-mix(in srgb, var(--elx-ink) 35%, transparent); }
.elx-card h3 a:focus-visible { outline: 0; box-shadow: none; }
.elx-card:has(h3 a:focus-visible) { outline: 2px solid var(--elx-ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--elx-white); }

/* Voice band background decoration (path relative to compiled assets/css/style.css). */
.elx-voice { --elx-voice-bg: url("../img/elexiabg.png"); }
/* Hero background video pause control (WCAG 2.2.2): JS-injected button, bottom-right corner of the cover, above the inner container. Not hidden under reduced motion - the visitor may choose to play. */
.wp-block-cover .elx-video-toggle {
	position: absolute; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 3;
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 2.5rem; block-size: 2.5rem; min-inline-size: 24px; min-block-size: 24px; padding: 0;
	border: 0; border-radius: 50%; cursor: pointer;
	background-color: color-mix(in srgb, var(--elx-ink) 70%, transparent); color: var(--elx-white);
}
.wp-block-cover .elx-video-toggle:hover { background-color: var(--elx-ink); }
.wp-block-cover .elx-video-toggle:focus-visible { outline: 2px solid var(--elx-white); outline-offset: 2px; box-shadow: 0 0 0 4px var(--elx-ink); }