/* =============================================================================
 * Cascade Crest — component bundle.
 *
 * Ported from .design/reference/animated-homepage.html and the per-component
 * preview.html files. Class names are kept identical to the reference so the
 * two can be diffed; the WordPress-specific work is confined to the first two
 * sections.
 *
 * Quiet page, loud motion: nothing here shouts. Structure is drawn with
 * hairlines, shadow only means an element has left the page plane, and copper
 * is rationed to roughly six marks above the fold.
 * ========================================================================== */

/* ── WordPress shell ──────────────────────────────────────────────────────
 * theme.json sets root padding to 0 and every band supplies its own gutter
 * through .wrap, exactly as the reference does. These rules stop the block
 * layout engine from adding a second one.
 * ------------------------------------------------------------------------ */
* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--surface-100);
	color: var(--ink-700);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 27px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden; /* belt and braces: no horizontal scroll at 400px */
}

.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks main { display: block; }

/* Bands butt against each other; their own padding is the rhythm. WordPress's
 * flow layout otherwise inserts blockGap between every top-level child of the
 * post content, which put a 24px stripe of surface-100 between each pair of
 * bands and broke the alternating-ground effect the whole page depends on.
 *
 * `main` is load-bearing. WP's rule is `:root :where(.is-layout-flow) > *`,
 * which is (0,1,0) because :where() contributes nothing — exactly the same
 * weight as a bare `.wp-block-post-content > *`, so that version only wins on
 * source order and would flip the moment the enqueue order changed. The
 * descendant makes it (0,1,1) and settles it. Platform gotcha 35. */
main .wp-block-post-content > * { margin-block: 0; }

/* A template part renders a wrapper element around its contents, and that
 * wrapper is exactly as tall as the header inside it — which would make
 * position:sticky pin against a box that scrolls away immediately. Taking the
 * wrapper out of the box tree lets the header stick against the viewport,
 * where it belongs, without giving up template parts. */
.wp-block-template-part { display: contents; }

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

a { color: var(--copper-600); }

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

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

.skip-link:focus {
	position: fixed;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 200;
	padding: var(--space-3) var(--space-5);
	background: var(--surface-000);
	color: var(--ink-900);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-float);
}

/* ── Platform demo banner ─────────────────────────────────────────────────
 * sfp-demo-banner is platform chrome, sticky at top:0 with z-index 99999 and
 * its own charcoal/amber defaults. Two things are needed: recolour it into
 * this palette so the page has no stray second accent, and give the site
 * header something to stick beneath. motion.js measures the banner and writes
 * --banner-h; the 0px fallback covers no-JS and the banner being switched off.
 * ------------------------------------------------------------------------ */
:root { --banner-h: 0px; }

.sfp-demo-banner {
	background: var(--surface-inverse) !important;
	color: var(--ink-inverse) !important;
	border-bottom: 1px solid var(--hairline) !important;
	box-shadow: none !important;
	font-family: var(--font-sans) !important;
}

.sfp-demo-banner a { color: var(--copper-600) !important; }
.sfp-demo-banner__badge {
	background: var(--copper-600) !important;
	color: var(--on-copper) !important;
}

/* ── Layout primitives ────────────────────────────────────────────────── */
.wrap {
	width: var(--col);
	margin-inline: auto;
	padding-inline: var(--space-7);
}

@media (max-width: 720px) {
	.wrap { padding-inline: var(--space-4); }
}

.band { padding-block: var(--space-9); }

@media (max-width: 720px) {
	.band { padding-block: var(--space-7); }
}

.band-raised { background: var(--surface-000); }
.band-sunken { background: var(--surface-200); }
.band-inverse {
	background: var(--surface-inverse);
	color: var(--ink-inverse);
}

