.service-grid article{position:relative;padding-top:28px}.service-grid article>img{width:62px;height:48px;object-fit:contain;display:block;margin-bottom:12px}.service-grid article>b{position:absolute;right:20px;top:20px}.project-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:28px 28px 28px 0;align-content:center}.project-gallery figure{margin:0;height:190px;position:relative;overflow:hidden;border:1px solid #454a4e}.project-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.project-gallery figure:hover img{transform:scale(1.03)}.project-gallery figcaption{position:absolute;left:0;bottom:0;padding:9px 12px;background:rgba(8,11,13,.82);border-top:2px solid #f27013;font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:13px}@media(max-width:900px){.project-gallery{padding:0 28px 40px;grid-template-columns:repeat(2,1fr)}.project-gallery figure{height:210px}}@media(max-width:560px){.project-gallery{grid-template-columns:1fr}.project-gallery figure{height:230px}}

/* fix: .about>div>p was overriding .eyebrow's color/size inside the About section */
.about .eyebrow{color:var(--orange);font-size:16px}

/* --- supplemental rules to support script.js interactivity --- */
header.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.35)}

@media(max-width:900px){
  nav.open{
    display:flex !important;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:#0b0f12;
    border-bottom:1px solid #2a2e31;
    padding:.5rem 18px 1rem;
    z-index:5;
  }
  nav.open a{padding:.85rem 0;border-bottom:1px solid #2a2e31;font-size:15px}
  nav.open a:last-child{border-bottom:none}
}

@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{opacity:0;animation:rise .7s ease forwards}
  .hero-copy .eyebrow{animation-delay:.05s}
  .hero-copy h1{animation-delay:.15s}
  .hero-copy > p:not(.eyebrow){animation-delay:.28s}
  .hero-copy .actions{animation-delay:.4s}
  .hero-copy .trust{animation-delay:.5s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
}

.form-success{
  grid-column:1/-1;
  background:rgba(242,112,19,.12);
  border:1px solid var(--orange);
  color:#fff;
  padding:1rem 1.2rem;
  font-size:.92rem;
}

.hidden-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Homepage "Helpful Concrete Guides" section */
.guides{background:#fff;color:var(--ink);padding:76px max(28px,calc((100% - var(--max))/2))}
.guide-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.guide-card{background:#fff;border:1px solid #d4d1cb;box-shadow:0 10px 25px rgba(0,0,0,.06);overflow:hidden;display:flex;flex-direction:column}
.guide-card img{width:100%;height:190px;object-fit:cover;display:block}
.guide-copy{padding:24px;display:flex;flex-direction:column;flex:1}
.guide-copy .eyebrow{font-size:13px;margin-bottom:8px}
.guide-copy h3{font-size:21px;line-height:1.15;margin:0 0 10px;text-transform:none;font-family:Impact,'Arial Narrow',sans-serif;letter-spacing:.02em}
.guide-copy p{color:#555d61;line-height:1.55;font-size:15px;margin:0 0 16px;flex:1}
.guide-copy .read-link{font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;color:var(--orange);text-decoration:none;letter-spacing:.05em;font-size:14px}
.guides-more{max-width:var(--max);margin:40px auto 0;text-align:center}
.guides .ghost{border-color:var(--ink);color:var(--ink)}
.guides .ghost:hover{background:var(--ink);color:#fff}
@media(max-width:900px){.guide-grid{grid-template-columns:1fr}}

.form-error{
  grid-column:1/-1;
  background:rgba(220,60,40,.12);
  border:1px solid #dc3c28;
  color:#fff;
  padding:1rem 1.2rem;
  font-size:.92rem;
}