/*!
 * Summit Flooring — theme styles ("Shenandoah" design system)
 *
 * Warm, residential, craft. Pine green + honey oak + terracotta on
 * warm-white/linen bands. Fraunces serif headings, Inter body.
 *
 * Brand colors are injected at runtime as CSS variables from Theme Options
 * (inc/enqueue.php :: summit_inline_brand_css). The :root block below holds
 * matching fallbacks only.
 *
 * Sections:
 *   1. Fonts             8. Cards & tiles      15. Gallery & lightbox
 *   2. Tokens            9. Hero               16. Process timeline
 *   3. Base             10. Page header        17. FAQ accordion
 *   4. Buttons          11. Trust bar          18. Reviews
 *   5. Utilities        12. About              19. Service areas
 *   6. Header & nav     13. CTA banner         20. Sticky mobile CTA
 *   7. Sections         14. Forms              21. Footer
 *                                              22. Motion & a11y
 */

/* =========================================================================
   1. FONTS (self-hosted)
   ========================================================================= */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter/inter-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter/inter-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter/inter-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter/inter-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 600 700; /* variable font file */
	font-display: swap;
	src: url('../fonts/fraunces/fraunces-latin.woff2') format('woff2');
}

/* =========================================================================
   2. TOKENS (fallbacks — runtime values injected from Theme Options)
   ========================================================================= */

:root {
	--summit-primary: #2F5D45;
	--summit-primary-rgb: 47, 93, 69;
	--summit-primary-deep: #1E3B2C;
	--summit-primary-bright: #448663;
	--summit-primary-soft: #EAEFEC;

	--summit-secondary: #B9824C;
	--summit-secondary-rgb: 185, 130, 76;
	--summit-secondary-deep: #885E35;
	--summit-secondary-soft: #F5EDE3;

	--summit-accent: #B85C38;
	--summit-accent-rgb: 184, 92, 56;
	--summit-accent-deep: #9E4B2C;
	--summit-accent-soft: #F7E9E1;

	--summit-success: #257A47;
	--summit-success-rgb: 37, 122, 71;
	--summit-success-soft: #E4F2E9;

	--summit-dark: #26211A;
	--summit-dark-rgb: 38, 33, 26;
	--summit-charcoal: #38322A;

	/* Warm neutrals (static). */
	--summit-bg: #FDFBF8;
	--summit-soft-bg: #FAF7F2;
	--summit-warm-bg: #F4EEE3;
	--summit-border: #E8E1D5;
	--summit-rule: #D8CFC0;
	--summit-ink: #26211A;
	--summit-body: #4A443A;
	--summit-muted: #6E6759;
	--summit-star: #E8A33D; /* decorative stars only, always paired with text */

	/* Type. */
	--summit-font-heading: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	--summit-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--summit-serif: var(--summit-font-heading); /* legacy alias */
	--bs-font-sans-serif: var(--summit-font-body);

	/* Radius scale. */
	--summit-radius-sm: 8px;
	--summit-radius: 12px;
	--summit-radius-lg: 16px;
	--summit-radius-xl: 24px;
	--summit-radius-pill: 999px;

	/* Espresso-tinted shadows. */
	--summit-shadow-sm: 0 1px 4px rgba(38, 33, 26, .05), 0 1px 2px rgba(38, 33, 26, .04);
	--summit-shadow-md: 0 8px 24px rgba(38, 33, 26, .07), 0 2px 6px rgba(38, 33, 26, .04);
	--summit-shadow-lg: 0 18px 48px rgba(38, 33, 26, .11), 0 4px 12px rgba(38, 33, 26, .05);

	--summit-ease: cubic-bezier(.2, .8, .2, 1);

	/* Editorial signature tokens. */
	--summit-hairline: rgba(185, 130, 76, .28);
	--summit-hairline-soft: rgba(185, 130, 76, .16);
	--summit-ghost: rgba(185, 130, 76, .14);
}

/* =========================================================================
   3. BASE
   ========================================================================= */

body {
	font-family: var(--summit-font-body);
	color: var(--summit-body);
	background-color: var(--summit-bg);
	-webkit-font-smoothing: antialiased;
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: var(--summit-font-heading);
	font-weight: 600;
	color: var(--summit-ink);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

a {
	color: var(--summit-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color .18s var(--summit-ease);
}
a:hover { color: var(--summit-primary-deep); }

::selection {
	background: var(--summit-primary-soft);
	color: var(--summit-primary-deep);
}

.summit-prose { font-size: 1.05rem; }
.summit-prose p { margin-bottom: 1.15rem; }
.summit-prose h2, .summit-prose h3 { margin-top: 2rem; margin-bottom: .85rem; }
.summit-prose ul, .summit-prose ol { margin-bottom: 1.15rem; }
.summit-prose img { max-width: 100%; height: auto; border-radius: var(--summit-radius); }

.letter-spaced { letter-spacing: .12em; }

.lead { color: var(--summit-muted); }
.text-muted { color: var(--summit-muted) !important; }

/* =========================================================================
   4. BUTTONS
   ========================================================================= */

.btn {
	font-family: var(--summit-font-body);
	font-weight: 600;
	border-radius: 10px;
	padding: .6rem 1.3rem;
	border-width: 1.5px;
	transition: background-color .18s var(--summit-ease), border-color .18s var(--summit-ease), color .18s var(--summit-ease), transform .18s var(--summit-ease), box-shadow .18s var(--summit-ease);
}
.btn-lg { padding: .8rem 1.7rem; }

.btn-primary {
	--bs-btn-bg: var(--summit-primary);
	--bs-btn-border-color: var(--summit-primary);
	--bs-btn-hover-bg: var(--summit-primary-deep);
	--bs-btn-hover-border-color: var(--summit-primary-deep);
	--bs-btn-active-bg: var(--summit-primary-deep);
	--bs-btn-active-border-color: var(--summit-primary-deep);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(var(--summit-primary-rgb), .5); }

/* Oak buttons must use dark text — white on oak fails WCAG AA. */
.btn-secondary {
	--bs-btn-bg: var(--summit-secondary);
	--bs-btn-border-color: var(--summit-secondary);
	--bs-btn-hover-bg: var(--summit-secondary-deep);
	--bs-btn-hover-border-color: var(--summit-secondary-deep);
	--bs-btn-color: var(--summit-dark);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--summit-secondary-deep);
	--bs-btn-active-border-color: var(--summit-secondary-deep);
	--bs-btn-active-color: #fff;
}
.btn-secondary:hover { transform: translateY(-2px); }

.btn-dark {
	--bs-btn-bg: var(--summit-dark);
	--bs-btn-border-color: var(--summit-dark);
	--bs-btn-hover-bg: var(--summit-charcoal);
	--bs-btn-hover-border-color: var(--summit-charcoal);
}

.btn-outline-primary {
	--bs-btn-color: var(--summit-primary);
	--bs-btn-border-color: var(--summit-primary);
	--bs-btn-hover-bg: var(--summit-primary);
	--bs-btn-hover-border-color: var(--summit-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--summit-primary);
	--bs-btn-active-border-color: var(--summit-primary);
	--bs-btn-active-color: #fff;
}

.btn-outline-light {
	--bs-btn-hover-color: var(--summit-primary-deep);
}

/* Light-outline button for dark photographic surfaces (hero, why band). */
.btn-hero-ghost {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .65);
	font-weight: 600;
}
.btn-hero-ghost:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
	transform: translateY(-2px);
}

