/* ==========================================================================
   Timer Pro - design language implementation
   Tokens and rules come from DESIGN.md (Cremarc UI guide). Hex values there are
   sampled from the guide artwork and marked provisional; change them in one place
   here and the whole site follows.
   ========================================================================== */

:root {
	/* Palette */
	--tp-black:  #0A0A0A;   /* Track Black  */
	--tp-white:  #F7F7F2;   /* Flash White  */
	--tp-blue:   #1646FF;   /* Electric Blue */
	--tp-yellow: #FFF200;   /* Volt Yellow  */
	--tp-red:    #FF3D21;   /* Red          */
	--tp-grey:   #7C8187;   /* Grey         */
	--tp-focus:  #D121CD;   /* Focus outline - Cremarc's recommendation */

	/* Grey is used only at 18px and above, where Cremarc have confirmed it passes AA.
	   Secondary copy maps to the brand Grey directly. */
	--tp-grey-text: var(--tp-grey);

	/* Type */
	--tp-display: 'Bebas Neue', 'Bebas Kai', Impact, sans-serif;
	--tp-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--tp-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* The guide's desktop sizes, made fluid so they survive small screens.
	   The upper bound of each clamp is the guide value. */
	--tp-h1: clamp(3.5rem, 11vw, 11.25rem);   /* 180 */
	--tp-h2: clamp(2.5rem, 6.5vw, 5.625rem);  /*  90 */
	--tp-h3: clamp(2rem, 4.8vw, 4.25rem);     /*  68 */
	--tp-h4: clamp(1.6rem, 3vw, 2.625rem);    /*  42 */
	--tp-h5: clamp(1.4rem, 2.2vw, 2rem);      /*  32 */
	--tp-quote: clamp(1.75rem, 4.17vw, 3.75rem); /* 60 at 1440 */
	--tp-intro: clamp(1.125rem, 1.6vw, 1.375rem); /* 22 */
	--tp-body-size: 1.125rem;                 /*  18 */
	--tp-eyebrow: 1rem;                       /*  16 */

	/* Layout - Figma grid style "Desktop": 12 columns of 68px with 30px gutters, centred.
	   That is 1146px of content and a 147px margin at 1440. (The PDF's "68" label is the
	   column width, not the margin - an earlier build read it as the margin.) */
	--tp-container: 1146px;
	--tp-gutter: clamp(1rem, 4.7vw, 68px);
	--tp-col-gap: 30px;
	--tp-section-y: clamp(3.5rem, 8vw, 7.5rem);

	--tp-shadow-card: 0 0 16.1px 6px rgba(10, 10, 10, .14);
}

/* ----- Base ----- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--tp-white);
	color: var(--tp-black);
	font-family: var(--tp-body);
	font-size: var(--tp-body-size);
	line-height: 1.4;              /* 140% body */
	letter-spacing: .01em;         /* +1% */
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--tp-blue); }

/* ----- Type scale ----- */
h1, h2, h3, h4, h5,
.tp-h1, .tp-h2, .tp-h3, .tp-h4, .tp-h5 {
	font-family: var(--tp-display);
	font-weight: 400;
	text-transform: uppercase;
	line-height: .86;              /* 86% - characteristic of the brand, do not relax */
	letter-spacing: -.01em;        /* -1% */
	margin: 0 0 .4em;
}

h1, .tp-h1 { font-size: var(--tp-h1); }
h2, .tp-h2 { font-size: var(--tp-h2); }
h3, .tp-h3 { font-size: var(--tp-h3); }
h4, .tp-h4 { font-size: var(--tp-h4); }
h5, .tp-h5 { font-size: var(--tp-h5); }

p { margin: 0 0 1.1em; }

.tp-eyebrow {
	font-family: var(--tp-mono);
	font-size: var(--tp-eyebrow);
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--tp-blue);           /* light sections; dark sections switch to yellow below */
	margin: 0 0 1.2rem;
}
.tp-section--dark .tp-eyebrow,
.tp-hero .tp-eyebrow { color: var(--tp-yellow); }

.tp-intro {
	font-size: var(--tp-intro);
	line-height: 1.1;              /* 110% */
	letter-spacing: 0;
}

.tp-quote {
	font-size: var(--tp-quote);
	font-weight: 600;              /* Archivo SemiBold */
	line-height: 1;
	letter-spacing: -.01em;
}

/* ----- Layout ----- */
.tp-wrap {
	/* box-sizing is border-box, so the side padding has to be added to the cap or it eats
	   into the 1146px content width. */
	max-width: calc(var(--tp-container) + 2 * var(--tp-gutter));
	margin-inline: auto;
	padding-inline: var(--tp-gutter);
}

.tp-section { padding-block: var(--tp-section-y); }
.tp-section--dark { background: var(--tp-black); color: var(--tp-white); }
/* Buttons carry their own colours - excluded here, or a primary button on a dark
   section gets a yellow label on its yellow fill and the text disappears. */
.tp-section--dark a:not(.tp-btn) { color: var(--tp-yellow); }

/* ----- Buttons ----- */
.tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--tp-display);
	font-size: 1.125rem;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-decoration: none;
	min-height: 48px;
	padding: .1em 26px 0; /* Bebas caps sit .05em above the centre of the line box; the extra .1em on top centres them. */
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Primary: Volt Yellow fill, black label. Hover empties the fill and keeps the border. */
.tp-btn--primary { background: var(--tp-yellow); color: var(--tp-black); border-color: var(--tp-yellow); }
.tp-btn--primary:hover { background: transparent; color: var(--tp-black); }
.tp-section--dark .tp-btn--primary:hover { color: var(--tp-yellow); }

