/* Talkaholics Productions — theme styles.
   Tokens live in theme.json; this file carries the bespoke objects:
   the yellow hero band, marquees, film tiles, case-study tables and the footer. */

body, h1, h2, h3, h4, h5, h6, blockquote, button, input, select, textarea {
	font-family: "Helvetica Neue", Archivo, Arial, sans-serif;
}

:root {
	--tk-ink: #0d0d0d;
	--tk-paper: #f2f2f3;
	--tk-night: #111112;
	--tk-muted: #6b6b70;
	--tk-body: #3d3d42;
	--tk-faint: #8b8b90;
	--tk-surface: #e8e8ea;
	--tk-line: rgba(13, 13, 13, .14);
	--tk-line-soft: rgba(13, 13, 13, .08);
	--tk-accent: #ffbe00;
	--tk-accent-ink: #0d0d0d;
	--tk-gutter: 40px;
	--tk-max: 1560px;
}

@media (max-width: 780px) {
	:root { --tk-gutter: 22px; }
}

body { -webkit-font-smoothing: antialiased; text-wrap: pretty; }

h1, h2, h3, h4, h5, h6 { text-wrap: wrap; }

html, body { overflow-x: clip; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--tk-ink);
	outline-offset: 3px;
}

::selection { background: var(--tk-accent); color: var(--tk-accent-ink); }

/* ---------- Chrome ------------------------------------------------------ */

.tk-brandbar {
	background: #e6e6e9;
	border-bottom: 1px solid var(--tk-line-soft);
}

.tk-brandbar .tk-eyebrow { margin: 0; white-space: nowrap; }

.tk-brandbar__links { display: flex; gap: 6px; flex-wrap: wrap; }

.tk-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
	padding: 6px 15px;
	border: 1px solid rgba(13, 13, 13, .18);
	border-radius: 999px;
	text-decoration: none;
	color: var(--tk-ink);
	white-space: nowrap;
	transition: border-color .2s, background .2s;
}

.tk-pill:hover { border-color: var(--tk-ink); background: rgba(13, 13, 13, .05); color: var(--tk-ink); }

.tk-pill.is-current { background: var(--tk-ink); color: var(--tk-paper); border-color: var(--tk-ink); }

.tk-header {
	position: sticky;
	top: 0;
	z-index: 70;
	background: color-mix(in srgb, var(--tk-accent) 92%, transparent);
	backdrop-filter: blur(14px);
}

.tk-header .wp-block-site-logo img { height: auto; max-height: 120px; width: auto; display: block; }

.tk-nav { gap: 34px; }

.tk-nav .wp-block-navigation { font-size: 15px; }

.tk-nav .wp-block-navigation a { text-decoration: none; }

.tk-btn-block .wp-block-button__link {
	background: var(--tk-ink);
	color: var(--tk-paper);
	border-radius: 999px;
	padding: 12px 26px;
	font-size: 15px;
	font-weight: 500;
}

.tk-btn-block .wp-block-button__link:hover { background: var(--tk-accent); color: var(--tk-accent-ink); }

/* ---------- Type ------------------------------------------------------- */

.tk-eyebrow {
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tk-muted);
	margin: 0 0 18px;
}

.tk-display {
	font-size: clamp(58px, 12vw, 220px);
	font-weight: 500;
	line-height: .84;
	letter-spacing: -.05em;
	text-transform: uppercase;
	margin: 0;
}

.tk-page-title,
.tk-case-title {
	font-size: clamp(48px, 9vw, 168px);
	font-weight: 500;
	line-height: .88;
	letter-spacing: -.045em;
	margin: 0;
	max-width: 16ch;
}

.tk-section-title {
	font-size: clamp(38px, 5.6vw, 92px);
	font-weight: 500;
	line-height: .96;
	letter-spacing: -.04em;
	margin: 0 0 22px;
	max-width: 20ch;
}

.tk-standfirst {
	font-size: 18px;
	line-height: 1.45;
	color: var(--tk-body);
	max-width: 38ch;
}

