/*
Theme Name: Astra Child 2025 - Treeningfookus
Theme URI: https://wpastra.com/
Template: astra
Author: Henek Tomson
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.7.1753522709
Updated: 2025-07-26 09:38:29

*/

:root {
	--tf-ink: #111111;
	--tf-charcoal: #252525;
	--tf-paper: #f4f2ed;
	--tf-white: #ffffff;
	--tf-muted: #b8b8b8;
	--tf-mint: #b7ffd3;
	--tf-green: #6deba0;
	--tf-yellow: #fef871;
	--tf-amber: #fcbe57;
	--tf-coral: #f38080;
	--tf-sky: #b3deff;
	--tf-blue: #67baff;
	--tf-silver: #c4c4c4;
	--tf-line-dark: rgba(255, 255, 255, 0.18);
	--tf-line-light: rgba(17, 17, 17, 0.18);
	--tf-action: var(--tf-blue);
	--tf-spectrum: linear-gradient(90deg, var(--tf-mint), var(--tf-green), var(--tf-yellow), var(--tf-amber), var(--tf-coral), var(--tf-sky), var(--tf-blue));
	--tf-shell: min(1380px, calc(100vw - 80px));
}

html {
	scroll-behavior: smooth;
}

body.home {
	background: var(--tf-ink);
	color: var(--tf-white);
}

body.home .site-content,
body.home .ast-container,
body.home #primary {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.home .site-content > .ast-container {
	max-width: none;
}

#masthead {
	position: relative !important;
	background: var(--tf-ink);
}

#masthead > .main-header-bar-wrap,
#ast-fixed-header .main-header-bar-wrap {
	position: relative;
}

#masthead > .main-header-bar-wrap::after,
#ast-fixed-header .main-header-bar-wrap::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	height: 3px;
	background: var(--tf-spectrum);
	content: "";
}

#masthead > .main-header-bar-wrap .main-header-bar,
#ast-fixed-header .main-header-bar {
	min-height: 92px;
	border: 0;
	background: var(--tf-ink) !important;
}

#ast-fixed-header .main-header-bar {
	background: rgba(17, 17, 17, 0.96) !important;
	backdrop-filter: blur(14px);
}

#masthead .site-title a,
#masthead .site-description,
#masthead .main-header-menu > .menu-item > .menu-link,
#masthead .main-header-menu > .menu-item > .ast-menu-toggle,
#masthead .main-header-menu-toggle,
#ast-fixed-header .site-title a,
#ast-fixed-header .site-description,
#ast-fixed-header .main-header-menu > .menu-item > .menu-link,
#ast-fixed-header .main-header-menu > .menu-item > .ast-menu-toggle,
#ast-fixed-header .main-header-menu-toggle {
	color: var(--tf-white) !important;
}

#masthead .main-header-menu > .menu-item > .menu-link,
#ast-fixed-header .main-header-menu > .menu-item > .menu-link {
	font-weight: 650;
}

/* The brand icon, under the site title and tagline. It is inserted after the
   tagline by tf_brand_icon_after_tagline() in functions.php, so it appears on
   every page the masthead does. Decorative and non-focusable: the site title
   right above it is the real, labelled link home. */
/* Below Astra's header breakpoint the title wrap stretches to the whole header
   column, so centring inside it would strand the branding in the middle of the
   bar. Shrink-wrapping first makes "centre" the centre of the branding itself. */
#masthead .ast-site-title-wrap,
#ast-fixed-header .ast-site-title-wrap {
	width: max-content;
	max-width: 100%;
	text-align: center;
}

/* Give the tagline its own line of breathing room below the logo lockup. */
#masthead .site-description,
#ast-fixed-header .site-description {
	margin-top: 8px;
}

/* Mark above the name, both inside one link home. */
.tf-brand {
	display: block;
	/* The nudged mark is already given its space back on the image itself, so
	   only a hair is needed here; the tagline's own leading supplies the rest.
	   This is the value that holds the branding block at the 69px it was before
	   the mark moved onto the name's line. */
	margin-bottom: 1px;
	/* The mark is drawn past the bottom of its line; nothing must clip it. */
	overflow: visible;
}

