/**
 * Tolion inner pages — "Control Room", carried beyond the homepage.
 *
 * Loaded on every page except page-tolion-home.php (see
 * tolion_enqueue_inner_styles) and scoped under body.t-inner.
 *
 * These pages are real Fusion Builder documents: their content is worth
 * keeping and marketing still edits them in the builder, so this file restyles
 * Avada's rendered output instead of replacing templates. Two consequences
 * shape everything below:
 *
 *   - Avada writes its design decisions as --awb-* custom properties in inline
 *     style attributes. Inline wins the cascade, so the override has to happen
 *     on the *consuming* property (background-color, color) at a specificity
 *     above Avada's own — hence the #main prefixes. Attribute selectors are
 *     used where the original value carries intent worth preserving, e.g. a
 *     container the editor deliberately made dark stays a distinct band.
 *   - Avada's global palette (--awb-color1..8) is role-collided: --awb-color8
 *     is both the heading ink on light sections and the background of dark
 *     ones, --awb-color3 is both a light border and the footer's text colour.
 *     Redefining the palette therefore cannot work, and is not attempted.
 *
 * Sections
 *   1.  Fonts
 *   2.  Tokens
 *   3.  Page ground
 *   4.  Header and footer
 *   5.  Masthead
 *   6.  Fusion containers — bands
 *   7.  Fusion columns — panels
 *   8.  Typography
 *   9.  Links and buttons
 *   10. Images, diagrams, icons
 *   11. People
 *   12. Modals
 *   13. Content boxes
 *   14. News and press grids
 *   15. Heading colours at #main specificity — read the note before editing
 *   16. Responsive
 *   17. Focus and motion
 *   18. Company timeline and press line
 */

/* ------------------------------------------------------------------ *
 * 1. Fonts — self-hosted, same faces as the homepage.
 * ------------------------------------------------------------------ */

/* Archivo is a variable font: one file covers weight 400-700 and width
   75-125%. The width axis is what gives the headings their character, via
   font-variation-settings: "wdth" 118. Declaring font-stretch is what makes
   that axis available to the browser. */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 125%;
	font-display: swap;
	src: url("../fonts/archivo-400-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext carries the Czech diacritics in the team names — Ondřej, Kateřina,
   Šivic, Lískovec, Zahálka. Without it they fall back mid-word. */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 125%;
	font-display: swap;
	src: url("../fonts/archivo-400-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-mono-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-mono-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/dm-mono-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/dm-mono-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ *
 * 2. Tokens
 *
 * The palette is chrome.css's :root set since pass 33 (navy again since
 * pass 44) and is inherited here; this block only adds what the inner pages
 * need on top. (Until then the same navy values were restated here.)
 * Declared on the body class, not on #main: #wrapper, #boxed-wrapper and the
 * Theme Builder header are ancestors of the content, and custom properties
 * only inherit downward.
 * ------------------------------------------------------------------ */
body.t-inner {
	/* The ground the content sits on. One step up from the ink the header and
	   the masthead use, so an inner page opens on the same deep sky as the
	   homepage and then reads on the lighter navy of its products band —
	   the "not too dark" step, without leaving the palette. */
	--t-page: var(--t-h-ink-2);

	/* Vertical rhythm for the bands. One value, used everywhere, so pages with
	   very different container counts still read as the same document. */
	--t-band-y: clamp(44px, 4.4vw, 72px);

	/* Content measure. Avada's rows are sized by the builder and fight a
	   max-width, so the cap is applied as container padding instead. The
	   measure itself is --t-measure in chrome.css, shared with the hand-built
	   pages and the footer, so the content's left edge is the same on every
	   page at every width. */
	--t-gutter: max(24px, calc((100% - var(--t-measure)) / 2));
}

/* ------------------------------------------------------------------ *
 * 3. Page ground
 * ------------------------------------------------------------------ */
body.t-inner,
body.t-inner #boxed-wrapper,
body.t-inner #wrapper,
body.t-inner #main,
body.t-inner #content {
	background: var(--t-page);
	background-image: none;
}

body.t-inner {
	color: var(--t-h-fg-2);
	font-family: var(--t-h-sans);
	font-synthesis-weight: none;
}

/* One gutter for the whole page.
 *
 * Avada pads #main by 30px, each Fusion container adds its own padding and
 * pulls itself back out with a negative margin, and the row inside does the
 * same — leaving the masthead and the body copy on left edges 42px apart.
 * Zeroing the theme's padding lets .post-content span the viewport, so a
 * container can bleed edge to edge while the row inside it and the masthead
 * both centre the same measure. */
body.t-inner #main {
	padding-top: 0;
	padding-bottom: 0;
	/* Avada's own rule is html:not(.avada-has-site-width-percent) #main.width-100,
	   at (1,2,1) — higher than anything this file can reach without repeating the
	   theme's own class names, which would break the day the template changes. */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Avada's sidebar-less content column already caps the measure; the bands
   inside it supply their own padding. */
body.t-inner #main > .fusion-row {
	max-width: 100%;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* The rich-snippet spans Avada prints before the content are visually hidden
   by the theme, but they carry an inherited colour that flashes on slow
   paints. Nothing to do but keep them out of the flow. */
body.t-inner .rich-snippet-hidden {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 4. Header and footer
 *
 * Both are Avada Theme Builder layouts (post 197 and 252) rendering as
 * .fusion-tb-header / .fusion-tb-footer, not the classic header markup.
 * ------------------------------------------------------------------ */
/* Both moved to chrome.css. Scoping them to body.t-inner left the homepage —
   the one page without that class — on Avada's white dropdown and white
   toggle, and later on a footer that was a different colour from every other
   page's. A layout shared by every page has to be styled in the sheet that is
   loaded on every page. */

/* ------------------------------------------------------------------ *
 * 5. Masthead
 *
 * Prepended to the content by tolion_inner_masthead(). The eyebrow is the
 * page's top-level section taken from the Main menu, so it says something
 * true about where the reader is rather than decorating the title.
 * ------------------------------------------------------------------ */
/* Same gutter as a Fusion container, so the rule under the page title lines up
   with the copy below it. */
/* The band is the homepage hero at a page's scale: the same deep ink, the
   same blue and cyan glows at about a third of the strength, and a hairline
   at its foot. The content below sits on --t-page, one step lighter. */
body.t-inner .t-mast {
	position: relative;
	overflow: hidden;
	padding: clamp(44px, 6vw, 88px) var(--t-gutter) clamp(36px, 4.4vw, 60px);
	background: var(--t-h-ink);
	border-bottom: 1px solid var(--t-h-line);
}

body.t-inner .t-mast::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(55% 110% at 84% 0%, rgba(47, 114, 245, .28), transparent 70%),
		radial-gradient(36% 90% at 6% 120%, rgba(53, 200, 240, .13), transparent 70%);
}

body.t-inner .t-mast__in {
	position: relative;
}

body.t-inner .t-mast__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 520px;
	margin: 0 0 16px;
	font-family: var(--t-h-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--t-h-fg-3);
}

/* The rule that runs out from every section label on the homepage. */
body.t-inner .t-mast__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	margin-left: 6px;
	background: currentColor;
	opacity: .35;
}

body.t-inner .t-mast__dot {
	width: 7px;
	height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	background: var(--t-h-cyan);
	box-shadow: 0 0 0 4px rgba(53, 200, 240, .14);
}

/* The !important is Avada's fault, not laziness. Its responsive-typography JS
   adds .fusion-responsive-typography-calculated to headings it finds, and the
   matching rule sets font-size with !important inside @media (max-width:1000px)
   — which shrank this title to 16.7px on a phone while the desktop clamp looked
   correct. Nothing but !important outranks it. */
body.t-inner #main .t-mast__title {
	margin: 0;
	font-family: var(--t-h-sans);
	font-variation-settings: var(--t-h-wide);
	font-weight: 600;
	font-size: clamp(32px, 5vw, 54px) !important;
	line-height: 1.04;
	letter-spacing: -.022em;
	text-wrap: balance;
}

/* ------------------------------------------------------------------ *
 * 6. Fusion containers — bands
 *
 * Default is transparent on the ink ground. Containers the editor made dark
 * or brand-coloured keep their role as a distinct band, so the rhythm the
 * page was built with survives the recolour.
 * ------------------------------------------------------------------ */
/* Containers bleed to the viewport edge and carry only the vertical rhythm;
   the measure is set on the row inside. */
body.t-inner #main .fusion-fullwidth {
	background-color: transparent;
	/* background-image is deliberately left alone. Zeroing it here removed the
	   Martin Tolar portrait behind the copy on /experience/, which is a container
	   background; the .fullwidth-faded scrim below is what makes type readable
	   over it. */
	padding: var(--t-band-y) var(--t-gutter);
	margin-left: 0;
	margin-right: 0;
	border-radius: 0;
}

/* Fusion's gutter system is a negative side margin on the row cancelled by a
   positive one on each column wrapper — but the wrapper's share is a
   percentage of its own column, so a 1_1 gets 25.4px back against the row's
   27.6px and a 2_3 gets 17.7px. The columns therefore land on different left
   edges, which is why headings and the copy beneath them did not line up.
   Both halves are zeroed, and the measure comes from the container's gutter
   instead. Avada sets the row width from a percentage in its generated CSS, so
   this needs !important to land. Nested rows keep their bleed: that is what
   puts a person card's flag and LinkedIn icon at the card's edges. */
