/*
Theme Name: Racktrail
Theme URI: https://hbgdesignlab.se/
Author: HDL
Author URI: https://hbgdesignlab.se/
Description: A clean, native Full Site Editing starter theme. Clone-and-own per client site. Presentation only — functionality lives in the hdl-kit plugin.
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: racktrail
Tags: full-site-editing, block-patterns, block-styles, editor-style, translation-ready
*/

/* ==========================================================================
   Racktrail global chrome.

   Every value here resolves to a theme.json token via a CSS custom property.
   No hex, no font name and no type size is written literally in this file.
   Layout signature: an 88px mono index rail + content column, hairline rules,
   zero radius, zero shadow. See content-build/design-handoff-README.md.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body);
	font-family: var(--wp--preset--font-family--franklin);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

p { text-wrap: pretty; }

:focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 2px;
}

/* WordPress injects its own skip link for block themes; style that one rather
   than shipping a second. It must clear the sticky nav when focused. */
.skip-link:focus {
	z-index: 100;
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------------------
   The rail. Every content section is 88px index column + content column.
   -------------------------------------------------------------------------- */

.rt-section {
	display: grid;
	grid-template-columns: var(--wp--custom--rail) 1fr;
	border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--base);
}

.rt-section__index {
	border-right: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	padding-top: var(--wp--preset--spacing--80);
	text-align: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
}

.rt-section__body {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70) var(--wp--preset--spacing--90);
	min-width: 0;
}

.rt-section--hero .rt-section__index { padding-top: var(--wp--preset--spacing--60); }
.rt-section--hero .rt-section__body {
	padding-top: var(--wp--preset--spacing--100);
	padding-bottom: var(--wp--preset--spacing--110);
}

/* One full-bleed band per page deliberately breaks the rail. */
.rt-band {
	position: relative;
	border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--signal);
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70) var(--wp--preset--spacing--90) var(--wp--preset--spacing--120);
	color: var(--wp--preset--color--base);
}

.rt-band__ghost {
	position: absolute;
	top: var(--wp--preset--spacing--80);
	left: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.12em;
	opacity: 0.45;
}

/* --------------------------------------------------------------------------
   Typography roles.
   -------------------------------------------------------------------------- */

.rt-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
}

.rt-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
}

.rt-mono { font-family: var(--wp--preset--font-family--mono); }

.rt-h1 {
	margin: 0;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--page-title);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}
.rt-h1--hero { font-size: var(--wp--preset--font-size--hero-title); line-height: 0.98; }
.rt-h1--conversion { font-size: var(--wp--preset--font-size--conversion-title); }

.rt-h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--section-title);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.12;
	color: var(--wp--preset--color--contrast);
}
.rt-h2--band { font-size: var(--wp--preset--font-size--band-title); letter-spacing: -0.03em; line-height: 1.04; }
.rt-h2--cta { font-size: var(--wp--preset--font-size--cta-title); letter-spacing: -0.03em; }
.rt-h2--advisory { font-size: var(--wp--preset--font-size--advisory); }

.rt-h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--card);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}
.rt-h3--sm { font-size: var(--wp--preset--font-size--card-sm); letter-spacing: -0.015em; }

.rt-lede {
	margin: 0;
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.6;
	color: var(--wp--preset--color--body);
	max-width: var(--wp--custom--measure);
}

.rt-body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: var(--wp--preset--color--body);
}

.rt-quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--quote);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.38;
	color: var(--wp--preset--color--contrast);
}

.rt-figure {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--figure);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--wp--preset--color--signal);
}

/* --------------------------------------------------------------------------
   Buttons and links.
   -------------------------------------------------------------------------- */

.rt-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	padding: 15px 26px;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--base);
	transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear;
}
.rt-btn:hover { background: var(--wp--preset--color--signal-hover); }

.rt-btn--secondary {
	background: transparent;
	border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--contrast);
	padding: 14px 25px;
}
.rt-btn--secondary:hover { background: transparent; border-color: var(--wp--preset--color--contrast); }

.rt-btn--dark {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.rt-btn--dark:hover { background: var(--wp--preset--color--panel); }

.rt-link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--signal);
	border-bottom: var(--wp--custom--hairline-width) solid transparent;
	transition: color 120ms linear, border-color 120ms linear;
}
.rt-link:hover {
	color: var(--wp--preset--color--signal-hover);
	border-bottom-color: var(--wp--preset--color--signal-hover);
}

/* --------------------------------------------------------------------------
   Hairline grids. A 1px gap over a hairline background makes the rules.
   -------------------------------------------------------------------------- */

.rt-grid {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	background: var(--wp--preset--color--hairline);
	border-top: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
}
.rt-grid > * { background: var(--wp--preset--color--base); }
.rt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rt-grid--4 { grid-template-columns: repeat(4, 1fr); }
.rt-grid--5 { grid-template-columns: repeat(5, 1fr); }

.rt-cards {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}
.rt-cards--2 { grid-template-columns: repeat(2, 1fr); }
.rt-cards--3 { grid-template-columns: repeat(3, 1fr); }
.rt-cards--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.rt-card {
	display: block;
	background: var(--wp--preset--color--panel);
	border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	padding: var(--wp--preset--spacing--50);
	transition: background-color 120ms linear;
}
.rt-card--signal { border-left: 2px solid var(--wp--preset--color--signal); }
a.rt-card:hover { background: var(--wp--preset--color--panel-hover); }

.rt-panel {
	background: var(--wp--preset--color--panel);
	border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	padding: var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------------------------
   The lava field. Five drifting blobs under a contrast filter, plus grain.
   CSS only — no JS, no video. All layers honour prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.rt-lava {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--wp--preset--color--base);
	pointer-events: none;
	filter: contrast(1.35) saturate(1.05);
}

.rt-blob { position: absolute; will-change: transform; }

.rt-blob--1 {
	left: 44%; top: -22%; width: 52%; height: 132%;
	background: radial-gradient(ellipse at 46% 50%, var(--wp--custom--lava-warm-a), var(--wp--custom--lava-fade) 60%);
	filter: blur(66px);
	animation: rtLavaA 17s ease-in-out infinite;
	animation-delay: -12s;
}
.rt-blob--2 {
	right: -8%; bottom: -28%; width: 44%; height: 104%;
	background: radial-gradient(ellipse, var(--wp--custom--lava-warm-b), transparent 60%);
	filter: blur(72px);
	animation: rtLavaB 21s ease-in-out infinite;
	animation-delay: -32s;
}
.rt-blob--3 {
	left: 58%; top: -4%; width: 24%; height: 48%;
	background: radial-gradient(ellipse, var(--wp--custom--lava-warm-c), transparent 58%);
	filter: blur(58px);
	animation: rtLavaB 14s ease-in-out infinite;
	animation-delay: -8s;
}
.rt-blob--4 {
	right: 16%; bottom: -20%; width: 30%; height: 76%;
	background: radial-gradient(ellipse, var(--wp--custom--lava-warm-d), transparent 58%);
	filter: blur(70px);
	animation: rtLavaSignal 13s ease-in-out infinite;
	animation-delay: -20s;
}
.rt-blob--5 {
	left: 30%; top: -26%; width: 54%; height: 130%;
	background: radial-gradient(ellipse, var(--wp--custom--lava-dark), transparent 60%);
	filter: blur(56px);
	animation: rtLavaDark 15s ease-in-out infinite;
	animation-delay: -16s;
}