.btn-ghost {
	color: var(--summit-primary);
	font-weight: 600;
	padding-left: 0;
	padding-right: 0;
	background: transparent;
	border: 0;
	text-decoration: none;
}
.btn-ghost .bi { transition: transform .18s var(--summit-ease); }
.btn-ghost:hover { color: var(--summit-primary-deep); }
.btn-ghost:hover .bi { transform: translateX(4px); }

/* External-site button (BuildDirect). */
.btn-external {
	background: #fff;
	color: var(--summit-primary);
	border: 1.5px solid var(--summit-primary);
	font-weight: 600;
}
.btn-external:hover {
	background: var(--summit-primary);
	color: #fff;
	transform: translateY(-2px);
}
.external-note {
	font-size: .85rem;
	color: var(--summit-muted);
}

/* =========================================================================
   5. UTILITIES
   ========================================================================= */

.bg-soft { background-color: var(--summit-soft-bg) !important; }
.bg-linen { background-color: var(--summit-warm-bg) !important; }
.bg-primary { background-color: var(--summit-primary) !important; }
.bg-primary-soft { background-color: var(--summit-primary-soft) !important; }
.bg-dark { background-color: var(--summit-dark) !important; }
.text-primary { color: var(--summit-primary) !important; }
.text-secondary { color: var(--summit-secondary-deep) !important; }
.text-accent { color: var(--summit-accent-deep) !important; }
.text-success { color: var(--summit-success) !important; }
.border-soft { border-color: var(--summit-border) !important; }

.object-fit-cover { object-fit: cover; }
.rounded-xl { border-radius: var(--summit-radius-lg) !important; }
.rounded-2xl { border-radius: var(--summit-radius-xl) !important; }
.ratio-3x4 { --bs-aspect-ratio: 133.333%; }
.ratio-4x5 { --bs-aspect-ratio: 125%; }

.summit-icon { display: inline-flex; align-items: center; justify-content: center; }

/* Subtle wood-grain wash for linen bands (inline SVG, ~4% espresso). */
.bg-linen--grain {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg stroke='%2326211A' stroke-opacity='.04' fill='none'%3E%3Cpath d='M0 30h240M0 90h240M0 150h240M0 210h240'/%3E%3Cpath d='M60 30v60M180 90v60M100 150v60M20 210v30'/%3E%3C/g%3E%3C/svg%3E");
}

.hairline-top { border-top: 1px solid var(--summit-hairline-soft); }

/* =========================================================================
   6. HEADER & NAVIGATION
   ========================================================================= */

.site-topbar {
	background: var(--summit-primary);
	color: #fff;
	font-size: .875rem;
	padding: .4rem 0;
}
.site-topbar a { color: #fff; text-decoration: none; }
.site-topbar a:hover { color: var(--summit-secondary-soft); }

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--summit-border);
	transition: box-shadow .25s var(--summit-ease);
}
.site-header--sticky {
	position: sticky;
	top: 0;
	z-index: 1030;
}
.site-header--scrolled { box-shadow: var(--summit-shadow-md); }

.site-header .navbar { padding-top: .8rem; padding-bottom: .8rem; transition: padding .25s var(--summit-ease); }
.site-header--scrolled .navbar { padding-top: .45rem; padding-bottom: .45rem; }

.navbar-brand { display: flex; align-items: center; gap: .6rem; }
.navbar-brand__img { height: 60px; width: auto; transition: height .25s var(--summit-ease); }
.site-header--scrolled .navbar-brand__img { height: 48px; }
@media (max-width: 575.98px) {
	.navbar-brand__img { height: 48px; }
	.site-header--scrolled .navbar-brand__img { height: 42px; }
}
.navbar-brand__name {
	font-family: var(--summit-font-heading);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--summit-ink);
}

.navbar-light .navbar-nav .nav-link {
	color: var(--summit-ink);
	font-weight: 500;
	position: relative;
	margin-inline: .15rem;
}
.navbar-light .navbar-nav .nav-link::after {
	content: "";
	position: absolute;
	left: .5rem;
	right: .5rem;
	bottom: .2rem;
	height: 2px;
	border-radius: 2px;
	background: var(--summit-primary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .2s var(--summit-ease);
}
.navbar-light .navbar-nav .nav-link:hover::after,
.navbar-light .navbar-nav .nav-link.active::after { transform: scaleX(1); }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active { color: var(--summit-primary); }

.dropdown-menu {
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius-sm);
	box-shadow: var(--summit-shadow-md);
	padding: .4rem;
}
.dropdown-item { border-radius: 6px; padding: .45rem .8rem; }
.dropdown-item:hover, .dropdown-item.active {
	background: var(--summit-primary-soft);
	color: var(--summit-primary-deep);
}

