/* ============================================================
   TailorTell — Site styles
   tokens.css is loaded first; this file consumes those vars.
   Defaults: dark canvas (charcoal), editorial mood, panels choreography.
   ============================================================ */

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

html { scroll-behavior: smooth; }

/* Global keyboard-focus ring. Uses currentColor so it inherits the local text
   colour — guarantees contrast wherever text is already legible, on dark,
   light, and taupe surfaces alike. :focus-visible activates for keyboard nav
   only (not mouse clicks), so the ring never appears on click. Layout-safe
   (outline, not border). Elements with their own custom focus styles
   (.tt-skip-link, .tt-chip, .tt-input, .tt-stage__ctrl) win on specificity. */
a:focus-visible,
button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 1px;
}

/* Skip-to-content — off-screen until keyboard focus, then slides in.
   When the custom cursor is on (desktop, fine pointer), the global
   `html.tt-has-cursor a { cursor: none }` rule hides the OS pointer over
   anchors; we restore it here so mouse users can actually click. */
.tt-skip-link {
	position: absolute;
	top: -48px;
	left: 16px;
	z-index: 9999;
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: 10px 18px;
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-decoration: none;
	border-radius: 0;
	transition: top 0.15s ease-out;
}
.tt-skip-link:focus {
	top: 12px;
	outline: 2px solid var(--tt-warm-white);
	outline-offset: 2px;
}
html.tt-has-cursor .tt-skip-link,
html.tt-has-cursor .tt-skip-link:focus { cursor: pointer; }
/* Also remove main's focus outline since tabindex=-1 only enables programmatic
   focus from the skip link — we don't want a visible ring on <main>. */
.tt-main:focus { outline: none; }

/* ============================================================
   Custom cursor — desktop + fine pointer only
   ============================================================ */
.tt-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
	html.tt-has-cursor .tt-cursor { display: block; }
	html.tt-has-cursor, html.tt-has-cursor body { cursor: none; }
	html.tt-has-cursor a,
	html.tt-has-cursor button,
	html.tt-has-cursor [role="button"],
	html.tt-has-cursor input,
	html.tt-has-cursor textarea,
	html.tt-has-cursor select,
	html.tt-has-cursor label { cursor: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tt-cursor { display: none !important; }
	html.tt-has-cursor, html.tt-has-cursor * { cursor: auto !important; }
}

.tt-cursor__dot,
.tt-cursor__ring {
	position: fixed;
	top: 0; left: 0;
	pointer-events: none;
	z-index: 200;
	mix-blend-mode: difference;
	will-change: transform;
}
.tt-cursor__dot {
	width: 6px; height: 6px;
	margin: -3px 0 0 -3px;
	background: #F7F6F4;
	border-radius: 50%;
}
.tt-cursor__ring {
	width: 32px; height: 32px;
	margin: -16px 0 0 -16px;
}
.tt-cursor__ring-inner {
	width: 100%; height: 100%;
	border: 1px solid #F7F6F4;
	border-radius: 50%;
	background: transparent;
	display: flex; align-items: center; justify-content: center;
	transform: scale(1);
	transition: transform 220ms var(--ease-out), background 220ms var(--ease-out);
}
.tt-cursor[data-state="interactive"] .tt-cursor__ring-inner {
	transform: scale(1.45);
	background: rgba(247,246,244,0.14);
}
.tt-cursor[data-state="stage"] .tt-cursor__ring-inner {
	transform: scale(1.8);
}
.tt-cursor__plus {
	color: #F7F6F4;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 16px;
	line-height: 1;
	opacity: 0;
	transition: opacity 220ms var(--ease-out);
}
.tt-cursor[data-state="stage"] .tt-cursor__plus { opacity: 1; }
.tt-cursor[data-hidden="true"] { opacity: 0; transition: opacity 200ms var(--ease-out); }

/* Paint containment on heavy sections — keeps repaints localised
   during scroll-tied effects (grain blend, drift, spine). */
.tt-hero,
.tt-intro,
.tt-services,
.tt-why,
.tt-cta,
.tt-journal,
.tt-footer,
.tt-services-header,
.tt-services-dim,
.tt-services-cta {
	contain: paint;
}

