/*
 * Front-end CSS.
 *
 * Design tokens (color, type scale, spacing, layout widths) live in
 * theme.json. Only rules that theme.json cannot express belong here —
 * keep this file small.
 */

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

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

/* Visible, consistent keyboard focus regardless of element type. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

a,
.wp-block-button__link {
	transition: color 0.15s ease, background-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Core's overlay menu covers the viewport; keep its links comfortably tappable. */
.wp-block-navigation__responsive-dialog .wp-block-navigation-item__content {
	padding-top: var(--wp--preset--spacing--30, 0.75rem);
	padding-bottom: var(--wp--preset--spacing--30, 0.75rem);
}

/* =========================================================================
 * Homepage design system (frozen — see docs/DESIGN-SYSTEM.md)
 *
 * Everything below exists only because theme.json + Core Blocks can't
 * express it: full-bleed split panels, an asymmetric photo mosaic, CSS
 * counters for the numbered list, and a handful of restrained brand
 * devices (ink-dots, registration marks, the header hairline) built from
 * the logo's own confirmed CMY drop concept. No JavaScript is used
 * anywhere in this file — mobile navigation is Core Navigation's own
 * overlay menu.
 * ========================================================================= */

/* -------------------- Base typography rhythm -------------------- */

/* Prototype's global rhythm is h1-h4 { margin: 0 0 0.5em } / p { margin: 0 0
 * 1em } (see prototype.css). WordPress's own layout-support stylesheet sets
 * `margin-block: 0` (blockGap, see theme.json) on every direct child of a
 * constrained/flow container at `:root`-level, (0,1,0) specificity — so a
 * heading/paragraph with no other class of its own (relying purely on this
 * generic default) would otherwise render with zero margin instead of the
 * prototype's 0.5em/1em. Matching that same (0,1,0) via :root + a bare tag
 * inside :where() (a real class here would push us to (0,2,0) and wrongly
 * outrank component rules like .tychen-eyebrow or .tychen-stat__value that
 * intentionally want a *different* margin) ties on specificity, and this
 * stylesheet loading after WordPress's settles the tie in our favor —
 * without disturbing any more-specific existing rule. */
:root :where(h1, h2, h3, h4) {
	margin-block: 0 0.5em;
}

:root :where(p) {
	margin-block: 0 1em;
}

/* WordPress additionally zeroes the *last* child of a constrained container
 * specifically — `:root :where(.is-layout-constrained) > :last-child` reaches
 * (0,2,0), beating the (0,1,0) baseline above. Three unclassed elements on
 * this page are their container's last child: the Products heading, the
 * Applications lede, and the footer brand blurb. Fixed individually here,
 * each with just enough specificity to win, rather than raising the general
 * baseline itself (which would then outrank legitimate component rules). */
.tychen-products h2.wp-block-heading {
	margin-block-end: 0.5em;
}

:root .tychen-applications__lede,
:root .site-footer__brand p {
	margin-block-end: 1em;
}

/* Prototype has no fluid clamp for h1/h2 — flat sizes with two explicit
 * breakpoint steps (see prototype.css). Hero's own H1 uses the separate
 * "hero" font-size token and is unaffected by this. */
@media (width <= 767px) {
	:root :where(h1) {
		font-size: 2rem;
	}

	:root :where(h2) {
		font-size: 1.625rem;
	}
}

@media (width >= 1440px) {
	:root :where(h1) {
		font-size: 2.875rem;
	}
}

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

/* Shared component rule, not a Hero-only fix: any `wp:buttons` group on this
 * site (currently only the Hero's two-CTA row, but this is the reusable
 * rule any future one should also get for free) needs a real gap between
 * buttons — matching the prototype's `.hero__actions { gap: 1rem }`. It
 * used to come from WordPress's default blockGap value, which this theme
 * intentionally zeroed (see the blockGap note above) to stop it injecting
 * unwanted margin between sections; buttons groups lost their gap as a
 * side effect. Restored here directly on the block's own class rather
 * than a per-button margin, so it survives reordering/adding buttons and
 * applies to every button group, not just this one. */
.wp-block-buttons {
	gap: 1rem;
}

@media (width <= 767px) {
	.tychen-hero .wp-block-buttons .wp-block-button {
		width: 100%;
	}
}

