/*!
 * Theme Name: CUSXO
 * Description: Product showcase and inquiry site for CUSXO — promotional products and custom sourcing.
 * Version: 1.0.0
 * Text Domain: cusxo
 *
 * Design tokens live in assets/css/tokens.css; this file is the site's structure and look.
 * Colour and type are a proposal around the blue/orange CUSXO mark — see the note in tokens.css.
 */

/* ---------------------------------------------------------------- base */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-body);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	color: var(--c-ink);
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}

p {
	margin: 0;
}

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

a {
	color: var(--c-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--c-blue-bright);
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--c-orange-tint);
	color: var(--c-ink);
}

.skip-link {
	position: absolute;
	left: var(--sp-4);
	top: -100px;
	z-index: 100;
	padding: var(--sp-3) var(--sp-5);
	background: var(--c-navy);
	color: #fff;
	border-radius: var(--radius-s);
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: var(--sp-4);
	color: #fff;
}

/* ---------------------------------------------------------------- primitives */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-4);
	color: var(--c-orange-dark);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}

.eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--c-orange);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 46px;
	padding: 0 var(--sp-5);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.btn--primary {
	background: var(--c-orange);
	color: #fff;
	box-shadow: 0 6px 18px -8px rgba(242, 106, 33, 0.7);
}

.btn--primary:hover {
	background: var(--c-orange-dark);
	color: #fff;
	transform: translateY(-1px);
}

.btn--ghost {
	background: #fff;
	border-color: var(--c-line-strong);
	color: var(--c-ink);
}

.btn--ghost:hover {
	border-color: var(--c-blue-bright);
	color: var(--c-blue);
}

.btn--quiet {
	background: transparent;
	border-color: transparent;
	color: var(--c-ink);
	padding-inline: var(--sp-3);
}

.btn--quiet:hover {
	color: var(--c-blue);
}

.btn--sm {
	min-height: 38px;
	padding: 0 var(--sp-4);
	font-size: var(--text-xs);
}

/* ---------------------------------------------------------------- header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.94);
	border-bottom: 1px solid var(--c-line);
	backdrop-filter: saturate(1.4) blur(10px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	min-height: var(--header-h);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--c-navy);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-decoration: none;
	white-space: nowrap;
}

.brand:hover {
	color: var(--c-navy);
}

.brand__dot {
	width: 7px;
	height: 7px;
	margin-top: 0.45em;
	border-radius: 50%;
	background: var(--c-orange);
}

/* The uploaded logo, when the site profile carries one: the wordmark above is the fallback. */
.brand--logo {
	letter-spacing: normal;
}

/* The uploaded logo is a wordmark on a transparent canvas, so its own proportions are kept: the
   width sets the size and nothing is cropped off either end of the word. */
.brand--logo {
	display: block;
	flex: none;
	width: clamp(108px, 9vw, 136px);
	height: auto;
	overflow: visible;
}

.brand__img {
	display: block;
	width: 100%;
	height: auto;
}

.site-nav {
	display: flex;
	align-items: center;
	margin-inline: auto;
}

/* The small-screen menu; the row above is the same menu printed plain for wide screens. */
.site-nav-mobile {
	display: none;
}

.site-nav__panel {
	display: flex;
	align-items: center;
}

/* The panel carries the action on small screens, where the header bar has no room for it. */
.site-nav__cta {
	display: none;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.35rem, 1.6vw, 1.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: inline-block;
	padding: 0.55rem 0.35rem;
	color: var(--c-ink);
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	color: var(--c-blue);
}

.site-nav__toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	padding: 0.5rem 0.85rem;
	background: #fff;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-pill);
	color: var(--c-ink);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
}