/* Mark beside the name, not above it. On its own line the mark had to stay
   small to keep the branding short; on the name's line the two share the line's
   height, so the mark can be almost twice the size and the header bar does not
   grow. */
.tf-brand a {
	display: inline-flex;
	flex-direction: row;
	/* Baseline, not centre: the name should stand on the grey bar the way the
	   coloured bars do. A replaced element's baseline is its bottom margin edge,
	   so the negative margin on the mark below lifts that edge to the top of the
	   bar and the text lands on the same line. */
	align-items: baseline;
	gap: 6px;
	text-decoration: none;
}

.tf-brand a:focus-visible {
	outline: 2px solid var(--tf-white);
	outline-offset: 3px;
}

/* Sized from the id so the header's own image rules cannot win.

   The icon file is square with the mark in the middle band and roughly 29% of
   the height transparent above and below it. Rather than pulling that space
   back with negative margins - which let the image overflow its line and pushed
   the header bar from 165px to 199px - the box is given the mark's own shape and
   object-fit crops the padding away. Nothing overflows, so the line is exactly
   as tall as the box.

   96px wide scales the drawing so the mark itself is ~40px tall; the 42px box
   leaves a pixel of air above and below it. That keeps the branding block at the
   69px it was when the mark sat on its own line, so the header bar does not
   change height - while the mark itself goes from 24px to 40px. */
#masthead .tf-brand__mark,
#ast-fixed-header .tf-brand__mark {
	display: block;
	width: 96px;
	height: 42px;
	max-width: none;
	object-fit: cover;
	object-position: center;
	flex: 0 0 auto;
	/* Flex baseline alignment uses a replaced element's border-box bottom, so the
	   text lands level with the bottom of the whole mark - under the grey bar
	   rather than on it. In this 96x42 box the bar's top edge is 6.9px above the
	   box bottom, so nudging the image down by that much brings the bar's top up
	   to the text baseline. Relative, so the line's height is unaffected. */
	position: relative;
	top: 7px;
	/* The nudge is visual only, so the 7px it takes below the box is also given
	   back to the layout here. Without this the branding block grew from 69px to
	   76px and pushed the header bar from 165px to 170px. */
	margin-bottom: -7px;
}

/* The name is set the way the logo draws it: TREENING solid, FOOKUS lighter.
   The 300 face is loaded by tf_brand_font_weight() in functions.php; the theme
   itself ships Montserrat at 700 only, and without that extra face both halves
   rendered at 700 and the split was invisible. */
.tf-brand__name {
	display: block;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

.tf-brand__strong { font-weight: 700; }
.tf-brand__light { font-weight: 300; }

#masthead .main-header-menu > .current-menu-item > .menu-link,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link,
#masthead .main-header-menu > .menu-item > .menu-link:hover,
#masthead .main-header-menu > .menu-item > .menu-link:focus-visible,
#ast-fixed-header .main-header-menu > .current-menu-item > .menu-link,
#ast-fixed-header .main-header-menu > .current-menu-ancestor > .menu-link,
#ast-fixed-header .main-header-menu > .menu-item > .menu-link:hover,
#ast-fixed-header .main-header-menu > .menu-item > .menu-link:focus-visible {
	color: var(--tf-blue) !important;
}

#masthead .main-header-menu .sub-menu,
#ast-fixed-header .main-header-menu .sub-menu {
	position: absolute;
	z-index: 20;
	border-color: rgba(255, 255, 255, 0.15);
	background: #171717 !important;
}

#masthead .main-header-menu .sub-menu .menu-link,
#masthead .main-header-menu .sub-menu .ast-menu-toggle,
#ast-fixed-header .main-header-menu .sub-menu .menu-link,
#ast-fixed-header .main-header-menu .sub-menu .ast-menu-toggle {
	color: rgba(255, 255, 255, 0.84) !important;
}

