/* Theme Name: YIWU GAORAN — Custom silicone development
   Design tokens: assets/css/tokens.css (colours, type, spacing, radii). */

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

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

body {
	margin: 0;
	background: var(--canvas);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 650;
	line-height: 1.14;
	letter-spacing: -0.02em;
	margin: 0;
}

h2 { margin-bottom: var(--space-2); }
h3 { margin-bottom: var(--space-1); }

p { margin: 0 0 var(--space-2); max-width: 70ch; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--space-2); }
li:last-child > p { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--accent-hover); }

/* An inline link is a reference inside a sentence, not a button: it takes the rust of the module
   rule (the short dash before an eyebrow), so a link in running text reads as a different kind of
   thing from the accent-coloured interface around it. Buttons, navigation, cards' text links and
   the footer keep their own colour. */
.prose a,
.card__body a,
.contact-note a,
.page-hero__lede a,
.inquiry-page__foot a,
.form__privacy a { color: var(--link-inline); }
.prose a:hover,
.card__body a:hover,
.contact-note a:hover,
.page-hero__lede a:hover,
.inquiry-page__foot a:hover,
.form__privacy a:hover { color: var(--link-inline-hover); }

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

:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* ---------- Layout ---------- */

.wrap {
	width: 100%;
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.58); }
.section--soft { background: var(--surface-soft); }
.section + .section--soft, .section--soft + .section { border-top: var(--hairline); }

.section__head { max-width: var(--prose); margin-bottom: var(--space-5); }
.section__more { margin-top: var(--space-4); }

/* A module name is introduced by a short rule: dash, then the label. Manrope's heaviest face
   (800, registered in functions.php) carries the weight, and 0.06em tracking keeps the uppercase
   reading as one tight word-group rather than spaced-out letters. */
.eyebrow {
	font-family: var(--font-display);
	font-size: var(--step-label);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 var(--space-2);
	max-width: none;
}

/* The rule is an inline box, so the label wraps and centres exactly as its surroundings ask. */
.eyebrow::before {
	content: "";
	display: inline-block;
	width: clamp(21px, 2.4vw, 30px);
	height: 2px;
	margin-right: var(--space-2);
	background: var(--accent-rule);
	vertical-align: middle;
	position: relative;
	top: -1px;
}

.h1 { font-size: var(--step-hero); }
.h2 { font-size: var(--step-section); }

.lede {
	font-size: var(--step-lede);
	color: var(--text-muted);
	max-width: var(--prose);
	margin: var(--space-2) 0 0;
}

.tag {
	display: inline-block;
	font-family: var(--font-display);
	font-size: var(--step-small);
	font-weight: 500;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
}

.tag--quiet { background: var(--surface); border: var(--hairline); color: var(--text-muted); }

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--accent);
}

.text-link::after { content: "→"; transition: transform var(--ease); }
.text-link:hover::after { transform: translateX(3px); }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: var(--space-2);
	top: -60px;
	z-index: 100;
	background: var(--accent);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--radius-button);
	transition: top var(--ease);
}

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

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

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	border: 1px solid transparent;
	border-radius: var(--radius-button);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}

/* Every inquiry button carries the same outbound arrow beside its label. */
.button svg { width: 20px; height: 20px; flex: 0 0 auto; }
.button:hover { text-decoration: none; }
.button--primary { background: var(--accent); color: #fff; }
.button--primary:hover { background: var(--accent-hover); color: #fff; }
.button--ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.button--ghost:hover { background: var(--accent-soft); color: var(--accent-hover); }
.button--light { background: var(--surface); color: var(--ink); border-color: var(--border); }
.button--light:hover { border-color: var(--accent); color: var(--accent); }

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(247, 248, 246, 0.94);
	backdrop-filter: blur(10px);
	border-bottom: var(--hairline);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-height: 78px;
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); flex: 0 0 auto; }
.brand:hover { color: var(--ink); }
.brand__mark { display: flex; color: var(--accent); }
.brand__text { display: grid; gap: 1px; }
.brand__name {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.brand__tag {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 0;
	border: 0;
	background: none;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
}

.nav__link:not(.nav__link--trigger):hover { color: var(--accent); }

/*
 * Solutions and Company open their panel as soon as the pointer arrives, so these two words
 * behave like labels: the arrow stays the default one and the text keeps its colour. Only the
 * chevron shows the open state.
 */
.nav__link--trigger { cursor: default; }
.nav__link--trigger:hover { color: var(--ink); }

.nav__chevron {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--ease);
}

