/* ==========================================================================
   Homepage - built to Figma "Timer Pro homepage (Client)", frame "1. Homepage".
   All measurements are the design's at 1440 wide; fluid values clamp to them.
   ========================================================================== */

/* The canvas behind the page is Track Black, so a phone's pull-down (overscroll) area
   above the black header - and below the black footer - stays black instead of showing
   Flash White. The page itself (body) keeps its Flash White background. */
html { background: var(--tp-black); }

/* The header is a solid Track Black bar on every page and at every width, as the guide
   specifies (Navigation, 1440 x 108). Over photo heroes it used to be transparent, which
   let the photo show through and read as grey. */
.tp-header, .tp-header--overlay { background: var(--tp-black); }
/* Inner pages: the header sits above the page hero and scrolls away with the page, as it
   did when it overlaid the hero (theme.css would otherwise make it sticky). */
.tp-header:not(.tp-header--overlay) { position: relative; }

.fp { --fp-gap: clamp(72px, 11.1vw, 160px); }

/* Section rhythm: 160px of Flash White between sections. Dark and yellow bands carry
   their own padding and butt against each other and the footer. */
.fp > section { margin-top: var(--fp-gap); }
.fp > .fp-hero { margin-top: 0; }
.fp > .fp-logos { margin-top: clamp(32px, 4.2vw, 61px); }
.fp > .fp-band + .fp-band { margin-top: 0; }
.fp > .fp-band:last-child { margin-bottom: 0; }

.fp-band--dark { background: var(--tp-black); color: var(--tp-white); padding-block: clamp(48px, 5.6vw, 80px); }
.fp-band--joined { padding-top: 0; }
.fp-band--yellow { background: var(--tp-yellow); color: var(--tp-black); }

/* 12-column grid: 68px columns, 30px gutters, 1146px total */
.fp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--tp-col-gap); align-items: start; }
.fp-col-1-6  { grid-column: 1 / span 6; }
.fp-col-1-7  { grid-column: 1 / span 7; }
.fp-col-8-12 { grid-column: 8 / span 5; }
.fp-col-1-12 { grid-column: 1 / -1; }
@media (max-width: 900px) {
	.fp-col-1-6, .fp-col-1-7, .fp-col-8-12 { grid-column: 1 / -1; }
}

/* Type as used on the homepage */
.fp-h2 { font-size: var(--tp-h2); }
.fp-h3 { font-size: var(--tp-h3); }
.fp-h4 { font-size: var(--tp-h4); margin: 0; }
.fp-heading { max-width: 620px; margin-bottom: clamp(32px, 4.2vw, 60px); }
.fp-band--dark .fp-h2, .fp-band--dark .fp-h3 { color: var(--tp-yellow); }
.fp-band--dark .fp-h4 { color: var(--tp-white); }
.fp-eyebrow {
	font-family: var(--tp-mono); font-size: 1rem; line-height: .86; letter-spacing: 0;
	text-transform: uppercase; color: var(--tp-blue); margin: 0 0 16px;
}
.fp-band--dark .fp-eyebrow { color: var(--tp-white); }
.fp-lead { color: var(--tp-grey); margin: 0; }
.fp-small { font-size: 1.125rem; line-height: 1.4; margin: 0 0 24px; }
.fp-photo { display: block; width: 100%; height: auto; object-fit: cover; }

/* Visually hidden text for screen readers (e.g. "PDF, opens in a new tab"). */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Image placeholder: a slot that holds its shape until a real image is supplied. Flash
   White with a faint measurement grid (the flat-hero motif, inverted for light sections),
   1px Track Black rule and a mono label. */
