/*
 * Shawakesh Technical LLC - design system and components.
 *
 * Built to the supplied homepage design: deep navy + signal yellow, Inter,
 * card-based services grid, dark process band, split hero.
 *
 * Order: font, tokens, base, layout, buttons, header, hero, section heads,
 * services, process, why-us, cta, trust strip, forms, inner pages, footer,
 * mobile call bar, utilities.
 *
 * One stylesheet, no framework, no build step.
 */

/* ------------------------------------------------------------------ font */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */

:root {
	/* Brand. Sampled from the approved homepage design. */
	--navy: #011528;
	--navy-2: #0b1e30;
	--navy-3: #12293f;
	--yellow: #f9c22b;
	--yellow-dark: #e0a911;
	/* WhatsApp green, darkened so white text clears the contrast floor. */
	--whatsapp: #0f7a3d;
	--whatsapp-dark: #0b5e2f;

	--ink: #011528;
	--text: #434a58;
	--text-soft: #667084;
	--surface: #ffffff;
	--surface-muted: #f5f7fa;
	--line: #e6eaef;
	--line-dark: rgba(255, 255, 255, 0.14);
	--on-dark: #ffffff;
	--on-dark-soft: rgba(255, 255, 255, 0.72);
	--on-yellow: #011528;

	--radius: 8px;
	--radius-lg: 14px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(1, 21, 40, 0.06);
	--shadow: 0 2px 6px rgba(1, 21, 40, 0.06), 0 12px 28px rgba(1, 21, 40, 0.07);
	--shadow-lift: 0 4px 10px rgba(1, 21, 40, 0.1), 0 18px 40px rgba(1, 21, 40, 0.14);

	--container: 1200px;
	--container-narrow: 780px;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--section-y: clamp(3.25rem, 7vw, 5.5rem);

	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--step-0: 1rem;
	--step-1: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
	--step-2: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
	--step-3: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);
	--step-4: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
}

/* ------------------------------------------------------------------ base */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

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

h1, h2, h3, h4 {
	margin: 0 0 0.6em;
	color: var(--ink);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-underline-offset: 0.18em; }
a:hover { color: var(--yellow-dark); }

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

ul, ol { padding-left: 1.2em; }

:focus-visible {
	outline: 3px solid var(--yellow-dark);
	outline-offset: 2px;
	border-radius: 3px;
}

.section--dark :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--yellow);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--navy);
	color: var(--on-dark);
	font-weight: 600;
}

.skip-link:focus { left: 0.5rem; top: 0.5rem; }

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

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

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

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--muted { background: var(--surface-muted); }

.section--dark {
	background: var(--navy);
	color: var(--on-dark-soft);
}

.section--dark h2,
.section--dark h3 { color: var(--on-dark); }

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.4em; }

/* Eyebrow: yellow rule + uppercase label, used above every section title. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	color: var(--text-soft);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.eyebrow::before {
	content: "";
	width: 2rem;
	height: 3px;
	background: var(--yellow);
	border-radius: 2px;
}

.section--dark .eyebrow,
.cta-band .eyebrow,
.hero .eyebrow { color: var(--on-dark-soft); }

.section-head {
	display: grid;
	gap: 1rem 2rem;
	margin-bottom: 2.75rem;
}

@media (min-width: 62rem) {
	.section-head--split {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}
}

.section-head__title { margin-bottom: 0.5rem; }

.section-head__intro {
	max-width: 56ch;
	margin: 0;
	color: var(--text-soft);
}

.section--dark .section-head__intro { color: var(--on-dark-soft); }

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 0.15rem;
	white-space: nowrap;
}

.text-link:hover {
	color: var(--yellow-dark);
	border-color: var(--yellow-dark);
}

/* --------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.9em 1.5em;
	border: 2px solid transparent;
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn--sm { padding: 0.7em 1.15em; font-size: 0.875rem; }
.btn--lg { padding: 1.05em 1.75em; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--accent {
	background: var(--yellow);
	border-color: var(--yellow);
	color: var(--on-yellow);
}

.btn--accent:hover,
.btn--accent:focus {
	background: var(--yellow-dark);
	border-color: var(--yellow-dark);
	color: var(--on-yellow);
}

.btn--outline {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}

.btn--outline:hover,
.btn--outline:focus { border-color: var(--ink); color: var(--ink); }

/* On dark grounds the outline button needs a light border. */
.hero .btn--outline,
.cta-band .btn--outline,
.section--dark .btn--outline,
.btn--ghost {
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--on-dark);
	background: transparent;
}