/* Quieter mix for the CTA band and footer. */
.rt-lava--quiet .rt-blob--1 { background: radial-gradient(ellipse at 46% 50%, var(--wp--custom--lava-quiet-a), var(--wp--custom--lava-fade) 60%); }
.rt-lava--quiet .rt-blob--2 { background: radial-gradient(ellipse, var(--wp--custom--lava-quiet-b), transparent 60%); }
.rt-lava--quiet .rt-blob--3 { background: radial-gradient(ellipse, var(--wp--custom--lava-quiet-c), transparent 58%); }
.rt-lava--quiet .rt-blob--4 { background: radial-gradient(ellipse, var(--wp--custom--lava-quiet-d), transparent 58%); }

/* Masked variant — Talk to an Engineer dissolves rather than cutting. */
.rt-lava--masked {
	-webkit-mask-image: linear-gradient(to right, #000 72%, transparent);
	mask-image: linear-gradient(to right, #000 72%, transparent);
}

.rt-grain {
	position: absolute;
	inset: -6%;
	z-index: 0;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix type=%22saturate%22 values=%220%22/%3E%3C/filter%3E%3Crect width=%22300%22 height=%22300%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
	background-size: 280px;
	opacity: 0.16;
	mix-blend-mode: overlay;
	pointer-events: none;
	will-change: transform;
	animation: rtGrainJitter 2.2s steps(4) infinite;
}
.rt-grain--quiet { opacity: 0.12; }

.rt-lava-host { position: relative; overflow: clip; background: var(--wp--preset--color--base); }
.rt-lava-content { position: relative; z-index: 1; }

@keyframes rtLavaA {
	0%   { transform: translate(0%, 26%)   scale(1, 1.05); }
	33%  { transform: translate(5%, -8%)   scale(1.15, 0.95); }
	66%  { transform: translate(-3%, -34%) scale(0.92, 1.18); }
	100% { transform: translate(0%, 26%)   scale(1, 1.05); }
}
@keyframes rtLavaB {
	0%   { transform: translate(0%, -30%) scale(1.1); }
	40%  { transform: translate(-8%, 10%) scale(0.9, 1.2); }
	70%  { transform: translate(6%, 32%)  scale(1.25, 0.9); }
	100% { transform: translate(0%, -30%) scale(1.1); }
}
@keyframes rtLavaSignal {
	0%   { transform: translate(0%, 34%)    scale(1);        opacity: 0.55; }
	45%  { transform: translate(-10%, -16%) scale(1.3, 1.1); opacity: 1; }
	75%  { transform: translate(6%, -40%)   scale(0.9, 1.25); opacity: 0.8; }
	100% { transform: translate(0%, 34%)    scale(1);        opacity: 0.55; }
}
@keyframes rtLavaDark {
	0%   { transform: translate(0%, 0%)    scale(1); }
	50%  { transform: translate(-12%, 14%) scale(1.28); }
	100% { transform: translate(0%, 0%)    scale(1); }
}
@keyframes rtGrainJitter {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(-1.5%, 1%); }
	50%  { transform: translate(1%, -1.5%); }
	75%  { transform: translate(-1%, 1.5%); }
	100% { transform: translate(1.5%, -1%); }
}

@media (prefers-reduced-motion: reduce) {
	.rt-blob,
	.rt-grain { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Site nav. Sticky, 74px, dropdown opens on the full-height wrapper so the
   pointer never crosses a dead gap between the label and the panel.
   -------------------------------------------------------------------------- */

.rt-nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--wp--preset--color--base);
	border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
}

.rt-nav__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: 0 var(--wp--preset--spacing--60);
	height: var(--wp--custom--nav-height);
}

.rt-brand { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); }
.rt-brand__word {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--card-sm);
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--contrast);
}
.rt-brand__word em { font-style: normal; color: var(--wp--preset--color--signal); }

.rt-nav__items { display: flex; align-items: center; gap: 34px; }

.rt-nav__item {
	position: relative;
	height: var(--wp--custom--nav-height);
	display: flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--body);
	transition: color 120ms linear;
}
.rt-nav__item:hover { color: var(--wp--preset--color--contrast); }
.rt-nav__item--current { color: var(--wp--preset--color--contrast); }
.rt-nav__item--current::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	height: 2px;
	background: var(--wp--preset--color--signal);
}

.rt-nav__cta {
	display: inline-block;
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 11px 18px;
	transition: background-color 120ms linear;
}
.rt-nav__cta:hover { background: var(--wp--preset--color--signal-hover); }

.rt-nav__group { position: static; }
.rt-nav__toggle {
	background: none;
	border: 0;
	padding: 0;
	cursor: default;
	font: inherit;
	color: var(--wp--preset--color--contrast);
}

.rt-nav__panel {
	position: absolute;
	top: var(--wp--custom--nav-height);
	/* Aligns with the nav's content edge, not the viewport edge — absolute
	   positioning resolves against the padding box, so the inset is explicit. */
	right: var(--wp--preset--spacing--60);
	left: auto;
	display: flex;
	align-items: stretch;
	max-width: calc(100vw - (2 * var(--wp--preset--spacing--60)));
	background: var(--wp--preset--color--panel);
	border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20);
	opacity: 0;
	visibility: hidden;
}
.rt-nav__group:hover .rt-nav__panel,
.rt-nav__group:focus-within .rt-nav__panel { opacity: 1; visibility: visible; }

.rt-nav__panel a {
	display: block;
	padding: 10px 24px;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--body);
}
.rt-nav__panel a:hover {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--panel-hover);
}

.rt-nav__divider {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30) 24px var(--wp--preset--spacing--20);
}
.rt-nav__divider span:first-child {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
}
.rt-nav__rule { flex: 1; height: var(--wp--custom--hairline-width); background: var(--wp--preset--color--hairline); }

/* Hamburger — hidden until the nav runs out of room. */
.rt-nav__burger {
	display: none;
	background: none;
	border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 10px 14px;
	cursor: pointer;
}

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

.rt-footer {
	border-top: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.rt-footer__cols {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.rt-footer__head {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
	margin-bottom: 18px;
}

.rt-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--meta);
}
.rt-footer__links a { color: var(--wp--preset--color--body); transition: color 120ms linear; }
.rt-footer__links a:hover { color: var(--wp--preset--color--signal); }
/* Destinations that do not exist yet are shown, not linked. */
.rt-footer__links span { color: var(--wp--preset--color--dim); }

.rt-footer__tagline {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.55;
	color: var(--wp--preset--color--dim);
	max-width: 250px;
}

.rt-footer__contact {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.9;
	color: var(--wp--preset--color--dim);
}

.rt-footer__bottom {
	border-top: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	padding-top: var(--wp--preset--spacing--50);
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.6;
	color: var(--wp--preset--color--dim);
}
.rt-footer__bottom span:last-child { text-align: right; }

