@charset "UTF-8";
/* ==========================================================================
   PAGES.CSS - Page-specific styles for static HTML pages
   Loaded after components.css. Contains styles that are unique to individual
   pages (pricing, about, services, guides hub) rather than reusable components.
   ========================================================================== */

/* ==========================================================================
   0. UTILITY CLASSES
   ========================================================================== */

.bg-off-white {
  background-color: var(--off-white);
}

.lead-magnet-cta-box {
  background: var(--off-white);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
}

.lead-magnet-cta-box p {
  font-size: 1.0625rem;
  color: var(--charcoal);
  margin-bottom: var(--space-md);
}

/* Email gate forms (cost estimator + readiness checklist) */
.email-gate .form-input {
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: border-color 0.2s;
}
.email-gate .form-input:focus {
  border-color: var(--navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 25, 47, 0.1);
}

/* ==========================================================================
   1. HOMES & SUITES SERVICE PAGE
   ========================================================================== */

.project-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.project-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.project-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
}

.project-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--navy);
}

.project-card h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.project-card p {
  font-size: 0.9rem;
  color: var(--gray);
  flex-grow: 1;
}

/* Solution Section */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.solution-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
}

.solution-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--off-white);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solution-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--navy);
}

.solution-item h4 {
  margin-bottom: 0.25rem;
}

.solution-item > div {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-grow: 1;
}

.solution-item p {
  font-size: 0.9rem;
  color: var(--gray);
}

/* Pricing Preview Section */
.pricing-table-wrapper {
  max-width: 600px;
  margin: 0 auto;
  overflow-x: auto;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pricing-table th,
.pricing-table td {
  padding: 1rem 1.5rem;
  text-align: left;
}

.pricing-table thead {
  background: var(--navy);
  color: white;
}

.pricing-table tbody tr {
  border-bottom: 1px solid #e2e8f0;
}

.pricing-table tbody tr:last-child {
  border-bottom: none;
}

.pricing-table tbody tr:hover {
  background: var(--off-white);
}

.pricing-note {
  text-align: center;
  font-size: 0.875rem;
  color: var(--gray);
  max-width: 600px;
  margin: 1.5rem auto 0;
}

.pricing-cta {
  text-align: center;
  margin-top: 2rem;
}

/* Lead Magnet Section */
.lead-magnet-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.lead-magnet-benefits {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.lead-magnet-benefits li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.lead-magnet-benefits svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--green);
}

@media (max-width: 768px) {
  .lead-magnet-content {
    grid-template-columns: 1fr;
  }
}

/* Gallery Section (shared by homes-suites and multi-unit) */
.renderings-section {
  margin-top: 3rem;
}

.renderings-header {
  text-align: center;
  margin-bottom: 2rem;
}

.renderings-header p {
  color: var(--gray);
  margin-top: 0.5rem;
}

.gallery-container {
  max-width: 100%;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.gallery-item {
  border-radius: 0.75rem;
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gallery-image {
  aspect-ratio: 16/10;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: 0.875rem;
  overflow: hidden;
}

.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.gallery-caption {
  padding: 1rem;
}

.gallery-caption h4 {
  margin-bottom: 0.25rem;
}

.gallery-caption p {
  font-size: 0.875rem;
  color: var(--gray);
}

/* Problem section number variant */
.problem-number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Comparison marks (homes-suites page) */
.comparison-x {
  color: var(--red);
  font-weight: 600;
}

.comparison-check {
  color: var(--green);
  font-weight: 600;
}

/* Homeowner scenario callout */
.homeowner-scenario {
  background: var(--off-white);
  border-left: 4px solid var(--gold);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}

/* Case study inline callout */
.case-study-callout {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d4a7a 100%);
  color: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
}

.case-study-callout h3 {
  color: white;
  margin-bottom: var(--space-sm);
}

.case-study-callout p {
  color: #cbd5e0;
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   2. PRICING PAGE
   ========================================================================== */

.pricing-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.pricing-card--popular {
  border: 2px solid var(--gold);
  position: relative;
}

.pricing-popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--gold);
  color: white;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.25rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-card-header {
  margin-bottom: var(--space-lg);
}

.pricing-card-header h3 {
  margin-bottom: var(--space-xs);
}

.pricing-card-header p {
  color: var(--gray);
  font-size: 0.9375rem;
}

.pricing-card-footer {
  margin-top: var(--space-lg);
  text-align: center;
}

.feasibility-box {
  background: var(--off-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.feasibility-box h4 {
  margin-bottom: var(--space-sm);
}

.feasibility-box p {
  color: var(--gray);
  font-size: 0.875rem;
  margin-bottom: 0;
}

.feasibility-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--space-sm);
}

.project-desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--gray);
  font-weight: 400;
  margin-top: 2px;
}

