/* ============================================================
   BRIGHTLY RIDES — Website
   ============================================================ */
:root { --maxw: 1200px; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink-900); overflow-x: hidden; }
body { font-family: var(--font-sans); color: var(--fg-1); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: rgba(212,175,55,0.3); }

/* mobile-only elements hidden on desktop */
.show-sm { display: none !important; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.section { padding: 104px 0; }

/* link underline wipe */
.navlink { position: relative; }
.navlink::after { content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0; background: var(--gold-400); transition: width var(--dur) var(--ease); }
.navlink:hover::after, .navlink.active::after { width:100%; }

/* reveal on scroll */
.reveal { opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

@media (max-width: 880px) {
  .wrap { padding-left: 22px; padding-right: 22px; }
  .section { padding: 64px 0; }
  .hide-sm { display: none !important; }
  .show-sm { display: flex !important; }
}

/* stack multi-column layouts on small screens (prevents side overflow) */
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .fleet-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* Fleet page — stack on mobile so the vehicle photo is never cropped */
@media (max-width: 820px) {
  .fleet-detail-grid, .interior-grid { grid-template-columns: 1fr !important; }
  .fleet-detail-grid > div:first-child { height: auto !important; aspect-ratio: 3 / 2; }
  .fleet-detail-grid > div:last-child { padding: 30px 26px !important; }
  .interior-grid > div:first-child { padding: 30px 26px !important; }
  .interior-grid > div:last-child { height: auto !important; aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
  .year-grid { grid-template-columns: 1fr !important; }
}