:root{--charcoal:#142b47;--deep-ink:#0f172a}

/* Softer navy replaces the near-black brand surfaces. */
.dark,
footer,
.services .featured-card,
.feature-list article:nth-child(3),
.service-card-grid article:nth-child(3),
.service-card-grid article:nth-child(5),
.project-summary,
.photo-placeholder.tall,
.home-work-photo,
.home-before-after{background:#142b47}

footer{background:#0f2239}
.footer-bottom{border-top-color:#3a5068}
.brand-full{background:transparent}

/* Unified page ending: Scheme A light CTA above the navy footer. */
.band {
  min-height: 360px;
  padding: 84px max(6vw, 35px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 26px;
  text-align: center;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  color: var(--deep-ink) !important;
}

.band h2 {
  max-width: 1200px;
  color: var(--deep-ink) !important;
}

.band .btn.dark-btn {
  background: #ffd400 !important;
  color: var(--deep-ink) !important;
}

.band .btn.dark-btn:hover {
  background: #ffe24d !important;
}

@media (max-width: 900px) {
  .band {
    min-height: 300px;
    padding: 64px 25px;
    align-items: center;
  }
}

/* Clean client wall: white canvas, restrained grayscale logos, colour on hover. */
.logo-marquee{background:#fff;color:#303842;border-top:1px solid #e5e9ed;border-bottom:1px solid #e5e9ed}
.logo-marquee:before,
.logo-marquee:after{display:none}
.client-logo{border-right-color:#e5e9ed;background:#fff;color:#4c5661}
.client-logo img{filter:grayscale(1)!important;opacity:.72;transition:filter .25s ease,opacity .25s ease,transform .25s ease}
.client-logo span{color:#69737d;transition:color .25s ease}
.client-logo:hover img{filter:grayscale(0)!important;opacity:1;transform:scale(1.04)}
.client-logo:hover span{color:#17212b}
.client-logo:focus-within img{filter:grayscale(0)!important;opacity:1}

.dark-btn{background:#102943}
.dark-btn:hover{background:#1c3b60}

/* Yellow panels always use clear black text. */
.testimonial,
.testimonial blockquote,
.testimonial small,
.testimonial .stars,
.testimonial p,
.testimonial a,
.cta,
.cta h2,
.cta .eyebrow,
.cta p,
.band,
.band h2,
.service-card-grid article:nth-child(6),
.service-card-grid article:nth-child(6) p,
.service-card-grid article:nth-child(6) a{color:var(--deep-ink)!important}

.service-card-grid article:nth-child(6) .service-symbol{background:#142b47;color:#ffd400!important}
.service-card-grid article:nth-child(6):before{background:#142b47}
.service-card-grid article:nth-child(6) a{border-color:#596068}

/* Every heading, paragraph and supporting label on navy stays white. */
.dark,
.dark h2,
.dark h3,
.dark p,
.dark a,
.dark span,
.dark small,
.dark .eyebrow:not(.yellow),
footer,
footer a,
footer p,
footer span,
footer small,
.project-summary,
.project-summary p,
.project-summary b,
.services .featured-card,
.services .featured-card h3,
.services .featured-card p,
.services .featured-card a,
.feature-list article:nth-child(3),
.feature-list article:nth-child(3) h3,
.feature-list article:nth-child(3) p,
.service-card-grid article:nth-child(3),
.service-card-grid article:nth-child(3) p,
.service-card-grid article:nth-child(3) a,
.service-card-grid article:nth-child(5),
.service-card-grid article:nth-child(3) p,
.service-card-grid article:nth-child(5) p,
.service-card-grid article:nth-child(5) a{color:#fff!important}

.dark .eyebrow.yellow,
footer div>b{color:#ffd400!important}

/* Yellow cards nested inside navy sections still keep black copy. */
.dark .testimonial,
.dark .testimonial blockquote,
.dark .testimonial small,
.dark .testimonial p,
.dark .testimonial a:not(.dark-btn),
.dark .testimonial .stars{color:var(--deep-ink)!important}

/* Yellow CTA buttons always use black text and arrows for strong contrast. */
.btn:not(.dark-btn),
.dark .btn:not(.dark-btn),
.btn:not(.dark-btn):hover,
.dark .btn:not(.dark-btn):hover{color:var(--deep-ink)!important}

/* Homepage service cards: clear links and accessible yellow-circle lettering. */
.services article a{text-decoration:none;color:#142b47;border-bottom:2px solid #142b47}
.services .featured-card a{color:#fff!important;border-bottom:0;text-decoration:none}
.services article:before{color:#142b47!important}

/* One contrast token across every light surface. */
body a{color:var(--deep-ink)}
.testimonial,
.testimonial blockquote,
.testimonial small,
.testimonial p,
.testimonial a:not(.dark-btn),
.testimonial .stars,
.cta,
.cta h2,
.cta p,
.cta .eyebrow,
.band,
.band h2,
.service-card-grid article:nth-child(6),
.service-card-grid article:nth-child(6) p,
.service-card-grid article:nth-child(6) a,
.services article:before,
.feature-list .icon,
.service-symbol,
.btn:not(.dark-btn),
.btn:not(.dark-btn):hover{color:var(--deep-ink)!important}
.services article:not(.featured-card) a,
.service-card-grid article:not(:nth-child(3)):not(:nth-child(5)) a{color:var(--deep-ink);border-bottom-color:var(--deep-ink)}

/* Dark surfaces remain the deliberate inverse treatment. */
.dark a,
footer a,
.project-summary a,
.services .featured-card a,
.service-card-grid article:nth-child(3) a,
.service-card-grid article:nth-child(5) a{color:#fff!important}

.dark .testimonial a:not(.dark-btn),
.dark .btn:not(.dark-btn){color:var(--deep-ink)!important}

.comparison-label,
.home-photo-label,
.home-before-after span{color:var(--deep-ink)!important}

/* Primary navigation conversion button matches every other yellow CTA. */
.site-header nav .btn,
.site-header nav .btn:hover,
.site-header nav .btn:focus{color:var(--deep-ink)!important}

/* Lift the hero proof card away from pale areas of the project image. */
.hero-visual .stat{
  border:1px solid #e2e8f0;
  box-shadow:0 18px 46px rgba(15,23,42,.18),0 3px 10px rgba(15,23,42,.08)
}

/* Homepage conversion band: clean whitespace and a prominent yellow action. */
.cta{background:#f8fafc;color:var(--deep-ink)!important}
.cta h2,
.cta p,
.cta .eyebrow{color:var(--deep-ink)!important}
.cta .dark-btn,
.cta .dark-btn:hover,
.cta .dark-btn:focus{background:#ffd400;color:var(--deep-ink)!important}
/* Compact written-reference section; it contains one row, not a photo grid. */
.references-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.references-section .section-head {
  align-items: end;
}

.references-section .work-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  grid-template-rows: auto;
  align-items: start;
  gap: 20px;
  margin-top: 28px;
}

.references-section .testimonial {
  min-height: 0;
  padding: 30px 34px;
}

.references-section .testimonial blockquote {
  margin: 10px 0 18px;
}

.references-section .work-grid > div:last-child {
  padding: 22px 8px;
}

.references-section .work-grid > div:last-child p {
  margin: 0;
}

@media (max-width: 900px) {
  .references-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .references-section .work-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .references-section .work-grid > div:last-child {
    padding: 4px 0;
  }
}