.savings-highlight {
  display: inline-block;
  background: var(--green-light);
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-left: var(--space-sm);
}

.guarantee-banner {
  background: var(--off-white);
  padding: var(--space-lg) 0;
  text-align: center;
}

.guarantee-banner p {
  color: var(--charcoal);
  font-size: 1rem;
  margin: 0;
}

/* Pricing Steps (How Pricing Works) */
.pricing-steps-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-lg);
  max-width: 960px;
  margin: 0 auto;
}

.pricing-step {
  flex: 1;
  text-align: center;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pricing-step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 auto var(--space-md);
}

.pricing-step h4 {
  margin-bottom: var(--space-sm);
}

.pricing-step-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--space-sm);
}

.pricing-step p {
  color: var(--gray);
  font-size: 0.9375rem;
  margin-bottom: 0;
  flex-grow: 1;
}

.pricing-step-arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--gray);
  margin-top: 8px;
  display: none;
}

.pricing-step-arrow svg {
  width: 100%;
  height: 100%;
}

/* Pricing table note */
.pricing-table-note {
  font-size: 0.8125rem;
  color: var(--gray);
  text-align: center;
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

/* Cost Comparison Section */
.cost-comparison-wrapper {
  max-width: 720px;
  margin: 0 auto;
  overflow-x: auto;
}

.cost-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cost-comparison-table th,
.cost-comparison-table td {
  padding: 0.875rem 1.25rem;
  text-align: left;
  font-size: 0.9375rem;
  vertical-align: middle;
}

.cost-comparison-table thead {
  background: var(--navy);
  color: white;
}

.cost-comparison-table thead th:last-child {
  background: var(--gold);
  color: var(--navy);
}

.cost-comparison-table tbody tr {
  border-bottom: 1px solid #e2e8f0;
}

.cost-comparison-table tbody tr:last-child {
  border-bottom: none;
}

.cost-comparison-table tbody tr:hover {
  background: var(--off-white);
}

.comparison-total-row {
  background: var(--off-white);
}

.comparison-total-row td:last-child {
  color: var(--navy);
}

.included-cell {
  color: var(--green);
  font-weight: 600;
}

.cost-comparison-note {
  font-size: 0.8125rem;
  color: var(--gray);
  text-align: center;
  margin-top: var(--space-md);
  margin-bottom: 0;
}

/* Included section (pricing page variant) */
.included-diagram {
  max-width: 900px;
  margin: 0 auto var(--space-2xl);
  overflow-x: auto;
}

.included-diagram svg {
  width: 100%;
  height: auto;
}

.included-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.included-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--off-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.included-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--navy);
}

.included-grid .included-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--white);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  height: 100%;
}

/* Not Included section */
.not-included-content {
  margin-top: 0;
}

.not-included-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.not-included-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.9375rem;
  color: var(--charcoal);
  background: var(--white);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

.not-included-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke: var(--red);
  margin-top: 2px;
}

/* Philosophy section */
.philosophy {
  background: var(--off-white);
}

.philosophy-content {
  max-width: 900px;
  margin: 0 auto;
}

.philosophy-content h2 {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.philosophy-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.philosophy-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.philosophy-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--navy);
}

.philosophy-item h4 {
  margin-bottom: var(--space-xs);
}

.philosophy-item p {
  color: var(--gray);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* ==========================================================================
   3. ABOUT PAGE
   ========================================================================== */

/* Why We Exist */
.why-exist {
  background: var(--white);
}

.why-exist-content {
  max-width: 800px;
  margin: 0 auto;
}

.why-exist-text h2 {
  margin-bottom: var(--space-lg);
}

.why-exist-text p {
  font-size: 1.0625rem;
  line-height: 1.8;
}

.problem-list {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.problem-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9375rem;
  color: var(--charcoal);
}

.problem-list-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke: var(--green);
}

/* Approach Section */
.approach {
  background: var(--off-white);
}

.approach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.approach-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.approach-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.approach-icon {
  width: 56px;
  height: 56px;
  background: var(--off-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.approach-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--navy);
}

.approach-card h3 {
  margin-bottom: var(--space-sm);
}

.approach-card p {
  color: var(--gray);
  margin-bottom: 0;
  flex-grow: 1;
}

/* Credentials Section */
.credentials {
  background: var(--white);
}

.credentials-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 900px;
  margin: 0 auto;
}

.credentials-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.credential-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.credential-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--off-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.credential-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--navy);
}

.credential-item h4 {
  margin-bottom: var(--space-xs);
}

.credential-item p {
  color: var(--gray);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.peng-badge-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background: var(--off-white);
  border-radius: var(--radius-lg);
  color: var(--gray);
  font-size: 0.875rem;
}

.peng-badge-placeholder svg {
  width: 64px;
  height: 64px;
  stroke: var(--navy);
}