.hero .btn--outline:hover,
.cta-band .btn--outline:hover,
.section--dark .btn--outline:hover,
.btn--ghost:hover,
.hero .btn--outline:focus,
.cta-band .btn--outline:focus,
.section--dark .btn--outline:focus,
.btn--ghost:focus {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--on-dark);
	color: var(--on-dark);
}

.btn__icon { display: inline-flex; }

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.75rem;
}

.site-header__brand { margin-right: auto; }

/* Circular icon action (call, WhatsApp). Label is screen-reader only. */
.icon-btn {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--navy);
	color: var(--yellow);
	flex: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.icon-btn:hover,
.icon-btn:focus {
	background: var(--yellow);
	color: var(--on-yellow);
	transform: translateY(-1px);
}

.icon-btn--whatsapp { background: var(--whatsapp); color: #fff; }

.icon-btn--whatsapp:hover,
.icon-btn--whatsapp:focus { background: var(--whatsapp-dark); color: #fff; }

.site-header__actions { display: flex; align-items: center; gap: 0.6rem; }

.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; }

.brand__name {
	color: var(--ink);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.brand__tag {
	color: var(--text-soft);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.custom-logo { max-height: 52px; width: auto; }

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.85rem;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.nav-toggle__bars { display: grid; gap: 3px; width: 18px; }
.nav-toggle__bars span { height: 2px; background: currentColor; border-radius: 2px; }

.site-nav { display: none; }

.site-nav.is-open {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding: 0.5rem var(--gutter) 1.5rem;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.site-nav__list { list-style: none; margin: 0 0 1rem; padding: 0; }

.site-nav__list li { border-bottom: 1px solid var(--line); }

.site-nav__list a {
	display: block;
	padding: 0.85rem 0;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_ancestor > a,
.site-nav__list .current_page_parent > a { color: var(--yellow-dark); }

.site-nav__list .sub-menu { list-style: none; margin: 0 0 0.5rem; padding-left: 0.9rem; }
.site-nav__list .sub-menu a { padding: 0.6rem 0; font-weight: 500; font-size: 0.9375rem; }

.site-nav__cta { display: grid; gap: 0.6rem; }

@media (min-width: 64rem) {
	.nav-toggle { display: none; }
	.site-nav__cta { display: none; }

	/* Equal outer columns keep the navigation centred in the header
	   regardless of how wide the logo or the action icons are. */
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.site-header__brand { margin-right: 0; justify-self: start; }
	.site-header__actions { justify-self: end; }

	.site-nav {
		display: flex;
		align-items: center;
		justify-self: center;
	}

	.site-nav__list { display: flex; align-items: center; gap: 1.75rem; margin: 0; }
	.site-nav__list li { border: 0; position: relative; }

	.site-nav__list > li > a {
		padding: 1.6rem 0;
		font-size: 0.9375rem;
		border-bottom: 3px solid transparent;
	}

	.site-nav__list > li > a:hover,
	.site-nav__list > .current-menu-item > a,
	.site-nav__list > .current_page_ancestor > a {
		color: var(--ink);
		border-bottom-color: var(--yellow);
	}

	/* Parent items with children get a caret. */
	.site-nav__list .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		margin-left: 0.45rem;
		vertical-align: 0.15em;
		border: 4px solid transparent;
		border-top-color: currentColor;
		border-bottom: 0;
	}

	.site-nav__list .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: -1rem;
		min-width: 15.5rem;
		padding: 0.5rem 0;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		z-index: 5;
	}

	.site-nav__list .sub-menu a { padding: 0.55rem 1rem; }
	.site-nav__list .sub-menu a:hover { background: var(--surface-muted); }

	.site-nav__list li:hover > .sub-menu,
	.site-nav__list li:focus-within > .sub-menu { display: block; }
}

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

.hero {
	position: relative;
	background: var(--navy);
	color: var(--on-dark-soft);
	overflow: hidden;
}

.hero__grid {
	display: grid;
	align-items: stretch;
}

@media (min-width: 64rem) {
	.hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.hero__body {
	padding-block: clamp(3rem, 7vw, 5.5rem);
	padding-inline: var(--gutter);
	width: 100%;
	max-width: calc(var(--container) / 2);
	margin-left: auto;
	align-self: center;
}

@media (max-width: 63.99rem) {
	.hero__body { max-width: var(--container); margin-inline: auto; }
}

.hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	color: var(--on-dark-soft);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hero__eyebrow li + li { border-left: 1px solid var(--line-dark); padding-left: 0.9rem; }

.hero__title { color: var(--on-dark); margin-bottom: 0.5em; }

.hero__title .hl { color: var(--yellow); }

.hero__intro {
	max-width: 46ch;
	margin-bottom: 2rem;
	color: var(--on-dark-soft);
	font-size: var(--step-1);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.25rem;
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 2rem 0 0;
	border-top: 1px solid var(--line-dark);
}

.hero__badge {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--on-dark);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
}

.hero__badge svg { color: var(--yellow); flex: none; }

.hero__media {
	position: relative;
	min-height: 16rem;
	background: var(--navy-2);
}

@media (max-width: 63.99rem) {
	/* A shorter banner so the heading and the call button are reachable
	   without scrolling on a phone. */
	.hero__media { order: -1; aspect-ratio: 16 / 7; min-height: 0; }

	.hero__body { padding-block: 2rem 2.5rem; }

	.hero__intro { margin-bottom: 1.5rem; }

	.hero__badges { margin-top: 1.75rem; padding-top: 1.5rem; gap: 0.85rem 1.75rem; }
}

.hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Anchor right: the van sits at the right of the photograph and was being
	   cropped by the default centre crop. */
	object-position: right center;
}

/* Blends the photo into the navy panel instead of a hard seam. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--navy) 0%, rgba(1, 21, 40, 0.55) 22%, rgba(1, 21, 40, 0.1) 55%, rgba(1, 21, 40, 0.25) 100%);
}

@media (max-width: 63.99rem) {
	/* Keep most of the photograph readable and blend only the bottom seam
	   into the navy copy panel. */
	.hero__media::after {
		background: linear-gradient(180deg, rgba(1, 21, 40, 0.15) 0%, rgba(1, 21, 40, 0.2) 55%, var(--navy) 100%);
	}
}

/* Inner-page hero: single column, compact, no photo panel. */
.hero--compact .hero__grid { grid-template-columns: 1fr; }

.hero--compact .hero__body {
	max-width: var(--container);
	margin-inline: auto;
	padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

.hero--compact .hero__title { font-size: var(--step-3); }

.hero--compact.hero--image { background: var(--navy); }

.hero--compact .hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero--compact .hero__backdrop img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Navy scrim over the inner-page hero photo. The photo is context, not
   decoration to read text through: this keeps white copy well clear of the
   contrast floor whatever image the owner sets. */
.hero--compact .hero__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(1, 21, 40, 0.95) 0%, rgba(1, 21, 40, 0.88) 48%, rgba(1, 21, 40, 0.74) 100%);
}