.tk-lead {
	font-size: clamp(22px, 2.4vw, 34px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.02em;
	margin: 0 0 26px;
	max-width: 34ch;
}

.tk-prose p { font-size: 17px; line-height: 1.6; color: var(--tk-body); max-width: 56ch; }

.tk-meta { font-size: 15px; color: var(--tk-muted); margin: 0; }

.tk-muted { color: var(--tk-muted); font-size: 15px; line-height: 1.6; max-width: 30ch; }

.tk-note, .tk-colophon { font-size: 13px; color: var(--tk-faint); margin: 12px 0 0; }

.tk-backlink { font-size: 14px; margin: 0 0 30px; }
.tk-backlink a { color: var(--tk-muted); text-decoration: none; }

/* ---------- Buttons ---------------------------------------------------- */

.tk-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	padding: 14px 28px;
	border-radius: 999px;
	transition: background .25s, border-color .25s, color .25s;
}

.tk-btn--solid { background: var(--tk-ink); color: var(--tk-paper); }
.tk-btn--solid:hover { background: var(--tk-accent); color: var(--tk-accent-ink); }
.tk-btn--solid.is-static { pointer-events: none; }

.tk-btn--ghost { border: 1px solid rgba(13, 13, 13, .2); color: var(--tk-ink); }
.tk-btn--ghost:hover { border-color: var(--tk-ink); background: rgba(13, 13, 13, .04); color: var(--tk-ink); }

.tk-dark .tk-btn--ghost { border-color: rgba(242, 242, 243, .3); color: var(--tk-paper); }
.tk-dark .tk-btn--ghost:hover { border-color: var(--tk-paper); background: rgba(242, 242, 243, .08); }

/* ---------- Hero ------------------------------------------------------- */

.tk-hero-band {
	background: linear-gradient(var(--tk-accent) 0, var(--tk-accent) 68%, var(--tk-paper) 68%, var(--tk-paper) 100%);
	padding-top: 34px;
}

.tk-hero-band .tk-eyebrow { color: rgba(13, 13, 13, .62); }

.tk-hero-title {
	font-size: clamp(56px, 10.6vw, 196px);
	font-weight: 500;
	line-height: .88;
	letter-spacing: -.045em;
	margin: 0;
	max-width: 15ch;
}

/* ---------- Reel & players --------------------------------------------- */

.tk-reel,
.tk-hero-film {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	background: var(--tk-ink);
	aspect-ratio: 21 / 9;
	display: block;
}

.tk-hero-film { aspect-ratio: 16 / 9; border-radius: 22px; margin-top: 46px; }

.tk-hero-film.is-empty {
	background: var(--tk-surface);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tk-reel > img,
.tk-hero-film > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .86;
	transition: transform 1.1s ease;
}

.tk-reel:hover > img { transform: scale(1.03); }

.tk-reel__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, .62), rgba(10, 10, 10, .06));
	pointer-events: none;
}

.tk-reel__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 34px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
}

.tk-reel__caption {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(242, 242, 243, .82);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tk-hero-film .tk-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.tk-play {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	background: var(--tk-paper);
	color: var(--tk-ink);
	border: 0;
	padding: 17px 32px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .25s, color .25s;
}

.tk-play:hover { background: var(--tk-accent); color: var(--tk-accent-ink); }

.tk-play--small { padding: 14px 26px; font-size: 15px; }

.tk-dot { width: 9px; height: 9px; background: var(--tk-accent); border-radius: 999px; display: inline-block; flex: none; }

.tk-awaiting {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tk-faint);
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
}

/* ---------- Marquee ----------------------------------------------------- */

.tk-marquee { overflow: hidden; }

.tk-marquee--rule {
	border-top: 1px solid rgba(13, 13, 13, .12);
	border-bottom: 1px solid rgba(13, 13, 13, .12);
	padding: 16px 0;
	margin: 64px 0;
}