/* ── Type ─────────────────────────────────────────────────────────────── */
.eyebrow {
	margin: 0;
	font-size: 12px;
	line-height: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.band-inverse .eyebrow { color: var(--ink-inverse-muted); }

/* ink-500 is sanctioned on surface-100 and surface-000 only — tokens.json says
 * so in as many words, and the arithmetic agrees: on surface-200 it lands at
 * 4.15:1 in Daylight, just under the floor. (Overcast is fine at 5.70:1, but a
 * rule that holds in one theme only is not a rule.) The reference page uses
 * ink-500 on the sunken service-area band anyway, which is the one place its
 * own contract slips. Promote to ink-700 there: 8.31:1, and still clearly
 * subordinate to ink-900. */
.band-sunken .eyebrow,
.band-sunken .cap,
.band-sunken .data { color: var(--ink-700); }

/* space-8 is the gap between a section heading block and its content. Putting
 * it on the adjacency means every kind of content gets it — the service grid,
 * the record strip, a before/after frame, or an ordinary group of prose on an
 * inner page, which was the one that went without and left the heading sitting
 * on top of its own first line. */
.section-heading + * { margin-top: var(--space-8); }

.rule {
	width: 24px;
	height: 2px;
	background: var(--copper-600);
	margin: var(--space-2) 0 var(--space-6);
	transform-origin: left;
}

h1, h2, h3 {
	font-family: var(--font-display);
	color: var(--ink-900);
	margin: 0;
	text-wrap: balance;
	font-weight: 300;
}

.band-inverse h2,
.band-inverse h3 { color: var(--ink-inverse); }

h1 { font-size: clamp(44px, 7.4vw, 76px); line-height: .96; letter-spacing: -.02em; }
h2 { font-size: clamp(34px, 5vw, 52px); line-height: 1.02; letter-spacing: -.015em; }
h3 { font-size: 23px; line-height: 1.2; font-weight: 400; letter-spacing: -.005em; }

.lede {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.55;
	color: var(--ink-700);
	max-width: 56ch;
}

.band-inverse .lede { color: var(--ink-inverse); }

.small { font-size: 14px; line-height: 22px; }
.cap { font-size: 12px; line-height: 18px; color: var(--ink-500); }
.data {
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 20px;
	letter-spacing: .01em;
}

/* ── Reveals ──────────────────────────────────────────────────────────────
 * Visible at rest. The script adds .js-motion to <html> only once it has
 * confirmed it can restore them, so a no-JS or reduced-motion page shows
 * every element in its finished state rather than parked at opacity 0.
 * ------------------------------------------------------------------------ */
.js-motion [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
}

.js-motion [data-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.hdr {
	position: sticky;
	top: calc(var(--banner-h) + env(safe-area-inset-top, 0px));
	z-index: 50;
	background: color-mix(in srgb, var(--surface-100) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: background-color var(--dur-2) var(--ease-out),
	            box-shadow var(--dur-2) var(--ease-out),
	            border-color var(--dur-2) var(--ease-out);
}

.hdr.stuck {
	background: var(--surface-000);
	box-shadow: var(--shadow-raise);
	border-color: var(--hairline);
}

.hdr-in {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	height: 84px;
	transition: height var(--dur-2) var(--ease-out);
}

.hdr.stuck .hdr-in { height: 62px; }

/* No logo exists and none has been drawn — the name is set as type until a
 * real mark does. See design-system/README.md, Iconography. */
.mark {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	margin-right: auto;
}

.mark b {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--ink-900);
}

.mark span {
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.nav {
	display: flex;
	gap: var(--space-5);
}

.nav a {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--ink-700);
	text-decoration: none;
	position: relative;
	padding-block: 4px;
}

.nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--copper-600);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-2) var(--ease-out);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav a[aria-current="page"] { color: var(--ink-900); }

.hdr-tel {
	color: var(--ink-900);
	text-decoration: none;
}

.hdr-tel:hover { color: var(--copper-700); }

@media (max-width: 940px) {
	.nav,
	.hdr-tel { display: none; }
}

.progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 100%;
	background: var(--copper-600);
	transform: scaleX(0);
	transform-origin: left;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: var(--space-3) var(--space-5);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font: inherit;
	font-size: 15px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	color: var(--ink-900);
	transition: background-color var(--dur-1) linear, color var(--dur-1) linear,
	            border-color var(--dur-1) linear, box-shadow var(--dur-2) var(--ease-out);
}

.btn .lbl {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform var(--dur-2) var(--ease-out);
}

.btn .arw { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn-primary {
	background: var(--copper-600);
	color: var(--on-copper);
}

.btn-primary:hover { background: var(--copper-700); }

.btn-secondary {
	border-color: var(--hairline-strong);
	background: var(--surface-000);
	color: var(--ink-900);
}

.btn-secondary:hover { box-shadow: var(--shadow-raise); }

.btn-ghost {
	color: var(--copper-600);
	padding-inline: var(--space-3);
}

.btn-ghost:hover { color: var(--copper-700); }

.btn-sm {
	min-height: 40px;
	padding: 10px var(--space-4);
	font-size: 14px;
}

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: var(--opacity-disabled);
	cursor: not-allowed;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
	padding-top: var(--space-9);
	padding-bottom: 0;
	overflow: hidden;
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--space-8);
	align-items: end;
}