/* Team Section */
.team-member {
  text-align: center;
}

.image-placeholder {
  width: 120px;
  height: 120px;
  background: var(--off-white);
  border-radius: 50%;
  margin: 0 auto var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: 0.8125rem;
}

.team-member h3 {
  margin-bottom: var(--space-xs);
}

.team-member .role {
  color: var(--gold);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.bio {
  color: var(--gray);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* Team Section background */
.team {
  background-color: var(--off-white);
}

/* Helio Connection */
.helio-connection {
  background: var(--white);
}

.helio-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.helio-content p {
  color: var(--gray);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* ==========================================================================
   4. SMALL PROJECTS SERVICE PAGE
   ========================================================================== */

/* Email Capture */
.email-capture {
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-md);
}

.email-capture h2 {
  margin-bottom: var(--space-sm);
}

.email-capture > p {
  color: var(--gray);
  margin-bottom: var(--space-lg);
}

.email-capture-row {
  display: flex;
  gap: var(--space-sm);
  max-width: 420px;
  margin: 0 auto;
}

.email-capture-row .form-input {
  flex: 1;
}

.email-capture-note {
  font-size: 0.8125rem;
  color: var(--gray-light);
  margin-top: var(--space-sm);
}

.email-capture-success p {
  color: var(--green);
  font-weight: 600;
}

@media (max-width: 479px) {
  .email-capture-row {
    flex-direction: column;
  }
}

/* What We Help With */
.help-section {
  background: var(--white);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.help-card {
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.help-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.help-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-md);
}

.help-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--navy);
}

.help-card h4 {
  margin-bottom: var(--space-sm);
}

.help-card p {
  color: var(--gray);
  font-size: 0.875rem;
  margin-bottom: 0;
  flex-grow: 1;
}

/* Quick Reference Guides */
.guides-section {
  background: var(--off-white);
}

.guide-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.guide-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.guide-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.guide-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--navy);
}

.guide-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.guide-rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  gap: var(--space-md);
}

.rule-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
}

.rule-value {
  font-size: 0.875rem;
  color: var(--charcoal);
  text-align: right;
}

.highlight-green {
  background: var(--green-light);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md) !important;
}

.guide-note {
  font-size: 0.8125rem;
  color: var(--gray);
  font-style: italic;
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

.guide-subsection {
  margin-bottom: var(--space-md);
}

.guide-subsection h5 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--space-sm);
}

.guide-list {
  list-style: disc;
  padding-left: var(--space-lg);
  margin: 0;
}

.guide-list li {
  font-size: 0.875rem;
  color: var(--charcoal);
  margin-bottom: var(--space-xs);
  line-height: 1.5;
}

.guide-card-wide {
  grid-column: 1 / -1;
}

.guide-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.checklist-column h5 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--space-sm);
}

/* Why Free Section */
.why-free {
  background: var(--white);
}

.why-free-content {
  max-width: 800px;
  margin: 0 auto;
}

.why-free-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.why-free-point {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  height: 100%;
}

.why-free-point-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--off-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-free-point-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--navy);
}

.why-free-point h4 {
  margin-bottom: var(--space-xs);
}

.why-free-point p {
  color: var(--gray);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* Professional Help Section */
.pro-help {
  background: var(--off-white);
}

.warning-signs {
  max-width: 800px;
  margin: 0 auto;
}

.warning-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.warning-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.warning-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.warning-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.warning-item-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--gold);
}

.warning-item p {
  color: var(--charcoal);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* Resources Section */
.resources {
  background: var(--white);
}

.resources-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.resource-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--off-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-decoration: none;
  color: var(--charcoal);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
  height: 100%;
}

.resource-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.resource-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.resource-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--navy);
}

.resource-content {
  flex: 1;
}

.resource-content h4 {
  margin-bottom: var(--space-xs);
}

.resource-content p {
  font-size: 0.875rem;
  color: var(--gray);
  margin-bottom: 0;
}

.resource-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.resource-arrow svg {
  width: 100%;
  height: 100%;
  stroke: var(--gray);
  transition: stroke 0.2s ease;
}

.resource-card:hover .resource-arrow svg {
  stroke: var(--navy);
}