body.tt-body {
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.tt-canvas-dark {
	--bg: var(--tt-charcoal);
	--fg-1: var(--tt-warm-white);
	--fg-2: var(--tt-paper-72);
	--fg-3: var(--tt-paper-48);
	--line: var(--tt-paper-12);
}

::selection { background: var(--tt-sand); color: var(--tt-charcoal); }

/* Scrollbar — quiet, on-brand, no arrows, rectangular thumb */
body::-webkit-scrollbar { width: 8px; height: 8px; background: #0F0F0F; }
body::-webkit-scrollbar-track { background: #0F0F0F; }
body::-webkit-scrollbar-thumb { background: var(--tt-charcoal-92); border-radius: 0; }
body::-webkit-scrollbar-thumb:hover { background: var(--tt-charcoal-84); }
body::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
body::-webkit-scrollbar-corner { background: #0F0F0F; }
html { scrollbar-color: #2A2A2A #0F0F0F; scrollbar-width: thin; }

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }

/* ============================================================
   Header / nav — fixed, transparent → blurred-charcoal on scroll
   ============================================================ */
.tt-site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	padding: 20px clamp(20px, 4vw, 48px);
	display: flex; align-items: center; justify-content: space-between;
	background: transparent;
	border-bottom: 0.5px solid transparent;
	transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.tt-site-header[data-tt-scrolled="true"] {
	background: rgba(26,26,26,0.72);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	backdrop-filter: blur(12px) saturate(120%);
	border-bottom-color: rgba(247,246,244,0.12);
}

/* Surface-aware header — `data-tt-on` is updated by initHeaderSurface() in
   main.js as the user scrolls, reflecting which [data-tt-surface] section is
   currently behind the fixed header. Defaults (dark) above already handle the
   common case; these rules invert text + scrim for light and taupe surfaces. */
.tt-site-header[data-tt-on="light"] .tt-brand,
.tt-site-header[data-tt-on="light"] .tt-monogram,
.tt-site-header[data-tt-on="light"] .tt-nav-cta,
.tt-site-header[data-tt-on="light"] .tt-menu-trigger,
.tt-site-header[data-tt-on="taupe"] .tt-brand,
.tt-site-header[data-tt-on="taupe"] .tt-monogram,
.tt-site-header[data-tt-on="taupe"] .tt-nav-cta,
.tt-site-header[data-tt-on="taupe"] .tt-menu-trigger { color: var(--tt-charcoal); }
.tt-site-header[data-tt-on="light"] .tt-nav-list a,
.tt-site-header[data-tt-on="light"] .tt-nav-list .menu-item a,
.tt-site-header[data-tt-on="taupe"] .tt-nav-list a,
.tt-site-header[data-tt-on="taupe"] .tt-nav-list .menu-item a { color: var(--tt-ink-72); }
.tt-site-header[data-tt-on="light"] .tt-nav-list a:hover,
.tt-site-header[data-tt-on="taupe"] .tt-nav-list a:hover { color: var(--tt-charcoal); }
/* When scrolled AND over a light/taupe section: warm-white scrim with dark border. */
.tt-site-header[data-tt-on="light"][data-tt-scrolled="true"],
.tt-site-header[data-tt-on="taupe"][data-tt-scrolled="true"] {
	background: rgba(247,246,244,0.82);
	border-bottom-color: rgba(26,26,26,0.10);
}

.tt-brand {
	display: inline-flex; align-items: center; gap: 12px;
	color: var(--tt-warm-white);
}
.tt-brand .tt-wordmark {
	font-family: var(--font-display); font-weight: 300;
	font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase;
	word-spacing: 0.1em;
}
.tt-monogram { color: var(--tt-warm-white); }

.tt-nav { display: flex; align-items: center; gap: 36px; }
.tt-menu-trigger {
	display: none;
	background: transparent;
	border: 0;
	color: var(--tt-warm-white);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 6px 0;
	border-bottom: 0.5px solid var(--tt-warm-white);
}
.tt-nav-list {
	list-style: none; display: flex; align-items: center; gap: 36px;
	margin: 0; padding: 0;
}
.tt-nav-list a, .tt-nav-list .menu-item a {
	font-family: var(--font-display); font-weight: 300;
	font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--tt-paper-72);
	transition: color 200ms var(--ease-out);
}
.tt-nav-list a:hover { color: var(--tt-warm-white); }

.tt-nav-cta {
	font-family: var(--font-display); font-weight: 300;
	font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--tt-warm-white);
	padding-bottom: 4px;
	border-bottom: 0.5px solid var(--tt-warm-white);
}
.tt-nav-cta span { margin-left: 6px; }

@media (max-width: 860px) {
	.tt-nav { display: none; }
	.tt-menu-trigger { display: inline-block; }
}

/* ============================================================
   Mobile menu — full-screen overlay
   ============================================================ */
.tt-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: 20px clamp(20px, 6vw, 40px) clamp(24px, 6vw, 40px);
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 5vw, 40px);
	overflow-y: auto;
	opacity: 0;
	transform: scale(0.985);
	pointer-events: none;
	transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.tt-mobile-menu[data-open="true"] {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.tt-mobile-menu__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: clamp(20px, 4vw, 32px);
	border-bottom: 0.5px solid rgba(247,246,244,0.12);
}
.tt-mobile-menu__bar .tt-wordmark { font-size: 13px; }

.tt-mobile-menu__close {
	background: transparent;
	border: 0;
	color: var(--tt-warm-white);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 6px 0;
	border-bottom: 0.5px solid var(--tt-warm-white);
}

.tt-mobile-menu__nav { width: 100%; }
.tt-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.tt-mobile-menu__item {
	border-bottom: 0.5px solid rgba(247,246,244,0.12);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
	transition-delay: calc(80ms + var(--i, 1) * 40ms);
}
.tt-mobile-menu[data-open="true"] .tt-mobile-menu__item {
	opacity: 1;
	transform: translateY(0);
}
.tt-mobile-menu__item a {
	display: flex;
	align-items: center;
	padding: clamp(18px, 3.5vw, 26px) 0;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(26px, 7vw, 36px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tt-warm-white);
	line-height: 1;
}

.tt-mobile-menu__cta {
	display: flex;
	padding-top: clamp(12px, 3vw, 20px);
}
.tt-mobile-menu__cta .tt-btn { width: 100%; justify-content: center; }

.tt-mobile-menu__contact {
	padding-top: clamp(20px, 4vw, 28px);
	border-top: 0.5px solid rgba(247,246,244,0.12);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.tt-mobile-menu__eyebrow { color: var(--tt-sand); }
.tt-mobile-menu__contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.tt-mobile-menu__contact-list a {
	display: grid;
	grid-template-columns: 88px 1fr;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	border-top: 0.5px solid rgba(247,246,244,0.12);
	color: var(--tt-warm-white);
}
.tt-mobile-menu__contact-list li:last-child a {
	border-bottom: 0.5px solid rgba(247,246,244,0.12);
}
.tt-mobile-menu__contact-label {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(196,181,165,0.6);
}
.tt-mobile-menu__contact-value {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3;
}

.tt-mobile-menu__foot {
	margin-top: auto;
	padding-top: clamp(16px, 4vw, 24px);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(196,181,165,0.6);
}

/* Scroll lock applied via JS — body class */
.tt-no-scroll { overflow: hidden; }

/* ============================================================
   Lightbox — shared in-page modal for stage previews + future media
   ============================================================ */
.tt-lightbox {
	position: fixed;
	inset: 0;
	z-index: 150;
	background: rgba(10,10,10,0.92);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	        backdrop-filter: blur(10px) saturate(120%);
	display: flex;
	flex-direction: column;
	opacity: 0;
	pointer-events: none;
	transition: opacity 280ms var(--ease-out);
}
.tt-lightbox[data-open="true"] {
	opacity: 1;
	pointer-events: auto;
}
.tt-lightbox__close {
	position: absolute;
	top: 20px;
	right: clamp(20px, 4vw, 40px);
	z-index: 2;
	background: transparent;
	border: 0;
	color: var(--tt-warm-white);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 6px 0;
	border-bottom: 0.5px solid var(--tt-warm-white);
}
.tt-lightbox__stage {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(60px, 8vw, 100px) clamp(20px, 6vw, 60px);
}
.tt-lightbox__inner {
	width: 100%;
	max-width: 1200px;
	aspect-ratio: 16 / 9;
	border: 0.5px solid rgba(247,246,244,0.22);
	background: var(--tt-charcoal);
	transform: scale(0.985);
	transition: transform 320ms var(--ease-out);
	overflow: hidden;
}
.tt-lightbox[data-open="true"] .tt-lightbox__inner {
	transform: scale(1);
}
.tt-lightbox__inner video,
.tt-lightbox__inner img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: var(--tt-charcoal);
}
@media (prefers-reduced-motion: reduce) {
	.tt-lightbox, .tt-lightbox__inner { transition: opacity 0.01ms !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.tt-mobile-menu,
	.tt-mobile-menu__item { transition: opacity 0.01ms !important; transform: none !important; }
}

/* ============================================================
   Hero
   ============================================================ */
.tt-hero {
	position: relative;
	min-height: 100vh;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: clamp(120px, 18vh, 200px) clamp(20px, 4vw, 48px) clamp(60px, 10vh, 120px);
	overflow: hidden;
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
}
@media (max-width: 768px) {
	.tt-hero { min-height: 85vh; min-height: 85dvh; }
}

.tt-hero__fabric {
	position: absolute; inset: 0;
	background-color: var(--tt-charcoal);
	background-image:
		repeating-linear-gradient(0deg,  rgba(247,246,244,0.05) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(247,246,244,0.03) 0 1px, transparent 1px 4px);
	opacity: 0.6;
	pointer-events: none;
}

.tt-hero__monogram {
	position: absolute;
	top: clamp(120px, 16vh, 180px);
	right: clamp(20px, 4vw, 48px);
	color: rgba(247,246,244,0.32);
}

.tt-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
}

.tt-hero__eyebrow {
	color: rgba(247,246,244,0.48);
	margin-bottom: 40px;
}
.tt-hero__eyebrow .tt-eyebrow__dash { margin-right: 18px; }

.tt-hero__headline {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(40px, 7vw, 104px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0;
}

/* Animated headline mechanics — from prototype */
.tt-hl-row {
	display: inline;
	white-space: nowrap;
}
@media (max-width: 720px) {
	.tt-hl-row { white-space: normal; }
	.tt-hero__headline { font-size: clamp(36px, 9vw, 64px); }
}

.tt-be {
	display: inline-block;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
	will-change: opacity, transform;
}
.tt-be[data-state="on"] { opacity: 1; transform: translateY(0); }

.tt-rev {
	display: inline-grid;
	grid-template-columns: 0fr;
	opacity: 0;
	overflow: hidden;
	transition: grid-template-columns 500ms var(--ease-out), opacity 500ms var(--ease-out);
	vertical-align: baseline;
	font-style: inherit; font-weight: inherit;
}
.tt-rev > .tt-rev-inner { min-width: 0; white-space: pre; }
.tt-rev[data-state="on"] { grid-template-columns: 1fr; opacity: 1; }
.tt-rev-dash > .tt-rev-inner { color: rgba(247,246,244,0.56); }

.tt-slot { display: inline-grid; vertical-align: baseline; }
.tt-slot > .tt-w {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
	font-style: inherit; font-weight: inherit;
	white-space: pre;
	will-change: opacity, transform;
}
.tt-slot > .tt-w[data-state="in"]  { opacity: 1; transform: translateY(0); }
.tt-slot > .tt-w[data-state="out"] { opacity: 0; transform: translateY(-12px); }
.tt-slot > .tt-w[data-state="init"]{ opacity: 0; transform: translateY(12px); }
.tt-slot > .tt-w-found[data-state="in"] { transition-duration: 400ms; }

/* Hero actions */
.tt-hero__actions {
	margin-top: 72px;
	display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}

.tt-btn {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 16px 32px;
	display: inline-flex; align-items: center; gap: 10px;
	cursor: pointer;
	border: 0;
	border-radius: 0;
	transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.tt-btn--primary.tt-btn--on-dark {
	background: var(--tt-warm-white); color: var(--tt-charcoal);
}
.tt-btn--primary.tt-btn--on-dark:hover { background: #E8E5DF; }
.tt-btn--primary {
	background: var(--tt-charcoal); color: var(--tt-warm-white);
}
.tt-btn--primary:hover { background: var(--tt-charcoal-84); }
.tt-btn--ghost.tt-btn--on-dark {
	background: transparent; color: var(--tt-warm-white);
	border: 0.5px solid rgba(247,246,244,0.48);
}
.tt-btn--ghost.tt-btn--on-dark:hover { background: rgba(247,246,244,0.06); }

.tt-link-rule {
	font-family: var(--font-sans);
	font-size: 14px;
	color: rgba(247,246,244,0.72);
	border-bottom: 0.5px solid rgba(247,246,244,0.24);
	padding-bottom: 4px;
	transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.tt-link-rule:hover { color: var(--tt-warm-white); border-bottom-color: var(--tt-warm-white); }

/* Author + related blocks sit on white; force charcoal contrast inside them. */
.tt-author .tt-link-rule,
.tt-article-related .tt-link-rule        { color: rgba(26,26,26,0.78); border-bottom-color: rgba(26,26,26,0.24); }
.tt-author .tt-link-rule:hover,
.tt-article-related .tt-link-rule:hover  { color: var(--tt-charcoal); border-bottom-color: var(--tt-charcoal); }
.tt-author .tt-eyebrow,
.tt-article-related .tt-eyebrow          { color: rgba(26,26,26,0.72); }

/* Hero scroll cue */
.tt-hero__scroll {
	position: absolute;
	bottom: 32px;
	left: clamp(20px, 4vw, 48px);
	right: clamp(20px, 4vw, 48px);
	display: flex; align-items: center; justify-content: flex-end;
	color: rgba(247,246,244,0.48);
	font-family: var(--font-display);
	font-weight: 300; font-size: 10px;
	letter-spacing: 0.22em; text-transform: uppercase;
	gap: 10px;
}
.tt-hero__scroll-line {
	display: inline-block; width: 24px; height: 0.5px;
	background: rgba(247,246,244,0.48);
}

/* ============================================================
   Intro section
   ============================================================ */
.tt-intro {
	position: relative;
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: clamp(40px, 5.5vw, 80px) clamp(20px, 4vw, 48px);
	overflow: hidden;
	min-height: clamp(420px, 56vh, 620px);
}

.tt-intro__image {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: clamp(280px, 60%, 880px);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right,
		transparent 0%,
		rgba(0,0,0,0.08) 18%,
		rgba(0,0,0,0.45) 42%,
		rgba(0,0,0,0.82) 72%,
		black 100%);
	mask-image: linear-gradient(to right,
		transparent 0%,
		rgba(0,0,0,0.08) 18%,
		rgba(0,0,0,0.45) 42%,
		rgba(0,0,0,0.82) 72%,
		black 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.tt-intro__drift {
	position: absolute; inset: 0;
	transform-origin: 70% 50%;
	will-change: transform;
	animation: tt-intro-drift 32s ease-in-out infinite alternate;
}
.tt-intro__slot {
	position: absolute; inset: 0;
	background:
		linear-gradient(135deg, rgba(247,246,244,0.04) 0%, rgba(247,246,244,0.01) 100%),
		repeating-linear-gradient(0deg,  rgba(247,246,244,0.05) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(247,246,244,0.03) 0 1px, transparent 1px 4px);
	border-left: 0.5px solid rgba(247,246,244,0.12);
}
.tt-intro__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
@keyframes tt-intro-drift {
	0%   { transform: scale(1.00) translate(0, 0); }
	100% { transform: scale(1.045) translate(-0.6%, 0.4%); }
}
@media (prefers-reduced-motion: reduce) {
	.tt-intro__drift { animation: none !important; }
}

.tt-intro__inner {
	position: relative; z-index: 2;
	max-width: var(--container-max);
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}
.tt-intro__copy {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(19px, 2vw, 26px);
	line-height: 1.5;
	letter-spacing: -0.008em;
	color: rgba(247,246,244,0.82);
	margin: 0;
	max-width: 62ch;
	text-wrap: pretty;
}
@media (max-width: 860px) {
	.tt-intro {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding: 0;
	}
	.tt-intro__inner {
		order: 1;
		grid-template-columns: 1fr;
		padding: clamp(40px, 8vw, 64px) clamp(20px, 4vw, 48px) clamp(20px, 4vw, 32px);
		margin-top: 0;
	}
	.tt-intro__image {
		order: 2;
		position: relative;
		top: auto; right: auto; bottom: auto;
		width: 100%;
		aspect-ratio: 16 / 10;
		margin: 0;
		-webkit-mask-image: linear-gradient(to bottom,
			transparent 0%,
			rgba(0,0,0,0.10) 10%,
			rgba(0,0,0,0.45) 25%,
			rgba(0,0,0,0.85) 50%,
			black 100%);
		        mask-image: linear-gradient(to bottom,
			transparent 0%,
			rgba(0,0,0,0.10) 10%,
			rgba(0,0,0,0.45) 25%,
			rgba(0,0,0,0.85) 50%,
			black 100%);
	}
}

/* ============================================================
   The Gap — light surface, numbered points
   ============================================================ */
.tt-gap {
	background: var(--tt-warm-white);
	color: var(--tt-charcoal);
	padding: clamp(72px, 9vw, 140px) clamp(20px, 4vw, 48px);
}
.tt-gap__inner {
	max-width: 1180px;
	margin: 0 auto;
}
.tt-gap__head { margin-bottom: clamp(56px, 7vw, 104px); }
.tt-gap__eyebrow {
	color: rgba(26,26,26,0.72);
	display: block;
	margin-bottom: 28px;
}
.tt-gap__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(34px, 5.2vw, 76px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
}
.tt-gap__title-italic {
	font-style: italic;
	color: rgba(26,26,26,0.62);
}

.tt-gap__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.tt-gap__item {
	border-top: 0.5px solid rgba(26,26,26,0.18);
	padding: clamp(32px, 4vw, 56px) 0;
}
.tt-gap__rule {
	border-top: 0.5px solid rgba(26,26,26,0.18);
	list-style: none;
}
.tt-gap__row {
	display: grid;
	grid-template-columns: minmax(96px, 14%) 1fr;
	column-gap: clamp(24px, 4vw, 72px);
	align-items: baseline;
}
.tt-gap__numeral {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(13px, 1vw, 14px);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(26,26,26,0.72);
	line-height: 1;
	white-space: nowrap;
}
.tt-gap__slash {
	opacity: 0.5;
	margin: 0 0.4em;
}
.tt-gap__body { max-width: 62ch; }
.tt-gap__lead {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.35;
	letter-spacing: -0.012em;
	color: var(--tt-charcoal);
	margin: 0 0 14px;
	text-wrap: balance;
}
.tt-gap__para {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.72;
	letter-spacing: -0.004em;
	color: rgba(26,26,26,0.80);
	margin: 0;
	text-wrap: pretty;
}
@media (max-width: 720px) {
	.tt-gap__row { grid-template-columns: 1fr; row-gap: 16px; }
}

/* ============================================================
   Services — "The Visibility System": 4 stage panels
   ============================================================ */
.tt-services {
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: var(--section-y) clamp(20px, 4vw, 48px);
}
.tt-services__inner { max-width: var(--container-max); margin: 0 auto; }

.tt-services__eyebrows {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-bottom: 48px;
}

.tt-services__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(28px, 3.6vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.018em;
	margin: 0 0 16px;
	max-width: 22ch;
	text-wrap: balance;
}
.tt-services__lead {
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.55;
	color: rgba(247,246,244,0.78);
	margin: 0 0 64px;
	max-width: 52ch;
}

.tt-services__stages { position: relative; }
.tt-services__spine {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 1px;
	pointer-events: none;
	z-index: 2;
}
.tt-services__spine-fill {
	position: absolute;
	left: 0; top: 0;
	width: 1px;
	height: 0%;
	background: rgba(247,246,244,0.28);
	transition: height 60ms linear;
}

.tt-stage-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-direction: column;
	gap: 2px;
}
.tt-stage {
	position: relative;
	padding-left: 32px;
	border-top: 0.5px solid rgba(247,246,244,0.12);
	background: var(--stage-tint, transparent);
	overflow: hidden;
}
.tt-stage.is-last { border-bottom: 0.5px solid rgba(247,246,244,0.12); }

.tt-stage--01 { --stage-accent: #B6A595; --stage-tint: rgba(140,123,107,0.07); }
.tt-stage--02 { --stage-accent: #C4B5A5; --stage-tint: rgba(196,181,165,0.06); }
.tt-stage--03 { --stage-accent: #9A9A9A; --stage-tint: rgba(247,246,244,0.04); }
.tt-stage--04 { --stage-accent: #F7F6F4; --stage-tint: rgba(247,246,244,0.03); }

.tt-stage__accent {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--stage-accent);
}

.tt-stage__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 4vw, 80px);
	padding: clamp(36px, 4.5vw, 56px) 0;
	align-items: start;
}
.tt-stage__copy { display: flex; flex-direction: column; }

.tt-stage__head {
	display: flex; align-items: baseline; gap: 20px;
	margin-bottom: 14px;
}
.tt-stage__numeral {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--stage-accent);
	line-height: 1;
	flex-shrink: 0;
}
.tt-stage__name {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.05;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0;
	color: var(--tt-warm-white);
}
.tt-stage__outcome {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.18;
	letter-spacing: -0.012em;
	margin: 0 0 24px;
	max-width: 20ch;
	text-wrap: balance;
}
.tt-stage__body {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba(247,246,244,0.78);
	margin: 0 0 28px;
	max-width: 48ch;
}
.tt-stage__details {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex; flex-direction: column; gap: 10px;
}
.tt-stage__details li {
	font-family: var(--font-sans);
	font-size: 14px;
	color: rgba(247,246,244,0.62);
	line-height: 1.5;
	padding-left: 22px;
	position: relative;
}
.tt-stage__details li::before {
	content: '';
	position: absolute;
	left: 0; top: 0.65em;
	width: 12px; height: 0.5px;
	background: var(--stage-accent);
}

.tt-stage__more {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tt-warm-white);
	align-self: flex-start;
	padding-bottom: 8px;
	border-bottom: 0.5px solid rgba(247,246,244,0.24);
	transition: border-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
.tt-stage__more:hover { border-bottom-color: var(--stage-accent); }
.tt-stage__arrow {
	display: inline-block;
	color: var(--stage-accent);
	transition: transform 240ms var(--ease-out);
}
.tt-stage__more:hover .tt-stage__arrow { transform: translateX(4px); }

.tt-stage__media {
	aspect-ratio: 4 / 3;
	background: rgba(247,246,244,0.03);
	border: 0.5px solid rgba(247,246,244,0.14);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 16px;
	padding: 32px;
	max-width: 500px;
	width: 100%;
	justify-self: end;
	position: relative;
	overflow: hidden;
}
.tt-stage__media-rule {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 3px;
	background: var(--stage-accent);
}
.tt-stage__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Stage controls — text labels, brand vocabulary. Hover reveals. */
.tt-stage__controls {
	position: absolute;
	top: 12px; right: 12px;
	z-index: 3;
	display: flex;
	gap: 8px;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
	pointer-events: none;
}
.tt-stage__media:hover .tt-stage__controls,
.tt-stage__media:focus-within .tt-stage__controls {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
@media (hover: none) {
	.tt-stage__controls { opacity: 1; transform: none; pointer-events: auto; }
}
.tt-stage__ctrl {
	appearance: none;
	background: rgba(15,15,15,0.62);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	        backdrop-filter: blur(10px) saturate(120%);
	border: 0.5px solid rgba(247,246,244,0.32);
	color: var(--tt-warm-white);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 7px 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 0;
	line-height: 1;
	transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.tt-stage__ctrl:hover {
	background: rgba(15,15,15,0.82);
	border-color: var(--tt-warm-white);
}
.tt-stage__ctrl:focus-visible {
	outline: 1px solid var(--tt-warm-white);
	outline-offset: 2px;
}
.tt-stage__ctrl-arrow {
	font-size: 11px;
	transform: translateY(-0.5px);
}
.tt-stage__media-label {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(247,246,244,0.32);
	text-align: center;
	margin: 0;
	max-width: 22ch;
	line-height: 1.8;
}

@media (max-width: 860px) {
	.tt-stage__grid { grid-template-columns: 1fr; }
	.tt-stage__media { justify-self: stretch; max-width: none; }
}

/* ============================================================
   Why us — taupe accent panel
   ============================================================ */
.tt-why {
	background: var(--tt-warm-taupe);
	color: var(--tt-warm-white);
	padding: var(--section-y) clamp(20px, 4vw, 48px);
}
.tt-why__inner { max-width: var(--container-max); margin: 0 auto; }

.tt-why__eyebrows {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 16px;
	margin-bottom: clamp(40px, 6vw, 72px);
}
.tt-why__eyebrow-soft { opacity: 1; }

.tt-why__headrow {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: end;
	margin-bottom: clamp(56px, 8vw, 96px);
}
.tt-why__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(34px, 4.8vw, 72px);
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0;
	max-width: 14ch;
	text-wrap: balance;
}
.tt-why__image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	outline: 0.5px solid rgba(247,246,244,0.28);
	outline-offset: -0.5px;
}
.tt-why__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transform-origin: 55% 45%;
	will-change: transform;
	animation: tt-why-drift 36s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
	.tt-why__img { animation: none !important; }
}
.tt-why__slot {
	position: absolute; inset: 0;
	background:
		linear-gradient(135deg, rgba(247,246,244,0.06) 0%, rgba(26,26,26,0.06) 100%),
		repeating-linear-gradient(0deg,  rgba(247,246,244,0.05) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(247,246,244,0.03) 0 1px, transparent 1px 4px);
	transform-origin: 55% 45%;
	will-change: transform;
	animation: tt-why-drift 36s ease-in-out infinite alternate;
}
@keyframes tt-why-drift {
	0%   { transform: scale(1.00) translate(0, 0); }
	100% { transform: scale(1.04) translate(-0.5%, 0.4%); }
}
@media (prefers-reduced-motion: reduce) {
	.tt-why__slot { animation: none !important; }
}

.tt-why__rule {
	height: 0.5px;
	border: 0;
	background: rgba(247,246,244,0.32);
	margin: 0 0 clamp(36px, 5vw, 64px);
}

.tt-why__points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 4vw, 64px);
	padding-bottom: clamp(8px, 1vw, 16px);
}
.tt-why__point { display: flex; flex-direction: column; gap: 18px; }
.tt-why__point-head {
	display: flex; align-items: center; gap: 14px;
	padding-bottom: 16px;
	border-bottom: 0.5px solid rgba(247,246,244,0.22);
}
.tt-why__monogram { color: rgba(247,246,244,0.78); }
.tt-why__point-title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(19px, 1.55vw, 24px);
	line-height: 1.2;
	letter-spacing: -0.012em;
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
}
.tt-why__point-body {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(247,246,244,0.86);
	margin: 0;
	max-width: 38ch;
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.tt-why__headrow { grid-template-columns: 1fr; align-items: start; }
	.tt-why__points { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA — homepage closer, dark
   ============================================================ */
.tt-cta {
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: var(--section-y) clamp(20px, 4vw, 48px);
}
.tt-cta__inner { max-width: var(--container-max); margin: 0 auto; }
.tt-cta__eyebrows {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 16px;
	margin-bottom: clamp(40px, 6vw, 72px);
}
.tt-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: stretch;
}
.tt-cta__copy { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); }
.tt-cta__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(32px, 4.6vw, 64px);
	line-height: 1.06;
	letter-spacing: -0.022em;
	margin: 0;
	max-width: 18ch;
	text-wrap: balance;
}
.tt-cta__lead {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
	color: rgba(247,246,244,0.72);
	margin: 0;
	max-width: 46ch;
	text-wrap: pretty;
}
.tt-cta__action { margin-top: clamp(8px, 1vw, 16px); }
.tt-cta__media {
	position: relative;
	width: 100%;
	min-height: clamp(280px, 32vw, 420px);
	border: 0.5px solid rgba(247,246,244,0.22);
	overflow: hidden;
}
.tt-cta__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.tt-cta__slot {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(0deg,  rgba(247,246,244,0.04) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(247,246,244,0.025) 0 1px, transparent 1px 4px);
}
@media (max-width: 860px) {
	.tt-cta__grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 48px); }
}