.nav__link--trigger[aria-expanded="true"] .nav__chevron { transform: rotate(225deg) translateY(-2px); }

.nav__sub {
	position: absolute;
	top: calc(100% + 10px);
	left: -14px;
	width: 340px;
	background: var(--surface);
	border: var(--hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-float);
	padding: var(--space-2);
	z-index: 60;
}

.nav__sub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.nav__sub-link {
	display: grid;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 8px;
	transition: background var(--ease);
}

.nav__sub-link:hover { background: var(--surface-soft); }
.nav__sub-label { font-weight: 500; color: var(--ink); }
.nav__sub-link:hover .nav__sub-label { color: var(--accent); }
.nav__sub-note { font-size: var(--step-small); color: var(--text-muted); line-height: 1.4; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-2); }

.mobile-nav { display: none; position: relative; }

.mobile-nav__toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: var(--hairline);
	border-radius: var(--radius-button);
	background: var(--surface);
	cursor: pointer;
}

.mobile-nav__bars,
.mobile-nav__bars::before,
.mobile-nav__bars::after {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--ink);
	content: "";
}

.mobile-nav__bars { position: relative; }
.mobile-nav__bars::before { position: absolute; top: -6px; }
.mobile-nav__bars::after { position: absolute; top: 6px; }

.mobile-nav__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	width: min(90vw, 340px);
	background: var(--surface);
	border: var(--hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-float);
	padding: var(--space-3);
	z-index: 60;
}

.nav__list--mobile { flex-direction: column; align-items: stretch; gap: var(--space-1); }
.nav__list--mobile .nav__link { padding: 10px 0; font-size: 1rem; }
.nav__list--mobile .nav__sub-list { padding-left: var(--space-2); gap: 6px; margin-top: 2px; }
.nav__list--mobile .nav__sub-link { padding: 6px 0; }
.nav__item--group > a { border-bottom: var(--hairline); width: 100%; }
.mobile-nav__cta { margin-top: var(--space-3); width: 100%; }

/* ---------- Page hero ---------- */

.page-hero { padding-block: clamp(40px, 5.5vw, 84px) clamp(36px, 5vw, 72px); }

.page-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.page-hero__title { font-size: var(--step-hero); max-width: 18ch; }
.page-hero__lede { margin-top: var(--space-3); max-width: 52ch; }

/* Two statements in a row, each with its own small mark: the paragraph becomes two columns, so the
   mark keeps its own column and the text keeps its measure. */
.page-hero__lede--marked {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}
.page-hero__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	color: var(--accent);
}
.page-hero__mark svg { width: 15px; height: 15px; }
.page-hero__mark--list { background: var(--canvas); color: var(--warm-note); }
.page-hero__note { margin-top: var(--space-2); }

.page-hero__points {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
	max-width: 52ch;
}

.page-hero__points li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 0.9375rem;
	color: var(--text-muted);
}

.page-hero__points li::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 3px;
	border: 1.5px solid var(--accent);
	border-radius: 3px;
	background: var(--accent-soft);
}

.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

.page-hero__figure {
	margin: 0;
	display: grid;
	gap: var(--space-2);
	background: var(--surface);
	border: var(--hairline);
	border-radius: var(--radius-card);
	padding: var(--space-3);
}

/* A page that brings its own figure prints one image instead of the drawn blueprint. */
.page-hero__figure--image { align-content: start; }
.page-hero__image {
	display: block;
	width: 100%;
	height: auto;
	border: var(--hairline);
	border-radius: calc(var(--radius-card) - 8px);
	background: var(--canvas);
}

