/* ==========================================================================
   WP Mojster — Contact page styles (enqueued only on the contact template)
   Small paper hero (a reduction of the approved service hero: breadcrumb +
   H1 + lead, no aside panel), the business-details band (the page's one
   new element), and the shared final-CTA block — each page sheet carries
   its own copy of shared sections (page-scoped-CSS convention).
   Breakpoints: 640 / 768 / 1024 only (tokens.css rule).
   ========================================================================== */

/* ---- Shared section rhythm & heading scale ---- */
.contact-details,
.contact-cta {
	padding-top: var(--section-pad-mobile);
	padding-bottom: var(--section-pad-mobile);
}
.contact-details .eyebrow,
.contact-cta .eyebrow { margin-bottom: 12px; }

.svc-h2 {
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: 12px;
	max-width: 24em;
}
.svc-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;
}

@media (min-width: 768px) {
	.contact-details,
	.contact-cta {
		padding-top: var(--section-pad);
		padding-bottom: var(--section-pad);
	}
	.svc-h2 { font-size: var(--text-xl); }
	.svc-h2 mark { padding: 1px 8px; border-radius: 6px; }
}

/* ==========================================================================
   Hero — plain paper, the service-hero intro column alone.
   ========================================================================== */
.contact-hero {
	padding: 40px 0 48px;
	background: var(--color-paper);
}

.contact-hero .crumbs { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 16px; }
.contact-hero .crumbs a {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.contact-hero .crumbs a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }
.contact-hero .crumbs .sep { margin: 0 8px; color: var(--color-border); }
.contact-hero .crumbs [aria-current] { font-weight: 500; }

.contact-hero h1 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.18;
	margin-bottom: 12px;
}
.contact-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;
}
.contact-hero .lead {
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--color-text-muted);
	max-width: 36em;
}

@media (min-width: 768px) {
	.contact-hero { padding: 64px 0 72px; }
	.contact-hero .crumbs { margin-bottom: 20px; }
	.contact-hero h1 { font-size: var(--text-2xl); margin-bottom: 18px; }
	.contact-hero .lead { font-size: var(--text-md); line-height: 1.5; }
}

/* ==========================================================================
   Business details — surface band: <address> as three paper tiles on the
   direct-line treatment (the on-ink CTA tiles' daylight dual). Phone keeps
   the non-link look per the footer tel: decision.
   ========================================================================== */
.contact-details { background: var(--color-surface); border-top: 1px solid var(--color-border); }

.contact-details .cd-tiles {
	font-style: normal; /* <address> default italic */
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-6);
}
.contact-details .tile {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 18px 20px;
	transition: border-color var(--transition-fast);
}
.contact-details .tile:hover { border-color: var(--color-primary); }
.contact-details .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);
	margin-bottom: 6px;
}
.contact-details .tile a {
	color: var(--color-primary);
	font-weight: 600;
	font-size: 18px;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.contact-details .tile a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }
.contact-details .tile .tile-phone { color: var(--color-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.contact-details .biz-name { display: block; font-weight: 600; font-size: 17px; color: var(--color-ink); }
.contact-details .biz-addr { display: block; font-size: 15px; color: var(--color-text-muted); margin-top: 2px; }

@media (min-width: 768px) {
	.contact-details .cd-tiles { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
	.contact-details .tile a { font-size: 19px; }
	.contact-details .biz-name { font-size: 18px; }
}

/* ==========================================================================
   Final contact CTA — the approved on-ink band (same anatomy as the
   homepage; this page loads only this sheet, so the styles live here
   too). Mobile order: heading, form card, tiles, urgent note.
   ========================================================================== */
.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 .svc-h2--cta { font-size: var(--text-xl); color: #fff; margin-bottom: 14px; max-width: none; }
.contact-cta .svc-h2--cta.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; }

.contact-cta .urgentrow { display: flex; align-items: flex-start; gap: var(--space-3); }
.contact-cta .urgentrow .chip { flex: none; font-size: 13px; font-weight: 600; padding: 3px 12px; margin-top: 2px; }
.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-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 .svc-h2--cta { font-size: var(--text-2xl); }
	.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; }
}