/*
Theme Name: tROAS.
Theme URI: https://getmoretroas.com
Author: Haris Abbas
Description: Portfolio theme for Get more tROAS. One page performance marketing portfolio with case studies, client logos, process, testimonials and an enquiry inbox. No plugins required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: troas
*/

/* ===========================================================================
   DESIGN VALUES
   These are the 25 settings from the design tool, locked to the values Haris
   picked. Each line notes what it was called there. Change a value here and it
   changes everywhere it is used.
   =========================================================================== */

:root {
	/* Brand */
	--c-a: #9BE7C4;              /* accentMint */
	--c-b: #A79BF7;              /* accentPeri */
	--c-base: #000000;           /* baseColor */
	--c-text: #FFFFFF;           /* textColor */
	--c-muted: #9AA1AB;          /* mutedColor */
	--base-rgb: 0 0 0;           /* baseColor as channels, for translucent overlays */
	--grad: linear-gradient(96deg, var(--c-a), var(--c-b));
	--grad-wide: linear-gradient(96deg, var(--c-a), var(--c-b), var(--c-a), var(--c-b));

	/* Hairlines. Two greys, deliberately not pure black. */
	--line: #1E222A;
	--line-2: #14171D;

	/* Type */
	--f-disp: 'Archivo', 'Hanken Grotesk', system-ui, sans-serif;   /* displayFont */
	--f-body: 'Space Grotesk', 'Archivo', system-ui, sans-serif;    /* bodyFont */
	--f-mono: 'JetBrains Mono', ui-monospace, monospace;            /* monoFont */
	--disp-track: -0.02em;       /* displayTracking */
	--disp-lead: 0.89;           /* displayLeading */
	--body-size: 17px;           /* bodySize */
	--hero-scale: 0.9;           /* heroScale */

	/* Layout */
	--maxw: 1440px;              /* maxWidth */
	--pad: 48px;
	--r: 1;                      /* rhythm: Standard. 0.72 tight, 1.45 cinematic */

	/* Motion. The script reads its own copy of these from functions.php. */
	--glow: 0.26;                /* glow */
	--ease: cubic-bezier(.16, 1, .3, 1);

	/* Section internals that change by screen size */
	--proof-cols: 5;
	--stack-cols: 2;
	--brand-w: 248px;
	--brand-h: 172px;
	--brand-pad: 30px 26px;
	--brand-scale: 1;
	--split: minmax(260px, 1fr) minmax(0, 1.7fr);
	--about-cols: minmax(0, .85fr) minmax(0, 1.15fr);
	--foot-cols: minmax(0, 1fr) minmax(0, 1fr);
	--gap-col: 80px;
	--gap-block: 78px;
	--case-cols: 60px minmax(0, 1fr) auto 46px;
	--case-detail: 60px minmax(0, 1.08fr) minmax(0, 1fr);
	--case-gap: 28px;
	--case-pad: 30px;
	--field-cols: 130px minmax(0, 1fr);
	--field-gap: 16px;
	--field-pad: 14px;
	--field-fs: 15px;
	--field-ipad: 4px 0;
	--sel-fs: 12.5px;
	--bio-cols: 118px minmax(0, 1fr);
	--bio-gap: 22px;
	--dot-pad: 16px 0;
	--chip-pad: 9px 18px;
	--stack-pad: 16px;
	--sig-h: 78vh;
	--sig-h2: 22vh;
	--band-fs: clamp(9px, .95vw, 13px);
	--hero-fs: clamp(52px, 8.4vw, 146px);
	--hero-sub-fs: calc(var(--body-size) + 4px);   /* desktop hero sub, 21px */
	--hero-gap: 34px;
	--hero-h: 100vh;
	--hero-min: 660px;
	--hero-inset: -4%;
	--hero-mask: none;
	--hero-scrim-op: 1;
	--menu-gap: 18px;
	--menu-ipad: 0;
}

/* ===========================================================================
   RESET AND BASE
   =========================================================================== */

* { box-sizing: border-box; }

html {
	background: var(--c-base);
	-webkit-text-size-adjust: 100%;
}

body.t-body {
	margin: 0;
	background: var(--c-base);
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: var(--body-size);
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }

a { color: var(--c-text); text-decoration: none; }
a:hover { color: var(--c-a); text-decoration: none; }

h1, h2, h3, h4 { color: var(--c-text); text-wrap: normal; }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	text-align: inherit;
}

input, select, textarea { font: inherit; color: inherit; }
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible { outline: none; box-shadow: none; }

::selection { background: var(--c-a); color: var(--c-base); }
:focus-visible { outline: 2px solid var(--c-a); outline-offset: 4px; }

.t-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 300;
	padding: 14px 20px;
	background: var(--c-a);
	color: var(--c-base);
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .14em;
}
.t-skip:focus { left: 12px; top: 12px; color: var(--c-base); }

.t-root { position: relative; }

.t-wrap {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--pad);
}

/* Shared small pieces ------------------------------------------------------ */

.t-eyebrow {
	margin: 0;
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .18em;
	color: var(--c-text);
}

.t-count {
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--c-muted);
}

.t-rule { height: 1px; background-image: var(--grad); }
.t-rule--full { width: 100%; margin-bottom: 26px; }
.t-rule--80 { width: 80px; margin-bottom: 26px; }

.t-h2 {
	margin: 0;
	font-family: var(--f-disp);
	font-weight: 900;
	font-size: clamp(34px, 3.6vw, 58px);
	line-height: var(--disp-lead);
	letter-spacing: var(--disp-track);
}

.t-linemask { display: block; overflow: hidden; padding-bottom: .04em; }
.t-line { display: block; }

/* Pill button with the fill that rises on hover */
.t-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 30px;
	border: 1px solid var(--c-a);
	border-radius: 99px;
	white-space: nowrap;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--c-a);
	transition: color .45s var(--ease);
}
.t-btn:hover { color: var(--c-base); }
.t-btn__fill {
	position: absolute;
	inset: 0;
	background: var(--c-a);
	transform: translateY(101%);
	transition: transform .55s var(--ease);
}
.t-btn__fill--grad { background: none; background-image: var(--grad); }
.t-btn:hover .t-btn__fill { transform: translateY(0); }
.t-btn__t { position: relative; }

.t-btn--li {
	padding: 16px 33px;
	border-color: var(--c-a);
	font-weight: 800;
	font-size: 13.5px;
	letter-spacing: .15em;
	transition: color .45s var(--ease), box-shadow .55s var(--ease);
}
.t-btn--li:hover { box-shadow: 0 0 42px -4px var(--c-a); }

/* Underlined text CTA. The tap area is grown with a pseudo element so the
   underline stays tight to the words. */
.t-ulink {
	position: relative;
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--c-text);
	border-bottom: 1px solid currentColor;
	padding-bottom: 5px;
	transition: color .4s, border-color .4s;
}
.t-ulink::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -11px;
	bottom: -11px;
}
.t-ulink:hover { color: var(--c-a); border-bottom-color: var(--c-a); }
.t-ulink--sm { align-self: flex-start; font-size: 11px; }

.t-ctarow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
}