/* A page whose figure is a photograph: the picture takes the wider column and fills its frame, so
   one frame reads around the photo instead of two, and the card's padding no longer shrinks it. */
.page-hero--photo .page-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); }
.page-hero--photo .page-hero__figure { padding: 0; overflow: hidden; max-width: none; }
.page-hero--photo .page-hero__image { border: 0; border-radius: 0; }

.blueprint__grid { stroke: var(--border); stroke-width: 0.6; fill: none; }
.blueprint__part { stroke: var(--accent); stroke-width: 1.3; fill: none; opacity: 0.9; }
.blueprint__marks { stroke: var(--warm-note); stroke-width: 0.9; fill: none; }
.blueprint text {
	font-family: var(--font-body);
	font-size: 11px;
	fill: var(--warm-note);
	stroke: none;
	letter-spacing: 0.04em;
}
.blueprint__note { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; }
.blueprint marker path { stroke: var(--warm-note); stroke-width: 1; fill: none; }

.page-hero__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: var(--step-small);
	color: var(--text-muted);
}

@media (max-width: 1080px) {
	.nav { display: none; }
	.mobile-nav { display: block; margin-left: auto; }
	.site-header__cta { display: none; }
	.site-header__actions { margin-left: auto; }
}

@media (max-width: 920px) {
	.page-hero__inner { grid-template-columns: 1fr; }
	.page-hero__figure { max-width: 520px; }
	.page-hero__title { max-width: 26ch; }
}

/* ---------- Long-form text ---------- */

.prose { max-width: var(--prose); }
.prose h3 { font-size: var(--step-card); margin-top: var(--space-4); }
.prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-muted); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.15em; display: grid; gap: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.section__head p:last-child { margin-bottom: 0; }

/* ---------- Grids and cards ---------- */

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

.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background: var(--surface);
	border: var(--hairline);
	border-radius: var(--radius-card);
	padding: var(--space-4);
	transition: border-color var(--ease), box-shadow var(--ease);
}

.card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(38, 50, 52, 0.06); }
.card__title { font-size: var(--step-card); max-width: 24ch; }
.card__body { color: var(--text-muted); margin: 0; }
.card .text-link { margin-top: auto; padding-top: var(--space-2); }

/* A card that carries the page's action: the button sits at the card's foot and spans its width, so
   two cards side by side line their buttons up even when their copy differs in length. */
.card__action { margin: 0; padding-top: var(--space-3); }
.card > .card__action { margin-top: auto; }
.card__action .button { width: 100%; }

/* The two closing paragraphs sit as equal columns with a wide gutter between them, each opened by
   the same small mark. The NDA text is advice, not a warning, so it carries the same weight as the
   copy beside it instead of a tinted box of its own. */
.before-write {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
	margin-top: var(--space-5);
}

.before-write__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-2);
}

.before-write__icon { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }
.before-write__icon svg { display: block; width: 20px; height: 20px; }
.before-write__item .prose { max-width: none; }

/* ---------- Checklist ---------- */

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: var(--prose); }

.checks li {
	position: relative;
	padding-left: 32px;
	color: var(--ink);
}

.checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 17px;
	height: 17px;
	border-radius: 4px;
	border: 1.5px solid var(--accent);
	background: var(--accent-soft);
}

.checks li::after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 0.62em;
	width: 8px;
	height: 4px;
	border-left: 1.5px solid var(--accent);
	border-bottom: 1.5px solid var(--accent);
	transform: rotate(-45deg);
}

/* ---------- Numbered process ---------- */

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); counter-reset: step; }
.steps--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }

.steps li {
	position: relative;
	counter-increment: step;
	padding-left: 62px;
	min-height: 44px;
}

.steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.steps h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.steps p { color: var(--text-muted); font-size: 0.9375rem; }

/* ---------- Note ---------- */

.note {
	display: grid;
	gap: var(--space-2);
	max-width: var(--prose);
	margin: var(--space-4) 0;
	padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
	background: var(--surface-soft);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-image);
}

