/* ============================================================
   STYLES.CSS — techToCEO Agency
   Version: 5.44.6 (2026-05-11)
   ============================================================
   Shared agency-wide stylesheet. CSS variables (--brand-*) are
   injected per-client via the <style> block in each page's <head>.
   This file lives at Agency/templates/assets/styles.css and is
   copied to dist/assets/styles.css at build time.
   ============================================================ */

/* ── RESET + BASE ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--brand-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--brand-dark, #1a202c);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brand-primary, #2c5282);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--brand-accent, #dd6b20);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--brand-font-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  line-height: 1.2;
  color: var(--brand-primary, #2c5282);
  margin-bottom: 0.6em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin-top: 1.5em; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); margin-top: 1em; }
h4 { font-size: 1.1rem; margin-top: 1em; }

p {
  margin-bottom: 1em;
}

ul, ol {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

li {
  margin-bottom: 0.4em;
}

strong {
  color: var(--brand-primary, #2c5282);
  font-weight: 600;
}

/* ── LAYOUT CONTAINERS ────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

section {
  padding: 4rem 0;
}

.section-light {
  background: var(--brand-light, #ffffff);
}

.section-accent {
  background: linear-gradient(135deg, var(--brand-primary, #2c5282) 0%, var(--brand-dark, #1a202c) 100%);
  color: #ffffff;
}

.section-accent h1,
.section-accent h2,
.section-accent h3 {
  color: #ffffff;
}

.section-accent a {
  color: var(--brand-accent, #dd6b20);
}

/* v5.47.2.1 hotfix: .hero-cta inside .section-accent was rendering with yellow
 * text on yellow button (invisible) because .section-accent a (specificity
 * 0,0,2,0) outranks .hero-cta (specificity 0,0,1,0). The button background is
 * brand-accent (yellow) by design; text must be brand-dark for contrast.
 * Specificity-boosted rule below restores the dark text on yellow button.
 * Same fix applied to .hero-cta:hover so hover state also stays readable. */
