.hero .eyebrow { color: #f6bd1b; }
.hero-image { background-image: linear-gradient(90deg,rgba(0,28,54,.89) 0%,rgba(0,33,63,.6) 42%,rgba(0,30,50,.15) 100%),url('assets/hero-illustrative.png'); }
.hero-frame { opacity: 0; transition: opacity 1.2s ease; transform: scale(1); }
.hero-frame.is-active { opacity: 1; animation: hero-drift 9s ease-out both; }
.hero-frame.frame-roofing { background-image: linear-gradient(90deg,rgba(0,28,54,.9),rgba(0,33,63,.55)),url('assets/roofing-stock.jpg'); }
.hero-frame.frame-materials { background-image: linear-gradient(90deg,rgba(0,28,54,.9),rgba(0,33,63,.45)),url('assets/materials-illustrative.png'); }
.motion-paused .hero-frame { animation-play-state: paused; }
.hero-controls { position: absolute; z-index: 2; top: 100px; right: 5vw; display: flex; align-items: center; gap: .5rem; font-size: .7rem; }
.hero-controls button { color: white; background: rgba(0,28,54,.65); border: 1px solid rgba(255,255,255,.6); padding: .55rem .7rem; font: inherit; }
.motion-status { padding: .3rem; }
.hero-credit[hidden] { display: none; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.035); } }
@media(max-width:720px) { .hero-controls { top: 82px; right: 7vw; } .hero { padding-top: 135px; } }
.image-note a, .gallery-grid figcaption a { text-decoration: underline; text-underline-offset: 3px; }
:root { --blue: #2325d8; --blue-2: #12135c; --gold: #ffb000; }
.logo { width: 118px; height: 54px; object-fit: contain; background: white; padding: 5px; }
.footer-logo { width: 150px; height: auto; background: white; padding: 8px; }
.footer-brand p { margin-left: 0; }
.service-gallery { background: var(--cream); }
.service-gallery > h2 { font-size: clamp(2rem,4vw,3.8rem); max-width: 740px; margin-bottom: 2.5rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.gallery-grid figure { margin: 0; background: white; }
.gallery-intro { max-width: 850px; color: var(--muted); }
.gallery-hint { font-size: .85rem; color: var(--blue); margin-bottom: 2rem; }
.gallery-photo { display: block; overflow: hidden; }
.gallery-photo img { transition: transform .3s ease; }
.gallery-photo:hover img { transform: scale(1.035); }
.service-gallery .source-note a { text-decoration: underline; }
.gallery-grid img { display: block; width: 100%; height: 230px; object-fit: cover; }
.gallery-grid figcaption { padding: 1.25rem; }
.gallery-grid strong { display: block; font-family: Georgia,serif; font-size: 1.35rem; margin-bottom: .65rem; }
.gallery-grid span { color: var(--muted); font-size: .75rem; display: block; }
@media(max-width:720px) { .gallery-grid { grid-template-columns: 1fr; } }
footer a, .contact-details a { overflow-wrap: anywhere; }
.section-top > .text-link { flex-shrink: 0; }
form .button { border: 0; justify-content: center; font-family: inherit; }
form input, form textarea { border-radius: 0; color: var(--ink); background: white; }
@media (max-width: 720px) {
  .section { padding-top: 65px; padding-bottom: 65px; }
  .section-top { flex-direction: column; }
  .image-note { left: 7vw; right: 7vw; }
  .service-list article { gap: 1rem; }
  .service-list h3 { font-size: 1.65rem; }
  .page-hero { padding-top: 135px; padding-bottom: 65px; }
}
.brand-caption { font-size: .55rem; letter-spacing: .08em; max-width: 95px; }
.project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.source-note { font-size: .75rem; color: #64717c; margin-top: 1.5rem; }
@media (max-width: 720px) { .project-grid { grid-template-columns: 1fr; } .brand-caption { display: none; } }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #f6bd1b;
  outline-offset: 5px;
}
button { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}