.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .9rem;
	border: 1.5px solid var(--summit-border);
	border-radius: var(--summit-radius-pill);
	color: var(--summit-ink);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .18s var(--summit-ease), color .18s var(--summit-ease);
}
.site-header__phone .bi { color: var(--summit-primary); }
.site-header__phone:hover { border-color: var(--summit-primary); color: var(--summit-primary); }

.site-header__phone-mobile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--summit-primary);
	color: #fff;
}
.site-header__phone-mobile:hover { background: var(--summit-primary-deep); color: #fff; }

.navbar-toggler { border-color: var(--summit-border); }

/* =========================================================================
   7. SECTIONS
   ========================================================================= */

.section { padding-block: clamp(3rem, 6vw, 5rem); }
.section--grand { padding-block: clamp(4rem, 8vw, 7rem); }
@media (min-width: 992px) {
	.py-lg-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
	.py-lg-7 { padding-top: 6.5rem !important; padding-bottom: 6.5rem !important; }
}

.section-kicker { color: var(--summit-accent-deep); }
.section-kicker--ruled { gap: .7rem; }
.section-kicker--ruled::before,
.section-kicker--ruled::after {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--summit-secondary);
}
.text-start .section-kicker--ruled::after,
.section-header.text-start .section-kicker--ruled::after { display: none; }
.section-kicker--light { color: var(--summit-secondary-soft); }

.section-title { font-weight: 700; }
.section-title--light { color: #fff; }
.section-subtitle { font-size: 1.1rem; }
.section-subtitle--light { color: rgba(255, 255, 255, .85); }

.section-divider {
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--summit-secondary);
}
/* Hairline variant: a 320px oak hairline with the 44px tick overlaid. */
.section-divider--hairline {
	position: relative;
	width: min(320px, 60%);
	height: 1px;
	background: var(--summit-hairline);
	border-radius: 0;
	margin-top: .4rem;
	margin-bottom: .4rem;
}
.section-divider--hairline::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -1px;
	transform: translateX(-50%);
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--summit-secondary);
}
.text-start .section-divider--hairline::after,
.section-header.text-start .section-divider--hairline::after { left: 22px; }

/* Oversized decorative ghost numeral behind section headings. Sits at
   --summit-ghost (oak @ 14% over warm-white ≈ #F5EBDE); the espresso title
   over it keeps ~12:1 contrast. */
.section-header--num { position: relative; isolation: isolate; }
.section-header__ghost {
	position: absolute;
	top: -2.6rem;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--summit-font-heading);
	font-weight: 700;
	font-size: clamp(4.5rem, 8vw, 7rem);
	line-height: 1;
	color: var(--summit-ghost);
	z-index: -1;
	pointer-events: none;
	user-select: none;
}
.section-header__ghost--start { left: 0; transform: none; }

/* =========================================================================
   8. CARDS & TILES
   ========================================================================= */

.card { border-color: var(--summit-border); border-radius: var(--summit-radius-lg); }

.service-card {
	background: #fff;
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius-lg);
	box-shadow: var(--summit-shadow-sm);
	height: 100%;
	transition: transform .22s var(--summit-ease), box-shadow .22s var(--summit-ease), border-color .22s var(--summit-ease);
}
.service-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--summit-shadow-md);
	border-color: rgba(var(--summit-primary-rgb), .35);
}
.service-card__icon {
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--summit-radius);
	background: var(--summit-primary-soft);
	color: var(--summit-primary);
	font-size: 1.4rem;
	transition: background-color .22s var(--summit-ease), color .22s var(--summit-ease);
}
.service-card:hover .service-card__icon { background: var(--summit-primary); color: #fff; }

/* Featured material cards: photo top, icon chip pulled over the photo. */
.service-card--featured { overflow: hidden; }
.service-card__media { overflow: hidden; }
.service-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform .35s var(--summit-ease);
}
.service-card--featured:hover .service-card__media img { transform: scale(1.03); }
.service-card__icon--overlap {
	margin-top: -46px;
	border: 3px solid #fff;
	position: relative;
	z-index: 1;
	background: var(--summit-primary);
	color: #fff;
}

.service-detail-card {
	background: #fff;
	border: 1px solid var(--summit-border);
	border-left: 4px solid var(--summit-secondary);
	border-radius: var(--summit-radius-lg);
	box-shadow: var(--summit-shadow-sm);
}

.step-card {
	background: #fff;
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius-lg);
	height: 100%;
	box-shadow: var(--summit-shadow-sm);
}
.step-card--edged {
	position: relative;
	border-top: 3px solid var(--summit-secondary);
	overflow: hidden;
}
.step-card__ghost {
	position: absolute;
	right: .6rem;
	top: -.9rem;
	font-family: var(--summit-font-heading);
	font-weight: 700;
	font-size: 4.5rem;
	line-height: 1;
	color: rgba(var(--summit-secondary-rgb), .14);
	pointer-events: none;
	user-select: none;
}
.step-card__num {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--summit-primary-soft);
	color: var(--summit-primary-deep);
	font-family: var(--summit-font-heading);
	font-weight: 700;
}

