/* =========================================================
   Xenel theme — component styles
   Brand tokens come from theme.json (--wp--preset--color--*).
   Sector tokens come from Xenel Core (--xenel-sector-1..4, --xenel-sector-ink).
   ========================================================= */

:root {
	--xenel-blue: var(--wp--preset--color--xenel-blue);
	--xenel-turquoise: var(--wp--preset--color--xenel-turquoise);
	--xenel-silver: var(--wp--preset--color--xenel-silver);
	--xenel-black: var(--wp--preset--color--xenel-black);
	--xenel-white: var(--wp--preset--color--white);
	--xenel-blue-deep: var(--wp--preset--color--blue-deep);
	--xenel-silver-100: var(--wp--preset--color--silver-100);
	--xenel-silver-300: var(--wp--preset--color--silver-300);
	--xenel-turquoise-text: var(--wp--preset--color--turquoise-text);
	--xenel-silver-text: var(--wp--preset--color--silver-text);
	--xenel-radius: var(--wp--custom--radius, 2px);
	--xenel-header-h: var(--wp--custom--header-height, 72px);
	--xenel-ease: cubic-bezier(.2,.6,.2,1);
	/* Fallback sector = corporate blue so components never render unstyled. */
	--xenel-sector-1: var(--xenel-blue);
	--xenel-sector-2: var(--wp--preset--color--blue-mid);
	--xenel-sector-3: var(--xenel-turquoise);
	--xenel-sector-4: var(--wp--preset--color--turquoise-tint);
	--xenel-sector-ink: #FFFFFF;
	--xenel-sector-text: var(--xenel-blue);
}

html { color-scheme: light; }
/* 0.1.15: smooth scrolling only once the page has finished loading (ui.js adds the class after the load event). A link
   from another page to a section (/about-us/#core-values) is answered by the browser's own jump to the section while the
   page is still loading; with smooth scrolling that jump was animated towards a position worked out before the layout had
   settled, and it could stop with the heading under the header. Without smooth scrolling the browser keeps the section in
   place while the page loads. In-page links still scroll smoothly; without JavaScript every jump is instant. */
html.xenel-smooth-scroll { scroll-behavior: smooth; }
/* Keep focus and anchor targets clear of the header with a target-side scroll margin (not a viewport-side scroll-padding):
   Chrome centres a focused control that lies inside the scroll-padding band, and on pages with the sticky header the header's
   own controls always do, so each Tab through the header would scroll the page up by half a viewport. */
.site-main, .site-main :is(a[href], button, input, select, textarea, [tabindex], [id]), .xenel-footer :is(a[href], button, [id]) { scroll-margin-top: calc(var(--xenel-header-h) + 8px); }
body { background: var(--wp--preset--color--white); color: var(--wp--preset--color--xenel-black); }
@media (prefers-reduced-motion: reduce) { html, html.xenel-smooth-scroll { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
/* 0.1.13: Businesses buttons "By Sector", "Current Companies" and "Prior Ventures" (/businesses#by-sector, #company-pages,
   #prior-ventures). The section's entrance animation (a 40 px rise) was running while the browser computed the anchor scroll,
   so the target landed up to 40 px above its offset, partly under the header. Only when the address targets one of these two
   sections or an element inside it does that section fade in without the rise; the anchor offset above and the animation on
   every other visit are unchanged. */
:is(#by-sector, #prior-ventures).dsgo-entrance-active:is(:target, :has(:target)) { animation-name: dsgFadeIn; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { height: auto; max-width: 100%; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
/* R9: a focused skip link must be visible (the clip above hid it even when focused). */
.screen-reader-text:focus { clip: auto; width: auto; height: auto; overflow: visible; }

/* ---------- utilities ---------- */
.xenel-measure { max-width: 66ch; }
.xenel-measure-wide { max-width: 80ch; }
.xenel-eyebrow {
	display: inline-flex; align-items: center; gap: .75rem;
	font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--xs);
	font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--xenel-turquoise-text);
	margin: 0 0 1rem;
}
.xenel-eyebrow::before { content: ""; display: inline-block; width: 2rem; height: 1px; background: currentColor; }
.has-sector .xenel-eyebrow--sector { color: var(--xenel-sector-text); }
h2.xenel-eyebrow { font-size: var(--wp--preset--font-size--xs); font-family: var(--wp--preset--font-family--body); line-height: 1.4; letter-spacing: .18em; }
.is-style-dark .xenel-eyebrow, .xenel-dark .xenel-eyebrow, .xenel-blue-deep .xenel-eyebrow { color: var(--xenel-turquoise); } /* R9: #66A5A4 = 4.92:1 on Blue Deep */
.xenel-hero .xenel-eyebrow { color: var(--xenel-white); } .xenel-hero .xenel-eyebrow::before { background: var(--xenel-turquoise); } /* R9: the hero photo behind the eyebrow reaches mid-grey; white text, decorative turquoise rule */
.xenel-light .xenel-eyebrow { color: var(--xenel-blue); } /* R9: Xenel Blue on Silver 100 #F4F4F4 (Turquoise Text was 4.17:1) */

.xenel-section { padding-block: var(--wp--preset--spacing--60); }
.xenel-section--tight { padding-block: var(--wp--preset--spacing--50); }
.xenel-dark { background: var(--xenel-black); color: var(--xenel-white); }
.xenel-dark a { color: inherit; }
.xenel-dark .wp-block-separator { border-color: rgba(255,255,255,.14); }
.xenel-blue-deep { background: var(--xenel-blue-deep); color: var(--xenel-white); }
.xenel-blue-deep a { color: inherit; }
.xenel-light { background: var(--xenel-silver-100); }

.xenel-button, .wp-block-button__link {
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small);
	font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
	padding: .95rem 1.75rem; border: 1px solid var(--xenel-blue); border-radius: var(--xenel-radius);
	background: var(--xenel-blue); color: var(--xenel-white); transition: background .25s var(--xenel-ease), border-color .25s, color .25s;
}
.xenel-button:hover, .wp-block-button__link:hover { background: var(--xenel-blue-deep); border-color: var(--xenel-blue-deep); color: var(--xenel-white); }
.xenel-button--ghost, .is-style-outline .wp-block-button__link { background: transparent; color: inherit; border-color: currentColor; }
.xenel-button--ghost:hover, .is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,.1); border-color: currentColor; color: inherit; }
.xenel-button--sector { background: var(--xenel-sector-1); border-color: var(--xenel-sector-1); color: var(--xenel-sector-ink); }
.xenel-button--sector:hover { background: var(--xenel-sector-2); border-color: var(--xenel-sector-2); color: var(--xenel-sector-ink); }
.xenel-link { color: var(--xenel-blue); }
.has-sector .xenel-link { color: var(--xenel-sector-text); }