/* Other Municipalities */
.other-municipalities {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.other-municipalities h3 {
  margin-bottom: var(--space-md);
}

.municipality-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.municipality-links a {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--off-white);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.municipality-links a:hover {
  background: var(--navy);
  color: var(--white);
}

/* Soft CTA */
.soft-cta {
  background: var(--off-white);
}

.soft-cta-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.soft-cta-content h2 {
  margin-bottom: var(--space-md);
}

.soft-cta-content p {
  color: var(--gray);
  font-size: 1.125rem;
  margin-bottom: var(--space-xl);
}

.soft-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

/* ==========================================================================
   5. MULTI-UNIT SERVICE PAGE
   ========================================================================== */

/* Helio Cross-Sell */
.helio-crosssell {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.helio-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.helio-crosssell h2 {
  margin-bottom: var(--space-md);
}

.helio-crosssell > p {
  font-size: 1.0625rem;
  color: var(--gray);
  margin-bottom: var(--space-xl);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.helio-crosssell > p strong {
  color: var(--charcoal);
}

.helio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  text-align: left;
}

.helio-card {
  padding: var(--space-md);
  background: white;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.helio-card strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--navy);
}

.helio-card span {
  font-size: 0.9375rem;
  color: var(--gray);
}

.helio-ctas {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .helio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .helio-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Hidden Cost Section */
.hidden-cost {
  background: var(--white);
}

.cost-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 800px;
  margin: 0 auto;
}

.cost-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  height: 100%;
}

.cost-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--off-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cost-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--navy);
}

.cost-item h4 {
  margin-bottom: var(--space-xs);
}

.cost-item p {
  color: var(--gray);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* Calculator Section */
.calculator-section .calculator-inputs {
  grid-template-columns: 1fr;
}

.calculator-wrapper {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-md);
  max-width: 900px;
  margin: 0 auto;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.calc-grid .form-group {
  display: flex;
  flex-direction: column;
}

.calc-grid .form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--space-sm);
}

.calc-grid .form-group select,
.calc-grid .form-group input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-md);
  font-family: var(--font-main);
  font-size: 1rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--charcoal);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.calc-grid .form-group select:focus,
.calc-grid .form-group input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.size-display {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
}

.help-text {
  display: block;
  font-size: 0.8125rem;
  color: var(--gray);
  margin-top: var(--space-xs);
}

.input-prefix {
  position: relative;
}

/* Results */
.results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.result-card {
  background: var(--off-white);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.result-card.traditional {
  border-left: 4px solid var(--gray);
}

.result-card.integrated {
  border-left: 4px solid var(--gold);
}

.result-card h4 {
  margin-bottom: var(--space-sm);
}

.result-amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--space-xs);
}

.result-timeline {
  font-size: 0.875rem;
  color: var(--gray);
  margin-bottom: var(--space-md);
}

.result-breakdown {
  text-align: left;
}

.breakdown-content {
  display: none;
  margin-top: var(--space-md);
}

.breakdown-content.show,
.breakdown-toggle.open + .breakdown-content {
  display: block;
}

.breakdown-line {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.875rem;
}

.breakdown-line:last-child {
  border-bottom: none;
}

/* Savings Row */
.savings-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.savings-callout {
  background: var(--off-white);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
}

.savings-callout .savings-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--space-sm);
}

.savings-callout .savings-amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: var(--space-xs);
}

.savings-callout .savings-context {
  font-size: 0.8125rem;
  color: var(--gray);
}

.savings-callout.revenue .savings-amount {
  color: var(--gold);
}

/* Methodology Panel */
.methodology-panel {
  margin-top: var(--space-xl);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.methodology-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-main);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-md) 0;
}

.methodology-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.methodology-toggle.open svg {
  transform: rotate(180deg);
}

.methodology-content {
  display: none;
  margin-top: var(--space-md);
}

.methodology-content.show {
  display: block;
}

.methodology-item {
  margin-bottom: var(--space-lg);
}

.methodology-item h5 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--space-xs);
}

.methodology-item p {
  font-size: 0.875rem;
  color: var(--gray);
  margin-bottom: 0;
}

/* Calculator CTA */
.calculator-cta {
  text-align: center;
  margin-top: var(--space-xl);
}

.calculator-cta-note {
  font-size: 0.875rem;
  color: var(--gray);
  margin-top: var(--space-sm);
}

/* Included section check icon variant */
.included-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.included-check svg {
  width: 100%;
  height: 100%;
  stroke: var(--green);
}

/* ==========================================================================
   6. GUIDES HUB PAGE
   ========================================================================== */

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  color: var(--navy);
  margin-top: var(--space-md);
  transition: gap 0.2s ease;
}

.feature-link:hover {
  gap: var(--space-md);
}

/* ==========================================================================
   7. POPULAR LOCATIONS (shared across service pages)
   ========================================================================== */

.popular-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}

.popular-location-card {
  display: block;
  padding: var(--space-lg);
  background: var(--off-white);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--charcoal);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.popular-location-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.popular-location-card:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.popular-location-card .location-name {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--navy);
  margin-bottom: var(--space-xs);
}

.popular-location-card .location-pop {
  font-size: 0.875rem;
  color: var(--gray);
}

/* Project Gallery */
.project-gallery {
  background-color: var(--off-white);
}

.project-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.project-gallery-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.project-gallery-card .gallery-img-wrap {
  position: relative;
  overflow: hidden;
}