@media (max-width: 960px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}

.mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.mask > span { display: inline-block; }
.js-motion .mask > span { transform: translateY(110%); }
.js-motion .go .mask > span {
	transform: none;
	transition: transform var(--dur-4) var(--ease-out);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-7);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: var(--radius-pill);
	background: var(--storm-100);
	color: var(--storm-600);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
}

.badge svg { flex: none; }

.hero-side {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding-bottom: var(--space-2);
	align-items: flex-start;
}

.hero-facts {
	display: grid;
	gap: var(--space-4);
	border-top: 1px solid var(--hairline);
	padding-top: var(--space-5);
	margin: 0;
	width: 100%;
}

.fact {
	display: flex;
	gap: var(--space-4);
	align-items: baseline;
}

.fact dt {
	font-size: 13px;
	color: var(--ink-500);
	min-width: 92px;
}

.fact dd {
	margin: 0;
	font-size: 14px;
	color: var(--ink-900);
	font-weight: 500;
}

/* The reference draws its roof as an SVG placeholder. This build uses the
 * real photography in photos/, in a full-bleed 3:2 well on surface-200 with
 * square corners, per the Imagery rules. The parallax layer is the <img>. */
.scene {
	position: relative;
	margin-top: var(--space-8);
	line-height: 0;
	background: var(--surface-200);
	overflow: hidden;
	border-radius: var(--radius-none);
	aspect-ratio: 1600 / 520;
}

@media (max-width: 720px) {
	.scene { aspect-ratio: 3 / 2; }
}

.scene img {
	width: 100%;
	height: 118%; /* headroom for the -12% parallax translate */
	object-fit: cover;
	display: block;
	will-change: transform;
}

/* ── Services ─────────────────────────────────────────────────────────── */
.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-5);
}

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

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

.svc {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: block;
	padding: var(--space-6);
	text-decoration: none;
	background: var(--surface-100);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
}

.band-raised .svc { background: var(--surface-100); }

/* Curtain wipe: a copper-100 panel wipes up from the bottom edge. The card
 * itself does not move. */
.svc::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--copper-100);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--dur-2) var(--ease-out);
}

.svc:hover::before,
.svc:focus-within::before { transform: scaleY(1); }

.svc .ico {
	color: var(--ink-700);
	transition: color var(--dur-1) linear;
	display: block;
}

.svc:hover .ico { color: var(--copper-600); }
.svc[data-accent="storm"]:hover .ico { color: var(--storm-600); }
.svc[data-accent="moss"]:hover .ico { color: var(--moss-600); }

/* The card title is h3 under a section heading and h2 when the grid leads the
 * page, so the rule cannot name one tag. The size stays display-s either way —
 * the level is about the document outline, not the type scale. */
.svc :is(h2, h3, h4) {
	margin: var(--space-5) 0 var(--space-3);
	font-size: 23px;
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: -.005em;
	transition: transform var(--dur-2) var(--ease-out);
}

.svc:hover :is(h2, h3, h4) { transform: translateX(2px); }

.svc p {
	margin: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--ink-700);
}

/* ── Record ───────────────────────────────────────────────────────────── */
.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-6);
}

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

.stat .num {
	display: block;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(46px, 7vw, 86px);
	line-height: .86;
	letter-spacing: -.03em;
	color: var(--ink-inverse);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.stat .lbl {
	display: block;
	margin-top: var(--space-4);
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-inverse-muted);
}

/* ── Before / after ───────────────────────────────────────────────────── */

.work-lead { margin-bottom: var(--space-5); }

.work-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-5);
}

@media (max-width: 760px) {
	.work-pair { grid-template-columns: 1fr; }
}

.ba {
	position: relative;
	overflow: hidden;
	user-select: none;
	touch-action: pan-y;
	background: var(--surface-200);
	aspect-ratio: 3 / 2;
	cursor: ew-resize;
	--pos: 62%;
}

.ba img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ba .after { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba.smooth .after { transition: clip-path var(--dur-2) var(--ease-out); }
.ba.smooth .bar { transition: left var(--dur-2) var(--ease-out); }

.ba .bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 2px;
	background: var(--copper-600);
	transform: translateX(-1px);
}

.ba .grip {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--copper-600);
	color: var(--on-copper);
	display: grid;
	place-items: center;
	cursor: ew-resize;
	transition: width var(--dur-2) var(--ease-out), height var(--dur-2) var(--ease-out),
	            background-color var(--dur-1) linear;
}

