/* ---------- Tokens ---------- */
:root{
  --ink: #1B1B1D;
  --ink-soft: #4A4A4D;
  --muted: #757579;
  --line: #E4E3E0;
  --paper: #FFFFFF;
  --paper-dim: #F6F6F4;
  --accent: #FF5B1F;
  --accent-ink: #7A2400;
  --radius: 2px;
  --display: "Big Shoulders Display", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --wrap: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width: var(--wrap); margin:0 auto; padding:0 24px; width:100%; }

h1,h2,h3{
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin: 0 0 16px;
}
h1{ font-size: clamp(2.4rem, 5.5vw, 4.6rem); }
h2{ font-size: clamp(1.8rem, 4vw, 3rem); }

.eyebrow{
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.section-sub{ color: var(--ink-soft); font-size: 1.05rem; max-width: 46ch; margin: 0 0 24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 14px 26px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-accent{ background: var(--accent); color: #fff; }
.btn-accent:hover{ background: #E64E15; }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color:#fff; }
.btn-outline{ background:transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover{ border-color: var(--ink); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ height:64px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text small{ color: var(--muted); font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap:28px; font-weight:600; font-size:0.92rem; }
.main-nav a{ color: var(--ink-soft); transition: color .15s ease; }
.main-nav a:hover{ color: var(--ink); }
.nav-cta{
  background: var(--ink); color:#fff !important; padding:10px 18px; border-radius: var(--radius);
}
.nav-cta:hover{ background: var(--accent) !important; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background: var(--ink); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 640px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background: var(--ink);
}
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover; object-position: center 30%;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(0deg, rgba(10,10,11,0.94) 0%, rgba(10,10,11,0.62) 45%, rgba(10,10,11,0.25) 75%, rgba(10,10,11,0.15) 100%);
}
.hero-content{ position:relative; z-index:2; padding: 80px 24px 72px; max-width: 880px; }
.eyebrow-light{ color: var(--accent); }
.hero h1{ color:#fff; font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
.hero-sub-light{ color: #E4E3E0; }
.hero-sub{ font-size:1.1rem; max-width:48ch; margin-bottom:28px; }
.hero-sub-large{ font-size: clamp(1.15rem, 2vw, 1.5rem); max-width:58ch; margin-bottom:0; line-height:1.5; }
.btn-ghost-light{ border-color:#fff; color:#fff; }
.btn-ghost-light:hover{ background:#fff; color: var(--ink); }

@media (max-width:720px){
  .hero{ min-height:520px; }
  .hero-content{ padding: 56px 20px 48px; }
}

/* ---------- Brand strip ---------- */
.brand-strip{ padding: 36px 0; border-bottom:1px solid var(--line); }
.brand-strip-content{ display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
.brand-strip-label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--muted); font-weight:700; }
.brand-strip-row{
  width:75%;
  max-width:640px;
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  align-items:center;
  justify-items:center;
  gap:24px;
}
.brand-strip-row a{ display:flex; align-items:center; justify-content:center; height:56px; }
.brand-strip-logo{ height:56px; width:auto; max-width:100%; display:block; opacity:0.92; transition:opacity .15s ease, transform .15s ease; }
.brand-strip-row a:hover .brand-strip-logo{ opacity:1; transform: translateY(-1px); }

@media (max-width:720px){
  .brand-strip-row{ width:94%; gap:14px; }
  .brand-strip-row a{ height:38px; }
  .brand-strip-logo{ height:38px; }
}

/* ---------- Section head ---------- */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding: 56px 0 28px; flex-wrap:wrap; }

/* ---------- Rentals / carousel (signature) ---------- */
.rentals{ background: var(--paper); }
.carousel-controls{ display:flex; align-items:center; gap:16px; }
.car-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  flex: none;
}
.car-btn:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }

.carousel-viewport{
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  padding: 4px 24px 24px;
  scrollbar-width: none;
}
.carousel-viewport::-webkit-scrollbar{ display:none; }
.carousel-track{ display:flex; gap:20px; max-width: calc(var(--wrap) + 48px); margin:0 auto; }

.bike-card{
  scroll-snap-align: start;
  flex: 0 0 300px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background:#fff;
  display:flex; flex-direction:column;
  transition: border-color .15s ease, transform .15s ease;
}
.bike-card:hover{ border-color: var(--ink); transform: translateY(-3px); }
.bike-photo{ position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--paper-dim); }
.bike-photo img{ width:100%; height:100%; object-fit:cover; }
.bike-tag{
  position:absolute; top:10px; left:10px;
  background: var(--accent); color:#fff;
  font-size:0.7rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:4px 9px; border-radius:2px;
}
.bike-body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.bike-name{ font-family: var(--body); text-transform:none; font-weight:700; font-size:0.98rem; line-height:1.25; margin:0; }
.bike-desc{ color: var(--muted); font-size:0.85rem; line-height:1.45; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bike-meta{ display:flex; justify-content:space-between; align-items:flex-end; border-top:1px dashed var(--line); padding-top:12px; margin-top:4px; }
.bike-price-label{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.bike-price{ font-family: var(--display); font-size:1.4rem; font-weight:800; }
.bike-price-unit{ font-size:0.9rem; font-weight:600; }
.bike-link{ font-size:0.8rem; font-weight:700; color: var(--accent); }
.bike-link:hover{ text-decoration: underline; }

.carousel-footer{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding-bottom:64px; text-align:center; }
.carousel-dots{ display:flex; gap:6px; align-items:center; }
.carousel-dots .dot{ width:6px; height:6px; border-radius:50%; background: var(--line); transition: background .15s ease, width .15s ease; cursor:pointer; }
.carousel-dots .dot.active{ background: var(--accent); width:18px; border-radius:4px; }

/* ---------- Service ---------- */
.service{ background: var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 64px 0; }
.service-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; }

.calendly-embed{ margin-top:24px; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background:#fff; }
.calendly-fallback{ padding:28px 20px; text-align:center; }
.calendly-fallback p{ color: var(--muted); font-size:0.9rem; margin:0 0 14px; }

.service-list-title{ font-weight:700; text-transform:uppercase; letter-spacing:0.06em; font-size:0.82rem; color:var(--muted); margin-bottom:14px; }
.service-list ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; }
.service-list li{
  padding:14px 0; border-bottom:1px solid var(--line);
  font-weight:600; position:relative; padding-left:26px;
}
.service-list li::before{
  content:"→"; position:absolute; left:0; color: var(--accent); font-weight:700;
}
.service-sublist{
  list-style:none; margin:10px 0 0; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.service-sublist li{
  padding:0; border-bottom:none; font-weight:500; font-size:0.86rem;
  color: var(--ink-soft); padding-left:18px;
}
.service-sublist li::before{
  content:"–"; color: var(--muted); font-weight:600;
}

.service-photos{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  margin-top:48px;
}
.service-photo{ margin:0; position:relative; border-radius: var(--radius); overflow:hidden; }
.service-photo img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.service-photo figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:12px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.72), transparent);
  color:#fff; font-size:0.85rem; font-weight:600;
}
@media (max-width:720px){ .service-photos{ grid-template-columns:1fr; } }

/* ---------- Pickup ---------- */
.pickup{ padding: 72px 0; }
.pickup-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:48px; align-items:center; }
.pickup-img{ border-radius: var(--radius); }

/* ---------- Community ---------- */
.community{ background: var(--ink); color:#fff; padding:72px 0; }
.community h2{ color:#fff; }
.community .eyebrow{ color: var(--accent); }
.community .section-sub{ color:#c9c9cb; }
.community-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.community-photos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.community-photos img{ border-radius: var(--radius); aspect-ratio:1; object-fit:cover; }
.community-photos-single{ display:block; }
.community-photos-single img{ width:100%; aspect-ratio:4/3; border-radius: var(--radius); object-fit:cover; }

/* ---------- Try before you buy ---------- */
.try-before{ padding:72px 0; }
.try-before-grid{ display:grid; grid-template-columns:1fr 0.9fr; gap:48px; align-items:center; }
.try-before-img{ border-radius: var(--radius); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--paper-dim); border-top:1px solid var(--line); padding:56px 0 20px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-logo{ height:64px; margin-bottom:12px; }
.footer-grid p{ color: var(--muted); font-size:0.9rem; margin: 0 0 14px; }
.footer-hours{ margin:0; }
.footer-hours div{ display:flex; justify-content:space-between; gap:16px; max-width:220px; padding:5px 0; border-bottom:1px solid var(--line); font-size:0.85rem; }
.footer-hours dt{ color: var(--ink-soft); font-weight:600; }
.footer-hours dd{ margin:0; color: var(--muted); }
.footer-title{ font-weight:700; text-transform:uppercase; font-size:0.76rem; letter-spacing:0.08em; color:var(--muted); margin-bottom:14px; }
.footer-grid a{ display:block; color: var(--ink-soft); font-size:0.92rem; padding:5px 0; }
.footer-grid a:hover{ color: var(--accent); }
.footer-bottom{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:0.82rem; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .service-grid, .pickup-grid, .community-grid, .try-before-grid{ grid-template-columns:1fr; }
  .pickup-grid img, .try-before-img{ order:-1; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 720px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0;
    padding: 8px 24px 16px;
    display:none;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ width:100%; padding:12px 0; border-bottom:1px solid var(--line); }
  .nav-cta{ margin-top:10px; text-align:center; }
  .nav-toggle{ display:flex; }
  .section-head{ align-items:flex-start; }
  .brand-mark{ height:48px; }

  .wrap{ padding: 0 18px; }
  .btn{ width:100%; justify-content:center; }
  .carousel-footer .btn{ width:auto; }
  .bike-card{ flex-basis: 82vw; }
  .calendly-inline-widget{ min-width: 0 !important; width:100% !important; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-hours div{ max-width:none; }
}

@media (max-width: 420px){
  .car-btn{ width:40px; height:40px; }
}