.xenel-crumbs { display: flex; flex-wrap: wrap; gap: .6rem; font-size: var(--wp--preset--font-size--small); letter-spacing: .04em; text-transform: uppercase; opacity: .8; margin-bottom: 1.25rem; }
.xenel-crumbs a { text-decoration: none; color: inherit; }
.xenel-crumbs a:hover { text-decoration: underline; }

/* ---------- header ---------- */
.xenel-header {
	position: sticky; top: 0; z-index: 100; min-height: var(--xenel-header-h);
	background: var(--xenel-white); color: var(--xenel-black);
	border-bottom: 1px solid var(--xenel-silver-300);
	transition: background .3s var(--xenel-ease), box-shadow .3s, border-color .3s;
}
.xenel-header > .wp-block-group { min-height: var(--xenel-header-h); width: min(100% - 3rem, var(--wp--style--global--wide-size)); margin-inline: auto; }
.admin-bar .xenel-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .xenel-header { top: 46px; } }
.has-dark-hero .xenel-header { position: fixed; left: 0; right: 0; background: transparent; color: var(--xenel-white); border-bottom-color: transparent; }
.has-dark-hero .xenel-header:not(.is-scrolled)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); pointer-events: none; }
.has-dark-hero .xenel-header { isolation: isolate; }
.has-dark-hero .xenel-header.is-scrolled { background: rgba(0,0,0,.92); border-bottom-color: rgba(255,255,255,.12); }
.xenel-header .xenel-logo-dark { display: block; }
.xenel-header .xenel-logo-light { display: none; }
.has-dark-hero .xenel-header:not(.is-scrolled) .xenel-logo-dark,
.has-dark-hero .xenel-header.is-scrolled .xenel-logo-dark { display: none; }
.has-dark-hero .xenel-header .xenel-logo-light { display: block; }
.xenel-header .wp-block-image img, .xenel-header .custom-logo { width: auto; height: 40px; }
.xenel-header .wp-block-image { margin: 0; }
.xenel-header .wp-block-navigation { gap: 2rem; }
.xenel-header .wp-block-navigation .wp-block-navigation-item__content { padding: .35rem 0; border-bottom: 1px solid transparent; }
.xenel-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.xenel-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content { border-bottom-color: var(--xenel-turquoise); }
.xenel-header .wp-block-navigation__submenu-container { background: var(--xenel-white) !important; color: var(--xenel-black) !important; border: 1px solid var(--xenel-silver-300) !important; border-radius: var(--xenel-radius); min-width: 260px; padding: .5rem 0 !important; }
.xenel-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem 1.25rem; font-size: .9375rem; }
.xenel-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--xenel-silver-100); text-decoration: none; }
.xenel-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--xenel-black) !important; color: var(--xenel-white) !important; padding: 5rem 2rem 2rem !important; overflow-y: auto; }
.xenel-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; }
.xenel-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: .5rem; }
.xenel-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; padding: .35rem 0; }
.xenel-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--body); font-size: 1rem; opacity: .8; padding: .3rem 0; }
.xenel-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { padding-left: 1rem !important; }
.xenel-header .wp-block-navigation__responsive-container-close { color: var(--xenel-white) !important; top: 1.25rem; right: 1.25rem; }
.xenel-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; color: inherit !important; border: 0 !important; }
.xenel-header .wp-block-navigation__responsive-container-open, .xenel-header .wp-block-navigation__responsive-container-close { color: inherit; position: relative; z-index: 2; }
.xenel-header .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
.has-dark-hero .site-main > :first-child { margin-top: 0; }
.has-dark-hero .site-main { margin-block-start: 0; }