.site-nav__toggle-icon {
	position: relative;
	width: 15px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 15px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.site-nav__toggle-icon::before {
	top: -5px;
}

.site-nav__toggle-icon::after {
	top: 5px;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon {
	background: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::before {
	transform: translateY(5px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after {
	transform: translateY(-5px) rotate(-45deg);
}

.site-header__cta {
	flex-shrink: 0;
}

@media (max-width: 1040px) {
	.site-nav__list {
		gap: 0.15rem;
	}

	.site-nav__list a {
		padding-inline: 0.3rem;
		font-size: var(--text-xs);
	}

	.site-header__cta {
		min-height: 40px;
		padding-inline: var(--sp-4);
		font-size: var(--text-xs);
	}
}

@media (max-width: 860px) {
	.site-header__inner {
		flex-wrap: wrap;
		gap: var(--sp-2);
		padding-block: 0.6rem;
	}

	/* Wide-screen row and bar action give way to the toggle. */
	.site-nav,
	.site-header__cta {
		display: none;
	}

	/* `contents` keeps the toggle on the logo's row while the panel gets a row of its own. */
	.site-nav-mobile {
		display: contents;
	}

	.site-nav__toggle {
		display: inline-flex;
		margin-left: auto;
	}

	/* The behaviour inserts its own wrapper around the panel; the wrapper takes the full row. */
	.site-nav-mobile > [data-disclosure-motion] {
		flex: 1 0 100%;
	}

	.site-nav__panel {
		display: block;
	}

	.site-nav__cta {
		display: inline-flex;
		width: 100%;
		margin-top: var(--sp-3);
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: var(--sp-2);
	}

	.site-nav__list li {
		border-top: 1px solid var(--c-line);
	}

	.site-nav__list a {
		display: block;
		padding: 0.85rem 0.15rem;
		font-size: var(--text-base);
	}
}

/* The disclosure behaviour sets a measured height on its panel; from the desktop breakpoint the
   navigation is a row, so that height must not clip it. The toggle is hidden there. */
@media (min-width: 861px) {
	.site-nav > *,
	.site-nav [data-panel] {
		height: auto !important;
		overflow: visible !important;
	}
}

/* ---------------------------------------------------------------- footer */

.site-footer {
	padding-block: var(--sp-7) var(--sp-5);
	background: var(--c-navy);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--c-on-dark-muted);
	font-size: var(--text-sm);
}

.site-footer a {
	color: #dce8f4;
	text-decoration: none;
}

.site-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(120px, 1fr));
	gap: var(--sp-6) var(--sp-5);
}

.site-footer__col {
	min-width: 0;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-4);
}

.site-footer .brand {
	color: #fff;
	font-size: 1.15rem;
}

.site-footer__tagline {
	max-width: 34ch;
	margin-top: var(--sp-4);
	color: var(--c-on-dark-muted);
	line-height: 1.6;
}

.site-footer__title {
	margin: 0 0 var(--sp-4);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}

.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sp-2);
}

.site-footer__more {
	color: #fff;
	font-weight: 600;
}

.site-footer__cta {
	margin-top: var(--sp-1);
}

.site-footer .btn--primary {
	background: var(--c-orange);
	border-color: var(--c-orange);
}

.site-footer .btn--primary:hover {
	background: var(--c-orange-dark);
	border-color: var(--c-orange-dark);
	text-decoration: none;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
}

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--text-xs);
}