/* Secondary: outline that fills on hover - the inverse of primary. */
.tp-btn--secondary { background: transparent; color: var(--tp-black); border-color: var(--tp-yellow); }
.tp-section--dark .tp-btn--secondary { color: var(--tp-yellow); }
.tp-btn--secondary:hover { background: var(--tp-yellow); color: var(--tp-black); }

/* Electric Blue pair, for light sections. */
.tp-btn--blue { background: var(--tp-blue); color: var(--tp-white); border-color: var(--tp-blue); }
.tp-btn--blue:hover { background: transparent; color: var(--tp-blue); }

/* Tertiary: underlined label, no box. */
.tp-link {
	font-family: var(--tp-display);
	text-transform: uppercase;
	letter-spacing: .01em;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .25em;
}
.tp-link:hover { color: var(--tp-blue); }

/* The guide does not define focus or disabled states (open with Cremarc). This is an
   interim so no control ships without a visible focus ring. */
/* Focus: Cremarc's recommended #D121CD outline, offset so the control's fill stays visible.
   The same colour works on light and dark, so there is no per-context override. */
.tp-btn:focus-visible,
.tp-link:focus-visible,
a:focus-visible {
	outline: 3px solid var(--tp-focus);
	outline-offset: 3px;
}

/* ----- Header ----- */
.tp-header {
	background: var(--tp-black);
	color: var(--tp-white);
	position: sticky;
	top: 0;
	z-index: 50;
}
.tp-header__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding-block: 1rem;
}
.tp-logo {
	font-family: var(--tp-display);
	font-size: 1.75rem;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--tp-white);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	white-space: nowrap;
}
.tp-logo__mark { width: 1.1em; height: 1.1em; flex: none; }

.tp-nav { margin-left: auto; }
.tp-nav ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; }
.tp-nav li { position: relative; }
.tp-nav a {
	font-family: var(--tp-display);
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--tp-white);
	text-decoration: none;
}
.tp-nav a:hover { color: var(--tp-yellow); }


.tp-header__cta { display: flex; gap: .75rem; }
.tp-header__cta .tp-btn { font-size: 1rem; padding-inline: 1.1rem; }

.tp-burger { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; padding: 10px; flex-direction: column; justify-content: center; gap: 5px; }
.tp-burger span { display: block; height: 2px; background: var(--tp-white); transition: transform .2s ease, opacity .2s ease; }
.tp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----- Hero ----- */
.tp-hero {
	position: relative;
	background: var(--tp-black);
	color: var(--tp-white);
	overflow: hidden;
}
.tp-hero__media {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: .5;
}
/* Heavily darkened photography, per the mockups. */
.tp-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.75) 45%, rgba(10,10,10,.35) 100%);
}
/* Without photography the hero is a plain Track Black field, lifted by a faint measurement
   grid that echoes the annotation motif. Replace with a photograph when one is licensed. */
.tp-hero--flat { background-image:
	linear-gradient(rgba(247,248,242,.045) 1px, transparent 1px),
	linear-gradient(90deg, rgba(247,248,242,.045) 1px, transparent 1px);
	background-size: 64px 64px, 64px 64px; }
.tp-hero--flat::after { display: none; }

.tp-hero__inner { position: relative; z-index: 2; padding-block: clamp(4rem, 12vw, 9rem); }
.tp-hero h1 { max-width: 14ch; margin-bottom: .5em; }
.tp-hero .tp-intro { max-width: 46ch; color: var(--tp-white); }

/* Stat row */
.tp-stats {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 2rem;
	padding-block: 2.5rem 3.5rem;
	text-align: center;
}
.tp-stat__figure { font-family: var(--tp-display); font-size: var(--tp-h5); line-height: .86; text-transform: uppercase; }
.tp-stat__label { font-size: .9375rem; color: #C9CCCE; margin: .5rem 0 0; }

/* ----- Annotation motif -----
   The guide's device: a thin rectangle with eight square handles - four corners and four
   edge midpoints - with a mono label. Red on the dark hero; add .tp-annotate--light for
   the white variant used over photography inside light cards. */
.tp-annotate {
	--tp-ann: var(--tp-red);
	position: absolute;
	border: 2px solid var(--tp-ann);
	z-index: 3;
	pointer-events: none;
}
.tp-annotate--light { --tp-ann: var(--tp-white); }
.tp-annotate::before,
.tp-annotate::after {
	content: '';
	position: absolute;
	width: 10px; height: 10px;
	background: var(--tp-ann);
}
/* top row: left, middle, right handles drawn from one pseudo-element via box-shadow */
.tp-annotate::before {
	top: -6px; left: -6px;
	box-shadow: calc(50% + 1px) 0 0 var(--tp-ann), calc(100% + 2px) 0 0 var(--tp-ann);
}
/* bottom row */
.tp-annotate::after {
	bottom: -6px; left: -6px;
	box-shadow: calc(50% + 1px) 0 0 var(--tp-ann), calc(100% + 2px) 0 0 var(--tp-ann);
}
/* side midpoints */
.tp-annotate__mid {
	position: absolute; top: 50%; left: -6px; width: 10px; height: 10px;
	margin-top: -5px; background: var(--tp-ann);
	box-shadow: calc(100% + 2px) 0 0 var(--tp-ann);
}
.tp-annotate__label {
	position: absolute;
	bottom: -1.8rem;
	left: 0;
	font-family: var(--tp-mono);
	font-size: .75rem;
	color: var(--tp-ann);
	white-space: nowrap;
}

/* ----- Trusted-by strip ----- */
.tp-trusted { background: var(--tp-white); padding-block: clamp(2rem, 5vw, 3.5rem); }
.tp-trusted__label { text-align: center; font-size: .9375rem; color: var(--tp-grey-text); margin-bottom: 1.5rem; }
.tp-trusted__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 4rem);
}
.tp-trusted__row img { max-height: 42px; width: auto; filter: grayscale(1) contrast(1.1); opacity: .85; }

