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

:root {
  --navy: #203A2E;
  --navy-light: #24402F;
  --navy-mid: #2A4836;
  --blue: #0F7D46;
  --blue-dark: #0B5E35;
  --blue-light: #3FA06B;
  --amber: #0F7D46;
  --amber-text: #0B5E35;      /* amber as TEXT on a light surface, 4.52:1 */
  --amber-text-lg: #0C6B3C;   /* amber as LARGE text on a light surface, 3.03:1 */
  --amber-dark: #0B5E35;
  --white: #FFFFFF;
  --off-white: #F3EEE2;
  --light-bg: #ECE6D8;
  --text-dark: #203A2E;
  --text-body: #203A2E;
  --text-muted: #656B79;          /* muted text on a LIGHT surface, 4.54:1 worst case */
  --text-muted-on-dark: #9FA4AE;  /* muted text on a DARK surface, 4.51:1 worst case */
  --link-on-light: #0B5E35;       /* link text on a LIGHT surface, 4.53:1 worst case */
  --link-on-dark: #5CB683;        /* link text on a DARK surface, 4.52:1 worst case */
  --border: #E2E8F0;
  --shadow-sm: 0 2px 8px rgba(34,32,28,0.08);
  --shadow-md: 0 8px 32px rgba(34,32,28,0.12);
  --shadow-lg: 0 16px 48px rgba(34,32,28,0.16);
  --radius: 8px;
  --radius-lg: 16px;
  --transition: 0.3s ease;
  --font-heading: 'Archivo', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  /* Semantic aliases, used in inline styles across pages */
  --surface: #24402F;
  --surface-alt: #2A4836;
  --surface-2: #1A2F22;
  --text: #FFFFFF;
  --gray: #9CA3AF;
  --gray-dark: #6B7280;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.75; color: var(--text-body); background: var(--navy); -webkit-font-smoothing: antialiased; }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); line-height: 1.1; color: var(--text-dark); font-weight: 700; }
h1 { font-size: clamp(2.5rem,6vw,4.5rem); }
h2 { font-size: clamp(2rem,4vw,3rem); }
h3 { font-size: clamp(1.4rem,2.5vw,2rem); }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blue-dark); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section--sm { padding: 3rem 0; }
.section--dark { background: #152417; color: var(--white); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: var(--white); }
.section--light { background: #ECE6D8; background-image: radial-gradient(circle at 15% 50%, rgba(63,160,107,0.06) 0%, transparent 50%), radial-gradient(circle at 85% 20%, rgba(15,125,70,0.05) 0%, transparent 40%); }
/* Warm off-color bands so alternating sections never read as white */
.section--alt { background: #D6D8C3; background-image: radial-gradient(circle at 15% 50%, rgba(63,160,107,0.05) 0%, transparent 50%), radial-gradient(circle at 85% 20%, rgba(15,125,70,0.04) 0%, transparent 40%); }
.section--stone { background: #E4DECE; }
.section--alt .section-eyebrow,.section--stone .section-eyebrow { color: var(--amber-text); }
.section--mid { background: #2A4836; color: var(--white); }
.section--mid h1,.section--mid h2,.section--mid h3,.section--mid h4 { color: var(--white); }
/* White cards sit inside dark/mid sections; keep their titles dark so they never go white-on-white */
.section--dark .service-card__title,.section--mid .service-card__title { color: var(--text-dark); }
.section--mid .section-eyebrow { color: var(--amber); }
.section--mid .section-desc { color: rgba(255,255,255,0.75); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 2rem; border-radius: var(--radius); font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; border: 2px solid transparent; transition: all var(--transition); white-space: nowrap; text-decoration: none; }
.btn--primary { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.btn--primary:hover { background: var(--amber-dark); border-color: var(--amber-dark); color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,166,35,0.4); }
.btn--blue { background: #1C6EA8; color: var(--white); border-color: #1C6EA8; }
.btn--blue:hover { background: #155A86; border-color: #155A86; color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,125,70,0.4); }
.btn--outline { background: transparent; color: var(--white); border-color: var(--white); }
.btn--outline:hover { background: var(--white); color: var(--navy); }
.btn--lg { padding: 1.125rem 2.5rem; font-size: 1.25rem; }

/* Nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--navy); box-shadow: 0 2px 16px rgba(0,0,0,0.25); transition: background var(--transition), box-shadow var(--transition), padding var(--transition); padding: 0.75rem 0; padding-top: calc(0.75rem + env(safe-area-inset-top)); }
.nav.scrolled { background: var(--navy); box-shadow: 0 2px 24px rgba(0,0,0,0.4); padding: 0.5rem 0; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav .nav__logo { background: #000; padding: 0.3rem 0.75rem 0.3rem 0.4rem; border-radius: 6px; }
.nav__logo-img { height: 44px; width: auto; display: block; }
.nav__menu { display: flex; align-items: center; gap: 0.1rem; list-style: none; }
.nav__menu > li > a { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255,255,255,0.85); padding: 0.4rem 0.5rem; border-radius: 4px; transition: all var(--transition); text-decoration: none; display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.nav__menu > li > a:hover,.nav__menu > li > a.active { color: var(--amber); }
.nav__dropdown { position: relative; }
.nav__dropdown-menu { position: absolute; top: calc(100% + 0.5rem); left: 0; background: var(--navy); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 0.5rem; min-width: 240px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--transition); list-style: none; }
.nav__dropdown:hover .nav__dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown-menu a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; font-size: 0.85rem; border-radius: 4px; color: rgba(255,255,255,0.75); transition: all var(--transition); }
.nav__dropdown-menu a:hover { color: var(--amber); background: rgba(255,255,255,0.06); }
.nav__dropdown-menu a i { color: var(--blue); width: 14px; font-size: 0.8rem; }
/* Group labels in the Services dropdown. aria-hidden keeps labels out of the link list. */
.nav__dropdown-group { padding: 0.6rem 0.75rem 0.2rem; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); pointer-events: none; }
.nav__dropdown-group:not(:first-child) { margin-top: 0.35rem; border-top: 1px solid rgba(255,255,255,0.09); padding-top: 0.6rem; }
/* Limit dropdown height and allow scrolling so all menu items remain reachable. */
.nav__dropdown-menu { min-width: 274px; max-height: min(70vh, 620px); overflow-y: auto;
  overscroll-behavior: contain; }
/* the mobile menu renders the dropdown inline, where a cap and a scrollbar would be wrong */
.nav__menu.open .nav__dropdown-menu { max-height: none; overflow-y: visible; }
.nav__actions { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.nav__phone { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--amber); text-decoration: none; letter-spacing: 0.02em; transition: color var(--transition); display: flex; align-items: center; gap: 0.4rem; }
.nav__phone:hover { color: var(--amber-dark); }
.nav__toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all var(--transition); }
.nav__toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
/* Use the menu toggle until the 80% container fits the full navigation. */
@media (max-width: 1535px) {
  .nav__menu { display: none; }
  .nav__toggle { display: flex; z-index: 1001; position: relative; }
}
/* Opened mobile/tablet menu overlay (applies whenever the hamburger opens it) */
.nav__menu.open { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--navy); align-items: center; justify-content: center; gap: 0.5rem; z-index: 999; padding: 2rem; overflow-y: auto; }
.nav__menu.open > li > a { font-size: 1.4rem; padding: 0.75rem 1.5rem; }
.nav__menu.open .nav__dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; padding: 0 0 0 1.5rem; }

/* Hero */
.hero { position: relative; min-height: 600px; background: var(--navy); display: flex; align-items: center; overflow: hidden; padding: 5.75rem 0 2.5rem; }
.hero__bg-pattern { position: absolute; inset: 0; background-image: linear-gradient(rgba(15,125,70,0.03) 1px,transparent 1px), linear-gradient(90deg,rgba(15,125,70,0.03) 1px,transparent 1px); background-size: 60px 60px; }
.hero__accent { position: absolute; right: -5%; top: 0; bottom: 0; width: 50%; background: linear-gradient(135deg,var(--navy-mid) 0%,transparent 60%); clip-path: polygon(15% 0,100% 0,100% 100%,0% 100%); }
.hero__amber-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(90deg,var(--amber) 0%,transparent 100%); }
.hero__content { position: relative; z-index: 2; max-width: 900px; }
.hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(15,125,70,0.16); border: 1px solid rgba(92,182,131,0.35); color: var(--blue-light); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 1rem; border-radius: 100px; margin-bottom: 1rem; }
.hero__badge i { color: var(--amber); font-size: 0.75rem; }
.hero__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(4.9rem,9.5vw,8rem); line-height: 0.85; color: #F3EEE2; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 1.1rem; }
.hero__title .accent { color: var(--amber); }
.hero__title .accent-blue { color: var(--blue); }
.hero__subtitle { font-size: 1.22rem; color: rgba(243,238,226,0.82); line-height: 1.5; max-width: 600px; margin-bottom: 1.25rem; }
.hero__actions { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.hero__phone-block { flex: 1; display: flex; flex-direction: column; }
.hero__phone-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.65); margin: 0; white-space: nowrap; }
.hero__phone-number { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.6rem,2.5vw,2rem); color: var(--amber); text-decoration: none; letter-spacing: 0.02em; line-height: 1; transition: color var(--transition); }
.hero__phone-number:hover { color: var(--amber-dark); }
/* Desktop: square the phone block to the Call Now button height (number top aligns to button top, availability bottom aligns to button bottom) and enlarge the number so it is not dwarfed. Mobile layout untouched. The Call Now button is not modified. */
@media (min-width: 769px) { .hero__actions { align-items: stretch; } .hero__phone-block { justify-content: space-between; padding: 0.15rem 0; } .hero__phone-number { font-size: clamp(2rem, 3vw, 2.6rem); } }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.hero__trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: rgba(255,255,255,0.72); }
.hero__trust-item i { color: var(--blue); font-size: 0.82rem; }

/* Trust Bar */
.trust-bar { background: var(--navy-mid); border-top: 3px solid var(--amber); padding: 2.5rem 0; }
.trust-bar__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; text-align: center; }
.trust-bar__grid--3 { grid-template-columns: repeat(3,1fr); max-width: 780px; margin: 0 auto; }
.trust-bar__item { padding: 1rem; border-right: 1px solid rgba(255,255,255,0.08); }
.trust-bar__item:last-child { border-right: none; }
.trust-bar__number { font-family: var(--font-heading); font-weight: 800; font-size: 3rem; color: var(--amber); line-height: 1; margin-bottom: 0.25rem; }
.trust-bar__label { font-size: 0.82rem; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.06em; }

/* Section Headers */
.section-header { margin-bottom: 3.5rem; text-align: center; }
.section-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.75rem; }
.section-eyebrow::before { content: ''; width: 2rem; height: 3px; background: var(--amber); flex-shrink: 0; border-radius: 2px; }
.section--dark .section-eyebrow { color: var(--blue-light); }
.section-title { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 1rem; }
.section-title .accent { color: var(--amber); }
.section-title .accent-blue { color: var(--blue); }
.section-desc { font-size: 1.08rem; color: var(--text-muted); max-width: 580px; margin: 0 auto; line-height: 1.7; }
.section--dark .section-desc { color: rgba(255,255,255,0.72); }

/* Services Grid */
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.guides-grid { grid-template-columns: repeat(2,1fr); }
.service-card { background: var(--white); border: 1px solid #C8DDEF; border-radius: var(--radius-lg); padding: 2rem; text-decoration: none; transition: all var(--transition); display: block; position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(34,32,28,0.10); }
.service-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--amber),transparent); transform: scaleX(0); transition: transform var(--transition); }
.service-card:hover { border-color: #C8DDEF; box-shadow: 0 20px 56px rgba(34,32,28,0.22); transform: translateY(-6px); }
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--amber), var(--amber-dark)); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; transition: all var(--transition); box-shadow: 0 4px 12px rgba(245,166,35,0.3); }
.service-card__icon i { font-size: 1.4rem; color: var(--navy); }
.service-card:hover .service-card__icon { transform: scale(1.08) rotate(-3deg); box-shadow: 0 6px 20px rgba(245,166,35,0.5); }
.service-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--text-dark); text-transform: uppercase; margin-bottom: 0.75rem; line-height: 1.2; }
.service-card__desc { font-size: 0.93rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.25rem; }
.service-card__link { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 0.4rem; transition: color var(--transition); }
.service-card:hover .service-card__link { color: var(--amber); }

/* Grouped Services */
.svc-scope { font-size: 1rem; color: var(--text-muted); max-width: 640px; margin: 1rem auto 0; line-height: 1.7; padding-top: 1rem; border-top: 1px solid rgba(34,32,28,0.12); }
.svc-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: start; }
.svc-group { background: var(--white); border: 1px solid #C8DDEF; border-radius: var(--radius-lg); padding: 2rem 2rem 1.75rem; box-shadow: 0 4px 20px rgba(34,32,28,0.10); position: relative; overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); }
.svc-group::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--amber), var(--blue-light) 70%, transparent); }
.svc-group:hover { box-shadow: 0 18px 48px rgba(34,32,28,0.18); transform: translateY(-4px); }
.svc-group__head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; padding-bottom: 1.1rem; border-bottom: 1px solid #E2ECE4; }
.svc-group__icon { flex-shrink: 0; width: 52px; height: 52px; background: linear-gradient(135deg, var(--amber), var(--amber-dark)); border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(15,125,70,0.28); }
.svc-group__icon i { font-size: 1.3rem; color: var(--white); }
.svc-group__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.15; margin: 0 0 0.35rem; }
.svc-group__intro { font-size: 0.92rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.svc-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.1rem 1.25rem; }
.svc-list li { margin: 0; }
.svc-list a { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.42rem 0; font-size: 0.95rem; color: var(--text-dark); line-height: 1.35; border-bottom: 1px solid transparent; transition: color var(--transition); }
.svc-list a::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; margin-top: 0.42rem; border-radius: 50%; background: var(--blue-light); transition: background var(--transition), transform var(--transition); }
.svc-list a:hover { color: var(--blue-dark); }
.svc-list a:hover::before { background: var(--amber); transform: scale(1.3); }
@media (max-width: 900px) { .svc-groups { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .svc-list { grid-template-columns: 1fr; } .svc-group { padding: 1.5rem 1.4rem; } }

/* Featured Service */
.featured-service { background: linear-gradient(140deg, #1A2F22 0%, #17301F 55%, #132318 100%); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 24px 72px rgba(0,0,0,0.7); border-radius: var(--radius-lg); padding: 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; overflow: hidden; }
.featured-service::before { content: ''; position: absolute; top: -80px; right: -80px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(245,166,35,0.11) 0%, transparent 65%); pointer-events: none; }
.featured-service::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.08); }
.featured-service__badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.28); color: var(--amber); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.875rem; border-radius: 100px; margin-bottom: 1.5rem; }
.featured-service__title { color: var(--white); font-size: clamp(1.8rem,3vw,2.5rem); margin-bottom: 1.25rem; }
.featured-service__desc { color: rgba(255,255,255,0.72); font-size: 1.03rem; line-height: 1.7; margin-bottom: 2rem; }
.featured-service__list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2.5rem; }
.featured-service__list li { display: flex; align-items: flex-start; gap: 0.75rem; color: rgba(255,255,255,0.82); font-size: 0.95rem; }
.featured-service__list li i { color: var(--amber); margin-top: 0.2rem; flex-shrink: 0; }
/* Service process card. */
.work-scope-card { width: 100%; background: linear-gradient(160deg, #1A2F22 0%, #132318 100%); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 8px 40px rgba(0,0,0,0.5); padding: 2rem; overflow: hidden; position: relative; }
.work-scope-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(245,166,35,0.07) 0%, transparent 70%); pointer-events: none; }
.work-scope-card__header { display: flex; align-items: center; gap: 1.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 0.5rem; }
.work-scope-card__icon-group { display: flex; gap: 0.625rem; background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.2); border-radius: 12px; padding: 0.875rem 1.125rem; flex-shrink: 0; }
.work-scope-card__icon-group i { font-size: 1.4rem; color: var(--amber); }
.work-scope-card__eyebrow { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.7); margin-bottom: 0.25rem; }
.work-scope-card__headline { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--white); }
.work-phases { display: flex; flex-direction: column; }
.work-phase { display: flex; gap: 1.125rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.work-phase:last-child { border-bottom: none; }
.work-phase__num { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: rgba(245,166,35,0.5); line-height: 1; flex-shrink: 0; width: 2.25rem; text-align: right; padding-top: 0.1rem; }
.work-phase__title { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700; color: var(--amber); margin-bottom: 0.3rem; }
.work-phase__desc { font-size: 0.95rem; color: rgba(255,255,255,0.8); line-height: 1.55; }
.work-scope-card__guarantee { display: flex; align-items: center; gap: 1rem; background: rgba(245,166,35,0.07); border: 1px solid rgba(245,166,35,0.2); border-radius: 10px; padding: 1rem 1.25rem; margin-top: 1.25rem; }
.work-scope-card__guarantee i { font-size: 1.4rem; color: var(--amber); flex-shrink: 0; }
.work-guarantee__label { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; color: var(--white); margin-bottom: 0.2rem; }
.work-guarantee__text { font-size: 0.8rem; color: rgba(255,255,255,0.58); line-height: 1.4; }

/* Why Grid */
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.why-item { text-align: center; padding: 2rem; background: linear-gradient(160deg, #2A4836 0%, #203A2E 100%); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.55); transition: all var(--transition); }
.why-item:hover { background: linear-gradient(160deg, #17301F 0%, #132318 100%); border-color: rgba(255,255,255,0.16); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.75); }
.why-item__icon { width: 68px; height: 68px; background: linear-gradient(135deg,var(--amber),var(--amber-dark)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; transform: rotate(4deg); transition: all var(--transition); box-shadow: 0 4px 16px rgba(245,166,35,0.3); }
.why-item__icon i { font-size: 1.55rem; color: var(--navy); transform: rotate(-4deg); transition: transform var(--transition); }
.why-item:hover .why-item__icon { transform: rotate(0deg) scale(1.12); box-shadow: 0 8px 28px rgba(245,166,35,0.5); }
.why-item:hover .why-item__icon i { transform: rotate(0deg); }
.why-item__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; color: var(--white); margin-bottom: 0.75rem; }
.why-item__desc { font-size: 0.93rem; color: rgba(255,255,255,0.72); line-height: 1.7; }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; align-items: center; }
.about-card { background: linear-gradient(160deg, #17301F 0%, #203A2E 55%, #132318 100%); border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center; position: relative; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06); }
.about-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.08); }
.about-card__avatar { width: 200px; height: 200px; margin: 0 auto 1.5rem; flex-shrink: 0; display: block; }
.about-card__avatar img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5)); }
.about-card__name { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; color: var(--white); text-transform: uppercase; margin-bottom: 0.2rem; }
.about-card__title { font-size: 0.82rem; color: var(--blue-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.75rem; }
.about-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; text-align: left; }
.about-stat { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); border-left: 3px solid var(--amber); border-radius: 8px; padding: 0.875rem; }
.about-stat__number { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--amber); line-height: 1; margin-bottom: 0.2rem; }
.about-stat__label { font-size: 0.72rem; color: rgba(255,255,255,0.72); text-transform: uppercase; letter-spacing: 0.05em; }
.about-card__stats--duo { grid-template-columns: 1fr 1fr; gap: 0; text-align: center; margin-top: 1.4rem; }
.about-card__stats--duo .about-stat { background: none; border: none; border-left: none; border-radius: 0; box-shadow: none; padding: 0.35rem 0.75rem; position: relative; }
.about-card__stats--duo .about-stat:first-child::after { content: ''; position: absolute; top: 12%; bottom: 12%; right: 0; width: 1px; background: rgba(255,255,255,0.14); }
.about-card__stats--duo .about-stat__number { font-size: 2.15rem; color: var(--amber); }
.about-card__stats--duo .about-stat__label { font-size: 0.74rem; margin-top: 0.35rem; }
@media (max-width: 768px) { .about-card__stats--duo .about-stat__number { font-size: 1.9rem; } }
.about-content h2 { margin-bottom: 1.25rem; }
.about-content p { margin-bottom: 1.25rem; color: rgba(255,255,255,0.82); }
.about-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0 2rem; list-style: none; }
.about-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; color: rgba(255,255,255,0.82); }
.about-list li i { color: var(--amber); margin-top: 0.2rem; flex-shrink: 0; }