.fp-placeholder {
	aspect-ratio: 16 / 9; border: 1px solid var(--tp-black);
	background-color: var(--tp-white);
	background-image:
		linear-gradient(rgba(10,10,10,.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(10,10,10,.07) 1px, transparent 1px);
	background-size: 32px 32px;
	display: flex; align-items: center; justify-content: center;
}
.fp-placeholder span {
	font-family: var(--tp-mono); font-size: .875rem; line-height: 1; text-transform: uppercase;
	color: var(--tp-black); background: var(--tp-white); padding: 6px 10px; border: 1px solid var(--tp-black);
}

/* ----- 1. Hero ----- */
.fp-hero {
	position: relative; overflow: hidden; color: var(--tp-white);
	min-height: clamp(640px, 68.3vw, 983px);
	display: flex; flex-direction: column;
	background: var(--tp-black) var(--fp-hero-img) center / cover no-repeat;
}
/* The design's gradient overlays: top band, bottom, left column. The Figma comp also had a
   96px dark band down the right edge; on the live page it read as the photo stopping short
   of the screen, so it is dropped at every width. */
.fp-hero::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(to bottom, #0A0A0A 0%, rgba(10,10,10,0) 29%),
		linear-gradient(to top, #0A0A0A 11%, rgba(10,10,10,.9) 28%, rgba(10,10,10,0) 81%),
		linear-gradient(to right, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 35%, rgba(10,10,10,0) 62%);
}
.fp-hero__copy { position: relative; z-index: 2; padding-top: clamp(140px, 21vw, 302px); width: 100%; }
/* Homepage hero, desktop: the same banner treatment as the Clients page header - the photo is
   its own layer (.fp-hero__photo, printed by front-page.php), right-aligned from just below the
   108px navigation bar down to 90% of the remaining height, never enlarged, its left edge
   fading into the black over 240px. Bottom fade 90% black at 10% up, clear by 35%, plus the
   left fade behind the headline; no top fade. Below 901px the hero keeps its cover photo. */
.fp--home2 .fp-hero__photo { display: none; }
@media (min-width: 901px) {
	.fp--home2 .fp-hero { background: var(--tp-black); }
	.fp--home2 .fp-hero__photo {
		display: block; top: 108px;
		height: min(calc(100% - 108px), var(--fp-hero-h, 100%)); /* never enlarged */
		background-position: right center; /* a banner wider than the hero is trimmed from the left */
	}
	.fp--home2 .fp-hero::before {
		z-index: 1;
		background:
			linear-gradient(to top, #0A0A0A 0%, rgba(10,10,10,.9) 10%, rgba(10,10,10,0) 35%),
			linear-gradient(to right, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 35%, rgba(10,10,10,0) 62%), linear-gradient(to right, rgba(10,10,10,0) 25%, rgba(10,10,10,.18) 50%, rgba(10,10,10,.18) 61%, rgba(10,10,10,0) 64%); /* second fade added 2026-10-24 for headline contrast: clear to 25% (under the V of IMPROVE), building to Track Black 18% by 50%, held to 61%, clear under the G of MANUFACTURING at 1440 (trial) */
	}
}
.fp-hero h1 { font-size: clamp(3.4rem, 9.45vw, 8.5rem); line-height: .86; max-width: 4.6em; margin: 0 0 16px; color: var(--tp-white); }
.fp-hero__sub { font-size: var(--tp-intro); line-height: 1.1; max-width: 23em; margin: 0; }
.fp-hero__stats {
	position: relative; z-index: 2; width: 100%; margin-top: auto;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tp-col-gap);
	padding-top: 48px; padding-bottom: clamp(32px, 4.2vw, 60px); text-align: center;
}
.fp-hero__stats strong { display: block; font-family: var(--tp-display); font-weight: 400; font-size: var(--tp-h5); line-height: .86; text-transform: uppercase; }
.fp-hero__stats span { display: block; font-size: .875rem; line-height: 1.1; margin-top: 10px; }
.fp-hero__annotation { position: absolute; z-index: 1; left: 57.9%; top: 22.3%; width: 33.5%; }
.fp-hero__annotation img { width: 100%; height: auto; display: block; }
.fp-hero__label { position: absolute; font-family: var(--tp-mono); font-size: .9375rem; line-height: .86; text-transform: uppercase; color: var(--tp-red); white-space: nowrap; }
.fp-hero__label--side { left: -23px; top: 94%; transform: rotate(-90deg); transform-origin: left top; }
.fp-hero__label--below { left: 32px; top: calc(100% + 10px); }
@media (max-width: 900px) {
	.fp-hero__annotation { display: none; }
	.fp-hero__stats { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
}

/* ----- 2. Logos ----- */
.fp-logos { text-align: center; }
.fp-logos p { margin: 0 0 22px; color: var(--tp-black); }
.fp-logos__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(24px, 4.5vw, 64px); }
.fp-logos__row img { max-height: 41px; max-width: 150px; width: auto; filter: grayscale(1) brightness(.35); }

/* ----- 3. Image block ----- */
.fp-imageblock { margin-top: clamp(32px, 4.1vw, 59px); }
.fp-imageblock.fp-col-1-7 { aspect-ratio: 656 / 366; }
.fp-imageblock.fp-col-8-12 { aspect-ratio: 460 / 366; }
/* The flipped pair (Vision AI Engine): narrow photo on the left, wide on the right. */
.fp-col-6-12 { grid-column: 6 / span 7; }
.fp-imageblock.fp-col-1-5 { aspect-ratio: 460 / 366; }
.fp-imageblock.fp-col-6-12 { aspect-ratio: 656 / 366; }
@media (max-width: 900px) { .fp-col-6-12 { grid-column: 1 / -1; } }

/* ----- Sign post squares (shared 1px borders, 382 x 362 at desktop) ----- */
.fp-squares {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--fp-line, var(--tp-black)); border-left: 1px solid var(--fp-line, var(--tp-black));
}
.fp-band--dark .fp-squares { --fp-line: var(--tp-white); }
.fp-square {
	display: flex; flex-direction: column; justify-content: flex-start; gap: 16px;
	min-height: clamp(260px, 25.1vw, 362px); padding: clamp(36px, 6.4vw, 92px) 42px 40px;
	border-right: 1px solid var(--fp-line, var(--tp-black)); border-bottom: 1px solid var(--fp-line, var(--tp-black));
	color: inherit; text-decoration: none; background: transparent;
}
.fp-square p { margin: 0; color: var(--tp-grey); }
.fp-band--dark .fp-square p { color: var(--tp-white); }
.fp-icon { width: 20px; height: 20px; color: var(--tp-blue); flex: none; }
.fp-band--dark .fp-icon { color: var(--tp-yellow); width: 26px; height: 26px; }
.fp-num { font-family: var(--tp-mono); font-size: 1rem; line-height: .86; color: var(--tp-yellow); }
.fp-sec .fp-num { color: var(--tp-blue); } /* on light sections the numbers are Electric Blue; yellow stays on dark bands */
/* Hover, light section: Volt Yellow fill and the design's olive-tinted lift. On touch
   screens the browser's own tap-highlight tint was laid over the yellow and made it look
   pale, so it is switched off and the tap (:active) shows the same full yellow. */
.fp-square--link { transition: background-color .15s ease, box-shadow .15s ease; position: relative; -webkit-tap-highlight-color: transparent; }
.fp-square--link:hover, .fp-square--link:focus-visible, .fp-square--link:active {
	background: var(--tp-yellow); box-shadow: 0 0 21px 7px rgba(123, 130, 55, .25); z-index: 1;
}
.fp-square--link:hover p, .fp-square--link:hover .fp-icon,
.fp-square--link:focus-visible p, .fp-square--link:focus-visible .fp-icon,
.fp-square--link:active p, .fp-square--link:active .fp-icon { color: var(--tp-black); }
@media (max-width: 900px) { .fp-squares { grid-template-columns: 1fr; } .fp-square { min-height: 0; padding: 36px 28px; } }

/* ----- 5. Vision AI block ----- */
.fp-bullets { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; }
.fp-bullets li { position: relative; padding-left: 22px; font-size: var(--tp-intro); line-height: 1.4; letter-spacing: 0; }
.fp-bullets li::before { content: ''; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; background: var(--tp-yellow); }
.fp-video { margin-top: 48px; aspect-ratio: 1146 / 645; }

/* ----- 6. Repeat loop under the process squares ----- */
.fp-repeat { width: calc(100% * 2 / 3); margin-left: calc(100% / 6); color: var(--tp-yellow); }
.fp-repeat svg { display: block; width: 100%; height: 72px; overflow: visible; }
.fp-repeat__label { font-family: var(--tp-display); font-size: var(--tp-h4); line-height: .86; text-transform: uppercase; text-align: center; margin: 14px 0 0; }
@media (max-width: 900px) { .fp-repeat { display: none; } .fp-repeat__label { display: none; } }

/* ----- 7. Testimonial -----
   Every quote on the site uses one size (the step-down size long quotes used), and the
   block keeps a fixed height - as tall as the longest quote - so it never jumps.
   Without JS: all slides share one grid cell and only the first is visible.
   With JS (components.js adds .is-carousel): the track becomes a native horizontal
   scroller with snap points - the same mechanism as the outcome cards - so a finger swipe
   scrolls it. The script loops it endlessly and advances it every 8 seconds. */
.fp-quote__inner { position: relative; }
.fp-quote__track { display: grid; }
.fp-quote__slide { grid-area: 1 / 1; position: relative; margin: 0; padding-left: clamp(0px, 6.8vw, 98px); }
.fp-quote__slide[hidden] { display: block; visibility: hidden; }
.fp-quote__track.is-carousel {
	display: flex; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.fp-quote__track.is-carousel::-webkit-scrollbar { display: none; }
.fp-quote__track.is-carousel > .fp-quote__slide { grid-area: auto; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.fp-quote__mark {
	position: absolute; left: -12px; top: -.26em;
	font-family: var(--tp-display); font-size: clamp(7rem, 17.1vw, 15.4rem); line-height: 1; color: var(--tp-blue);
}
/* A scroller clips at its edges, so inside the carousel each slide gets 48px of headroom
   for the quote mark (moved down by the same amount) and the mark sits at the left edge
   rather than hanging 12px outside. */
.is-carousel > .fp-quote__slide { padding-top: 48px; }
.is-carousel .fp-quote__mark { left: 0; top: calc(48px - .26em); }
.fp-quote blockquote { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.875rem); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; max-width: 34em; }
.fp-quote figcaption { margin-top: 28px; color: var(--tp-blue); font-size: 1.125rem; line-height: 1.4; }
.fp-quote__nav {
	position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -12px; padding: 0;
	border: 1px solid var(--tp-black); background: transparent; color: var(--tp-black); cursor: pointer;
	font-size: 1rem; line-height: 1; z-index: 2;
}
/* Offsets are from the wrap's padding edge, so the gutter is added back: arrows land at
   x=69 and x=1358 at 1440, as drawn. */
.fp-quote__prev { left: calc(var(--tp-gutter) - 78px); }
.fp-quote__next { right: calc(var(--tp-gutter) - 89px); }
.fp-quote__nav:hover { background: var(--tp-black); color: var(--tp-yellow); }
/* Narrower screens: the arrows move under the quote, lined up with the text's left edge
   (inside the page gutter, not at the screen edge). */
@media (max-width: 1300px) {
	.fp-quote__prev { left: var(--tp-gutter); top: auto; bottom: -48px; margin-top: 0; }
	.fp-quote__next { left: calc(var(--tp-gutter) + 34px); right: auto; top: auto; bottom: -48px; margin-top: 0; }
}
/* Phones: the quote mark gets its own space above the text instead of sitting over it,
   long quotes cap at about eleven lines and scroll inside the box, and the arrows grow to
   a comfortable tap size. */
@media (max-width: 900px) {
	.fp-quote__slide, .is-carousel > .fp-quote__slide { padding-left: 0; padding-top: 64px; }
	.fp-quote__mark, .is-carousel .fp-quote__mark { left: 0; top: -.1em; font-size: 6.5rem; }
	.fp-quote blockquote { max-height: 14em; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
	.fp-quote__nav { width: 40px; height: 40px; font-size: 1.25rem; bottom: -60px; }
	.fp-quote__next { left: calc(var(--tp-gutter) + 50px); }
}

/* ----- 8 / 13. Soft CTA (yellow band) ----- */
.fp-softcta { padding-block: clamp(64px, 7.8vw, 113px); text-align: center; }
.fp-softcta h2 { font-size: var(--tp-h2); max-width: 11.5em; margin: 0 auto 32px; }
.fp-softcta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 48px; }
.fp-softcta .tp-btn { min-width: 263px; }
.fp-btn--ink { background: var(--tp-black); color: var(--tp-yellow); border-color: var(--tp-black); }
.fp-btn--ink:hover { background: transparent; color: var(--tp-black); }
.fp-btn--ink-outline { background: transparent; color: var(--tp-black); border: 2px solid var(--tp-black); }
.fp-btn--ink-outline:hover { background: var(--tp-black); color: var(--tp-yellow); }

/* ----- 9. Content block, image right (image bleeds to the viewport edge) ----- */
.fp-imgright { position: relative; min-height: clamp(520px, 52.8vw, 761px); display: flex; align-items: center; }
.fp-imgright .tp-wrap { width: 100%; }
.fp-imgright__copy { max-width: 558px; padding-block: 48px; }
.fp-imgright__copy p:not(.fp-eyebrow) { color: var(--tp-grey); max-width: 440px; }
.fp-imgright__media { position: absolute; top: 0; right: 0; bottom: 0; width: 42.1%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
	.fp-imgright { display: block; min-height: 0; }
	.fp-imgright__media { position: static; width: 100%; height: auto; aspect-ratio: 607 / 761; margin-top: 24px; }
}

/* ----- 10. Outcomes ----- */
.fp-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border: 1px solid var(--tp-black); padding: 15px; margin-bottom: 42px; }
.fp-tab {
	font-family: var(--tp-mono); font-size: 1rem; line-height: 1; text-transform: uppercase;
	padding: 14px 12px; border: 0; background: transparent; color: var(--tp-black); cursor: pointer;
}
.fp-tab.is-active, .fp-tab:hover { background: var(--tp-yellow); }
.fp-track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	padding-inline: max(var(--tp-gutter), calc((100% - var(--tp-container)) / 2));
	scroll-padding-inline: max(var(--tp-gutter), calc((100% - var(--tp-container)) / 2));
}
.fp-track::-webkit-scrollbar { display: none; }
/* Each card carries its own full 1px outline; neighbouring cards overlap by 1px so shared
   edges stay a single line. The rule stops at the cards rather than running to the screen
   edge. */