.note p { color: var(--ink); }

/* ---------- Link lists ---------- */

.link-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 940px) {
	.grid--2, .grid--3, .steps--2col { grid-template-columns: 1fr; }
	.before-write { grid-template-columns: 1fr; gap: var(--space-4); }
}

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

.form {
	display: grid;
	gap: var(--space-3);
	background: var(--surface);
	border: var(--hairline);
	border-radius: var(--radius-card);
	padding: clamp(20px, 3vw, 32px);
	margin-top: var(--space-4);
}

.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.field { display: grid; gap: 6px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: var(--step-small); font-weight: 500; }
.field__required { color: var(--warm-note); }

.field__control {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--ink);
	background: var(--canvas);
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	transition: border-color var(--ease), box-shadow var(--ease);
}

.field__control::placeholder { color: #93A0A1; }
.field__control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.field__control { resize: vertical; min-height: 110px; }
select.field__control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 14px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field__control--file { background: var(--surface); border-style: dashed; padding: 14px; font-size: var(--step-small); }
.field__control[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12); }
.field__hint { font-size: var(--step-small); color: var(--text-muted); margin: 0; }

/* The form's four groups: a hairline above each one, then a full step of space, so where one group
   ends and the next begins is not a judgement call; and only a couple of pixels between a group's
   title and the sentence under it, because those two are one heading — the space that carries the
   eye is between groups, not inside one. The group is a plain div with an h2: a fieldset's legend is
   painted in the fieldset's border area, and the space it leaves under itself cannot be controlled
   reliably. */
.form__group {
	border: 0;
	border-top: var(--hairline);
	padding: calc(var(--space-4) + var(--space-1)) 0 0;
	margin: 0;
	min-width: 0;
}
/* The first group carries its own name: the intake prints a hidden honeypot div before it, so
   :first-of-type picks that div and leaves a stray rule and top padding above the form. */
.form__group--first { border-top: 0; padding-top: 0; }
.form__group-title {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	font-size: var(--step-label);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
}
.form__group-note { font-size: var(--step-small); line-height: 1.5; color: var(--text-muted); margin: var(--space-1) 0 var(--space-3); max-width: 64ch; }
/* The files group has no note under its title, so the fields stand straight below it and need
   their own space; every other group gets that space from the note's bottom margin. */