/* --------------------------------------------------------------------------
   Responsive. Desktop is the designed state (~1440px); everything below is
   design-handoff README section 7, which specifies the intended behaviour
   per component. Type scales fluidly via the theme.json clamps.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.rt-footer__cols { grid-template-columns: repeat(3, 1fr); }
	.rt-grid--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	/* The rail collapses; the index moves inline above the heading. */
	.rt-section { grid-template-columns: 1fr; }
	.rt-section__index {
		border-right: 0;
		text-align: left;
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70) 0;
	}
	.rt-section__body { padding-top: var(--wp--preset--spacing--40); }
	.rt-section--hero .rt-section__index { padding-top: var(--wp--preset--spacing--60); }

	.rt-band { padding-left: var(--wp--preset--spacing--70); }
	.rt-band__ghost { display: none; }

	.rt-grid--3,
	.rt-grid--4,
	.rt-grid--5 { grid-template-columns: repeat(2, 1fr); }
	.rt-cards--3 { grid-template-columns: repeat(2, 1fr); }

	.rt-nav__items { display: none; }
	.rt-nav__burger { display: inline-block; }
	.rt-nav__inner { gap: var(--wp--preset--spacing--30); }

	.rt-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.rt-grid--2,
	.rt-grid--3,
	.rt-grid--4,
	.rt-grid--5 { grid-template-columns: 1fr; }
	.rt-cards--2,
	.rt-cards--3 { grid-template-columns: 1fr; }

	.rt-footer__cols { grid-template-columns: 1fr; }
	.rt-footer__bottom { flex-direction: column; gap: var(--wp--preset--spacing--30); }
	.rt-footer__bottom span:last-child { text-align: left; }

	/* Blur is the expensive part of the lava field on mobile GPUs. */
	.rt-blob--1 { filter: blur(46px); }
	.rt-blob--2 { filter: blur(50px); }
	.rt-blob--3 { filter: blur(40px); }
	.rt-blob--4 { filter: blur(49px); }
	.rt-blob--5 { filter: blur(39px); }
}

/* Brand mark — two bars, the short one deliberately two-thirds width. */
.rt-mark { flex: none; }
.rt-mark__bar--a { fill: var(--wp--preset--color--contrast); }
.rt-mark__bar--b { fill: var(--wp--preset--color--signal); }
.rt-brand__word--sm { font-size: var(--wp--preset--font-size--base); }
.rt-footer__brand { margin-bottom: 18px; }
.rt-footer__contact a { color: inherit; }
.rt-footer__contact a:hover { color: var(--wp--preset--color--signal); }

/* Mobile nav panel — opened by the hamburger below the nav breakpoint. */
.rt-nav__mobile {
	display: none;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--base);
}
.rt-nav__mobile a,
.rt-nav__mobile span {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--lede);
	color: var(--wp--preset--color--body);
}
.rt-nav__mobile a:hover { color: var(--wp--preset--color--contrast); }
.rt-nav__mobile span { color: var(--wp--preset--color--dim); }

@media (max-width: 1024px) {
	.rt-nav__mobile:not([hidden]) { display: flex; }
}
@media (min-width: 1025px) {
	.rt-nav__mobile { display: none !important; }
}

/* --------------------------------------------------------------------------
   Diagram figures. Isometric line art with CSS keyframe animation — light
   travelling along paths, pulsing nodes, a sweeping ownership boundary, a
   source/target fade at cutover. No JS anywhere.
   -------------------------------------------------------------------------- */

.rt-diagram {
	position: relative;
	width: 100%;
	min-width: 0; /* so the figure can shrink inside a grid cell */
	border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	background: var(--wp--custom--diagram-ground);
}

.rt-diagram__caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: 13px 22px;
	border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
}

.rt-diagram__caption span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
/* Both truncate with ellipsis. The caption gives way first; the meta may also
   shrink rather than push the page wider than the viewport. */
.rt-diagram__caption span:first-child { flex: 1 1 auto; min-width: 0; color: var(--wp--preset--color--dim); }
.rt-diagram__caption span:last-child { flex: 0 1 auto; min-width: 0; color: var(--wp--preset--color--dim); }

.rt-diagram__figure { position: relative; width: 100%; overflow: hidden; }

@keyframes rtFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -106; } }
@keyframes rtPulse { 0%, 100% { opacity: 0.25; r: 3.5; } 50% { opacity: 1; r: 5; } }
@keyframes rtBreathe { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.85; } }
@keyframes rtFail { 0%, 54% { opacity: 1; } 62%, 84% { opacity: 0.16; } 92%, 100% { opacity: 1; } }
@keyframes rtHold { 0%, 54% { opacity: 0; } 64%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes rtDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rtSweep { 0%, 8% { transform: translateY(0); } 42%, 58% { transform: translateY(168px); } 92%, 100% { transform: translateY(0); } }
@keyframes rtSrcFade { 0%, 52% { opacity: 1; } 68%, 88% { opacity: 0.18; } 96%, 100% { opacity: 1; } }
@keyframes rtTgtLight { 0%, 52% { opacity: 0.2; } 68%, 88% { opacity: 1; } 96%, 100% { opacity: 0.2; } }
@keyframes rtStage { 0%, 100% { opacity: 0.22; } 50% { opacity: 1; } }
@keyframes rtSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.rt-diagram [class*="rt-dg-a"] { animation: none !important; }
}