.fp-outcome {
	flex: 0 0 min(100%, var(--tp-container)); scroll-snap-align: start;
	border: 1px solid var(--tp-black); margin-left: -1px;
	padding: clamp(20px, 2.6vw, 38px) clamp(20px, 6.8vw, 98px) clamp(40px, 4vw, 56px);
	display: grid; gap: 30px; background: var(--tp-white);
}
.fp-outcome:first-child { margin-left: 0; }
/* A card beside the one in view can be clicked to bring it into view (components.js). */
.fp-outcome.is-side { cursor: pointer; }
/* The design's 950 x 534 photo is scaled down by viewport height on desktop, so the tab
   bar, photo and copy all fit in one laptop-sized window. Proportions are kept; the photo
   simply gets smaller rather than being cropped, and sits centred in its card. */
.fp-outcome .fp-photo { aspect-ratio: 950 / 534; justify-self: center; }
@media (min-width: 901px) {
	.fp-outcome .fp-photo { width: auto; max-width: 100%; height: clamp(220px, 36vh, 534px); }
}
/* Copy runs the full width of the card (inside its side padding), so the block stays short. */
.fp-outcome__copy { display: grid; gap: 16px; }
/* Software screenshots in an outcome card are shown whole, letterboxed on Flash White, not cropped. */
.fp-outcome .fp-photo--contain { object-fit: contain; background: var(--tp-white); }
.fp-outcome__copy .fp-eyebrow, .fp-outcome__copy p { margin: 0; }
.fp-outcome__copy p:not(.fp-eyebrow) { color: var(--tp-grey); }