.ba .grip:hover,
.ba .grip:focus-visible {
	width: 48px;
	height: 48px;
	background: var(--copper-700);
}

.ba .tag {
	position: absolute;
	top: var(--space-4);
	padding: 7px 12px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	line-height: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--surface-inverse);
	color: var(--ink-inverse);
	transition: opacity var(--dur-2) var(--ease-out);
}

.ba .tag-a { left: var(--space-4); }
.ba .tag-b { right: var(--space-4); }

.work-cap {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: var(--space-3) 0 0;
}

/* ── Marquee ──────────────────────────────────────────────────────────── */
.marquee {
	position: relative;
	overflow: hidden;
	margin-top: var(--space-6);
}

.marquee::before,
.marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 72px;
	z-index: 2;
	pointer-events: none;
}

.marquee::before { left: 0; background: linear-gradient(to right, var(--surface-200), rgba(0, 0, 0, 0)); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--surface-200), rgba(0, 0, 0, 0)); }

.viewport {
	display: flex;
	width: max-content;
	animation: slide 40s linear infinite;
}

/* The one thing in this system allowed to loop — so it must stop the moment a
 * reader engages with it. */
.marquee:hover .viewport,
.marquee:focus-within .viewport { animation-play-state: paused; }

.track {
	display: flex;
	gap: var(--space-3);
	padding-right: var(--space-3);
}

.chip {
	white-space: nowrap;
	padding: 10px 16px;
	text-decoration: none;
	display: inline-block;
	font-size: 11px;
	line-height: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-700);
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-pill);
	background: var(--surface-100);
}

.chip:hover {
	border-color: var(--copper-600);
	color: var(--copper-700);
}

@keyframes slide {
	to { transform: translateX(-50%); }
}

.address { margin: var(--space-5) 0 0; }

/* Reduced motion renders the marquee as a static wrapped list rather than a
 * frozen single line with half its content off-screen. */
@media (prefers-reduced-motion: reduce) {
	.marquee::before,
	.marquee::after { display: none; }

	.viewport {
		animation: none;
		width: auto;
		flex-wrap: wrap;
	}

	.viewport .track:last-child { display: none; }

	.track { flex-wrap: wrap; row-gap: var(--space-3); }
}

/* ── Voices ───────────────────────────────────────────────────────────── */
.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
}

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

.quote {
	position: relative;
	margin: 0;
	padding: var(--space-6);
	background: var(--surface-100);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	transition: box-shadow var(--dur-2) var(--ease-out);
}

.quote:hover { box-shadow: var(--shadow-raise); }

.quote .qm {
	position: absolute;
	top: 4px;
	left: 20px;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 72px;
	line-height: 1;
	color: var(--copper-600);
	transition: transform var(--dur-2) var(--ease-out);
}

.quote:hover .qm { transform: translate(-2px, -2px); }

.quote blockquote {
	margin: var(--space-6) 0 0;
	color: var(--ink-700);
}

.quote figcaption { margin-top: var(--space-5); }

.quote .who {
	display: block;
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
	color: var(--ink-900);
}

/* ── Estimate ─────────────────────────────────────────────────────────── */
.est-band { padding-block: var(--space-10); }

@media (max-width: 720px) {
	.est-band { padding-block: var(--space-8); }
}

.est-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: var(--space-8);
	align-items: start;
}

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

.panel {
	padding: var(--space-6);
	background: var(--surface-000);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-float);
}

.panel h3 {
	font-size: 34px;
	line-height: 1.12;
	margin-bottom: var(--space-2);
}

.field { margin-bottom: var(--space-5); }

.field label {
	display: block;
	font-size: 14px;
	line-height: 22px;
	color: var(--ink-700);
	margin-bottom: 6px;
}

.req {
	font-size: 12px;
	color: var(--ink-500);
}

.field input,
.field select {
	width: 100%;
	min-height: 46px;
	padding: var(--space-3);
	font: inherit;
	font-size: 16px; /* 16px or iOS zooms the page on focus */
	color: var(--ink-900);
	background: var(--surface-000);
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-1) linear;
}

.field input:focus,
.field select:focus { border-color: var(--copper-600); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--alert-600); }

.err {
	display: none;
	margin-top: 6px;
	font-size: 12px;
	line-height: 18px;
	color: var(--alert-600);
}

.field input[aria-invalid="true"] ~ .err,
.field select[aria-invalid="true"] ~ .err { display: block; }

.panel .btn { width: 100%; }

/* Honeypot. Off-screen rather than display:none so a bot that checks
 * computed style still fills it in. */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.license {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--hairline);
	color: var(--ink-500);
}