/* Base width reads WordPress's own generated `--wp--style--global--wide-size`
 * (theme.json's `layout.wideSize`, currently 1200px) instead of repeating
 * that number here — a second, independently-maintained 1200px would drift
 * from theme.json the day someone changes one and forgets the other. The
 * >=1440px step to 1320px is this project's own Design Freeze override
 * (docs/DESIGN-SYSTEM.md), not something wideSize expresses — Core's
 * wideSize is a single static value with no per-breakpoint variant. */
.tychen-container {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: 20px;
}

@media (width >= 1440px) {
	.tychen-container {
		max-width: 1320px;
	}
}

/* -------------------- Ink-dots (restrained CMY brand mark) -------------------- */

.tychen-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
	margin: 0 0 0.75em;
}

.tychen-eyebrow--dark {
	color: #6fd9f5;
}

.tychen-eyebrow::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 8px;
	margin-right: 0.5rem;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%2300a9e0'/%3E%3Ccircle cx='11' cy='4' r='4' fill='%23e6007e'/%3E%3Ccircle cx='18' cy='4' r='4' fill='%23fdb913'/%3E%3C/svg%3E");
}

/* -------------------- Registration / crop marks -------------------- */

.tychen-hero,
.tychen-cta {
	position: relative;
}

.tychen-hero::before,
.tychen-hero::after,
.tychen-cta::before,
.tychen-cta::after {
	content: "";
	position: absolute;
	width: 28px;
	height: 28px;
	z-index: 5;
	pointer-events: none;
}

.tychen-hero::before,
.tychen-cta::before {
	top: 24px;
	left: 24px;
	border-top: 1.5px solid rgb(0 169 224 / 70%);
	border-left: 1.5px solid rgb(0 169 224 / 70%);
}

.tychen-hero::after,
.tychen-cta::after {
	bottom: 24px;
	right: 24px;
	border-bottom: 1.5px solid rgb(0 169 224 / 70%);
	border-right: 1.5px solid rgb(0 169 224 / 70%);
}

/* -------------------- Header -------------------- */

/* Light layering scale, shared by the Sticky Header and Back to Top Theme
 * Features below — both stay well under WordPress's own high z-index values
 * (Admin Bar, Navigation overlay), this just keeps the two Starter-adopted
 * floating pieces from needing a guessed number each.
 *
 * --tychen-header-height (real, measured: 92px desktop / 80px tablet / 72px
 * mobile, overridden at the breakpoints below) must live at :root, not on
 * .site-header itself — `html`'s `scroll-padding-top` further down reads
 * this same variable, and a custom property only inherits *down* the DOM
 * tree from where it's declared. `html` is an ancestor of `.site-header`,
 * not a descendant, so a declaration scoped to `.site-header` would be
 * invisible to `html` and silently fall back to 0 (confirmed by an earlier,
 * incorrect version of this rule: real-browser testing showed anchor links
 * landing right at the very top, fully hidden under the Sticky Header,
 * because `html` was reading the fallback instead of the real height).
 * Declaring it at :root instead still reaches .site-header/its descendants
 * (the mobile nav dropdown below) exactly the same way, since inheritance
 * still flows downward from :root into all of them. */
:root {
	--tychen-z-sticky-header: 50;
	--tychen-z-floating-utility: 60;
	--tychen-header-height: 92px;
}

.site-header {
	background: var(--wp--preset--color--base);
}

/* Sticky Header — Theme Feature (Appearance -> Theme Settings), toggled via
 * the `has-sticky-header` body class from inc/theme-features.php. Off means
 * a plain, non-sticky Header: no class is added, so this rule never
 * matches — not "sticky, but visually undone by other CSS". Kept as
 * `position: sticky` (not `fixed`): stays in normal document flow, no CLS. */
body.has-sticky-header .site-header {
	position: sticky;
	top: var(--tychen-admin-bar-height, 0);
	z-index: var(--tychen-z-sticky-header);
}

/* WordPress's own Admin Bar breakpoint/heights (wp-includes/css/admin-bar.css),
 * not project-specific numbers — without this, a logged-in visitor would see
 * the Sticky Header slide up partly behind the Admin Bar. */
body.admin-bar {
	--tychen-admin-bar-height: 32px;
}

@media (width <= 782px) {
	body.admin-bar {
		--tychen-admin-bar-height: 46px;
	}
}

