/**
 * Style's Local Pages
 *
 * Tokens measured on stylecleaning.com (Elementor kit 6 + the home/residential pages):
 *   content 1390px, 20px gutters; hero h1 46/600, h2 32/600, h3 22/600, body 16/400,
 *   eyebrow 14/500 uppercase; section padding 100px; pills 50px; cards 20px; hero box 24px.
 * Colours and font come from the kit variables so they follow her globals.
 * Every selector is prefixed .slp so the Hello theme reset and the kit never win.
 */

.slp {
	--blue: var(--e-global-color-primary, #1576C5);
	--blue-dk: #0E5EA3;
	--green: var(--e-global-color-accent, #75BE41);
	--green-dk: #64AD32;
	--ink: var(--e-global-color-text, #1E1E1E);
	--text: #393E4A;
	--muted: #6B7280;
	--surface: #EEF1F4;
	--line: #E4E9F0;
	--font: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans"), system-ui, sans-serif;

	--fs-h1: 46px;
	--fs-h2: 32px;
	--fs-h3: 22px;
	--fs-body: 16px;
	--section-y: 100px;
	--gutter: 20px;
	--content: 1390px;

	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	display: block;
}

.slp *, .slp *::before, .slp *::after { box-sizing: border-box; }
.slp svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

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

.slp__section { padding-block: var(--section-y); }
.slp__section--alt { background: var(--surface); }
.slp__section-head { margin-bottom: 44px; }
.slp__section-head--center { text-align: center; }
/* Same specificity as ".slp .slp__lead" below and declared after it would still lose on order, so it is stated once more here with the prefix. */
.slp .slp__section-head--center .slp__lead { margin-inline: auto; }
.slp__section-head--center .slp__eyebrow { justify-content: center; }

/* Type. Prefixed with .slp to beat the theme reset on bare h1/h2. */
.slp .slp__title { font-size: var(--fs-h1); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: #fff; margin: 0 0 18px; }
.slp .slp__h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 0 0 14px; }
.slp .slp__h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--ink); margin: 0 0 8px; }
.slp .slp__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.slp .slp__eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--green); }
.slp .slp__lead { font-size: 17px; line-height: 1.7; color: var(--text); margin: 0 0 16px; max-width: 64ch; }
.slp .slp__sub { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .92); margin: 0 0 28px; max-width: 54ch; }
.slp p { margin-top: 0; }

/* Pill (the "Brookline, MA · Est. 2008" tag on the home hero). */
.slp .slp__pill { display: inline-block; padding: 8px 20px; border-radius: 50px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 14px; font-weight: 500; margin: 0 0 22px; }

