/*
Theme Name:   TFS
Theme URI:    https://thefractionalseo.com
Description:  The Fractional SEO. Standalone theme — no parent, no page builder. Design tokens extracted from the 2026 Elementor drafts and consolidated into a real system.
Author:       The Fractional SEO
Version:      1.35.5
Requires PHP: 8.0
Text Domain:  tfs
*/

/* ==========================================================================
   1. TOKENS
   Colours are from the Elementor global kit and match the brand guide exactly.
   Type, spacing and elevation are consolidated from 172 observed styles — the
   drafts rendered the same visual role at 40/42px and five different line
   heights, so these are the intended values, deduplicated.
   ========================================================================== */

:root {
	/* Brand */
	--tfs-navy:         #023950;
	--tfs-teal:         #50C0B3;
	--tfs-teal-dark:    #237583;
	--tfs-mint:         #BEE6BD;
	--tfs-orange:       #FFA943;
	--tfs-white:        #FFFFFF;
	--tfs-black:        #011016;

	/* Extensions introduced in the drafts, confirmed as official */
	--tfs-slate:        #41535C;
	--tfs-forest:       #05302E;

	/* Surfaces.
	   Measured on the homepage draft: the alternating ground is #F1F6F7, not
	   #F4FBFB. Both are genuinely in use — the industry page carries one of
	   each — so this is two deliberate tints, not the drift I first called it. */
	--tfs-surface:      #F1F6F7;  /* alternating section ground */
	--tfs-surface-alt:  #F4FBFB;  /* the cooler tint, used for emphasis bands */
	--tfs-surface-teal: #E1F1EE;  /* stronger teal, secondary buttons */
	--tfs-border:       #E2EAEA;  /* his card border, measured */
	--tfs-ink:          #333333;  /* his body text, not the slate the theme assumed */

	/* Type */
	/* The brand guide (p.11) names two faces: VC Honey Bold Deck for display,
	   Work Sans for text. Lato was the Elementor kit's body default, but every
	   piece of visible copy on the live industry page is set in Work Sans, so
	   the build and the guide agree — Lato is gone. Fraunces is the guide's
	   sanctioned display alternate (p.12). */
	--tfs-font-display: "VC Honey Web", "Fraunces", Georgia, serif;
	--tfs-font-text:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--tfs-font-ui:      "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--tfs-display-xl:   3.5rem;   /* 56 / 60 */
	--tfs-display-l:    2.5rem;   /* 40 / 48 — the workhorse, 74 uses across 11 pages */
	--tfs-display-m:    1.875rem; /* 30 / 40 */
	--tfs-display-s:    1.5rem;   /* 24 / 32 */
	--tfs-lead:         1.125rem; /* 18 / 29.7 */
	--tfs-body:         1rem;     /* 16 / 26.4 */
	--tfs-small:        0.875rem; /* 14 / 23.1 */
	--tfs-label:        0.9375rem;/* 15 */

	--tfs-lh-tight:     1.1;
	--tfs-lh-body:      1.65;     /* Shakeel's own ratio: 18/29.7, 16/26.4, 14/23.1 */

	/* Space */
	--tfs-section-y:    5rem;     /* 80px — his value on the sections he set deliberately */
	--tfs-gap:          1.5rem;
	--tfs-measure:      68ch;
	--tfs-max:          1200px;

	/* Elevation — measured off the built homepage, not inferred.
	   His cards are 12px with a very light navy-tinted shadow; my first pass
	   guessed 18px and a shadow several times heavier, which would have made
	   every card on the site look like a different design. */
	--tfs-radius-sm:    12px;   /* buttons and inputs */
	--tfs-radius-md:    20px;   /* cards — measured at 20px, not the 12px assumed */
	--tfs-radius-lg:    24px;   /* feature panels, media */
	--tfs-radius-pill:  35px;   /* his secondary-action pill — a real variant */
	--tfs-shadow-sm:    0 1px 2px rgba(2, 57, 80, 0.04);
	--tfs-shadow-md:    0 6px 18px rgba(2, 57, 80, 0.08);

	/* Buttons. Primary is orange. Its label is navy, not white: the brand guide
	   (p.10) only approves navy or black text on orange, and white on #FFA943
	   fails contrast. The live header button is already navy-on-orange. */
	--tfs-btn-pad:      12px 24px;   /* secondary */
	--tfs-btn-pad-hero: 14px 18px;   /* primary */
	--tfs-btn-primary-bg:   var(--tfs-orange);
	--tfs-btn-primary-fg:   var(--tfs-navy);
	--tfs-btn-secondary-bg: var(--tfs-white);
	--tfs-btn-secondary-fg: var(--tfs-teal-dark);
}

@media (max-width: 782px) {
	:root {
		--tfs-display-xl: 2.25rem;
		--tfs-display-l:  1.75rem;
		--tfs-display-m:  1.375rem;
		--tfs-section-y:  3rem; /* 48px */
	}
}

/* The @font-face for VC Honey Web deliberately does NOT live here.
   It used to, pointing at /assets/fonts/, and that was a real bug: the theme's
   stylesheet loads *after* the inline @font-face TFS Core prints in wp_head, so
   the later declaration won — a 404 — and every heading on the site silently
   fell back even once the font was uploaded correctly.

   The font is a licensed binary that should not be committed to a theme that
   gets rebuilt. TFS Core (inc/fonts.php) finds it in the media library by
   filename and emits the @font-face and a preload. One declaration, one owner. */

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--tfs-font-text);
	font-size: var(--tfs-body);
	line-height: var(--tfs-lh-body);
	color: var(--tfs-black);
	background: var(--tfs-white);
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--tfs-teal-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tfs-navy); }

h1, h2, h3, h4 {
	font-family: var(--tfs-font-display);
	font-weight: 700;
	line-height: var(--tfs-lh-tight);
	color: var(--tfs-navy);
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: var(--tfs-display-xl); }
h2 { font-size: var(--tfs-display-l); }
h3 { font-size: var(--tfs-display-m); }
h4 { font-size: var(--tfs-display-s); }

p { margin: 0 0 1rem; max-width: var(--tfs-measure); }

:focus-visible {
	outline: 3px solid var(--tfs-orange);
	outline-offset: 2px;
	border-radius: 4px;
}

.tfs-skip {
	position: absolute; left: -9999px;
	background: var(--tfs-navy); color: #fff; padding: 0.75rem 1rem; z-index: 100;
}
.tfs-skip:focus { left: 1rem; top: 1rem; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.tfs-wrap { width: min(100% - 2.5rem, var(--tfs-max)); margin-inline: auto; }

.tfs-section { padding-block: var(--tfs-section-y); }
.tfs-section--tint   { background: var(--tfs-surface); }
.tfs-section--teal   { background: var(--tfs-surface-teal); }
.tfs-section--navy   { background: var(--tfs-navy); color: var(--tfs-white); }
.tfs-section--navy h2, .tfs-section--navy h3 { color: var(--tfs-white); }

.tfs-lede { font-size: var(--tfs-lead); color: var(--tfs-slate); max-width: var(--tfs-measure); }

/* ==========================================================================
   4. HEADER / FOOTER
   ========================================================================== */

.tfs-header {
	background: var(--tfs-white);
	border-bottom: 1px solid var(--tfs-border);
	position: sticky; top: 0; z-index: 50;
}
.tfs-header__inner { display: flex; align-items: center; gap: var(--tfs-gap); padding-block: 1rem; }
.tfs-header__brand { font-family: var(--tfs-font-display); font-size: 1.25rem; color: var(--tfs-navy); text-decoration: none; margin-right: auto; }
/* 27px tall ≈ 320px wide for the horizontal logo — measured on the live header. */
.tfs-header__brand { display: inline-flex; align-items: center; flex: none; }
.tfs-header__brand img { display: block; height: 27px; width: auto; max-width: min(320px, 60vw); object-fit: contain; }
@media (max-width: 782px) { .tfs-header__brand img { height: 22px; } }
/* Phones: the logo gives way before the button does — "Let's Talk Growth" at
   full size pushed the page 100px wider than a 375px screen. */
@media (max-width: 560px) {
	.tfs-header__brand { flex: 0 1 auto; min-width: 0; }
	.tfs-header__brand img { height: auto; max-width: 100%; max-height: 20px; }
	.tfs-header .tfs-btn { padding: 10px 12px; font-size: 0.8125rem; }
}

/* Primary menu — Andrew's sketch: What We Do · Industries ▾ · About ▾ · Learn ▾ · Contact.
   Desktop dropdowns open on hover and focus; the chevron button (nav.js)
   opens them for touch and keyboard. Below 900px the menu folds into a
   toggle and the dropdowns become indented lists. */
.tfs-nav { margin-left: auto; }
.tfs-menu { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.tfs-menu__item { position: relative; display: flex; align-items: center; gap: 2px; }
.tfs-menu__link { font-size: var(--tfs-label); font-weight: 500; color: var(--tfs-navy); text-decoration: none; white-space: nowrap; padding-block: 8px; }
a.tfs-menu__link:hover { color: var(--tfs-teal-dark); }
.tfs-menu__open { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.tfs-menu__open:hover, .tfs-menu__open:focus-visible { background: var(--tfs-surface-teal); }
.tfs-menu__chev { width: 11px; height: 11px; fill: var(--tfs-navy); transition: transform 0.15s ease; }
.tfs-menu__sub {
	position: absolute; top: 100%; left: -14px; z-index: 60;
	min-width: 220px; margin: 6px 0 0; padding: 8px; list-style: none;
	background: var(--tfs-white); border: 1px solid var(--tfs-border); border-radius: 12px;
	box-shadow: 0 14px 34px rgba(2, 57, 80, 0.12);
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.tfs-menu__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* keeps hover across the gap */
.tfs-menu__sub a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 0.9375rem; color: var(--tfs-navy); text-decoration: none; white-space: nowrap; }
.tfs-menu__sub a:hover, .tfs-menu__sub a:focus-visible { background: var(--tfs-surface); color: var(--tfs-teal-dark); }
.tfs-menu__sub .is-all { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--tfs-border); }
.tfs-menu__sub .is-all a { font-weight: 600; color: var(--tfs-teal-dark); }
@media (min-width: 900px) and (hover: hover) {
	.has-sub:hover > .tfs-menu__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.has-sub:hover .tfs-menu__chev { transform: rotate(180deg); }
}
.has-sub:focus-within > .tfs-menu__sub, .has-sub.is-open > .tfs-menu__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.has-sub.is-open .tfs-menu__chev { transform: rotate(180deg); }

.tfs-nav__toggle { display: none; }
@media (max-width: 899px) {
	.tfs-header__inner { flex-wrap: wrap; }
	.tfs-nav__toggle {
		display: grid; place-items: center; order: 3; width: 42px; height: 42px; margin-left: 4px;
		padding: 0; border: 1px solid var(--tfs-border); border-radius: 10px; background: var(--tfs-white); cursor: pointer;
	}
	.tfs-nav__bars, .tfs-nav__bars::before, .tfs-nav__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--tfs-navy); transition: transform 0.15s ease, opacity 0.15s ease; }
	.tfs-nav__bars { position: relative; }
	.tfs-nav__bars::before, .tfs-nav__bars::after { content: ""; position: absolute; left: 0; }
	.tfs-nav__bars::before { top: -6px; }
	.tfs-nav__bars::after { top: 6px; }
	.is-menu-open .tfs-nav__bars { background: transparent; }
	.is-menu-open .tfs-nav__bars::before { transform: translateY(6px) rotate(45deg); }
	.is-menu-open .tfs-nav__bars::after { transform: translateY(-6px) rotate(-45deg); }
	.tfs-header__brand { flex: 1 1 0; min-width: 0; margin-right: 0; }
	.tfs-header__brand img { max-width: 100%; }
	.tfs-header__cta { order: 2; margin-left: 0; }
	.tfs-nav { order: 4; flex-basis: 100%; margin: 0; display: none; }
	.is-menu-open .tfs-nav { display: block; }
	.tfs-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 4px; border-top: 1px solid var(--tfs-border); margin-top: 12px; }
	.tfs-menu__item { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--tfs-border); }
	.tfs-menu__link { padding-block: 13px; font-size: 1rem; }
	.tfs-menu__open { width: 40px; height: 40px; }
	.tfs-menu__sub {
		position: static; flex-basis: 100%; display: none; min-width: 0; margin: 0 0 10px; padding: 0 0 0 12px;
		border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none;
	}
	.has-sub.is-open > .tfs-menu__sub { display: block; }
	.has-sub:focus-within:not(.is-open) > .tfs-menu__sub { display: none; }
}
.tfs-header .tfs-btn { white-space: nowrap; flex: none; }
.tfs-nav a:hover { color: var(--tfs-teal-dark); }

/* Footer — the Figma layout on a light ground, with the state list kept as a
   compact row (it is what gives every state page an inbound link). */
.tfs-footer { background: var(--tfs-white); color: var(--tfs-slate); border-top: 1px solid var(--tfs-border); padding-block: 56px 28px; font-family: var(--tfs-font-ui); font-size: var(--tfs-small); }
.tfs-footer a { color: var(--tfs-slate); text-decoration: none; }
.tfs-footer a:hover { color: var(--tfs-teal-dark); text-decoration: underline; }
.tfs-footer h2 { font-family: var(--tfs-font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tfs-navy); margin: 0 0 14px; }
.tfs-footer ul { list-style: none; margin: 0; padding: 0; }
.tfs-footer__top { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tfs-footer__top { grid-template-columns: 2fr 1fr 1fr 1.3fr; } }
.tfs-footer__brandcol p { max-width: 22rem; margin: 14px 0 0; line-height: 1.6; }
.tfs-footer__brand img { max-height: 26px; width: auto; }
.tfs-footer__brand { font-family: var(--tfs-font-display); font-size: 1.25rem; color: var(--tfs-navy) !important; }
.tfs-footer__col li { margin-bottom: 9px; }
.tfs-footer__states-wrap { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--tfs-border); }
.tfs-footer__states { columns: 6; column-gap: 1.5rem; font-size: 0.8125rem; }
.tfs-footer__states li { break-inside: avoid; margin-bottom: 5px; }
.tfs-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--tfs-border); font-size: 0.8125rem; }
.tfs-footer__bottom p { margin: 0; }
.tfs-footer__bottom ul { display: flex; gap: 22px; }

@media (max-width: 900px) {
	.tfs-footer__states { columns: 3; }
}
@media (max-width: 560px) {
	.tfs-footer__states { columns: 2; }
}

/* ==========================================================================
   5. BUTTONS
   Padding normalised from the drafts' asymmetric 12/12/12/14.
   ========================================================================== */

.tfs-btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--tfs-font-ui);
	font-size: 1rem; font-weight: 600; line-height: 1;
	padding: var(--tfs-btn-pad);
	border-radius: var(--tfs-radius-sm);
	border: 0; cursor: pointer; text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.tfs-btn:hover { transform: translateY(-1px); }

/* Primary is the orange CTA — measured, and the same on every page. It was
   teal here, which made the most important control on the site the wrong
   colour everywhere at once. */
.tfs-btn--primary   { background: var(--tfs-btn-primary-bg); color: var(--tfs-btn-primary-fg); padding: var(--tfs-btn-pad-hero); }
.tfs-btn--primary:hover { background: #F09A31; color: var(--tfs-btn-primary-fg); }

/* Secondary is white with teal text, not a tinted fill. */
.tfs-btn--secondary { background: var(--tfs-btn-secondary-bg); color: var(--tfs-btn-secondary-fg); font-size: 1.125rem; }
.tfs-btn--secondary:hover { background: var(--tfs-surface); color: var(--tfs-navy); }

/* Kept so existing markup that asks for an accent button still renders; it
   now resolves to the same orange rather than a second, conflicting one. */
.tfs-btn--accent    { background: var(--tfs-btn-primary-bg); color: var(--tfs-btn-primary-fg); }

/* The pill.
   His secondary-action treatment — "Let's fix that", "View all industries" —
   teal at a 35px radius. My first pass collapsed every button to one radius
   and erased this distinction entirely. It is a deliberate variant. */
.tfs-btn--pill { border-radius: var(--tfs-radius-pill); }

/* One per page, on the principal action. The arrow is what makes it mean
   something — if every button has one, none of them do. His hero button runs
   larger and slightly asymmetric: 18px 26px 18px 30px, which reads as optical
   correction for the trailing arrow rather than a slip. */
.tfs-btn--hero {
	border-radius: var(--tfs-radius-sm);
	padding: var(--tfs-btn-pad-hero);
	font-size: 1rem; /* 16px, measured on the live hero button */
}
.tfs-btn--hero::after { content: "→"; font-size: 1.1em; line-height: 1; }

/* Chips. Elementor renders these with button classes, which is what made the
   homepage look like it had thirteen button styles. They are tags. */
.tfs-chip {
	display: inline-flex; align-items: center;
	padding: 10px 16px;
	border-radius: 25px;
	font-family: var(--tfs-font-text);
	font-size: var(--tfs-small); font-weight: 400; line-height: 1;
	background: var(--tfs-surface-teal); color: var(--tfs-navy);
	text-decoration: none;
}
.tfs-chip--dark  { background: rgba(2, 57, 80, 0.9); color: var(--tfs-white); }
.tfs-chip--onnavy { background: rgba(255, 255, 255, 0.18); color: var(--tfs-white); }

/* ==========================================================================
   6. BREADCRUMBS
   ========================================================================== */

.tfs-crumbs { font-size: var(--tfs-small); color: var(--tfs-slate); padding-block: 1rem; }
.tfs-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.tfs-crumbs li + li::before { content: "›"; margin-right: 0.5rem; color: var(--tfs-border); }
.tfs-crumbs a { color: var(--tfs-slate); text-decoration: none; }
.tfs-crumbs a:hover { color: var(--tfs-teal-dark); text-decoration: underline; }
.tfs-crumbs [aria-current] { color: var(--tfs-navy); font-weight: 500; }

/* ==========================================================================
   7. FIRM CARDS
   ========================================================================== */

.tfs-firms { display: grid; gap: var(--tfs-gap); margin-top: 2.5rem; }

.tfs-firm {
	background: var(--tfs-white);
	border: 1px solid var(--tfs-border);
	border-radius: var(--tfs-radius-md);
	box-shadow: var(--tfs-shadow-sm);
	padding: 1.75rem;
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 1.25rem 1.5rem;
	align-items: start;
}
.tfs-firm:hover { box-shadow: var(--tfs-shadow-md); }

.tfs-firm__rank {
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--tfs-navy); color: var(--tfs-white);
	display: grid; place-items: center;
	font-family: var(--tfs-font-display); font-size: 1.125rem;
	box-shadow: var(--tfs-shadow-sm);
}
.tfs-firm__logo { width: 72px; height: 72px; object-fit: contain; border-radius: var(--tfs-radius-sm); background: var(--tfs-surface); }
.tfs-firm__body { grid-column: 2; }
.tfs-firm__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }
.tfs-firm__name { font-size: var(--tfs-display-s); margin: 0; }
.tfs-firm__badge {
	font-size: var(--tfs-small); font-weight: 600;
	background: var(--tfs-surface-teal); color: var(--tfs-teal-dark);
	padding: 0.25rem 0.625rem; border-radius: var(--tfs-radius-sm);
}
.tfs-firm__overview { color: var(--tfs-slate); }

.tfs-firm__meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.25rem 0; padding: 1rem 0; border-block: 1px solid var(--tfs-border); }
.tfs-firm__meta div { display: flex; flex-direction: column; }
.tfs-firm__meta dt { font-size: var(--tfs-small); color: var(--tfs-slate); }
.tfs-firm__meta dd { margin: 0; font-weight: 600; color: var(--tfs-navy); }

.tfs-firm__quote {
	margin: 1.25rem 0; padding: 1rem 1.25rem;
	background: var(--tfs-surface); border-left: 3px solid var(--tfs-teal);
	border-radius: 0 var(--tfs-radius-sm) var(--tfs-radius-sm) 0;
	font-style: italic; color: var(--tfs-slate);
}
.tfs-firm__quote p { margin: 0; }

.tfs-firm__why h4 { font-size: var(--tfs-body); font-family: var(--tfs-font-text); font-weight: 700; color: var(--tfs-navy); margin-bottom: 0.35rem; }
.tfs-firm__why p { color: var(--tfs-slate); }

.tfs-firm__stale { font-size: var(--tfs-small); color: var(--tfs-slate); opacity: 0.8; margin-top: 1rem; }

@media (max-width: 640px) {
	.tfs-firm { grid-template-columns: 1fr; }
	.tfs-firm__body { grid-column: 1; }
	.tfs-firm__meta { gap: 1rem; }
}

/* ==========================================================================
   8. LINK GRAPH
   The reason the previous site failed. Generated, never hand-placed.
   ========================================================================== */

.tfs-links { margin-top: var(--tfs-section-y); }
.tfs-links h2 { font-size: var(--tfs-display-m); }