.contact-tile {
	background: #fff;
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius-lg);
	height: 100%;
	box-shadow: var(--summit-shadow-sm);
	transition: transform .22s var(--summit-ease), box-shadow .22s var(--summit-ease);
}
.contact-tile:hover { transform: translateY(-3px); box-shadow: var(--summit-shadow-md); }
.contact-tile .summit-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--summit-radius);
	background: var(--summit-primary-soft);
	color: var(--summit-primary);
	font-size: 1.3rem;
	transition: background-color .22s var(--summit-ease), color .22s var(--summit-ease);
}
.contact-tile:hover .summit-icon { background: var(--summit-primary); color: #fff; }
.contact-tile__value { font-size: 1.05rem; font-weight: 600; color: var(--summit-ink); word-break: break-word; }
.contact-tile__value.small { font-size: .9rem; font-weight: 500; }
.contact-tile__link { color: var(--summit-ink); text-decoration: none; }
.contact-tile__link:hover { color: var(--summit-primary); }
.contact-tile__sub { font-size: .82rem; color: var(--summit-muted); margin-top: .35rem; }

.shop-step {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.shop-step__num {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--summit-secondary);
	color: var(--summit-dark);
	font-weight: 700;
	font-family: var(--summit-font-heading);
}

/* =========================================================================
   9. HERO (home) — cinematic full-bleed photograph
   =========================================================================
   Scrim contrast math (documented so brand overrides can be re-checked):
   text sits only where the combined scrim alpha is >= .66. Worst case — a
   pure-white photo pixel — rgba(38,33,26,.66) over #FFF composites to
   ~#6B675F, giving white text 5.3:1 (AA all sizes). At the actual text
   anchor (alpha >= .74) it is >= 6.8:1. Small light-on-dark accents (the
   eyebrow/kickers) use pale oak --summit-secondary-soft (#F5EDE3, >= 5:1
   over any scrim+photo composite) — base oak #B9824C is reserved for
   decorative rules/icons on dark, never small text. The low-alpha right
   side never carries text. */

.hero--cinematic {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(560px, 82vh, 720px); /* fallback for no-svh browsers */
	min-height: clamp(560px, 82svh, 720px);
	background: var(--summit-dark); /* paints before the image arrives */
	overflow: hidden;
}
@media (min-width: 992px) {
	.hero--cinematic { min-height: clamp(640px, 88vh, 880px); }
}

.hero__media,
.hero__media picture { position: absolute; inset: 0; }
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(var(--summit-dark-rgb), 0) 55%, rgba(var(--summit-dark-rgb), .40) 100%),
		linear-gradient(96deg, rgba(var(--summit-dark-rgb), .80) 0%, rgba(var(--summit-dark-rgb), .68) 42%, rgba(var(--summit-dark-rgb), .30) 68%, rgba(var(--summit-dark-rgb), .06) 100%);
}
@media (max-width: 767.98px) {
	.hero__scrim {
		background: linear-gradient(180deg, rgba(var(--summit-dark-rgb), .58) 0%, rgba(var(--summit-dark-rgb), .72) 60%, rgba(var(--summit-dark-rgb), .84) 100%);
	}
}

.hero__content {
	position: relative;
	z-index: 1;
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .8rem;
	font-weight: 600;
	color: var(--summit-accent-deep);
	margin-bottom: 1.1rem;
}
.hero__eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--summit-secondary);
}
/* Pale oak on dark scrims: base oak #B9824C drops below AA once a bright
   photo bleeds through the alpha scrim; the soft tint stays >= 5:1. */
.hero__eyebrow--light { color: var(--summit-secondary-soft); }
.hero__eyebrow--light::before { background: var(--summit-secondary); }

.hero__title {
	font-family: var(--summit-font-heading);
	font-weight: 700;
	font-size: clamp(2.6rem, 6vw, 4.35rem);
	color: var(--summit-ink);
	letter-spacing: -0.02em;
	line-height: 1.06;
	text-wrap: balance;
	margin-bottom: 1.2rem;
}
.hero__title--light { color: #fff; }

/* Warm highlighter under the accent phrase — no gradient text. */
.hero__accent {
	background: linear-gradient(transparent 62%, rgba(var(--summit-secondary-rgb), .45) 62%);
}

.hero__subtitle {
	font-size: 1.15rem;
	color: var(--summit-muted);
	max-width: 54ch;
	margin-bottom: 1.8rem;
}
.hero__subtitle--light { color: rgba(255, 255, 255, .88); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.8rem; }
.hero__cta-primary { padding: .95rem 2rem; font-size: 1.06rem; }

.hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: .95rem;
	color: var(--summit-body);
}
.hero__trust li { display: inline-flex; align-items: center; gap: .45rem; }
.hero__trust .bi { color: var(--summit-success); }
.hero__trust--light { color: rgba(255, 255, 255, .92); }
.hero__trust--light .bi { color: var(--summit-secondary); }

/* =========================================================================
   10. PAGE HEADER (interior pages)
   ========================================================================= */

.page-header {
	position: relative;
	background:
		radial-gradient(38rem 22rem at 90% 0%, rgba(185, 130, 76, .12), transparent 60%),
		var(--summit-warm-bg);
	border-bottom: 3px solid var(--summit-secondary);
	padding: 3rem 0 2.5rem;
	overflow: hidden;
}
@media (min-width: 992px) {
	.page-header { padding: 4.5rem 0 3.5rem; }
}
.page-header__title,
.page-header h1 {
	font-weight: 700;
	font-size: clamp(2rem, 3.8vw, 3.1rem);
	letter-spacing: -0.02em;
	margin-bottom: .4rem;
}
.page-header__title::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	background: var(--summit-secondary);
	border-radius: 2px;
	margin-top: 1rem;
}
.page-header .lead { max-width: 64ch; }
.page-header__content { position: relative; z-index: 1; }

/* Photo variant: eager shared image (that page's LCP) under an espresso
   scrim rising to .80 where the text sits — white H1 >= 5.3:1 worst case,
   light breadcrumbs at .78 alpha >= 4.5:1. */
