/**
 * Local Service Page styles.
 *
 * Everything on this page is drawn with .aiat-lp__* classes. The only things that
 * come from Elementor are the header and the footer.
 *
 * The design tokens below are measured from her live site, not invented:
 *   - content 1380 centred -> the Elementor content width the other pages render
 *                        at. Every section here shares the same wrap, so every
 *                        left edge agrees, and on wide screens it agrees with
 *                        the rest of the site too. The 5vw gutter only matters
 *                        below ~1520px, where it matches the header's padding.
 *   - type 64/48/24/18 -> the scale in use on /services/, stepped at her exact
 *                        breakpoints (see the media queries at the bottom).
 *   - colours/fonts    -> read from the Elementor kit (elementor-kit-6) so they
 *                        follow her globals instead of hardcoding hexes.
 */

.aiat-lp {
	/* Brand, read from the kit. Fallbacks match the kit as of 16/jul/2026. */
	--lp-primary: var(--e-global-color-primary, #02B7B7);
	--lp-accent: var(--e-global-color-accent, #ED7250);
	--lp-text: var(--e-global-color-text, #000000);
	--lp-muted: var(--e-global-color-secondary, #555555);

	/* Kit surface (#FCFCFC) is indistinguishable from white, which made the whole
	 * page read as one long white sheet. A 6% teal tint keeps the light, fresh
	 * look but makes the section rhythm actually visible. */
	--lp-surface: color-mix(in srgb, var(--e-global-color-primary, #02B7B7) 6%, #fff);
	--lp-font: var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;

	/* The one number that keeps every section aligned with the header. */
	--lp-gutter: 5vw;

	/* Content column cap, centred. 1380 is the Elementor content width the rest
	 * of the site renders at, so on wide screens these sections line up with the
	 * content of every other page. (An earlier revision left-aligned this to the
	 * header's 5vw gutter instead; on a 1920 screen that pushed the content
	 * ~174px further left than every other page and read as "too wide".) */
	--lp-content: 1380px;

	/* Type scale, copied from her live breakpoint ladder rather than interpolated.
	 * Measured on /services/ (element 2020721 for the hero, 3dd17ad/cb7ac2e for
	 * the section headings):
	 *
	 *            desktop   <=1024   <=767
	 *   hero       64px     48px     36px
	 *   h2         48px     36px     32px
	 *
	 * A fluid clamp() was close but not equal: it produced 45px at 1024 where she
	 * uses 48. Stepping at her exact breakpoints keeps these pages in lockstep
	 * with the rest of the site. The steps live in the media queries at the
	 * bottom of this file. */
	--lp-fs-hero: 64px;
	--lp-fs-h2: 48px;
	--lp-fs-h3: 24px;
	--lp-fs-body: 18px;

	--lp-section-y: clamp(64px, 7vw, 104px);

	font-family: var(--lp-font);
	font-size: var(--lp-fs-body);
	color: var(--lp-text);
	line-height: 1.6;
}

/* Layout
 *
 * Full-bleed section, fixed 5vw gutter. No centred container and no --narrow
 * variant: two different container widths were exactly what made the hero title
 * and the section headings start at different x positions.
 */

.aiat-lp__wrap {
	padding-inline: var(--lp-gutter);
	max-width: calc(var(--lp-content) + var(--lp-gutter) * 2);
	margin-inline: auto;
}

/* Line length is capped on the text itself, left-aligned, so long copy stays
 * readable without pulling its left edge inward. */
.aiat-lp__measure {
	max-width: 68ch;
}

.aiat-lp__section {
	padding-block: var(--lp-section-y);
}

.aiat-lp__section--alt {
	background: var(--lp-surface);
	border-block: 1px solid color-mix(in srgb, var(--lp-primary) 14%, transparent);
}

/* Hero
 *
 * The Elementor header is position:absolute with a transparent background, so it
 * floats over the first section instead of pushing it down. The top padding here
 * is what clears it: 18vw desktop / 180px mobile, mirroring the /services/ hero.
 */

.aiat-lp__hero {
	background: linear-gradient(180deg, color-mix(in srgb, var(--lp-primary) 8%, #fff), #fff);
	padding-block: 18vw 8vw;
	text-align: left;
}

.aiat-lp__hero--image {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
}

/* The hero photo has bright patches (the window, the lit wall), so white text on
 * the raw image fails contrast in places. This scrim is angled from the left
 * because the copy is left-aligned: it protects the text without flattening the
 * whole photo. */
.aiat-lp__hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .25) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .2));
}

.aiat-lp__hero .aiat-lp__wrap {
	position: relative;
	z-index: 1;
}

/* .aiat-lp prefix required: ".elementor-kit-6 h1" (0-1-1) outweighs a lone
 * class and forces teal/400 on the hero title. See the Headings comment. */
.aiat-lp .aiat-lp__title {
	font-size: var(--lp-fs-hero);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 0 20px;
	max-width: 18ch;
}

.aiat-lp__sub {
	font-size: 1.25rem;
	color: var(--lp-muted);
	max-width: 46ch;
	margin: 0 0 36px;
	line-height: 1.55;
}

.aiat-lp__hero--image .aiat-lp__title {
	color: #fff;
}

.aiat-lp__hero--image .aiat-lp__sub {
	color: rgba(255, 255, 255, .9);
}

/* A small brand rule above the title, so the hero does not read as bare text
 * dropped on a stock photo. */
.aiat-lp__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lp-primary);
	margin: 0 0 18px;
}

.aiat-lp__hero--image .aiat-lp__eyebrow {
	color: #fff;
}

.aiat-lp__eyebrow::before {
	content: "";
	width: 32px;
	height: 2px;
	background: currentColor;
}

/* Rating badge under the hero CTA. The 5.0/253 numbers come from the
 * LocalBusiness schema her home page publishes; they live in data/shared.php. */
.aiat-lp__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 20px 0 0;
	font-size: .95rem;
	font-weight: 500;
}

.aiat-lp__hero--image .aiat-lp__badge {
	color: rgba(255, 255, 255, .92);
}

.aiat-lp__badge-star {
	color: #FFC107;
	font-size: 1.05rem;
}

/* Intro section: image left, copy right, mirroring the /residential/ layout. */
.aiat-lp__intro-grid {
	display: grid;
	grid-template-columns: minmax(0, 46%) 1fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.aiat-lp__intro-grid--noimg {
	grid-template-columns: 1fr;
}

.aiat-lp__intro-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.aiat-lp__intro-body .aiat-lp__cta-row {
	margin-top: 32px;
}

@media (max-width: 767px) {
	.aiat-lp__intro-grid {
		grid-template-columns: 1fr;
	}
}

/* Why-us checklist, inside the intro section. */
.aiat-lp__checks {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 12px 32px;
	max-width: 880px;
}

.aiat-lp__checks li {
	position: relative;
	padding-left: 30px;
	line-height: 1.5;
}

.aiat-lp__checks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--lp-primary);
	font-weight: 700;
}