/* ----- 12. Success stories (362 wide, 30 apart) -----
   On desktop the three cards share four rows (photo, title, text, link) through subgrid,
   so every card's paragraph starts on the same line and every "Read the case study" link
   sits on the same line, however many lines each title wraps to. */
.fp-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tp-col-gap); }
.fp-story { display: flex; flex-direction: column; gap: 24px; color: inherit; text-decoration: none; }
@media (min-width: 901px) {
	.fp-stories { grid-template-rows: repeat(4, auto); row-gap: 24px; }
	.fp-story { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0; row-gap: 24px; align-content: start; }
	.fp-story .tp-link { align-self: start; }
}
.fp-story .fp-photo { aspect-ratio: 362 / 384; transition: box-shadow .15s ease; }
.fp-story p { margin: 0; color: var(--tp-grey); }
.fp-story .tp-link { font-size: 1.625rem; align-self: flex-start; justify-self: start; }
.fp-story:hover .fp-h4 { color: var(--tp-blue); }
.fp-story:hover .fp-photo { box-shadow: var(--tp-shadow-card); }
@media (max-width: 900px) { .fp-stories { grid-template-columns: 1fr; } }

/* 3. Dark bands are dark contexts too: secondary buttons keep a yellow label. */
.fp-band--dark .tp-btn--secondary { color: var(--tp-yellow); }
.fp-band--dark .tp-btn--secondary:hover { background: var(--tp-yellow); color: var(--tp-black); }

/* 4. Vision AI: the paragraph starts level with the headline, below the eyebrow line. */
@media (min-width: 901px) { .fp-band--dark .fp-grid > .fp-col-8-12 { padding-top: 30px; } }

/* 5. Blue outline button carries a 3px stroke like the yellow one. */
.tp-btn--blue-outline { border-width: 3px; }

/* 6 / 7. Story titles run at about 330px, as drawn. */
.fp-story h3 { max-width: 330px; }

/* ==========================================================================
   Inner pages - the same components at page scale
   ========================================================================== */
.fp > .fp-sec:last-child { margin-bottom: var(--fp-gap); }

/* Page hero: the homepage hero at page scale; headline at the CTA size (90). The header
   sits above it (not over it), so the hero is exactly as tall as its content plus even
   padding and the banner photo covers just that block. */
.fp-hero--page { min-height: 0; background: var(--tp-black); }
.fp-hero__photo {
	position: absolute; top: 0; right: 0; z-index: 0;
	height: min(90%, var(--fp-hero-h, 90%)); max-width: 100%;
	background: center / cover no-repeat;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 240px);
	mask-image: linear-gradient(to right, transparent, #000 240px);
}
.fp-hero--page::before { z-index: 1; }
/* The banner photo is its own layer (.fp-hero__photo): from just under the navigation bar
   down to 90% of the hero's height, scaled to that height with proportions kept, never
   enlarged, against the right edge, its left edge fading into the black. No fade below the navigation bar.
   A light bottom fade (90% black at 10% up, clear by 35%) and the left fade behind the
   headline keep the text and stats readable. */
