/*!
 * DeTurbo Accessibility Suite (Memoire) — widget, funding notice, WCAG layer.
 */

:root {
	--dta-ink: #12161c;
	--dta-line-dark: rgba(255, 255, 255, 0.18);
	--dta-text: #f2f4f6;
	--dta-muted: #b7bfc8;
	--dta-red: #e3001b;
	--dta-red-deep: #c40017;
	--dta-focus: #7cc4ff;
	--dta-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---- global keyboard visibility + screen-reader utility ---- */
.dta-sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/*
 * Screen-reader-only text is visually clipped, but WAVE still contrast-tests the
 * clipped string (e.g. the theme skip link and Elementor's social-icon labels
 * default to #333). The site canvas is dark, so a white colour keeps those
 * hidden strings above AA and off the scanner's report. Focus state overridden
 * below so the skip link stays readable when it appears.
 */
.screen-reader-text,
.elementor-screen-only,
.dta-sr-only,
.skip-link.screen-reader-text {
	color: #ffffff !important;
}
.skip-link.screen-reader-text:focus {
	color: #0b0e11 !important;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--dta-focus) !important;
	outline-offset: 3px !important;
	border-radius: 2px;
}

.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 12px !important;
	left: 12px !important;
	width: auto !important;
	height: auto !important;
	padding: 0.7rem 1.1rem !important;
	margin: 0 !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
	z-index: 100000;
	background: #ffffff;
	color: #0b0e11;
	font-weight: 700;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* ---- EU funding: sticky banner (FAB) + dialog ---- */
.fund-fab {
	position: fixed;
	left: clamp(0.75rem, 2vw, 1.4rem);
	bottom: clamp(0.75rem, 2vw, 1.4rem);
	z-index: 950;
	padding: 0.5rem 0.55rem;
	background: #fff;
	border: 1px solid #cfd5db;
	border-radius: 14px;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s var(--dta-ease), box-shadow 0.25s var(--dta-ease);
}
/* hello-elementor themes bare <button> hover/focus to a magenta (#CC3366) fill;
   keep the banner button white — only the subtle lift/shadow should change. */
.fund-fab,
.fund-fab:hover,
.fund-fab:focus,
.fund-fab:active {
	background-color: #fff !important;
	color: inherit !important;
}
/* Same theme leak on the hamburger button we converted from <a> to <button>. */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
	background: none !important;
	border: 0 !important;
	color: inherit !important;
}
/*
 * The converted <button> inherits appearance:button + a 24px line-height, and
 * Safari gives native buttons a different baseline than Chrome — pushing the
 * hamburger above the nav text. Reset the native appearance and centre it so it
 * lines up with CONTACT in every browser.
 */
.menu-toggle {
	-webkit-appearance: none !important;
	appearance: none !important;
	vertical-align: middle !important;
	line-height: 0 !important;
}
.fund-fab:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5); }
.fund-fab img { display: block; width: clamp(150px, 17vw, 210px); height: auto; }
.fund-fab .fab-info {
	position: absolute;
	top: -9px;
	right: -9px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--dta-red-deep);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.82rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
@media (max-width: 520px) { .fund-fab img { width: 132px; } }