.project-gallery-card .gallery-img-wrap img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}

.project-gallery-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--navy);
  color: white;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

.project-gallery-caption {
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--charcoal);
  text-align: center;
}

.project-gallery-details {
  padding: 0.625rem 0.75rem;
  text-align: center;
}

.project-gallery-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 0.25rem;
}

.project-gallery-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: var(--gray);
  line-height: 1.4;
}

/* 4-column gallery variant for multi-unit page */
.project-gallery-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS (Page-specific)
   ========================================================================== */

/* --- Mobile (up to 639px) --- */
@media (max-width: 639px) {
  /* Homepage mobile: lanes triage before problem section */
  [data-page="home"] main {
    display: flex;
    flex-direction: column;
  }

  [data-page="home"] .hero {
    order: 1;
  }
  [data-page="home"] .lanes {
    order: 2;
  }
  [data-page="home"] .problem {
    order: 3;
  }
  [data-page="home"] .trust {
    order: 4;
  }
  [data-page="home"] .cs-showcase {
    order: 5;
  }
  [data-page="home"] .project-gallery {
    order: 6;
  }
  [data-page="home"] .cta-section {
    order: 7;
  }

  .page-hero p {
    font-size: 1.0625rem;
  }

  .lead-magnet-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .pricing-table th,
  .pricing-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  .calculator-result .savings-amount {
    font-size: 2rem;
  }

  .result-amount {
    font-size: 1.5rem;
  }

  .pricing-steps-grid {
    flex-direction: column;
    align-items: center;
  }

  .pricing-step {
    max-width: 100%;
  }

  /* Hide arrows on mobile */
  .pricing-step-arrow {
    display: none;
  }

  .cost-comparison-table th,
  .cost-comparison-table td {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Phase 1.4: Pricing tables - convert to stacked cards on mobile */
  .pricing-table-wrapper {
    overflow-x: visible;
  }

  .pricing-table {
    display: block;
  }

  .pricing-table thead {
    display: none;
  }

  .pricing-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .pricing-table tbody tr {
    display: flex;
    flex-direction: column;
    background: var(--off-white);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: none;
  }

  .pricing-table tbody tr:hover {
    background: var(--off-white);
  }

  .pricing-table td {
    display: block;
    padding: var(--space-xs) 0;
    text-align: left;
    border: none;
  }

  .pricing-table td:first-child {
    font-weight: 600;
    color: var(--navy);
    font-size: 1rem;
    padding-bottom: var(--space-sm);
  }

  /* Cost comparison table - stacked cards */
  .cost-comparison-wrapper {
    overflow-x: visible;
  }

  .cost-comparison-table {
    display: block;
  }

  .cost-comparison-table thead {
    display: none;
  }

  .cost-comparison-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .cost-comparison-table tbody tr {
    display: flex;
    flex-direction: column;
    background: var(--off-white);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: none;
  }

  .cost-comparison-table td {
    display: block;
    padding: var(--space-xs) 0;
    text-align: left;
  }

  .cost-comparison-table td:first-child {
    font-weight: 600;
    color: var(--navy);
  }

  .cost-comparison-table td:nth-child(2)::before {
    content: "Traditional: ";
    font-weight: 500;
    color: var(--gray);
  }

  .cost-comparison-table td:nth-child(3)::before {
    content: "With NSP: ";
    font-weight: 500;
    color: var(--gold);
  }

  /* Phase 1.2: DIY vs Professional comparison grid fix */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ==========================================================================
     MOBILE HORIZONTAL SCROLL CAROUSELS
     ========================================================================== */

  /* Project Gallery - horizontal scroll on mobile */
  .project-gallery-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-md);
    padding: 0 var(--space-md) var(--space-md);
    margin: 0 calc(var(--space-md) * -1);
    scrollbar-width: none;
  }

  .project-gallery-grid::-webkit-scrollbar {
    display: none;
  }

  /* Phase 3.2: Show partial next card (240px instead of 260px) */
  .project-gallery-card {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 240px;
  }

  /* Popular Locations - horizontal scroll on mobile */
  .popular-locations-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-md);
    padding: 0 var(--space-md);
    margin: 0 calc(var(--space-md) * -1);
    max-width: none;
    scrollbar-width: none;
  }

  .popular-locations-grid::-webkit-scrollbar {
    display: none;
  }

  .popular-location-card {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 160px;
  }

  /* Phase 3.1: Scroll indicator gradient for project gallery */
  .project-gallery {
    position: relative;
  }

  .project-gallery::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, var(--off-white) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
}