#masthead .main-header-menu .sub-menu .menu-link:hover,
#masthead .main-header-menu .sub-menu .menu-link:focus-visible,
#ast-fixed-header .main-header-menu .sub-menu .menu-link:hover,
#ast-fixed-header .main-header-menu .sub-menu .menu-link:focus-visible {
	background: #222222 !important;
	color: var(--tf-white) !important;
}

@media (min-width: 922px) {
	#masthead > .main-header-bar-wrap .main-header-menu > .menu-item > .menu-link,
	#ast-fixed-header .main-header-menu > .menu-item > .menu-link {
		display: flex;
		align-items: center;
		min-height: 92px;
	}
}

body.home .entry-header,
body.home .entry-footer {
	display: none;
}

.tf-home,
.tf-home * {
	box-sizing: border-box;
}

.tf-home {
	overflow: clip;
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.55;
}

.tf-home h1,
.tf-home h2,
.tf-home h3,
.tf-home p {
	margin-top: 0;
}

.tf-home h1,
.tf-home h2,
.tf-home h3 {
	font-family: inherit;
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 0.98;
}

.tf-home a {
	text-decoration: none;
}

.tf-home img {
	display: block;
	width: 100%;
}

.tf-shell {
	width: var(--tf-shell);
	margin-inline: auto;
}

.tf-eyebrow {
	margin-bottom: 24px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.tf-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(920px, 100svh);
	background: #202020;
	isolation: isolate;
}

.tf-hero__media,
.tf-hero__shade {
	position: absolute;
	inset: 0;
	height: 100%;
}

.tf-hero__media {
	z-index: -2;
	object-fit: cover;
	object-position: center 48%;
	filter: saturate(0.82) contrast(1.04);
}

.tf-hero__shade {
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(7, 7, 7, 0.18) 0%, rgba(7, 7, 7, 0.1) 28%, rgba(7, 7, 7, 0.82) 100%),
		linear-gradient(90deg, rgba(7, 7, 7, 0.48), transparent 70%);
}

.tf-hero__content {
	padding-block: 180px 120px;
}

.tf-hero h1 {
	max-width: 1080px;
	margin-bottom: 30px;
	color: var(--tf-white);
	font-size: inherit;
	text-wrap: initial;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.tf-hero__wordmark {
	display: block;
	margin-bottom: clamp(16px, 1.7vw, 28px);
	font-size: clamp(52px, 6.8vw, 108px);
	letter-spacing: 0.012em;
	line-height: 0.82;
	white-space: nowrap;
}

.tf-hero__wordmark-strong {
	font-weight: 700;
}

.tf-hero__wordmark-light {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 300;
}

.tf-hero__message {
	display: block;
	max-width: 980px;
	color: var(--tf-sky);
	font-size: clamp(46px, 5.6vw, 86px);
	font-weight: 450;
	letter-spacing: -0.012em;
	line-height: 0.98;
	text-wrap: balance;
}

.tf-hero__message-accent {
	color: inherit;
	font-weight: 350;
}

.tf-hero__lead {
	max-width: 680px;
	margin-bottom: 36px;
	color: rgba(255, 255, 255, 0.8);
	font-size: clamp(19px, 2vw, 27px);
}

.tf-hero__lead em {
	color: var(--tf-amber);
	font-style: normal;
	font-weight: 650;
	letter-spacing: 0.025em;
}

.tf-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tf-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 58px;
	padding: 15px 22px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.tf-button:hover,
.tf-button:focus-visible {
	transform: translateY(-2px);
}

.tf-button--light {
	border-color: var(--tf-amber);
	background: var(--tf-amber);
	color: var(--tf-ink);
}

.tf-button--light:hover,
.tf-button--light:focus-visible {
	border-color: var(--tf-blue);
	background: var(--tf-blue);
	color: var(--tf-ink);
}

.tf-button--ghost {
	border-color: rgba(255, 255, 255, 0.65);
	background: rgba(17, 17, 17, 0.12);
	color: var(--tf-white);
	backdrop-filter: blur(12px);
}

.tf-button--ghost:hover,
.tf-button--ghost:focus-visible {
	background: var(--tf-white);
	color: var(--tf-ink);
}

.tf-scroll-cue {
	position: absolute;
	right: 34px;
	bottom: 34px;
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--tf-white);
	font-size: 13px;
	font-weight: 600;
}