.page-header--photo {
	background: var(--summit-dark);
	display: flex;
	align-items: flex-end;
	min-height: clamp(260px, 32vh, 400px);
	padding: 3rem 0 2.5rem;
}
.page-header--photo .page-header__media { position: absolute; inset: 0; }
.page-header--photo .page-header__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.page-header__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--summit-dark-rgb), .64) 0%, rgba(var(--summit-dark-rgb), .82) 100%);
}
.page-header--photo .page-header__title,
.page-header--photo h1 { color: #fff; }
.page-header--photo .lead { color: rgba(255, 255, 255, .85); }
.page-header--photo .breadcrumb a { color: rgba(255, 255, 255, .95); }
.page-header--photo .breadcrumb-item.active { color: rgba(255, 255, 255, .9); }
.page-header--photo .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .6); }
.page-header--photo a:focus-visible { outline-color: #fff; }

.breadcrumb { --bs-breadcrumb-divider: '›'; font-size: .85rem; margin-bottom: 1rem; }
.breadcrumb a { color: var(--summit-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--summit-muted); }

/* =========================================================================
   11. TRUST / BENEFIT BAR
   ========================================================================= */

/* Floating ledge card overlapping the hero bottom. */
.trust-bar { position: relative; z-index: 3; }
.trust-ledge {
	background: #fff;
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius-xl);
	box-shadow: var(--summit-shadow-lg);
	margin-top: -3.25rem;
	overflow: hidden;
}
.trust-ledge [class*="col-"]:nth-child(n+2) .trust-stat {
	border-left: 1px solid var(--summit-hairline-soft);
}
@media (max-width: 767.98px) {
	.trust-ledge { margin-top: -1.75rem; }
	.trust-ledge [class*="col-"] .trust-stat { border-left: 0; }
	.trust-ledge .col-6:nth-child(even) .trust-stat { border-left: 1px solid var(--summit-hairline-soft); }
	.trust-ledge .col-6:nth-child(n+3) .trust-stat,
	.trust-ledge .col-12:nth-child(n+2) .trust-stat { border-top: 1px solid var(--summit-hairline-soft); }
}
.trust-stat { padding: 1.4rem .5rem; height: 100%; }
.trust-stat .summit-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--summit-radius);
	background: var(--summit-primary-soft);
	color: var(--summit-primary);
	font-size: 1.2rem;
	margin-bottom: .5rem;
	transition: transform .2s var(--summit-ease);
}
.trust-stat:hover .summit-icon { transform: translateY(-3px); }
.trust-stat__value {
	font-family: var(--summit-font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--summit-ink);
}
.trust-stat__label {
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--summit-muted);
}

/* =========================================================================
   12. ABOUT
   ========================================================================= */

.about-section { background: linear-gradient(180deg, #fff 0%, var(--summit-soft-bg) 100%); }

/* Layered photo collage (about section; reusable). */
.collage { position: relative; padding-bottom: 3.2rem; }
.collage__frame {
	position: absolute;
	inset: 18px -18px 3.2rem 18px;
	background: var(--summit-secondary-soft);
	border-radius: var(--summit-radius-xl);
}
.collage--flip .collage__frame { inset: 18px 18px 3.2rem -18px; }
.collage__primary {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	height: auto;
	border-radius: var(--summit-radius-xl);
	box-shadow: var(--summit-shadow-lg);
}
.collage__detail {
	position: absolute;
	z-index: 2;
	left: -1.6rem;
	bottom: 0;
	width: 38%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--summit-radius-lg);
	border: 6px solid var(--summit-bg);
	box-shadow: var(--summit-shadow-md);
}
.collage--flip .collage__detail { left: auto; right: -1.6rem; }
@media (max-width: 991.98px) {
	.collage { padding-bottom: 0; }
	.collage__frame { display: none; }
}

.about-section__values {
	background: #fff;
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius-lg);
	box-shadow: var(--summit-shadow-sm);
}
.about-section__values .bi { color: var(--summit-success); }

/* =========================================================================
   13. CTA BANNER — the one dark band
   ========================================================================= */

/* Full-opacity photo under a pine scrim. Worst-case composite (white photo
   pixel under rgba(primary,.88)) ≈ rgb(72,112,91): white text 5.6:1. */
.cta-banner {
	position: relative;
	background: var(--summit-primary-deep);
	color: #fff;
	overflow: hidden;
}
.cta-banner__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.cta-banner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(96deg, rgba(var(--summit-primary-rgb), .92) 0%, rgba(var(--summit-primary-rgb), .88) 55%, rgba(30, 59, 44, .94) 100%);
}
.cta-banner__content { position: relative; z-index: 1; }
.cta-banner__title {
	font-family: var(--summit-font-heading);
	font-weight: 700;
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	color: #fff;
	text-wrap: balance;
}
.cta-banner__subtitle { color: rgba(255, 255, 255, .85); max-width: 60ch; }

/* White button with pine text — 7.5:1 on the pine band. */
.cta-banner__btn {
	background: #fff;
	color: var(--summit-primary-deep);
	border: 1.5px solid #fff;
	font-weight: 700;
	border-radius: 10px;
	padding: .75rem 1.6rem;
	text-decoration: none;
	display: inline-block;
	transition: transform .18s var(--summit-ease), box-shadow .18s var(--summit-ease);
}
.cta-banner__btn:hover {
	color: var(--summit-primary-deep);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .4);
}
.cta-banner__phone { color: #fff; text-decoration: none; font-weight: 600; }
.cta-banner__phone:hover { color: var(--summit-secondary-soft); }
.cta-banner__phone .bi { color: var(--summit-secondary); }

/* =========================================================================
   14. FORMS
   ========================================================================= */

.form-label { font-weight: 500; color: var(--summit-ink); }
.form-control, .form-select {
	padding: .68rem .9rem;
	border-color: var(--summit-border);
	border-radius: 10px;
	transition: border-color .18s var(--summit-ease), box-shadow .18s var(--summit-ease);
}
.form-control:focus, .form-select:focus {
	border-color: var(--summit-primary);
	box-shadow: 0 0 0 .2rem rgba(var(--summit-primary-rgb), .15);
}
.form-check-input:checked {
	background-color: var(--summit-primary);
	border-color: var(--summit-primary);
}

.estimate-form,
.summit-quote-form { scroll-margin-top: 96px; }

.estimate-form-card {
	background: #fff;
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius-lg);
	box-shadow: var(--summit-shadow-md);
	padding: 1.5rem;
}
@media (min-width: 768px) {
	.estimate-form-card { padding: 2.25rem; }
}
.estimate-form h3 {
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--summit-border);
}