/* ============================================================
   Journal — recent thinking, light surface, 3-card grid
   ============================================================ */
.tt-journal {
	background: var(--tt-warm-white);
	color: var(--tt-charcoal);
	padding: var(--section-y) clamp(20px, 4vw, 48px);
}
.tt-journal__inner { max-width: var(--container-max); margin: 0 auto; }
.tt-journal__eyebrows {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 16px;
	margin-bottom: clamp(40px, 6vw, 72px);
}
.tt-journal__eyebrow-soft { opacity: 1; }

.tt-journal__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(34px, 4.8vw, 72px);
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0 0 clamp(48px, 6vw, 88px);
	max-width: 16ch;
	text-wrap: balance;
}

.tt-journal__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(32px, 4vw, 64px);
	margin-bottom: clamp(40px, 5vw, 72px);
}
@media (max-width: 860px) {
	.tt-journal__grid { grid-template-columns: 1fr; }
}

.tt-card {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.6vw, 22px);
	color: inherit;
	cursor: pointer;
}
.tt-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	outline: 0.5px solid rgba(26,26,26,0.12);
	outline-offset: -0.5px;
	background: #EFEEEA;
}
.tt-card__media-zoom {
	position: absolute; inset: 0;
	transform: scale(1);
	transition: transform 640ms var(--ease-out);
}
.tt-card:hover .tt-card__media-zoom { transform: scale(1.03); }
.tt-card__img { width: 100%; height: 100%; object-fit: cover; }
.tt-card__slot {
	position: absolute; inset: 0;
	background:
		linear-gradient(135deg, rgba(26,26,26,0.04) 0%, rgba(26,26,26,0.01) 100%),
		repeating-linear-gradient(0deg,  rgba(26,26,26,0.04) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(26,26,26,0.025) 0 1px, transparent 1px 4px);
}
.tt-card__category { color: rgba(26,26,26,0.5); }
.tt-card__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(22px, 1.8vw, 28px);
	line-height: 1.18;
	letter-spacing: -0.014em;
	margin: 0;
	color: var(--tt-charcoal);
	text-wrap: balance;
	background-image: linear-gradient(var(--tt-charcoal), var(--tt-charcoal));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 0.5px;
	transition: background-size 360ms var(--ease-out);
	padding-bottom: 2px;
}
.tt-card:hover .tt-card__title { background-size: 100% 0.5px; }
.tt-card__dek {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(26,26,26,0.7);
	margin: 0;
	max-width: 38ch;
	text-wrap: pretty;
}
.tt-card__meta {
	margin-top: auto;
	padding-top: clamp(12px, 1.4vw, 18px);
	border-top: 0.5px solid rgba(26,26,26,0.12);
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(26,26,26,0.72);
}