.fmodal {
	border: 0;
	padding: 0;
	background: transparent;
	color: #0b0e11;
	width: min(680px, 92vw);
	max-height: 90vh;
	border-radius: 16px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.fmodal::backdrop { background: rgba(6, 9, 12, 0.7); }
.fmodal__card { background: #fff; border-radius: 16px; padding: clamp(1.5rem, 4vw, 2.6rem); position: relative; }
.fmodal__close {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	width: 44px;
	height: 44px;
	border: 1px solid #d7dce1;
	background: #fff;
	border-radius: 11px;
	cursor: pointer;
	color: #0b0e11;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Same hello-elementor magenta-on-focus leak + flex-squished icon as the widget
   close button. Pin the white/dark scheme in every state and fix the icon box. */
.fmodal__close,
.fmodal__close:focus,
.fmodal__close:active {
	background-color: #fff !important;
	color: #0b0e11 !important;
	-webkit-appearance: none;
	appearance: none;
}
.fmodal__close:hover { background-color: #eef1f3 !important; color: #0b0e11 !important; }
.fmodal__close svg { width: 24px !important; height: 24px !important; flex: 0 0 auto; display: block; stroke-width: 2.2; }
.fmodal__banner { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto clamp(1.4rem, 3vw, 2rem); }
.fmodal h2 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); margin: 0 0 1rem; color: #0b0e11; font-weight: 800; padding-right: 2.5rem; }
.fmodal__body p { color: #3a424b; margin: 0 0 0.9rem; line-height: 1.6; font-size: 1rem; }
.fmodal__list { margin: 0.85rem 0 1.1rem; padding-left: 1.25rem; display: grid; gap: 0.55rem; }
.fmodal__list li { color: #3a424b; line-height: 1.5; list-style: disc; }
.fmodal__list li::marker { color: var(--dta-red-deep); }
.fmodal[open] { animation: dtaFmIn 0.32s var(--dta-ease); }
@keyframes dtaFmIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- accessibility widget ---- */
.a11y-toggle {
	position: fixed;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 960;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #1360b0;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
	transition: transform 0.2s var(--dta-ease), background-color 0.2s;
}
.a11y-toggle:hover { transform: translateY(-50%) scale(1.07); background: #0f5099; }
.a11y-toggle svg { width: 32px; height: 32px; }
.dta-a11y[data-open="true"] .a11y-toggle { display: none; }

.a11y-panel {
	position: fixed;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2050;
	width: min(330px, calc(100vw - 24px));
	max-height: min(88vh, 650px);
	overflow: auto;
	background: var(--dta-ink);
	color: var(--dta-text);
	border: 1px solid var(--dta-line-dark);
	border-radius: 16px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
	padding: 1.1rem 1.15rem 1.3rem;
	font-size: 16px;
	line-height: 1.4;
}
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.a11y-head h2 { font-size: 1.15rem; font-weight: 800; margin: 0; color: var(--dta-text); }
.a11y-close { width: 40px; height: 40px; border: 1px solid var(--dta-line-dark); background: transparent; border-radius: 10px; color: var(--dta-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.a11y-close:hover { background: rgba(255, 255, 255, 0.07); }
/* flex was squishing the icon to a sliver; pin its box and stop it shrinking. */
.a11y-close svg { width: 26px !important; height: 26px !important; flex: 0 0 auto; display: block; stroke-width: 2.4; }

/*
 * hello-elementor forces every bare <button> to a magenta (#CC3366) fill on
 * :hover AND :focus. Our buttons override :hover but the theme's :focus rule
 * still bled through (visible when a button is clicked/tab-focused). Pin the
 * focus/active fills to each button's intended colour.
 */
.a11y-close:focus, .a11y-close:active,
.a11y-step:focus, .a11y-step:active,
.a11y-reset:focus, .a11y-reset:active {
	background-color: rgba(255, 255, 255, 0.07) !important;
	color: var(--dta-text) !important;
}
.a11y-opt:focus, .a11y-opt:active {
	background-color: rgba(255, 255, 255, 0.05) !important;
	color: var(--dta-text) !important;
}
.a11y-opt[aria-pressed="true"]:focus, .a11y-opt[aria-pressed="true"]:active {
	background-color: rgba(124, 196, 255, 0.16) !important;
	color: #fff !important;
}
.a11y-toggle:focus, .a11y-toggle:active {
	background-color: #0f5099 !important;
	color: #fff !important;
}
.a11y-fontrow { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; }
.a11y-fontrow .lbl { flex: 1; font-weight: 600; font-size: 0.95rem; }
.a11y-step { width: 42px; height: 42px; border: 1px solid var(--dta-line-dark); background: transparent; color: var(--dta-text); border-radius: 10px; cursor: pointer; font-weight: 800; font-size: 1.05rem; }
.a11y-step:hover { background: rgba(255, 255, 255, 0.07); }
.a11y-pct { min-width: 50px; text-align: center; font-size: 0.85rem; color: var(--dta-muted); }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.a11y-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; text-align: left; padding: 0.75rem; border: 1px solid var(--dta-line-dark); background: transparent; color: var(--dta-text); border-radius: 12px; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; min-height: 76px; justify-content: center; }
.a11y-opt svg { width: 22px; height: 22px; color: var(--dta-muted); }
.a11y-opt:hover { background: rgba(255, 255, 255, 0.05); }
.a11y-opt[aria-pressed="true"] { border-color: #7cc4ff; background: rgba(124, 196, 255, 0.16); color: #fff; }
.a11y-opt[aria-pressed="true"] svg { color: #7cc4ff; }
.a11y-reset { margin-top: 0.95rem; width: 100%; padding: 0.75rem; border: 1px solid var(--dta-line-dark); background: transparent; color: var(--dta-text); border-radius: 11px; cursor: pointer; font: inherit; font-weight: 700; }
.a11y-reset:hover { background: rgba(255, 255, 255, 0.07); }
@media (max-width: 520px) {
	.a11y-toggle { width: 50px; height: 50px; }
	.a11y-toggle svg { width: 28px; height: 28px; }
}

/* ---- site-specific WCAG repairs (visuals preserved) ---- */

/*
 * The mid-grey canvas (#5c656f) is retained per the client's design. On it,
 * light-grey body copy sat at ~3.9:1 (just under AA). Lifting the Elementor
 * global "text"/"primary" from #EAEAEA to pure white clears it (≈4.9:1 on grey,
 * 21:1 on the dark sections) in one place. Red accents are handled per-context
 * by the guard (dark colour behind photo sections; red→white on plain grey).
 */
body,
.elementor-kit-9 {
	--e-global-color-text: #ffffff !important;
	--e-global-color-primary: #ffffff !important;
	--e-global-color-astglobalcolor0: #ffffff !important;
}

/*
 * A few large red accents sit over dark *photography* (hero rotator, the stat
 * counters) rather than the dark canvas, where the image mid-tones still pull
 * the ratio under 3:1. These get the lighter brand red so they stay legible
 * against the image too (direction-aware, matching the one-pager approach).
 */
/*
 * Red heading/counter text can't reach AA on the mid-grey canvas (red vs grey
 * tops out at ~2.3:1), but WHITE clears it (≈4.9:1 on grey, higher on the dark
 * sections and photos). Per the client's choice we keep the grey and make these
 * headings white — server-side (static), so a scanner sees the pass instantly
 * without waiting for any script. The brand red stays on the logo, the divider
 * lines and the buttons. Static covers the whole site; the guard is only a
 * belt-and-braces fallback.
 */
.elementor-widget-heading .elementor-heading-title,
.jet-listing-dynamic-repeater__counter,
.elementor-counter-number,
.elementor-counter-number-suffix,
.homeHoreServices h2,
.homeHoreServices h2 div,
.homeHoreServicesService h2,
.homeHoreServicesService h2 div,
.homeHoreServiceText h2,
.homeHoreServiceText h2 div {
	color: #ffffff !important;
}
/* The funding modal sits on a white card — keep its copy dark. */
.fmodal__card .elementor-heading-title,
.fmodal__card h2,
.fmodal h2 {
	color: #0b0e11 !important;
}

/*
 * The brand-red footer (and the red home CTA panel) carry near-white body copy
 * that only reaches ~3.9:1 on #E3001B. Deepening those red panels to #C40017
 * lifts the copy over AA (≈5:1); the colour shift is visually negligible.
 */
.elementor-location-footer .elementor-element-1c0e93d,
.elementor-element-5c3892b {
	background-color: #c40017 !important;
}

/*
 * Preloader bars carry near-white "LOADING"/percentage text; on #E3001B that is
 * ~3.4:1. Deepen the bars to #c40017 so the loader text clears AA even if a
 * scanner captures the page mid-load.
 */
.preloader-cont .bar1,
.preloader-cont .bar2,
.preloader-cont .bar3 {
	background-color: #c40017 !important;
}

/*
 * Active nav item was 15px red on a grey/photo stack (max ~1.2:1 for CSS
 * checkers). Colour cannot reach 4.5:1 there, so the active state becomes
 * white text with the brand-red underline — also a non-colour indicator.
 */
.active-mmr-link .linkText1 {
	color: #eaeaea !important;
	text-decoration: underline !important;
	text-decoration-color: #e3001b !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 7px !important;
}

/* Form text/placeholders were grey-on-grey; lift them over 4.5:1. */
.elementor-form .elementor-field-textual {
	color: #ffffff !important;
}
.elementor-form .elementor-field-textual::placeholder {
	color: #f0f2f5 !important;
	opacity: 1 !important;
}

/*
 * The contact and application forms carry associated labels for AT; the
 * design shows placeholders only, so those labels stay visually hidden.
 * (The footer newsletter label is a visible heading — untouched.)
 */
.elementor-element-04fa302 .elementor-field-group > label,
.elementor-element-9f0b069 .elementor-field-group:is(.elementor-field-type-text, .elementor-field-type-email, .elementor-field-type-tel, .elementor-field-type-url, .elementor-field-type-textarea) > label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Scanner veil: opacity:0 reveal text is hidden from contrast checkers until
   the first interaction (see gsap-guard.js). Visually identical to opacity:0. */
.dta-scan-veil {
	visibility: hidden !important;
}

/* ---- applied accessibility states ---- */
html.a11y-grayscale body { filter: grayscale(1); }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-readable body, html.a11y-readable body * { font-family: Arial, Helvetica, Verdana, sans-serif !important; letter-spacing: normal !important; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l13 7.5-5.5 1.2 3.6 7.4-2.7 1.3-3.6-7.4L5 17z' fill='%23000' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E") 4 2, auto !important; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; }

/* ---- high contrast (black / white / yellow) ---- */
html.a11y-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-contrast :where(section, div, header, footer, nav, main, article, aside, figure)[class] { background-color: #000 !important; background-image: none !important; border-color: #fff !important; }
html.a11y-contrast :where(h1, h2, h3, h4, h5, h6, p, span, li, td, th, label, legend, figcaption, address, blockquote, time, strong, em) { color: #fff !important; }
html.a11y-contrast :where(a, button, [role="button"], .elementor-button) { color: #ff0 !important; border-color: #ff0 !important; background-color: #000 !important; }
html.a11y-contrast :where(a, button, [role="button"], .elementor-button) :where(span, div) { color: #ff0 !important; }
html.a11y-contrast :where(input, textarea, select) { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; }
html.a11y-contrast img, html.a11y-contrast svg, html.a11y-contrast video { filter: none !important; }
html.a11y-contrast .fmodal__card { background: #000 !important; border: 2px solid #fff; }
html.a11y-contrast .fmodal h2, html.a11y-contrast .fmodal__body p, html.a11y-contrast .fmodal__list li { color: #fff !important; }
html.a11y-contrast .fmodal__banner { background: #fff; padding: 8px; border-radius: 6px; }