.alert-success { background: var(--summit-success-soft); border-color: var(--summit-success); color: var(--summit-primary-deep); }

/* =========================================================================
   15. GALLERY, BEFORE/AFTER & LIGHTBOX
   ========================================================================= */

.gallery-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.gallery-filter__btn {
	border: 1.5px solid var(--summit-border);
	background: #fff;
	color: var(--summit-body);
	border-radius: var(--summit-radius-pill);
	padding: .4rem 1.05rem;
	font-weight: 500;
	font-size: .92rem;
	transition: background-color .18s var(--summit-ease), color .18s var(--summit-ease), border-color .18s var(--summit-ease);
}
.gallery-filter__btn:hover { border-color: var(--summit-primary); color: var(--summit-primary); }
.gallery-filter__btn.is-active,
.gallery-filter__btn[aria-pressed="true"] {
	background: var(--summit-primary);
	border-color: var(--summit-primary);
	color: #fff;
}

.gallery-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.5rem;
}

/* Before/after pair — side-by-side with always-visible text labels.
   No drag, no JS required. */
.ba-card {
	background: #fff;
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius-lg);
	overflow: hidden;
	box-shadow: var(--summit-shadow-sm);
	height: 100%;
	transition: transform .22s var(--summit-ease), box-shadow .22s var(--summit-ease);
}
.ba-card:hover { transform: translateY(-3px); box-shadow: var(--summit-shadow-md); }

.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; }
.ba-pair__item { position: relative; }
.ba-pair__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.ba-pair__label {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: .18rem .6rem;
	border-radius: var(--summit-radius-pill);
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
}
.ba-pair__label--before { background: rgba(var(--summit-dark-rgb), .85); }
.ba-pair__label--after { background: var(--summit-success); }

@media (max-width: 575.98px) {
	.ba-pair { grid-template-columns: 1fr; }
}

.ba-card__meta { font-size: .85rem; color: var(--summit-muted); }
.ba-card__type {
	display: inline-block;
	background: var(--summit-primary-soft);
	color: var(--summit-primary-deep);
	border-radius: var(--summit-radius-pill);
	padding: .12rem .6rem;
	font-size: .75rem;
	font-weight: 600;
}

#summitLightbox .modal-content {
	background: var(--summit-dark);
	border: 0;
	border-radius: var(--summit-radius-lg);
}
#summitLightbox img { max-height: 78vh; width: auto; max-width: 100%; margin: 0 auto; display: block; }
#summitLightbox .modal-footer { border: 0; color: #fff; justify-content: space-between; }

/* =========================================================================
   16. PROCESS TIMELINE
   ========================================================================= */

.process-timeline {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 760px;
	counter-reset: step;
}
.process-timeline > li {
	position: relative;
	padding: 0 0 2.2rem 4.2rem;
}
.process-timeline > li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--summit-primary);
	color: #fff;
	font-family: var(--summit-font-heading);
	font-weight: 700;
	font-size: 1.1rem;
}
.process-timeline > li::after {
	content: "";
	position: absolute;
	left: 23px;
	top: 52px;
	bottom: 4px;
	border-left: 2px dashed var(--summit-rule);
}
.process-timeline > li:last-child { padding-bottom: 0; }
.process-timeline > li:last-child::after { display: none; }
.process-timeline h3 { font-size: 1.2rem; margin-bottom: .35rem; }

/* =========================================================================
   17. FAQ ACCORDION
   ========================================================================= */

.faq-accordion .accordion-item {
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius) !important;
	margin-bottom: .6rem;
	overflow: hidden;
	background: #fff;
}
.faq-accordion .accordion-button {
	font-weight: 600;
	color: var(--summit-ink);
	background: #fff;
	box-shadow: none;
}
.faq-accordion .accordion-button:not(.collapsed) {
	background: var(--summit-primary-soft);
	color: var(--summit-primary-deep);
}
.faq-accordion .accordion-button:focus {
	border-color: var(--summit-primary);
	box-shadow: 0 0 0 .2rem rgba(var(--summit-primary-rgb), .15);
}
.faq-accordion .accordion-body { color: var(--summit-body); }

/* =========================================================================
   18. REVIEWS
   ========================================================================= */

.review-card {
	background: #fff;
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius-lg);
	box-shadow: var(--summit-shadow-sm);
	height: 100%;
}
.review-card__stars { color: var(--summit-star); font-size: .95rem; }
.review-card__quote { color: var(--summit-body); }
.review-card__name { font-weight: 600; color: var(--summit-ink); }
.review-card__meta { font-size: .85rem; color: var(--summit-muted); }
.review-card__source {
	display: inline-block;
	background: var(--summit-soft-bg);
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius-pill);
	padding: .08rem .55rem;
	font-size: .75rem;
	color: var(--summit-muted);
}

/* =========================================================================
   19. SERVICE AREAS
   ========================================================================= */

.area-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: .75rem;
}
.area-grid__item {
	display: flex;
	align-items: center;
	gap: .55rem;
	background: #fff;
	border: 1px solid var(--summit-border);
	border-radius: var(--summit-radius);
	padding: .65rem .9rem;
	font-weight: 500;
	color: var(--summit-ink);
	transition: border-color .18s var(--summit-ease);
}
.area-grid__item:hover { border-color: var(--summit-primary); }
.area-grid__item .bi { color: var(--summit-primary); }

