/* ==========================================================================
   TechTechniques theme: component styles. Tokens live in theme.json.
   ========================================================================== */

:root {
	--ttc-accent: var(--wp--preset--color--accent);
	--ttc-border: var(--wp--preset--color--border);
	--ttc-surface: var(--wp--preset--color--surface);
	--ttc-muted: var(--wp--preset--color--muted);
	--ttc-radius: var(--wp--custom--radius, 6px);
	--ttc-glow: var(--wp--custom--glow);
	--ttc-glow-strong: var(--wp--custom--glow-strong);
	--ttc-tint: rgba(46, 211, 198, 0.07);
	--ttc-line: rgba(46, 211, 198, 0.18);
	--ttc-header-h: 64px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ttc-header-h) + 1rem); }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--ttc-accent); color: #06201d; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--ttc-accent);
	outline-offset: 3px;
	border-radius: 2px;
}
img { max-width: 100%; height: auto; }
.screen-reader-text:not(:focus) { position: absolute !important; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
main { min-height: 50vh; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- Header ---------- */
.ttc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(15, 24, 40, 0.88);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--ttc-line);
}
.admin-bar .ttc-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ttc-header { top: 0; } }
.ttc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--ttc-header-h);
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}
.ttc-header__nav { display: flex; align-items: center; gap: 1.75rem; }
.ttc-header .wp-block-navigation a { color: var(--wp--preset--color--text); font-size: 0.8125rem; }
.ttc-header .wp-block-navigation a:hover { color: var(--ttc-accent); text-decoration: none; }
.ttc-header .wp-block-button__link { font-size: 0.8125rem; padding: 0.4rem 0.9rem; }
.ttc-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--bg) !important;
	color: var(--wp--preset--color--text) !important;
	padding: 2rem;
}
.ttc-header .wp-block-navigation__responsive-container.is-menu-open a { font-size: 1.25rem; }
.ttc-header .wp-block-navigation__responsive-container-open,
.ttc-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--text); }
@media (max-width: 599px) {
	.ttc-header .ttc-header__cta { display: none; }
}