/* Keep #products/#applications-style anchor targets clear of the Sticky
 * Header (and the Admin Bar stacked on top of it when logged in). `html`
 * can't read a custom property declared on its own descendant `body`, so
 * `:has()` reads the sticky-header state instead of duplicating the
 * Admin Bar detection here. */
html:has(body.has-sticky-header) {
	scroll-padding-top: var(--tychen-header-height, 0);
}

html:has(body.has-sticky-header.admin-bar) {
	scroll-padding-top: calc(var(--tychen-header-height, 0) + 32px);
}

@media (width <= 782px) {
	html:has(body.has-sticky-header.admin-bar) {
		scroll-padding-top: calc(var(--tychen-header-height, 0) + 46px);
	}
}

.site-header::after {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(
		90deg,
		#00a9e0 0%, #00a9e0 33.3%,
		#e6007e 33.3%, #e6007e 66.6%,
		#fdb913 66.6%, #fdb913 100%
	);
}

.site-header__inner {
	height: var(--tychen-header-height);
}

.site-header__brand {
	height: 100%;
	padding-right: 2rem;
	margin-right: 0.5rem;
	border-right: 1px solid var(--wp--preset--color--border);
}

/* Fixed height, auto width — per docs/DESIGN-SYSTEM.md "Logo 使用规则" (only
 * ever scaled proportionally). Sizing by width instead would make the header
 * row's height depend on the logo file's actual aspect ratio, and overflow
 * it if that raster isn't exactly the source SVG's 300:185 box. */
.site-header__logo img {
	width: auto !important;
	height: 64px !important;
}

.site-header__nav-area {
	gap: 2.25rem;
}

.site-header__nav .wp-block-navigation__container {
	gap: 1.85rem !important;
}

.site-header__nav .wp-block-navigation-item__content {
	position: relative;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	padding-block: 0.4rem;
}

.site-header__nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--primary);
	transition: right 0.2s ease;
}

.site-header__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

.site-header__nav .wp-block-navigation-item__content:hover::after {
	right: 0;
}

.site-header__nav .wp-block-navigation__submenu-container {
	min-width: 15rem;
	padding: 0.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 12px 24px rgb(0 0 0 / 8%);
}

.site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	width: 100%;
	padding: 0.65rem 0.75rem;
	white-space: nowrap;
}

.site-header__cta .wp-block-button__link {
	white-space: nowrap;
}

@media (width <= 1023px) {
	:root {
		--tychen-header-height: 80px;
	}

	.site-header__logo img {
		height: 54px !important;
	}

	.site-header__nav-area {
		gap: 1.25rem;
	}

	.site-header__nav .wp-block-navigation__container {
		gap: 1.15rem !important;
	}

	.site-header__nav .wp-block-navigation-item__content {
		font-size: 0.875rem;
	}
}

@media (width <= 767px) {
	:root {
		--tychen-header-height: 72px;
	}

	.site-header__logo img {
		height: 46px !important;
	}

	.site-header__brand {
		padding-right: 1rem;
		margin-right: 0;
		border-right: none;
	}

	/* Core Navigation's default mobile presentation is a full-viewport
	 * fixed modal (its own padding, background, close control, and a
	 * right-aligned link list carried over from the desktop
	 * "items-justified-right" layout). The prototype's mobile menu is a
	 * plain dropdown anchored right under the header, left-aligned,
	 * full-width divided rows — Core Navigation's semantics (the same
	 * markup, the same open/close/focus/interactivity behavior, the same
	 * `html.has-modal-open` scroll lock) are kept; only its presentation
	 * is retargeted here to match. */
	.site-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: var(--tychen-header-height) 0 auto 0;
		height: auto;
		max-height: calc(100vh - var(--tychen-header-height));
		padding: 0 !important;
		background: var(--wp--preset--color--base);
		border-bottom: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 12px 24px rgb(0 0 0 / 8%);
	}

	.site-header__nav .wp-block-navigation__responsive-container-content {
		padding: 0 !important;
	}

	.site-header__nav .wp-block-navigation__responsive-container-content,
	.site-header__nav .wp-block-navigation__container {
		align-items: stretch !important;
	}

	.site-header__nav .wp-block-navigation__container {
		flex-direction: column;
		gap: 0 !important;
		padding: 1rem 20px 0;
	}

	.site-header__nav .wp-block-navigation-item {
		display: block;
	}

	.site-header__nav .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 0.85rem 0 !important;
		border-bottom: 1px solid var(--wp--preset--color--border);
		text-align: left;
	}

	.site-header__nav .wp-block-navigation-item__content::after {
		display: none;
	}

	.site-header__nav .wp-block-navigation__submenu-container {
		position: static;
		min-width: 0;
		padding: 0 0 0 1rem;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-block: 0.7rem !important;
		white-space: normal;
	}

	.site-header__nav .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 22px;
		right: 20px;
	}

	.site-header__nav .wp-block-navigation__responsive-container-close svg {
		width: 18px;
		height: 18px;
	}
}

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