/* =========================================================================
   20. STICKY MOBILE CTA BAR
   ========================================================================= */

.sticky-cta {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 1029; /* just under the sticky header */
	background: #fff;
	border-top: 1px solid var(--summit-border);
	box-shadow: 0 -6px 20px rgba(38, 33, 26, .1);
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	padding-bottom: env(safe-area-inset-bottom, 0);
	transition: transform .22s var(--summit-ease);
}
.sticky-cta--hidden { transform: translateY(110%); }

.sticky-cta__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .1rem;
	min-height: 58px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--summit-primary);
	text-decoration: none;
}
.sticky-cta__link .bi { font-size: 1.15rem; }
.sticky-cta__link:hover { color: var(--summit-primary-deep); }
.sticky-cta__cta {
	background: var(--summit-primary);
	color: #fff;
}
.sticky-cta__cta:hover { background: var(--summit-primary-deep); color: #fff; }

@media (max-width: 991.98px) {
	body.has-sticky-cta { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
}
/* Best-effort clearance if the admin bar filter is ever removed. */
@media (max-width: 782px) {
	body.admin-bar .sticky-cta { bottom: 46px; }
}

/* =========================================================================
   20b. PULL QUOTE, WHY BAND & SHOP VISUAL (grand-hybrid components)
   ========================================================================= */

/* Pull quote: plank photo at .5 under a .55 linen veil; the quote card is
   .95 warm-white, so quote text keeps ~14:1 regardless of the photo. */
.pullquote { position: relative; padding: clamp(3.5rem, 7vw, 5.5rem) 0; overflow: hidden; }
.pullquote__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .5;
}
.pullquote::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(244, 238, 227, .55);
}
.pullquote__card {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	background: rgba(253, 251, 248, .95);
	border-radius: var(--summit-radius-xl);
	border-top: 3px solid var(--summit-secondary);
	box-shadow: var(--summit-shadow-md);
	padding: 2.6rem 2rem 2.2rem;
}
.pullquote__mark {
	font-family: var(--summit-font-heading);
	font-size: 4rem;
	line-height: 0;
	color: var(--summit-secondary);
	display: block;
	height: 1.4rem;
}
.pullquote__text {
	font-family: var(--summit-font-heading);
	font-weight: 600;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	color: var(--summit-ink);
	text-wrap: balance;
	margin: 0 0 1rem;
}
.pullquote__attr {
	font-size: .9rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--summit-muted);
}

/* Why band: full-bleed craft photo under a heavy espresso scrim.
   Scrim .82–.88 over a white pixel → white text >= 8:1; .85-alpha body
   text >= 6:1; translucent pillars only deepen the backdrop. */
.why-band { position: relative; color: rgba(255, 255, 255, .85); overflow: hidden; background: var(--summit-dark); }
.why-band__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.why-band__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--summit-dark-rgb), .82) 0%, rgba(var(--summit-dark-rgb), .88) 100%);
}
.why-band__content { position: relative; z-index: 1; }
.why-band__pillar {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--summit-radius-lg);
	height: 100%;
}
.why-band__icon {
	width: 48px;
	height: 48px;
	border-radius: var(--summit-radius);
	background: var(--summit-secondary);
	color: var(--summit-dark);
	font-size: 1.3rem;
}
.why-band a:focus-visible,
.why-band button:focus-visible { outline-color: #fff; }

/* Shop visual: portrait plank photo over a flat oak-soft offset panel. */
.shop-visual { position: relative; }
.shop-visual__frame {
	position: absolute;
	inset: 16px -16px -16px 16px;
	background: var(--summit-secondary-soft);
	border-radius: var(--summit-radius-xl);
}
.shop-visual img {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--summit-radius-xl);
	box-shadow: var(--summit-shadow-lg);
}
@media (max-width: 991.98px) {
	.shop-visual__frame { display: none; }
}

.shop-steps {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	border-left: 1px solid var(--summit-hairline-soft);
	padding-left: 0;
}
.shop-steps .shop-step { padding-left: 0; }
.shop-steps .shop-step__num { margin-left: -17px; box-shadow: 0 0 0 4px var(--summit-bg); }

/* =========================================================================
   20c. SERVICES PAGE (sticky group nav, feature rows, includes, finish cards)
   ========================================================================= */

/* Sticky group sub-nav — tucks just under the scrolled site header. */
.service-nav {
	position: sticky;
	top: 64px;
	z-index: 1020;
	background: rgba(253, 251, 248, .94);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--summit-border);
}
.service-nav__list {
	display: flex;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.service-nav__list::-webkit-scrollbar { display: none; }
.service-nav__link {
	display: inline-block;
	white-space: nowrap;
	padding: .85rem 1.1rem;
	font-weight: 600;
	font-size: .95rem;
	color: var(--summit-muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color .18s var(--summit-ease), border-color .18s var(--summit-ease);
}
.service-nav__link:hover { color: var(--summit-primary); }
.service-nav__link.is-active {
	color: var(--summit-primary);
	border-bottom-color: var(--summit-secondary);
}

/* Flagship editorial photo/copy rows. */
.service-feature { margin-bottom: 3.5rem; }
.service-feature:last-child { margin-bottom: 0; }
@media (min-width: 992px) {
	.service-feature--flip .row { flex-direction: row-reverse; }
}
.service-feature__media { position: relative; }
.service-feature__frame {
	position: absolute;
	inset: 16px -16px -16px 16px;
	background: var(--summit-secondary-soft);
	border-radius: var(--summit-radius-xl);
}
.service-feature--flip .service-feature__frame { inset: 16px 16px -16px -16px; }
.service-feature__media img {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--summit-radius-xl);
	box-shadow: var(--summit-shadow-lg);
}
@media (max-width: 991.98px) {
	.service-feature__frame { display: none; }
	.service-feature { margin-bottom: 2.5rem; }
}
.service-feature__eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .78rem;
	font-weight: 600;
	color: var(--summit-accent-deep);
	margin-bottom: .6rem;
}