/* Buttons. .slp a.slp__btn so the kit's bare-anchor rules never win. */
.slp__cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.slp__cta-row--center { justify-content: center; }
.slp a.slp__btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; border-radius: 50px; background: var(--green); color: #fff; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; border: 2px solid var(--green); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.slp a.slp__btn:hover { color: #fff; background: var(--green-dk); border-color: var(--green-dk); transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); }
.slp a.slp__btn--dark { background: #111; border-color: #111; }
.slp a.slp__btn--dark:hover { background: #000; border-color: #000; }
.slp a.slp__btn--outline { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.slp a.slp__btn--outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; box-shadow: none; }
.slp a.slp__btn--ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.slp a.slp__btn--ghost:hover { background: var(--blue); color: #fff; }

/* Hero: rounded blue box inside the column, like the home page. */
.slp__hero-wrap { padding-block: 0 20px; }
.slp__hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 40px; align-items: center; background: linear-gradient(160deg, #1A82D4 0%, #1576C5 50%, #0E5EA3 100%); border-radius: 24px; padding: 60px 50px; color: #fff; }
.slp__hero::before { content: ""; position: absolute; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
.slp__hero::after { content: ""; position: absolute; right: 30%; bottom: -160px; width: 300px; height: 300px; border-radius: 50%; background: rgba(117, 190, 65, .16); pointer-events: none; }
.slp__hero > * { position: relative; }
.slp__trust { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.slp__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: #fff; }
.slp__trust svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #fff; stroke: var(--blue); stroke-width: 3; }

.slp__hero-card { background: #fff; border-radius: 20px; padding: 26px 26px 22px; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
.slp .slp__hero-card-label { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.slp .slp__hero-card-label svg { width: 18px; height: 18px; }
.slp .slp__hero-card-foot { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }
.slp .slp__hero-card-foot a { color: var(--blue); font-weight: 600; text-decoration: none; }

/* Chips */
.slp__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.slp .slp__chip { display: inline-block; padding: 8px 14px; border-radius: 50px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none; border: 1px solid transparent; }
.slp .slp__chip--link { background: #fff; border-color: var(--line); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.slp .slp__chip--link:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.slp__chips--hero .slp__chip { background: #EAF3FB; }
.slp__chips--hero .slp__chip--link { background: #EAF3FB; border-color: transparent; }

/* Intro: image left, copy right (the /residential/ layout). */
.slp__intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.slp__intro--text { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
.slp__intro-pic { position: relative; }
.slp__intro-pic img { display: block; width: 100%; height: auto; border-radius: 20px; }
.slp__intro-badge { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .35); }
.slp__intro-badge b { font-size: 22px; color: var(--ink); line-height: 1; }
.slp__intro-badge span { font-size: 13px; color: var(--muted); line-height: 1.2; }

.slp__checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.slp__checks--grid { margin: 0; grid-template-columns: 1fr; gap: 12px; }
.slp__checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--text); }
.slp__checks li svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #EAF6E1; stroke: var(--green-dk); stroke-width: 3; margin-top: 1px; }
.slp__checks li b { color: var(--ink); font-weight: 600; }

/* Service cards (four, with photos) */
.slp__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.slp a.slp__card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.slp a.slp__card:hover { transform: translateY(-3px); border-color: #BBD7F0; box-shadow: 0 24px 48px -30px rgba(21, 118, 197, .55); }
.slp__card-pic { overflow: hidden; }
.slp__card-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.slp a.slp__card:hover .slp__card-pic img { transform: scale(1.04); }
.slp__card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.slp__card-body p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }
.slp .slp__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--green-dk); }
.slp .slp__more svg { transition: transform .2s ease; }
.slp a.slp__card:hover .slp__more svg { transform: translateX(3px); }

/* Steps */
.slp__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: none; }
.slp__step { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 28px 26px; }
.slp__section--alt .slp__step { border-color: transparent; }
.slp__step-num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; margin-bottom: 16px; }
.slp__step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Areas section: text + side card */
.slp__areas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 40px; align-items: start; }
.slp .slp__h3--nearby { margin-top: 26px; margin-bottom: 12px; font-size: 16px; }
.slp .slp__textlink-row { margin: 18px 0 0; }
.slp .slp__textlink { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 700; text-decoration: none; }
.slp .slp__textlink:hover { color: var(--blue-dk); }
.slp__side { position: relative; overflow: hidden; background: linear-gradient(160deg, #1A82D4 0%, #1576C5 50%, #0E5EA3 100%); color: #fff; border-radius: 20px; padding: 28px 28px 26px; }
.slp__side::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 200px; height: 200px; border-radius: 50%; background: rgba(117, 190, 65, .18); pointer-events: none; }
.slp__side > * { position: relative; }
.slp .slp__side h3 { font-size: 21px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.25; }
.slp .slp__side p { font-size: 14.5px; color: #DCEBF8; margin: 0 0 10px; }
.slp .slp__side-line { display: flex; align-items: center; gap: 8px; }
.slp .slp__side-line svg { stroke: #B8E08F; }
.slp .slp__side a { color: #fff; font-weight: 700; text-decoration: none; }
.slp .slp__side a.slp__btn { margin-top: 12px; }

/* Reviews */
.slp__quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.slp__quotes--one { grid-template-columns: minmax(0, 720px); justify-content: center; }
.slp .slp__quote { margin: 0; background: var(--surface); border-radius: 20px; padding: 28px 30px; }
.slp__section--alt .slp__quote { background: #fff; }
.slp .slp__stars { display: block; color: #F5B301; letter-spacing: .1em; font-size: 16px; margin-bottom: 12px; }
.slp .slp__quote p { font-size: 16px; line-height: 1.65; color: var(--text); margin: 0 0 16px; }
.slp .slp__quote cite { display: block; font-style: normal; font-size: 14px; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line); }
.slp .slp__quote cite b { color: var(--ink); font-weight: 600; }

/* FAQ: native details, no JS */
.slp__faq { display: grid; gap: 10px; max-width: 880px; margin-inline: auto; }
.slp__faq-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.slp__faq-item summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-weight: 600; color: var(--ink); position: relative; }
.slp__faq-item summary::-webkit-details-marker { display: none; }
.slp__faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--green-dk); transition: transform .15s ease; }
.slp__faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.slp__faq-item p { margin: 0; padding: 0 22px 20px; color: var(--muted); line-height: 1.65; }

/* Hub: city grid */
.slp__cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.slp a.slp__city { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 20px 18px; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.slp a.slp__city:hover { transform: translateY(-2px); border-color: #BBD7F0; box-shadow: 0 22px 44px -30px rgba(21, 118, 197, .55); }
.slp .slp__city-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: #EAF3FB; display: flex; align-items: center; justify-content: center; }
.slp .slp__city-ic svg { width: 18px; height: 18px; stroke: var(--blue); }
.slp .slp__city-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.slp .slp__city-body b { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.slp .slp__city-body b small { font-size: 12px; font-weight: 600; color: var(--green-dk); }
.slp .slp__city-body > span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.slp .slp__city-body em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--green-dk); margin-top: 2px; }
.slp a.slp__city--hq { background: var(--blue); border-color: var(--blue); }
.slp a.slp__city--hq .slp__city-ic { background: rgba(255, 255, 255, .18); }
.slp a.slp__city--hq .slp__city-ic svg { stroke: #fff; fill: #fff; }
.slp a.slp__city--hq .slp__city-body b, .slp a.slp__city--hq .slp__city-body b small { color: #fff; }
.slp a.slp__city--hq .slp__city-body > span { color: #DCEBF8; }
.slp a.slp__city--hq .slp__city-body em { color: #B8E08F; }

/* Form block: the site's global widget rendered bare, centred at the same width the contact page uses. */
.slp__section--form { scroll-margin-top: 40px; }
.slp__form { max-width: 1100px; margin-inline: auto; }

/* Admin-only notice */
.slp__notice { background: #fff4e5; border-left: 4px solid var(--green); padding: 16px 20px; margin-block: 40px; }
.slp__wrap--fallback { padding-block: 60px 80px; }

/* Responsive */
@media (max-width: 1200px) {
	.slp__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.slp__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.slp { --fs-h1: 40px; --fs-h2: 30px; --section-y: 80px; }
	.slp__hero { grid-template-columns: 1fr; padding: 44px 34px; }
	.slp__intro, .slp__intro--text, .slp__areas { grid-template-columns: 1fr; }
	.slp__steps, .slp__quotes { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.slp { --fs-h1: 34px; --fs-h2: 27px; --fs-h3: 19px; --section-y: 60px; }
	.slp__hero { padding: 34px 22px; border-radius: 20px; }
	.slp__cards, .slp__cities { grid-template-columns: 1fr; }
	.slp .slp__sub { font-size: 16px; }
	.slp__trust { flex-direction: column; gap: 10px; }
	.slp__intro-badge { left: 12px; bottom: 12px; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.slp * { transition: none !important; }
}