.form-error {
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	border-left: 2px solid var(--alert-600);
	background: var(--surface-100);
	color: var(--alert-600);
	font-size: 14px;
	line-height: 22px;
}

.ok { display: none; }
.panel.done .ok { display: block; }
.panel.done form,
.panel.done .panel-sub { display: none; }

.ok strong {
	display: block;
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 400;
	color: var(--moss-600);
	margin-bottom: var(--space-2);
}

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

.contact dl {
	display: grid;
	gap: var(--space-4);
	margin: var(--space-6) 0 0;
}

.contact dt {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-500);
}

.contact dd {
	margin: 4px 0 0;
	color: var(--ink-900);
}

.contact dd a {
	color: var(--ink-900);
	text-decoration: none;
	border-bottom: 1px solid var(--hairline-strong);
}

.contact dd a:hover {
	color: var(--copper-700);
	border-color: var(--copper-600);
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot { padding-block: var(--space-8); }

.foot-in {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	justify-content: space-between;
}

.foot p {
	color: var(--ink-inverse-muted);
	max-width: 46ch;
}

.foot .mark b { color: var(--ink-inverse); }
.foot .mark span { color: var(--ink-inverse-muted); }

.foot-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	align-items: flex-start;
}

.foot-links a {
	color: var(--ink-inverse);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

.foot-links a:hover { color: var(--copper-600); }

/* ── Mobile call button ───────────────────────────────────────────────── */
.call-fab {
	position: fixed;
	right: var(--space-4);
	z-index: 60;
	display: none;
	bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
	align-items: center;
	gap: 8px;
	padding: 14px 20px;
	background: var(--copper-600);
	color: var(--on-copper);
	text-decoration: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-float);
	font-size: 15px;
	font-weight: 600;
}

@media (max-width: 940px) {
	.call-fab { display: inline-flex; }
}

/* ── Inner pages ──────────────────────────────────────────────────────────
 * The four pages behind the homepage use the same bands and the same section
 * heading, with a short masthead in place of the hero.
 * ------------------------------------------------------------------------ */
.masthead { padding-block: var(--space-9) var(--space-8); }

@media (max-width: 720px) {
	.masthead { padding-block: var(--space-7); }
}

.masthead .lede { margin-top: var(--space-5); }

.prose {
	max-width: 68ch;
	display: grid;
	gap: var(--space-5);
}

.prose h3 { margin-top: var(--space-5); }
.prose p { margin: 0; }

.prose ul {
	margin: 0;
	padding-left: 1.1em;
	display: grid;
	gap: var(--space-2);
}

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-8);
	align-items: start;
}

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

.well {
	background: var(--surface-200);
	border-radius: var(--radius-none);
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.well img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

/* ── Core blocks inside a Cascade band ────────────────────────────────────
 * The inner pages use core paragraph, heading, image and button blocks for
 * ordinary prose. theme.json already gives them the right colour and family;
 * these rules give the two that have their own chrome — buttons and images —
 * the same shape as their bespoke counterparts.
 * ------------------------------------------------------------------------ */
/* No margin-top here: every button row on the site sits directly under a
 * section heading, and `.section-heading + *` already owns that gap. Setting
 * it in both places means two one-class rules fighting over source order. */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	border: 1px solid transparent;
	transition: background-color var(--dur-1) linear, color var(--dur-1) linear,
	            border-color var(--dur-1) linear, box-shadow var(--dur-2) var(--ease-out);
}

.wp-element-button:active,
.wp-block-button__link:active { transform: translateY(1px); }

/* Core's outline style strips the fill and paints the border in currentColor,
 * which would put a second copper mark on the page. The design system's
 * secondary button is a hairline-strong edge on surface-000 instead. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--surface-000);
	color: var(--ink-900);
	border-color: var(--hairline-strong);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--surface-000);
	color: var(--ink-900);
	box-shadow: var(--shadow-raise);
}

.well figure,
.well .wp-block-image {
	margin: 0;
	height: 100%;
}

.prose > .wp-block-heading:first-child { margin-top: 0; }

/* ── Editor canvas ────────────────────────────────────────────────────────
 * The editor has no <body class="..."> shell and no sticky viewport, so bands
 * need their own ground and the full-bleed ones need to escape the editor's
 * content width to preview honestly.
 * ------------------------------------------------------------------------ */
.editor-styles-wrapper { background: var(--surface-100); }
.editor-styles-wrapper .band { position: relative; }
.editor-styles-wrapper .call-fab { display: none; }