/* ----- Cards ----- */
.tp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.tp-card { background: var(--tp-white); display: flex; flex-direction: column; }
.tp-card--raised { box-shadow: var(--tp-shadow-card); }
.tp-card__media { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.tp-card__body { padding: 1.25rem 0 0; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.tp-card--raised .tp-card__body { padding: 1.25rem; }
.tp-card h4 { margin: 0; }
.tp-card p { margin: 0; color: var(--tp-grey-text); font-size: 1rem; }

/* ----- Two-column section intro ----- */
.tp-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: start;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.tp-split p:not(.tp-eyebrow) { color: var(--tp-grey-text); }
.tp-section--dark .tp-split p:not(.tp-eyebrow) { color: #C9CCCE; }

/* ----- Page content (inner pages) ----- */
.tp-page { padding-block: var(--tp-section-y); }
.tp-page__header { margin-bottom: clamp(2rem, 5vw, 3rem); }
.tp-prose { max-width: 72ch; }
.tp-prose h2 { margin-top: 1.6em; }
.tp-prose h3 { margin-top: 1.4em; }
.tp-prose img { margin-block: 1.5rem; }
.tp-prose ul, .tp-prose ol { padding-left: 1.25rem; }
.tp-prose li { margin-bottom: .4em; }
.tp-prose a { text-decoration: underline; text-underline-offset: .2em; }
.tp-prose table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; }
.tp-prose th, .tp-prose td { border: 1px solid #D7D9D3; padding: .6rem .75rem; text-align: left; font-size: 1rem; }
.tp-prose th { background: var(--tp-black); color: var(--tp-white); font-family: var(--tp-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; }

/* ----- Footer ----- */
.tp-footer { background: var(--tp-black); color: var(--tp-white); padding-block: clamp(2.5rem, 6vw, 4rem); }
.tp-footer a { color: var(--tp-white); text-decoration: none; }
.tp-footer a:hover { color: var(--tp-yellow); }
.tp-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.tp-footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #2A2A2A; font-size: .875rem; color: #9BA0A3; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* ----- Responsive ----- */
@media (max-width: 1080px) {
	.tp-header__cta .tp-btn--secondary { display: none; }
}
@media (max-width: 900px) {
	.tp-nav { display: none; }
	.tp-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--tp-black); padding: 1rem var(--tp-gutter) 1.5rem; }
	.tp-nav.is-open ul { flex-direction: column; gap: .9rem; }
	.tp-burger { display: block; margin-left: auto; }
	.tp-header__inner { position: relative; }
	.tp-header__cta { order: 3; }
}
@media (max-width: 560px) {
	.tp-header__cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

/* ==========================================================================
   Homepage components (ported from the production front page)
   ========================================================================== */

/* Hero now carries a real photograph, heavily darkened per the mockups. */
.tp-hero { background-image: var(--tp-hero-img); background-size: cover; background-position: center; }
.tp-hero::after {
	background: linear-gradient(90deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.82) 50%, rgba(10,10,10,.5) 100%);
}
.tp-hero .tp-intro strong { color: var(--tp-yellow); font-weight: 600; }

.tp-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* The annotation motif sits in the clear right-hand third of the hero. */
.tp-hero .tp-annotate { top: 18%; right: 6%; width: 24%; height: 44%; }
@media (max-width: 900px) { .tp-hero .tp-annotate { display: none; } }

/* Client strip */
.tp-trusted__label { display: inline-block; text-align: left; margin-bottom: 1.75rem; color: var(--tp-black); }
.tp-client { display: inline-flex; align-items: center; }
.tp-client img { max-height: 34px; width: auto; filter: grayscale(1); opacity: .7; transition: opacity .15s ease, filter .15s ease; }
.tp-client:hover img { filter: none; opacity: 1; }
.tp-trusted__row { gap: clamp(1.25rem, 3.5vw, 2.75rem); }

/* Alternate light section, to separate neighbouring white blocks. */
.tp-section--alt { background: #EFF0EA; }

/* Cards that are whole links */
.tp-card--link { text-decoration: none; color: inherit; transition: transform .15s ease; }
.tp-card--link:hover { transform: translateY(-3px); }
.tp-card--link:hover .tp-link { color: var(--tp-blue); }

/* Checklist in the Vision AI band */
.tp-checks { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .65rem; }
.tp-checks li { position: relative; padding-left: 1.9rem; color: #C9CCCE; }
.tp-checks li::before {
	content: '';
	position: absolute; left: 0; top: .45em;
	width: .85rem; height: .45rem;
	border-left: 2px solid var(--tp-yellow);
	border-bottom: 2px solid var(--tp-yellow);
	transform: rotate(-45deg);
}

/* Capture / analyze / improve */
.tp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.tp-step { border-top: 3px solid var(--tp-yellow); padding-top: 1.25rem; }
.tp-step__num { font-family: var(--tp-mono); font-size: .875rem; color: var(--tp-red); display: block; margin-bottom: .75rem; }
.tp-step h4 { margin-bottom: .5rem; }
.tp-step p { color: var(--tp-grey-text); font-size: 1rem; margin: 0; }
.tp-steps__loop { font-family: var(--tp-mono); font-size: .8125rem; text-transform: uppercase; color: var(--tp-red); margin-top: 2rem; }

/* Testimonials - static three-up in this preview */
.tp-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.tp-quote-card { margin: 0; border-left: 3px solid var(--tp-yellow); padding-left: 1.5rem; }
.tp-quote-card blockquote { margin: 0 0 1.25rem; font-size: 1.0625rem; line-height: 1.45; color: var(--tp-white); }
.tp-quote-card__name { display: block; font-family: var(--tp-display); text-transform: uppercase; font-size: 1.125rem; }
.tp-quote-card__role { display: block; font-family: var(--tp-mono); font-size: .8125rem; color: var(--tp-yellow); margin-top: .25rem; }

/* Centred mid-page CTA. A black band with yellow buttons - Cremarc's rule is yellow
   buttons on black, blue on white; a full yellow band inverted that and spent the brand's
   rarest colour on a background. */
.tp-cta-center { background: var(--tp-black); color: var(--tp-white); text-align: center; }
.tp-cta-center h2 { max-width: 20ch; margin-inline: auto; }
.tp-cta-center .tp-actions { justify-content: center; }
.tp-cta-center .tp-btn--secondary { color: var(--tp-yellow); }
.tp-cta-center .tp-btn--secondary:hover { background: var(--tp-yellow); color: var(--tp-black); }

/* Split with media on one side */
.tp-split--media { align-items: center; }
.tp-media-card { margin: 0; position: relative; box-shadow: var(--tp-shadow-card); }
.tp-media-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tp-media-card figcaption {
	position: absolute; left: 0; bottom: 0;
	background: var(--tp-yellow); color: var(--tp-black);
	font-family: var(--tp-mono); font-size: .75rem; text-transform: uppercase;
	padding: .4rem .75rem;
}

/* Outcome feature rows (the production page animates these on scroll) */
.tp-feature {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding-block: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid #D7D9D3;
}
.tp-feature:first-of-type { border-top: 0; }
.tp-feature--flip .tp-feature__media { order: -1; }
.tp-feature__copy p:not(.tp-eyebrow):last-child { color: var(--tp-grey-text); margin: 0; }
.tp-feature__media img { width: 100%; box-shadow: var(--tp-shadow-card); }
@media (max-width: 760px) { .tp-feature--flip .tp-feature__media { order: 0; } }

/* Value strip */
.tp-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.tp-value h4 { margin-bottom: .5rem; }
.tp-value p { color: var(--tp-grey-text); font-size: 1rem; margin: 0; }

/* Secondary buttons are outlined in Volt Yellow, so their label has to flip with the
   background: black on light sections, yellow on every dark one. Listing the dark
   contexts in a single place - rather than patching each one as it is noticed - is what
   stops an invisible label appearing again the next time a dark block is added. */
.tp-header .tp-btn--secondary,
.tp-hero .tp-btn--secondary,
.tp-section--dark .tp-btn--secondary { color: var(--tp-yellow); }

.tp-header .tp-btn--secondary:hover,
.tp-hero .tp-btn--secondary:hover,
.tp-section--dark .tp-btn--secondary:hover { background: var(--tp-yellow); color: var(--tp-black); }

/* The guide's H1 (180) is drawn against a four-word headline. The production headline is
   seven words, and at 180 it fills the viewport on its own and pushes the sub-copy and
   calls to action below the fold. The hero headline is capped here; the H1 token itself is
   unchanged for shorter headings. Worth confirming with Cremarc which they intend. */
.tp-hero h1 { font-size: clamp(2.5rem, 6.2vw, 5.5rem); max-width: 18ch; }

/* ==========================================================================
   Redline alignment (guide pages 2-3): header, footer, cards
   ========================================================================== */

/* Header: 108 deep, wordmark 216 wide, items 18px / 30 apart, CTAs 10 apart. */
.tp-header__inner { min-height: 108px; padding-block: 0; gap: var(--tp-col-gap); }
.tp-logo { width: 216px; font-size: 1.9rem; }
.tp-nav ul { gap: var(--tp-col-gap); }
.tp-nav a { font-size: 1.125rem; }
.tp-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: .45em; height: .45em;
	margin-left: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-.2em) rotate(45deg);
}
.tp-header__cta { gap: 10px; }
.tp-header__cta .tp-btn { font-size: 1.125rem; padding-inline: 26px; min-height: 48px; }

/* Sign post cards - the capability grid. 382 x 362, 1px outline, content vertically
   centred, 16px rhythm; Volt Yellow fill on hover. */
.tp-signpost {
	display: flex; flex-direction: column; justify-content: center; gap: 16px;
	min-height: 362px; padding: 40px 32px;
	border: 1px solid var(--tp-black);
	background: var(--tp-white); color: var(--tp-black);
	text-decoration: none;
	transition: background-color .15s ease, box-shadow .15s ease;
}
.tp-signpost__icon { width: 28px; height: 28px; color: var(--tp-blue); }
.tp-signpost h4 { margin: 0; }
.tp-signpost p { margin: 0; color: var(--tp-grey); font-size: 1rem; }
.tp-signpost:hover {
	background: var(--tp-yellow);
	box-shadow: 0 0 21px 7px rgba(123, 130, 55, .25);
}
.tp-signpost:hover p, .tp-signpost:hover .tp-signpost__icon { color: var(--tp-black); }
.tp-cards--signpost { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--tp-col-gap); }

/* Blog cards - case studies. 30px rhythm, heading to blue and image shadow on hover. */
.tp-blogcard { display: flex; flex-direction: column; gap: 30px; text-decoration: none; color: inherit; }
.tp-blogcard__media { aspect-ratio: 362 / 300; object-fit: cover; width: 100%; transition: box-shadow .15s ease; }
.tp-blogcard h4 { margin: 0; transition: color .15s ease; }
.tp-blogcard p { margin: 0; color: var(--tp-grey); font-size: 1rem; }
.tp-blogcard:hover h4 { color: var(--tp-blue); }
.tp-blogcard:hover .tp-blogcard__media { box-shadow: var(--tp-shadow-card); }
.tp-cards--blog { gap: var(--tp-col-gap); }

/* Outcomes cards - one per outcome, full width. Photograph centred with 98px side
   padding, 30 below it, eyebrow / 16 / H3 / 16 / body, flowing down. */
.tp-outcome {
	background: #EFF0EA;
	padding: 48px clamp(1.5rem, 6.8vw, 98px) 48px;
	display: grid; gap: 30px;
}
.tp-outcome__media { position: relative; }
.tp-outcome__media img { width: 100%; aspect-ratio: 950 / 534; object-fit: cover; }
.tp-outcome__copy { display: grid; gap: 16px; max-width: 72ch; }
.tp-outcome__copy .tp-eyebrow { margin: 0; }
.tp-outcome__copy h3, .tp-outcome__copy p { margin: 0; }
.tp-outcome__copy p:not(.tp-eyebrow) { color: var(--tp-grey); }
.tp-outcomes { display: grid; gap: var(--tp-col-gap); }

/* Footer - 525 deep, 80 top, four columns 30 apart, wordmark in the fourth. */
.tp-footer { padding-top: 80px; }
.tp-footer__grid { grid-template-columns: repeat(4, 1fr); gap: var(--tp-col-gap); }
.tp-footer__col h5 { font-size: 1.125rem; margin: 0 0 16px; }
.tp-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tp-footer__col a { font-size: 1rem; }
.tp-footer__brand { text-align: right; }
.tp-footer__brand .tp-logo { font-size: 2.25rem; width: auto; }
@media (max-width: 900px) {
	.tp-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.tp-footer__brand { text-align: left; grid-column: 1 / -1; }
}

/* ==========================================================================
   Primary navigation - dropdowns and mega panels
   Panel: Track Black with a Volt Yellow rule, column headings in Bebas yellow,
   links in Archivo 16px / 12px apart (the footer's rhythm).
   ========================================================================== */
.tp-nav > ul > li { position: relative; }
.tp-nav > ul > li > a { display: inline-flex; align-items: center; min-height: 108px; }
.tp-nav__toggle { display: none; }

/* .tp-nav ul is a flex row for the top level; the panel must not inherit that or its
   columns collapse into a single strip. */
.tp-nav .tp-nav__panel {
	display: block;
	position: absolute; top: 100%; left: 0;
	min-width: 260px;
	margin: 0; padding: 26px 30px 30px;
	list-style: none;
	background: var(--tp-black);
	border-top: 3px solid var(--tp-yellow);
	box-shadow: var(--tp-shadow-card);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
	z-index: 60;
}
.tp-nav > ul > li:hover > .tp-nav__panel,
.tp-nav > ul > li:focus-within > .tp-nav__panel,
.tp-nav > ul > li.is-open > .tp-nav__panel {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity .15s ease, transform .15s ease, visibility 0s;
}
.tp-nav__panel li { display: block; break-inside: avoid; }
.tp-nav__panel li + li { margin-top: 12px; }
.tp-nav__panel a {
	font-family: var(--tp-body);
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--tp-white);
	white-space: nowrap;
}
.tp-nav__panel a:hover { color: var(--tp-yellow); }
.tp-nav__panel .is-current > a { color: var(--tp-yellow); }