/* FAQ accordion: native <details>, no JS. */
.aiat-lp__faq {
	display: grid;
	gap: 12px;
	max-width: 880px;
}

.aiat-lp__faq-item {
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--lp-primary) 18%, transparent);
	border-radius: 12px;
}

.aiat-lp__faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 56px 18px 24px;
	font-weight: 600;
	position: relative;
}

.aiat-lp__faq-item summary::-webkit-details-marker {
	display: none;
}

.aiat-lp__faq-item summary::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	translate: 0 -50%;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--lp-primary);
	transition: rotate .15s ease;
}

.aiat-lp__faq-item[open] summary::after {
	rotate: 45deg;
}

.aiat-lp__faq-item p {
	margin: 0;
	padding: 0 24px 20px;
	color: var(--lp-muted);
	line-height: 1.65;
	max-width: 68ch;
}

/* Buttons
 *
 * The kit sets `.elementor-kit-6 a { color: accent }` (0-1-1), which beats a bare
 * `.aiat-lp__btn` (0-1-0) and turns the label orange on the teal fill. Every rule
 * here is scoped as `.aiat-lp a.aiat-lp__btn` (0-2-1) to win that. Do not
 * "simplify" these selectors back down.
 */

.aiat-lp__cta-row {
	display: flex;
	gap: 12px;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.aiat-lp a.aiat-lp__btn {
	display: inline-block;
	padding: 16px 38px;
	border-radius: 50px;
	background: var(--lp-primary);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var(--lp-primary);
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.aiat-lp a.aiat-lp__btn:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--lp-primary) 35%, transparent);
}