@media (min-width: 768px) {
  /* Pricing steps: show arrows on desktop */
  .pricing-step-arrow {
    display: flex;
  }

  /* Pricing cards: 2-col at 768px */
  .pricing-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

  .included-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .not-included-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .philosophy-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .approach-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .credentials-content {
    grid-template-columns: 1fr 200px;
  }

  .resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .guide-checklist {
    grid-template-columns: repeat(3, 1fr);
  }

  .results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .savings-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .calc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cost-items {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery grid (homes-suites): 2-col at 640px */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Project types: 2-col at 640px */
  .project-types-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Solution grid: 2-col at 640px */
  .solution-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Help grid: 2-col at 640px */
  .help-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Project gallery: 2-col at tablet */
  .project-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .included-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Project types: 3-col at 768px (3+2 centered) */
  .project-types-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .project-types-grid .project-card:nth-child(n + 4) {
    grid-column: auto;
  }

  /* Center last 2 items in 5-item grid */
  .project-types-grid::after {
    content: "";
    grid-column: 1 / 2;
  }

  /* Solution grid: 3-col at 768px */
  .solution-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Gallery grid: 3-col at 768px */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Help grid: 3-col at 768px (3+2 centered) */
  .help-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .help-grid .help-card:nth-child(n + 4) {
    grid-column: auto;
  }

  /* Center last 2 items */
  .help-grid::after {
    content: "";
    grid-column: 1 / 2;
  }

  /* Project gallery: 3-col at 768px */
  .project-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 4-col variant for multi-unit */
  .project-gallery-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .approach-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .calc-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Project gallery: 5-col on desktop (2 clean rows) */
  .project-gallery-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* 4-col variant for multi-unit: 4-col on desktop */
  .project-gallery-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Project types: 5-col at 1024px */
  .project-types-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .project-types-grid::after {
    display: none;
  }

  /* Help grid: reset to no pseudo-element */
  .help-grid::after {
    display: none;
  }

  .help-grid .help-card:nth-child(n + 4) {
    grid-column: auto;
  }
}

/* ==========================================================================
   CASE STUDY SHOWCASE (Homepage) - narrative-driven layout
   ========================================================================== */

.cs-showcase {
  background: var(--white);
}

.cs-showcase .section-header {
  margin-bottom: var(--space-lg);
}

/* Badge */
.cs-showcase-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  background: rgba(214, 158, 46, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

/* Challenge Block */
.cs-showcase-challenge {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-lg);
}

.cs-showcase-challenge h3 {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

.cs-showcase-challenge p {
  color: #cbd5e0;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
}

.cs-showcase-challenge strong {
  color: var(--white);
}

/* Stats Row -5 columns */
.cs-showcase-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-md) 0;
  margin-bottom: var(--space-lg);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cs-showcase-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

.cs-showcase-stat--gold .cs-showcase-stat-value {
  color: var(--gold);
}

.cs-showcase-stat-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Timeline Comparison Bars */
.cs-showcase-comparison {
  margin-bottom: var(--space-lg);
}

.cs-showcase-bar-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cs-showcase-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cs-showcase-bar-label {
  flex-shrink: 0;
  width: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--charcoal);
  text-align: right;
}

.cs-showcase-bar-track {
  flex: 1;
  background: var(--off-white);
  border-radius: var(--radius-sm);
  height: 30px;
  position: relative;
}

.cs-showcase-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-sm);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  min-width: fit-content;
}

.cs-showcase-bar--traditional {
  background: var(--gray-light);
  color: var(--white);
}

.cs-showcase-bar--ours {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  min-width: 80px;
}

/* Key Images -2-column grid */
.cs-showcase-key-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.cs-showcase-key-img {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.cs-showcase-key-img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Value Icon Grid (replaces plain text value preview) */
.cs-showcase-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-md) 0;
}

.cs-value-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cs-value-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(214, 158, 46, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
}

.cs-value-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--gold);
  fill: none;
}

.cs-value-card h4 {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.cs-value-card p {
  font-size: 0.75rem;
  color: var(--gray);
  margin: 0;
  line-height: 1.4;
  flex-grow: 1;
}

/* Deliverables Showcase (multi-unit page) */
.deliverables-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}

.deliverable-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

.deliverable-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}

.deliverable-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.deliverable-text {
  padding: var(--space-md);
}

.deliverable-text h4 {
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: var(--space-xs);
}

.deliverable-text p {
  font-size: 0.875rem;
  color: var(--gray);
  margin: 0;
  line-height: 1.5;
}

/* Pull-Quote CTA */
.cs-showcase-quote {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.cs-showcase-quote p {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--navy);
  margin: 0;
  line-height: 1.4;
}