.hero--compact .hero__grid { position: relative; z-index: 1; }

/* ----------------------------------------------------------- breadcrumbs */

.breadcrumbs { margin-bottom: 1rem; }

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
	color: var(--on-dark-soft);
}

.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin-right: 0.4rem; opacity: 0.6; }

.breadcrumbs a { color: var(--on-dark-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--yellow); text-decoration: underline; }

/* -------------------------------------------------------- services grid */

.service-grid {
	display: grid;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}

.service-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.service-card:hover {
	border-color: transparent;
	box-shadow: var(--shadow-lift);
	transform: translateY(-3px);
}

.service-card__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	height: 100%;
	padding: 0.875rem;
	color: inherit;
	text-decoration: none;
}

.service-card__media {
	width: 5.25rem;
	height: 5.25rem;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface-muted);
	flex: none;
}

.service-card__img { width: 100%; height: 100%; object-fit: cover; }

/* Fallback tile when no photo has been supplied yet. */
.service-card__media--placeholder {
	display: grid;
	place-items: center;
	background: var(--navy);
	color: var(--yellow);
}

.service-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	justify-content: center;
	min-height: 5.25rem;
	padding-right: 2.75rem;
	position: relative;
}

.service-card__title {
	font-size: 1.0625rem;
	line-height: 1.25;
	margin: 0;
}


.service-card__more {
	position: absolute;
	right: 0;
	bottom: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--yellow);
	color: var(--on-yellow);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.service-card:hover .service-card__more {
	background: var(--yellow-dark);
	transform: translateX(2px);
}

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

.process {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 64rem) {
	.process { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: 3.5rem; }
}

.process__title { margin-bottom: 0; }

.steps {
	position: relative;
	display: grid;
	gap: 2rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
	/* 8rem keeps four steps on one row inside the narrower right-hand column,
	   and still fits the five-step service pages across the full width. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
}

/* The connector line behind the step icons, desktop only. */
@media (min-width: 48rem) {
	.steps::before {
		content: "";
		position: absolute;
		top: 1.9rem;
		left: 12%;
		right: 12%;
		height: 1px;
		background: var(--line-dark);
	}
}

.steps__item { position: relative; text-align: center; }

.steps__icon {
	display: grid;
	place-items: center;
	width: 3.75rem;
	height: 3.75rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--surface);
	color: var(--navy);
}

