/* Cigua landing page. Tokens come from /brand/tokens.css (generated from cigua-tokens.json). */

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url(/brand/fonts/manrope-latin.woff2) format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url(/brand/fonts/open-sans-latin.woff2) format('woff2');
}

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

body {
	margin: 0;
	padding-block: var(--space-6);
	background: var(--paper);
	color: var(--ink);
	font: var(--type-body);
	-webkit-text-size-adjust: 100%;
}

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

h1,
h2,
h3,
p,
ul,
ol,
figure {
	margin: 0;
}

h1 {
	font: var(--type-display);
	letter-spacing: var(--tracking-display);
	text-wrap: balance;
}
h2 {
	font: var(--type-title);
	letter-spacing: var(--tracking-title);
}
h3 {
	font: var(--type-heading);
}
.label {
	font: var(--type-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--ink-muted);
}
figcaption,
small {
	font: var(--type-caption);
	color: var(--ink-muted);
}

/* 12-column grid, 1200px max, 24px gutters; phones 4 columns, 16px margins. */
.wrap {
	display: grid;
	gap: var(--space-24);
	max-width: calc(var(--content-max) + 2 * var(--space-6));
	margin-inline: auto;
	padding-inline: var(--space-4);
}
main.wrap {
	margin-block: var(--space-24);
}
@media (min-width: 768px) {
	.wrap {
		padding-inline: var(--space-6);
	}
}

/* Panels: rounded landing sections. Pastel fills with an edge fade in light; flat ink surfaces in dark. */
.panel {
	border-radius: var(--radius-xl);
	padding: var(--space-10);
	color: var(--brand-ink);
}
.panel .label,
.panel figcaption,
.panel small {
	color: var(--brand-ink);
}
@media (min-width: 768px) {
	.panel {
		padding: var(--space-16);
	}
}
.hero {
	background: var(--fade-sky-sand);
}
.footer {
	background: var(--fade-cream-sand);
}
.contact {
	background: var(--fade-sand-clay);
}
.records {
	background: var(--fade-sage-sky);
}
.signal {
	background: var(--dusk);
}
.tenants {
	background: var(--sky);
}
@media (prefers-color-scheme: dark) {
	.panel {
		background: var(--surface);
		color: var(--ink);
		border: 1px solid var(--line);
	}
	.panel .label,
	.panel figcaption,
	.panel small {
		color: var(--ink-muted);
	}
}

/* Hero */
.hero {
	display: grid;
	gap: var(--space-10);
	grid-template-columns: repeat(4, 1fr);
}
.hero > * {
	grid-column: 1 / -1;
}
.logo img {
	width: auto;
	height: 48px;
}
.hero-text {
	display: grid;
	gap: var(--space-4);
	align-content: center;
}
.hero-text .lede {
	font: var(--type-body-strong);
}
.hero-art {
	display: grid;
	gap: var(--space-2);
	max-width: 400px;
	padding: var(--space-4);
	border-radius: var(--radius-xl);
	background: var(--cream);
}
.hero-art figcaption {
	color: var(--brand-ink);
}
.hero-art img {
	border-radius: calc(var(--radius-xl) - var(--space-4));
}
@media (min-width: 1200px) {
	.hero {
		grid-template-columns: repeat(12, 1fr);
		column-gap: var(--space-6);
	}
	.hero-text {
		grid-column: 1 / span 6;
	}
	.hero-art {
		grid-column: 7 / span 6;
		justify-self: end;
	}
}

/* Feature sections: overline, title and copy, then points, cards or a picture. Wide screens: copy beside its points. */
.feature {
	display: grid;
	gap: var(--space-6);
	align-items: start;
}
.feature-text,
.tenants {
	display: grid;
	gap: var(--space-4);
	max-width: 40rem;
}
.tenants {
	max-width: none;
}
.fee {
	justify-self: start;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	background: var(--sage);
	color: var(--brand-ink);
	font: var(--type-heading);
}
.points {
	display: grid;
	padding: 0;
	list-style: none;
	max-width: 40rem;
}
.points li {
	padding-block: var(--space-3);
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.feature > .cards {
	margin-top: 0;
}
.columns {
	display: grid;
	gap: var(--space-10);
}
.columns > div {
	display: grid;
	align-content: start;
	gap: var(--space-3);
}
@media (min-width: 768px) {
	.columns {
		grid-template-columns: 1fr 1fr;
	}
	.feature.records {
		grid-template-columns: 1fr 320px;
		column-gap: var(--space-10);
	}
}
@media (min-width: 1200px) {
	.feature {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-6);
	}
	.feature > .band,
	.feature > .cards,
	.feature > .columns {
		grid-column: 1 / -1;
	}
}

