/* Homepage completion — Bay Building Maintenance × Brandcore
   Adds the process/next-step band and contact ending to the concept Home tab.
   Design tokens and file layout follow style.css (Deep Bay Navy / Brass Gold on paper). */

.site-process {
  margin-top: 16px;
  padding: 16px 16px 14px;
  background: #0B1A2B;
  border-radius: 8px;
  color: #FFFFFF;
}
.site-process .site-kicker { color: var(--accent-bright); }
.site-process-head h3 {
  margin: 6px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #FFFFFF;
}
.site-process-head p {
  max-width: 52ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: #B4AB9B;
}
.site-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.site-steps > div {
  padding: 11px 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
}
.site-steps span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-bright);
}
.site-steps b {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  line-height: 1.2;
  color: #FFFFFF;
}
.site-steps small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
  color: #B4AB9B;
}
.site-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
}
.site-end b {
  display: block;
  font-size: 15px;
  line-height: 1.25;
  color: #FFFFFF;
}
.site-end small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: #B4AB9B;
}
.site-end-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-primary-gold { background: var(--accent-bright); color: #0B1A2B; }
.site-primary-gold:hover, .site-primary-gold:focus-visible { background: #E5BD4E; }
.site-call-on-dark { color: var(--accent-bright); }

/* Phone mode: the same homepage, responsive */
.is-phone .site-process { padding: 13px 13px 12px; }
.is-phone .site-process-head h3 { font-size: 22px; }
.is-phone .site-process-head p { font-size: 13px; }
.is-phone .site-steps { grid-template-columns: 1fr; margin-top: 10px; }
.is-phone .site-end { flex-direction: column; align-items: flex-start; margin-top: 10px; }
.is-phone .site-end-actions { width: 100%; }
.is-phone .site-end-actions .site-primary { min-height: 40px; }

/* Compact desktop frames (mirrors style.css max-height 960px) */
@media screen and (min-width: 901px) and (max-height: 960px) {
  .site-process { padding: 13px 14px 12px; }
  .site-process-head h3 { font-size: 24px; }
  .site-process-head p { font-size: 13px; }
  .site-steps { margin-top: 10px; }
  .site-steps > div { padding: 9px 10px; }
  .site-steps b { font-size: 13.5px; }
  .site-steps small { font-size: 12.5px; }
  .site-end { margin-top: 10px; padding: 10px 12px; }
  .site-end b { font-size: 14.5px; }
  .site-end small { font-size: 12.5px; }
}