/* BusWraps.com — Version 16, copper accent layer.
   Color-only enhancement to the Version 15 website.
   No logo edits, new imagery or animation changes. Includes a small-screen fallback wrap safeguard. */
:root {
  --copper: #ad542f;
  --copper-deep: #9b4727;
  --copper-hover: #8e4023;
  --copper-light: #f0bb92;
  --copper-edge: #e5a675;
  --copper-wash: #fbf2ea;
  --copper-rule: #dfb99f;
  --gold: var(--copper-light);
}

/* Brand remains navy. The accent distinguishes actions from navigation. */
.masthead { box-shadow: inset 0 -3px 0 var(--copper); }
.desktopnav a:hover, .mobile-menu a:hover, .footer a:hover {
  color: var(--copper-deep);
}
.btn-dark, .home-hero .btn-white, .service-hero .btn-white,
.end-cta .btn-light, .mobile-menu .mobile-quote {
  background: var(--copper);
  color: #fff;
  border-color: var(--copper);
}
.btn-dark:hover, .home-hero .btn-white:hover, .service-hero .btn-white:hover,
.end-cta .btn-light:hover, .mobile-menu .mobile-quote:hover {
  background: var(--copper-hover);
  color: #fff;
  border-color: var(--copper-hover);
}
.home-hero .btn-white, .service-hero .btn-white {
  border-color: var(--copper-edge);
}
.btn-outline { border-color: var(--copper-rule); color: var(--copper-deep); }
.btn-outline:hover { background: var(--copper-wash); }
.btn-outline-light { border-color: var(--copper-light); }
.btn-outline-light:hover { background: var(--copper); color: #fff; }

/* Warm highlights are intentionally lighter on navy surfaces. */
.eyebrow { color: var(--copper-deep); }
.eyebrow.gold, .home-hero .eyebrow, .service-hero .eyebrow,
.inner-hero .eyebrow, .home-proof .eyebrow {
  color: var(--copper-light);
}
.home-hero h1 em, .inner-hero em, .home-proof em {
  color: var(--copper-light);
}
.hero-trust { color: var(--copper-light); }
.text-arrow { color: var(--copper-deep); text-decoration-color: var(--copper-rule); }
.text-arrow:hover { color: var(--copper-hover); text-decoration-color: currentColor; }
.home-hero .underlined, .service-hero .underlined {
  text-decoration-color: var(--copper-light);
}
.image-controls button { border-color: var(--copper-edge); }
.image-controls button:hover { background: var(--copper-light); color: var(--navy); }
.image-controls .counter { color: var(--copper-light); }
.service-metadata span { border-color: var(--copper-edge); color: var(--copper-light); }

/* Warm supporting surfaces break up the cool blue page rhythm. */
.value-band { background: var(--copper-wash); }
.value-grid > div { border-color: var(--copper-rule); }
.value-grid span { color: var(--copper-deep); }
.project-card, .gallery-item { border-color: var(--copper-rule); }
.project-caption span, .gallery-desc span { color: var(--copper-deep); }
.solution span, .solution strong { color: var(--copper-light); }
.step-card { background: var(--copper-wash); border-top-color: var(--copper); }
.step-card span { color: var(--copper-deep); }
.split-section { background: var(--copper-wash); }
.related { border-color: var(--copper-rule); }
.related strong { color: var(--copper-deep); }
.related:hover { border-color: var(--copper); background: var(--copper-wash); }
.faq-items summary span { color: var(--copper-deep); }
.faq-items details[open] { border-bottom-color: var(--copper); }

/* Gallery and quote pages receive the same coherent accent system. */
.gallery-filters button { background: var(--copper-wash); border-color: var(--copper-rule); }
.gallery-filters button:hover { border-color: var(--copper); }
.gallery-filters button[aria-pressed=true] {
  background: var(--copper); border-color: var(--copper); color: #fff;
}
.quote-panel { background: var(--copper-wash); box-shadow: inset 0 4px 0 var(--copper); }
.quote-panel li::marker { color: var(--copper-deep); }
.quote-contact { color: var(--copper-deep); text-decoration-color: var(--copper-rule); }
.brief-form { border-color: var(--copper-rule); box-shadow: inset 0 4px 0 var(--copper); }
.brief-form input:focus, .brief-form select:focus, .brief-form textarea:focus {
  border-color: var(--copper);
}
.brief-result { border-color: var(--copper-rule); }

/* A warm closing invitation on every page; the navy wordmark is untouched. */
.end-cta { background: var(--copper-wash); color: var(--navy); box-shadow: inset 0 4px 0 var(--copper); }
.end-cta .eyebrow, .end-cta h2 em { color: var(--copper-deep); }
.end-cta p { color: #4d6273; }
.end-actions > a:nth-child(2) { color: var(--copper-deep); }
.footer-grid h3 { color: var(--copper-deep); }
.copyright { border-color: var(--copper-rule); }

/* Visible keyboard focus uses contrasting light/dark rings without moving content. */
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--copper-deep);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}
.home-hero :focus-visible, .service-hero :focus-visible,
.inner-hero :focus-visible, .home-proof :focus-visible,
.announcement :focus-visible {
  outline-color: var(--copper-light);
  box-shadow: 0 0 0 3px var(--navy);
}

/* Offline font fallback safeguard: allow long headings to wrap on small phones.
   No font sizes, spacing or column definitions are changed. */
@media (max-width: 560px) {
  .home-proof-grid > *, .service-hero-grid > * { min-width: 0; }
  h1, h2 { overflow-wrap: anywhere; }
}

.bw-cycle{position:relative;overflow:hidden}.bw-cycle>img,.bw-cycle .bw-next{transition:opacity 1.3s ease}.bw-cycle .bw-fadeout{opacity:0!important}.bw-cycle .bw-next{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover;opacity:0;z-index:2;pointer-events:none}.bw-cycle .bw-next.bw-visible{opacity:1}.portfolio-note{grid-column:1/-1;font-size:14px;color:#607084}.quote-photo-showcase{background:#f5f0e8}.quote-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}.quote-photo-grid figure{margin:0}.quote-photo-grid img{width:100%;height:250px;object-fit:cover}@media(max-width:700px){.quote-photo-grid{grid-template-columns:1fr}}

/* V18 approved navy-background identity lockup */
.brand img,.footer-brand img{background:#092642;object-fit:contain;object-position:center;padding:3px 5px;border-radius:2px}
.brand{width:300px}
.brand img{height:110px}
.footer-brand img{width:245px;height:112px}
@media(max-width:560px){.brand{width:205px}.brand img{height:78px}}

/* V21: compact closing call-to-action, preserving existing styling. */
.end-cta {padding: 35px 0 38px;}
.end-grid {display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:24px; align-items:center;}
.end-cta h2 {font-size:clamp(34px,3.5vw,51px);line-height:1.03;margin:7px 0 9px;}
.end-cta p {font-size:14px;line-height:1.55;max-width:650px;}
.end-actions {gap:9px;align-items:flex-start;}
.end-actions .btn {min-height:46px;padding:10px 18px;}
@media(max-width:820px){.end-cta{padding:30px 0 33px}.end-grid{grid-template-columns:1fr;gap:18px}.end-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:16px}}
@media(max-width:560px){.end-cta{padding:26px 0 29px}.end-cta h2{font-size:clamp(35px,10vw,45px)}.end-actions{align-items:flex-start;flex-direction:column;gap:12px}}