.form__group-title + .form__grid { margin-top: var(--space-2); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.form__privacy { font-size: var(--step-small); color: var(--text-muted); margin: 0; max-width: 46ch; }
.form__privacy a { text-decoration: underline; text-underline-offset: 2px; }
.form__status { margin: 0; font-size: var(--step-small); min-height: 1.4em; }
.form[data-state="success"] .form__status { color: var(--accent); font-weight: 500; }
.form[data-state="error"] .form__status { color: #B3261E; }
.form[data-state="submitting"] { cursor: progress; }

/* ---------- Contact layout ---------- */

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	gap: var(--space-5);
	align-items: start;
}

.contact-layout__info { display: grid; gap: var(--space-3); }

/* The contact page puts the channels beside the address on a map: the map gets the wider column,
   because an address list reads well narrow and a map does not. */
.contact-layout--map { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

.contact-map {
	margin: 0;
	display: grid;
	background: var(--surface);
	border: var(--hairline);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.contact-map__frame {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	min-height: 300px;
	border: 0;
	background: var(--canvas);
}

.contact-map__caption { border-top: var(--hairline); }

/* The address itself is already in the channels list beside the map, so the caption is the way out
   to Google Maps and nothing else. */
.contact-map__link {
	display: flex;
	align-items: center;
	padding: var(--space-2) var(--space-3);
}

.contact-map__link:hover { background: var(--surface-soft); }

.contact-map__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--step-small);
	font-weight: 500;
	color: var(--accent);
}

.contact-map__cta svg { width: 13px; height: 13px; }

.channels { background: var(--surface); border: var(--hairline); border-radius: var(--radius-card); padding: var(--space-3); }
.channels__heading { font-size: var(--step-card); margin-bottom: var(--space-2); }
.channels__list { margin: 0; }
.channels__row { display: grid; gap: 2px; padding-block: 12px; border-top: var(--hairline); }
.channels__row:first-child { border-top: 0; padding-top: 0; }
.channels__label { font-size: var(--step-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.channels__value { margin: 0; font-size: 0.9375rem; word-break: break-word; }

.contact-note {
	padding: var(--space-3);
	border: 1px dashed var(--border);
	border-radius: var(--radius-card);
	font-size: var(--step-small);
	color: var(--text-muted);
}

/* The inquiry page: one centred column and no aside — the form is the page. */
.inquiry-page { max-width: 880px; margin-inline: auto; }
.inquiry-page .form { margin-top: 0; }

/* The form follows the hero directly: one gap under the hero, not two. */
.inquiry-page__section { padding-block-start: clamp(8px, 1.2vw, 20px); }
.inquiry-page__foot {
	max-width: 72ch;
	margin: var(--space-4) 0 0;
	font-size: var(--step-small);
	line-height: 1.7;
	color: var(--text-muted);
}
.inquiry-page__foot a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 940px) {
	.contact-layout { grid-template-columns: 1fr; }
	.form__grid { grid-template-columns: 1fr; }
}

/* ---------- Thank you ---------- */

.thanks-hero {
	padding-block: clamp(40px, 5.5vw, 84px) clamp(36px, 5vw, 72px);
	background: var(--surface-soft);
	border-bottom: var(--hairline);
}

/* The description under a section heading, a little closer to it than the site-wide lede. */
.thanks-lede { margin-top: var(--space-1); max-width: 60ch; }

/* The confirmation reads as one centred block: a short answer to a message that was just sent. */
.thanks-hero .wrap { max-width: 880px; text-align: center; }

.thanks-hero__head { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }

.thanks-hero__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid var(--accent);
	background: var(--accent-soft);
	color: var(--accent);
}

.thanks-hero__mark svg { width: 28px; height: 28px; }

/* The mark sits beside the heading, so the heading must not take an auto margin as a flex item. */
.thanks-hero__title { font-size: var(--step-hero); max-width: 18ch; }

/* The confirmation's description sits closer to the heading it belongs to. */
.thanks-hero__lede { max-width: 52ch; margin: var(--space-1) auto 0; }

.thanks-hero__checks {
	width: fit-content;
	max-width: 100%;
	margin: var(--space-3) auto 0;
	text-align: left;
}

.thanks-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }

/* In the centred confirmation the dash hangs to the left, so the label itself stays centred
   under the title instead of the dash-plus-label pair dragging it off centre. Every other label
   on the site is left-aligned by its section and needs no such correction. */
.thanks-hero .eyebrow { margin-left: calc((clamp(21px, 2.4vw, 30px) + var(--space-2)) / 2); }

@media (max-width: 600px) {
	.thanks-hero__mark { width: 48px; height: 48px; }
	.thanks-hero__mark svg { width: 24px; height: 24px; }
	.thanks-hero__title { max-width: 24ch; }
}

/* ---------- Projects ---------- */

.project-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: var(--hairline);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: border-color var(--ease), box-shadow var(--ease);
}

.project-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(38, 50, 52, 0.07); }
.project-card__media { display: block; background: var(--surface-soft); }
.project-card__image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }

.project-card__empty {
	display: grid;
	place-items: center;
	min-height: 168px;
	font-size: var(--step-small);
	color: var(--text-muted);
	background:
		repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(21, 94, 90, 0.05) 10px, rgba(21, 94, 90, 0.05) 20px);
}

.project-card__body { display: grid; gap: 8px; padding: var(--space-3); align-content: start; }
.project-card__body .tag { justify-self: start; }
.project-card__title { font-size: var(--step-card); }
.project-card__title a { color: var(--ink); }
.project-card__title a:hover { color: var(--accent); }
.project-card__excerpt { color: var(--text-muted); font-size: 0.9375rem; margin: 0; }
.project-card__stage { font-size: var(--step-small); color: var(--accent); margin: 0; }