.tfs-links__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.tfs-links__grid a {
	display: block; padding: 0.875rem 1.125rem;
	background: var(--tfs-white); border: 1px solid var(--tfs-border);
	border-radius: var(--tfs-radius-sm); text-decoration: none;
	color: var(--tfs-navy); font-weight: 500; font-size: var(--tfs-label);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tfs-links__grid a:hover { border-color: var(--tfs-teal); background: var(--tfs-surface-teal); }
.tfs-links__grid span { display: block; font-size: var(--tfs-small); font-weight: 400; color: var(--tfs-slate); }

/* ==========================================================================
   9. FAQ
   ========================================================================== */

.tfs-faq { margin-top: var(--tfs-section-y); max-width: var(--tfs-measure); }
.tfs-faq details {
	border: 1px solid var(--tfs-border); border-radius: var(--tfs-radius-sm);
	padding: 1rem 1.25rem; margin-bottom: 0.75rem; background: var(--tfs-white);
}
.tfs-faq summary { font-weight: 600; color: var(--tfs-navy); cursor: pointer; }
.tfs-faq details[open] summary { margin-bottom: 0.75rem; }

/* ==========================================================================
   10. HERO
   ========================================================================== */

.tfs-hero { padding-block: var(--tfs-section-y); background: linear-gradient(135deg, var(--tfs-surface) 0%, var(--tfs-surface-teal) 100%); }
.tfs-hero h1 { max-width: 20ch; }
.tfs-hero__meta { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; }
.tfs-hero__stat { display: flex; flex-direction: column; }
.tfs-hero__stat b { font-family: var(--tfs-font-display); font-size: var(--tfs-display-m); color: var(--tfs-navy); }
.tfs-hero__stat span { font-size: var(--tfs-small); color: var(--tfs-slate); }

@media print {
	.tfs-header, .tfs-footer, .tfs-links { display: none; }
}

/* ---------------------------------------------------------------------------
   Methodology + author
   Both sit below the listings: the reader wants the answer first and the
   working second. Neither is styled to compete with the firm cards.
   ------------------------------------------------------------------------ */

.tfs-method {
	padding: 2.5rem;
	background: var(--tfs-surface);
	border-radius: var(--tfs-radius-lg);
	border: 1px solid var(--tfs-surface-teal);
}

.tfs-method h2 {
	margin-top: 0;
}

.tfs-method__list {
	margin: 2rem 0 0;
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 720px) {
	.tfs-method__list {
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem 2.5rem;
	}
}

.tfs-method__item dt {
	font-weight: 600;
	color: var(--tfs-navy);
	margin-bottom: 0.35rem;
}

.tfs-method__item dd {
	margin: 0;
	color: var(--tfs-slate);
	font-size: var(--tfs-text-sm);
	line-height: 1.65;
}

.tfs-method__note {
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--tfs-surface-teal);
	color: var(--tfs-slate);
	font-size: var(--tfs-text-sm);
}

.tfs-author {
	margin-top: 2.5rem;
}

.tfs-author__kicker {
	font-size: var(--tfs-text-sm);
	font-family: var(--tfs-font-text);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tfs-slate);
	margin-bottom: 1rem;
}

.tfs-author__card {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	flex-wrap: wrap;
}

.tfs-author__photo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.tfs-author__body {
	flex: 1 1 18rem;
}

.tfs-author__name {
	margin: 0;
	font-size: var(--tfs-display-sm);
}

.tfs-author__role {
	margin: 0.15rem 0 0;
	color: var(--tfs-teal-dark);
	font-weight: 600;
	font-size: var(--tfs-text-sm);
}

.tfs-author__bio {
	margin: 0.75rem 0 0;
	color: var(--tfs-slate);
}

.tfs-author__links {
	margin: 0.75rem 0 0;
	font-size: var(--tfs-text-sm);
}

/* ==========================================================================
   INDUSTRY PAGES
   Measured off the live demo industry page (thefractionalseo.com/industries/
   demo-industry) at 1440px on 16 September 2026. Everything is scoped to
   .tfs-ind so the directory templates are untouched.

   Brand guide overrides of the build, on purpose:
   - Text on orange and on bright teal is navy (guide p.10). The build puts
     white on both, which fails contrast; its own header button is navy.
   - Icons are filled (guide p.13), not the build's outline icons.
   - The build's #12897C and #D1731F are not brand colours; dark teal and navy
     stand in for them.
   ========================================================================== */

.tfs-wrap--narrow { width: min(100% - 2.5rem, 52rem); margin-inline: auto; }

/* Kept global: location pages rely on it. */
.tfs-faq { margin-top: var(--tfs-section-y); max-width: none; }

.tfs-icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

.tfs-ind {
	--ind-ink:    var(--tfs-slate);
	--ind-line:   #E2EAEA;
	--ind-tab-line: #E2E8F0;
	--ind-hero:   var(--tfs-surface-alt);
	--ind-tint:   var(--tfs-surface);

	font-family: var(--tfs-font-ui);
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--ind-ink);
}

.tfs-ind .tfs-wrap { width: min(100% - 2.5rem, 1140px); }
.tfs-ind p { max-width: none; }

.tfs-ind h2 {
	font-size: clamp(1.875rem, 1.5vw + 1.5rem, 2.625rem); /* 30 → 42 */
	line-height: 1.05;
	margin: 0;
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */
.tfs-isec { padding-block: 60px; background: var(--tfs-white); }
.tfs-isec--tint { background: var(--ind-tint); }
.tfs-isec--wide { padding-block: 80px; }
.tfs-isec--center { text-align: center; }
.tfs-isec--center .tfs-sub { max-width: 48rem; margin-inline: auto; }

@media (max-width: 782px) {
	.tfs-isec, .tfs-isec--wide { padding-block: 48px; }
}

/* Eyebrow: a bright-teal dot and a dark-teal label. */
.tfs-eyebrow {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 20px;
	font-family: var(--tfs-font-ui);
	font-size: 0.875rem; font-weight: 600; line-height: 1.65;
	letter-spacing: 0; text-transform: uppercase;
	color: var(--tfs-teal-dark);
}
.tfs-eyebrow::before {
	content: ""; flex: none;
	width: 11px; height: 11px; border-radius: 50%;
	background: var(--tfs-teal);
}
.tfs-eyebrow--plain { text-transform: none; }
.tfs-isec--center .tfs-eyebrow { justify-content: center; }

.tfs-sub {
	margin: 20px 0 0;
	font-size: 1.125rem; line-height: 1.65;
	color: var(--ind-ink);
}

/* Section header with a link on the right. */
.tfs-ihead {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 1rem 2rem; margin-bottom: 30px;
}
.tfs-ihead h2 { max-width: 38rem; }

/* ---------------------------------------------------------------------------
   Buttons and links
   Hero: orange, 14/18 padding, 12px radius, 16px/600, a 16px arrow 15px off
   the label. CTA band: bright teal pill, 12/24, 35px radius.
   --------------------------------------------------------------------------- */
.tfs-ind .tfs-btn {
	gap: 15px;
	padding: 14px 18px;
	border-radius: 12px;
	font-family: var(--tfs-font-ui);
	font-size: 1rem; font-weight: 600; line-height: 1;
}
.tfs-ind .tfs-btn .tfs-icon { width: 16px; height: 16px; }

.tfs-ind .tfs-btn--primary,
.tfs-ind .tfs-btn--primary:hover { color: var(--tfs-navy); }

.tfs-btn--teal {
	background: var(--tfs-teal); color: var(--tfs-navy);
}
.tfs-ind .tfs-btn--teal { gap: 8px; padding: 12px 24px; border-radius: 35px; }
.tfs-btn--teal:hover { background: #6BCBC0; color: var(--tfs-navy); }

.tfs-link {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--tfs-font-ui);
	font-size: 1.125rem; font-weight: 600; line-height: 1;
	color: var(--tfs-teal-dark); text-decoration: none;
}
.tfs-link .tfs-icon { width: 18px; height: 18px; transition: transform 0.15s ease; }
.tfs-link:hover { color: var(--tfs-navy); }
.tfs-link:hover .tfs-icon { transform: translateX(3px); }
.tfs-link--strong { font-weight: 700; }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.tfs-ihero {
	position: relative; overflow: hidden;
	background: var(--ind-hero);
}
/* The soft wave band behind the illustration — his asset, at his 50%. */
.tfs-ihero::before {
	content: ""; position: absolute; inset: 0;
	background: url("assets/hero-waves.png") center bottom / cover no-repeat;
	opacity: 0.5; pointer-events: none;
}

.tfs-ihero__grid {
	position: relative;
	display: grid; gap: 40px; align-items: center;
	min-height: 500px; padding-block: 50px;
}
@media (min-width: 960px) {
	.tfs-ihero__grid { grid-template-columns: minmax(0, 550px) minmax(0, 1fr); }
}

.tfs-ihero .tfs-eyebrow { margin-bottom: 22px; }

.tfs-ihero h1 {
	margin: 0 0 22px; max-width: none;
	font-size: clamp(2.5rem, 3vw + 1.25rem, 3.5rem); /* 40 → 56 */
	line-height: 1;
}

.tfs-ihero__lede {
	margin: 0;
	font-size: 1.125rem; line-height: 1.65;
	color: var(--tfs-navy);
}
.tfs-ihero__cta { margin: 22px 0 0; }

/* No card: the illustration sits straight on the hero ground. */
.tfs-ihero__art { justify-self: center; width: 100%; max-width: 605px; }
.tfs-ihero__art img { width: 100%; height: auto; border-radius: 0; box-shadow: none; }
@media (min-width: 960px) { .tfs-ihero__art { justify-self: end; } }

/* ---------------------------------------------------------------------------
   Client logos — white band, centred lead-in, a slow continuous scroll
   --------------------------------------------------------------------------- */
.tfs-ind .tfs-logos { padding-block: 67px 72px; }
.tfs-ind .tfs-logos .tfs-wrap { display: grid; gap: 34px; justify-items: center; }
.tfs-ind .tfs-logos__lead { margin: 0; max-width: 62rem; text-align: center; color: var(--ind-ink); }

.tfs-marquee {
	width: 100%; overflow: hidden;
	/* Logos fade in and out at the edges rather than being cut off. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tfs-marquee__track {
	display: flex; width: max-content;
	/* Roughly 3.5s per logo keeps the pace the same whether a page has 6 or 10. */
	animation: tfs-marquee calc(var(--logo-count, 10) * 3.5s) linear infinite;
}
.tfs-marquee:hover .tfs-marquee__track,
.tfs-marquee:focus-within .tfs-marquee__track { animation-play-state: paused; }

@keyframes tfs-marquee { to { transform: translateX(-50%); } }

.tfs-ind .tfs-logos__row {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; flex: none;
}
.tfs-ind .tfs-logos__row li { flex: none; padding-inline: 32px; display: flex; align-items: center; height: 72px; }
.tfs-ind .tfs-logos__row img {
	height: var(--logo-h, 44px); width: auto; max-width: 200px;
	object-fit: contain; filter: none; opacity: 1;
}

@media (max-width: 782px) {
	.tfs-ind .tfs-logos__row li { padding-inline: 22px; height: 56px; }
	.tfs-ind .tfs-logos__row img { height: calc(var(--logo-h, 44px) * 0.8); max-width: 150px; }
}

/* No motion wanted: a still, wrapping row, and the duplicate list goes. */
@media (prefers-reduced-motion: reduce) {
	.tfs-marquee { -webkit-mask-image: none; mask-image: none; }
	.tfs-marquee__track { animation: none; width: 100%; }
	.tfs-marquee__track .tfs-logos__row { flex-wrap: wrap; justify-content: center; flex: 1; row-gap: 12px; }
	.tfs-marquee__track .tfs-logos__row[aria-hidden] { display: none; }
}

/* ---------------------------------------------------------------------------
   Tabs — shared structure
   Panels are only hidden once the script has marked the set .is-enhanced;
   without JavaScript every panel shows, stacked.
   --------------------------------------------------------------------------- */
.tfs-tabs { margin-top: 20px; display: grid; gap: 25px; text-align: left; }

.tfs-tabs__rail { display: none; flex-direction: column; gap: 15px; }
.tfs-tabs.is-enhanced .tfs-tabs__rail { display: flex; }

.tfs-tab {
	display: flex; align-items: center; gap: 15px;
	width: 100%; margin: 0; padding: 12px;
	font-family: var(--tfs-font-ui);
	font-size: 1.125rem; font-weight: 600; line-height: 1.7;
	text-align: left; color: var(--tfs-navy);
	background: var(--tfs-white);
	border: 1px solid var(--ind-tab-line, #E2E8F0);
	border-radius: 14px;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tfs-tab:hover { border-color: var(--tfs-teal-dark); }
.tfs-tab:focus-visible { outline: 3px solid var(--tfs-orange); outline-offset: 2px; }

.tfs-tab__badge { display: grid; place-items: center; flex: none; }

.tfs-tabs__panels { display: grid; gap: 1.5rem; }
.tfs-tabs.is-enhanced .tfs-tabs__panels { display: block; }

.tfs-tabpanel {
	background: var(--tfs-white);
	border: 1px solid var(--ind-line, #E2EAEA);
	border-radius: 20px;
	padding: 48px;
}
.tfs-tabs.is-enhanced .tfs-tabpanel { display: none; height: 100%; }
.tfs-tabs.is-enhanced .tfs-tabpanel.is-active { display: flex; flex-direction: column; justify-content: center; }
.tfs-tabpanel:focus-visible { outline: 3px solid var(--tfs-orange); outline-offset: 2px; }

.tfs-tabpanel__title {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 20px;
	font-size: 1.875rem; line-height: 1.1;
}
.tfs-tabpanel p {
	margin: 0; max-width: none;
	font-size: 1.125rem; line-height: 1.6;
	color: var(--ind-ink, var(--tfs-slate));
}

@media (max-width: 599px) {
	.tfs-tabpanel { padding: 28px 22px; }
	.tfs-tabpanel__title { font-size: 1.5rem; }
}

/* ---- Capabilities: navy selected row, plain icon, ticks ------------------ */
@media (min-width: 900px) {
	.tfs-tabs--caps { grid-template-columns: 342px minmax(0, 1fr); }
}
.tfs-tabs--caps .tfs-tab { min-height: 72px; }
.tfs-tabs--caps .tfs-tab__badge { width: 35px; height: 35px; }
.tfs-tabs--caps .tfs-tab__icon { width: 22px; height: 22px; fill: var(--tfs-teal-dark); }
.tfs-tabs--caps .tfs-tab.is-active { background: var(--tfs-navy); border-color: var(--tfs-navy); color: var(--tfs-white); }
.tfs-tabs--caps .tfs-tab.is-active .tfs-tab__icon { fill: var(--tfs-teal); }
.tfs-tabs--caps .tfs-tabpanel__title { text-transform: uppercase; }
/* Eight rows make the rail taller than the panel's content; centring it left
   a band of empty card above the heading. Top-aligned instead. */
.tfs-tabs--caps.is-enhanced .tfs-tabpanel.is-active { justify-content: flex-start; }

.tfs-ticks {
	list-style: none; margin: 22px 0 0; padding: 0;
	display: grid; gap: 18px 68px;
}
@media (min-width: 640px) { .tfs-ticks { grid-template-columns: 1fr 1fr; } }

.tfs-ticks li {
	display: flex; align-items: center; gap: 14px;
	font-size: 1rem; font-weight: 600; line-height: 1.4;
	color: var(--tfs-navy);
}
.tfs-ticks .tfs-icon {
	width: 30px; height: 30px; padding: 8px;
	border-radius: 50%;
	background: var(--tfs-mint); fill: var(--tfs-navy);
	box-sizing: border-box;
}

.tfs-tabpanel .tfs-link { margin-top: 28px; align-self: flex-start; }

/* Capability drawings (inc/cap-art.php): open each capability panel on wide
   screens, where the eight-row rail otherwise leaves the panel mostly empty.
   Below 900px the rail stacks above the panel, so there is no gap to fill. */
.tfs-cap-art { display: none; }
@media (min-width: 900px) {
	.tfs-cap-art { display: block; width: 100%; height: auto; margin: -16px 0 32px; }
}
.tfs-cap-art text { font-family: var(--tfs-font-ui); text-rendering: geometricPrecision; }
.tfs-cap-art .ca-h { font-weight: 700; fill: #023950; }
.tfs-cap-art .ca-t { font-weight: 600; fill: #023950; }
.tfs-cap-art .ca-m { font-weight: 400; fill: #4A5B63; }
.tfs-cap-art .ca-eb { font-weight: 600; letter-spacing: .08em; fill: #237583; }
.tfs-cap-art .ca-pulse, .tfs-cap-art .ca-pop, .tfs-cap-art .ca-drop { transform-box: fill-box; transform-origin: center; }
.tfs-cap-art .ca-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.tfs-cap-art .ca-fill { transform-box: fill-box; transform-origin: left center; }

/* Motion runs only on the panel showing: hidden panels are display:none, and
   showing one restarts its entry. Resting styles are the finished drawing. */
.tfs-tabpanel.is-active .ca-pulse { animation: ca-pulse 2.4s ease-in-out infinite; }
.tfs-tabpanel.is-active .ca-hop { animation: ca-hop 6s cubic-bezier(.6, 0, .3, 1) infinite; }
.tfs-tabpanel.is-active .ca-pop { animation: ca-pop 350ms cubic-bezier(.3, 1.4, .5, 1) var(--t, 200ms) both; }
.tfs-tabpanel.is-active .ca-drop { animation: ca-drop 500ms cubic-bezier(.3, 1.3, .5, 1) 150ms both; }
.tfs-tabpanel.is-active .ca-draw { animation: ca-draw 700ms ease-out var(--t, 0ms) both; }
.tfs-tabpanel.is-active .ca-scan { animation: ca-scan 3.2s ease-in-out infinite; }
.tfs-tabpanel.is-active .ca-move { animation: ca-move 4s ease-in-out infinite; }
.tfs-tabpanel.is-active .ca-trace { animation: ca-trace 4s ease-in-out infinite; }
.tfs-tabpanel.is-active .ca-fill { animation: ca-fill 4s ease-in-out infinite; }
@keyframes ca-hop { 0% { transform: translateX(0); opacity: 0; } 4%, 26% { transform: translateX(0); opacity: 1; } 34%, 58% { transform: translateX(158px); opacity: 1; } 66%, 90% { transform: translateX(316px); opacity: 1; } 96%, 100% { transform: translateX(316px); opacity: 0; } }
@keyframes ca-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes ca-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ca-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes ca-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ca-scan { 0% { transform: translateY(0); } 50% { transform: translateY(134px); } 100% { transform: translateY(0); } }
@keyframes ca-move { 0%, 15% { transform: translateX(0); } 45%, 85% { transform: translateX(226px); } 100% { transform: translateX(0); opacity: 0; } }
@keyframes ca-trace { 0%, 8% { transform: translateX(0); } 80%, 100% { transform: translateX(500px); } }
@keyframes ca-fill { 0%, 8% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
	.tfs-tabpanel.is-active .tfs-cap-art * { animation: none !important; }
}

/* ---- Challenges: icon badges, teal-outlined selected row, split panel ---- */
@media (min-width: 900px) {
	.tfs-tabs--challenge { grid-template-columns: 399px minmax(0, 1fr); gap: 30px; }
}
.tfs-tabs--challenge .tfs-tab { min-height: 92px; border-radius: 14px; }
.tfs-tabs--challenge .tfs-tab__badge {
	width: 50px; height: 50px; border-radius: 14px;
	background: var(--tfs-surface-teal);
}
.tfs-tabs--challenge .tfs-tab__icon { width: 22px; height: 22px; fill: var(--tfs-teal-dark); }
.tfs-tabs--challenge .tfs-tab.is-active {
	background: var(--tfs-surface);
	border: 2px solid var(--tfs-teal-dark);
	padding: 11px;
	color: var(--tfs-teal-dark);
}
.tfs-tabs--challenge .tfs-tab.is-active .tfs-tab__badge,
.tfs-tabs--challenge .tfs-tabpanel__title .tfs-tab__badge { background: var(--tfs-teal-dark); }
.tfs-tabs--challenge .tfs-tab.is-active .tfs-tab__icon,
.tfs-tabs--challenge .tfs-tabpanel__title .tfs-tab__icon { fill: var(--tfs-white); }

.tfs-tabs--challenge .tfs-tabpanel { padding: 48px 37px; }

.tfs-tabpanel__label {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 8px !important;
	font-family: var(--tfs-font-ui);
	font-size: 1.25rem !important; font-weight: 600; line-height: 1.65 !important;
	text-transform: uppercase;
}
.tfs-tabpanel__label--problem  { color: var(--tfs-navy) !important; }
.tfs-tabpanel__label--solution { color: var(--tfs-teal-dark) !important; font-weight: 500; }
.tfs-tabpanel__label .tfs-icon { width: 16px; height: 16px; }

.tfs-tabpanel__second {
	margin-top: 14px; padding-top: 12px;
	border-top: 2px solid #EBF0F0;
}

/* ---------------------------------------------------------------------------
   Intro + founder video
   --------------------------------------------------------------------------- */
.tfs-isec--intro { padding-block: 50px; }
.tfs-intro { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .tfs-intro { grid-template-columns: minmax(0, 655px) minmax(0, 431px); justify-content: space-between; } }

.tfs-intro h2 { font-size: clamp(1.75rem, 1vw + 1.4rem, 2.25rem); line-height: 1.25; margin-bottom: 20px; }
.tfs-intro__body p { margin: 0 0 1em; font-size: 1.125rem; line-height: 1.6; color: var(--ind-ink); }
.tfs-intro__body p:last-child { margin-bottom: 0; }

.tfs-video {
	position: relative; margin: 0;
	border-radius: 20px; overflow: hidden;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
	aspect-ratio: 431 / 323;
}
.tfs-video a,
.tfs-video__slot { display: block; position: relative; width: 100%; height: 100%; }
.tfs-video img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }

.tfs-video__play {
	position: absolute; inset: 0; margin: auto;
	width: 84px; height: 84px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--tfs-white); color: var(--tfs-navy);
}
.tfs-video__play .tfs-icon { width: 24px; height: 24px; margin-left: 4px; }

.tfs-video__badge {
	position: absolute; top: 20px; left: 20px;
	margin: 0; padding: 9px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
	font-family: var(--tfs-font-ui);
	font-size: 0.625rem; font-weight: 600; line-height: 1;
	text-transform: uppercase;
	color: var(--tfs-navy);
}

/* Before the video exists: the same card, visibly inert. */
.tfs-video--empty { background: linear-gradient(135deg, var(--tfs-teal-dark) 0%, var(--tfs-navy) 100%); box-shadow: none; }
.tfs-video--empty .tfs-video__play { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.7); }
.tfs-video--empty .tfs-video__slot p {
	position: absolute; left: 20px; right: 20px; bottom: 18px;
	margin: 0; text-align: center;
	font-size: 0.875rem; line-height: 1.4;
	color: var(--tfs-white);
}

/* ---------------------------------------------------------------------------
   Proven results
   --------------------------------------------------------------------------- */
.tfs-results { display: grid; gap: 28px; }
@media (min-width: 860px) { .tfs-results { grid-template-columns: repeat(2, 1fr); } }

/* One result per card, read top to bottom: what kind of client, the headline
   figure and what it measures, one line of context, then the two supporting
   figures as label / value rows (so "27.4 → 11" never wraps), then the link.
   (Redesigned 2026-09-21: the two-tone card was hard to read.) */
.tfs-result {
	display: flex; flex-direction: column;
	padding: 28px 28px 24px;
	background: var(--tfs-white);
	border: 1px solid var(--ind-line); border-top: 4px solid var(--tfs-teal-dark);
	border-radius: 20px;
	box-shadow: 0 14px 34px rgba(2, 57, 80, 0.06);
}
.tfs-result__head { padding: 0; background: none; min-height: 0; }
.tfs-result__tag {
	display: inline-block; padding: 6px 12px; border-radius: 999px;
	background: var(--tfs-surface); color: var(--tfs-teal-dark);
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
}
.tfs-result__stat { margin: 18px 0 0; }
.tfs-result__stat b { display: block; font-family: var(--tfs-font-display); font-size: clamp(2.5rem, 2vw + 1.6rem, 3.25rem); font-weight: 700; line-height: 1; color: var(--tfs-navy); white-space: nowrap; }
.tfs-result__stat span { display: block; margin-top: 8px; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--tfs-navy); }

.tfs-result__body { display: flex; flex-direction: column; flex: 1; padding: 0; }
.tfs-result__desc { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--ind-line); font-size: 0.9375rem; line-height: 1.6; color: var(--ind-ink); }
.tfs-result__stats { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; }
.tfs-result__stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--tfs-surface); }
.tfs-result__stats dt { order: 2; font-size: 1.125rem; font-weight: 700; line-height: 1.2; color: var(--tfs-navy); white-space: nowrap; }
.tfs-result__stats dd { order: 1; margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--ind-ink); }
.tfs-result .tfs-link { margin-top: auto; padding-top: 22px; font-weight: 600; }