.fp-hero--page::before {
	background:
		linear-gradient(to top, #0A0A0A 0%, rgba(10,10,10,.9) 10%, rgba(10,10,10,0) 35%),
		linear-gradient(to right, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 35%, rgba(10,10,10,0) 62%);
}
.fp-hero--page .fp-hero__copy { padding-top: clamp(56px, 6.9vw, 100px); padding-bottom: clamp(56px, 6.9vw, 100px); }
/* Headers without the row of four stat tiles (.fp-hero--plain): the banner fills the
   full height of the header block, proportions kept, against the right edge, and the
   only fade is the black coming in from the left - no bottom fade. The layout above
   (photo to 90%, bottom fade) applies only to headers with stat tiles (.fp-hero--stats). */
.fp-hero--plain .fp-hero__photo { height: 100%; }
.fp-hero--plain::before {
	background: linear-gradient(to right, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 35%, rgba(10,10,10,0) 62%);
}
.fp-hero--page h1 { font-size: var(--tp-h2); max-width: 13em; }
.fp-hero--page .fp-hero__sub { max-width: 34em; }
.fp-hero .fp-eyebrow { color: var(--tp-white); }
.fp-hero--page .fp-hero__stats { padding-top: 0; }
.fp-hero__actions { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 32px; }
/* Phones: the two hero buttons step down in size so they sit side by side on one line;
   they still wrap if a screen is too narrow for both. */
@media (max-width: 560px) {
	.fp-hero__actions { gap: 10px; }
	.fp-hero__actions .tp-btn { padding-inline: 14px; font-size: 1.125rem; }
}
.fp-hero--flat {
	background-color: var(--tp-black);
	background-image:
		linear-gradient(rgba(247,247,242,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(247,247,242,.045) 1px, transparent 1px);
	background-size: 64px 64px;
}
.fp-hero--flat::before { display: none; }
.fp-hero__annotation--page { left: auto; right: 8%; top: 24%; width: 24%; }
.fp-hero__annotation--page .fp-hero__label--below { left: 0; }

/* Product Comparison table: fits the content width with no sideways scrolling - the feature
   column takes about a third, the five product columns share the rest equally, and the text
   pills wrap inside their cell instead of forcing the table wider. Below 900px the table
   keeps its natural width and scrolls sideways as before. */
@media (min-width: 901px) {
	.tp-table-wrap:has(.tp-table--compare) { overflow-x: visible; }
	.tp-table--compare { table-layout: fixed; }
	.tp-table--compare thead th:first-child { width: 31%; }
	.tp-table--compare tbody th { min-width: 0; }
	.tp-table--compare th, .tp-table--compare td { padding: .65rem .6rem; overflow-wrap: anywhere; }
	.tp-table--compare thead th { font-size: 1rem; position: sticky; top: 0; z-index: 3; } /* header row pinned while scrolling */
/* The category rows (Overview, Deployment, ...) pin directly under the header row, so the current
   group stays labelled while scrolling; each is covered by the next as it arrives. The header's
   height is measured by components.js (--tp-compare-head), as competitor names can wrap. */
.tp-table--compare .tp-table__cat th { position: sticky; top: var(--tp-compare-head, 2.9rem); z-index: 2; }
}
/* Product names centered over their columns, at every width. */
.tp-table--compare thead th + th { text-align: center; }
@media (min-width: 901px) {
	.tp-table--compare .comp-icon { white-space: normal; line-height: 1.25; }
}

/* Numbered two-column table (Product Comparison "more than a feature list"): number and Bebas
   heading on the left, body copy on the right, rows separated by 1px Track Black rules - the
   same row language as the FAQ. Stacks into one column below 900px. */
.fp-valuetable { border-top: 1px solid var(--tp-black); }
.fp-valuetable__row { padding: clamp(24px, 2.8vw, 40px) 0; border-bottom: 1px solid var(--tp-black); row-gap: 12px; }
.fp-valuetable__head .fp-num { display: block; margin-bottom: 12px; }
.fp-valuetable__head .fp-h4 { margin: 0; }
.fp-valuetable__text { margin: 0; color: var(--tp-grey); font-size: var(--tp-intro); line-height: 1.35; }
/* Prose on the grid: 8 columns (754px), the design's heading hierarchy, square bullets. */
.fp-prose { max-width: 754px; }
.fp-prose > :first-child { margin-top: 0; }
.fp-prose h2 { margin: 1.3em 0 .45em; }
.fp-prose h3 { margin: 1.4em 0 .45em; }
.fp-prose p, .fp-prose li { color: var(--tp-black); }
.fp-prose ul { list-style: none; padding-left: 0; display: grid; gap: 10px; }
.fp-prose ul > li { position: relative; padding-left: 22px; }
.fp-prose ul > li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--tp-blue); }
.fp-prose ol { padding-left: 1.4em; }
.fp-prose ol > li::marker { font-family: var(--tp-mono); color: var(--tp-blue); }
.fp-prose a { color: var(--tp-blue); }
/* Buttons inside page copy keep their own label colours and no underline - the prose link
   colour above would otherwise turn a blue button's label blue on blue. */
.fp-prose a.tp-btn { text-decoration: none; }
.fp-prose a.tp-btn--blue { color: var(--tp-white); }
.fp-prose a.tp-btn--blue:hover, .fp-prose a.tp-btn--blue:focus-visible { color: var(--tp-blue); }
.fp-prose img { box-shadow: none; }
.fp-prose blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 3px solid var(--tp-yellow); font-size: var(--tp-intro); }
.tp-prose--wide { max-width: none; }
/* A use-case accordion in the page content runs the full content width (1146px, the same
   page margin left and right); the copy around it keeps the 754px measure. */
.fp-prose:has(> .usecase-accordion) { max-width: none; }
.fp-prose:has(> .usecase-accordion) > :not(.usecase-accordion) { max-width: 754px; }

/* FAQ: the square-grid language as rows - 1px black rules, Bebas questions, blue chevron. */
.fp-faq { border-top: 1px solid var(--tp-black); max-width: 940px; }
.fp-faq__item { border-bottom: 1px solid var(--tp-black); }
.fp-faq__item summary {
	display: flex; justify-content: space-between; align-items: center; gap: 24px;
	padding: 22px 0; cursor: pointer; list-style: none;
	font-family: var(--tp-display); font-size: var(--tp-h5); line-height: .86; letter-spacing: -.01em; text-transform: uppercase;
}
.fp-faq__item summary::-webkit-details-marker { display: none; }
.fp-faq__item summary::after {
	content: ''; flex: none; width: 12px; height: 12px; margin-top: -6px;
	border-right: 3px solid var(--tp-blue); border-bottom: 3px solid var(--tp-blue); transform: rotate(45deg); transition: transform .15s ease;
}
.fp-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: 6px; }
.fp-faq__item summary:hover { color: var(--tp-blue); }
.fp-faq__item > p { margin: 0; padding: 0 48px 24px 0; color: var(--tp-grey); max-width: 760px; }

/* Square grids in 2 and 3 columns; logo rows inside a square (centred across the square). */
.fp-squares--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-squares--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-squares--2 .fp-square { min-height: clamp(220px, 19vw, 280px); }
.fp-square .tp-logo-row { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.fp-square .tp-logo-row img { max-height: 26px; max-width: 110px; width: auto; filter: grayscale(1) brightness(.35); }
.fp-square .tp-logo-row__text { font-family: var(--tp-mono); font-size: .75rem; text-transform: uppercase; border: 1px solid var(--tp-grey); padding: .25rem .5rem; }
.fp-square .fp-num + .fp-h4 { margin-top: 0; }
@media (max-width: 900px) { .fp-squares--2, .fp-squares--3 { grid-template-columns: 1fr; } }

/* Extra grid spans */
.fp-col-1-5  { grid-column: 1 / span 5; }
.fp-col-7-12 { grid-column: 7 / span 6; }
@media (max-width: 900px) { .fp-col-1-5, .fp-col-7-12 { grid-column: 1 / -1; } }

/* Alternating feature rows on a dark band (Vision AI). */
.fp-row { row-gap: 24px; align-items: center; }
.fp-row + .fp-row { margin-top: clamp(56px, 8.3vw, 120px); }
.fp-row__copy p:not(.fp-num) { color: var(--tp-white); margin: 0 0 1em; }
.fp-row__copy .fp-num { margin: 0 0 16px; }
.fp-row__copy .fp-h4 { margin-bottom: 16px; }
.fp-row__media img { display: block; width: 100%; background: var(--tp-white); padding: clamp(12px, 1.7vw, 24px); }
@media (min-width: 901px) {
	.fp-row--flip .fp-row__copy { grid-column: 8 / span 5; grid-row: 1; }
	.fp-row--flip .fp-row__media { grid-column: 1 / span 6; grid-row: 1; }
}
/* Copy-only rows (no image): the copy spans the grid but is held to a readable measure. */
.fp-row--copyonly .fp-row__copy { max-width: 760px; }

/* ----- Pinned scroll (Vision AI features) -----
   Heading and a numbered index stay pinned on the left while the feature panels scroll
   past on the right; the index item for the panel in view is filled Volt Yellow (the same
   active state as the outcome tabs) by components.js [data-fp-pinned]. The panels touch
   edge to edge - shared 1px Track Black rules, like the outcome cards - with square
   corners, Bebas headings and mono numbers. Each panel has an image slot (an image, or
   .fp-placeholder until one is supplied). An emphasised paragraph (<strong>) is set in
   Electric Blue, the same treatment as the brand statement. On phones the pin and index
   drop away and the panels simply stack. */
.fp-pinned .fp-grid { align-items: stretch; row-gap: 32px; }
.fp-pinned__sticky { position: sticky; top: 48px; }
.fp-pinned__sticky .fp-h3 { margin: 0 0 clamp(28px, 3vw, 44px); }
.fp-pinned__nav { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tp-black); }
.fp-pinned__nav li { border-bottom: 1px solid var(--tp-black); }
.fp-pinned__nav a {
	display: flex; align-items: center; gap: 16px; padding: 18px 12px;
	font-family: var(--tp-display); font-size: var(--tp-h5); line-height: .86; letter-spacing: -.01em; text-transform: uppercase;
	color: var(--tp-black); text-decoration: none; transition: background-color .15s ease, color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.fp-pinned__nav a:hover { color: var(--tp-blue); }
.fp-pinned__nav a.is-active { background: var(--tp-yellow); color: var(--tp-black); }
.fp-pinned__num { font-family: var(--tp-mono); font-size: 1rem; line-height: 1; letter-spacing: 0; }
.fp-pinned__panels { display: grid; gap: 0; }
.fp-pinned__panel {
	border: 1px solid var(--tp-black); background: var(--tp-white);
	padding: clamp(28px, 3.4vw, 48px); display: grid; gap: 16px; align-content: start;
	min-height: 70vh; scroll-margin-top: 48px;
}
.fp-pinned__panel + .fp-pinned__panel { margin-top: -1px; }
.fp-pinned__panel .fp-eyebrow, .fp-pinned__panel p { margin: 0; }
.fp-pinned__panel p:not(.fp-eyebrow) { color: var(--tp-grey); }
.fp-pinned__panel strong { color: var(--tp-blue); font-weight: 600; }
.fp-pinned__media { display: block; width: 100%; margin: 8px 0; }
.fp-pinned__diagram { height: auto; }
@media (max-width: 900px) {
	.fp-pinned__sticky { position: static; }
	.fp-pinned__nav { display: none; }
	.fp-pinned__panel { min-height: 0; }
}

/* Cross-marked list for "evaluating alternatives". */
.fp-bullets--cross li::before { background: none; width: 12px; height: 12px; top: .4em;
	background-image: linear-gradient(45deg, transparent 43%, var(--tp-red) 43%, var(--tp-red) 57%, transparent 57%),
		linear-gradient(-45deg, transparent 43%, var(--tp-red) 43%, var(--tp-red) 57%, transparent 57%); }
.fp-band--dark .fp-h4 + .fp-bullets { margin-top: 24px; }
.fp-band--dark .fp-bullets li { font-size: 1.125rem; }

/* Soft CTA supporting line */
.fp-softcta__body { max-width: 40em; margin: -12px auto 32px; font-size: var(--tp-intro); line-height: 1.1; }

/* Image-right variant for maps and diagrams: contained on white rather than cropped. */
.fp-imgright__media--contain { object-fit: contain; background: var(--tp-white); padding: 24px; }

/* Lead-form pages */
.fp-leadgrid { row-gap: 40px; }
.fp-leadgrid .tp-form { border: 1px solid var(--tp-black); background: var(--tp-white); padding: clamp(24px, 3vw, 42px); }
.fp-leadgrid .tp-form .tp-btn--blue { border-width: 3px; }
.fp-logos p a { color: var(--tp-black); }

/* Photo heroes are dark: secondary buttons switch to the yellow outline. */
.fp-hero .tp-btn--secondary { color: var(--tp-yellow); }
.fp-hero .tp-btn--secondary:hover, .fp-hero .tp-btn--secondary:focus-visible { background: var(--tp-yellow); color: var(--tp-black); }

/* Primary (yellow-filled) buttons on dark backgrounds - the header bar, photo heroes and
   dark bands. The base hover empties the fill and keeps a black label, which is invisible
   on black. On dark, the hover keeps the yellow outline and turns the label yellow. */
.tp-header .tp-btn--primary:hover, .tp-header .tp-btn--primary:focus-visible,
.fp-hero .tp-btn--primary:hover, .fp-hero .tp-btn--primary:focus-visible,
.fp-band--dark .tp-btn--primary:hover, .fp-band--dark .tp-btn--primary:focus-visible {
	background: transparent; color: var(--tp-yellow); border-color: var(--tp-yellow);
}

/* Clients: global reach map beside the copy */
.fp-reach { row-gap: 40px; }
.fp-reach p:not(.fp-eyebrow) { color: var(--tp-grey); }
.fp-reach__map img { display: block; width: 100%; height: auto; }

/* ----- Contact page: the page's own blocks, restyled ----- */
.fp-lead-thanks { padding-top: 40px; }
.fp-contact > * + * { margin-top: clamp(56px, 7vw, 100px); }
.fp-contact h2, .fp-contact__formcopy h2 { font-size: var(--tp-h3); margin: 0 0 24px; }
.fp-contact h3, .fp-contact h4 { font-size: var(--tp-h4); margin: 0; }
.fp-contact p, .fp-contact__formcopy p { color: var(--tp-grey); max-width: 754px; }
.fp-contact-intro .hero-sub { font-size: var(--tp-intro); line-height: 1.3; color: var(--tp-black); max-width: 754px; margin: 0 0 28px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-badge {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
	font-family: var(--tp-mono); font-size: .8125rem; text-transform: uppercase; letter-spacing: .02em;
	border: 1px solid var(--tp-black);
}

/* Call / HQ cards: sign-post squares, two up */
.contact-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--tp-black); border-left: 1px solid var(--tp-black);
}
.contact-card {
	display: flex; flex-direction: column; gap: 16px; padding: clamp(36px, 4.4vw, 64px) 42px 40px;
	border-right: 1px solid var(--tp-black); border-bottom: 1px solid var(--tp-black);
}
.contact-card p { margin: 0; }
.contact-icon svg { width: 26px; height: 26px; color: var(--tp-blue); stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.contact-detail {
	align-self: flex-start; font-family: var(--tp-display); font-size: var(--tp-h5); line-height: 1;
	color: var(--tp-blue); text-decoration: none; border-bottom: 3px solid currentColor; padding-bottom: 4px;
}
.contact-detail:hover, .contact-detail:focus-visible { color: var(--tp-black); background: var(--tp-yellow); }
.contact-meta { margin-top: auto; display: grid; gap: 6px; font-family: var(--tp-mono); font-size: .875rem; color: var(--tp-black); }
.contact-meta strong { font-weight: 500; text-transform: uppercase; color: var(--tp-grey); margin-right: 6px; }

/* Representative network: two dark squares */
.regions-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 32px;
	background: var(--tp-black); padding: clamp(24px, 3vw, 42px);
}
.region-box { padding: 40px 42px; border: 1px solid var(--tp-white); color: var(--tp-white); }
.fp-contact .region-box h4 { color: var(--tp-yellow); font-size: var(--tp-h5); margin: 0 0 20px; }
.region-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.region-box li { position: relative; padding-left: 22px; }
.region-box li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--tp-yellow); }
/* Global Representative Network as its own full-width Track Black band (inc/lead-page.php
   .fp-network): heading in Volt Yellow as on every dark band, copy in Flash White, and the
   region boxes sit straight on the band rather than in a black panel of their own. */
.fp-network .fp-contact h2 { color: var(--tp-yellow); }
.fp-network .fp-contact p { color: var(--tp-white); }
.fp-network .regions-grid { background: none; padding: 0; }

/* "How can we guide you?" portals: linked sign-post squares, three up */
.help-portals {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--tp-black); border-left: 1px solid var(--tp-black);
}
.portal-card {
	position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 300px;
	padding: clamp(36px, 4.4vw, 64px) 42px 40px; color: var(--tp-black); text-decoration: none;
	border-right: 1px solid var(--tp-black); border-bottom: 1px solid var(--tp-black);
	transition: background-color .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent;
}
.portal-card:hover, .portal-card:focus-visible, .portal-card:active { background: var(--tp-yellow); box-shadow: 0 0 21px 7px rgba(123, 130, 55, .25); z-index: 1; }
.portal-icon svg { width: 26px; height: 26px; color: var(--tp-blue); stroke-width: 1.6; }
.portal-card:hover .portal-icon svg { color: var(--tp-black); }
.fp-contact .portal-content h4 { font-size: var(--tp-h5); margin: 0 0 12px; }
.fp-contact .portal-content p { margin: 0; }
.portal-card:hover .portal-content p { color: var(--tp-black); }
.portal-arrow { margin-top: auto; font-family: var(--tp-display); font-size: 2rem; line-height: 1; color: var(--tp-blue); }
.portal-card:hover .portal-arrow { color: var(--tp-black); }

@media (max-width: 900px) {
	.contact-grid, .regions-grid, .help-portals { grid-template-columns: 1fr; }
	.contact-card, .region-box, .portal-card { padding: 36px 28px; min-height: 0; }
}

/* Touch screens: no fade on the yellow card fill. A tap navigates within a fraction of a
   second, so the .15s fade was caught part-way and read as a pale yellow; on touch the
   card switches straight to full Volt Yellow. */
@media (hover: none) {
	.fp-square--link, .portal-card { transition: none; }
}

/* ==========================================================================
   Home 2 (/home2/) - v1's copy in the Cremarc layout. v1's headlines run longer
   than the design's, so a few components get a longer-copy setting here.
   ========================================================================== */
.fp--home2 .fp-hero h1 { font-size: clamp(3rem, 7.3vw, 6.5rem); max-width: 8.6em; }
/* Kept narrow enough to end before the annotation motif (which starts at 57.9% of the
   width), so the sub-line never runs over the photo's focal point. */
.fp--home2 .fp-hero__sub { max-width: 25em; }
/* Desktop: the headline, sub-line and buttons sit centred between the 108px navigation bar and
   the stats row, at any screen height (signed off 2026-10-24). */
@media (min-width: 901px) {
	.fp--home2 .fp-hero__copy { padding-top: 188px; margin-block: auto; } /* 108px bar + 80px: sits 40px below the true centre (2026-10-24) */
	.fp--home2 .fp-hero__stats { margin-top: 0; }
}
.fp--home2 .fp-hero .fp-eyebrow { margin-bottom: 18px; }
.fp-hero__accent { color: var(--tp-yellow); font-weight: 600; }

/* Client logos, scrolling: v1's fifteen in a seamless loop. */
.fp-marquee { overflow: hidden; margin-top: 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fp-marquee__track { display: flex; align-items: center; gap: clamp(40px, 4.5vw, 64px); width: max-content; animation: fpMarquee 48s linear infinite; }
.fp-marquee:hover .fp-marquee__track, .fp-marquee:focus-within .fp-marquee__track { animation-play-state: paused; }
.fp-marquee__track a { flex: none; display: block; }
.fp-marquee__track img { display: block; max-height: 41px; max-width: 150px; width: auto; filter: grayscale(1) brightness(.35); transition: filter .15s ease; }
.fp-marquee__track a:hover img, .fp-marquee__track a:focus-visible img { filter: none; }
/* Optical balance: the solid wordmark in logo 08 is set smaller than the 41px cap. */
.fp-marquee__track img[src*="clients/08.svg"], .fp-logos__row img[src*="clients/08.svg"] { max-height: 26px; }
@keyframes fpMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - clamp(40px, 4.5vw, 64px) / 2)); } }
@media (prefers-reduced-motion: reduce) {
	.fp-marquee { -webkit-mask-image: none; mask-image: none; }
	.fp-marquee__track { animation: none; width: auto; max-width: calc(var(--tp-container) + 2 * var(--tp-gutter)); margin-inline: auto; flex-wrap: wrap; justify-content: center; row-gap: 28px; padding-inline: var(--tp-gutter); }
	.fp-marquee__track a[aria-hidden="true"] { display: none; }
}