.tf-scroll-cue i {
	display: grid;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	font-style: normal;
	place-items: center;
}

.tf-statement {
	position: relative;
	padding-block: clamp(110px, 14vw, 220px);
	background: var(--tf-paper);
	color: var(--tf-ink);
}

.tf-statement::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 8px;
	background: var(--tf-spectrum);
	content: "";
}

.tf-statement__grid {
	display: grid;
	grid-template-columns: minmax(170px, 0.7fr) minmax(0, 2.3fr);
	gap: 8vw;
}

.tf-statement h2 {
	max-width: 1040px;
	margin-bottom: 44px;
	color: var(--tf-ink);
	font-size: clamp(52px, 7vw, 112px);
	text-wrap: balance;
}

.tf-statement__grid > div > p {
	max-width: 780px;
	margin-bottom: 0;
	color: var(--tf-ink);
	font-size: clamp(20px, 2.2vw, 30px);
	line-height: 1.4;
}

.tf-statement .tf-eyebrow {
	color: #dd152e;
	font-size: clamp(14px, 1.05vw, 17px);
	letter-spacing: 0.16em;
	transform: translateY(-34px);
}

.tf-topics {
	border-block: 1px solid var(--tf-line-dark);
	background: var(--tf-charcoal);
}

.tf-topics__inner {
	display: flex;
	overflow-x: auto;
	gap: 36px;
	padding-block: 22px;
	scrollbar-width: none;
}

.tf-topics__inner::-webkit-scrollbar {
	display: none;
}

.tf-topics a {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	font-weight: 600;
	transition: color 160ms ease;
}

.tf-topics a:hover,
.tf-topics a:focus-visible,
.tf-topics a.is-active {
	color: var(--tf-blue);
}