/* ---------------------------------------------------------------------------
   CTA band — a navy card inside a white section, heading left, pill right
   --------------------------------------------------------------------------- */
.tfs-isec--cta { padding-block: 50px; }
.tfs-cta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.5rem 2rem;
	padding: 35px;
	background: var(--tfs-navy);
	border-radius: 20px;
	text-align: left;
}
.tfs-cta h2 {
	max-width: 42rem; margin: 0;
	font-size: clamp(1.625rem, 1vw + 1.25rem, 2.1875rem); /* 26 → 35 */
	line-height: 1; color: var(--tfs-white);
}
.tfs-cta .tfs-btn { margin-right: 85px; }
@media (max-width: 782px) {
	.tfs-cta { padding: 28px 24px; }
	.tfs-cta .tfs-btn { margin-right: 0; }
}

/* ---------------------------------------------------------------------------
   Fractional vs traditional — port of his .fsvo widget
   Fixed 1200px stage from 1220px up; stacked lanes below.
   --------------------------------------------------------------------------- */
.fsvo {
	--teal: #237583; --teal-ring: #4E9AA8;
	--grey: #6B7C84; --grey-ring: #C6D1D6;
	--label: #0F3D4F; --trad-head: #5F7379;
	--line: #E1EBED; --bg: #F1F6F7;

	margin-top: 56px;
	font-family: var(--tfs-font-ui);
	color: var(--grey);
	text-align: left;
}
.fsvo p, .fsvo h3, .fsvo h4 { margin: 0; max-width: none; }
.fsvo .tfs-icon { width: 24px; height: 24px; fill: var(--teal); }

.fsvo .stage-wrap { display: flex; justify-content: center; }
.fsvo .stage { position: relative; width: 1200px; height: 536px; flex: none; }
.fsvo .stage .lines { position: absolute; left: 0; top: 0; width: 1200px; height: 591px; overflow: visible; pointer-events: none; }
/* Stops at the bottom of the cards (536px). His ran to 585px and poked out below them. */
.fsvo .divider { position: absolute; left: 600px; top: 70px; width: 1px; height: 466px; background: var(--line); }
.fsvo .vs {
	position: absolute; left: 575px; top: 125px; z-index: 3;
	width: 50px; height: 50px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--tfs-white); border: 1px solid var(--line);
	font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--grey);
}

.fsvo .lane-head { position: absolute; top: 0; width: 378px; height: 60px; }
.fsvo .lh-good { left: 0; }
.fsvo .lh-bad  { left: 640px; }
.fsvo .ring {
	position: absolute; left: 0; top: 6px;
	width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	border: 1.6px solid var(--teal-ring);
}
.fsvo .ring .tfs-icon { width: 20px; height: 20px; }
.fsvo .lane-title {
	position: absolute; left: 58px; top: 6px;
	font-size: 17px; font-weight: 600; line-height: 23px;
	letter-spacing: 0.055em; text-transform: uppercase;
	color: var(--teal);
}
.fsvo .lane-sub { position: absolute; left: 58px; top: 40px; font-size: 14.5px; font-style: italic; line-height: 18px; color: var(--teal); }
.fsvo .lh-bad .ring { border-color: var(--grey-ring); }
.fsvo .lh-bad .tfs-icon { fill: var(--grey); }
.fsvo .lh-bad .lane-title { color: var(--trad-head); }
.fsvo .lh-bad .lane-sub { color: #7C8E96; }

.fsvo .node {
	position: absolute; z-index: 2;
	width: 58px; height: 58px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--bg); border: 1.8px solid var(--teal-ring);
}
.fsvo .nd5, .fsvo .nd6, .fsvo .nd7, .fsvo .nd8 { border-color: var(--grey-ring); }
.fsvo .nd5 .tfs-icon, .fsvo .nd6 .tfs-icon, .fsvo .nd7 .tfs-icon, .fsvo .nd8 .tfs-icon { fill: var(--grey); }

.fsvo .nd1 { left: 41px;   top: 149px; } .fsvo .lb1 { left: -2px;   top: 216px; }
.fsvo .nd2 { left: 181px;  top: 93px;  } .fsvo .lb2 { left: 138px;  top: 160px; }
.fsvo .nd3 { left: 321px;  top: 149px; } .fsvo .lb3 { left: 278px;  top: 216px; }
.fsvo .nd4 { left: 461px;  top: 93px;  } .fsvo .lb4 { left: 418px;  top: 160px; }
.fsvo .nd5 { left: 681px;  top: 149px; } .fsvo .lb5 { left: 638px;  top: 216px; }
.fsvo .nd6 { left: 821px;  top: 93px;  } .fsvo .lb6 { left: 778px;  top: 160px; }
.fsvo .nd7 { left: 961px;  top: 149px; } .fsvo .lb7 { left: 918px;  top: 216px; }
.fsvo .nd8 { left: 1105px; top: 93px;  } .fsvo .lb8 { left: 1062px; top: 160px; }

.fsvo .lbl { position: absolute; width: 144px; text-align: center; }
.fsvo .lbl b, .fsvo .cell b { display: block; font-size: 13px; font-weight: 600; line-height: 15px; color: var(--label); }
.fsvo .lbl span { display: block; margin-top: 5px; font-size: 11.5px; line-height: 14px; color: var(--grey); }

.fsvo .panel {
	position: absolute; top: 345px; width: 560px; height: 191px;
	display: grid; grid-template-columns: repeat(3, 1fr);
	background: var(--tfs-white); border-radius: 12px;
	box-shadow: 0 1px 2px rgba(2, 57, 80, 0.04);
}
.fsvo .panel.good { left: 0; }
.fsvo .panel.bad  { left: 640px; }
.fsvo .cell {
	display: flex; flex-direction: column; align-items: center;
	padding: 30px 20px 0; text-align: center;
}
.fsvo .cell + .cell { border-left: 1px solid var(--line); }
.fsvo .cell .ico { display: flex; margin-bottom: 16px; }
.fsvo .cell .ico .tfs-icon { width: 26px; height: 26px; }
.fsvo .cell > span:last-child { display: block; margin-top: 12px; font-size: 11.5px; line-height: 14.5px; color: var(--grey); }
.fsvo .panel.bad .cell { padding-top: 20px; }
.fsvo .panel.bad .cell .x { display: flex; margin-bottom: 8px; }
.fsvo .panel.bad .cell .x .tfs-icon { width: 16px; height: 16px; fill: #B7C6CB; }
.fsvo .panel.bad .cell .ico { margin-bottom: 12px; }
.fsvo .panel.bad .cell .ico .tfs-icon { width: 22px; height: 22px; fill: var(--grey); }

.fsvo .stacked { display: none; }

@media (max-width: 1219px) {
	.fsvo { margin-top: 48px; }
	.fsvo .stage-wrap { display: none; }
	.fsvo .stacked { display: grid; gap: 52px; }

	.fsvo .lane2 .head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
	.fsvo .lane2 .ring { position: static; flex: none; }
	.fsvo .lane2 h3 {
		margin: 3px 0 5px;
		font-family: var(--tfs-font-ui);
		font-size: 16px; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase;
		color: var(--teal);
	}
	.fsvo .lane2 .head p { font-size: 14px; font-style: italic; color: var(--teal); }
	.fsvo .lane2--bad .ring { border-color: var(--grey-ring); }
	.fsvo .lane2--bad .tfs-icon { fill: var(--grey); }
	.fsvo .lane2--bad h3 { color: var(--trad-head); }
	.fsvo .lane2--bad .head p { color: #7C8E96; }

	.fsvo .lane2 ol { position: relative; list-style: none; margin: 0; padding: 0; }
	.fsvo .lane2 ol::before {
		content: ""; position: absolute; left: 28px; top: 16px; bottom: 16px;
		width: 3px; border-radius: 2px;
		background: repeating-linear-gradient(to bottom, var(--teal) 0 12px, transparent 12px 21px);
	}
	.fsvo .lane2--bad ol::before { background: repeating-linear-gradient(to bottom, var(--grey) 0 12px, transparent 12px 21px); }
	.fsvo .lane2 ol > li { position: relative; display: flex; gap: 18px; padding-bottom: 24px; }
	.fsvo .lane2 ol > li:last-child { padding-bottom: 0; }
	.fsvo .lane2 .n {
		position: relative; z-index: 2; flex: none;
		width: 58px; height: 58px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		background: var(--bg); border: 1.8px solid var(--teal-ring);
	}
	.fsvo .lane2--bad .n { border-color: var(--grey-ring); }
	.fsvo .lane2 .t { padding-top: 10px; }
	.fsvo .lane2 .t b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--label); }
	.fsvo .lane2 .t span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--grey); }

	.fsvo .p2 {
		list-style: none; margin: 26px 0 0; padding: 0;
		background: var(--tfs-white); border: 1px solid var(--line); border-radius: 12px;
	}
	.fsvo .c2 { padding: 24px; border-bottom: 1px solid var(--line); }
	.fsvo .c2:last-child { border-bottom: 0; }
	.fsvo .c2 .ico { display: flex; margin-bottom: 14px; }
	.fsvo .lane2--bad .c2 .tfs-icon { width: 18px; height: 18px; fill: #B7C6CB; }
	.fsvo .c2 h4 { margin: 0 0 8px; font-family: var(--tfs-font-ui); font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--label); }
	.fsvo .c2 p { font-size: 13px; line-height: 1.55; color: var(--grey); }
}

@media (min-width: 800px) and (max-width: 1219px) {
	.fsvo .stacked { grid-template-columns: 1fr 1fr; gap: 48px; }
}

/* The comparison card: navy header, a small label above each pair, a mint
   tick beside ours and a grey dash beside theirs. Stacks below 720px. */
.fsvo .tfs-compare {
	margin-top: 48px;
	background: var(--tfs-white);
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
}
.fsvo .tfs-compare table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fsvo .tfs-compare th,
.fsvo .tfs-compare td { text-align: left; vertical-align: top; }

.fsvo .tfs-compare thead th {
	padding: 20px 24px;
	background: var(--tfs-navy);
	font-size: 0.9375rem; font-weight: 700; line-height: 1.4;
	color: var(--tfs-white);
}
.fsvo .tfs-compare thead th + th {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	font-weight: 600; color: #9FC3CB;
}

.fsvo .tfs-compare tbody + tbody { border-top: 1px solid var(--line); }

.fsvo .tfs-compare__label th {
	padding: 24px 24px 12px;
	font-size: 0.6875rem; font-weight: 700; line-height: 1.4;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--tfs-teal-dark);
}