/* Ambient glow orbs */
.t-glow {
	position: absolute;
	border-radius: 99px;
	mix-blend-mode: screen;
	opacity: var(--glow);
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.t-glow--hero {
	left: 52%; top: 44%; z-index: 2;
	width: min(1250px, 105vw); height: min(1250px, 105vw);
	background: radial-gradient(circle, var(--c-a) 0%, rgb(184 240 206 / .55) 26%, rgb(184 240 206 / 0) 66%);
}
.t-glow--proof {
	left: 50%; top: 40%;
	width: min(900px, 80vw); height: 520px;
	background: radial-gradient(circle, var(--c-a) 0%, rgb(184 240 206 / .5) 24%, rgb(184 240 206 / 0) 68%);
}
.t-glow--process {
	left: 50%; top: 50%;
	width: min(1000px, 85vw); height: min(1000px, 85vw);
	background: radial-gradient(circle, var(--c-a) 0%, rgb(184 240 206 / .5) 24%, rgb(184 240 206 / 0) 68%);
}
.t-glow--contact {
	left: 50%; top: 34%;
	width: min(1200px, 92vw); height: 700px;
	background: radial-gradient(circle, var(--c-a) 0%, rgb(184 240 206 / .5) 24%, rgb(184 240 206 / 0) 68%);
}
.t-glow--words {
	left: 26%; top: 46%;
	width: min(1050px, 88vw); height: min(760px, 70vw);
	background: radial-gradient(circle, var(--c-a) 0%, rgb(184 240 206 / .45) 26%, rgb(184 240 206 / 0) 70%);
}
.t-glow--words2 {
	left: 82%; top: 64%;
	width: min(780px, 70vw); height: min(620px, 58vw);
	background: radial-gradient(circle, var(--c-b) 0%, rgb(167 155 247 / .42) 28%, rgb(167 155 247 / 0) 70%);
}

@keyframes troas-bandroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes troas-breathe {
	0%, 100% { transform: translate(-50%, -50%) scale(.86); opacity: calc(var(--glow) * .3); }
	50% { transform: translate(-50%, -50%) scale(1.14); opacity: var(--glow); }
}
@keyframes troas-breathe-soft {
	0%, 100% { transform: translate(-50%, -50%) scale(.95); opacity: calc(var(--glow) * .62); }
	50% { transform: translate(-50%, -50%) scale(1.1); opacity: var(--glow); }
}
@keyframes troas-sweep { from { background-position: 260% 0; } to { background-position: -160% 0; } }
@keyframes troas-gshift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.t-glow--hero.is-breathing { animation: troas-breathe 4.7s ease-in-out infinite; }
.t-glow--words.is-breathing { animation: troas-breathe-soft 7.6s ease-in-out infinite; }
.t-glow--words2.is-breathing { animation: troas-breathe-soft 10s ease-in-out infinite -6s; }

/* Hide native scrollbars on the strips that drift or swipe */
[data-brandtrack]::-webkit-scrollbar,
[data-stacktrack]::-webkit-scrollbar,
[data-noscroll]::-webkit-scrollbar { width: 0; height: 0; display: none; }
[data-brandtrack], [data-stacktrack], [data-noscroll] { scrollbar-width: none; }

/* ===========================================================================
   PRELOADER
   =========================================================================== */

.t-pre {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--c-base);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(0);
	will-change: transform;
}
.t-pre.is-gone { display: none; }
.t-pre__mark {
	font-family: var(--f-disp);
	font-weight: 900;
	font-size: clamp(52px, 9vw, 132px);
	letter-spacing: -.045em;
	line-height: 1;
	background-image: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.t-pre__count {
	position: absolute;
	right: var(--pad);
	bottom: var(--pad);
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}
.t-pre__line {
	position: absolute;
	left: var(--pad);
	right: var(--pad);
	bottom: calc(var(--pad) + 34px);
	height: 1px;
	background: var(--line);
}
.t-pre__fill { height: 100%; width: 0%; background-image: var(--grad); }

/* ===========================================================================
   HEADER AND MENU
   =========================================================================== */

.t-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 0 var(--pad);
	height: 76px;
	border-bottom: 1px solid transparent;
	mix-blend-mode: difference;
	transition: background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
}
.t-nav.is-solid {
	mix-blend-mode: normal;
	background: rgb(var(--base-rgb) / .72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: var(--line);
}

.t-logo {
	font-family: var(--f-disp);
	font-weight: 900;
	/* Desktop only. The phone size is set back to 23px in the 899px block,
	   where the bar is shorter and the burger sits next to it. Half the height
	   of the 76px bar is about as far as this can go before the descender on
	   the mark starts crowding the bottom edge. */
	font-size: 38px;
	letter-spacing: -.04em;
	background-image: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.t-logo:hover { color: transparent; }

.t-navlinks {
	position: relative;
	display: flex;
	align-items: center;
	gap: 34px;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .16em;
}
.t-navlink {
	position: relative;
	white-space: nowrap;
	font-weight: 800;
	color: var(--c-text);
	opacity: .72;
	transition: color .4s, opacity .4s, letter-spacing .45s var(--ease);
}
.t-navlink:hover, .t-navlink.is-active { opacity: 1; }
.t-navlink:hover { color: var(--c-a); letter-spacing: .21em; }
.t-navlink__bar {
	position: absolute;
	left: 0; right: 0; bottom: -8px;
	height: 1px;
	background-image: var(--grad);
	box-shadow: 0 0 12px var(--c-a);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--ease);
}
.t-navlink:hover .t-navlink__bar,
.t-navlink.is-active .t-navlink__bar { transform: scaleX(1); }
.t-navlink__bar--pill { left: 20px; right: 20px; }

.t-navlink--pill {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border: 1px solid rgb(155 231 196 / .5);
	border-radius: 999px;
	font-weight: 900;
	color: var(--c-a);
	opacity: 1;
}
.t-navlink--pill:hover { border-color: var(--c-a); color: var(--c-base); }
.t-navlink__fillwrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 999px;
}
.t-navlink__fill {
	position: absolute;
	inset: 0;
	background-image: var(--grad);
	transform: translateY(101%);
	transition: transform .55s var(--ease);
}
.t-navlink--pill:hover .t-navlink__fill { transform: translateY(0); }
.t-navlink__t { position: relative; }

.t-navdot {
	position: absolute;
	left: 0; bottom: -11px;
	width: 5px; height: 5px;
	border-radius: 99px;
	background: var(--c-a);
	opacity: 0;
	transform: translateX(0);
}

.t-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	margin-right: -12px;
	cursor: pointer;
}
.t-burger__ico {
	display: block;
	width: 26px; height: 10px;
	border-top: 1.5px solid var(--c-text);
	border-bottom: 1.5px solid var(--c-text);
}

.t-menu {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: var(--c-base);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 96px var(--pad) 44px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--ease), visibility .4s;
}
.t-menu.is-open { opacity: 1; visibility: visible; }
.t-menu__close {
	position: absolute;
	top: 14px; right: 10px;
	width: 52px; height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-mono);
	font-size: 24px;
	line-height: 1;
	color: var(--c-text);
	cursor: pointer;
}
.t-menu__nav { display: flex; flex-direction: column; }
.t-menu__link {
	display: block;
	padding: 15px 0;
	border-bottom: 1px solid var(--line-2);
	font-family: var(--f-disp);
	font-weight: 900;
	font-size: clamp(28px, 8.4vw, 42px);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--c-text);
}
.t-menu__meta {
	display: flex;
	flex-direction: column;
	gap: var(--menu-gap);
	margin-top: 46px;
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .14em;
}
.t-menu__meta a { padding: var(--menu-ipad); color: var(--c-muted); }
.t-menu__meta a.t-menu__meta--a { color: var(--c-a); }