.tt-journal__viewall-row {
	display: flex;
	justify-content: flex-end;
	padding-top: clamp(20px, 2.4vw, 32px);
	border-top: 0.5px solid rgba(26,26,26,0.12);
}
.tt-journal__viewall {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--tt-charcoal);
	display: inline-flex; align-items: center; gap: 12px;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 0.5px;
	transition: background-size 320ms var(--ease-out);
	padding-bottom: 4px;
}
.tt-journal__viewall:hover { background-size: 100% 0.5px; }

/* ============================================================
   Footer — charcoal, three bands
   ============================================================ */
.tt-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tt-footer {
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 48px) 28px;
	margin-top: 0;
	position: relative;
}
.tt-footer__inner { max-width: var(--container-max); margin: 0 auto; }

.tt-footer__eyebrow {
	color: var(--tt-sand);
	margin-bottom: 28px;
}
.tt-footer__col {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* BAND 1 */
.tt-footer__band1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 6vw, 96px);
	padding-bottom: clamp(56px, 8vw, 96px);
	border-bottom: 0.5px solid rgba(247,246,244,0.12);
}
.tt-footer__band1 .tt-footer__col { gap: 28px; }
.tt-footer__lede {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.2;
	letter-spacing: -0.012em;
	color: var(--tt-warm-white);
	margin: 0;
	max-width: 22ch;
}

/* Newsletter form */
.tt-newsletter {
	display: flex;
	align-items: stretch;
	border: 0.5px solid rgba(196,181,165,0.4);
	background: transparent;
	transition: border-color 200ms var(--ease-out);
	max-width: 520px;
}
.tt-newsletter:focus-within { border-color: var(--tt-sand); }
.tt-newsletter__input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: none;
	padding: 18px 20px;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 400;
	color: var(--tt-warm-white);
}
.tt-newsletter__input::placeholder { color: rgba(196,181,165,0.6); opacity: 1; }
.tt-newsletter__btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--tt-warm-white);
	color: var(--tt-charcoal);
	padding: 0 28px;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 10px;
	transition: background 200ms var(--ease-out);
	border-radius: 0;
}
.tt-newsletter__btn:hover { background: #E8E5DF; }

/* Contact list */
.tt-contact-list { display: flex; flex-direction: column; }
.tt-contact-row {
	display: grid;
	grid-template-columns: 88px 1fr auto;
	align-items: baseline;
	gap: 24px;
	padding: 20px 0;
	border-top: 0.5px solid rgba(247,246,244,0.12);
	color: var(--tt-warm-white);
}
.tt-contact-row:hover { background: rgba(247,246,244,0.02); }
.tt-contact-row__label {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(196,181,165,0.6);
}
.tt-contact-row__value {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.3;
}
.tt-contact-row__arrow {
	font-family: var(--font-sans);
	font-size: 17px;
	color: rgba(247,246,244,0.48);
	transition: color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.tt-contact-row:hover .tt-contact-row__arrow { color: var(--tt-warm-white); transform: translateX(4px); }
.tt-contact-list__close { border-bottom: 0.5px solid rgba(247,246,244,0.12); }

/* BAND 2 */
.tt-footer__band2 {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: clamp(32px, 5vw, 80px);
	padding-top: clamp(56px, 8vw, 96px);
	padding-bottom: clamp(48px, 6vw, 72px);
}
.tt-footer__brand { display: flex; flex-direction: column; gap: 22px; max-width: 360px; }
.tt-footer__brand-mark { display: flex; align-items: center; gap: 16px; }
.tt-footer__brand-mark .tt-wordmark {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	word-spacing: 0.1em;
	color: var(--tt-warm-white);
}
.tt-footer__about {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(247,246,244,0.72);
	margin: 0;
	max-width: 34ch;
}
.tt-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tt-footer-link {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: rgba(247,246,244,0.84);
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 0.5px;
	transition: background-size 320ms var(--ease-out);
	padding-bottom: 2px;
}
.tt-footer-link:hover { background-size: 100% 0.5px; }

/* BAND 3 */
.tt-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-top: 24px;
	border-top: 0.5px solid rgba(247,246,244,0.12);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(196,181,165,0.85);
	flex-wrap: wrap;
}
.tt-footer__legal { display: inline-flex; gap: 24px; align-items: baseline; }
.tt-footer__sep { color: rgba(247,246,244,0.24); }
.tt-footer-legal {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(196,181,165,0.85);
	transition: color 200ms var(--ease-out);
}
.tt-footer-legal:hover { color: var(--tt-warm-white); }

@media (max-width: 1024px) {
	.tt-footer__band2 { grid-template-columns: 1fr 1fr; row-gap: clamp(40px, 5vw, 56px); }
}
@media (max-width: 720px) {
	.tt-footer__band1 { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 56px); }
	.tt-footer__band2 { grid-template-columns: 1fr; gap: clamp(32px, 8vw, 48px); }
	.tt-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============================================================
   Eyebrow — color scoped by surface (data-tt-surface)
   ============================================================ */
.tt-eyebrow {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
	display: inline-block;
}
[data-tt-surface="dark"]  .tt-eyebrow,
.tt-dark .tt-eyebrow                    { color: rgba(247,246,244,0.48); }
[data-tt-surface="light"] .tt-eyebrow   { color: rgba(26,26,26,0.72); }
[data-tt-surface="taupe"] .tt-eyebrow   { color: rgba(247,246,244,0.95); }

/* ============================================================
   Services page — Block 1 header
   Charcoal, lower vertical height than the homepage hero,
   eyebrow pair · H1 · sub-line · anchor strip.
   ============================================================ */
.tt-services-header {
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: calc(var(--section-y) * 1.15) clamp(20px, 4vw, 48px) clamp(32px, 4vw, 56px);
	/* Top padding leaves room for the fixed site header. */
	padding-top: max(calc(var(--section-y) * 1.15), 140px);
}
.tt-services-header__inner { max-width: var(--container-max); margin: 0 auto; }

.tt-services-header__eyebrows {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 16px;
	margin-bottom: clamp(40px, 6vw, 72px);
}
.tt-services-header__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(40px, 6.4vw, 88px);
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0;
	max-width: 20ch;
	text-wrap: balance;
}
.tt-services-header__lead {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
	color: rgba(247,246,244,0.72);
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	max-width: 56ch;
	text-wrap: pretty;
}