.site-footer__bar-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .consent-open {
	padding: 0;
	background: none;
	border: 0;
	color: #dce8f4;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

@media (max-width: 1080px) {
	.site-footer__top {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

@media (max-width: 720px) {
	.site-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.site-footer__top {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------- consent banner */

.consent {
	position: fixed;
	inset: auto var(--sp-4) var(--sp-4);
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4) var(--sp-5);
	max-width: 780px;
	margin-inline: auto;
	padding: var(--sp-4) var(--sp-5);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-m);
}

.consent[hidden] {
	display: none;
}

.consent__body {
	flex: 1 1 340px;
	display: grid;
	gap: var(--sp-2);
}

.consent__text {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.55;
}

.consent__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
}

.consent__category {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--c-ink);
	font-size: var(--text-sm);
	cursor: pointer;
}

.consent__category input {
	width: 1.05em;
	height: 1.05em;
	margin: 0;
	accent-color: var(--c-blue);
}

.consent__text a {
	color: var(--c-blue);
}

.consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

@media (max-width: 620px) {
	.consent {
		inset: auto var(--sp-3) var(--sp-3);
		padding: var(--sp-4);
	}

	.consent__actions {
		width: 100%;
	}

	.consent__actions .btn {
		flex: 1 1 auto;
	}
}

/* ---------------------------------------------------------------- whatsapp button */

/* The button sits in a corner the consent banner also uses: it stays below the banner's z-index and,
   on screens where the banner spans the full row (below), waits until the visitor has answered. */
.wa-fab {
	position: fixed;
	right: var(--sp-4);
	bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
	z-index: 55;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-pill);
	background: #25d366; /* WhatsApp's own green: a brand mark, not one of the site's colours. */
	color: #fff;
	box-shadow: var(--shadow-m);
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.wa-fab:hover {
	background: #1da851;
	color: #fff;
}

.wa-fab:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

.wa-fab__icon {
	display: block;
	width: 30px;
	height: 30px;
}

@media (prefers-reduced-motion: reduce) {
	.wa-fab {
		transition: none;
	}
}

@media (max-width: 900px) {
	body:has(.consent:not([hidden])) .wa-fab {
		display: none;
	}
}

/* Room for the fixed button, so it never sits on the footer's last line of links. */
@media (min-width: 861px) {
	.site-footer__bar {
		padding-right: 4.5rem;
	}
}

@media (max-width: 860px) {
	.site-footer__bar {
		padding-bottom: 4.5rem;
	}
}

/* ---------------------------------------------------------------- legal documents */

.legal__hero {
	padding-block: var(--sp-6) var(--sp-5);
	background: linear-gradient(180deg, var(--c-surface), var(--c-bg));
	border-bottom: 1px solid var(--c-line);
}

.legal__hero .eyebrow {
	margin-bottom: var(--sp-3);
}

.legal__hero h1 {
	font-size: var(--text-h1);
	line-height: 1.04;
}

.legal__lead {
	max-width: 62ch;
	margin-top: var(--sp-4);
	color: var(--c-body);
	font-size: var(--text-lead);
	line-height: 1.6;
}

.legal__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-4);
	margin-top: var(--sp-4);
	color: var(--c-muted);
	font-size: var(--text-xs);
}

.legal__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.legal__meta span + span::before {
	content: "";
	width: 4px;
	height: 4px;
	margin-right: 0.4rem;
	border-radius: 50%;
	background: var(--c-line-strong);
}

.legal__grid {
	display: grid;
	grid-template-columns: 258px minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 4rem);
	align-items: start;
	padding-block: var(--sp-6) var(--sp-section);
}

.legal__aside {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-5));
	display: grid;
	gap: var(--sp-5);
}

.toc {
	padding-left: var(--sp-4);
	border-left: 2px solid var(--c-line);
}

.toc__title {
	margin: 0 0 var(--sp-3);
	color: var(--c-ink);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}

.toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
	display: grid;
	gap: 0.45rem;
}

.toc li {
	counter-increment: toc;
	font-size: var(--text-sm);
	line-height: 1.35;
}

.toc a {
	display: flex;
	gap: 0.55rem;
	color: var(--c-body);
	text-decoration: none;
}

.toc a::before {
	content: counter(toc, decimal-leading-zero);
	color: var(--c-line-strong);
	font-variant-numeric: tabular-nums;
}

.toc a:hover {
	color: var(--c-blue);
}

.toc a:hover::before {
	color: var(--c-orange);
}

.legal__card {
	padding: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	font-size: var(--text-sm);
	line-height: 1.6;
}

.legal__card-title {
	margin: 0 0 var(--sp-2);
	color: var(--c-ink);
	font-weight: 600;
}

.legal__card .btn {
	width: 100%;
	margin-top: var(--sp-4);
}