.fsvo .tfs-compare__pair td { padding: 0 24px 24px; }
.fsvo .tfs-compare__pair td + td { border-left: 1px solid var(--line); }
.fsvo .tfs-compare__pair td {
	display: table-cell;
	font-size: 1rem; line-height: 1.55;
}
.fsvo .tfs-compare__pair td > span { display: block; padding-left: 33px; }
.fsvo .tfs-compare__pair .tfs-icon {
	float: left;
	width: 22px; height: 22px; margin-top: 1px; padding: 6px;
	border-radius: 50%; box-sizing: border-box;
}
.fsvo .tfs-compare__ours  { font-weight: 700; color: #2B3A40; }
.fsvo .tfs-compare__ours .tfs-icon   { background: var(--tfs-mint); fill: var(--tfs-navy); }
.fsvo .tfs-compare__theirs { font-weight: 400; color: var(--tfs-slate); }
.fsvo .tfs-compare__theirs .tfs-icon { background: #EEF3F4; fill: var(--tfs-navy); }

.fsvo .tfs-compare__note {
	margin: 16px 0 0 !important; padding: 0 4px;
	font-size: 0.9375rem; font-style: italic; line-height: 1.6;
	color: var(--tfs-slate);
}

@media (max-width: 719px) {
	.fsvo .tfs-compare { margin-top: 36px; }
	.fsvo .tfs-compare table,
	.fsvo .tfs-compare tbody,
	.fsvo .tfs-compare tr,
	.fsvo .tfs-compare th,
	.fsvo .tfs-compare td { display: block; width: 100%; }
	/* The icons carry which side is which, so the header row goes. */
	.fsvo .tfs-compare thead { display: none; }
	.fsvo .tfs-compare__pair td { padding: 0 24px 16px; }
	.fsvo .tfs-compare__pair td + td { border-left: 0; padding-bottom: 24px; }
}

.fsvo .bottomline {
	display: flex; align-items: flex-start; gap: 22px;
	margin-top: 40px; padding: 30px 36px;
	background: #DCEBDD; border-radius: 14px;
}
.fsvo .bottomline .badge {
	flex: none; width: 44px; height: 44px; margin-top: 2px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--tfs-orange);
}
.fsvo .bottomline .badge .tfs-icon { width: 20px; height: 20px; fill: var(--tfs-navy); }
.fsvo .bottomline__title {
	margin: 0 0 8px !important;
	font-family: var(--tfs-font-display);
	font-size: 19px; font-weight: 700; line-height: 1.3;
	color: var(--tfs-navy);
}
.fsvo .bottomline p { font-size: 15px; line-height: 1.6; color: var(--tfs-slate); }
@media (max-width: 640px) {
	.fsvo .bottomline { flex-direction: column; gap: 16px; padding: 26px 22px; }
}

/* ---------------------------------------------------------------------------
   Why this industry chooses fractional — three cards
   --------------------------------------------------------------------------- */
.tfs-reasons {
	display: grid; gap: 30px; margin-top: 50px; text-align: left;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.tfs-reason {
	padding: 26px;
	background: var(--tfs-white);
	border: 1px solid var(--ind-line);
	border-radius: 18px;
}
.tfs-reason__icon {
	display: grid; place-items: center;
	width: 50px; height: 50px; border-radius: 14px;
	background: var(--tfs-navy);
}
.tfs-reason__icon .tfs-icon { width: 24px; height: 24px; fill: var(--tfs-teal); }
.tfs-reason h3 { margin: 18px 0 10px; font-size: 1.375rem; font-weight: 600; line-height: 1.1; }
.tfs-reason p { margin: 0; font-size: 1.125rem; line-height: 1.65; color: var(--ind-ink); }

/* ---------------------------------------------------------------------------
   Insights / tools / cluster feeds
   --------------------------------------------------------------------------- */
.tfs-feed__list {
	list-style: none; padding: 0; margin: 30px 0 0;
	display: grid; gap: 30px;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.tfs-feed__item a {
	display: flex; flex-direction: column; height: 100%;
	padding: 26px;
	background: var(--tfs-white);
	border: 1px solid var(--ind-line);
	border-radius: 20px;
	text-decoration: none; color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tfs-feed__item a:hover { border-color: var(--tfs-teal); box-shadow: var(--tfs-shadow-md); }
.tfs-feed__item h3 { margin: 0; font-size: 1.375rem; line-height: 1.1; color: var(--tfs-navy); }
.tfs-feed__item p { margin: 12px 0 0; font-size: 1.125rem; line-height: 1.65; color: var(--ind-ink); }
.tfs-feed__item .tfs-link { margin-top: auto; padding-top: 18px; font-size: 1rem; font-weight: 400; }
.tfs-feed--cluster .tfs-feed__item p { display: none; }

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */
.tfs-ind .tfs-faq { max-width: 787px; margin: 20px auto 0; text-align: left; }
.tfs-ind .tfs-faq__item { margin: 0 0 16px; padding: 0; border: 0; background: none; }

.tfs-ind .tfs-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	list-style: none; cursor: pointer;
	padding: 15px 17px;
	background: var(--tfs-white);
	border: 2px solid var(--ind-line);
	border-radius: 10px;
	font-family: var(--tfs-font-ui);
	font-size: 1rem; font-weight: 700; line-height: 1.65;
	color: var(--tfs-navy);
}
.tfs-ind .tfs-faq__item summary::-webkit-details-marker { display: none; }
.tfs-ind .tfs-faq__item summary::after { content: none; }
.tfs-ind .tfs-faq__item summary .tfs-icon { width: 13px; height: 15px; fill: var(--tfs-navy); }
.tfs-ind .tfs-faq__minus { display: none; }
.tfs-ind .tfs-faq__item[open] .tfs-faq__minus { display: block; }
.tfs-ind .tfs-faq__item[open] .tfs-faq__plus { display: none; }

.tfs-ind .tfs-faq__item[open] summary {
	margin: 0;
	border-color: rgba(35, 117, 131, 0.33);
	border-radius: 10px 10px 0 0;
}
.tfs-ind .tfs-faq__answer {
	margin: 0; padding: 22px 24px;
	background: var(--tfs-white);
	border: 2px solid rgba(35, 117, 131, 0.33); border-top: 0;
	border-radius: 0 0 10px 10px;
}
.tfs-ind .tfs-faq__answer p { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.6; color: var(--ind-ink); }
.tfs-ind .tfs-faq__answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   14. THE LIBRARY
   The hub at /industries/{industry}/library/ and the items under it. Same
   components as the industry pages — this is a room inside the same building —
   but denser: the hub is a catalogue, not seven hero sections.
   ========================================================================== */

.tfs-libcrumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-bottom: 18px;
	font-size: 0.8125rem; font-weight: 600;
	color: var(--tfs-teal-dark);
}
.tfs-libcrumbs a { color: var(--tfs-teal-dark); text-decoration: none; }
.tfs-libcrumbs a:hover { text-decoration: underline; }
.tfs-libcrumbs span[aria-hidden] { color: var(--ind-line, #E2EAEA); }
.tfs-libcrumbs [aria-current] { color: var(--tfs-navy); }

/* ---- Hub ---------------------------------------------------------------- */
.tfs-ihero--library { padding-block: 38px 34px; }
.tfs-ihero--library .tfs-wrap { position: relative; }
.tfs-lib__lede { max-width: 52rem; margin: 16px 0 0; font-size: 1.0625rem; line-height: 1.65; }
.tfs-lib__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 0.875rem; }
.tfs-lib__meta .tfs-link { font-size: 0.875rem; }
.tfs-lib__meta .tfs-link .tfs-icon { width: 14px; height: 14px; }

.tfs-jump {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--ind-line, #E2EAEA);
}
.tfs-jump__row { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; }
.tfs-jump__row::-webkit-scrollbar { display: none; }
.tfs-jump__chip {
	display: inline-flex; align-items: center; gap: 8px; flex: none;
	padding: 9px 15px; border-radius: 25px;
	background: var(--tfs-white); border: 1px solid var(--ind-line, #E2EAEA);
	font-family: var(--tfs-font-ui); font-size: 0.875rem; font-weight: 600;
	color: var(--tfs-navy); text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tfs-jump__chip:hover { border-color: var(--tfs-teal); background: var(--tfs-surface-teal); color: var(--tfs-navy); }
.tfs-jump__chip .tfs-icon { width: 15px; height: 15px; fill: var(--tfs-teal-dark); }
.tfs-jump__chip b { font-weight: 700; color: var(--tfs-teal-dark); }

/* Anchored sections must clear the sticky nav. */
.tfs-lib .tfs-isec[id] { scroll-margin-top: 72px; }

.tfs-libcards {
	list-style: none; margin: 24px 0 0; padding: 0;
	display: grid; gap: 18px;
	/* auto-fill, not auto-fit: a cluster with one item keeps a one-third card
	   instead of a single card stretched across the page. */
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.tfs-libcard a {
	display: flex; gap: 12px; height: 100%;
	padding: 16px 18px;
	background: var(--tfs-white);
	border: 1px solid var(--ind-line, #E2EAEA);
	border-radius: 16px;
	text-decoration: none; color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tfs-libcard a:hover { border-color: var(--tfs-teal); box-shadow: var(--tfs-shadow-md); }
.tfs-libcard__icon {
	display: grid; place-items: center; flex: none;
	width: 30px; height: 30px; border-radius: 9px;
	background: var(--tfs-surface-teal);
}
.tfs-libcard__icon .tfs-icon { width: 15px; height: 15px; fill: var(--tfs-teal-dark); }
.tfs-libcard__body { display: flex; flex-direction: column; flex-grow: 1; }
.tfs-libcard__title { font-family: var(--tfs-font-display); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--tfs-navy); }
.tfs-libcard__desc { margin-top: 5px; font-size: 0.8125rem; line-height: 1.5; color: var(--ind-ink, var(--tfs-slate)); }
.tfs-libcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.tfs-libcard__tag { font-size: 0.6875rem; font-weight: 600; color: var(--tfs-teal-dark); background: var(--tfs-surface-teal); padding: 5px 10px; border-radius: 16px; }
.tfs-libcard__go {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--tfs-teal); color: var(--tfs-navy);
	font-size: 0.75rem; font-weight: 600; padding: 7px 13px; border-radius: 16px;
}
.tfs-libcard__go .tfs-icon { width: 11px; height: 11px; }

.tfs-lib__more { margin-top: 22px; }
.tfs-lib__morelabel { margin: 0 0 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ind-ink, var(--tfs-slate)); }
.tfs-lib__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tfs-lib__list a { font-size: 0.9375rem; text-decoration: none; }
.tfs-lib__list a:hover { text-decoration: underline; }

/* ---- One item ----------------------------------------------------------- */
.tfs-ihero--navy { background: var(--tfs-navy); }
.tfs-ihero--navy::before { opacity: 0.12; }
.tfs-ihero--navy h1, .tfs-ihero--navy .tfs-eyebrow { color: var(--tfs-white); }
.tfs-ihero--navy .tfs-item__lede { color: var(--tfs-mint); }
.tfs-ihero--navy .tfs-item__meta, .tfs-ihero--navy .tfs-libcrumbs { color: #9FC3CB; }
.tfs-ihero--navy .tfs-libcrumbs a { color: #9FC3CB; }
.tfs-ihero--navy .tfs-libcrumbs [aria-current] { color: var(--tfs-white); }

.tfs-item .tfs-ihero { padding-block: 34px 40px; }
/* Lift the content above the wave overlay, as the industry hero's grid does. */
.tfs-item .tfs-ihero > .tfs-wrap { position: relative; }
.tfs-item__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.tfs-item__chips span {
	font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--tfs-teal-dark); background: var(--tfs-surface-teal);
	padding: 6px 12px; border-radius: 20px;
}
.tfs-ihero--navy .tfs-item__chips span { background: rgba(255, 255, 255, 0.14); color: var(--tfs-mint); }

.tfs-item__head { display: grid; gap: 34px; align-items: center; }
@media (min-width: 960px) { .tfs-item__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.tfs-item h1 { font-size: clamp(2rem, 2vw + 1.4rem, 2.75rem); line-height: 1.12; margin: 0 0 16px; }
.tfs-item__lede { margin: 0 0 18px; font-size: 1.0625rem; line-height: 1.65; }
.tfs-item__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 0.875rem; }
.tfs-item__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 26px 0 0; }
.tfs-item__nogate { font-size: 0.875rem; }

.tfs-item__stats { display: grid; gap: 14px; }
.tfs-stat { background: rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 18px 20px; }
.tfs-stat b { display: block; font-family: var(--tfs-font-display); font-size: 1.75rem; line-height: 1; color: var(--tfs-white); }
.tfs-stat span { display: block; margin-top: 8px; font-size: 0.875rem; color: var(--tfs-mint); }
.tfs-stat--lead { background: #0B4A5E; }
.tfs-stat--lead b { font-size: 2.75rem; }
.tfs-item:not(.tfs-item--research) .tfs-stat { background: var(--tfs-white); border: 1px solid var(--ind-line, #E2EAEA); }
.tfs-item:not(.tfs-item--research) .tfs-stat b { color: var(--tfs-navy); }
.tfs-item:not(.tfs-item--research) .tfs-stat span { color: var(--ind-ink, var(--tfs-slate)); }

.tfs-item__preview img { width: 100%; height: auto; border-radius: var(--tfs-radius-lg); box-shadow: var(--tfs-shadow-md); }

.tfs-item__grid { display: grid; gap: 44px; align-items: start; }
@media (min-width: 960px) { .tfs-item__grid { grid-template-columns: minmax(0, 1fr) 20rem; } }
.tfs-item__body p { margin: 0 0 1.1em; font-size: 1.0625rem; line-height: 1.75; }
.tfs-item__body h2 { font-size: 1.75rem; margin: 1.6em 0 0.5em; }
.tfs-item__body h3 { font-size: 1.25rem; margin: 1.4em 0 0.4em; }
.tfs-item__body ul, .tfs-item__body ol { font-size: 1.0625rem; line-height: 1.75; padding-left: 1.2em; }
.tfs-item__h2 { font-size: 1.75rem; margin: 0 0 18px; }

.tfs-item__aside { display: grid; gap: 18px; position: sticky; top: 92px; }
.tfs-item__card {
	padding: 22px 24px;
	background: var(--tfs-white);
	border: 1px solid var(--ind-line, #E2EAEA);
	border-radius: var(--tfs-radius-md);
}
.tfs-item__card h2 { font-size: 1.125rem; margin: 0 0 12px; }
.tfs-item__card p { margin: 0 0 12px; font-size: 0.9375rem; line-height: 1.6; }
.tfs-item__card--tint { background: var(--tfs-surface); }
.tfs-item__card--navy { background: var(--tfs-navy); border-color: var(--tfs-navy); }
.tfs-item__card--navy h2 { color: var(--tfs-white); }
.tfs-item__card--navy p { color: var(--tfs-mint); }
.tfs-item__card .tfs-ticks--stack { grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
.tfs-item__card .tfs-ticks li { font-size: 0.9375rem; }
.tfs-item__card .tfs-ticks .tfs-icon { width: 24px; height: 24px; padding: 6px; }

.tfs-item__facts { display: grid; gap: 12px; margin: 0 0 12px; }
.tfs-item__facts dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tfs-teal-dark); }
.tfs-item__facts dd { margin: 3px 0 0; font-size: 0.9375rem; color: var(--tfs-navy); font-weight: 600; }
.tfs-item__method p { font-size: 0.875rem; line-height: 1.6; }
.tfs-item__cite { font-size: 0.875rem; line-height: 1.6; background: var(--tfs-surface); border-radius: 12px; padding: 12px 14px; }

.tfs-item__site { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 0.9375rem; }
.tfs-item__site strong { font-family: var(--tfs-font-display); font-size: 1.125rem; color: var(--tfs-navy); }

.tfs-scorecard { display: grid; gap: 16px; margin: 0 0 34px; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.tfs-score { padding: 18px 20px; background: var(--tfs-white); border: 1px solid var(--ind-line, #E2EAEA); border-radius: var(--tfs-radius-md); }
.tfs-score__label { margin: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tfs-teal-dark); }
.tfs-score__value { margin: 8px 0 10px; font-family: var(--tfs-font-display); font-size: 1.75rem; line-height: 1; color: var(--tfs-navy); }
.tfs-score__bar { display: block; height: 6px; border-radius: 3px; background: var(--ind-line, #E2EAEA); overflow: hidden; }
.tfs-score__bar span { display: block; height: 6px; border-radius: 3px; background: var(--tfs-teal); }
.tfs-score__note { margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.5; }

.tfs-steal { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; font-size: 0.9375rem; line-height: 1.55; }

.tfs-inside { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0 0 34px; }
.tfs-inside__item { padding: 18px 20px; background: var(--tfs-white); border: 1px solid var(--ind-line, #E2EAEA); border-radius: var(--tfs-radius-md); }
.tfs-inside__item h3 { font-size: 1.0625rem; margin: 0 0 6px; }
.tfs-inside__item p { margin: 0; font-size: 0.9375rem; line-height: 1.55; }

.tfs-steps { list-style: none; counter-reset: tfs-lib-step; margin: 0 0 34px; padding: 0; display: grid; gap: 16px; }
.tfs-steps li { counter-increment: tfs-lib-step; position: relative; padding-left: 46px; }
.tfs-steps li::before {
	content: counter(tfs-lib-step);
	position: absolute; left: 0; top: 0;
	width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--tfs-navy); color: var(--tfs-white);
	font-family: var(--tfs-font-ui); font-size: 0.875rem; font-weight: 600;
}
.tfs-steps h3 { font-size: 1.0625rem; margin: 4px 0 4px; }
.tfs-steps p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }

.tfs-criteria { padding: 24px 26px; background: var(--tfs-surface); border-radius: var(--tfs-radius-md); margin: 0 0 34px; }
.tfs-criteria h2 { font-size: 1.375rem; margin: 0 0 8px; }
.tfs-criteria__intro { margin: 0 0 16px; font-size: 0.9375rem; line-height: 1.6; }
.tfs-criteria__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.tfs-criteria__item { background: var(--tfs-white); border: 1px solid var(--ind-line, #E2EAEA); border-radius: 12px; padding: 14px 16px; }
.tfs-criteria__item h3 { font-size: 0.9375rem; margin: 0 0 4px; }
.tfs-criteria__item p { margin: 0; font-size: 0.8125rem; line-height: 1.5; }
.tfs-criteria__note { margin: 16px 0 0; font-size: 0.8125rem; font-style: italic; }

.tfs-item__tool { margin-top: 28px; }

@media (max-width: 959px) {
	.tfs-item__aside { position: static; }
}


/* ==========================================================================
   15. CONTACT
   ========================================================================== */
.tfs-contact__hero { padding-block: 30px 56px; }
.tfs-contact__hero .tfs-wrap { position: relative; }
.tfs-contact__card {
	max-width: 900px; margin: 8px auto 0; padding: 48px 56px;
	background: var(--tfs-navy); border-radius: var(--tfs-radius-md);
	text-align: center;
}
.tfs-contact__card h1 { color: var(--tfs-white); font-size: clamp(2rem, 2vw + 1.5rem, 2.75rem); margin: 0 0 18px; }
.tfs-contact__card h1 span, .tfs-contact h2 span { color: var(--tfs-teal); }
.tfs-contact h2 span { color: var(--tfs-teal-dark); }
.tfs-contact__intro p { max-width: 44rem; margin: 0 auto 10px; font-size: 1rem; line-height: 1.7; color: var(--tfs-mint); }
.tfs-contact__intro p:last-child { margin-bottom: 0; }

.tfs-contact__grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 900px) { .tfs-contact__grid { grid-template-columns: 1fr 1fr; } }
.tfs-contact__grid h2 { font-size: 2rem; margin: 0 0 24px; }

.tfs-expect { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.tfs-expect li { display: flex; gap: 14px; align-items: flex-start; }
.tfs-expect__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--tfs-teal); }
.tfs-expect__icon .tfs-icon { width: 16px; height: 16px; fill: var(--tfs-navy); }
.tfs-expect strong { display: block; font-size: 1rem; font-weight: 600; color: var(--tfs-navy); line-height: 1.45; }
.tfs-expect small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--tfs-slate); }

.tfs-form-card { padding: 28px 30px; background: var(--tfs-white); border: 1px solid var(--tfs-border); border-radius: var(--tfs-radius-md); box-shadow: var(--tfs-shadow-sm); scroll-margin-top: 90px; }
.tfs-form { display: grid; gap: 14px; }
.tfs-form__row { margin: 0; display: grid; gap: 6px; }
.tfs-form__row label { font-family: var(--tfs-font-ui); font-size: 0.8125rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-form__row input, .tfs-form__row textarea {
	width: 100%; padding: 11px 13px;
	font: inherit; font-size: 0.9375rem; color: var(--tfs-navy);
	background: var(--tfs-white); border: 1px solid var(--tfs-border); border-radius: 8px;
}
.tfs-form__row input:focus, .tfs-form__row textarea:focus { outline: none; border-color: var(--tfs-teal-dark); box-shadow: 0 0 0 3px rgba(80, 192, 179, 0.25); }
.tfs-form__row.is-invalid input, .tfs-form__row.is-invalid textarea { border-color: #C9731D; }
.tfs-form__submit { width: 100%; justify-content: center; margin-top: 6px; border-radius: 10px !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.875rem !important; }
.tfs-form__hp { position: absolute; left: -9999px; }
.tfs-form__error { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #FFF4E6; color: var(--tfs-navy); font-size: 0.875rem; }
.tfs-form__done h2 { font-size: 1.5rem; margin: 0 0 8px; }
.tfs-form__done p { margin: 0; }

/* ==========================================================================
   16. WHAT WE DO (page-templates/services.php) — the Figma "What We Do" frame
   ========================================================================== */
.tfs-accent { color: var(--tfs-teal); }
.tfs-svc h2 .tfs-accent { color: var(--tfs-teal); }

/* Pill eyebrow: pale teal lozenge, no dot. */
.tfs-eyebrow--pill {
	display: inline-flex; padding: 3px 12px; border-radius: 999px;
	background: var(--tfs-surface-teal); color: var(--tfs-teal-dark);
	font-size: 0.75rem; letter-spacing: 0.06em;
}
.tfs-eyebrow--pill::before { display: none; }
.tfs-eyebrow--bare::before { display: none; }

/* Hero */
.tfs-svc__hero .tfs-ihero__grid { padding-block: 34px 60px; }
.tfs-svc__hero .tfs-libcrumbs { margin-bottom: 26px; }
.tfs-svc__hero .tfs-eyebrow { margin-bottom: 14px; letter-spacing: 0.08em; }
.tfs-svc__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.tfs-ind .tfs-btn--square { border-radius: 10px; padding: 14px 22px; }
.tfs-btn--ghost { background: transparent; color: var(--tfs-navy); }
.tfs-ind .tfs-btn--ghost { padding: 14px 16px; }
.tfs-btn--ghost:hover { background: var(--tfs-surface-teal); color: var(--tfs-navy); }
.tfs-svc__note { margin: 16px 0 0; font-size: 0.875rem; color: var(--ind-ink); }
.tfs-svc__stats { display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 30px 0 0; }
.tfs-svc__stats div { max-width: 9rem; }
.tfs-svc__stats dt { font-family: var(--tfs-font-display); font-size: 2rem; line-height: 1; color: var(--tfs-navy); }
.tfs-svc__stats dd { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ind-ink); }

/* The orbit: a disc with service pills on an ellipse around it. */
.tfs-orbit { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 0.86; justify-self: center; }
@media (min-width: 960px) { .tfs-orbit { justify-self: end; } }
.tfs-orbit::before {
	content: ""; position: absolute; inset: 12% 14%; border-radius: 50%;
	border: 1px dashed rgba(35, 117, 131, 0.28);
}
.tfs-orbit__core {
	position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%);
	display: grid; place-items: center; overflow: hidden; border-radius: 50%;
	background: var(--tfs-navy); border: 6px solid var(--tfs-white);
	box-shadow: 0 18px 40px rgba(2, 57, 80, 0.18);
}
.tfs-orbit__core img { width: 100%; height: 100%; object-fit: cover; }
.tfs-orbit__mark .tfs-icon { width: 64px; height: 64px; fill: var(--tfs-teal); }
.tfs-orbit__pill {
	position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
	padding: 7px 14px; border-radius: 999px;
	background: var(--tfs-teal); color: var(--tfs-navy);
	font-size: 0.8125rem; font-weight: 600; line-height: 1;
	box-shadow: 0 6px 14px rgba(2, 57, 80, 0.12);
}
/* Phones: no room for an orbit — the pills become a plain wrapped row. */
@media (max-width: 640px) {
	.tfs-orbit { aspect-ratio: auto; display: flex; flex-wrap: wrap; gap: 8px; justify-self: start; }
	.tfs-orbit::before, .tfs-orbit__core { display: none; }
	.tfs-orbit__pill { position: static; transform: none; }
}

/* Concept + model */
.tfs-svc__pair { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 960px) { .tfs-svc__pair { grid-template-columns: 0.62fr 1fr; } }
.tfs-svc__concept, .tfs-svc__model { padding: 32px; border-radius: 20px; }
.tfs-svc__concept { background: var(--tfs-white); border: 1px solid var(--ind-line); }
.tfs-svc__model { background: var(--tfs-navy); color: #D5E6EA; }
.tfs-svc__pair h2 { margin: 0 0 16px; font-size: clamp(1.5rem, 1vw + 1.1rem, 1.875rem); line-height: 1.15; }
.tfs-svc__model h2 { color: var(--tfs-white); }
.tfs-svc__model .tfs-eyebrow--pill { background: rgba(255, 255, 255, 0.1); color: var(--tfs-mint); }
.tfs-svc__pair p { margin: 0; line-height: 1.65; }
.tfs-svc__label {
	margin: 26px 0 12px !important;
	font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--tfs-teal-dark);
}
.tfs-svc__model .tfs-svc__label { color: var(--tfs-teal); }
.tfs-svc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tfs-svc__chips li { padding: 6px 12px; border-radius: 8px; background: var(--tfs-surface); font-size: 0.8125rem; color: var(--tfs-navy); }
.tfs-svc__chips li.is-on { background: var(--tfs-surface-teal); color: var(--tfs-teal-dark); font-weight: 600; }
.tfs-svc__vs { margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ind-line); list-style: none; display: grid; gap: 14px; }
.tfs-svc__vs li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; }
.tfs-svc__vs .tfs-icon { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.tfs-svc__vs .is-no .tfs-icon { fill: #9AAAB0; }
.tfs-svc__vs .is-yes .tfs-icon { fill: var(--tfs-teal); }
.tfs-svc__steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 640px) { .tfs-svc__steps { grid-template-columns: repeat(3, 1fr); } }
.tfs-svc__steps li {
	position: relative; padding: 12px 14px; border-radius: 10px;
	background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--tfs-white); font-weight: 600;
}
.tfs-svc__steps b { display: block; font-size: 0.75rem; color: var(--tfs-orange); }
.tfs-svc__small { margin-top: 14px !important; font-size: 0.875rem; }
.tfs-svc__get { display: grid; gap: 10px; margin: 0; padding: 20px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.tfs-svc__label + .tfs-svc__get { border-top: 0; padding-top: 0; }
.tfs-svc__get li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; }
.tfs-svc__get .tfs-icon { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgba(80, 192, 179, 0.2); fill: var(--tfs-teal); }

/* Capabilities: nine cards, three across */
.tfs-svc__caps {
	display: grid; gap: 20px; margin: 44px 0 0; padding: 0; list-style: none; text-align: left;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.tfs-svc__caps li { padding: 22px; border: 1px solid var(--ind-line); border-radius: 14px; background: var(--tfs-white); }
.tfs-svc__capicon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tfs-surface-teal); }
.tfs-svc__capicon .tfs-icon { width: 18px; height: 18px; fill: var(--tfs-teal-dark); }
.tfs-svc__caps h3 { margin: 16px 0 6px; font-family: var(--tfs-font-ui); font-size: 1rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-svc__caps p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ind-ink); }

/* Vetting: timeline left, team right */
.tfs-svc__vetpill { margin: 40px auto 10px !important; }
.tfs-svc__vet-h3 { margin: 0 0 36px; font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem); }
.tfs-svc__vet { display: grid; gap: 40px; align-items: center; text-align: left; }
@media (min-width: 960px) { .tfs-svc__vet { grid-template-columns: 1.1fr 1fr; } }
.tfs-svc__vet--solo { max-width: 42rem; margin-inline: auto; }
.tfs-svc__stages { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.tfs-svc__stages::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--tfs-teal); opacity: 0.5; }
.tfs-svc__stages li { position: relative; display: flex; gap: 18px; }
.tfs-svc__stagenum {
	flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
	background: var(--tfs-teal-dark); color: var(--tfs-white); font-weight: 700; box-shadow: 0 0 0 4px var(--ind-tint);
}
.tfs-svc__stages small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tfs-teal-dark); }
.tfs-svc__stages h4 { margin: 2px 0 4px; font-family: var(--tfs-font-ui); font-size: 1rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-svc__stages p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ind-ink); }
.tfs-svc__team { position: relative; min-height: 340px; margin: 0; padding: 0; list-style: none; }
.tfs-svc__member { position: absolute; display: grid; justify-items: center; }
.tfs-svc__member--1 { left: 8%; top: 0; }
.tfs-svc__member--2 { right: 4%; top: 22%; }
.tfs-svc__member--3 { left: 22%; bottom: 0; }
.tfs-svc__face {
	display: grid; place-items: center; width: 130px; height: 130px; overflow: hidden; border-radius: 50%;
	background: var(--tfs-surface-teal); border: 5px solid var(--tfs-white); box-shadow: 0 12px 30px rgba(2, 57, 80, 0.14);
}
.tfs-svc__member--2 .tfs-svc__face { width: 112px; height: 112px; }
.tfs-svc__member--3 .tfs-svc__face { width: 104px; height: 104px; }
.tfs-svc__face img { width: 100%; height: 100%; object-fit: cover; }
.tfs-svc__face .tfs-icon { width: 44px; height: 44px; fill: var(--tfs-teal-dark); }
.tfs-svc__role {
	margin-top: -14px; padding: 6px 12px; border-radius: 8px; background: var(--tfs-white);
	box-shadow: 0 6px 16px rgba(2, 57, 80, 0.12); font-size: 0.75rem; font-weight: 600; color: var(--tfs-teal-dark);
}
@media (max-width: 959px) {
	.tfs-svc__team { min-height: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
	.tfs-svc__member { position: static; }
}

/* Process: four numbered cards */
.tfs-svc__process {
	display: grid; gap: 20px; margin: 44px 0 0; padding: 0; list-style: none; text-align: left;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.tfs-svc__process li { padding: 22px; border: 1px solid var(--ind-line); border-radius: 14px; }
.tfs-svc__procnum {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
	background: var(--tfs-surface-teal); color: var(--tfs-teal-dark); font-family: var(--tfs-font-display); font-weight: 700;
}
.tfs-svc__process h3 { margin: 16px 0 6px; font-family: var(--tfs-font-ui); font-size: 1rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-svc__process p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ind-ink); }

/* Testimonials: navy slides, scroll-snap, anchor dots */
.tfs-quotes { max-width: 840px; margin: 40px auto 0; }
.tfs-quotes__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 20px; }
.tfs-quotes__track::-webkit-scrollbar { display: none; }
.tfs-quote {
	flex: 0 0 100%; scroll-snap-align: start; margin: 0; padding: 40px clamp(24px, 6vw, 60px);
	background: var(--tfs-navy); color: var(--tfs-white); text-align: center;
}
.tfs-quote__mark { display: block; font-family: var(--tfs-font-display); font-size: 4rem; line-height: 0.6; color: var(--tfs-teal); }
.tfs-quote blockquote { margin: 18px 0 22px; }
.tfs-quote blockquote p { margin: 0; font-family: var(--tfs-font-display); font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem); line-height: 1.35; }
.tfs-quote figcaption { display: inline-flex; align-items: center; gap: 12px; font-size: 0.875rem; font-weight: 600; color: #D5E6EA; }
.tfs-quote__dot { width: 30px; height: 30px; border-radius: 50%; background: var(--tfs-teal); }
/* dots: see "Reviews" below */

/* Pricing: navy price card beside the inclusions */
.tfs-price {
	display: grid; margin: 44px auto 0; max-width: 1040px; text-align: left;
	border: 1px solid var(--ind-line); border-radius: 20px; overflow: hidden; background: var(--tfs-white);
}
@media (min-width: 860px) { .tfs-price { grid-template-columns: 0.72fr 1fr; } }
.tfs-price__card { padding: 34px; background: var(--tfs-navy); color: #D5E6EA; }
.tfs-price__card .tfs-svc__label { margin-top: 0 !important; color: var(--tfs-teal); }
.tfs-price__from { margin: 0; font-size: 0.875rem; }
.tfs-price__amount { margin: 4px 0 16px; }
.tfs-price__amount b { font-family: var(--tfs-font-display); font-size: 3.25rem; line-height: 1; color: var(--tfs-white); }
.tfs-price__amount span { font-size: 0.9375rem; }
.tfs-price__blurb { margin: 0 0 22px; font-size: 0.9375rem; line-height: 1.6; }
.tfs-ind .tfs-price__btn { width: 100%; justify-content: center; border-radius: 999px; }
.tfs-price__note { margin: 12px 0 0; font-size: 0.8125rem; text-align: center; color: #9FC3CB; }
.tfs-price__stats { display: flex; gap: 40px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.tfs-price__stats dt { font-family: var(--tfs-font-display); font-size: 1.5rem; color: var(--tfs-white); }
.tfs-price__stats dd { margin: 4px 0 0; font-size: 0.75rem; line-height: 1.4; }
.tfs-price__incl { padding: 34px; }
.tfs-price__incl .tfs-svc__label { margin-top: 0 !important; }
.tfs-price__incl h3 { margin: 0 0 20px; font-size: 1.5rem; }
.tfs-price__incl .tfs-ticks li { font-size: 0.9375rem; }
.tfs-price__foot { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--ind-line); font-size: 0.875rem; color: var(--ind-ink); }
.tfs-price__incl .tfs-ticks { gap: 14px 32px; margin-top: 0; }
.tfs-price__incl .tfs-ticks li { font-size: 0.875rem; font-weight: 400; color: var(--ind-ink); gap: 10px; }
.tfs-price__incl .tfs-ticks .tfs-icon { flex: none; width: 18px; height: 18px; padding: 4px; background: var(--tfs-surface-teal); fill: var(--tfs-teal-dark); }
.tfs-svc__hero h1 { font-size: clamp(2.25rem, 1.6vw + 1.5rem, 3rem); }

/* ==========================================================================
   17. HOMEPAGE (page-templates/home.php) — the live "Home Page New" draft
   The hero's background and showcase are the draft's own CSS, in
   assets/css/home.css; this is the layout around them.
   ========================================================================== */
.tfs-home__hero .tfs-wrap { position: relative; z-index: 1; }
.tfs-home__grid { display: grid; gap: 40px; align-items: center; padding-block: 48px; }
@media (min-width: 1025px) { .tfs-home__grid { grid-template-columns: 560px 1fr; } }
.tfs-home__copy h1 {
	margin: 0 0 22px; max-width: 12ch;
	font-size: clamp(2.75rem, 3.5vw + 1.25rem, 4.25rem); line-height: 1;
}
.tfs-home__lede { max-width: 500px; margin: 0; font-size: 1.25rem; line-height: 1.6; color: var(--tfs-navy); }
.tfs-home__cta { margin: 32px 0 0; }
.tfs-home__show { min-width: 0; }

/* AI */
.tfs-home__ai h2 { text-align: center; }
.tfs-home__aigrid { display: grid; gap: 24px; margin-top: 44px; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.tfs-home__aicard { padding: 28px; border-radius: 20px; background: var(--tfs-navy); color: #D5E6EA; }
.tfs-home__aicard h3 { margin: 18px 0 16px; font-size: 1.375rem; line-height: 1.15; color: var(--tfs-white); }
.tfs-home__aicard .tfs-reason__icon { background: rgba(255, 255, 255, 0.08); }
.tfs-home__aicard .tfs-svc__get { border-top: 0; padding-top: 0; }
.tfs-home__platforms { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.tfs-home__platforms li { padding: 6px 12px; border-radius: 999px; background: var(--tfs-teal); color: var(--tfs-navy); font-size: 0.8125rem; font-weight: 600; }

/* Who we help */
.tfs-home__help { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.tfs-home__help li > a, .tfs-home__help li > span {
	display: flex; align-items: center; gap: 14px; height: 100%; padding: 18px 20px; box-sizing: border-box;
	border: 1px solid var(--ind-line); border-radius: 14px; background: var(--tfs-white);
	color: var(--tfs-navy); text-decoration: none;
}
.tfs-home__help b { flex: 1; font-weight: 600; }
.tfs-home__help a > .tfs-icon { width: 16px; height: 16px; fill: var(--tfs-teal-dark); transition: transform 0.15s ease; }
.tfs-home__help a:hover { border-color: var(--tfs-teal); }
.tfs-home__help a:hover > .tfs-icon { transform: translateX(3px); }

/* Contact block */
.tfs-home__contact h2 { margin: 0; }
.tfs-home__contact .tfs-ticks { margin-top: 26px; grid-template-columns: 1fr; gap: 14px; }
.tfs-home__email { margin: 26px 0 0; font-weight: 600; }
.tfs-home__email a { color: var(--tfs-teal-dark); }
/* Three results across, as the draft has them (industry pages use two). */
@media (min-width: 1025px) { .tfs-home .tfs-results { grid-template-columns: repeat(3, 1fr); } }
.tfs-home .tfs-result__stat b { font-size: clamp(2.25rem, 1.5vw + 1.5rem, 2.875rem); }

/* Larger showcase (Andrew, 2026-09-18, after sciensoft.com's hero): on wide
   screens the hero runs wider than the page measure and the image column
   takes the larger share; the frame gets two stacked cards behind it. */
@media (min-width: 1025px) {
	.tfs-home__grid { grid-template-columns: minmax(0, 450px) minmax(0, 1fr); gap: 48px; }
	/* The text stays on the page edge; the showcase runs past it towards
	   the right of the screen — 140px at most, and never within 40px of the edge. */
	.tfs-home__show { margin-right: clamp(-140px, calc((var(--tfs-max) - 100vw) / 2 + 40px), 0px); }
	.tfs-home__copy h1 { font-size: clamp(2.75rem, 2.4vw + 1.5rem, 3.75rem); }
	.tfs-home__lede { font-size: 1.125rem; }
}
.tfs-home .hf-show__frame {
	box-shadow:
		14px 14px 0 -2px rgba(255, 255, 255, 0.55),
		28px 28px 0 -4px rgba(255, 255, 255, 0.32),
		0 34px 70px rgba(2, 57, 80, 0.14);
}
@media (max-width: 767px) {
	.tfs-home .hf-show__frame { box-shadow: 8px 8px 0 -2px rgba(255, 255, 255, 0.55), 16px 16px 0 -4px rgba(255, 255, 255, 0.32), 0 20px 40px rgba(2, 57, 80, 0.12); }
}

/* ==========================================================================
   18. INDUSTRIES OVERVIEW (archive-industry.php) — Figma "Industries Parent Page"
   ========================================================================== */
.tfs-inds .tfs-ihero .tfs-libcrumbs { margin-bottom: 24px; }
.tfs-inds .tfs-ihero .tfs-ihero__cta .tfs-btn { gap: 10px; }

/* Hero graphic: the count card and two floating pills. */
.tfs-inds__art { position: relative; justify-self: center; width: 100%; max-width: 430px; height: 260px; }
.tfs-inds__count {
	position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 18px;
	padding: 18px 26px; border-radius: 14px; background: #1E8C80; color: var(--tfs-white);
	box-shadow: 0 18px 40px rgba(2, 57, 80, 0.18);
}
.tfs-inds__count b { font-family: var(--tfs-font-display); font-size: 2.5rem; line-height: 1; padding-right: 18px; border-right: 1px solid rgba(255, 255, 255, 0.35); }
.tfs-inds__count span { font-size: 0.875rem; font-weight: 600; line-height: 1.25; }
.tfs-inds__pill {
	position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px;
	border-radius: 12px; background: var(--tfs-white); box-shadow: 0 14px 34px rgba(2, 57, 80, 0.12);
	font-size: 0.875rem; font-weight: 600; color: var(--tfs-navy); white-space: nowrap;
}
.tfs-inds__pill > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tfs-surface-teal); }
.tfs-inds__pill--2 > span { background: #FFEBD2; }
.tfs-inds__pill .tfs-icon { width: 15px; height: 15px; fill: var(--tfs-teal-dark); }
.tfs-inds__pill--2 .tfs-icon { fill: var(--tfs-orange); }
.tfs-inds__pill--1 { right: 0; top: 96px; }
.tfs-inds__pill--2 { left: 16px; top: 180px; }
@media (max-width: 959px) { .tfs-inds__art { display: none; } }

/* The grid: rows of five, one card open. Hover or focus opens another. */
.tfs-igrid { display: grid; gap: 16px; margin-top: 44px; }
.tfs-igrid__row { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; min-height: 250px; }
.tfs-igrid__item { flex: 1 1 0; min-width: 0; transition: flex-grow 0.35s cubic-bezier(.2, .7, .2, 1); }
.tfs-igrid__item.is-lead { flex-grow: 4.6; }
.tfs-igrid__row:hover .tfs-igrid__item, .tfs-igrid__row:focus-within .tfs-igrid__item { flex-grow: 1; }
.tfs-igrid__row .tfs-igrid__item:hover, .tfs-igrid__row .tfs-igrid__item:focus-within { flex-grow: 4.6; }
.tfs-igrid__item a {
	position: relative; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; overflow: hidden;
	padding: 22px 16px; border: 1.5px dashed #7BBDB3; border-radius: 16px;
	background: #E4F2EF; color: var(--tfs-navy); text-decoration: none;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.tfs-igrid__num {
	position: absolute; right: 22px; top: 12px; font-family: var(--tfs-font-display); font-size: 4rem; line-height: 1;
	color: rgba(255, 255, 255, 0.14); opacity: 0; transition: opacity 0.3s ease;
}
.tfs-igrid__icon .tfs-icon { width: 20px; height: 20px; fill: var(--tfs-teal-dark); transition: fill 0.3s ease; }
.tfs-igrid__icon { display: flex; justify-content: center; }
.tfs-igrid__name { margin-top: auto; text-align: center; font-family: var(--tfs-font-display); font-size: 0.9375rem; line-height: 1.2; }
.tfs-igrid__desc, .tfs-igrid__go { display: none; }

/* The open card */
.tfs-igrid__item.is-lead a, .tfs-igrid__row .tfs-igrid__item:hover a, .tfs-igrid__row .tfs-igrid__item:focus-within a {
	padding: 26px 26px 24px; border: 0; background: #1E8C80; color: var(--tfs-white);
}
.tfs-igrid__row:hover .tfs-igrid__item.is-lead:not(:hover) a,
.tfs-igrid__row:focus-within .tfs-igrid__item.is-lead:not(:focus-within) a {
	padding: 22px 16px; border: 1.5px dashed #7BBDB3; background: #E4F2EF; color: var(--tfs-navy);
}
.tfs-igrid__item.is-lead .tfs-igrid__num, .tfs-igrid__item:hover .tfs-igrid__num, .tfs-igrid__item:focus-within .tfs-igrid__num { opacity: 1; }
.tfs-igrid__item.is-lead .tfs-igrid__icon, .tfs-igrid__item:hover .tfs-igrid__icon, .tfs-igrid__item:focus-within .tfs-igrid__icon { justify-content: flex-start; }
.tfs-igrid__item.is-lead .tfs-igrid__icon .tfs-icon, .tfs-igrid__item:hover .tfs-igrid__icon .tfs-icon, .tfs-igrid__item:focus-within .tfs-igrid__icon .tfs-icon { width: 26px; height: 26px; fill: var(--tfs-white); }
.tfs-igrid__item.is-lead .tfs-igrid__name, .tfs-igrid__item:hover .tfs-igrid__name, .tfs-igrid__item:focus-within .tfs-igrid__name { margin-top: 18px; text-align: left; font-size: 1.375rem; white-space: nowrap; }
.tfs-igrid__item.is-lead .tfs-igrid__desc, .tfs-igrid__item:hover .tfs-igrid__desc, .tfs-igrid__item:focus-within .tfs-igrid__desc { display: block; margin-top: 12px; max-width: 30rem; font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.tfs-igrid__item.is-lead .tfs-igrid__go, .tfs-igrid__item:hover .tfs-igrid__go, .tfs-igrid__item:focus-within .tfs-igrid__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.tfs-igrid__go .tfs-icon { width: 13px; height: 13px; fill: currentColor; }
/* The lead card, while another in its row is open, collapses like the rest. */
.tfs-igrid__row:hover .tfs-igrid__item.is-lead:not(:hover) :is(.tfs-igrid__desc, .tfs-igrid__go),
.tfs-igrid__row:focus-within .tfs-igrid__item.is-lead:not(:focus-within) :is(.tfs-igrid__desc, .tfs-igrid__go) { display: none; }
.tfs-igrid__row:hover .tfs-igrid__item.is-lead:not(:hover) .tfs-igrid__num,
.tfs-igrid__row:focus-within .tfs-igrid__item.is-lead:not(:focus-within) .tfs-igrid__num { opacity: 0; }
.tfs-igrid__row:hover .tfs-igrid__item.is-lead:not(:hover) .tfs-igrid__icon,
.tfs-igrid__row:focus-within .tfs-igrid__item.is-lead:not(:focus-within) .tfs-igrid__icon { justify-content: center; }
.tfs-igrid__row:hover .tfs-igrid__item.is-lead:not(:hover) .tfs-igrid__icon .tfs-icon,
.tfs-igrid__row:focus-within .tfs-igrid__item.is-lead:not(:focus-within) .tfs-igrid__icon .tfs-icon { width: 20px; height: 20px; fill: var(--tfs-teal-dark); }
.tfs-igrid__row:hover .tfs-igrid__item.is-lead:not(:hover) .tfs-igrid__name,
.tfs-igrid__row:focus-within .tfs-igrid__item.is-lead:not(:focus-within) .tfs-igrid__name { margin-top: auto; text-align: center; font-size: 0.9375rem; white-space: normal; }

/* Below 900px: no hover to lean on — every industry is a plain card. */
@media (max-width: 899px) {
	.tfs-igrid__row { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
	.tfs-igrid__item, .tfs-igrid__item.is-lead { flex: none; }
	.tfs-igrid__item a,
	.tfs-igrid__item.is-lead a, .tfs-igrid__row .tfs-igrid__item:hover a, .tfs-igrid__row .tfs-igrid__item:focus-within a,
	.tfs-igrid__row:hover .tfs-igrid__item.is-lead:not(:hover) a {
		flex-direction: row; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--ind-line); background: var(--tfs-white); color: var(--tfs-navy);
	}
	.tfs-igrid__num, .tfs-igrid__desc, .tfs-igrid__go,
	.tfs-igrid__item.is-lead :is(.tfs-igrid__desc, .tfs-igrid__go), .tfs-igrid__item:hover :is(.tfs-igrid__desc, .tfs-igrid__go) { display: none !important; }
	.tfs-igrid__item .tfs-igrid__icon .tfs-icon, .tfs-igrid__item.is-lead .tfs-igrid__icon .tfs-icon, .tfs-igrid__item:hover .tfs-igrid__icon .tfs-icon { width: 18px; height: 18px; fill: var(--tfs-teal-dark); }
	.tfs-igrid__item .tfs-igrid__name, .tfs-igrid__item.is-lead .tfs-igrid__name, .tfs-igrid__item:hover .tfs-igrid__name { margin: 0; text-align: left; font-size: 0.9375rem; white-space: normal; }
}
@media (max-width: 480px) { .tfs-igrid__row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tfs-igrid__item { transition: none; } }

/* ==========================================================================
   19. CASE STUDIES — listing (archive-case_study.php) and single
   ========================================================================== */
.tfs-cs__hero .tfs-wrap, .tfs-csx__hero .tfs-wrap { position: relative; padding-block: 34px 56px; }
.tfs-cs__hero .tfs-libcrumbs, .tfs-csx__hero .tfs-libcrumbs { margin-bottom: 24px; }
.tfs-cs__hero h1, .tfs-csx__hero h1 { max-width: 16ch; margin: 0 0 18px; font-size: clamp(2.25rem, 2.2vw + 1.4rem, 3.25rem); line-height: 1.05; }
.tfs-csx__hero h1 { max-width: 22ch; }
.tfs-cs__hero .tfs-ihero__lede { max-width: 34rem; }
.tfs-csx__hero .tfs-ihero__lede { max-width: 58rem; }

.tfs-cs__stats { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 30px 0 0; padding: 18px 8px; border-radius: 14px; background: #3FB2A5; color: var(--tfs-white); }
.tfs-cs__stats div { padding: 0 26px; border-left: 1px solid rgba(255, 255, 255, 0.35); }
.tfs-cs__stats div:first-child { border-left: 0; }
.tfs-cs__stats dt { font-family: var(--tfs-font-display); font-size: 1.75rem; line-height: 1; }
.tfs-cs__stats dd { margin: 6px 0 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* Filter */
.tfs-cs__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 28px; font-size: 0.875rem; color: var(--ind-ink); }
.tfs-cs__filter select { padding: 9px 34px 9px 14px; border: 1px solid var(--ind-line); border-radius: 999px; background: var(--tfs-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23023950' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") right 14px center / 10px no-repeat; font: inherit; color: var(--tfs-navy); appearance: none; cursor: pointer; }
.tfs-cs__clear { color: var(--tfs-teal-dark); font-weight: 600; }
.tfs-cs__label { margin: 0 0 14px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ind-ink); }

/* Featured */
.tfs-cs__feature { display: grid; overflow: hidden; border-radius: 20px; background: var(--tfs-navy); }
@media (min-width: 900px) { .tfs-cs__feature { grid-template-columns: 1fr 1.15fr; } }
.tfs-cs__featimg { position: relative; display: block; min-height: 280px; background: #0B4A5E; }
.tfs-cs__featimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tfs-cs__chip { position: absolute; left: 16px; top: 16px; z-index: 1; padding: 5px 10px; border-radius: 999px; background: var(--tfs-teal); color: var(--tfs-navy); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tfs-cs__featbody { padding: 32px; color: #D5E6EA; }
.tfs-cs__featbody h2 { margin: 0 0 14px; font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem); line-height: 1.2; }
.tfs-cs__featbody h2 a { color: var(--tfs-white); text-decoration: none; }
.tfs-cs__featbody > p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.tfs-cs__metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.tfs-cs__metrics li { padding: 5px 12px; border: 1px solid rgba(80, 192, 179, 0.55); border-radius: 999px; font-size: 0.75rem; color: var(--tfs-mint); }
.tfs-cs__quote { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.tfs-cs__quote p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--tfs-white); }
.tfs-cs__quote footer { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 0.8125rem; }
.tfs-cs__quote .tfs-quote__dot { width: 26px; height: 26px; }
.tfs-cs__more { margin-top: 20px; color: var(--tfs-teal); font-size: 0.9375rem; }
.tfs-cs__more:hover { color: var(--tfs-white); }

/* Grid of the rest */
.tfs-cs__grid { display: grid; gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.tfs-cs__card { position: relative; display: flex; align-items: flex-end; min-height: 250px; overflow: hidden; border-radius: 16px; background: #0B4A5E; text-decoration: none; }
.tfs-cs__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tfs-cs__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 57, 80, 0) 30%, rgba(2, 57, 80, 0.92) 100%); }
.tfs-cs__card:hover img { transform: scale(1.04); }
.tfs-cs__cardtext { position: relative; z-index: 1; display: grid; gap: 6px; padding: 18px; color: var(--tfs-white); }
.tfs-cs__cardtext small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tfs-mint); }
.tfs-cs__cardtext b { font-size: 1rem; line-height: 1.35; }

/* What sets them apart */
.tfs-cs__apart { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .tfs-cs__apart { grid-template-columns: 0.8fr 1fr; } }
.tfs-cs__apart h2 { margin: 0; }
.tfs-cs__checks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.tfs-cs__checks li { display: flex; gap: 10px; align-items: flex-start; padding: 18px; border-radius: 14px; background: var(--tfs-white); font-size: 0.875rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-cs__checks .tfs-icon { flex: none; width: 14px; height: 14px; margin-top: 3px; fill: var(--tfs-teal-dark); }

/* Model */
.tfs-cs__model { display: grid; gap: 28px; margin: 40px 0 0; padding: 0; list-style: none; text-align: left; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tfs-cs__model b { display: block; padding-top: 14px; border-top: 3px solid var(--tfs-teal); width: 36px; font-family: var(--tfs-font-display); font-size: 2rem; color: var(--tfs-teal); }
.tfs-cs__model h3 { margin: 10px 0 8px; font-family: var(--tfs-font-ui); font-size: 1rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-cs__model p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ind-ink); }
.tfs-cs__how { margin: 32px 0 0; font-size: 0.9375rem; color: var(--ind-ink); }
.tfs-cs__how .tfs-link { font-size: 0.9375rem; }

/* CTA card */
.tfs-cs__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 34px; border-radius: 20px; background: var(--tfs-white); border: 1px solid var(--ind-line); }
.tfs-cs__cta h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 1vw + 1.1rem, 1.875rem); }
.tfs-cs__cta p { margin: 0; max-width: 34rem; color: var(--ind-ink); }

/* Sectors */
.tfs-cs__slash { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tfs-teal-dark); }
.tfs-cs__sectors { display: grid; gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.tfs-cs__sectors li { padding: 22px; border-radius: 14px; background: var(--tfs-navy); color: #D5E6EA; }
.tfs-cs__secchip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(80, 192, 179, 0.18); color: var(--tfs-teal); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tfs-cs__sectors h3 { margin: 12px 0 6px; font-family: var(--tfs-font-ui); font-size: 1rem; font-weight: 600; color: var(--tfs-white); }
.tfs-cs__sectors p { margin: 0; font-size: 0.875rem; line-height: 1.55; }

/* --- Single ------------------------------------------------------------ */
.tfs-csx__stats { display: grid; gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.tfs-csx__stats li { display: grid; gap: 8px; padding: 20px 22px; border-radius: 14px; color: var(--tfs-white); }
.tfs-csx__stats li:nth-child(4n+1) { background: linear-gradient(135deg, #237583, #50C0B3); }
.tfs-csx__stats li:nth-child(4n+2) { background: var(--tfs-navy); }
.tfs-csx__stats li:nth-child(4n+3) { background: linear-gradient(135deg, #FFA943, #FFCA8A); color: var(--tfs-navy); }
.tfs-csx__stats li:nth-child(4n+4) { background: linear-gradient(135deg, #023950, #237583); }
.tfs-csx__stats b { font-family: var(--tfs-font-display); font-size: 2.25rem; line-height: 1; }
.tfs-csx__stats b small { margin-left: 4px; font-family: var(--tfs-font-ui); font-size: 0.875rem; font-weight: 600; }
.tfs-csx__stats span { font-size: 0.8125rem; font-weight: 500; }
.tfs-csx__stats--results { margin-top: 30px; }
.tfs-csx__stats--results small { font-size: 0.75rem; opacity: 0.8; }

.tfs-csx__client { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .tfs-csx__client { grid-template-columns: 1.4fr 1fr; } }
.tfs-csx__client h2, .tfs-csx__challenge h2 { margin: 0 0 16px; }
.tfs-csx__text p { margin: 0 0 14px; font-size: 1rem; line-height: 1.7; color: var(--ind-ink); }
.tfs-csx__snap { padding: 26px; border-radius: 18px; background: var(--tfs-navy); color: #D5E6EA; }
.tfs-csx__snaptitle { margin: 0 0 12px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tfs-teal); }
.tfs-csx__snap dl { margin: 0; }
.tfs-csx__snap div { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.tfs-csx__snap dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9FC3CB; }
.tfs-csx__snap dd { margin: 4px 0 0; font-weight: 600; color: var(--tfs-white); }

.tfs-csx__challenge { display: grid; gap: 28px; }
@media (min-width: 900px) { .tfs-csx__challenge { grid-template-columns: 0.8fr 1.2fr; } }

.tfs-csx__steps { max-width: 820px; margin: 36px auto 0; padding: 8px 26px; list-style: none; text-align: left; border: 1px solid var(--ind-line); border-radius: 18px; }
.tfs-csx__steps li { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--ind-line); }
.tfs-csx__steps li:first-child { border-top: 0; }
.tfs-csx__steps li > span { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tfs-teal-dark); color: var(--tfs-white); font-weight: 700; }
.tfs-csx__steps h3 { margin: 4px 0 6px; font-family: var(--tfs-font-ui); font-size: 1rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-csx__steps p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ind-ink); }

.tfs-csx__h2 { max-width: 24ch; }
.tfs-csx__narrow { max-width: 40rem; }
.tfs-csx__charthead, .tfs-csx__railhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 44px 0 18px; }
.tfs-csx__railhead { margin-top: 0; }
.tfs-csx__railhead h2 { margin: 0; }
.tfs-csx__charthead h3 { margin: 0; font-size: 1.5rem; }
.tfs-csx__charthead p { margin: 4px 0 0; font-size: 0.875rem; color: var(--ind-ink); }

/* Rails: horizontal scroll-snap lists with prev/next (assets/js/rail.js). */
.tfs-rail { display: grid; grid-auto-flow: column; gap: 20px; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tfs-rail::-webkit-scrollbar { display: none; }
.tfs-rail > li { scroll-snap-align: start; }
.tfs-rail__nav { display: flex; gap: 10px; }
.tfs-rail__nav button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ind-line); border-radius: 50%; background: var(--tfs-white); cursor: pointer; }
.tfs-rail__nav button:last-child { background: var(--tfs-navy); border-color: var(--tfs-navy); }
.tfs-rail__nav button:last-child .tfs-icon { fill: var(--tfs-white); }
.tfs-rail__nav button:disabled { opacity: 0.35; cursor: default; }
.tfs-rail__nav .tfs-icon { width: 14px; height: 14px; fill: var(--tfs-navy); }
.tfs-rail__prev { transform: rotate(180deg); }

.tfs-csx__charts { grid-auto-columns: calc((100% - 20px) / 2); }
@media (max-width: 859px) { .tfs-csx__charts { grid-auto-columns: 92%; } }
.tfs-csx__charts > li { padding: 22px; border-radius: 16px; background: var(--tfs-white); }
.tfs-csx__charts h4 { margin: 0; font-family: var(--tfs-font-ui); font-size: 1rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-csx__charts p { margin: 4px 0 12px; font-size: 0.8125rem; color: var(--ind-ink); }

.tfs-chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--tfs-font-ui); }
.tfs-chart__grid { stroke: rgba(2, 57, 80, 0.08); }
.tfs-chart__tick { font-size: 12px; fill: #41535C; }
.tfs-chart__val { font-size: 12px; font-weight: 600; fill: var(--tfs-navy); }
.tfs-chart__lab { font-size: 13px; font-weight: 500; fill: var(--tfs-navy); }
.tfs-chart__big { font-family: var(--tfs-font-display); font-size: 30px; font-weight: 700; fill: var(--tfs-navy); }
.tfs-chart__line { fill: none; stroke: var(--tfs-teal-dark); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.tfs-chart__dot { fill: var(--tfs-white); stroke: var(--tfs-teal-dark); stroke-width: 2; }
.tfs-chart__track { fill: rgba(2, 57, 80, 0.06); }
.tfs-chart__legend { display: flex; gap: 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--tfs-navy); }
.tfs-chart__legend span { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; }

.tfs-csx__whys { display: grid; gap: 28px; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.tfs-csx__whys h3 { margin: 0 0 8px; padding-top: 14px; border-top: 3px solid var(--tfs-teal); font-family: var(--tfs-font-ui); font-size: 1rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-csx__whys p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--ind-ink); }

.tfs-csx__related { grid-auto-columns: calc((100% - 60px) / 4); }
@media (max-width: 1024px) { .tfs-csx__related { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .tfs-csx__related { grid-auto-columns: 82%; } }
.tfs-csx__related a { display: grid; gap: 8px; color: var(--tfs-navy); text-decoration: none; }
.tfs-csx__relimg { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: #0B4A5E; }
.tfs-csx__relimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tfs-csx__related a:hover img { transform: scale(1.04); }
.tfs-csx__relchip { justify-self: start; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: var(--tfs-surface-teal); color: var(--tfs-teal-dark); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tfs-csx__related b { font-family: var(--tfs-font-display); font-size: 1.0625rem; line-height: 1.25; }
.tfs-csx__related small { font-size: 0.8125rem; color: var(--ind-ink); }

.tfs-csx__quotes { background: var(--tfs-navy); }
.tfs-csx__quotes h2 { color: var(--tfs-white); }
.tfs-csx__quotes .tfs-eyebrow--pill { background: rgba(255, 255, 255, 0.1); color: var(--tfs-mint); }
.tfs-csx__quotes .tfs-rail__nav button { background: transparent; border-color: rgba(255, 255, 255, 0.3); }
.tfs-csx__quotes .tfs-rail__nav .tfs-icon { fill: var(--tfs-white); }
.tfs-csx__quotes .tfs-rail__nav button:last-child { background: var(--tfs-teal); border-color: var(--tfs-teal); }
.tfs-csx__quotes .tfs-rail__nav button:last-child .tfs-icon { fill: var(--tfs-navy); }
.tfs-csx__qrail { grid-auto-columns: calc((100% - 20px) / 2); }
@media (max-width: 859px) { .tfs-csx__qrail { grid-auto-columns: 92%; } }
.tfs-csx__qrail > li { padding: 26px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.04); color: #D5E6EA; }
.tfs-csx__qrail .tfs-quote__mark { font-size: 3rem; }
.tfs-csx__qrail blockquote { margin: 10px 0 18px; }
.tfs-csx__qrail blockquote p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--tfs-white); }
.tfs-csx__qby { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.8125rem; font-weight: 600; }
.tfs-csx__qby .tfs-quote__dot { width: 28px; height: 28px; }
.tfs-csx__qmore { margin: 30px 0 0; text-align: center; }
.tfs-csx__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 0; }
.tfs-btn--outline { border: 1px solid var(--ind-line) !important; background: var(--tfs-white); }

/* Journey diagram motion (Andrew, 2026-09-18: "the lines on the fractional
   side move, or it reacts on hover"). The fractional path's dashes march
   towards the growth arrow and a soft pulse travels node to node; the
   traditional path stays still, which is the point. Nodes lift on hover.
   Nothing moves for anyone who has asked for reduced motion. */
@keyframes tfs-march { to { stroke-dashoffset: -42; } }
@keyframes tfs-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(80, 192, 179, 0); }
	6%       { box-shadow: 0 0 0 7px rgba(80, 192, 179, 0.35); }
	18%      { box-shadow: 0 0 0 14px rgba(80, 192, 179, 0); }
}
.fsvo .ln-good path { animation: tfs-march 1.6s linear infinite; }
.fsvo .nd1, .fsvo .nd2, .fsvo .nd3, .fsvo .nd4 { animation: tfs-pulse 4s ease-out infinite; }
.fsvo .nd2 { animation-delay: 0.6s; }
.fsvo .nd3 { animation-delay: 1.2s; }
.fsvo .nd4 { animation-delay: 1.8s; }
.fsvo .node { transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; cursor: default; }
.fsvo .node .tfs-icon { transition: fill 0.2s ease; }
.fsvo .nd1:hover, .fsvo .nd2:hover, .fsvo .nd3:hover, .fsvo .nd4:hover { transform: translateY(-4px) scale(1.08); background: var(--teal); border-color: var(--teal); }
.fsvo .nd1:hover .tfs-icon, .fsvo .nd2:hover .tfs-icon, .fsvo .nd3:hover .tfs-icon, .fsvo .nd4:hover .tfs-icon { fill: var(--tfs-white); }
.fsvo .nd5:hover, .fsvo .nd6:hover, .fsvo .nd7:hover, .fsvo .nd8:hover { transform: translateY(2px); }
.fsvo .panel .cell { transition: transform 0.2s ease; }
.fsvo .panel.good .cell:hover { transform: translateY(-3px); }
/* The stacked (narrow-screen) version: the good lane's step icons pulse in turn. */
.fsvo .lane2--good li:nth-child(1) .n { animation: tfs-pulse 4s ease-out infinite; }
.fsvo .lane2--good li:nth-child(2) .n { animation: tfs-pulse 4s ease-out 0.6s infinite; }
.fsvo .lane2--good li:nth-child(3) .n { animation: tfs-pulse 4s ease-out 1.2s infinite; }
.fsvo .lane2--good li:nth-child(4) .n { animation: tfs-pulse 4s ease-out 1.8s infinite; }
@media (prefers-reduced-motion: reduce) {
	.fsvo .ln-good path, .fsvo .node, .fsvo .lane2--good .n { animation: none !important; }
	.fsvo .node, .fsvo .panel .cell { transition: none; }
}

/* What We Do — living orbit and floating team (Andrew, 2026-09-18).
   Each pill drifts on its own path and grows and shrinks on its own clock
   (positions and timings are seeded per pill in services.php). The ring is
   gone: a perfect circle was what read as static. */
@keyframes tfs-drift {
	0%   { transform: translate(-50%, -50%) scale(var(--s0, 0.92)); }
	50%  { transform: translate(calc(-50% + var(--fx, 8px)), calc(-50% + var(--fy, -8px))) scale(var(--s1, 1.1)); }
	100% { transform: translate(calc(-50% - var(--fx, 8px) * 0.6), calc(-50% + var(--fy, -8px) * 0.4)) scale(var(--s0, 0.92)); }
}
@keyframes tfs-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}
.tfs-orbit::before { inset: 18%; border: 0; background: radial-gradient(closest-side, rgba(80, 192, 179, 0.28), rgba(80, 192, 179, 0)); }
.tfs-orbit__pill { animation: tfs-drift var(--fd, 7s) ease-in-out var(--fdel, 0s) infinite alternate; will-change: transform; }
.tfs-orbit__pill:nth-child(3n) { background: var(--tfs-white); color: var(--tfs-teal-dark); }
.tfs-orbit__pill:nth-child(4n) { background: var(--tfs-navy); color: var(--tfs-white); }
.tfs-orbit.has-photo .tfs-orbit__core { width: 48%; background: var(--tfs-surface-teal); }
.tfs-orbit.has-photo .tfs-orbit__core img { object-position: 50% 22%; }
@keyframes tfs-float-core {
	0%, 100% { transform: translate(-50%, -50%); }
	50%      { transform: translate(-50%, calc(-50% - 6px)); }
}
.tfs-orbit__core { animation: tfs-float-core 7s ease-in-out infinite; }

/* Vetting: larger faces that float, each on its own rhythm. */
@media (min-width: 960px) {
	.tfs-svc__team { min-height: 540px; }
	.tfs-svc__member--1 { left: 4%; top: 0; }
	.tfs-svc__member--2 { right: 0; top: 24%; }
	.tfs-svc__member--3 { left: 20%; bottom: 0; }
}
.tfs-svc__face { width: 230px; height: 230px; border-width: 6px; }
.tfs-svc__member--2 .tfs-svc__face { width: 205px; height: 205px; }
.tfs-svc__member--3 .tfs-svc__face { width: 190px; height: 190px; }
.tfs-svc__face img { object-position: 50% 22%; }
.tfs-svc__member { animation: tfs-float 6s ease-in-out infinite; }
.tfs-svc__member--2 { animation-duration: 7.5s; animation-delay: -2s; }
.tfs-svc__member--3 { animation-duration: 6.8s; animation-delay: -4s; }
.tfs-svc__role { margin-top: -16px; padding: 7px 14px; font-size: 0.8125rem; }
@media (max-width: 959px) {
	.tfs-svc__face { width: 140px; height: 140px; }
	.tfs-svc__member--2 .tfs-svc__face, .tfs-svc__member--3 .tfs-svc__face { width: 130px; height: 130px; }
}
@media (max-width: 640px) {
	.tfs-orbit__pill { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tfs-orbit__pill, .tfs-orbit__core, .tfs-svc__member { animation: none !important; }
}

/* Reviews: one is a card; several are a slider (template-parts/quotes.php,
   assets/js/rail.js). */
.tfs-quotes .tfs-rail { grid-auto-columns: 100%; gap: 0; padding: 0; border-radius: 20px; }
.tfs-quotes__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.tfs-quotes__arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ind-line); border-radius: 50%; background: var(--tfs-white); cursor: pointer; }
.tfs-quotes__arrow .tfs-icon { width: 14px; height: 14px; fill: var(--tfs-navy); }
.tfs-quotes__arrow:disabled { opacity: 0.35; cursor: default; }
.tfs-quotes__dots { display: flex; gap: 8px; }
.tfs-quotes__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #C9D6D9; cursor: pointer; transition: width 0.2s ease, background-color 0.2s ease; }
.tfs-quotes__dots button[aria-current="true"] { width: 22px; background: var(--tfs-navy); }
/* A single quote on a case study fills the row rather than half of it. */
.tfs-csx__qrail:has(> li:only-child) { grid-auto-columns: 100%; }
.tfs-csx__qrail > li:only-child blockquote p { font-size: 1.125rem; }

/* "One partner. One strategy…" — a title-only band reads larger (homepage). */
.fsvo .bottomline--solo { align-items: center; justify-content: center; gap: 24px; padding: 38px 44px; }
.fsvo .bottomline--solo .badge { width: 60px; height: 60px; margin-top: 0; }
.fsvo .bottomline--solo .badge .tfs-icon { width: 26px; height: 26px; }
.fsvo .bottomline--solo .bottomline__title { margin: 0 !important; font-size: clamp(22px, 1.6vw + 12px, 32px); line-height: 1.2; }
@media (max-width: 640px) {
	.fsvo .bottomline--solo { flex-direction: row; padding: 26px 22px; gap: 16px; }
	.fsvo .bottomline--solo .badge { width: 48px; height: 48px; }
}

/* Industry intro: the video, or — until there is one — the "How it works" card. */
.tfs-video__cover { display: block; position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.tfs-video__frame { position: relative; width: 100%; height: 100%; }
.tfs-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tfs-howcard {
	padding: 30px; border-radius: 20px;
	background: linear-gradient(145deg, var(--tfs-navy) 0%, #0B4A5E 100%); color: #D5E6EA;
	box-shadow: 0 24px 48px rgba(2, 57, 80, 0.16);
}
.tfs-howcard__eyebrow { margin: 0 0 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tfs-teal); }
.tfs-howcard h3 { margin: 0 0 20px; font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem); line-height: 1.2; color: var(--tfs-white); }
.tfs-howcard ul { display: grid; gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
.tfs-howcard li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; }
.tfs-howcard li .tfs-icon { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgba(80, 192, 179, 0.18); fill: var(--tfs-teal); box-sizing: border-box; }
.tfs-howcard .tfs-btn { gap: 10px; }

/* Industries overview: the rotating stage of industry illustrations. */
.tfs-inds__stage { position: relative; height: auto; max-width: 580px; aspect-ratio: 605 / 370; }
@media (min-width: 960px) { .tfs-inds__stage { justify-self: end; } }
@media (max-width: 959px) { .tfs-inds__stage { display: block; margin-top: 12px; } }
.tfs-inds__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(0.98); transition: opacity 0.8s ease, transform 0.8s ease, visibility 0s linear 0.8s; text-decoration: none; }
.tfs-inds__slide.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tfs-inds__slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tfs-inds__caption {
	position: absolute; right: 8px; bottom: 6px; display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px; border-radius: 999px; background: var(--tfs-white); box-shadow: 0 10px 24px rgba(2, 57, 80, 0.14);
	font-size: 0.875rem; font-weight: 600; color: var(--tfs-navy);
}
.tfs-inds__caption .tfs-icon { width: 13px; height: 13px; fill: var(--tfs-teal-dark); transition: transform 0.15s ease; }
.tfs-inds__slide:hover .tfs-inds__caption .tfs-icon { transform: translateX(3px); }
.tfs-inds__stage .tfs-inds__count { left: -14px; top: -10px; z-index: 2; }
@media (max-width: 640px) {
	.tfs-inds__stage .tfs-inds__count { left: 0; top: -6px; padding: 12px 16px; }
	.tfs-inds__stage .tfs-inds__count b { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .tfs-inds__slide { transition: none; } }

/* Case studies: sector cards lead to their industry, with its illustration. */
.tfs-cs__sectors li { padding: 0; background: none; }
.tfs-cs__sector {
	display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 16px;
	background: var(--tfs-navy); color: #D5E6EA; text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tfs-cs__sector:hover, .tfs-cs__sector:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(2, 57, 80, 0.2); }
.tfs-cs__secart { display: grid; place-items: center; aspect-ratio: 605 / 330; overflow: hidden; background: linear-gradient(160deg, #F4FBFB 0%, #DCEFEC 100%); }
.tfs-cs__secart img { width: 100%; height: 100%; object-fit: contain; padding: 10px 14px 0; box-sizing: border-box; transition: transform 0.4s ease; }
.tfs-cs__sector:hover .tfs-cs__secart img { transform: scale(1.05); }
.tfs-cs__secicon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--tfs-white); box-shadow: 0 12px 28px rgba(2, 57, 80, 0.12); }
.tfs-cs__secicon .tfs-icon { width: 36px; height: 36px; fill: var(--tfs-teal-dark); }
.tfs-cs__secbody { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 22px; }
.tfs-cs__secbody b { font-size: 1.0625rem; color: var(--tfs-white); }
.tfs-cs__secline { font-size: 0.875rem; line-height: 1.55; }
.tfs-cs__secbody .tfs-cs__secchip { align-self: flex-start; }
.tfs-cs__secgo { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--tfs-teal); }
.tfs-cs__secgo .tfs-icon { width: 12px; height: 12px; fill: currentColor; transition: transform 0.15s ease; }
.tfs-cs__sector:hover .tfs-cs__secgo .tfs-icon { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .tfs-cs__sector, .tfs-cs__secart img { transition: none; } }

/* ==========================================================================
   20. ABOUT (page-templates/about.php) — Figma "About Us"
   ========================================================================== */
.tfs-about__intro { display: grid; gap: 40px; align-items: center; padding-block: 34px 60px; }
@media (min-width: 960px) { .tfs-about__intro { grid-template-columns: 1fr 1fr; gap: 60px; } }
.tfs-about__intro .tfs-libcrumbs { margin-bottom: 22px; }
.tfs-about__intro h1 { margin: 0 0 20px; font-size: clamp(2.25rem, 2.2vw + 1.4rem, 3.25rem); line-height: 1.05; }
.tfs-about__lede p { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.7; color: var(--tfs-navy); }
.tfs-about__img { margin: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 24px 50px rgba(2, 57, 80, 0.16); }
.tfs-about__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; }

.tfs-about__why { max-width: 980px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); border-radius: 20px; background: var(--tfs-navy); color: #D5E6EA; text-align: center; }
.tfs-about__why h2 { margin: 0 0 18px; color: var(--tfs-white); }
.tfs-about__why p { margin: 0 auto 14px; max-width: 46rem; font-size: 1rem; line-height: 1.75; }
.tfs-about__why p:last-child { margin-bottom: 0; }

.tfs-about__thinksec { padding-top: 10px; }
.tfs-about__think { margin: 26px 0 0; padding: 0; list-style: none; border: 1px solid var(--ind-line); border-radius: 18px; }
.tfs-about__think li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 24px; border-top: 1px solid var(--ind-line); }
.tfs-about__think li:first-child { border-top: 0; }
.tfs-about__think .tfs-icon { flex: none; width: 22px; height: 22px; margin-top: 2px; fill: var(--tfs-teal); }
.tfs-about__think b { display: block; font-size: 1rem; color: var(--tfs-navy); }
.tfs-about__think small { display: block; margin-top: 3px; font-size: 0.9375rem; color: var(--ind-ink); }

.tfs-about__bio { display: grid; gap: 34px; align-items: start; margin-top: 28px; padding: clamp(24px, 3vw, 36px); border-radius: 20px; background: var(--tfs-white); border: 1px solid var(--ind-line); }
@media (min-width: 860px) { .tfs-about__bio { grid-template-columns: 280px 1fr; } }
.tfs-about__photo { display: grid; gap: 16px; }
.tfs-about__photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; border-radius: 16px; }
.tfs-ind .tfs-about__photo .tfs-btn { justify-content: center; border-radius: 10px; }
.tfs-about__bio h3 { margin: 0 0 6px; font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem); }
.tfs-about__hi { margin: 0 0 14px; font-weight: 600; color: var(--tfs-teal-dark); }
.tfs-about__biotext p { margin: 0 0 14px; line-height: 1.75; color: var(--ind-ink); }

.tfs-about__feat { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.tfs-about__feat p { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ind-ink); }
.tfs-about__feat ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tfs-about__feat li { display: grid; place-items: center; height: 54px; padding: 8px 16px; border-radius: 10px; background: var(--tfs-white); border: 1px solid var(--ind-line); }
.tfs-about__feat img { max-height: 36px; width: auto; }

.tfs-about__caps { margin-top: 40px; }
.tfs-about__caps ul { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.tfs-about__caps li > a, .tfs-about__caps li > span { display: flex; align-items: center; gap: 12px; height: 100%; box-sizing: border-box; padding: 16px 18px; border-radius: 14px; background: var(--tfs-white); border: 1px solid var(--ind-line); color: var(--tfs-navy); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.tfs-about__caps li > a:hover { border-color: var(--tfs-teal); transform: translateY(-2px); }
.tfs-about__caps b { font-size: 0.9375rem; font-weight: 600; }

/* ==========================================================================
   21. WHY FRACTIONAL SEO (page-templates/why.php) — the guide page
   ========================================================================== */
.tfs-why__narrow { max-width: 900px; }
.tfs-why__hero .tfs-wrap { padding-block: 34px 56px; }
.tfs-why__hero .tfs-libcrumbs { margin-bottom: 22px; }
.tfs-why__hero h1 { margin: 10px 0 16px; font-size: clamp(2.25rem, 2.2vw + 1.4rem, 3.25rem); }
.tfs-why__body { padding-block: 0 70px; }
.tfs-why__sec { margin-top: 64px; }
.tfs-why__sec h2, .tfs-why__short h2 { margin: 6px 0 14px; font-size: clamp(1.625rem, 1.2vw + 1.2rem, 2.125rem); }
.tfs-why__lead, .tfs-why__text p { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.75; color: var(--ind-ink); }

.tfs-why__short { position: relative; margin-top: -30px; padding: 28px 30px; border-radius: 18px; background: var(--tfs-white); border: 1px solid var(--ind-line); box-shadow: 0 18px 40px rgba(2, 57, 80, 0.08); }
.tfs-why__short ul { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.tfs-why__short li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.55; color: var(--tfs-navy); }
.tfs-why__short .tfs-icon, .tfs-why__fit .tfs-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: var(--tfs-teal); }

.tfs-why__tablewrap { margin-top: 22px; overflow-x: auto; border-radius: 16px; border: 1px solid var(--ind-line); }
.tfs-why__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9375rem; }
.tfs-why__table th, .tfs-why__table td { padding: 14px 16px; border-top: 1px solid var(--ind-line); text-align: left; vertical-align: top; }
.tfs-why__table thead th { border-top: 0; background: var(--tfs-surface); font-size: 0.8125rem; font-weight: 700; color: var(--tfs-navy); }
.tfs-why__table tbody th { font-weight: 600; color: var(--tfs-navy); }
.tfs-why__table td { color: var(--ind-ink); }
.tfs-why__table .is-us { background: #E6F4F1; color: var(--tfs-teal-dark); font-weight: 600; }
.tfs-why__table thead .is-us { background: var(--tfs-teal-dark); color: var(--tfs-white); }
.tfs-why__note { margin: 10px 0 0; font-size: 0.8125rem; color: var(--ind-ink); }

.tfs-why__chart { margin-top: 22px; padding: 24px; border-radius: 16px; background: var(--tfs-white); border: 1px solid var(--ind-line); }
.tfs-why__chart h3 { margin: 0; font-family: var(--tfs-font-ui); font-size: 1rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-why__chart > p { margin: 4px 0 12px; font-size: 0.8125rem; color: var(--ind-ink); }
.tfs-why__stats { display: grid; gap: 14px; margin: 18px 0 0; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.tfs-why__stats div { padding: 16px 18px; border-radius: 14px; background: var(--tfs-navy); }
.tfs-why__stats dt { font-family: var(--tfs-font-display); font-size: 1.75rem; line-height: 1; color: var(--tfs-white); }
.tfs-why__stats dd { margin: 6px 0 0; font-size: 0.8125rem; color: var(--tfs-mint); }
.tfs-why__cards { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.tfs-why__cards li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--tfs-white); border: 1px solid var(--ind-line); }
.tfs-why__cards b { font-family: var(--tfs-font-display); font-size: 1.625rem; line-height: 1; color: var(--tfs-teal-dark); }
.tfs-why__cards span { font-size: 0.875rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-why__cards small { font-size: 0.75rem; color: var(--ind-ink); }
.tfs-why__more { margin: 16px 0 0; }

.tfs-why__fit { display: grid; gap: 18px; margin-top: 22px; }
@media (min-width: 760px) { .tfs-why__fit { grid-template-columns: 1fr 1fr; } }
.tfs-why__fit > div { padding: 24px; border-radius: 16px; background: var(--tfs-white); border: 1px solid var(--ind-line); }
.tfs-why__fit .is-yes { border-top: 4px solid var(--tfs-teal); }
.tfs-why__fit .is-no { border-top: 4px solid #C9D6D9; }
.tfs-why__fit .is-no .tfs-icon { fill: #9AAAB0; }
.tfs-why__fit h3 { margin: 0 0 14px; font-family: var(--tfs-font-ui); font-size: 1.0625rem; font-weight: 700; color: var(--tfs-navy); }
.tfs-why__fit ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tfs-why__fit li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; color: var(--ind-ink); }

/* Every hero's content sits above its wave overlay (::before). Missing on the
   About and Why pages, where it washed the text out — fixed here for all. */
.tfs-ihero > .tfs-wrap { position: relative; z-index: 1; }
.tfs-why__chart .tfs-chart--hbars svg, .tfs-why__chart .tfs-chart--donut svg { max-width: 640px; }

/* ==========================================================================
   22. BLOG — listing (home.php), article (single-post.php), card (post-card)
   ========================================================================== */
.tfs-blog__hero .tfs-wrap, .tfs-article__hero .tfs-wrap { padding-block: 34px 50px; }
.tfs-blog__hero .tfs-libcrumbs, .tfs-article__hero .tfs-libcrumbs { margin-bottom: 20px; }
.tfs-blog__hero h1 { margin: 10px 0 14px; font-size: clamp(2.25rem, 2.2vw + 1.4rem, 3.25rem); }
.tfs-blog__hero .tfs-ihero__lede { max-width: 38rem; }
.tfs-btn--navy { background: var(--tfs-navy); color: var(--tfs-white); }
.tfs-btn--navy:hover { background: #0B4A5E; color: var(--tfs-white); }
.tfs-ind .tfs-btn--navy { gap: 10px; border-radius: 999px; }

.tfs-post__chip { display: inline-block; align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--tfs-surface-teal); color: var(--tfs-teal-dark); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tfs-post__meta { font-size: 0.8125rem; color: var(--ind-ink); }

/* Latest */
.tfs-blog__leadsec { padding-top: 0; }
.tfs-blog__lead { display: grid; gap: 30px; align-items: center; margin-top: -20px; padding: 22px; border-radius: 20px; background: var(--tfs-white); border: 1px solid var(--ind-line); box-shadow: 0 18px 40px rgba(2, 57, 80, 0.08); }
@media (min-width: 900px) { .tfs-blog__lead { grid-template-columns: 1.1fr 1fr; } }
.tfs-blog__leadimg { position: relative; display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; background: #0B4A5E; }
.tfs-blog__leadimg img { width: 100%; height: 100%; object-fit: cover; }
.tfs-blog__latest { position: absolute; left: 14px; top: 14px; background: var(--tfs-orange); color: var(--tfs-navy); }
.tfs-blog__lead h2 { margin: 12px 0 8px; font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2rem); line-height: 1.2; }
.tfs-blog__lead h2 a { color: var(--tfs-navy); text-decoration: none; }
.tfs-blog__lead h2 a:hover { color: var(--tfs-teal-dark); }
.tfs-blog__leadtext { margin: 12px 0 20px; line-height: 1.65; color: var(--ind-ink); }

/* Cards */
.tfs-post { height: 100%; }
.tfs-post > a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 16px; background: var(--tfs-white); border: 1px solid var(--ind-line); color: var(--tfs-navy); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tfs-post > a:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(2, 57, 80, 0.12); }
.tfs-post__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #0B4A5E, var(--tfs-navy)); }
.tfs-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tfs-post > a:hover .tfs-post__img img { transform: scale(1.04); }
.tfs-post__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.tfs-post__title { font-family: var(--tfs-font-display); font-size: 1.1875rem; line-height: 1.25; }
.tfs-post__excerpt { font-size: 0.875rem; line-height: 1.55; color: var(--ind-ink); }
.tfs-post__body .tfs-post__meta { margin-top: auto; padding-top: 6px; }
.tfs-post--navy > a { background: var(--tfs-navy); border-color: var(--tfs-navy); color: var(--tfs-white); }
.tfs-post--navy .tfs-post__excerpt, .tfs-post--navy .tfs-post__meta { color: #B9D3D9; }
.tfs-post--navy .tfs-post__chip { background: rgba(80, 192, 179, 0.18); color: var(--tfs-teal); }

.tfs-blog__picks { grid-auto-columns: calc((100% - 40px) / 3); }
@media (max-width: 1024px) { .tfs-blog__picks { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .tfs-blog__picks { grid-auto-columns: 85%; } }

/* Filter + grid */
.tfs-blog__filter { justify-content: flex-start; }
.tfs-blog__search { position: relative; margin-left: auto; }
.tfs-blog__search .tfs-icon { position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); fill: var(--ind-ink); }
.tfs-blog__search input { width: 240px; max-width: 100%; padding: 9px 14px 9px 34px; border: 1px solid var(--ind-line); border-radius: 999px; font: inherit; }
@media (max-width: 640px) { .tfs-blog__search { margin-left: 0; width: 100%; } .tfs-blog__search input { width: 100%; } }
.tfs-blog__grid { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .tfs-blog__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .tfs-blog__grid--3 { grid-template-columns: repeat(3, 1fr); } }
.tfs-blog__pages ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 36px 0 0; padding: 0; list-style: none; }
.tfs-blog__pages a, .tfs-blog__pages span { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ind-line); color: var(--tfs-navy); text-decoration: none; font-weight: 600; }
.tfs-blog__pages .current { background: var(--tfs-navy); border-color: var(--tfs-navy); color: var(--tfs-white); }

/* Article */
.tfs-article__narrow { max-width: 820px; }
.tfs-article__hero h1 { margin: 0 0 14px; font-size: clamp(2rem, 2vw + 1.3rem, 3rem); line-height: 1.1; }
.tfs-article__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; font-size: 0.875rem; color: var(--ind-ink); }
.tfs-article__body { padding-block: 0 60px; }
.tfs-article__img { margin: -24px 0 34px; overflow: hidden; border-radius: 18px; box-shadow: 0 20px 44px rgba(2, 57, 80, 0.12); }
.tfs-article__img img { display: block; width: 100%; height: auto; }
.tfs-article__content { font-size: 1.0625rem; line-height: 1.8; }
.tfs-article__content h2 { margin: 1.8em 0 0.6em; font-size: 1.625rem; }
.tfs-article__content h3 { margin: 1.5em 0 0.5em; font-size: 1.25rem; }
.tfs-article__content a { color: var(--tfs-teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.tfs-article__content ul, .tfs-article__content ol { padding-left: 1.3em; }
.tfs-article__content li + li { margin-top: 0.4em; }
/* "The short answer" box and the methodology note */
.tfs-article__content .tfs-callout { margin: 1.6em 0; padding: 22px 26px; border-radius: 16px; background: var(--tfs-surface); border-left: 4px solid var(--tfs-teal-dark); }
.tfs-article__content .tfs-callout h2 { margin-top: 0; font-size: 1.25rem; }
.tfs-article__content .tfs-callout ul { margin-bottom: 0; }
.tfs-article__content .tfs-note { margin: 1.4em 0; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--ind-line); font-size: 0.9375rem; line-height: 1.7; color: var(--ind-ink); }
/* tables: scroll sideways on a phone rather than squeeze */
.tfs-article__content .wp-block-table { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--ind-line); border-radius: 14px; }
.tfs-article__content table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.55; }
.tfs-article__content .wp-block-table table { border: 0; }
.tfs-article__content .wp-block-table th, .tfs-article__content .wp-block-table td, .tfs-article__content th, .tfs-article__content td { padding: 12px 16px; border: 0; border-top: 1px solid var(--ind-line); text-align: left; vertical-align: top; }
.tfs-article__content .wp-block-table thead { border-bottom: 0; }
.tfs-article__content .wp-block-table thead th { border-top: 0; }
.tfs-article__content thead th { border-top: 0; background: var(--tfs-surface); font-size: 0.8125rem; font-weight: 700; color: var(--tfs-navy); }
.tfs-article__content td:first-child { font-weight: 600; color: var(--tfs-navy); }
.tfs-article__content .wp-block-table figcaption { padding: 10px 16px; font-size: 0.8125rem; color: var(--ind-ink); border-top: 1px solid var(--ind-line); }
.tfs-article__author { display: flex; gap: 18px; align-items: flex-start; margin-top: 44px; padding: 22px; border-radius: 16px; background: var(--tfs-surface); }
.tfs-article__author img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.tfs-article__author b { display: block; font-size: 1.0625rem; color: var(--tfs-navy); }
.tfs-article__author p { margin: 6px 0 10px; font-size: 0.9375rem; color: var(--ind-ink); }
.tfs-article__by { margin: 0 !important; font-size: 0.75rem !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tfs-teal-dark) !important; }
.tfs-article__author .tfs-link { font-size: 0.9375rem; }

/* ==========================================================================
   23. COMPETITOR VIDEO LANDING PAGES (single-landing_page.php) + focus mode
   ========================================================================== */
.tfs-header__cta--focus { margin-left: auto; }
.tfs-ind .tfs-btn--outline, .tfs-header .tfs-btn--outline { border: 1.5px solid var(--tfs-navy) !important; background: transparent; color: var(--tfs-navy); border-radius: 10px; }
.tfs-footer--focus { padding-block: 22px; }
.tfs-footer--focus .tfs-footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }

.tfs-lp__grid { display: grid; gap: 40px; align-items: start; padding-block: 40px 64px; }
@media (min-width: 1000px) { .tfs-lp__grid { grid-template-columns: 1fr 1.05fr; gap: 56px; } }
.tfs-lp__eyebrow { margin-bottom: 14px; }
.tfs-lp__main h1 { margin: 0 0 16px; font-size: clamp(2rem, 2vw + 1.3rem, 2.875rem); line-height: 1.1; }
.tfs-lp__intro { margin: 0 0 24px; font-size: 1.0625rem; line-height: 1.7; color: var(--ind-ink); }

.tfs-lp__traffic { padding: 18px; border-radius: 16px; background: var(--tfs-white); border: 1px solid var(--ind-line); box-shadow: 0 14px 30px rgba(2, 57, 80, 0.06); }
.tfs-lp__traffichead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 0.8125rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-lp__place { padding: 3px 10px; border-radius: 999px; background: var(--tfs-surface-teal); color: var(--tfs-teal-dark); font-size: 0.75rem; }
.tfs-lp__tiles { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.tfs-lp__tile { display: flex; flex-direction: column; padding: 14px; border-radius: 12px; }
.tfs-lp__tile.is-you { background: #EAF4E7; }
.tfs-lp__tile.is-them { background: #DFF1EE; }
.tfs-lp__tilehead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px; }
.tfs-lp__tilehead b { font-size: 0.8125rem; line-height: 1.3; color: var(--tfs-navy); }
.tfs-lp__reviews { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--tfs-white); font-size: 0.6875rem; font-weight: 600; color: var(--tfs-navy); white-space: nowrap; }
.tfs-lp__reviews .tfs-icon { width: 10px; height: 10px; fill: var(--tfs-orange); }
.tfs-lp__visits { margin: 10px 0 4px; font-family: var(--tfs-font-display); font-size: 1.75rem; line-height: 1; color: var(--tfs-navy); }
.tfs-lp__tilefoot { display: flex; align-items: flex-end; justify-content: space-between; font-size: 0.6875rem; color: var(--ind-ink); }
.tfs-lp__bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.tfs-lp__bars i { display: block; width: 5px; border-radius: 2px; background: #9FD3B8; }
.is-them .tfs-lp__bars i { background: var(--tfs-teal-dark); }

.tfs-lp__obs { margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--tfs-teal); border-radius: 0 12px 12px 0; background: #E6F4F1; }
.tfs-lp__obsh { margin: 0 0 4px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tfs-teal-dark); }
.tfs-lp__obs p:last-child { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.5; color: var(--tfs-navy); }
.tfs-lp__cta { margin: 24px 0 8px; }
.tfs-lp__cta .tfs-btn { gap: 10px; }
.tfs-lp__note { margin: 0; font-size: 0.8125rem; color: var(--ind-ink); }

.tfs-lp__vlabel { margin-bottom: 12px; font-size: 0.75rem; text-transform: none; }
.tfs-lp__video { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--tfs-navy); box-shadow: 0 24px 50px rgba(2, 57, 80, 0.18); }
.tfs-lp__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tfs-lp__novideo { display: grid; place-items: center; align-content: center; gap: 14px; height: 100%; color: #D5E6EA; text-align: center; }
.tfs-lp__novideo p { margin: 0; font-size: 0.875rem; }
.tfs-lp__ready { margin: 18px 0 10px; font-weight: 700; color: var(--tfs-navy); }

.tfs-lp__call { background: var(--tfs-navy); }
.tfs-lp__call h2 { margin: 8px 0 8px; color: var(--tfs-white); }
.tfs-lp__call .tfs-eyebrow--pill { background: var(--tfs-white); color: var(--tfs-navy); }
.tfs-lp__callsub { margin: 0; color: #D5E6EA; }
.tfs-lp__cards { display: grid; gap: 18px; margin: 30px 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.tfs-lp__cards li { padding: 22px; border-radius: 14px; background: var(--tfs-white); }
.tfs-lp__cards h3 { margin: 14px 0 6px; font-family: var(--tfs-font-ui); font-size: 1rem; font-weight: 700; color: var(--tfs-navy); }
.tfs-lp__cards p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ind-ink); }
@media (max-width: 480px) { .tfs-lp__tiles { grid-template-columns: 1fr; } }
.tfs-ihero__copy > .tfs-libcrumbs { margin-bottom: 18px; }

/* ==========================================================================
   24. RESEARCH (page-templates/research.php, research-article.php)
   The article follows the live page's layout: a split hero, then full-width
   bands alternating white and tint, most pairing text with a chart card. The
   bands and charts live in the page content with these classes, so the
   figures stay readable text.
   ========================================================================== */
.tfs-research .tfs-libcrumbs { margin-bottom: 20px; }

/* hero: title, date and the opening paragraph beside the image */
.tfs-r-hero { padding-block: 48px 56px; }
.tfs-r-hero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .tfs-r-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.tfs-r-hero h1 { margin: 0 0 18px; font-size: clamp(2rem, 1.6vw + 1.4rem, 2.75rem); line-height: 1.12; }
.tfs-r-hero__date { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 0.9375rem; font-weight: 500; color: var(--tfs-navy); }
.tfs-r-hero__date .tfs-icon { width: 14px; height: 14px; fill: var(--tfs-navy); }
.tfs-r-hero__lede { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--ind-ink); }
.tfs-r-hero__img { margin: 0; overflow: hidden; border-radius: 20px; background: var(--tfs-white); box-shadow: 0 20px 44px rgba(2, 57, 80, 0.10); }
.tfs-r-hero__img img { display: block; width: 100%; height: auto; }