.tk-marquee__run {
	display: flex;
	width: max-content;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.tk-marquee__run > span {
	font-size: 15px;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 0 30px;
	white-space: nowrap;
}

.tk-marquee--display .tk-marquee__run > span {
	font-family: Anton, Impact, sans-serif;
	font-size: clamp(52px, 9vw, 150px);
	line-height: 1;
	letter-spacing: -.01em;
	text-transform: uppercase;
	padding: 0 .28em;
}

.tk-marquee--display .tk-marquee__run:first-child { margin-bottom: -2vw; }

@keyframes tk-marq-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tk-marq-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
	.tk-marquee__run { animation: none !important; }
}

/* ---------- Film grid & rows -------------------------------------------- */

.tk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 60px; }

.tk-chip {
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 11px 22px;
	border: 1px solid rgba(13, 13, 13, .2);
	background: transparent;
	color: var(--tk-ink);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
}

.tk-chip:hover { border-color: var(--tk-ink); background: rgba(13, 13, 13, .04); }
.tk-chip.is-active { background: var(--tk-ink); border-color: var(--tk-ink); color: var(--tk-paper); }

.tk-film-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 56px 40px;
}

.tk-film-card { display: block; text-decoration: none; color: inherit; }

.tk-film-card[hidden] { display: none; }

.tk-film-card__media {
	display: block;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--tk-ink);
}

.tk-film-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
}

.tk-film-card:hover .tk-film-card__media img { transform: scale(1.04); }

.tk-film-card__title {
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.03em;
	text-transform: uppercase;
	margin: 20px 0 8px;
}

.tk-film-rows { display: flex; flex-direction: column; gap: 90px; }

.tk-film-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 50px;
	align-items: center;
}

.tk-film-row__title {
	font-size: clamp(38px, 5.4vw, 82px);
	font-weight: 500;
	line-height: .92;
	letter-spacing: -.035em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.tk-film-row__title a { text-decoration: none; color: inherit; }

.tk-film-row__line { font-size: 17px; line-height: 1.5; margin: 8px 0 26px; max-width: 34ch; color: var(--tk-body); }

.tk-film-row__media {
	display: block;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--tk-ink);
	transform: rotate(-1.4deg);
	transition: transform .7s ease;
}

.tk-film-row__media img { width: 100%; height: 100%; object-fit: cover; }

.tk-film-row.is-flipped .tk-film-row__media { transform: rotate(1.4deg); order: -1; }

.tk-film-row .tk-film-row__media { will-change: transform; backface-visibility: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.tk-film-row .tk-film-row__media:hover,
.tk-film-row.is-flipped .tk-film-row__media:hover { transform: rotate(0deg) scale(1.015); }
.tk-film-row__media img { transition: none; transform: none; }
.tk-film-row__media:hover img { transform: none; }

@media (max-width: 781px) {
	.tk-film-row.is-flipped .tk-film-row__media { order: 0; }
}

/* ---------- Case study tables ------------------------------------------- */

.tk-rows { margin: 0; }

.tk-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--tk-line);
}

.tk-row dt { font-size: 14px; color: var(--tk-muted); margin: 0; }
.tk-row dd { font-size: 16px; font-weight: 500; text-align: right; margin: 0; }
.tk-rows--lead .tk-row dt { font-size: 18px; font-weight: 500; color: var(--tk-ink); }
.tk-rows--lead .tk-row dd { font-size: 15px; font-weight: 400; color: var(--tk-muted); }
.tk-row dd.is-strong { font-size: 18px; }

.tk-two-col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 50px;
}

.tk-stills {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.tk-still { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tk-surface); }
.tk-still img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tk-next {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(13, 13, 13, .16);
	padding: 40px 0;
	text-decoration: none;
	color: inherit;
	transition: opacity .3s;
}

.tk-next:hover { opacity: .6; color: inherit; }

.tk-next .tk-eyebrow { display: block; margin-bottom: 10px; }