.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-3) 0 0; }

.project-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: var(--space-5);
	align-items: start;
}

.project-detail__facts { display: grid; gap: var(--space-2); }
.fact { padding-top: var(--space-2); border-top: var(--hairline); }
.fact:first-child { padding-top: 0; border-top: 0; }
.fact__label { font-size: var(--step-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 4px; font-weight: 600; }
.fact p { color: var(--ink); font-size: 0.9375rem; }

.project-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); }
.project-gallery__image { display: block; width: 100%; border-radius: var(--radius-image); }

/* ---------- Site footer: the closing band ---------- */

.site-footer {
	background: var(--footer-bg);
	color: var(--footer-ink);
	padding-block: clamp(48px, 6vw, 88px) var(--space-3);
	font-size: 0.9375rem;
}

.site-footer a { color: var(--footer-ink); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
	gap: clamp(28px, 3.5vw, 48px);
	align-items: start;
}

/* On /inquiry/ the page's own form stands just above, so the band shows the ask alone. */
.footer-cta--solo { grid-template-columns: minmax(0, 1fr); }
.footer-cta--solo .footer-cta__copy { max-width: 62ch; }

.footer-cta__eyebrow { color: var(--footer-muted); }
.footer-cta__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: #fff;
	margin: var(--space-2) 0 var(--space-3);
	max-width: 16ch;
}
.footer-cta__lede { color: var(--footer-green); max-width: 48ch; line-height: 1.65; }

/* What to send, as four plain tags rather than a second pair of buttons. */
.footer-cta__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-4) 0 0; padding: 0; }
.footer-cta__chips li {
	padding: 9px 12px;
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 6px;
	font-size: 0.8125rem;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--footer-ink);
}

/* What happens after the form: three short steps, separated by spacing only. */
.footer-cta__next { margin-top: var(--space-5); }
.footer-cta__next-title {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--footer-muted);
	margin-bottom: var(--space-1);
}
.footer-cta__steps { list-style: none; margin: 0; padding: 0; }
.footer-cta__steps li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 10px;
	align-items: baseline;
	padding: 7px 0;
	color: var(--footer-ink);
	line-height: 1.5;
}
.footer-cta__step {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--footer-green);
}

.footer-card {
	background: var(--surface);
	color: var(--ink);
	border-radius: 16px;
	padding: clamp(20px, 2.4vw, 32px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.footer-card__title { font-size: var(--step-card); color: var(--ink); margin-bottom: 6px; }
.footer-card__note { color: var(--text-muted); font-size: var(--step-small); line-height: 1.55; margin-bottom: var(--space-3); max-width: 46ch; }

/* The card's form is the shared .form without its frame — the card is the frame. */
.footer-card__form { margin: 0; padding: 0; border: 0; background: none; gap: var(--space-2); }
.footer-card__form .form__grid { gap: var(--space-2); }
.footer-card__form .field__control { background: var(--surface); }
.footer-card__form textarea.field__control { min-height: 96px; }
.footer-card__submit { width: 100%; margin-top: 4px; }
.footer-card__form .form__status:not(:empty) {
	margin-top: 2px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--surface-soft);
}

.footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--footer-line);
	font-size: var(--step-small);
	color: var(--footer-muted);
}

.footer__legal p { margin: 0; max-width: none; }
.footer__legal-list { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }

/* ---------- Engine extras ---------- */

.zeroy-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0; margin: 0 0 var(--space-3); font-size: var(--step-small); color: var(--text-muted); }
.zeroy-breadcrumbs li + li::before { content: "/"; margin-right: 0.5em; opacity: 0.5; }

.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); list-style: none; padding: 0; }
.pagination a, .pagination span { display: inline-flex; padding: 9px 14px; border: var(--hairline); border-radius: var(--radius-button); font-size: var(--step-small); }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The ask and the card sit side by side only while the four tags still fit on one line. */
@media (max-width: 1240px) {
	.footer-cta { grid-template-columns: minmax(0, 1fr); }
	.footer-card { max-width: 520px; }
}