body.t-inner #main .fusion-fullwidth > .fusion-builder-row:not(.fusion-builder-row-inner) {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.t-inner #main .fusion-fullwidth[style*="--awb-background-color:#000"],
body.t-inner #main .fusion-fullwidth[style*="--awb-background-color:var(--awb-color5)"],
body.t-inner #main .fusion-fullwidth[style*="--awb-background-color:var(--awb-color8)"],
body.t-inner #main .fusion-fullwidth[style*="--awb-background-color:var(--awb-color2)"],
body.t-inner #main .fusion-fullwidth[style*="--awb-background-color:var(--awb-color3)"] {
	/* Pass 21 tried a panel fill here; on the people pages, where these hold
	   the whole card grid, that was a bright blue slab with cards barely
	   distinguishable on it. The About Us page — plain ground, hairlines —
	   is the look Luke liked, so the band is its edges only. */
	background-color: transparent;
	border-top: 1px solid var(--t-h-line);
	border-bottom: 1px solid var(--t-h-line);
}

/* Some containers are only a spacer around a title — 10px of padding either
   side. Restoring the full band rhythm to those leaves a title marooned, so
   they keep a tighter measure. */
body.t-inner #main .fusion-fullwidth[style*="--awb-padding-top:10px"] {
	padding-top: clamp(28px, 3vw, 44px);
	padding-bottom: clamp(12px, 1.4vw, 20px);
}

body.t-inner #main .fusion-fullwidth[style*="--awb-padding-top:10px"] + .fusion-fullwidth,
body.t-inner #main .fusion-container-anchor + .fusion-container-anchor .fusion-fullwidth {
	padding-top: clamp(8px, 1vw, 16px);
}

/* Containers with a photographic background — the Martin Tolar portrait behind
   the copy on /about-us/ — carry the photo on Avada's .fullwidth-faded div
   itself, as an inline background-image. So the scrim has to be a pseudo
   element layered over it: setting `background` on .fullwidth-faded replaces
   the photo instead of veiling it, and the section renders as flat ink.
   Aimed left to right, so the type sits on near-solid ground while the subject
   still reads on the right. The rgba is --t-page's channels: the scrim must
   land exactly on the ground the container sits on. On navy the long fade
   of passes 21–33 is right (the steep paper curve of pass 34 is in bk44). */
/* Avada's fixed parallax anchors the photo to the viewport, so `cover` sizes it
   against the window rather than against the band it sits in. The crop is
   composed at the top of the page and has slid to a magnified fragment of his
   shoulder by the time the band is scrolled past — the taller the band, the
   worse it gets. The photo is sized to its own band instead. Below the parallax
   breakpoint the container paints it directly, so both elements are covered. */
body.t-inner #main .fullwidth-box.faded-background,
body.t-inner #main .fullwidth-box.faded-background .fullwidth-faded {
	background-attachment: scroll !important;
}

/* Avada paints a container's background image only above 1024px unless the
   editor also uploaded a "medium" and a "small" variant. Below that it swaps
   the declaration to --awb-background-image-medium / -small, which are unset
   here, so background-image resolves to `none` and the photo simply vanishes —
   on this page and on any other container with a desktop-only background.
   Feeding the desktop variables back in restores it at every width. The sizing
   vars have to come with it: they are swapped by the same rule, and without
   them the photo tiles at native size from the top left corner. */
@media only screen and (max-width: 1024px) {
	body.t-inner #main .fullwidth-box.faded-background .fullwidth-faded {
		background-image: var(--awb-background-image);
		background-position: var(--awb-background-position, center right);
		background-size: var(--awb-background-size, cover);
		background-repeat: no-repeat;
	}
}

body.t-inner #main .fullwidth-faded::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(var(--t-h-ink-2-rgb), .97) 0%,
		rgba(var(--t-h-ink-2-rgb), .93) 30%,
		rgba(var(--t-h-ink-2-rgb), .74) 48%,
		rgba(var(--t-h-ink-2-rgb), .40) 68%,
		rgba(var(--t-h-ink-2-rgb), .12) 88%,
		rgba(var(--t-h-ink-2-rgb), 0) 100%
	);
}

/* Side by side, the portrait is a 3:2 landscape in a band three or four times
   wider than it is tall, so `cover` scaled it to the band's width and cropped
   the top and bottom – the top of his head went at 1280px and most of it at
   1920 (Luke, pass 60: "Martin's head gets cut off"). The file fades to
   transparent along its own left edge, so it can be sized to the band's
   height instead and pinned right: nothing is cropped, and the left part of
   the band is the ground the scrim already keeps dark. The band gets a floor
   so the whole figure is still a decent size on a wide screen. */
@media (min-width: 1101px) {
	body.t-inner #main .fullwidth-box.faded-background {
		min-height: clamp(560px, 34vw, 720px);
	}

	body.t-inner #main .fullwidth-box.faded-background .fullwidth-faded {
		background-size: auto 100% !important;
		background-position: right center !important;
	}
}

/* Narrower than a laptop there is no room for the subject beside the copy, so
   the composition stacks: the photo becomes a band across the top of the
   container and the copy sits below it on solid ink.
 *
 * Which element carries the photo changes underneath us. Above roughly 800px it
 * is Avada's .fullwidth-faded overlay. Below that the parallax script deletes
 * that element outright and re-declares --awb-background-image on the container
 * instead — so a band hung off the overlay silently disappears, and one hung off
 * the container is empty at 900px because the variable is not on it yet. Both
 * cases are handled, told apart by whether the overlay is still in the DOM.
 *
 * The threshold is 1100px, not the 900px this started at. The band used to hold
 * a two-line lede; it now carries the founding story, and a 74ch measure beside
 * the portrait runs across his face at every width below roughly 1300px.
 * Stacking earlier beats squeezing the copy into a column too narrow to read. */
@media (max-width: 1100px) {
	body.t-inner #main .fullwidth-box.faded-background {
		--t-photo-h: clamp(220px, 46vw, 340px);
		--t-photo-pos: 68% 22%;
		padding-top: calc(var(--t-photo-h) + 26px);
	}

	/* Only the bottom edge of the band needs veiling now. It has to reach the
	   page ground exactly, or the seam reads as a hard edge. */
	body.t-inner #main .fullwidth-faded::after,
	body.t-inner #main .fullwidth-box.faded-background:not(:has(.fullwidth-faded))::after {
		background: linear-gradient(
			180deg,
			rgba(var(--t-h-ink-2-rgb), .06) 0%,
			rgba(var(--t-h-ink-2-rgb), .26) 46%,
			rgba(var(--t-h-ink-2-rgb), .70) 74%,
			rgba(var(--t-h-ink-2-rgb), .94) 92%,
			rgba(var(--t-h-ink-2-rgb), 1) 100%
		);
	}

	/* Overlay still present: shrink it from a full-height cover to the band. */
	body.t-inner #main .fullwidth-box.faded-background .fullwidth-faded {
		height: var(--t-photo-h);
		min-height: 0;
		background-position: var(--t-photo-pos);
	}

	/* Overlay gone: rebuild it out of the container's own pseudo elements. Avada
	   gives the container position:relative and hidden overflow, and the row
	   inside carries z-index:10, so both land behind the copy without needing a
	   stacking context of their own. */
	body.t-inner #main .fullwidth-box.faded-background:not(:has(.fullwidth-faded)) {
		background-image: none !important;
	}

	body.t-inner #main .fullwidth-box.faded-background:not(:has(.fullwidth-faded))::before,
	body.t-inner #main .fullwidth-box.faded-background:not(:has(.fullwidth-faded))::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: var(--t-photo-h);
		pointer-events: none;
	}

	body.t-inner #main .fullwidth-box.faded-background:not(:has(.fullwidth-faded))::before {
		background: var(--awb-background-image) var(--t-photo-pos) / cover no-repeat;
	}
}

/* Side by side, the measure is whichever is narrower: the page's reading width,
   or the ground the scrim actually keeps dark. The subject's face begins around
   55% of the band, so the copy has to stop before it — a 74ch line reaches 57%
   of the band at 1440px and 66% at 1024px, which is how it came to be printed
   over him. */
@media (min-width: 1101px) {
	/* Section 8's `.fusion_builder_column_1_1 > .fusion-column-wrapper >
	   .fusion-text { max-width: 74ch }` is (1,3,1) and sits later in the file, so
	   it wins a tie. The wrapper is named here to get above it. */
	body.t-inner #main .fullwidth-box.faded-background .fusion-column-wrapper > .fusion-title,
	body.t-inner #main .fullwidth-box.faded-background .fusion-column-wrapper > .fusion-text {
		max-width: min(74ch, 52%);
	}
}

/* At phone widths a cover crop of a wide frame leaves the subject too small to
   read as a portrait, so the band zooms in on him instead. */