.tk-next__title {
	display: block;
	font-size: clamp(32px, 4.4vw, 64px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.035em;
	text-transform: uppercase;
}

.tk-arrow {
	flex: none;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(13, 13, 13, .24);
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Group cards -------------------------------------------------- */

.tk-group-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 22px;
}

.tk-group-card {
	border-radius: 20px;
	border: 1px solid rgba(13, 13, 13, .16);
	padding: 34px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 300px;
}

.tk-group-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.tk-group-card__top .tk-eyebrow { margin: 0; }

.tk-dotline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tk-body);
}

.tk-group-card__name {
	font-size: clamp(28px, 2.9vw, 40px);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -.03em;
	margin: 0;
	max-width: 14ch;
}

.tk-group-card__blurb { font-size: 16px; line-height: 1.55; margin: 0; color: var(--tk-body); flex: 1; }

.tk-group-card .tk-btn { align-self: flex-start; }

/* ---------- Dark sections ------------------------------------------------ */

.tk-dark,
.tk-section-dark {
	background: var(--tk-night);
	color: var(--tk-paper);
}

.tk-dark .tk-eyebrow,
.tk-section-dark .tk-eyebrow { color: rgba(242, 242, 243, .6); }

.tk-dark .tk-standfirst,
.tk-section-dark .tk-standfirst { color: rgba(242, 242, 243, .7); }

.tk-dark a,
.tk-section-dark a { color: var(--tk-paper); }

.tk-dark a:hover,
.tk-section-dark a:hover { color: var(--tk-accent); }

/* ---------- Services list ------------------------------------------------ */

.tk-service-list { border-top: 1px solid rgba(242, 242, 243, .16); }

.tk-service {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
	padding: 50px 0;
	border-bottom: 1px solid rgba(242, 242, 243, .16);
	align-items: start;
}

.tk-service__title {
	font-size: clamp(30px, 4vw, 60px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.035em;
	margin: 10px 0 0;
	max-width: 16ch;
}

.tk-service__blurb { font-size: 17px; line-height: 1.6; margin: 0 0 22px; max-width: 44ch; color: rgba(242, 242, 243, .74); }

.tk-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.tk-tag {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	border: 1px solid rgba(242, 242, 243, .26);
	padding: 8px 16px;
	border-radius: 999px;
	color: rgba(242, 242, 243, .82);
}

/* ---------- Stats & capabilities ------------------------------------------ */

.tk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; }