@media (max-width: 1080px) {
	.project-detail { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.footer-card { padding: 20px 18px; }
	.footer-cta__chips li { padding: 8px 12px; font-size: 0.8125rem; }
	.footer__legal { flex-direction: column; align-items: flex-start; }
	.steps li { padding-left: 52px; }
	.steps li::before { width: 38px; height: 38px; }
}

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

/* ---------- Image slots ---------- */

.media { display: grid; gap: 10px; margin: var(--space-4) 0; }
.media:first-child { margin-top: 0; }

.media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-image);
	background: var(--surface-soft);
}

.media--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.media--standard img { aspect-ratio: 3 / 2; object-fit: cover; }
.media--square img { aspect-ratio: 1 / 1; object-fit: cover; }

.media__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	font-size: var(--step-small);
	color: var(--text-muted);
}

.media__size {
	font-family: var(--font-display);
	font-size: var(--step-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--accent);
	white-space: nowrap;
}

/* A card that carries an image gets its padding on the body instead. */
.card--media { padding: 0; overflow: hidden; }
.card__media { margin: 0; background: var(--surface-soft); }
.card__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
}

.card--media .card__body .text-link { margin-top: auto; }
.card__body p { margin: 0; }

/* A card body that still holds the legacy <p class="card__body"> must not pad twice. */
.card__body .card__body { display: block; padding: 0; gap: 0; }

/* A plain card's copy starts on the same left edge as its title: the card's own padding is the only
   inset, so a direct <p class="card__body"> carries none of its own. A card that holds a photograph
   keeps its padding on the body, because that card has none itself. */
.card:not(.card--media) > .card__body { padding: 0; }

/* ---------- About page: rows of photographs and copy ---------- */

/* Two rows that mirror each other: photographs left and one passage right, then the marked list
   left and photographs right. The photo column is a little wider so the pictures carry the module
   and the copy keeps a readable measure; the two columns are centred against each other, because a
   short passage beside two rows of photographs should not hang at the top of a tall column. A
   narrow screen stacks a row into one column, in the order each row reads in. */
.about-row {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: var(--space-6);
	align-items: center;
}

.about-row + .about-row { margin-top: var(--space-6); }

.about-row__media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
}

/* A figure standing alone in prose keeps its own margin; a grid cell does not need it. */
.about-row__media .media { margin: 0; }

/* The slot's 4:3 crop is the ratio the markup declares, so a replacement of the same ratio needs
   no CSS change, and the hairline keeps an empty slot visible on a tinted section. */
.about-row__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: var(--hairline);
}

/* The short statements under the copy: one mark for every line, in the accent colour, so the block
   reads as a single list rather than as four separate remarks. */
.about-points__title {
	margin: var(--space-5) 0 0;
	font-size: var(--step-card);
}

/* The list opens its own row, so the heading does not need the space it takes mid-copy. */
.about-row__copy > .about-points__title:first-child { margin-top: 0; }

.about-points {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
}

.about-points li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.about-points__icon { display: block; width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.about-points__icon svg { display: block; width: 20px; height: 20px; }
.about-points p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }

@media (max-width: 940px) {
	.about-row { grid-template-columns: 1fr; gap: var(--space-4); }
	.about-row + .about-row { margin-top: var(--space-4); }
}

/* ---------- Commitments: the list, with two photographs beside it ---------- */

/* The list keeps to a readable column instead of running the full width of the section, and the two
   photographs take the column that would otherwise stand empty. */
.commitments-split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--space-6);
	align-items: start;
}

.commitments-split > .prose,
.commitments-split .checks { max-width: none; }

/* The six statements as rows rather than as a bulleted list: a hairline between them, a leading-zero
   number in the accent colour, the claim in ink at reading size and its explanation quieter
   underneath, so the column scans top to bottom. Two classes, because .prose ul would otherwise
   indent the list and space it as bullets. The numbers are carried by the list itself, so a
   statement can be added or removed without renumbering, and they take the figure style of the
   process steps higher up the site. */
