/* ============================================================
   Red Rock Lighting
   Palette: desert night + warm lamp glow + red rock accent
   ============================================================ */

:root {
	/* 60 dominant */
	--night:      #0A0D13;
	--night-2:    #10141D;
	--night-3:    #171C28;
	--night-4:    #212838;

	/* 30 secondary */
	--cream:      #F6F2EC;
	--text:       #E9E6E1;
	--muted:      #97A0B0;
	--muted-glass: #AFB7C4;
	--muted-2:    #7C8699;

	/* 10 accent */
	--rock:       #B8231B; /* logo red (was #C2502F sedona orange), 2026-09-21 new logo */
	--rock-2:     #F0665B; /* AA on every night surface incl. --night-4 (4.74:1) */
	--rock-hi:    #CF2E24;
	--glow:       #FFD9A3;
	--glow-soft:  #FFE9C7;

	--glass:      rgba(11,15,23,.58);
	--glass-hi:   rgba(20,26,38,.70);
	--glass-brd:  rgba(255,255,255,.13);
	--glass-brd-hi: rgba(255,255,255,.30);
	--glass-blur: blur(22px) saturate(150%);

	--line:       rgba(255,255,255,.10);
	--line-2:     rgba(255,255,255,.06);

	--r-sm: 6px;
	--r:    12px;
	--r-lg: 20px;

	--wrap: 1350px;
	--gut:  16px;

	--ff-head: "DM Serif Display", Georgia, serif;
	--ff-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--night);
	color: var(--text);
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--ff-head); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; margin: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
@media (min-width: 900px) { :root { --gut: 32px; } }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--rock); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* focus: never inherit a theme's pink default */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--glow);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

/* ---------- type helpers ---------- */
.eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	color: var(--muted); margin: 0 0 18px;
}
.eyebrow--rock { color: var(--rock-2); }
.eyebrow--glow { color: var(--glow); }

.section-title { font-size: clamp(30px, 4.4vw, 52px); color: var(--cream); }
.section-title em { font-style: italic; color: var(--glow); }

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head--center { margin-inline: auto; text-align: center; }

/* heading left, CTA right, so the right side is not dead space */
.section-head--split {
	max-width: none;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.section-head--split .section-head__text { flex: 1 1 auto; min-width: 0; }
.section-head--split .section-title { max-width: none; }
.section-head__cta { flex: 0 0 auto; margin-bottom: 6px; }

/* Below this the CTA squeezes the heading onto a third line, so stack instead. */
@media (max-width: 1300px) {
	.section-head--split { flex-direction: column; align-items: flex-start; gap: 28px; }
}
@media (max-width: 680px) {
	.section-head__cta { width: 100%; }
}
.section-lede { color: var(--muted); font-size: 17px; margin-top: 18px; }
.section-head--center .section-lede { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 26px;
	border: 1px solid transparent; border-radius: 999px;
	font-weight: 700; font-size: 15px; letter-spacing: .04em;
	cursor: pointer; text-align: center;
	transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.btn--sm  { padding: 10px 20px; font-size: 14px; }
.btn--lg  { padding: 17px 34px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
	background: var(--rock); color: #fff;
	box-shadow: 0 8px 24px -10px rgba(184,35,27,.9);
}
.btn--primary:hover,
.btn--primary:focus { background: var(--rock-hi); color: #fff; transform: translateY(-2px); }

.btn--glass {
	background: rgba(255,255,255,.08); color: var(--cream);
	border-color: rgba(255,255,255,.28); backdrop-filter: blur(8px);
}
.btn--glass:hover, .btn--glass:focus { background: rgba(255,255,255,.16); color: var(--cream); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--cream); border-color: var(--line); }
.btn--ghost:hover, .btn--ghost:focus { background: rgba(255,255,255,.07); color: var(--cream); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	padding: 18px 0;
	transition: background-color .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
	border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
	background: rgba(10,13,19,.92);
	backdrop-filter: blur(14px);
	padding: 11px 0;
	border-bottom-color: var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; }

.brand { display: flex; align-items: center; gap: 11px; color: var(--rock-2); flex-shrink: 0; }
.brand__mark { display: block; filter: drop-shadow(0 0 10px rgba(255,217,163,.35)); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--ff-body); font-weight: 700; font-size: 17px; letter-spacing: .13em; color: var(--cream); }
.brand__sub  { font-family: var(--ff-body); font-weight: 500; font-size: 10.5px; letter-spacing: .34em; color: var(--glow); margin-top: 4px; }

.nav { margin-left: auto; }
.nav__list { display: flex; gap: 30px; }
.nav__list a {
	font-size: 14.5px; font-weight: 500; color: var(--text); opacity: .82;
	position: relative; padding: 6px 0; transition: opacity .2s;
}
.nav__list a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
	background: var(--glow); transition: right .28s var(--ease);
}
.nav__list a:hover { opacity: 1; }
.nav__list a:hover::after { right: 0; }

.site-header__cta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.phone-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 700; font-size: 15px; color: var(--cream); white-space: nowrap;
}
.phone-link:hover { color: var(--glow); }

.nav-toggle {
	display: none; background: none; border: 0; cursor: pointer;
	width: 44px; height: 44px; padding: 10px; margin-left: auto;
}
.nav-toggle span { display: block; height: 2px; background: var(--cream); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
	position: fixed; inset: 64px 0 auto 0; z-index: 99;
	background: rgba(10,13,19,.98); backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
	padding: 20px var(--gut) 28px;
	display: flex; flex-direction: column; gap: 12px;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__list a { display: block; padding: 13px 0; font-size: 17px; font-weight: 500; border-bottom: 1px solid var(--line-2); }
.mobile-nav .btn { margin-top: 8px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex; align-items: flex-end;
	padding: 140px 0 96px;
	overflow: hidden;
	isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }

/* Two-layer scrim: a vertical wash for the copy block plus a global darkener,
   so the brightest patch of the photo still clears AA behind white text. */
.hero__scrim {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(to top, rgba(6,8,12,.96) 0%, rgba(6,8,12,.86) 26%, rgba(6,8,12,.45) 58%, rgba(6,8,12,.30) 100%),
		linear-gradient(to right, rgba(6,8,12,.80) 0%, rgba(6,8,12,.30) 55%, rgba(6,8,12,.12) 100%);
}

.hero__inner { position: relative; }
.hero__inner > * { max-width: 880px; }
.hero__title {
	font-size: clamp(38px, 6.1vw, 74px);
	line-height: 1.04;
	max-width: 15em;
	letter-spacing: -.02em;
	color: #fff;
	margin-bottom: 26px;
	text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.hero__title em { font-style: italic; color: var(--glow); }
.hero__sub {
	font-size: clamp(16px, 1.6vw, 19px);
	color: rgba(255,255,255,.88);
	max-width: 56ch;
	margin-bottom: 34px;
	text-shadow: 0 1px 14px rgba(0,0,0,.7);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }

.hero__trust {
	display: flex; flex-wrap: wrap; gap: 14px 30px;
	padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18);
}
.hero__trust li {
	display: flex; align-items: center; gap: 9px;
	font-size: 13.5px; font-weight: 500; letter-spacing: .03em;
	color: rgba(255,255,255,.92);
}
.hero__trust svg { color: var(--glow); flex-shrink: 0; }

.scroll-cue {
	position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
	width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 14px;
	display: grid; place-items: start center; padding-top: 7px; z-index: 2;
}
.scroll-cue span { width: 3px; height: 8px; border-radius: 2px; background: var(--glow); animation: cue 1.9s var(--ease) infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(13px); opacity: .1; } }

/* ============================================================
   COLOR DEMO
   ============================================================ */
.colors { padding: 110px 0; background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }

.demo { display: grid; grid-template-columns: 1.55fr .95fr; gap: 44px; align-items: center; }

.demo__stage {
	position: relative; border-radius: var(--r-lg); overflow: hidden;
	aspect-ratio: 3 / 2; background: var(--night-3);
	box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px var(--line);
}
.demo__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 68%;
	opacity: 0; transition: opacity .65s var(--ease);
}
.demo__img.is-active { opacity: 1; }
.demo__badge {
	position: absolute; left: 16px; bottom: 16px; z-index: 2;
	background: rgba(6,8,12,.72); backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
	padding: 7px 15px; font-size: 12px; font-weight: 500; letter-spacing: .05em;
	color: rgba(255,255,255,.9);
}

.demo__controls { display: flex; flex-direction: column; gap: 12px; }
.swatch {
	display: flex; align-items: center; gap: 14px;
	background: var(--night-3); border: 1px solid var(--line);
	border-radius: var(--r); padding: 15px 18px; cursor: pointer; width: 100%;
	transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.swatch:hover { border-color: rgba(255,255,255,.26); transform: translateX(3px); }
.swatch.is-active { border-color: var(--sw); background: var(--night-4); }
.swatch__dot {
	width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
	background: var(--sw); box-shadow: 0 0 0 4px rgba(255,255,255,.05), 0 0 18px -2px var(--sw);
}
.swatch__label { font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.swatch.is-active .swatch__label { color: #fff; }
.demo__note { color: var(--muted); font-size: 14px; margin: 14px 0 0; line-height: 1.6; }

/* ============================================================
   STAT BAND
   ============================================================ */
.band { background: var(--night-3); border-block: 1px solid var(--line); }
.band__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.band__item { padding: 42px 26px; text-align: center; border-left: 1px solid var(--line-2); }
.band__item:first-child { border-left: 0; }
.band__num {
	display: block; font-family: var(--ff-head); font-size: clamp(34px, 4vw, 48px);
	color: var(--glow); line-height: 1; margin-bottom: 10px;
}
.band__label { display: block; font-size: 13.5px; color: var(--muted); letter-spacing: .02em; }

/* ============================================================
   GLASS  (scoped: the WHY / BENTO section only)
   Frosted panels only read as glass when something luminous sits
   behind them, so the section carries its own light bloom.
   ============================================================ */
.glow-field { position: relative; isolation: isolate; overflow: hidden; }
.glow-field::before {
	content: ""; position: absolute; inset: -12% -6%; z-index: -1; pointer-events: none;
	background:
		radial-gradient(38% 44% at 16% 20%, rgba(255, 217, 163, .17), transparent 70%),
		radial-gradient(34% 42% at 84% 30%, rgba(184, 35, 27, .22), transparent 72%),
		radial-gradient(42% 46% at 52% 92%, rgba(74, 122, 204, .14), transparent 74%);
	filter: blur(14px);
}

.glass {
	position: relative;
	background: var(--glass);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-brd);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.16),
		0 24px 48px -30px rgba(0,0,0,.9);
	transition: background-color .3s var(--ease), border-color .3s var(--ease),
	            transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* specular sheen across the top-left corner */
.glass::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 26%, transparent 52%);
}
.glass > * { position: relative; z-index: 1; }