@media (max-width: 560px) {
	body.t-inner #main .fullwidth-box.faded-background {
		--t-photo-h: clamp(250px, 64vw, 300px);
		--t-photo-pos: 70% 14%;
	}

	body.t-inner #main .fullwidth-box.faded-background .fullwidth-faded {
		background-size: 150% auto;
	}

	body.t-inner #main .fullwidth-box.faded-background:not(:has(.fullwidth-faded))::before {
		background-size: 150% auto;
	}
}

body.t-inner #main .fusion-fullwidth[style*="--awb-background-color:#000"],
body.t-inner #main .fusion-fullwidth[style*="--awb-background-color:var(--awb-color5)"],
body.t-inner #main .fusion-fullwidth[style*="--awb-background-color:var(--awb-color8)"],
body.t-inner #main .fusion-fullwidth[style*="--awb-background-color:var(--awb-color2)"],
body.t-inner #main .fusion-fullwidth[style*="--awb-background-color:var(--awb-color3)"] {
	/* Pass 21 tried a panel fill here; on the people pages, where these hold
	   the whole card grid, that was a bright blue slab with cards barely
	   distinguishable on it. The About Us page — plain ground, hairlines —
	   is the look Luke liked, so the band is its edges only. */
	background-color: transparent;
	border-top: 1px solid var(--t-h-line);
	border-bottom: 1px solid var(--t-h-line);
}

/* Some containers are only a spacer around a title — 10px of padding either
   side. Restoring the full band rhythm to those leaves a title marooned, so
   they keep a tighter measure. */
body.t-inner #main .fusion-fullwidth[style*="--awb-padding-top:10px"] {
	padding-top: clamp(28px, 3vw, 44px);
	padding-bottom: clamp(12px, 1.4vw, 20px);
}

body.t-inner #main .fusion-fullwidth[style*="--awb-padding-top:10px"] + .fusion-fullwidth,
body.t-inner #main .fusion-container-anchor + .fusion-container-anchor .fusion-fullwidth {
	padding-top: clamp(8px, 1vw, 16px);
}

/* ------------------------------------------------------------------ *
 * 7. Fusion columns — panels
 * ------------------------------------------------------------------ */
body.t-inner #main .fusion-column-wrapper {
	background-image: none;
}

/* Column fills are all dropped, whatever the editor set them to.
 *
 * On the old white page a white column was invisible and a light-grey one was
 * a faint tint; neither was a card. Promoting them turned every page into a
 * stack of boxes, and because the builder sizes nested columns with
 * width:104% and negative side margins, adjacent boxes did not even share a
 * left edge — /medportal-platform/ had two overlapping panels 25px out of
 * alignment. Surface variation is carried by the containers in section 6, and
 * the things that genuinely are cards — person cards, content boxes, news
 * items — are built as cards explicitly further down.
 *
 * Saying transparent is required, not optional: left unstyled these fall
 * through to Avada's own --awb-bg-color and paint white slabs on the ink.
 */
body.t-inner #main .fusion-layout-column[style*="--awb-bg-color:"] > .fusion-column-wrapper {
	background-color: transparent;
}

body.t-inner #main .fusion-layout-column[style*="--awb-border-color:var(--awb-color3)"] > .fusion-column-wrapper {
	border-color: var(--t-h-line);
}

/* Avada's column shadow reads as a smudge on a dark ground. */
body.t-inner #main .fusion-column-has-shadow {
	box-shadow: none;
}

/* Top-level columns carry percentage-derived side padding from the builder —
   26.5px on a 1_1, 17.7px on a 2_3, 0 on others — so headings and the prose
   beneath them landed on three different left edges (83 / 109 / 75 on
   /medportal-platform/). Zeroing it puts the page on one axis, set by the
   container gutter. Nested columns keep theirs; that is where the builder's
   internal spacing actually lives.
   Person cards opt out below: their padding is the card's inset. */
body.t-inner #main .fusion-layout-column.fusion_builder_column:not(:has(.fusion-image-element):has(.fusion-button)) > .fusion-column-wrapper {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* Fusion bleeds its top-level rows past the container padding with a negative
   side margin (-26px here), which put the body copy 42px to the left of the
   masthead rule above it. Nested rows keep their bleed — that is what makes a
   person card's flag and LinkedIn icon sit at the card's edges. */
body.t-inner #main .fusion-fullwidth > .fusion-builder-row:not(.fusion-builder-row-inner) {
	margin-left: 0;
	margin-right: 0;
}

/* Person cards are a real component, so they are built as one rather than
   inheriting whatever fill the editor happened to leave on the column.
 *
 * The card is drawn on the *wrapper*. Pass 1 drew its own card on the column
 * outside it — `.fusion-layout-column:has(> .fusion-column-wrapper
 * .fusion-button[data-toggle="modal"])` in tolion.css, with a #dde3ea border
 * and a navy shadow, both chosen for a white page. Left in place the two
 * stack, and every headshot ends up ringed in white. */
body.t-inner #main .fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-toggle="modal"]) {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

body.t-inner #main .fusion-layout-column:has(.fusion-image-element):has(.fusion-button) > .fusion-column-wrapper {
	background: linear-gradient(180deg, var(--t-h-panel) 0%, var(--t-page) 100%);
	border: 1px solid var(--t-h-line);
	border-radius: var(--t-h-r);
	padding: 14px;
}

body.t-inner #main .fusion-layout-column:has(.fusion-image-element):has(.fusion-button) > .fusion-column-wrapper:hover {
	border-color: var(--t-h-line-2);
}

/* The builder pages centre their prose by flanking it with empty 1_6 spacer
   columns — four of them on /technology/ alone, 221px each. Once the type is
   left-aligned those spacers only produce a ragged left edge, with headings
   flush to the grid and the paragraphs beneath them indented. Collapsing the
   empty ones puts both on the same axis. */
body.t-inner #main .fusion-layout-column:has(> .fusion-column-wrapper:empty) {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 8. Typography
 * ------------------------------------------------------------------ */
body.t-inner #main .fusion-title-heading,
body.t-inner #main .content-box-heading,
body.t-inner #main h1,
body.t-inner #main h2,
body.t-inner #main h3,
body.t-inner #main h4,
body.t-inner #main h5,
body.t-inner #main h6 {
	font-family: var(--t-h-sans);
	font-variation-settings: var(--t-h-wide);
	font-weight: 600;
	letter-spacing: -.016em;
	line-height: 1.12;
	text-wrap: balance;
}

/* The builder pages use h1 for every section head — /technology/ alone has
   three. Rather than rewrite content the reader cannot see, the in-content
   headings are set to one section scale and the masthead carries the page
   title. */
/* !important for the same reason as the masthead: Avada's
   .fusion-responsive-typography-calculated rule sets font-size with !important
   under 1000px, and its curve does not match this one — it was rendering these
   section heads at 53px on a tablet against 38px on a desktop, so the type got
   *bigger* as the screen got smaller. */
body.t-inner #main .post-content .fusion-title h1.fusion-title-heading,
body.t-inner #main .post-content .fusion-title h2.fusion-title-heading {
	font-size: clamp(24px, 2.9vw, 35px) !important;
}

body.t-inner #main .post-content .fusion-title h3.fusion-title-heading {
	font-size: clamp(19px, 1.9vw, 23px) !important;
	font-weight: 500;
	letter-spacing: -.008em;
	line-height: 1.34;
	color: var(--t-h-fg-2);
}

body.t-inner #main .fusion-title {
	margin-bottom: 0;
}

/* The heading that only repeats the page title, marked by
   tolion_hide_duplicate_title(). The wrapper goes too: on four of the seven
   pages the repeat sits alone in its own builder row, and hiding only the
   heading would leave that row's padding behind as a gap under the masthead. */
body.t-inner #main .t-dup-title,
body.t-inner #main .fusion-title:has(.t-dup-title) {
	display: none;
}

/* When that repeat is the only thing in its container — /press-release/,
   /collaborations/, /medportal-platform/, /scientific-advisory-board/ — the
   container's own band padding was still there: 148px of nothing between
   the masthead and the first item. A container with no column content other
   than title elements goes with it. (A :has() may not nest inside another
   :has(), even through :not() — the browser drops the whole rule — so the
   inner test is "nothing but .fusion-title", not "nothing but the repeat".
   On the four pages the repeat is alone in its column.) */
body.t-inner #main .fusion-fullwidth:has(.t-dup-title):not(:has(.fusion-column-wrapper > :not(.fusion-title))) {
	display: none;
}

/* Centred heads over centred prose in full-bleed bands is the shape of the old
   site. Everything is pulled to the grid's left edge; person cards opt back
   out in section 11, where centring is doing real work in a narrow column. */
body.t-inner #main .fusion-title-heading,
body.t-inner #main .fusion-title,
body.t-inner #main .fusion-text,
body.t-inner #main .fusion-text :is(p, li) {
	text-align: left;
}

/* The same rule again with !important, because the contact block and the
   careers "not currently hiring" line carry text-align:center as an inline
   style and an inline style beats any selector. Left as it was, the contact
   column read as centred prose under a centred label beside a left-aligned
   form, and the careers paragraph sat centred under a left-aligned heading.
   Person cards are unaffected — their centring comes from a rule on
   .person-desc, not from .fusion-text, which is why they were already exempt
   from the rule above. If a text block ever needs to be centred on purpose,
   give it a class and add it here rather than removing the !important. */