/* ---------- home hero ---------- */
.xenel-hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--xenel-white); background: var(--xenel-black); isolation: isolate; overflow: hidden; }
.xenel-hero__media, .xenel-hero__media video, .xenel-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.xenel-hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--wp--preset--gradient--hero-scrim); }
.xenel-hero__inner { width: min(100% - 3rem, var(--wp--style--global--wide-size)); margin-inline: auto; padding: var(--xenel-header-h) 0 var(--wp--preset--spacing--60); }
.xenel-hero__title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display); font-weight: 300; line-height: 1.05; letter-spacing: -.015em; margin: 0 0 1.5rem; max-width: 16ch; }
.xenel-hero__title strong { font-weight: 400; }
.xenel-hero__lede { font-size: var(--wp--preset--font-size--large); font-weight: 300; max-width: 46ch; margin: 0 0 2rem; opacity: .9; }
.xenel-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.xenel-hero__cue { position: absolute; right: var(--wp--preset--spacing--30); bottom: var(--wp--preset--spacing--40); display: flex; align-items: center; gap: .75rem; font-size: var(--wp--preset--font-size--xs); letter-spacing: .18em; text-transform: uppercase; opacity: .7; writing-mode: vertical-rl; color: var(--xenel-white); }
.xenel-hero__cue:hover, .xenel-hero__cue:focus-visible { color: var(--xenel-white); opacity: 1; } /* R9: was Xenel Blue (link colour) on the dark hero */
.xenel-hero__cue::after { content: ""; width: 1px; height: 56px; background: currentColor; animation: xenel-cue 2.4s var(--xenel-ease) infinite; }
@media (max-width: 900px) { .xenel-hero__cue { display: none; } }
@keyframes xenel-cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- two-column feature (purpose, footprint, heritage) ---------- */
.xenel-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); align-items: center; }
.xenel-feature__media { grid-column: 1 / span 6; }
.xenel-feature__body { grid-column: 8 / span 5; }
.xenel-feature--flip .xenel-feature__media { grid-column: 7 / span 6; order: 2; }
.xenel-feature--flip .xenel-feature__body { grid-column: 1 / span 5; order: 1; }
.xenel-feature__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--xenel-radius); display: block; }
.xenel-feature__media--wide img { aspect-ratio: 4 / 3; }
.xenel-feature__body h2 { margin: 0 0 1.25rem; }
.xenel-feature__body p { margin: 0 0 1rem; }
.xenel-feature__body p + .xenel-button, .xenel-feature__body p + .wp-block-buttons { margin-top: 1.5rem; }
.xenel-feature__body--left { grid-column: 1 / span 5; }
.xenel-feature__aside { grid-column: 7 / span 6; }
@media (max-width: 900px) {
	.xenel-feature { grid-template-columns: 1fr; }
	.xenel-feature__media, .xenel-feature__body, .xenel-feature__body--left, .xenel-feature__aside, .xenel-feature--flip .xenel-feature__media, .xenel-feature--flip .xenel-feature__body { grid-column: 1 / -1; order: initial; }
}

/* ---------- stats ---------- */
.xenel-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.xenel-stats .xenel-stat { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); border-left: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; gap: .5rem; }
.xenel-stats .xenel-stat:first-child { border-left: 0; padding-left: 0; }
.xenel-stat__value { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display); font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.xenel-stat__suffix { color: var(--xenel-turquoise); }
.xenel-stat__label { font-size: var(--wp--preset--font-size--small); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
@media (max-width: 720px) { .xenel-stats { grid-template-columns: 1fr; } .xenel-stats .xenel-stat { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.18); } .xenel-stats .xenel-stat:first-child { border-top: 0; } }