/* Dual CTA */
.cs-showcase-ctas {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Responsive: Case Study Showcase --- */

@media (max-width: 639px) {
  .cs-showcase-challenge {
    padding: var(--space-md);
  }

  .cs-showcase-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
  }

  .cs-showcase-stat-value {
    font-size: 1.25rem;
  }

  .cs-showcase-key-images {
    grid-template-columns: 1fr;
  }

  .cs-showcase-bar-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .cs-showcase-bar-label {
    width: auto;
    text-align: left;
  }

  .cs-showcase-bar-track {
    width: 100%;
  }

  .cs-showcase-value-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .deliverables-showcase {
    grid-template-columns: 1fr;
  }

  .cs-showcase-quote p {
    font-size: 1.125rem;
  }

  .cs-showcase-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .cs-showcase-ctas .btn {
    text-align: center;
  }
}

@media (max-width: 479px) {
  .cs-showcase-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   9. 3D MODEL VIEWER
   ========================================================================== */

.hero-image model-viewer {
  --poster-color: var(--off-white);
}

/* Mobile: Ensure model-viewer displays properly */
@media (max-width: 639px) {
  .hero-image {
    width: 100%;
    min-height: 280px;
  }

  .hero-image model-viewer {
    width: 100% !important;
    height: 280px !important;
    min-height: 280px;
    display: block;
  }

  /* Phase 1.1: Hide desktop timeline SVG on mobile */
  .timeline-desktop {
    display: none;
  }

  /* Phase 1.3: Calculator input touch targets */
  .calc-grid input,
  .calc-grid select {
    height: 52px;
    font-size: 16px; /* Prevents iOS zoom */
    line-height: 1.5;
  }

  /* Phase 4.4: Guide rules stack vertically */
  .guide-rule {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .rule-value {
    text-align: left;
  }
}

/* Phase 1.5: 3D model sizing for narrow phones */
@media (max-width: 479px) {
  /* Hide 3D model on narrowest phones to save ~350px above fold */
  .hero-image {
    display: none;
  }

  /* Phase 5.3: Cost estimator result text overflow */
  .calculator-result .savings-amount {
    font-size: 1.5rem;
  }

  /* Phase 4.2: Reduce card padding on narrow phones */
  .approach-card,
  .guide-card,
  .lane-card {
    padding: var(--space-md);
  }
}

/* ========== VALUE MESSAGING UTILITIES ========== */

/* Context text with left-border accent (start-project form) */
.form-step-context {
  font-size: 0.9375rem;
  color: var(--gray);
  border-left: 3px solid var(--gold);
  padding-left: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Three-column comparison grid (homes-suites) */
.three-col-comparison {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.comparison-col {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.comparison-col--weak {
  opacity: 0.85;
}

.comparison-col--mid {
  opacity: 0.9;
}

.comparison-col--best {
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-md);
}

.comparison-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.comparison-col h4 {
  margin-bottom: var(--space-sm);
}

.comparison-col .comparison-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--space-xs);
}

.comparison-col--best .comparison-price {
  color: var(--gold);
}

.comparison-col .comparison-timeline {
  font-size: 0.875rem;
  color: var(--gray);
  margin-bottom: var(--space-md);
}

.comparison-col ul {
  list-style: none;
  padding: 0;
  text-align: left;
}

.comparison-col li {
  font-size: 0.875rem;
  color: var(--gray);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--off-white);
}

.comparison-col li:last-child {
  border-bottom: none;
}

@media (max-width: 639px) {
  .three-col-comparison {
    grid-template-columns: 1fr;
  }
}

/* Gold-tinted comparison note for cost estimator */
.estimator-comparison-note {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: rgba(214, 158, 46, 0.08);
  border: 1px solid rgba(214, 158, 46, 0.25);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--navy);
  text-align: center;
}

/* Gold savings text for homepage lane cards */
.lane-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold);
  margin-top: var(--space-xs);
}

/* Noscript fallback image */
.hero-image noscript img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Gallery CTA wrapper */
.gallery-cta-wrapper {
  text-align: center;
}

.gallery-cta-text {
  font-size: 1.125rem;
  color: var(--gray);
  margin-bottom: var(--space-md);
}

/* Project gallery link styles */
.project-gallery-card-link {
  text-decoration: none;
  color: inherit;
}

.project-case-study-link {
  font-size: 0.8125rem;
  color: var(--gold);
  font-weight: 500;
  margin-top: 4px;
  display: inline-block;
}

/* ==========================================================================
   10. HOW IT WORKS PAGE
   ========================================================================== */

/* ========== PROCESS TIMELINE ========== */
.timeline-section {
  background-color: var(--white);
}

.timeline-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-3xl);
}

.timeline-header h2 {
  margin-bottom: var(--space-md);
}

.timeline-header p {
  color: var(--gray);
  font-size: 1.125rem;
}

/* SVG Timeline Diagram */
.timeline-diagram {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 auto var(--space-3xl);
  padding: var(--space-md) 0;
}

.timeline-diagram svg {
  display: block;
  margin: 0 auto;
  min-width: 900px;
}

/* Mobile Timeline (vertical) */
.timeline-mobile {
  display: block;
}

.timeline-desktop {
  display: none;
}