.glass:hover {
	background: var(--glass-hi);
	border-color: var(--glass-brd-hi);
	transform: translateY(-3px);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.22),
		0 30px 60px -30px rgba(0,0,0,.95);
}

/* Firefox and older Safari without backdrop-filter get a solid panel
   rather than a washed-out translucent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass { background: var(--night-3); }
	.glass:hover { background: var(--night-4); }
}

/* ============================================================
   WHY / BENTO
   ============================================================ */
.why { padding: 110px 0; background: var(--night-2); }

/* explicit areas: never rely on implicit auto-placement */
.bento {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas:
		"a c c"
		"b c c"
		"d d e";
}
.bento__cell--a { grid-area: a; }
.bento__cell--b { grid-area: b; }
.bento__cell--c { grid-area: c; }
.bento__cell--d { grid-area: d; }
.bento__cell--e { grid-area: e; }

.bento__cell {
	border-radius: var(--r-lg); padding: 34px;
	display: flex; flex-direction: column; justify-content: center;
	min-width: 0;
}
.bento__cell h3 { font-size: 24px; color: var(--cream); margin-bottom: 12px; }
.bento__cell p { color: var(--muted-glass); font-size: 15.5px; margin: 0; }

.bento__cell--photo { padding: 0; overflow: hidden; min-height: 320px; background: var(--night-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.bento__cell--photo::after { display: none; }
.bento__cell--photo img { width: 100%; height: 100%; object-fit: cover; }
.bento__caption {
	position: absolute; left: 20px; bottom: 18px;
	background: rgba(6,8,12,.72); backdrop-filter: blur(6px);
	border-radius: 999px; padding: 7px 15px; font-size: 12.5px; letter-spacing: .04em;
	color: rgba(255,255,255,.92);
}

/* ============================================================
   SERVICES
   ============================================================ */
.services { padding: 110px 0; background: var(--night); }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.svc {
	position: relative; padding: 38px 34px 34px;
	background: linear-gradient(160deg, var(--night-3) 0%, var(--night-2) 100%);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	overflow: hidden; transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.svc::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
	background: linear-gradient(180deg, var(--rock) 0%, var(--glow) 100%);
	transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
}
.svc:hover { border-color: rgba(255,255,255,.2); transform: translateY(-3px); }
.svc:hover::before { transform: scaleY(1); }
.svc__num {
	display: block; font-family: var(--ff-head); font-size: 15px;
	color: var(--rock-2); letter-spacing: .1em; margin-bottom: 14px;
}
.svc h3 { font-size: 27px; color: var(--cream); margin-bottom: 12px; }
.svc p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery { padding: 110px 0; background: var(--night-2); }
.gal {
	display: grid; gap: 14px;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 300px;
	padding-inline: var(--gut);
	max-width: var(--wrap); margin-inline: auto;
}
.gal__item { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--night-3); }
.gal__item--wide { grid-column: span 2; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gal__item:hover img { transform: scale(1.05); }

/* ============================================================
   OFFER
   ============================================================ */
.offer { padding: 110px 0; background: var(--night); position: relative; overflow: hidden; }
.offer::before {
	content: ""; position: absolute; top: -20%; right: -10%;
	width: 620px; height: 620px; border-radius: 50%;
	background: radial-gradient(circle, rgba(184,35,27,.22) 0%, transparent 68%);
	pointer-events: none;
}
.offer__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.offer__copy .section-title { margin-bottom: 22px; }
.offer__copy p { color: var(--muted); font-size: 16.5px; max-width: 52ch; }
.offer__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px var(--line); }
.offer__media img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }

.ticks { margin: 26px 0 32px; display: flex; flex-direction: column; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--text); }
.ticks li::before {
	content: ""; position: absolute; left: 0; top: 7px;
	width: 16px; height: 9px; border-left: 2px solid var(--glow); border-bottom: 2px solid var(--glow);
	transform: rotate(-45deg);
}

/* ============================================================
   PROCESS
   ============================================================ */
.process {
	position: relative; isolation: isolate; overflow: hidden;
	padding: 110px 0; background: var(--night-2);
}
.process__media { position: absolute; inset: 0; z-index: -2; }
.process__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
/* Heavy scrim: the step copy is small, so it needs the background well below
   the point where --muted would drop under AA. */
.process__scrim {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(8,11,17,.95) 0%, rgba(8,11,17,.86) 42%, rgba(8,11,17,.96) 100%),
		radial-gradient(70% 60% at 50% 40%, rgba(8,11,17,.35), transparent 70%);
}
.process .step__n { background: rgba(20,26,38,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.process .step { border-top-color: rgba(255,255,255,.22); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.step { position: relative; padding-top: 26px; border-top: 1px solid var(--line); }
.step__n {
	display: grid; place-items: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--night-4); border: 1px solid rgba(224,113,77,.4);
	font-family: var(--ff-head); font-size: 19px; color: var(--glow);
	margin-bottom: 18px;
}
.step h3 { font-size: 21px; color: var(--cream); margin-bottom: 10px; }
.step p { color: var(--muted-glass); font-size: 15px; margin: 0; }

/* ============================================================
   REVIEWS (placeholder state)
   ============================================================ */
.reviews { padding: 110px 0; background: var(--night); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rev {
	position: relative; padding: 32px;
	background: var(--night-3); border: 1px dashed rgba(255,255,255,.18);
	border-radius: var(--r-lg);
}
.rev__flag {
	position: absolute; top: 14px; right: 14px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--night); background: var(--glow); border-radius: 999px; padding: 4px 11px;
}
.rev__stars { color: rgba(255,217,163,.35); font-size: 17px; letter-spacing: 3px; margin-bottom: 14px; }
.rev__text { color: var(--muted-2); font-size: 15px; font-style: italic; }
.rev__who { color: var(--muted-2); font-size: 13.5px; font-weight: 700; margin: 0; }
.rev-note {
	margin: 28px 0 0; text-align: center; font-size: 13.5px; color: var(--muted-2);
	border-top: 1px solid var(--line-2); padding-top: 20px;
}

/* ============================================================
   QUOTE
   ============================================================ */
.quote { padding: 110px 0; background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%); }
.quote__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.quote__copy .section-title { margin-bottom: 22px; }
.quote__copy p { color: var(--muted); font-size: 16.5px; max-width: 46ch; }
.quote__phone {
	display: inline-flex; flex-direction: column; gap: 3px;
	margin: 26px 0 8px; padding: 16px 24px;
	background: var(--night-3); border: 1px solid var(--line); border-radius: var(--r);
	transition: border-color .25s var(--ease);
}
.quote__phone:hover { border-color: var(--glow); }
.quote__phone span { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.quote__phone strong { font-family: var(--ff-head); font-size: 27px; color: var(--glow); }
.ticks--light li { color: var(--muted); font-size: 15px; }

.quote__form {
	background: var(--night-3); border: 1px solid var(--line);
	border-radius: var(--r-lg); padding: 34px;
}
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label {
	display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.field input, .field textarea {
	width: 100%; padding: 13px 16px;
	background: var(--night); border: 1px solid var(--line); border-radius: var(--r-sm);
	color: var(--text); font-family: var(--ff-body); font-size: 16px;
	transition: border-color .2s var(--ease);
}
.field input::placeholder { color: var(--muted-2); }
.field input:focus, .field textarea:focus { border-color: var(--glow); }
.field textarea { resize: vertical; }
.form-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted-2); text-align: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	position: relative; isolation: isolate; overflow: hidden;
	background: #05070B; padding-top: 88px;
}

/* A lit roofline across the top edge: the product itself, used as the divider. */
.site-footer::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
	background: repeating-linear-gradient(to right,
		var(--glow) 0 4px, rgba(255, 217, 163, .10) 4px 22px);
	box-shadow: 0 0 4px rgba(255, 217, 163, .95), 0 0 20px rgba(255, 217, 163, .55);
}
/* warm light spilling down off that edge */
.site-footer::after {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 320px;
	z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 217, 163, .085) 0%, rgba(255, 217, 163, .02) 45%, transparent 100%);
}

.site-footer__ghost {
	position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
	font-family: var(--ff-head); font-size: clamp(110px, 17vw, 260px);
	line-height: .78; white-space: nowrap; letter-spacing: -.04em;
	color: rgba(255, 255, 255, .028);
	z-index: -1; pointer-events: none; user-select: none;
}

.site-footer__top {
	display: grid; grid-template-columns: 1.7fr 1fr 1.1fr 1.15fr; gap: 56px;
	padding-bottom: 64px;
}
.brand--footer { margin-bottom: 20px; }
.site-footer__tag { font-family: var(--ff-head); font-size: 22px; color: var(--glow); margin-bottom: 12px; }
.site-footer__blurb { color: var(--muted); font-size: 14.5px; max-width: 38ch; }

.site-footer__col h3 {
	font-family: var(--ff-body); font-size: 12px; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: var(--cream);
	margin-bottom: 20px; padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
.site-footer__col > ul { display: flex; flex-direction: column; gap: 11px; }
.site-footer__col a:not(.btn) { color: var(--muted); font-size: 14.5px; transition: color .2s, padding-left .2s var(--ease); }
.site-footer__col > ul a:hover { color: var(--glow); padding-left: 5px; }

/* service area as chips rather than a flat list */
.area-chips { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; }
.area-chips li {
	padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
	font-size: 13px; color: var(--muted); letter-spacing: .02em;
	transition: border-color .25s var(--ease), color .25s var(--ease);
}
.area-chips li:hover { border-color: rgba(255, 217, 163, .5); color: var(--glow); }
.site-footer__areanote { margin-top: 16px; font-size: 13px; color: var(--muted-2); }

.site-footer__contact { display: flex; flex-direction: column; align-items: flex-start; }
.footer-phone {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--ff-head); font-size: 25px; color: var(--cream) !important;
	margin-bottom: 8px;
}
.footer-phone svg { color: var(--glow); flex-shrink: 0; }
.footer-phone:hover { color: var(--glow) !important; }
.footer-mail { font-size: 14.5px; margin-bottom: 22px; word-break: break-all; }
.site-footer__contact .btn { align-self: stretch; }