.commitments-split .commitments-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	counter-reset: commitment;
}

.commitments-split .commitments-list li {
	padding: var(--space-3) 0;
	border-top: var(--hairline);
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	column-gap: var(--space-2);
	row-gap: 6px;
	counter-increment: commitment;
}

.commitments-split .commitments-list li::before {
	content: counter(commitment, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1 / span 2;
	padding-top: 2px;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}

.commitments-split .commitments-list strong,
.commitments-split .commitments-list span { grid-column: 2; }

.commitments-split .commitments-list li:last-child { border-bottom: var(--hairline); }

.commitments-split .commitments-list strong {
	display: block;
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.45;
	color: var(--ink);
}

.commitments-split .commitments-list span {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--text-muted);
}

.commitments-split__media { display: grid; gap: var(--space-2); }
.commitments-split__media .media { margin: 0; }

@media (max-width: 940px) {
	.commitments-split { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* A page-level date, quieter than the lede it follows. */
.legal__updated {
	margin: var(--space-2) 0 0;
	font-size: var(--step-small);
	color: var(--text-muted);
}

/* ---------- Floating contact stack: WhatsApp and back to top ---------- */

.site-float { position: fixed; right: var(--space-3); bottom: var(--space-3); z-index: 60; }
.site-float__stack { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.site-float__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 14px;
	box-shadow: var(--shadow-float);
	color: #fff;
	cursor: pointer;
	transition: transform var(--ease), background var(--ease);
}

/* The back-to-top behaviour hides its trigger; a display rule must not override that. */
.site-float__button[hidden] { display: none; }

.site-float__button:hover { transform: translateY(-2px); }
.site-float__button--top { width: 50px; height: 50px; border-radius: 13px; background: var(--float-bg); }
.site-float__button--top:hover { background: var(--float-bg-hover); }
.site-float__button--wa { background: var(--wa-green); }
.site-float__button--wa:hover { background: var(--wa-green-hover); }

/*
 * The tooltip behaviour positions its panel itself (fixed, flipped above the button when there is
 * no room below and clamped to the viewport); this only gives the line its look.
 */
.site-float__wa { position: relative; }
.site-float__tip {
	width: max-content;
	max-width: min(16rem, calc(100vw - var(--space-3) * 2));
	padding: 9px 13px;
	border-radius: 10px;
	background: var(--float-bg);
	color: #fff;
	font-size: 0.8125rem;
	line-height: 1.4;
	box-shadow: var(--shadow-float);
}

.site-float__icon { display: block; width: 27px; height: 27px; }
.site-float__icon svg { display: block; width: 100%; height: 100%; }
.site-float__button--top .site-float__icon { width: 22px; height: 22px; }

@media (max-width: 600px) {
	.site-float { right: var(--space-2); bottom: var(--space-2); }
	.site-float__stack { gap: 10px; }
	.site-float__button { width: 50px; height: 50px; border-radius: 12px; }
	.site-float__button--top { width: 44px; height: 44px; border-radius: 11px; }
	.site-float__icon { width: 24px; height: 24px; }
	.site-float__button--top .site-float__icon { width: 20px; height: 20px; }
}

/* ---------- FAQ ---------- */

.faq { border-top: var(--hairline); }
.faq + .faq { margin-top: var(--space-5); }

.faq__item { border-bottom: var(--hairline); }

.faq__question {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
	padding-block: var(--space-3);
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
	cursor: pointer;
}

.faq__question:hover { color: var(--accent); }
.faq__question::after { content: "+"; flex: none; font-size: 1.25rem; font-weight: 400; color: var(--accent); }
.faq__question[aria-expanded="true"]::after { content: "\2013"; }

.faq__answer { padding-bottom: var(--space-3); max-width: var(--prose); }
.faq__answer p { margin: 0 0 var(--space-2); color: var(--ink); }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__answer ul { margin: 0 0 var(--space-2); padding-left: 1.1em; color: var(--ink); }
.faq__answer li + li { margin-top: 6px; }
.faq__answer a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }