/* ==========================================================================
   WP Mojster — Homepage styles (enqueued on the front page only)
   Hero, trust strip, services, why-choose, process, FAQ, final CTA.
   Breakpoints: 640 / 768 / 1024 only (tokens.css rule).
   ========================================================================== */

/* ---- Shared section rhythm & heading scale ---- */
.home-hero,
.home-services,
.why-choose,
.home-process,
.home-faq,
.contact-cta {
	padding-top: var(--section-pad-mobile);
	padding-bottom: var(--section-pad-mobile);
}

.home-hero .eyebrow,
.home-services .eyebrow,
.why-choose .eyebrow,
.home-process .eyebrow,
.home-faq .eyebrow,
.contact-cta .eyebrow { margin-bottom: 12px; }

.home-h2 {
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: 12px;
}

@media (min-width: 768px) {
	.home-hero,
	.home-services,
	.why-choose,
	.home-process,
	.home-faq,
	.contact-cta {
		padding-top: var(--section-pad);
		padding-bottom: var(--section-pad);
	}
	.home-h2 { font-size: var(--text-2xl); }
}

/* ==========================================================================
   Hero — paper band. Bottom padding carries the trust-strip overlap
   allowance on top of the section pad: 64+28=92px mobile, 96+40=136px
   desktop (rule on the trust card; homepage only).
   ========================================================================== */
.home-hero { background: var(--color-paper); padding-bottom: 92px; }
.home-hero .inner { display: grid; gap: var(--space-12); align-items: center; }

.home-hero h1 {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.12;
	margin-bottom: 14px;
}
.home-hero h1 mark {
	background: var(--color-primary-tint);
	color: var(--color-primary-strong);
	padding: 0.02em 0.14em;
	border-radius: 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.home-hero .lead {
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--color-text-muted);
	max-width: 34em;
	margin-bottom: var(--space-6);
}
.home-hero .ctas { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: 28px; }
.home-hero .ctas .btn { width: 100%; }
.home-hero .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Care-report panel — CSS only, no image, no JS, no layout shift */
.care-panel {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: 0 8px 24px rgba(20, 37, 44, 0.08);
	overflow: hidden;
}
.care-panel .phead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
}
.care-panel .site { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.care-panel .tag { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.care-panel ul { list-style: none; padding: var(--space-2) 0; }
.care-panel li { display: flex; align-items: center; gap: 12px; padding: 11px 20px; font-size: 15px; }
.care-panel .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--color-success); }
.care-panel .lbl { flex: 1; }
.care-panel .val {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-success);
	background: var(--color-success-tint);
	border-radius: var(--radius-chip);
	padding: 2px 10px;
}
.care-panel li.warn .dot { background: var(--color-accent); }
.care-panel li.warn .val { color: var(--color-accent); background: var(--color-accent-tint); }
.care-panel .pfoot {
	padding: 12px 20px 16px;
	border-top: 1px solid var(--color-border);
	font-size: 13px;
	color: var(--color-text-muted);
}

@media (min-width: 640px) {
	.home-hero .ctas { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
	.home-hero .ctas .btn { width: auto; }
}
@media (min-width: 768px) {
	.home-hero { padding-bottom: 136px; }
	.home-hero h1 { font-size: var(--text-3xl); line-height: 1.14; margin-bottom: 20px; }
	.home-hero .lead { font-size: var(--text-md); line-height: 1.5; margin-bottom: var(--space-8); }
}
@media (min-width: 1024px) {
	.home-hero .inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-16); }
}

/* ==========================================================================
   Trust / proof panel — credential plate pulled up over the hero seam (the
   only element allowed to cross a band seam). DOM order (Fiverr first) =
   mobile order; ≥1024 the grid places the support column left at 35/65.
   overflow:hidden clips the tint cell to the panel radius.
   ========================================================================== */
/* flow-root stops the bar's negative margin collapsing through the section
   (which would drag the surface band up to the bar's top edge); the border
   is the paper→surface seam hairline the bar visibly bridges. */
.trust-strip {
	background: var(--color-surface);
	padding-bottom: 44px;
	border-top: 1px solid var(--color-border);
	display: flow-root;
}
.trust-strip .bar {
	position: relative;
	margin-top: -28px;
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: 0 6px 20px rgba(20, 37, 44, 0.08);
	overflow: hidden;
}

/* Featured Fiverr proof — tint cell, text only; the link is the theme's
   sole target="_blank" (48px min target). The 3px petrol inset rail reuses
   the FAQ open-item signature. */
.trust-strip .fiverr {
	background: var(--color-primary-tint);
	padding: 22px 22px 18px;
	box-shadow: inset 3px 0 0 var(--color-primary);
}
.trust-strip .fiverr .eyebrow { margin-bottom: 10px; }
.trust-strip .fiv-status {
	font-size: var(--text-lg);
	font-weight: 700;
	letter-spacing: var(--tracking-heading);
	line-height: 1.2;
	color: var(--color-ink);
	margin-bottom: 6px;
}
/* Verified figures — stat pair at heading scale, hairline-divided */
.trust-strip .fiv-figures {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	column-gap: var(--space-6);
	margin: 2px 0 10px;
}
.trust-strip .fig { display: flex; flex-direction: column; }
.trust-strip .fig + .fig { border-left: 1px solid var(--color-border); padding-left: var(--space-6); }
/* dated-verification caption — spans under both stats; the date is part of
   the figures' honesty contract (see trust.php) */
.trust-strip .fiv-checked {
	grid-column: 1 / -1;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-top: 6px;
}
.trust-strip .fig strong {
	font-size: var(--text-lg);
	font-weight: 700;
	letter-spacing: var(--tracking-heading);
	line-height: 1.1;
	color: var(--color-ink);
}
.trust-strip .fig span { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }
/* five mini level marks = 5/5 without star icons (decorative, aria-hidden;
   the rating is already text). One gradient: five 20×2 marks, 4px gaps. */
.trust-strip .fig .marks {
	width: 116px;
	height: 2px;
	border-radius: 1px;
	margin: 8px 0 2px;
	background: repeating-linear-gradient(90deg, var(--color-primary) 0 20px, transparent 20px 24px);
}
.trust-strip .fiv-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
/* 15px matches the service cardlink / also-row "View … →" convention;
   the 48px touch target comes from min-height, not the font size */
.trust-strip .fiv-link { display: inline-flex; align-items: center; min-height: 48px; font-size: 15px; }

/* Supporting messages — the two internal proof items */
.trust-strip .support { border-top: 1px solid var(--color-border); }
.trust-strip .titem { padding: 20px 22px; }
.trust-strip .titem + .titem { border-top: 1px solid var(--color-border); }
.trust-strip .titem::before {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: var(--color-primary);
	margin-bottom: 12px;
}
.trust-strip .titem b {
	display: block;
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-ink);
	margin-bottom: 6px;
}
.trust-strip .titem span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }

@media (min-width: 640px) {
	/* tablet: Fiverr full-width on top, support pair 2-up below */
	.trust-strip .support { display: grid; grid-template-columns: 1fr 1fr; }
	.trust-strip .titem + .titem { border-top: 0; border-left: 1px solid var(--color-border); }
	/* Fiverr cell: internal grid from tablet up — text stack and CTA left,
	   figures right (fills the freed width), block vertically centered */
	.trust-strip .fiverr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"eyebrow eyebrow"
			"status  figs"
			"note    figs"
			"link    figs";
		column-gap: var(--space-8);
		align-content: center;
		padding-right: 28px;
	}
	.trust-strip .fiverr .eyebrow { grid-area: eyebrow; }
	.trust-strip .fiv-status { grid-area: status; }
	.trust-strip .fiv-figures { grid-area: figs; align-self: center; margin: 0; column-gap: var(--space-8); }
	.trust-strip .fig + .fig { padding-left: var(--space-8); }
	.trust-strip .fiv-note { grid-area: note; }
	.trust-strip .fiv-link { grid-area: link; justify-self: start; }
}
@media (min-width: 768px) {
	.trust-strip { padding-bottom: 56px; }
	.trust-strip .bar { margin-top: -40px; }
}
@media (min-width: 1024px) {
	/* desktop: 35/65 split — support column left, Fiverr proof right */
	.trust-strip .bar { display: grid; grid-template-columns: 35fr 65fr; }
	.trust-strip .support {
		grid-column: 1;
		grid-row: 1;
		border-top: 0;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}
	/* Fiverr cell joins the outer 35/65 grid; internal grid inherited from
	   the 640 rule, figures step up to the desktop H2 size */
	.trust-strip .fiverr {
		grid-column: 2;
		grid-row: 1;
		border-left: 1px solid var(--color-border);
		padding: 26px 40px 26px 28px;
	}
	.trust-strip .fig strong { font-size: var(--text-xl); }
	.trust-strip .titem { padding: 26px 28px; }
	.trust-strip .titem + .titem { border-left: 0; border-top: 1px solid var(--color-border); }
}

/* ==========================================================================
   Services overview — six cards, 1/2/3-up. The whole card is the click
   target (stretched .cardlink) with a short accessible link name.
   ========================================================================== */
.home-services { background: var(--color-paper); }
.home-services .lead {
	font-size: 16px;
	color: var(--color-text-muted);
	max-width: 42em;
	margin-bottom: var(--space-6); /* shrinks into the urgent row below */
}

/* Urgent lead-in row — routes hacked → malware removal, down → error fixing.
   Amber stays an accent (chip + tint only, text ink, links petrol — AA on
   the tint verified). */
.urgent-row {
	display: flex;
	flex-direction: column;
	background: var(--color-accent-tint);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-6);
}
.urgent-row .chip { align-self: flex-start; font-size: 13px; padding: 3px 10px; margin-bottom: var(--space-1); }
.urgent-row .uroute {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-3);
	min-height: 48px;
	font-size: 15px;
}
.urgent-row .uroute + .uroute { border-top: 1px solid var(--color-border); }
/* Phrase over link below 1024 (symmetric two-line routes); inline at 1024+ */
.urgent-row .uroute span { flex-basis: 100%; font-weight: 600; color: var(--color-ink); }
.urgent-row .uroute a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}
.urgent-row .uroute a:hover { color: var(--color-primary-strong); }
.urgent-row .uroute a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