/* Service Areas */
.areas-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; max-width: 820px; margin-left: auto; margin-right: auto; justify-content: center; }
.area-card { background: linear-gradient(160deg, #2A4836 0%, #203A2E 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 1.5rem 1rem; text-align: center; transition: all var(--transition); cursor: default; box-shadow: 0 8px 28px rgba(0,0,0,0.65); }
.area-card:hover { background: linear-gradient(160deg, #203A2E 0%, #17301F 100%); border-color: rgba(255,255,255,0.14); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.7); }
.area-card i { color: var(--amber); font-size: 1.05rem; margin-bottom: 0.6rem; display: block; transition: transform var(--transition); }
.area-card__name { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--white); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; }
.area-card__state { font-size: 0.78rem; color: rgba(245,166,35,0.8); text-transform: none; letter-spacing: 0; }
a.area-card { text-decoration: none; color: inherit; }
.area-card--primary { background: linear-gradient(160deg,#203A2E 0%,#17301F 100%); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 28px rgba(0,0,0,0.65); cursor: default; }
.area-card--primary .area-card__name { color: var(--amber); }
.area-card--primary .area-card__state { font-size: 0.68rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.1em; }
.area-card:hover i { transform: scale(1.25); }

/* CTA Section */
.cta-section { background: linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(245,166,35,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(245,166,35,0.025) 1px,transparent 1px); background-size: 40px 40px; }
.cta-section__inner { position: relative; }
.cta-section h2 { color: var(--white); font-size: clamp(2rem,5vw,3.5rem); margin-bottom: 1rem; }
.cta-section p { color: rgba(255,255,255,0.72); font-size: 1.08rem; max-width: 480px; margin: 0 auto 2.5rem; }
.cta-phone { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.5rem,6vw,4rem); color: var(--amber); text-decoration: none; letter-spacing: 0.02em; line-height: 1; margin-bottom: 0.5rem; transition: color var(--transition); }
.cta-phone:hover { color: var(--amber-dark); text-shadow: 0 0 40px rgba(245,166,35,0.45); }
.cta-phone-sub { font-size: 0.85rem; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2rem; }

/* Footer */
.footer { background: #203A2E; padding: 3rem 0 0; border-top: 4px solid var(--amber); }
.footer, .footer__heading, .footer__col h4, .footer__col h3 { color: rgba(255,255,255,0.72); }
.footer__heading { color: #fff; font-family: var(--font-heading); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; }
.footer__logo { max-width: 120px; margin-bottom: 1rem; }
.footer__desc { font-size: 0.93rem; color: rgba(255,255,255,0.85); line-height: 1.75; margin: 1.1rem 0 1.5rem; }
.footer__phone { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.35rem; color: var(--amber); text-decoration: none; margin-bottom: 0.5rem; transition: color var(--transition); }
.footer__phone:hover { color: var(--amber-dark); }
.footer__address { font-size: 0.88rem; color: rgba(255,255,255,0.82); line-height: 1.7; }
.footer__col h4, .footer__col h3,
.footer__brand h4, .footer__brand h3,
.footer__links h4, .footer__links h3,
.footer__contact h4, .footer__contact h3 { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.95); margin-bottom: 1.25rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.15); }
.footer__links { display: flex; flex-direction: column; gap: 0.75rem; list-style: none; }
.footer__links a { font-size: 0.93rem; color: rgba(255,255,255,0.82); text-decoration: none; transition: color var(--transition); }
.footer__links a:hover { color: var(--amber); }
.footer__links li { font-size: 0.93rem; color: rgba(255,255,255,0.82); }
.footer__hours { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0; }
.footer__hours li { font-size: 0.88rem; color: rgba(255,255,255,0.82); }
.footer__credentials { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }
.footer__credentials li { font-size: 0.88rem; color: rgba(255,255,255,0.82); }
.footer__contact p,
.footer__contact a { font-size: 0.93rem; color: rgba(255,255,255,0.82); }
.footer__contact a:hover { color: var(--amber); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 1.75rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer__copyright { font-size: 0.83rem; color: rgba(255,255,255,0.78); }
.footer__copyright a { color: var(--amber); text-decoration: none; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; }
.footer__legal a { font-size: 0.83rem; color: rgba(255,255,255,0.78); text-decoration: none; transition: color var(--transition); }
.footer__legal a:hover { color: var(--white); }

/* Page Hero */
.page-hero { background: var(--navy); padding: 8rem 0 4rem; position: relative; overflow: hidden; }
.breadcrumb + .page-hero, .breadcrumb + main > .page-hero:first-child { padding-top: 2.5rem; }
.page-hero__bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(15,125,70,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(15,125,70,0.03) 1px,transparent 1px); background-size: 60px 60px; }
.page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--amber),transparent); }
.page-hero__content { position: relative; z-index: 2; }
.page-hero__eyebrow { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.6rem; }
.page-hero__eyebrow::before { content: ''; width: 1rem; height: 2px; background: var(--amber); }
.page-hero__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.5rem,5vw,4rem); color: var(--white); text-transform: uppercase; line-height: 1; margin-bottom: 1.25rem; }
.page-hero__title .accent { color: var(--amber); }
.page-hero__desc { font-size: 1.08rem; color: rgba(255,255,255,0.75); max-width: 580px; line-height: 1.7; margin-bottom: 2rem; }