.legal__siblings {
	margin: var(--sp-4) 0 0;
	padding: var(--sp-4) 0 0;
	border-top: 1px solid var(--c-line);
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

.legal__siblings a {
	color: var(--c-body);
	text-decoration: none;
}

.legal__siblings a:hover {
	color: var(--c-blue);
	text-decoration: underline;
}

/* Long-form body: one measure, numbered sections, quiet rules between them. */
.prose {
	max-width: var(--wrap-prose);
	counter-reset: prose-section;
	color: var(--c-body);
	line-height: 1.78;
}

.prose > * {
	margin: 0;
}

.prose > * + * {
	margin-top: 1.05em;
}

.prose h2 {
	counter-increment: prose-section;
	display: flex;
	gap: 0.7rem;
	margin-top: 2.5em;
	padding-top: 1.35em;
	border-top: 1px solid var(--c-line);
	font-size: var(--text-h2);
	line-height: 1.24;
}

.prose h2::before {
	content: counter(prose-section, decimal-leading-zero);
	flex-shrink: 0;
	margin-top: 0.28em;
	color: var(--c-orange);
	font-size: 0.66em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.prose h3 {
	margin-top: 1.8em;
	font-size: var(--text-h3);
}

.prose ul,
.prose ol {
	padding-left: 1.2em;
	display: grid;
	gap: 0.4em;
}

.prose li::marker {
	color: var(--c-orange);
}

.prose li > ul,
.prose li > ol {
	margin-top: 0.4em;
}

.prose strong {
	color: var(--c-ink);
	font-weight: 600;
}

.prose a {
	color: var(--c-blue);
	font-weight: 500;
}

.prose table {
	width: 100%;
	margin-top: 1.6em;
	border-collapse: collapse;
	font-size: var(--text-sm);
	line-height: 1.5;
}

.prose th,
.prose td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
}

.prose th {
	background: var(--c-surface);
	color: var(--c-ink);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.prose th:first-child,
.prose td:first-child {
	padding-left: 0.85rem;
}

@media (max-width: 900px) {
	.legal__grid {
		grid-template-columns: 1fr;
	}

	.legal__aside {
		position: static;
		order: 2;
	}

	.legal__body {
		order: 1;
	}

	.toc {
		padding: var(--sp-4) var(--sp-5);
		background: var(--c-surface);
		border: 1px solid var(--c-line);
		border-radius: var(--radius-m);
	}
}

/* ---------------------------------------------------------------- thank you */

.thanks {
	padding-block: clamp(2rem, 5vw, 4.5rem) var(--sp-section);
	background:
		radial-gradient(120% 120% at 50% 0%, var(--c-blue-tint) 0%, rgba(238, 244, 251, 0) 62%),
		var(--c-bg);
}

.thanks__card {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-s);
	text-align: center;
}

.thanks__badge {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin: 0 auto var(--sp-5);
	border-radius: 50%;
	background: var(--c-orange-tint);
	color: var(--c-orange-dark);
}

.thanks__badge svg {
	width: 26px;
	height: 26px;
}

.thanks .eyebrow {
	justify-content: center;
	margin-bottom: var(--sp-3);
}

.thanks h1 {
	font-size: clamp(1.85rem, 3.2vw + 0.8rem, 2.75rem);
	line-height: 1.1;
}

.thanks__ref {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: var(--sp-5);
	padding: 0.5rem 0.95rem;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	color: var(--c-muted);
	font-size: var(--text-xs);
}

.thanks__ref strong {
	color: var(--c-ink);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.thanks__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.thanks__body {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
	text-align: left;
	color: var(--c-body);
	line-height: 1.7;
}

.thanks__body > * {
	margin: 0;
}

.thanks__body > * + * {
	margin-top: 1em;
}

.thanks__body h2 {
	margin-top: 0;
	font-size: var(--text-h2);
}

.thanks__body h3 {
	font-size: var(--text-h3);
}

.thanks__body ol,
.thanks__body ul {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.thanks__body ol > li {
	position: relative;
	padding: var(--sp-4) var(--sp-4) var(--sp-4) 3.6rem;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
}

.thanks__body ol > li::before {
	content: counter(step);
	counter-increment: step;
	position: absolute;
	left: var(--sp-4);
	top: var(--sp-4);
	display: grid;
	place-items: center;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--c-line-strong);
	color: var(--c-blue);
	font-size: var(--text-xs);
	font-weight: 600;
}

.thanks__body a {
	color: var(--c-blue);
}

.thanks__body strong {
	color: var(--c-ink);
}

.thanks__foot {
	margin-top: var(--sp-5);
	color: var(--c-muted);
	font-size: var(--text-xs);
	line-height: 1.6;
	text-align: left;
}

/* A generic page: the same measure as a legal document, without the section counter. */
.page-body {
	padding-block: var(--sp-6) var(--sp-section);
}

.page-body .prose {
	counter-reset: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.btn,
	.site-nav__toggle-icon::before,
	.site-nav__toggle-icon::after {
		transition: none;
	}
}

/* Centred lead under a thank-you heading, and a one-column variant of the legal grid. */
.thanks__lead {
	max-width: 54ch;
	margin: var(--sp-4) auto 0;
	color: var(--c-body);
	font-size: var(--text-lead);
	line-height: 1.6;
}

.legal__grid--single {
	grid-template-columns: minmax(0, 1fr);
	justify-items: stretch;
}

.legal__grid--single .legal__body {
	max-width: var(--wrap-prose);
}

/* ---------------------------------------------------------------- fallback list pages (/blog/, search, 404) */

.list-page {
	padding-block: var(--sp-6) var(--sp-section);
}

.list-page h1 {
	font-size: var(--text-h1);
	line-height: 1.06;
	margin-bottom: var(--sp-6);
}

/* The opening picture of a record: the card's crop, kept wide so the page still reads as one column. */
.list-page .record-media {
	margin: 0 0 var(--sp-6);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
}

.list-page .record-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-list {
	display: grid;
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
	max-width: var(--wrap-prose);
	list-style: none;
}

.post-list h2 {
	margin: 0 0 0.35em;
	font-size: var(--text-h2);
	line-height: 1.25;
}

.post-list h2 a {
	color: var(--c-ink);
	text-decoration: none;
}

.post-list h2 a:hover {
	color: var(--c-blue);
}

.post-list__image {
	display: block;
	margin-bottom: var(--sp-4);
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

.pagination .page-numbers {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	text-decoration: none;
}

.pagination .current {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: #fff;
}

.zeroy-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 var(--sp-4);
	padding: 0;
	list-style: none;
	color: var(--c-muted);
	font-size: var(--text-xs);
}

.zeroy-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5em;
	opacity: 0.5;
}

/* ---------------------------------------------------------------- page hero */

.page-hero {
	padding-block: clamp(2.25rem, 4vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
}

.page-hero__title {
	max-width: 24ch;
	font-size: clamp(1.9rem, 3.4vw, 3.1rem);
	line-height: 1.06;
}

.page-hero__lead {
	max-width: 64ch;
	margin-top: var(--sp-4);
	color: var(--c-body);
	font-size: var(--text-lead);
}

.page-hero__lead p {
	margin: 0;
}

.page-hero .zeroy-breadcrumbs {
	margin-bottom: var(--sp-4);
}

/* ---------------------------------------------------------------- record cards */

.cards {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: var(--sp-6) 0 0;
	padding: 0;
	list-style: none;
}

.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	overflow: hidden;
}

.card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--c-surface);
	overflow: hidden;
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card__glyph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		radial-gradient(60% 60% at 80% 10%, rgba(26, 111, 212, 0.14), transparent 70%),
		radial-gradient(50% 50% at 10% 90%, rgba(242, 106, 33, 0.14), transparent 70%);
	color: var(--c-blue);
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	font-weight: 600;
	letter-spacing: -0.04em;
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-4) var(--sp-4) var(--sp-5);
}