.ttc-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--wp--preset--color--text); line-height: 1.15; }
.ttc-brand:hover { text-decoration: none; }
.ttc-brand__mark {
	width: 104px; /* 2.08:1 mark at 50px tall */
	height: 50px;
	flex: none;
	background: url(../svg/logo-tm.svg?v=gradient) center / contain no-repeat;
}
.ttc-brand__name { display: block; font-weight: 600; font-size: 0.95rem; color: #fff; }
.ttc-brand__tag { display: block; font-size: 0.65rem; color: var(--ttc-muted); letter-spacing: 0.01em; }

/* ---------- Footer ---------- */
.ttc-footer { border-top: 1px solid var(--ttc-line); background: #0d1626; font-size: 0.8125rem; color: var(--ttc-muted); }
.ttc-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}
.ttc-footer p { margin: 0; }

/* ---------- Generic decorations ---------- */
.is-style-rule {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.is-style-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 2rem;
	background: linear-gradient(90deg, var(--ttc-border), transparent);
}
.is-style-rule em { font-style: normal; color: var(--ttc-accent); font-size: 0.6em; font-weight: 500; margin-left: 0.25rem; }

.is-style-glow {
	text-transform: uppercase;
	color: var(--ttc-accent) !important;
	letter-spacing: 0.04em;
	font-weight: 700;
	text-shadow: 0 0 18px rgba(46, 211, 198, 0.55), 0 0 42px rgba(46, 211, 198, 0.25);
}

.is-style-glow-card {
	background: var(--ttc-surface);
	border-radius: var(--ttc-radius);
	box-shadow: var(--ttc-glow);
	padding: clamp(1rem, 2.5vw, 1.5rem);
}
.is-style-callout {
	background: var(--ttc-tint);
	border: 1px solid rgba(46, 211, 198, 0.45);
	border-radius: 4px;
	padding: 0.85rem 1rem;
	color: #9fe9e2;
	font-size: 0.875rem;
}
.is-style-callout p { margin: 0; }
.is-style-callout p + p { margin-top: 0.5rem; }

.is-style-fieldset {
	position: relative;
	border: 1px solid var(--ttc-border);
	border-radius: var(--ttc-radius);
	box-shadow: 0 0 22px rgba(46, 211, 198, 0.12);
	padding: 1.75rem 1.25rem 1.25rem;
	margin-top: 0.9rem;
}
.is-style-fieldset > :first-child {
	position: absolute;
	top: 0;
	left: 0.75rem;
	transform: translateY(-55%);
	margin: 0;
	padding: 0 0.5rem;
	background: var(--wp--preset--color--bg);
	color: var(--ttc-accent);
	font-size: 1rem;
	font-weight: 500;
}

.wp-block-button.is-style-outline-glow .wp-block-button__link {
	background: transparent;
	color: var(--ttc-accent);
	box-shadow: var(--ttc-glow);
	border: 0;
}
.wp-block-button.is-style-outline-glow .wp-block-button__link:hover { background: var(--ttc-tint); }

.is-style-links { list-style: none; padding: 0; margin: 0; }
.is-style-links li { margin: 0.2rem 0; }
.is-style-links a, .is-style-links li { color: var(--ttc-accent); }

.has-circuit { position: relative; isolation: isolate; }
.has-circuit::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 0 0 30%;
	background: url(../svg/circuit.svg) right center / auto 100% no-repeat;
	opacity: 0.6;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
	mask-image: linear-gradient(90deg, transparent, #000 40%);
}

.ttc-icon { width: 1.5em; height: 1.5em; color: var(--ttc-accent); }
.ttc-empty { color: var(--ttc-muted); font-style: italic; }

/* ---------- Laptop / browser mockups ---------- */
.ttc-laptop { position: relative; width: 100%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)); }
.ttc-laptop__lid {
	background: #07090d;
	border-radius: 12px 12px 0 0;
	padding: 3% 3% 3.5%;
	box-shadow: inset 0 0 0 2px #2b313b;
	position: relative;
}
.ttc-laptop__lid::before { /* camera */
	content: "";
	position: absolute;
	top: 1.2%;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #232a35;
	transform: translateX(-50%);
}
.ttc-laptop__screen { aspect-ratio: 16 / 10; overflow: hidden; background: #000; border-radius: 2px; }
.ttc-laptop__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ttc-laptop__base {
	position: relative;
	aspect-ratio: 100 / 3;
	width: 114%;
	margin-left: -7%;
	background: linear-gradient(180deg, #d9dde3 0%, #a7adb6 55%, #6c727c 100%);
	border-radius: 0 0 14px 14px / 0 0 100% 100%;
}
.ttc-laptop__base::before { /* opening notch */
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 14%;
	height: 45%;
	transform: translateX(-50%);
	background: #8e949d;
	border-radius: 0 0 6px 6px;
}
.ttc-laptop--sm .ttc-laptop__lid { border-radius: 6px 6px 0 0; }

/* core/image laptop style */
.wp-block-image.is-style-laptop { position: relative; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)); }
.wp-block-image.is-style-laptop img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
	border: clamp(6px, 1.6vw, 12px) solid #07090d;
	border-bottom-width: clamp(8px, 1.9vw, 14px);
	border-radius: 12px 12px 0 0;
	box-shadow: 0 0 0 2px #2b313b;
}
.wp-block-image.is-style-laptop::after {
	content: "";
	display: block;
	height: clamp(6px, 1.4vw, 14px);
	width: 114%;
	margin-left: -7%;
	background: linear-gradient(180deg, #d9dde3 0%, #a7adb6 55%, #6c727c 100%);
	border-radius: 0 0 14px 14px / 0 0 100% 100%;
}

/* core/image browser-window style */
.wp-block-image.is-style-browser {
	background: #1a2333;
	border: 1px solid #2b3a52;
	border-radius: 8px;
	padding: 26px 0 0;
	overflow: hidden;
	position: relative;
	box-shadow: var(--ttc-glow);
}
.wp-block-image.is-style-browser::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 12px;
	width: 46px;
	height: 9px;
	background:
		radial-gradient(circle at 4.5px 4.5px, #ff5f57 4px, transparent 4.5px),
		radial-gradient(circle at 21.5px 4.5px, #febc2e 4px, transparent 4.5px),
		radial-gradient(circle at 38.5px 4.5px, #28c840 4px, transparent 4.5px);
}
.wp-block-image.is-style-browser img { display: block; width: 100%; }

/* ---------- Chips ---------- */
.ttc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
.ttc-chips li {
	border: 1px solid var(--ttc-border);
	color: var(--ttc-accent);
	font-size: 0.75rem;
	line-height: 1;
	padding: 0.35rem 0.5rem;
	border-radius: 3px;
	background: rgba(46, 211, 198, 0.04);
}

/* ---------- Logos ---------- */
.ttc-logo { display: block; width: auto; object-fit: contain; }
.ttc-logo--white { filter: brightness(0) invert(1); }
.ttc-logo--invert { filter: grayscale(1) invert(1) contrast(1.4); mix-blend-mode: screen; }

/* ---------- Project card ---------- */
.ttc-card {
	--ttc-hero: #1d4fb8;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ttc-surface);
	border-radius: var(--ttc-radius);
	box-shadow: var(--ttc-glow);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ttc-card:hover { box-shadow: var(--ttc-glow-strong); transform: translateY(-2px); }
.ttc-card__media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9.5;
	margin: 0.5rem 0.5rem 0;
	border-radius: 4px;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--ttc-hero) 70%, transparent) 0%, transparent 70%),
		linear-gradient(160deg, #0f1d36, #0a1426);
}
.ttc-card__media .ttc-laptop { width: 82%; margin-top: 3%; }
.ttc-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 0.75rem 1rem; flex: 1; }
.ttc-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.ttc-card__title { margin: 0; font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.25; }
.ttc-card__title a { color: #fff; }
.ttc-card__title a::after { content: ""; position: absolute; inset: 0; }
.ttc-card { position: relative; }
.ttc-card__logo { height: 34px; max-width: 150px; flex: none; } /* wide room for wordmarks; object-fit keeps square logos 34px */
.ttc-card__summary { margin: 0; color: #cfd8e3; font-size: 0.9375rem; line-height: 1.4; }
.ttc-card .ttc-chips { margin-top: auto; padding-top: 0.25rem; position: relative; z-index: 1; }
.ttc-card--compact .ttc-card__title { font-size: 0.875rem; }
.ttc-card--compact .ttc-card__summary { font-size: 0.75rem; color: var(--ttc-muted); }
.ttc-card--compact .ttc-card__logo { height: 24px; }
.ttc-card--compact .ttc-chips li { font-size: 0.6875rem; padding: 0.25rem 0.4rem; }

/* Post template grid */
.ttc-grid.wp-block-post-template { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; }
.ttc-grid.wp-block-post-template > li { margin: 0; }
@media (max-width: 680px) { .ttc-grid.wp-block-post-template { grid-template-columns: 1fr; } }

/* ---------- Projects archive ---------- */
.ttc-archive-head { text-align: center; padding-top: clamp(1rem, 3vw, 1.75rem); }
.ttc-archive-head h1 { font-size: var(--wp--preset--font-size--display); margin: 0; line-height: 1.05; }
.ttc-archive-head p { color: #d5dde7; font-size: var(--wp--preset--font-size--lg); max-width: 34rem; margin: 0.75rem auto 0; line-height: 1.45; }

.ttc-filter { margin: 1.25rem auto 1rem; }
.ttc-filter ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0.55rem 1rem;
	border-radius: var(--ttc-radius);
	box-shadow: var(--ttc-glow);
	background: rgba(17, 27, 45, 0.6);
}
.ttc-filter a { color: #cfe8ea; font-size: 1.05rem; white-space: nowrap; }
.ttc-filter a::before { content: "[ "; color: var(--ttc-muted); }
.ttc-filter a::after { content: " ]"; color: var(--ttc-muted); }
.ttc-filter a[aria-current] { color: var(--ttc-accent); font-weight: 600; text-shadow: 0 0 12px rgba(46, 211, 198, 0.5); }
.ttc-filter a:hover { text-decoration: none; color: var(--ttc-accent); }

.ttc-results { transition: opacity 0.2s ease; }
.ttc-results.is-loading { opacity: 0.4; pointer-events: none; }

.ttc-pager { display: flex; justify-content: center; align-items: center; gap: 0.75rem; margin-top: 1.75rem; }
.ttc-pager .wp-block-query-pagination {
	margin: 0;
	gap: 0.15rem;
	background: #2a3446;
	border-radius: 3px;
	padding: 0.15rem;
	font-size: 0.8125rem;
}
.ttc-pager .page-numbers, .ttc-pager .wp-block-query-pagination-previous, .ttc-pager .wp-block-query-pagination-next {
	color: #c5ceda;
	padding: 0.3rem 0.6rem;
	border-radius: 2px;
}
.ttc-pager .page-numbers.current { background: #4a566b; color: #fff; }

/* ---------- CTA band ---------- */
.ttc-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	border-radius: var(--ttc-radius) var(--ttc-radius) 0 0;
	box-shadow: var(--ttc-glow);
	background: var(--ttc-surface);
	padding: 1.25rem 1rem;
}
.ttc-cta > .wp-block-group { flex: 1 1 24rem; }
.ttc-cta h2 { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--xxl); }
.ttc-cta p { margin: 0; color: #d5dde7; }
.ttc-cta .wp-block-button__link { font-size: 1.05rem; padding: 0.65rem 1.1rem; box-shadow: 0 0 20px rgba(46, 211, 198, 0.4); }

/* ---------- Home ---------- */
.ttc-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 1rem; min-height: 340px; }
.ttc-hero h1 { color: var(--ttc-accent); font-size: clamp(2rem, 4.2vw, 2.85rem); font-weight: 600; line-height: 1.15; margin: 0 0 0.9rem; }
.ttc-hero__lead { font-size: var(--wp--preset--font-size--lg); color: #e1e8f0; margin: 0 0 1.25rem; max-width: 26rem; }
.ttc-hero .wp-block-button__link { font-size: 0.75rem; padding: 0.45rem 0.85rem; }
.ttc-hero__photo { position: relative; margin: 0; align-self: end; justify-self: center; width: min(100%, 360px); }
.ttc-hero__photo::before {
	content: "";
	position: absolute;
	inset: 8% -10% -5%;
	background: radial-gradient(circle at 50% 45%, rgba(46, 211, 198, 0.45), rgba(46, 211, 198, 0.08) 45%, transparent 68%);
	filter: blur(6px);
	z-index: 0;
}
.ttc-hero__photo img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	-webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 42%, #000 58%, transparent 74%);
	mask-image: radial-gradient(ellipse 62% 70% at 50% 42%, #000 58%, transparent 74%);
}
@media (max-width: 720px) {
	.ttc-hero { grid-template-columns: 1fr; text-align: left; }
	.ttc-hero__photo { order: -1; width: 220px; justify-self: center; margin-inline: auto; }
}

.ttc-band { background: #121d30; }
.ttc-intro { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.45; color: #e7edf4; margin: 0; }

.ttc-impact { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0.75rem; align-items: stretch; }
@media (max-width: 720px) { .ttc-impact { grid-template-columns: 1fr; } }
.ttc-stats { align-content: center; height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; text-align: center; }
.ttc-stat { margin: 0; }
.ttc-stat__value { display: block; font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 600; line-height: 1.1; color: #e9f6f8; }
.ttc-stat__label { display: block; font-size: 0.75rem; color: #c5ceda; margin-top: 0.15rem; }
.ttc-dev-card h3 { font-size: 0.875rem; margin: 0 0 0.4rem; }
.ttc-dev-card p { font-size: 0.75rem; color: var(--ttc-muted); margin: 0 0 0.4rem; line-height: 1.45; }
.ttc-dev-card a { font-size: 0.75rem; }

.ttc-services h2 { margin-bottom: 0.75rem; }
.ttc-services .is-style-links { font-size: 1rem; }

.ttc-process-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.85rem;
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: step;
}
.ttc-process-steps li {
	position: relative;
	border: 1px solid var(--ttc-border);
	border-radius: 3px;
	padding: 0.45rem 0.5rem;
	font-size: 0.75rem;
	line-height: 1.3;
	color: #d5dde7;
	background: rgba(17, 27, 45, 0.7);
}
.ttc-process-steps li strong { display: block; color: var(--ttc-accent); font-weight: 500; font-size: 0.6875rem; }
.ttc-process-steps li:not(:last-child)::after {
	content: "›";
	position: absolute;
	right: -0.7rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ttc-accent);
}
@media (max-width: 560px) {
	.ttc-process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ttc-process-steps li:nth-child(2)::after { display: none; }
}
.ttc-product { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; }
.ttc-product h3 { font-size: 0.9375rem; margin: 0 0 0.35rem; }
.ttc-product p { font-size: 0.75rem; color: var(--ttc-muted); margin: 0 0 0.5rem; }
@media (max-width: 560px) { .ttc-product { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.ttc-carousel { position: relative; padding-inline: 2.25rem; }
.ttc-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2rem) / 3);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
	margin: 0;
	padding: 0.5rem 0.25rem;
}
.ttc-carousel__track::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .ttc-carousel__track { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (max-width: 600px) { .ttc-carousel__track { grid-auto-columns: 100%; } .ttc-carousel { padding-inline: 0; } }
.ttc-quote {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--ttc-surface);
	border: 1px solid #2b3a52;
	border-radius: 4px;
	padding: 1rem;
	font-size: 0.8125rem;
	color: #d5dde7;
}
.ttc-quote blockquote { margin: 0; font-style: italic; }
.ttc-quote blockquote p { margin: 0 0 0.5rem; }
.ttc-quote__by { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; font-size: 0.75rem; }
.ttc-quote__by strong { display: block; color: #fff; font-weight: 600; }
.ttc-quote__by small { display: block; color: var(--ttc-muted); }
.ttc-quote__photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ttc-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-60%);
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	border: 1px solid var(--ttc-border);
	background: var(--wp--preset--color--bg);
	color: var(--ttc-accent);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}
.ttc-carousel__arrow--prev { left: 0; }
.ttc-carousel__arrow--next { right: 0; }
.ttc-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.ttc-carousel__dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.75rem; }
.ttc-carousel__dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 1px solid var(--ttc-accent); background: transparent; cursor: pointer; }
.ttc-carousel__dots button[aria-current="true"] { background: var(--ttc-accent); }

/* ---------- Contact ---------- */
.ttc-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 720px) { .ttc-contact { grid-template-columns: 1fr; } }
.ttc-contact h2 { margin: 0 0 0.6rem; }
.ttc-contact__lead { font-size: 0.875rem; color: #c5ceda; }
.ttc-contact-list { list-style: none; padding: 0; margin: 1rem 0 0; font-size: 0.875rem; }
.ttc-contact-list li { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0; }
.ttc-contact-list .ttc-icon { width: 1rem; height: 1rem; }

/* Contact Form 7 */
.wpcf7 form p { margin: 0 0 0.75rem; }
.wpcf7 label { display: block; font-size: 0.75rem; color: var(--ttc-muted); }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.25rem;
	font: inherit;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text);
	background: #0d1626;
	border: 1px solid #2b3a52;
	border-radius: 3px;
	padding: 0.5rem 0.6rem;
}
.wpcf7 textarea { min-height: 7rem; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--ttc-accent); box-shadow: 0 0 0 3px rgba(46, 211, 198, 0.2); }
.wpcf7 input[type="submit"] {
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: #06201d;
	background: var(--ttc-accent);
	border: 0;
	border-radius: 4px;
	padding: 0.55rem 1.1rem;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background-color: #5fe3d8; }
.wpcf7-not-valid-tip { color: #ff8f8f; font-size: 0.75rem; }
.wpcf7 form .wpcf7-response-output { margin: 0.75rem 0 0; border-radius: 3px; font-size: 0.8125rem; padding: 0.5rem 0.75rem; }
.wpcf7-spinner { margin: 0 0.5rem; }

/* ---------- Single project ---------- */
.ttc-project-hero { --ttc-hero: #1d4fb8; position: relative; }
.ttc-project-hero__top { max-width: var(--wp--style--global--content-size); margin: 0 auto; padding: 0.75rem var(--wp--style--root--padding-right) 0.75rem var(--wp--style--root--padding-left); }
.ttc-back { font-size: 0.8125rem; }
.ttc-project-hero__band {
	background:
		radial-gradient(ellipse at 70% 30%, color-mix(in srgb, var(--ttc-hero) 85%, #fff 8%) 0%, transparent 60%),
		linear-gradient(120deg, color-mix(in srgb, var(--ttc-hero) 55%, #050b1a) 0%, var(--ttc-hero) 55%, color-mix(in srgb, var(--ttc-hero) 50%, #050b1a) 100%);
	padding: clamp(1.5rem, 4vw, 2.5rem) var(--wp--style--root--padding-right) clamp(2.5rem, 5vw, 3.5rem) var(--wp--style--root--padding-left);
}
.ttc-project-hero__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; align-items: center; max-width: var(--wp--style--global--content-size); margin: 0 auto; }
.ttc-project-hero__brand { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.ttc-hero__logo { height: clamp(48px, 7vw, 80px); max-width: 260px; }
.ttc-project-hero__title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: #fff; margin: 0; font-weight: 600; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
.ttc-project-hero__visit { color: #d9f6f3; font-size: 0.8125rem; }
@media (max-width: 720px) { .ttc-project-hero__inner { grid-template-columns: 1fr; } }

.ttc-meta-bar {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 0;
	width: fit-content;
	max-width: calc(100% - 2rem);
	margin: -1.4rem auto 0;
	padding: 0.6rem 1rem;
	background: var(--ttc-surface);
	border-radius: var(--ttc-radius);
	box-shadow: var(--ttc-glow-strong);
	font-size: 0.8125rem;
}
.ttc-meta-bar > div { display: flex; gap: 0.3rem; padding: 0 0.75rem; }
.ttc-meta-bar > div + div { border-left: 1px solid #4b5a72; }
.ttc-meta-bar dt { font-weight: 700; color: #fff; }
.ttc-meta-bar dd { margin: 0; color: #d5dde7; }

.ttc-case { padding-block: 1.25rem 1.5rem; }
.ttc-case h2 { margin-top: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; }
.ttc-case p { color: #d5dde7; font-size: 0.9375rem; }
.ttc-highlight { height: 100%; }
.ttc-highlight .ttc-icon { width: 1.75rem; height: 1.75rem; }
.ttc-highlight h3 { font-size: 0.9375rem; margin: 0.5rem 0 0.35rem; }
.ttc-highlight p { font-size: 0.8125rem !important; color: var(--ttc-muted) !important; margin: 0; }
.ttc-outcome { text-align: center; height: 100%; }
.ttc-outcome .ttc-stat__value { color: var(--ttc-accent); font-size: clamp(1.75rem, 3.6vw, 2.25rem); font-weight: 700; }
.ttc-outcome .ttc-stat__label { font-size: 0.875rem; color: #d5dde7; }
.ttc-outcome .ttc-stat__detail { display: block; font-size: 0.75rem; color: var(--ttc-muted); margin-top: 0.5rem; line-height: 1.4; }
.ttc-feedback blockquote { margin: 0; font-size: 0.9375rem; font-style: italic; color: #d5dde7; }
.ttc-feedback cite { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.8125rem; color: #fff; font-weight: 600; }
.ttc-case .wp-block-columns { gap: 1rem; }

.ttc-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.75rem;
	padding: 0.75rem 1rem;
	background: var(--ttc-surface);
	border-radius: var(--ttc-radius);
	box-shadow: var(--ttc-glow);
	color: #fff;
}
.ttc-next:hover { text-decoration: none; box-shadow: var(--ttc-glow-strong); }
.ttc-next__label { display: block; color: var(--ttc-accent); font-size: 0.875rem; }
.ttc-next__title { display: block; font-size: 1.125rem; font-weight: 500; }
.ttc-next .ttc-laptop { width: 90px; flex: none; }

/* ---------- Generic page ---------- */
.ttc-page-title { margin-top: clamp(2rem, 5vw, 3rem); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Sections ---------- */
.ttc-section { padding-block: clamp(0.75rem, 2vw, 1.25rem); }
.ttc-section--hero { padding-block: clamp(1rem, 3vw, 1.75rem) 0; background: radial-gradient(ellipse at 75% 60%, rgba(46, 211, 198, 0.08), transparent 55%); }
.ttc-band { padding-block: clamp(1rem, 2.5vw, 1.5rem); }
.ttc-section h2 { margin-top: 0; }
.ttc-muted { color: var(--ttc-muted); font-size: 0.8125rem; }
.ttc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { .ttc-split { grid-template-columns: 1fr; } }
.ttc-section .wp-block-query .ttc-grid { margin-top: 0.75rem; }

/* Icons on list items / highlight cards (CSS masks keep markup editor-friendly) */
.ttc-contact-list li::before,
.ttc-highlight::before {
	content: "";
	flex: none;
	display: block;
	width: 1rem;
	height: 1rem;
	background: var(--ttc-accent);
	-webkit-mask: var(--ttc-mask) center / contain no-repeat;
	mask: var(--ttc-mask) center / contain no-repeat;
}
.ttc-contact-list li.is-mail { --ttc-mask: url(../svg/mail.svg); }
.ttc-contact-list li.is-phone { --ttc-mask: url(../svg/phone.svg); }
.ttc-contact-list li.is-linkedin { --ttc-mask: url(../svg/linkedin.svg); }
.ttc-highlight::before { width: 1.75rem; height: 1.75rem; }
.ttc-icon-code { --ttc-mask: url(../svg/code.svg); }
.ttc-icon-database { --ttc-mask: url(../svg/database.svg); }
.ttc-icon-a11y { --ttc-mask: url(../svg/a11y.svg); }
.ttc-columns-list { columns: 2 14rem; column-gap: 2rem; }

/* Grid wrappers: neutralise flow-layout block gap margins on direct children */
.ttc-hero > *, .ttc-impact > *, .ttc-split > *, .ttc-contact > *, .ttc-product > *, .ttc-cta > * { margin-block: 0; }
.is-style-fieldset { display: flex; flex-direction: column; }

.ttc-case .is-style-callout p { color: #9fe9e2; font-size: 0.875rem; }

/* Contact Form 7 essentials (its own stylesheet is disabled) */
.wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; }
.wpcf7 form .wpcf7-response-output { display: none; border: 1px solid var(--ttc-border); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output { display: block; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--ttc-accent); color: var(--ttc-accent); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #ff8f8f; color: #ffb3b3; }
.wpcf7-form-control-wrap { position: relative; display: block; }
.wpcf7-spinner { visibility: hidden; display: inline-block; width: 18px; height: 18px; vertical-align: middle; border: 2px solid var(--ttc-border); border-top-color: var(--ttc-accent); border-radius: 50%; animation: ttc-spin 0.8s linear infinite; }
form.submitting .wpcf7-spinner { visibility: visible; }
@keyframes ttc-spin { to { transform: rotate(360deg); } }
.wpcf7 textarea { height: 8rem; }
.wpcf7 .hidden-fields-container { display: none; }

@media (max-width: 600px) {
	.ttc-meta-bar { flex-direction: column; align-items: flex-start; width: auto; margin-inline: 1rem; }
	.ttc-meta-bar > div { padding: 0.15rem 0; }
	.ttc-meta-bar > div + div { border-left: 0; }
}

/* ---------- Scale-up for the 1200px layout ---------- */
@media (min-width: 900px) {
	.ttc-hero h1 { font-size: clamp(2.5rem, 4vw, 3.4rem); }
	.ttc-hero__lead { max-width: 32rem; }
	.ttc-hero .wp-block-button__link { font-size: 0.875rem; padding: 0.6rem 1.1rem; }
	.ttc-hero__photo { width: min(100%, 420px); }
	.ttc-stat__value { font-size: 2.6rem; }
	.ttc-stat__label { font-size: 0.875rem; }
	.ttc-dev-card h3 { font-size: 1.05rem; }
	.ttc-dev-card p, .ttc-dev-card a { font-size: 0.875rem; }
	.ttc-card--compact .ttc-card__title { font-size: 1.05rem; }
	.ttc-card--compact .ttc-card__summary { font-size: 0.9375rem; }
	.ttc-card--compact .ttc-card__logo { height: 32px; }
	.ttc-card--compact .ttc-chips li { font-size: 0.75rem; padding: 0.35rem 0.5rem; }
	.ttc-process-steps li { font-size: 0.875rem; padding: 0.6rem 0.7rem; }
	.ttc-process-steps li strong { font-size: 0.75rem; }
	.ttc-muted { font-size: 0.9375rem; }
	.ttc-product h3 { font-size: 1.1rem; }
	.ttc-product p { font-size: 0.875rem; }
	.ttc-quote { font-size: 0.9375rem; }
}
.ttc-next, .ttc-cta, .ttc-meta-bar { box-sizing: border-box; }

/* Flex rows built from flow-layout groups: drop the block-gap top margin */
.ttc-header__inner > *, .ttc-header__nav > *, .ttc-footer__inner > *, .ttc-brand > * { margin-block: 0; }

/* ---------- Stack marquee ---------- */
.ttc-stack {
	position: relative;
	padding-block: 0.75rem 1rem;
	background-color: #0e1828;
	background-image:
		linear-gradient(rgba(46, 211, 198, 0.13) 1px, transparent 1px),
		linear-gradient(90deg, rgba(46, 211, 198, 0.13) 1px, transparent 1px);
	background-size: 22px 22px;
	background-position: center;
	border-block: 1px solid var(--ttc-line);
}
.ttc-stack::before { /* soften the grid toward the edges */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(11, 19, 34, 0.75) 100%);
	pointer-events: none;
}
.ttc-stack__inner {
	position: relative;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	box-sizing: content-box;
}
.ttc-stack__heading { font-size: var(--wp--custom--h-2); font-weight: 500; margin: 0 0 0.75rem; }
.ttc-stack__viewport {
	overflow: hidden;
	padding-block: 12px; /* room for the glow */
	margin-block: -12px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 85%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 85%, transparent 100%);
}
.ttc-stack__track { display: flex; width: max-content; animation: ttc-marquee 40s linear infinite; }
.ttc-stack__viewport:hover .ttc-stack__track,
.ttc-stack__viewport:focus-within .ttc-stack__track { animation-play-state: paused; }
.ttc-stack__list { display: flex; gap: 0.75rem; list-style: none; margin: 0; padding: 0 0.75rem 0 0; }
.ttc-stack__tile {
	display: grid;
	place-items: center;
	width: clamp(64px, 7vw, 100px);
	aspect-ratio: 1;
	border-radius: 8px;
	background: linear-gradient(160deg, #142238, #0c1626);
	box-shadow: 0 0 0 1px rgba(46, 211, 198, 0.55), 0 0 16px rgba(46, 211, 198, 0.25), inset 0 0 18px rgba(46, 211, 198, 0.08);
	color: #fff;
}
.ttc-stack__tile svg { width: 62%; height: 62%; }
.ttc-stack__tile--react { color: #4fd8ec; }
@keyframes ttc-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.ttc-stack__track { animation: none; }
	.ttc-stack__list--clone { display: none; }
	.ttc-stack__list { flex-wrap: wrap; }
}

/* ---------- Services cards ---------- */
.ttc-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 680px) { .ttc-services-grid { grid-template-columns: 1fr; } }
.ttc-service {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 0.9rem 1rem 0.85rem;
	border-radius: var(--ttc-radius);
	background:
		radial-gradient(ellipse at 50% 35%, rgba(46, 211, 198, 0.12), transparent 65%),
		var(--ttc-surface);
	box-shadow: var(--ttc-glow);
	color: #fff;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ttc-service:hover { text-decoration: none; box-shadow: var(--ttc-glow-strong); transform: translateY(-2px); }
.ttc-service__art { display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 200 / 130; margin: 0 auto 0.6rem; }
.ttc-service__title { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600; color: #fff; }
.ttc-service__text { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: #c5ceda; }

/* ---------- Page header (matches the Projects archive) ---------- */
.ttc-page-head { padding-bottom: clamp(0.5rem, 2vw, 1.25rem); }
.ttc-page-head .wp-block-post-excerpt { margin: 0; }
.ttc-page-head .wp-block-post-excerpt__excerpt { margin: 0.75rem auto 0; }
.ttc-page-head h1.is-style-glow, .ttc-archive-head h1 { font-size: var(--wp--preset--font-size--display); }

/* ---------- About ---------- */
.ttc-about-intro { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.ttc-about-intro > * { margin-block: 0; }
.ttc-about-intro .ttc-hero__photo { width: min(100%, 400px); justify-self: center; }
.ttc-about-intro .wp-block-buttons { margin-top: 1.25rem; }
@media (max-width: 720px) {
	.ttc-about-intro { grid-template-columns: 1fr; }
	.ttc-about-intro .ttc-hero__photo { width: 240px; }
}
.ttc-about-service .ttc-service__art { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
.ttc-about-service h3 { margin: 0.5rem 0 0.4rem; font-size: 1.15rem; }
.ttc-about-service p { color: #c5ceda; font-size: 0.9375rem; margin: 0; }
.ttc-about-service p:first-child { margin: 0; }
.ttc-client-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 0.75rem;
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
}
.ttc-client-grid li {
	margin: 0;
	padding: 0.85rem 1rem;
	border-radius: var(--ttc-radius);
	background: var(--ttc-surface);
	box-shadow: var(--ttc-glow);
	color: #e6edf5;
	font-weight: 500;
	text-align: center;
}
.ttc-about-service { height: 100%; box-sizing: border-box; }
.ttc-client-grid li { display: grid; place-items: center; }

/* Stack marquee brand colors (white by default) */
.ttc-stack__tile--claude { color: #d97757; }
.ttc-stack__tile--docker { color: #2496ed; }
.ttc-stack__tile--webflow { color: #4f7dff; }
.ttc-stack__tile--figma svg { width: 44%; }

/* Header type sizes */
.ttc-header .wp-block-navigation a { font-size: 0.9rem; }
.ttc-header .wp-block-button__link { font-size: 0.9rem; }
.ttc-brand__name { font-size: 1rem; }
.ttc-brand__tag { font-size: 0.75rem; }

/* ---------- Footer social ---------- */
.ttc-footer__meta { display: flex; align-items: center; gap: 1rem; }
.ttc-footer__meta > * { margin-block: 0; }
.ttc-social {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	background: linear-gradient(160deg, #142238, #0c1626);
	box-shadow: 0 0 0 1px rgba(46, 211, 198, 0.55), 0 0 12px rgba(46, 211, 198, 0.2);
	color: var(--ttc-accent);
	transition: box-shadow 0.2s ease, color 0.2s ease;
}
.ttc-social:hover { color: #fff; box-shadow: var(--ttc-glow-strong); text-decoration: none; }
.ttc-social .ttc-icon { width: 16px; height: 16px; color: inherit; }

/* ---------- Mobile menu ---------- */
.ttc-menu-toggle, .ttc-mnav__close {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--wp--preset--color--text);
	cursor: pointer;
}
.ttc-menu-toggle__bars, .ttc-menu-toggle__bars::before, .ttc-menu-toggle__bars::after {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}
.ttc-menu-toggle__bars { position: relative; }
.ttc-menu-toggle__bars::before, .ttc-menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.ttc-menu-toggle__bars::before { top: -7px; }
.ttc-menu-toggle__bars::after { top: 7px; width: 16px; }
.ttc-menu-toggle:hover, .ttc-mnav__close:hover { color: var(--ttc-accent); }

@media (max-width: 781px) {
	.ttc-header__nav { display: none; }
	.ttc-menu-toggle { display: grid; }
}


/* Header/footer side padding on small screens (content-box keeps the 1200px content width on desktop) */
.ttc-header__inner, .ttc-footer__inner {
	box-sizing: content-box;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}
@media (max-width: 379px) { .ttc-header .ttc-brand__tag { display: none; } }


/* ---------- Button arrows ---------- */
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; }
.wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: url(../svg/arrow-right.svg) center / contain no-repeat;
	mask: url(../svg/arrow-right.svg) center / contain no-repeat;
	transition: transform 0.2s ease;
}
.wp-block-button__link:hover::after, .wp-block-button__link:focus-visible::after { transform: translateX(3px); }
.wpcf7 input[type="submit"] {
	padding-right: 2.6rem;
	background-image: url(../svg/arrow-right-dark.svg);
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.05em;
	transition: background-position 0.2s ease, background-color 0.2s ease;
}
.wpcf7 input[type="submit"]:hover { background-position: right 0.8rem center; }
@media (prefers-reduced-motion: reduce) { .wp-block-button__link::after { transition: none; } }

.ttc-contact-social { margin: 1rem 0 0; }
.ttc-contact-social .ttc-social { width: 38px; height: 38px; }
.ttc-contact-social .ttc-social .ttc-icon { width: 18px; height: 18px; }

.ttc-contact-li { display: inline-flex; align-items: center; gap: 0.75rem; color: #e6edf5; font-size: 0.9375rem; font-weight: 500; }
.ttc-contact-li:hover { text-decoration: none; color: var(--ttc-accent); }
.ttc-contact-li:hover .ttc-social { color: #fff; box-shadow: var(--ttc-glow-strong); }

/* Chips: glowing ring like the tiles and social button */
.ttc-chips li {
	border-color: transparent;
	background: linear-gradient(160deg, rgba(20, 34, 56, 0.9), rgba(12, 22, 38, 0.9));
	box-shadow: 0 0 0 1px rgba(46, 211, 198, 0.55), 0 0 10px rgba(46, 211, 198, 0.22), inset 0 0 8px rgba(46, 211, 198, 0.08);
	text-shadow: 0 0 8px rgba(46, 211, 198, 0.35);
	transition: box-shadow 0.2s ease;
}
.ttc-card:hover .ttc-chips li {
	box-shadow: 0 0 0 1px rgba(95, 242, 230, 0.8), 0 0 14px rgba(46, 211, 198, 0.35), inset 0 0 10px rgba(46, 211, 198, 0.12);
}

/* ---------- Left-aligned page headers ---------- */
.ttc-archive-head { text-align: left; }
.ttc-archive-head p,
.ttc-page-head .wp-block-post-excerpt__excerpt { margin: 0.75rem 0 0; max-width: 40rem; }
.ttc-filter ul { justify-content: flex-start; }

/* ---------- Breadcrumbs (matches the case-study back link) ---------- */
.ttc-breadcrumbs { margin: 0 0 1.25rem; font-size: 0.8125rem; }
.ttc-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0; list-style: none; margin: 0; padding: 0; }
.ttc-breadcrumbs li { display: inline-flex; align-items: center; }
.ttc-breadcrumbs li + li::before { content: "/"; margin: 0 0.55rem; color: #4b5a72; }
.ttc-breadcrumbs a { color: var(--ttc-accent); }
.ttc-breadcrumbs a:hover { color: #5fe3d8; }
.ttc-breadcrumbs [aria-current] { color: var(--ttc-muted); }

/* ---------- About: centered header + photo caption ---------- */
.page-slug-about .ttc-page-head { text-align: center; }
.page-slug-about .ttc-page-head .wp-block-post-excerpt__excerpt { margin-inline: auto; }
.ttc-about-intro .ttc-hero__photo figcaption {
	position: relative;
	z-index: 1;
	margin: 0.4rem 0 0;
	text-align: center;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: var(--ttc-muted);
}

/* ---------- Home: Meet the Architect + The Impact ---------- */
@media (min-width: 721px) { .ttc-impact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.ttc-architect-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.25rem, 3vw, 2.25rem);
}
.ttc-impact .ttc-architect-card__title {
	margin: 0 0 0.9rem;
	font-size: clamp(1.8rem, 3.3vw, 2.6rem);
	line-height: 1.05;
}
.ttc-impact .ttc-architect-card__text { margin: 0 0 1.1rem; font-size: clamp(1rem, 1.35vw, 1.125rem); line-height: 1.55; color: #c5ceda; }
.ttc-impact .ttc-architect-card__link { margin: 0; }
.ttc-impact .ttc-architect-card__link a { font-size: 1.05rem; color: var(--ttc-accent); }
.ttc-impact .ttc-architect-card__link a:hover { text-decoration: none; text-shadow: 0 0 12px rgba(46, 211, 198, 0.6); }

.ttc-impact-card.is-style-fieldset {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 0.9rem;
	padding: 2.75rem clamp(1rem, 2.5vw, 1.75rem) 2rem;
	border-color: rgba(46, 211, 198, 0.6);
	background:
		linear-gradient(90deg, rgba(11, 19, 34, 0.92) 0%, rgba(11, 19, 34, 0.55) 55%, rgba(11, 19, 34, 0.25) 100%),
		url(../svg/impact-circuit.svg) right center / auto 115% no-repeat,
		linear-gradient(150deg, #101b2e, #18263d);
	box-shadow: 0 0 0 1px rgba(46, 211, 198, 0.15), 0 0 26px rgba(46, 211, 198, 0.2);
}
.ttc-impact-card.is-style-fieldset > :first-child {
	padding: 0.15rem 0.8rem;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ttc-accent);
	text-shadow: 0 0 10px rgba(46, 211, 198, 0.5);
}
.ttc-impact-card.is-style-fieldset > :first-child::before { content: "/// "; letter-spacing: 0.05em; }
.ttc-impact-card .ttc-stats { gap: 0.75rem; }
.ttc-impact-card .ttc-stat { position: relative; isolation: isolate; }
.ttc-impact-card .ttc-stat__value {
	position: relative;
	margin: 0;
	font-size: clamp(2.4rem, 4.4vw, 3.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: #effcfb;
	text-shadow: 0 0 16px rgba(46, 211, 198, 0.6), 0 0 42px rgba(46, 211, 198, 0.25);
}
.ttc-impact-card .ttc-stat__value::before { /* dot-matrix behind each number */
	content: "";
	position: absolute;
	z-index: -1;
	inset: -0.12em 6% -0.08em;
	background-image: radial-gradient(rgba(46, 211, 198, 0.45) 1px, transparent 1.5px);
	background-size: 6px 6px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
	opacity: 0.6;
}
.ttc-impact-card .ttc-stat__label { margin: 0.7rem 0 0; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #dbe3ec; }
.ttc-impact-card .ttc-stat__detail { margin: 0.3rem 0 0; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ttc-accent); }
@media (max-width: 480px) {
	.ttc-impact-card .ttc-stat__label { font-size: 0.62rem; letter-spacing: 0.06em; }
	.ttc-impact-card .ttc-stat__detail { font-size: 0.58rem; letter-spacing: 0.08em; }
}
@media (max-width: 480px) { .ttc-impact-card .ttc-stat__value { font-size: 2.05rem; } }
@media (min-width: 721px) { .ttc-about-intro { align-items: start; } }
@media (min-width: 721px) { .ttc-about-intro .ttc-hero__photo { align-self: start; position: sticky; top: calc(var(--ttc-header-h) + 1.5rem); } }

/* Hero/about photo: fade evenly on every edge (fits any photo, not just vignetted ones) */
.ttc-hero__photo img {
	-webkit-mask-image: radial-gradient(closest-side at 50% 48%, #000 68%, transparent 100%);
	mask-image: radial-gradient(closest-side at 50% 48%, #000 68%, transparent 100%);
}

/* Header +10%: menu, CTA, logo, name and tagline */
.ttc-header .wp-block-navigation a { font-size: 0.99rem; }
.ttc-header .wp-block-button__link { font-size: 0.99rem; padding: 0.44rem 0.99rem; }
.ttc-brand__mark { width: 56px; height: 42px; }
.ttc-brand__name { font-size: 1.1rem; }
.ttc-brand__tag { font-size: 0.825rem; }
@media (max-width: 480px) { .ttc-header .ttc-brand__tag { font-size: 0.75rem; white-space: nowrap; } }

/* ---------- Mobile menu (matches site cards, bands and buttons) ---------- */
.ttc-mnav {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	background:
		radial-gradient(ellipse at 85% -10%, rgba(46, 211, 198, 0.16), transparent 55%),
		linear-gradient(rgba(46, 211, 198, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(90deg, rgba(46, 211, 198, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
		var(--wp--preset--color--bg);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.ttc-mnav[hidden] { display: none; }
.ttc-mnav.is-open { opacity: 1; }
body.ttc-mnav-open { overflow: hidden; }

.ttc-mnav__top {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--ttc-header-h);
	padding: 0.5rem var(--wp--style--root--padding-right) 0.5rem var(--wp--style--root--padding-left);
	background: rgba(15, 24, 40, 0.92);
	border-bottom: 1px solid var(--ttc-line);
}
.ttc-mnav__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: linear-gradient(160deg, #142238, #0c1626);
	box-shadow: 0 0 0 1px rgba(46, 211, 198, 0.45), 0 0 12px rgba(46, 211, 198, 0.15);
	color: var(--wp--preset--color--text);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
.ttc-mnav__close:hover { color: var(--ttc-accent); box-shadow: var(--ttc-glow-strong); }

.ttc-mnav__body {
	display: grid;
	gap: 1rem;
	align-content: start;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 1.5rem var(--wp--style--root--padding-right) calc(1.5rem + env(safe-area-inset-bottom)) var(--wp--style--root--padding-left);
}
.ttc-mnav__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ttc-accent);
	text-shadow: 0 0 10px rgba(46, 211, 198, 0.45);
}
.ttc-mnav__eyebrow::before { content: "/// "; letter-spacing: 0.05em; }
.ttc-mnav__body > .ttc-mnav__eyebrow { margin-bottom: -0.4rem; }

.ttc-mnav__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--ttc-radius);
	background: var(--ttc-surface);
	box-shadow: var(--ttc-glow);
}
.ttc-mnav__nav li + li { border-top: 1px solid var(--ttc-line); }
.ttc-mnav__nav a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.9rem;
	padding: 1.05rem 1.1rem;
	color: var(--wp--preset--color--text);
	transition: background 0.2s ease, color 0.2s ease;
}
.ttc-mnav__nav a:hover { text-decoration: none; color: var(--ttc-accent); background: var(--ttc-tint); }
.ttc-mnav__num { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ttc-muted); font-variant-numeric: tabular-nums; }
.ttc-mnav__label {
	font-family: var(--wp--preset--font-family--dm-sans, inherit);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.1;
}
.ttc-mnav__go {
	width: 1.1rem;
	height: 1.1rem;
	background: currentColor;
	opacity: 0.6;
	-webkit-mask: url(../svg/arrow-right.svg) center / contain no-repeat;
	mask: url(../svg/arrow-right.svg) center / contain no-repeat;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.ttc-mnav__nav a:hover .ttc-mnav__go { transform: translateX(3px); opacity: 1; }
.ttc-mnav__nav a[aria-current] {
	color: var(--ttc-accent);
	background: linear-gradient(90deg, rgba(46, 211, 198, 0.14), rgba(46, 211, 198, 0.02) 70%);
	box-shadow: inset 3px 0 0 #5ff2e6;
}
.ttc-mnav__nav a[aria-current] .ttc-mnav__num { color: var(--ttc-accent); }
.ttc-mnav__nav a[aria-current] .ttc-mnav__label { text-shadow: 0 0 14px rgba(46, 211, 198, 0.5); }
.ttc-mnav__nav a[aria-current] .ttc-mnav__go {
	width: 3.4rem;
	height: 0.7rem;
	opacity: 1;
	background: url(../svg/active-trace.svg) right center / contain no-repeat;
	-webkit-mask: none;
	mask: none;
	filter: drop-shadow(0 0 4px rgba(46, 211, 198, 0.85));
}

.ttc-mnav .ttc-mnav__cta {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding: 0.9rem 1rem;
	font-size: 1rem;
	box-shadow: 0 0 22px rgba(46, 211, 198, 0.35);
}
.ttc-mnav .ttc-mnav__cta:hover { text-decoration: none; box-shadow: 0 0 30px rgba(46, 211, 198, 0.55); }

.ttc-mnav__card {
	padding: 1.1rem 1.1rem 1.2rem;
	border-radius: var(--ttc-radius);
	background: var(--ttc-surface);
	box-shadow: var(--ttc-glow);
}
.ttc-mnav__card .ttc-contact-list { margin-top: 0.75rem; font-size: 1rem; }
.ttc-mnav__card .ttc-contact-list a { color: var(--wp--preset--color--text); }
.ttc-mnav__card .ttc-contact-list a:hover { color: var(--ttc-accent); }
.ttc-mnav__status { display: flex; align-items: center; gap: 0.6rem; margin: 0.85rem 0 0; font-size: 0.9rem; color: #d5dde7; }
.ttc-mnav__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); animation: ttc-pulse 2s ease-out infinite; }
@keyframes ttc-pulse { 70% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.ttc-mnav__card .ttc-contact-social { margin-top: 1rem; }
.ttc-mnav__legal { margin: 0.25rem 0 0; text-align: center; font-size: 0.72rem; color: var(--ttc-muted); }

/* Entrance */
.ttc-mnav__body > * { opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.35s ease; }
.ttc-mnav.is-open .ttc-mnav__body > * { opacity: 1; transform: none; }
.ttc-mnav.is-open .ttc-mnav__body > :nth-child(2) { transition-delay: 0.04s; }
.ttc-mnav.is-open .ttc-mnav__body > :nth-child(3) { transition-delay: 0.08s; }
.ttc-mnav.is-open .ttc-mnav__body > :nth-child(4) { transition-delay: 0.12s; }
.ttc-mnav.is-open .ttc-mnav__body > :nth-child(5) { transition-delay: 0.16s; }
@media (max-width: 480px) { .ttc-mnav__top .ttc-brand__tag { font-size: 0.75rem; white-space: nowrap; } }

/* CTA band: free-floating card everywhere (matches About) */
.ttc-cta { border-radius: var(--ttc-radius); }
main.wp-block-group > .ttc-cta:last-child { margin-block-end: calc(clamp(0.75rem, 2vw, 1.25rem) + 3rem); }

/* ---------- Let's Get in Touch: marketing panel ---------- */
.ttc-contact.is-style-glow-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background:
		radial-gradient(ellipse at 0% 0%, rgba(46, 211, 198, 0.16), transparent 50%),
		radial-gradient(ellipse at 100% 100%, rgba(59, 130, 246, 0.1), transparent 55%),
		linear-gradient(150deg, #101b2e, #16233a);
	box-shadow: 0 0 0 1px rgba(46, 211, 198, 0.55), 0 0 32px rgba(46, 211, 198, 0.22);
}
.ttc-contact.is-style-glow-card::before { /* circuit traces rising from the bottom-left */
	content: "";
	position: absolute;
	z-index: -1;
	left: -2%;
	bottom: -12%;
	width: 58%;
	height: 85%;
	background: url(../svg/impact-circuit.svg) right bottom / contain no-repeat;
	transform: scaleX(-1);
	opacity: 0.6;
	-webkit-mask-image: linear-gradient(to top, #000 15%, transparent 80%);
	mask-image: linear-gradient(to top, #000 15%, transparent 80%);
	pointer-events: none;
}
.ttc-contact.is-style-glow-card > * { position: relative; }

/* Left: eyebrow + glowing headline */
.ttc-contact h2 {
	margin: 0 0 0.9rem;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ttc-accent);
	text-shadow: 0 0 18px rgba(46, 211, 198, 0.55), 0 0 42px rgba(46, 211, 198, 0.25);
}
.ttc-contact h2::before {
	content: "/// Start a Project";
	display: block;
	margin-bottom: 0.8rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-shadow: 0 0 10px rgba(46, 211, 198, 0.45);
}
.ttc-contact .ttc-contact__lead { font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; color: #c5ceda; }
.ttc-contact .ttc-contact-list { margin-top: 1.25rem; font-size: 1rem; }
.ttc-contact .ttc-contact-list li { margin: 0.55rem 0; }
.ttc-contact .ttc-contact-list li::before { width: 1.1rem; height: 1.1rem; }

/* Right: form panel on teal netting with scanner-style corner brackets */
.ttc-contact > .wp-block-group:last-child {
	align-self: start;
	padding: 1.75rem clamp(1rem, 2.5vw, 1.5rem) 1.4rem;
	border-radius: 8px;
	background:
		linear-gradient(rgba(46, 211, 198, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
		linear-gradient(90deg, rgba(46, 211, 198, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
		rgba(8, 14, 26, 0.78);
	box-shadow: inset 0 0 0 1px rgba(46, 211, 198, 0.28), 0 14px 34px rgba(0, 0, 0, 0.35);
}
.ttc-contact > .wp-block-group:last-child::before {
	content: "/// Send a Message";
	position: absolute;
	top: 0;
	left: 1rem;
	transform: translateY(-50%);
	padding: 0.2rem 0.6rem;
	border-radius: 3px;
	background: #13203a;
	box-shadow: 0 0 0 1px rgba(46, 211, 198, 0.4);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ttc-accent);
}
.ttc-contact > .wp-block-group:last-child::after {
	content: "";
	position: absolute;
	inset: 6px;
	pointer-events: none;
	--c: #5ff2e6;
	background:
		linear-gradient(var(--c), var(--c)) left top / 16px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) left top / 2px 16px no-repeat,
		linear-gradient(var(--c), var(--c)) right top / 16px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) right top / 2px 16px no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / 16px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / 2px 16px no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / 16px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / 2px 16px no-repeat;
	filter: drop-shadow(0 0 4px rgba(46, 211, 198, 0.8));
	opacity: 0.85;
}

/* Larger, glowing fields */
.ttc-contact .wpcf7 form p { margin: 0 0 0.9rem; }
.ttc-contact .wpcf7 input[type="text"],
.ttc-contact .wpcf7 input[type="email"],
.ttc-contact .wpcf7 input[type="tel"],
.ttc-contact .wpcf7 textarea {
	margin-top: 0;
	padding: 0.9rem 1rem;
	font-size: 1rem;
	border-radius: 6px;
	border: 1px solid rgba(46, 211, 198, 0.25);
	background: rgba(11, 19, 34, 0.9);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ttc-contact .wpcf7 textarea { height: 9rem; }
.ttc-contact .wpcf7 input::placeholder, .ttc-contact .wpcf7 textarea::placeholder { color: #7f91a7; }
.ttc-contact .wpcf7 input:focus, .ttc-contact .wpcf7 textarea:focus {
	border-color: var(--ttc-accent);
	box-shadow: 0 0 0 3px rgba(46, 211, 198, 0.18), 0 0 20px rgba(46, 211, 198, 0.25);
}
.ttc-contact .wpcf7 input[type="submit"] {
	width: 100%;
	padding: 1rem 2.6rem 1rem 1rem;
	font-size: 1.05rem;
	border-radius: 6px;
	background-position: right 1.25rem center;
	box-shadow: 0 0 22px rgba(46, 211, 198, 0.35);
}
.ttc-contact .wpcf7 input[type="submit"]:hover { background-position: right 1.05rem center; box-shadow: 0 0 30px rgba(46, 211, 198, 0.55); }
.ttc-contact .wpcf7-spinner { position: absolute; }
@media (max-width: 720px) { .ttc-contact.is-style-glow-card::before { width: 100%; height: 45%; } }
@media (max-width: 720px) { .ttc-contact > .wp-block-group:last-child { margin-top: 0.75rem; } }

/* Home: space below the last section = space between sections (padding + gap + padding) */
.home .wp-block-post-content > .ttc-section:last-child { padding-block-end: calc(2 * clamp(0.75rem, 2vw, 1.25rem) + 1rem); }

.ttc-stack--no-heading { padding-block: 1rem; }

/* Brand +10% again: logo, name, tagline */
.ttc-brand__mark { width: 62px; height: 46px; }
.ttc-brand__name { font-size: 1.21rem; }
.ttc-brand__tag { font-size: 0.91rem; }

/* Brand name + tagline use the installed DM Sans (Font Library) */
.ttc-brand__name, .ttc-brand__tag { font-family: var(--wp--preset--font-family--dm-sans, "DM Sans", sans-serif); }

/* ==========================================================================
   Woven design elements: netting grid + circuit traces
   ========================================================================== */
:root {
	--ttc-net: linear-gradient(rgba(46, 211, 198, 0.06) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(90deg, rgba(46, 211, 198, 0.06) 1px, transparent 1px) 0 0 / 22px 22px;
}

/* Page header band (About, Case Studies, Contact) */
.ttc-archive-head { position: relative; isolation: isolate; padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }
.ttc-archive-head::before,
.page-slug-about .ttc-archive-head::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	pointer-events: none;
}
.ttc-archive-head::before {
	background:
		url(../svg/impact-circuit.svg) right -60px center / auto 150% no-repeat,
		radial-gradient(ellipse at 78% 0%, rgba(46, 211, 198, 0.14), transparent 60%),
		var(--ttc-net);
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.page-slug-about .ttc-archive-head::after { /* mirrored traces on the left to frame the centered title */
	background: url(../svg/impact-circuit.svg) right -60px center / auto 150% no-repeat;
	transform: translateX(-50%) scaleX(-1);
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
	opacity: 0.8;
}
@media (max-width: 720px) {
	.ttc-archive-head::before { background-size: auto 110%, auto, auto, auto; background-position: right -120px center, 0 0, 0 0, 0 0; }
	.page-slug-about .ttc-archive-head::after { display: none; }
}

/* Heading rules become circuit traces: glowing node + line */
.is-style-rule::after {
	height: 9px;
	background:
		radial-gradient(circle, #5ff2e6 0 2.5px, rgba(46, 211, 198, 0.35) 3px, transparent 4.5px) left center / 9px 9px no-repeat,
		linear-gradient(90deg, var(--ttc-border), transparent) 9px center / calc(100% - 9px) 1px no-repeat;
	filter: drop-shadow(0 0 3px rgba(46, 211, 198, 0.6));
}

/* Case study cards + filter: netting behind the laptop */
.ttc-card__media {
	background:
		linear-gradient(rgba(46, 211, 198, 0.07) 1px, transparent 1px) 0 0 / 18px 18px,
		linear-gradient(90deg, rgba(46, 211, 198, 0.07) 1px, transparent 1px) 0 0 / 18px 18px,
		radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--ttc-hero) 70%, transparent) 0%, transparent 70%),
		linear-gradient(160deg, #0f1d36, #0a1426);
}
.ttc-filter ul { background: var(--ttc-net), rgba(17, 27, 45, 0.75); }

/* CTA band: netting + traces on the right */
.ttc-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		linear-gradient(90deg, var(--ttc-surface) 30%, rgba(17, 27, 45, 0.55) 75%, rgba(17, 27, 45, 0.35)),
		url(../svg/impact-circuit.svg) right -30px center / auto 170% no-repeat,
		var(--ttc-net),
		var(--ttc-surface);
}

/* About: traces behind the photo */
.ttc-about-intro { position: relative; isolation: isolate; }
.ttc-about-intro::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: -6%;
	width: 52%;
	height: min(100%, 560px);
	background: url(../svg/impact-circuit.svg) center / contain no-repeat;
	transform: scaleX(-1);
	opacity: 0.55;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
	mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
	pointer-events: none;
}
@media (max-width: 720px) { .ttc-about-intro::before { width: 100%; height: 320px; left: 0; } }

/* About: netting panel behind the client tiles */
.ttc-client-grid {
	padding: clamp(0.9rem, 2vw, 1.25rem);
	border-radius: 8px;
	background: var(--ttc-net), rgba(8, 14, 26, 0.55);
	box-shadow: inset 0 0 0 1px rgba(46, 211, 198, 0.16);
}

/* Service cards (home + About): netting behind the illustration, fading into the card */
.ttc-service,
.ttc-about-service {
	background:
		linear-gradient(to bottom, transparent 0, var(--ttc-surface) 58%),
		radial-gradient(ellipse at 50% 22%, rgba(46, 211, 198, 0.14), transparent 60%),
		var(--ttc-net),
		var(--ttc-surface);
}

/* ---------- Woven elements: single case study ---------- */
/* Back-link strip: netting like the page header band */
.ttc-project-hero__top {
	max-width: none;
	background: var(--ttc-net);
	border-bottom: 1px solid var(--ttc-line);
}
.ttc-project-hero__top .ttc-back { display: block; max-width: var(--wp--style--global--content-size); margin-inline: auto; }

/* Hero band: netting + circuit traces over the project color */
.ttc-project-hero__band { position: relative; isolation: isolate; overflow: hidden; }
.ttc-project-hero__band::before,
.ttc-project-hero__band::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
}
.ttc-project-hero__band::before {
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.4) 70%, transparent);
	mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.4) 70%, transparent);
}
.ttc-project-hero__band::after {
	right: auto;
	width: 60%;
	background: url(../svg/impact-circuit.svg) right center / auto 130% no-repeat;
	transform: scaleX(-1);
	opacity: 0.7;
	-webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 45%, #000 70%, transparent);
	mask-image: linear-gradient(90deg, transparent 5%, #000 45%, #000 70%, transparent);
}
.ttc-project-hero__inner { position: relative; }

/* Callouts: glowing trace edge with a node + faint netting */
.ttc-case .is-style-callout {
	position: relative;
	padding-left: 1.25rem;
	background:
		linear-gradient(rgba(46, 211, 198, 0.05) 1px, transparent 1px) 0 0 / 16px 16px,
		linear-gradient(90deg, rgba(46, 211, 198, 0.05) 1px, transparent 1px) 0 0 / 16px 16px,
		var(--ttc-tint);
}
.ttc-case .is-style-callout::before {
	content: "";
	position: absolute;
	left: -1px;
	top: 0.9rem;
	bottom: 0.9rem;
	width: 2px;
	background: #5ff2e6;
	box-shadow: 0 0 8px rgba(46, 211, 198, 0.8);
}
.ttc-case .is-style-callout::after {
	content: "";
	position: absolute;
	left: -4px;
	top: calc(0.9rem - 4px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5ff2e6;
	box-shadow: 0 0 8px rgba(46, 211, 198, 0.9);
}

/* Technical Highlights: netting behind the icon */
.ttc-highlight {
	background:
		linear-gradient(to bottom, transparent 0, var(--ttc-surface) 70%),
		radial-gradient(ellipse at 15% 0%, rgba(46, 211, 198, 0.14), transparent 60%),
		var(--ttc-net),
		var(--ttc-surface);
}

/* Impact outcomes: dot-matrix + glow, like the home Impact card */
.ttc-outcome {
	background:
		linear-gradient(to bottom, rgba(17, 27, 45, 0.2), var(--ttc-surface) 85%),
		var(--ttc-net),
		var(--ttc-surface);
}
.ttc-outcome .ttc-stat__value {
	position: relative;
	isolation: isolate;
	color: #effcfb;
	text-shadow: 0 0 16px rgba(46, 211, 198, 0.6), 0 0 40px rgba(46, 211, 198, 0.25);
}
.ttc-outcome .ttc-stat__value::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -0.15em 18%;
	background-image: radial-gradient(rgba(46, 211, 198, 0.45) 1px, transparent 1.5px);
	background-size: 6px 6px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
	opacity: 0.6;
}
.ttc-outcome .ttc-stat__label { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; }

/* Client Feedback: traces in the corner */
.ttc-feedback {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		linear-gradient(90deg, var(--ttc-surface) 45%, rgba(17, 27, 45, 0.55)),
		url(../svg/impact-circuit.svg) right -20px center / auto 180% no-repeat,
		var(--ttc-surface);
}

/* Next Project: netting + traces on the right */
.ttc-next {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		linear-gradient(90deg, var(--ttc-surface) 25%, rgba(17, 27, 45, 0.55) 70%, rgba(17, 27, 45, 0.3)),
		url(../svg/impact-circuit.svg) right 90px center / auto 220% no-repeat,
		var(--ttc-net),
		var(--ttc-surface);
}

/* Case Studies (archive + platform filters): full-width intro */
.post-type-archive-project .ttc-archive-head p,
.tax-project_platform .ttc-archive-head p { max-width: none; }

/* Hero location/role line above the H1 */
.ttc-eyebrow {
	margin: 0 0 0.9rem;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ttc-accent);
	text-shadow: 0 0 10px rgba(46, 211, 198, 0.45);
}
.ttc-eyebrow::before { content: "/// "; letter-spacing: 0.05em; }