.svc-grid { display: grid; gap: var(--space-4); }
.svc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-6);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.svc-card:hover,
.svc-card:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-card-hover); }
.svc-card h3 { font-size: 20px; font-weight: 600; line-height: 1.3; margin-bottom: var(--space-2); }
.svc-card p { font-size: 15px; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.svc-card .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.svc-card .chip { font-size: 13px; padding: 3px 10px; }
.svc-card .chip::before { width: 7px; height: 7px; }
.cardlink { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.cardlink::after { content: ""; position: absolute; inset: 0; }
.cardlink:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.alsorow { margin-top: var(--space-6); font-size: 15px; color: var(--color-text-muted); }
.alsorow a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.alsorow a:hover { color: var(--color-primary-strong); }
.alsorow a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

@media (min-width: 640px) {
	.svc-grid { grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); }
	.urgent-row {
		flex-direction: row;
		align-items: center;
		gap: var(--space-4);
		padding: var(--space-2) var(--space-6);
	}
	.urgent-row .chip { align-self: center; margin-bottom: 0; }
	.urgent-row .uroute { flex: 1; } /* divider mid-row, no dead right half */
	.urgent-row .uroute + .uroute { border-top: 0; border-left: 1px solid var(--color-border); padding-left: var(--space-4); }
}
@media (min-width: 768px) {
	.home-services .lead { font-size: 18px; margin-bottom: var(--space-8); }
	.urgent-row { margin-bottom: var(--space-8); }
	.alsorow { margin-top: var(--space-8); font-size: 16px; }
}
@media (min-width: 1024px) {
	.svc-grid { grid-template-columns: 1fr 1fr 1fr; }
	.urgent-row .uroute span { flex-basis: auto; }
}

/* ==========================================================================
   Why choose WP Mojster — surface band; heading left, 2×2 promises right,
   level-mark ticks; not cards, not numbered (by design).
   ========================================================================== */
.why-choose { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.why-choose .inner { display: grid; gap: 36px; }
.why-choose .home-h2 { margin-bottom: 14px; }
.why-choose h2 mark {
	background: var(--color-primary-tint);
	color: var(--color-primary-strong);
	padding: 1px 6px;
	border-radius: 5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.why-choose .lead { font-size: 16px; color: var(--color-text-muted); }
.why-choose .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 24px; }
.why-choose .rgrid { display: grid; gap: var(--space-8); }
.ritem::before {
	content: "";
	display: block;
	width: 22px;
	height: 3px;
	background: var(--color-primary);
	border-radius: 2px;
	margin-bottom: 14px;
}
.ritem h3 { font-size: 19px; font-weight: 600; line-height: 1.3; margin-bottom: var(--space-2); }
.ritem p { font-size: 15px; color: var(--color-text-muted); }

@media (min-width: 640px) {
	.why-choose .rgrid { grid-template-columns: 1fr 1fr; gap: 44px 40px; }
}
@media (min-width: 768px) {
	.why-choose h2 mark { padding: 1px 8px; border-radius: 6px; }
	.why-choose .lead { font-size: 18px; }
}
@media (min-width: 1024px) {
	.why-choose .inner { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; }
}

/* ==========================================================================
   Process — semantic <ol> timeline. Vertical rail below 1024px, horizontal
   connector above. The segment leaving step 1 drains its petrol (handover);
   the final step sits on the tint outcome field with ghost dots after its
   badge (box-shadows only).
   ========================================================================== */
.home-process { background: var(--color-paper); }
.home-process .lead {
	font-size: 16px;
	color: var(--color-text-muted);
	max-width: 42em;
	margin-bottom: 40px;
}
.steps { list-style: none; }
.step {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: var(--space-4);
	padding-bottom: 36px;
}
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 48px;
	bottom: 8px;
	width: 2px;
	background: var(--color-border);
}
.step:first-child::before { background: linear-gradient(180deg, var(--color-primary), var(--color-border) 75%); }
.step:has(+ .step--outcome)::before { bottom: 12px; }
.step .badge {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-base);
	font-weight: 700;
	background: var(--color-primary-tint);
	color: var(--color-primary-strong);
}
.step:first-child .badge { background: var(--color-primary); color: #fff; }
.step .body { padding-top: 6px; }
.step .you {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-primary);
	margin-bottom: var(--space-1);
}
.step .you:empty { display: none; }
.step h3 { font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.step p { font-size: 15px; color: var(--color-text-muted); }
.step--outcome {
	background: var(--color-primary-tint);
	border-radius: 14px;
	padding: 18px 16px 26px;
	margin: 6px -16px 0;
}
.step--outcome .badge {
	background: var(--color-paper);
	color: var(--color-primary-strong);
	box-shadow:
		0 0 0 5px rgba(11, 114, 133, 0.18),
		0 52px 0 -8px rgba(11, 114, 133, 0.16),
		0 92px 0 -12px rgba(11, 114, 133, 0.09);
}
.step--outcome p { color: var(--color-text); }
.home-process .ctarow {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 40px;
	text-align: center;
}
.home-process .or { font-size: 15px; color: var(--color-text-muted); }

@media (min-width: 768px) {
	.home-process .lead { font-size: 18px; margin-bottom: 56px; }
}
@media (min-width: 1024px) {
	.steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
	.step { display: block; padding-bottom: 0; }
	.step:not(:last-child)::before {
		top: 19px;
		left: 56px;
		right: -40px;
		bottom: auto;
		width: auto;
		height: 2px;
	}
	.step:first-child::before { background: linear-gradient(90deg, var(--color-primary), var(--color-border) 75%); }
	.step:has(+ .step--outcome)::before { right: -12px; }
	.step .badge { margin-bottom: 18px; }
	.step .body { padding-top: 0; }
	.step .you { display: block; min-height: 24px; margin-bottom: 0; }
	.step .you:empty { display: block; }
	.step h3 { font-size: 19px; margin-bottom: var(--space-2); }
	.step p { max-width: 38ch; }
	.step--outcome { padding: 24px 20px; margin: -24px -20px; }
	.step--outcome .badge {
		box-shadow:
			0 0 0 5px rgba(11, 114, 133, 0.18),
			56px 0 0 -8px rgba(11, 114, 133, 0.16),
			100px 0 0 -12px rgba(11, 114, 133, 0.09);
	}
	.home-process .ctarow {
		flex-direction: row;
		align-items: center;
		gap: 20px;
		margin-top: 56px;
		text-align: left;
	}
}

/* ==========================================================================
   Short FAQ — surface band; heading left, one continuous question panel
   right (component styles in tokens.css), "Just ask" under the heading.
   ========================================================================== */
.home-faq { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.home-faq .inner { display: grid; gap: 28px; }
.home-faq .home-h2 { margin-bottom: 14px; }
.home-faq .lead { font-size: 16px; color: var(--color-text-muted); }
.home-faq .faq-answer { font-size: 15px; }
.home-faq .ask { font-size: 15px; }

@media (max-width: 639px) {
	.home-faq .faq-item summary { padding: 15px 18px; font-size: 16px; }
	.home-faq .faq-item .faq-answer { padding: 0 18px 15px; }
}
@media (min-width: 768px) {
	.home-faq .lead { font-size: 18px; }
	.home-faq .ask { font-size: 16px; }
}
@media (min-width: 1024px) {
	.home-faq .inner {
		grid-template-columns: 5fr 7fr;
		column-gap: var(--space-16);
		row-gap: var(--space-4);
		align-items: start;
	}
	.home-faq .head { grid-column: 1; grid-row: 1; }
	.home-faq .faq-list { grid-column: 2; grid-row: 1 / 3; }
	.home-faq .ask { grid-column: 1; grid-row: 2; align-self: start; }
}

/* ==========================================================================
   Final contact CTA — on-ink band with petrol depth glows (pure CSS,
   static). Mobile order: heading, form card, tiles, urgent note; desktop
   moves the form card to the right column.
   ========================================================================== */
.contact-cta {
	color: var(--color-text-on-ink);
	background:
		radial-gradient(360px 300px at 90% 0%, rgba(11, 114, 133, 0.35), transparent 70%),
		var(--color-ink);
}
.contact-cta .inner { display: grid; gap: var(--space-6); }
.contact-cta .eyebrow { color: var(--color-link-on-ink); }
.contact-cta .home-h2 { color: #fff; margin-bottom: 14px; }
.contact-cta .home-h2.section-heading::before { background: var(--color-link-on-ink); }
.contact-cta .lead { font-size: 16px; color: var(--color-text-muted-on-ink); max-width: 44ch; }

/* Direct-line tiles */
.contact-cta .tiles { display: grid; gap: var(--space-3); }
.contact-cta .tile {
	border: 1px solid var(--color-border-on-ink);
	border-radius: var(--radius-card);
	padding: 18px 20px;
	background: rgba(255, 255, 255, 0.03);
	transition: border-color var(--transition-fast);
}
.contact-cta .tile:hover { border-color: var(--color-link-on-ink); }
.contact-cta .tile b {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted-on-ink);
	margin-bottom: 6px;
}
.contact-cta .tile a {
	color: var(--color-link-on-ink);
	font-weight: 600;
	font-size: 18px;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.contact-cta .tile a:focus-visible { outline: var(--focus-ring-on-ink); outline-offset: var(--focus-offset); border-radius: 2px; }
/* Phone is a tel: link but keeps the card's non-link look */
.contact-cta .tile .tile-phone { color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
/* 44px target: padding grows the hit box, never the line box (no layout
   shift); weighted downward to keep the focus ring clear of the label. */
.contact-cta .tile a { padding-block: 4px 18px; }

/* Stacked below 640px: the chip is flex:none and its Slovenian string runs
   215px wide, which leaves the note too little room to set on one column. */
.contact-cta .urgentrow { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.contact-cta .urgentrow .chip { flex: none; font-size: 13px; font-weight: 600; padding: 3px 12px; }
.contact-cta .urgentrow p { font-size: 15px; color: var(--color-text-muted-on-ink); max-width: 42ch; }

/* Form card — paper on ink, headed by the process step-1 badge */
.contact-cta .formcard {
	background: var(--color-paper);
	border-radius: var(--radius-card);
	padding: var(--space-6);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.contact-cta .fhead { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.contact-cta .fbadge {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-cta .fhead h3 { font-size: 20px; font-weight: 600; color: var(--color-ink); line-height: 1.25; }
.contact-cta .fhead small { display: block; font-size: 13px; font-weight: 500; color: var(--color-text-muted); }

.contact-form .field-input { margin-bottom: var(--space-4); }
.contact-form textarea.field-input { min-height: 110px; resize: vertical; }
.contact-form .frow { display: grid; gap: 0 var(--space-4); }
.contact-form .btn { width: 100%; }
/* The card is paper, so the focus ring inside it is petrol, not the
   on-ink white (overrides the .on-ink rule from tokens.css). */
.contact-cta .formcard .btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.contact-form .f-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); text-align: center; }

@media (min-width: 640px) {
	.contact-cta .tiles { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
	.contact-cta .urgentrow { flex-direction: row; }
	/* Negative: the 28.8px chip is taller than the note's 24px line box, so it
	   only centres on the first line by being pulled up. */
	.contact-cta .urgentrow .chip { margin-top: -2px; }
	.contact-form .frow { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
	.contact-cta {
		background:
			radial-gradient(640px 420px at 78% 12%, rgba(11, 114, 133, 0.35), transparent 70%),
			radial-gradient(520px 380px at 4% 100%, rgba(11, 114, 133, 0.18), transparent 70%),
			var(--color-ink);
	}
	.contact-cta .lead { font-size: 18px; }
	.contact-cta .tile a { font-size: 19px; }
	.contact-cta .formcard { padding: var(--space-8); }
}
@media (min-width: 1024px) {
	.contact-cta .inner {
		grid-template-columns: 6fr 6fr;
		column-gap: var(--space-16);
		row-gap: 28px;
		align-items: start;
	}
	.contact-cta .head,
	.contact-cta .tiles,
	.contact-cta .urgentrow { grid-column: 1; }
	.contact-cta .formcard { grid-column: 2; grid-row: 1 / 4; }
}