.section-accent a.hero-cta {
  color: var(--brand-dark, #1a202c);
}

.section-accent a.hero-cta:hover {
  color: var(--brand-dark, #1a202c);
}

.section-title {
  text-align: center;
  margin-bottom: 0.5em;
}

.section-sub {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.85;
}

/* ── HEADER + NAV ─────────────────────────────────────────────── */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-logo img {
  height: 60px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--brand-dark, #1a202c);
  font-weight: 500;
  font-size: 0.95rem;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--brand-primary, #2c5282);
}

.header-phone {
  background: var(--brand-emergency, #c53030);
  color: #ffffff;
  padding: 0.65rem 1.2rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.header-phone:hover {
  background: var(--brand-dark, #1a202c);
  color: #ffffff;
}

/* ── HERO ─────────────────────────────────────────────────────── */
/* v5.47.2a: Hero now uses image background + overlay cards (phone +
 * scheduling) per Bible §14C constants. Old gradient-only hero kept
 * as fallback for any template that doesn't include hero-with-image
 * class (none currently — all 7 templates updated v5.47.2a). */
.hero {
  background: linear-gradient(135deg, var(--brand-primary, #2c5282) 0%, var(--brand-dark, #1a202c) 100%);
  color: #ffffff;
  padding: 5rem 1.25rem 4rem;
  text-align: center;
  position: relative;
}

/* Image-background variant — applied to all hero sections v5.47.2a */
.hero-with-image {
  background-image: var(--hero-image), linear-gradient(135deg, var(--brand-primary, #2c5282) 0%, var(--brand-dark, #1a202c) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 480px;
  padding: 6rem 1.25rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Dark overlay for text readability over photo */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
  margin-bottom: 2.5rem;
}

.hero h1 {
  color: #ffffff;
  margin-bottom: 0.4em;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.hero-with-image h1 {
  color: #ffffff;
  margin-bottom: 0.6em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hero-sub {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin-bottom: 0;
  opacity: 0.95;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ── HERO OVERLAY CARDS (Bible §14C constants) ─────────────────── */
.hero-cards {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #ffffff;
  color: var(--brand-dark, #1a202c);
  padding: 1.1rem 1.75rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 240px;
}

.hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  color: var(--brand-dark, #1a202c);
}

.hero-card-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-primary, #2c5282);
  margin-bottom: 0.25rem;
}

.hero-card-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand-dark, #1a202c);
  line-height: 1.2;
}

.hero-card-phone .hero-card-label {
  color: var(--brand-primary, #2c5282);
}

.hero-card-schedule {
  background: var(--brand-accent, #dd6b20);
  color: #ffffff;
}

.hero-card-schedule .hero-card-label,
.hero-card-schedule .hero-card-value {
  color: #ffffff;
}

.hero-card-schedule:hover {
  color: #ffffff;
}

/* Legacy hero CTAs — kept for .section-accent emergency CTAs that still use these */
.hero-cta {
  display: inline-block;
  background: var(--brand-accent, #dd6b20);
  color: var(--brand-dark, #1a202c);
  padding: 1rem 2.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 6px;
  margin-top: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  color: var(--brand-dark, #1a202c);
}

.hero-cta-secondary {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  margin-left: 0.75rem;
  transition: background 0.2s ease;
}

.hero-cta-secondary:hover {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
}

/* ── NAV DROPDOWN + HAMBURGER (v5.47.2a) ──────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 32px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--brand-dark, #1a202c);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
    order: 3;
  }
  .site-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    order: 4;
    padding-top: 1rem;
    gap: 0.5rem;
  }
  .site-nav.is-open {
    display: flex;
  }
  .site-nav a {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    width: 100%;
  }
  .header-phone {
    order: 2;
  }
  .hero-with-image {
    min-height: 380px;
    padding: 4rem 1rem 3rem;
  }
  .hero-cards {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
  }
  .hero-card {
    width: 100%;
    min-width: 0;
  }
}

/* ── NAV DROPDOWN MENUS (v5.47.2a) ────────────────────────────── */
/* Top-level category items (Cooling, Heating, Plumbing) are dropdown
 * anchors per Bible §14C v5.47.2a — they have no destination page;
 * hovering opens the dropdown showing sub-page links. */
.nav-item-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-toggle {
  background: transparent;
  border: none;
  font: inherit;
  color: var(--brand-dark, #1a202c);
  font-weight: 600;
  padding: 0.5rem 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 0.2rem;
  transition: transform 0.2s ease;
}

.nav-item-dropdown:hover .nav-dropdown-toggle::after,
.nav-item-dropdown:focus-within .nav-dropdown-toggle::after {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 0.5rem 0;
  display: none;
  z-index: 200;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-item {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--brand-dark, #1a202c);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
  background: var(--brand-light, #f7fafc);
  color: var(--brand-primary, #2c5282);
}

@media (max-width: 900px) {
  /* On mobile, dropdowns are expanded inline (no hover needed) */
  .nav-item-dropdown {
    display: block;
    width: 100%;
  }
  .nav-dropdown-toggle {
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
  }
  .nav-dropdown-menu {
    position: static;
    display: block;
    border: none;
    box-shadow: none;
    padding-left: 1rem;
    background: transparent;
    min-width: 0;
  }
  .nav-dropdown-item {
    padding: 0.45rem 0.75rem;
    font-size: 0.95rem;
  }
}

/* ── SERVICE CARDS GRID ───────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.service-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: var(--brand-accent, #dd6b20);
}

.service-card .icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--brand-accent, #dd6b20);
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-card .icon-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card h3 {
  margin-top: 0;
  font-size: 1.35rem;
}

.service-card p {
  color: #4a5568;
  font-size: 0.95rem;
  line-height: 1.55;
}

.service-card a {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--brand-primary, #2c5282);
  font-weight: 600;
}

/* ── CONTENT SECTIONS ─────────────────────────────────────────── */
.content-section {
  padding: 3rem 0;
}

.content-section p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.2em;
}

.content-section h2 {
  margin-top: 2.5em;
  margin-bottom: 1em;
}

.content-section h2:first-child {
  margin-top: 0;
}

.content-section ul li {
  margin-bottom: 0.6em;
  line-height: 1.6;
}

/* Why-us flex layout */
.why-us {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.why-us img {
  border-radius: 8px;
  width: 100%;
}

@media (max-width: 768px) {
  .why-us {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ── REVIEWS CTA ──────────────────────────────────────────────── */
.reviews-cta {
  background: var(--brand-light, #f7fafc);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  max-width: 800px;
  margin: 3rem auto;
}

.reviews-cta h2 {
  margin-bottom: 0.5em;
}

.reviews-cta p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: #4a5568;
}

.reviews-cta-button {
  display: inline-block;
  background: var(--brand-primary, #2c5282);
  color: #ffffff;
  padding: 0.9rem 2rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.reviews-cta-button:hover {
  background: var(--brand-dark, #1a202c);
  color: #ffffff;
  transform: translateY(-2px);
}

/* v5.47.8 (Issue R fix): Blog Reviews CTA section gets color block
 * treatment to break up the long article flow with visual interest.
 * Section wrapper goes navy; the card inside blends into it (transparent
 * background, no border) so the section reads as a unified color block
 * rather than a card-on-card. Button switches to brand-accent yellow
 * for high contrast against navy. Per Aaron's call 2026-05-19. */
/* v5.47.13 (Issue R reversal): Blog Reviews CTA section now renders with
 * default page background (white). v5.47.8's navy color block treatment is
 * REMOVED — the .blog-reviews-section class is kept as a marker for any
 * future blog-specific styling but no longer applies a color block.
 * Default .reviews-cta card styling shows through naturally. */

/* v5.47.13 (Issue R reversal): Blog FAQ section now renders as navy color
 * block (was light gray in v5.47.8). The accordion .faq-item elements
 * inside have their own white backgrounds so they read cleanly against
 * the navy section. Section title gets explicit white color. */
.blog-faq-section {
  background: var(--brand-primary, #152f45);
  color: #ffffff;
}

.blog-faq-section .section-title {
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.reviews-cta-button::before {
  content: "★ ";
  color: var(--brand-accent, #dd6b20);
}

/* ── SERVICE AREA CARDS ───────────────────────────────────────── */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.area-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 1.25rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.area-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: var(--brand-accent, #dd6b20);
}

.area-card a {
  color: var(--brand-primary, #2c5282);
  font-weight: 600;
  font-size: 1.05rem;
  display: block;
}

.area-card a:hover {
  color: var(--brand-accent, #dd6b20);
}

/* ── FAQ ACCORDION (v5.47.2b) ────────────────────────────────── */
/* Question is a button; Answer is a div toggled via [hidden] attribute.
 * Question font is larger + bolder for visual hierarchy. Chevron icon
 * via ::after rotates 180° when expanded. Per Bible §14C v5.47.2b. */
.faq-section {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 0.85rem;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.faq-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-color: var(--brand-primary, #2c5282);
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  background: transparent;
  border: none;
  padding: 1.25rem 1.5rem;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-primary, #2c5282);
  text-align: left;
  cursor: pointer;
}

.faq-q:hover {
  color: var(--brand-dark, #1a202c);
}

.faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--brand-accent, #dd6b20);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-icon::before {
  /* Horizontal bar (visible always) */
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
}

.faq-icon::after {
  /* Vertical bar (visible when collapsed, hides when expanded → makes "−") */
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
}

.faq-q[aria-expanded="true"] .faq-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq-a {
  padding: 0 1.5rem 1.25rem;
  color: #4a5568;
  line-height: 1.65;
}

/* ── READ MORE EXPANDERS (v5.47.2b) ──────────────────────────── */
/* Per-H2-section collapsible content. First paragraph of each section
 * stays visible. Everything after wraps in .readmore-content, toggled by
 * .readmore-toggle button. data-collapsed attribute controls visibility
 * via CSS — display:none when collapsed, normal flow when expanded. */
.readmore-content[data-collapsed="true"] {
  display: none;
}

.readmore-content[data-collapsed="false"] {
  display: block;
  animation: readmore-fade-in 0.3s ease;
}

@keyframes readmore-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.readmore-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 2px solid var(--brand-primary, #2c5282);
  color: var(--brand-primary, #2c5282);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.55rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  margin: 0.5rem 0 1.5rem;
  transition: background 0.18s ease, color 0.18s ease;
}

.readmore-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}

.readmore-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.readmore-toggle:hover {
  background: var(--brand-primary, #2c5282);
  color: #ffffff;
}

/* ── SIGNS / INCLUDED LISTS ───────────────────────────────────── */
.signs-list,
.included-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.signs-list li,
.included-list li {
  background: #ffffff;
  border-left: 4px solid var(--brand-accent, #dd6b20);
  padding: 0.85rem 1.25rem;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.included-list li::before {
  content: "✓ ";
  color: var(--brand-primary, #2c5282);
  font-weight: 700;
  margin-right: 0.4rem;
}

/* ── REVIEW CARDS (legacy / future) ───────────────────────────── */
.review-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
}

.review-text {
  font-style: italic;
  color: #4a5568;
  margin-bottom: 1rem;
}

.review-platform {
  font-size: 0.85rem;
  color: #718096;
  font-weight: 600;
}

/* ── CONTACT FORM ─────────────────────────────────────────────── */
.contact-form {
  background: #ffffff;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  max-width: 600px;
  margin: 2rem auto;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--brand-dark, #1a202c);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--brand-primary, #2c5282);
  box-shadow: 0 0 0 3px rgba(44,82,130,0.15);
}

.form-submit {
  background: var(--brand-emergency, #c53030);
  color: #ffffff;
  padding: 0.9rem 2rem;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.form-submit:hover {
  background: var(--brand-primary, #2c5282);
  transform: translateY(-2px);
}

/* ── BLOG POST ────────────────────────────────────────────────── */
.blog-post-header {
  background: var(--brand-light, #f7fafc);
  padding: 3rem 1.25rem;
  text-align: center;
}

.blog-post-meta {
  color: #718096;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.blog-post-content {
  max-width: 760px;
  margin: 3rem auto;
  padding: 0 1.25rem;
}

.blog-post-content h2 {
  margin-top: 2em;
}

.blog-post-content img {
  border-radius: 6px;
  margin: 1.5em 0;
}

/* ── FOOTER ───────────────────────────────────────────────────── */
.site-footer {
  background: var(--brand-dark, #1a202c);
  color: #cbd5e0;
  padding: 3rem 1.25rem 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-col h4 {
  color: #ffffff;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.footer-col ul {
  list-style: none;
  padding-left: 0;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-col a {
  color: #cbd5e0;
  font-size: 0.95rem;
}

.footer-col a:hover {
  color: var(--brand-accent, #dd6b20);
}

.footer-bottom {
  border-top: 1px solid #2d3748;
  margin-top: 2rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: #a0aec0;
}

.footer-license {
  margin-top: 0.4rem;
  opacity: 0.7;
}

/* ── UTILITY ─────────────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

.phone-link {
  font-weight: 700;
  color: var(--brand-emergency, #c53030);
}

.phone-link:hover {
  color: var(--brand-primary, #2c5282);
}

/* ── MOBILE RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .site-nav {
    justify-content: center;
    gap: 1rem;
    font-size: 0.9rem;
  }

  .header-phone {
    align-self: center;
  }

  .hero {
    padding: 3rem 1rem 2.5rem;
  }

  .hero-cta-secondary {
    display: block;
    margin: 0.75rem auto 0;
    max-width: 280px;
  }

  section {
    padding: 2.5rem 0;
  }

  .container, .container-narrow {
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .signs-list,
  .included-list,
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * LAYOUT SYSTEM (v5.47.2-final)
 * ============================================================
 * Body class drives per-page layout treatment per Bible §14J:
 *   .layout-home     — homepage (Variant A/B/C structure)
 *   .layout-1        — Single-Column Deep Dive (internal pages, rotated)
 *   .layout-2        — Two-Column with Sidebar Anchors (internal pages, rotated)
 *   .layout-3        — Stacked Imagery Sections (internal pages, rotated)
 *   .layout-static   — About + Contact (fixed structure regardless of variant)
 *   .layout-blog     — Blog posts (article-style)
 *
 * Sidebar markup is always present in internal-page templates but only
 * displays under .layout-2. Other layouts hide it via display:none.
 * Full-bleed image sections in .layout-3 use background-image overlay
 * treatment on alternating sections.
 * ============================================================ */

/* ── PAGE-WITH-SIDEBAR GRID (v5.47.3, scope refined v5.47.4) ────
 *
 * Per Aaron's design call 2026-05-19 — internal pages (service, location,
 * service-areas, about, blog-post, blog-index) get a persistent right-side
 * sidebar containing phone card + featured image + Free Estimates CTA +
 * optional social icons. Homepage and Contact do NOT use this wrapper.
 *
 * v5.47.4 (Issue I fix): Grid wraps ONLY the first 2 body content sections.
 * Templates split body content so that section 1 and section 2 sit inside
 * .page-with-sidebar, then close the grid div, then continue with full-bleed
 * sections below. This preserves the above-the-fold sidebar value while
 * letting deeper SEO content (color blocks, image-bg sections) reach
 * edge-to-edge for proper visual impact. Templates with only 2 body
 * sections (location, service-areas, blog-index, blog-post) keep all
 * sections inside the grid since they already meet the limit.
 *
 * Layout: body content column on left flowing through rotation, sidebar
 * column on right with fixed-ish width. Sidebar is NOT sticky — scrolls
 * with the page. Only the header is sticky on this design system. */

.page-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2.5rem;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto 1rem;
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.page-body-column {
  min-width: 0; /* allows grid shrink for long content */
}

/* Body sections inside the body column should not have their own outer
 * padding/margin — the grid wrapper handles spacing. */
.page-body-column > section {
  padding-left: 0;
  padding-right: 0;
}

/* ── PERSISTENT SIDEBAR COMPONENT (v5.47.3) ────────────────── */
.page-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 0;
}

/* Phone card — brand-dark background */
.sidebar-phone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--brand-dark, #1a202c);
  color: #ffffff;
  padding: 1.5rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-phone-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  color: #ffffff;
}

.sidebar-phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--brand-accent, #dd6b20);
  color: #ffffff;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
}

.sidebar-phone-number {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-top: 0.6rem;
}

/* Featured image */
.sidebar-image-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.sidebar-image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Free Estimates CTA card */
.sidebar-cta-card {
  background: var(--brand-primary, #2c5282);
  color: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
}

.sidebar-cta-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-accent, #dd6b20);
  margin-bottom: 0.4rem;
}

.sidebar-cta-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: #ffffff;
  line-height: 1.3;
}

.sidebar-cta-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #ffffff;
  opacity: 0.92;
  margin: 0 0 1.1rem;
}

.sidebar-cta-button {
  display: inline-block;
  background: var(--brand-accent, #dd6b20);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  padding: 0.7rem 1.6rem;
  border-radius: 28px;
  text-transform: uppercase;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.sidebar-cta-button:hover {
  transform: translateY(-1px);
  opacity: 0.92;
  color: #ffffff;
}

/* Social icons section */
.sidebar-social {
  text-align: center;
  padding: 0.5rem 0;
}

.sidebar-social-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-primary, #2c5282);
  margin-bottom: 0.7rem;
}

.sidebar-social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
}

.sidebar-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-dark, #1a202c);
  transition: color 0.18s ease, transform 0.18s ease;
}

.sidebar-social-icon:hover {
  color: var(--brand-primary, #2c5282);
  transform: translateY(-2px);
}

/* Mobile: stack sidebar below body content */
@media (max-width: 900px) {
  .page-with-sidebar {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .page-sidebar {
    padding: 1rem 0;
  }
}

/* ── LAYOUT 1 + HOMEPAGE: Rich section rotation (v5.47.2.2) ───
 *
 * Per Issues 5 + 8 + Aaron's design call 2026-05-18 PM. Layout 1 was too
 * plain (text on white). Homepage was too monotonous after the hero +
 * service cards. Fix: rotate content sections through 4 distinct visual
 * treatments. v5.47.2.1 tried CSS :nth-of-type but that counted ALL
 * sibling <section> elements (not just .section-light), causing rotation
 * to fail. v5.47.2.2 uses explicit rotation classes stamped by build.js
 * onto .section-light elements:
 *
 *   .section-rotation-1 → PLAIN (default light-gray background)
 *   .section-rotation-2 → COLOR-BLOCK (brand-primary background, white text)
 *   .section-rotation-3 → PLAIN (default light-gray background)
 *   .section-rotation-4 → IMAGE-TEXTURE (ghost-image background, dark text)
 *
 * Per Aaron's AAA Air Control reference — image-texture treatment uses
 * a heavy white veil (~88% opacity) over the section-image so the
 * image reads as background texture, not a focal point. Dark text on top
 * remains fully readable. Color-block treatment matches AAA's solid
 * brand-color blocks.
 *
 * Issue A fix (v5.47.2.2): Text-color overrides in color-block treatment
 * apply to DIRECT content only — NOT to nested cards (.service-card,
 * .about-credential-card, etc.) which have their own white backgrounds.
 * Without this scoping, white text from parent section bled into white
 * cards making card titles/descriptions invisible. */

/* ── LAYOUT 1: Single-Column Deep Dive ─────────────────────── */
.layout-1 .faq-section .faq-q {
  color: var(--brand-primary, #2c5282);
}

.layout-1 .faq-icon::before,
.layout-1 .faq-icon::after {
  background: var(--brand-accent, #dd6b20);
}

/* COLOR-BLOCK treatment (section-rotation-2): brand-primary background.
 * Stamped by build.js onto every 2nd .section-light in document order.
 * Text-color overrides scoped so they don't cascade into nested cards
 * which have their own backgrounds. */
.section-rotation-2 {
  background: var(--brand-primary, #2c5282) !important;
  color: #ffffff;
}

.section-rotation-2 .section-title,
.section-rotation-2 > .container > h2,
.section-rotation-2 > .container > h3,
.section-rotation-2 > .container-narrow > h2,
.section-rotation-2 > .container-narrow > h3 {
  color: #ffffff;
}

.section-rotation-2 > .container > p,
.section-rotation-2 > .container-narrow > p,
.section-rotation-2 > .container > .readmore-content p,
.section-rotation-2 > .container-narrow > .readmore-content p {
  color: #f0f4f8;
}

.section-rotation-2 > .container > a:not(.hero-cta):not(.hero-cta-secondary):not(.reviews-cta-button),
.section-rotation-2 > .container-narrow > a:not(.hero-cta):not(.hero-cta-secondary):not(.reviews-cta-button) {
  color: var(--brand-accent, #dd6b20);
}

.section-rotation-2 .signs-list li,
.section-rotation-2 .included-list li {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
}

/* v5.47.18 (FAQ invisibility fix on location pages): Bold inline text on
 * .section-rotation-2 (navy color-block sections) was rendering in brand-
 * primary navy color (from base `strong` rule line 74), which is the same
 * color as the section background → questions in location FAQs were
 * completely invisible, leaving only answer text starting at variable
 * horizontal positions (where each invisible question span happened to
 * end). Override <strong> color to white inside rotation-2 sections.
 * Same root cause class as Issue W (rotation-4 bold contrast) but for the
 * navy color-block variant. Per Aaron's finding 2026-05-19 deep evening
 * on /kyle-tx/ FAQ section. */
.section-rotation-2 strong,
.section-rotation-2 b {
  color: #ffffff;
}

.section-rotation-2 .readmore-toggle {
  border-color: var(--brand-accent, #dd6b20);
  color: var(--brand-accent, #dd6b20);
}

.section-rotation-2 .readmore-toggle:hover {
  background: var(--brand-accent, #dd6b20);
  color: var(--brand-dark, #1a202c);
}

/* v5.47.8 (Issue O fix): Read More on image-texture rotation slot.
 * The default navy text + navy border treatment loses contrast against
 * the gray image-veiled background on .section-rotation-4. Fix: solid
 * brand-dark filled button with white text for unambiguous contrast
 * regardless of underlying image variance. Hover inverts to brand-primary. */
.section-rotation-4 .readmore-toggle {
  background: var(--brand-dark, #1a202c);
  border-color: var(--brand-dark, #1a202c);
  color: #ffffff;
}

.section-rotation-4 .readmore-toggle:hover {
  background: var(--brand-primary, #2c5282);
  border-color: var(--brand-primary, #2c5282);
  color: #ffffff;
}

/* v5.47.18 / v5.47.22 / v5.48.10 — Bold inline text on .section-rotation-4.
 *
 * History:
 *  - v5.47.18 attempt #1: Set color to brand-dark — but per-client config
 *    defines --brand-dark and on some clients (Bee = #454546) it's a medium
 *    gray that shares the hue family with the image-veil, producing low
 *    contrast indistinguishable from the original navy issue.
 *  - v5.47.22: Switched to brand-accent based on a single tested instance
 *    (numbered-list step labels on /cooling/minisplitinstall/) where it
 *    appeared to read OK. The conclusion that "yellow always works on the
 *    white veil because bold weight compensates" was overgeneralized.
 *
 * v5.48.10: Switched to brand-primary. Bug surfaced when Aaron reviewed
 * Bee's /about/ "Who we serve" section (Marcus emits city names as
 * <strong> tags) and the homepage "What Buda Homeowners Should Know"
 * section (bullet-list labels as <strong> tags). Both rendered yellow
 * on the 0.70-alpha white veil — unreadable. Light yellow + light veil
 * = ~1.5-2:1 contrast regardless of bold weight. brand-primary (navy on
 * Bee, dark equivalent on other clients) is the body-text default for
 * these sections per v5.47.8 ("fully readable"), so bold text in the
 * same color reads correctly. Avoided brand-dark for the same reason
 * v5.47.18 rejected it (per-client variability).
 *
 * Wrong-premise lesson: v5.47.22's "yellow strong text reads on white
 * veil" claim was based on one tested instance. The rule applied
 * globally to all rotation-4 strong/b tags, so the broken state shipped
 * to every other rotation-4 section that contained bold text. Pattern:
 * a single positive test doesn't validate a rule that fires globally.
 *
 * The .section-rotation-2 strong, b { color: white } rule from v5.47.18
 * is UNCHANGED — white on navy is correct, only the white-veil case
 * needed the color flip. */
.section-rotation-4 strong,
.section-rotation-4 b {
  color: var(--brand-primary);
}

/* v5.47.20: <a> contrast on rotation-4 image-veil sections.
 *
 * History:
 *  - v5.47.20 set brand-dark; flagged as failing on /cooling/minisplitinstall/
 *  - v5.47.21 switched to brand-accent (yellow on Bee) — but that diagnosis
 *    was based on numbered-list step labels which v5.47.22 revealed were
 *    actually <strong> tags, not <a> tags. The yellow-on-veil decision for
 *    <a> was made under a wrong premise.
 *  - v5.47.22 marked the v5.47.21 rule "dormant" because no actual <a> tags
 *    existed inside rotation-4 sections in the surfaced content at the time.
 *
 * v5.48.9: Rule activated by real content — Bee's /about/ "Who we serve"
 * section contains location-page links inside a rotation-4 section, and
 * yellow on the 0.70-alpha white veil reads at ~1.5-2:1 contrast (fails
 * WCAG AA). Bug report: 2026-05-21-bee-comfortable-yellow-text-image-veil-contrast.md.
 *
 * Fix: brand-primary (navy on Bee, dark equivalent on other clients) is
 * the canonical "link color" semantic AND provides reliable contrast
 * against the 0.70 white veil for every client (the body text default in
 * these sections is also dark and reads "fully readable" per v5.47.8).
 * Avoids brand-accent (light/yellow per-client variability) and brand-dark
 * (some clients like Bee have brand-dark = medium gray #454546 which
 * shares hue family with the veil). Bold + underline preserved for clear
 * link affordance. */
.section-rotation-4 a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.section-rotation-4 a:hover {
  color: var(--brand-accent);
  text-decoration: underline;
}

/* IMAGE-TEXTURE treatment (section-rotation-4): ghost-image background.
 * The heavy white veil (linear-gradient with 0.88 alpha) sits OVER the
 * image so the image reads as ~12% opacity texture under fully-readable
 * dark text. Per Aaron's AAA Air Control reference — subtle texture,
 * not focal point. */
/* v5.47.8 (Issue P fix): Reduced white-veil opacity from 0.88 to 0.70.
 * Previous treatment had the image reading as only ~12% opacity — visual
 * variety intent of the image-texture treatment was lost. Now image
 * reads at ~30% opacity, perceivable as visual interest while keeping
 * dark text on top fully readable. Per Aaron's call 2026-05-19. */
.section-rotation-4 {
  background-image:
    linear-gradient(rgba(255,255,255,0.70), rgba(255,255,255,0.70)),
    var(--section-image-1) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Subsequent image-texture sections (8, 12, ...) use section-image-2
 * so consecutive texture sections don't repeat the same photo.
 * The general-sibling combinator (~) targets section-rotation-4 elements
 * AFTER another section-rotation-4 element. */
.section-rotation-4 ~ .section-rotation-4 {
  background-image:
    linear-gradient(rgba(255,255,255,0.70), rgba(255,255,255,0.70)),
    var(--section-image-2) !important;
}

/* ── LAYOUT 2 ELIMINATED (v5.47.3) ─────────────────────────────
 * Layout 2 ("Two-Column with Sidebar Anchors") was removed in v5.47.3.
 * Its distinguishing feature (sidebar with anchor links) was replaced by
 * the persistent right-side sidebar that now appears on ALL internal
 * pages (see .page-with-sidebar above). With no distinguishing feature,
 * Layout 2 became identical to Layout 1. Rotation now alternates 1↔3
 * instead of cycling 1→2→3. All `.layout-2` CSS rules and the old
 * `.sidebar-card`, `.sidebar-anchor-list`, `.sidebar-phone-cta` rules
 * have been removed. New sidebar component uses different class names
 * (.page-sidebar, .sidebar-phone-card, .sidebar-cta-card, etc.).
 * ============================================================ */

/* ── HOMEPAGE SERVICES SECTION (v5.47.2.3 — Issue E fix) ─── */
/* Homepage Services section has hardcoded navy backdrop independent of
 * rotation. Identified by .homepage-services-section class added to the
 * <section> in index.template.html. build.js skips this section when
 * stamping rotation classes so it always renders with brand-primary
 * navy regardless of where it falls in the document flow. Per Aaron's
 * note that "Our Services" used to have navy backdrop in v5.47.2.1 but
 * was lost in v5.47.2.2 after rotation logic rewrite. */
.homepage-services-section {
  background: var(--brand-primary, #2c5282) !important;
  color: #ffffff;
}

.homepage-services-section .section-title,
.homepage-services-section > .container > h2,
.homepage-services-section > .container > p.section-sub {
  color: #ffffff;
}

/* Service cards INSIDE the navy services section retain their own white
 * background and dark text — they're not subject to the parent's white
 * text rule (Issue A scoping fix). The .service-card styling is defined
 * elsewhere in this file and includes the white background by default. */

/* ── LAYOUT 3: Stacked Imagery Sections (v5.47.2.3) ─────────── */
/* Per Aaron's Issue G design call — Layout 3 now uses the same
 * section-rotation-N class system as Layout 1, but slot 4 is full-bleed
 * image-background (dramatic) instead of image-texture (subtle). Pattern:
 *   .section-rotation-1 → PLAIN (white background, default)
 *   .section-rotation-2 → COLOR-BLOCK (brand-primary, same as Layout 1)
 *   .section-rotation-3 → PLAIN (white background, default)
 *   .section-rotation-4 → FULL-BLEED IMAGE-BG (Layout 3 signature)
 *
 * Color-block treatment for Layout 3 is identical to Layout 1's (defined
 * above in the section-rotation-2 rules). The full-bleed image treatment
 * only fires on .layout-3 pages. Slot 1/3 (plain) need no rules — default
 * .section-light / .content-section styling handles it. */

.layout-3 .section-rotation-4 {
  background-image: var(--section-image-1), linear-gradient(180deg, var(--brand-dark, #1a202c), var(--brand-primary, #2c5282));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
}

/* Second + later .section-rotation-4 on the same page use --section-image-2
 * so consecutive full-bleed sections don't repeat the same photo. */
.layout-3 .section-rotation-4 ~ .section-rotation-4 {
  background-image: var(--section-image-2), linear-gradient(180deg, var(--brand-dark, #1a202c), var(--brand-primary, #2c5282));
}

.layout-3 .section-rotation-4::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,30,50,0.75), rgba(20,30,50,0.85));
  z-index: 0;
}

.layout-3 .section-rotation-4 > .container,
.layout-3 .section-rotation-4 > .container-narrow {
  position: relative;
  z-index: 1;
}

.layout-3 .section-rotation-4 .section-title,
.layout-3 .section-rotation-4 h2,
.layout-3 .section-rotation-4 h3 {
  color: #ffffff;
}

.layout-3 .section-rotation-4 .signs-list li,
.layout-3 .section-rotation-4 .included-list li {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
}

/* v5.47.7 (Issue N fix): Layout 3's FAQ on plain rotation slots (1 + 3)
 * uses card-style with light backdrop. Previously the selector was
 * `.layout-3 .faq-section:not(.section-rotation-2):not(.section-rotation-4)`
 * which was buggy: `.section-rotation-2` is on the parent <section>, not
 * on the inner .faq-section div. So the :not() always evaluated true and
 * the rule fired regardless of rotation. Inside a rotation-2 (navy color
 * block) section, the inner div got a light background, making the
 * white-text H2 invisible against light-gray. Fixed: explicitly include
 * only rotation-1 and rotation-3 parent sections via descendant selector. */
.layout-3 .section-rotation-1 > .faq-section,
.layout-3 .section-rotation-3 > .faq-section {
  background: var(--brand-light, #f7fafc);
  padding: 2rem;
  border-radius: 12px;
}


/* ── LAYOUT STATIC (About + Contact) ──────────────────────── */
/* About: two-column team-story */
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}

.about-story-photo img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.about-story-text {
  font-size: 1.05rem;
  line-height: 1.7;
}

/* About: timeline / milestones */
.about-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.about-timeline-item {
  text-align: center;
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.about-timeline-year {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--brand-primary, #2c5282);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.about-timeline-label {
  color: var(--brand-dark, #1a202c);
  font-weight: 500;
}

/* About: three-card credentials */
.about-credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.about-credential-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-credential-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.about-credential-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  background: var(--brand-primary, #2c5282);
  color: var(--brand-accent, #dd6b20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  border-radius: 50%;
}

.about-credential-card h3 {
  color: var(--brand-primary, #2c5282);
  margin-bottom: 0.5rem;
}

.about-credential-card p {
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* Contact: two-column form-and-info */
.contact-form-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contact-info-card {
  background: var(--brand-primary, #2c5282);
  color: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  position: sticky;
  top: calc(var(--header-height, 80px) + 1rem);
}

.contact-info-card h3 {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.contact-info-list li {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.contact-info-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.contact-info-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-accent, #dd6b20);
  margin-bottom: 0.25rem;
}

.contact-info-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
}

a.contact-info-value:hover {
  color: var(--brand-accent, #dd6b20);
}

.contact-info-phone-cta {
  display: block;
  background: var(--brand-accent, #dd6b20);
  color: #ffffff;
  text-decoration: none;
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
  margin-top: 1.5rem;
  transition: transform 0.2s ease;
}

.contact-info-phone-cta:hover {
  transform: translateY(-2px);
  color: #ffffff;
}

.contact-info-phone-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.contact-info-phone-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Mobile: stack about & contact two-column layouts */
@media (max-width: 900px) {
  .about-story-grid,
  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contact-info-card {
    position: static;
    top: auto;
  }
}

/* ============================================================
 * BLOG (v5.47.2.1 — Issue 3 fix)
 * ============================================================ */

/* Blog post page — image at top of post body */
.blog-post-image {
  margin-bottom: 2rem;
}

.blog-post-image img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.blog-post-header {
  background: #f7fafc;
  padding: 3rem 0 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.blog-post-header h1 {
  margin: 0.5rem 0 0;
  color: var(--brand-primary, #2c5282);
}

.blog-post-meta {
  font-size: 0.85rem;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.blog-post-content {
  padding: 2rem 0 4rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

.blog-post-content > .container-narrow > p {
  margin-bottom: 1.25rem;
}

/* v5.47.6: Article typography for blog post body. Markdown-rendered
 * content gets prose-friendly spacing, list styling, and heading hierarchy.
 * Blog posts are excluded from rotation injection, Read More wrapping,
 * and H2 splitting — content renders as continuous reading prose. */
.blog-post-content h2 {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--brand-primary, #2c5282);
  margin: 2.5rem 0 1rem;
  line-height: 1.3;
}

.blog-post-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand-dark, #1a202c);
  margin: 2rem 0 0.75rem;
  line-height: 1.35;
}

.blog-post-content ul,
.blog-post-content ol {
  margin: 1rem 0 1.5rem;
  padding-left: 1.5rem;
}

.blog-post-content ul li,
.blog-post-content ol li {
  margin-bottom: 0.5rem;
  line-height: 1.65;
}

.blog-post-content blockquote {
  border-left: 4px solid var(--brand-accent, #dd6b20);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 1.5rem 0;
  color: #4a5568;
  font-style: italic;
}

.blog-post-content strong {
  color: var(--brand-dark, #1a202c);
  font-weight: 700;
}

.blog-post-content a {
  color: var(--brand-primary, #2c5282);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-post-content a:hover {
  color: var(--brand-accent, #dd6b20);
}

/* v5.47.6: Blog pagination — bottom of blog index. Numbered + Previous/Next.
 * Current page is highlighted with brand color, not a link. Per Aaron's
 * design call 2026-05-19 — 5 posts per page, numbered pagination underneath. */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 3rem 0 1rem;
  padding: 1.5rem 0;
}

.blog-pagination a,
.blog-pagination .blog-pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.85rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.blog-pagination a {
  background: #ffffff;
  color: var(--brand-dark, #1a202c);
  border: 1px solid #e2e8f0;
}

.blog-pagination a:hover {
  background: var(--brand-light, #f7fafc);
  color: var(--brand-primary, #2c5282);
  border-color: var(--brand-primary, #2c5282);
}

.blog-pagination .blog-pagination-current {
  background: var(--brand-primary, #2c5282);
  color: #ffffff;
  cursor: default;
}

.blog-pagination .blog-pagination-prev,
.blog-pagination .blog-pagination-next {
  font-weight: 500;
}

/* Blog index page — card list */
.blog-index-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.blog-index-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.blog-index-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-index-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.blog-index-card-image-link {
  display: block;
  overflow: hidden;
}

.blog-index-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.blog-index-card-image-link:hover .blog-index-card-image {
  transform: scale(1.04);
}

.blog-index-card-body {
  padding: 1.5rem 1.5rem 1.5rem 0;
}

/* v5.47.2.2 (Issue D): Date moved AFTER title in markup. Old
 * .blog-index-card-meta selector kept for backward compatibility in
 * case any cached HTML still references it; primary style now on
 * .blog-index-card-date. Subtle italic + lighter color so it reads
 * as supporting info, not headline competition. */
.blog-index-card-meta,
.blog-index-card-date {
  display: inline-block;
  font-size: 0.85rem;
  color: #718096;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0.15rem 0 0.75rem;
}

.blog-index-card-title {
  font-size: 1.4rem;
  margin: 0 0 0.25rem;
  line-height: 1.3;
}

.blog-index-card-title a {
  color: var(--brand-primary, #2c5282);
  text-decoration: none;
}

.blog-index-card-title a:hover {
  color: var(--brand-dark, #1a202c);
}

.blog-index-card-excerpt {
  color: #4a5568;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}

.blog-index-card-readmore {
  font-weight: 700;
  color: var(--brand-accent, #dd6b20);
  text-decoration: none;
  font-size: 0.95rem;
}

.blog-index-card-readmore:hover {
  color: var(--brand-primary, #2c5282);
}

@media (max-width: 700px) {
  .blog-index-card {
    grid-template-columns: 1fr;
  }
  .blog-index-card-image {
    max-height: 220px;
  }
  .blog-index-card-body {
    padding: 0 1.25rem 1.5rem;
  }
}

/* ============================================================
   GOOGLE REVIEWS WIDGET (added v5.48.3c per Bible §15)
   ============================================================
   Edge-to-edge full-bleed section. Light gray background works
   across all client color schemes (per Aaron's design call
   2026-05-20). Header with star rating + count, 5-card carousel
   with manual arrow navigation. Responsive: 5 cards desktop /
   3 tablet / 1 mobile. Card text fades to gradient at bottom
   for consistent height per Bible §15.5.
   ============================================================ */

.google-reviews-section {
  background: #f5f6f8;
  padding: 3.5rem 0 4rem;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.google-reviews-section .container-narrow {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.google-reviews-title {
  font-family: var(--brand-font-heading, inherit);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--brand-dark, #1a1a1a);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.google-reviews-rating-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem;
  font-size: 1.05rem;
  color: #4a4a4a;
}

.google-reviews-stars {
  color: var(--brand-accent, #f59e0b);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

.google-reviews-rating-num {
  font-weight: 700;
  color: var(--brand-dark, #1a1a1a);
  font-size: 1.15rem;
}

.google-reviews-rating-sep {
  color: #9ca3af;
  font-weight: 700;
}

.google-reviews-rating-count {
  color: #4a4a4a;
}

/* ── Carousel container ── */
.google-reviews-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.google-reviews-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  flex: 1;
  overflow: hidden;
}

/* ── Individual review card ── */
.google-review-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  height: 260px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.google-review-card-header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.google-review-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e5e7eb;
}

.google-review-initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-primary, #2563eb);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.google-review-card-meta {
  flex: 1;
  min-width: 0;
}

.google-review-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-dark, #1a1a1a);
  line-height: 1.2;
  margin-bottom: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.google-review-stars {
  color: var(--brand-accent, #f59e0b);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.google-review-time {
  color: #6b7280;
  font-size: 0.82rem;
  line-height: 1.2;
}

/* Review text body with fade-out gradient at the bottom.
   Per Bible §15.5: fixed card height + fade gradient prevents long
   reviews from breaking layout while making it clear there's more. */
.google-review-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #374151;
  flex: 1;
  overflow: hidden;
  position: relative;
  /* Allow about 7 lines visible at body font size, then fade. */
}

.google-review-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5em;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 90%);
  pointer-events: none;
}

/* ── Arrow navigation buttons ── */
.google-reviews-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--brand-primary, #2563eb);
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s ease, transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 0 0 2px 0;  /* nudge ‹ / › characters visually centered */
}

.google-reviews-arrow:hover:not(:disabled) {
  transform: scale(1.06);
}

.google-reviews-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.google-reviews-arrow-prev {
  padding-right: 4px;  /* visual nudge for ‹ glyph */
}

.google-reviews-arrow-next {
  padding-left: 4px;  /* visual nudge for › glyph */
}

/* ============================================================
   Responsive — tablet: 3 cards visible
   ============================================================ */
@media (max-width: 1024px) {
  .google-reviews-track {
    grid-template-columns: repeat(3, 1fr);
  }
  .google-reviews-title {
    font-size: 1.75rem;
  }
}

/* ============================================================
   Responsive — mobile: 1 card visible (carousel-like behavior)
   ============================================================ */
@media (max-width: 768px) {
  .google-reviews-section {
    padding: 2.5rem 0 3rem;
  }
  .google-reviews-section .container-narrow {
    padding: 0 1rem;
  }
  .google-reviews-title {
    font-size: 1.5rem;
  }
  .google-reviews-rating-line {
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
  }
  .google-reviews-track {
    grid-template-columns: 1fr;
  }
  .google-reviews-carousel {
    gap: 0.5rem;
  }
  .google-reviews-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
  }
  .google-review-card {
    height: 240px;
    padding: 1.1rem 1.1rem 0.9rem;
  }
}