.footer-badges { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.footer-badges li {
	display: flex; align-items: center; gap: 9px;
	font-size: 13px; color: var(--muted-2);
}
.footer-badges svg { color: var(--glow); opacity: .75; flex-shrink: 0; }

.social { display: flex; gap: 12px; margin-top: 24px; }
.social a {
	display: grid; place-items: center; width: 42px; height: 42px;
	border: 1px solid var(--line); border-radius: 50%; color: var(--muted);
	transition: color .2s, border-color .2s, transform .2s var(--ease), background-color .2s;
}
.social a:hover {
	color: var(--night); background: var(--glow); border-color: var(--glow);
	transform: translateY(-3px);
}

.site-footer__bottom {
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	padding-block: 24px; border-top: 1px solid var(--line-2);
}
.site-footer__bottom p { margin: 0; font-size: 13px; color: var(--muted-2); }

/* sticky call button, mobile only */
.call-fab {
	position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
	display: none; align-items: center; justify-content: center; gap: 10px;
	padding: 15px; border-radius: 999px;
	background: var(--rock); color: #fff; font-weight: 700; letter-spacing: .05em;
	box-shadow: 0 12px 30px -8px rgba(0,0,0,.8);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
	.demo { grid-template-columns: 1fr; gap: 28px; }
	.offer__inner, .quote__inner { grid-template-columns: 1fr; gap: 40px; }
	.offer__media img { aspect-ratio: 16/10; }
	.steps { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
	.site-footer__top { grid-template-columns: 1fr 1fr; gap: 44px; }
	.site-footer__ghost { font-size: 22vw; }
}

@media (max-width: 1100px) {
	.nav, .site-header__cta { display: none; }
	.nav-toggle { display: block; }
}
@media (max-width: 1300px) { .nav__list { gap: 22px; } }

@media (max-width: 900px) {
	.nav, .site-header__cta { display: none; }
	.nav-toggle { display: block; }
	.bento {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"c c"
			"a b"
			"d e";
	}
	.bento__cell--photo { min-height: 260px; }
	.band__inner { grid-template-columns: 1fr 1fr; }
	.band__item { border-left: 0; border-top: 1px solid var(--line-2); }
	.band__item:nth-child(-n+2) { border-top: 0; }
	.gal { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
	.rev-grid { grid-template-columns: 1fr; }
	.call-fab { display: flex; }
	body { padding-bottom: 76px; }
}

@media (max-width: 680px) {
	body { font-size: 16px; }
	.hero { min-height: 92svh; padding: 118px 0 72px; align-items: center; }
	.hero__scrim {
		background: linear-gradient(to top, rgba(6,8,12,.96) 0%, rgba(6,8,12,.80) 45%, rgba(6,8,12,.55) 100%);
	}
	.hero__actions { flex-direction: column; align-items: stretch; }
	.hero__actions .btn { width: 100%; }
	.hero__trust { gap: 11px 20px; }
	.hero__trust li { font-size: 12.5px; }
	.scroll-cue { display: none; }

	.colors, .why, .services, .gallery, .offer, .process, .reviews, .quote { padding: 72px 0; }
	.section-head { margin-bottom: 38px; }

	.bento { grid-template-columns: 1fr; grid-template-areas: "c" "a" "b" "d" "e"; }
	.bento__cell { padding: 26px; }
	.svc-grid { grid-template-columns: 1fr; }
	.svc { padding: 30px 26px; }
	.steps { grid-template-columns: 1fr; }
	.gal { grid-template-columns: 1fr; grid-auto-rows: 230px; }
	.gal__item--wide { grid-column: span 1; }
	.quote__form { padding: 24px; }
	.field-row { grid-template-columns: 1fr; gap: 0; }
	.site-footer__top { grid-template-columns: 1fr; gap: 36px; }
	.site-footer { padding-top: 64px; }
	.site-footer__ghost { font-size: 30vw; bottom: -6px; }
	.site-footer__bottom { flex-direction: column; gap: 6px; }
}

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

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.will-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.will-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   INNER PAGES
   ============================================================ */
.inner-hero { padding: 180px 0 60px; background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%); border-bottom: 1px solid var(--line); }
.inner-body { padding: 64px 0 96px; }
.inner-body .wrap { max-width: 820px; }
.inner-body p { color: var(--muted); }
.inner-body h2 { font-size: 32px; color: var(--cream); margin: 40px 0 14px; }
.inner-body h3 { font-size: 23px; color: var(--cream); margin: 28px 0 10px; }
.inner-body a { color: var(--glow); text-decoration: underline; }

/* ============================================================
   SERVICE PAGE
   ============================================================ */

/* hero: the eyebrow is the H1 here, the big line below it is not a heading */
.hero--service { min-height: 78svh; padding: 168px 0 84px; align-items: center; }
.eyebrow--h1 {
	font-family: var(--ff-body);
	font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	color: var(--glow); margin: 0 0 18px; line-height: 1.5;
}
.hero__title--service {
	font-family: var(--ff-head); font-weight: 400;
	font-size: clamp(34px, 5.2vw, 62px); line-height: 1.06; letter-spacing: -.02em;
	color: #fff; margin-bottom: 24px; max-width: 17em;
	text-shadow: 0 2px 30px rgba(0,0,0,.6);
}

/* overview */
.svc-overview { padding: 104px 0; background: var(--night); }
.svc-overview__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: stretch; }
.svc-overview__copy .section-title { margin-bottom: 22px; }
.svc-overview__copy p { color: var(--muted); font-size: 16.5px; max-width: 56ch; }
.svc-overview__copy .btn { margin-top: 14px; }
/* The panel is stretched to the copy column's height and its items are distributed,
   so the right side does not end in a block of dead space. */
.svc-overview__list {
	margin: 0; padding: 36px 32px;
	background: var(--night-3); border: 1px solid var(--line); border-radius: var(--r-lg);
	display: flex; flex-direction: column; justify-content: space-evenly;
	gap: 14px;
}
.svc-overview__list li { padding-block: 2px; }

/* the system: numbered glass cards */
.svc-system { padding: 104px 0; background: var(--night-2); }
/* alternating photo / text, so this section does not read like the use-case grid */
.zig-list { display: flex; flex-direction: column; gap: 72px; }
.zig { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.zig--flip .zig__copy { order: 2; }
.zig--flip .zig__media { order: 1; }
.zig__n {
	display: block; font-family: var(--ff-head); font-size: 15px;
	color: var(--glow); letter-spacing: .1em; margin-bottom: 14px;
}
.zig__copy h3 { font-size: clamp(26px, 2.6vw, 34px); color: var(--cream); margin-bottom: 14px; }
.zig__copy > p { color: var(--muted); font-size: 16px; max-width: 52ch; }
.zig__copy .ticks { margin: 22px 0 0; }
.zig__media {
	margin: 0; border-radius: var(--r-lg); overflow: hidden;
	box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px var(--line);
}
.zig__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* where it goes: definition rows */
.svc-options { padding: 104px 0; background: var(--night); }
.opt-list { margin: 0; display: flex; flex-direction: column; }
.opt-list--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.opt-list--2col .opt { grid-template-columns: 1fr; gap: 6px; }
.opt-list--2col .opt:last-child { border-bottom: 0; }
.opt-list--2col .opt:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.opt {
	display: grid; grid-template-columns: 300px 1fr; gap: 40px;
	padding: 26px 0; border-top: 1px solid var(--line);
	transition: border-color .3s var(--ease);
}
.opt:last-child { border-bottom: 1px solid var(--line); }
.opt:hover { border-top-color: rgba(224,113,77,.5); }
.opt dt { font-family: var(--ff-head); font-size: 24px; color: var(--cream); }
.opt dd { margin: 0; color: var(--muted); font-size: 15.5px; }

/* service area */
.svc-area { padding: 104px 0; background: var(--night-2); }
.area-chips--lg { justify-content: center; gap: 10px !important; max-width: 820px; margin-inline: auto; }
.area-chips--lg li { padding: 10px 20px; font-size: 14.5px; }
.svc-area__note { margin: 26px 0 0; text-align: center; color: var(--muted-2); font-size: 14px; }

/* FAQ */
.faq { padding: 104px 0; background: var(--night); }
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin-inline: auto; }
.faq-item { border-radius: var(--r); overflow: hidden; }
.faq-item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 22px 26px; cursor: pointer; list-style: none;
	font-family: var(--ff-head); font-size: 20px; color: var(--cream);
	position: relative; z-index: 1;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { color: var(--glow); flex-shrink: 0; transition: transform .3s var(--ease); }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item__body { padding: 0 26px 24px; position: relative; z-index: 1; }
.faq-item__body p { margin: 0; color: var(--muted-glass); font-size: 15.5px; max-width: 72ch; }

@media (max-width: 1040px) {
	.svc-overview__inner { grid-template-columns: 1fr; gap: 40px; }
	.sys-grid { grid-template-columns: 1fr; }
	.opt { grid-template-columns: 220px 1fr; gap: 28px; }
}
@media (max-width: 680px) {
	.hero--service { min-height: auto; padding: 132px 0 64px; }
	.svc-overview, .svc-system, .svc-options, .svc-area, .faq { padding: 72px 0; }
	.svc-overview__list { padding: 24px; }
	.sys { padding: 26px; }
	.opt { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
	.opt dt { font-size: 21px; }
	.faq-item summary { padding: 18px 20px; font-size: 18px; }
	.faq-item__body { padding: 0 20px 20px; }
}

/* Service hero copy sits mid-photo, where the homepage's bottom-weighted scrim is
   at its lightest. Extra darkening so the small gold H1 still clears AA. */
.hero--service .hero__scrim {
	background:
		linear-gradient(to top, rgba(6,8,12,.94) 0%, rgba(6,8,12,.88) 40%, rgba(6,8,12,.72) 75%, rgba(6,8,12,.60) 100%),
		linear-gradient(to right, rgba(6,8,12,.86) 0%, rgba(6,8,12,.46) 58%, rgba(6,8,12,.22) 100%);
}


/* ============================================================
   PICKER  (service page use-case switcher)
   Shares its behaviour with the homepage color demo.
   ============================================================ */
.uses { padding: 104px 0; background: var(--night-2); }
.picker { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; }

.picker__stage {
	position: relative; border-radius: var(--r-lg); overflow: hidden;
	aspect-ratio: 4/3; background: var(--night-3);
	box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px var(--line);
}
.picker__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 62%;
	opacity: 0; transition: opacity .6s var(--ease);
}
.picker__img.is-active { opacity: 1; }
.picker__badge {
	position: absolute; left: 16px; bottom: 16px; z-index: 2;
	background: rgba(6,8,12,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
	padding: 7px 15px; font-size: 12px; font-weight: 500; letter-spacing: .05em;
	color: rgba(255,255,255,.9);
}

.picker__controls { display: flex; flex-direction: column; gap: 10px; }
.pick {
	display: flex; align-items: flex-start; gap: 15px;
	padding: 18px 20px; border-radius: var(--r);
	cursor: pointer; width: 100%; text-align: left;
}
.pick__dot {
	width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; margin-top: 6px;
	background: var(--sw); box-shadow: 0 0 0 4px rgba(255,255,255,.05), 0 0 16px -2px var(--sw);
}
.pick__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pick__title { font-weight: 700; font-size: 16px; color: var(--cream); letter-spacing: .01em; }
.pick__body {
	font-size: 14px; line-height: 1.55; color: var(--muted-glass);
	max-height: 0; opacity: 0; overflow: hidden;
	transition: max-height .4s var(--ease), opacity .3s var(--ease);
}
.pick.is-active { border-color: var(--sw); }
.pick.is-active .pick__body { max-height: 120px; opacity: 1; }

@media (max-width: 1040px) {
	.zig, .picker { grid-template-columns: 1fr; gap: 32px; }
	.zig--flip .zig__copy, .zig--flip .zig__media { order: 0; }
	.zig-list { gap: 56px; }
	.opt-list--2col { grid-template-columns: 1fr; column-gap: 0; }
	.opt-list--2col .opt:nth-last-child(-n+2) { border-bottom: 0; }
	.opt-list--2col .opt:last-child { border-bottom: 1px solid var(--line); }
}
@media (max-width: 680px) {
	.uses { padding: 72px 0; }
	.zig-list { gap: 44px; }
	.pick { padding: 15px 16px; }
	/* on a phone the copy is the content, so keep every description open */
	.pick__body { max-height: 140px; opacity: 1; }
}

/* ============================================================
   INNER PAGES (gallery / about / reviews / contact)
   ============================================================ */
.inner-hero--photo {
	position: relative; isolation: isolate; overflow: hidden;
	padding: 176px 0 88px; border-bottom: 0; background: var(--night);
}
.inner-hero--photo .hero__title--service { margin-bottom: 18px; }
.inner-hero__sub { color: rgba(255,255,255,.88); font-size: 17px; max-width: 58ch; margin: 0; }

/* gallery page */
.gallery--page { padding: 88px 0; background: var(--night-2); }
.gal__item { position: relative; }
.gal__item figcaption {
	position: absolute; left: 14px; bottom: 14px; z-index: 2;
	background: rgba(6,8,12,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
	padding: 6px 14px; font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.92);
	opacity: 0; transform: translateY(6px);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.gal__item:hover figcaption, .gal__item:focus-within figcaption { opacity: 1; transform: none; }
@media (hover: none) { .gal__item figcaption { opacity: 1; transform: none; } }

/* about page values */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value { padding: 34px; border-radius: var(--r-lg); }
.value h3 { font-size: 24px; color: var(--cream); margin-bottom: 12px; }
.value p { color: var(--muted-glass); font-size: 15.5px; margin: 0; }

/* owner quote strip */
.quote-strip { padding: 96px 0; background: var(--night); }
.quote-strip blockquote {
	margin: 0; max-width: 900px; margin-inline: auto; text-align: center;
	position: relative; padding-top: 44px;
}
.quote-strip blockquote::before {
	content: "\201C"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
	font-family: var(--ff-head); font-size: 110px; line-height: 1; color: var(--glow); opacity: .28;
}
.quote-strip p {
	font-family: var(--ff-head); font-size: clamp(21px, 2.3vw, 30px); line-height: 1.38;
	color: var(--cream); margin-bottom: 22px;
}
.quote-strip cite {
	font-family: var(--ff-body); font-style: normal; font-size: 13px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--rock-2);
}

/* closing CTA block */
.closing { padding: 96px 0; background: var(--night-2); border-top: 1px solid var(--line); }
.closing__inner { text-align: center; max-width: 720px; margin-inline: auto; }
.closing__inner .section-title { margin-bottom: 16px; }
.closing__inner > p { color: var(--muted); font-size: 16.5px; margin-bottom: 30px; }
.closing__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.closing__actions--center { justify-content: center; margin-top: 8px; }

/* contact page */
.contact-area { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.contact-area h3 {
	font-family: var(--ff-body); font-size: 12px; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--cream); margin-bottom: 16px;
}
.quote__phone--sm { font-size: 19px !important; word-break: break-all; }
.quote__copy .quote__phone { display: flex; margin: 0 0 12px; }

@media (max-width: 1040px) {
	.values { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
	.inner-hero--photo { padding: 128px 0 64px; }
	.gallery--page, .quote-strip, .closing { padding: 64px 0; }
	.value { padding: 26px; }
	.closing__actions { flex-direction: column; }
	.closing__actions .btn { width: 100%; }
}

/* ============================================================
   ABOUT: full-bleed statement + editorial standards list
   ============================================================ */
.statement {
	position: relative; isolation: isolate; overflow: hidden;
	padding: 128px 0; background: var(--night);
}
.statement__media { position: absolute; inset: 0; z-index: -2; }
.statement__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.statement__scrim {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(6,8,12,.90) 0%, rgba(6,8,12,.80) 50%, rgba(6,8,12,.92) 100%),
		linear-gradient(to right, rgba(6,8,12,.72) 0%, rgba(6,8,12,.40) 70%, rgba(6,8,12,.30) 100%);
}
.statement__inner { max-width: 940px; }
.statement__kicker {
	font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	color: var(--glow); margin: 0 0 20px;
}
.statement__text {
	font-family: var(--ff-head); font-weight: 400;
	font-size: clamp(25px, 3.2vw, 44px); line-height: 1.24; letter-spacing: -.015em;
	color: #fff; margin: 0; text-shadow: 0 2px 26px rgba(0,0,0,.6);
}
.statement__text em { font-style: italic; color: var(--glow); }

/* editorial numbered list, deliberately not cards */
.standards { padding: 104px 0; background: var(--night-2); }
.std-list { display: flex; flex-direction: column; }
.std {
	display: grid; grid-template-columns: 150px 1fr; gap: 40px; align-items: start;
	padding: 38px 0; border-top: 1px solid var(--line);
	transition: border-color .3s var(--ease);
}
.std:last-child { border-bottom: 1px solid var(--line); }
.std:hover { border-top-color: rgba(224,113,77,.55); }
.std__n {
	font-family: var(--ff-head); font-size: clamp(44px, 5vw, 68px); line-height: .9;
	color: transparent; -webkit-text-stroke: 1px rgba(224,113,77,.75);
	letter-spacing: -.02em;
}
@supports not ((-webkit-text-stroke: 1px red)) {
	.std__n { color: var(--rock-2); opacity: .6; -webkit-text-stroke: 0; }
}
.std__body h3 { font-size: clamp(24px, 2.4vw, 31px); color: var(--cream); margin-bottom: 12px; }
.std__body p { color: var(--muted); font-size: 16px; margin: 0; max-width: 62ch; }

@media (max-width: 1040px) {
	.std { grid-template-columns: 96px 1fr; gap: 28px; }
}
@media (max-width: 680px) {
	.statement { padding: 80px 0; }
	.standards { padding: 72px 0; }
	.std { grid-template-columns: 1fr; gap: 10px; padding: 30px 0; }
	.std__n { font-size: 40px; }
}

/* ============================================================
   SERVICE AREA page
   ============================================================ */
.area-jump { margin-top: 30px; }
.area-jump li { padding: 0; background: rgba(6,8,12,.55); border-color: rgba(255,255,255,.18); }
.area-chips.area-jump li > a { display: block; padding: 9px 16px; color: rgba(255,255,255,.92); font-size: 14px; }
.area-jump li:hover { border-color: rgba(255, 217, 163, .6); }
.area-chips.area-jump li > a:hover, .area-chips.area-jump li > a:focus-visible { color: var(--glow); }

.cities { padding: 104px 0; background: var(--night-2); }
.city-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.city {
	display: flex; flex-direction: column; padding: 34px;
	background: var(--night-3); border: 1px solid var(--line); border-radius: var(--r-lg);
	scroll-margin-top: 110px;
}
.city:target { border-color: rgba(255, 217, 163, .55); box-shadow: 0 0 0 1px rgba(255, 217, 163, .25), 0 20px 60px -30px rgba(255, 217, 163, .35); }
.city__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.city__region {
	font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rock-2);
}
.city__flag {
	font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--glow); border: 1px solid rgba(255, 217, 163, .4); border-radius: 999px; padding: 4px 11px;
}
.city h3 { font-size: clamp(22px, 2vw, 27px); color: var(--cream); margin-bottom: 12px; }
.city p { color: var(--muted); font-size: 15.5px; margin: 0 0 22px; flex: 1; }
.city__link { color: var(--glow); font-weight: 700; font-size: 15px; align-self: flex-start; }
.city__link span { display: inline-block; transition: transform .2s var(--ease); }
.city__link:hover span { transform: translateX(4px); }