.tychen-hero .wp-block-cover__background {
	background: linear-gradient(
		100deg,
		rgb(10 11 13 / 94%) 0%,
		rgb(10 11 13 / 82%) 28%,
		rgb(10 11 13 / 40%) 54%,
		rgb(10 11 13 / 8%) 74%
	) !important;
	opacity: 1 !important;
}

.tychen-hero .wp-block-cover__inner-container {
	max-width: 700px;
	padding: 9rem 20px 5rem;
}

/* Core's own CSS for content-position blocks forces
 * `.wp-block-cover__inner-container{margin:0}` at higher specificity than
 * anything we can put on the inner-container itself (it deliberately repeats
 * .has-custom-content-position for extra specificity), so the left offset
 * has to live on the outer flex container as padding instead of as a margin
 * on the inner box — same resulting position, just not fighting Core's rule.
 * Left edge should land where .tychen-container's own content starts (that
 * class already adds its own 20px padding on top of this) — max-width/2 =
 * 600px, no extra offset. */
.tychen-hero.tychen-hero {
	padding-left: max(0px, calc(50% - 600px));
}

.tychen-hero__title {
	color: #fff;
	text-shadow: 0 2px 16px rgb(0 0 0 / 50%);
	margin-bottom: 0.4em;
}

.tychen-hero__subtitle {
	font-size: 1.125rem;
	color: rgb(255 255 255 / 82%);
	max-width: 46ch;
}

.tychen-hero__specs {
	gap: 2rem;
	margin: 2rem 0 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 25%);
}

.tychen-hero__specs > * {
	gap: 0.3rem;
}

.tychen-spec__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 55%);
	margin: 0 0 0.3rem;
}

.tychen-spec__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: 1.0625rem;
	color: #fff;
}

.tychen-btn--on-dark .wp-block-button__link {
	border-color: rgb(255 255 255 / 55%);
	color: #fff;
}

.tychen-btn--on-dark .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

@media (width <= 1023px) {
	.tychen-hero .wp-block-cover__inner-container {
		padding: 7rem 20px 4rem;
	}
}

@media (width <= 767px) {
	.tychen-hero .wp-block-cover__inner-container {
		padding: 6.5rem 20px 3rem;
	}

	.tychen-hero__specs {
		gap: 1.25rem 2rem;
	}

	.tychen-hero::before,
	.tychen-hero::after,
	.tychen-cta::before,
	.tychen-cta::after {
		display: none;
	}
}

/* -------------------- Why Choose Us -------------------- */

.tychen-why {
	padding-top: clamp(3.5rem, 2rem + 6vw, 6.5rem);
}

.tychen-why__inner {
	align-items: stretch;
	gap: 3.5rem;
}

.tychen-why__inner > .tychen-why__text {
	flex: 1.05 1 0%;
}

.tychen-why__inner > .tychen-why__media {
	flex: 0.95 1 0%;
}

.tychen-why__heading {
	margin-bottom: 2.25rem;
}

.tychen-numbered-list {
	position: relative;
	padding-left: 1.25rem;
	counter-reset: tychen-item;
}

.tychen-numbered-list::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0;
	width: 2px;
	background: var(--wp--preset--color--primary);
	opacity: 0.35;
}