/* ---------- sector grid ---------- */
.xenel-sector-grid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.xenel-sector-grid__list--strip { grid-template-columns: repeat(6, 1fr); gap: 1px; background: rgba(255,255,255,.12); }
.xenel-sector-card { margin: 0; }
.xenel-sector-card__link { display: block; text-decoration: none; color: inherit; background: var(--xenel-blue-deep); border-radius: var(--xenel-radius); overflow: hidden; height: 100%; }
.xenel-sector-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--xenel-blue-deep); overflow: hidden; }
.xenel-sector-card__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); transition: transform .8s var(--xenel-ease), filter .4s; }
.xenel-sector-card__img--empty { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--xenel-sector-1), var(--xenel-sector-3)); opacity: .55; }
.xenel-sector-card__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--xenel-sector-1); transform-origin: left; transition: height .3s var(--xenel-ease); }
.xenel-sector-card__body { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.25rem 1.5rem 1.5rem; }
.xenel-sector-card__name { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); }
.xenel-sector-card__count:empty { display: none; }
.xenel-sector-card__count { font-size: var(--wp--preset--font-size--small); letter-spacing: .08em; text-transform: uppercase; color: var(--xenel-sector-4); white-space: nowrap; }
/* 0.1.11: the Services shade 4 (#888D94) is 4.13:1 on Blue Deep, below 4.5:1 for this small text; it shows once Services has published records. Silver 300 (#DADADA, D-COL) is 9.87:1. Other sectors unchanged (5.8–10.1:1). */
.xenel-sector-card.sector-services .xenel-sector-card__count { color: var(--xenel-silver-300); }
.xenel-sector-card__link:hover .xenel-sector-card__img { transform: scale(1.04); filter: saturate(1); }
.xenel-sector-card__link:hover .xenel-sector-card__bar { height: 8px; }
.xenel-sector-card__link:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
@media (max-width: 900px) { .xenel-sector-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .xenel-sector-grid__list { grid-template-columns: 1fr; } }

/* ---------- footprint ---------- */
.xenel-footprint { position: relative; }
.xenel-footprint__map { position: absolute; inset: 0; background-position: center; background-size: contain; background-repeat: no-repeat; opacity: .22; pointer-events: none; }
.xenel-footprint__countries { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem 2rem; font-size: var(--wp--preset--font-size--medium); }
.xenel-footprint__countries li { padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.xenel-footprint__countries a { text-decoration: none; }
.xenel-footprint__countries a:hover { color: var(--xenel-turquoise); }
@media (max-width: 720px) { .xenel-footprint__countries { grid-template-columns: repeat(2, 1fr); } }

/* ---------- partners ---------- */
.xenel-partner-wall__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--xenel-silver-300); border: 1px solid var(--xenel-silver-300); }
.xenel-partner-wall__item { background: var(--xenel-white); aspect-ratio: 3 / 2; display: grid; place-items: center; padding: .75rem; margin: 0; }
.xenel-partner-wall__item img { width: 100%; height: 100%; max-width: 100%; min-width: 0; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s; }
.xenel-partner-wall__item:hover img { filter: none; opacity: 1; }
@media (max-width: 900px) { .xenel-partner-wall__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .xenel-partner-wall__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- milestones ---------- */
.xenel-milestones__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.xenel-milestones__list--teaser { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--xenel-silver-300); }
.xenel-milestones__list--teaser .xenel-milestone { padding-top: 1.5rem; }
.xenel-milestone__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 1rem; border-radius: var(--xenel-radius); }
.xenel-milestone__year { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); color: var(--xenel-turquoise-text); line-height: 1; margin-bottom: .75rem; } /* R9: #4A7E7E 4.59:1 on white (Turquoise #66A5A4 was 2.81:1) */
.xenel-milestone__title { font-size: var(--wp--preset--font-size--medium); font-family: var(--wp--preset--font-family--body); font-weight: 700; margin: 0 0 .5rem; }
.xenel-milestone__text p { margin: 0; font-size: var(--wp--preset--font-size--small); }
.xenel-milestones__list--timeline .xenel-milestone { display: grid; grid-template-columns: 8rem 1fr; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--xenel-silver-300); }
/* 0.1.12: the cleared About timeline — year beside the title and text; one column on narrow screens. */
.xenel-milestones--about .xenel-milestone__year { margin-bottom: 0; }
.xenel-milestones--about .xenel-milestone__title { margin-top: .15rem; }
.xenel-milestones--about .xenel-milestone__text p + p { margin-top: .5rem; }
@media (max-width: 600px) { .xenel-milestones__list--timeline .xenel-milestone { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem 0; } }
@media (max-width: 900px) { .xenel-milestones__list--teaser { grid-template-columns: repeat(2, 1fr); } }

