/* Surface-specific contrast corrections for the finished blue palette. */
.hero .linkedin-banner .linkedin-copy strong { color:#14334a!important; }
.hero .linkedin-banner .linkedin-copy small { color:#285a79!important; }
.hero .linkedin-banner .linkedin-copy em { color:#405e73!important; }
.hero .linkedin-banner .linkedin-action { color:#fff!important; }
.hero h1>span { color:#a9d4f2!important; }

/* Dark outcome is nested in the otherwise light commercial section. */
.commercial-architecture .system-outcome {
  background:linear-gradient(135deg,#153c59 0%,#102c45 100%)!important;
  border-top-color:#699fc2!important;
  color:#fff!important;
}
.commercial-architecture .system-outcome strong { color:#fff!important; }
.commercial-architecture .system-outcome p { color:#e0edf5!important; }
.commercial-architecture .system-outcome small { color:#b8d9ed!important; }
.commercial-architecture .system-outcome-mark { color:#c5e4f5!important;border-color:#78a8c8!important; }

/* The featured recommendation is a dark card within a light section. */
.recommendations-section .recommendation-card--lead,
.recommendations-section .recommendation-card--lead blockquote,
.recommendations-section .recommendation-card--lead strong { color:#f7fbfd!important; }
.recommendations-section .recommendation-card--lead p,
.recommendations-section .recommendation-card--lead small,
.recommendations-section .recommendation-card--lead .recommendation-person>div>span,
.recommendations-section .recommendation-card--lead .recommendation-topline span:last-child { color:#d3e4ee!important; }

/* The form is a pale card within the dark contact section. */
.contact-section .brief-form h3,
.contact-section .brief-form strong,
.contact-section .brief-form label { color:#17364f!important; }
.contact-section .brief-form p,
.contact-section .brief-form small,
.contact-section .brief-form label span { color:#526b7e!important; }
.contact-section .booking-card h3 { color:#f7fbfd!important; }
.contact-section .booking-card p { color:#d9e8f1!important; }

/* Keep the hero's closing navigation fully inside its dark section. */
.hero { padding-bottom:42px; }
.hero-bottom {
  grid-column:1/-1;
  align-self:stretch;
  min-height:92px;
  margin-top:40px;
  padding:23px 0 16px;
  position:relative;
  z-index:1;
  flex-wrap:wrap;
  row-gap:12px;
}
.hero-bottom>div { flex-wrap:wrap;row-gap:8px;line-height:1.5; }
.hero-bottom>span,.hero-bottom>a { line-height:1.5; }

/* The two-column hero becomes too narrow before the phone breakpoint. */
@media (min-width:761px) and (max-width:1050px) {
  .hero { grid-template-columns:minmax(0,1fr);row-gap:36px; }
  .hero-copy { max-width:740px; }
  .hero-visual { max-width:620px;justify-self:center;margin:0; }
  .hero-bottom { grid-column:1; }
}

@media (max-width:760px) {
  .hero { padding-bottom:34px; }
  .hero-bottom { margin-top:30px;min-height:0;padding:22px 0 4px; }
  .hero-bottom>div { width:100%;justify-content:flex-start;gap:7px 10px; }
  .hero .linkedin-banner {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 40px;
    align-items:center;
    gap:13px;
    width:100%;
    min-height:104px;
    padding:17px;
    border:1px solid #bfd5e4!important;
    background:#eaf3f9!important;
  }
  .hero .linkedin-banner .linkedin-brandmark { width:44px;height:44px;flex-basis:auto; }
  .hero .linkedin-banner .linkedin-copy { min-width:0; }
  .hero .linkedin-banner .linkedin-copy small { font-size:11px;letter-spacing:.08em;line-height:1.3; }
  .hero .linkedin-banner .linkedin-copy strong { font-size:20px;line-height:1.2;overflow-wrap:break-word; }
  .hero .linkedin-banner .linkedin-copy em { display:block;font-size:12px;line-height:1.45; }
  .hero .linkedin-banner .linkedin-action { width:40px;height:40px;flex-basis:auto; }

  .commercial-architecture .architecture-copy h2 { font-size:clamp(36px,9vw,54px);line-height:1.08;overflow-wrap:normal; }
  .commercial-architecture .architecture-copy>p:not(.eyebrow) { font-size:16px;line-height:1.65; }
  .commercial-architecture .system-toolbar { min-height:50px;font-size:11px;letter-spacing:.08em; }
  .commercial-architecture .system-step-copy small { font-size:11px;letter-spacing:.09em; }
  .commercial-architecture .system-step-copy p { font-size:15px;line-height:1.6; }
  .commercial-architecture .system-outcome { grid-template-columns:1fr;gap:12px;padding:25px 22px; }
  .commercial-architecture .system-outcome-mark { width:42px;height:42px;font-size:22px; }
  .commercial-architecture .system-outcome strong { font-size:clamp(30px,8vw,42px);line-height:1.15;letter-spacing:-.035em; }
  .commercial-architecture .system-outcome p { font-size:15px;line-height:1.55;margin-top:10px; }
  .commercial-architecture .system-outcome small { font-size:11px;letter-spacing:.08em; }

  .recommendation-card .recommendation-summary,
  .recommendation-card .recommendation-person>div>span,
  .service-card p,
  .project-info p,
  .service-map-detail .map-detail-copy>p:last-child,
  .faq-list details p { font-size:14px;line-height:1.6; }
  .contact-section .brief-form input,
  .contact-section .brief-form select,
  .contact-section .brief-form textarea { font-size:16px; }
  .direct-contact a { overflow-wrap:anywhere; }
}

@media (max-width:430px) {
  .hero-bottom>div { font-size:11px; }
  .hero .linkedin-banner { grid-template-columns:38px minmax(0,1fr) 34px;gap:10px;padding:15px 12px; }
  .hero .linkedin-banner .linkedin-brandmark { width:38px;height:38px; }
  .hero .linkedin-banner .linkedin-copy strong { font-size:18px; }
  .hero .linkedin-banner .linkedin-copy small { font-size:10px; }
  .hero .linkedin-banner .linkedin-action { width:34px;height:34px;font-size:18px; }
  .hero h1 { font-size:clamp(40px,10.1vw,46px);line-height:1.04; }
  .system-toolbar { padding-inline:16px; }
  .commercial-architecture .system-step { padding:22px 17px; }
}

/* 2026-09-25 mobile hero headline hotfix
   Preserve the intended editorial line break on phone widths. Earlier overhaul
   CSS hid the <br>, which forced "next yes easier." onto one line and caused
   the collision visible on narrow mobile screens. */
@media (max-width:700px) {
  .hero h1 {
    max-width:100%;
    font-size:clamp(46px,13vw,58px);
    line-height:.98;
    letter-spacing:-.055em;
    overflow-wrap:normal;
    word-break:normal;
  }
  .hero h1 br { display:block!important; }
  .hero h1 > span {
    display:inline-block;
    white-space:nowrap;
    max-width:100%;
  }
}

@media (max-width:380px) {
  .hero h1 { font-size:clamp(43px,12.7vw,49px); }
}