/* Diagram figures — generated by tools/make-diagrams.py. */
.rt-dg-a1 { animation: rtFail 22s ease-in-out infinite; }
.rt-dg-a10 { animation: rtFlow 3s linear infinite; }
.rt-dg-a11 { animation: rtFlow 3s linear infinite; animation-delay: -1s; }
.rt-dg-a12 { animation: rtFlow 3s linear infinite; animation-delay: -2s; }
.rt-dg-a13 { animation: rtFlow 3s linear infinite; animation-delay: -1.5s; }
.rt-dg-a14 { animation: rtFlow 3s linear infinite; animation-delay: -0.5s; }
.rt-dg-a15 { animation: rtFlow 10s linear infinite; }
.rt-dg-a16 { animation: rtFlow 10s linear infinite; animation-delay: -5s; }
.rt-dg-a17 { animation: rtPulse 6.4s ease-in-out infinite; }
.rt-dg-a18 { animation: rtPulse 6.4s ease-in-out infinite; animation-delay: -0.8s; }
.rt-dg-a19 { animation: rtPulse 6.4s ease-in-out infinite; animation-delay: -1.6s; }
.rt-dg-a2 { animation: rtFlow 5.2s linear infinite; }
.rt-dg-a20 { animation: rtPulse 6.4s ease-in-out infinite; animation-delay: -2.4s; }
.rt-dg-a21 { animation: rtPulse 6.4s ease-in-out infinite; animation-delay: -3.2s; }
.rt-dg-a22 { animation: rtPulse 6.4s ease-in-out infinite; animation-delay: -4s; }
.rt-dg-a23 { animation: rtPulse 6.4s ease-in-out infinite; animation-delay: -4.8s; }
.rt-dg-a24 { animation: rtPulse 6.4s ease-in-out infinite; animation-delay: -5.6s; }
.rt-dg-a25 { animation: rtBreathe 6.4s ease-in-out infinite; }
.rt-dg-a26 { animation: rtSweep 18s cubic-bezier(0.65,0,0.35,1) infinite; }
.rt-dg-a27 { animation: rtFlow 6.4s linear infinite; }
.rt-dg-a28 { animation: rtSrcFade 20s ease-in-out infinite; }
.rt-dg-a29 { animation: rtTgtLight 20s ease-in-out infinite; }
.rt-dg-a3 { animation: rtFlow 5.2s linear infinite; animation-delay: -2.6s; }
.rt-dg-a30 { animation: rtFlow 3.8s linear infinite; }
.rt-dg-a31 { animation: rtFlow 3.8s linear infinite; animation-delay: -1.26s; }
.rt-dg-a32 { animation: rtFlow 3.8s linear infinite; animation-delay: -2.52s; }
.rt-dg-a33 { animation: rtStage 20s ease-in-out infinite; }
.rt-dg-a34 { animation: rtStage 20s ease-in-out infinite; animation-delay: -16s; }
.rt-dg-a35 { animation: rtStage 20s ease-in-out infinite; animation-delay: -12s; }
.rt-dg-a36 { animation: rtStage 20s ease-in-out infinite; animation-delay: -8s; }
.rt-dg-a37 { animation: rtStage 20s ease-in-out infinite; animation-delay: -4s; }
.rt-dg-a38 { animation: rtHold 20s ease-in-out infinite; }
.rt-dg-a4 { animation: rtFlow 8.4s linear infinite; animation-delay: -4.2s; }
.rt-dg-a5 { animation: rtPulse 5.2s ease-in-out infinite; }
.rt-dg-a6 { animation: rtPulse 5.2s ease-in-out infinite; animation-delay: -1.8s; }
.rt-dg-a7 { animation: rtPulse 5.2s ease-in-out infinite; animation-delay: -3.6s; }
.rt-dg-a8 { animation: rtHold 22s ease-in-out infinite; }
.rt-dg-a9 { animation: rtDrift 14s ease-in-out infinite; }
.rt-dg-f-c0 { fill: var(--wp--preset--color--signal); }
.rt-dg-f-c10 { fill: var(--wp--custom--diagram-face-b); }
.rt-dg-f-c11 { fill: var(--wp--custom--diagram-face-c); }
.rt-dg-f-c12 { fill: var(--wp--custom--diagram-face-d); }
.rt-dg-f-c13 { fill: var(--wp--custom--diagram-faint); }
.rt-dg-f-c2 { fill: var(--wp--preset--color--muted); }
.rt-dg-f-c3 { fill: var(--wp--preset--color--dim); }
.rt-dg-f-c5 { fill: var(--wp--preset--color--panel); }
.rt-dg-f-c6 { fill: var(--wp--preset--color--body); }
.rt-dg-f-c7 { fill: var(--wp--custom--diagram-ground); }
.rt-dg-f-c9 { fill: var(--wp--custom--diagram-face-a); }
.rt-dg-mono { font-family: var(--wp--preset--font-family--mono); }
.rt-dg-s-c0 { stroke: var(--wp--preset--color--signal); }
.rt-dg-s-c1 { stroke: var(--wp--preset--color--hairline); }
.rt-dg-s-c4 { stroke: var(--wp--preset--color--border-strong); }
.rt-dg-s-c8 { stroke: var(--wp--custom--diagram-ghost); }
.rt-dg-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Per-instance figure height is a client-set field, so it arrives as a custom
   property rather than a token. 440px is the design default; the Home strip
   crops to 196px. */
.rt-diagram__figure { height: var(--rt-diagram-height, 440px); }
.rt-diagram__figure--strip { height: 196px; }

/* --------------------------------------------------------------------------
   Block components. Class names come from the hdl-kit render templates.
   -------------------------------------------------------------------------- */

.rt-empty {
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
}

.rt-section__heading { margin: 0 0 var(--wp--preset--spacing--65); }
.rt-section__heading + .rt-section__intro,
.rt-section__intro { margin: calc(-1 * var(--wp--preset--spacing--55)) 0 var(--wp--preset--spacing--55); max-width: 700px; }
.rt-section__closing { margin-top: var(--wp--preset--spacing--55); }
/* Wins over .rt-statement's margin reset regardless of source order. A closing
   statement is display-scale, so it needs more air than running copy. */
.rt-statement.rt-section__closing { margin-top: var(--wp--preset--spacing--65); }

.rt-btn-row { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); }
.rt-hero__eyebrow { margin-bottom: var(--wp--preset--spacing--55); }
.rt-hero__lede { margin: 0 0 var(--wp--preset--spacing--60); max-width: 660px; }
.rt-h1 + .rt-hero__lede { margin-top: var(--wp--preset--spacing--50); }
.rt-h1--hero { margin-bottom: var(--wp--preset--spacing--50); }

/* Cells inside a hairline grid. */
.rt-cell { padding: 30px var(--wp--preset--spacing--45) 34px; }
.rt-cell__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--signal);
	margin-bottom: var(--wp--preset--spacing--40);
	display: block;
}
.rt-cell--rule { box-shadow: inset 0 2px 0 0 var(--wp--preset--color--signal); }
.rt-cell .rt-h3 { margin-bottom: var(--wp--preset--spacing--25); }
.rt-card .rt-h3 { margin-bottom: var(--wp--preset--spacing--25); }
.rt-card__body { margin-bottom: var(--wp--preset--spacing--40); }
.rt-card { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 30px; }

/* CTA band — the before-footer module.

   The design insets it behind the 88px rail like every other section, which
   leaves a narrow dark strip down the left. Sitting directly above the footer
   that strip reads as the panel being clipped rather than as the rail, so this
   one module runs full-bleed instead.

   Scoped deliberately to .rt-section--cta: every other panel-filled section
   (the handover promise, what we're not, the migration commitments) keeps the
   rail, because they sit mid-page where the rail still has sections below it
   to line up with.

   The left padding matches the full-bleed VMware band, so the copy stays
   optically aligned with the content column above it even though the panel
   itself now spans edge to edge.

   The content cell IS the panel — same element as .rt-section__body — so its
   padding and fill are set in one place rather than split across two selectors
   that then fight over specificity. */
.rt-section--cta {
	grid-template-columns: 1fr;
	border-bottom: 0;
}

.rt-section--cta > .rt-section__index { display: none; }

.rt-section--cta > .rt-section__body {
	background: var(--wp--preset--color--panel);
	padding: var(--wp--preset--spacing--85) var(--wp--preset--spacing--70)
		var(--wp--preset--spacing--95) var(--wp--preset--spacing--120);
}
.rt-cta__lede { margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60); max-width: 700px; }
.rt-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--40); }
.rt-cta__prefix { color: var(--wp--preset--color--dim); }
.rt-cta__link {
	color: var(--wp--preset--color--body);
	border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--border-strong);
}
.rt-cta__link:hover { color: var(--wp--preset--color--contrast); }

/* Label/value rows. */
.rt-rows {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	background: var(--wp--preset--color--hairline);
	border-top: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
}
.rt-row {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	padding: 30px var(--wp--preset--spacing--45);
}
.rt-rows--narrow .rt-row { grid-template-columns: 300px 1fr; }
.rt-rows--wide .rt-row { grid-template-columns: 380px 1fr; }
.rt-row--emphasis {
	background: var(--wp--preset--color--panel);
	border-left: 2px solid var(--wp--preset--color--signal);
}
.rt-row__label .rt-label { display: block; margin-bottom: var(--wp--preset--spacing--20); }

/* FAQ. */
.rt-faq { display: grid; gap: var(--wp--preset--spacing--10); background: var(--wp--preset--color--hairline); border-top: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); }
.rt-faq--2 { grid-template-columns: repeat(2, 1fr); }
.rt-faq__item { background: var(--wp--preset--color--base); padding: 30px var(--wp--preset--spacing--45); }
.rt-faq__q { margin-bottom: var(--wp--preset--spacing--25); }

/* Panel statement. */
.rt-panel--section { padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); }
.rt-panel__items { margin-top: var(--wp--preset--spacing--55); }
.rt-panel__item .rt-h3 { margin-bottom: var(--wp--preset--spacing--25); }
.rt-prose { margin-top: var(--wp--preset--spacing--40); max-width: var(--wp--custom--measure); }
.rt-prose p { margin: 0 0 var(--wp--preset--spacing--30); }

/* Comparison table. */
.rt-table { display: grid; gap: var(--wp--preset--spacing--10); background: var(--wp--preset--color--hairline); border-top: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); }
.rt-table__row { display: grid; gap: var(--wp--preset--spacing--10); background: var(--wp--preset--color--hairline); }
.rt-table--2 .rt-table__row { grid-template-columns: 1fr 1fr; }
.rt-table--3 .rt-table__row { grid-template-columns: 1.2fr 1fr 1fr; }
.rt-table--4 .rt-table__row { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.rt-table__cell {
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--45) var(--wp--preset--spacing--45);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--body);
}
.rt-table__row--head .rt-table__cell { padding-top: var(--wp--preset--spacing--35); padding-bottom: var(--wp--preset--spacing--35); }
.rt-table__cell--label { color: var(--wp--preset--color--contrast); }

/* Spec profiles. */
.rt-spec .rt-h3 { margin-bottom: var(--wp--preset--spacing--40); }
.rt-spec__list { margin: 0 0 var(--wp--preset--spacing--40); display: grid; grid-template-columns: auto 1fr; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); }
.rt-spec__list dt { margin: 0; }
.rt-spec__list dd { margin: 0; font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--body); text-align: right; }
.rt-spec__price { border-top: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); padding-top: var(--wp--preset--spacing--30); }
.rt-spec__price .rt-mono { font-size: var(--wp--preset--font-size--card-sm); color: var(--wp--preset--color--signal); }
.rt-footnote { margin-top: var(--wp--preset--spacing--55); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--dim); }

/* Full-bleed band. */
.rt-band__heading { color: var(--wp--preset--color--base); max-width: 900px; }
.rt-band__lede { margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60); max-width: 720px; font-size: var(--wp--preset--font-size--lede); }
.rt-band__stages { display: flex; flex-wrap: wrap; margin-bottom: var(--wp--preset--spacing--60); }
.rt-band__stage { flex: 1 1 160px; padding: 0 var(--wp--preset--spacing--40); border-left: 1px solid var(--wp--custom--band-divider); }
.rt-band__stage:first-child { padding-left: 0; border-left: 0; }
.rt-band__stage-label { display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; margin-bottom: var(--wp--preset--spacing--20); }
.rt-band__stage-text { display: block; font-family: var(--wp--preset--font-family--grotesk); font-size: var(--wp--preset--font-size--base); }

/* Testimonial. */
.rt-initials {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--wp--preset--color--panel);
	border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--dim);
}
.rt-testimonial { margin: 0; max-width: 900px; }
.rt-testimonial__quote { margin: 0 0 var(--wp--preset--spacing--60); }
.rt-testimonial__figure { color: var(--wp--preset--color--signal); }
.rt-testimonial__by { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.rt-testimonial__name { display: block; font-family: var(--wp--preset--font-family--grotesk); font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--contrast); }
.rt-testimonial__role { display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--dim); }

/* Proof. */
.rt-proof { display: grid; grid-template-columns: 1fr 320px; gap: var(--wp--preset--spacing--60); align-items: start; }
.rt-proof__figure { border-left: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); padding-left: var(--wp--preset--spacing--50); }
.rt-proof__body { margin-top: var(--wp--preset--spacing--50); max-width: var(--wp--custom--measure); }
.rt-proof__caption { display: block; margin-top: var(--wp--preset--spacing--30); }

/* Numbered steps. */
.rt-steps { list-style: none; margin: var(--wp--preset--spacing--55) 0 0; padding: 0; counter-reset: rt-step; display: grid; gap: var(--wp--preset--spacing--10); background: var(--wp--preset--color--hairline); border-top: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); }
.rt-steps__item { background: var(--wp--preset--color--base); padding: var(--wp--preset--spacing--45); counter-increment: rt-step; }
.rt-steps__item::before { content: counter(rt-step, decimal-leading-zero); display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.16em; color: var(--wp--preset--color--signal); margin-bottom: var(--wp--preset--spacing--25); }
.rt-steps__item .rt-h3 { margin-bottom: var(--wp--preset--spacing--20); }

/* Article cards and chips. */
.rt-chips { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--55); }
.rt-chip { border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); padding: 8px 14px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--dim); }
.rt-chip:hover { border-color: var(--wp--preset--color--dim); color: var(--wp--preset--color--contrast); }
.rt-chip--current { border-color: var(--wp--preset--color--signal); color: var(--wp--preset--color--signal); }

.rt-article { display: block; background: var(--wp--preset--color--base); padding: 30px var(--wp--preset--spacing--45) 34px; transition: background-color 120ms linear; }
.rt-article:hover { background: var(--wp--preset--color--panel); }
.rt-article__meta { display: flex; gap: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--40); }
.rt-article__cat { color: var(--wp--preset--color--signal); }
.rt-article__title { margin-bottom: var(--wp--preset--spacing--25); }
.rt-article__excerpt { margin-bottom: var(--wp--preset--spacing--50); }
.rt-article__by { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.rt-article__by .rt-initials { width: 32px; height: 32px; font-size: var(--wp--preset--font-size--label); }
.rt-empty-state { color: var(--wp--preset--color--dim); }

/* Lead article card. */
.rt-lead { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--custom--hairline-width); background: var(--wp--preset--color--hairline); border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); }
.rt-lead__text, .rt-lead__table { background: var(--wp--preset--color--panel); padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); }
.rt-lead__title { margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40); }
.rt-lead__excerpt { margin-bottom: var(--wp--preset--spacing--55); }
.rt-lead__table-head { display: block; margin-bottom: var(--wp--preset--spacing--40); }
.rt-lead__row { display: flex; justify-content: space-between; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--30) 0; border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); font-size: var(--wp--preset--font-size--meta); }
.rt-lead__row--signal { color: var(--wp--preset--color--signal); }
.rt-lead__row--signal .rt-mono { color: var(--wp--preset--color--signal); }

/* Team. */
.rt-team { display: grid; gap: var(--wp--preset--spacing--10); background: var(--wp--preset--color--hairline); border-top: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); }
.rt-team__row { display: grid; grid-template-columns: 64px 300px 1fr 200px; gap: var(--wp--preset--spacing--50); align-items: start; background: var(--wp--preset--color--base); padding: 30px var(--wp--preset--spacing--45); }
.rt-team__name { display: block; font-family: var(--wp--preset--font-family--grotesk); font-size: var(--wp--preset--font-size--lede); color: var(--wp--preset--color--contrast); margin-bottom: var(--wp--preset--spacing--20); }
.rt-team__projects { font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--dim); }

/* Figure grid. */
.rt-figures--panel > .rt-figures__cell { background: var(--wp--preset--color--panel); }
.rt-figures__cell { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--45); }
.rt-figures__value { display: block; margin-bottom: var(--wp--preset--spacing--25); }
.rt-figures__label { display: block; }
.rt-figures__note { margin-top: var(--wp--preset--spacing--30); }

/* Regions. */
.rt-region__code { display: block; margin-bottom: var(--wp--preset--spacing--25); }
.rt-region .rt-h3 { margin-bottom: var(--wp--preset--spacing--25); }
.rt-status { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.16em; text-transform: uppercase; }
.rt-status--available { color: var(--wp--preset--color--signal); }
.rt-status--planned,
.rt-status--on_request { color: var(--wp--preset--color--dim); }
.rt-region__note { margin-top: var(--wp--preset--spacing--30); }

/* Terminal. */
.rt-terminal { border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); background: var(--wp--preset--color--panel); }
.rt-terminal__body { margin: 0; padding: var(--wp--preset--spacing--50); background: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); line-height: 1.9; color: var(--wp--preset--color--body); overflow-x: auto; }
.rt-terminal__line { display: block; white-space: pre-wrap; }
.rt-terminal__sigil { color: var(--wp--preset--color--signal); }
.rt-terminal__line--prompt { color: var(--wp--preset--color--contrast); }

/* Documentation card. */
.rt-doc { border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); background: var(--wp--preset--color--panel); }
.rt-doc__bar { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--35) var(--wp--preset--spacing--45); border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); }
.rt-doc__badge { border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--signal); color: var(--wp--preset--color--signal); font-family: var(--wp--preset--font-family--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 8px; }
.rt-doc__path { font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rt-doc__path:hover { color: var(--wp--preset--color--signal); }
.rt-doc__steps { list-style: none; margin: 0; padding: 0; counter-reset: rt-doc; }
.rt-doc__step { counter-increment: rt-doc; padding: var(--wp--preset--spacing--45); border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); }
.rt-doc__step:last-child { border-bottom: 0; }
.rt-doc__step::before { content: counter(rt-doc, decimal-leading-zero); display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.16em; color: var(--wp--preset--color--signal); margin-bottom: var(--wp--preset--spacing--25); }
.rt-doc__step .rt-h3 { margin-bottom: var(--wp--preset--spacing--20); }

/* Subscribe and the booking split. */
.rt-subscribe { padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); }
.rt-subscribe__body { margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--55); max-width: var(--wp--custom--measure); }
.rt-subscribe__form { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); align-items: flex-end; }
.rt-subscribe__form .rt-field { flex: 1 1 260px; }
.rt-subscribe__note { margin-top: var(--wp--preset--spacing--30); }

.rt-section--split { grid-template-columns: var(--wp--custom--rail) 1fr; }
.rt-split { display: grid; grid-template-columns: 1fr 1fr; position: relative; z-index: 1; min-width: 0; }
.rt-split__left { padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--60) var(--wp--preset--spacing--110) var(--wp--preset--spacing--70); }
.rt-split__right {
	background: var(--wp--preset--color--panel);
	border-left: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--60) var(--wp--preset--spacing--110);
}
.rt-split__h { margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40); }
.rt-split__note { margin-top: var(--wp--preset--spacing--55); }
.rt-split__quote { margin: var(--wp--preset--spacing--60) 0 0; }
.rt-split__quote blockquote { margin: 0 0 var(--wp--preset--spacing--40); }

/* Form fields. Shared by the bespoke subscribe form and hdl-forms output, so
   the generated form matches the designed field spec exactly. */
.rt-field,
.hdl-form__field { display: block; margin-bottom: var(--wp--preset--spacing--40); }
.rt-field > span,
.hdl-form__field > label,
.hdl-form__group-label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
}
.rt-field input,
.rt-field textarea,
.rt-field select,
.hdl-form input[type="text"],
.hdl-form input[type="email"],
.hdl-form input[type="tel"],
.hdl-form input[type="url"],
.hdl-form input[type="date"],
.hdl-form input[type="time"],
.hdl-form input[type="number"],
.hdl-form textarea,
.hdl-form select {
	width: 100%;
	background: var(--wp--preset--color--base);
	border: var(--wp--custom--hairline-width) solid var(--wp--preset--color--border-strong);
	border-radius: 0;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--franklin);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--contrast);
}
.rt-field input:focus,
.hdl-form input:focus,
.hdl-form textarea:focus,
.hdl-form select:focus { outline: none; border-color: var(--wp--preset--color--signal); }

.hdl-form button,
.hdl-form input[type="submit"] {
	width: 100%;
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 0;
	padding: 15px 26px;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	cursor: pointer;
}
.hdl-form button:hover,
.hdl-form input[type="submit"]:hover { background: var(--wp--preset--color--signal-hover); }

/* Honeypot: present for bots, gone for everyone else. */
.hdl-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hdl-form__notice { margin-bottom: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--body); }
.hdl-form__notice:empty { display: none; }
.hdl-form__notice--success { color: var(--wp--preset--color--signal); }
.hdl-form__notice--error { color: var(--wp--preset--color--contrast); }

@media (max-width: 1024px) {
	.rt-split { grid-template-columns: 1fr; }
	/* Form first below the split breakpoint — it is the conversion. */
	.rt-split__right { order: -1; border-left: 0; border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); }
	.rt-split__left { padding-left: var(--wp--preset--spacing--70); padding-right: var(--wp--preset--spacing--70); }
	.rt-proof { grid-template-columns: 1fr; }
	.rt-lead { grid-template-columns: 1fr; }
	.rt-team__row { grid-template-columns: 44px 1fr; }
	.rt-team__bio, .rt-team__projects { grid-column: 2; }
	.rt-rows--narrow .rt-row,
	.rt-rows--wide .rt-row { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
	.rt-faq--2 { grid-template-columns: 1fr; }
	/* Spec tables scroll; comparison tables restack below. */
	.rt-table { overflow-x: visible; }
}
.rt-band__eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.78; margin-bottom: var(--wp--preset--spacing--40); }
.rt-section__link { margin-top: var(--wp--preset--spacing--55); }
.rt-strip { margin-bottom: var(--wp--preset--spacing--40); }

/* The lava field is absolutely positioned inside the section, so the rail
   cells must be positioned too or the field paints over them. */
.rt-lava-host > .rt-section__index,
.rt-lava-host > .rt-section__body,
.rt-section--hero > .rt-section__index,
.rt-section--hero > .rt-section__body,
.rt-section--split > .rt-section__index {
	position: relative;
	z-index: 1;
}
/* Filler cells keep a partially filled hairline grid on the canvas fill. */
.rt-cell--filler { background: var(--wp--preset--color--base); }
/* A column carrying two menus (Products then Solutions) needs the design's
   28px gap above the second heading. */
.rt-footer__links + .rt-footer__head { margin-top: var(--wp--preset--spacing--45); }
.rt-faq--rows .rt-faq__item { display: grid; grid-template-columns: 380px 1fr; gap: var(--wp--preset--spacing--50); }
.rt-faq--rows .rt-faq__q { margin-bottom: 0; }
.rt-faq--columns { grid-template-columns: repeat(2, 1fr); }
.rt-cell__link { display: inline-block; margin-top: var(--wp--preset--spacing--30); }
.rt-table__note { margin-top: var(--wp--preset--spacing--55); padding: var(--wp--preset--spacing--45); }
.rt-table__note .rt-h3 { margin-bottom: var(--wp--preset--spacing--20); }
@media (max-width: 1024px) {
	.rt-faq--rows .rt-faq__item { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--25); }
	.rt-faq--columns { grid-template-columns: 1fr; }
}

/* Configuration table — mono, hairline rows, horizontal scroll rather than crush. */
.rt-spectable__scroll { overflow-x: auto; }
.rt-spectable { width: 100%; border-collapse: collapse; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small); }
.rt-spectable th,
.rt-spectable td { text-align: left; vertical-align: top; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--35); }
.rt-spectable thead th {
	padding-top: var(--wp--preset--spacing--25);
	padding-bottom: var(--wp--preset--spacing--25);
	border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--border-strong);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
}
.rt-spectable tbody th {
	border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--lede);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.rt-spectable tbody td { border-bottom: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); color: var(--wp--preset--color--body); line-height: 1.6; }
.rt-spectable th:first-child, .rt-spectable td:first-child { padding-left: 0; }
.rt-spectable__sub { display: block; color: var(--wp--preset--color--dim); }
.rt-spectable__price { text-align: right; color: var(--wp--preset--color--signal); white-space: nowrap; }
td.rt-spectable__price { color: var(--wp--preset--color--signal); }

/* One section fill per page. */
.rt-section--panel > .rt-section__body { background: var(--wp--preset--color--panel); }
.rt-perf__diagram { margin-bottom: var(--wp--preset--spacing--55); }
.rt-perf__tiles { margin-bottom: var(--wp--preset--spacing--50); }
.rt-perf__tile { padding: 26px var(--wp--preset--spacing--45) 28px; }
.rt-perf__label { display: block; margin-bottom: var(--wp--preset--spacing--35); }
.rt-perf__value { display: block; font-size: var(--wp--preset--font-size--band-title); }
.rt-perf__unit { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--dim); letter-spacing: 0; }
.rt-perf__note { display: block; margin-top: var(--wp--preset--spacing--20); }

/* Section continuation: several groups inside one rail section. The preceding
   section drops its bottom rule so the seam closes. */
.rt-section:has(+ .rt-section--cont) { border-bottom: 0; }
.rt-section--cont > .rt-section__body { padding-top: 0; }
.rt-section--cont > .rt-section__index { padding-top: 0; }
.rt-section--cont .rt-section__heading { margin-top: var(--wp--preset--spacing--65); }
.rt-figures__cite { display: block; margin-top: var(--wp--preset--spacing--30); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.16em; text-transform: uppercase; font-style: normal; color: var(--wp--preset--color--dim); }
.rt-chips__label { display: block; margin-bottom: var(--wp--preset--spacing--30); }

/* hdl-forms output, styled to the designed field spec. Each field is a <p>
   wrapper; half-width fields sit two across as the design draws them. */
.hdl-form__field { display: block; margin-bottom: var(--wp--preset--spacing--40); }
.hdl-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--wp--preset--spacing--40); }
.hdl-form__field { grid-column: 1 / -1; }
.hdl-form__field--half { grid-column: span 1; }
.hdl-form__submit { grid-column: 1 / -1; margin-top: var(--wp--preset--spacing--25); }
.hdl-form__check { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); text-transform: none; letter-spacing: 0; font-family: var(--wp--preset--font-family--franklin); font-size: var(--wp--preset--font-size--body); color: var(--wp--preset--color--body); }
.hdl-form__check input { width: auto; }
.hdl-form select { appearance: none; background-image: none; }
@media (max-width: 700px) {
	.hdl-form__grid { grid-template-columns: 1fr; }
	.hdl-form__field--half { grid-column: 1 / -1; }
}

/* Products dropdown, two columns. The design drew a single 268px column with
   one solution in it; there are now twelve, which would run past the fold. The
   Solutions column splits into two so the panel stays wider than it is tall. */
.rt-nav__col {
	padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
	min-width: 244px;
}
.rt-nav__col--wide {
	border-left: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline);
	min-width: 460px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-content: start;
}
.rt-nav__grouphead {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--25) 24px var(--wp--preset--spacing--20);
}
.rt-nav__grouphead span:first-child {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
	white-space: nowrap;
}
/* A solution whose page does not exist yet: shown, not linked. */
.rt-nav__pending {
	display: block;
	padding: 10px 24px;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--dim);
	cursor: default;
}

@media (max-width: 1024px) {
	.rt-nav__panel { position: static; display: block; }
	.rt-nav__col,
	.rt-nav__col--wide { min-width: 0; display: block; border-left: 0; }
}

/* ==========================================================================
   Mobile optimisation.

   The design was drawn desktop-only at ~1440px, so nothing below that width
   had a specified treatment. These rules cover the three things that actually
   fail on a phone: touch targets drawn for a mouse, mono labels set at sizes
   that only survive on a large screen, and section rhythm that collapses once
   the rail is gone.
   ========================================================================== */

@media (max-width: 700px) {
	/* The mono scale is tuned for a 1440px canvas. 10px labels are legible
	   there and marginal on a phone, so the two smallest steps step up.
	   Redefining the presets updates every consumer at once. */
	:root {
		--wp--preset--font-size--label: 11px;
		--wp--preset--font-size--eyebrow: 12px;
		--wp--preset--font-size--micro: 13px;
	}

	/* Eyebrows carry 0.18em tracking; at phone widths that turns a short line
	   into three. Ease it off. */
	.rt-eyebrow { letter-spacing: 0.12em; }
	.rt-label { letter-spacing: 0.12em; }
}

/* --------------------------------------------------------------------------
   Touch targets. Anything tappable gets 44px of height below the nav
   breakpoint — the design's 23px footer links and 17px tertiary links are
   mouse-sized.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.rt-footer__links { gap: 0; }
	.rt-footer__links a,
	.rt-footer__links span {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.rt-footer__contact a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}

	.rt-link,
	.rt-cta__link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.rt-nav__burger { min-height: 44px; padding: 12px 16px; }

	.rt-brand { min-height: 44px; }

	.rt-nav__mobile a,
	.rt-nav__mobile span {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
	.rt-nav__mobile { gap: 0; }

	/* The chips are a filter control, not decoration. */
	.rt-chip { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Vertical rhythm once the rail collapses. The index moves inline above the
   heading, so the content column needs its own breathing room rather than
   inheriting the tight gap that made sense beside a rail.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.rt-section__body { padding-top: var(--wp--preset--spacing--50); }
	.rt-section--cont > .rt-section__body { padding-top: 0; }
	.rt-section__index { padding-bottom: 0; }
	.rt-section__heading { margin-bottom: var(--wp--preset--spacing--55); }
}