/* Service Page Layout */
.service-content { display: grid; grid-template-columns: 1fr 320px; gap: 4rem; align-items: start; }
.service-content__main { min-width: 0; }
.service-content__main h2 { margin-bottom: 1rem; }
.service-content__main p { color: var(--text-body); line-height: 1.8; margin-bottom: 1.25rem; }
.service-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; list-style: none; }
.service-list li { display: flex; align-items: flex-start; gap: 0.875rem; font-size: 1.02rem; color: var(--text-dark); background: var(--white); padding: 1rem 1.25rem; border-radius: 10px; border: 1px solid #BDD0E3; border-left: 5px solid var(--amber); box-shadow: 0 4px 20px rgba(34,32,28,0.13); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.service-list li:hover { transform: translateX(3px); box-shadow: 0 8px 28px rgba(34,32,28,0.17); }
.service-list li i { color: var(--amber); margin-top: 0.15rem; flex-shrink: 0; font-size: 1rem; }
.service-sidebar { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-card { background: #24402F; border-radius: var(--radius-lg); padding: 1.75rem; position: relative; overflow: hidden; }
.sidebar-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--amber),transparent); }
.sidebar-card--cta { background: linear-gradient(150deg, #203A2E 0%, #1A2F22 60%, #203A2E 100%); box-shadow: 0 8px 32px rgba(34,32,28,0.35), inset 0 1px 0 rgba(255,255,255,0.06); }
.sidebar-card--cta::before { height: 4px; background: linear-gradient(90deg, var(--amber) 0%, rgba(15,125,70,0.4) 50%, var(--amber) 100%); }
/* .sidebar-cta is used on standalone service pages, matches .sidebar-card--cta */
.sidebar-cta { background: linear-gradient(150deg, #203A2E 0%, #1A2F22 60%, #203A2E 100%); border-radius: var(--radius-lg); padding: 1.75rem; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(34,32,28,0.35), inset 0 1px 0 rgba(255,255,255,0.06); }
.sidebar-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--amber) 0%, rgba(15,125,70,0.4) 50%, var(--amber) 100%); }
.sidebar-cta h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; color: var(--white); margin-bottom: 1rem; }
.sidebar-cta .btn { width: 100%; justify-content: center; margin-bottom: 0.5rem; }
.sidebar-cta .sidebar-info-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.9); margin-bottom: 0.35rem; }
.sidebar-cta .sidebar-info-row i { color: var(--blue-light); font-size: 0.68rem; flex-shrink: 0; }
.sidebar-cta p { font-size: 0.88rem; color: rgba(255,255,255,0.82); line-height: 1.5; }
.sidebar-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; color: var(--white); margin-bottom: 0.4rem; }
.sidebar-card__sub { font-size: 0.875rem; color: rgba(255,255,255,0.88); margin-bottom: 0.75rem; }
.sidebar-info-rows { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.1rem; }
.sidebar-info-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.9); }
.sidebar-info-row i { color: var(--blue-light); font-size: 0.68rem; flex-shrink: 0; }
.sidebar-phone { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: var(--amber); text-decoration: none; transition: color var(--transition); margin-bottom: 1rem; }
.sidebar-phone:hover { color: var(--amber-dark); }
.sidebar-card .btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
.sidebar-areas { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-areas li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: rgba(255,255,255,0.92); }
.sidebar-areas li i { color: var(--blue-light); font-size: 0.72rem; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 0.5rem; max-width: 100%; margin: 1.5rem 0; }
.faq-item { border: 1px solid #CBD9E8; border-left: 3px solid var(--amber); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 6px rgba(34,32,28,0.05), 0 14px 32px rgba(34,32,28,0.11); transition: box-shadow var(--transition), transform var(--transition); }
.faq-item:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(34,32,28,0.05), 0 20px 44px rgba(34,32,28,0.15); }
.faq-question { width: 100%; text-align: left; padding: 1.125rem 1.5rem; background: var(--white); border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--text-dark); transition: background var(--transition); }
.faq-question:hover { background: #F4F9FF; }
.faq-question i { color: var(--amber); transition: transform var(--transition); flex-shrink: 0; font-size: 0.9rem; }
.faq-item.open { border-color: var(--blue); box-shadow: 0 4px 24px rgba(15,125,70,0.12); }
.faq-item.open .faq-question { background: #F0F7FF; color: var(--navy); }
.faq-item.open .faq-question i { transform: rotate(180deg); color: var(--blue); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: #F8FBFF; }
.faq-item.open .faq-answer { max-height: 500px; }
.faq-answer__inner { padding: 1rem 1.5rem 1.25rem; font-size: 0.95rem; color: var(--text-body); line-height: 1.8; border-top: 1px solid #D6E4F0; }

/* Breadcrumb */
.breadcrumb { padding: 0.625rem 0; background: var(--navy); }
.breadcrumb__list { display: flex; align-items: center; gap: 0.4rem; list-style: none; flex-wrap: wrap; }
.breadcrumb__list li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: rgba(255,255,255,0.60); }
.breadcrumb__list li::after { content: '/'; color: rgba(255,255,255,0.15); }
.breadcrumb__list li:last-child::after { display: none; }
.breadcrumb__list a { color: var(--blue-light); text-decoration: none; transition: color var(--transition); }
.breadcrumb__list a:hover { color: var(--amber); }
.breadcrumb__list li:last-child { color: rgba(255,255,255,0.82); font-weight: 500; }

/* Contact Form */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact-form { background: linear-gradient(150deg, #1A2F22 0%, #17301F 55%, #17301F 100%); border: 1px solid rgba(15,125,70,0.18); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: 0 8px 40px rgba(34,32,28,0.4), inset 0 1px 0 rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.contact-form::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--amber) 0%, rgba(15,125,70,0.4) 50%, var(--amber) 100%); }
.contact-form h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; margin-bottom: 1.75rem; color: var(--white); }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dark); margin-bottom: 0.5rem; }
.contact-form .form-group label { color: rgba(255,255,255,0.75); }
.form-group input,.form-group select,.form-group textarea { width: 100%; padding: 0.875rem 1rem; border: 1px solid #BDD4EE; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.95rem; color: var(--text-dark); background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); outline: none; }
.contact-form .form-group input,.contact-form .form-group select,.contact-form .form-group textarea { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); color: var(--white); }
.contact-form .form-group input::placeholder,.contact-form .form-group textarea::placeholder { color: rgba(255,255,255,0.3); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15,125,70,0.15); }
.contact-form .form-group input:focus,.contact-form .form-group select:focus,.contact-form .form-group textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,0.2); background: rgba(255,255,255,0.1); }
.contact-form .form-group select option { background: #17301F; color: var(--white); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-info { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-info-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: #fff; border-radius: var(--radius-lg); border: 1px solid #D9E4F0; box-shadow: 0 2px 6px rgba(34,32,28,0.05), 0 16px 38px rgba(34,32,28,0.12); transition: transform var(--transition), box-shadow var(--transition); }
.contact-info-item:hover { transform: translateY(-5px); box-shadow: 0 2px 6px rgba(34,32,28,0.05), 0 26px 52px rgba(34,32,28,0.16); }
.contact-info-item__icon { width: 44px; height: 44px; background: linear-gradient(135deg, #0F7D46 0%, #1A6FAB 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-item__icon i { color: var(--white); font-size: 1rem; }
.contact-info-item__label { font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.25rem; }
.contact-info-item__value { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--text-dark); }
.contact-info-item__value a { color: var(--blue); text-decoration: none; }
.contact-info-item__value a:hover { color: var(--amber); }
.contact-info-item__sub { font-size: 0.83rem; color: var(--text-muted); margin-top: 0.2rem; }
/* ===== Dark-luxury variants: cards / FAQ / service-list on section--dark (contact + services) ===== */
.section--dark .contact-info-item { background: linear-gradient(150deg,#203A2E 0%,#1A2F22 100%); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); }
.section--dark .contact-info-item:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07); }
.section--dark .contact-info-item__label { color: rgba(255,255,255,0.62); }
.section--dark .contact-info-item__value { color: #fff; }
.section--dark .contact-info-item__value a { color: var(--amber); }
.section--dark .contact-info-item__sub { color: rgba(255,255,255,0.66); }
.section--dark .faq-item { background: linear-gradient(150deg,#203A2E 0%,#1A2F22 100%); border: 1px solid rgba(255,255,255,0.12); border-left: 3px solid var(--amber); box-shadow: 0 12px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06); }
.section--dark .faq-item:hover { box-shadow: 0 16px 42px rgba(0,0,0,0.5); }
.section--dark .faq-question { background: transparent; color: #fff; }
.section--dark .faq-question:hover { background: rgba(255,255,255,0.03); }
.section--dark .faq-item.open { border-color: rgba(255,255,255,0.18); border-left-color: var(--amber); box-shadow: 0 12px 36px rgba(0,0,0,0.5); }
.section--dark .faq-item.open .faq-question { background: rgba(245,166,35,0.07); color: #fff; }
.section--dark .faq-item.open .faq-question i { color: var(--amber); }
.section--dark .faq-answer { background: rgba(0,0,0,0.20); }
.section--dark .faq-answer__inner { color: rgba(255,255,255,0.80); }
.section--dark .service-list li { background: linear-gradient(150deg,#203A2E 0%,#1A2F22 100%); border: 1px solid rgba(255,255,255,0.09); border-left: 5px solid var(--amber); color: #fff; box-shadow: 0 8px 26px rgba(0,0,0,0.4); }
.section--dark .service-list li:hover { box-shadow: 0 14px 38px rgba(0,0,0,0.5); }
.section--dark .service-list li a { color: #fff; font-weight: 600; }
.section--dark .service-list li a:hover { color: var(--amber); }
.section--dark .service-list li i { color: var(--amber); }
/* Readability on dark content sections (near-me group-b + any dark service-content) */
.section--mid .city-coverage-grid li a, .section--dark .city-coverage-grid li a { color: var(--blue-light); }
.section--mid .city-coverage-grid li a:hover, .section--dark .city-coverage-grid li a:hover { color: var(--amber); }
.section--mid .zip-badge, .section--dark .zip-badge { color: rgba(255,255,255,0.92); border-color: rgba(245,166,35,0.25); }
.section--mid .service-content__main a:not(.btn), .section--dark .service-content__main a:not(.btn) { color: var(--blue-light) !important; }
.section--mid .service-content__main, .section--dark .service-content__main { color: rgba(255,255,255,0.85); }
.section--mid .service-content__main h2, .section--mid .service-content__main h3, .section--dark .service-content__main h2, .section--dark .service-content__main h3 { color: #fff; }
.reviews-section--light .review-card__source { color: var(--navy) !important; background: rgba(34,32,28,0.05); border-color: rgba(34,32,28,0.15); }
.reviews-section--light .review-card__source i { color: var(--navy); }
.section--cta { background: linear-gradient(150deg,#2A4836 0%,#17301F 100%); color: var(--white); }
.section--cta h2, .section--cta h3 { color: #fff; }
.section--cta p { color: rgba(255,255,255,0.8); }
/* Dark inline callout boxes (background:var(--surface-2)) inside content: keep text/links readable */
[style*="surface-2"] { color: rgba(255,255,255,0.85); }
[style*="surface-2"] a:not(.btn) { color: var(--blue-light) !important; }
[style*="surface-2"] strong, [style*="surface-2"] b { color: #fff; }

/* Google Reviews Strip */
.reviews-strip { background: var(--navy); border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); padding: 1.75rem 0; }
.reviews-strip__inner { display: flex; align-items: center; gap: 1.75rem; justify-content: center; flex-wrap: wrap; }
.reviews-strip__google { display: flex; align-items: center; gap: 0.65rem; }
.reviews-strip__google i { font-size: 1.4rem; }
.reviews-strip__label { font-family: var(--font-heading); font-weight: 700; font-size: 0.88rem; color: rgba(255,255,255,0.72); text-transform: uppercase; letter-spacing: 0.07em; }
.reviews-strip__stars { color: #FBBC05; font-size: 1.2rem; letter-spacing: 0.04em; line-height: 1; }
.reviews-strip__score { font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem; color: var(--white); }
.reviews-strip__count { font-size: 0.88rem; color: rgba(255,255,255,0.62); }
.reviews-strip__divider { width: 1px; height: 30px; background: rgba(255,255,255,0.12); }
.reviews-strip__read { font-size: 0.9rem; color: var(--blue-light); text-decoration: none; font-weight: 600; transition: color var(--transition); }
.reviews-strip__read:hover { color: var(--white); }
.reviews-strip__write { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.35rem; background: var(--amber); color: var(--navy); font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; text-decoration: none; border-radius: var(--radius); transition: background var(--transition), transform var(--transition); }
.reviews-strip__write:hover { background: var(--amber-dark); transform: translateY(-1px); }
@media (max-width: 768px) { .reviews-strip__divider { display: none; } .reviews-strip__inner { gap: 1rem; } }

/* Reviews section */
.reviews-section { background: linear-gradient(180deg, #17301F 0%, #203A2E 50%, #132318 100%); padding: 5rem 0; }
.reviews-section__header { text-align: center; margin-bottom: 3rem; }
.reviews-section__header .section-eyebrow { display: inline-flex; margin-bottom: 0.75rem; }
.reviews-section__header h2 { color: var(--white); margin-bottom: 0.5rem; }
.reviews-section__header p { color: rgba(255,255,255,0.65); font-size: 0.95rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.review-card { background: linear-gradient(145deg, #203A2E 0%, #1A2F22 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); position: relative; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,0.5); }
.review-card::before { content: '"'; position: absolute; top: 0.5rem; right: 1rem; font-size: 4rem; color: rgba(245,166,35,0.12); font-family: Georgia, serif; line-height: 1; }
.review-card:hover { transform: translateY(-4px); box-shadow: 0 14px 44px rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.14); }
.review-card__header { display: flex; align-items: center; gap: 0.85rem; }
.review-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--amber), var(--amber-dark)); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 1rem; color: var(--navy); flex-shrink: 0; }
.review-card__meta { flex: 1; min-width: 0; }
.review-card__name { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-card__date { font-size: 0.78rem; color: rgba(255,255,255,0.72); }
.review-card__stars { color: #FBBC05; font-size: 0.9rem; letter-spacing: 0.06em; }
.review-card__text { font-size: 0.9rem; line-height: 1.65; color: rgba(255,255,255,0.88); flex: 1; }
.review-card__source { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.3rem 0.7rem; border-radius: 4px; align-self: flex-start; }
.review-card__source--google { background: rgba(66,133,244,0.15); color: #6BA3F5; border: 1px solid rgba(66,133,244,0.2); }
.review-card__source--housecall { background: rgba(245,166,35,0.1); color: var(--amber); border: 1px solid rgba(245,166,35,0.2); }
.review-card__source--verified { background: rgba(245,166,35,0.1); color: var(--amber); border: 1px solid rgba(245,166,35,0.2); }
.review-card__source--website { background: rgba(15,125,70,0.12); color: var(--blue-light); border: 1px solid rgba(15,125,70,0.2); }
.reviews-section__footer { text-align: center; margin-top: 2.5rem; }
/* Light variant of the reviews section (dark text on light, white cards). Same layout. */
.reviews-section--light { background: #E4DECE; }
.reviews-section--light .reviews-section__header h2 { color: var(--text-dark); }
.reviews-section--light .reviews-section__header p { color: var(--text-muted); }
.reviews-section--light .review-card { background: #FFFFFF; border: 1px solid #BDD0E3; box-shadow: 0 6px 22px rgba(34,32,28,0.08); }
.reviews-section--light .review-card::before { color: rgba(245,166,35,0.20); }
.reviews-section--light .review-card__name { color: var(--text-dark); }
.reviews-section--light .review-card__date { color: var(--text-muted); }
.reviews-section--light .review-card__text { color: var(--text-body); }
.reviews-section--light .btn--outline { color: var(--navy); border-color: var(--navy); }
.reviews-section--light .btn--outline:hover { background: var(--navy); color: #fff; }
@media (max-width: 1024px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .reviews-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 1rem; padding-bottom: 0.5rem; }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .review-card { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }
}
.reviews-strip-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); }
.reviews-strip-section__label { font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); margin-bottom: 1rem; }
.reviews-strip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.review-strip { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius); padding: 0.65rem 0.9rem; display: flex; align-items: center; gap: 0.75rem; }
.review-strip__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--amber), var(--amber-dark)); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 0.75rem; color: var(--navy); flex-shrink: 0; }
.review-strip__meta { flex: 1; min-width: 0; }
.review-strip__name { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-strip__date { font-size: 0.7rem; color: rgba(255,255,255,0.72); }
.review-strip__stars { color: #FBBC05; font-size: 0.78rem; flex-shrink: 0; letter-spacing: 0.04em; }
@media (max-width: 640px) { .reviews-strip-grid { grid-template-columns: 1fr; } }

.review-featured { background: linear-gradient(135deg, #1A2F22 0%, #17301F 60%, #17301F 100%); border: 1px solid rgba(255,255,255,0.1); border-left: 5px solid var(--amber); border-radius: var(--radius-lg); padding: 2.5rem 3rem; margin-bottom: 2.5rem; position: relative; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.review-featured::before { content: '"'; position: absolute; top: -1.5rem; left: 1.75rem; font-size: 10rem; color: rgba(245,166,35,0.09); font-family: Georgia, serif; line-height: 1; pointer-events: none; }
.review-featured__eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--amber); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.review-featured__eyebrow::before { content: ''; display: inline-block; width: 20px; height: 2px; background: var(--amber); }
.review-featured__text { font-size: 1.18rem; line-height: 1.75; color: rgba(255,255,255,0.92); font-style: italic; margin-bottom: 1.75rem; position: relative; z-index: 1; }
.review-featured__footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.review-featured__avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--amber), var(--amber-dark)); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; color: var(--navy); flex-shrink: 0; }
.review-featured__info { flex: 1; }
.review-featured__name { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--white); }
.review-featured__meta { font-size: 0.8rem; color: rgba(255,255,255,0.62); margin-top: 0.2rem; }
.review-featured__stars { color: #FBBC05; font-size: 1.05rem; letter-spacing: 0.06em; margin-left: auto; }
@media (max-width: 640px) { .review-featured { padding: 1.75rem 1.5rem; } .review-featured__text { font-size: 1rem; } .review-featured__stars { margin-left: 0; } }

/* Service/areas page tinted backgrounds */
.section:has(.service-content):not(.section--light):not(.section--dark):not(.section--mid) { background: linear-gradient(180deg, #EEF5FF 0%, #F5F9FF 100%); }
/* Explicitly exclude dark/mid so their backgrounds are never overridden */
.section:has(.services-grid):not(.section--light):not(.section--dark):not(.section--mid) { background: linear-gradient(180deg, #EEF5FF 0%, #F5F9FF 100%); }
.section--light:has(.services-grid) { background: linear-gradient(180deg, #EEF5FF 0%, #F5F9FF 100%); }

/* Service cards on dark/mid sections: white cards pop against dark background */
.section--dark .service-card,
.section--mid .service-card { box-shadow: 0 6px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06); }
.section--dark .service-card:hover,
.section--mid .service-card:hover { box-shadow: 0 20px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1); }

/* Utilities */
.text-center { text-align: center; }
.text-amber { color: var(--amber); }
.text-blue { color: var(--blue); }
.text-white { color: var(--white); }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }

/* Animations */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease, transform 0.4s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

@keyframes icon-float {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-5px); }
}
.why-item__icon { animation: icon-float 4s ease-in-out infinite; }
.why-item:hover .why-item__icon { animation: none; }

/* qq-card two-column layout (faq, credentials, specialty pages) */
.qq-card--two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.qq-card__title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin: 0 0 0.75rem; color: #ffffff; }
.qq-card__desc { font-size: 1rem; color: rgba(255,255,255,0.75); margin: 0 0 1.25rem; line-height: 1.65; }
.qq-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.qq-card__list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: rgba(255,255,255,0.85); }
.qq-card__list li i { color: var(--amber); font-size: 0.85rem; flex-shrink: 0; }

/* qq-card fallback, shows contact info while Tally iframe loads */
.qq-fallback { padding: 1.25rem 0 1rem; border-bottom: 1px solid #e8edf2; margin-bottom: 1.25rem; }
.qq-fallback__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #5a7080; margin: 0 0 0.35rem; }
.qq-fallback__phone { margin: 0 0 0.35rem; }
.qq-fallback__phone a { font-family: 'Archivo', sans-serif; font-size: 1.6rem; font-weight: 800; color: #203A2E; text-decoration: none; letter-spacing: -0.01em; }
.qq-fallback__phone a:hover { color: #c49200; }
.qq-fallback__sub { font-size: 0.85rem; color: #5a7080; margin: 0; }

/* Tally iframe, let dynamicHeight=1 control the height naturally */
iframe[data-tally-src],
iframe[src*="tally.so"] { width: 100%; border: none; display: block; }

/* qq-card__form: white card so form is always legible on dark backgrounds */
.qq-card__form { overflow: visible; background: #ffffff; border-radius: 14px; padding: 1.75rem; box-shadow: 0 16px 48px rgba(0,0,0,0.35); }

/* Responsive */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .areas-grid { grid-template-columns: repeat(3,1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-visual { max-width: 480px; width: 100%; margin: 0 auto; }
  .featured-service { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem; }
  .service-content { grid-template-columns: 1fr; }
  .service-sidebar { position: static; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 768px) {
  .qq-card--two-col { grid-template-columns: 1fr; gap: 2rem; }
  .nav__menu { display: none; }
  .nav__toggle { display: flex; z-index: 1001; position: relative; }
  .nav__menu.open { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--navy); align-items: center; justify-content: center; gap: 0.5rem; z-index: 999; padding: 2rem; }
  .nav__menu.open > li > a { font-size: 1.4rem; padding: 0.75rem 1.5rem; }
  .nav__menu.open .nav__dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; padding: 0 0 0 1.5rem; }
  .nav__actions { display: none; }
  .trust-bar__grid { grid-template-columns: repeat(2,1fr); }
  .trust-bar__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .trust-bar__item:nth-child(3),.trust-bar__item:nth-child(4) { border-bottom: none; }
  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: repeat(2,1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .featured-service { padding: 2rem 1.5rem; }
  .hero__phone-number { font-size: clamp(1.3rem, 8vw, 2.5rem); white-space: nowrap; }
  .hero__subtitle { margin-bottom: 1.25rem; }
  .form-row { grid-template-columns: 1fr; }
  .hero { min-height: 560px; padding-top: 4.75rem; }
}
@media (max-width: 480px) {
  .section { padding: 3.5rem 0; }
}

/* Mobile sticky CTA bar, single row: Call Us | Text Us | Submit */
.mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: none; background: #1C3A2C; border-top: 2px solid #17A34B; box-shadow: 0 -6px 24px rgba(0,0,0,0.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
@media (max-width: 767px) { .mobile-sticky-cta { display: block; } body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } }
.mobile-sticky-cta__row { display: flex; align-items: stretch; gap: 6px; width: 100%; }
.mobile-sticky-cta__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 0; font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; line-height: 1; border-radius: 8px; transition: background 0.15s, transform 0.15s; min-height: 44px; }
.mobile-sticky-cta__btn:active { transform: translateY(1px); }
.mobile-sticky-cta__btn--call { background: rgba(255,255,255,0.08); color: #ffffff; border: 1px solid rgba(255,255,255,0.28); }
.mobile-sticky-cta__btn--call:hover { background: rgba(255,255,255,0.16); color: #ffffff; }
.mobile-sticky-cta__btn--sms { background: rgba(255,255,255,0.08); color: #ffffff; border: 1px solid rgba(255,255,255,0.28); }
.mobile-sticky-cta__btn--sms:hover { background: rgba(255,255,255,0.16); }
.mobile-sticky-cta__btn--submit { flex: 1.35; background: #17A34B; color: #ffffff; box-shadow: 0 3px 12px rgba(23,163,75,0.45); }
.mobile-sticky-cta__btn--submit:hover { background: #148F42; color: #ffffff; }

/* Showcase card: match parent background on mobile to prevent color seam */
@media (max-width: 1024px) {
  .work-scope-card { background: rgba(255,255,255,0.04); }
}

/* About section on light background, ensure right column text is readable */
.section--light .about-content .section-title { color: var(--text-dark); }
.section--light .about-content p { color: var(--text-body); }
.section--light .about-list li { color: var(--text-body); }

/* About cards: full width on phones, centered */
@media (max-width: 768px) {
  .about-visual { max-width: 100%; }
  .about-card { padding: 1.75rem 1.25rem; }
  .about-card__avatar { width: 150px; height: 150px; }
  .about-card__name { font-size: 1.6rem; }
  .about-card__stats { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .about-stat__number { font-size: 1.35rem; }
  .about-stat__label { font-size: 0.68rem; }
  .about-content { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION v2, full audit fixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* Keep every link reachable in the scrollable phone, tablet and desktop menu. */
@media (max-width: 1535px) {
  .nav__menu.open { overflow-y: auto; justify-content: flex-start; padding-top: 5rem; }
}

/* Form inputs: minimum 44px touch target height */
.form-group input,
.form-group select,
.form-group textarea { padding: 0.9375rem 1rem; }

/* FAQ question: comfortable 48px touch target */
.faq-question { padding: 1.25rem 1.5rem; }

/* 640px: typography and small button fixes */
@media (max-width: 640px) {
  .breadcrumb__list li,
  .breadcrumb__list a { font-size: 0.875rem; }
  .sidebar-info-row { font-size: 0.875rem; }
  .review-card__text { font-size: 0.95rem; }
  .review-strip__date { font-size: 0.78rem; }
  .reviews-strip__write { padding: 0.65rem 1.35rem; font-size: 0.88rem; }
}

/* 480px: layout, grid, and spacing fixes */
@media (max-width: 480px) {
  /* Hero */
  .hero { min-height: 480px; padding: 4.75rem 0 3rem; }
  .hero__content { max-width: 100%; }
  .hero__subtitle { max-width: 100%; }

  /* Page hero */
  .page-hero { padding: 4.75rem 0 3rem; }

  /* Featured service */
  .featured-service { padding: 1.5rem; gap: 1.5rem; }

  /* Contact form */
  .contact-form { padding: 1.5rem; }

  /* Service cards */
  .service-card { padding: 1.25rem; }

  /* Areas grid: single column */
  .areas-grid { grid-template-columns: 1fr; }

  /* btn--lg: smaller padding */
  .btn--lg { padding: 1rem 1.5rem; font-size: 1.1rem; }

  /* About card avatar */
  .about-card__avatar { width: 140px; height: 140px; }

  /* qq two-col gap reduction */
  .qq-card--two-col { gap: 2rem; }

  /* Form row gap */
  .form-row { gap: 0.75rem; }

  /* Review strip: single column already handled, but boost readability */
  .review-card__text { font-size: 1rem; }
}

/* 375px: very small phones, aggressive breathing room */
@media (max-width: 375px) {
  .container { padding: 0 1rem; }
  .section { padding: 3rem 0; }
  .btn { padding: 0.75rem 1.25rem; font-size: 1rem; }
  .btn--lg { padding: 0.875rem 1.25rem; font-size: 1rem; }
  .hero { min-height: 440px; padding: 4.75rem 0 2.5rem; }
  .about-content .section-title { font-size: 1.6rem; }
  .page-hero { padding: 4.75rem 0 2.5rem; }
  .contact-form { padding: 1.25rem; }
  .about-card { padding: 2rem 1.25rem; }
  .about-card__avatar { width: 120px; height: 120px; }
  .service-card { padding: 1rem; }
  .featured-service { padding: 1.25rem; gap: 1.25rem; }
  .trust-bar__number { font-size: 2.25rem; }
}

/* qq-section: project submission quick-quote section background */
.qq-section {
  position: relative;
  background: linear-gradient(135deg, #203A2E 0%, #17301F 55%, #132318 100%);
  padding: 5rem 0;
  overflow: hidden;
}
@media (max-width: 768px) {
  .qq-section { padding: 3rem 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLOR SCHEME v25, improved visual hierarchy and card contrast
   ═══════════════════════════════════════════════════════════════════════════ */

/* why-items: warmer, more distinct from flat navy background */
.why-item {
  background: linear-gradient(160deg, #203A2E 0%, #17301F 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.why-item:hover {
  background: linear-gradient(160deg, #1A2F22 0%, #17301F 100%);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
}

/* area-cards: more distinct from section background */
.area-card {
  background: linear-gradient(160deg, #1A2F22 0%, #17301F 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
}
.area-card:hover {
  background: linear-gradient(160deg, #203A2E 0%, #17301F 100%);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 14px 40px rgba(0,0,0,0.65);
}
.area-card--primary {
  background: linear-gradient(160deg,#203A2E 0%,#17301F 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 28px rgba(0,0,0,0.65);
}

/* review-cards: dark fill keeps text readable; a soft neutral border + strong
   shadow define the card so it does not blend into the section */
.review-card {
  background: linear-gradient(145deg, #203A2E 0%, #1A2F22 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 34px rgba(0,0,0,0.6);
}
.review-card:hover {
  box-shadow: 0 14px 44px rgba(0,0,0,0.6);
  border-color: rgba(255,255,255,0.16);
}

/* about-card: soft neutral ambient depth */
.about-card {
  background: linear-gradient(160deg, #1A2F22 0%, #1A2F22 55%, #17301F 100%);
  box-shadow: 0 12px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.07);
}

/* section--mid: slightly more visual depth */
.section--mid {
  background: linear-gradient(170deg, #1A2F22 0%, #2A4836 50%, #17301F 100%);
}

/* reviews-section: deeper contrast for card legibility */
.reviews-section {
  background: linear-gradient(180deg, #17301F 0%, #17301F 40%, #17301F 100%);
}

/* sidebar-card: distinct from surrounding dark areas */
.sidebar-card {
  background: #1A2F22;
  border: 1px solid rgba(255,255,255,0.1);
}

/* featured-service: stronger amber ambient presence */
.featured-service {
  background: linear-gradient(140deg, #203A2E 0%, #17301F 55%, #132318 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 24px 72px rgba(0,0,0,0.65);
}

/* trust-bar: subtle amber warmth in gradient */
.trust-bar {
  background: linear-gradient(135deg, #1A2F22 0%, #2A4836 100%);
  border-top: 3px solid var(--amber);
  border-bottom: 1px solid rgba(245,166,35,0.12);
}

/* Links inside dark cards (why-item on --mid, about page service cards) */
.why-item__desc a { color: var(--blue-light); text-decoration: underline; text-decoration-color: rgba(107,184,236,0.35); }
.why-item__desc a:hover { color: var(--amber); text-decoration-color: rgba(245,166,35,0.5); }

/* section--dark: service card titles and desc stay dark (card is white), already correct */
/* section--dark section-title accent stays amber, already correct */
.section--dark .section-title .accent { color: var(--amber); }
.section--dark .section-eyebrow { color: var(--amber); }

/* hero: slightly richer background gradient */
.hero {
  background: linear-gradient(135deg, #17301F 0%, #203A2E 60%, #17301F 100%);
}

/* footer: deeper black anchor with amber top border */
.footer {
  background: linear-gradient(180deg, #24402F 0%, #203A2E 100%);
  border-top: 4px solid var(--amber);
}

/* Light section contrast improvements */
/* City coverage grid links: amber fails contrast on light bg, use accessible blue */
.section--light .city-coverage-grid li a { color: #1A6FAB; }
.section--light .city-coverage-grid li a:hover { color: var(--navy); text-decoration: underline; }
/* ZIP badges: flip from dark-on-light to light card for visual consistency */
.section--light .zip-badge { background: #FFFFFF; color: #203A2E; border: 1px solid #BDD0E3; }
/* Sidebar info row text readable on light background (near-me pages) */
.section--light .sidebar-info-row:not(.sidebar-cta .sidebar-info-row):not(.sidebar-card--cta .sidebar-info-row) { color: var(--text-muted); }
.section--light .sidebar-info-row:not(.sidebar-cta .sidebar-info-row):not(.sidebar-card--cta .sidebar-info-row) i { color: var(--blue-dark); }

/* ---- contrast-review contrast fixes (readable links on dark + light cards) ---- */
.service-content__main .service-list li a { color: #1A6FAB; font-weight: 600; }
.service-content__main a:not(.btn) { color: #1A6FAB; }
.service-content__main .service-list li a:hover { color: var(--text-dark); }
.service-sidebar .sidebar-card a:not(.btn) { color: #8FCBF2 !important; font-weight: 600; }
.service-sidebar .sidebar-card a:not(.btn):hover { color: #BFE3FB !important; }

/* Keyboard focus indicator (a11y) */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .faq-question:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 3px; }
/* form card: branded gold accent so it is not a stark white slab */
.qq-card { border-top: 1px solid rgba(255,255,255,0.08); }

/* Invisible photo-ready hero slot: shows nothing until a photo source is set */
.page-hero__media { display: none; }
.page-hero__photo { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,0.5); display: block; }
@media (min-width: 900px) {
  .page-hero:has(.page-hero__media img[src]:not([src=""])) .container,
  .page-hero.has-photo .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; }
  .page-hero:has(.page-hero__media img[src]:not([src=""])) .page-hero__media,
  .page-hero.has-photo .page-hero__media { display: block; }
}

/* Company "Who You Are Hiring" trust band (every service page) */
.about-band { background: #E4DECE; background-image: radial-gradient(circle at 15% 50%, rgba(15,125,70,0.07) 0%, transparent 50%), radial-gradient(circle at 85% 20%, rgba(245,166,35,0.05) 0%, transparent 40%); }
.about-band__inner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3.5rem; align-items: center; }
.about-band__eyebrow { display: inline-block; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8A5A00; margin-bottom: 0.75rem; }
.about-band__title { color: var(--text-dark); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.about-band__text p { color: var(--text-body); font-size: 1.05rem; line-height: 1.7; margin: 0; }
.about-band__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.about-stat-box { background: #FFFFFF; border: 1px solid #BDD0E3; border-radius: 10px; padding: 1.25rem 1rem; text-align: center; }
.about-stat-box__num { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 800; color: var(--navy); line-height: 1; margin-bottom: 0.4rem; }
.about-stat-box__label { font-size: 0.82rem; color: var(--text-muted); line-height: 1.3; }
@media (max-width: 768px) { .about-band__inner { grid-template-columns: 1fr; gap: 2rem; } }
.qq-section { scroll-margin-top: 6rem; }

/* Unified company card with shared company information */
.brand-card { padding: 2.5rem 2rem; }
.service-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.service-pair .service-focus { position: relative; padding: 0 0.5rem; }
.service-pair .service-focus:first-child::after { content: ''; position: absolute; top: 6%; bottom: 6%; right: -0.75rem; width: 1px; background: rgba(255,255,255,0.12); }
.service-pair .about-card__avatar { width: 132px; height: 132px; margin-bottom: 1rem; }
.service-pair .about-card__name { font-size: 1.4rem; }
.service-pair .about-card__title { margin-bottom: 0; }
.service-stats { margin-top: 1.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.10); }
@media (max-width: 768px) {
  .service-pair { grid-template-columns: 1fr; gap: 1.75rem; }
  .service-pair .service-focus:first-child::after { display: none; }
  .service-pair .service-focus:first-child { border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 1.75rem; }
  .service-pair .about-card__avatar { width: 120px; height: 120px; }
}

/* Services page: sticky desktop "Tell Us About Your Project" CTA card */
/* Slim floating "Tell us about your project" card. Vertically centered on the right.
   Shows only at >=1536px so it sits in the side gutter and never overlaps the 1200px content. */
.services-cta-card { position: fixed; right: 18px; bottom: 10vh; width: 158px; z-index: 90; background: linear-gradient(165deg, #1A2F22 0%, #17301F 55%, #17301F 100%); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 1rem 0.85rem 0.8rem; box-shadow: 0 16px 44px rgba(0,0,0,0.55); text-align: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; }
.services-cta-card.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.services-cta-card__icon { width: 36px; height: 36px; margin: 0 auto 0.55rem; border-radius: 9px; background: var(--amber); display: flex; align-items: center; justify-content: center; color: #132318; font-size: 0.95rem; }
.services-cta-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.08rem; line-height: 1.2; color: #fff; margin: 0 0 0.85rem; }
.services-cta-card__btn { display: block; width: 100%; text-align: center; justify-content: center; padding: 0.62rem 0.5rem; font-size: 1rem; letter-spacing: 0.02em; }
@media (max-width: 1535px) { .services-cta-card { display: none; } }

/* === Templated page readability + layout fixes (uniformity pass) === */
/* Dark inline info bands (var(--surface-2)) had dark-on-dark text: force readable light */
[style*="--surface-2"] { color: #e3ebf3; }
[style*="--surface-2"] p, [style*="--surface-2"] strong, [style*="--surface-2"] li { color: #e3ebf3 !important; }
[style*="--surface-2"] strong { color: #ffffff !important; }
/* Dark sidebar cards: force readable text, overriding low-contrast inline muted */
.service-content__sidebar .sidebar-cta p,
.service-content__sidebar [style*="text-muted"],
.service-sidebar .sidebar-card p[style*="text-muted"] { color: rgba(255,255,255,0.82) !important; }
/* Service link lists on the light main content: dark navy, readable on white (not light blue/amber) */
.service-content__main .service-list li a,
.service-content__main a:not(.btn) { color: #203A2E !important; font-weight: 600; }
.service-content__main a:not(.btn):hover { color: #1A2F22 !important; }

/* === Hero trust strip + dual actions (every page opens with orientation) === */
.hero-trust { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 1.25rem; }
.hero-trust__chip { display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.92); }
.hero-trust__chip i { color: var(--amber); font-size: 0.8rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.25rem; }
@media (max-width: 600px) { .hero-trust__chip { font-size: 0.76rem; padding: 0.35rem 0.7rem; } .page-hero__actions .btn { width: 100%; justify-content: center; } }

/* ===== Quote panel (qq) uniform rollout 2026-06-29 (centralized, overrides inline) ===== */
.qq-trust { display: flex; flex-direction: column; justify-content: space-between; }
.qq-section .qq-grid { align-items: stretch; }
.qq-section .qq-eyebrow { font-size: 1.02rem; letter-spacing: 0.18em; gap: 0.7rem; margin-bottom: 1.1rem; }
.qq-section .qq-eyebrow::before { width: 34px; }
.qq-section .qq-subhead { font-size: 1.22rem; line-height: 1.7; color: rgba(255,255,255,0.92); margin: 0 0 1.75rem; }
.qq-steps { display: flex; flex-direction: column; gap: 1.3rem; margin: 0 0 1.9rem; }
.qq-step { display: flex; gap: 1.05rem; align-items: flex-start; }
.qq-step__n { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(245,166,35,0.14); border: 1.5px solid rgba(245,166,35,0.5); color: var(--amber); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; line-height: 1; }
.qq-step__body { color: rgba(255,255,255,0.84); font-size: 1.06rem; line-height: 1.55; }
.qq-step__body strong { display: block; color: #fff; font-weight: 700; font-size: 1.2rem; margin-bottom: 0.2rem; letter-spacing: 0.005em; }
.qq-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.75rem; margin: 0 0 1.6rem; padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.qq-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.qq-stat__n { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.8rem; color: var(--amber); line-height: 1; }
.qq-stat__l { font-size: 0.92rem; color: rgba(255,255,255,0.68); line-height: 1.25; }
.qq-reassure { display: flex; align-items: flex-start; gap: 0.8rem; background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.24); border-radius: 11px; padding: 1.05rem 1.2rem; color: rgba(255,255,255,0.88); font-size: 1.05rem; line-height: 1.5; }
.qq-reassure i { color: var(--amber); font-size: 1.2rem; margin-top: 0.15rem; flex-shrink: 0; }
.qq-reassure strong { color: #fff; font-weight: 700; }
.qq-section .qq-call { margin-top: 1.5rem; }
.qq-call-right-title { font-family: 'Archivo', sans-serif; font-size: 1.05rem; font-weight: 700; color: #0F7D46; margin: 0 0 0.2rem; line-height: 1.3; letter-spacing: 0.02em; }
.qq-call-right-sub { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin: 0; letter-spacing: 0.04em; text-transform: uppercase; }
@media (min-width: 801px) { .qq-call-divider, .qq-call-right { display: none; } }
@media (max-width: 800px) {
 .qq-section .qq-call { display: flex; align-items: center; gap: 0; }
 .qq-call-left { flex: 1.35; min-width: 0; padding-right: 1.1rem; }
 .qq-call-left .qq-call-number { font-size: clamp(1.1rem, 5vw, 1.55rem); }
 .qq-call-divider { display: block; width: 1px; background: rgba(255,255,255,0.22); align-self: stretch; flex-shrink: 0; }
 .qq-call-right { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; padding-left: 1.1rem; }
}

/* === Accessibility additions (2026-07-07 post-audit remediation) === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--amber); color: #203A2E; padding: 0.75rem 1.25rem; font-weight: 700; border-radius: 0 0 6px 0; }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.nav__dropdown:focus-within .nav__dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* === Mobile readability tuning (2026-07-07) ===
   Phones only (<=640px). Desktop is unchanged. Lifts body + label sizes that sat below the
   16px comfort floor and raises soft white-on-dark opacity. Measured targets from the mobile
   font crawl: card/section/FAQ body 15px->17px, small labels ->15-16px, city name 16->18px,
   sticky-bar label 13->15px, dark-section body opacity 0.72-0.75 -> 0.85-0.88. */
@media (max-width: 640px) {
  .service-card__desc { font-size: 1.0625rem; line-height: 1.7; }
  .why-item__desc { font-size: 1.0625rem; color: rgba(255,255,255,0.88); line-height: 1.72; }
  .faq-answer__inner { font-size: 1.0625rem; line-height: 1.8; }
  .service-card__link { font-size: 1rem; }
  .area-card__name { font-size: 1.125rem; }
  .area-card__state { font-size: 0.9375rem; }
  .area-card--primary .area-card__state { font-size: 0.9375rem; }
  .page-hero__desc { color: rgba(255,255,255,0.85); }
  .section--dark .section-desc { color: rgba(255,255,255,0.85); }
  .section--mid .section-desc { color: rgba(255,255,255,0.85); }
  .review-card__text { font-size: 1.0625rem; line-height: 1.7; }
  .mobile-sticky-cta__btn { font-size: 15px; }
}

/* === Mobile readability round 2 (2026-07-07): 4 more small spots for mobile users ===
   Phones only (<=640px). Workmanship-Guarantee card body 13->15px (opacity 0.58->0.80), the
   "How We Work" eyebrow 11->13px, the call block label/hours/sub 12-14px->14-15px with stronger
   opacity, the About stat labels 11->14px (the smallest text on the site), card role 13->15px,
   footer address 14->15px and footer links 15->16px. Desktop unchanged. */
@media (max-width: 640px) {
  .work-guarantee__text { font-size: 0.9375rem; color: rgba(255,255,255,0.80); line-height: 1.55; }
  .work-guarantee__label { font-size: 0.9375rem; }
  .work-scope-card__eyebrow { font-size: 0.875rem; color: rgba(255,255,255,0.8); }
  /* .qq-call component is styled by an inline <style> in the page (loads after
     this sheet), so beat it with a higher-specificity ancestor selector. */
  .qq-call .qq-call-label { font-size: 0.9375rem; color: rgba(255,255,255,0.72); }
  .qq-call .qq-call-hours { font-size: 0.9375rem; color: rgba(255,255,255,0.75); }
  .qq-call .qq-call-right-sub { font-size: 0.875rem; color: rgba(255,255,255,0.78); }
  .about-stat__label { font-size: 0.875rem; color: rgba(255,255,255,0.88); }
  .about-card__title { font-size: 0.9375rem; }
  .footer__address { font-size: 0.9375rem; color: rgba(255,255,255,0.88); }
  .footer__links a { font-size: 1rem; }
  .footer__copyright { font-size: 0.875rem; }
  .footer__hours li { font-size: 0.9375rem; }
  .work-phase__desc { font-size: 0.9375rem; }
  .contact-info-item__sub { font-size: 0.9rem; }
  .contact-info-item__label { font-size: 0.875rem; }
  .reviews-strip-section__label { font-size: 0.875rem; }
  .hero__phone-label { font-size: 0.875rem; }
  .trust-bar__label { font-size: 0.875rem; }
  .about-stat-box__label { font-size: 0.875rem; }
  .review-featured__eyebrow { font-size: 0.875rem; }
  .review-card__date { font-size: 0.875rem; }
  .review-strip__date { font-size: 0.875rem; }
  .review-strip__name { font-size: 0.9375rem; }
  .ty-eyebrow { font-size: 0.875rem; }
  .footer__legal a { font-size: 0.875rem; }
}


/* clickable-card cues 2026-07-07: make whole-box clickability obvious */
.service-card, .area-card, .featured-service[data-fullclick] { cursor: pointer; }
.service-card:hover, .area-card:hover { transform: translateY(-4px); border-color: rgba(200,221,239,0.9); box-shadow: 0 10px 30px rgba(34,32,28,0.2); }
.featured-service[data-fullclick]:hover { box-shadow: 0 12px 34px rgba(0,0,0,0.5); }

/* outline repair 2026-07-28: content headings were promoted from h3 to h2 to
   close an h1->h3 skip. h2 is sized clamp(2rem,4vw,3rem) by the bare element
   rule, so this pins the promoted ones back to the h3 size they rendered at.
   Verified in Chromium against the pre-change build: identical box and metrics.

   The footer h4->h3 promotion deliberately has NO rule here. The existing
   ".footer__col h4, .footer__col h3, .footer__brand ..." group already lists
   both tags, so h3 inherits the correct 0.95rem treatment untouched. An earlier
   version of this block added ".footer__col h3 {font-size:1em;margin:1.33em 0}"
   which, being later in the file at equal specificity, OVERRODE that rule and
   pushed footer headings from 15.2px to 17px with wrong margins. Do not re-add
   it. */
h2.h-sub { font-size: clamp(1.4rem,2.5vw,2rem); }

/* city hub full service index, added 2026-07-29.
   Each city hub previously linked 9 of the 63 service+city pages that exist for
   it, leaving 864 pages reachable only from the sitemap. This styles the full
   categorised index that now sits below the 9 featured cards.
   All four class names were confirmed unused before being added, so nothing here
   can override an existing rule. Link colours follow the same convention as
   .city-coverage-grid so the index matches the rest of the site. */
.city-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.75rem 2rem; margin-top: 2.25rem; }
.city-index__group { min-width: 0; }
.city-index__heading { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--navy); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--amber); }
.city-index__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.city-index__list li { font-size: 0.93rem; line-height: 1.4; }
.section--light .city-index__list a { color: #1A6FAB; text-decoration: none; transition: color var(--transition); }
.section--light .city-index__list a:hover { color: var(--navy); text-decoration: underline; }
.section--mid .city-index__list a, .section--dark .city-index__list a { color: var(--blue-light); text-decoration: none; }
.section--mid .city-index__list a:hover, .section--dark .city-index__list a:hover { color: var(--amber); text-decoration: underline; }
@media (max-width: 600px) {
  .city-index { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Footer social icon row styling. */
.footer__social { display: flex; gap: 0.85rem; align-items: center; }
.footer__social a { color: var(--amber); font-size: 1.15rem; line-height: 1; text-decoration: none; transition: color var(--transition), transform var(--transition); }
.footer__social a:hover { color: var(--white); transform: translateY(-2px); }

/* mobile hardening, added 2026-07-29. Jay: mobile is priority, everything has
   to be perfect on mobile. Three defects found by rendering at 320px (iPhone
   SE class), all pre-existing, none visible at 390px or in any static check.

   1. THE MENU BUTTON WAS OFF-SCREEN AT 320px. The logo renders 290px wide
      (intrinsic width, height:44px, flex-shrink:0) plus its black pill padding,
      so the flex row pushed the hamburger to x=356 on a 320px viewport. A
      narrow-phone user could not open the menu at all. The logo now scales
      down at small widths and the row gap tightens.
   2. The hamburger's tap target was 32x24px against the 44px guideline. The
      spans stay 24px visually; padding widens the hit area to 44x44.
   3. Two rigid boxes forced sideways scroll at 320px: the review strip grid
      track computed to 339px on a 288px container because 1fr cannot shrink
      below min-content (minmax(0,1fr) can), and the service card's two-column
      stat grid made the card 311px on 288px available. */
.nav__toggle { padding: 14px 10px; margin: -10px -6px; }
@media (max-width: 480px) {
  .nav__inner { gap: 0.75rem; }
  .nav__logo-img { height: 34px; }
  .nav .nav__logo { padding: 0.25rem 0.5rem 0.25rem 0.3rem; }
}
@media (max-width: 640px) {
  .reviews-strip-grid { grid-template-columns: minmax(0, 1fr); }
  .review-strip { flex-wrap: wrap; }
}
@media (max-width: 375px) {
  .about-card__stats { grid-template-columns: 1fr; }
  .brand-card { padding: 2rem 1.25rem; }
}

/* Checklist-style lists use block layout for bold leads and inline links. Icon-led lists retain their flex layout. */
.service-list li:not(:has(i)) { display: block; }
.service-list li:not(:has(i)) strong { display: inline; }

/* footer tap targets, added 2026-07-29. WCAG 2.5.8 AA wants 24px minimum for
   targets in a list; the phone number is a primary action and gets the full
   44px. Padding, not font-size, so the visual rhythm is unchanged. */
footer a { display: inline-block; padding: 0.25rem 0; }
footer a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; padding: 0.2rem 0; }
.footer__social a { padding: 0.6rem; margin: -0.35rem; }

/* Work gallery grid layout and image sizing. */
.work-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.work-gallery__item { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: #e8edf2; box-shadow: var(--shadow-sm); }
.work-gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }
.work-gallery__pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.work-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.work-pair .work-gallery__item { border-radius: var(--radius); }
.work-pair__badge { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 1; font-family: var(--font-heading); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 4px; background: var(--navy); color: var(--white); opacity: 0.92; }
.work-pair .work-gallery__item:last-child .work-pair__badge { background: var(--amber); color: var(--navy); }
@media (max-width: 600px) {
  .work-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .work-gallery__pairs { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- mobile: remove the dead space above the fold ----------------
   MEASURED, not guessed. The fixed .nav is 66px tall at 375px and 390px.
   The offsets above it were 7rem (112px) and 7.5rem (120px), leaving 46 to
   54px of empty navy between the logo bar and the first thing a visitor
   reads, which pushed the headline and the offer below the fold on a phone.

   823 of 835 pages set the breadcrumb offset INLINE, as
   style="margin-top:7rem" or "5.5rem", so a class rule cannot win on its own
   and this needs !important. Fixing it here changes every page at once
   instead of editing 823 files.

   4.75rem is 76px: the 66px nav plus a deliberate 10px, so the spacing reads
   as intentional rather than as a gap. */
@media (max-width: 768px) {
  .breadcrumb[style] { margin-top: 4.75rem !important; }
}

/* ===== hero proof panel, 2026-09-23 ===== */
/* Hero panel link rows respond to pointer interaction. */
.hero .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.hero__panel { background: linear-gradient(160deg, rgba(26,45,66,0.92), rgba(34,32,28,0.96));
  border: 1px solid rgba(15,125,70,0.22); border-radius: 18px; padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.38); backdrop-filter: blur(2px); }
.hero__panel-rating { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; margin-bottom: 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.10); }
.hero__panel-score { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 800;
  line-height: 1; color: #fff; }
.hero__panel-stars { color: var(--amber); font-size: 1rem; letter-spacing: 0.12em; }
.hero__panel-count { color: rgba(255,255,255,0.68); font-size: 0.95rem; }
.hero__panel-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 0.6rem;
  border-radius: 12px; text-decoration: none; border: 1px solid transparent;
  transition: background var(--transition, 0.25s ease), border-color var(--transition, 0.25s ease),
              transform var(--transition, 0.25s ease); }
.hero__panel-row + .hero__panel-row { margin-top: 0.15rem; }
.hero__panel-row:hover, .hero__panel-row:focus-visible {
  background: rgba(15,125,70,0.10); border-color: rgba(15,125,70,0.32); transform: translateX(4px); }
.hero__panel-row:hover .hero__panel-go { transform: translateX(3px); color: var(--amber); }
.hero__panel-icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 10px; background: rgba(15,125,70,0.14); color: var(--blue-light, #7cc2f0); font-size: 1.05rem; }
.hero__panel-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.hero__panel-text strong { color: #fff; font-family: var(--font-heading); font-size: 1.16rem;
  font-weight: 700; letter-spacing: 0.01em; }
.hero__panel-text small { color: rgba(255,255,255,0.62); font-size: 0.88rem; }
.hero__panel-go { margin-left: auto; color: rgba(255,255,255,0.35); font-size: 0.75rem;
  transform: rotate(-90deg); transition: transform var(--transition, 0.25s ease), color var(--transition, 0.25s ease); }
.hero__panel-note { margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.62); font-size: 0.86rem; line-height: 1.5; }
@media (max-width: 1024px) {
  /* 1fr has an implicit `auto` minimum, which is min-content. A long condensed headline then
     forces the column wider than the phone: measured 512px inside a 390px container. minmax(0,1fr)
     lets the column shrink and the text wrap. */
  .hero .container { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero__panel { max-width: 560px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__panel-row, .hero__panel-go { transition: none; }
  .hero__panel-row:hover { transform: none; }
}

/* ===== Mora nav wordmark ===== */
/* Keep the logo lockup and accompanying text from colliding. */
.nav__logo { background: #000; padding: 0.3rem 0.85rem 0.3rem 0.4rem; border-radius: 8px;
  gap: 0.65rem; display: flex; align-items: center; }
.nav__logo-img { height: 46px; width: auto; display: block; }
.nav__wordmark { display: flex; flex-direction: column; line-height: 1;
  font-family: var(--font-heading); color: #fff; text-transform: uppercase;
  font-size: 1.32rem; font-weight: 700; letter-spacing: 0.01em; }
.nav__wordmark small { font-size: 0.6rem; letter-spacing: 0.2em; color: var(--amber);
  font-weight: 600; margin-top: 0.22rem; }
@media (max-width: 860px) {
  .nav__logo-img { height: 52px; }
  .nav__wordmark { font-size: 1.3rem; }
  .nav__wordmark small { font-size: 0.58rem; letter-spacing: 0.16em; }
}

/* The hero is now a two-column grid, so the display type must be sized to its column, not to the
   viewport. At 9vw the statement overflowed and pushed the third line below the fold. */
.hero__title { font-size: clamp(3.1rem, 5.2vw, 5.3rem) !important; letter-spacing: -0.03em !important; }
.hero__title > span:first-child { font-size: 0.34em !important; line-height: 1.18; }
@media (max-width: 1024px) { .hero__title { font-size: clamp(1.95rem, 8.2vw, 4.2rem) !important; } }
/* a long condensed word must be allowed to break rather than force the page wider than the screen */
.hero__title, .hero__subtitle, .page-hero__title { overflow-wrap: break-word; }
.hero, .hero .container { max-width: 100%; }

/* ===== content width, 2026-09-23 ===== */
/* Measured before changing: the container was a flat 1200px max-width, which reads as 83% of a
   1440 screen but only 69% at 1728 and 47% at 2560, so the site sat marooned in the middle of a
   large monitor. At 1024 it ran edge to edge with 24px of padding and no real gutter.

   A flat 80% would fix the wide screens and crush the narrow ones: 80% of a 390px phone is 312px,
   losing 78px of usable line. So the rule is proportional with a ceiling, and the phone keeps a
   fixed gutter instead. The ceiling exists because 80% of a 2560 monitor is 2048px, which is an
   unreadable line length for body copy. */
.container { width: min(80%, 1600px); max-width: none; margin-inline: auto; padding-left: 0; padding-right: 0; }
@media (max-width: 1100px) { .container { width: auto; max-width: 100%; padding-left: 28px; padding-right: 28px; } }
@media (max-width: 600px)  { .container { padding-left: 20px; padding-right: 20px; } }

/* ===== mobile hero actions and sticky bar, 2026-09-23 ===== */
/* Measured at 390: .hero__phone-block was 346px wide inside a 350px parent but positioned so its
   right edge landed at 533px, so the hours label ran off the screen. On a phone the phone number
   and its label belong under the button, full width, free to wrap. */
@media (max-width: 600px) {
  .hero__actions { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__phone-block { width: 100%; max-width: 100%; display: flex; flex-direction: column;
    align-items: flex-start; gap: 0.15rem; }
  .hero__phone-number { white-space: nowrap; }
  .hero__phone-label { white-space: normal; overflow-wrap: break-word; line-height: 1.35; }
  /* the three sticky buttons must share one baseline: one of them was wrapping to two lines */
  .mobile-sticky-cta__btn { font-size: 0.82rem; padding-left: 0.4rem; padding-right: 0.4rem;
    line-height: 1.1; text-align: center; }
}

/* ===== brand lockup and hero scale, 2026-09-23 ===== */
/* Navigation wordmark layout and sizing. */
/* .nav .nav__logo earlier in this file is specificity (0,2,0); a bare .nav__logo is (0,1,0) and
   loses no matter how late it appears. The plate stayed black until this matched that weight. */
.nav .nav__logo, .nav__logo { background: none; padding: 0; border-radius: 0; gap: 0;
  display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 1100px) { .nav .nav__logo { padding: 0; } }
.nav__wordmark { display: flex; flex-direction: column; line-height: 0.9;
  font-family: var(--font-heading); color: #fff; text-transform: uppercase;
  font-size: 2.25rem; font-weight: 800; letter-spacing: 0.005em; }
.nav__wordmark small { font-size: 0.38em; letter-spacing: 0.24em; color: var(--amber);
  font-weight: 700; margin-top: 0.4rem; }
.nav__logo:hover .nav__wordmark small, .nav__logo:focus-visible .nav__wordmark small { color: var(--blue-light, #7cc2f0); }
.nav__wordmark small, .nav__wordmark { transition: color var(--transition, 0.25s ease); }
@media (max-width: 860px) { .nav__wordmark { font-size: 1.8rem; } .nav__wordmark small { letter-spacing: 0.24em; } }

/* FOOTER: the mark now has room to be read. Jay: "big enough so that it's easy to see." */
.footer__mark { width: 168px; height: 168px; display: block; margin-bottom: 1.15rem; }
.footer__brandlink { display: inline-block; transition: transform var(--transition, 0.25s ease); }
.footer__brandlink:hover, .footer__brandlink:focus-visible { transform: translateY(-2px); }
@media (max-width: 860px) { .footer__mark { width: 132px; height: 132px; margin-inline: auto; } }

/* HERO SCALE: measured before changing. The longest line already filled 98% of its column at 1440
   and 93% at 1728, so a larger font alone would only have forced a wrap. The COLUMN was the
   constraint, so the split widens and the type grows with it. */
.hero .container { grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr); }
.hero__title { font-size: clamp(3.4rem, 6.1vw, 6.4rem) !important; }
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: minmax(0, 1fr); }
  .hero__title { font-size: clamp(1.95rem, 8.2vw, 4.2rem) !important; }
}
@media (prefers-reduced-motion: reduce) { .footer__brandlink:hover { transform: none; } }

/* Size each review card to its own content. */
.reviews-grid { align-items: start; }

/* Use a single-column review layout on mobile so cards fit their content without text truncation. */
@media (max-width: 700px) {
  .reviews-grid { display: grid; grid-template-columns: 1fr; overflow-x: visible; scroll-snap-type: none; }
  .reviews-grid > .review-card { width: auto; min-width: 0; scroll-snap-align: none; }
}

/* Collapsed review-wall styles for mobile. */
@media (max-width: 700px) {
  .review-card--more { display: none; }
  body.reviews-show-all .review-card--more { display: flex; }
}
@media (min-width: 701px) { .reviews-more-wrap { display: none; } }
.reviews-more-wrap { text-align: center; margin-top: 1.75rem; }


/* ============================================================================
   READABILITY FLOOR 2026-09-23. Jay: the body text is too small for older readers.
   Measured across 6 pages at 390 and 1440 before writing a line: 47% of rendered text
   sat under 16px on a phone and 77% under 16px on the reviews page at desktop width,
   because a mobile media query lifts card text and no desktop rule does. A 70 year old
   reading the reviews on a laptop was getting 14.4px.
   The root stays at 16px on purpose. Raising it would scale the H1, which is already
   40px on a phone, and that is how a layout breaks. This lifts reading text only.
   Headings, hero titles, section titles and the logo lockup are deliberately untouched.
   ============================================================================ */

/* the reading text: one floor, 17px, at every width */
.review-card__text,
.why-item__desc,
.service-card__desc,
.featured-service__desc,
.faq-answer__inner,
.sidebar-card__sub,
.about-card__title,
.area-card__name { font-size: 1.0625rem; line-height: 1.62; }

/* lists inside body copy read like body copy */
.section .container li,
.service-content li,
.about-list li,
.featured-service__list li,
.qq-card__list li { font-size: 1.0625rem; line-height: 1.6; }

/* names, dates and meta: legible, still secondary to the text they label */
.review-card__name { font-size: 1rem; }
.review-card__date,
.review-featured__meta,
.review-strip__date { font-size: 0.875rem; }
.review-strip__name { font-size: 1rem; }

/* the footer is where hours and the phone live, so it is not fine print */
.footer__desc,
.footer__links a,
.footer__hours,
.footer__hours li,
.footer__contact,
.footer__contact a,
.footer__credentials,
.footer__legal,
.footer__copyright { font-size: 1rem; line-height: 1.6; }

/* navigation. The base rule is .nav__menu > li > a at (0,1,2), so a bare .nav__menu a at (0,1,1)
   loses and changes nothing. Matching the specificity instead of reaching for !important. */
.nav__menu > li > a { font-size: 0.9375rem; }
.nav__dropdown-menu a { font-size: 0.9375rem; }

/* the smallest labels on the site, lifted off the floor rather than up to it */
.review-card__source,
.featured-service__badge,
.hero-trust__chip,
.hero__trust-item,
.reviews-strip__label,
.reviews-strip__write,
.about-stat__label,
.qq-stat__l,
.trust-bar__label { font-size: 0.84375rem; }

/* the sticky bar is the primary action on a phone */
.mobile-sticky-cta__btn { font-size: 0.875rem; }


/* ============================================================================
   COPY PANELS 2026-09-23. The service and location pages are two-column, a main
   copy column beside a sidebar, all inside one section--light. On a phone the sidebar
   stacks underneath and the main column reads as one unbroken 11 to 13KB run of text.
   Splitting it into full-width bands would break the sidebar on 53 pages, so instead
   each h2 group becomes its own panel and every other one is tinted. Layout untouched.
   ============================================================================ */
.copy-panel {
  background: #FFFFFF;
  border: 1px solid rgba(34,32,28,0.08);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  margin: 0 0 1.5rem;
  box-shadow: 0 2px 14px rgba(34,32,28,0.05);
}
.copy-panel--alt { background: #F3F6FA; border-top-color: var(--blue, #2F6FB5); }
.copy-panel > h2:first-child { margin-top: 0; }
.copy-panel > :last-child { margin-bottom: 0; }
/* the FAQ accordion and the step list bring their own surfaces, so the panel steps back */
.copy-panel:has(> .faq-list),
.copy-panel:has(> .qq-steps) { background: transparent; border: 0; box-shadow: none; padding: 0.5rem 0 0; }
@media (max-width: 700px) { .copy-panel { padding: 1.4rem 1.15rem; margin-bottom: 1.15rem; } }

/* Set heading colors for unmodified dark sections. Exclude sections with explicit backgrounds, modifiers and the light-gradient content patterns. */
.section:not([class*="section--"]):not([style*="background"]):not(:has(.service-content)):not(:has(.services-grid))
  :is(h1, h2, h3, .section-title) { color: var(--white); }

/* Amber text on the three surfaces measured to render LIGHT. #0F7D46 scores 1.72:1 to 2.03:1 there,
   against a 4.5:1 bar for body text and 3:1 for large text, which is why the 15px section eyebrows
   and the amber half of the big headings were hard to read. Every other surface on this site is
   dark, where #0F7D46 is 8.58:1, so the default is deliberately left alone and anything not named
   here keeps the bright brand amber. */
.section--light .section-eyebrow,
.reviews-section--light .section-eyebrow { color: var(--amber-text); }
.section--light .section-title .accent,
.section--light .page-hero__title .accent,
.reviews-section--light .section-title .accent { color: var(--amber-text-lg); }
.section--light .section-eyebrow::before,
.reviews-section--light .section-eyebrow::before { background: var(--amber-text); }

/* Amber text, pass 2. The sweep found 29 more amber-on-light elements the .section--light rules
   could not reach, because the light surface comes from somewhere else:
     .section:has(.services-grid) / :has(.service-content)  a light gradient on a bare .section,
        carrying the same :not() guards as those background rules so a --mid/--dark section, which
        is dark again after the line-494 fix, is never caught here
     .service-card                 background: var(--white), line 154, so a card is light inside a
        dark section too, which is why .section--mid .service-card__title is already --text-dark
     .ty-next                      a white panel on /thank-you */
.section:has(.services-grid):not(.section--dark):not(.section--mid) .section-eyebrow,
.section:has(.service-content):not(.section--dark):not(.section--mid) .section-eyebrow,
.ty-eyebrow { color: var(--amber-text); }
.section:has(.services-grid):not(.section--dark):not(.section--mid) .section-title .accent,
.section:has(.service-content):not(.section--dark):not(.section--mid) .section-title .accent { color: var(--amber-text-lg); }
.service-card__link { color: var(--amber-text); }

/* Line 402 colours .service-content__main white inside a --mid/--dark section, but line 296 targets
   .service-content__main p directly and so beats it by inheritance. Latent until the line-494 fix
   restored those sections to the dark background they were designed for: before that they rendered
   light, so the grey paragraph looked right while the heading above it was white on white.
   service-content__main p on a dark section. */
.section--mid .service-content__main > p,
.section--dark .service-content__main > p { color: rgba(255,255,255,0.85); }
/* li is deliberately NOT included: .service-list li paints its own white card (line 296 block), so
   whitening list items turned "a service-list label" into white on white at 1:1. */

/* GHL photo form. form_embed.js wraps the iframe and parks it at left:-9999px until the form posts an iFrameSizer message back. When that handshake never completes (Chrome 152, 2026-09-21) the card stays blank. The iframe is never allowed to hide. */
.qq-card iframe[data-form-id], .qq-card .ep-wrapper iframe { position: static !important; left: auto !important; top: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: block !important; width: 100% !important; min-height: 1400px; }
/* measured natural form heights 2026-09-21: 502px wide 1363, 270px 1448, 240px 1514, 200px 1636. The card leaves about 120px of chrome on phones. */
@media (max-width: 480px) { .qq-card iframe[data-form-id] { min-height: 1480px; } }
@media (max-width: 400px) { .qq-card iframe[data-form-id] { min-height: 1530px; } }
@media (max-width: 360px) { .qq-card iframe[data-form-id] { min-height: 1660px; } }
.qq-card .ep-iFrameContainer, .qq-card .ep-wrapper { display: block !important; width: 100% !important; }

/* --text-muted #6B7280 and --blue #0F7D46 were each doing two jobs, used as text on light surfaces
   AND on dark ones. Measured across all 68 routes: muted text ran 2.90:1 to 4.49:1 and links 2.50:1
   to 2.94:1, all under the 4.5:1 bar. The tokens above now split by surface. The dark selector list
   below is the same one already proven correct for the heading fix, so it is not a fresh guess. */
.section--mid, .section--dark, .reviews-section, .hero, .page-hero, .qq-section, .reviews-strip,
footer,
/* surface-alt sections: 28 sections declare their dark background inline as
   style="background:var(--surface-alt)", which no class selector can reach. Their paragraphs also
   carry an inline color:var(--text-muted), so they read the token rather than a rule. */
section[style*="surface-alt"],
.section:not([class*="section--"]):not([style*="background"]):not(:has(.service-content)):not(:has(.services-grid)) {
  --text-muted: var(--text-muted-on-dark);
}
.section--mid a:not(.btn):not([class*="card"]), .section--dark a:not(.btn):not([class*="card"]),
.reviews-section a:not(.btn):not([class*="card"]), footer a:not(.btn) { color: var(--link-on-dark); }
.section--light a:not(.btn):not([class*="card"]),
.reviews-section--light a:not(.btn):not([class*="card"]) { color: var(--link-on-light); }

/* line 909 forces #203A2E on .service-content__main links with !important. That is 7.92:1 on a light
   surface and 1.21:1 on a dark one, which is why the phone link on /faq measured 1.81:1. Scoped. */
.section--mid .service-content__main a:not(.btn),
.section--dark .service-content__main a:not(.btn) { color: var(--link-on-dark) !important; }

/* the Google source chip sat at 4.39:1 on its own navy chip, 0.11 short */
.review-card__source--google { color: #6FA6F5; }
/* this note renders on the dark reviews band, so it needs the dark muted value, not #203A2E */
.reviews-grid__note { color: var(--text-muted-on-dark); }

/* LIGHT ISLANDS. Setting --text-muted on a dark section cascades into the light cards nested inside
   it, so .service-card__desc went to 2.5:1 light-grey-on-white. Every element that paints its own
   light background resets the token. The list is derived from the stylesheet itself: each of these
   selectors sets background to var(--white), #fff or a near-white, so a card is light no matter how
   dark the section around it is. */
.service-card, .review-card, .qq-card__form, .faq-question, .faq-answer, .service-list li,
.contact-info-item, .about-stat-box, .about-band, .copy-panel--alt, .work-gallery__item,
.form-group input, .form-group select, .form-group textarea, .section--light .zip-badge {
  --text-muted: #656B79;
}
/* A link inside a WHITE card inside a DARK section: the section-scoped rule above is (0,3,1) and
   out-specifies these (0,1,2), so "a service link" rendered #5CB683 on white at
   2.49:1. These are leaf overrides of a section-level default, which is what !important is for, and
   line 909 already uses it for exactly this conflict. */
.service-card a:not(.btn), .review-card a:not(.btn), .faq-answer a:not(.btn),
.contact-info-item a:not(.btn), .service-list li a,
.qq-card__form a:not(.btn), .about-stat-box a:not(.btn) { color: var(--link-on-light) !important; }

/* one-offs measured short of the bar */
.privacy-meta, .page-meta { color: var(--text-muted-on-dark); }

/* final contrast pass, each item measured not guessed */

/* line 395 makes .section--dark .service-list li a DARK card and line 397 gives its link white.
   The light-island !important rule above clobbered both, so that link rendered #0B5E35 on #152417
   at 2.46:1. The original intent is re-asserted at the same weight. */
.section--dark .service-list li a { color: #fff !important; }
.section--dark .service-list li a:hover { color: var(--amber) !important; }

/* .cta-section declares its near-black background inline as var(--dark,#132318), which no class
   rule reaches, so its muted paragraph sat at 3.71:1. */
.cta-section { --text-muted: var(--text-muted-on-dark); }

/* Line 414 already intends a light link inside a dark [style*="surface-2"] callout, but line 909
   (.service-content__main a:not(.btn), #203A2E !important) comes later and out-specifies it, which
   clobbers line 414 and put the /faq phone link at #203A2E on #111, 1.81:1. Re-asserted above both
   at (0,3,1) with the measured dark link colour. */
.service-content__main [style*="surface-2"] a:not(.btn),
.service-content__main [style*="--surface-2"] a:not(.btn) { color: var(--link-on-dark) !important; }


/* ============================================================================================
   Imported-page styles ported from main.

   The 11 pages imported from main bring their content's own vocabulary: content-block,
   content-title, section-header--left, the sidebar-after / sidebar-quote / brand-mini cards,
   steps, towns, table-wrap and the .ic icon span, 165 uses of that one alone. This tree styled
   NONE of them, so the content rendered unstyled and the gate measured div.sidebar-after__title
   at 1.38:1.

   ⛔ A FIRST ATTEMPT PORTED ANY RULE MENTIONING ONE OF THOSE CLASSES AND MADE THINGS WORSE.
      It dragged in .faq-answer__inner, .section--light a and .content-block .faq-list, which
      restyle elements this tree already has, with main's editorial colours. Contrast went from 22
      failing page/viewports to 102, now on existing pages like /contact. Reverted.

   A rule is taken only if EVERY class in its selector is one of the missing ones. That rejected 22
   rules and kept 44. sidebar-card--review is deliberately not covered: it only ever appears with
   .sidebar-card, which this tree already styles.
   ============================================================================================ */
.section-header--left { text-align: left; margin-bottom: 2rem; }
.steps { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: s; max-width: 60ch; }
.steps li { counter-increment: s; position: relative; padding-left: 4rem; margin: 0 0 1.5rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(201,154,46,0.14); border: 1.5px solid rgba(201,154,46,0.6); color: var(--amber); font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.steps li h3 { margin: 0.25rem 0 0.4rem; font-size: 1.25rem; }
.steps li p { margin: 0; }
.towns { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.towns li { margin: 0; }
.towns a { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--navy-light); border: 1px solid rgba(201,154,46,0.3); color: var(--white); border-radius: 10px; padding: 0.75rem 1.1rem; font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.95rem; transition: all var(--transition); }
.towns a::before { content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--amber); }
.towns a:hover { border-color: var(--amber); transform: translateY(-2px); color: var(--white); }
.table-wrap { overflow-x: auto; margin: 1.25rem 0 1.75rem; }
.work-photo { margin: 0; }
.work-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.work-photo figcaption { font-size: 0.95rem; color: var(--text-muted); margin-top: 0.75rem; }
.steps li { padding-left: 3.4rem; }
.steps li::before { width: 36px; height: 36px; font-size: 1rem; }
}
.content-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; margin-bottom: 1rem; }
.content-block { margin-bottom: 3.5rem; }
.content-block:last-child { margin-bottom: 0; }
.content-block .section-header--left { margin-bottom: 1.25rem; }
.content-block--dark { background: var(--navy-mid); border-radius: var(--radius-lg); padding: 2rem; }
.content-block--dark .content-title, .content-block--dark h3 { color: var(--white); }
.content-block--dark p, .content-block--dark li { color: rgba(255,255,255,0.85); }
.content-block--dark .towns a { background: var(--navy-light); color: var(--white); border-color: rgba(201,154,46,0.3); }
.content-block--dark { padding: 1.5rem; }
.towns { gap: 0.5rem; }

/* ============================================================================================
   Older-reader readability pass 2 (2026-10-23)
   Targeted size and contrast lifts for labels and meta the earlier floor pass left at
   desktop-only small values. Appended last so source order wins at equal specificity.
   Narrow by design: review dates, process-step body, guarantee text, breadcrumbs, sidebar
   info rows, contact sub-lines, the hero proof panel, and the quote-panel sub-label.
   ============================================================================================ */
.review-card__date,
.review-featured__meta,
.review-strip__date { font-size: 0.95rem; }
.review-featured__meta { color: rgba(255,255,255,0.78); }
.work-phase__desc { font-size: 1rem; color: rgba(255,255,255,0.86); }
.work-guarantee__text { font-size: 0.9375rem; color: rgba(255,255,255,0.82); }
.breadcrumb__list li { font-size: 0.875rem; color: rgba(255,255,255,0.74); }
.breadcrumb__list li:last-child { color: rgba(255,255,255,0.9); }
.sidebar-info-row,
.sidebar-cta .sidebar-info-row,
.sidebar-cta p { font-size: 0.95rem; }
.contact-info-item__sub { font-size: 0.9375rem; }
.hero__panel-count { font-size: 1rem; color: rgba(255,255,255,0.78); }
.hero__panel-text small { font-size: 0.95rem; color: rgba(255,255,255,0.74); }
.hero__panel-note { font-size: 0.95rem; color: rgba(255,255,255,0.74); }
.qq-call-right-sub { font-size: 0.85rem; color: rgba(255,255,255,0.74); }
.area-card--primary .area-card__state { color: rgba(255,255,255,0.74); }
}
.work-photo img { aspect-ratio: 1 / 1; object-position: center; }
.hero-image { max-width: 560px; }
figcaption, .work-photo figcaption { font-size: 1rem; }
.sidebar-card--brand .brand-mini { display: flex; gap: 0.6rem; margin-bottom: 0.85rem; }
.sidebar-card--brand .brand-mini img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 15%; box-shadow: 0 0 0 3px var(--amber); display: block; }
.sidebar-card--brand p { font-size: 0.95rem; line-height: 1.55; color: rgba(255,255,255,0.88); margin: 0 0 0.75rem; }
.sidebar-quote { margin: 0 0 0.75rem; padding: 0; border: 0; }
.sidebar-quote p { font-size: 0.98rem; line-height: 1.6; color: rgba(255,255,255,0.92); margin: 0 0 0.5rem; font-style: italic; }
.sidebar-quote p::before { content: '"'; }
.sidebar-quote p::after { content: '"'; }
.sidebar-quote footer { font-size: 0.9rem; color: rgba(255,255,255,0.78); }
.sidebar-quote footer strong { color: var(--white); margin-right: 0.35rem; }
.sidebar-after { margin: 0.9rem 0 0.6rem; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.14); }
.sidebar-after__title { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.4rem; }
.sidebar-after ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.sidebar-after li { font-size: 0.95rem; line-height: 1.5; color: rgba(255,255,255,0.9); }
}
/* inline SVG icons replace Font Awesome (2026-09-22): same 1em box, same currentColor, same baseline */

.ic { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex: none; }

/* The copy-panel banding wraps every h2 group in the main column in a WHITE panel. On the imported
   pages some of those groups sit inside .content-block--dark, which paints #2A4836 and colours its
   heading and copy white. The white panel then covers the dark block and the white text lands on
   white: h2.content-title measured 1:1 and 40 paragraphs 1.03:1. Inside a dark block the panel
   keeps its spacing and paints nothing, which is what .copy-panel:has(> .faq-list) already does.
   copy-panel inside a dark content block. */
.content-block--dark .copy-panel,
.content-block--dark .copy-panel--alt { background: transparent; border: 0; box-shadow: none; }

/* main line 796 handles this and my strict port rejected it for naming .service-content__main:
   line 909 forces #203A2E with !important on every .service-content__main link, which beats
   .content-block--dark .towns a and put the town links at 1.72:1 on the dark block. */
.service-content__main .content-block--dark a:not(.btn),
.content-block--dark .towns a,
/* the chips also appear OUTSIDE a dark block. .towns a paints its own navy-light chip and sets white
   text, but without !important line 909 beats it, so they read #203A2E on #24402F at 1.72:1. This
   was the middle selector of main's rule and I dropped it on the first pass. */
.service-content__main .towns a { color: var(--white) !important; }
.content-block--dark a:not(.btn):not(.faq-question):hover { color: var(--amber) !important; }

/* .faq-answer paints #F8FBFF and .faq-question paints white, so an accordion inside
   .content-block--dark is a LIGHT island in a dark block. The block's own rule colours paragraphs
   rgba(255,255,255,0.85), which landed white-on-white at 1.03:1 inside the answers.
   faq island inside a dark content block. */
.content-block--dark .faq-answer,
.content-block--dark .faq-answer p,
.content-block--dark .faq-answer li,
.content-block--dark .faq-answer__inner,
.content-block--dark .faq-answer__inner p,
.content-block--dark .faq-answer__inner li { color: var(--text-body); }
.content-block--dark .faq-question { color: var(--text-dark); }
.content-block--dark .faq-answer a:not(.btn) { color: var(--link-on-light) !important; }

/* The Send Photos CTA used to jump to the section, whose intro column stacks above the
   form on a phone and left the iframe about 1,400px below the fold. The card itself is
   the target now, and the offset clears the fixed header. */
#send-photos { scroll-margin-top: 90px; }

/* ==========================================================================
   MOBILE, 2026-09-24. Two problems, both found from the rendered page.

   1. HORIZONTAL OVERFLOW. Ten service pages measured 545px or 689px wide
      inside a 393px viewport, which is why panels ran off the right edge,
      text sat half on the dark background, and the FAQ buttons stretched to
      190px tall. Cause: .service-content is a grid, and a `1fr` track takes
      its automatic minimum from the item's min-content, so any wide content
      pushes the track past the container. minmax(0, 1fr) sets that automatic
      minimum to 0, which is the actual fix. The guards under it stop a long
      word, a table or an embed doing the same thing again.

   2. TYPE TOO SMALL. Measured at 393px: the three hero lines were 32px and
      the eyebrow above them was 10.96px. The audience includes older
      homeowners reading this on a phone, so both go up substantially.
      "HEATING & COOLING." is the longest line and sets the ceiling, so the
      lines get a tighter letter-spacing to buy the width back.
   ========================================================================== */
@media (max-width: 1024px) {
  .service-content { grid-template-columns: minmax(0, 1fr); }
  .service-content > *,
  .service-content__main,
  .service-content__sidebar { min-width: 0; max-width: 100%; }
  .service-content__main img,
  .service-content__main iframe,
  .service-content__main picture { max-width: 100%; height: auto; }
  .service-content__main table,
  .service-content__main pre { display: block; max-width: 100%; overflow-x: auto; }
  .service-content__main p,
  .service-content__main li,
  .service-content__main h1,
  .service-content__main h2,
  .service-content__main h3 { overflow-wrap: anywhere; }
}

@media (max-width: 768px) {
  /* Readable feature labels. */
  .hero__title { font-size: clamp(2.55rem, 11.2vw, 3.6rem) !important;
                 letter-spacing: -0.045em !important; line-height: 0.92; }
  /* the eyebrow was 10.96px. It is a full sentence, so it gets real size. */
  /* 0.38em alone drops to 15.5px on a 320px screen, under the 16px floor, because it
     scales off an h1 that is itself shrinking. The clamp gives it a 17px floor. */
  .hero__title > span:first-child { font-size: clamp(1.0625rem, 0.38em, 1.6rem) !important;
                 line-height: 1.25; letter-spacing: 0.02em; margin-bottom: 0.45em; }
  .hero__subtitle, .hero__desc, .hero p { font-size: 1.2rem; line-height: 1.65; }
  .hero__badge, .trust-chip, .hero__trust span { font-size: 1rem; }

  /* reading text, for older eyes on a phone */
  body { font-size: 1.15rem; }
  .service-content__main p,
  .service-content__main li,
  .copy-panel p, .copy-panel li,
  .content-block p, .content-block li { font-size: 1.15rem; line-height: 1.7; }
  .page-hero__title { font-size: clamp(2.1rem, 8.4vw, 3rem); }
  .page-hero__desc { font-size: 1.18rem; line-height: 1.6; }
  .content-title, .section-title { font-size: 1.6rem; line-height: 1.15; }
  .section-desc { font-size: 1.12rem; }

  /* the question button stretched to 190px tall inside the overflowing grid.
     Cap the padding and let it size to its text. */
  .faq-question { font-size: 1.12rem; padding: 1rem 1.1rem; align-items: flex-start; }
  .faq-answer__inner { font-size: 1.1rem; line-height: 1.7; }
  .mh-faq summary { font-size: 1.12rem; }
  .mh-faq p { font-size: 1.1rem; line-height: 1.7; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE NAV DROPDOWN, 2026-09-24
   Measured at 393px with the menu open: 14 of the 23 links rendered at 15px in a
   42px row, inside a 22.4px parent list. Too small to read and under the 44px
   tap target, which is what "the dropdowns do not work on mobile" actually was.
   The menu itself opened and scrolled correctly, so only the sizing is changed.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav__menu.open { gap: 0.15rem; padding-left: 1.25rem; padding-right: 1.25rem;
                    align-items: stretch;
                    /* the last link sat under the sticky call bar */
                    padding-bottom: 6.5rem; }
  .nav__menu.open > li { width: 100%; }
  .nav__menu.open > li > a { font-size: 1.35rem; padding: 0.85rem 0.75rem;
                    justify-content: flex-start; }
  .nav__menu.open .nav__dropdown-menu { padding: 0 0 0.5rem 0.25rem; }
  .nav__menu.open .nav__dropdown-menu a { font-size: 1.15rem; min-height: 52px;
                    padding: 0.7rem 0.75rem; gap: 0.85rem; color: rgba(255,255,255,0.92); }
  .nav__menu.open .nav__dropdown-menu a i { font-size: 1.05rem; width: 22px; }
  /* Readable labels in the expanded navigation menu. */
  .nav__menu.open .nav__dropdown-group { font-size: 1.05rem; padding: 0.9rem 0.75rem 0.35rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE TYPE FLOOR, 2026-09-24
   Jay: "I have older clients that need bigger font sizes." A census at 393px
   found 4,378 visible text nodes under 16px across 81 distinct shapes: review
   dates and sources at 13.5px, stat labels at 13.5px, footer headings at 15.2px,
   breadcrumbs at 14px. Every one of them is raised here in one place, by class,
   rather than page by page. Headings and the logo lockup keep their own scale.
   Re-measure with small_text_census.py after any change to this block.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* reviews, the most repeated small text on the site */
  .review-card__date, .review-strip__date { font-size: 1rem; }
  .review-card__stars, .review-strip__stars { font-size: 1.15rem; letter-spacing: 0.06em; }
  .review-card__source { font-size: 1rem; }
  .review-strip__avatar { font-size: 0.95rem; }
  .reviews-strip__label, .reviews-strip__write { font-size: 1rem; }

  /* the number panels. The label carries the meaning, not the digit. */
  .qq-stat__l, .about-stat__label, .trust-bar__label,
  .hero-trust__chip, .hero__trust-item { font-size: 1rem; line-height: 1.35; }

  /* footer, where the hours and the licence live */
  .footer__col h3, .footer__col h4, .footer__links h3 { font-size: 1.1rem; }
  .footer__links li, .footer__links a, .footer__address,
  .footer__legal a, .footer__copyright { font-size: 1.02rem; line-height: 1.7; }

  /* call panel */
  .qq-call-label, .qq-call-hours, .qq-call-right-sub { font-size: 1.02rem; line-height: 1.6; }

  /* navigation aids */
  .breadcrumb__list, .breadcrumb__list a, .breadcrumb__list li { font-size: 1rem; }
  .towns a, .area-card__state, .city-index__heading { font-size: 1.05rem; }
  .btn { font-size: 1.02rem; }

  /* section labels and eyebrows */
  .section-eyebrow, .page-hero__eyebrow { font-size: 1rem; letter-spacing: 0.1em; }

  /* sidebars */
  .sidebar-info-row, .sidebar-card p, .sidebar-card a,
  .sidebar-quote p, .sidebar-quote span, .sidebar-quote strong { font-size: 1.02rem; line-height: 1.65; }

  /* contact and package pages */
  .contact-info-item__label { font-size: 1.05rem; }
  .contact-info-item__sub, .work-phase__desc { font-size: 1rem; line-height: 1.6; }
  .work-phase__title { font-size: 1.1rem; }

  /* the wordmark lockup stays a lockup, but 8.6px was unreadable */
  .nav__wordmark small { font-size: 0.68rem; letter-spacing: 0.22em; }
}

/* Holdouts from the type floor above. Each one was measured still under 16px at
   393px after that block landed, because a more specific selector or an
   !important declaration was winning. Matched here at the same weight, never by
   blanket-!importanting the whole floor. */
@media (max-width: 768px) {
  .qq-call .qq-call-label,
  .qq-call .qq-call-hours,
  .qq-call .qq-call-right-sub { font-size: 1.02rem; line-height: 1.6; }
  .reviews-section__header p, .area-card__state, .area-card__state span { font-size: 1.02rem; }
  .sidebar-card p, .sidebar-card a, .sidebar-cta p, .sidebar-cta .sidebar-info-row,
  .faq-list h3, .footer__credentials li, .footer__contact h3 { font-size: 1.02rem; line-height: 1.6; }
  .hero__phone-label, .hero__panel-count, .hero__panel-text small,
  .featured-service__badge, .work-scope-card__eyebrow,
  .review-featured__eyebrow, .review-featured__meta,
  .reviews-strip-section__label { font-size: 1rem; }
}

@media (max-width: 768px) {
  /* last three holdouts, each beaten by a compound selector rather than by weight */
  .area-card--primary .area-card__state { font-size: 1.02rem; }
  .qq-stat .qq-stat__l { font-size: 1rem; }
  .review-strip .review-strip__avatar { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE TAP TARGETS, 2026-09-24
   Measured standalone links at 393px (inline links inside a sentence are exempt
   under WCAG 2.5.8 and were excluded from the count): footer links 36px, site
   map links 21px, sidebar area links 26px, breadcrumbs 28px. Each list below is
   given a 44px row. Layout is unchanged on desktop.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer__links a, .footer__legal a, .sidebar-areas a,
  .service-list a, .sitemap-list a, .city-index__group a {
    display: flex; align-items: center; min-height: 44px;
    padding-top: 0.35rem; padding-bottom: 0.35rem;
  }
  .footer__links li, .footer__legal li, .sitemap-list li, .sidebar-areas li { margin: 0; }
  .breadcrumb__list a { display: inline-flex; align-items: center; min-height: 40px; }
  /* the site map h1 was rendering at the shared section-title size */
  h1.section-title { font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.1; }
}

@media (max-width: 768px) {
  /* the phone number is the one thing an older caller has to be able to hit */
  .qq-call-number { font-size: 1.75rem; line-height: 1.2; min-height: 48px;
                    display: flex; align-items: center; }
  .sidebar-phone { font-size: 1.35rem; min-height: 48px; }
  .hero__phone-number { min-height: 48px; display: flex; align-items: center; }
  .sidebar-card a { min-height: 44px; display: flex; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TWO OVERFLOWS THE BIGGER TYPE EXPOSED, found at 320px and at 768px
   1. The "... Near Me" link carries white-space:nowrap and is 322px wide inside
      a 320px screen. It wraps below 380px.
   2. On /reviews at 768px the strip is a single flex row: avatar, name, stars,
      source badge. At 1rem the badge is 179px and squeezed the name to a 17px
      ellipsis. The row wraps instead, so the badge takes its own line.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .container > p > a[href*="near-me"], a[href*="-near-me"],
  .near-me-link, .service-content__main a { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 768px) {
  .review-strip { flex-wrap: wrap; row-gap: 0.5rem; }
  .review-strip__meta { flex: 1 1 60%; min-width: 120px; }
  /* 1rem like the rest of the floor. It fits now only because the row wraps;
     without .review-strip{flex-wrap:wrap} above this badge is 179px and crushes
     the reviewer's name to a 17px ellipsis at 768px. */
  .review-strip .review-card__source { font-size: 1rem; letter-spacing: 0.04em; }
  .review-strip__name { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* Below the 320px floor the decorative hero accent pushed the document to 315px on a
   280px screen. It is decoration, so it is clipped rather than allowed to widen the page.
   The review card grid is also cramped under 320px; 320 is the narrowest width tested
   and the narrowest common phone, so that is recorded rather than chased. */
@media (max-width: 319px) {
  .hero__accent { max-width: 100%; overflow: hidden; }
  .hero, .hero__inner { overflow-x: clip; }
  .review-card__name, .review-strip__name { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUOTE SECTION, REDESIGN 2026-09-24
   Measured before: the left column rendered 1,472px tall holding 874px of content,
   because the form iframe carries min-height:1400px, the grid used align-items:stretch,
   and .qq-trust used justify-content:space-between. The remaining 598px was divided into
   six near-identical ~100px gaps. Nobody designed those gaps; they were arithmetic, and
   equal gaps are what made the column read as empty and plain.
   Fixed by refusing the slack and setting a deliberate rhythm, then spending the recovered
   room on proof rather than filler.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. stop stretching the column to the iframe, and stop distributing the leftover */
.qq-section .qq-grid { align-items: start; }
.qq-section .qq-trust {
  justify-content: flex-start;
  align-self: start;
  /* sticky was tried here and removed: it offset the column 90px below the card even at
     rest, and at 1,261px the column is taller than most viewports so it never engaged. */
}

/* 2. the eyebrow is a label FOR the heading. It sat 93px away from it. */
.qq-section .qq-eyebrow { font-size: 1.15rem; letter-spacing: 0.15em; margin-bottom: 0.7rem; }
.qq-section .qq-eyebrow::before { width: 42px; }
.qq-section .qq-heading { margin: 0 0 1.15rem; }
.qq-section .qq-subhead { margin: 0 0 2.3rem; }

/* 3. the three steps answer "what happens after I hit send", which is the real hesitation,
      so they get the weight and a rail that makes them read as one sequence rather than
      three unrelated rows. Numbering is accurate here because it genuinely is a sequence. */
.qq-section .qq-steps { position: relative; gap: 1.55rem; margin: 0 0 2.1rem; }
.qq-section .qq-steps::before {
  content: ""; position: absolute; left: 18px; top: 40px; bottom: 40px; width: 2px;
  background: linear-gradient(180deg, rgba(245,166,35,0.42), rgba(245,166,35,0.06));
}
.qq-section .qq-step { position: relative; }
.qq-section .qq-step__n {
  background: #17A34B !important;
  border: 2px solid #0F7E3A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(23,163,75,0.4);
}

/* 4. amber was doing six jobs in this column: eyebrow, three step numbers, three stat
      figures, the shield icon and the phone number. That is what flattened it. The stats
      go quiet so the phone number is the one thing that shouts. */
.qq-section .qq-stats { margin: 0 0 1.5rem; padding: 1rem 0; }
.qq-section .qq-stat__n { color: rgba(255,255,255,0.94); font-size: 1.5rem; }
.qq-section .qq-stat__l { color: rgba(255,255,255,0.6); }

.qq-section .qq-reassure { margin: 0 0 1.5rem; }

/* 5. one real customer, verbatim, directly above the phone block. Proof is the most useful
      thing that can sit next to a form, and there was none in this column. */
.qq-proof {
  margin: 0 0 1.6rem; padding: 1.15rem 1.3rem; border-radius: 12px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09);
  border-left: 3px solid var(--amber);
}
.qq-proof__stars { color: var(--amber); font-size: 1.05rem; letter-spacing: 0.14em; line-height: 1; margin-bottom: 0.6rem; }
.qq-proof__quote { margin: 0 0 0.7rem; font-size: 1.08rem; line-height: 1.6; color: rgba(255,255,255,0.92); font-style: normal; }
.qq-proof__who { font-size: 1rem; color: #fff; font-weight: 600; }
.qq-proof__who span { display: block; font-weight: 400; font-size: 1rem; color: rgba(255,255,255,0.6); margin-top: 0.15rem; }

/* 6. depth. The right half is a bright white card against flat navy; a soft amber bloom
      behind it gives the section dimension without adding a single word. */
.qq-section .qq-bg-pattern {
  background-image:
    radial-gradient(42% 34% at 78% 26%, rgba(245,166,35,0.16) 0%, transparent 72%),
    radial-gradient(38% 30% at 10% 62%, rgba(15,125,70,0.10) 0%, transparent 70%),
    radial-gradient(circle at 15% 50%, rgba(245,166,35,0.07) 0%, transparent 50%);
}

@media (max-width: 800px) {
  .qq-proof__quote { font-size: 1.12rem; }
  .qq-proof__stars { font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPE FLOOR AT EVERY WIDTH, 2026-09-25
   The 16px floor built on 2026-09-24 lived inside @media (max-width: 768px), so a reader on
   a laptop still got 12.8px breadcrumbs, 12.5px on the licence line and 13.5px review
   sources. A census at 1440px counted 4,692 sub-16px nodes across 67 shapes. Jay's clients
   are older on a desktop too; the requirement was about eyes, not about devices.
   Content gets 16px at all widths. The navigation bar and breadcrumbs are chrome rather than
   reading copy and are raised to 15px, which keeps the desktop bar on one line.
   Re-measure with desktop_census.py after touching this block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* reviews, the most repeated small text on the site */
.review-card__date, .review-strip__date { font-size: 1rem; }
.review-card__source { font-size: 1rem; }
.review-card__stars { font-size: 1.05rem; letter-spacing: 0.05em; }
.review-strip .review-strip__stars { font-size: 1rem; }
.review-strip .review-strip__avatar { font-size: 0.95rem; }
.reviews-strip__label, .reviews-strip__write { font-size: 1rem; }

/* the number panels: the label carries the meaning, not the digit */
.qq-stat .qq-stat__l, .about-stat__label, .trust-bar__label,
.hero-trust__chip, .hero__trust-item { font-size: 1rem; line-height: 1.35; }

/* footer, where the hours and the licence live */
.footer__col h3, .footer__col h4, .footer__links h3 { font-size: 1.05rem; }
.footer__links li, .footer__links a, .footer__address { font-size: 1rem; line-height: 1.7; }
.footer__legal a { font-size: 0.95rem; }

/* the call panel */
.qq-call .qq-call-label, .qq-call .qq-call-hours,
.qq-call .qq-call-right-sub { font-size: 1rem; line-height: 1.6; }

/* section labels, cards and sidebars */
.section-eyebrow, .page-hero__eyebrow { font-size: 1rem; }
.towns a, .city-index__heading { font-size: 1rem; }
.area-card__state, .area-card--primary .area-card__state { font-size: 0.95rem; }
.service-card__link { font-size: 1rem; }
.sidebar-info-row, .sidebar-card p, .sidebar-card a,
.sidebar-quote p, .sidebar-quote span, .sidebar-quote strong { font-size: 1rem; line-height: 1.6; }
.hero__phone-label, .hero__panel-count { font-size: 1rem; }
.contact-info-item__label { font-size: 1rem; }
.contact-info-item__sub, .work-phase__desc { font-size: 1rem; }
.reviews-section__header p { font-size: 1rem; }

/* chrome, not reading copy. 15px keeps the desktop bar on one line. */
.nav__menu > li > a, .nav__dropdown-menu a { font-size: 0.9375rem; }
.breadcrumb__list, .breadcrumb__list a, .breadcrumb__list li { font-size: 0.9375rem; }

/* The last shapes the desktop census found, worst first: a featured-review eyebrow at
   11.5px, a strip label at 12.5px, a scope-card eyebrow at 13px. Everything still under
   16px after this block is deliberate: the nav and breadcrumb chrome at 15px, and the
   licence line at 14.4px because Jay asked for it understated. */
.review-featured__eyebrow, .reviews-strip-section__label,
.work-scope-card__eyebrow, .featured-service__badge { font-size: 1rem; letter-spacing: 0.08em; }
.review-featured__meta, .hero__badge, .hero__panel-note,
.hero__panel-text small, .work-phase__title { font-size: 1rem; }
.sidebar-info-rows .sidebar-info-row, .sidebar-cta .sidebar-info-row,
.sidebar-info-row span { font-size: 1rem; }
.footer__credentials li, .footer__contact h3 { font-size: 1rem; }
.area-card .area-card__state, .area-card--primary .area-card__state { font-size: 1rem; }
.review-strip .review-strip__avatar { font-size: 1rem; }

/* CLS fix 2026-10-05: reserve Font Awesome icon space in hero so late icon-font load does not reflow the hero (reserves icon space) */
.hero-trust__chip i{display:inline-block;width:0.85rem;text-align:center;flex:0 0 auto;}
.page-hero__actions .btn i{display:inline-block;width:1.05em;text-align:center;}
.hero-trust{min-height:2.2rem;}

/* Targeted corrections within the existing visual system. */
.service-list__sentence { flex: 1; min-width: 0; }
@media (max-width: 768px) {
  .service-list .service-list__sentence a { display: inline; min-height: 0; padding: 0; }
}

.brand-card .brand-card__badge {
  width: 132px; height: 132px; margin: 0 auto 1rem;
}
@media (max-width: 768px) {
  .brand-card .brand-card__badge { width: 120px; height: 120px; }
}

/* ============================================================
   EXPERIENCE TRUST STRIP (below hero)
   ============================================================ */
.experience-strip {
  background: linear-gradient(180deg, #152417 0%, #203A2E 100%);
  border-top: 1px solid rgba(15,125,70,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 1.6rem 0;
}
.experience-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}
.experience-strip__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(15,125,70,0.16);
  border: 1px solid rgba(15,125,70,0.4);
  color: #4ec98c;
  font-size: 1.2rem;
}
.experience-strip__copy { display: flex; flex-direction: column; gap: 0.2rem; }
.experience-strip__lead {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 0;
  line-height: 1.15;
}
.experience-strip__sub {
  font-size: 0.98rem;
  color: rgba(255,255,255,0.72);
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .experience-strip__inner { flex-direction: column; text-align: center; gap: 0.8rem; }
  .experience-strip__copy { align-items: center; }
}

/* ============================================================
   BEFORE AND AFTER WALL
   ============================================================ */
.ba-wall { background: linear-gradient(180deg, #152417 0%, #152417 100%); }
.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.ba-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 0.9rem 0.9rem 1.1rem;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.ba-card:hover {
  transform: translateY(-4px);
  border-color: rgba(15,125,70,0.5);
  box-shadow: 0 26px 54px rgba(0,0,0,0.38);
}
.ba-card__panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #203A2E;
}
.ba-pane {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  padding: 0.7rem;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 12px, rgba(255,255,255,0) 12px 24px),
    linear-gradient(160deg, #16352a 0%, #0f271d 100%);
}
.ba-pane--after {
  background:
    repeating-linear-gradient(135deg, rgba(15,125,70,0.08) 0 12px, rgba(15,125,70,0) 12px 24px),
    linear-gradient(160deg, #1a4231 0%, #123726 100%);
}
.ba-pane__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  background: rgba(34,32,28,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0.28rem 0.6rem;
  border-radius: 100px;
}
.ba-pane--after .ba-pane__label {
  color: #203A2E;
  background: #4ec98c;
  border-color: rgba(34,32,28,0.2);
}
.ba-card__caption {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  text-align: center;
  margin-top: 0.85rem;
}
.ba-wall__cta { text-align: center; margin-top: 2.75rem; }
@media (max-width: 900px) {
  .ba-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
}
@media (max-width: 560px) {
  .ba-grid { grid-template-columns: 1fr; }
  .ba-pane { min-height: 150px; }
}

/* ============================================================
   EVERGREEN LIGHT: light-dominant, high-contrast, vibrant rebalance
   Appended last so it governs the final color application.
   Dark evergreen bands survive ONLY on the hero and the footer.
   Everything else becomes a warm light surface with ink text.
   ============================================================ */
:root {
  /* vibrant working palette */
  --el-green: #17A34B;          /* vibrant primary, accents / buttons / icons */
  --el-green-strong: #0F7E3A;   /* primary as text on light, AA body */
  --el-green-deep: #1C3A2C;     /* the dark evergreen band (hero + footer) */
  --el-teal: #13908A;           /* secondary accent */
  --el-teal-deep: #0E6F6A;      /* teal as text on light */
  --el-marigold: #D9951F;       /* tertiary accent, honey */
  --el-marigold-deep: #A96A08;  /* marigold as text on light, AA body */
  --el-clay: #C96A3C;           /* tertiary warm, used sparingly */
  --el-clay-deep: #A6512A;
  --el-limestone: #ECE6D8;      /* page base */
  --el-cream: #F4EFE3;          /* lighter band */
  --el-stone: #E7E0D0;          /* warm neutral (before pane) */
  --el-ink: #1E2422;            /* body ink on light */
  --el-ink-strong: #141A16;     /* near-black headings */

  /* remap the legacy tokens the template references everywhere */
  --navy: var(--el-green-deep);
  --navy-light: #223f31;
  --navy-mid: #244536;
  --blue: var(--el-green-strong);
  --blue-dark: #0C692F;
  --blue-light: var(--el-green);
  --amber: var(--el-green);           /* primary accent now vibrant green */
  --amber-dark: var(--el-green-strong);
  --amber-text: var(--el-green-strong);
  --amber-text-lg: var(--el-green-strong);
  --text-dark: var(--el-ink-strong);
  --text-body: var(--el-ink);
  --text-muted: #55605A;              /* muted ink on light, AA */
  --link-on-light: var(--el-green-strong);
  --light-bg: var(--el-limestone);
  --off-white: var(--el-cream);
  --surface: var(--el-green-deep);
  --surface-alt: #244536;
}

/* page base is warm limestone, never dark */
body { background: var(--el-limestone); color: var(--el-ink); }

/* headings near-black for punch on light surfaces */
h1,h2,h3,h4,h5,h6 { color: var(--el-ink-strong); }

/* ---- the two dark bands: hero + footer, pure white text ---- */
.hero { background: linear-gradient(135deg, #163326 0%, #1C3A2C 58%, #16311F 100%); }
.hero__title, .hero__title span, .hero__subtitle,
.hero__title [style] { color: #FFFFFF !important; }
.hero__title .accent { color: var(--el-green) !important; }
.hero__title .accent-blue { color: #58D98A !important; }
.hero__subtitle { color: #FFFFFF !important; opacity: 0.96; }
.hero__badge { background: rgba(23,163,75,0.20); border-color: rgba(88,217,138,0.45); color: #FFFFFF; }
.hero__badge i { color: var(--el-green); }
.hero__phone-label { color: #FFFFFF; opacity: 0.82; }
.hero__phone-number { color: var(--el-green); }
.hero__phone-number:hover { color: #3FD079; }
.hero__trust-item { color: #FFFFFF; opacity: 0.9; }
.hero__trust-item i { color: #58D98A; }
.hero__amber-bar { background: linear-gradient(90deg,var(--el-green) 0%,var(--el-teal) 55%,transparent 100%); }
.hero__accent { background: linear-gradient(135deg,#244536 0%,transparent 60%); }
.hero__bg-pattern { background-image: linear-gradient(rgba(88,217,138,0.05) 1px,transparent 1px), linear-gradient(90deg,rgba(88,217,138,0.05) 1px,transparent 1px); }

.footer { background: linear-gradient(180deg, #1F4030 0%, #183022 100%); border-top: 4px solid var(--el-green); }
.footer, .footer__heading, .footer__col h4, .footer__col h3 { color: rgba(255,255,255,0.82); }
.footer__heading, .footer__desc, .footer__address, .footer__links a,
.footer__links li, .footer__hours li, .footer__credentials li,
.footer__contact p, .footer__contact a, .footer__copyright, .footer__legal a { color: #FFFFFF; }
.footer__desc, .footer__address, .footer__hours li, .footer__credentials li,
.footer__links a, .footer__contact a, .footer__copyright, .footer__legal a { opacity: 0.86; }
.footer__phone { color: var(--el-green); }
.footer__links a:hover, .footer__contact a:hover, .footer__copyright a { color: #58D98A; opacity: 1; }
.footer__phone:hover { color: #3FD079; }

/* ---- nav stays on the dark evergreen so it reads over the hero ---- */
.nav, .nav.scrolled { background: #183022; }
.nav__menu.open { background: #183022; }
.nav__dropdown-menu { background: #1F4030; }
.nav__menu > li > a { color: rgba(255,255,255,0.9); }
.nav__menu > li > a:hover, .nav__menu > li > a.active,
.nav__dropdown-menu a:hover, .nav__dropdown-group { color: var(--el-green); }
.nav__phone { color: var(--el-green); }
.nav__phone:hover { color: #3FD079; }
.nav__dropdown-menu a i { color: #58D98A; }

/* ---- section bands: all light, warm, alternating ---- */
.section--light { background: var(--el-cream);
  background-image: radial-gradient(circle at 12% 40%, rgba(23,163,75,0.06) 0%, transparent 46%),
                    radial-gradient(circle at 88% 18%, rgba(19,144,138,0.05) 0%, transparent 40%); }
.section--alt { background: var(--el-limestone);
  background-image: radial-gradient(circle at 85% 50%, rgba(217,149,31,0.06) 0%, transparent 46%),
                    radial-gradient(circle at 12% 20%, rgba(23,163,75,0.05) 0%, transparent 40%); }
.section--stone { background: var(--el-stone); }
.section--mid { background: var(--el-cream) !important;
  background-image: radial-gradient(circle at 80% 30%, rgba(19,144,138,0.07) 0%, transparent 48%),
                    radial-gradient(circle at 15% 80%, rgba(217,149,31,0.05) 0%, transparent 42%) !important; }
.section--mid h1,.section--mid h2,.section--mid h3,.section--mid h4 { color: var(--el-ink-strong); }
.section--mid .section-eyebrow { color: var(--el-green-strong); }
.section--mid .section-desc { color: var(--text-muted); }

/* section headers / eyebrows / accents on light */
.section-eyebrow { color: var(--el-green-strong); }
.section-eyebrow::before { background: var(--el-green); }
.section--alt .section-eyebrow,.section--stone .section-eyebrow { color: var(--el-green-strong); }
.section-title .accent { color: var(--el-green-strong); }
.section-title .accent-blue { color: var(--el-teal-deep); }
.section-desc { color: var(--text-muted); }

/* ---- buttons: vibrant, alive ---- */
.btn--primary { background: var(--el-green); color: #FFFFFF; border-color: var(--el-green); }
.btn--primary:hover { background: var(--el-green-strong); border-color: var(--el-green-strong); color: #FFFFFF; box-shadow: 0 10px 26px rgba(23,163,75,0.38); }
.btn--blue { background: var(--el-teal); color: #FFFFFF; border-color: var(--el-teal); }
.btn--blue:hover { background: var(--el-teal-deep); border-color: var(--el-teal-deep); color: #FFFFFF; box-shadow: 0 10px 26px rgba(19,144,138,0.36); }
/* outline buttons sit on LIGHT bands now, so ink outline not white */
.btn--outline { background: transparent; color: var(--el-green-strong); border-color: var(--el-green-strong); }
.btn--outline:hover { background: var(--el-green-strong); color: #FFFFFF; }
/* outline button that still sits on a dark band (hero) keeps white */
.hero .btn--outline { color: #FFFFFF; border-color: #FFFFFF; }
.hero .btn--outline:hover { background: #FFFFFF; color: var(--el-green-deep); }

/* ---- trust bar: light with vibrant top accent ---- */
.trust-bar { background: var(--el-stone) !important; border-top: 3px solid var(--el-green); border-bottom: 1px solid rgba(23,163,75,0.18); }
.trust-bar__item { border-right: 1px solid rgba(30,36,34,0.12); }
.trust-bar__number { color: var(--el-green-strong); }
.trust-bar__label { color: var(--text-muted); }

/* ---- experience strip: light warm ribbon, not a dark slab ---- */
.experience-strip { background: var(--el-cream); border-top: 1px solid rgba(23,163,75,0.22); border-bottom: 1px solid rgba(30,36,34,0.1); }
.experience-strip__mark { background: rgba(23,163,75,0.12); border-color: rgba(23,163,75,0.4); color: var(--el-green-strong); }
.experience-strip__lead { color: var(--el-ink-strong); }
.experience-strip__sub { color: var(--text-muted); }

/* ---- service group cards: light cards, each a distinct vibrant accent ---- */
.svc-scope { color: var(--text-muted); border-top: 1px solid rgba(30,36,34,0.14); }
.svc-group { background: #FFFFFF; border: 1px solid #E3DDCD; box-shadow: 0 6px 22px rgba(30,36,34,0.10); }
.svc-group:hover { box-shadow: 0 18px 46px rgba(30,36,34,0.16); border-color: #D8D1BE; }
.svc-group__title { color: var(--el-ink-strong); }
.svc-group__intro { color: var(--text-muted); }
.svc-group__head { border-bottom: 1px solid #ECE6D6; }
.svc-group__icon i { color: #FFFFFF; }
.svc-list a { color: var(--el-ink); }
.svc-list a:hover { color: var(--el-green-strong); }
/* per-group accent: top bar, icon tile, bullet, hover */
.svc-group:nth-child(1) { border-top: 4px solid var(--el-green); }
.svc-group:nth-child(1) .svc-group__icon { background: linear-gradient(135deg,#1DB857,#13843D); box-shadow: 0 6px 16px rgba(23,163,75,0.32); }
.svc-group:nth-child(1) .svc-list a::before { background: var(--el-green); }
.svc-group:nth-child(1) .svc-list a:hover { color: var(--el-green-strong); }
.svc-group:nth-child(2) { border-top: 4px solid var(--el-marigold); }
.svc-group:nth-child(2) .svc-group__icon { background: linear-gradient(135deg,#EDA62F,#C27C10); box-shadow: 0 6px 16px rgba(217,149,31,0.34); }
.svc-group:nth-child(2) .svc-list a::before { background: var(--el-marigold); }
.svc-group:nth-child(2) .svc-list a:hover { color: var(--el-marigold-deep); }
.svc-group:nth-child(3) { border-top: 4px solid var(--el-teal); }
.svc-group:nth-child(3) .svc-group__icon { background: linear-gradient(135deg,#17A49E,#0E6F6A); box-shadow: 0 6px 16px rgba(19,144,138,0.34); }
.svc-group:nth-child(3) .svc-list a::before { background: var(--el-teal); }
.svc-group:nth-child(3) .svc-list a:hover { color: var(--el-teal-deep); }
.svc-group:nth-child(4) { border-top: 4px solid var(--el-clay); }
.svc-group:nth-child(4) .svc-group__icon { background: linear-gradient(135deg,#D97C4C,#A6512A); box-shadow: 0 6px 16px rgba(201,106,60,0.32); }
.svc-group:nth-child(4) .svc-list a::before { background: var(--el-clay); }
.svc-group:nth-child(4) .svc-list a:hover { color: var(--el-clay-deep); }
.svc-group:nth-child(5) { border-top: 4px solid var(--el-green); }
.svc-group:nth-child(5) .svc-group__icon { background: linear-gradient(135deg,#1DB857,#13843D); box-shadow: 0 6px 16px rgba(23,163,75,0.32); }
.svc-group:nth-child(5) .svc-list a::before { background: var(--el-green); }
.svc-group:nth-child(5) .svc-list a:hover { color: var(--el-green-strong); }
/* the gradient ::before top-bar on svc-group is replaced by the solid border above */
.svc-group::before { display: none; }

/* ---- "built around the household" service card on light ---- */
.service-card { background: #FFFFFF; border: 1px solid #E3DDCD; box-shadow: 0 6px 22px rgba(30,36,34,0.10); }
.service-card:hover { border-color: #D8D1BE; box-shadow: 0 18px 48px rgba(30,36,34,0.16); }
.service-card__icon { background: linear-gradient(135deg,var(--el-green),var(--el-green-strong)); box-shadow: 0 6px 16px rgba(23,163,75,0.3); }
.service-card__icon i { color: #FFFFFF; }
.service-card__title { color: var(--el-ink-strong); }
.service-card__desc { color: var(--text-muted); }
.service-card::before { background: linear-gradient(90deg,var(--el-green),var(--el-teal)); }
.service-card__link { color: var(--el-green-strong); }

/* ---- featured service ("one visit, the whole list") now a light card ---- */
.featured-service { background: #FFFFFF !important; border: 1px solid #E3DDCD !important; box-shadow: 0 14px 44px rgba(30,36,34,0.12) !important; }
.featured-service::before { background: radial-gradient(circle, rgba(23,163,75,0.08) 0%, transparent 65%); }
.featured-service::after { background: rgba(30,36,34,0.08); }
.featured-service__badge { background: rgba(23,163,75,0.12); border-color: rgba(23,163,75,0.3); color: var(--el-green-strong); }
.featured-service__title { color: var(--el-ink-strong); }
.featured-service__desc { color: var(--text-muted); }
.featured-service__list li { color: var(--el-ink); }
.featured-service__list li i { color: var(--el-green); }

/* ---- work-scope "how we work" card: light inner card with teal numerals ---- */
.work-scope-card { background: linear-gradient(160deg,#F8F4EA 0%,#F1EBDC 100%) !important; border: 1px solid #E3DDCD !important; box-shadow: 0 8px 30px rgba(30,36,34,0.10) !important; }
.work-scope-card::before { background: radial-gradient(circle, rgba(19,144,138,0.08) 0%, transparent 70%); }
.work-scope-card__header { border-bottom: 1px solid rgba(30,36,34,0.1); }
.work-scope-card__icon-group { background: rgba(23,163,75,0.12); border-color: rgba(23,163,75,0.28); }
.work-scope-card__icon-group i { color: var(--el-green-strong); }
.work-scope-card__eyebrow { color: var(--text-muted); }
.work-scope-card__headline { color: var(--el-ink-strong); }
.work-phase { border-bottom: 1px solid rgba(30,36,34,0.08); }
.work-phase__num { color: rgba(19,144,138,0.55); }
.work-phase__title { color: var(--el-teal-deep); }
.work-phase__desc { color: var(--text-muted); }
@media (max-width: 1024px) { .work-scope-card { background: linear-gradient(160deg,#F8F4EA 0%,#F1EBDC 100%) !important; } }

/* ---- why-items ("standard we hold"): light cards, marigold/teal/green icons ---- */
.why-item { background: #FFFFFF !important; border: 1px solid #E3DDCD !important; box-shadow: 0 6px 22px rgba(30,36,34,0.10) !important; }
.why-item:hover { background: #FFFFFF !important; border-color: #D8D1BE !important; box-shadow: 0 16px 46px rgba(30,36,34,0.16) !important; }
.why-item__title { color: var(--el-ink-strong); }
.why-item__desc { color: var(--text-muted); }
.why-item__icon i { color: #FFFFFF; }
.why-grid .why-item:nth-child(1) .why-item__icon { background: linear-gradient(135deg,#1DB857,#13843D); box-shadow: 0 6px 18px rgba(23,163,75,0.3); }
.why-grid .why-item:nth-child(2) .why-item__icon { background: linear-gradient(135deg,#17A49E,#0E6F6A); box-shadow: 0 6px 18px rgba(19,144,138,0.3); }
.why-grid .why-item:nth-child(3) .why-item__icon { background: linear-gradient(135deg,#EDA62F,#C27C10); box-shadow: 0 6px 18px rgba(217,149,31,0.32); }
.why-grid .why-item:nth-child(4) .why-item__icon { background: linear-gradient(135deg,#D97C4C,#A6512A); box-shadow: 0 6px 18px rgba(201,106,60,0.3); }
.why-grid .why-item:nth-child(5) .why-item__icon { background: linear-gradient(135deg,#17A49E,#0E6F6A); box-shadow: 0 6px 18px rgba(19,144,138,0.3); }
.why-grid .why-item:nth-child(6) .why-item__icon { background: linear-gradient(135deg,#1DB857,#13843D); box-shadow: 0 6px 18px rgba(23,163,75,0.3); }

/* ---- about card ("Repair / Improve") on light ---- */
.about-card { background: linear-gradient(160deg,#1F4030 0%,#1C3A2C 55%,#173022 100%) !important; box-shadow: 0 16px 44px rgba(30,36,34,0.18), 0 0 0 1px rgba(255,255,255,0.05) !important; }
.about-card__name { color: #FFFFFF; }
.about-card__title { color: #58D98A; }
.section--light .about-content p { color: var(--el-ink); }
.section--light .about-content .section-title { color: var(--el-ink-strong); }
.about-list li { color: var(--el-ink); }
.about-list li i { color: var(--el-green); }

/* ---- areas: light cards with green location pins ---- */
.area-card, .area-card--primary { background: #FFFFFF !important; border: 1px solid #E3DDCD !important; box-shadow: 0 5px 18px rgba(30,36,34,0.09) !important; }
.area-card:hover { background: #FFFFFF !important; border-color: var(--el-green) !important; box-shadow: 0 14px 36px rgba(23,163,75,0.18) !important; }
.area-card i { color: var(--el-green); }
.area-card__name { color: var(--el-ink-strong); }
.area-card__state { color: var(--el-green-strong); }
.area-card--primary { border-color: var(--el-green) !important; box-shadow: 0 8px 24px rgba(23,163,75,0.16) !important; }
.area-card--primary .area-card__name { color: var(--el-green-strong); }
.area-card--primary .area-card__state { color: var(--text-muted); }

/* ---- SERVICE AREA: three featured towns first, nearby list below ---- */
.areas-featured {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; max-width: 980px; margin: 0 auto 2rem;
}
.area-feature {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  background: #FFFFFF; border: 1px solid #E3DDCD; border-radius: 16px;
  padding: 1.9rem 1.6rem; text-decoration: none; color: inherit;
  box-shadow: 0 10px 30px rgba(30,36,34,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.area-feature:hover {
  transform: translateY(-4px); border-color: var(--el-green);
  box-shadow: 0 18px 44px rgba(23,163,75,0.2);
}
.area-feature__icon { color: var(--el-green); font-size: 1.6rem; margin-bottom: 0.9rem; }
.area-feature__name {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem;
  color: var(--el-ink-strong); line-height: 1.1; margin-bottom: 0.3rem;
}
.area-feature__sub { font-size: 0.98rem; color: #55605A; margin-bottom: 1rem; }
.area-feature__go {
  margin-top: auto; font-family: var(--font-heading); font-weight: 700;
  font-size: 0.95rem; color: var(--el-green-strong); letter-spacing: 0.01em;
}
.area-feature--home {
  background: linear-gradient(160deg,#1F4030 0%,#173022 100%);
  border-color: var(--el-marigold);
}
.area-feature--home .area-feature__icon,
.area-feature--home .area-feature__go { color: var(--el-marigold); }
.area-feature--home .area-feature__name { color: #FFFFFF; }
.area-feature--home .area-feature__sub { color: rgba(255,255,255,0.84); }
.area-feature--home:hover { border-color: var(--el-marigold); box-shadow: 0 18px 44px rgba(217,149,31,0.26); }
.area-feature__tag {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: #1C3A2C; background: var(--el-marigold);
  padding: 0.28rem 0.6rem; border-radius: 999px;
}

.areas-nearby {
  max-width: 820px; margin: 0 auto 1.5rem;
  text-align: center;
}
.areas-nearby__label {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: #55605A; margin-bottom: 0.9rem;
}
.areas-nearby__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
}
.areas-nearby__list a {
  display: inline-block; text-decoration: none;
  background: #FFFFFF; border: 1px solid #E3DDCD; border-radius: 999px;
  padding: 0.5rem 1.05rem; font-size: 0.98rem; font-weight: 600;
  color: var(--el-green-strong); transition: border-color 0.2s ease, background 0.2s ease;
}
.areas-nearby__list a:hover { border-color: var(--el-green); background: #F6F1E6; }

@media (max-width: 800px) {
  .areas-featured { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---- before/after wall: light cream section, crisp framed cards ---- */
.ba-wall { background: var(--el-stone) !important;
  background-image: radial-gradient(circle at 15% 30%, rgba(23,163,75,0.05) 0%, transparent 46%),
                    radial-gradient(circle at 85% 70%, rgba(19,144,138,0.05) 0%, transparent 42%) !important; }
.ba-card { background: #FFFFFF; border: 1px solid #E3DDCD; box-shadow: 0 8px 26px rgba(30,36,34,0.10); }
.ba-card:hover { border-color: var(--el-green); box-shadow: 0 20px 48px rgba(23,163,75,0.16); }
.ba-card__panes { border: 2px solid #E3DDCD; }
.ba-pane { color: var(--el-ink);
  background: repeating-linear-gradient(135deg, rgba(30,36,34,0.035) 0 12px, rgba(30,36,34,0) 12px 24px),
              linear-gradient(160deg, #EDE7D9 0%, #E2DACA 100%); }
.ba-pane--after {
  background: repeating-linear-gradient(135deg, rgba(23,163,75,0.10) 0 12px, rgba(23,163,75,0) 12px 24px),
              linear-gradient(160deg, #D7F0E0 0%, #BFE7CE 100%); }
.ba-pane__label { color: var(--el-ink-strong); background: rgba(255,255,255,0.92); border: 1px solid rgba(30,36,34,0.14); }
.ba-pane--after .ba-pane__label { color: #FFFFFF; background: var(--el-green); border-color: rgba(23,163,75,0.5); }
.ba-card__caption { color: var(--el-ink-strong); }

/* ---- FAQ on light ---- */
.faq-item { border: 1px solid #E3DDCD; border-left: 3px solid var(--el-green); box-shadow: 0 2px 6px rgba(30,36,34,0.05), 0 12px 30px rgba(30,36,34,0.08); }
.faq-item:hover { box-shadow: 0 2px 6px rgba(30,36,34,0.05), 0 18px 42px rgba(30,36,34,0.12); }
.faq-question { background: #FFFFFF; color: var(--el-ink-strong); }
.faq-question:hover { background: #F6F1E6; }
.faq-question i { color: var(--el-green); }
.faq-item.open { border-color: var(--el-green); box-shadow: 0 6px 26px rgba(23,163,75,0.14); }
.faq-item.open .faq-question { background: #F1F8F3; color: var(--el-ink-strong); }
.faq-item.open .faq-question i { color: var(--el-green-strong); }
.faq-answer { background: #FBF8F1; }
.faq-answer__inner { color: var(--el-ink); border-top: 1px solid #ECE6D6; }

/* ---- contact info items on light ---- */
.contact-info-item { background: #FFFFFF; border: 1px solid #E3DDCD; }
.contact-info-item__icon { background: linear-gradient(135deg,var(--el-green),var(--el-teal)); }
.contact-info-item__value { color: var(--el-ink-strong); }
.contact-info-item__value a { color: var(--el-green-strong); }
.contact-info-item__value a:hover { color: var(--el-teal-deep); }

/* links default */
a { color: var(--el-green-strong); }
a:hover { color: var(--el-teal-deep); }

/* focus ring vibrant */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .faq-question:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--el-green); }

/* ============================================================
   EVERGREEN LIGHT, cycle 2: repair the dark-era token cascade.
   The stylesheet remaps --text-muted to the dark-surface grey on
   .section--mid, .qq-section, footer-adjacent scopes (built for a
   dark page). Those two sections are LIGHT now, so reset the token
   and the on-dark link color back to light-surface values there.
   ============================================================ */
.section--mid, .qq-section {
  --text-muted: #55605A;
  --text-muted-on-dark: #55605A;
  --link-on-dark: #0F7E3A;
}
/* explicit, high-specificity text colors so no dark-era rule wins */
.section--mid .why-item__desc { color: #55605A; }
.section--mid .why-item__title { color: #141A16; }
.section--mid .section-desc { color: #55605A; }
.qq-section .qq-stat__l { color: #55605A; }
.qq-section .qq-step__body { color: #55605A; }
.qq-section .qq-step__body strong { color: #141A16; }
.qq-section .qq-subhead { color: #1E2422; }
.qq-section .qq-heading { color: #141A16; }
.qq-section .qq-call-label,
.qq-section .qq-call-hours,
.qq-section .qq-call-right-sub { color: #55605A; }
.section--mid .why-item__desc a { color: #0F7E3A; }
.section--mid .why-item__desc a:hover { color: #0E6F6A; }

/* ============================================================
   EVERGREEN LIGHT, cycle 3: micro-polish on the before/after wall.
   Deepen the AFTER pane green so the transformation reads at a glance.
   ============================================================ */
.ba-pane--after {
  background: repeating-linear-gradient(135deg, rgba(23,163,75,0.14) 0 12px, rgba(23,163,75,0) 12px 24px),
              linear-gradient(160deg, #CBEED8 0%, #A8DEBC 100%) !important; }
.ba-pane--after .ba-pane__label { color: #FFFFFF; background: #17A34B; border-color: rgba(15,126,58,0.6); box-shadow: 0 2px 8px rgba(23,163,75,0.3); }

/* ============================================================
   V4 REDESIGN, cycle 4: hero rework, contrast sweep, new
   featured card, about-person card, premium accents.
   Appended last so it governs the final application.
   Marigold and teal introduced more for contrast where noted.
   ============================================================ */

/* ---- HERO: eyebrow in marigold, Done Right pops hardest ---- */
.hero__badge--eyebrow {
  background: rgba(217,149,31,0.16);
  border: 1px solid rgba(217,149,31,0.55);
  color: var(--el-marigold) !important;
  font-weight: 700;
}
.hero__badge--eyebrow i { color: var(--el-marigold); }

.hero__title--v4 {
  display: flex; flex-direction: column; align-items: flex-start;
  text-transform: none;
  margin-bottom: 1.25rem;
  line-height: 0.98;
}
/* Three balanced lines, all at the same sane scale. */
.hero__title--v4 > span.hero__title-lead,
.hero__title--v4 > span.hero__title-pop,
.hero__title--v4 > span:first-child.hero__title-lead {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.6rem) !important;
  letter-spacing: -0.015em;
  line-height: 1.04;
  text-transform: none;
}
.hero__title--v4 .hero__title-lead {
  color: #FFFFFF !important;
  margin-bottom: 0.06em;
}
/* "Done Right." pops by COLOR only, same size as the lines above it. */
.hero__title--v4 .hero__title-pop {
  color: var(--el-marigold) !important;
  margin-top: 0.1em;
  text-shadow: 0 4px 22px rgba(217,149,31,0.28);
}

.hero__phone-number--v4 {
  color: #FFFFFF !important;
  font-weight: 800;
  font-size: clamp(2rem, 3.2vw, 2.7rem) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.3);
}
.hero__phone-number--v4:hover { color: var(--el-marigold) !important; }
.hero__phone-label { color: #FFFFFF !important; opacity: 0.88; }

/* teal + marigold atmosphere so the hero is not green-on-green */
.hero__accent { background: linear-gradient(135deg, rgba(19,144,138,0.28) 0%, transparent 62%) !important; }
.hero__amber-bar { background: linear-gradient(90deg, var(--el-marigold) 0%, var(--el-teal) 50%, transparent 100%) !important; height: 5px !important; }

/* ---- HERO featured card: WHITE card, stands off the dark hero ---- */
.hero__panel--featured {
  background: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.42), 0 0 0 4px rgba(217,149,31,0.18) !important;
  border-radius: 18px !important;
  padding: 1.5rem 1.4rem 1.3rem !important;
}
.hero__panel-head { margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid #ECE6D6; }
.hero__panel-eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8A5606;
  margin-bottom: 0.25rem;
}
.hero__panel-title {
  display: block; font-family: var(--font-heading);
  font-weight: 800; font-size: 1.3rem; color: var(--el-ink-strong);
  line-height: 1.1;
}
.hero__panel--featured .hero__panel-row {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.75rem 0.55rem; border-radius: 11px;
  text-decoration: none; transition: background 0.2s ease;
}
.hero__panel--featured .hero__panel-row:hover,
.hero__panel--featured .hero__panel-row:focus-visible { background: #F6F1E6; }
.hero__panel--featured .hero__panel-icon {
  flex: none; width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; color: #FFFFFF; font-size: 1.1rem;
}
.hero__panel-icon--green { background: linear-gradient(135deg,#1DB857,#13843D); box-shadow: 0 5px 14px rgba(23,163,75,0.34); }
.hero__panel-icon--marigold { background: linear-gradient(135deg,#EDA62F,#C27C10); box-shadow: 0 5px 14px rgba(217,149,31,0.36); }
.hero__panel-icon--teal { background: linear-gradient(135deg,#17A49E,#0E6F6A); box-shadow: 0 5px 14px rgba(19,144,138,0.36); }
.hero__panel-icon--clay { background: linear-gradient(135deg,#D97C4C,#A6512A); box-shadow: 0 5px 14px rgba(201,106,60,0.34); }
.hero__panel--featured .hero__panel-text strong { color: var(--el-ink-strong); font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; line-height: 1.15; }
.hero__panel--featured .hero__panel-text small { color: #55605A; font-size: 0.86rem; line-height: 1.3; }
.hero__panel--featured .hero__panel-go { margin-left: auto; color: rgba(30,36,34,0.3); font-size: 0.8rem; transform: none; transition: transform 0.2s ease, color 0.2s ease; }
.hero__panel--featured .hero__panel-row:hover .hero__panel-go { transform: translateX(3px); color: var(--el-marigold-deep); }
.hero__panel--featured .hero__panel-note {
  margin: 0.95rem 0 0; padding-top: 0.9rem;
  border-top: 1px solid #ECE6D6;
  color: #55605A; font-size: 0.9rem; line-height: 1.5;
}

/* ---- SECTION 3 (qq) contrast and type bumps + divider ---- */
.section--divide-top { border-top: 3px solid rgba(217,149,31,0.3); }
.qq-section { border-top: 1px solid rgba(30,36,34,0.12); }
/* the "Repair / Install / Improve" row: dark, bold, larger, colored */
.qq-stats--v4 { border-top: 2px solid rgba(30,36,34,0.16) !important; border-bottom: 2px solid rgba(30,36,34,0.16) !important; padding: 1.4rem 0 !important; gap: 1.1rem !important; }
.qq-stats--v4 .qq-stat__n {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 2rem !important; font-weight: 800 !important;
  color: #141A16 !important; line-height: 1;
}
.qq-stats--v4 .qq-stat__n i { font-size: 1.15rem; }
.qq-stats--v4 .qq-stat--green .qq-stat__n i { color: var(--el-green-strong); }
.qq-stats--v4 .qq-stat--marigold .qq-stat__n i { color: var(--el-marigold-deep); }
.qq-stats--v4 .qq-stat--teal .qq-stat__n i { color: var(--el-teal-deep); }
.qq-section .qq-stats--v4 .qq-stat__l { color: #3A423C !important; font-size: 1rem !important; font-weight: 500; }
/* "Tell us..." labels + body larger */
.qq-section .qq-subhead { font-size: 1.3rem !important; color: #1E2422 !important; }
.qq-section .qq-step__body { font-size: 1.14rem !important; }
.qq-section .qq-step__body strong { font-size: 1.3rem !important; color: #141A16 !important; }
.qq-section .qq-reassure { font-size: 1.12rem !important; }

/* ---- WHO WE HELP: larger paragraph ---- */
.section-desc--lg { font-size: 1.28rem !important; line-height: 1.7 !important; color: #3A423C !important; max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---- service-card icon color variants ---- */
.service-card__icon--green { background: linear-gradient(135deg,#1DB857,#13843D) !important; box-shadow: 0 6px 16px rgba(23,163,75,0.3) !important; }
.service-card__icon--teal { background: linear-gradient(135deg,#17A49E,#0E6F6A) !important; box-shadow: 0 6px 16px rgba(19,144,138,0.32) !important; }

/* ---- ABOUT person card (Jacob), face-to-the-name ---- */
.about-person-card {
  display: flex; flex-direction: column;
  background: linear-gradient(160deg,#1F4030 0%,#1C3A2C 55%,#173022 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(30,36,34,0.2), 0 0 0 1px rgba(255,255,255,0.05);
}
.about-person-card__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 14px, rgba(255,255,255,0) 14px 28px),
    linear-gradient(160deg,#244536 0%,#1A3324 100%);
  border-bottom: 3px solid var(--el-marigold);
  display: grid; place-items: center;
}
.about-person-card__photo-ph {
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.5); font-size: 2.4rem;
}
.about-person-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  display: block;
}
.about-person-card__body { padding: 1.75rem 1.75rem 2rem; }
.about-person-card__name {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 1.9rem; color: #FFFFFF; line-height: 1; margin-bottom: 0.3rem;
}
.about-person-card__role {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--el-marigold); font-weight: 600; margin-bottom: 1rem;
}
.about-person-card__note { color: rgba(255,255,255,0.86); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; }
.about-person-card__stat {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.14);
}
.about-person-card__stat-n {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 2.6rem; color: var(--el-marigold); line-height: 1;
}
.about-person-card__stat-l {
  font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.78);
}

/* ---- ABOUT premium services accent ---- */
.about-premium-label {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.05rem; color: var(--el-marigold-deep);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 1.5rem 0 0.75rem;
}
.about-list--premium { gap: 0.85rem; margin-bottom: 1.5rem; }
.about-list--premium li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--el-ink); font-size: 1.06rem; line-height: 1.5; }
.about-list--premium li i { color: var(--el-marigold-deep); margin-top: 0.28rem; flex-shrink: 0; width: 1.1rem; text-align: center; }
.about-list--premium li strong { color: var(--el-ink-strong); font-weight: 700; }

/* ---- SEE THE WORK: outline on "See the" so it pops on the stone wall ---- */
.ba-title__outline {
  color: #1E2422;
  text-shadow:
    -1px -1px 0 rgba(20,26,22,0.55),
     1px -1px 0 rgba(20,26,22,0.55),
    -1px  1px 0 rgba(20,26,22,0.55),
     1px  1px 0 rgba(20,26,22,0.55),
     0 3px 10px rgba(30,36,34,0.22);
}

/* ---- FOOTER: brighten links/headings so nothing blends into the evergreen ---- */
.footer__col h4, .footer__col h3 { color: #FFFFFF !important; opacity: 1 !important; }
.footer__links a, .footer__links li, .footer__contact a, .footer__contact p { color: #FFFFFF !important; opacity: 0.94 !important; }
.footer__links a:hover, .footer__contact a:hover { color: var(--el-marigold) !important; opacity: 1 !important; }
.footer__desc, .footer__address { color: rgba(255,255,255,0.9) !important; opacity: 1 !important; }
.footer__phone { color: var(--el-marigold) !important; }
.footer__phone:hover { color: #F0B550 !important; }
.footer__copyright, .footer__copyright a { color: rgba(255,255,255,0.92) !important; opacity: 1 !important; }
.footer__copyright a { color: var(--el-marigold) !important; }
.footer__bottom p { color: rgba(255,255,255,0.9) !important; }

/* ---- mobile hero stacking ---- */
@media (max-width: 1024px) {
  .hero__panel--featured { max-width: 560px; margin-top: 2rem; }
}
@media (max-width: 768px) {
  .hero__title--v4 > span.hero__title-lead,
  .hero__title--v4 > span.hero__title-pop,
  .hero__title--v4 > span:first-child.hero__title-lead { font-size: clamp(2rem, 7.2vw, 3rem) !important; }
}
@media (max-width: 480px) {
  .qq-stats--v4 { gap: 0.4rem !important; }
  .qq-stats--v4 .qq-stat__n { font-size: 1.15rem !important; gap: 0.3rem; flex-wrap: wrap; }
  .qq-stats--v4 .qq-stat__n i { font-size: 0.85rem; }
  .qq-section .qq-stats--v4 .qq-stat__l { font-size: 0.82rem !important; }
  .about-person-card__stat-n { font-size: 2.1rem; }
}

/* Until a real GHL form id is wired, the placeholder iframe (empty src) stays
   hidden and the fallback shows. When data-src is populated, remove the empty
   src attribute so the guard above forces it visible. */
.qq-card iframe#inline-mhi-placeholder[src=""] { display: none !important; }

/* The ba-wall has no section--* class, so the dark-era selector remaps its
   --text-muted to the on-dark grey (#9FA4AE). The wall is a LIGHT stone band
   now, so its description measured 1.90:1. Reset the token to the light value. */
.ba-wall { --text-muted: #55605A; --text-muted-on-dark: #55605A; }
.ba-wall .section-desc { color: #55605A; }