/* The credits list reuses the cards. */
.credits {
	display: grid;
	gap: var(--space-4);
}
.cards {
	display: grid;
	gap: var(--space-6);
	margin-top: var(--space-6);
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
	display: grid;
	align-content: start;
	gap: var(--space-2);
	padding: var(--space-6);
	border-radius: var(--radius-md);
	background: var(--card-fill);
	color: var(--brand-ink);
}
.card.sage { --card-fill: var(--sage); }
.card.sand { --card-fill: var(--sand); }
.card.clay { --card-fill: var(--clay); }
.card.dusk { --card-fill: var(--dusk); }
.card.sky { --card-fill: var(--sky); }
.card a {
	color: inherit;
}
@media (prefers-color-scheme: dark) {
	.card {
		background: var(--surface);
		color: var(--ink);
		border: 1px solid var(--line);
	}
	.card.sage h3 { color: var(--sage-strong); }
	.card.sand h3 { color: var(--sand-strong); }
	.card.clay h3 { color: var(--clay-strong); }
	.card.dusk h3 { color: var(--dusk-strong); }
	.card.sky h3 { color: var(--sky-strong); }
}

/* Cards lift 2px on hover. */
.card {
	transition: translate var(--duration-fast) var(--ease-out);
}
@media (hover: hover) {
	.card:hover {
		translate: 0 -2px;
	}
}

/* Postcards: tinted, grained files (apps/site/postcards.sh); corners rounded here. */
.band,
.stamp {
	display: grid;
	gap: var(--space-2);
}
.band img,
.stamp img {
	width: 100%;
	border-radius: var(--radius-lg);
}

/* Footer */
.footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-4);
}
.footer a {
	color: inherit;
}

/* Scroll reveal: fade in and rise 8px once, 400ms; cards in a row stagger by 60ms. */
.js .reveal,
.js .reveal .card {
	transition:
		opacity var(--duration-slow) var(--ease-out),
		transform var(--duration-slow) var(--ease-out),
		translate var(--duration-fast) var(--ease-out);
}
.js .reveal:not(.is-visible),
.js .reveal:not(.is-visible) .card {
	opacity: 0;
	transform: translateY(var(--reveal-rise));
}
.js .reveal .card:nth-child(2) { transition-delay: 60ms, 60ms, 0ms; }
.js .reveal .card:nth-child(3) { transition-delay: 120ms, 120ms, 0ms; }
.js .reveal .card:nth-child(4) { transition-delay: 180ms, 180ms, 0ms; }

/* Reduced motion: no movement, only fades of 150ms or less. */
@media (prefers-reduced-motion: reduce) {
	.js .reveal,
	.js .reveal .card {
		transition: opacity var(--duration-fast) var(--ease-out);
		transition-delay: 0ms !important;
	}
	.js .reveal:not(.is-visible),
	.js .reveal:not(.is-visible) .card {
		transform: none;
	}
	.card:hover {
		translate: none;
	}
}

/* Contact: copy beside the form on wide screens. Fields per the design system: 48px, surface fill, ink-muted border. */
.contact {
	display: grid;
	gap: var(--space-10);
}
.contact-text {
	display: grid;
	align-content: start;
	gap: var(--space-4);
	max-width: 40rem;
}
.contact a {
	color: inherit;
}
@media (min-width: 1200px) {
	.contact {
		grid-template-columns: 1fr 1fr;
	}
}
.contact-form {
	display: grid;
	gap: var(--space-6);
}
.field {
	display: grid;
	gap: var(--space-2);
}
.field > label,
.choices legend {
	font: var(--type-caption-strong);
}
.contact [hidden] {
	display: none;
}
/* Role: radio choices, each a 48px touch target. */
.choices {
	margin: 0;
	padding: 0;
	border: 0;
}
.choices legend {
	padding: 0;
	margin-bottom: var(--space-2);
}
.choices label {
	font: var(--type-body);
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--control-height);
}
.choices input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--olive);
}
.field input:not([type='radio']) {
	width: 100%;
	min-height: var(--control-height);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--ink-muted);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	font: var(--type-body);
}
.contact [aria-invalid='true'] {
	border-color: var(--clay-strong);
}
.field-error,
.form-status[data-kind='error'] {
	font: var(--type-caption);
	color: var(--clay-strong);
}
.field-error::before,
.form-status[data-kind='error']::before {
	content: '! ';
	font-weight: 700;
}
.form-status:empty {
	display: none;
}
.button {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	min-height: var(--control-height);
	padding-inline: 20px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--olive);
	color: var(--on-olive);
	font: var(--type-body-strong);
	text-decoration: none;
	cursor: pointer;
	transition: filter var(--duration-fast) var(--ease-out), scale var(--duration-fast) var(--ease-out);
}
.button:hover {
	filter: brightness(0.96);
}
.button:active {
	scale: 0.98;
}
.button:disabled {
	cursor: progress;
	opacity: 0.7;
}
.button:focus-visible,
.contact :focus-visible {
	outline: 2px solid var(--olive);
	outline-offset: 2px;
}
/* Honeypot: off screen and out of the tab order; bots fill it, people never see it. */
.gotcha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}