@media (max-width: 700px) {
	/* Side by side, both halves would be mostly ellipsis at this width. */
	.rt-diagram__caption {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: var(--wp--preset--spacing--25) var(--wp--preset--spacing--35);
	}
	.rt-diagram__caption span { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Comparison tables on mobile.

   Scrolling sideways puts the Racktrail column off-screen — the one column the
   comparison exists to show. Each row restacks into label/value pairs instead,
   with the column heading carried on the cell as data-col.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.rt-table__row {
		display: block;
		background: var(--wp--preset--color--base);
		padding: var(--wp--preset--spacing--45) var(--wp--preset--spacing--35) var(--wp--preset--spacing--40);
	}

	.rt-table__cell { padding: 0; background: none; }

	.rt-table__cell--label {
		font-family: var(--wp--preset--font-family--grotesk);
		font-size: var(--wp--preset--font-size--card-sm);
		color: var(--wp--preset--color--contrast);
		margin-bottom: var(--wp--preset--spacing--30);
	}

	.rt-table__cell[data-col] { padding-left: var(--wp--preset--spacing--35); }
	.rt-table__cell[data-col] + .rt-table__cell[data-col] { margin-top: var(--wp--preset--spacing--30); }

	.rt-table__cell[data-col]::before {
		content: attr(data-col);
		display: block;
		margin-bottom: 4px;
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--label);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--wp--preset--color--dim);
	}

	/* The heading row's content now lives on each cell as data-col. */
	.rt-table .rt-table__row--head { display: none; }

	/* The Racktrail column is the answer, so it takes the signal rule. */
	.rt-table__cell[data-col]:last-child { border-left: 2px solid var(--wp--preset--color--signal); }
	.rt-table__cell[data-col]:not(:last-child) { border-left: var(--wp--custom--hairline-width) solid var(--wp--preset--color--hairline); }
}

@media (max-width: 700px) {
	/* 9px is below the legible floor on a phone. */
	.rt-doc__badge { font-size: var(--wp--preset--font-size--label); letter-spacing: 0.14em; }
	.rt-nav__grouphead span:first-child { font-size: var(--wp--preset--font-size--label); }
}

/* The rail numeral stays at the quietest step by design. It is aria-hidden and
   purely positional, so it carries no information a reader must resolve. */

/* --------------------------------------------------------------------------
   Measure.

   The brand book caps body measure at 720px. That was applied to the lede but
   not to running body copy, so text in the wider containers — feature rows,
   FAQ answers, closing statements — ran to 109ch and, in one case, 161ch.
   Around 65-75ch is the readable band; past ~85ch the eye loses the line.
   -------------------------------------------------------------------------- */

.rt-body,
.rt-prose p,
.rt-faq__a,
.rt-row__value p,
.rt-doc__step p,
.rt-steps__item p,
.rt-team__bio { max-width: var(--wp--custom--measure); }

/* Display-scale statements carry fewer characters per line at 26px, so they
   take a wider cap than running prose without exceeding the readable band. */
.rt-statement {
	margin: 0;
	max-width: 860px;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--statement);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
}

/* Inside a narrow grid cell the cap is already met by the column, so this only
   bites in the wide contexts it is meant for. */

/* The aside wraps a prefix and a link whose heights diverge once the link
   takes a 44px touch target, so it aligns them explicitly. */
.rt-cta__aside {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

/* The dropdown also opens on click, so touch devices wide enough to show the
   desktop nav can reach it. */
.rt-nav__group.is-open .rt-nav__panel { opacity: 1; visibility: visible; }
.rt-nav__toggle { cursor: pointer; }

/* A signal focus ring is invisible against the signal band. */
.rt-band :focus-visible { outline-color: var(--wp--preset--color--base); }

/* --------------------------------------------------------------------------
   Kill the top-level block gap.

   WordPress puts --wp--style--block-gap between sibling top-level blocks, so a
   20px band of body background sat between the nav and the hero — the lava
   field starts at the section, so the strip read as the background failing to
   reach the nav line. The same gap broke the 88px rail: its border-right lives
   on the section, so every gap between sections left the vertical line
   interrupted.

   This design carries all its own spacing — sections have explicit padding and
   a hairline bottom border, and are meant to be flush. Nothing here needs an
   inherited gap.
   -------------------------------------------------------------------------- */

.wp-site-blocks > * + *,
.entry-content > * + *,
.wp-block-post-content > * + * { margin-block-start: 0; }

/* --------------------------------------------------------------------------
   The signal rule follows the pointer.

   A hairline grid marks one cell with a 2px signal top rule. On hover the rule
   moves to the cell under the pointer and the marked cell yields it, so the
   accent tracks attention instead of staying pinned to the first tile. Only
   one cell ever carries it, which keeps the brand book's one-accent rule.
   -------------------------------------------------------------------------- */

.rt-grid > .rt-cell { transition: box-shadow 120ms linear, background-color 120ms linear; }

/* While the grid is hovered, the statically marked cell gives up the rule. */
.rt-grid:hover > .rt-cell--rule { box-shadow: none; }

/* ...and whichever cell is under the pointer takes it. */
.rt-grid > .rt-cell:not(.rt-cell--filler):hover {
	box-shadow: inset 0 2px 0 0 var(--wp--preset--color--signal);
	background: var(--wp--preset--color--panel);
}

/* Keyboard parity: a focused link inside a cell marks its cell too. */
.rt-grid > .rt-cell:focus-within { box-shadow: inset 0 2px 0 0 var(--wp--preset--color--signal); }

@media (prefers-reduced-motion: reduce) {
	.rt-grid > .rt-cell { transition: none; }
}

@media (max-width: 1024px) {
	/* The CTA's wide left inset exists to compensate for the 88px rail it drops.
	   Below this breakpoint the rail is already collapsed, so the compensation
	   would push the band's copy out of line with every section above it. */
	.rt-section--cta > .rt-section__body { padding-left: var(--wp--preset--spacing--70); }
}

/* --------------------------------------------------------------------------
   HDL Core logo output.

   With a logo set in HDL Core → Branding the chrome switches from the inline
   mark to hdl_the_logo(), which emits the attachment at its natural size —
   1200×300 for the lockup. These constrain it to the design's mark heights.
   The alt stays empty on purpose: the wrapping link already carries an
   aria-label, so alt text would announce the brand twice.
   -------------------------------------------------------------------------- */

/* The kit lockup is a 4:1 horizontal composition, not the taller mark-plus-text
   the nav draws inline. Matching it on height shrinks the wordmark to nothing,
   so it is matched on the design's optical width instead. */
.rt-brand .hdl-logo {
	display: block;
	width: 150px;
	height: auto;
	max-width: none;
}

.rt-footer__brand .hdl-logo { width: 132px; }

@media (max-width: 700px) {
	.rt-brand .hdl-logo { width: 124px; }
}