/* Mega panels: headings start columns. */
.tp-nav__mega > .tp-nav__panel { columns: 3; column-gap: var(--tp-col-gap); min-width: min(760px, calc(100vw - 32px)); }
/* Never wider than the window; assets/js/nav.js nudges a panel back inside if it would cross an edge. */
.tp-nav .tp-nav__panel { max-width: calc(100vw - 32px); }
.tp-nav__heading { break-before: column; }
.tp-nav__heading:first-child { break-before: auto; }
.tp-nav__heading > span {
	display: block;
	font-family: var(--tp-display);
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--tp-yellow);
}
.tp-nav__panel .tp-nav__heading + li { margin-top: 16px; }
.tp-nav__panel li + .tp-nav__heading { margin-top: 0; }

/* The last items sit near the right edge; open their panels leftwards so they stay on screen. */
.tp-nav > ul > li:nth-last-child(-n+2) > .tp-nav__panel { left: auto; right: 0; }

/* ----- Small screens: full-width accordion under the bar ----- */
@media (max-width: 900px) {
	.tp-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--tp-black); padding: .5rem var(--tp-gutter) 1.5rem; max-height: calc(100vh - 108px); overflow: auto; }
	.tp-nav.is-open { display: block; }
	.tp-nav ul { flex-direction: column; gap: 0; }
	.tp-nav > ul > li { border-top: 1px solid #2A2A2A; display: flex; flex-wrap: wrap; align-items: center; }
	.tp-nav > ul > li > a { min-height: 56px; flex: 1; }
	.tp-nav__toggle {
		display: block; width: 56px; height: 56px; background: none; border: 0; cursor: pointer; position: relative;
	}
	.tp-nav__toggle::after {
		content: ''; position: absolute; left: 50%; top: 50%;
		width: .5rem; height: .5rem; margin: -.4rem 0 0 -.25rem;
		border-right: 2px solid var(--tp-white); border-bottom: 2px solid var(--tp-white);
		transform: rotate(45deg); transition: transform .15s ease;
	}
	.is-open > .tp-nav__toggle::after { transform: rotate(-135deg); margin-top: -.1rem; }
	.tp-nav .menu-item-has-children > a::after { display: none; }
	.tp-nav .tp-nav__panel {
		position: static; display: none; width: 100%; min-width: 0;
		opacity: 1; visibility: visible; transform: none; transition: none;
		border-top: 0; box-shadow: none; padding: 0 0 1rem 1rem;
		/* No multicol at all on small screens: with columns:1, the headings' forced column
		   breaks pushed every group after the first into clipped overflow columns. */
		columns: auto !important; column-count: auto !important;
	}
	.tp-nav__heading { break-before: auto; margin-top: 16px; }
	.tp-nav > ul > li.is-open > .tp-nav__panel { display: block; }
	.tp-nav > ul > li:hover > .tp-nav__panel { display: none; }
	.tp-nav > ul > li.is-open:hover > .tp-nav__panel { display: block; }
	.tp-nav__panel a { white-space: normal; }
	.tp-burger { display: flex; margin-left: auto; }
	.tp-header__inner { position: relative; }
}