/* ---------- sector hero (taxonomy pages): split layout, portrait media + title ---------- */
.xenel-sector-hero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 80svh; color: var(--xenel-white); background: var(--xenel-black); isolation: isolate; overflow: hidden; }
.xenel-sector-hero__media { position: relative; min-height: 420px; background: var(--xenel-blue-deep); }
.xenel-sector-hero__media video, .xenel-sector-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.xenel-sector-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%), linear-gradient(90deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.6) 100%); }
.xenel-sector-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 1; background: linear-gradient(90deg, var(--xenel-sector-1), var(--xenel-sector-2), var(--xenel-sector-3), var(--xenel-sector-4)); }
.xenel-sector-hero__inner { display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--xenel-header-h) + var(--wp--preset--spacing--50)) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50); }
.xenel-sector-hero__title { font-size: var(--wp--preset--font-size--display); font-weight: 300; margin: 0 0 1rem; line-height: 1.05; }
.xenel-sector-hero__count { font-size: var(--wp--preset--font-size--small); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1.5rem; display: flex; align-items: baseline; gap: .5rem; }
.xenel-sector-hero__num { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); letter-spacing: 0; color: var(--xenel-sector-4); }
.xenel-sector-hero__desc { max-width: 56ch; font-size: var(--wp--preset--font-size--large); font-weight: 300; }
.xenel-sector-hero__desc p { margin: 0 0 1rem; }
@media (max-width: 900px) { .xenel-sector-hero { grid-template-columns: 1fr; min-height: 0; } .xenel-sector-hero__media { min-height: 56vw; order: 2; } .xenel-sector-hero__media::after { background: none; } .xenel-sector-hero__inner { padding-inline: var(--wp--preset--spacing--30); } }

/* ---------- company list ---------- */
.xenel-company-list__items { list-style: none; margin: 0; padding: 0; counter-reset: company; }
.xenel-company-list__items--list .xenel-company-row { display: grid; grid-template-columns: 220px 1fr; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--40) 0; border-top: 1px solid var(--xenel-silver-300); }
.xenel-company-list__items--list .xenel-company-row:last-child { border-bottom: 1px solid var(--xenel-silver-300); }
.xenel-company-list__items--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.xenel-company-list__items--grid .xenel-company-row { border: 1px solid var(--xenel-silver-300); padding: 1.5rem; display: grid; gap: 1rem; }
.xenel-company-row__logo { display: grid; place-items: center; background: var(--xenel-white); border: 1px solid var(--xenel-silver-300); border-radius: var(--xenel-radius); aspect-ratio: 3 / 2; padding: 1.25rem; position: relative; overflow: hidden; }
.xenel-company-row__logo::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--xenel-sector-1); }
.xenel-company-row__img { max-height: 72px; width: auto; max-width: 100%; object-fit: contain; }
.xenel-company-list__items--list .xenel-company-row--no-logo { grid-template-columns: minmax(0, 1fr); } /* 0.1.12: Prior Ventures rows without a logo are text only */
.xenel-logo--missing { font-family: var(--wp--preset--font-family--display); font-size: 2rem; color: var(--xenel-silver); }
.xenel-company-row__name { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--x-large); }
.xenel-company-row__name a { text-decoration: none; color: inherit; }
.xenel-company-row__name a:hover { color: var(--xenel-sector-text); }
.xenel-company-row__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1rem; font-size: var(--wp--preset--font-size--small); letter-spacing: .08em; text-transform: uppercase; color: var(--xenel-silver-text); }
.xenel-company-row__country { color: var(--xenel-sector-text); text-decoration: none; }
.xenel-company-row__countries { min-width: 0; overflow-wrap: break-word; } /* 0.1.11: the comma-separated country links form one item of the meta line */
.xenel-company-row__excerpt { margin: 0 0 1.25rem; max-width: 66ch; }
.xenel-company-row__more { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: var(--wp--preset--font-size--small); color: var(--xenel-sector-text); text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 720px) { .xenel-company-list__items--list .xenel-company-row { grid-template-columns: 1fr; gap: 1.25rem; } .xenel-company-row__logo { max-width: 240px; } .xenel-company-list__items--grid { grid-template-columns: 1fr; } }

/* ---------- company page ---------- */
.is-company-page .xenel-header { border-bottom-color: var(--xenel-silver-300); }
.xenel-company-header { padding-top: var(--wp--preset--spacing--50); position: relative; }
.xenel-company-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--xenel-sector-1), var(--xenel-sector-2), var(--xenel-sector-3), var(--xenel-sector-4)); }
.xenel-company-header__grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--wp--preset--spacing--50); align-items: start; }
.xenel-company-header__logo { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 2rem; border: 1px solid var(--xenel-silver-300); border-radius: var(--xenel-radius); background: var(--xenel-white); position: relative; }
.xenel-company-header__logo::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--xenel-sector-1); }
.xenel-company-header__img { max-height: 110px; width: auto; max-width: 100%; object-fit: contain; }
.xenel-company-header__title { font-size: var(--wp--preset--font-size--xx-large); margin: 0 0 1.5rem; line-height: 1.1; }
.xenel-company-header__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.25rem 2rem; margin: 0 0 2rem; padding: 1.5rem 0; border-top: 1px solid var(--xenel-silver-300); border-bottom: 1px solid var(--xenel-silver-300); }
.xenel-company-header__facts dt { font-size: var(--wp--preset--font-size--xs); letter-spacing: .14em; text-transform: uppercase; color: var(--xenel-silver-text); margin-bottom: .35rem; }
.xenel-company-header__facts dd { margin: 0; font-size: var(--wp--preset--font-size--medium); }
/* 0.1.11: country names are comma-separated (Xenel Core 0.1.12) and wrap inside their column; a long name never widens the page. */
.xenel-company-header__facts > div { min-width: 0; }
.xenel-company-header__facts dd { overflow-wrap: break-word; }
.xenel-sector-badge { display: inline-block; padding: .25rem .6rem; border-radius: var(--xenel-radius); background: var(--xenel-sector-1); color: var(--xenel-sector-ink); text-decoration: none; font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: .04em; }
.xenel-company-body { font-size: var(--wp--preset--font-size--large); font-weight: 300; line-height: 1.6; }
.xenel-company-body p { max-width: 68ch; }
.xenel-company-body p:first-of-type::first-letter { font-family: var(--wp--preset--font-family--display); font-weight: 400; color: var(--xenel-sector-text); }
/* 0.1.11: the "Key figures" heading is rendered by the statistics block itself, and only when the record has figures.
   It keeps the spacing of the former separate heading: its own 1rem plus the block gap that preceded the figures. */
.xenel-company-stats__heading { margin-block: 0 calc(1rem + var(--wp--style--block-gap)); }
.xenel-company-stats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--xenel-silver-300); border: 1px solid var(--xenel-silver-300); margin: 0; }
.xenel-company-stats__item { background: var(--xenel-white); padding: 2rem; display: flex; flex-direction: column; gap: .5rem; }
.xenel-company-stats__value { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xx-large); line-height: 1; color: var(--xenel-sector-text); letter-spacing: -.01em; }
.xenel-company-stats__item { flex-direction: column-reverse; }
.xenel-company-stats__label { font-size: var(--wp--preset--font-size--small); letter-spacing: .1em; text-transform: uppercase; color: var(--xenel-silver-text); }
@media (max-width: 800px) { .xenel-company-header__grid { grid-template-columns: 1fr; } .xenel-company-header__logo { max-width: 300px; } .xenel-company-stats__list { grid-template-columns: 1fr; } }

.xenel-company-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--xenel-silver-300); border-bottom: 1px solid var(--xenel-silver-300); }
.xenel-company-nav__prev, .xenel-company-nav__next { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; color: inherit; }
.xenel-company-nav__next { text-align: right; align-items: flex-end; }
.xenel-company-nav__dir { font-size: var(--wp--preset--font-size--xs); letter-spacing: .14em; text-transform: uppercase; color: var(--xenel-silver-text); }
.xenel-company-nav__name { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); }
.xenel-company-nav a:hover .xenel-company-nav__name { color: var(--xenel-sector-text); }
.xenel-company-nav__all { font-size: var(--wp--preset--font-size--small); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--xenel-sector-text); text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 720px) { .xenel-company-nav__inner { grid-template-columns: 1fr; } .xenel-company-nav__next { text-align: left; align-items: flex-start; } }

.xenel-related__title { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 1.5rem; }
.xenel-related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.xenel-related__item a { display: grid; gap: 1rem; text-decoration: none; color: inherit; border: 1px solid var(--xenel-silver-300); padding: 1.5rem; border-radius: var(--xenel-radius); transition: border-color .25s; }
.xenel-related__item a:hover { border-color: var(--xenel-sector-1); }
.xenel-related__item a:focus-visible { outline: 3px solid var(--xenel-blue); outline-offset: 3px; }
.xenel-related__img { max-height: 56px; width: auto; max-width: 100%; object-fit: contain; justify-self: start; }
.xenel-related__name { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--medium); }
@media (max-width: 720px) { .xenel-related__list { grid-template-columns: 1fr; } }

/* ---------- country list ---------- */
.xenel-country-list__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem 2rem; }
.xenel-country-list__items li { padding: .6rem 0; border-bottom: 1px solid var(--xenel-silver-300); }
@media (max-width: 600px) { .xenel-country-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1.25rem; } } /* 0.1.12: two columns on phones (Businesses → By Country) */