.aiat-lp a.aiat-lp__btn--ghost {
	background: transparent;
	color: var(--lp-primary);
	box-shadow: none;
}

.aiat-lp__hero--image a.aiat-lp__btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, .75);
}

.aiat-lp__hero--image a.aiat-lp__btn--ghost:hover {
	color: #fff;
	background: rgba(255, 255, 255, .12);
	box-shadow: none;
}

/* Headings
 *
 * Per client direction (16/jul/2026, matching /residential/): headings are black
 * and bold, with ONE phrase per heading highlighted teal via .aiat-lp__hl, and
 * they run the full content width, no character cap.
 *
 * Every selector here is prefixed with .aiat-lp on purpose: the kit styles
 * headings as ".elementor-kit-6 h2 { color: teal; font-weight: 400 }" (0-1-1),
 * which BEATS a lone ".aiat-lp__h2" (0-1-0). A single-class version of these
 * rules silently never applies. Same trap as the buttons. Do not simplify.
 */

.aiat-lp .aiat-lp__h2 {
	font-size: var(--lp-fs-h2);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	margin: 0 0 20px;
	text-align: left;
	color: var(--lp-text);
}

.aiat-lp .aiat-lp__hl {
	color: var(--lp-primary);
}

.aiat-lp .aiat-lp__h3 {
	font-size: var(--lp-fs-h3);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 10px;
	color: var(--lp-text);
}

.aiat-lp__intro {
	font-size: var(--lp-fs-body);
	line-height: 1.75;
	color: var(--lp-muted);
	margin: 0;
}

.aiat-lp__section-head {
	margin-bottom: 48px;
}

/* Service cards */

.aiat-lp__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.aiat-lp__card {
	/* Faintly tinted so the cards read as objects on the white section instead
	 * of white-on-white outlines. */
	background: color-mix(in srgb, var(--lp-primary) 3%, #fff);
	border: 1px solid color-mix(in srgb, var(--lp-primary) 18%, transparent);
	border-radius: 14px;
	padding: 36px 32px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.aiat-lp__card:hover {
	border-color: color-mix(in srgb, var(--lp-primary) 45%, transparent);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .05);
}

.aiat-lp__card-intro {
	margin: 0 0 20px;
	color: var(--lp-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.aiat-lp__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiat-lp__list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 12px;
	line-height: 1.5;
	font-size: 1rem;
}

.aiat-lp__list li:last-child {
	margin-bottom: 0;
}

.aiat-lp__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lp-primary);
}

/* How It Works */

.aiat-lp__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiat-lp__step {
	position: relative;
	padding-top: 28px;
	border-top: 2px solid color-mix(in srgb, var(--lp-primary) 25%, transparent);
}

.aiat-lp__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--lp-primary);
	color: #fff;
	font-weight: 600;
	font-size: 1.0625rem;
	margin-bottom: 16px;
}

