/* =============================================================================
   TOLION HEALTH AI — design layer
   Loaded after Avada so it can override without !important where possible.

   Contents
     1.  Fonts (self-hosted)
     2.  Tokens
     3.  Base + typography
     4.  Rhythm & measure
     5.  Links, buttons, CTAs
     6.  Navigation
     7.  Cards: people, news, feature blocks
     8.  Diagrams & media
     9.  Footer
     10. Accessibility: focus, motion, targets
     11. Cookie bar
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Fonts — self-hosted, subset to Latin + Latin Extended-A so Czech
   diacritics (ě š č ř ž ů) render. Replaces the old 'Bookman Old Style'
   stack, which is not a webfont: nearly every visitor was served Times.
   -------------------------------------------------------------------------- */
/* Variable fonts, weight axis clipped to the range this design actually uses
   and subset to Latin + Latin Extended-A. That is 112KB for all three faces,
   against 213KB previously fetched from Google's CDN for less coverage.
   The declared font-weight ranges must match the clipped axes, or the browser
   will synthesise weights outside them. */
@font-face {
	font-family: 'Source Serif 4';
	src: url('../fonts/source-serif-4-roman.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Source Serif 4';
	src: url('../fonts/source-serif-4-italic.woff2') format('woff2-variations');
	font-weight: 400 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Inter var';
	src: url('../fonts/inter-variable.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* -----------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Brand colours, unchanged */
	--t-navy: #002049;
	--t-blue: #1f497d;
	--t-teal: #31859c;

	/* Accessible companions to the brand teal.
	   #31859c measures 4.23:1 on white and 3.81:1 on --t-navy: both fail
	   WCAG AA for body-size text. These keep the hue and pass:
	     --t-teal-ink    #26697c on white = 6.19:1
	     --t-teal-bright #5fb6cd on navy  = 6.95:1
	   Reserve --t-teal itself for large display text, rules, icons and fills. */
	--t-teal-ink: #26697c;
	--t-teal-bright: #5fb6cd;

	/* Avada resolves every link through --link_color (theme option: the brand
	   teal). Redefining it here fixes link contrast site-wide through Avada's
	   own cascade — no !important and no specificity fight. */
	--link_color: #26697c;

	--t-navy-deep: #001633;
	--t-ink: #14243d;
	--t-muted: #56617a;
	--t-line: #dde3ea;
	--t-line-soft: #eef1f5;
	--t-bg: #ffffff;
	--t-bg-soft: #f6f8fa;

	/* On dark sections */
	--t-on-dark: #ffffff;
	--t-on-dark-muted: #b8c6da;

	--t-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--t-sans: 'Inter var', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* 4px spacing scale */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 2.5rem;
	--s-8: 3rem;
	--s-9: 4rem;
	--s-10: 5rem;

	/* Section padding: one rhythm for the whole site instead of per-block values */
	--t-section-y: clamp(3.5rem, 2.2rem + 4vw, 6.5rem);

	--t-measure: 68ch;
	--t-radius: 10px;
	--t-radius-lg: 16px;
	--t-shadow: 0 1px 2px rgba(0, 32, 73, 0.05), 0 6px 20px -8px rgba(0, 32, 73, 0.16);
	--t-shadow-lift: 0 2px 4px rgba(0, 32, 73, 0.07), 0 18px 40px -14px rgba(0, 32, 73, 0.28);
}

/* -----------------------------------------------------------------------------
   3. Base + typography
   -------------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
}

/* NB: deliberately no `#main p` / `#main li` here. An ID selector outranks
   Avada's own `.fusion-title p`, and several headings on this site are authored
   as <p> inside a .fusion-title block (the homepage "Big Vision …" line is one).
   Overriding those turned white 55px display text into 18px body ink on navy.
   Scope to real body-copy containers and let inheritance do the rest. */
body,
.fusion-body,
.post-content,
.fusion-text,
.fusion-text p,
.fusion-text li {
	font-family: var(--t-sans);
	font-size: 1.125rem; /* 18px — the audience skews 50+; small type is a real cost */
	line-height: 1.65;
	color: var(--t-ink);
	font-feature-settings: 'kern' 1, 'liga' 1;
	-webkit-font-smoothing: antialiased;
}

/* Text authored as <p> inside a title block is display copy: keep Avada's
   colour and size, just give it the display face. */
.fusion-title p {
	font-family: var(--t-serif);
	color: inherit;
}

/* Display face for anything that reads as a heading. Keeping a serif here is
   what preserves the scientific/premium register of the original design. */
/* Deliberately no `color` here. Avada assigns each title its own colour via
   --awb-text-color, which is how the navy sections get white headings; setting
   a blanket colour turns those into navy-on-navy. Only the face and metrics
   are changed, and specific contrast problems are fixed further down. */
h1, h2, h3, h4, h5, h6,
.fusion-title-heading,
.fusion-title h1, .fusion-title h2, .fusion-title h3,
.fusion-title h4, .fusion-title h5, .fusion-title h6,
.fusion-modal-title,
.awb-menu__main-a {
	font-family: var(--t-serif);
	font-optical-sizing: auto;
	letter-spacing: -0.011em;
	text-wrap: balance;
}

/* Headings that carry no explicit colour default to brand navy. */
#main h1:not([style*="color"]):not([class*="fusion-title-heading"]),
#main h2:not([style*="color"]):not([class*="fusion-title-heading"]),
#main h3:not([style*="color"]):not([class*="fusion-title-heading"]) {
	color: var(--t-navy);
}

h1, .fusion-title h1, .fusion-title-heading.title-heading-left,
.fusion-title-1 .fusion-title-heading {
	font-size: clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem);
	line-height: 1.1;
	font-weight: 600;
	margin-bottom: var(--s-5);
}