/* chips that link (footer + services page) */
.area-chips li:has(> a) { padding: 0; }
.area-chips li > a, .site-footer__col .area-chips li > a { display: block; padding: 6px 13px; color: inherit; font-size: inherit; }
.area-chips--lg li > a { padding: 10px 20px; }

@media (max-width: 900px) {
	.city-grid { grid-template-columns: 1fr; }
	.cities { padding: 72px 0; }
}
@media (max-width: 680px) {
	.city { padding: 26px; }
}
.site-footer__col .site-footer__areanote a,
.svc-area__note a { font-size: inherit; color: var(--glow); text-decoration: underline; text-underline-offset: 3px; }

/* Service Area installs: copy sits in a panel that matches the photo height exactly,
   so the two columns read as one balanced pair instead of short text beside a tall photo. */
.zig-list--balanced .zig { align-items: stretch; gap: 24px; grid-template-columns: 1fr 1fr; }
.zig-list--balanced .zig__copy {
	display: flex; flex-direction: column; justify-content: center;
	padding: 48px 52px; background: var(--night-3);
	border: 1px solid var(--line); border-radius: var(--r-lg);
}
.zig-list--balanced .zig__copy h3 { font-size: clamp(28px, 2.8vw, 38px); }
.zig-list--balanced .zig__copy > p { font-size: 17px; max-width: none; }
.zig-list--balanced .zig__copy .ticks li { font-size: 16px; }
.zig-list--balanced .zig__media { display: flex; }
.zig-list--balanced .zig__media img { height: 100%; min-height: 100%; aspect-ratio: auto; }
.zig-list--balanced { gap: 24px; }
@media (min-width: 1041px) {
	.zig-list--balanced .zig__media img { aspect-ratio: auto; }
}
@media (max-width: 1040px) {
	.zig-list--balanced .zig { grid-template-columns: 1fr; gap: 0; }
	.zig-list--balanced .zig__copy { border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; order: 0; }
	.zig-list--balanced .zig__media { border-radius: 0 0 var(--r-lg) var(--r-lg); order: 1; }
	.zig-list--balanced .zig__media img { aspect-ratio: 4/3; height: auto; }
}
@media (max-width: 680px) {
	.zig-list--balanced .zig__copy { padding: 30px 26px; }
}