.aiat-lp__step p {
	margin: 0;
	color: var(--lp-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* Neighbourhood chips */

.aiat-lp__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiat-lp__chip {
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--lp-primary) 30%, transparent);
	color: color-mix(in srgb, var(--lp-primary) 85%, #000);
	border-radius: 50px;
	padding: 10px 22px;
	font-size: 1rem;
	font-weight: 500;
}

/* Nearby-city links.
 *
 * Same chip, but clickable. The kit styles bare anchors at 0-1-1
 * (.elementor-kit-6 a), so every rule here carries the .aiat-lp prefix (0-2-0)
 * or her link colour and underline come straight back. */

.aiat-lp__nearby {
	margin-top: 44px;
}

.aiat-lp .aiat-lp__nearby .aiat-lp__h3 {
	margin-bottom: 18px;
}

.aiat-lp .aiat-lp__chip--link {
	display: inline-block;
	text-decoration: none;
	color: color-mix(in srgb, var(--lp-primary) 85%, #000);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.aiat-lp .aiat-lp__chip--link:hover,
.aiat-lp .aiat-lp__chip--link:focus-visible {
	background: var(--lp-primary);
	border-color: var(--lp-primary);
	color: #fff;
}

/* Testimonial */

.aiat-lp__quote {
	margin: 0;
	text-align: left;
	font-size: 1.375rem;
	line-height: 1.6;
	border-left: 3px solid var(--lp-primary);
	padding-left: 28px;
	max-width: 58ch;
}

.aiat-lp__quote p {
	margin: 0;
}

.aiat-lp__quote cite {
	display: block;
	margin-top: 18px;
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	color: var(--lp-muted);
}

/* .aiat-lp prefix required to beat ".elementor-kit-6 a" (orange). */
.aiat-lp .aiat-lp__quote-link {
	color: var(--lp-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}

.aiat-lp .aiat-lp__quote-link:hover {
	color: var(--lp-primary);
	opacity: .8;
}

/* Closing CTA */

.aiat-lp__cta {
	text-align: left;
	background: var(--lp-primary);
	color: #fff;
}

.aiat-lp__cta .aiat-lp__h2 {
	color: #fff;
}

.aiat-lp__cta p {
	color: rgba(255, 255, 255, .92);
	margin: 0 0 32px;
	max-width: 52ch;
}

.aiat-lp__cta a.aiat-lp__btn {
	background: #fff;
	color: var(--lp-primary);
	border-color: #fff;
}

.aiat-lp__cta a.aiat-lp__btn:hover {
	color: var(--lp-primary);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.aiat-lp__cta a.aiat-lp__btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .7);
}

.aiat-lp__cta a.aiat-lp__btn--ghost:hover {
	color: #fff;
	background: rgba(255, 255, 255, .14);
}

/* Contact block: Elementor template 3145 rendered bare inside this section. It
 * ships its own background photo and spacing, so no wrap and no padding here.
 * The scroll-margin offsets the anchor landing so the block's heading does not
 * end up under the absolute-positioned menu. */
.aiat-lp__contact,
.aiat-lp .aiat-lp__cta {
	scroll-margin-top: 90px;
}

.aiat-lp__contact {
	border-top: 1px solid color-mix(in srgb, var(--lp-primary) 14%, transparent);
}

/* Admin-only notice */

.aiat-lp__notice {
	background: #fff4e5;
	border-left: 4px solid var(--lp-accent);
	padding: 16px 20px;
	margin-block: 40px;
}

.aiat-lp__wrap--fallback {
	padding-block: 200px 80px;
}

/* Mobile
 *
 * 5vw is only ~19px on a phone, too tight to read against. Her header switches
 * to a 30px gutter at the smaller breakpoints, so match that.
 */

@media (max-width: 1024px) {
	.aiat-lp {
		--lp-gutter: 30px;
		--lp-fs-hero: 48px;
		--lp-fs-h2: 36px;
	}
}

@media (max-width: 767px) {
	.aiat-lp {
		--lp-gutter: 24px;
		--lp-fs-hero: 36px;
		--lp-fs-h2: 32px;
	}

	.aiat-lp__hero {
		padding-block: 180px 60px;
	}

	.aiat-lp__title {
		max-width: none;
	}

	.aiat-lp__sub {
		font-size: 1.0625rem;
	}
}