.tf-topics a.is-active {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

.tf-editorial {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 900px;
}

.tf-editorial--dark {
	background: var(--tf-charcoal);
	color: var(--tf-white);
}

.tf-editorial--light {
	background: var(--tf-paper);
	color: var(--tf-ink);
}

.tf-editorial--reverse .tf-editorial__media {
	order: 2;
}

.tf-editorial__media {
	position: relative;
	min-width: 0;
	min-height: 720px;
	overflow: hidden;
}

.tf-editorial__media img {
	height: 100%;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Keep the finishing athlete centred in the tall desktop crop used by the
   training-plans editorial panel. Smaller screens retain the natural crop. */
@media (min-width: 922px) {
	.tf-editorial--dark .tf-editorial__media img {
		object-position: 17% 50%;
	}
}

.tf-editorial:hover .tf-editorial__media img {
	transform: scale(1.025);
}

.tf-editorial__media.is-overlay-open img {
	transform: scale(1.025);
}

.tf-method-overlay-stack {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.tf-method-overlay {
	display: block;
	position: absolute;
	inset: 0;
	overflow-y: auto;
	padding: clamp(82px, 7vw, 116px) clamp(28px, 4.5vw, 72px) clamp(38px, 5vw, 72px);
	background:
		linear-gradient(180deg, rgba(12, 15, 16, 0.74), rgba(12, 15, 16, 0.97)),
		var(--tf-charcoal);
	color: var(--tf-white);
	pointer-events: auto;
	animation: tf-method-reveal 220ms ease both;
	overscroll-behavior: contain;
}

.tf-method-overlay[hidden] {
	display: none;
}

.tf-method-overlay::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 5px;
	background: var(--tf-spectrum);
	content: "";
}

.tf-method-overlay__content {
	display: grid;
	width: min(100%, 760px);
	min-height: 100%;
	margin: 0 auto;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	align-items: start;
	gap: clamp(28px, 3vw, 44px);
}

.tf-method-overlay__intro {
	min-width: 0;
}

.tf-method-overlay .tf-eyebrow {
	margin-bottom: 22px;
	color: var(--tf-green);
}

.tf-method-overlay h2 {
	max-width: 100%;
	margin-bottom: 22px;
	color: var(--tf-white);
	font-size: clamp(40px, 4vw, 62px);
	line-height: 0.98;
}

.tf-method-overlay__intro > p:not(.tf-eyebrow) {
	max-width: 620px;
	margin-bottom: 24px;
	color: rgba(255, 255, 255, 0.86);
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.55;
}

.tf-method-overlay__more {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.48);
	color: var(--tf-white);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.tf-method-overlay__more:hover,
.tf-method-overlay__more:focus-visible {
	border-color: var(--tf-blue);
	color: var(--tf-blue);
}

.tf-method-explorer {
	display: grid;
	align-content: center;
	gap: 12px;
}

.tf-method-card {
	border: 1px solid rgba(255, 255, 255, 0.17);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.035);
	transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.tf-method-card[open] {
	border-color: rgba(119, 194, 255, 0.72);
	background: rgba(119, 194, 255, 0.075);
	transform: translateX(-4px);
}

.tf-method-card summary {
	position: relative;
	display: grid;
	min-height: 76px;
	padding: 16px 58px 16px 20px;
	cursor: pointer;
	list-style: none;
	align-content: center;
	gap: 5px;
}

.tf-method-card summary::-webkit-details-marker {
	display: none;
}

.tf-method-card summary:focus-visible {
	outline: 2px solid var(--tf-blue);
	outline-offset: 3px;
}

.tf-method-card__kicker {
	color: var(--tf-green);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.tf-method-card__title {
	color: var(--tf-white);
	font-size: clamp(16px, 1.45vw, 20px);
	font-weight: 800;
	line-height: 1.25;
}

.tf-method-card__icon {
	position: absolute;
	top: 50%;
	right: 22px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
}

.tf-method-card__icon::before,
.tf-method-card__icon::after {
	position: absolute;
	top: 8px;
	left: 2px;
	width: 14px;
	height: 2px;
	background: currentColor;
	content: "";
	transition: transform 180ms ease;
}

.tf-method-card__icon::after {
	transform: rotate(90deg);
}

.tf-method-card[open] .tf-method-card__icon::after {
	transform: rotate(0);
}

.tf-method-card__body {
	padding: 0 58px 20px 20px;
}

.tf-method-card__body p {
	margin: 0;
	color: rgba(255, 255, 255, 0.74);
	font-size: 14px;
	line-height: 1.62;
}

.tf-method-overlay__close {
	position: absolute;
	top: 28px;
	right: 28px;
	display: grid;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.58);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	color: var(--tf-white);
	font: inherit;
	font-size: 0;
	cursor: pointer;
	place-items: center;
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.tf-method-overlay__close::before,
.tf-method-overlay__close::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	content: "";
}

.tf-method-overlay__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.tf-method-overlay__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.tf-method-overlay__close:hover,
.tf-method-overlay__close:focus-visible {
	background: var(--tf-white);
	color: var(--tf-ink);
	transform: rotate(5deg);
}

@keyframes tf-method-reveal {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tf-editorial__content {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	padding: clamp(64px, 7vw, 130px);
}

.tf-editorial__content h2 {
	max-width: 720px;
	margin-bottom: 54px;
	font-size: clamp(46px, 5vw, 82px);
	text-wrap: balance;
}

.tf-editorial--dark .tf-editorial__content h2,
.tf-editorial--dark .tf-editorial__content h3 {
	color: var(--tf-white);
}

.tf-editorial--dark .tf-eyebrow,
.tf-editorial--dark .tf-editorial__content > p {
	color: rgba(255, 255, 255, 0.88);
}

.tf-editorial--light .tf-editorial__content h2,
.tf-editorial--light .tf-editorial__content h3,
.tf-editorial--light .tf-editorial__content > p {
	color: var(--tf-ink);
}

.tf-editorial__content > h3 {
	margin: 24px 0 12px;
	font-size: clamp(24px, 2.4vw, 36px);
}

.tf-editorial__content > p {
	max-width: 720px;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.58;
}

.tf-plan-list {
	border-top: 1px solid var(--tf-line-dark);
}

.tf-plan-list article {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 18px;
	padding-block: 28px;
	border-bottom: 1px solid var(--tf-line-dark);
}

.tf-plan-list article > span {
	color: var(--tf-green);
	font-size: 12px;
	font-weight: 700;
}

.tf-plan-list article:nth-child(2) > span {
	color: var(--tf-amber);
}

.tf-plan-list h3 {
	margin-bottom: 14px;
	font-size: clamp(28px, 3vw, 42px);
}

.tf-plan-list p {
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
	line-height: 1.62;
}

.tf-arrow-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: fit-content;
	margin-top: 38px;
	padding-bottom: 8px;
	border-bottom: 1px solid currentColor;
	color: inherit;
	font-size: 15px;
	font-weight: 650;
}

.tf-arrow-link span {
	transition: transform 180ms ease;
}

.tf-arrow-link:hover span,
.tf-arrow-link:focus-visible span {
	transform: translate(3px, -3px);
}

.tf-editorial--dark .tf-arrow-link:hover,
.tf-editorial--dark .tf-arrow-link:focus-visible {
	color: var(--tf-blue);
}

.tf-editorial--light .tf-eyebrow {
	color: #a83e43;
}

.tf-journal {
	padding-block: clamp(90px, 12vw, 180px);
	background: var(--tf-ink);
	color: var(--tf-white);
}

.tf-journal__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 36px;
	margin-bottom: 70px;
}

.tf-journal h2 {
	margin-bottom: 0;
	color: var(--tf-white);
	font-size: clamp(56px, 8vw, 118px);
}

.tf-journal .tf-arrow-link {
	margin-top: 0;
}

.tf-article-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--tf-line-dark);
}