/* Service Area: made for the valley */
.valley { padding: 104px 0; background: var(--night); }
.valley-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.valley-item { padding: 36px 28px 8px; border-left: 1px solid var(--line); }
.valley-item:first-child { border-left: 0; padding-left: 0; }
.valley-item__n {
	display: block; font-family: var(--ff-head); font-size: 44px; line-height: 1;
	color: transparent; -webkit-text-stroke: 1px var(--glow); margin-bottom: 22px;
}
@supports not (-webkit-text-stroke: 1px black) { .valley-item__n { color: var(--glow); } }
.valley-item h3 { font-size: 24px; color: var(--cream); margin-bottom: 12px; }
.valley-item p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* Service Area: year of color */
.year { padding: 104px 0; background: var(--night-2); }
.year-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; position: relative; z-index: 1; }
.year-item {
	display: flex; flex-direction: column; gap: 10px; padding: 22px 20px;
	background: var(--night-3); border: 1px solid var(--line); border-radius: var(--r-md, 14px);
}
.year-item__dots { display: flex; gap: 6px; }
.year-item__dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.year-item__m { font-family: var(--ff-head); font-size: 26px; color: var(--cream); line-height: 1; }
.year-item__label { font-size: 14px; color: var(--muted); line-height: 1.45; }


@media (max-width: 1040px) {
	.valley-grid { grid-template-columns: 1fr 1fr; }
	.valley-item:nth-child(3) { border-left: 0; padding-left: 0; }
	.valley-item:nth-child(n+3) { border-top: 1px solid var(--line); }
	.year-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 680px) {
	.valley, .year { padding: 72px 0; }
	.valley-grid { grid-template-columns: 1fr; }
	.valley-item { border-left: 0; padding: 28px 0 24px; }
	.valley-item + .valley-item { border-top: 1px solid var(--line); }
	.year-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.year-item { padding: 18px 16px; }
}

/* ============================================================
   CITY PAGES
   ============================================================ */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 13px; color: rgba(255,255,255,.72); }
.crumbs a { color: rgba(255,255,255,.88); }
.crumbs a:hover { color: var(--glow); }
.crumbs [aria-current] { color: var(--glow); }
.city-hero__actions { justify-content: flex-start; margin-top: 30px; }

.city-homes { padding: 104px 0; background: var(--night); }
.city-homes__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; }
.city-homes__copy p { color: var(--muted); font-size: 16.5px; margin-top: 18px; }
.city-notes { background: var(--night-3); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 38px; }
.city-notes__title {
	font-family: var(--ff-body); font-size: 12px; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--cream); margin-bottom: 8px;
}
.city-notes__list { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.city-notes__list li { counter-increment: n; position: relative; padding: 22px 0 22px 46px; border-top: 1px solid var(--line); }
.city-notes__list li:first-child { border-top: 0; }
.city-notes__list li::before {
	content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 22px;
	font-family: var(--ff-head); font-size: 22px; line-height: 1; color: var(--glow);
}
.city-notes__list h4 { font-family: var(--ff-head); font-weight: 400; font-size: 21px; color: var(--cream); margin: 0 0 8px; }
.city-notes__list p { color: var(--muted); font-size: 15px; margin: 0; }

.city-process { padding: 104px 0; background: var(--night-2); }
.city-process .step p { color: var(--muted); }
.city-faq__more { text-align: center; margin: 28px 0 0; color: var(--muted); font-size: 15px; position: relative; z-index: 1; }
.city-faq__more a, .city-map__note a { color: var(--glow); text-decoration: underline; text-underline-offset: 3px; }

.city-map { padding: 104px 0; background: var(--night-2); border-top: 1px solid var(--line); }
.city-map__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.city-map__frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--night-3); }
.city-map__frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: invert(.92) hue-rotate(180deg) saturate(.6) brightness(.95); }
.city-map__chips { justify-content: flex-start; margin: 26px 0 0; max-width: none; }
.city-map__note { color: var(--muted); font-size: 15px; margin: 22px 0 0; }

/* nav dropdown (Service Area > cities) */
.nav__list > li { position: relative; }
.nav__list .sub-menu {
	position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 6px);
	min-width: 220px; padding: 10px; list-style: none; margin: 0;
	background: rgba(12,15,22,.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.9);
	opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s var(--ease), visibility 0s linear .18s;
	z-index: 120;
}
.nav__list .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav__list .sub-menu a { display: block; padding: 9px 14px; border-radius: 8px; white-space: nowrap; opacity: .9; }
.nav__list .sub-menu a::after { display: none; }
.nav__list .sub-menu a:hover, .nav__list .sub-menu a:focus-visible { background: rgba(255,255,255,.06); color: var(--glow); opacity: 1; }
.nav__list > .menu-item-has-children > a { padding-right: 14px; }
.nav__list > .menu-item-has-children > a::before {
	content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -5px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}

/* mobile nav: nested cities in two columns, panel scrolls if taller than the screen */
.mobile-nav { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav__list .sub-menu { list-style: none; margin: 0 0 6px; padding: 4px 0 8px 14px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; border-bottom: 1px solid var(--line-2); }
.mobile-nav__list .sub-menu a { padding: 9px 0; font-size: 15px; color: var(--muted); border-bottom: 0; }

@media (max-width: 1040px) {
	.city-homes__inner, .city-map__inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 680px) {
	.city-homes, .city-process, .city-map { padding: 72px 0; }
	.city-notes { padding: 26px 22px; }
	.city-hero__actions { flex-direction: column; }
	.city-hero__actions .btn { width: 100%; }
}

/* Homepage: sections moved from the hidden Services page. Backgrounds set so no two
   neighboring sections share a color (services and reviews are both --night). */
#where-it-goes { background: var(--night-3); border-block: 1px solid var(--line); }
#faq { background: var(--night-2); }
/* 2 column option list: keep text top aligned in each row, and let an odd last item
   span the full width so the grid does not end on an empty cell. */
.opt-list--2col .opt { align-content: start; }
@media (min-width: 1041px) {
	.opt-list--2col .opt:last-child:nth-child(odd) { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
}

/* Homepage "Where it goes": photo background with a dark overlay (Kris 2026-09-17).
   The roofline photo shows through, the scrim keeps --muted body copy above AA. */
#where-it-goes.svc-options--photo { position: relative; isolation: isolate; overflow: hidden; background: var(--night); }
.svc-options--photo .process__media img { object-position: center 40%; }
.svc-options__scrim {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(8,11,17,.90) 0%, rgba(8,11,17,.78) 45%, rgba(8,11,17,.90) 100%);
}
.svc-options--photo .opt { border-top-color: rgba(255,255,255,.14); }
.svc-options--photo .opt dd { color: #B3BAC6; }

/* ---- Logo (client artwork, 2026-09-21). Reversed variant for the night theme:
   black ink -> cream, rock red kept. Source + script: sonic-builds/red-rock-lighting/src-logo/ ---- */
.brand__logo { display: block; height: 84px; width: auto; transition: height .3s var(--ease); }
.site-header.is-stuck .brand__logo { height: 64px; }
.brand--footer .brand__logo { height: 128px; }
@media (max-width: 899px) {
	.brand__logo, .site-header.is-stuck .brand__logo { height: 58px; }
	.brand--footer .brand__logo { height: 104px; }
}

/* ---- Install videos (template-parts/videos.php) ---- */
.vids { padding: 110px 0; background: var(--night-2); border-block: 1px solid var(--line); }
.vids__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.vids__grid { grid-template-columns: 1.35fr .65fr; grid-template-rows: auto auto; }
	.vid--tall { grid-column: 2; grid-row: 1 / span 2; }
}
.vid { margin: 0; position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--night-3); border: 1px solid var(--line); }
.vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid--wide video { aspect-ratio: 16 / 9; }
.vid--tall video { aspect-ratio: 9 / 16; }
@media (min-width: 900px) { .vid--tall video { aspect-ratio: auto; height: 100%; } .vid--tall { min-height: 100%; } }
.vid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 18px;
	background: linear-gradient(0deg, rgba(10,13,19,.94) 0%, rgba(10,13,19,.72) 55%, rgba(10,13,19,0) 100%);
	color: var(--muted-glass); font-size: 14px; line-height: 1.5; }
.vid figcaption b { display: block; color: var(--cream); font-family: var(--ff-head); font-weight: 400; font-size: 21px; margin-bottom: 2px; }
@media (max-width: 899px) { .vids { padding: 72px 0; } .vid--tall video { aspect-ratio: 4 / 5; } }


/* ================================================================
   LIGHT REDESIGN (2026-09-21, kris: "make it look lighter, the logo is a
   bit not visible, redesign it to not look AI made").
   Light warm-white base, charcoal type, full-colour logo, logo red for
   action. Removed: glass panels, colour blooms, ghost watermark, italic
   gold emphasis, gradient/frosted buttons, oversized radii.
   Photo-backed sections (hero, inner photo heroes, process, statement,
   video/gallery captions) keep dark local tokens so text on photos works.
   Previous dark theme: versions/theme-pre-light-redesign-2026-09-21.
   ================================================================ */