/* ==========================================================================
   Inner pages: hero, prose, FAQ, forms, and the content's own structures
   ========================================================================== */

/* Page hero: same treatment as the homepage hero, shorter. */
.tp-page-hero {
	position: relative; overflow: hidden;
	background: var(--tp-black) var(--tp-hero-img) center / cover no-repeat;
	color: var(--tp-white);
}
.tp-page-hero::after { content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.8) 55%, rgba(10,10,10,.45) 100%); }
.tp-page-hero.tp-hero--flat::after { display: none; }
.tp-page-hero__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5.5rem); }
.tp-page-hero h1 { font-size: var(--tp-h2); max-width: 22ch; margin-bottom: .35em; }
.tp-page-hero .tp-intro { max-width: 60ch; color: var(--tp-white); margin: 0; }

.tp-page__body { padding-block: var(--tp-section-y); }
.tp-prose--wide { max-width: none; }

/* Content structures carried in the page HTML */
.tp-prose .lead { font-size: var(--tp-intro); line-height: 1.1; letter-spacing: 0; color: var(--tp-black); }
.tp-prose .wp-block-image { margin-block: 2rem; }
.tp-prose .wp-block-image img { box-shadow: var(--tp-shadow-card); }
.tp-prose figcaption { font-family: var(--tp-mono); font-size: .8125rem; color: var(--tp-grey); margin-top: .5rem; }
.tp-prose .video-embed { aspect-ratio: 16 / 9; margin-block: 2rem; }
.tp-prose .video-embed iframe { width: 100%; height: 100%; }

/* Accordion used inside content (.usecase-*) and the page FAQ (details) share one look */
.tp-prose .usecase-item, .tp-faq__item { border-top: 1px solid var(--tp-black); }
.tp-prose .usecase-item:last-child, .tp-faq__item:last-child { border-bottom: 1px solid var(--tp-black); }
.tp-prose .usecase-toggle, .tp-faq__item summary {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	width: 100%; padding: 1.1rem 0; background: none; border: 0; cursor: pointer; text-align: left;
	font-family: var(--tp-display); font-size: var(--tp-h5); text-transform: uppercase; line-height: .86; letter-spacing: -.01em;
	color: var(--tp-black); list-style: none;
}
.tp-faq__item summary::-webkit-details-marker { display: none; }
.tp-prose .usecase-toggle::after, .tp-faq__item summary::after {
	content: ''; flex: none; width: .6rem; height: .6rem;
	border-right: 2px solid var(--tp-blue); border-bottom: 2px solid var(--tp-blue);
	transform: rotate(45deg); transition: transform .15s ease;
}
.tp-prose .usecase-item.is-open .usecase-toggle::after, .tp-faq__item[open] summary::after { transform: rotate(-135deg); }
.tp-prose .usecase-panel, .tp-faq__item > p { padding: 0 0 1.25rem; margin: 0; color: var(--tp-grey); max-width: 72ch; }
.tp-prose .usecase-panel[hidden] { display: none; }