.card__meta {
	margin: 0;
	color: var(--c-muted);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.card__title {
	font-size: 1.0625rem;
	line-height: 1.25;
}

.card__title a {
	color: var(--c-ink);
	text-decoration: none;
}

.card__title a:hover {
	color: var(--c-blue);
}

.card__text {
	margin: 0;
	color: var(--c-body);
	font-size: var(--text-sm);
}

/* ---------------------------------------------------------------- term strip */

.term-strip {
	padding-block: var(--sp-4);
	overflow-x: auto;
}

.term-strip ul {
	display: flex;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.term-strip a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-pill);
	color: var(--c-body);
	font-size: var(--text-sm);
	text-decoration: none;
	white-space: nowrap;
}

.term-strip a:hover,
.term-strip a[aria-current="page"] {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: #fff;
}

/* ---------------------------------------------------------------- empty state */

.empty {
	padding-block: var(--sp-7);
	max-width: 60ch;
}

.empty__title {
	color: var(--c-ink);
	font-size: var(--text-h3);
	font-weight: 600;
}

.empty__text {
	margin-top: var(--sp-2);
	color: var(--c-body);
}

.empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

/* ---------------------------------------------------------------- inquiry pages */

.inquiry {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
	align-items: start;
	padding-block: var(--sp-section);
}

.inquiry__body {
	min-width: 0;
}

.inquiry__form {
	padding: var(--sp-5);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
}

.inquiry__form-title {
	font-size: var(--text-h3);
}