/* bands */
.tfs-r-sec { padding-block: clamp(48px, 5vw, 72px); background: var(--tfs-white); }
.tfs-r-sec--tint { background: var(--tfs-surface); }
.tfs-r-in { width: min(100% - 2.5rem, 1140px); margin-inline: auto; }
.tfs-r-sec h2 { margin: 0 0 26px; font-size: clamp(1.625rem, 1.2vw + 1.2rem, 2.25rem); line-height: 1.15; }
.tfs-r-sec p { margin: 0 0 16px; font-size: 1rem; line-height: 1.75; color: var(--ind-ink); }
.tfs-r-sec p strong { color: var(--tfs-navy); }
.tfs-r-split { display: grid; gap: 32px; align-items: center; margin-block: 8px 28px; }
@media (min-width: 900px) {
	.tfs-r-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
	.tfs-r-split--flip .tfs-r-text { order: 2; }
}
.tfs-r-split > :last-child > :last-child { margin-bottom: 0; }

/* cards */
.tfs-r-card { margin: 0; padding: 28px 30px; border: 1.5px solid #D9E4E8; border-radius: 28px; background: var(--tfs-white); }
.tfs-r-sec .tfs-r-card__title { margin: 0; font-size: 1.1875rem; font-weight: 600; color: var(--tfs-navy); }
.tfs-r-sec .tfs-r-card__sub { margin: 2px 0 20px; font-size: 0.8125rem; color: #7A8D96; }
.tfs-r-sec > .tfs-r-in > .tfs-r-card { margin-top: 28px; }

.tfs-r-keys { margin: 0; padding: 26px 30px 26px 50px; border: 1.5px solid #D9E4E8; border-radius: 24px; background: var(--tfs-white); display: grid; gap: 10px; }
.tfs-r-keys li { font-size: 1rem; line-height: 1.6; color: var(--ind-ink); }
.tfs-r-keys li::marker { color: var(--tfs-navy); }
.tfs-r-keys strong { color: var(--tfs-navy); }

/* visits card */
.tfs-r-visits { padding: 36px 38px; }
.tfs-r-sec .tfs-r-visits__head { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; color: #7A8D96; }
.tfs-r-logo { width: 26px; height: 26px; flex: none; }
.tfs-r-sec .tfs-r-visits__big { margin: 36px 0 0; font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #032F31; }
.tfs-r-sec .tfs-r-visits__sub { margin: 14px 0 0; font-size: 1rem; line-height: 1.4; color: #607883; }
.tfs-r-visits__row { display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 28px 0 0; padding-top: 24px; border-top: 1.5px solid #D9E4E8; }
.tfs-r-visits__row div { flex: 1; min-width: 8rem; }
.tfs-r-visits__row dd { margin: 0; font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 700; line-height: 1.1; color: #12383D; }
.tfs-r-visits__row dd.is-up { color: #48C0B5; }
.tfs-r-visits__row dt { margin-top: 8px; font-size: 0.9375rem; color: #6D818A; }

/* vertical bars with badges */
.tfs-r-vbars__plot { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: 6px; }
.tfs-r-vbars__axis { display: flex; flex-direction: column; justify-content: space-between; height: 190px; margin-top: 54px; font-size: 0.6875rem; color: #7A8D96; text-align: right; }
.tfs-r-vbars ol {
	list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end;
	background: repeating-linear-gradient(to top, #E2E9E8 0 1px, transparent 1px 38px) 0 54px / 100% 191px no-repeat;
}
.tfs-r-vbars li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 268px; }
.tfs-r-vbars li b { font-size: 0.6875rem; font-weight: 700; color: var(--tfs-navy); }
.tfs-r-badge { display: grid; place-items: center; width: 30px; height: 30px; margin: 4px 0 6px; border-radius: 50%; background: var(--c); color: #fff; font-size: 0.75rem; font-weight: 700; box-shadow: 0 2px 6px rgba(2, 57, 80, 0.18); }
.tfs-r-badge .tfs-r-logo { width: 18px; height: 18px; }
.tfs-r-vbars li i { display: block; width: 72%; height: max(3px, calc(var(--v) * 1.9px)); border-radius: 6px 6px 0 0; background: #2D5F6B; }
.tfs-r-vbars li em { margin-top: 8px; font-style: normal; font-size: 0.6875rem; color: #607883; white-space: nowrap; }

/* line chart */
.tfs-r-line { display: block; width: 100%; height: auto; }
.tfs-r-line text { font-family: var(--tfs-font-ui); font-size: 11px; fill: #7A8D96; }
.tfs-r-line__grid line { stroke: #E2E9E8; }
.tfs-r-line__area { fill: url(#tfs-r-area); }
.tfs-r-line polyline { fill: none; stroke: #2D5F6B; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.tfs-r-line circle { fill: #FFFFFF; stroke: #2D5F6B; stroke-width: 2.5; }

/* tables */
.tfs-r-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1.5px solid #D9E4E8; border-radius: 14px; font-size: 1rem; }
.tfs-r-table th, .tfs-r-table td { padding: 12px 18px; text-align: center; border-bottom: 1px solid #D9E4E8; }
.tfs-r-table thead th { background: #2D5F6B; color: var(--tfs-white); font-weight: 600; }
.tfs-r-table td:first-child { font-weight: 600; color: var(--tfs-navy); }
.tfs-r-table tbody tr:nth-child(even) { background: var(--tfs-surface); }
.tfs-r-table tbody tr:last-child td { border-bottom: 0; }
.tfs-r-split--middle { align-items: center; }

/* horizontal bars */
.tfs-r-hbars ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.tfs-r-hbars li { display: grid; grid-template-columns: 8.5rem 1fr 3.5rem; align-items: center; gap: 16px; font-size: 0.9375rem; color: var(--tfs-navy); }
.tfs-r-hbars i { display: block; height: 14px; border-radius: 7px; background: #E2E9E8; position: relative; overflow: hidden; }
.tfs-r-hbars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: 7px; background: #B9CBCF; }
.tfs-r-hbars li.is-new i::after { background: #2D5F6B; }
.tfs-r-hbars b { text-align: right; font-size: 0.875rem; }

/* rings */
.tfs-r-rings > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 24px; }
.tfs-r-ring { display: grid; justify-items: center; gap: 12px; text-align: center; }
.tfs-r-ring b {
	display: grid; place-items: center; width: 8.5rem; aspect-ratio: 1; border-radius: 50%;
	font-size: 1.375rem; font-weight: 700; color: var(--tfs-navy);
}
.tfs-r-ring span { font-size: 0.875rem; color: var(--tfs-navy); }

/* big-number cards (Lens, AI Mode): a dark tab over the card */
.tfs-r-big { position: relative; padding: 70px 30px 28px; margin-top: 26px; }
.tfs-r-sec .tfs-r-big__tag {
	position: absolute; top: -24px; left: -14px; display: flex; align-items: center; gap: 22px; margin: 0; padding: 14px 20px;
	border-radius: 12px 12px 12px 0; background: #17312F; color: #fff; box-shadow: 0 10px 22px rgba(2, 57, 80, 0.18);
}
.tfs-r-big__tag b { font-size: 1.375rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tfs-r-big__tag span { font-size: 0.8125rem; font-weight: 600; opacity: 0.85; max-width: 9rem; line-height: 1.25; }
.tfs-r-big__body { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.tfs-r-sec .tfs-r-big__pre { margin: 0; font-size: 0.9375rem; color: #607883; }
.tfs-r-sec .tfs-r-big__num { margin: 4px 0; font-size: clamp(3.5rem, 6vw, 4.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #17312F; }
.tfs-r-sec .tfs-r-big__post { margin: 0; font-size: 0.9375rem; color: #607883; }
.tfs-r-sec .tfs-r-big__src { margin: 14px 0 0; font-size: 0.75rem; color: #9AA8AE; }
.tfs-r-mark { width: 100px; height: 100px; flex: none; }

/* Scroll-in motion (assets/js/research.js adds .tfs-r-anim, then .is-in per
   card). Without the script these "before" states never apply. */
@property --tfs-p { syntax: "<number>"; inherits: false; initial-value: 0; }
.tfs-r-ring b { --tfs-p: var(--v); transition: --tfs-p 1.4s cubic-bezier(.2, .7, .2, 1); background: radial-gradient(closest-side, #FFFFFF 78%, transparent 79%), conic-gradient(var(--c) calc(var(--tfs-p) * 1%), #E2E9E8 0); }
.tfs-r-anim .tfs-r-card:not(.is-in) .tfs-r-ring b { --tfs-p: 0; }
.tfs-r-ring:nth-child(2) b { transition-delay: .12s; }
.tfs-r-ring:nth-child(3) b { transition-delay: .24s; }
.tfs-r-ring:nth-child(4) b { transition-delay: .36s; }

.tfs-r-anim .tfs-r-vbars li i { transform-origin: bottom; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.tfs-r-anim .tfs-r-vbars:not(.is-in) li i { transform: scaleY(0); }
.tfs-r-anim .tfs-r-vbars li .tfs-r-badge, .tfs-r-anim .tfs-r-vbars li b { transition: opacity .4s ease .6s, transform .4s ease .6s; }
.tfs-r-anim .tfs-r-vbars:not(.is-in) li .tfs-r-badge, .tfs-r-anim .tfs-r-vbars:not(.is-in) li b { opacity: 0; transform: translateY(8px); }
.tfs-r-vbars li:nth-child(2) i { transition-delay: .08s; }
.tfs-r-vbars li:nth-child(3) i { transition-delay: .16s; }
.tfs-r-vbars li:nth-child(4) i { transition-delay: .24s; }
.tfs-r-vbars li:nth-child(5) i { transition-delay: .32s; }
.tfs-r-vbars li:nth-child(6) i { transition-delay: .40s; }
.tfs-r-vbars li:nth-child(7) i { transition-delay: .48s; }

.tfs-r-anim .tfs-r-hbars i::after { transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.tfs-r-anim .tfs-r-hbars:not(.is-in) i::after { transform: scaleX(0); }
.tfs-r-hbars li:nth-child(2) i::after { transition-delay: .15s; }

.tfs-r-anim .tfs-r-line polyline { stroke-dasharray: var(--len, 2000); stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1); }
.tfs-r-anim .tfs-r-card:not(.is-in) .tfs-r-line polyline { stroke-dashoffset: var(--len, 2000); }
.tfs-r-anim .tfs-r-line__area, .tfs-r-anim .tfs-r-line circle { transition: opacity .6s ease 1.1s; }
.tfs-r-anim .tfs-r-card:not(.is-in) .tfs-r-line__area, .tfs-r-anim .tfs-r-card:not(.is-in) .tfs-r-line circle { opacity: 0; }

.tfs-r-anim .tfs-r-keys li { transition: opacity .5s ease, transform .5s ease; }
.tfs-r-anim .tfs-r-keys:not(.is-in) li { opacity: 0; transform: translateY(10px); }
.tfs-r-keys li:nth-child(2) { transition-delay: .07s; }
.tfs-r-keys li:nth-child(3) { transition-delay: .14s; }
.tfs-r-keys li:nth-child(4) { transition-delay: .21s; }
.tfs-r-keys li:nth-child(5) { transition-delay: .28s; }
.tfs-r-keys li:nth-child(6) { transition-delay: .35s; }
.tfs-r-keys li:nth-child(7) { transition-delay: .42s; }

.tfs-r-anim .tfs-r-mark { transition: transform .7s cubic-bezier(.3, 1.3, .5, 1) .3s, opacity .5s ease .3s; }
.tfs-r-anim .tfs-r-card:not(.is-in) .tfs-r-mark { opacity: 0; transform: scale(.7) rotate(-12deg); }

/* author band */
.tfs-r-author h2 { margin-bottom: 20px; }
.tfs-r-author .tfs-article__author { margin-top: 0; max-width: 760px; }

@media (max-width: 599px) {
	.tfs-r-card, .tfs-r-visits { padding: 22px 20px; }
	.tfs-r-keys { padding: 20px 20px 20px 38px; }
	.tfs-r-vbars li { height: 240px; }
	.tfs-r-vbars li em { font-size: 0.5625rem; }
	.tfs-r-badge { width: 24px; height: 24px; font-size: 0.625rem; }
	.tfs-r-hbars li { grid-template-columns: 6.5rem 1fr 3rem; gap: 10px; }
	.tfs-r-big { padding: 64px 20px 24px; }
	.tfs-r-big__tag b { font-size: 1.0625rem; }
	.tfs-r-mark { width: 64px; height: 64px; }
}

/* ==========================================================================
   25. CASE STUDY ILLUSTRATIONS
   Andrew's case study images are drawn art-right on a flat #EEF7F9 ground
   (e.g. content/case-studies/industrial-technology-cybersecurity.webp).
   On the case study page the image is the hero backdrop, anchored right, with
   the heading on the empty left. Cards crop in from the right so they show the
   art, not the empty ground.
   ========================================================================== */
@media (min-width: 900px) {
	.tfs-csx__hero.has-art { background: #EEF7F9 var(--csx-art) right top / min(62vw, 980px) auto no-repeat; }
	.tfs-csx__hero.has-art::before, .tfs-csx__hero.has-art::after { display: none; }
	.tfs-csx__hero.has-art .tfs-wrap { padding-block: 34px 44px; }
	.tfs-csx__hero.has-art h1, .tfs-csx__hero.has-art .tfs-ihero__lede { max-width: min(46%, 36rem); }
	.tfs-csx__hero.has-art .tfs-csx__stats { position: relative; z-index: 1; margin-top: min(9vw, 140px); }
}
.tfs-cs__featimg img, .tfs-cs__card img, .tfs-csx__relimg img { object-position: 82% 55%; }
/* No image yet: the industry illustration, whole, on the pale ground. */
.tfs-cs__featimg img.is-art, .tfs-cs__card img.is-art, .tfs-csx__relimg img.is-art { object-fit: contain; object-position: center; background: #EEF7F9; padding: 18px; box-sizing: border-box; }

/* ==========================================================================
   27. DIRECTORY PAGES: byline and the agency alternative (single-location.php)
   ========================================================================== */
.tfs-byline { margin: 18px 0 0; font-size: 0.9375rem; color: var(--tfs-slate); }
.tfs-byline b { color: var(--tfs-navy); font-weight: 600; }
.tfs-byline span { margin: 0 6px; }
.tfs-alt { padding-block: 8px 0; }
.tfs-alt__card {
	display: grid; gap: 18px 36px; align-items: center;
	padding: 24px 28px; border-radius: 18px;
	background: var(--tfs-navy); color: #D5E6EA;
}
@media (min-width: 860px) { .tfs-alt__card { grid-template-columns: 1fr auto; } }
.tfs-alt__eyebrow { margin: 0 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tfs-teal); }
.tfs-alt__card h2 { margin: 0 0 8px; font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem); line-height: 1.2; color: var(--tfs-white); }
.tfs-alt__card p { margin: 0; max-width: 46rem; font-size: 0.9375rem; line-height: 1.6; }
.tfs-alt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.tfs-alt__actions .tfs-link { color: var(--tfs-white); }

/* About: the illustration as the hero backdrop (page-templates/about.php). */
@media (min-width: 960px) {
	.tfs-about__hero.has-art { background: #EBF6F9 var(--about-art) right top / min(60vw, 960px) auto no-repeat; }
	.tfs-about__hero.has-art::before, .tfs-about__hero.has-art::after { display: none; }
	.tfs-about__hero.has-art .tfs-about__intro { grid-template-columns: minmax(0, 46%) 1fr; min-height: min(40vw, 640px); }
	.tfs-about__hero.has-art .tfs-about__img { display: none; }
}
@media (max-width: 959px) {
	.tfs-about__hero.has-art .tfs-about__img img { object-position: 85% 50%; }
}

/* Why Fractional SEO: the source line under a chart. */
.tfs-why__source { margin: 12px 0 0; font-size: 0.8125rem; color: var(--ind-ink); }
.tfs-why__source a { color: var(--tfs-teal-dark); }