/* Brand statement and section intros beside a heading. The emphasised sentence is set in
   Electric Blue (light section, so blue is the on-brand accent). Intros beside a heading
   align to the top of the heading, matching the brand statement block. */
.fp-statement p { font-size: var(--tp-intro); line-height: 1.3; color: var(--tp-grey); margin: 0 0 1em; }
.fp-statement p:last-child { margin-bottom: 0; }
.fp-statement strong { color: var(--tp-blue); font-weight: 600; }
.fp-headrow { margin-bottom: clamp(32px, 4.2vw, 60px); align-items: start; row-gap: 20px; }
.fp-headrow .fp-lead { font-size: var(--tp-intro); line-height: 1.3; }
.fp-square .tp-link { margin-top: auto; padding-top: 8px; align-self: flex-start; }
.fp-square--link:hover .tp-link, .fp-square--link:active .tp-link { color: var(--tp-black); }

/* Media with a label badge (Vision AI introduction, overview video) */
.fp-media { position: relative; margin: 0; }
.fp-media .fp-video { display: block; width: 100%; object-fit: cover; }
.fp-media__badge {
	position: absolute; left: 24px; top: 24px; z-index: 1; padding: 8px 12px;
	font-family: var(--tp-mono); font-size: .8125rem; text-transform: uppercase; letter-spacing: .02em;
	background: var(--tp-yellow); color: var(--tp-black);
}
.fp-media .fp-media__badge { top: calc(48px + 24px); }

/* "Then capture and improve the next process" - the design's Repeat label, longer */
.fp-repeat__label--long { font-size: var(--tp-h5); }

/* Testimonials with a heading (homepage) */
.fp--home2 .fp-quote .fp-heading { margin-bottom: clamp(40px, 5vw, 72px); }

/* Image-right media as a video button */
.fp-playmedia { padding: 0; border: 0; background: var(--tp-black); cursor: pointer; overflow: hidden; }
.fp-playmedia img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.fp-playmedia:hover img, .fp-playmedia:focus-visible img { opacity: .82; }
.fp-play {
	position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%);
	background: var(--tp-yellow); display: flex; align-items: center; justify-content: center;
	transition: transform .18s ease;
}
.fp-play::before { content: ''; margin-left: 6px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--tp-black); }
.fp-playmedia:hover .fp-play, .fp-playmedia:focus-visible .fp-play { transform: translate(-50%, -50%) scale(1.08); }
.fp-playmedia:focus-visible { outline: 3px solid var(--tp-focus); outline-offset: 3px; }
@media (max-width: 900px) { .fp-playmedia { display: block; position: relative; } }

/* Video dialog */
.fp-videodialog { width: min(1146px, 94vw); max-width: none; padding: 0; border: 0; background: var(--tp-black); overflow: visible; }
.fp-videodialog::backdrop { background: rgba(10, 10, 10, .94); }
.fp-videodialog video { display: block; width: 100%; max-height: 86vh; background: #000; }
.fp-videodialog__close {
	position: absolute; right: 0; top: -60px; width: 48px; height: 48px; border: 3px solid var(--tp-yellow);
	background: transparent; color: var(--tp-yellow); font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.fp-videodialog__close:hover, .fp-videodialog__close:focus-visible { background: var(--tp-yellow); color: var(--tp-black); }

/* Mobile headers: plain Track Black on every page at 900px and narrower - no banner photo,
   no fades, no annotation motif, no grid. Desktop headers are unchanged. */
@media (max-width: 900px) {
	.fp-hero, .fp--home2 .fp-hero, .fp-hero--flat { background: var(--tp-black); background-image: none; }
	.fp-hero::before, .fp-hero__photo, .fp-hero__annotation { display: none; }
}
/* Clients page header: a stronger fade from the left behind the headline and subtitle, so the
   subtitle stays legible over the bright banner photo (desktop; phones show a plain black header). */
@media (min-width: 901px) {
	.page-id-1009 .fp-hero--page::before {
		background:
			linear-gradient(to top, #0A0A0A 0%, rgba(10,10,10,.9) 10%, rgba(10,10,10,0) 35%),
			linear-gradient(to right, rgba(10,10,10,.92) 0%, rgba(10,10,10,.85) 45%, rgba(10,10,10,.5) 62%, rgba(10,10,10,0) 78%);
	}
}

/* Line break for desktop only (<br class=\"fp-br-desk\">): at 900px and below, where grids go to one column, headings wrap naturally. Keep a space before the <br> so the words stay apart when it is hidden. */
@media (max-width: 900px) { .fp-br-desk { display: none; } }

/* Mobile (900px and below): calls to action centred in their block - the banner's buttons, and a
   button closing a text column or the copy beside an image. Desktop keeps them left-aligned.
   (The yellow soft CTA band centres its buttons at every width already.) */
@media (max-width: 900px) {
	.fp-hero__actions { justify-content: center; }
	.fp-grid > [class*="fp-col-"] > .tp-btn,
	.fp-imgright__copy > .tp-btn { display: flex; width: fit-content; margin-inline: auto; }
}

/* Phones (560px and below), where the header hides its buttons: the homepage banner shows the
   header's two calls to action - Free Evaluation and Book a Demo - under its sub-line, in place of
   its own (timerpro_v2_hero_mobile_ctas(), front-page.php). Other pages and wider screens unchanged. */
.fp-hero__actions--mobile { display: none; }
@media (max-width: 560px) {
	.fp-hero .fp-hero__actions--mobile { display: flex; }
	.fp-hero .fp-hero__actions--main { display: none; }
}

/* Accordion titles: Electric Blue on hover, and kept blue while the section is open - the page
   FAQs (.fp-faq, .tp-faq) and the use-case accordion in page content (.usecase-*, Vision AI Use Cases). */
.tp-prose .usecase-toggle { transition: color .15s ease; }
.tp-prose .usecase-toggle:hover,
.tp-prose .usecase-toggle:focus-visible,
.tp-prose .usecase-item.is-open .usecase-toggle,
.fp-faq__item[open] summary,
.tp-faq__item summary:hover,
.tp-faq__item[open] summary { color: var(--tp-blue); }