/* Anchor strip — variable widths permitted, no forced symmetry */
.tt-services-header__anchors {
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: clamp(20px, 2.4vw, 32px);
	border-top: 0.5px solid rgba(247,246,244,0.18);
}
.tt-anchor-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap;
	gap: clamp(20px, 3.6vw, 48px);
	align-items: baseline;
}
.tt-anchor-list__link {
	display: inline-flex; align-items: baseline; gap: 10px;
	color: var(--tt-warm-white);
	padding-bottom: 4px;
	border-bottom: 0.5px solid transparent;
	transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.tt-anchor-list__link:hover { border-bottom-color: rgba(247,246,244,0.6); }
.tt-anchor-list__numeral {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	color: var(--tt-sand);
	line-height: 1;
}
.tt-anchor-list__name {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
}

@media (max-width: 860px) {
	.tt-services-header__eyebrows { flex-wrap: wrap; gap: 8px 16px; }
	.tt-anchor-list { gap: 14px 24px; }
}

/* ============================================================
   Services page — Block 3 dimension sections
   Two-column rhythm: subheadings left, content right.
   Surface alternates dark / taupe / dark / taupe.
   ============================================================ */
.tt-services-dim {
	padding: var(--section-y) clamp(20px, 4vw, 48px);
}
.tt-services-dim.tt-dark   { background: var(--tt-charcoal); }
.tt-services-dim.tt-light  { background: var(--tt-warm-white); }

.tt-services-dim__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: clamp(28px, 3.6vw, 64px);
	row-gap: clamp(34px, 4vw, 60px);
	align-items: start;
}

/* Head — numeral above H2, both spanning full width and anchored left.
   Sub-blocks below keep the 5fr/7fr label-left rhythm. */
.tt-services-dim__head {
	grid-column: 1 / -1;
	padding-bottom: clamp(32px, 4vw, 56px);
	border-bottom: 0.5px solid var(--line);
}
.tt-services-dim__numeral {
	display: block;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(13px, 1.1vw, 15px);
	letter-spacing: 0.22em;
	color: var(--tt-sand);
	line-height: 1;
	margin-bottom: clamp(16px, 2vw, 28px);
}
.tt-services-dim__name {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(44px, 6.4vw, 96px);
	line-height: 1.02;
	letter-spacing: -0.022em;
	margin: 0;
	text-wrap: balance;
	color: var(--fg-1);
	max-width: 14ch;
}
.tt-services-dim__outcome {
	font-family: var(--font-sans);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.25;
	color: var(--fg-2);
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	max-width: 36ch;
}

/* Sub-block — subhead left, body right */
.tt-services-dim__block {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: clamp(28px, 3.6vw, 64px);
	align-items: start;
}
.tt-services-dim__subhead {
	grid-column: 1;
	margin: 0;
	color: var(--fg-3);
	padding-top: 0.4em;
}
.tt-services-dim__block > p,
.tt-services-dim__block > ul,
.tt-services-dim__block > .tt-services-dim__prose {
	grid-column: 2;
	margin: 0;
}
.tt-services-dim__block p {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.65;
	color: var(--fg-2);
	max-width: 60ch;
}

/* Prose container — multiple stacked paragraphs in a single block (e.g. "How we do it") */
.tt-services-dim__prose {
	display: flex; flex-direction: column;
	gap: clamp(14px, 1.4vw, 22px);
}
.tt-services-dim__prose p { margin: 0; }
.tt-services-dim__prose strong {
	font-weight: 500;
	color: var(--fg-1);
}

.tt-services-dim__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column;
	gap: clamp(10px, 0.9vw, 14px);
}
.tt-services-dim__list li {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.5;
	color: var(--fg-1);
	padding-left: 22px;
	position: relative;
}
/* Small sand-coloured dot. */
.tt-services-dim__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--tt-sand);
}

/* Media slot — placeholder until imagery lands */
.tt-services-dim__media {
	grid-column: 1 / -1;
	margin: clamp(24px, 3vw, 40px) 0 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0.5px solid var(--line-strong);
	overflow: hidden;
	position: relative;
}
.tt-services-dim__slot {
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(0deg,  rgba(247,246,244,0.04) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(247,246,244,0.025) 0 1px, transparent 1px 4px);
}
.tt-services-dim__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.tt-light .tt-services-dim__slot {
	background:
		repeating-linear-gradient(0deg,  rgba(26,26,26,0.04) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(26,26,26,0.025) 0 1px, transparent 1px 4px);
}

@media (max-width: 860px) {
	.tt-services-dim__inner,
	.tt-services-dim__head,
	.tt-services-dim__block {
		grid-template-columns: 1fr;
		row-gap: clamp(16px, 3vw, 24px);
	}
	.tt-services-dim__numeral,
	.tt-services-dim__name,
	.tt-services-dim__outcome,
	.tt-services-dim__subhead,
	.tt-services-dim__block > p,
	.tt-services-dim__block > ul,
	.tt-services-dim__block > .tt-services-dim__prose,
	.tt-services-dim__media { grid-column: 1; }
	.tt-services-dim__subhead { padding-top: 0; }
}

/* ============================================================
   Services page — Block 4 closing CTA
   Charcoal, single-column centred composition. Bookends the
   page with the header. Primary CTA to /audit only.
   ============================================================ */
.tt-services-cta {
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: var(--section-y) clamp(20px, 4vw, 48px);
}
.tt-services-cta__inner {
	max-width: 880px; margin: 0 auto;
	text-align: center;
}
.tt-services-cta__eyebrows {
	display: flex; justify-content: center; align-items: baseline;
	gap: clamp(20px, 3vw, 36px);
	margin-bottom: clamp(32px, 4vw, 56px);
}
.tt-services-cta__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(36px, 5vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.022em;
	margin: 0 auto;
	max-width: 20ch;
	text-wrap: balance;
}
.tt-services-cta__lead {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.6;
	color: rgba(247,246,244,0.72);
	margin: clamp(20px, 2vw, 28px) auto 0;
	max-width: 52ch;
	text-wrap: pretty;
}
.tt-services-cta__action {
	margin-top: clamp(32px, 4vw, 56px);
	display: flex; justify-content: center;
}

/* ============================================================
   Reduced motion — collapse all entrance/transition
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.tt-be { opacity: 1 !important; transform: none !important; }
	.tt-rev { grid-template-columns: 1fr !important; opacity: 1 !important; }
	.tt-slot > .tt-w[data-state="init"],
	.tt-slot > .tt-w[data-state="out"] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   AUDIT PAGE
   Editorial pacing: dark header → light-surface form → dark coda.
   Header reads at services-header scale; form sits on warm-white
   so it carries proper editorial weight (paper, not a widget).
   ============================================================ */

/* ---------- Audit header (dark, services-header scale) ---------- */
.tt-audit-header {
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: clamp(140px, 16vw, 200px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 80px);
}
.tt-audit-header__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}
.tt-audit-header__eyebrow {
	margin-bottom: clamp(32px, 4.4vw, 56px);
}
.tt-audit-header__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(40px, 6.4vw, 88px);
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0;
	max-width: 20ch;
	text-wrap: balance;
}
.tt-audit-header__sub {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
	color: rgba(247,246,244,0.72);
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	max-width: 56ch;
	text-wrap: pretty;
}

/* ---------- Audit form (warm-white surface) ---------- */
.tt-audit-form {
	background: var(--tt-warm-white);
	color: var(--tt-charcoal);
	padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 48px) clamp(72px, 9vw, 120px);
}
.tt-audit-form__inner {
	max-width: 760px;
	margin: 0 auto;
}

.tt-audit-form__error {
	font-family: var(--font-sans);
	font-size: var(--fs-body-sm);
	color: var(--tt-charcoal);
	border: 0.5px solid rgba(26,26,26,0.32);
	padding: 14px 18px;
	margin-bottom: 32px;
	letter-spacing: 0.01em;
	background: rgba(196,181,165,0.18);
}

.tt-audit-form__success {
	border-top: 0.5px solid rgba(26,26,26,0.14);
	padding-top: clamp(40px, 5vw, 64px);
}
.tt-audit-form__success-title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.014em;
	margin: 16px 0 22px;
	max-width: 28ch;
	text-wrap: balance;
	color: var(--tt-charcoal);
}
.tt-audit-form__success-body {
	font-size: var(--fs-body);
	line-height: 1.65;
	color: rgba(26,26,26,0.72);
	max-width: 58ch;
}

.tt-audit-form__form {
	display: grid;
	gap: clamp(28px, 3.2vw, 40px);
}

/* honeypot */
.tt-audit-form__hp {
	position: absolute !important;
	left: -10000px; top: auto;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* ---------- Fields (light surface) ---------- */
.tt-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.tt-field-row {
	display: grid;
	gap: clamp(28px, 3.2vw, 40px);
}
.tt-field-row--two {
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
	.tt-field-row--two { grid-template-columns: 1fr; }
}

.tt-field__label {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(26,26,26,0.6);
	line-height: 1;
}
.tt-field__label--soft {
	letter-spacing: 0.18em;
	color: rgba(26,26,26,0.42);
}
.tt-field__hint {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(26,26,26,0.4);
}
.tt-field__hint--block {
	display: block;
	margin: -4px 0 6px;
}
.tt-field__error {
	display: block;
	margin-top: 6px;
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: #B23A3A;
}
.tt-field.is-invalid .tt-input {
	border-color: #B23A3A;
}

.tt-input {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	color: var(--tt-charcoal);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: 0;
	border: 0;
	border-bottom: 0.5px solid rgba(26,26,26,0.28);
	padding: 12px 0 14px;
	border-radius: 0;
	transition: border-color 240ms var(--ease-out);
	width: 100%;
}
.tt-input::placeholder {
	color: rgba(26,26,26,0.34);
	font-weight: 300;
	font-style: italic;
}
.tt-input:hover { border-bottom-color: rgba(26,26,26,0.48); }
.tt-input:focus {
	outline: none;
	border-bottom-color: var(--tt-warm-taupe);
}
.tt-input--textarea {
	resize: vertical;
	min-height: 112px;
	line-height: 1.55;
	border: 0.5px solid rgba(26,26,26,0.2);
	padding: 16px 18px;
	background: rgba(255,255,255,0.5);
}
.tt-input--textarea:focus {
	border-color: var(--tt-warm-taupe);
	background: #FFFFFF;
}

/* ---------- Chips field ---------- */
.tt-field--chips {
	border: 0;
	padding: 0;
	margin: clamp(10px, 1.2vw, 16px) 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tt-field--chips > .tt-field__label { padding: 0; }

.tt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.tt-chip {
	position: relative;
	display: inline-flex;
}
.tt-chip__input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%; height: 100%;
	cursor: pointer;
	margin: 0;
}
.tt-chip__face {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.005em;
	color: rgba(26,26,26,0.78);
	border: 0.5px solid rgba(26,26,26,0.28);
	border-radius: 2px;
	padding: 12px 18px;
	background: transparent;
	transition:
		border-color 220ms var(--ease-out),
		background-color 220ms var(--ease-out),
		color 220ms var(--ease-out);
	cursor: pointer;
	user-select: none;
}
.tt-chip:hover .tt-chip__face {
	border-color: var(--tt-charcoal);
	color: var(--tt-charcoal);
}
.tt-chip__input:focus-visible + .tt-chip__face {
	outline: 1px solid var(--tt-warm-taupe);
	outline-offset: 2px;
}
.tt-chip__input:checked + .tt-chip__face {
	background: var(--tt-charcoal);
	border-color: var(--tt-charcoal);
	color: var(--tt-warm-white);
}

/* "Anything else" inset block beneath the chips */
.tt-field--inset {
	margin-top: 14px;
	padding-top: 16px;
	border-top: 0.5px solid rgba(26,26,26,0.12);
}

/* ---------- Submit ---------- */
.tt-audit-form__action {
	margin-top: clamp(16px, 2vw, 24px);
	display: flex;
}

/* ---------- Coda lines under the form (dark, closes the page) ---------- */
.tt-audit-coda {
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 48px) clamp(96px, 12vw, 140px);
}
.tt-audit-coda__inner {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(22px, 2.4vw, 32px);
}
.tt-audit-coda__line {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: clamp(24px, 3.2vw, 44px);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.65;
	color: rgba(247,246,244,0.78);
	max-width: 100%;
	padding-top: clamp(14px, 1.6vw, 20px);
	border-top: 0.5px solid rgba(247,246,244,0.14);
}
.tt-audit-coda__line:first-child {
	border-top: 0;
	padding-top: 0;
}
.tt-audit-coda__label {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(247,246,244,0.46);
	padding-top: 4px;
	white-space: nowrap;
}
@media (max-width: 720px) {
	.tt-audit-coda__line {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.tt-audit-coda__label { padding-top: 0; }
}

/* ============================================================
   About page
   Five blocks: hero, origin, founder, method, StitchCore.
   Shares the services-page rhythm (label-left, numeral over H2)
   so the two pages feel like a pair. Closing CTA reuses
   .tt-services-cta — no separate styles needed.
   ============================================================ */

/* ---- Hero ---- */
.tt-about-hero {
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: calc(var(--section-y) * 1.15) clamp(20px, 4vw, 48px) clamp(32px, 4vw, 56px);
	padding-top: max(calc(var(--section-y) * 1.15), 140px);
}
.tt-about-hero__inner { max-width: var(--container-max); margin: 0 auto; }
.tt-about-hero__eyebrows {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 16px;
	margin-bottom: clamp(40px, 6vw, 72px);
}
.tt-about-hero__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(40px, 6.4vw, 88px);
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0;
	max-width: 18ch;
	text-wrap: balance;
}
.tt-about-hero__lead {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.6;
	color: rgba(247,246,244,0.72);
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	max-width: 56ch;
	text-wrap: pretty;
}
@media (max-width: 860px) {
	.tt-about-hero__eyebrows { flex-wrap: wrap; gap: 8px 16px; }
}

/* ---- Shared section shell ---- */
.tt-about-section {
	padding: var(--section-y) clamp(20px, 4vw, 48px);
}
.tt-about-section.tt-dark  { background: var(--tt-charcoal); }
.tt-about-section.tt-light { background: var(--tt-warm-white); }

.tt-about-section__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: clamp(28px, 3.6vw, 64px);
	row-gap: clamp(34px, 4vw, 60px);
	align-items: start;
}
.tt-about-section__head {
	grid-column: 1 / -1;
	padding-bottom: clamp(32px, 4vw, 56px);
	border-bottom: 0.5px solid var(--line);
}
.tt-about-section__numeral {
	display: block;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(13px, 1.1vw, 15px);
	letter-spacing: 0.22em;
	color: var(--tt-sand);
	line-height: 1;
	margin-bottom: clamp(16px, 2vw, 28px);
}
.tt-about-section__name {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(40px, 5.6vw, 80px);
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0;
	text-wrap: balance;
	color: var(--fg-1);
	max-width: 16ch;
}
.tt-about-section__outcome {
	font-family: var(--font-sans);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(20px, 1.9vw, 28px);
	line-height: 1.3;
	color: var(--fg-2);
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	max-width: 44ch;
}

.tt-about-section__block {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: clamp(28px, 3.6vw, 64px);
	align-items: start;
}
.tt-about-section__subhead {
	grid-column: 1;
	margin: 0;
	color: var(--fg-3);
	padding-top: 0.4em;
}
.tt-about-section__prose {
	grid-column: 2;
	display: flex; flex-direction: column;
	gap: clamp(14px, 1.4vw, 22px);
	max-width: 60ch;
}
.tt-about-section__prose p {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.65;
	color: var(--fg-2);
	margin: 0;
}

@media (max-width: 860px) {
	.tt-about-section__inner,
	.tt-about-section__block {
		grid-template-columns: 1fr;
		row-gap: clamp(16px, 3vw, 24px);
	}
	.tt-about-section__subhead,
	.tt-about-section__prose { grid-column: 1; }
	.tt-about-section__subhead { padding-top: 0; }
}

/* ---- Founder block ----
   Side-by-side: working-desk image (left, 5fr) + bio/card column (right, 7fr).
   Inherits the section's 5fr/7fr grid so the image hugs the same vertical
   axis as label-left subheads on the other About blocks. */
.tt-about-founder__desk {
	grid-column: 1;
	margin: 0;
	width: 100%;
	aspect-ratio: 4 / 5;
	border: 0.5px solid var(--line-strong);
	overflow: hidden;
	position: relative;
	align-self: start;
}
.tt-about-founder__desk-slot {
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(0deg,  rgba(247,246,244,0.04) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(247,246,244,0.025) 0 1px, transparent 1px 4px);
}
.tt-about-founder__desk-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
}

.tt-about-founder__copy {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 56px);
	align-self: stretch;
	justify-content: space-between;
}

.tt-about-founder__bio {
	display: flex; flex-direction: column;
	gap: clamp(14px, 1.4vw, 22px);
	max-width: 62ch;
}
.tt-about-founder__bio p {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.65;
	color: var(--fg-2);
	margin: 0;
}

/* Byline credit — editorial, not a card. Hairline rule above, square avatar
   with hairline border, name + role beside it. No fill, no rounding. */
.tt-about-founder__card {
	align-self: stretch;
	display: flex; align-items: center;
	gap: clamp(16px, 1.6vw, 22px);
	padding-top: clamp(18px, 2vw, 28px);
	border-top: 0.5px solid var(--line);
	max-width: 100%;
}
.tt-about-founder__avatar {
	flex: 0 0 auto;
	width: clamp(44px, 4.2vw, 56px);
	height: clamp(44px, 4.2vw, 56px);
	overflow: hidden;
	position: relative;
	border: 0.5px solid var(--line-strong);
}
.tt-about-founder__avatar-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
}
.tt-about-founder__avatar-slot {
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(0deg,  rgba(247,246,244,0.05) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(247,246,244,0.03) 0 1px, transparent 1px 4px);
}
.tt-about-founder__card-meta {
	display: flex; flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.tt-about-founder__card-name {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.2;
	color: var(--fg-1);
	margin: 0;
}
.tt-about-founder__card-role {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tt-sand);
	margin: 0;
}

@media (max-width: 860px) {
	.tt-about-founder__desk { grid-column: 1; aspect-ratio: 4 / 3; }
	.tt-about-founder__copy { grid-column: 1; }
	.tt-about-founder__card { align-self: flex-start; }
}
@media (max-width: 480px) {
	.tt-about-founder__card-role { white-space: normal; letter-spacing: 0.14em; }
}

/* ---- Method (three steps) ---- */
.tt-about-method__steps {
	grid-column: 1 / -1;
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
}
.tt-about-method__step {
	display: flex; flex-direction: column;
	gap: 14px;
	padding-top: clamp(20px, 2vw, 28px);
	border-top: 0.5px solid var(--line);
}
.tt-about-method__n {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.22em;
	color: var(--tt-sand);
	line-height: 1;
}
.tt-about-method__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.012em;
	margin: 0;
	color: var(--fg-1);
}
.tt-about-method__body {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.6;
	color: var(--fg-2);
	margin: 0;
	max-width: 36ch;
}
@media (max-width: 860px) {
	.tt-about-method__steps { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 32px); }
}

/* ---- StitchCore (taupe accent) ---- */
.tt-about-stitchcore {
	background: var(--tt-warm-taupe);
	color: var(--tt-warm-white);
	--fg-1: var(--tt-warm-white);
	--fg-2: rgba(247,246,244,0.82);
	--fg-3: rgba(247,246,244,0.62);
	--line: rgba(247,246,244,0.20);
	--line-strong: rgba(247,246,244,0.36);
}


/* ============================================================
   JOURNAL — page header (mirrors services-header / about-hero / audit-header)
   ============================================================ */
.tt-journal-header {
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	padding: clamp(140px, 16vw, 200px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 80px);
}
.tt-journal-header__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}
.tt-journal-header__eyebrows {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin-bottom: clamp(32px, 4.4vw, 56px);
}
.tt-journal-header__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(40px, 6.4vw, 88px);
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0;
	max-width: 18ch;
	text-wrap: balance;
}
.tt-journal-header__sub {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
	color: rgba(247,246,244,0.72);
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	max-width: 64ch;
	text-wrap: pretty;
}


/* ============================================================
   JOURNAL — index surfaces (categories, lede, grid, pager, subscribe)
   ============================================================ */

.tt-journal-cats,
.tt-journal-lede,
.tt-journal-grid,
.tt-archive-meta {
	background: var(--tt-warm-white);
	color: var(--tt-charcoal);
	padding: clamp(64px, 9vw, 112px) clamp(20px, 4vw, 48px);
}
.tt-journal-cats__inner,
.tt-journal-lede__inner,
.tt-journal-grid__inner,
.tt-archive-meta__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.tt-journal-cats__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(20px, 2.4vw, 28px);
	border-bottom: 0.5px solid rgba(26,26,26,0.12);
}
.tt-journal-cats__grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 0.5px solid rgba(26,26,26,0.12);
	border-left: 0.5px solid rgba(26,26,26,0.12);
}
@media (max-width: 900px) { .tt-journal-cats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tt-journal-cats__grid { grid-template-columns: 1fr; } }
.tt-journal-cats__item {
	border-right: 0.5px solid rgba(26,26,26,0.12);
	border-bottom: 0.5px solid rgba(26,26,26,0.12);
}
.tt-journal-cats__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(24px, 3vw, 36px);
	min-height: clamp(220px, 22vw, 280px);
	color: inherit;
	transition: background 320ms var(--ease-out);
}
.tt-journal-cats__card:hover { background: rgba(26,26,26,0.03); }
.tt-journal-cats__card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.tt-journal-cats__name {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(20px, 1.6vw, 24px);
	line-height: 1.2;
	letter-spacing: -0.012em;
	margin: 0;
	text-wrap: balance;
	color: var(--tt-charcoal);
	max-width: 22ch;
}
.tt-journal-cats__count {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	color: rgba(26,26,26,0.42);
}
.tt-journal-cats__dek {
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(26,26,26,0.7);
	margin: 0;
	text-wrap: pretty;
	max-width: 40ch;
}
.tt-journal-cats__more {
	margin-top: auto;
	padding-top: 18px;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(26,26,26,0.62);
	border-top: 0.5px solid rgba(26,26,26,0.12);
}

.tt-journal-lede__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: clamp(28px, 3vw, 40px);
	padding-bottom: clamp(20px, 2.4vw, 28px);
	border-bottom: 0.5px solid rgba(26,26,26,0.12);
}
.tt-journal-lede__card {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
@media (max-width: 860px) { .tt-journal-lede__card { grid-template-columns: 1fr; } }
.tt-journal-lede__copy { display: flex; flex-direction: column; gap: 18px; }
.tt-journal-lede__cat { display: inline-block; }
.tt-journal-lede__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(28px, 3.8vw, 48px);
	line-height: 1.08;
	letter-spacing: -0.018em;
	margin: 0;
	text-wrap: balance;
	max-width: 22ch;
}
.tt-journal-lede__title a { color: inherit; }
.tt-journal-lede__title a:hover { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 6px; }
.tt-journal-lede__dek {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(26,26,26,0.72);
	margin: 0;
	max-width: 52ch;
	text-wrap: pretty;
}
.tt-journal-lede__meta {
	display: flex; flex-wrap: wrap; gap: 12px;
	font-family: var(--font-display);
	font-weight: 300; font-size: 11px;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: rgba(26,26,26,0.5);
}
.tt-journal-lede__cta { align-self: start; margin-top: 8px; }
.tt-journal-lede__media {
	position: relative; display: block;
	width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
	outline: 0.5px solid rgba(26,26,26,0.12); outline-offset: -0.5px;
	background: #EFEEEA;
}
.tt-journal-lede__media-zoom { position: absolute; inset: 0; transition: transform 640ms var(--ease-out); }
.tt-journal-lede__media:hover .tt-journal-lede__media-zoom { transform: scale(1.03); }
.tt-journal-lede__img { width: 100%; height: 100%; object-fit: cover; }
.tt-journal-lede__slot {
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(0deg,  rgba(26,26,26,0.04) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(26,26,26,0.025) 0 1px, transparent 1px 4px);
}

.tt-journal-grid__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: clamp(28px, 3vw, 40px);
	padding-bottom: clamp(20px, 2.4vw, 28px);
	border-bottom: 0.5px solid rgba(26,26,26,0.12);
}
.tt-journal-grid__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 40px);
}
@media (max-width: 900px) { .tt-journal-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tt-journal-grid__list { grid-template-columns: 1fr; } }

.tt-journal-pager {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	gap: 16px;
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: clamp(20px, 2.4vw, 28px);
	border-top: 0.5px solid rgba(26,26,26,0.12);
}
.tt-journal-pager__link {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--font-display);
	font-weight: 300; font-size: 12px;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--tt-charcoal);
}
.tt-journal-pager__link--prev { justify-self: end; }
.tt-journal-pager__page {
	justify-self: center;
	font-family: var(--font-display);
	font-weight: 300; font-size: 11px;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: rgba(26,26,26,0.5);
}

/* ============================================================
   ARTICLE — single post + archive meta
   ============================================================ */

.tt-crumbs { margin-bottom: clamp(24px, 3vw, 36px); }
.tt-crumbs__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
	font-family: var(--font-display);
	font-weight: 300; font-size: 11px;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: rgba(26,26,26,0.5);
}
.tt-crumbs__link { color: rgba(26,26,26,0.7); }
.tt-crumbs__link:hover { color: var(--tt-charcoal); }
.tt-crumbs__sep { color: rgba(26,26,26,0.3); }
.tt-crumbs__current { color: rgba(26,26,26,0.42); }

.tt-article,
.tt-article-related,
.tt-author {
	background: var(--tt-warm-white);
	color: var(--tt-charcoal);
}

/* Article header — dark band, matches services-header / about-hero / audit-header / journal-header rhythm so the fixed site header reads correctly on first paint. */
/* Article masthead — text panel left, featured image right, full viewport width.
   When there's no featured image (has-hero absent), the text panel spans
   the full width and centres its content like a classic title block. */
.tt-article-masthead {
	background: var(--tt-charcoal);
	color: var(--tt-warm-white);
	display: grid;
	grid-template-columns: 1fr;
}
.tt-article-masthead.has-hero {
	grid-template-columns: 1fr 1fr;
	min-height: 82vh;
}
.tt-article-masthead__text {
	display: flex;
	align-items: center;
	padding: clamp(96px, 11vw, 144px) clamp(20px, 4vw, 56px) clamp(48px, 6vw, 72px);
}
.tt-article-masthead__text-inner {
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
}
.tt-article-masthead.has-hero .tt-article-masthead__text-inner {
	max-width: 560px;
	margin-left: auto;
	margin-right: 0;
}
.tt-article-masthead .tt-crumbs__list   { color: rgba(247,246,244,0.5); }
.tt-article-masthead .tt-crumbs__link   { color: rgba(247,246,244,0.72); }
.tt-article-masthead .tt-crumbs__link:hover { color: var(--tt-warm-white); }
.tt-article-masthead .tt-crumbs__sep    { color: rgba(247,246,244,0.3); }
.tt-article-masthead .tt-crumbs__current { color: rgba(247,246,244,0.5); }
.tt-article-masthead .tt-eyebrow        { color: rgba(247,246,244,0.62); }
.tt-article-masthead__eyebrows {
	display: flex; gap: 24px; align-items: center;
	margin-bottom: clamp(20px, 2.4vw, 32px);
}
.tt-article__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(36px, 4.4vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0 0 clamp(20px, 2.4vw, 32px);
	text-wrap: balance;
	max-width: 18ch;
	color: var(--tt-warm-white);
}
.tt-article__meta {
	display: flex; flex-wrap: wrap; gap: 10px;
	padding-top: clamp(20px, 2.4vw, 28px);
	border-top: 0.5px solid rgba(247,246,244,0.18);
	font-family: var(--font-display);
	font-weight: 300; font-size: 12px;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: rgba(247,246,244,0.62);
}
.tt-article__author { color: var(--tt-warm-white); }
.tt-article__sep    { color: rgba(247,246,244,0.3); }
.tt-article__date--updated { color: var(--tt-sand); }

.tt-article-masthead__media {
	margin: 0;
	position: relative;
	overflow: hidden;
	min-height: 60vh;
}
.tt-article-masthead__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	inset: 0;
}
.tt-article-masthead__caption {
	position: absolute;
	bottom: clamp(20px, 3vw, 32px);
	left: clamp(20px, 3vw, 32px);
	right: clamp(20px, 3vw, 32px);
	font-size: 12px;
	line-height: 1.55;
	color: rgba(247,246,244,0.86);
	font-style: italic;
	max-width: 56ch;
	text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
@media (max-width: 880px) {
	.tt-article-masthead.has-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.tt-article-masthead.has-hero .tt-article-masthead__media {
		order: -1;
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
	.tt-article-masthead.has-hero .tt-article-masthead__text {
		padding-top: clamp(40px, 8vw, 72px);
	}
	.tt-article-masthead.has-hero .tt-article-masthead__text-inner {
		max-width: none;
		margin: 0;
	}
}

.tt-article-body {
	padding: clamp(20px, 3vw, 40px) clamp(20px, 4vw, 48px) clamp(64px, 9vw, 112px);
}
.tt-article-body__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(40px, 5vw, 80px);
	align-items: stretch;
}
.tt-toc { height: 100%; }
@media (max-width: 980px) {
	.tt-article-body__inner { grid-template-columns: 1fr; }
	.tt-toc { height: auto; }
}

.tt-toc { font-family: var(--font-sans); }
.tt-toc__sticky {
	position: sticky;
	top: clamp(96px, 12vh, 128px);
	border-left: 0.5px solid rgba(26,26,26,0.18);
	padding-left: 20px;
}
.tt-toc__sticky .tt-eyebrow { margin-bottom: 18px; }
.tt-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tt-toc__link {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 10px;
	align-items: baseline;
	color: rgba(26,26,26,0.62);
	font-size: 14px;
	line-height: 1.4;
	transition: color 240ms var(--ease-out);
}
.tt-toc__link:hover,
.tt-toc__link[data-active="true"] { color: var(--tt-charcoal); }
.tt-toc__num {
	font-family: var(--font-display);
	font-weight: 300; font-size: 11px;
	letter-spacing: 0.22em; color: rgba(26,26,26,0.4);
}
@media (max-width: 980px) {
	.tt-toc__sticky { position: static; border-left: 0; padding-left: 0; padding-bottom: 24px; border-bottom: 0.5px solid rgba(26,26,26,0.12); margin-bottom: 32px; }
}

/* ============================================================
   Default page template (page.php) — used for static / legal pages.
   Body styling comes from .tt-prose--article below.
   ============================================================ */
.tt-page {
	background: var(--tt-warm-white);
	color: var(--tt-charcoal);
	padding: clamp(72px, 11vw, 152px) clamp(20px, 4vw, 48px) clamp(96px, 12vw, 168px);
}
.tt-page__inner { max-width: 780px; margin: 0 auto; }
.tt-page__head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.tt-page__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(36px, 5.4vw, 64px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--tt-charcoal);
}
.tt-page__body { max-width: none; } /* .tt-prose--article caps at 780; .tt-page__inner already does. */

.tt-prose--article { max-width: 780px; }
.tt-prose--article > * { margin: 0 0 1.1em; }
.tt-prose--article h2 {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.2;
	letter-spacing: -0.012em;
	margin: 2em 0 0.6em;
	text-wrap: balance;
	scroll-margin-top: 96px;
	color: var(--tt-charcoal);
}
.tt-prose--article h3 {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(19px, 1.6vw, 22px);
	line-height: 1.3;
	margin: 1.6em 0 0.4em;
	color: var(--tt-charcoal);
	scroll-margin-top: 96px;
}
.tt-prose--article strong { color: var(--tt-charcoal); font-weight: 500; }
.tt-prose--article p {
	font-size: 17.5px;
	line-height: 1.7;
	color: rgba(26,26,26,0.86);
	text-wrap: pretty;
}
.tt-prose--article ul,
.tt-prose--article ol { padding-left: 22px; }
.tt-prose--article li { font-size: 17px; line-height: 1.7; margin-bottom: 0.4em; color: rgba(26,26,26,0.86); }
.tt-prose--article a {
	color: var(--tt-charcoal);
	background-image: linear-gradient(rgba(26,26,26,0.4), rgba(26,26,26,0.4));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 0.5px;
	transition: background-size 240ms var(--ease-out);
	padding-bottom: 1px;
}
.tt-prose--article a:hover { background-image: linear-gradient(var(--tt-charcoal), var(--tt-charcoal)); }
.tt-prose--article blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 22px;
	border-left: 1px solid var(--tt-warm-taupe);
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.35;
	letter-spacing: -0.012em;
	color: var(--tt-charcoal);
	text-wrap: balance;
	max-width: 38ch;
}
.tt-prose--article figure { margin: 2em 0; }
.tt-prose--article figure img { width: 100%; height: auto; display: block; outline: 0.5px solid rgba(26,26,26,0.12); outline-offset: -0.5px; }
.tt-prose--article figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: rgba(26,26,26,0.55);
	font-style: italic;
	line-height: 1.55;
}
.tt-prose--article hr {
	border: 0;
	height: 1px;
	background: rgba(26,26,26,0.12);
	margin: 2.6em 0;
}
.tt-prose--article code {
	font-family: var(--font-mono);
	font-size: 0.92em;
	background: rgba(196,181,165,0.24);
	padding: 1px 6px;
}
.tt-prose--article pre {
	font-family: var(--font-mono);
	background: var(--bg-sunken);
	padding: 18px 20px;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.55;
	outline: 0.5px solid rgba(26,26,26,0.12);
	outline-offset: -0.5px;
}
.tt-prose--article pre code { background: transparent; padding: 0; }

.tt-article-cta {
	margin: 2.6em 0;
	padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 32px);
	background: #FFFFFF;
	outline: 0.5px solid rgba(26,26,26,0.12);
	outline-offset: -0.5px;
}
.tt-article-cta__inner > * + * { margin-top: 10px; }
.tt-article-cta__title {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.012em;
	margin: 6px 0 0;
}
.tt-article-cta__title a { color: var(--tt-charcoal); }
.tt-article-cta__title a:hover { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 6px; }
.tt-article-cta__dek {
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(26,26,26,0.7);
	margin: 0;
	max-width: 52ch;
}

.tt-article-tags {
	margin-top: 3em;
	padding-top: 1.6em;
	border-top: 0.5px solid rgba(26,26,26,0.12);
}
.tt-article-tags__list {
	list-style: none; margin: 12px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.tt-article-tags__chip {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 300; font-size: 11px;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: rgba(26,26,26,0.62);
	border: 0.5px solid rgba(26,26,26,0.24);
	padding: 6px 12px;
	transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.tt-article-tags__chip:hover {
	color: var(--tt-charcoal);
	border-color: rgba(26,26,26,0.5);
}

.tt-author {
	padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
	border-top: 0.5px solid rgba(26,26,26,0.12);
}
.tt-author__inner {
	max-width: 880px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: clamp(20px, 3vw, 36px);
	align-items: start;
}
@media (max-width: 540px) { .tt-author__inner { grid-template-columns: 1fr; } }
.tt-author__avatar { width: 96px; height: 96px; overflow: hidden; outline: 0.5px solid rgba(26,26,26,0.12); outline-offset: -0.5px; background: #EFEEEA; }
.tt-author__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-author__body > * + * { margin-top: 10px; }
.tt-author__name {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(22px, 2vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.012em;
	margin: 4px 0 0;
}
.tt-author__bio {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(26,26,26,0.72);
	margin: 0;
	max-width: 60ch;
}
.tt-author__links {
	display: flex; flex-wrap: wrap; gap: 20px;
	margin-top: 14px;
}

.tt-article-related {
	padding: clamp(72px, 9vw, 112px) clamp(20px, 4vw, 48px);
	border-top: 0.5px solid rgba(26,26,26,0.12);
}
.tt-article-related__inner { max-width: var(--container-max); margin: 0 auto; }
.tt-article-related__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: clamp(28px, 3vw, 40px);
	padding-bottom: clamp(20px, 2.4vw, 28px);
	border-bottom: 0.5px solid rgba(26,26,26,0.12);
}
.tt-article-related__title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.1;
	letter-spacing: -0.014em;
	margin: 8px 0 0;
	max-width: 22ch;
	text-wrap: balance;
}
.tt-article-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(32px, 4vw, 48px) clamp(28px, 3vw, 40px);
}
@media (max-width: 900px) { .tt-article-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tt-article-related__grid { grid-template-columns: 1fr; } }

.tt-archive-meta__inner {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
@media (max-width: 860px) { .tt-archive-meta__inner { grid-template-columns: 1fr; } }
.tt-archive-meta__lede p {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(26,26,26,0.82);
	max-width: 60ch;
	margin: 0 0 1em;
	text-wrap: pretty;
}
.tt-archive-meta__cta {
	padding: clamp(20px, 2.6vw, 28px);
	background: #FFFFFF;
	outline: 0.5px solid rgba(26,26,26,0.12);
	outline-offset: -0.5px;
}
.tt-archive-meta__cta-link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 10px;
	color: var(--tt-charcoal);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.tt-archive-meta__cta-link:hover { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 6px; }