/* Sitemap page */
.tp-prose .sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tp-col-gap); max-width: none; }
.tp-prose .sitemap-col h2, .tp-prose .sitemap-col h3 { font-size: var(--tp-h5); margin-top: 0; }
.tp-prose .sitemap-col ul { list-style: none; padding: 0; display: grid; gap: 12px; }

/* Help portals + contact cards (support / contact content) */
.tp-prose .help-portals { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--tp-col-gap); max-width: none; }
.tp-prose .portal-card, .tp-prose .contact-card, .tp-prose .region-box {
	display: flex; flex-direction: column; gap: 12px; padding: 32px; border: 1px solid var(--tp-black); text-decoration: none; color: inherit;
}
.tp-prose a.portal-card:hover { background: var(--tp-yellow); }
.tp-prose .portal-icon, .tp-prose .contact-icon { width: 28px; height: 28px; color: var(--tp-blue); }
.tp-prose .portal-arrow { font-family: var(--tp-display); text-transform: uppercase; }
.tp-prose .regions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--tp-col-gap); max-width: none; }
.tp-prose .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-prose .hero-badge { font-family: var(--tp-mono); font-size: .8125rem; text-transform: uppercase; padding: .35rem .6rem; border: 1px solid var(--tp-black); }

/* Lead form pages */
.tp-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .tp-form-layout { grid-template-columns: 1fr; } }
.tp-form { border: 1px solid var(--tp-black); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--tp-white); }
.tp-form h3 { margin-bottom: .5rem; }
.tp-form__intro { color: var(--tp-grey); margin-bottom: 1.5rem; }
.tp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .tp-form__row { grid-template-columns: 1fr; } }
.tp-form label { display: block; font-family: var(--tp-mono); font-size: .8125rem; text-transform: uppercase; margin-bottom: 16px; }
.tp-form label span { color: var(--tp-red); }
.tp-form input, .tp-form textarea {
	display: block; width: 100%; margin-top: 6px; padding: 0 14px; min-height: 48px;
	font: 1rem var(--tp-body); color: var(--tp-black); background: #fff;
	border: 1px solid var(--tp-black); border-radius: 0;
}
.tp-form textarea { padding: 12px 14px; min-height: 120px; resize: vertical; }
.tp-form input:focus-visible, .tp-form textarea:focus-visible { outline: 3px solid var(--tp-focus); outline-offset: 2px; }
.tp-form input[type="file"] { padding: 10px 14px; }
.tp-form .tp-btn { margin-top: .5rem; }
.tp-form__note { font-size: .875rem; color: var(--tp-grey); margin: 1rem 0 0; }
.tp-form__success { background: var(--tp-black); color: var(--tp-yellow); font-family: var(--tp-display); text-transform: uppercase; font-size: 1.25rem; padding: 1rem 1.25rem; margin-bottom: 2rem; }
.tp-checks--dark-text li { color: var(--tp-black); }
.tp-checks--dark-text li::before { border-color: var(--tp-blue); }

/* ==========================================================================
   Clients / Vision AI / Product Comparison components
   ========================================================================== */
.tp-signpost--static:hover { background: var(--tp-white); box-shadow: none; }
.tp-signpost--static:hover p, .tp-signpost--static:hover .tp-signpost__icon { color: inherit; }
.tp-signpost--static .tp-signpost__icon { color: var(--tp-blue); }
.tp-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: auto; padding-top: 8px; }
.tp-logo-row img { max-height: 26px; max-width: 110px; width: auto; filter: grayscale(1); opacity: .75; }
.tp-logo-row__text { font-family: var(--tp-mono); font-size: .75rem; text-transform: uppercase; border: 1px solid var(--tp-grey); padding: .25rem .5rem; }
.tp-cards--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tp-values--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tp-quote-card--single { max-width: 70ch; }
.tp-quote-card--single blockquote { font-size: var(--tp-intro); line-height: 1.3; }