/* "What's included" checklist — light context by default, light-on-dark
   inside the .why-band groundwork band. */
.svc-includes { list-style: none; margin: 0; padding: 0; }
.svc-includes li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-bottom: .4rem;
	font-size: .95rem;
}
.svc-includes li:last-child { margin-bottom: 0; }
.svc-includes li .bi { color: var(--summit-success); margin-top: .18rem; flex: 0 0 auto; }
.svc-includes--sm li { font-size: .88rem; }
.why-band .svc-includes li { color: rgba(255, 255, 255, .9); }
.why-band .svc-includes li .bi { color: var(--summit-secondary); }
.svc-note { font-size: .82rem; color: var(--summit-muted); }
.why-band .svc-note { color: rgba(255, 255, 255, .72); }

/* Finish detail cards (extends .service-card). */
.finish-card {
	background: #fff;
	border: 1px solid var(--summit-border);
	border-top: 3px solid var(--summit-secondary);
	border-radius: var(--summit-radius-lg);
	box-shadow: var(--summit-shadow-sm);
	transition: transform .22s var(--summit-ease), box-shadow .22s var(--summit-ease);
}
.finish-card:hover { transform: translateY(-3px); box-shadow: var(--summit-shadow-md); }

/* =========================================================================
   21. FOOTER
   ========================================================================= */

.site-footer {
	background: var(--summit-dark);
	color: rgba(255, 255, 255, .72);
	border-top: 3px solid var(--summit-secondary);
}
.site-footer--joined { border-top: 0; }
.site-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-footer a:hover { color: var(--summit-secondary); }
.footer__heading {
	color: var(--summit-secondary);
	font-family: var(--summit-font-body);
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 1rem;
}
.footer-menu li a { transition: color .18s var(--summit-ease), padding-left .18s var(--summit-ease); }
.footer-menu li a:hover { padding-left: .35rem; }
.site-footer .footer-brand-name {
	font-family: var(--summit-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: #fff;
}
.site-footer .social-link {
	width: 36px;
	height: 36px;
	background: var(--summit-secondary);
	color: var(--summit-dark);
	transition: transform .18s var(--summit-ease), background-color .18s var(--summit-ease);
}
.site-footer .social-link:hover { transform: translateY(-2px); background: #fff; color: var(--summit-dark); }
.site-footer__legal { font-size: .82rem; color: rgba(255, 255, 255, .5); }
.site-footer__credit { font-size: .8rem; }
.site-footer__credit a:focus-visible { outline-color: #fff; }
.site-footer .footer-logo-img { max-height: 52px; width: auto; }

/* =========================================================================
   22. MOTION & ACCESSIBILITY
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
	.fade-up {
		opacity: 0;
		animation: summitFadeUp .8s var(--summit-ease) forwards;
	}
	.fade-up--delay-1 { animation-delay: .12s; }
	.fade-up--delay-2 { animation-delay: .24s; }
	.fade-up--delay-3 { animation-delay: .36s; }
	.fade-up--delay-4 { animation-delay: .48s; }

	/* Scroll reveal: the hidden state only exists once JS has added
	   `summit-js` to <html> (inline script in header.php), so no-JS users
	   and reduced-motion users always see content immediately. */
	html.summit-js .reveal {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity .7s var(--summit-ease), transform .7s var(--summit-ease);
		/* Failsafe: if theme.js never runs (failed request, earlier fatal),
		   everything force-reveals after 5s rather than staying invisible.
		   Past 5s, late reveals simply appear without the animation. */
		animation: summitRevealFailsafe .01s 5s forwards;
	}
	html.summit-js .reveal.is-inview {
		opacity: 1;
		transform: none;
	}
	/* Stagger within card rows, capped at .4s so long grids never drag. */
	html.summit-js .reveal-group > :nth-child(2) .reveal,
	html.summit-js .reveal-group > .reveal:nth-child(2) { transition-delay: .08s; }
	html.summit-js .reveal-group > :nth-child(3) .reveal,
	html.summit-js .reveal-group > .reveal:nth-child(3) { transition-delay: .16s; }
	html.summit-js .reveal-group > :nth-child(4) .reveal,
	html.summit-js .reveal-group > .reveal:nth-child(4) { transition-delay: .24s; }
	html.summit-js .reveal-group > :nth-child(n+5) .reveal,
	html.summit-js .reveal-group > .reveal:nth-child(n+5) { transition-delay: .32s; }
}

@keyframes summitFadeUp {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes summitRevealFailsafe {
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sticky-cta { transition: none; }
	.btn, .service-card, .contact-tile, .ba-card { transition: none; }
	.service-card__media img { transition: none; }
	.service-card--featured:hover .service-card__media img { transform: none; }
	.trust-stat .summit-icon { transition: none; }
	.trust-stat:hover .summit-icon { transform: none; }
	.cta-banner__btn, .btn-hero-ghost { transition: none; }
	.cta-banner__btn:hover, .btn-hero-ghost:hover { transform: none; }
	.finish-card { transition: none; }
	.finish-card:hover { transform: none; }
}

/* Visible focus everywhere; white variant on dark surfaces. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
	outline: 3px solid var(--summit-primary);
	outline-offset: 2px;
	border-radius: 4px;
}
.bg-dark a:focus-visible,
.bg-dark button:focus-visible,
.site-footer a:focus-visible,
.cta-banner a:focus-visible,
.cta-banner button:focus-visible,
.hero--cinematic a:focus-visible,
.hero--cinematic button:focus-visible,
.why-band a:focus-visible,
.why-band button:focus-visible,
.page-header--photo a:focus-visible {
	outline-color: #fff;
}

.visually-hidden-focusable:focus {
	background: var(--summit-primary);
	color: #fff;
	padding: .5rem 1rem;
	border-radius: 0 0 var(--summit-radius-sm) 0;
	z-index: 2000;
}