/* ==========================================================================
   UX audit layer (Oct 2026). Loads last (after fit.css) on every page via inc/site-chrome.php.
   Global tokens + fixes: skip link, focus rings, contrast "ink" colours, type floor,
   header safe-area, one container gutter, copy/layout bugs.
   ========================================================================== */
:root {
	--ink-green:#2F7D44; --ink-green-h:#276A39;
	--ink-orange:#C2410C; --ink-blue:#3B4FD8; --ink-sky:#1D6FA8;
	--hdr-safe:calc(var(--hdr, 84px) + 48px);
	--gutter:clamp(24px, 5vw, 80px);
	--ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Skip link + focus ---------- */
.opti-skip { position:fixed; left:16px; top:-100px; z-index:100001; padding:12px 20px; border-radius:12px; background:#0b121a; color:#fff !important; font:600 16px/1.2 'Plus Jakarta Sans',sans-serif; text-decoration:none !important; transition:top .2s var(--ease); }
.opti-skip:focus { top:16px; outline:3px solid #8FB2FF; outline-offset:2px; }
#content-wrapper:focus { outline:none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline:3px solid var(--ink-blue) !important; outline-offset:3px; }
:where(.osh, .osf, .osn) :where(a, button, input, [tabindex]):focus-visible { outline-color:#8FB2FF !important; }
:where(input, select, textarea):focus-visible { outline-offset:1px; }
.osn__field:focus-within { box-shadow:0 0 0 3px var(--ink-blue); }

/* ---------- Header CTA never wraps; one label everywhere ---------- */
.osh__report > span:last-child { width:auto !important; white-space:nowrap; }

/* ---------- Footer fixes ---------- */
.osf__q1 { transform:rotate(180deg); }          /* opening mark first */
.osf__q2 { transform:none; }
.osf__legal a { white-space:nowrap; }

/* ---------- Headings: balanced wrapping (no "Plug & / Play" orphans) ---------- */
h1, h2, h3 { text-wrap:balance; }

/* ---------- Contrast: ink variants for text-on-colour buttons ---------- */
.osh__login { background:var(--ink-green); } .osh__login:hover { background:var(--ink-green-h); }
.eip-btn--green, .hiw-btn--green, .fsp-btn--next, .kb-btn--green { background:var(--ink-green) !important; border-color:var(--ink-green) !important; }
.eip-btn--green:hover, .hiw-btn--green:hover, .fsp-btn--next:hover, .kb-btn--green:hover { background:var(--ink-green-h) !important; }

/* ---------- Contact form validation messages ---------- */
.opti-err { display:block; margin-top:6px; color:#B42318; font:500 14px/1.4 'Plus Jakarta Sans',sans-serif; }
.contact-field[aria-invalid="true"] { border-color:#B42318 !important; box-shadow:0 0 0 1px #B42318; }

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

/* ---------- One H1 scale floor on laptops/desktops (was 26-28px at 1024-1199) ---------- */
@media (min-width:1024px) {
	html body #content-wrapper h1:not(.kb-h2):not(.screen-reader-text):not(.report-card h1):not(aside h1):not(.col-lg-3 h1):not(.col-lg-4 h1) { font-size:clamp(40px, 3.4vw, 60px) !important; line-height:1.1 !important; letter-spacing:-.02em; }
}

/* ---------- One container gutter (Home ran 24px from the edge) ---------- */
@media (min-width:768px) { .hp-wrap { padding-inline:var(--gutter) !important; } }

/* ---------- Home: Real Results proof strip ---------- */
.hp-proof__head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px 48px; flex-wrap:wrap; margin-bottom:clamp(24px, 3vw, 40px); }
.hp-proof__eyebrow { margin:0 0 8px; color:var(--ink-green); font:700 14px/1.4 'Plus Jakarta Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.hp-proof .hp-h2 { margin:0; max-width:18em; }
.hp-proof__roll { display:flex; gap:clamp(24px, 4vw, 64px); margin:0; }
.hp-proof__roll div { display:flex; flex-direction:column-reverse; gap:4px; }
.hp-proof__roll dt { font:500 15px/1.4 'Plus Jakarta Sans',sans-serif; color:#475467; }
.hp-proof__roll dd { margin:0; font:700 clamp(36px, 3.4vw, 56px)/1 'Averta CY','Plus Jakarta Sans',sans-serif; color:#0b121a; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.hp-proof__grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 1.8vw, 28px); margin:0; padding:0; list-style:none; }
.hp-pcard { height:100%; display:flex; flex-direction:column; background:#fff; border:1px solid #E7EAF3; border-radius:24px; overflow:hidden; color:#0b121a !important; text-decoration:none !important; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.hp-pcard:hover { transform:translateY(-4px); box-shadow:0 18px 40px -12px rgba(13,23,88,.16); }
.hp-pcard__art { display:flex; align-items:flex-end; justify-content:center; height:clamp(84px, 17vh, 170px); padding:12px 20px 0; background:linear-gradient(180deg, #F4F7FD, #fff); }
.hp-pcard__art img { max-height:100%; max-width:100%; object-fit:contain; }
.hp-pcard__body { display:flex; flex-direction:column; gap:10px; padding:14px 22px 20px; flex:1; }
.hp-pcard__logo { height:30px; width:auto; max-width:130px; object-fit:contain; object-position:left; }
.hp-pcard__title { font:700 17px/1.3 'Plus Jakarta Sans',sans-serif; flex:1; }
.hp-pcard__stats { display:grid; grid-template-columns:repeat(3, auto); justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid #EEF0F5; }
.hp-pcard__stats span { display:flex; flex-direction:column; gap:2px; font:500 14px/1.3 'Plus Jakarta Sans',sans-serif; color:#475467; }
.hp-pcard__stats b { font:700 20px/1.1 'Plus Jakarta Sans',sans-serif; font-variant-numeric:tabular-nums; }
.hp-pcard__stats .is-g { color:var(--ink-green); } .hp-pcard__stats .is-b { color:var(--ink-blue); } .hp-pcard__stats .is-o { color:var(--ink-orange); }
.hp-proof__foot { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:clamp(24px, 3vw, 40px); flex-wrap:wrap; }
.hp-proof__logos { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin:0; padding:0; list-style:none; }
.hp-proof__logos img { display:block; height:40px; width:auto; max-width:120px; object-fit:contain; filter:grayscale(1); opacity:.75; transition:filter .3s var(--ease), opacity .3s var(--ease); }
.hp-proof__logos a:hover img, .hp-proof__logos a:focus-visible img { filter:none; opacity:1; }
.hp-proof__all { flex:none; }
@media (max-width:991px) {
	.hp-proof__grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(82vw, 360px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
	.hp-proof__grid > * { scroll-snap-align:start; }
}

/* ---------- Interaction honesty: things that look clickable but aren't ---------- */
.step-box_button { cursor:default !important; }
.eip-pill, .eip-chip { cursor:default; }
.terms-menu-item, .chapter-item { cursor:pointer; }

/* ---------- Header safe-area: first content >= 40px below the floating header ---------- */
.csd-hero { padding-top:40px !important; }
.single-case_study #page-content > .csd-hero > .container,
.single-case_study #page-content .container { padding-left:var(--gutter) !important; padding-right:var(--gutter) !important; max-width:1360px; }
.page-template-contact-us #content-wrapper > *:first-child, .page-template-contact-us .contact-section { padding-top:40px; }
@media (min-width:1024px) { .opti-fsp .fsp-head { margin-top:24px; } }

/* ---------- Platform hero at 1024-1279: copy column + art column (art no longer covers the copy) ---------- */
@media (min-width:1024px) and (max-width:1279px) {
	.pf-hero__text { left:var(--gutter); width:36%; top:2%; }
	.pf-hero .pf-lead { max-width:none; font-size:15px; }
	.pf-hero__art { left:41%; width:58%; top:26%; }
	.pf-hero__grid, .pfm .pf-hero__grid { aspect-ratio:auto; min-height:min(calc(100svh - var(--hdr) - 120px), 470px); }
}

/* UX audit 7: readable floor for real (non-illustration) small text */
.hw-lv__pc, .hw-lv__v { font-size:12px !important; }
.hw-lv__live { font-size:12px !important; }
.eip-chip { font-size:12px !important; }

/* UX audit 8: shorter phone Home. The proven band repeats the proof roll-up (9 / 598), and the
   real-world stage repeats the hero callouts, so phones skip them; desktop is unchanged. */
@media (max-width:767px) {
	.hp .hp-proven { display:none !important; }
	.hp .hp-rw__stage { display:none !important; }
	.hp .hp-proof__logos { display:none !important; }
}

/* Home "Real Results": breathing room (Peter, Oct 15) */
.hp .hp-proof { padding-block:clamp(56px, 11vh, 128px) clamp(40px, 8vh, 96px) !important; }
.hp-proof__head { margin-bottom:clamp(28px, 5vh, 56px); }
.hp-proof__grid { gap:clamp(20px, 2.4vw, 36px); }
.hp-pcard__art { height:clamp(64px, 12vh, 140px); padding:clamp(12px, 2.4vh, 24px) 24px 0; }
.hp-pcard__body { gap:12px; padding:clamp(14px, 2.4vh, 24px) clamp(20px, 2vw, 28px) clamp(18px, 3vh, 28px); }
.hp-proof__more { margin:clamp(24px, 4.5vh, 48px) 0 0; text-align:center; }
@media (min-width:1024px) and (max-height:620px) {
	.hp .hp-proof { padding-block:40px 32px !important; }
	.hp-proof__head { margin-bottom:24px; }
	.hp-pcard__art { height:60px; }
	.hp-proof__more { margin-top:20px; }
}

/* EI "See Where Energy Is Being Lost": the three feature minis stay inside the copy column on every tab
   (they used to run across the building art). Compact vertical list, same width as the paragraph. */
@media (min-width:992px) {
	.eip-panel__text .eip-minis { display:flex; flex-direction:column; gap:10px; max-width:68%; margin-top:clamp(12px, 2.2vh, 20px) !important; text-align:left; font-size:14px; }
	.eip-panel__text .eip-minis li { flex-direction:row; align-items:center; gap:12px; }
	.eip-panel__text .eip-minis__ic { width:36px; height:36px; }
	.eip-panel__text .eip-minis__ic img, .eip-panel__text .eip-minis__ic svg { max-width:20px; max-height:20px; }
	.eip-panel__text .eip-minis br { display:none; }
}
/* EI tabs: copy and art side by side instead of overlaid, so no tab's text can reach the image */
@media (min-width:992px) {
	.eip-panel { grid-template-columns:minmax(0, 38%) minmax(0, 1fr); column-gap:clamp(16px, 2vw, 32px); align-items:start; }
	.eip-panel > * { grid-area:auto !important; }
	.eip-panel__text { width:auto !important; padding:3% 0 0 3.8% !important; }
	.eip-panel__text p, .eip-panel__text .eip-panel__sub, .eip-panel__text .eip-panel__sub + p { max-width:none !important; }
	.eip-panel__text .eip-minis { max-width:none; }
}
@media (min-width:992px) {
	/* crop the empty left third of the art canvas (where the copy used to be overlaid) */
	.eip-panel__art { aspect-ratio:701 / 679; max-height:calc(100svh - var(--hdr, 84px) - 190px); }
	.eip-panel__art .eip-stage { left:calc(-360px * var(--s, .8)); }
}
@media (min-width:1024px) and (max-height:620px) {
	.hp .hp-proof { padding-block:28px 24px !important; }
	.hp-pcard__art { height:48px; }
	.hp-proof__more { margin-top:16px; }
}
/* story / case-study sidebar report card: normal card heading, no overlap with the checklist card above */
.report-card [role=heading] { font-size:18px !important; line-height:1.45 !important; font-weight:700; margin:12px 0 16px; letter-spacing:0; }
.report-card { clear:both; position:relative; }
/* split hero titles: second line (was a 2nd H1) keeps the same size as the H1 */
@media (min-width:1024px) { #content-wrapper h1.f_w + p.f_w:not(.f_20) { font-size:clamp(40px, 3.4vw, 60px) !important; line-height:1.1 !important; letter-spacing:-.02em; font-weight:700; margin-top:0; } }
/* Real Results: numbers never break mid-value; on short laptop screens the card art is dropped instead of shrunk */
.hp-pcard__stats b { white-space:nowrap; }
.hp-pcard__stats { gap:12px 16px; }
@media (min-width:1024px) and (max-height:620px) {
	.hp-pcard__art { display:none !important; }
	.hp .hp-proof { padding-block:44px 32px !important; }
	.hp-pcard__body { padding-top:22px; }
}
@media (min-width:1024px) and (max-width:1279px) { .hp-pcard__stats b { font-size:18px; } .hp-pcard__stats span { font-size:13px; } }
/* footer: keep the quote clear of the decorative ring */
.osf__quote { max-width:min(620px, calc(100% - 200px)); position:relative; z-index:1; }
@media (max-width:767px) { .osf__quote { max-width:none; } }
/* "Set It. Forget It." pills: size to their label (one was clipped at 1920) */
html body .hp-setx .hp-set__pills { flex-wrap:wrap !important; }
@media (min-width:768px) { html body .hp-setx .hp-set__pills li { flex:1 1 auto !important; min-width:max-content; white-space:nowrap; } }
/* Platform hero >=1280: art shifted right so the black building never sits on the intro copy */
@media (min-width:1280px) {
	.pf-hero__text { width:32%; }
	.pf-hero__art { left:30%; width:68%; top:18%; }
}
/* Newsletter: keep copy + form side by side on laptops (it stacked below 1400 and filled 1.5 screens) */
@media (min-width:992px) and (max-width:1399px) {
	html .osn__inner { flex-direction:row; align-items:center; gap:clamp(32px,4vw,64px); padding:clamp(48px,9vh,80px) 48px; }
	html .osn__inner > * { flex:1 1 0; min-width:0; }
}
@media (min-width:992px) and (max-width:1399px) {
	html .osn__inner > .osn__card { flex:1.25 1 0; }
	html .osn__form { gap:12px; padding-left:20px; width:100%; }
	html .osn__form input { min-width:9em; }
}
/* Case studies index: the rule under the title had 110/124px margins, leaving a near-empty first screen */
@media (min-width:992px) { html .cs-overview__rule { margin:clamp(24px,5vh,56px) 0 clamp(24px,5vh,56px); } }
/* Shop hero: the PNG carries a thin grey frame; crop it off */
img.hero-img[src*="change_background_to_202604170004-2"] { clip-path:inset(4px); }
/* Phone: CTA buttons keep their arrow circle inside the pill */
@media (max-width:767px) {
	html body .cs-cta__btn { font-size:15px !important; gap:10px; padding-left:20px; padding-right:6px; justify-content:space-between; }
	html body .cs-cta__btn-icon { flex:none; }
}
@media (max-width:767px) {
	html body .cs-cta__btn { white-space:normal; height:auto !important; min-height:56px; line-height:1.25; text-align:left; padding-top:6px; padding-bottom:6px; }
	/* "Designed to Remove Every Barrier": word-reveal spans were forced to display:block (one word per line) */
	html body .hp-barriers__copy .hp-h2 .bx-w { display:inline-block; }
	html body .hp-barriers__copy .hp-h2 .bx-w--acc { display:block; width:max-content; max-width:100%; }
}
/* Story sidebar "More about Opti-mized" pill sat off-screen (right:-20%) on 768-1199 */
@media (min-width:768px) and (max-width:1199px) { html .journey-btn { right:-12px; } }
/* Readability floor for small labels found in the deep review (real text, not product-UI mockups) */
html .pf-hero li small { font-size:12.5px !important; }
@media (max-width:767px) { html .hw-pti__tl { font-size:11.5px; line-height:1.2; } }
/* phone: step labels collided (Gateway x Intelligence Activated) in 6 columns; 3x2 grid keeps every step labelled */
@media (max-width:480px){html .hw-pti__tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:18px!important}html .hw-pti__tabs::before,html .hw-pti__tabs::after{display:none!important}html .hw-pti__tl{font-size:12.5px;line-height:1.25}}