/* ===========================================================================
   01 HERO
   =========================================================================== */

.t-hero {
	position: relative;
	height: var(--hero-h);
	min-height: var(--hero-min);
	overflow: hidden;
	display: flex;
	align-items: center;
}
.t-hero__wrap {
	position: absolute;
	inset: var(--hero-inset);
	z-index: 0;
	-webkit-mask-image: var(--hero-mask);
	mask-image: var(--hero-mask);
	will-change: transform;
}
/* The photo is wrapped in a <picture> so phones can be served a tall crop.
   picture is inline by default, and it is the flex child on mobile, so it has to
   be told to fill the wrap or the hero collapses. */
.t-hero__wrap > picture {
	display: block;
	width: 100%;
	height: 100%;
}
.t-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
	filter: contrast(1.04) saturate(1.05);
}
.t-hero__tint {
	position: absolute;
	inset: 0;
	background-image: var(--grad);
	mix-blend-mode: color;
	opacity: .22;
}
.t-hero__fade { display: none; }
.t-hero__radial {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(ellipse 58% 56% at 30% 50%, rgb(var(--base-rgb) / .78) 0%, rgb(var(--base-rgb) / .5) 46%, rgb(var(--base-rgb) / 0) 80%);
}
.t-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: var(--hero-scrim-op);
	background:
		linear-gradient(90deg, var(--c-base) 0%, var(--c-base) 12%, rgb(var(--base-rgb) / .86) 30%, rgb(var(--base-rgb) / .3) 58%, rgb(var(--base-rgb) / .55) 86%, var(--c-base) 100%),
		linear-gradient(to bottom, rgb(var(--base-rgb) / .6) 0%, rgb(var(--base-rgb) / .1) 24%, rgb(var(--base-rgb) / .42) 52%, rgb(var(--base-rgb) / .86) 82%, var(--c-base) 100%);
}

/* Anchor targets. The nav is fixed and 76px tall, so a jump to #contact or
   #case-studies would otherwise put the top of the section underneath it.
   scroll-margin-top pushes the landing point clear. The span is a zero size
   marker, it must not take part in layout. */
.t-anchor {
	display: block;
	width: 0;
	height: 0;
}
#results, #process, #contact, #about, #services, #stack, #what-you-get, #faq, .t-anchor {
	scroll-margin-top: 92px;
}

.t-hero__content { position: relative; z-index: 3; }
.t-hero__eyebrow {
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .2em;
	color: var(--c-text);
	margin-bottom: var(--hero-gap);
	white-space: nowrap;
}
.t-hero__h1 {
	margin: 0;
	font-family: var(--f-disp);
	font-weight: 900;
	font-size: calc(var(--hero-fs) * var(--hero-scale));
	line-height: var(--disp-lead);
	letter-spacing: var(--disp-track);
	max-width: 16ch;
}
.t-hero__h1 .t-linemask { padding-bottom: .03em; }
.t-hero__sub {
	margin: var(--hero-gap) 0 0;
	max-width: 52ch;
	color: var(--c-muted);
	font-size: var(--hero-sub-fs);
	line-height: 1.6;
	text-wrap: pretty;
}
.t-hero .t-ctarow { margin-top: calc(var(--hero-gap) * 1.3); }

.t-band {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 3;
	border-top: 1px solid var(--line);
	background: linear-gradient(to top, rgb(var(--base-rgb) / .9), rgb(var(--base-rgb) / 0));
}
.t-band__inner {
	padding-top: 18px;
	padding-bottom: 18px;
	overflow: hidden;
	white-space: nowrap;
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: var(--band-fs);
	letter-spacing: .16em;
	color: var(--c-text);
}
.t-bandtrack {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.1vw, 20px);
	width: 100%;
	justify-content: space-between;
}
.t-bandgroup {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.1vw, 20px);
	flex: 1 1 auto;
	justify-content: space-between;
}
.t-bandgroup--dup { display: none; }
.t-band__sep { opacity: .4; }
/* The final separator is only there to make the loop seamless on a phone. */
.t-bandgroup > .t-band__sep:last-child { display: none; }

/* ===========================================================================
   02 PROOF
   =========================================================================== */

.t-proof {
	position: relative;
	padding: calc(var(--r) * 130px) 0 calc(var(--r) * 90px);
}
.t-proof .t-wrap { position: relative; }
.t-proofgrid {
	display: grid;
	grid-template-columns: repeat(var(--proof-cols), 1fr);
	gap: 1px;
	background: var(--line);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.t-proofcell { background: var(--c-base); padding: 44px 30px 40px; }
.t-proofcell:first-child { padding-left: 0; }
.t-proofcell:last-child { padding-right: 0; padding-left: 30px; }
.t-proofnum {
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: clamp(32px, 3.5vw, 60px);
	letter-spacing: -.045em;
	line-height: 1;
}
.t-prooflabel {
	margin-top: 16px;
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .05em;
	color: var(--c-muted);
}
.t-proofnote { margin: 26px 0 0; font-size: 14px; color: var(--c-muted); }

/* ===========================================================================
   CLIENT LOGOS
   =========================================================================== */

.t-brands { position: relative; padding: 0 0 calc(var(--r) * 92px); }
.t-brands__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px 24px;
	margin-bottom: 30px;
}
.t-brands__rail { position: relative; }
.t-brandtrack {
	display: flex;
	gap: 1px;
	background: var(--line);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: auto;
	scroll-snap-type: none;
}
.t-brandcell {
	flex: 0 0 var(--brand-w);
	background: var(--c-base);
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--brand-h);
	padding: var(--brand-pad);
	transition: background .4s ease;
}
.t-brandcell:hover { background: #0D1015; }
.t-brandcell img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	scale: var(--brand-scale);
}
.t-fade {
	position: absolute;
	top: 1px; bottom: 1px;
	width: 64px;
	pointer-events: none;
}
.t-fade--l { left: 0; background: linear-gradient(90deg, var(--c-base), rgb(var(--base-rgb) / 0)); }
.t-fade--r { right: 0; background: linear-gradient(270deg, var(--c-base), rgb(var(--base-rgb) / 0)); }
.t-brands__note { margin: 22px 0 0; font-size: 14px; color: var(--c-muted); }

/* ===========================================================================
   03 SERVICES
   =========================================================================== */

.t-services { position: relative; padding: calc(var(--r) * 150px) 0; }
.t-svc-grid {
	display: grid;
	grid-template-columns: var(--split);
	gap: var(--gap-col);
}
.t-svc-side { position: sticky; top: 150px; }
.t-svc-side .t-eyebrow { margin-bottom: 22px; }
.t-svc-side__p {
	margin: 26px 0 0;
	max-width: 34ch;
	color: var(--c-muted);
	font-size: 15px;
}
.t-svc-list { display: flex; flex-direction: column; gap: var(--gap-block); }
.t-svc { border-top: 1px solid var(--line); padding-top: 30px; }
.t-svc__n {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--c-a);
	margin-bottom: 22px;
}
.t-svc__t {
	margin: 0;
	font-family: var(--f-disp);
	font-weight: 800;
	font-size: clamp(26px, 2.9vw, 44px);
	line-height: 1.02;
	letter-spacing: var(--disp-track);
	max-width: 18ch;
}
.t-svc__b {
	margin: 22px 0 0;
	max-width: 46ch;
	color: var(--c-muted);
	text-wrap: pretty;
}

/* ===========================================================================
   04 RESULTS
   =========================================================================== */

.t-results { position: relative; padding: 0 0 calc(var(--r) * 130px); }

.t-sigwrap {
	position: relative;
	height: calc(var(--r) * var(--sig-h) + var(--sig-h2));
	pointer-events: none;
}
.t-sigsticky {
	position: sticky;
	top: 26vh;
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.t-sig {
	margin: 0;
	font-family: var(--f-disp);
	font-weight: 900;
	font-size: clamp(110px, 25vw, 440px);
	line-height: .8;
	letter-spacing: -.045em;
	color: var(--line-2);
	white-space: nowrap;
	will-change: transform;
}
.t-sig--about { font-size: clamp(96px, 21vw, 380px); }
.t-sigfg {
	position: relative;
	z-index: 2;
	margin-top: -30vh;
	background: linear-gradient(to bottom, rgb(var(--base-rgb) / 0) 0, var(--c-base) 120px);
	will-change: transform;
}

.t-res-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	padding-bottom: 26px;
}
.t-res-head__p { margin: 0; max-width: 44ch; color: var(--c-muted); }

.t-chips { display: flex; flex-wrap: wrap; gap: 9px; padding-bottom: 22px; }
.t-chip {
	padding: var(--chip-pad);
	border-radius: 99px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--c-muted);
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .14em;
	cursor: pointer;
	transition: background .4s var(--ease), color .35s, border-color .35s;
}
.t-chip:hover { color: var(--c-text); border-color: var(--c-muted); }
.t-chip.is-on {
	background: var(--c-a);
	border-color: var(--c-a);
	color: var(--c-base);
}

.t-rowlist { border-top: 1px solid var(--line); }
.t-row {
	border-bottom: 1px solid var(--line);
	transition: opacity .5s var(--ease);
}
.t-row.is-filtered { display: none; }
.t-rowlist.is-hovered .t-row { opacity: .35; }
.t-rowlist.is-hovered .t-row:hover { opacity: 1; }

.t-casebtn {
	position: relative;
	display: grid;
	grid-template-columns: var(--case-cols);
	align-items: center;
	gap: var(--case-gap);
	width: 100%;
	padding: var(--case-pad) 0;
	cursor: pointer;
}
.t-case__n {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--c-muted);
}
.t-case__v {
	font-family: var(--f-mono);
	font-size: clamp(11px, 1.05vw, 13px);
	letter-spacing: .16em;
	color: var(--c-text);
}
.t-case__m {
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 38px);
	letter-spacing: -.03em;
	text-align: right;
	white-space: nowrap;
}
.t-case__plus {
	justify-self: end;
	width: 28px; height: 28px;
	border: 1px solid var(--line);
	border-radius: 99px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-mono);
	font-size: 13px;
	color: var(--c-muted);
	transition: transform .55s var(--ease), border-color .4s, color .4s;
}
.t-row:hover .t-case__plus,
.t-row.is-open .t-case__plus { border-color: var(--c-a); color: var(--c-a); }
.t-row.is-open .t-case__plus { transform: rotate(135deg); }
.t-case__line {
	position: absolute;
	left: 0; bottom: -1px;
	height: 1px; width: 100%;
	background-image: var(--grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .7s var(--ease);
}
.t-row:hover .t-case__line { transform: scaleX(1); }

.t-case__grid {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .75s var(--ease);
}
.t-row.is-open .t-case__grid { grid-template-rows: 1fr; }
.t-case__clip { overflow: hidden; }
.t-case__detail {
	display: grid;
	grid-template-columns: var(--case-detail);
	gap: var(--case-gap) 48px;
	padding: 30px 0 62px;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--ease) .12s, transform .7s var(--ease) .12s;
}
.t-row.is-open .t-case__detail { opacity: 1; transform: translateY(0); }

.t-case__fig {
	margin: 0;
	position: relative;
	width: 100%;
	align-self: start;
	border: 1px solid var(--line);
	background: #101216;
}
.t-case__fig img { display: block; width: 100%; height: auto; }

.t-case__body { display: flex; flex-direction: column; gap: 26px; }
.t-case__p { margin: 0; color: var(--c-muted); text-wrap: pretty; }

.t-stats { display: flex; flex-direction: column; gap: 14px; }
.t-stat {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 10px;
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .08em;
}
.t-stat__k { color: var(--c-muted); }
.t-stat__v { color: var(--c-a); }
.t-platforms {
	margin-top: 6px;
	font-family: var(--f-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	color: var(--c-muted);
}

.t-ba { border-top: 1px solid var(--line); padding-top: 22px; }
.t-ba__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	font-family: var(--f-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	color: var(--c-muted);
	padding-bottom: 16px;
}
.t-ba__head--a { color: var(--c-a); }
.t-ba__rows { display: flex; flex-direction: column; gap: 12px; }
.t-ba__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 18px;
	border-bottom: 1px solid var(--line-2);
	padding-bottom: 10px;
}
.t-ba__k {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--c-muted);
}
.t-ba__vals {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	letter-spacing: .05em;
	white-space: nowrap;
}
.t-ba__b { color: #6E757F; }
.t-ba__arrow { color: #4A5058; }
.t-ba__a { font-weight: 700; color: var(--c-a); }
.t-ba__a.is-down { color: var(--c-muted); }
.t-ba__d { font-size: 11px; color: var(--c-a); opacity: .7; }
.t-ba__d.is-down { color: var(--c-muted); }
.t-ba__note {
	margin: 16px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--c-muted);
	text-wrap: pretty;
}

.t-results .t-ctarow { padding-top: 44px; }

/* ===========================================================================
   05 PROCESS
   =========================================================================== */

.t-process { position: relative; }
.t-hwrap { height: calc(var(--r) * 420vh); }
.t-hsticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.t-hbar {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: var(--line);
}
.t-hprog { height: 100%; width: 0%; background-image: var(--grad); }
.t-process__label {
	position: absolute;
	top: 88px;
	left: var(--pad);
}
.t-htrack {
	display: flex;
	align-items: center;
	padding-left: var(--pad);
	will-change: transform;
}
.t-stage { flex: 0 0 auto; width: min(620px, 72vw); padding-right: 110px; }
.t-stage__n {
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: clamp(70px, 9vw, 150px);
	line-height: .9;
	letter-spacing: -.05em;
	background-image: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.t-stage__t {
	margin: 18px 0 0;
	font-family: var(--f-disp);
	font-weight: 900;
	font-size: clamp(34px, 4vw, 66px);
	line-height: 1;
	letter-spacing: var(--disp-track);
}
.t-stage__rule {
	width: 64px; height: 1px;
	background-image: var(--grad);
	margin: 26px 0;
}
.t-stage__b { margin: 0; max-width: 40ch; color: var(--c-muted); text-wrap: pretty; }

.t-proc-m { display: none; padding: calc(var(--r) * 110px) var(--pad); }
.t-proc-m__label { margin-bottom: 40px; }
.t-proc-m__list { display: flex; flex-direction: column; gap: 64px; }
.t-proc-m__item { border-top: 1px solid var(--line); padding-top: 24px; }
.t-stage__n--m { font-size: 54px; }
.t-stage__t--m { margin-top: 12px; font-size: 32px; }
.t-stage__b--m { margin-top: 16px; }

/* ===========================================================================
   06 ABOUT
   =========================================================================== */

.t-about {
	position: relative;
	padding: calc(var(--r) * 90px) 0 calc(var(--r) * 130px);
}
.t-about-grid {
	display: grid;
	grid-template-columns: var(--about-cols);
	gap: var(--gap-col);
	align-items: center;
}
.t-portrait-wrap { position: relative; will-change: transform; }
.t-portrait {
	width: 100%;
	display: block;
	filter: grayscale(1) contrast(1.08) brightness(.96);
}
.t-portrait-vig {
	position: absolute;
	inset: -1px;
	pointer-events: none;
	background: radial-gradient(ellipse 72% 74% at 50% 42%, rgb(var(--base-rgb) / 0) 42%, rgb(var(--base-rgb) / .72) 76%, var(--c-base) 100%);
}
.t-about__label { margin-bottom: 30px; }
.t-about-lead {
	margin: 0;
	font-size: calc(var(--body-size) + 4px);
	line-height: 1.5;
	color: var(--c-text);
	max-width: 44ch;
	text-wrap: pretty;
}
.t-about-p {
	margin: 26px 0 0;
	max-width: 46ch;
	color: var(--c-muted);
	text-wrap: pretty;
}
.t-biolist { margin-top: 52px; border-top: 1px solid var(--line); }
.t-bio {
	display: grid;
	grid-template-columns: var(--bio-cols);
	gap: var(--bio-gap);
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--f-body);
}
.t-bio__k {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .09em;
	color: var(--c-a);
}
.t-bio__v { font-size: 16px; line-height: 1.45; color: var(--c-muted); }

/* ===========================================================================
   07 TESTIMONIALS
   =========================================================================== */

.t-tst {
	position: relative;
	overflow: hidden;
	padding: calc(var(--r) * 120px) 0;
	border-top: 1px solid var(--line-2);
}
.t-tst .t-wrap { position: relative; }
.t-tst__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: 52px;
}
.t-tst__stage { position: relative; display: grid; padding: 0 0 8px; }
.t-quote-fig {
	grid-area: 1 / 1;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	opacity: 0;
	transform: translateY(28px);
	pointer-events: none;
	transition: opacity .75s var(--ease), transform .85s var(--ease);
}
.t-quote-fig.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.t-stars { display: flex; gap: 8px; font-size: 16px; line-height: 1; color: var(--c-a); }
.t-quote {
	margin: 0;
	font-family: var(--f-disp);
	font-weight: 600;
	font-size: clamp(26px, 3.3vw, 52px);
	line-height: 1.16;
	letter-spacing: -.03em;
	color: var(--c-text);
	max-width: 20ch;
	text-wrap: pretty;
}
.t-qcap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .14em;
}
.t-qwho {
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 700;
	color: var(--c-text);
}
.t-qwho__dash { width: 26px; height: 1px; background-image: var(--grad); }
.t-qrole { color: var(--c-muted); }

.t-tst__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	margin-top: 54px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
}
.t-dots { display: flex; align-items: center; gap: 10px; }
.t-dot {
	display: flex;
	align-items: center;
	padding: var(--dot-pad);
	cursor: pointer;
}
.t-dot span {
	display: block;
	height: 3px;
	width: 14px;
	border-radius: 99px;
	background: var(--line);
	transition: width .6s var(--ease), background-image .5s;
}
.t-dot.is-on span { width: 48px; background-image: var(--grad); }
.t-arrows { display: flex; align-items: center; gap: 12px; }
.t-arrow {
	width: 46px; height: 46px;
	border: 1px solid var(--line);
	border-radius: 99px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-mono);
	font-size: 15px;
	color: var(--c-muted);
	cursor: pointer;
	transition: border-color .4s, color .4s;
}
.t-arrow:hover { border-color: var(--c-a); color: var(--c-a); }

/* ===========================================================================
   08 STACK
   =========================================================================== */

.t-stack { padding: calc(var(--r) * 110px) 0; }
.t-stack__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: 44px;
}
.t-stacklist {
	display: grid;
	grid-template-columns: repeat(var(--stack-cols), minmax(0, 1fr));
	gap: 0 64px;
	align-items: start;
	border-top: 1px solid var(--line);
}
.t-stackrow {
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	opacity: 1;
	transition: opacity .35s ease;
}
.t-stacklist.is-hot .t-stackrow { opacity: .4; }
.t-stacklist.is-hot .t-stackrow.is-on { opacity: 1; }
.t-stackrow__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: var(--stack-pad) 0;
	padding-left: 0;
	transition: padding-left .45s var(--ease);
}
.t-stackrow.is-on .t-stackrow__top { padding-left: 14px; }
.t-stack__name {
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .13em;
	color: var(--c-text);
}
.t-stack__group {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--c-a);
	opacity: 0;
	transition: opacity .35s ease;
}
.t-stackrow.is-on .t-stack__group { opacity: 1; }
.t-stack__grid {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .6s var(--ease);
}
.t-stackrow.is-on .t-stack__grid { grid-template-rows: 1fr; }
.t-stack__clip { overflow: hidden; }
.t-stack__noterow {
	display: flex;
	gap: 16px;
	padding: 0 0 20px;
	padding-left: 0;
	opacity: 0;
	transition: opacity .5s ease .1s, padding-left .45s var(--ease);
}
.t-stackrow.is-on .t-stack__noterow { opacity: 1; padding-left: 14px; }
.t-stack__bar { width: 2px; align-self: stretch; background-image: var(--grad); }
.t-stack__note {
	font-family: var(--f-disp);
	font-weight: 600;
	font-size: clamp(19px, 1.5vw, 25px);
	line-height: 1.2;
	letter-spacing: -.025em;
	color: var(--c-text);
	max-width: 26ch;
	text-wrap: pretty;
}

.t-stacktrack { display: none; }
.t-stackcard {
	flex: 0 0 232px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 20px 18px 22px;
	border: 1px solid var(--line);
	background: linear-gradient(180deg, rgb(155 231 196 / .06), rgb(var(--base-rgb) / 0) 62%);
}
.t-stackcard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.t-stackcard__group {
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--c-a);
}
.t-stackcard__dash { width: 22px; height: 1px; background-image: var(--grad); }
.t-stackcard__name {
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .12em;
	color: var(--c-text);
	text-wrap: pretty;
}
.t-stackcard__note {
	font-family: var(--f-disp);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.26;
	letter-spacing: -.02em;
	color: var(--c-muted);
	text-wrap: pretty;
}

/* ===========================================================================
   09 CONTACT
   =========================================================================== */

.t-contact {
	position: relative;
	padding: calc(var(--r) * 120px) 0 40px;
	overflow: hidden;
}
.t-contact .t-wrap { position: relative; }
.t-contact__h2 {
	margin: 0;
	font-family: var(--f-disp);
	font-weight: 900;
	font-size: clamp(42px, 11.5vw, 210px);
	line-height: .86;
	letter-spacing: -.045em;
	background-image: var(--grad-wide);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: troas-gshift 12s ease-in-out infinite;
}
.t-contact-grid {
	display: grid;
	grid-template-columns: var(--foot-cols);
	gap: var(--gap-col);
	margin-top: 70px;
	align-items: start;
}
.t-contact-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	margin: 0 0 4px;
}
.t-copybtn {
	position: relative;
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .03em;
	color: var(--c-text);
	border-bottom: 1px solid var(--line);
	padding-bottom: 5px;
	cursor: pointer;
	transition: color .4s var(--ease), border-bottom-color .4s, letter-spacing .5s var(--ease);
}
.t-copybtn::before {
	content: '';
	position: absolute;
	left: 0; right: 0;
	top: -11px; bottom: -11px;
}
.t-copybtn:hover { color: var(--c-a); border-bottom-color: var(--c-a); letter-spacing: .06em; }

.t-teardown-label {
	margin: 40px 0 0;
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--c-a);
}
.t-teardown-p {
	margin: 16px 0 0;
	font-size: calc(var(--body-size) + 3px);
	color: var(--c-text);
	max-width: 40ch;
	line-height: 1.5;
	text-wrap: pretty;
}
.t-teardown-p2 {
	margin: 16px 0 0;
	font-size: var(--body-size);
	color: var(--c-muted);
	max-width: 44ch;
	line-height: 1.6;
	text-wrap: pretty;
}
.t-li-wrap { display: flex; margin-top: 34px; }

.t-form { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.t-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.t-form-err {
	margin: 14px 0 0;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--c-a);
}
.t-field {
	display: grid;
	grid-template-columns: var(--field-cols);
	align-items: center;
	gap: var(--field-gap);
	border-bottom: 1px solid var(--line);
	padding: var(--field-pad) 0;
	color: var(--c-text);
	transition: background .45s var(--ease), border-bottom-color .4s, color .4s, padding-left .5s var(--ease);
}
.t-field:hover {
	background: linear-gradient(90deg, rgb(155 231 196 / .10), rgb(167 155 247 / .05) 55%, rgb(0 0 0 / 0));
	border-bottom-color: var(--c-a);
	color: var(--c-a);
	padding-left: 14px;
}
.t-field__k {
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .16em;
	color: inherit;
}
.t-field input {
	background: none;
	border: 0;
	outline: none;
	padding: var(--field-ipad);
	font-size: var(--field-fs);
	color: inherit;
}
.t-field select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	background: transparent;
	border: 0;
	outline: none;
	padding: 4px 22px 4px 0;
	font-family: var(--f-mono);
	font-size: var(--sel-fs);
	letter-spacing: .1em;
	color: inherit;
	cursor: pointer;
}
.t-field select option { background: #101216; color: var(--c-text); }
.t-submit {
	position: relative;
	align-self: flex-start;
	margin-top: 22px;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--c-a);
	border-bottom: 1px solid var(--c-a);
	padding-bottom: 6px;
	cursor: pointer;
}
.t-submit::before {
	content: '';
	position: absolute;
	left: 0; right: 0;
	top: -11px; bottom: -11px;
}

.t-form-done { border-top: 1px solid var(--line); padding-top: 26px; }
.t-form-done__k {
	margin: 0;
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--c-a);
}
.t-form-done__t {
	margin: 14px 0 0;
	max-width: 40ch;
	color: var(--c-text);
	line-height: 1.5;
	text-wrap: pretty;
}

.t-footmeta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 30px;
	margin-top: 110px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--c-muted);
}
.t-clock { font-variant-numeric: tabular-nums; }

/* ===========================================================================
   INNER PAGES: blog, single case study, 404
   =========================================================================== */

.t-page { padding: calc(var(--r) * 170px) 0 calc(var(--r) * 120px); }
/* A section page opens with a short lead and then hands over to a full width
   section, so it does not want the closing space a standalone page needs. */
.t-page--lead { padding-bottom: calc(var(--r) * 34px); }
.t-page--lead .t-page__head { margin-bottom: 0; }
.t-page--lead .t-article { margin-top: 24px; }
/* The section number is part of the one page running order, so it is dropped
   when the same section is used as a page in its own right. */
.t-sectionpage .t-process__label { display: none; }
.t-page__head { max-width: 62ch; margin-bottom: 62px; }
.t-page__kicker { margin-bottom: 22px; }
.t-page__h1 {
	margin: 0;
	font-family: var(--f-disp);
	font-weight: 900;
	font-size: clamp(38px, 6vw, 92px);
	line-height: var(--disp-lead);
	letter-spacing: var(--disp-track);
	/* Last resort only. A word that still cannot fit breaks rather than
	   painting itself over whatever sits in the next column. */
	overflow-wrap: break-word;
}
.t-page__sub { margin: 26px 0 0; color: var(--c-muted); max-width: 52ch; text-wrap: pretty; }

.t-postlist { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.t-postcard {
	background: var(--c-base);
	padding: 34px 0;
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 28px;
	align-items: baseline;
	transition: background .4s ease;
}
.t-postcard:hover { background: #0D1015; }
.t-postcard__date {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--c-muted);
}
.t-postcard__t {
	margin: 0;
	font-family: var(--f-disp);
	font-weight: 800;
	font-size: clamp(22px, 2.4vw, 34px);
	line-height: 1.1;
	letter-spacing: var(--disp-track);
}
.t-postcard__x { margin: 14px 0 0; color: var(--c-muted); max-width: 60ch; }

.t-article { max-width: 74ch; }
.t-article p, .t-article ul, .t-article ol, .t-article blockquote { color: var(--c-muted); }
.t-article h2, .t-article h3 {
	font-family: var(--f-disp);
	letter-spacing: var(--disp-track);
	margin-top: 2em;
}
.t-article a { color: var(--c-a); border-bottom: 1px solid rgb(155 231 196 / .4); }
.t-article img { height: auto; }
.t-article blockquote {
	margin: 2em 0;
	padding-left: 22px;
	border-left: 2px solid var(--c-a);
	font-family: var(--f-disp);
	font-size: 22px;
	color: var(--c-text);
}

.t-casehead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--gap-col);
	align-items: end;
	padding-bottom: 44px;
	border-bottom: 1px solid var(--line);
}
/* The case study h1 is the post title, which the importer builds as the
   vertical plus the metric, so it is a far longer string than the short
   page titles .t-page__h1 was sized for. At the shared 92px a single word
   like CONVERSIONS or SWITZERLAND measures wider than the 632px column and
   paints itself across the metric beside it. Measured on the live page:
   734px of word in a 632px column, 22px of it landing on the metric, and it
   overflowed at every width from 1180px (where the two columns start) up.
   Both strings cannot be 92px side by side, and the metric is the number the
   page is built to show, so the heading is the one that gives way. */
.t-casehead .t-page__h1 { font-size: clamp(30px, 3.6vw, 54px); }
.t-casehead__metric {
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: clamp(38px, 6vw, 92px);
	letter-spacing: -.04em;
	line-height: 1;
	background-image: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.t-casebody {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--gap-col);
	padding-top: 52px;
	align-items: start;
}
.t-backlink { margin-top: 70px; display: flex; }

.t-pager {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 70px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .14em;
}

/* ===========================================================================
   06 WHAT YOU GET
   Two columns. The right hand one is deliberately quieter than the left: it is
   there to be read second, and it must never look like the offer.
   =========================================================================== */

.t-deliver { padding: calc(var(--r) * 120px) 0; }
.t-deliver__head { max-width: 760px; margin-bottom: calc(var(--r) * 62px); }
/* The eyebrow sets its own space everywhere else on the site (22px in services,
   30px in about). These two sections were relying on .t-eyebrow's margin: 0 and
   so had the number sitting directly on the headline. */
.t-deliver__head .t-eyebrow,
.t-faq__head .t-eyebrow { display: block; margin-bottom: 22px; }
.t-deliver__lead {
	margin-top: 26px;
	font-size: calc(var(--body-size) + 2px);
	line-height: 1.6;
	color: var(--c-muted);
	max-width: 58ch;
}
.t-deliver__cols {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 0 72px;
	align-items: start;
}
.t-deliver__col--not { border-left: 1px solid var(--line); padding-left: 72px; }
.t-deliver__label {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--c-a);
	margin-bottom: 30px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.t-deliver__label--not { color: var(--c-muted); }

.t-dlist { list-style: none; margin: 0; padding: 0; }
.t-dlist__i {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 0 16px;
	padding: 22px 0;
	border-bottom: 1px solid var(--line-2);
}
.t-dlist__i:last-child { border-bottom: 0; }
/* The glyph is inline SVG from troas_mark(). The ring is still CSS, because a
   circle is the one shape a border draws correctly. Grid centres the glyph
   rather than the old hand-picked left/top offsets, which is what had it
   sitting off centre. */
.t-dlist__mark {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 1px solid var(--line);
	border-radius: 50%;
}
.t-dlist__svg { display: block; width: 18px; height: 18px; }
.t-dlist__mark--yes {
	border-color: color-mix(in srgb, var(--c-a) 45%, transparent);
	color: var(--c-a);
}
.t-dlist__mark--no { color: var(--c-muted); opacity: .75; }
.t-dlist__k {
	display: block;
	font-family: var(--f-mono);
	/* Word labels are 700 across the site (.t-eyebrow, .t-count, the section
	   labels above). This one was 400, which is the weight reserved for
	   numerals and data, and it read as unstyled next to them. */
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .16em;
	margin-bottom: 8px;
}
.t-dlist--not .t-dlist__k { color: var(--c-muted); }
.t-dlist__v {
	display: block;
	font-size: calc(var(--body-size) - 1px);
	line-height: 1.62;
	color: var(--c-muted);
}
.t-dlist--not .t-dlist__v { opacity: .82; }

/* ===========================================================================
   10 FAQ
   Native <details>, so it works with no JavaScript, answers stay findable with
   ctrl+F while closed, and the keyboard behaviour is the browser's own.
   =========================================================================== */

/* One number for the number column, so the answer indent cannot drift away from
   the question again. The answer has to clear the column *and* the grid gap:
   it was set to the column alone, which left every answer 10px to the left of
   the question it belongs to. */
.t-faq { --faq-n: 62px; --faq-gap: 10px; padding: calc(var(--r) * 110px) 0 calc(var(--r) * 130px); }
.t-faq__head { max-width: 760px; margin-bottom: calc(var(--r) * 54px); }
.t-faq__lead {
	margin-top: 26px;
	font-size: calc(var(--body-size) + 1px);
	line-height: 1.6;
	color: var(--c-muted);
	max-width: 54ch;
}
.t-faq__list { border-top: 1px solid var(--line); }
.t-faq__i { border-bottom: 1px solid var(--line); }
.t-faq__q {
	display: grid;
	grid-template-columns: var(--faq-n) minmax(0, 1fr) 30px;
	align-items: baseline;
	gap: 0 var(--faq-gap);
	padding: 30px 0;
	cursor: pointer;
	list-style: none;
	transition: color .35s ease;
}
.t-faq__q::-webkit-details-marker { display: none; }
.t-faq__q:hover { color: var(--c-a); }
.t-faq__q:focus-visible { outline: 1px solid var(--c-a); outline-offset: 6px; }
.t-faq__n {
	font-family: var(--f-mono);
	font-size: 12px;
	color: var(--c-muted);
	/* .14em to match the case study row numbers, which are the same thing. */
	letter-spacing: .14em;
}
.t-faq__qt {
	font-family: var(--f-disp);
	/* This was the only element on the site setting the display face at 400.
	   Everything else runs 900 (h1, h2), 800 (service titles) or 600 (pull
	   quotes and notes), and Archivo at 400 has none of that character, so a
	   question read as unstyled browser text rather than as a heading. 700
	   puts it above the 600 secondary voice without competing with the 58px
	   section headings above it. */
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 27px);
	letter-spacing: var(--disp-track);
	line-height: 1.25;
}
.t-faq__ico { position: relative; width: 14px; height: 14px; justify-self: end; align-self: center; }
.t-faq__ico::before,
.t-faq__ico::after {
	content: '';
	position: absolute;
	/* top:50% put the 1px bar a half pixel below the middle of its own box.
	   Centre it on the line instead of hanging it off the line. */
	top: 50%;
	left: 0;
	right: 0;
	margin-top: -.5px;
	height: 1px;
	background: currentColor;
	transition: transform .4s var(--ease), opacity .3s ease;
}
.t-faq__ico::after { transform: rotate(90deg); }
.t-faq__i[open] .t-faq__ico::after { transform: rotate(0deg); opacity: 0; }
.t-faq__a {
	padding: 0 30px 34px calc(var(--faq-n) + var(--faq-gap));
	max-width: 68ch;
	font-size: calc(var(--body-size) - 0.5px);
	line-height: 1.68;
	color: var(--c-muted);
}
.t-faq__a p { margin: 0; }

/* Animated open, where the browser can do it. Older engines ignore the whole
   block and snap open instead, which is a perfectly good fallback. */
@supports (interpolate-size: allow-keywords) {
	.t-faq__i { interpolate-size: allow-keywords; }
	.t-faq__i::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: block-size .45s var(--ease), opacity .35s ease, content-visibility .45s allow-discrete;
		transition-behavior: allow-discrete;
	}
	.t-faq__i[open]::details-content { block-size: auto; opacity: 1; }
}

/* ===========================================================================
   CASE STUDY PAGE, STICKY EVIDENCE
   The screenshot holds still while the analysis scrolls past it, so the numbers
   being described stay on screen while you read about them. Pure CSS, and it
   unsticks itself at the width where the two columns become one.
   =========================================================================== */

.t-casesticky { position: sticky; top: 112px; align-self: start; }
.t-casesticky__cap {
	margin-top: 14px;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--c-muted);
	opacity: .75;
}

/* ===========================================================================
   AVAILABILITY STRIP
   =========================================================================== */

.t-slots {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 18px 10px 14px;
	margin-bottom: 30px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .16em;
}
/* Word label, so 700 like every other mono label on the site. */
.t-slots__k { font-weight: 700; }
.t-slots__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-a);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-a) 60%, transparent);
	animation: t-pulse 2.6s var(--ease) infinite;
}
@keyframes t-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-a) 55%, transparent); }
	70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c-a) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-a) 0%, transparent); }
}
/* This was Space Grotesk at 13px sitting inside a 12px mono pill: two
   typefaces, two tracking values and two x-heights inside one 40px chip, which
   is what made it read as generic. It is one voice now, and the second half
   stays subordinate on colour and weight rather than on typeface. */
.t-slots__v {
	color: var(--c-muted);
	font-weight: 400;
	letter-spacing: .1em;
}

/* ===========================================================================
   SCROLL PROGRESS
   A hairline across the bottom of the fixed bar. Written by the one rAF loop
   in troas.js, so it costs no observer of its own.
   =========================================================================== */

.t-nav__prog {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--grad);
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: .9;
	pointer-events: none;
}

/* ===========================================================================
   PAGE TRANSITIONS
   One rule. Browsers without cross-document view transitions ignore it and
   navigate the way they always did.
   =========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: t-vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: t-vt-in .42s var(--ease) both; }
@keyframes t-vt-out { to { opacity: 0; } }
@keyframes t-vt-in { from { opacity: 0; } }

/* ===========================================================================
   MEDIUM SCREENS
   =========================================================================== */

@media (max-width: 1179px) {
	:root {
		--pad: 34px;
		--proof-cols: 3;
		--brand-w: 216px;
		--case-detail: 24px minmax(0, 1fr) minmax(0, 1fr);
	}
	.t-postcard { grid-template-columns: 120px minmax(0, 1fr); }
	.t-casehead, .t-casebody { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.t-casesticky { position: static; }
	.t-deliver__cols { gap: 0 44px; }
	.t-deliver__col--not { padding-left: 44px; }
}

/* ===========================================================================
   PHONES AND SMALL TABLETS
   Everything below 900px. Matches the mobile passes signed off in August.
   =========================================================================== */

@media (max-width: 899px) {
	:root {
		--pad: 22px;
		--r: 0.66;
		--proof-cols: 2;
		--stack-cols: 1;
		--brand-w: 132px;
		--brand-h: 120px;
		--brand-pad: 20px 16px;
		--brand-scale: .72;
		--split: 1fr;
		--about-cols: 1fr;
		--foot-cols: 1fr;
		--gap-col: 44px;
		--gap-block: 56px;
		--case-cols: 40px minmax(0, 1fr) 26px;
		--case-detail: 1fr;
		--case-gap: 14px;
		--case-pad: 22px;
		--chip-pad: 13px 18px;
		--stack-pad: 18px;
		--field-cols: minmax(0, 1fr);
		--field-gap: 5px;
		--field-pad: 13px;
		--field-fs: 16px;          /* 16px stops iOS zooming the page on focus */
		--field-ipad: 12px 0;
		--sel-fs: 16px;
		--bio-cols: minmax(0, 1fr);
		--bio-gap: 6px;
		--dot-pad: 20px 5px;
		--sig-h: 34vh;
		--sig-h2: 14vh;
		--band-fs: 11px;
		--hero-fs: clamp(30px, 9.2vw, 48px);
		--hero-sub-fs: 15.5px;
		--hero-gap: 20px;
		--hero-h: 100svh;
		--hero-min: 540px;
		--hero-inset: 0;
		--hero-scrim-op: .8;
		--hero-mask: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .55) 9%, #000 24%, #000 72%, rgb(0 0 0 / .5) 90%, rgb(0 0 0 / 0) 100%);
		--menu-gap: 4px;
		--menu-ipad: 13px 0;
	}

	.t-navlinks { display: none; }
	.t-burger { display: flex; }
	.t-logo { font-size: 28px; }

	/* The sign off headline carries the whole contact screen on a phone, where
	   there is no second column next to it, so it is scaled up past the shared
	   clamp rather than left at the desktop curve. */
	.t-contact__h2 { font-size: clamp(52px, 15vw, 92px); }

	/* Hero photo fills the section and fades out top and bottom.
	   The photo is oversized and the wrap clips it, so the script can drift it
	   around inside a window that never moves. Moving the wrap instead would
	   drag the mask with it and the top and bottom fades would leave the
	   screen. The scale is here rather than in the script so the framing is
	   identical when motion is reduced and nothing animates at all. */
	.t-hero__wrap { display: flex; align-items: center; overflow: hidden; }
	.t-hero__img { transform: scale(1.18); will-change: transform; }
	.t-hero__eyebrow-a { display: none; }

	/* The tools strip becomes a real marquee instead of being cut off. */
	.t-bandtrack {
		width: max-content;
		justify-content: flex-start;
		animation: troas-bandroll 30s linear infinite;
	}
	.t-bandgroup { flex: 0 0 auto; justify-content: flex-start; }
	.t-bandgroup--dup { display: flex; }
	.t-bandgroup > .t-band__sep:last-child { display: inline; }

	/* Solid pill buttons, because the hover fill never plays on a touch screen.
	   The LinkedIn pill stays hollow on purpose. */
	.t-btn:not(.t-btn--li) { background: var(--c-a); color: var(--c-base); }
	.t-btn:not(.t-btn--li) .t-btn__fill { transform: translateY(0); }

	.t-ctarow { flex-direction: column; align-items: flex-start; row-gap: 22px; }

	/* On a phone the hero headline has to carry the section, so the pill is
	   pulled back to sit under it rather than compete with it. Hero only, the
	   contact and results buttons keep their full size. */
	.t-hero .t-btn {
		padding: 14px 22px;
		gap: 8px;
		font-size: 11px;
		letter-spacing: .1em;
	}

	.t-proofcell { padding: 28px 14px 26px 0; }
	.t-proofcell:last-child { grid-column: 1 / -1; padding-left: 0; }

	.t-svc-side { position: static; }

	.t-case__m { grid-column: 2; text-align: left; margin-top: 8px; }
	.t-case__spacer { display: none; }

	.t-hwrap { display: none; }
	.t-proc-m { display: block; }

	.t-stacklist { display: none; }
	.t-stacktrack {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 2px var(--pad) 6px;
		margin: 0 calc(var(--pad) * -1);
	}

	.t-postcard { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
	.t-sigsticky { top: 30vh; }

	/* One column, and the "won't get" list keeps its own rule above it rather
	   than a left border it no longer sits next to. */
	.t-deliver__cols { grid-template-columns: minmax(0, 1fr); gap: 54px 0; }
	.t-deliver__col--not {
		border-left: 0;
		border-top: 1px solid var(--line);
		padding-left: 0;
		padding-top: 42px;
	}
	.t-deliver { padding: calc(var(--r) * 100px) 0; }
	.t-dlist__i { grid-template-columns: 22px minmax(0, 1fr); gap: 0 12px; padding: 18px 0; }

	/* Retune the one number and the grid, the answer indent and the question
	   column stay locked together. The phone had the same 10px drift. */
	.t-faq { --faq-n: 40px; --faq-gap: 8px; }
	.t-faq__q { grid-template-columns: var(--faq-n) minmax(0, 1fr) 22px; padding: 24px 0; }
	.t-faq__qt { font-size: 19px; }
	.t-faq__a { padding-bottom: 28px; padding-right: 0; }
	.t-slots { font-size: 10.5px; gap: 8px; padding: 9px 14px 9px 12px; letter-spacing: .12em; }
}

/* ===========================================================================
   REDUCED MOTION
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.t-bandtrack { animation: none; width: 100%; justify-content: space-between; }
	.t-bandgroup--dup { display: none; }
	.t-glow { opacity: calc(var(--glow) * .5); }
	.t-hwrap { height: auto; }
	.t-slots__dot { animation: none; }
	/* The FAQ still opens, it just stops sliding. */
	.t-faq__i::details-content { transition: none; }
	/* Page transitions are motion too. The navigation still happens, the
	   cross fade does not. */
	::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ===========================================================================
   PRINT
   =========================================================================== */

@media print {
	.t-nav, .t-menu, .t-pre, .t-glow, .t-band, .t-form, .t-chips { display: none !important; }
	body.t-body { background: #fff; color: #000; }
	.t-sigwrap, .t-hwrap { display: none; }
	.t-case__grid { grid-template-rows: 1fr !important; }
	.t-case__detail { opacity: 1 !important; transform: none !important; }
}