h2, .fusion-title h2 {
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);
	line-height: 1.18;
	font-weight: 600;
	margin-bottom: var(--s-4);
}

h3, .fusion-title h3 {
	font-size: clamp(1.3rem, 1.1rem + 0.85vw, 1.75rem);
	line-height: 1.28;
	font-weight: 600;
	margin-bottom: var(--s-3);
}

h4, .fusion-title h4 {
	font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
	line-height: 1.35;
	font-weight: 600;
}

/* Avada's "h4 as body copy" pattern — used for the homepage About paragraph and
   several intros. Those are paragraphs, not headings: render them as lede text
   so the hierarchy stops lying to screen readers and to the eye. */
.fusion-text h4,
.fusion-title h4.fusion-title-heading.awb-lede {
	font-family: var(--t-sans);
	font-weight: 400;
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	line-height: 1.6;
	color: var(--t-ink);
	letter-spacing: 0;
}

/* Kickers / eyebrow labels */
.awb-kicker {
	font-family: var(--t-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--t-teal-ink);
}

/* -----------------------------------------------------------------------------
   4. Rhythm & measure
   The old build set site width to 98% and let paragraphs run the full window.
   Cap the reading measure and give every full-width section one shared rhythm.
   -------------------------------------------------------------------------- */
/* Only supply rhythm where the section does not already declare its own.
   Overriding every .fusion-fullwidth wholesale replaced deliberately tight
   sections with the full value and made the homepage ~19% taller for no gain. */
.fusion-fullwidth:not([style*="--awb-padding-top"]) {
	padding-top: var(--t-section-y);
}

.fusion-fullwidth:not([style*="--awb-padding-bottom"]) {
	padding-bottom: var(--t-section-y);
}

/* Sliders/heroes manage their own height — don't add to it. */
.fusion-fullwidth.hundred-percent-height,
.fusion-fullwidth:has(.ls-wp-container),
.fusion-fullwidth:has(.fusion-slider-container) {
	padding-top: 0;
	padding-bottom: 0;
}

.fusion-text p,
.fusion-text ul,
.fusion-text ol {
	max-width: var(--t-measure);
}

.fusion-text p + p {
	margin-top: var(--s-4);
}

/* Centred blocks should centre their measure too, not just their text */
.fusion-text-center .fusion-text p,
.fusion-title-center + .fusion-text p,
.awb-centered .fusion-text p {
	margin-left: auto;
	margin-right: auto;
}

.fusion-text ul,
.fusion-text ol {
	padding-left: 1.35em;
}

.fusion-text li + li {
	margin-top: var(--s-2);
}

.fusion-text li::marker {
	color: var(--t-teal-ink);
}

/* Dark sections.
   Avada already colours text inside the navy bands correctly, so this only
   handles the one thing it gets wrong: inline links on a dark ground inherit
   the light-mode teal (#31859c = 3.81:1 on navy, below AA).
   Sections are matched on Avada's own background variable, which is how the
   navy bands are actually authored — a literal rgb()/hex match never fires. */
.fusion-fullwidth[style*="--awb-background-color:var(--awb-color8)"],
.fusion-fullwidth[style*="--awb-bg-color:var(--awb-color8)"],
.awb-dark-section {
	--t-link-on-ground: var(--t-teal-bright);
}

.fusion-fullwidth[style*="--awb-background-color:var(--awb-color8)"] a:not(.fusion-button),
.fusion-fullwidth[style*="--awb-bg-color:var(--awb-color8)"] a:not(.fusion-button),
.awb-dark-section a:not(.fusion-button) {
	color: var(--t-teal-bright);
}

.awb-dark-section :is(p, li) {
	color: #e6edf6;
}

/* --- Contrast repairs on Avada's own colour variables --------------------
   The brand teal --awb-color4 (#31859c) measures 4.23:1 on white: fine as a
   fill, a rule or large display type, but below AA wherever it is used as
   running text — which is most of the subheadings on /technology/ and
   /medportal-platform/.

   Rather than chase individual spans, redefine --awb-color4 *locally* on the
   elements where Avada has assigned it as a text colour. Backgrounds, borders
   and icons elsewhere keep the original brand teal. */
[style*="--awb-text-color:var(--awb-color4)"],
[style*="--awb-text-color: var(--awb-color4)"] {
	--awb-color4: #26697c; /* 6.19:1 on white, same hue */
}

/* Elsewhere the same teal is pasted straight into the content as an inline
   colour (e.g. the MedWiki subheadings on /technology/ and
   /medportal-platform/, the LinkedIn links on /contact/ and /careers/).
   Match the literal values the editor produced. */
:where(#main, .fusion-footer) [style*="color: rgb(49, 133, 156)"],
:where(#main, .fusion-footer) [style*="color:rgb(49,133,156)"],
:where(#main, .fusion-footer) [style*="color: #31859c"],
:where(#main, .fusion-footer) [style*="color:#31859c"] {
	color: #26697c !important;
}

/* …but on a dark ground that darker teal would be worse, not better, so flip
   to the light variant there (#5fb6cd = 6.95:1 on navy). */
:where(.awb-dark-section, [style*="--awb-background-color:var(--awb-color8)"], [style*="--awb-bg-color:var(--awb-color8)"]) [style*="color: rgb(49, 133, 156)"],
:where(.awb-dark-section, [style*="--awb-background-color:var(--awb-color8)"], [style*="--awb-bg-color:var(--awb-color8)"]) [style*="color: #31859c"] {
	color: var(--t-teal-bright) !important;
}

/* The olive tile in the homepage "Big Vision" row carries white 30px text on
   #9bbb59 — 2.18:1, failing even the 3:1 large-text threshold. The colour is
   written inline on the column, so the override has to beat inline specificity.
   #657d31 is the same hue at 4.63:1, which passes at any size. */
.fusion-layout-column[style*="--awb-bg-color:#9bbb59"] {
	--awb-bg-color: #657d31 !important;
	--awb-bg-color-hover: #657d31 !important;
}

.fusion-layout-column[style*="--awb-bg-color:#9bbb59"] > .fusion-column-wrapper {
	background-color: #657d31 !important;
}

/* Footer legal line is hardcoded inline as #657a93 on #000d27 = 4.38:1, just
   under AA at 12px. Same hue, lifted to 7.26:1. */
.fusion-footer [style*="color: #657a93"],
.fusion-footer [style*="color:#657a93"] {
	color: #8fa0b8 !important;
}

/* -----------------------------------------------------------------------------
   5. Links, buttons, CTAs
   -------------------------------------------------------------------------- */
a {
	color: var(--t-teal-ink);
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}

.fusion-text a:not(.fusion-button) {
	text-decoration: underline;
}

a:hover {
	color: var(--t-blue);
}

/* Primary CTA. The old pill was a pale tint with small caps-spaced text; this
   keeps the rounded shape but gives it the weight a primary action needs. */
.fusion-button,
.fusion-button-default,
a.fusion-button.button-default {
	font-family: var(--t-sans);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.005em;
	line-height: 1.2;
	border-radius: 999px;
	padding: 0.95em 1.9em;
	min-height: 48px;              /* comfortable tap target */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	border: 1px solid transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	text-decoration: none;
}

.fusion-button.button-large {
	font-size: 1.0625rem;
	padding: 1.05em 2.2em;
}

.fusion-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--t-shadow-lift);
}

.fusion-button:active {
	transform: translateY(0);
}

/* App-store badge row */
.awb-store-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	align-items: center;
	margin-top: var(--s-5);
}

.awb-store-badges a {
	display: inline-flex;
	border-radius: 8px;
}

.awb-store-badges img {
	height: 48px;
	width: auto;
	display: block;
}

/* -----------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.awb-menu__main-a {
	font-family: var(--t-sans);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.005em;
}

.awb-menu__sub-a {
	font-family: var(--t-sans);
	font-size: 0.9375rem;
	font-weight: 450;
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* The active item was brand teal on navy — 3.81:1, below AA. */
.awb-menu__main-li.current-menu-item > .awb-menu__main-a,
.awb-menu__main-li.current-menu-ancestor > .awb-menu__main-a,
.awb-menu .current-menu-item > a {
	color: var(--t-teal-bright);
}

/* Dropdown parents are href="#". Show they open a menu rather than navigate. */
.awb-menu__main-li_with-arrow > .awb-menu__main-a[href="#"],
.awb-menu__main-li:has(.awb-menu__sub-ul) > .awb-menu__main-a[href="#"] {
	cursor: pointer;
}

/* -----------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

/* --- People -------------------------------------------------------------
   The team grids were the most visibly broken thing on the site: headshots
   at different aspect ratios, letterboxed backgrounds, cards of unequal
   height and buttons that never lined up. Normalising the image box and
   making the card a flex column fixes all of it at once. */
.fusion-layout-column:has(.awb-person-card),
.awb-person-card {
	height: 100%;
}

.awb-person-card {
	display: flex;
	flex-direction: column;
	background: var(--t-bg);
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	overflow: hidden;
	box-shadow: var(--t-shadow);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.awb-person-card:hover {
	box-shadow: var(--t-shadow-lift);
	transform: translateY(-2px);
}

.awb-person-card__media,
.awb-person-card .fusion-image-element,
.awb-person-card .imageframe-align-center {
	margin: 0;
}

.awb-person-card img,
.awb-person-card .fusion-imageframe img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 22%;
	width: 100%;
	height: auto;
	display: block;
	background: var(--t-bg-soft);
}

.awb-person-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--s-2);
	padding: var(--s-4) var(--s-4) var(--s-5);
}

.awb-person-card__name {
	font-family: var(--t-serif);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--t-navy);
}

.awb-person-card__role {
	font-family: var(--t-sans);
	font-size: 0.9375rem;
	font-style: normal;      /* the italic serif roles read as captions, not titles */
	color: var(--t-muted);
	line-height: 1.45;
}

/* Push the Bio control to a shared baseline across the row */
.awb-person-card__actions {
	margin-top: auto;
	padding-top: var(--s-4);
}

/* Nationality flags were 176px PNGs scaled to 42px. Constrain and align them. */
.awb-person-card img[src*="Flag-Icon"],
img[src*="Flag-Icon"] {
	width: 22px;
	height: auto;
	aspect-ratio: auto;
	border-radius: 2px;
	display: inline-block;
	vertical-align: middle;
}

/* --- People, as actually built in Fusion --------------------------------
   The people grids are plain Fusion columns, not a person element, so there is
   no class to hook. Every card does contain exactly one modal trigger
   (a.fusion-button[data-toggle="modal"] — the "Bio +" control), which makes
   :has() a precise handle for "this column is a person card".

   Three things were wrong and all three are structural rather than cosmetic:
     - cards in a row ended at different heights,
     - the Bio buttons therefore sat at different baselines,
     - headshots were cropped to 3:2 landscape, so portrait photographs were
       letterboxed against blurred backgrounds.
   -------------------------------------------------------------------------- */
.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) {
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	overflow: hidden;
	box-shadow: var(--t-shadow);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]):hover {
	box-shadow: var(--t-shadow-lift);
	transform: translateY(-2px);
}

/* Make the card a column so the Bio control can be pinned to its foot. */
.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) > .fusion-column-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Whatever block holds the Bio button is the last one — send it to the bottom
   so every button in a row shares a baseline regardless of name/role length. */
.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) > .fusion-column-wrapper > *:last-child {
	margin-top: auto;
}

/* Portrait crop for portrait photographs. The per-image --awb-object-position
   values Avada stores (y between 17% and 36%) already track the face, so they
   carry over correctly to a taller box. */
/* Avada writes --awb-aspect-ratio as an inline style on the element, so the
   override has to win against inline specificity. */
.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-image-element {
	--awb-aspect-ratio: 4 / 5 !important;
}

.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-image-element img {
	background: var(--t-bg-soft);
}

/* Names read as headings, roles as supporting captions. The old treatment made
   both compete: teal bold for the name, italic serif for the role. */
.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-title-heading {
	font-family: var(--t-serif);
	color: var(--t-navy);
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 600;
}

.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-text p,
.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-text em,
.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-text i {
	font-family: var(--t-sans);
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--t-muted);
}

/* The Bio control is a secondary action inside a card — it should not carry the
   same weight as the site's primary CTA. */
.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-button[data-toggle="modal"] {
	background: transparent;
	border: 1px solid var(--t-line);
	font-size: 0.9375rem;
	padding: 0.7em 1.4em;
	min-height: 44px;
	box-shadow: none;
}

/* Avada colours button labels on the inner span via its own custom property,
   so setting colour on the anchor alone leaves the text white-on-white. */
.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-button[data-toggle="modal"] .fusion-button-text,
.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-button[data-toggle="modal"] .awb-button__text {
	color: var(--t-teal-ink);
	font-weight: 600;
}

.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-button[data-toggle="modal"]:hover {
	background: var(--t-navy);
	border-color: var(--t-navy);
	transform: none;
	box-shadow: var(--t-shadow);
}

.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-button[data-toggle="modal"]:hover .fusion-button-text,
.fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) .fusion-button[data-toggle="modal"]:hover .awb-button__text {
	color: #ffffff;
}

/* --- News / press -------------------------------------------------------- */
.awb-news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--t-bg);
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	overflow: hidden;
	box-shadow: var(--t-shadow);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.awb-news-card:hover {
	box-shadow: var(--t-shadow-lift);
	transform: translateY(-2px);
}

.awb-news-card__media img {
	aspect-ratio: 16 / 9;
	object-fit: contain;         /* mastheads must not be cropped */
	object-position: center;
	width: 100%;
	background: var(--t-bg-soft);
	padding: var(--s-4);
	display: block;
}

.awb-news-card__media.is-photo img {
	object-fit: cover;
	padding: 0;
}

.awb-news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--s-2);
	padding: var(--s-4) var(--s-5) var(--s-5);
}

.awb-news-card__meta {
	font-family: var(--t-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--t-muted);
	display: flex;
	gap: var(--s-2);
	align-items: baseline;
	flex-wrap: wrap;
}

.awb-news-card__title {
	font-family: var(--t-serif);
	font-size: 1.1875rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--t-navy);
}

.awb-news-card__cta {
	margin-top: auto;
	padding-top: var(--s-3);
	font-family: var(--t-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--t-teal-ink);
}

/* --- Stat blocks --------------------------------------------------------- */
.awb-stat__figure {
	font-family: var(--t-serif);
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
	font-weight: 600;
	line-height: 1;
	color: var(--t-teal-ink);
	letter-spacing: -0.02em;
}

.awb-dark-section .awb-stat__figure {
	color: var(--t-teal-bright);
}

.awb-stat__label {
	font-family: var(--t-sans);
	font-size: 1rem;
	color: var(--t-muted);
	margin-top: var(--s-2);
	line-height: 1.5;
}

.awb-dark-section .awb-stat__label {
	color: var(--t-on-dark-muted);
}

/* Footnote / citation text was rendering around 8px. */
.awb-footnote,
.fusion-text sub,
.fusion-text small {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--t-muted);
}

/* -----------------------------------------------------------------------------
   8. Diagrams & media
   The strategy diagrams are exported slide rasters. Until they are rebuilt as
   vector/HTML, stop them shrinking into illegibility on a phone: let them keep
   a readable minimum width and scroll horizontally inside their own box.
   -------------------------------------------------------------------------- */
.awb-diagram {
	margin-block: var(--s-6);
}

.awb-diagram__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	background: var(--t-bg);
	padding: var(--s-4);
	scrollbar-width: thin;
}

.awb-diagram__scroll img {
	min-width: 720px;
	width: 100%;
	height: auto;
	display: block;
}

.awb-diagram__hint {
	font-family: var(--t-sans);
	font-size: 0.8125rem;
	color: var(--t-muted);
	margin-top: var(--s-2);
}

@media (min-width: 860px) {
	.awb-diagram__hint {
		display: none;
	}
}

img {
	max-width: 100%;
	height: auto;
}

/* Avada builds rows as `width:104%` with -2% side margins. At narrow viewports
   the right margin does not fully compensate and the page picks up ~8px of
   horizontal scroll (measured: 398px of content in a 390px viewport).
   `overflow-x: clip` fixes it without the usual cost of `hidden` — clip does
   not create a scroll container, so the sticky header keeps working. */
html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
	max-width: 100%;
}

/* -----------------------------------------------------------------------------
   9. Footer
   The footer held only a copyright line, three legal links and a LinkedIn icon:
   no wayfinding at all. Give it structure and legible contrast.
   -------------------------------------------------------------------------- */
.fusion-footer,
.fusion-footer-copyright-area,
.fusion-footer-widget-area {
	font-family: var(--t-sans);
}

.fusion-footer .awb-footer-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--s-6) var(--s-5);
}

.fusion-footer .awb-footer-nav h3,
.fusion-footer .awb-footer-nav__title {
	font-family: var(--t-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--t-teal-bright);
	margin-bottom: var(--s-3);
}

.fusion-footer .awb-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fusion-footer .awb-footer-nav li + li {
	margin-top: var(--s-2);
}

.fusion-footer .awb-footer-nav a {
	color: #dbe4f0;
	font-size: 0.9375rem;
	text-decoration: none;
	display: inline-block;
	padding: var(--s-1) 0;
}

.fusion-footer .awb-footer-nav a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* Copyright/legal line was ~3.8:1 grey on near-black. */
.fusion-footer-copyright-area,
.fusion-footer-copyright-area p,
.fusion-footer-copyright-area a {
	color: #c3ccda;
	font-size: 0.875rem;
}

.fusion-footer-copyright-area a:hover {
	color: #ffffff;
}

/* -----------------------------------------------------------------------------
   10. Accessibility
   -------------------------------------------------------------------------- */

/* Avada suppresses the focus ring in several places. Put a visible one back —
   without it the site is not keyboard-operable in practice. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.fusion-button:focus-visible,
.awb-menu__main-a:focus-visible,
.awb-menu__sub-a:focus-visible {
	outline: 3px solid var(--t-teal-bright);
	outline-offset: 2px;
	border-radius: 4px;
}

.awb-dark-section a:focus-visible,
.fusion-header-wrapper a:focus-visible,
.fusion-footer a:focus-visible {
	outline-color: var(--t-teal-bright);
}

/* Skip link — present in the markup but visually unreachable before. */
.fusion-skip-link,
a[href="#content"].skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--t-navy);
	color: #fff;
	padding: var(--s-3) var(--s-5);
	border-radius: 0 0 var(--t-radius) 0;
	font-family: var(--t-sans);
	font-weight: 600;
	text-decoration: none;
}

.fusion-skip-link:focus,
a[href="#content"].skip-link:focus {
	left: 0;
}

/* Minimum interactive target size (WCAG 2.2 AA, 2.5.8) */
.fusion-text a,
.awb-menu a,
.fusion-footer a {
	min-height: 24px;
}

/* Respect the OS reduced-motion preference. Avada's scroll animations and the
   LayerSlider hero ignore it by default. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.fusion-animated,
	[data-animationtype] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* -----------------------------------------------------------------------------
   11. Cookie bar
   It renders as a fixed strip flush against the hero CTA and overlaps content
   mid-page on inner pages. Lift it into a readable, self-contained bar.
   -------------------------------------------------------------------------- */
/* Kept deliberately compact. The bar is fixed to the bottom of the viewport and
   the homepage hero is 100vh with its CTA near the lower edge, so every extra
   pixel of bar height eats into that button. 79px of padding covered it
   outright; this holds the bar to roughly 48px.
   (The durable fix is to raise the CTA inside the LayerSlider hero — that is a
   content change, not a stylesheet one.) */
.fusion-privacy-bar {
	font-family: var(--t-sans);
	font-size: 0.875rem;
	line-height: 1.4;
	background: var(--t-navy-deep);
	color: #e6edf6;
	padding: var(--s-2) var(--s-5);
	box-shadow: 0 -8px 30px -12px rgba(0, 0, 0, 0.5);
}

.fusion-privacy-bar a {
	color: var(--t-teal-bright);
}

.fusion-privacy-bar .fusion-privacy-bar-acceptance {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding-inline: var(--s-5);
	border-radius: 999px;
	font-weight: 600;
}

/* Keep the bar from sitting on top of the last section's content */
body.fusion-privacy-bar-active .fusion-footer {
	padding-bottom: 5rem;
}