.tf-article {
	margin: 0;
	border-right: 1px solid var(--tf-line-dark);
}

.tf-article:last-child {
	border-right: 0;
}

.tf-article a {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 330px;
	padding: 34px;
	color: var(--tf-white);
	transition: background-color 180ms ease;
}

.tf-article a::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: var(--tf-spectrum);
	content: "";
	opacity: 0;
	transition: opacity 180ms ease;
}

.tf-article a:hover,
.tf-article a:focus-visible {
	background: var(--tf-charcoal);
}

.tf-article a:hover::before,
.tf-article a:focus-visible::before {
	opacity: 1;
}

.tf-article a > span {
	color: var(--tf-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tf-article h3 {
	max-width: 390px;
	margin: auto 0 0;
	color: var(--tf-white);
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1.06;
}

.tf-article i {
	position: absolute;
	right: 28px;
	top: 28px;
	font-size: 22px;
	font-style: normal;
}

.tf-contact {
	padding-block: clamp(90px, 10vw, 160px);
	background-color: #9f3d12;
	background-image:
		linear-gradient(105deg, rgba(42, 19, 13, 0.72) 0%, rgba(45, 25, 31, 0.64) 52%, rgba(4, 9, 15, 0.92) 100%),
		radial-gradient(circle at 8% 52%, rgba(245, 109, 37, 0.5) 0%, rgba(169, 57, 31, 0.18) 38%, transparent 66%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.05)),
		url('/wp-content/uploads/2020/09/DSC_1034.jpg');
	background-position: center 62%;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--tf-white);
}

.tf-contact__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 60px;
}

.tf-contact h2 {
	max-width: 980px;
	margin-bottom: 0;
	color: var(--tf-white);
	font-size: clamp(48px, 6.4vw, 96px);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);
	text-wrap: balance;
}

.tf-contact .tf-eyebrow {
	color: #ffe1ad;
}

