/* ===========================================================
   MAGIC LED — Bay Area additions.
   Loads after style.css (the national site's stylesheet, unchanged).
   =========================================================== */

html{ scroll-padding-top:90px; }

/* header: Bay Area tag + nav that stays visible on phones */
.brand{ display:flex; align-items:center; white-space:nowrap; }
.area-tag{
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:500; letter-spacing:.12em;
  color:var(--accent); margin-left:10px; cursor:default; user-select:none;
}
.navlinks a[aria-current="page"]{ color:var(--accent); }
.navlinks .nav-quote{ display:none; }

/* seamless spec/city ticker (content is duplicated in the markup) */
.ticker div{ padding-left:0; animation:tickerBA 48s linear infinite; }
@keyframes tickerBA{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker b{ color:var(--accent); font-weight:500; }

/* section heading used across home */
.section-head{ padding:64px 32px 0; text-align:center; }
.section-head h2{ font-size:30px; font-weight:900; margin:0 0 10px; }
.section-head p{ color:var(--muted); max-width:52ch; margin:0 auto; }
.clients + .features{ padding-top:24px; }
.card a.spec{ text-decoration:none; }

/* rental steps as tiles */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:32px 32px 8px; }
.step{ background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius); padding:22px 20px; transition:border-color .2s ease, box-shadow .2s ease; }
.step .n{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.1em; color:var(--accent); }
.step h3{ font-size:15px; margin:10px 0 6px; }
.step p{ color:var(--muted); font-size:13.5px; line-height:1.55; margin:0; }

/* service area chips */
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:28px 32px 0; max-width:900px; margin:0 auto; list-style:none; }
.chips li{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; color:var(--text); background:var(--surface);
}

/* quote section on home */
.quote-sec{ margin-top:72px; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(168,85,247,.06), transparent 320px); }
.page-hero h2{ font-size:44px; line-height:1.05; max-width:16ch; font-weight:900; }
.form-error{ color:var(--danger); font-size:13px; margin:0 0 14px; }
.field [aria-invalid="true"]{ border-color:var(--danger); }
.field .opt{ text-transform:none; letter-spacing:0; color:var(--muted-2); }

/* gallery captions without the fake-spec line feel cramped; give them air */
.gallery-caption{ padding:16px 18px; }

@media (max-width:900px){
  .steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  html{ scroll-padding-top:120px; }
  .nav{ flex-wrap:wrap; row-gap:0; padding:14px 20px 0; }
  /* phones: drop the header quote button so the BAY AREA tag always fits; the hero has its own Get a Quote */
  .site-header .btn-primary{ display:none; }
  .menu-toggle{ display:none; }
  .navlinks{
    display:flex; order:3; width:100%; justify-content:flex-start; gap:26px;
    margin-top:12px; border-top:1px solid var(--line);
  }
  .navlinks a{ padding:11px 0; font-size:14px; }
  /* the header button is hidden on phones, so the quote link lives in the nav row */
  .navlinks .nav-quote{ display:block; margin-left:auto; color:var(--accent); font-weight:600; }
  .word{ font-size:14px; }
  .area-tag{ margin-left:8px; }

  .hero{ padding-top:44px; padding-bottom:44px; gap:32px; }
  .hero h1{ font-size:44px; }
  .section-head{ padding:52px 20px 0; }
  .section-head h2{ font-size:26px; }
  .steps{ gap:12px; padding:24px 20px 8px; }
  .step{ padding:18px 16px; }
  .step p{ font-size:13px; }
  .chips{ padding:22px 20px 0; gap:8px; }
  .chips li{ font-size:11px; padding:7px 12px; }
  .page-hero h2{ font-size:32px; }
  .quote-sec{ margin-top:56px; }
  .contact-grid{ padding:16px 20px 56px; }
  form{ padding:22px; }
  /* style.css sets .container{padding:0 20px} here, which zeroes these blocks' vertical padding */
  .gallery-grid, .about-grid{ padding-top:24px; padding-bottom:48px; }
  .stat-row{ padding-bottom:24px; }
  .values{ padding-bottom:48px; }
  .about-grid{ gap:28px; }
  .site-footer{ padding-top:44px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-bottom{ padding-block:20px calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:359px){
  .navlinks{ gap:18px; }
  .xs-hide{ display:none; }
}