.tychen-numbered-list__item {
	position: relative;
	counter-increment: tychen-item;
	padding: 1.6rem 0 1.6rem 3.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.tychen-numbered-list__item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.tychen-numbered-list__item::before {
	content: counter(tychen-item, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.625rem;
	font-weight: 700;
	color: var(--wp--preset--color--border);
}

.tychen-numbered-list__item h3 {
	margin-bottom: 0.4rem;
}

.tychen-numbered-list__item p {
	margin: 0;
	color: var(--wp--preset--color--body-text);
}

.tychen-why__media {
	position: relative;
	margin: 0;
}

.tychen-why__media-img {
	height: 100%;
	margin: 0;
}

.tychen-why__media-img img {
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
}

.tychen-why__media-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 1rem 1.25rem;
	background: linear-gradient(0deg, rgb(8 9 11 / 72%), transparent);
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
}

.tychen-mission {
	margin-top: 4rem;
	padding: 3.5rem 20px;
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
	text-align: center;
}

.tychen-mission__mark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	opacity: 0.3;
	font-weight: 700;
	margin: 0 0 -0.35rem;
}

.tychen-mission__quote {
	max-width: 760px;
	margin: 0 auto;
	font-size: 1.375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

@media (width <= 1023px) {
	.tychen-why__inner {
		flex-wrap: wrap;
	}

	.tychen-why__inner > .tychen-why__text,
	.tychen-why__inner > .tychen-why__media {
		flex: 1 1 100%;
	}

	.tychen-why__media-img img {
		min-height: 320px;
	}
}

@media (width <= 767px) {
	.tychen-mission {
		padding: 2.75rem 20px;
	}

	.tychen-mission__quote {
		font-size: 1.125rem;
	}
}

/* -------------------- Stats band -------------------- */

.tychen-stats-band {
	background-image: radial-gradient(rgb(255 255 255 / 9%) 1px, transparent 1px);
	background-size: 15px 15px;
}

.tychen-stats-band__inner {
	gap: 2rem;
	padding-block: 3.25rem;
	text-align: center;
}

.tychen-stat__value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.625rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.tychen-stat__label {
	font-size: 0.8125rem;
	color: #b7b9c0;
	margin: 0;
}

@media (width <= 767px) {
	.tychen-stats-band__inner {
		grid-template-columns: 1fr 1fr !important;
		gap: 1.75rem 1.25rem;
	}
}

/* -------------------- Products split -------------------- */

.tychen-products {
	padding-top: clamp(3.5rem, 2rem + 6vw, 6.5rem);
}

.tychen-products-split {
	align-items: stretch;
	gap: 0;
	margin-top: 3rem;
}

.tychen-product-panel {
	flex: 1 1 0%;
	min-height: 640px;
}

.tychen-product-panel:first-child {
	box-shadow: inset -1px 0 0 rgb(0 169 224 / 50%);
}

.tychen-product-panel .wp-block-cover__background {
	background: linear-gradient(
		0deg,
		rgb(8 9 11 / 97%) 0%,
		rgb(8 9 11 / 88%) 48%,
		rgb(8 9 11 / 30%) 74%,
		rgb(8 9 11 / 0%) 90%
	) !important;
	opacity: 1 !important;
}

.tychen-product-panel .wp-block-cover__inner-container {
	max-width: 480px;
	padding: 2.75rem;
}

.tychen-product-panel h3 {
	color: #fff;
	font-size: 1.75rem;
	margin-bottom: 0.5rem;
	text-shadow: 0 2px 14px rgb(0 0 0 / 60%);
}

.tychen-product-panel p {
	color: rgb(255 255 255 / 82%);
}

.tychen-product-panel__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.5rem;
}

.tychen-product-panel__fit {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 1.1rem;
	padding-left: 0.85rem;
	border-left: 2px solid var(--wp--preset--color--primary);
}

.tychen-product-panel__sku {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: rgb(255 255 255 / 55%);
	margin: 0 0 1.25rem;
}

.tychen-product-panel__link a {
	color: var(--wp--preset--color--primary);
	font-size: 0.9375rem;
	font-weight: 600;
}

.tychen-product-panel__link a:hover {
	color: #fff;
}

/* Motion diagrams: a static icon (arrows only — the prototype's animated
 * dot was purely decorative and dropped here per "skip animation that
 * isn't worth maintaining, keep the visual intent"). */
.tychen-motion {
	position: relative;
	margin: 1rem 0 1.25rem !important;
	padding-left: 76px;
	min-height: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 65%);
	display: flex;
	align-items: center;
}

.tychen-motion::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 64px;
	height: 14px;
	background-repeat: no-repeat;
	background-position: center;
}

.tychen-motion--scan::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cline x1='6' y1='12' x2='114' y2='12' stroke='%2300a9e0' stroke-opacity='.55' stroke-width='1.5'/%3E%3Cpath d='M6 12 L18 6 M6 12 L18 18' stroke='%2300a9e0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M114 12 L102 6 M114 12 L102 18' stroke='%2300a9e0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tychen-motion--pass::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cline x1='6' y1='12' x2='102' y2='12' stroke='%2300a9e0' stroke-opacity='.55' stroke-width='1.5'/%3E%3Cpath d='M102 12 L90 6 M102 12 L90 18' stroke='%2300a9e0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (width <= 1023px) {
	.tychen-products-split {
		flex-wrap: wrap;
	}

	.tychen-product-panel {
		flex: 1 1 100%;
		min-height: 460px;
	}

	.tychen-product-panel:first-child {
		box-shadow: inset 0 -1px 0 rgb(0 169 224 / 50%);
	}
}

/* -------------------- Applications mosaic -------------------- */

.tychen-applications {
	padding-top: clamp(3.5rem, 2rem + 6vw, 6.5rem);
	padding-bottom: clamp(3.5rem, 2rem + 6vw, 6.5rem);
}

.tychen-applications__lede {
	max-width: 62ch;
	font-size: 1.0625rem;
}

.tychen-mosaic {
	grid-template-rows: repeat(2, 260px) !important;
	gap: 4px !important;
	margin-top: 3rem;
}

.tychen-mosaic__item {
	position: relative;
	margin: 0;
	overflow: hidden;
}

/* core/image wraps <img> in a <figure> — without an explicit height on
 * that intermediate element, "height: 100%" on the img has nothing to
 * resolve against and the image renders at its natural aspect ratio
 * instead of filling the grid cell. */
.tychen-mosaic__item .wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
}

.tychen-mosaic__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.tychen-mosaic__item:hover img {
	transform: scale(1.05);
}

.tychen-mosaic__item--large {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.tychen-mosaic__item--top-mid {
	grid-column: 3;
	grid-row: 1;
}

.tychen-mosaic__item--bottom-mid {
	grid-column: 3;
	grid-row: 2;
}

.tychen-mosaic__item--tall {
	grid-column: 4;
	grid-row: 1 / 3;
}

.tychen-mosaic__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0.9rem 1rem;
	background: linear-gradient(0deg, rgb(8 9 11 / 78%), transparent);
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (width >= 1440px) {
	.tychen-mosaic {
		grid-template-rows: repeat(2, 300px) !important;
	}
}

@media (width <= 1023px) {
	.tychen-mosaic {
		grid-template-columns: repeat(2, 1fr) !important;
		grid-template-rows: repeat(3, 220px) !important;
	}

	.tychen-mosaic__item--large {
		grid-column: 1 / 3;
		grid-row: 1;
	}

	.tychen-mosaic__item--top-mid {
		grid-column: 1;
		grid-row: 2;
	}

	.tychen-mosaic__item--bottom-mid {
		grid-column: 2;
		grid-row: 2;
	}

	.tychen-mosaic__item--tall {
		grid-column: 1 / 3;
		grid-row: 3;
	}
}

@media (width <= 767px) {
	.tychen-mosaic {
		grid-template-columns: 1fr !important;
		grid-template-rows: none !important;
	}

	.tychen-mosaic__item {
		grid-column: auto !important;
		grid-row: auto !important;
		height: 260px;
	}
}

/* -------------------- Final CTA -------------------- */

.tychen-cta {
	padding-block: 7rem;
	overflow: hidden;
}

.tychen-cta::after {
	background-repeat: no-repeat;
	width: 640px;
	height: 395px;
	inset: 50% -6% auto auto;
	transform: translateY(-50%);
	opacity: 0.05;
	border: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 185'%3E%3Cg fill='%23ffffff'%3E%3Cg transform='translate(137,20) scale(0.82)'%3E%3Cpath d='M0,0 C14,22 26,30 26,46 A26,26 0 1,1 -26,46 C-26,30 -14,22 0,0 Z'/%3E%3C/g%3E%3Cg transform='translate(163,20) scale(0.82)'%3E%3Cpath d='M0,0 C14,22 26,30 26,46 A26,26 0 1,1 -26,46 C-26,30 -14,22 0,0 Z'/%3E%3C/g%3E%3Cg transform='translate(150,40) scale(0.82)'%3E%3Cpath d='M0,0 C14,22 26,30 26,46 A26,26 0 1,1 -26,46 C-26,30 -14,22 0,0 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.tychen-cta__inner {
	align-items: flex-start;
	gap: 4rem;
	position: relative;
	z-index: 1;
}

.tychen-cta__inner > .tychen-cta__content {
	flex: 1.15 1 0%;
}

.tychen-cta__inner > .tychen-cta__contact {
	flex: 1 1 0%;
}

.tychen-cta__content .wp-block-button {
	margin-top: 0.5rem;
}

.tychen-cta__contact .tychen-eyebrow {
	margin-bottom: 1.5rem;
}

.tychen-contact-info {
	gap: 1.5rem;
}

.tychen-contact-info__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 50%);
	margin: 0;
}

.tychen-contact-info__value {
	margin: 0.25em 0 0;
	color: #fff;
	font-weight: 500;
}

.tychen-contact-info__value a {
	color: #fff;
}

.tychen-contact-info__value a:hover {
	color: var(--wp--preset--color--primary);
}

@media (width <= 1023px) {
	.tychen-cta__inner {
		flex-wrap: wrap;
	}

	.tychen-cta__inner > .tychen-cta__content,
	.tychen-cta__inner > .tychen-cta__contact {
		flex: 1 1 100%;
	}
}

@media (width <= 767px) {
	.tychen-cta::after {
		display: none;
	}
}

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

/* padding-block (not the "padding: 4rem 0 3rem" physical shorthand this
 * used to be) — that 3-value form also zeroes left/right, which silently
 * cancelled the horizontal inset .tychen-container is supposed to give
 * this same element. Harmless-looking at >=1200px, where the container's
 * own centering margin still keeps content off the viewport edge, but at
 * narrower widths (no centering margin left to fall back on) it put the
 * whole footer flush against the screen edge. */
.site-footer__inner {
	gap: 2rem;
	padding-block: 4rem 3rem;
}

.site-footer__brand p {
	color: var(--wp--preset--color--subtle);
	max-width: 32ch;
}

/* Fixed height, auto width — see the matching note on .site-header__logo img. */
.site-footer__logo img {
	width: auto !important;
	height: 34px !important;
	margin-bottom: 1rem;
}

.site-footer__links h4,
.site-footer__contact h4 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
	margin-bottom: 1rem;
}

.site-footer__nav .wp-block-navigation__container {
	gap: 0.6rem !important;
}

/* Footer sitemap links are plain body-text links in the prototype, not a
 * repeat of the header nav's mono/600/small styling that Core Navigation's
 * block-level typography (theme.json core/navigation) would otherwise also
 * apply here, since it's the same "wp:navigation" block type. */
.site-footer__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--system);
	font-size: 1rem;
	font-weight: 400;
	padding: 0;
}

.site-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

.site-footer__contact p {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--body-text);
}

.site-footer__contact a {
	color: var(--wp--preset--color--body-text);
}

.site-footer__contact a:hover {
	color: var(--wp--preset--color--primary);
}

.site-footer__bottom {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block: 1.25rem;
}

.site-footer__bottom p {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--subtle);
	font-family: var(--wp--preset--font-family--mono);
}

@media (width <= 1023px) {
	.site-footer__inner {
		grid-template-columns: 1fr 1fr !important;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (width <= 767px) {
	.site-footer__inner {
		grid-template-columns: 1fr !important;
	}
}

/* -------------------- Back to Top -------------------- */

/* Theme Feature (Appearance -> Theme Settings). Only ever in the DOM when
 * the feature is on — `inc/back-to-top.php` renders nothing and enqueues
 * nothing when it's off, so this selector matching or not is the whole
 * story; there's no separate "hide via CSS" state to keep in sync. JS
 * (assets/js/back-to-top.js) toggles `.is-visible`; the hidden state uses
 * `visibility` (not `display`) so it's out of the tab order without extra
 * tabindex/aria bookkeeping, and `prefers-reduced-motion` already disables
 * the transition below via the global rule near the top of this file. */
.tychen-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: var(--tychen-z-floating-utility);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.tychen-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.tychen-back-to-top:hover,
.tychen-back-to-top:focus-visible {
	background-color: var(--wp--preset--color--primary-dark);
}