:root {
	--night:   #FBF9F6;   /* page */
	--night-2: #F3EFE9;   /* alternate band */
	--night-3: #FFFFFF;   /* cards */
	--night-4: #ECE6DE;   /* card hover / wells */
	--cream:   #1D1B19;   /* headings */
	--text:    #2E2B28;   /* body */
	--muted:   #5E5851;
	--muted-glass: #5E5851;
	--muted-2: #6E675F;
	--glow:    #B8231B;   /* the old warm-glow accent now carries the logo red */
	--glow-soft: #D9C7B4;
	--rock-2:  #A81E17;   /* accent text on light: 6.9:1 on white */
	--line:    #E3DCD2;
	--line-2:  #EEE8E0;
	--r:    8px;
	--r-lg: 10px;
	--ff-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--ff-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { background: var(--night); color: var(--text); }
h1, h2, h3, h4, .section-title, .hero__title { font-family: var(--ff-head); font-weight: 700; letter-spacing: -.015em; }
.section-title em, .hero__title em, .statement__text em { font-style: normal; color: inherit; }
.eyebrow { letter-spacing: .12em; }

/* dark islands: anything sitting on a photo keeps the night tokens */
.hero, .inner-hero--photo, .process, .statement, .vid figcaption, .gal__item figcaption, .bento__cell--photo, .svc-options--photo {
	--cream: #FFFFFF; --text: #F1EEEA; --muted: #D6D1CA; --muted-glass: #DDD8D1; --muted-2: #C9C3BB;
	--glow: #FFD9A3; --rock-2: #F0665B; --line: rgba(255,255,255,.18); --line-2: rgba(255,255,255,.1);
	--night-3: rgba(20,22,26,.72); --night-4: rgba(30,33,38,.8);
	color: var(--text);
}
.hero__title em { color: var(--glow); }

/* header: white bar, full-colour logo */
.site-header { background: #FFFFFF; border-bottom: 1px solid var(--line); padding: 10px 0; }
.site-header.is-stuck { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 6px 0; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(29,27,25,.06); }
.brand__logo { height: 76px; }
.site-header.is-stuck .brand__logo { height: 60px; }
@media (max-width: 899px) { .brand__logo, .site-header.is-stuck .brand__logo { height: 54px; } }
.nav a, .nav__list a { color: var(--text); }
.site-header .nav a:hover { color: var(--rock); }

/* no glass, no bloom */
.glow-field::before, .glow-field::after { display: none !important; }
.glass { background: var(--night-3); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--line); box-shadow: none; }
.glass::after { display: none; }
.glass:hover { background: var(--night-3); border-color: #CFC5B8; transform: none; }
.site-footer__ghost { display: none; }

/* buttons: solid and plain */
.btn { border-radius: 6px; box-shadow: none; }
.btn--primary { background: var(--rock); color: #fff; box-shadow: none; }
.btn--primary:hover, .btn--primary:focus { background: #961B14; color: #fff; transform: none; }
.btn--ghost { color: var(--cream); border-color: #CFC5B8; }
.btn--ghost:hover, .btn--ghost:focus { background: var(--night-2); color: var(--cream); }
.hero .btn--glass, .inner-hero--photo .btn--glass { background: #FFFFFF; color: #1D1B19; border-color: #FFFFFF; backdrop-filter: none; }
.hero .btn--glass:hover, .inner-hero--photo .btn--glass:hover { background: #F3EFE9; color: #1D1B19; transform: none; }

/* bands alternate plainly */
.band, .services, .gallery, .reviews, .quote { background: var(--night); }
.why, .svc-overview, .offer, .faq, .vids { background: var(--night-2); }

/* footer: light, simple */
.site-footer { background: #1D1B19; }
.site-footer { --cream: #FFFFFF; --text: #E9E4DD; --muted: #B9B1A7; --muted-2: #A79F95; --glow: #F0665B; --rock-2: #F0665B; --line: rgba(255,255,255,.14); --line-2: rgba(255,255,255,.08); --night-3: #26231F; color: var(--text); }
.site-footer::before, .site-footer__roofline { opacity: .6; }

/* real Google reviews */
.rev-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: -24px 0 34px; }
.rev-summary__score { font-family: var(--ff-head); font-weight: 800; font-size: 34px; color: var(--cream); line-height: 1; }
.rev-summary__stars, .rev__stars { color: #E8A317; letter-spacing: 2px; }
.rev-summary__txt { font-weight: 600; color: var(--text); }
.rev-summary__link { color: var(--rock-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rev { background: var(--night-3); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; display: flex; flex-direction: column; }
.rev__stars { font-size: 17px; margin-bottom: 12px; }
.rev__text { color: var(--text); font-size: 15.5px; font-style: normal; line-height: 1.65; margin: 0 0 16px; }
.rev__more { flex: 1; }
.rev__more summary { list-style: none; cursor: pointer; }
.rev__more summary::-webkit-details-marker { display: none; }
.rev__more[open] summary { display: none; }
.rev__readmore { color: var(--rock-2); font-weight: 600; white-space: nowrap; }
.rev__who { margin: auto 0 0; font-weight: 700; color: var(--cream); font-size: 14.5px; }
.rev__who span { display: block; font-weight: 400; color: var(--muted-2); font-size: 13px; margin-top: 2px; }
.rev-more-link { text-align: center; margin: 30px 0 0; }
/* light redesign, round 2: plainer surfaces */
.offer::before, .svc::before { display: none; }
.svc { background: var(--night-3); background-image: none; border: 1px solid var(--line); }
.svc:hover { border-color: #CFC5B8; transform: none; }
.demo__stage, .offer__media, .bento__cell--photo, .zig__media, .gal__item { box-shadow: 0 1px 2px rgba(29,27,25,.08), 0 10px 26px -14px rgba(29,27,25,.35) !important; }
.swatch { background: var(--night-3); border: 1px solid var(--line); color: var(--text); }
.swatch:hover { border-color: #CFC5B8; transform: none; }
.swatch.is-active { background: #1D1B19; border-color: #1D1B19; }
.swatch.is-active .swatch__label { color: #FFFFFF; }
.section-head .eyebrow, .eyebrow--rock { color: var(--rock-2); }

/* ================= HOMEPAGE ENHANCEMENTS (2026-09-21, kris) ================= */
/* hero review quote */
.hero__quote { margin: 34px 0 0; padding: 18px 20px; max-width: 520px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; }
.hero__quote-stars { color: #F4B83F; letter-spacing: 2px; font-size: 15px; margin-bottom: 6px; }
.hero__quote blockquote { margin: 0; color: #fff; font-size: 16.5px; line-height: 1.55; }
.hero__quote figcaption { margin-top: 8px; font-size: 13.5px; color: #D6D1CA; }
.hero__quote figcaption a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* trust strip */
.trust { background: #FFFFFF; border-bottom: 1px solid var(--line); }
.trust__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item { display: flex; flex-direction: column; gap: 2px; padding: 22px 24px; border-left: 1px solid var(--line); color: var(--text); text-decoration: none; }
.trust__item:first-child { border-left: 0; padding-left: 0; }
.trust__item b { font-family: var(--ff-head); font-size: 22px; font-weight: 800; color: var(--cream); line-height: 1.2; }
.trust__item span { font-size: 14px; color: var(--muted); }
.trust__stars { color: #E8A317; font-size: 16px; letter-spacing: 1px; margin-left: 4px; }
.trust__item--google:hover span { color: var(--rock-2); }
@media (max-width: 899px) {
	.trust__inner { grid-template-columns: 1fr 1fr; }
	.trust__item { padding: 16px 14px; border-left: 0; border-top: 1px solid var(--line); }
	.trust__item:nth-child(-n+2) { border-top: 0; }
	.trust__item:nth-child(odd) { padding-left: 0; }
	.trust__item b { font-size: 19px; }
}
/* day / night */
.dn { padding: 100px 0; background: var(--night); }
.dn__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dn__shot { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.dn__shot img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 756; object-fit: cover; }
.dn__shot figcaption { position: absolute; left: 14px; top: 14px; }
.dn__shot figcaption span { display: inline-block; background: #FFFFFF; color: #1D1B19; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; border-radius: 4px; }
.dn__shot + .dn__shot figcaption span { background: #1D1B19; color: #FFFFFF; }
@media (max-width: 767px) { .dn { padding: 64px 0; } .dn__pair { grid-template-columns: 1fr; } }
/* services merged with "what it is" and "where it goes" */
.svc-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; margin-bottom: 56px; }
.svc-intro__copy p { color: var(--muted); max-width: 60ch; }
.svc-intro__list { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 28px; margin: 0; }
.svc-sub { font-family: var(--ff-head); font-size: 20px; font-weight: 700; color: var(--cream); margin: 0 0 18px; }
.where { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line); }
.where__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0 0 32px; border: 1px solid var(--line); border-radius: var(--r); background: #FFFFFF; }
.where__list > div { padding: 20px 18px; border-left: 1px solid var(--line); }
.where__list > div:first-child { border-left: 0; }
.where__list dt { font-weight: 700; color: var(--cream); margin-bottom: 6px; }
.where__list dd { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 1040px) {
	.svc-intro { grid-template-columns: 1fr; gap: 28px; }
	.where__list { grid-template-columns: 1fr 1fr; }
	.where__list > div { border-left: 0; border-top: 1px solid var(--line); }
	.where__list > div:nth-child(-n+2) { border-top: 0; }
	.where__list > div:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (max-width: 560px) { .where__list { grid-template-columns: 1fr; } .where__list > div, .where__list > div:nth-child(even) { border-left: 0; } .where__list > div:nth-child(2) { border-top: 1px solid var(--line); } }
/* mobile quick-contact bar (replaces the single call pill) */
.mbar { display: none; }
@media (max-width: 899px) {
	.mbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #FFFFFF; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(29,27,25,.08); }
	.mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; border-radius: 6px; font-weight: 700; font-size: 15.5px; text-decoration: none; }
	.mbar__call { background: #FFFFFF; color: #1D1B19; border: 1.5px solid #1D1B19; }
	.mbar__quote { background: var(--rock); color: #FFFFFF; }
	body { padding-bottom: 76px; }
}
.svc-intro__copy .section-title { margin-bottom: 20px; }

/* ---- Gallery page: filters + lightbox ---- */
.gfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.gfilter__btn { font: inherit; font-weight: 600; font-size: 15px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; color: var(--text); cursor: pointer; }
.gfilter__btn:hover { border-color: #CFC5B8; }
.gfilter__btn.is-active { background: #1D1B19; border-color: #1D1B19; color: #FFFFFF; }
.gal__item[hidden] { display: none !important; }
.gal__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gal__open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gal__open:hover img, .gal__open:focus-visible img { transform: scale(1.03); }
.gal__open:focus-visible { outline: 3px solid var(--rock); outline-offset: -3px; }
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(15,14,13,.9); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; max-width: min(1200px, 94vw); max-height: 82vh; width: auto; height: auto; border-radius: 6px; }
.lightbox figcaption { color: #FFFFFF; font-weight: 600; margin-top: 10px; text-align: center; }
.lightbox__close { position: absolute; top: -46px; right: 0; width: 40px; height: 40px; font-size: 30px; line-height: 1; color: #FFFFFF; background: none; border: 0; cursor: pointer; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; font-size: 40px; color: #FFFFFF; background: rgba(0,0,0,.45); border: 0; border-radius: 6px; cursor: pointer; }
.lightbox__prev { left: -54px; } .lightbox__next { right: -54px; }
@media (max-width: 899px) { .lightbox__prev { left: 6px; } .lightbox__next { right: 6px; } .lightbox__close { top: -44px; } }
.gallery--page .gal { grid-auto-flow: dense; }

/* ---- FAQ, fuller two-column layout (kris 2026-09-21) ---- */
.faq--split .faq__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.faq--split .faq-list { max-width: none; margin: 0; gap: 10px; }
.faq__side { position: sticky; top: 110px; }
.faq__side .section-title { margin: 12px 0 16px; }
.faq__lede { color: var(--muted); font-size: 16.5px; margin: 0 0 26px; max-width: 46ch; }
.faq__photo { margin: 0 0 18px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.faq__photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.faq__ask { background: #FFFFFF; border: 1px solid var(--line); border-left: 4px solid var(--rock); border-radius: var(--r); padding: 22px 24px; }
.faq__ask-t { font-family: var(--ff-head); font-weight: 700; font-size: 20px; color: var(--cream); margin: 0 0 4px; }
.faq__ask-d { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.faq__ask-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.faq--split .faq-item summary { font-size: 17.5px; padding-top: 22px; padding-bottom: 22px; }
.faq--split .faq-item__body p { font-size: 16px; line-height: 1.7; }
@media (max-width: 1040px) {
	.faq--split .faq__grid { grid-template-columns: 1fr; gap: 36px; }
	.faq__side { position: static; }
	.faq__photo { display: none; }
}

/* ---- Hero: fill the right side, show more of the house (kris: "too much empty space") ---- */
.hero { min-height: min(100svh, 860px); padding: 150px 0 88px; align-items: center; }
.hero__scrim { background:
	linear-gradient(to top, rgba(6,8,12,.85) 0%, rgba(6,8,12,.35) 38%, rgba(6,8,12,.18) 100%),
	linear-gradient(to right, rgba(6,8,12,.86) 0%, rgba(6,8,12,.55) 42%, rgba(6,8,12,.08) 78%, rgba(6,8,12,.05) 100%); }
.hero__inner--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: end; }
.hero__inner--split > * { max-width: none; }
.hero__copy .hero__actions { margin-bottom: 0; }
.hero__proof { background: rgba(12,13,15,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 24px; }
.hero__proof .hero__quote { margin: 0; padding: 0; background: none; border: 0; max-width: none; }
.hero__proof .hero__quote blockquote { font-size: 17.5px; }
.hero__facts { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: 8px; }
.hero__facts li { color: #E6E1DA; font-size: 15px; display: flex; gap: 10px; align-items: baseline; }
.hero__facts li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rock-2); transform: translateY(-1px); }
.hero__facts b { color: #FFFFFF; }
.scroll-cue { display: none; }
@media (max-width: 1040px) {
	.hero__inner--split { grid-template-columns: 1fr; gap: 32px; }
	.hero { padding: 130px 0 56px; min-height: 0; }
}
.hero__facts li { display: block; position: relative; padding-left: 18px; }
.hero__facts li::before { position: absolute; left: 0; top: .55em; }
.hero { min-height: min(100svh, 760px); padding-bottom: 72px; }
.hero__proof .hero__quote--2 { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.hero__proof .hero__quote--2 blockquote { font-size: 16px; }

/* ---- HERO option A (kris picked 2026-09-21): bright full-bleed photo, centered copy, keeps scroll cue ---- */
.hero--a { min-height: min(92svh, 820px); padding: 140px 0 96px; align-items: flex-end; justify-content: center; text-align: center; }
.hero--a .hero__media img { object-position: 50% 45%; }
.hero--a .hero__scrim { background: linear-gradient(to top, rgba(10,11,13,.92) 0%, rgba(10,11,13,.66) 34%, rgba(10,11,13,.22) 62%, rgba(10,11,13,0) 80%); }
.hero--a .hero__inner { display: flex; flex-direction: column; align-items: center; }
.hero--a .hero__inner > * { max-width: 920px; }
.hero--a .eyebrow { color: #FFD9A3; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.hero--a .hero__title { font-size: clamp(36px, 5.4vw, 70px); line-height: 1.05; max-width: none; margin: 0 0 20px; }
.hero--a .hero__sub { max-width: 40em; margin: 0 auto 30px; }
.hero--a .hero__actions { justify-content: center; margin-bottom: 20px; }
.hero__rating { color: rgba(255,255,255,.92); font-size: 15px; text-decoration: none; }
.hero__rating b { color: #fff; }
.hero__rating:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero__rating-stars { color: #F4B83F; letter-spacing: 2px; margin-right: 6px; }
.hero--a .scroll-cue { display: grid; bottom: 22px; }
@media (max-width: 767px) {
	.hero--a { min-height: 0; padding: 120px 0 64px; }
	.hero--a .scroll-cue { display: none; }
	.hero--a .hero__actions { width: 100%; }
}
.hero--a .hero__title span { white-space: nowrap; }
.hero--a .hero__l3 { display: block; }
@media (max-width: 767px) {
	.hero--a .hero__title span { display: block; white-space: normal; }
	.hero--a .hero__scrim { background: linear-gradient(to top, rgba(10,11,13,.94) 0%, rgba(10,11,13,.78) 45%, rgba(10,11,13,.45) 75%, rgba(10,11,13,.25) 100%); }
	.hero--a .eyebrow { font-size: 11.5px; }
}
@media (min-width: 768px) {
	.hero--a .hero__scrim { background: linear-gradient(to top, rgba(10,11,13,.93) 0%, rgba(10,11,13,.78) 40%, rgba(10,11,13,.45) 62%, rgba(10,11,13,.08) 85%); }
}
/* eyebrow sits over the lit roofline at desktop: measured 2.7:1 bare, so it gets its own dark chip */
.hero--a .eyebrow { display: inline-block; background: rgba(10,11,13,.72); padding: 7px 14px; border-radius: 999px; text-shadow: none; }
/* hero A: full screen (kris 2026-09-21 "adjust the height, full screen maybe") */
.hero--a { min-height: 100vh; min-height: 100svh; height: auto; }
@media (max-width: 767px) { .hero--a { min-height: calc(100svh - 76px); } }

/* ---- Color demo: heading moved into the right column (kris) ---- */
.demo { align-items: center; }
.demo__side { display: flex; flex-direction: column; gap: 22px; }
.demo__head .section-title { font-size: clamp(30px, 3.2vw, 44px); margin: 10px 0 12px; }
.demo__lede { color: var(--muted); font-size: 16.5px; line-height: 1.65; margin: 0; }
.colors .swatch { padding: 16px 18px; }
@media (max-width: 1040px) { .demo__side { order: -1; } }

/* ---- Services: less plain (kris "a bit boring") ---- */
.services { background: #FFFFFF; }
.svc-intro { align-items: center; }
.svc-intro__visual { position: relative; padding: 0 0 40px 40px; }
.svc-intro__visual img { display: block; width: 100%; height: 520px; object-fit: cover; object-position: 50% 30%; border-radius: var(--r); }
.svc-intro__visual .svc-intro__list { position: absolute; left: 0; bottom: 0; width: min(420px, 88%); box-shadow: 0 18px 40px -18px rgba(29,27,25,.45); }
.svc-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; }
.svc--photo { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.svc__img { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.svc--photo:hover .svc__img img { transform: scale(1.04); }
.svc--photo .svc__num, .svc--photo h3, .svc--photo p { padding-inline: 22px; }
.svc--photo .svc__num { display: inline-block; margin-top: 18px; }
.svc--photo p { padding-bottom: 22px; }
.where { background: #1D1B19; border: 0; border-radius: var(--r); padding: 40px; margin-top: 56px; }
.where .svc-sub { color: #FFFFFF; }
.where__list { background: transparent; border-color: rgba(255,255,255,.14); counter-reset: w; }
.where__list > div { border-color: rgba(255,255,255,.14) !important; counter-increment: w; }
.where__list > div::before { content: counter(w, decimal-leading-zero); display: block; font-family: var(--ff-head); font-weight: 800; color: #F0665B; font-size: 14px; margin-bottom: 8px; }
.where__list dt { color: #FFFFFF; }
.where__list dd { color: #CFC8BF; }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 767px) {
	.svc-grid { grid-template-columns: 1fr !important; }
	.svc-intro__visual { padding: 0; }
	.svc-intro__visual img { height: 300px; }
	.svc-intro__visual .svc-intro__list { position: static; width: auto; margin-top: -40px; margin-inline: 14px; }
	.where { padding: 26px 20px; }
}
.svc-intro__visual .svc-intro__list { z-index: 2; }
@media (max-width: 767px) { .svc-intro__visual .svc-intro__list { position: relative; margin-top: -32px; } }
.svc-intro .eyebrow { color: var(--rock-2); }
/* ---- Quote section: photo with dark overlay (kris 2026-09-21) ---- */
.quote { position: relative; isolation: isolate;
	background: linear-gradient(90deg, rgba(12,11,10,.9) 0%, rgba(12,11,10,.74) 45%, rgba(12,11,10,.45) 100%), url(../img/g-ranch.webp) center 55% / cover no-repeat;
	--cream: #FFFFFF; --text: #F1EEEA; --muted: #D6D1CA; --muted-2: #C9C3BB; --line: rgba(255,255,255,.2); }
.quote .quote__copy .section-title { color: #FFFFFF; }
.quote .eyebrow { color: #FFD9A3; }
.quote .quote__phone { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.quote .quote__phone span { color: #D6D1CA; }
.quote .quote__phone strong { color: #FFFFFF; }
.quote .ticks li { color: #F1EEEA; }
.quote .ticks li::before { color: #F0665B; }
.quote .quote__form { --cream: #1D1B19; --text: #2E2B28; --muted: #5E5851; --muted-2: #6E675F; --line: #E3DCD2; background: #FFFFFF; box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); }
/* dropdown was a dark panel from the night theme with dark light-theme text: make it a white panel */
.nav__list .sub-menu { background: #FFFFFF !important; border: 1px solid var(--line) !important; box-shadow: 0 16px 36px -12px rgba(29,27,25,.28) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav__list .sub-menu a { color: #2E2B28 !important; opacity: 1; }
.nav__list .sub-menu a:hover, .nav__list .sub-menu a:focus-visible { background: #F3EFE9; color: var(--rock) !important; }
.mobile-nav { background: #FFFFFF !important; backdrop-filter: none; top: 74px; box-shadow: 0 16px 30px -16px rgba(29,27,25,.3); }
.mobile-nav__list a { color: #2E2B28; border-bottom-color: var(--line); }
.mobile-nav__list .sub-menu a { color: #5E5851; }

/* ---- Inner pages, human-made pass (kris 2026-09-21) ---- */
/* photo heroes: let the lit house show instead of a near-black wash */
.inner-hero--photo .process__scrim { background: linear-gradient(90deg, rgba(10,11,13,.86) 0%, rgba(10,11,13,.62) 50%, rgba(10,11,13,.25) 100%), linear-gradient(to top, rgba(10,11,13,.7) 0%, rgba(10,11,13,0) 55%); }
.inner-hero--photo { padding: 170px 0 96px; min-height: 520px; display: flex; align-items: flex-end; }
@media (max-width: 767px) { .inner-hero--photo .process__scrim { background: linear-gradient(to top, rgba(10,11,13,.92) 0%, rgba(10,11,13,.72) 55%, rgba(10,11,13,.45) 100%); } .inner-hero--photo { min-height: 0; } }
/* outlined ghost numerals -> small solid labels */
.std__n { color: var(--rock) !important; -webkit-text-stroke: 0 !important; font-size: 15px !important; font-weight: 800; letter-spacing: .08em; opacity: 1 !important; line-height: 1.4; }
.inner-hero--photo .hero__trust { display: none; } /* duplicated by the trust strip directly below */
.svc-overview .eyebrow, .standards .eyebrow, .city-homes .eyebrow { color: var(--rock-2); }
.svc-overview__list { display: grid; align-content: center; gap: 4px; }
.svc-overview__list { align-self: start; height: auto; }

/* overview: photo above the checklist so both columns balance (kris) */
.svc-overview__inner { align-items: stretch !important; }
.svc-overview__side { display: flex; flex-direction: column; gap: 0; }
.svc-overview__photo { margin: 0; flex: 1 1 auto; min-height: 240px; border-radius: var(--r) var(--r) 0 0; overflow: hidden; }
.svc-overview__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-overview__side .svc-overview__list { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; margin: 0; }
@media (max-width: 1040px) { .svc-overview__photo { flex: none; height: 260px; } }

.svc-overview__side .svc-overview__list { width: 100%; max-width: none; }
/* About "what we actually do": photo left, copy right, no black wash (kris "looks weird") */
.statement2 { display: grid; grid-template-columns: 1fr 1fr; background: #1D1B19; }
.statement2__photo { min-height: 520px; }
.statement2__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; display: block; }
.statement2__copy { padding: 88px clamp(28px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; }
.statement2__copy .eyebrow { color: #F0665B; }
.statement2__text { font-family: var(--ff-head); font-weight: 800; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; color: #FFFFFF; margin: 12px 0 18px; letter-spacing: -.015em; }
.statement2__sub { color: #D6D1CA; font-size: 17.5px; line-height: 1.7; max-width: 34em; margin: 0 0 34px; }
.statement2__facts { list-style: none; margin: 0; padding: 26px 0 0; border-top: 1px solid rgba(255,255,255,.16); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.statement2__facts b { display: block; font-family: var(--ff-head); font-weight: 800; font-size: 28px; color: #FFFFFF; }
.statement2__facts span { font-size: 14px; color: #C9C3BB; }
@media (max-width: 900px) { .statement2 { grid-template-columns: 1fr; } .statement2__photo { min-height: 280px; height: 280px; } .statement2__copy { padding: 52px 18px; } }
@media (max-width: 480px) { .statement2__facts { grid-template-columns: 1fr 1fr; } }

/* ---- Contact page redesign (kris 2026-09-21) ---- */
.contact-ways { background: var(--night-2); padding: 56px 0 0; }
.contact-ways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cway { display: flex; flex-direction: column; gap: 4px; background: #FFFFFF; border: 1px solid var(--line); border-top: 4px solid var(--rock); border-radius: var(--r); padding: 22px 24px; text-decoration: none; transition: border-color .2s; }
.cway:hover { border-color: #CFC5B8; border-top-color: var(--rock); }
.cway__lb { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rock-2); }
.cway__v { font-family: var(--ff-head); font-weight: 800; font-size: 26px; color: #1D1B19; line-height: 1.2; overflow-wrap: anywhere; }
.cway__v--sm { font-size: 19px; }
.cway__d { font-size: 14.5px; color: var(--muted); }
.contact-main { background: var(--night-2); padding: 48px 0 104px; }
.contact-main__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; align-items: start; }
.contact-main__form { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r); padding: 40px; }
.contact-main__form .section-title { margin: 10px 0 10px; font-size: clamp(28px, 3vw, 40px); }
.contact-main__lede { color: var(--muted); margin: 0 0 26px; }
.contact__form { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.contact-main__side { background: #1D1B19; border-radius: var(--r); padding: 34px 30px; color: #E9E4DD; position: sticky; top: 100px; }
.contact-main__h { font-family: var(--ff-head); font-size: 19px; font-weight: 700; color: #FFFFFF; margin: 0 0 16px; }
.cnext { list-style: none; margin: 0 0 26px; padding: 0; counter-reset: n; display: grid; gap: 16px; }
.cnext li { counter-increment: n; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; }
.cnext li::before { content: counter(n); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--rock); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.cnext b { color: #FFFFFF; }
.cnext span { color: #C9C3BB; font-size: 14.5px; line-height: 1.55; }
.cquote { margin: 0 0 26px; padding: 20px 0; border-block: 1px solid rgba(255,255,255,.14); }
.cquote blockquote { margin: 6px 0 8px; color: #FFFFFF; font-size: 16px; line-height: 1.55; }
.cquote figcaption { font-size: 13.5px; color: #C9C3BB; }
.cquote figcaption a { color: #FFFFFF; }
.contact-main__side .area-chips li a { color: #E9E4DD; text-decoration: none; }
.contact-main__side .area-chips li { border-color: rgba(255,255,255,.2); }
@media (max-width: 1040px) { .contact-main__grid { grid-template-columns: 1fr; } .contact-main__side { position: static; } }
@media (max-width: 767px) { .contact-ways__grid { grid-template-columns: 1fr; } .contact-main__form { padding: 26px 20px; } }
.contact-main__side .contact-area h3 { color: #FFFFFF !important; } .contact-main__side .contact-area { border-top: 0; padding-top: 0; margin-top: 0; }
.rev-summary__stars, .rev__stars, .trust__stars { color: #B8730A; } /* star icons: 3:1+ on white/cream (WCAG 1.4.11) */

/* ================================================================
   DARK BACKGROUND RESTORED (2026-09-21, kris: "go back with the dark background
   but retain the changes"). Layouts, hero A, fonts, reviews, gallery, contact
   page all kept; only the surface palette flips back to night. Still no glass,
   no blooms, no ghost watermark. Light version: versions/theme-light-final-2026-09-21.
   ================================================================ */
:root {
	--night:   #0B0D11;
	--night-2: #11141A;
	--night-3: #181C24;
	--night-4: #212632;
	--cream:   #F6F2EC;
	--text:    #E6E2DC;
	--muted:   #A9B0BC;
	--muted-glass: #B4BBC6;
	--muted-2: #939BA8;
	--glow:    #FFD9A3;
	--rock-2:  #F0665B;
	--line:    rgba(255,255,255,.11);
	--line-2:  rgba(255,255,255,.06);
}
body { background: var(--night); color: var(--text); }
/* header: dark bar, reversed logo */
.site-header, .site-header.is-stuck { background: rgba(11,13,17,.96); border-bottom: 1px solid var(--line); box-shadow: none; }
.nav a, .nav__list a { color: var(--text); }
.site-header .nav a:hover { color: #F0665B; }
.nav__list .sub-menu { background: #181C24 !important; border-color: var(--line) !important; box-shadow: 0 18px 40px -14px rgba(0,0,0,.8) !important; }
.nav__list .sub-menu a { color: #E6E2DC !important; }
.nav__list .sub-menu a:hover, .nav__list .sub-menu a:focus-visible { background: rgba(255,255,255,.06); color: #F0665B !important; }
.mobile-nav { background: #11141A !important; box-shadow: 0 16px 30px -16px rgba(0,0,0,.8); }
.mobile-nav__list a { color: #E6E2DC; }
.mobile-nav__list .sub-menu a { color: #A9B0BC; }
/* surfaces that were hard-coded white */
.trust, .services { background: var(--night-2); }
.trust__item b { color: var(--cream); }
.svc-intro__list, .faq__ask, .cway, .contact-main__form, .rev, .svc, .swatch, .gfilter__btn { background: var(--night-3); border-color: var(--line); }
.svc:hover, .swatch:hover, .gfilter__btn:hover, .cway:hover, .glass:hover { border-color: rgba(255,255,255,.24); }
.cway { border-top-color: var(--rock); }
.cway__v { color: var(--cream); }
.swatch.is-active, .gfilter__btn.is-active { background: #F6F2EC; border-color: #F6F2EC; color: #11141A; }
.swatch.is-active .swatch__label { color: #11141A; }
.dn__shot figcaption span { background: #F6F2EC; color: #11141A; }
.dn__shot + .dn__shot figcaption span { background: #0B0D11; color: #F6F2EC; border: 1px solid rgba(255,255,255,.2); }
.where, .contact-main__side, .statement2 { background: #181C24; border: 1px solid var(--line); }
.statement2 { border: 0; }
.quote .quote__form { --cream: #F6F2EC; --text: #E6E2DC; --muted: #A9B0BC; --muted-2: #939BA8; --line: rgba(255,255,255,.14); background: #181C24; box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); }
.field input, .field textarea, .field select { background: #0F1217; color: #F6F2EC; border-color: rgba(255,255,255,.16); }
.field input::placeholder, .field textarea::placeholder { color: #8B93A0; }
.site-footer { background: #07080B; }
.mbar { background: #0B0D11 !important; border-top-color: var(--line) !important; }
.mbar__call { background: transparent !important; color: #F6F2EC !important; border-color: rgba(255,255,255,.5) !important; }
.rev-summary__stars, .rev__stars, .trust__stars { color: #F4B83F; }
.demo__stage, .offer__media, .bento__cell--photo, .zig__media, .gal__item, .svc-intro__visual .svc-intro__list { box-shadow: 0 18px 40px -20px rgba(0,0,0,.8) !important; }
.btn--ghost { color: var(--cream); border-color: rgba(255,255,255,.3); }
.btn--ghost:hover, .btn--ghost:focus { background: rgba(255,255,255,.06); color: var(--cream); }
.colors { background: var(--night); }
.std__n, .valley-item__n { color: #F0665B !important; -webkit-text-stroke: 0 !important; font-size: 15px !important; font-weight: 800; letter-spacing: .08em; line-height: 1.4; opacity: 1 !important; }

/* 2026-09-23 real job photo in the Partner Home offer: keep the yard sign in frame on desktop,
   and the lit roofline (not the walkway) in the 16:10 mobile crop */
.offer__media img.offer__img--job { object-position: 50% 100%; }
@media (max-width: 1040px) { .offer__media img.offer__img--job { object-position: 50% 42%; } }