/* With / against columns */
.tp-compare-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--tp-col-gap); }
.tp-compare-col { border-top: 3px solid var(--tp-yellow); padding-top: 1.25rem; }
.tp-compare-col:last-child { border-top-color: var(--tp-red); }
.tp-compare-col h4 { margin-bottom: 1rem; }
.tp-crosses { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.tp-crosses li { position: relative; padding-left: 1.9rem; color: var(--tp-black); }
.tp-crosses li::before, .tp-crosses li::after {
	content: ''; position: absolute; left: .35rem; top: .7em; width: .9rem; height: 2px; background: var(--tp-red);
	transform: rotate(45deg);
}
.tp-crosses li::after { transform: rotate(-45deg); }

/* Comparison table */
.tp-table-wrap { overflow-x: auto; border: 1px solid var(--tp-black); }
.tp-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tp-table th, .tp-table td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid #D7D9D3; vertical-align: top; }
.tp-table thead th { background: var(--tp-black); color: var(--tp-white); font-family: var(--tp-display); font-weight: 400; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .01em; position: sticky; top: 0; }
.tp-table thead th.is-tp { background: var(--tp-yellow); color: var(--tp-black); }
.tp-table tbody th { font-weight: 400; color: var(--tp-black); min-width: 220px; }
.tp-table td { text-align: center; }
.tp-table td.is-tp { background: rgba(255, 242, 0, .12); }
.tp-table__cat th { background: #EFF0EA; font-family: var(--tp-display); font-size: 1rem; text-transform: uppercase; letter-spacing: .01em; }
.tp-table__note { font-size: .875rem; color: var(--tp-grey); margin-top: 1rem; max-width: 90ch; }
.comp-icon { display: inline-block; font-family: var(--tp-mono); font-size: .8125rem; line-height: 1; padding: .3rem .45rem; min-width: 1.9rem; }
.comp-yes { color: var(--tp-black); background: var(--tp-yellow); font-weight: 700; }
.comp-no { color: var(--tp-white); background: var(--tp-red); }
.comp-pending { color: var(--tp-grey); border: 1px solid var(--tp-grey); }
.comp-baseline { color: var(--tp-grey); }
.comp-text-tp { color: var(--tp-black); background: rgba(255,242,0,.35); white-space: nowrap; }
.comp-text-alt { color: var(--tp-black); background: #EFF0EA; white-space: nowrap; }
.comp-text-red { color: var(--tp-white); background: var(--tp-red); white-space: nowrap; }

.tp-steps--reasons { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }


/* ==========================================================================
   Figma alignment (2026-10-12) - values read from the design file, sitewide
   ========================================================================== */

/* Buttons: 3px strokes, 48 tall, Bebas 26 labels on header and section CTAs. */
.tp-btn { border-width: 3px; font-size: 1.375rem; }
.tp-btn--blue-outline { background: transparent; color: var(--tp-blue); border: 2px solid var(--tp-blue); }
.tp-btn--blue-outline:hover { background: var(--tp-blue); color: var(--tp-white); }

/* Dark sections: section headings in Volt Yellow, eyebrows in Flash White (blue on light). */
.tp-section--dark h2, .tp-section--dark .tp-split h2 { color: var(--tp-yellow); }
.tp-section--dark .tp-eyebrow { color: var(--tp-white); }

/* Annotation motif: 3px stroke, 22px handles (from the design's vector). */
.tp-annotate { border-width: 3px; }
.tp-annotate::before, .tp-annotate::after, .tp-annotate__mid { width: 22px; height: 22px; }
.tp-annotate::before { top: -12px; left: -12px; box-shadow: calc(50% + 0px) 0 0 var(--tp-ann), calc(100% + 1px) 0 0 var(--tp-ann); }
.tp-annotate::after { bottom: -12px; left: -12px; box-shadow: calc(50% + 0px) 0 0 var(--tp-ann), calc(100% + 1px) 0 0 var(--tp-ann); }
.tp-annotate__mid { left: -12px; margin-top: -11px; box-shadow: calc(100% + 1px) 0 0 var(--tp-ann); }

/* Header: 1440 x 108, logo 216 wide, nav items Bebas 18 grouped centrally, CTAs 190 x 48. */
.tp-header__inner { justify-content: space-between; gap: 24px; }
.tp-logo { width: auto; color: var(--tp-white); }
.tp-logo svg { width: 216px; height: auto; display: block; }
.tp-header .tp-logo svg { width: 240px; } /* header wordmark enlarged from the 216px spec, signed off 2026-10-24; footer unchanged */
.tp-nav { margin-left: 0; }
.tp-header__cta .tp-btn { min-width: 190px; font-size: 1.375rem; }
.tp-header--overlay { position: absolute; left: 0; right: 0; top: 0; background: transparent; }
@media (max-width: 1240px) {
	.tp-logo svg { width: 170px; }
	.tp-header .tp-logo svg { width: 190px; }
	.tp-header__cta .tp-btn { min-width: 0; }
}

/* Footer: headings Bebas 26, links Archivo 18, wordmark top-right. */
.tp-footer__col h5 { font-size: 1.625rem; }
.tp-footer__col a { font-size: 1.125rem; }
.tp-footer__brand .tp-logo { justify-content: flex-end; }
.tp-footer__bottom { border-top-color: rgba(247, 247, 242, .4); font-size: 1rem; color: var(--tp-white); }

.tp-nav a { white-space: nowrap; }

/* Inner pages: the hero now lives inside the article, so the article itself carries no
   vertical padding (archives / 404 still use <main class="tp-page"> and keep theirs). */
article.tp-page { padding-block: 0; }
.tp-prose > :first-child { margin-top: 0; }

/* Content headings follow the design's hierarchy: section headings are H3 (68),
   card-level headings H4 (42). H2 (90) is reserved for call-to-action headlines. */
.tp-prose h2 { font-size: var(--tp-h3); }
.tp-prose h3 { font-size: var(--tp-h4); }
.tp-prose h4 { font-size: var(--tp-h5); }

/* Dropdowns open just under the labels, not from the bottom of the 108px bar - from the
   bar's bottom edge they sat ~45px below the label and, over the transparent homepage
   header, floated in the hero photo. The panel stays inside the item's 108px hover box,
   so moving the pointer from label to panel never crosses a dead zone. */
@media (min-width: 901px) {
	.tp-nav .tp-nav__panel { top: 81px; }
	.tp-nav > ul > li.menu-item-has-children > a::after { transition: transform .15s ease; }
	.tp-nav > ul > li:hover > a::after,
	.tp-nav > ul > li:focus-within > a::after,
	.tp-nav > ul > li.is-open > a::after { transform: translateY(.05em) rotate(-135deg); }
}