.steps__number {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--yellow);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.steps__title {
	font-size: 0.9375rem;
	line-height: 1.35;
	margin-bottom: 0.3em;
}

.steps__text {
	margin: 0;
	color: var(--on-dark-soft);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Light variant, used on inner pages where the band is not dark. */
.section--muted .steps::before,
.section--light .steps::before { background: var(--line); }

.section--muted .steps__icon,
.section--light .steps__icon { background: var(--navy); color: var(--yellow); }

.section--muted .steps__number,
.section--light .steps__number { color: var(--yellow-dark); }

.section--muted .steps__text,
.section--light .steps__text { color: var(--text-soft); }

/* -------------------------------------------------------------- why us */

.why {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 64rem) {
	.why { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1fr); gap: 2.5rem; }

	/* No portrait supplied: two columns share the row rather than leaving a gap. */
	.why--no-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
}

.why__copy p { color: var(--text-soft); }

.why__actions { margin-top: 1.75rem; }

.why__media { position: relative; display: grid; place-items: end center; }

/* Yellow shape behind the cut-out photo, as in the design. */
.why__media::before {
	content: "";
	position: absolute;
	inset: 12% 8% 0 8%;
	background: var(--yellow);
	border-radius: 40% 40% 0 0 / 22% 22% 0 0;
}

.why__img { position: relative; z-index: 1; }

.why__list {
	display: grid;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.why__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }

.why__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius);
	background: var(--navy);
	color: var(--yellow);
	flex: none;
}

.why__item-title { font-size: 1rem; margin-bottom: 0.2em; }

.why__item-text { margin: 0; color: var(--text-soft); font-size: 0.9375rem; line-height: 1.5; }

/* -------------------------------------------------------------- cta band */

.cta-band {
	position: relative;
	background: var(--navy);
	color: var(--on-dark-soft);
	overflow: hidden;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.cta-band__media { position: absolute; inset: 0; z-index: 0; }

.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }

.cta-band__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--navy) 5%, rgba(1, 21, 40, 0.82) 55%, rgba(1, 21, 40, 0.72) 100%);
}

.cta-band__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 62rem) {
	.cta-band__inner { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.8fr); gap: 3rem; }
}

.cta-band__title { color: var(--on-dark); margin-bottom: 0.4em; }

.cta-band__text { margin: 0; max-width: 48ch; }

.cta-band__actions { display: grid; gap: 0.75rem; }

/* ----------------------------------------------------------- trust strip */

.trust-strip { border-bottom: 1px solid var(--line); background: var(--surface); padding-block: 2rem; }

.trust-strip__label {
	margin: 0 0 1.5rem;
	color: var(--text-soft);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
}

.trust-strip__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.trust-strip__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-inline: clamp(0.75rem, 3vw, 2.25rem);
	color: var(--ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.trust-strip__item + .trust-strip__item { border-left: 1px solid var(--line); }

.trust-strip__item svg { color: var(--navy); flex: none; }

/* ------------------------------------------------------- generic lists */

.check-list {
	display: grid;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {
	.check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
}

.check-list__item { display: flex; gap: 0.85rem; align-items: flex-start; }

.check-list__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--yellow);
	color: var(--on-yellow);
}

.check-list__title { display: block; color: var(--ink); font-size: 1.0625rem; line-height: 1.35; }
.check-list__text { display: block; margin-top: 0.2rem; color: var(--text-soft); }