.timeline-vertical {
  position: relative;
  padding-left: 40px;
}

.timeline-vertical::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--gold);
}

.timeline-step {
  position: relative;
  margin-bottom: var(--space-xl);
}

.timeline-step:last-child {
  margin-bottom: 0;
}

.timeline-step-marker {
  position: absolute;
  left: -40px;
  top: 0;
  width: 32px;
  height: 32px;
  background-color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 600;
  font-size: 0.875rem;
}

.timeline-step-content {
  background-color: var(--off-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.timeline-step-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.timeline-step-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--navy);
}

.timeline-step-week {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold);
  background-color: rgba(212, 146, 42, 0.1);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.timeline-step-desc {
  color: var(--gray);
  margin-bottom: 0;
  font-size: 0.9375rem;
}

/* ========== STEP DETAILS (Expandable) ========== */
.step-details-section {
  background-color: var(--off-white);
}

.step-details-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
}

.step-details-header h2 {
  margin-bottom: var(--space-md);
}

.step-details-header p {
  color: var(--gray);
}

.step-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.step-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.step-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.step-card-header:hover {
  background-color: var(--off-white);
}

.step-card-number {
  width: 40px;
  height: 40px;
  background-color: var(--navy);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

.step-card-title-wrap {
  flex-grow: 1;
}

.step-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}

.step-card-week {
  font-size: 0.875rem;
  color: var(--gold);
  font-weight: 500;
}

.step-card-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.step-card-toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--gray);
}

.step-card.expanded .step-card-toggle {
  transform: rotate(180deg);
}

.step-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.step-card.expanded .step-card-body {
  max-height: 500px;
}

.step-card-content {
  padding: 0 var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--off-white);
  padding-top: var(--space-lg);
}

.step-card-content p {
  color: var(--gray);
  margin-bottom: var(--space-md);
}

.step-card-content p:last-child {
  margin-bottom: 0;
}

.step-deliverables {
  margin-top: var(--space-md);
}

.step-deliverables h5 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--space-sm);
}

.step-deliverables ul {
  padding-left: var(--space-lg);
}

.step-deliverables li {
  list-style: disc;
  color: var(--gray);
  font-size: 0.9375rem;
  margin-bottom: var(--space-xs);
}

/* ========== TIMELINE EXPECTATIONS ========== */
.expectations-section {
  background-color: var(--white);
}

.expectations-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
}

.expectations-header h2 {
  margin-bottom: var(--space-md);
}

.expectations-header p {
  color: var(--gray);
}

.expectations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 800px;
  margin: 0 auto;
}

.expectation-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.expectation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.expectation-icon {
  width: 56px;
  height: 56px;
  background-color: var(--white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

.expectation-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--navy);
}

.expectation-card h3 {
  margin-bottom: var(--space-sm);
}

.expectation-timeline {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.expectation-card p {
  color: var(--gray);
  margin-bottom: 0;
  font-size: 0.9375rem;
  flex-grow: 1;
}

.expectation-note {
  margin-top: var(--space-2xl);
  text-align: center;
  color: var(--gray);
  font-size: 0.875rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ========== RESPONSIBILITIES ========== */
.responsibilities-section {
  background-color: var(--off-white);
}

.responsibilities-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
}

.responsibilities-header h2 {
  margin-bottom: var(--space-md);
}

.responsibilities-header p {
  color: var(--gray);
}

.responsibilities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}

.responsibility-column {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.responsibility-column.you {
  border-top: 4px solid var(--gold);
}

.responsibility-column.us {
  border-top: 4px solid var(--navy);
}

.responsibility-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.responsibility-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.responsibility-column.you .responsibility-icon {
  background-color: rgba(212, 146, 42, 0.1);
}

.responsibility-column.us .responsibility-icon {
  background-color: rgba(26, 54, 93, 0.1);
}

.responsibility-icon svg {
  width: 24px;
  height: 24px;
}

.responsibility-column.you .responsibility-icon svg {
  stroke: var(--gold);
}

.responsibility-column.us .responsibility-icon svg {
  stroke: var(--navy);
}

.responsibility-title h3 {
  margin-bottom: 0;
}

.responsibility-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.responsibility-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.responsibility-check {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.responsibility-check svg {
  width: 24px;
  height: 24px;
}

.responsibility-column.you .responsibility-check svg {
  stroke: var(--gold);
}

.responsibility-column.us .responsibility-check svg {
  stroke: var(--navy);
}

.responsibility-item p {
  color: var(--charcoal);
  margin-bottom: 0;
  font-size: 0.9375rem;
}

/* ========== RESPONSIVE ========== */
@media (min-width: 640px) {
  .expectations-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .responsibilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .step-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .step-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .timeline-mobile {
    display: none;
  }

  .timeline-desktop {
    display: block;
  }
}