.tf-contact .tf-button {
	flex: 0 0 auto;
	border-color: rgba(255, 255, 255, 0.92);
	background: rgba(255, 255, 255, 0.96);
	color: var(--tf-ink);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.tf-contact .tf-button:hover,
.tf-contact .tf-button:focus-visible {
	border-color: var(--tf-amber);
	background: var(--tf-amber);
	color: var(--tf-ink);
}

@media (max-width: 921px) {
	:root {
		--tf-shell: min(100% - 40px, 760px);
	}

	#masthead > .main-header-bar-wrap .main-header-bar,
	#ast-fixed-header .main-header-bar {
		min-height: 76px;
	}

	/* Keep the mobile tagline visually separate from the logo lockup. */
	#masthead .site-description,
	#ast-fixed-header .site-description {
		margin-top: 7px;
	}

	#masthead .main-header-bar-navigation,
	#masthead .site-navigation,
	#masthead .main-navigation,
	#masthead .main-header-menu,
	#ast-fixed-header .main-header-bar-navigation,
	#ast-fixed-header .site-navigation,
	#ast-fixed-header .main-navigation,
	#ast-fixed-header .main-header-menu {
		background: var(--tf-ink) !important;
	}

	.ast-main-header-nav-open #masthead .main-header-bar-navigation,
	.ast-main-header-nav-open #ast-fixed-header .main-header-bar-navigation {
		max-height: calc(100svh - 76px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	#masthead .main-header-menu > .menu-item > .menu-link,
	#ast-fixed-header .main-header-menu > .menu-item > .menu-link {
		display: flex;
		align-items: center;
		min-height: 52px;
	}

	#masthead .main-header-menu .menu-link,
	#masthead .main-header-menu .ast-menu-toggle,
	#ast-fixed-header .main-header-menu .menu-link,
	#ast-fixed-header .main-header-menu .ast-menu-toggle {
		border-color: rgba(255, 255, 255, 0.12) !important;
	}

	.tf-hero {
		min-height: 820px;
	}

	.tf-statement__grid,
	.tf-editorial {
		grid-template-columns: 1fr;
	}

	.tf-statement__grid {
		gap: 40px;
	}

	.tf-statement .tf-eyebrow {
		transform: translateY(-20px);
	}

	.tf-editorial__media,
	.tf-editorial--reverse .tf-editorial__media {
		order: 0;
		min-height: 62vw;
	}

	.tf-method-overlay {
		padding-inline: clamp(24px, 5vw, 48px);
	}

	.tf-method-overlay__content {
		gap: 30px;
	}

	.tf-editorial__content {
		padding: 78px 36px 90px;
	}

	.tf-editorial {
		min-height: 0;
	}

	.tf-article-grid {
		grid-template-columns: 1fr;
	}

	.tf-article {
		border-right: 0;
		border-bottom: 1px solid var(--tf-line-dark);
	}

	.tf-article a {
		min-height: 240px;
	}

	.tf-contact__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.tf-contact {
		background-image:
			linear-gradient(180deg, rgba(35, 16, 11, 0.7) 0%, rgba(40, 20, 24, 0.72) 52%, rgba(5, 10, 15, 0.94) 100%),
			radial-gradient(circle at 30% 20%, rgba(245, 109, 37, 0.46) 0%, rgba(169, 57, 31, 0.14) 42%, transparent 68%),
			linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.04)),
			url('/wp-content/uploads/2020/09/DSC_1034.jpg');
		background-position: 60% center;
	}
}

