/*
	Backflow Friends
	Breakpoints: 880px tablet, 860px header collapse, 760px footer, 600px phone.
*/

/* ---------------------------------------------------------------- Tokens */

:root {
	--ink: #0B2E45;
	--ink-soft: #37505f;
	--blue: #0f7bad;
	--blue-mid: #1499c9;
	--blue-deep: #0f5f8a;
	--blue-pill: #0f6f9e;
	--cyan: #3ec6e6;
	--cyan-soft: #5fb8dd;
	--tint: #e2f2fb;
	--body: #47606f;
	--muted: #5a7284;
	--muted-2: #6a8091;
	--slate: #38566a;
	--on-navy: #b9d2e0;
	--on-navy-muted: #9fbdcf;
	--on-navy-faint: #7f9db0;
	--success: #0f9b6c;
	--gold: #f5a623;

	--border: #e6eef4;
	--border-soft: #e1ebf1;
	--border-input: #dbe6ee;
	--border-btn: #cfe0eb;
	--border-panel: #e0eef6;

	--surface: #ffffff;
	--fill: #f4fafd;
	--input-fill: #f8fbfd;
	--chip-fill: #f1f7fb;
	--link-hover: #0b5f88;
	--active-bg: #e8f4fb;

	--grad-btn: linear-gradient(180deg, #1499c9, #0f7bad);
	--grad-hero: radial-gradient(120% 120% at 85% 0%, #e8f6fc 0%, #f4fafd 42%, #ffffff 100%);
	--grad-hero-left: radial-gradient(120% 120% at 15% 0%, #e8f6fc 0%, #f4fafd 42%, #ffffff 100%);
	--grad-cta: linear-gradient(120deg, #0B2E45 0%, #0f5f8a 55%, #1499c9 100%);
	--grad-panel: linear-gradient(120deg, #f2f9fd, #eaf5fb);
	--grad-promo: linear-gradient(160deg, #0f5f8a, #1499c9);

	--shadow-card: 0 10px 30px rgba(11, 46, 69, .05);
	--shadow-elev: 0 16px 44px rgba(11, 46, 69, .09);
	--shadow-hero-img: 0 26px 60px rgba(11, 46, 69, .22);
	--shadow-img: 0 20px 46px rgba(11, 46, 69, .14);
	--shadow-float: 0 16px 40px rgba(11, 46, 69, .18);
	--shadow-serv-hover: 0 18px 40px rgba(11, 46, 69, .13);
	--shadow-menu: 0 20px 40px rgba(11, 46, 69, .12);
	--shadow-panel-card: 0 14px 36px rgba(11, 46, 69, .1);
	--shadow-logo-card: 0 8px 22px rgba(11, 46, 69, .08);
	--shadow-faq: 0 6px 18px rgba(11, 46, 69, .04);
	--shadow-btn: 0 8px 22px rgba(15, 123, 173, .32);
	--shadow-btn-sm: 0 4px 14px rgba(15, 123, 173, .32);

	--font-display: 'Archivo', sans-serif;
	--font-body: 'Public Sans', system-ui, sans-serif;
}

/* ------------------------------------------------------------------ Base */

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

/* `clip` not `hidden`: overflow:hidden on an ancestor kills position:sticky. */
html, body { overflow-x: clip; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--surface);
	color: var(--body);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--blue); }
a:hover { color: var(--link-hover); }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

/* ---------------------------------------------------------------- Layout */

/* The design's max-widths measure content, not the padded box: a container caps
   at 1200px of content plus 24px of gutter on each side. */
.container, .container-narrow, .container-tight { box-sizing: content-box; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-tight { max-width: 1000px; margin: 0 auto; padding: 0 24px; }

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.split-hero { grid-template-columns: 1.05fr .95fr; gap: 56px; }
.split-contact { grid-template-columns: .95fr 1.05fr; gap: 56px; }
.split-about { grid-template-columns: 280px 1fr; }
.split-panel { grid-template-columns: 1.3fr 1fr; gap: 44px; }
.split-contact-page { grid-template-columns: .85fr 1.15fr; align-items: start; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.sidebar-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 44px;
	align-items: start;
}
.sidebar-layout-wide { grid-template-columns: 1fr 330px; }

.side-stack { display: flex; flex-direction: column; gap: 20px; }
.sticky-side { position: sticky; top: 132px; }

/* Image sits right on desktop, first on mobile. */
.split-flip .split-media { order: 2; }
.split-flip .split-body { order: 1; }

/* ------------------------------------------------------------ Typography */

.eyebrow {
	color: var(--blue);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hero-title {
	font-weight: 900;
	font-size: 56px;
	line-height: 1.04;
	letter-spacing: -.025em;
	margin: 22px 0 0;
}
.hero-title .accent { color: var(--blue); }

.page-title {
	font-weight: 900;
	font-size: 46px;
	line-height: 1.06;
	letter-spacing: -.025em;
	margin: 12px 0 14px;
}
.page-title-lg { font-size: 48px; }
.page-title-about { font-size: 42px; line-height: 1.08; margin: 12px 0 18px; }

.section-title {
	font-weight: 800;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 12px 0 0;
}
.section-title-sm { font-size: 32px; margin: 16px 0 14px; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }

.lead { font-size: 19px; line-height: 1.6; margin: 0; }
.lead-600 { max-width: 600px; }
.lead-620 { max-width: 620px; }
.lead-640 { max-width: 640px; }
.icon-xs { font-size: 12px; }

.pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--tint);
	color: var(--blue-pill);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	padding: 7px 14px;
	border-radius: 999px;
	text-transform: uppercase;
	text-decoration: none;
}
a.pill:hover { color: var(--blue-pill); background: #d3ebf9; }
.pill-sm { gap: 8px; font-size: 12px; letter-spacing: .06em; padding: 6px 12px; }
.pill-white { background: var(--surface); }

.link-arrow {
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.stars { color: var(--gold); }

/* --------------------------------------------------------------- Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	font-family: inherit;
	font-weight: 700;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	white-space: nowrap;
}

.btn-lg { font-size: 17px; padding: 15px 28px; }
.btn-md { font-size: 16px; padding: 14px 26px; }
.btn-sm { font-size: 15px; padding: 13px 22px; border-radius: 11px; }
.btn-xs { font-size: 14px; padding: 10px 18px; border-radius: 10px; }

.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover { color: #fff; }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { color: #fff; }

.btn-light { background: var(--surface); color: var(--ink); }
.btn-light:hover { color: var(--ink); }
.btn-light i { color: var(--blue); }

/* Bordered variants lose 2px of horizontal padding so they optically match. */
.btn-ghost {
	background: var(--surface);
	color: var(--ink);
	border: 1.5px solid var(--border-btn);
}
.btn-ghost:hover { color: var(--ink); }
.btn-ghost i { color: var(--blue); }
.btn-ghost.btn-lg { padding: 15px 26px; }
.btn-ghost.btn-md { padding: 14px 24px; }

.btn-outline-light {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
}
.btn-outline-light:hover { color: #fff; }
.btn-outline-light.btn-lg { padding: 15px 26px; }
.btn-outline-light.btn-md { padding: 14px 24px; }

.btn-block { width: 100%; }

/* One-offs the design calls for by name. */
.btn-nav { font-size: 15px; padding: 11px 20px; border-radius: 10px; box-shadow: var(--shadow-btn-sm); }
.btn-google { font-size: 15px; padding: 13px 24px; border-radius: 11px; }
.btn-call { font-size: 18px; padding: 13px 26px; }
.btn-submit { font-size: 16px; padding: 15px; box-shadow: none; }

/* ------------------------------------------------------------ Primitives */

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	box-shadow: var(--shadow-card);
}
.card-sm { border-radius: 16px; }
.card-lg { border-radius: 20px; box-shadow: var(--shadow-elev); }
.card-flat { box-shadow: none; }

.panel {
	background: var(--grad-panel);
	border: 1px solid var(--border-panel);
	border-radius: 22px;
}

.icon-tile {
	width: 56px;
	height: 56px;
	border-radius: 15px;
	background: var(--tint);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--blue);
	font-size: 24px;
	flex-shrink: 0;
}
.icon-tile-md { width: 50px; height: 50px; border-radius: 13px; font-size: 21px; }
.icon-tile-sm { width: 46px; height: 46px; border-radius: 12px; font-size: 19px; }

.media {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--shadow-img);
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.checklist li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	color: var(--ink-soft);
}
.checklist i { color: var(--success); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
	font-size: 12.5px;
	background: var(--chip-fill);
	color: var(--slate);
	padding: 5px 10px;
	border-radius: 7px;
}
.chip-accent { background: var(--tint); color: var(--blue-pill); font-weight: 600; }

/* ------------------------------------------------------------------ Form */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span-2 { grid-column: span 2; }

.form-grid input,
.form-grid textarea,
.control {
	padding: 14px 16px;
	border: 1.5px solid var(--border-input);
	border-radius: 11px;
	font-size: 15px;
	font-family: inherit;
	background: var(--input-fill);
	color: var(--ink);
	width: 100%;
}
.form-grid textarea,
textarea.control { resize: vertical; }
.form-grid input:focus-visible,
.form-grid textarea:focus-visible,
.control:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 1px;
}

/* ---------------------------------------------------------------- Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	font-family: var(--font-body);
}

.topbar { background: var(--ink); color: #cfe4f0; font-size: 13px; }
.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 7px;
	padding-bottom: 7px;
}
.topbar-loc { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .01em; }
.topbar-loc i { color: var(--cyan); }
.topbar-right { display: inline-flex; align-items: center; gap: 18px; }
.topbar-phone {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.topbar-phone:hover { color: #fff; }
.topbar-phone i { color: var(--cyan); }
.topbar-es {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #7fd6ee;
	font-weight: 600;
}

.navbar {
	position: relative;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-soft);
}
.navbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 46px; width: 46px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 19px;
	color: var(--ink);
	letter-spacing: -.01em;
}
.brand-sub {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #1288b8;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
	font-size: 15px;
	font-weight: 600;
	color: var(--slate);
	text-decoration: none;
	padding: 9px 14px;
	border-radius: 8px;
}
.nav-link:hover { color: var(--blue); }
.nav-link[aria-current="page"] { color: var(--blue); background: var(--active-bg); }
.nav .btn { margin-left: 10px; }

.burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 11px;
	border: 1.5px solid #d7e4ec;
	background: var(--surface);
	color: var(--ink);
	font-size: 20px;
	cursor: pointer;
}

.mobile-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--surface);
	border-bottom: 1px solid var(--border-soft);
	box-shadow: var(--shadow-menu);
	padding: 12px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mobile-menu[hidden] { display: none; }
.mobile-link {
	font-size: 16px;
	font-weight: 600;
	color: var(--slate);
	text-decoration: none;
	padding: 13px 14px;
	border-radius: 10px;
}
.mobile-link[aria-current="page"] { color: var(--blue); background: var(--active-bg); }
.mobile-menu .btn { margin-top: 6px; padding: 14px; font-size: 16px; border-radius: 11px; }

/* ---------------------------------------------------------------- Footer */

.site-footer { background: var(--ink); color: var(--on-navy); font-family: var(--font-body); }

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 48px;
	padding-top: 64px;
	padding-bottom: 40px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand img { height: 52px; width: 52px; object-fit: contain; }
.footer-brand span {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 20px;
	color: #fff;
}
.footer-blurb { font-size: 15px; line-height: 1.65; max-width: 340px; margin: 0 0 20px; }

.social { display: flex; gap: 10px; }
.social a {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #cfe4f0;
	text-decoration: none;
	font-size: 17px;
}
.social a:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.footer-head {
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cyan-soft);
	margin: 0 0 16px;
}
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-list a { color: var(--on-navy); text-decoration: none; font-size: 15px; }
.footer-list a:hover { color: #fff; }
.footer-contact { gap: 14px; }
.footer-contact i { color: var(--cyan); }
.footer-phone {
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.footer-email, .footer-es { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
.site-footer .btn { margin-top: 20px; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 13px;
	color: var(--on-navy-faint);
}

/* ----------------------------------------------------------------- Bands */

.hero { position: relative; background: var(--grad-hero); overflow: hidden; }

.page-header {
	background: var(--grad-hero);
	border-bottom: 1px solid #eaf1f6;
}
/* Must follow .page-header to win the cascade (same specificity). */
.hero-left-glow { background: var(--grad-hero-left); }
.page-header-inner { padding-top: 60px; padding-bottom: 56px; }
.page-header-inner-sm { padding-top: 60px; padding-bottom: 52px; }
.page-header-inner-center { padding-top: 56px; padding-bottom: 48px; text-align: center; }
.page-header-inner-center .page-title { margin: 16px 0 12px; }
.page-header-inner-center .lead { max-width: 560px; margin: 0 auto 22px; }
.about-hero-pad { padding-top: 64px; padding-bottom: 64px; }

/* Body wrappers, per page. */
.svc-wrap { padding-top: 16px; padding-bottom: 20px; }
.about-wrap { padding-top: 64px; padding-bottom: 20px; }
.faq-wrap { padding-top: 56px; padding-bottom: 20px; }
.appt-wrap { padding-top: 52px; padding-bottom: 20px; }
.contact-wrap { padding-top: 56px; padding-bottom: 20px; }

.sec-cta { margin-top: 20px; }
.sec-cta-about { margin-top: 44px; }
.cta-wrap { padding-bottom: 80px; }
.spacer-60 { height: 60px; }

.cta-band {
	background: var(--grad-cta);
	border-radius: 24px;
	padding: 56px;
	position: relative;
	overflow: hidden;
}
.cta-band-center { padding: 52px; text-align: center; }
.cta-band-inner { position: relative; z-index: 2; }
.cta-band-inner-narrow { max-width: 640px; }
.cta-band h2 {
	font-weight: 900;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 12px;
}
.cta-band .cta-title-lg { font-size: 38px; line-height: 1.12; margin: 0 0 14px; }
.cta-band .cta-title { font-size: 34px; }
.cta-band p { color: #cfe6f2; margin: 0 0 26px; font-size: 17px; }
.cta-band .cta-lead { font-size: 18px; line-height: 1.6; margin: 0 0 28px; }
.cta-band p a { color: #8fdcf5; font-weight: 600; }
.cta-band h2 a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.cta-band h2 a:hover { color: #fff; text-decoration-color: #fff; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-band-center .cta-actions { justify-content: center; }
.droplet {
	position: absolute;
	right: -20px;
	bottom: -30px;
	font-size: 280px;
	color: rgba(255, 255, 255, .06);
	z-index: 1;
	pointer-events: none;
}
.droplet-sm { right: -10px; bottom: -40px; font-size: 240px; }

.promo-card { background: var(--grad-promo); border-radius: 16px; padding: 26px; color: #fff; }
.promo-card h3 { font-weight: 800; font-size: 18px; margin: 0 0 8px; color: #fff; }
.promo-card p { font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; color: #e0f2fb; }
.promo-card > i { font-size: 22px; margin-bottom: 12px; color: #cdeefb; display: block; }
.promo-card .btn { padding: 11px 18px; }

/* ------------------------------------------------------------------ Home */

/* Section rhythm. Each block's vertical padding is set by the design. */
.sec-why { padding-top: 88px; padding-bottom: 20px; }
.sec-services { padding-top: 76px; padding-bottom: 20px; }
.sec-reviews { padding-top: 84px; padding-bottom: 20px; }
.sec-promo { margin-top: 80px; }
.sec-contact { padding-top: 84px; padding-bottom: 90px; }

.section-head-narrow { max-width: 620px; }
.reviews-head { margin-bottom: 48px; }
.reviews-head .section-title { margin-bottom: 8px; }
.stars-lg { font-size: 22px; letter-spacing: 3px; }
.reviews-cta { text-align: center; margin-top: 34px; }
.contact-form-card { padding: 34px; }

.hero-pad { padding-top: 72px; padding-bottom: 84px; }
.hero-sub { font-size: 19px; line-height: 1.6; color: var(--body); margin: 22px 0 0; max-width: 490px; }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

.hero-trust { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.hero-trust span.item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--slate);
	font-size: 14px;
}
.hero-trust .item i { color: var(--blue); }
.hero-trust .stars { letter-spacing: 1px; }
.hero-trust .rule { width: 1px; height: 18px; background: #d5e2ec; }

.hero-figure { position: relative; }
.hero-media {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: var(--shadow-hero-img);
	aspect-ratio: 4 / 5;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-badge {
	position: absolute;
	left: -22px;
	bottom: 32px;
	background: var(--surface);
	border-radius: 16px;
	padding: 16px 20px;
	box-shadow: var(--shadow-float);
	display: flex;
	align-items: center;
	gap: 14px;
}
.hero-badge .icon-tile-sm { border-radius: 12px; font-size: 20px; }
.hero-badge-title { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 16px; }
.hero-badge-sub { font-size: 13px; color: var(--muted-2); }

.trust-strip { background: var(--ink); }
.trust-strip .grid-4 { padding-top: 26px; padding-bottom: 26px; gap: 24px; }
.trust-item { display: flex; align-items: center; gap: 14px; color: #fff; }
.trust-item > i { color: var(--cyan); font-size: 26px; }
.trust-item .txt { line-height: 1.2; }
.trust-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.trust-sub { font-size: 13px; color: var(--on-navy-muted); }

.why-card { padding: 34px 30px; }
.why-card .icon-tile { margin-bottom: 20px; }
.why-card h3 { font-weight: 800; font-size: 21px; margin: 0 0 10px; }
.why-card p { font-size: 15.5px; line-height: 1.62; margin: 0; }

.serv-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 36px;
	flex-wrap: wrap;
}

.serv-card {
	display: block;
	text-decoration: none;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.serv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-serv-hover); }
.serv-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.serv-card .body { padding: 24px 24px 26px; }
.serv-card h3 { font-weight: 800; font-size: 20px; margin: 0 0 9px; }
.serv-card p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--muted); }

.partners-strip {
	margin-top: 24px;
	background: var(--grad-panel);
	border: 1px solid var(--border-panel);
	border-radius: 18px;
	padding: 26px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.partners-strip .lead-in { display: flex; align-items: center; gap: 16px; }
.partners-strip > .lead-in > i { color: var(--blue); font-size: 26px; }
.partners-title { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 18px; }
.partners-sub { font-size: 15px; color: var(--muted); margin-top: 2px; }
.partners-strip .link-arrow { white-space: nowrap; }

.steps { background: var(--fill); margin-top: 76px; }
.steps .container { padding-top: 80px; padding-bottom: 80px; }
.step-card { padding: 28px 24px; }
.step-num { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: #9cc4da; }
.step-card .icon-tile-md { margin: 12px 0 16px; }
.step-card h3 { font-weight: 800; font-size: 18px; margin: 0 0 8px; }
.step-card p { font-size: 14.5px; line-height: 1.58; margin: 0; color: var(--muted); }

.review-card { padding: 30px; }
.review-card .stars { font-size: 17px; letter-spacing: 2px; margin-bottom: 14px; }
.review-card p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 18px; }
.review-card .who { font-weight: 700; color: var(--ink); }

.contact-block h2 { font-weight: 800; font-size: 38px; line-height: 1.12; letter-spacing: -.02em; margin: 12px 0 16px; }
.contact-block p { font-size: 17px; line-height: 1.62; margin: 0 0 28px; max-width: 440px; }
.contact-lines { display: flex; flex-direction: column; gap: 16px; }
.contact-line {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--ink);
	font-weight: 700;
	font-size: 18px;
	word-break: break-word;
}
.contact-line:hover { color: var(--blue); }

/* -------------------------------------------------------------- Services */

.info-callout {
	box-sizing: content-box;
	margin-top: 26px;
	background: var(--surface);
	border: 1px solid #e0eaf1;
	border-radius: 12px;
	padding: 16px 20px;
	display: inline-flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 720px;
}
.info-callout > i { color: var(--blue); font-size: 18px; margin-top: 2px; }
.info-callout p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.info-callout strong { color: var(--ink); }

.anchor-nav { background: rgba(255, 255, 255, .92); border-bottom: 1px solid #eaf1f6; }
.anchor-nav .container {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 12px;
	padding-bottom: 12px;
}
.anchor-link {
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--slate);
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--chip-fill);
}
.anchor-link:hover { color: var(--blue); background: var(--active-bg); }

/* Clears the sticky header when jumping to an anchor. */
.anchor-target { scroll-margin-top: 180px; }

.svc-section { padding: 56px 0 20px; }
.svc-section-first { padding-top: 64px; }
.svc-section-last { padding-bottom: 40px; }
.partners-head { margin-bottom: 36px; }
.partners-head .section-title-sm { margin-bottom: 8px; }
.partners-head p { font-size: 16px; line-height: 1.6; margin: 0; }
.split-body p { font-size: 16px; line-height: 1.65; margin: 0 0 16px; }
.split-body p:last-child { margin-bottom: 0; }
.split-body .checklist { margin-bottom: 18px; }
.split-body .checklist:last-child { margin-bottom: 0; }
.split-body .note { font-size: 15.5px; line-height: 1.62; margin: 0; }

.potaflow-panel { padding: 44px 48px; }
.potaflow-panel h2 { font-size: 30px; }
.potaflow-panel p { font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
.potaflow-panel p:last-of-type { margin-bottom: 22px; }
.potaflow-card {
	background: var(--surface);
	border-radius: 18px;
	padding: 36px;
	text-align: center;
	box-shadow: var(--shadow-panel-card);
}
.potaflow-card img { width: 100%; max-width: 170px; display: inline-block; margin-bottom: 20px; }
.feature-list { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.feature-list div { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.feature-list i { color: var(--success); }

.partner-card { overflow: hidden; }
.partner-card img { width: 100%; height: 170px; object-fit: cover; display: block; }
.partner-logo {
	width: 100%;
	height: 170px;
	background: var(--fill);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.partner-logo img { max-width: 100%; max-height: 100%; height: auto; object-fit: contain; }
.partner-card .body { padding: 24px; }
.partner-card h3 { font-weight: 800; font-size: 19px; margin: 0 0 8px; }
.partner-card p { font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; color: var(--muted); }
.partner-contact { font-size: 14px; color: var(--ink-soft); }
.partner-contact strong { color: var(--ink); }

/* ----------------------------------------------------------------- About */

.avatar-col { text-align: center; }
/* 220px of photo; the white ring sits outside it. */
.avatar {
	box-sizing: content-box;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto;
	box-shadow: 0 18px 44px rgba(11, 46, 69, .22);
	border: 5px solid #fff;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-name { margin-top: 18px; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); }
.avatar-role {
	font-size: 13px;
	font-weight: 600;
	color: #1288b8;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-top: 2px;
}
.about-bio p { font-size: 17px; line-height: 1.68; margin: 0 0 14px; }
.about-bio p:last-child { margin-bottom: 0; }

.icon-row { display: grid; grid-template-columns: 56px 1fr; gap: 22px; margin-bottom: 44px; }
.icon-row-mid { margin-bottom: 36px; }
.icon-row-last { margin-bottom: 20px; }
.icon-row h2 { font-weight: 800; font-size: 26px; margin: 4px 0 12px; letter-spacing: -.01em; }
.icon-row p { font-size: 16px; line-height: 1.68; margin: 0 0 12px; }
.icon-row p:last-child { margin-bottom: 0; }
/* Paragraph is followed by the Potaflow panel, so it keeps its bottom margin. */
.icon-row-mid p { margin-bottom: 22px; }

.logo-card { background: var(--surface); border-radius: 14px; padding: 18px 24px; box-shadow: var(--shadow-logo-card); }
.logo-card img { width: 150px; display: block; }
.about-panel { padding: 26px 28px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; border-radius: 18px; }
.about-panel .txt { flex: 1; min-width: 220px; }
.about-panel h3 { font-weight: 800; font-size: 18px; margin: 0 0 6px; }
.about-panel p { font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; color: var(--muted); }

.cert-card { padding: 22px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cert-card img { width: 120px; height: 120px; object-fit: contain; border-radius: 12px; background: var(--fill); }
.cert-card .txt { flex: 1; min-width: 220px; }
.cert-card h3 { font-weight: 800; font-size: 18px; margin: 0 0 6px; }
.cert-card p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--muted); }
.cert-card strong { color: var(--ink); }

/* ------------------------------------------------------------------- FAQ */

.faq-item {
	border: 1px solid var(--border);
	border-radius: 14px;
	margin-bottom: 12px;
	overflow: hidden;
	background: var(--surface);
	box-shadow: var(--shadow-faq);
}
.faq-q {
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	padding: 20px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	color: var(--ink);
}
.faq-icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--tint);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
/* Glyph follows aria-expanded so it cannot desync from the panel. */
.faq-icon::before { content: "+"; }
.faq-q[aria-expanded="true"] .faq-icon::before { content: "\2212"; }

.faq-a { padding: 0 22px 22px; font-size: 15.5px; line-height: 1.7; color: var(--body); }
.faq-a[hidden] { display: none; }

.side-card { padding: 24px; }
.side-card h3 { font-weight: 800; font-size: 16px; margin: 0 0 14px; letter-spacing: .02em; }
.side-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.side-links a {
	font-size: 14.5px;
	text-decoration: none;
	display: inline-flex;
	gap: 8px;
	align-items: baseline;
}
.side-links i { font-size: 12px; color: #9cc4da; }

/* ----------------------------------------------------------- Appointment */

.appt-card { padding: 34px; }
.appt-card > h2 { font-weight: 800; font-size: 24px; margin: 0 0 6px; }
.appt-card > .intro { font-size: 15px; line-height: 1.55; margin: 0 0 26px; }

.appt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.appt-grid .span-2 { grid-column: span 2; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* --muted, not --muted-2: at 13px these are "normal text" and need 4.5:1 on white.
   #5a7284 = 5.03:1; #6a8091 = 4.11:1 and would fail WCAG AA. */
.field > label,
.field > .label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
}
.req { color: #c8452f; margin-left: 2px; }
.hint { font-size: 13px; line-height: 1.45; color: var(--muted); margin: 0; }

/* :user-invalid, not :invalid — an untouched empty required field is not an error yet. */
.form-grid input:user-invalid,
.form-grid textarea:user-invalid,
.control:user-invalid { border-color: #c8452f; background: #fdf7f6; }

fieldset.field { border: none; padding: 0; margin: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--input-fill);
	border: 1.5px solid var(--border-input);
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 14.5px;
	color: var(--ink-soft);
	cursor: pointer;
	min-height: 44px;
	box-sizing: border-box;
}
.check:hover { border-color: var(--border-btn); }
.check input { accent-color: var(--blue); width: 17px; height: 17px; margin: 0; cursor: pointer; }
.check:has(input:checked) { background: var(--tint); border-color: #9ed3ee; color: var(--ink); }
.check:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; }

/* Bot trap. Never shown, never announced, never focusable. */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Shared by the appointment and contact forms. */
.form-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.form-error {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: #a3341f;
	background: #fdf2ef;
	border: 1px solid #f0cfc6;
	border-radius: 10px;
	padding: 12px 14px;
}
.form-error[hidden] { display: none; }
.form-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; text-align: center; }

.form-success { padding: 44px 34px; text-align: center; }
.form-success[hidden] { display: none; }
.form-success:focus { outline: none; }
.form-success .tick {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #e4f6ef;
	color: var(--success);
	font-size: 27px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}
.form-success h2 { font-weight: 800; font-size: 26px; margin: 0 0 10px; letter-spacing: -.01em; }
.form-success p { font-size: 16px; line-height: 1.62; margin: 0 auto 22px; max-width: 420px; }

/* 404 page. */
.notfound { text-align: center; padding: 90px 0 100px; }
.notfound .code {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(84px, 20vw, 148px);
	line-height: .95;
	letter-spacing: -.03em;
	color: var(--blue);
}
.notfound h1 { font-size: clamp(26px, 5vw, 36px); font-weight: 800; margin: 6px 0 12px; letter-spacing: -.01em; }
.notfound p { max-width: 470px; margin: 0 auto 28px; font-size: 16px; line-height: 1.62; color: var(--body); }
.notfound .nf-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.expect-list { display: flex; flex-direction: column; gap: 14px; }
.expect-list div { display: flex; gap: 12px; align-items: flex-start; }
.expect-list i { color: var(--success); margin-top: 3px; }
.expect-list span { font-size: 14.5px; line-height: 1.5; color: var(--body); }
.side-card .area-sub { font-size: 13px; color: var(--muted-2); margin: 0 0 14px; }

/* --------------------------------------------------------------- Contact */

.contact-stack { gap: 16px; }
.contact-card { display: flex; align-items: center; gap: 16px; padding: 22px; text-decoration: none; }
.contact-card .icon-tile { width: 52px; height: 52px; border-radius: 13px; font-size: 21px; }
.contact-card .txt { line-height: 1.3; min-width: 0; }
.contact-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted-2);
}
.contact-value {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 20px;
	color: var(--ink);
}
.contact-value-sm { font-size: 17px; word-break: break-all; }

.spanish-panel { margin-top: 20px; }
.spanish-panel .head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.spanish-panel .head i { font-size: 22px; color: #cdeefb; }
.spanish-panel .head span { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.spanish-panel p { font-size: 14.5px; line-height: 1.55; margin: 0; color: #e0f2fb; }

.social-row { margin-top: 20px; display: flex; gap: 12px; }
.social-wide {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border-radius: 12px;
	padding: 14px;
	text-decoration: none;
	color: var(--ink);
	font-weight: 700;
	font-size: 14px;
}
.social-wide i { color: var(--blue); }

.form-card { padding: 36px; }
.form-card h2 { font-weight: 800; font-size: 24px; margin: 0 0 6px; }
.form-card > p { font-size: 15px; line-height: 1.55; margin: 0 0 24px; }

/* -------------------------------------------------------------- Incoming */

.coupon {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	background:
		linear-gradient(120deg, rgba(11, 46, 69, .92) 0%, rgba(15, 95, 138, .88) 55%, rgba(20, 153, 201, .82) 100%),
		url("../../images/incoming_drinking_water.jpg") center / cover fixed no-repeat;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.coupon-inner { position: relative; z-index: 2; max-width: 720px; }
.coupon-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	margin-bottom: 40px;
}
.coupon-brand img { height: 46px; width: 46px; object-fit: contain; }
.coupon-brand span { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #fff; }
.coupon-kicker {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 22px;
	color: #cfe6f2;
	margin: 0 0 8px;
	letter-spacing: -.01em;
}
.coupon-amount {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 128px;
	line-height: 1;
	letter-spacing: -.04em;
	color: #fff;
	margin: 0;
}
.coupon-for {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 26px;
	color: #fff;
	margin: 14px 0 30px;
	letter-spacing: -.01em;
}
.coupon-code {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, .12);
	border: 1px dashed rgba(255, 255, 255, .5);
	border-radius: 999px;
	padding: 12px 26px;
	color: #cfe6f2;
	font-size: 16px;
	margin-bottom: 18px;
}
.coupon-code strong {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 20px;
	letter-spacing: .08em;
	color: #fff;
}
/* Not a flex container: <strong> must stay inline with the sentence. */
.coupon-extra {
	max-width: 520px;
	margin: 0 auto 32px;
	font-size: 15.5px;
	line-height: 1.55;
	color: #cfe6f2;
}
.coupon-extra i { color: #8fdcf5; margin-right: 8px; }
.coupon-extra strong { color: #fff; }
.coupon-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------- Responsive: 880px */

@media (max-width: 880px) {
	.split,
	.split-hero,
	.split-contact,
	.split-about,
	.split-panel,
	.split-contact-page { grid-template-columns: 1fr; gap: 32px; }
	.split-about { gap: 28px; }
	.split-panel { gap: 32px; }

	.split-flip .split-media { order: -1; }

	.grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }

	.sidebar-layout, .sidebar-layout-wide { grid-template-columns: 1fr; gap: 32px; }
	.sticky-side { position: static; top: auto; }

	.hero-title { font-size: 40px; }
	.page-title, .page-title-about { font-size: 36px; }
	.page-title-lg { font-size: 38px; }

	.cta-band { padding: 40px 32px; }
	.potaflow-panel { padding: 36px 30px; }
}

/* ----------------------------------------------------- Responsive: 860px */

@media (max-width: 860px) {
	.nav { display: none; }
	.burger { display: inline-flex; }
	.topbar-loc { display: none; }
}

@media (min-width: 861px) {
	.mobile-menu { display: none; }
}

/* ----------------------------------------------------- Responsive: 760px */

@media (max-width: 760px) {
	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ----------------------------------------------------- Responsive: 600px */

@media (max-width: 600px) {
	.grid-3, .grid-4 { grid-template-columns: 1fr; }
	/* Trust strip stays 2x2 on phones. */
	.trust-strip .grid-4 { grid-template-columns: 1fr 1fr; }

	.form-grid { grid-template-columns: 1fr; }
	.form-grid .span-2 { grid-column: span 1; }

	.checklist { grid-template-columns: 1fr; }
	.icon-row { grid-template-columns: 1fr; gap: 14px; }

	.hero-title { font-size: 31px; }
	.page-title, .page-title-about { font-size: 30px; }
	.page-title-lg { font-size: 31px; }

	.hero-pad { padding-top: 48px; padding-bottom: 56px; }

	/* A ragged two-button stack reads as an accident. Make it one column. */
	.hero-actions { flex-direction: column; align-items: stretch; }
	.hero-actions .btn { width: 100%; }

	/* Dividers strand themselves at the end of a wrapped line. */
	.hero-trust { gap: 10px 18px; }
	.hero-trust .rule { display: none; }

	/* Overlaid, the badge hides the gauge — the subject of the photo. Drop it
	   below the image and let it overlap just the bottom edge. */
	.hero-badge {
		position: relative;
		left: auto;
		bottom: auto;
		margin: -30px 14px 0;
		z-index: 2;
	}

	.cta-band { padding: 30px 22px; }
	.cta-band .cta-title-lg, .cta-band .cta-title { font-size: 28px; }
	.potaflow-panel { padding: 28px 22px; }

	.appt-grid { grid-template-columns: 1fr; }
	.appt-grid .span-2 { grid-column: span 1; }
	.appt-card { padding: 26px 22px; }
	.check { width: 100%; justify-content: flex-start; }

	.coupon-amount { font-size: 86px; }
	.coupon-kicker { font-size: 18px; }
	.coupon-for { font-size: 21px; }
	.coupon { background-attachment: scroll; }

	.social-row { flex-direction: column; }
}