.tk-stat__n { font-size: clamp(38px, 4.4vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.tk-stat__label { font-size: 14px; line-height: 1.4; margin-top: 8px; color: var(--tk-muted); }

/* ---------- Forms ---------------------------------------------------------- */

.tk-form-card {
	background: var(--tk-paper);
	color: var(--tk-ink);
	border-radius: 22px;
	padding: 38px;
}

.tk-form-card input[type="text"],
.tk-form-card input[type="email"],
.tk-form-card input[type="tel"],
.tk-form-card select,
.tk-form-card textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 15px;
	background: var(--tk-surface);
	border: 1px solid transparent;
	color: var(--tk-ink);
	transition: border-color .2s;
}

.tk-form-card input[type="text"],
.tk-form-card input[type="email"],
.tk-form-card input[type="tel"],
.tk-form-card select { height: 52px; padding: 0 18px; border-radius: 999px; }

.tk-form-card textarea { min-height: 118px; padding: 16px 18px; border-radius: 18px; resize: vertical; }

.tk-form-card input:focus,
.tk-form-card textarea:focus,
.tk-form-card select:focus { border-color: var(--tk-ink); outline: none; }

.tk-form-card label { display: block; font-size: 14px; margin-bottom: 8px; }

.tk-form-card .wpcf7-form > p { margin: 0 0 18px; }

.tk-form-card input[type="submit"],
.tk-form-card .wpcf7-submit {
	width: 100%;
	height: 56px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	background: var(--tk-ink);
	color: var(--tk-paper);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .25s, color .25s;
}

.tk-form-card input[type="submit"]:hover,
.tk-form-card .wpcf7-submit:hover { background: var(--tk-accent); color: var(--tk-accent-ink); }

/* ---------- Footer --------------------------------------------------------- */

.tk-footer { border-top: 1px solid var(--tk-line); background: var(--tk-paper); }

.tk-wordmark {
	font-size: clamp(56px, 14vw, 240px);
	font-weight: 500;
	line-height: .82;
	letter-spacing: -.055em;
	text-transform: uppercase;
	margin: 0 0 50px;
}

.tk-footer-cards {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 36px;
	border-bottom: 1px solid rgba(13, 13, 13, .12);
}

.tk-footer-card {
	flex: 1 1 220px;
	border-radius: 16px;
	border: 1px solid rgba(13, 13, 13, .16);
	padding: 22px 24px;
	text-decoration: none;
	color: var(--tk-ink);
	transition: background .25s, border-color .25s;
}

.tk-footer-card:hover { background: var(--tk-surface); border-color: rgba(13, 13, 13, .3); color: var(--tk-ink); }

.tk-footer-card.is-current { background: var(--tk-ink); color: var(--tk-paper); border-color: var(--tk-ink); }
.tk-footer-card.is-current .tk-footer-card__tag { color: rgba(242, 242, 243, .62); }

.tk-footer-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tk-footer-card__name { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.tk-footer-card__tag { display: block; font-size: 14px; margin-top: 6px; color: var(--tk-muted); }

.tk-colophon { margin-top: 44px; padding-top: 18px; border-top: 1px solid rgba(13, 13, 13, .12); }

/* ---------- Editor niceties -------------------------------------------------- */

.editor-styles-wrapper .tk-marquee__run { animation: none; }
.editor-styles-wrapper .tk-header { position: static; }


/* ---------- Full-bleed safety net --------------------------------------
   Colour bands (hero, marquee, dark sections) must touch the screen edges
   whatever wrapper they sit in; the text inside them stays capped at 1560px
   by each band's own constrained layout. */

.tk-main { max-width: none; }

.tk-main > .alignfull,
.tk-main > .wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: auto;
}

.tk-main > .wp-block-post-content,
.tk-main > .wp-block-group:not(.alignfull) {
	max-width: none;
}

/* Unaligned blocks dropped straight into a page still get a column. */
.wp-block-post-content > :not(.alignfull):not(.alignwide) {
	max-width: 1560px;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-post-content > .alignwide {
	max-width: 1560px;
	margin-left: auto;
	margin-right: auto;
}


/* ---------- Side gutters -------------------------------------------------
   Matches the prototype: every band runs edge to edge, and the content inside
   it sits in a 1560px column with a 40px (22px on phones) gutter either side.
   !important beats the padding:0 that older saved page markup carries. */

.tk-brandbar,
.tk-header,
.tk-footer,
.tk-main > .wp-block-group,
.tk-main .wp-block-post-content > .wp-block-group,
.tk-main .wp-block-post-content > .alignfull:not(.is-layout-constrained) > .wp-block-group.is-layout-constrained {
	padding-left: var(--tk-gutter) !important;
	padding-right: var(--tk-gutter) !important;
}

.tk-main > .wp-block-group .wp-block-post-content > .wp-block-group { padding-left: 0 !important; padding-right: 0 !important; }

/* Nested constrained groups otherwise cap their children at 1180px. */
.tk-service-list > *,
.tk-form-card > *,
.tk-stat > * { max-width: none; }

/* Home "Our work speaks" is a notch larger than the Work index title. */
h2.tk-display { font-size: clamp(64px, 13vw, 240px); }

/* Header sits below the group switcher bar, as in the prototype. */
.tk-header { top: 0; }

/* ---------- Services list, corrected -------------------------------------
   Two columns: the number and title on the left, the blurb and tags on the
   right, both aligned to the top of the row. The srcless placeholder figures
   the pattern used to carry are hidden, so no empty third column. */

.tk-service {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 40px 70px;
	padding: 44px 0;
}

.tk-service > .wp-block-image:not(:has(img[src])) { display: none; }

.tk-service__title { margin-top: 6px; }

.tk-service__blurb { margin-bottom: 20px; max-width: 46ch; }

@media (max-width: 860px) {
	.tk-service { grid-template-columns: 1fr; gap: 20px; padding: 36px 0; }
	.tk-service__blurb { max-width: none; }
}


/* ---------- Awards, as rows ----------------------------------------------
   Name left, detail right, a hairline under each with an arrow at its end —
   matching the original. Replaces the bulleted list. */

.tk-award { padding: 22px 0; }

.tk-award__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: 16px;
}

.tk-award__name { font-size: 19px; font-weight: 500; margin: 0; }

.tk-award__detail { font-size: 15px; color: var(--tk-body); text-align: right; margin: 0; }

.tk-award::after {
	content: "";
	display: block;
	height: 1px;
	background: rgba(13, 13, 13, .28);
	-webkit-mask: linear-gradient(90deg, #000 calc(100% - 14px), transparent 0);
	mask: linear-gradient(90deg, #000 calc(100% - 14px), transparent 0);
}

.tk-award__top + * { margin-top: 0; }

.tk-awards { list-style: none; padding-left: 0; }

/* ---------- Pull quote ----------------------------------------------------
   Display-scale, no rule and no indent — the original sets the quote as
   type, not as a browser blockquote. */

.tk-pullquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(28px, 3.6vw, 54px);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -.03em;
	max-width: 26ch;
}

.tk-pullquote p {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	margin: 0;
}

.tk-pullquote cite { display: none; }

.tk-brands { font-size: 16px; line-height: 1.55; color: var(--tk-body); max-width: 32ch; }


/* ---------- Core block reset ---------------------------------------------
   WordPress ships opinionated defaults for quotes, lists, separators and
   captions that fight the design (the blockquote rule, bullet markers,
   short centred separators). The theme owns these instead. */

.tk-main blockquote,
.wp-block-quote {
	border: 0;
	padding: 0;
	margin: 0;
	font-style: normal;
}

.wp-block-quote cite { font-style: normal; }

.tk-main .wp-block-list { padding-left: 1.1em; }

.tk-main .wp-block-separator {
	max-width: none;
	width: 100%;
	height: 1px;
	border: 0;
	background: var(--tk-line);
	margin: 0;
	opacity: 1;
}

.tk-section-dark .wp-block-separator,
.tk-dark .wp-block-separator { background: rgba(242, 242, 243, .16); }

.tk-main figure { margin: 0; }

.tk-main .wp-block-image figcaption { font-size: 13px; color: var(--tk-faint); }

/* Columns should stack at the same breakpoint the design uses, not core's. */
@media (max-width: 860px) {
	.tk-main .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap; }
	.tk-main .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
}


/* ---------- Homepage services rows ---------------------------------------
   Title left at display scale, a circular arrow at the right, tags right
   aligned underneath — the whole row is the link. */

.tk-srow {
	display: block;
	padding: 44px 0 36px;
	border-bottom: 1px solid rgba(242, 242, 243, .16);
	transition: opacity .3s;
}

.tk-srow:hover { opacity: .62; }

.tk-srow__title {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
	font-size: clamp(32px, 4.6vw, 72px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.035em;
	margin: 0;
	max-width: none;
}

.tk-srow__title a { text-decoration: none; color: inherit; flex: 1; min-width: 0; }

.tk-srow__title::after {
	content: "";
	flex: none;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(242, 242, 243, .32);
	border-radius: 999px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f2f2f3' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M7 17L17 7M17 7H9M17 7v8'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.tk-tags--end { justify-content: flex-end; margin-top: 22px; }

@media (max-width: 700px) {
	.tk-srow__title::after { width: 40px; height: 40px; background-size: 15px 15px; }
	.tk-tags--end { justify-content: flex-start; }
}

/* Awards rule: hairline with the arrow sitting at its right end. */

.tk-award::after {
	content: "";
	display: block;
	height: 14px;
	-webkit-mask: none;
	mask: none;
	background:
		linear-gradient(rgba(13, 13, 13, .28), rgba(13, 13, 13, .28)) left center / calc(100% - 12px) 1px no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(13,13,13,0.28)' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") right center / 14px 14px no-repeat;
}


/* ---------- v1.1.3: side-by-side fixes against the prototype ------------- */

/* No stray 24px gaps between header, sections and footer. */
body .wp-site-blocks > * { margin-block-start: 0; }
.tk-main .wp-block-post-content > * { margin-block-start: 0; }
.tk-main .wp-block-post-content > .tk-marquee--rule { margin-block: 64px; }
.tk-hero-band > .tk-reel { margin-block-start: 0; }

/* Header sticks for the whole page, not just inside its wrapper. */
.tk-header-wrap { display: contents; }
.tk-header .wp-block-site-logo img { height: 120px; max-height: none; }

/* Headings with a ch max-width sit on the column's left edge, not centred. */
.is-layout-constrained > :is(.tk-hero-title, .tk-page-title, .tk-case-title, .tk-section-title, .tk-display) {
	margin-left: max(0px, (100% - var(--tk-max)) / 2) !important;
	margin-right: auto !important;
}

/* Hero: play icon on "Watch the reel". */
.tk-hero-band .wp-block-button:not(.is-style-outline) .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; }
.tk-hero-band .wp-block-button:not(.is-style-outline) .wp-block-button__link::before {
	content: ""; width: 13px; height: 13px; background: currentColor;
	clip-path: polygon(25% 16%, 83% 50%, 25% 84%);
}
.tk-hero-band .is-style-outline .wp-block-button__link { border-color: rgba(13, 13, 13, .38); }
.tk-reel > img { opacity: .88; }

/* Marquees always run edge to edge, even inside a padded section. */
.tk-marquee {
	width: 100vw;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Section intro: eyebrow | title + standfirst, as a one-third / two-thirds split. */
.wp-block-column > .tk-eyebrow:only-child { margin-top: 8px; }
.tk-section-title + .tk-standfirst { max-width: 44ch; line-height: 1.5; margin: 0; }
.tk-section-title--xl { font-size: clamp(42px, 6.6vw, 110px); line-height: .94; max-width: 16ch; margin-bottom: 26px; }

/* About. */
.tk-lead { font-size: clamp(26px, 3.5vw, 58px); line-height: 1.14; letter-spacing: -.03em; max-width: none; margin: 0; }
.wp-block-column.is-vertically-aligned-bottom > * { margin-block-start: 0; }
.wp-block-column.is-vertically-aligned-bottom > .tk-standfirst { margin: 0 0 26px; max-width: 34ch; line-height: 1.5; }
.wp-block-column.is-vertically-aligned-bottom > .wp-block-separator { margin: 0 0 30px; }
.tk-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tk-stats-grid > * { margin: 0 !important; }
.tk-stat p { margin: 0; }
.tk-stat .tk-stat__label { margin-top: 8px; }

/* Contact band: greyscale still behind, founder card. */
.tk-contact-band { position: relative; isolation: isolate; background: var(--tk-ink); }
.tk-contact-band::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: url("https://img.youtube.com/vi/MNs08ANVVtw/maxresdefault.jpg") center / cover no-repeat;
	filter: grayscale(1); opacity: .26;
}
.tk-talk-title { font-size: clamp(48px, 7.6vw, 124px); line-height: .92; letter-spacing: -.04em; }
.tk-contact-band .tk-talk-title + .tk-standfirst { color: rgba(242, 242, 243, .72); max-width: 32ch; line-height: 1.4; }
.tk-contact-band .wp-block-separator { background: rgba(242, 242, 243, .24); }
.tk-contact-band h4 { margin: 0 0 12px; font-weight: 500; }
.tk-contact-band h4 + .tk-standfirst { font-size: 15px; line-height: 1.6; color: rgba(242, 242, 243, .68); margin: 0; }
.tk-founder { background: rgba(242, 242, 243, .1); border-radius: 20px; padding: 20px; gap: 20px; margin-top: 46px !important; }
.tk-founder p { margin: 0; }
.tk-founder__photo {
	width: 104px; height: 104px; flex: none; border-radius: 16px; background: rgba(242, 242, 243, .14);
	display: flex; align-items: center; justify-content: center; text-align: center;
	font-size: 13px; line-height: 1.3; color: rgba(242, 242, 243, .55);
}
.tk-founder__role { font-size: 15px; color: rgba(242, 242, 243, .6); }
.tk-founder__name { font-size: 24px; font-weight: 500; margin: 4px 0 14px !important; }
.tk-btn-light .wp-block-button__link { background: var(--tk-paper); color: var(--tk-ink); padding: 11px 22px; font-size: 15px; font-weight: 500; border-radius: 999px; }
.tk-btn-light .wp-block-button__link:hover { background: var(--tk-accent); color: var(--tk-accent-ink); }

/* Footer. */
.tk-footer a { text-decoration: none; color: var(--tk-ink); }
.tk-footer a:hover { color: var(--tk-muted); }
.tk-footer-link { margin: 0 0 10px; font-size: 16px; }
.tk-socials { display: flex; gap: 18px; flex-wrap: wrap; font-size: 16px; }

/* About scroll reveal (driven by theme.js). */
.tk-lead { max-width: 26ch; }
.tk-reveal__w { color: #bcbcc2; transition: color .35s ease; }
.tk-reveal__w.is-lit { color: var(--tk-ink); }
.tk-section-dark .tk-reveal__w { color: rgba(242, 242, 243, .3); }
.tk-section-dark .tk-reveal__w.is-lit { color: var(--tk-paper); }

/* About stills fill their frames. */
.wp-block-column.is-vertically-aligned-bottom > .wp-block-image { border-radius: 18px; overflow: hidden; }
.wp-block-column.is-vertically-aligned-bottom > .wp-block-image img { width: 100%; height: auto; display: block; object-fit: cover; }

/* Services rows: number, title, blurb and tags all share their column's left edge
   (the inner groups were centring anything narrower than the column). */
.tk-service > .wp-block-group > * { margin-left: 0 !important; margin-right: 0 !important; }
.tk-service > .wp-block-group > .tk-service__blurb { max-width: 44ch; }
.tk-service > .wp-block-group > .tk-eyebrow { font-size: 14px; letter-spacing: 0; color: rgba(242, 242, 243, .5); margin-bottom: 0; }
.tk-service .tk-service__title { margin-top: 10px; }

/* Hover, matching the homepage rows. */
.tk-service { transition: opacity .3s; }
.tk-service:hover { opacity: .62; }
.tk-tag { transition: border-color .2s, color .2s; }
.tk-service:hover .tk-tag,
.tk-srow:hover .tk-tag { border-color: rgba(242, 242, 243, .6); color: var(--tk-paper); }
.tk-srow { cursor: pointer; }

.tk-photo-slot { border-radius: 18px; background: var(--tk-surface); color: var(--tk-muted); font-size: 13px; line-height: 1.3; display: flex; align-items: center; justify-content: center; text-align: center; margin-bottom: 18px; }

/* Footer logo. */
.tk-footer .wp-block-site-logo { display: flex !important; justify-content: center !important; width: 100% !important; max-width: none !important; text-align: center; margin: 0 auto 40px !important; float: none !important; }
.tk-footer .wp-block-site-logo a { display: inline-block; }
.tk-footer .wp-block-site-logo img { width: 150px !important; max-width: 150px !important; height: auto !important; }