/* ---------- footer ---------- */
.xenel-footer { background: var(--xenel-blue-deep); color: var(--xenel-white); padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); }
.xenel-footer a { color: inherit; text-decoration: none; }
.xenel-footer a:hover { text-decoration: underline; }
.xenel-footer .xenel-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--wp--preset--spacing--40); }
.xenel-footer h4, .xenel-footer .xenel-footer__heading { font-size: var(--wp--preset--font-size--xs); letter-spacing: .16em; text-transform: uppercase; color: var(--xenel-turquoise); margin: 0 0 1rem; font-family: var(--wp--preset--font-family--body); font-weight: 700; }
.xenel-footer ul { list-style: none; margin: 0; padding: 0; }
.xenel-footer li { margin: 0 0 .6rem; }
.xenel-footer .xenel-footer__logo img { height: 36px; width: auto; }
.xenel-footer .xenel-footer__tagline { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); font-weight: 300; margin: 1.25rem 0 0; max-width: 24ch; }
.xenel-footer address { font-style: normal; line-height: 1.7; }
.xenel-footer .xenel-footer__legal { margin-top: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; opacity: .75; }
@media (max-width: 900px) { .xenel-footer .xenel-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .xenel-footer .xenel-footer__cols { grid-template-columns: 1fr; } }

/* ---------- light document pages ---------- */
.xenel-page-title { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); border-bottom: 1px solid var(--xenel-silver-300); }
.xenel-page-title h1 { font-size: var(--wp--preset--font-size--display); font-weight: 300; margin: 0; }
.xenel-prose > * { max-width: 68ch; }

/* ---------- search (0.1.14: templates/search.html) ----------
   The form sits in the group #site-search. The id is deliberate: the staging site's "contrast fallback" stylesheet styles every
   input with "body .wp-site-blocks input:not(...)x8" (specificity 0,9,2) using colour variables that do not exist there, which
   leaves the field with no border and no background. An id selector (1,x,x) wins regardless of stylesheet order. */
.xenel-page-title .wp-block-query-title { margin: 0; }
#site-search { margin-top: var(--wp--preset--spacing--40); max-width: 40rem; }
#site-search .wp-block-search__inside-wrapper { display: flex; gap: .5rem; border: 0; padding: 0; }
#site-search .wp-block-search__input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--wp--preset--font-size--medium); padding: .8rem 1rem; border: 1px solid var(--wp--preset--color--blue-mid); border-radius: var(--xenel-radius); background: var(--xenel-white); color: var(--xenel-black); }
#site-search .wp-block-search__input::placeholder { color: var(--xenel-silver-text); opacity: 1; }
#site-search .wp-block-search__input:focus-visible { outline: 2px solid var(--xenel-blue); outline-offset: 2px; }
#site-search .wp-block-search__button { margin: 0; display: inline-flex; align-items: center; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .8rem 1.5rem; border: 1px solid var(--xenel-blue); border-radius: var(--xenel-radius); background: var(--xenel-blue); color: var(--xenel-white); cursor: pointer; transition: background .25s var(--xenel-ease), border-color .25s; }
#site-search .wp-block-search__button:hover { background: var(--xenel-blue-deep); border-color: var(--xenel-blue-deep); }
#site-search .wp-block-search__button:focus-visible { outline: 2px solid var(--xenel-blue); outline-offset: 3px; }
.xenel-search-results { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.xenel-search-results__list { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; }
.xenel-search-result { padding-bottom: var(--wp--preset--spacing--40); border-bottom: 1px solid var(--xenel-silver-300); }
.xenel-search-result .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); font-weight: 300; margin: 0 0 .5rem; }
.xenel-search-result .wp-block-post-title a { color: var(--xenel-blue); text-decoration: none; }
.xenel-search-result .wp-block-post-title a:hover { text-decoration: underline; }
.xenel-search-result .wp-block-post-excerpt { max-width: 68ch; }
.xenel-search-result .wp-block-post-excerpt__excerpt { margin: 0; }
.xenel-search-results__none { font-size: var(--wp--preset--font-size--medium); max-width: 68ch; }
.xenel-pagination { margin-top: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--small); letter-spacing: .04em; text-transform: uppercase; }
.xenel-pagination a { color: var(--xenel-blue); }
@media (max-width: 560px) { #site-search .wp-block-search__inside-wrapper { flex-direction: column; } }

/* ---------- reveal (restrained motion) ---------- */
.xenel-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--xenel-ease), transform .7s var(--xenel-ease); }
.xenel-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .xenel-reveal { opacity: 1; transform: none; } }