.feature-grid {
	display: grid;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.feature-card {
	padding: 1.75rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	border-top: 3px solid var(--yellow);
}

.section--light .feature-card { background: var(--surface-muted); border-color: var(--line); border-top-color: var(--yellow); }

.feature-card__title { font-size: 1.0625rem; margin-bottom: 0.4em; }
.feature-card__text { margin: 0; color: var(--text-soft); }

/* ------------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 0;
	color: var(--ink);
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
	content: "+";
	flex: none;
	color: var(--yellow-dark);
	font-size: 1.35rem;
	line-height: 1;
}

.faq__item[open] .faq__question::after { content: "\2013"; }

.faq__answer { padding-bottom: 1.25rem; color: var(--text-soft); max-width: 70ch; }

/* ----------------------------------------------------------------- forms */

.split { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }

@media (min-width: 64rem) {
	.split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
	.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.split__aside { position: sticky; top: 6.75rem; }
}

.panel {
	padding: clamp(1.35rem, 3vw, 2rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 4px solid var(--yellow);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.quote__title { font-size: var(--step-2); margin-bottom: 0.35em; }
.quote__intro { color: var(--text-soft); margin-bottom: 1.4rem; }

.quote__notice {
	margin-bottom: 1.25rem;
	padding: 0.9rem 1rem;
	border-radius: var(--radius);
	border-left: 4px solid;
	font-weight: 500;
}

.quote__notice--success { background: #edf7ee; border-color: #2e7d32; color: #1b5e20; }
.quote__notice--error { background: #fdeceb; border-color: #c62828; color: #a02020; }

.field { margin: 0 0 1.1rem; }

.field__label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.field__req { color: var(--yellow-dark); }

.field__input {
	width: 100%;
	padding: 0.8rem 0.9rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	font: inherit;
	font-size: 1rem; /* 16px stops iOS zooming on focus. */
}

.field__input:focus-visible {
	border-color: var(--yellow-dark);
	outline: 3px solid rgba(249, 194, 43, 0.35);
	outline-offset: 0;
}

textarea.field__input { resize: vertical; min-height: 6rem; }

.field--consent .field__consent {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	color: var(--text-soft);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.field--consent input { margin-top: 0.25rem; flex: none; }

.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.quote__alt { margin: 1rem 0 0; color: var(--text-soft); font-size: 0.9375rem; text-align: center; }

/* -------------------------------------------------------- contact details */

.contact-details__title { font-size: 1.0625rem; margin-top: 1.75rem; }
.contact-details__title:first-child { margin-top: 0; }

.contact-details__phone { margin: 0 0 0.4rem; font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; }
.contact-details__phone a { color: var(--ink); text-decoration: none; }
.contact-details__phone a:hover { color: var(--yellow-dark); }

.contact-details__note,
.contact-details__address { color: var(--text-soft); font-style: normal; }

.contact-details__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.contact-details__list li { margin-bottom: 0.4rem; }

.map {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--line);
}

.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--navy); color: var(--on-dark-soft); padding-top: clamp(3rem, 6vw, 4.5rem); }

.site-footer__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }

@media (min-width: 48rem) {
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.site-footer__grid { grid-template-columns: 1.5fr 1fr 1.2fr 1.4fr; gap: 3rem; }
}

.site-footer__name { margin-bottom: 0.6rem; color: var(--on-dark); font-size: 1.0625rem; font-weight: 700; }

.site-footer__logo { display: inline-block; margin-bottom: 1rem; }
.site-footer__logo img { width: auto; max-width: 15rem; height: auto; }
.site-footer__tagline { max-width: 30ch; font-size: 0.9375rem; margin-bottom: 0.85rem; }

.site-footer__about {
	max-width: 44ch;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--on-dark-soft);
}

.site-footer__credit { margin: 0; }
.site-footer__credit a { text-decoration: underline; }
.site-footer__credit a:hover { color: var(--yellow); }

.site-footer__heading {
	color: var(--on-dark);
	font-size: 0.9375rem;
	font-weight: 700;
	margin-bottom: 1.1rem;
}

.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9375rem; }

.site-footer a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer a:hover { color: var(--yellow); }

.site-footer__address { display: grid; gap: 0.9rem; font-style: normal; font-size: 0.9375rem; }

.site-footer__line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; }

.site-footer__line svg { color: var(--yellow); margin-top: 0.15rem; flex: none; }

.social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.social a {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--on-dark);
}

.social a:hover { background: var(--yellow); color: var(--on-yellow); }

.site-footer__bar { border-top: 1px solid var(--line-dark); padding-block: 1.35rem; font-size: 0.875rem; }

.site-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
}

.site-footer__copy { margin: 0; }

.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------- mobile call bar */

.call-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line);
	border-top: 1px solid var(--line);
	box-shadow: 0 -4px 18px rgba(1, 21, 40, 0.14);
	padding-bottom: env(safe-area-inset-bottom);
}

.call-bar a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.95rem 0.5rem;
	font-weight: 600;
	text-decoration: none;
}

.call-bar__call { background: var(--yellow); color: var(--on-yellow); }
.call-bar__whatsapp { background: var(--whatsapp); color: #fff; }

body { padding-bottom: 4rem; }

@media (min-width: 64rem) {
	.call-bar { display: none; }
	body { padding-bottom: 0; }
}

/* ------------------------------------------------------------ post lists */

.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.post-list__title { font-size: var(--step-2); margin-bottom: 0.3em; }
.post-list__excerpt { color: var(--text-soft); margin: 0; }

.pagination { margin-top: 2.5rem; }

.pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
}

.pagination .current { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }

/* ------------------------------------------------------------- utilities */

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