body.t-inner #main .fusion-text,
body.t-inner #main .fusion-text :is(p, li) {
	text-align: left !important;
}

body.t-inner #main .title-heading-center {
	text-align: left;
}

body.t-inner #main .fusion-title + .fusion-text,
body.t-inner #main .fusion-title + .fusion-title {
	margin-top: 18px;
}

body.t-inner #main .fusion-text {
	font-family: var(--t-h-sans);
	font-size: 17px;
	line-height: 1.62;
	color: var(--t-h-fg-2);
}

/* tolion.css sets the running face and size on #main p / #main li, which is
   more specific than .fusion-text, so the family and size have to be restated
   on the elements themselves rather than inherited from the block. */
body.t-inner #main .fusion-text :is(p, li),
body.t-inner #main .post-content > p,
body.t-inner #main .post-content > ul li,
body.t-inner #main .post-content > ol li {
	font-family: var(--t-h-sans);
	font-size: 17px;
	line-height: 1.62;
	color: var(--t-h-fg-2);
}

body.t-inner #main .fusion-text p {
	margin: 0 0 1em;
}

body.t-inner #main .fusion-text :is(ul, ol) {
	margin: 0 0 1.2em;
	padding-left: 1.25em;
}

body.t-inner #main .fusion-text li {
	margin-bottom: .5em;
}

body.t-inner #main .fusion-text li::marker {
	color: var(--t-h-fg-3);
}

body.t-inner #main .fusion-text :is(b, strong) {
	color: var(--t-h-fg);
	font-weight: 600;
}

/* Emphasis picks up a #56617a from the theme that measures 2.8:1 on the panel.
   Italics are the emphasis; the colour was never carrying meaning. */
body.t-inner #main .fusion-text :is(em, i) {
	color: inherit;
}

/* Avada's "h4 as body copy" pattern: the About Us lede is an <h4> carrying
   inline `text-align: center; font-size: 24px`. It is a paragraph, not a
   heading, and centring one block on an otherwise left-aligned page is the
   look this revamp is moving away from. Inline styles mean !important. */
body.t-inner #main .fusion-text h4 {
	text-align: left !important;
	font-size: clamp(19px, 1.7vw, 22px) !important;
	line-height: 1.5 !important;
	font-weight: 400;
	letter-spacing: -.008em;
	color: var(--t-h-fg);
	max-width: 60ch;
}

/* Running text gets a readable measure. Columns narrower than that are left
   to the builder's own width. */
body.t-inner #main .fusion_builder_column_1_1 > .fusion-column-wrapper > .fusion-text {
	max-width: 74ch;
}

/* ------------------------------------------------------------------ *
 * 9. Links and buttons
 * ------------------------------------------------------------------ */
body.t-inner #main a:not(.fusion-button):not(.fb-icon-element) {
	color: var(--t-h-cyan);
	text-underline-offset: .18em;
	text-decoration-thickness: from-font;
}

body.t-inner #main a:not(.fusion-button):not(.fb-icon-element):hover {
	color: var(--t-h-blue-lit);
}

/* Pass 1 darkened the brand teal to #26697c for contrast on white, and pinned
   it with !important because the editor had pasted the colour inline. On the
   ink ground that repair inverts: the darker teal now measures 3.0:1. Same
   selectors, flipped to the light end of the same hue family. */
body.t-inner :where(#main, .fusion-tb-footer) [style*="color: rgb(49, 133, 156)"],
body.t-inner :where(#main, .fusion-tb-footer) [style*="color:rgb(49,133,156)"],
body.t-inner :where(#main, .fusion-tb-footer) [style*="color: #31859c"],
body.t-inner :where(#main, .fusion-tb-footer) [style*="color:#31859c"] {
	color: var(--t-h-cyan) !important;
}

/* Titles and text the editor coloured with the brand teal or the deep navy.
   Navy on ink is invisible, so both are remapped. */
body.t-inner #main [style*="--awb-text-color:var(--awb-color4)"] .fusion-title-heading {
	color: var(--t-h-cyan);
}

body.t-inner #main [style*="color: var(--awb-color8)"],
body.t-inner #main [style*="color:var(--awb-color8)"] {
	color: var(--t-h-fg) !important;
}

/* Names on the people pages are inline-coloured with the brand teal, which
   measures 3.5:1 on the ink ground and reads as a link the name is not. A name
   is not an accent, so it takes the plain foreground; the teal elsewhere goes
   to cyan. */
body.t-inner #main :is(b, strong)[style*="var(--awb-color4)"] {
	color: var(--t-h-fg) !important;
}

body.t-inner #main :is(span, p, a, i, li)[style*="var(--awb-color4)"] {
	color: var(--t-h-cyan) !important;
}

body.t-inner #main .fusion-button {
	font-family: var(--t-h-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: 999px;
	border-width: 1px;
	padding: 13px 24px;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body.t-inner #main .fusion-button.button-default,
body.t-inner #main .fusion-button-default {
	background: transparent;
	background-image: none;
	border: 1px solid var(--t-h-line-2);
	color: var(--t-h-fg);
}

body.t-inner #main .fusion-button.button-default:hover,
body.t-inner #main .fusion-button-default:hover {
	background: var(--t-h-panel-2);
	border-color: var(--t-h-cyan);
	color: var(--t-h-fg);
}

/* Fusion wraps a button in a div with an inline `text-align:center`, which on a
   left-aligned page leaves the CTA floating in the middle of the measure — most
   visibly on /about-us/, where it lands over the portrait. Person cards keep
   their centring: there the button is centred under a centred caption. */
body.t-inner #main .fusion-layout-column.fusion_builder_column:not(:has(.fusion-image-element):has(.fusion-button)) div[style*="text-align:center"]:has(> .fusion-button) {
	text-align: left !important;
}

body.t-inner #main .fusion-button .fusion-button-text {
	color: inherit;
}

/* ------------------------------------------------------------------ *
 * 10. Images, diagrams, icons
 * ------------------------------------------------------------------ */
body.t-inner #main .fusion-imageframe {
	border-radius: 12px;
	overflow: hidden;
	display: block;
}

body.t-inner #main .fusion-imageframe img {
	display: block;
	width: 100%;
	height: auto;
}

/* The engine and platform diagrams were drawn for a light page: on ink they
   read as a slab unless they are framed as a plate. The frame is the honest
   move — the artwork is a document, and it now looks like one. */
body.t-inner #main .fusion-image-element .fusion-imageframe:has(img[src*="Tolion-AI-Engine"]),
body.t-inner #main .fusion-image-element .fusion-imageframe:has(img[src*="MedPortal"]),
body.t-inner #main .fusion-image-element .fusion-imageframe:has(img[src*="Diagram"]) {
	border: 1px solid var(--t-h-line);
	background: var(--t-h-panel);
	padding: clamp(10px, 1.4vw, 18px);
}

/* The engine diagram redrawn for the ink ground (pass 54) is a lowercase
   file the rule above never matched, so it sat bare on the page. Its own
   boxes are the panel colour, so the plate here is a shade below it – edged,
   lifted, with the front page's soft blue glow – rather than the panel fill,
   which swallowed the boxes. Pass 58, Luke: "slightly improved visually",
   not a rebuild. (The portal flow diagram shared this rule until the
   Clinician Portal page was removed in pass 61.) */
body.t-inner #main .fusion-image-element .fusion-imageframe:has(img[src*="tolion-ai-engine"]) {
	border: 1px solid var(--t-h-line-2);
	border-radius: var(--t-h-r);
	background: linear-gradient(180deg, rgba(31, 58, 140, .38) 0%, rgba(23, 42, 112, .7) 100%);
	padding: clamp(14px, 1.8vw, 24px);
	margin-top: 22px;
	box-shadow: 0 30px 80px -50px rgba(0, 0, 0, .9), 0 0 90px -30px rgba(47, 114, 245, .45);
}

/* /technology/: the engine's three moves were a plain numbered list. They
   keep their order but read as steps: a mono cyan numeral in the margin,
   a hairline between one and the next, the copy in its own column. */
body.page-id-77 #main .fusion-text ol {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	counter-reset: t-step;
	max-width: 62ch;
}

body.page-id-77 #main .fusion-text ol li {
	position: relative;
	margin: 0;
	padding: 14px 0 14px 48px;
	border-top: 1px solid var(--t-h-line);
	counter-increment: t-step;
}

body.page-id-77 #main .fusion-text ol li:last-child {
	border-bottom: 1px solid var(--t-h-line);
}

body.page-id-77 #main .fusion-text ol li::before {
	content: "0" counter(t-step);
	position: absolute;
	left: 0;
	top: 17px;
	font-family: var(--t-h-mono);
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--t-h-cyan);
}

@media (max-width: 760px) {
	body.page-id-77 #main .fusion-text ol li { padding-left: 40px; }
}

body.t-inner #main .fb-icon-element {
	border-color: var(--t-h-line-2) !important;
	color: var(--t-h-fg-2) !important;
}

body.t-inner #main .fb-icon-element:hover {
	border-color: var(--t-h-cyan) !important;
	color: var(--t-h-cyan) !important;
}

/* The flag icons on the people pages are 176px-wide PNGs sitting next to a
   32px LinkedIn circle. Capping them puts the pair on one baseline. */
body.t-inner #main .fusion-imageframe img[src*="Flag-Icon"] {
	width: 26px;
	height: auto;
	border-radius: 3px;
}

body.t-inner #main .fusion-separator {
	border-color: var(--t-h-line) !important;
}

body.t-inner #main .fusion-separator .fusion-separator-border,
body.t-inner #main hr {
	border-top-color: var(--t-h-line);
}

/* ------------------------------------------------------------------ *
 * 11. People
 *
 * Team, Board, Scientific Advisory Board and Strategic Partners are all the
 * same construction: a portrait, a flag and a LinkedIn icon, a name/role
 * caption, and a button opening a modal bio.
 * ------------------------------------------------------------------ */
body.t-inner #main .fusion_builder_column_inner .fusion-image-element {
	margin-bottom: 0;
}

/* A person card is a column holding both a portrait and the button that opens
   its bio modal. Scoping the crop this way keeps it off the engine diagrams
   and the news thumbnails, which an earlier blanket img rule was squaring off
   mid-subject. The modals themselves render outside the column, so they cannot
   be used as the discriminator. */
body.t-inner #main .fusion-layout-column:has(.fusion-image-element):has(.fusion-button) {
	text-align: center;
}

body.t-inner #main .fusion-layout-column:has(.fusion-image-element):has(.fusion-button) > .fusion-column-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 12px;
}

body.t-inner #main .fusion-layout-column:has(.fusion-image-element):has(.fusion-button) .fusion-imageframe img:not([src*="Flag-Icon"]) {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 20%;
}

/* Pins the bio button to the foot of the card so a two-line name does not
   knock the row of buttons out of alignment. */
body.t-inner #main .fusion-layout-column:has(.fusion-image-element):has(.fusion-button) .fusion-builder-row-inner:last-child {
	margin-top: auto;
}

/* Pass 98: the button sits alone in a half-width nested column. Between about
   640 and 1060px that column fell under the button's own width and "BIO +"
   broke into a letter per line. */
body.t-inner #main .fusion-layout-column:has(.fusion-image-element):has(.fusion-button) .fusion-builder-row-inner:last-child > .fusion_builder_column_inner:only-child {
	width: 100% !important;
}

body.t-inner #main .fusion-layout-column:has(.fusion-image-element):has(.fusion-button) .fusion-button {
	white-space: nowrap;
}

/* !important because the left-alignment rule in section 8 now carries it too,
   to beat the inline centring on the contact block — and an !important
   declaration wins over a plain one whatever the specificity. Person cards are
   the one place centring is doing real work: a portrait over a two-line name in
   a narrow column. */
body.t-inner #main .fusion-layout-column:has(.fusion-image-element):has(.fusion-button) :is(.fusion-text, .fusion-text p) {
	text-align: center !important;
}

/* The name/role caption. Fusion emits it as <b>Name</b><br><i>Role</i>, so
   the two lines are addressed through those tags rather than added classes. */
body.t-inner #main .fusion-layout-column:has(.fusion-image-element):has(.fusion-button) .fusion-text p > b {
	display: block;
	font-family: var(--t-h-sans);
	font-variation-settings: var(--t-h-wide);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -.01em;
	color: var(--t-h-fg);
}

/* Scoped to person cards: an <i> in ordinary prose is emphasis, not a role
   label, and the mono-uppercase treatment turned a name on /contact/ into what
   looked like a field heading. */
body.t-inner #main .fusion-layout-column:has(.fusion-image-element):has(.fusion-button) .fusion-text p > :is(i, em) {
	display: block;
	margin-top: 3px;
	font-family: var(--t-h-mono);
	font-style: normal;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	/* --t-h-fg-3 measures 4.0:1 on the card panel, under AA at this size.
	   !important because the advisory-board and partners pages set #56617a on
	   the <i> inline — 2.8:1 — which no stylesheet rule can outrank. */
	color: var(--t-h-fg-2) !important;
}

/* The board page is one flex container of 1_4 person columns, so its five
   directors fell as four across and one beneath. Luke wants Martin, the
   founder and executive chairman, alone on the first row with the four
   directors under him (pass 23). The column holding his Bio button is
   stretched to the full row and its card kept at the width of the others
   (a 1_4 column minus Avada's 1.92% left spacing), so the rest wrap beneath.
   Nothing changes in the builder; the page stays editable. Off below 640px,
   where Avada already stacks every column. */
@media (min-width: 641px) {
	body.page-id-357 #main .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-target=".fusion-modal.martin"]) {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}

	body.page-id-357 #main .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column:has(> .fusion-column-wrapper .fusion-button[data-target=".fusion-modal.martin"]) > .fusion-column-wrapper {
		width: 23.08%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ------------------------------------------------------------------ *
 * 12. Modals — the bios
 * ------------------------------------------------------------------ */
body.t-inner .fusion-modal .modal-content {
	background-color: var(--t-h-panel);
	border: 1px solid var(--t-h-line-2);
	border-radius: var(--t-h-r);
	color: var(--t-h-fg-2);
}

body.t-inner .fusion-modal .modal-header,
body.t-inner .fusion-modal .modal-footer {
	background-color: transparent;
	border-color: var(--t-h-line);
}

body.t-inner .fusion-modal .modal-title {
	font-family: var(--t-h-sans);
	font-variation-settings: var(--t-h-wide);
	font-weight: 600;
	color: var(--t-h-fg);
}

body.t-inner .fusion-modal .modal-body,
body.t-inner .fusion-modal .modal-body :is(p, li, span) {
	color: var(--t-h-fg-2);
}

body.t-inner .fusion-modal .modal-body :is(b, strong) {
	color: var(--t-h-fg);
}

body.t-inner .fusion-modal .close {
	color: var(--t-h-fg-2);
	opacity: 1;
	text-shadow: none;
}

body.t-inner .fusion-modal .close:hover {
	color: var(--t-h-fg);
}

body.t-inner .modal-backdrop {
	background-color: #050914;
}

body.t-inner .modal-backdrop.in {
	opacity: .82;
}

/* ------------------------------------------------------------------ *
 * 13. Content boxes
 * ------------------------------------------------------------------ */
body.t-inner #main .content-box-column {
	background: linear-gradient(180deg, var(--t-h-panel) 0%, var(--t-page) 100%);
	border: 1px solid var(--t-h-line);
	border-radius: var(--t-h-r);
}

body.t-inner #main .content-box-column .content-container,
body.t-inner #main .content-box-column .content-box-heading {
	color: var(--t-h-fg-2);
}

body.t-inner #main .content-box-column .content-box-heading {
	color: var(--t-h-fg);
	font-size: 20px;
}

body.t-inner #main .content-box-column .icon i {
	color: var(--t-h-cyan);
}

body.t-inner #main .fusion-content-box-hover:hover {
	border-color: var(--t-h-line-2);
}

/* ------------------------------------------------------------------ *
 * 14. News and press grids
 * ------------------------------------------------------------------ */
/* No overflow:hidden here: Avada's masonry sizes these cards in JS after
   layout, and clipping the box cut the last line off every long headline. The
   radius is carried by the thumbnail instead. */
body.t-inner #main .fusion-post-grid {
	background: linear-gradient(180deg, var(--t-h-panel) 0%, var(--t-page) 100%);
	border: 1px solid var(--t-h-line);
	border-radius: var(--t-h-r);
}

body.t-inner #main .fusion-post-grid .fusion-post-slideshow,
body.t-inner #main .fusion-post-grid .fusion-image-wrapper {
	border-radius: calc(var(--t-h-r) - 1px) calc(var(--t-h-r) - 1px) 0 0;
	overflow: hidden;
}

body.t-inner #main .fusion-post-grid .fusion-post-content-container {
	padding-bottom: 18px;
}

body.t-inner #main .fusion-post-grid .fusion-post-content-container,
body.t-inner #main .fusion-post-grid .fusion-post-content-wrapper {
	background-color: transparent;
}

/* The Fortune wordmark is a transparent PNG whose every opaque pixel is one
   ink, #231f20 — drawn for the old white site, it reads as an empty tile on a
   navy card. Inverting a single flat colour cannot distort it. Keyed on the
   file stem so it survives Avada picking a different srcset size. */
body.t-inner #main [class*="fusion-post-"] img[src*="FORTUNE-LOGO"] {
	filter: invert(1);
}

/* Same on /collaborations/: GarminHealthLogo-Black.svg declares no fills, so
   it renders pure black. Invert, then a brightness step to land on #e0e0e0. */
body.t-inner #main img[src*="GarminHealthLogo"] {
	filter: invert(1) brightness(.88);
}

/* Pass 78 (Luke: "the media sub-pages look a bit uglier"). The grid cards on
   /news/ and /czech-news/ carried every thumbnail at its own ratio — a
   portrait photo made one card twice the height of its neighbour and the
   masonry packed them into a ragged wall — and the two wordmarks filled their
   tiles edge to edge. Every thumbnail is now the same 16:10 crop, the two
   logos sit small on a panel inside that crop, and Avada's own inline card
   frame (a 1px near-white border with a 3px foot) goes, since the article
   already carries the panel border above. !important where Avada writes the
   value inline. */
body.t-inner #main .fusion-post-grid .fusion-post-wrapper {
	border: 0 !important;
}

body.t-inner #main .fusion-post-grid .fusion-post-slideshow {
	border: 0;
	margin: 0;
}

/* Pass 98 (final sweep): the card frame sat on the masonry item itself, whose
   2.5px padding is Avada's gutter, so the cards tiled edge to edge. The frame
   moves onto the wrapper inside and the item's padding becomes a real 8px
   gutter; the container's negative margin keeps the outer edges on the page
   grid. !important where Avada writes the value inline. */
body.t-inner #main .fusion-blog-layout-grid.fusion-posts-container {
	margin: -8px -8px 0 !important;
}

body.t-inner #main .fusion-post-grid {
	padding: 8px !important;
	background: none;
	border: 0;
	border-radius: 0;
}

body.t-inner #main .fusion-post-grid .fusion-post-wrapper {
	box-sizing: border-box;
	height: 100%;
	background: linear-gradient(180deg, var(--t-h-panel) 0%, var(--t-page) 100%);
	border: 1px solid var(--t-h-line) !important;
	border-radius: var(--t-h-r);
}

body.t-inner #main .fusion-post-grid .fusion-image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	/* Top-biased: the few portrait photos are standing figures, and a centred
	   crop took the head off. Landscape photos lose almost nothing either way. */
	object-position: 50% 15%;
}

/* The panel goes on the wrapper, not the img: the Fortune wordmark carries
   filter: invert(1) (above), and a background on the img itself would be
   inverted with it — it came out mustard. */
body.t-inner #main .fusion-post-grid .fusion-image-wrapper:has(img[src*="Newsweek_Logo"], img[src*="FORTUNE-LOGO"]) {
	background: var(--t-h-ink-2);
}

body.t-inner #main .fusion-post-grid .fusion-image-wrapper img[src*="Newsweek_Logo"],
body.t-inner #main .fusion-post-grid .fusion-image-wrapper img[src*="FORTUNE-LOGO"] {
	box-sizing: border-box;
	padding: 17% 16%;
	object-fit: contain;
}

body.t-inner #main .fusion-post-grid .fusion-post-content-wrapper {
	padding: 22px 24px 24px !important;
}

body.t-inner #main .fusion-post-grid .fusion-post-content-container {
	padding-bottom: 0;
}

/* Avada's 20px under the text block sat on top of the wrapper's own padding. */
body.t-inner #main .fusion-post-grid .fusion-post-content {
	margin-bottom: 0;
}

/* On /news/ the excerpt is the outlet ("Forbes", "iDNES.cz"): set as a mono
   source line under the headline rather than as body copy. */
body.t-inner #main .fusion-post-grid .fusion-post-content-container p {
	margin: 10px 0 0;
	font-family: var(--t-h-mono);
	font-size: 12px;
	letter-spacing: .06em;
	line-height: 1.5;
	color: var(--t-h-fg-3);
}

/* The blog element renders in several layouts — /news/ is a masonry grid of
   .fusion-post-grid, /press-release/ a list of .fusion-post-medium — so the
   type rules key off the shared post classes rather than one layout's. */
body.t-inner #main :is(.fusion-post-grid, [class*="fusion-post-"]) .entry-title,
body.t-inner #main :is(.fusion-post-grid, [class*="fusion-post-"]) .entry-title a,
body.t-inner #main .blog-shortcode-post-title,
body.t-inner #main .blog-shortcode-post-title a {
	font-family: var(--t-h-sans);
	font-variation-settings: var(--t-h-wide);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.24;
	color: var(--t-h-fg);
	text-decoration: none;
}

body.t-inner #main :is(.fusion-post-grid, [class*="fusion-post-"]) .entry-title a:hover,
body.t-inner #main .blog-shortcode-post-title a:hover {
	color: var(--t-h-cyan);
}

body.t-inner #main :is(.fusion-post-grid, [class*="fusion-post-"]) :is(.fusion-post-content, .fusion-post-content-container, p) {
	color: var(--t-h-fg-2);
	font-family: var(--t-h-sans);
	font-size: 15px;
	line-height: 1.6;
}

/* The list layouts sit directly on the ink rather than in a card, so they need
   a divider to read as separate items. */
body.t-inner #main article[class*="fusion-post-"]:not(.fusion-post-grid) {
	border-bottom: 1px solid var(--t-h-line);
	padding-bottom: clamp(20px, 2.4vw, 30px);
	margin-bottom: clamp(20px, 2.4vw, 30px);
}

body.t-inner #main article[class*="fusion-post-"]:not(.fusion-post-grid):last-child {
	border-bottom: 0;
}

body.t-inner #main .fusion-meta-info,
body.t-inner #main .fusion-single-line-meta,
body.t-inner #main .fusion-meta-info a {
	font-family: var(--t-h-mono);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--t-h-fg-3);
	border-color: var(--t-h-line);
}

/* Pass 79 (Luke): on /press-release/ Avada rules the date / Read More row
   above and below, and with the item divider that made three lines per
   release. The two around the meta row go; the divider between items stays. */
body.t-inner #main article[class*="fusion-post-"]:not(.fusion-post-grid) .fusion-meta-info {
	border-top: 0;
	border-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 16px;
}

body.t-inner #main .fusion-load-more-button,
body.t-inner #main .fusion-blog-pagination .pagination a {
	background-color: transparent;
	border: 1px solid var(--t-h-line-2);
	color: var(--t-h-fg);
	border-radius: 999px;
	font-family: var(--t-h-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 12px;
}

body.t-inner #main .fusion-load-more-button:hover,
body.t-inner #main .fusion-blog-pagination .pagination a:hover {
	border-color: var(--t-h-cyan);
	color: var(--t-h-cyan);
}

/* ------------------------------------------------------------------ *
 * 14b. Forms
 *
 * The careers and contact forms are Avada Form elements; their fields carry
 * --awb-color2 as a fill, which is a near-white on the ink ground.
 * ------------------------------------------------------------------ */
body.t-inner #main :is(.fusion-form-input, .fusion-form-textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea, select) {
	background-color: var(--t-h-panel);
	border: 1px solid var(--t-h-line-2);
	border-radius: 8px;
	color: var(--t-h-fg);
	font-family: var(--t-h-sans);
	font-size: 16px;
}

body.t-inner #main :is(.fusion-form-input, textarea, select):focus {
	border-color: var(--t-h-cyan);
	background-color: var(--t-h-panel-2);
	outline: none;
}

body.t-inner #main ::placeholder {
	color: var(--t-h-fg-3);
	opacity: 1;
}

/* Avada draws a Font Awesome glyph inside the field for any input given an
   icon in the builder — here only the email one. It inherits the form's light
   theme colour, #002049, which on the ink field is 1.2:1 and reads as a smear
   rather than an envelope. The padding is Avada's own and already correct. */
body.t-inner #main .fusion-form-input-with-icon .awb-form-icon {
	color: var(--t-h-fg-3);
}

body.t-inner #main .fusion-form-consent-field p,
body.t-inner #main .fusion-form-consent-field .label,
body.t-inner #main .fusion-form-consent-field a {
	font-family: var(--t-h-sans);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--t-h-fg-2);
}

body.t-inner #main :is(.fusion-form-label, label) {
	color: var(--t-h-fg-2);
	font-family: var(--t-h-mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* White on --t-h-blue measures 4.33:1 — fine for the large figures it carries
   on the homepage, under AA for a 13px button label. One step deeper takes it
   to 5.6:1 without leaving the blue. */
body.t-inner #main .fusion-form-form-wrapper .fusion-button {
	background: #2560d8;
	border-color: #2560d8;
	color: #fff;
}

body.t-inner #main .fusion-form-form-wrapper .fusion-button:hover {
	background: var(--t-h-blue-lit);
	border-color: var(--t-h-blue-lit);
	color: #06101f;
}

/* Avada paints a column's background into its own span. On /focus/ that gave
   the target-group list a flat panel with no padding, so the text sat on its
   left edge; the same span appeared on the since-removed Clinician Portal page
   from a corrupted column (pass 56). The panel adds nothing on the ink ground: the cards and content
   boxes carry their own edges. Drop it everywhere. */
body.t-inner #main .fusion-column-inner-bg-image {
	background-color: transparent !important;
	background-image: none !important;
}

/* Small print — consent lines, footnotes, image credits — inherits a colour
   chosen for a white page and lands under 3:1 on the ink ground. */
body.t-inner #main :is(.fusion-form-consent, .fusion-form-consent *, small, sub, sup, figcaption) {
	color: var(--t-h-fg-2);
}

/* The before/after slider on /focus/ labels its two halves in a colour that
   was legible over the light artwork and is not over the dark one. */
body.t-inner #main .fusion-image-before-after-before-label,
body.t-inner #main .fusion-image-before-after-after-label {
	color: var(--t-h-fg-2) !important;
	font-family: var(--t-h-mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* The slider handle and its arrows were drawn for the light artwork. */
body.t-inner #main .fusion-image-before-after-handle {
	background: var(--t-h-cyan);
}

body.t-inner #main :is(.fusion-image-before-after-left-arrow, .fusion-image-before-after-right-arrow) {
	border-right-color: var(--t-h-cyan);
	border-left-color: var(--t-h-cyan);
}

/* Avada leaves a fixed margin above the blog element that reads as a hole
   between the section head and the first card. */
body.t-inner #main .fusion-blog-shortcode {
	margin-top: 0;
}

body.t-inner #main .fusion-title + .fusion-blog-shortcode {
	margin-top: 24px;
}

/* ------------------------------------------------------------------ *
 * 15. Heading colours at #main specificity
 *
 * DO NOT fold these back into section 8. tolion.css carries
 *   #main h1:not([style*="color"]):not([class*="fusion-title-heading"]),
 *   #main h2:not(...) { color: var(--t-navy); }
 * at specificity (1,1,0). A rule prefixed only with body.t-inner is (0,2,0)
 * for the class part but the ID in the other selector still wins, painting
 * headings navy-on-ink — invisible. These restate the colour with an ID of
 * their own. Symptom if removed: masthead and section titles disappear while
 * their italic runs still show.
 * ------------------------------------------------------------------ */
body.t-inner #main .t-mast__title,
body.t-inner #main .post-content h1,
body.t-inner #main .post-content h2,
body.t-inner #main .post-content h4,
body.t-inner #main .post-content h5,
body.t-inner #main .post-content h6,
body.t-inner #main .fusion-title h1.fusion-title-heading,
body.t-inner #main .fusion-title h2.fusion-title-heading {
	color: var(--t-h-fg);
}

/* ------------------------------------------------------------------ *
 * 16. Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
	body.t-inner {
		--t-band-y: clamp(40px, 8vw, 64px);
	}

	body.t-inner {
		--t-gutter: 22px;
	}
}

@media (max-width: 640px) {
	body.t-inner #main .fusion-text {
		font-size: 16px;
	}

	body.t-inner #main .t-mast__title {
		font-size: clamp(29px, 8vw, 38px) !important;
	}
}

/* ------------------------------------------------------------------ *
 * 18. Company timeline and press line
 *
 * [tolion_timeline] on /about-us/ and [tolion_press] on /news/, both
 * inserted by tolion_insert_page_blocks() in functions.php. They render
 * inside .post-content, so the heading colours restated in section 15 for
 * h2 already reach the title; h3 needs its own line here.
 * ------------------------------------------------------------------ */
body.t-inner #main .t-tl {
	padding: var(--t-band-y) var(--t-gutter);
	border-top: 1px solid var(--t-h-line);
}

body.t-inner #main .t-tl__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 16px;
	font-family: var(--t-h-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--t-h-fg-3);
}

body.t-inner #main .t-tl__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .35;
}

body.t-inner #main .post-content .t-tl__title {
	margin: 0;
	max-width: 24ch;
	font-family: var(--t-h-sans);
	font-variation-settings: var(--t-h-wide);
	font-weight: 600;
	font-size: clamp(24px, 2.9vw, 35px) !important;
	line-height: 1.12;
	letter-spacing: -.016em;
	text-wrap: balance;
	color: var(--t-h-fg);
}

body.t-inner #main .t-tl__list {
	position: relative;
	margin: 36px 0 0;
	padding: 0 0 0 36px;
	list-style: none;
}

body.t-inner #main .t-tl__list::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--t-h-line);
}

/* The fill runs the whole rail until timeline.js takes over the height. */
body.t-inner #main .t-tl__fill {
	position: absolute;
	left: 8px;
	top: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(180deg, var(--t-h-cyan), var(--t-h-green));
	box-shadow: 0 0 18px rgba(53, 200, 240, .6);
	transition: height .5s ease;
}

body.t-inner #main .t-tl__list--js .t-tl__fill {
	height: 0;
}

body.t-inner #main .t-tl__item {
	position: relative;
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 26px;
	margin: 0;
	padding: 20px 0;
	border-top: 1px solid var(--t-h-line);
	color: var(--t-h-fg);
	transition: color .35s ease;
}

body.t-inner #main .t-tl__item::before {
	content: "";
	position: absolute;
	left: -33px;
	top: 28px;
	width: 12px;
	height: 12px;
	border: 2px solid var(--c);
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 25%, transparent);
	transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Unlit until scrolled to, only once the script is running. */
body.t-inner #main .t-tl__list--js .t-tl__item:not(.is-on) {
	color: var(--t-h-fg-3);
}

body.t-inner #main .t-tl__list--js .t-tl__item:not(.is-on)::before {
	border-color: var(--t-h-line-2);
	background: var(--t-page);
	box-shadow: none;
}

body.t-inner #main .t-tl__item em {
	padding-top: 4px;
	font-style: normal;
	font-family: var(--t-h-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

body.t-inner #main .post-content .t-tl__item h3 {
	margin: 0;
	font-family: var(--t-h-sans);
	font-variation-settings: var(--t-h-wide);
	font-weight: 600;
	font-size: 20px !important;
	line-height: 1.2;
	letter-spacing: -.012em;
	color: inherit;
}

body.t-inner #main .t-tl__item p {
	margin: 6px 0 0;
	max-width: 62ch;
	font-family: var(--t-h-sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--t-h-fg-2);
}

body.t-inner #main .t-tl__list--js .t-tl__item:not(.is-on) p {
	color: var(--t-h-fg-3);
}

body.t-inner #main .t-press {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 36px;
	padding: 6px var(--t-gutter) 0;
}

body.t-inner #main .t-press span {
	font-family: var(--t-h-mono);
	font-size: 11px;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: var(--t-h-fg-3);
}

body.t-inner #main .t-press b {
	font-family: var(--t-h-sans);
	font-variation-settings: "wdth" 125;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: .02em;
	color: var(--t-h-fg-2);
}

@media (max-width: 700px) {
	body.t-inner #main .t-tl__item {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	body.t-inner #main .t-press {
		gap: 10px 22px;
	}

	body.t-inner #main .t-press b {
		font-size: 17px;
	}
}

/* ------------------------------------------------------------------ *
 * 17. Focus and motion
 * ------------------------------------------------------------------ */
body.t-inner :is(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--t-h-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	body.t-inner *,
	body.t-inner *::before,
	body.t-inner *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* ------------------------------------------------------------------ *
 * 18. Two-column platform pages — /technology/ and /medwiki/
 * Both were a single 74ch column and nothing else, so at 1440px the right
 * 45% of the band sat bare (Luke, pass 63). The copy keeps the shared left
 * edge; a second column holds what the page already had — the engine
 * diagram on /technology/, the four MedWiki tenets as cards. In the builder
 * the columns are 2_5 / 3_5 with type_medium / type_small 1_1, so they
 * stack below 1024px on Avada's own breakpoints.
 * ------------------------------------------------------------------ */
/* Section 7 zeroes the wrapper's side padding at (1,6,1) — the :not(:has():has())
   counts two classes — so the class is doubled to tie it, and this sits later. */
body.t-inner #main .fusion-layout-column.fusion_builder_column.t-col-copy.t-col-copy > .fusion-column-wrapper {
	padding-right: clamp(28px, 4.5vw, 72px);
}

body.t-inner #main .t-col-figure .fusion-image-element {
	margin: 0;
}

body.t-inner #main .t-col-figure .fusion-imageframe {
	display: block;
	width: 100%;
	max-width: 100% !important;
}

body.t-inner #main .t-col-figure .fusion-imageframe img {
	width: 100%;
	height: auto;
}

body.t-inner #main .t-col-figure .t-figcap p {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--t-h-fg-3);
	max-width: 62ch;
}

body.t-inner #main .t-mw-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

body.t-inner #main .t-mw-card {
	background: linear-gradient(180deg, var(--t-h-panel) 0%, var(--t-page) 100%);
	border: 1px solid var(--t-h-line);
	border-radius: var(--t-h-r);
	padding: clamp(16px, 1.7vw, 24px);
}

body.t-inner #main .t-mw-card h3 {
	margin: 0 0 10px;
	font-family: var(--t-h-sans);
	font-size: 17px !important; /* Avada's small-screen h3 rule is !important */
	font-weight: 600;
	letter-spacing: -.008em;
	line-height: 1.3;
	color: var(--t-h-cyan);
}

body.t-inner #main .t-mw-card ul {
	margin: 0;
	padding-left: 18px;
}

body.t-inner #main .t-mw-card li {
	font-size: 15px;
	line-height: 1.5;
	color: var(--t-h-fg-2);
}

body.t-inner #main .t-mw-card li + li {
	margin-top: 6px;
}

@media (max-width: 1024px) {
	body.t-inner #main .fusion-layout-column.fusion_builder_column.t-col-copy.t-col-copy > .fusion-column-wrapper {
		padding-right: 0;
	}

	body.t-inner #main .t-col-figure,
	body.t-inner #main .t-col-grid {
		margin-top: 28px;
	}
}

@media (max-width: 640px) {
	body.t-inner #main .t-mw-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ *
 * 19. The 404 page (404.php in this theme)
 * The masthead is the shared one from section 5. Below it: a lede on the
 * left, eight destination cards on the right — the same card as MedWiki's
 * tenets so the two read as one family.
 * ------------------------------------------------------------------ */
body.t-inner .t-404 {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 4.5vw, 72px);
	padding: var(--t-band-y) var(--t-gutter) calc(var(--t-band-y) * 1.5);
}

body.t-inner #main .t-404__lede {
	margin: 0;
	max-width: 40ch;
	font-family: var(--t-h-sans);
	font-size: clamp(17px, 1.35vw, 19px);
	line-height: 1.55;
	color: var(--t-h-fg-2);
}

body.t-inner .t-404__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-content: start;
}

/* (1,3,2): above section 9's link rule at (1,3,1), which would otherwise
   paint these cyan and underlined. */
body.t-inner #main .t-404 .t-404__links a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--t-h-line);
	border-radius: var(--t-h-r);
	background: linear-gradient(180deg, var(--t-h-panel) 0%, var(--t-page) 100%);
	color: var(--t-h-fg);
	text-decoration: none;
	transition: border-color .15s ease;
}

body.t-inner #main .t-404 .t-404__links a:hover,
body.t-inner #main .t-404 .t-404__links a:focus-visible {
	border-color: var(--t-h-line-2);
	color: var(--t-h-fg);
}

body.t-inner #main .t-404 .t-404__links b {
	font-family: var(--t-h-sans);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.008em;
}

body.t-inner #main .t-404 .t-404__links span {
	font-size: 14px;
	line-height: 1.4;
	color: var(--t-h-fg-3);
}

@media (max-width: 900px) {
	body.t-inner .t-404 {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 560px) {
	body.t-inner .t-404__links {
		grid-template-columns: minmax(0, 1fr);
	}

}

/* ------------------------------------------------------------------ *
 * 20. Pass 86 — single posts, legal headings, the press-release PDF
 * ------------------------------------------------------------------ */

/* A long link (an email address, a URL) in a post must break rather than
   run past a phone's edge. */
body.t-inner #main .post-content a {
	overflow-wrap: anywhere;
}

/* Avada's responsive typography scaled a 12px h6 (bylines, "Last updated")
   to 6.4px on a phone. */
body.t-inner #main .post-content h6 {
	font-size: 12px !important;
	line-height: 1.55 !important;
}

/* h3 was the one heading level section 15 left to Avada's colour, so the
   Privacy Policy's section heads read dim against the Consumer Health page's
   white h2s. :where() keeps the card and timeline h3 rules above this one. */
body.t-inner #main .post-content :where(h3) {
	color: var(--t-h-fg);
}

/* The press-release PDF: the plugin prints a file icon and the upload's
   filename ("… 23DEC2025 FINAL WITH LINKS"), which broke mid-word on a
   phone. One pill with a fixed label instead; the filename stays in the
   link for assistive tech and the download itself is unchanged. */
body.t-inner #main .download-attachments {
	margin: 32px 0 0;
}

/* Pass 88: the pill lives in the masthead, under the date. */
body.t-inner.single #main .t-mast .download-attachments {
	margin: 24px 0 0;
}

body.t-inner #main .download-attachments .da-attachments-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.t-inner #main .download-attachments .attachment-icon,
body.t-inner #main .download-attachments br {
	display: none;
}

body.t-inner #main .download-attachments .attachment-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	border: 1px solid var(--t-h-line-2);
	border-radius: 999px;
	max-width: 100%;
	font-size: 0;
	line-height: 1.4;
	color: var(--t-h-fg) !important; /* the post-content link colour and its ::before rule both outrank a plain declaration */
	text-decoration: none;
	transition: border-color .2s, background-color .2s;
}

body.t-inner #main .download-attachments .attachment-link::before {
	content: "Download the press release (PDF) ↓";
	font-family: var(--t-h-mono);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: normal;
	color: var(--t-h-fg) !important;
}

body.t-inner #main .download-attachments .attachment-link:hover,
body.t-inner #main .download-attachments .attachment-link:focus-visible {
	border-color: var(--t-h-cyan);
	background: rgba(66, 216, 248, .08);
}

/* ------------------------------------------------------------------ *
 * 21. Pass 87 — single posts (single.php in this theme)
 *
 * One reading column for the copy, the masthead the inner pages already
 * have, the share row and previous/next as cards at the end. Avada's own
 * Previous/Next row and its post title are no longer printed at all.
 * ------------------------------------------------------------------ */
body.t-inner.single {
	--t-post-col: 760px;
}

/* Press-release titles run to 130 characters; the page masthead's 54px would
   take six lines. */
body.t-inner.single #main .t-mast--post .t-mast__title {
	max-width: 28ch;
	font-size: clamp(28px, 3.2vw, 44px) !important;
	line-height: 1.1;
	letter-spacing: -.018em;
}

body.t-inner.single #main .t-mast__meta {
	margin: 18px 0 0;
	font-family: var(--t-h-mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t-h-fg-3);
}

/* The copy: the row narrows to the column and the 74ch cap on the text block
   goes, so the block fills the column instead of hugging its left edge. */
body.t-inner.single #main .post-content .fusion-row {
	max-width: var(--t-post-col) !important; /* Avada's site-width rule on the row outranks a plain declaration */
	margin-left: auto;
	margin-right: auto;
}

body.t-inner.single #main .post-content .fusion_builder_column_1_1 > .fusion-column-wrapper > .fusion-text {
	max-width: none;
}

/* Five news posts are two containers (story, then source line); each carried
   a full band of padding top and bottom, leaving a hole between them. */
body.t-inner.single #main .post-content .fusion-fullwidth + .fusion-fullwidth {
	padding-top: 0;
}

/* The releases were pasted with justified paragraphs and centred italic
   decks; under a left-set masthead both read as a different document. */
body.t-inner.single #main .post-content .fusion-text :is(p, h2, h3, h4, h5, h6) {
	text-align: left !important;
}

/* Quotations in the releases are paragraphs with an inline 40px indent. */
body.t-inner.single #main .post-content .fusion-text p[style*="padding-left"] {
	padding-left: 22px !important;
	border-left: 2px solid rgba(66, 216, 248, .45);
}

body.t-inner.single #main .post-content .fusion-text img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border-radius: 12px;
}

/* Footer: share row, then the two cards, then the way back. */
body.t-inner.single #main .t-post__foot {
	width: min(var(--t-post-col), 100% - 44px);
	margin: 0 auto;
	padding: 36px 0 var(--t-band-y);
}

body.t-inner.single #main .fusion-sharing-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	padding: 18px 0;
	background: transparent !important;
	border-top: 1px solid var(--t-h-line);
	border-bottom: 1px solid var(--t-h-line);
	box-shadow: none;
}

/* "Share This Story, Choose Your Platform!" becomes a mono label. */
body.t-inner.single #main .fusion-sharing-box h4 {
	margin: 0;
	font-size: 0 !important;
	line-height: 1;
}

body.t-inner.single #main .fusion-sharing-box h4::before {
	content: "Share";
	font-family: var(--t-h-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t-h-fg-3);
}

body.t-inner.single #main .fusion-sharing-box .fusion-social-networks {
	margin: 0;
}

body.t-inner.single #main .fusion-sharing-box .fusion-social-network-icon {
	margin: 0 14px 0 0;
	font-size: 15px;
	color: var(--t-h-fg-3) !important;
	transition: color .2s;
}

body.t-inner.single #main .fusion-sharing-box .fusion-social-network-icon:hover,
body.t-inner.single #main .fusion-sharing-box .fusion-social-network-icon:focus-visible {
	color: var(--t-h-cyan) !important;
}

body.t-inner.single #main .t-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 28px;
}

body.t-inner.single #main .t-postnav__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 132px;
	padding: 20px 22px;
	border: 1px solid var(--t-h-line);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
	color: var(--t-h-fg);
	text-decoration: none;
	transition: border-color .2s, transform .2s;
}

body.t-inner.single #main .t-postnav__card--empty {
	border-style: dashed;
	opacity: .35;
}

body.t-inner.single #main .t-postnav__card--next {
	align-items: flex-end;
	text-align: right;
}

body.t-inner.single #main a.t-postnav__card:hover,
body.t-inner.single #main a.t-postnav__card:focus-visible {
	border-color: var(--t-h-cyan);
	transform: translateY(-2px);
	color: var(--t-h-fg);
}

body.t-inner.single #main .t-postnav__k,
body.t-inner.single #main .t-postnav__d {
	font-family: var(--t-h-mono);
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--t-h-fg-3);
}

body.t-inner.single #main .t-postnav__d {
	margin-top: auto;
	letter-spacing: .08em;
	text-transform: none;
}

body.t-inner.single #main .t-postnav__t {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-family: var(--t-h-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -.008em;
	color: var(--t-h-fg);
}

body.t-inner.single #main .t-post__all {
	margin: 26px 0 0;
	font-family: var(--t-h-sans);
	font-size: 15px;
}

@media (max-width: 640px) {
	body.t-inner.single #main .t-mast--post .t-mast__title {
		font-size: clamp(22px, 6.2vw, 28px) !important;
	}

	body.t-inner.single #main .t-postnav {
		grid-template-columns: 1fr;
	}

	body.t-inner.single #main .t-postnav__card--empty {
		display: none;
	}

	body.t-inner.single #main .t-postnav__card--next {
		align-items: flex-start;
		text-align: left;
	}
}