/* ---------- editor niceties ---------- */
.editor-styles-wrapper .xenel-hero, .editor-styles-wrapper .xenel-sector-hero { min-height: 480px; }

/* ---------- keyboard focus (visible on every interactive element) ---------- */
a:focus-visible, button:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, .wp-block-navigation a:focus-visible, .wp-block-navigation button:focus-visible, .xenel-button:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--xenel-turquoise-text); outline-offset: 3px; border-radius: 2px; } /* #4A7E7E: 4.59:1 on white (non-text contrast >= 3:1) */
.xenel-dark a:focus-visible, .xenel-blue-deep a:focus-visible, .xenel-hero a:focus-visible, .xenel-sector-hero a:focus-visible, .has-dark-hero .xenel-header:not(.is-scrolled) a:focus-visible, .has-dark-hero .xenel-header:not(.is-scrolled) button:focus-visible { outline-color: #FFFFFF; }
:where(body:not(.xenel-dark) main) a:focus-visible { outline-color: var(--xenel-blue); } /* R9: :where() lowers specificity so dark-context rules below win */
/* R9: two-tone ring in dark and photographic contexts: a white ring over a Blue Deep halo keeps >= 3:1 against any background. */
:is(.xenel-dark, .xenel-blue-deep, .xenel-footer, .xenel-hero, .xenel-sector-hero, .has-dark-hero .xenel-header:not(.is-scrolled)) :is(a, button):focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 7px var(--xenel-blue-deep); }
.skip-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 7px var(--xenel-blue-deep); } /* R9: the skip link appears over the hero or header */
.xenel-header .wp-block-navigation-submenu__toggle:focus-visible { position: relative; z-index: 3; } /* R9: keep the focused chevron's ring and halo above the opening submenu panel */
.xenel-sector-card__link:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
/* 0.1.12: sector cards outside a dark section (Businesses → By Sector): white text on the card's own Blue Deep panel, and
   a Blue Deep focus ring that shows on the light page. Cards in dark sections (Home, sector pages) are unchanged. */
.xenel-sector-grid:not(:is(.xenel-dark, .xenel-blue-deep) *) .xenel-sector-card__link { color: #FFFFFF; }
.xenel-sector-grid:not(:is(.xenel-dark, .xenel-blue-deep) *) .xenel-sector-card__link:focus-visible { outline-color: var(--xenel-blue-deep); }
/* 0.1.13: the sector name carries its own colour, white on the card's Blue Deep panel (13.8:1), so a link colour set
   elsewhere (on staging, the host's section contrast styles) cannot darken it. Counts keep their own colours. */
.xenel-sector-card__name { color: #FFFFFF; }
.xenel-company-row__name a:focus-visible, .xenel-company-row__more:focus-visible, .xenel-company-nav a:focus-visible { outline: 3px solid var(--xenel-blue); outline-offset: 3px; }

/* ---------- hero video pause / play ---------- */
.xenel-video-toggle { position: absolute; z-index: 3; left: var(--wp--preset--spacing--30); bottom: var(--wp--preset--spacing--30); display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border: 1px solid rgba(255,255,255,.6); border-radius: var(--xenel-radius); background: rgba(0,0,0,.55); color: #FFFFFF; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.xenel-video-toggle[hidden] { display: none; } /* without JS no control is shown; JS unhides it once playback can actually be toggled */
.xenel-video-toggle::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 0 0; }
.xenel-video-toggle[data-state="playing"]::before { width: 10px; height: 10px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.xenel-video-toggle[data-state="paused"]::before { border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.xenel-video-toggle:hover { background: rgba(0,0,0,.8); }
.xenel-video-toggle:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.xenel-hero__control { position: absolute; z-index: 3; right: var(--wp--preset--spacing--30); bottom: var(--wp--preset--spacing--30); }
.xenel-hero .xenel-video-toggle { position: static; }
.xenel-hero__cue { bottom: calc(var(--wp--preset--spacing--40) + 3.5rem); }
@media (max-width: 900px) { .xenel-hero .xenel-video-toggle { right: var(--wp--preset--spacing--30); bottom: var(--wp--preset--spacing--20); } }
.xenel-sector-hero .xenel-video-toggle { left: var(--wp--preset--spacing--30); bottom: var(--wp--preset--spacing--30); }
.xenel-hero__media video[data-xenel-video]:not(.is-playing) { visibility: hidden; }
.xenel-hero__media img.xenel-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- company list groups ---------- */
.xenel-company-list__heading { margin: 0 0 1rem; }
.xenel-company-list__heading + .xenel-company-list__items { margin-bottom: var(--wp--preset--spacing--50); }

/* ---------- reduced motion: no autoplay, no reveals ---------- */
@media (prefers-reduced-motion: reduce) { .xenel-hero__cue::after { animation: none; } }