@media (max-width: 640px) {
	:root {
		--tf-shell: calc(100% - 32px);
	}

	.tf-home {
		font-size: 16px;
	}

	.tf-hero {
		min-height: 760px;
	}

	.tf-hero__content {
		padding-block: 150px 110px;
	}

	.tf-hero__wordmark {
		margin-bottom: 16px;
		font-size: clamp(30px, 9.4vw, 54px);
	}

	.tf-hero__message {
		font-size: clamp(30px, 9.4vw, 50px);
		line-height: 1.02;
	}

	.tf-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.tf-button {
		width: 100%;
	}

	.tf-scroll-cue {
		display: none;
	}

	.tf-statement h2,
	.tf-editorial__content h2,
	.tf-journal h2,
	.tf-contact h2 {
		font-size: clamp(42px, 12vw, 58px);
	}

	.tf-editorial__content h2 {
		overflow-wrap: anywhere;
	}

	.tf-statement__grid > div > p {
		font-size: 19px;
	}

	.tf-topics__inner {
		gap: 26px;
	}

	.tf-editorial__media {
		min-height: 78vw;
	}

	.tf-editorial__media.is-overlay-open {
		min-height: 760px;
	}

	.tf-method-overlay {
		padding: 78px 18px 26px;
	}

	.tf-method-overlay__content {
		display: block;
	}

	.tf-method-overlay__intro {
		margin-bottom: 26px;
	}

	.tf-method-overlay .tf-eyebrow {
		margin-bottom: 12px;
	}

	.tf-method-overlay h2 {
		margin-bottom: 14px;
		font-size: clamp(40px, 13vw, 58px);
	}

	.tf-method-overlay__intro > p:not(.tf-eyebrow) {
		margin-bottom: 12px;
		font-size: 16px;
		line-height: 1.5;
	}

	.tf-method-overlay__more {
		font-size: 11px;
	}

	.tf-method-explorer {
		gap: 8px;
	}

	.tf-method-card summary {
		min-height: 68px;
		padding: 13px 50px 13px 16px;
	}

	.tf-method-card__body {
		padding: 0 16px 17px;
	}

	.tf-method-card__body p {
		font-size: 13px;
	}

	.tf-method-card__icon {
		right: 17px;
	}

	.tf-method-overlay__close {
		top: 18px;
		right: 18px;
	}

	.tf-editorial__content {
		padding: 64px 20px 76px;
	}

	.tf-plan-list article {
		grid-template-columns: 34px minmax(0, 1fr);
	}

	.tf-journal__heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.tf-article a {
		padding-inline: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.tf-home *,
	.tf-home *::before,
	.tf-home *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}


/* ------------------------- mobile navigation -------------------------- */

/* Astra's transparent-header option paints the mobile menu white:
     .ast-theme-transparent-header.ast-header-break-point .ast-builder-menu
     .main-header-menu { background-color:#ffffff }
   The wrappers around the list were already darkened to match the header, but
   each a.menu-link kept a white background of its own. The text is white too,
   so every item rendered as white on white - measured contrast 0. Only the
   current page was legible, because it is painted blue.

   Scoped to .ast-header-break-point, the class Astra puts on <body> below the
   header breakpoint, so the desktop bar is untouched. */

.ast-header-break-point .main-header-bar-navigation .menu-link,
.ast-header-break-point .main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .sub-menu,
.ast-header-break-point .main-header-menu .sub-menu .menu-link {
	background-color: transparent !important;
	color: var(--tf-white) !important;
}

/* A list of ten items needs lines between them to read as a list. */
.ast-header-break-point .main-header-menu > .menu-item > .menu-link {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ast-header-break-point .main-header-menu > .menu-item:last-child > .menu-link {
	border-bottom: 0;
}

/* Sub-items sit back a step, so depth is visible without a second colour. */
.ast-header-break-point .main-header-menu .sub-menu .menu-link {
	padding-left: 32px;
	font-size: 0.94em;
	color: rgba(255, 255, 255, 0.82) !important;
}

/* Where you are now. */
.ast-header-break-point .main-header-menu .current-menu-item > .menu-link,
.ast-header-break-point .main-header-menu .current-menu-ancestor > .menu-link {
	color: var(--tf-blue) !important;
	font-weight: 700;
}

/* Touch feedback that works on a dark panel. */
.ast-header-break-point .main-header-menu .menu-link:hover,
.ast-header-break-point .main-header-menu .menu-link:focus-visible {
	background-color: rgba(255, 255, 255, 0.09) !important;
}

.ast-header-break-point .main-header-menu .menu-link:focus-visible {
	outline: 2px solid var(--tf-white);
	outline-offset: -2px;
}

/* The expander arrow beside a parent item. */
.ast-header-break-point .main-header-menu .ast-menu-toggle {
	color: var(--tf-white) !important;
	background-color: transparent !important;
}

/* Comfortable to hit with a thumb. */
.ast-header-break-point .main-header-menu > .menu-item > .menu-link {
	min-height: 48px;
	display: flex;
	align-items: center;
}