.inquiry__form-note {
	margin-top: var(--sp-1);
	color: var(--c-muted);
	font-size: var(--text-sm);
}

/* ---------------------------------------------------------------- forms */

.form {
	display: grid;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
}

.field {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.field label {
	color: var(--c-ink);
	font-size: var(--text-sm);
	font-weight: 600;
}

.field .req {
	color: var(--c-orange-dark);
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 10px 12px;
	background: #fff;
	color: var(--c-ink);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-s);
	font: inherit;
	font-size: var(--text-sm);
}

.field textarea {
	resize: vertical;
}

.field input[type="file"] {
	padding: 8px;
	background: var(--c-surface);
	font-size: var(--text-xs);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
	border-color: var(--c-muted);
}

.field-row {
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hint {
	margin: 0;
	color: var(--c-muted);
	font-size: var(--text-xs);
	line-height: 1.5;
}

.form .btn {
	justify-self: start;
	margin-top: var(--sp-2);
}

.form-status {
	margin: 0;
	min-height: 1.25rem;
	color: var(--c-body);
	font-size: var(--text-sm);
}

/* ---------------------------------------------------------------- closing band (shared) */

.cta-band {
	padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
	background: linear-gradient(120deg, var(--c-blue) 0%, var(--c-navy) 72%);
	color: #fff;
}

.cta-band__grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-5);
	text-align: center;
}

.cta-band h2 {
	max-width: 30ch;
	color: #fff;
	font-size: clamp(1.7rem, 2.6vw, 2.4rem);
	line-height: 1.1;
	text-wrap: balance;
}

.cta-band p {
	max-width: 54ch;
	margin-top: var(--sp-3);
	color: rgba(255, 255, 255, 0.82);
}

.cta-band .eyebrow {
	color: var(--c-orange);
}

.cta-band .eyebrow::before {
	background: var(--c-orange);
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

/* A page that carries a closing-band picture puts it behind the whole band: the photograph fills the
   section at 16:9, and a navy scrim keeps the white copy at the contrast the plain gradient had. A
   band without a picture keeps that gradient and its compact height. */
.cta-band--photo {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: clamp(22rem, 56.25vw, 46rem);
	padding-block: 0;
	overflow: hidden;
	background: var(--c-navy);
}

.cta-band__backdrop {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cta-band__backdrop img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}

/* Two layers: the first keeps the whole frame navy enough for white type, the second sits only
   behind the copy so the goods coming in at the lower edge and the warm light at the frame's left
   still read. */
.cta-band__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(6, 22, 39, 0.58) 0%, rgba(6, 22, 39, 0.5) 38%, rgba(6, 22, 39, 0.72) 100%),
		radial-gradient(80% 62% at 50% 46%, rgba(6, 22, 39, 0.46) 0%, rgba(6, 22, 39, 0) 72%);
}

.cta-band--photo .cta-band__grid {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.cta-band--photo .cta-band__body {
	max-width: 58ch;
}

.cta-band--photo h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.85rem);
}

.cta-band--photo p {
	color: rgba(255, 255, 255, 0.86);
}

.cta-band .btn--primary {
	background: var(--c-orange);
	border-color: var(--c-orange);
}

.cta-band .btn--primary:hover {
	background: var(--c-orange-dark);
	border-color: var(--c-orange-dark);
}

.cta-band .btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.45);
}

.cta-band .btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1000px) {
	.cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.inquiry {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 620px) {
	.cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------- optional detail in the form
   The quote form carries every field the brief lists, but the ones a buyer
   cannot answer off-hand stay folded away, so the first screen of the form is
   not a wall of inputs. Markup follows the disclosure behaviour contract. */

.form-disclosure {
	padding-top: var(--sp-3);
	border-top: 1px solid var(--c-line);
}

.form-disclosure__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-ink);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.form-disclosure__trigger:hover {
	color: var(--c-blue);
}

.form-disclosure__mark {
	flex: none;
	color: var(--c-orange-dark);
	font-size: 1.25rem;
	line-height: 1;
}

.form-disclosure__mark::before {
	content: "+";
}

.form-disclosure__trigger[aria-expanded="true"] .form-disclosure__mark::before {
	content: "\2212";
}

.form-disclosure__fields {
	display: grid;
	gap: var(--sp-3);
	padding-top: var(--sp-3);
}