/* ==========================================================================
   San Jose Hogwash — one-page site
   Design tokens first, then a section-by-section stylesheet in page order.
   ========================================================================== */

:root {
  --gold: #f2b705;
  --gold-deep: #c99404;
  --gold-soft: #f0c24a;  /* built-by-a-rider band */
  --gradient-gold: linear-gradient(135deg, var(--gold), var(--gold-deep));

  --dark: #1b1b1b;
  --darker: #141414;   /* faq band */
  --ink: #1b1b1b;      /* text/inverse */
  --rule-strong: #121212; /* border/on-inverse */
  --gray-line: #3d3d3d;
  --light-gray: #f5f3ee;
  --muted: #a9a9a6;   /* text/secondary -> color/neutral/300; AAA on both dark grounds */

  --navy: #242424;   /* testimonial band */
  --panel: #f5f3ee;  /* cards on light grounds */
  --neutral-050: #ffffff; /* bike types bar */

  --white: #ffffff;
  --black: #121212;

  --container: 1200px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--dark);
  color: var(--light-gray);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; line-height: 1.15; }

ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.container.narrow { max-width: 860px; }

.icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-lg { width: 2rem; height: 2rem; }

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #f2f2f2;
  margin-bottom: 3rem;
}

.section-title.dark { color: var(--black); margin-bottom: 2rem; }

/* --------------------------------------------------------- header --- */
.site-header {
  background: var(--dark);
  border-bottom: 1px solid var(--gray-line);
}

.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
}

.logo img { width: 200px; }

.header-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.cta-label {
  margin: 0;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .header-inner { flex-direction: row; justify-content: space-between; }
  .header-cta { flex-direction: row; gap: 1rem; }
}

/* ------------------------------------------------- mobile nav --- */
/* The toggle and panel exist only below 768px; above it the header keeps
   its logo + CTA layout and the panel is never rendered. */
.nav-toggle { display: none; }

.nav-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  place-items: center;
}

.nav-bars,
.nav-bars::before,
.nav-bars::after {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--light-gray);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-bars { position: relative; }

.nav-bars::before,
.nav-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-bars::before { top: -8px; }
.nav-bars::after  { top: 8px; }

/* Open state folds the bars into an X. */
.nav-toggle[aria-expanded="true"] .nav-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-bars::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars::after  { transform: translateY(-8px) rotate(-45deg); }

.nav-panel[hidden] { display: none; }

.nav-panel ul {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--gray-line);
}

.nav-panel a {
  display: block;
  padding: 0.9rem 0.25rem;
  border-bottom: 1px solid var(--gray-line);
  color: var(--light-gray);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--transition);
}

.nav-panel a:hover,
.nav-panel a:focus-visible { color: var(--gold); }

@media (max-width: 767.98px) {
  .site-header { position: relative; }

  .header-inner {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    /* 15px either side of the logo column. Applying it symmetrically keeps
       the middle column — and so the logo — centred on the screen. */
    column-gap: 15px;
    row-gap: 1rem;
  }

  .nav-toggle {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    position: static;
  }

  /* The logo owns the middle column, which sits between two equal 44px
     columns — so its centre is the container's centre as a property of the
     grid, not a sum of widths and paddings that has to come out even. */
  .logo {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    /* Holds the row at the height the logo occupied before it was reduced —
       its former width times the 165x73 aspect — so the header keeps its
       height while the image inside it gets smaller. */
    min-height: calc(min(205px, 100vw - 158px) * 73 / 165);
  }

  /* 85% of the width it would otherwise take, so the 165px source is stretched
     less and the mark renders sharper. The row height above is unaffected. */
  .logo img { width: calc(min(205px, 100vw - 158px) * 0.85); }

  .nav-panel { grid-column: 1 / -1; width: 100%; }

  /* The appointment CTA lives at the foot of the menu on small screens, so it
     rides the panel's open state. The panel precedes it in the DOM, which is
     what makes this sibling selector possible without moving the element. */
  .nav-panel[hidden] ~ .header-cta { display: none; }

  .header-cta {
    grid-column: 1 / -1;
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-bars, .nav-bars::before, .nav-bars::after { transition: none; }
}

/* ----------------------------------------------------------- hero --- */
.hero {
  --hero-pad-y: 2.5rem;
  background: var(--dark);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: var(--hero-pad-y);
}

.hero-copy { order: 2; text-align: center; }

/* The photo runs flush to the edges of the hero, so it cancels the section's
   vertical padding rather than sitting inside it. */
.hero-media {
  order: 1;
  margin-top: calc(var(--hero-pad-y) * -1);
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #f2f2f2;
  margin-bottom: 1.5rem;
}

.hero p {
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 30rem;
  margin: 0 auto 2rem;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

.hero-media img {
  width: 100%;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6);
}

@media (min-width: 768px) {
  .hero { --hero-pad-y: 4rem; }
  .hero-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .hero-copy {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }
  .hero-media {
    order: 2;
    margin-block: calc(var(--hero-pad-y) * -1);
  }
  /* Fills the full height of the hero row, cropping rather than letterboxing. */
  .hero-media img { height: 100%; object-fit: cover; }
  .hero p { margin-inline: 0; }
  .hero-actions { flex-direction: row; }
}

/* ---------------------------------------------------------- button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border-radius: 2px;
  border: 1.5px solid var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold); }

.btn-outline { background: transparent; color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--dark); }

.btn:active { transform: translateY(1px); }

/* ------------------------------------------------------- bike bar --- */
.bike-bar {
  background: var(--neutral-050, #f2f2f2);
  padding: 0.5rem 1.25rem;
}

.bike-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 36px;
  row-gap: 0.5rem;
  width: 100%;
  max-width: 1162px;
  margin-inline: auto;
  color: var(--dark);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

/* A fixed 36px between names rather than sharing the leftover space. Growth
   made a sparsely-filled wrapped line stretch its items far apart — 140px at
   768px wide — so the gap is now identical at every screen size. */
.bike-list li {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
}

.bike-list li:not(:last-child)::after {
  content: "\2022";
  position: absolute;
  right: -18px;          /* centres the bullet in the 36px gap */
  transform: translateX(50%);
  color: rgb(20 20 20 / 0.45);
}

@media (min-width: 768px) {
  /* Fixed 40px strip. Height is only pinned where the row fits on one line —
     below 768px it wraps and has to stay free to grow. */
  .bike-bar {
    display: flex;
    align-items: center;
    height: 40px;
    padding-block: 0;
    padding-inline: 2.5rem;
  }
}

/* ------------------------------------------------------- services --- */
.services {
  background: var(--gold);
  padding-block: 4rem;
  color: var(--dark);
}

.service-cards {
  display: grid;
  gap: 1.5rem;
}

.services .card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 1.5rem;
}

.services .card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.services .card p {
  margin: 0;
  color: rgb(20 20 20 / 0.8);
  font-size: 0.95rem;
}

.about { margin-top: 3rem; text-align: center; }

.about h2 {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.about p { font-size: 1.05rem; margin: 0; }

@media (min-width: 768px) {
  .service-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Appointment note and call CTA beneath the service cards. */
.services-cta { margin-top: 2.5rem; text-align: center; }

.hours {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.services .schedule { margin-top: 1.75rem; gap: 1rem; }

/* Same outlined white button the pricing section uses. */
.services .call-btn { border: 1px solid var(--rule-strong); }

/* Gift card line under the payment marks. */
.gift {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  font-size: 1rem;
}

.gift-btn {
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.25rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color var(--transition);
}

.gift-btn:hover { background: var(--gold-deep); }

/* ------------------------------------------------------------ faq --- */
.faq {
  background: var(--darker);
  padding-block: 4rem;
}

.faq-list {
  max-width: 820px;
  margin-inline: auto;
}

.faq-item { border-bottom: 1px solid var(--gray-line); }
.faq-item:first-child { border-top: 1px solid var(--gray-line); }

.faq-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.35rem 0;
  border: 0;
  background: none;
  color: #f2f2f2;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition);
}

.faq-q:hover { color: var(--gold); }

.faq-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Plus turns into a minus when the answer is open. */
.faq-icon .bar-v {
  transform-origin: center;
  transition: opacity var(--transition), transform var(--transition);
}

.faq-q[aria-expanded="true"] .faq-icon .bar-v {
  opacity: 0;
  transform: rotate(90deg);
}

.faq-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer { padding-bottom: 1.35rem; }

.faq-answer p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1rem;
}

.faq-answer p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-panel { transition: none; }
}

/* ------------------------------------------------------ our work --- */
.work {
  background: var(--dark);
  padding-block: 4rem;
}

.carousel {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
}

.carousel-viewport { overflow: hidden; }

.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
  html { scroll-behavior: auto; }
}

.slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
}

.slide img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* A near-square photo loses 37% of its height to the 16:10 crop, and on the
   tire-lettering shot that is precisely where the lettering sits. */
.slide-fit img {
  object-fit: contain;
  background: var(--darker);
}

.slide-caption {
  position: absolute;
  left: 1.5rem;
  bottom: 2.5rem;
  margin: 0;
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.8);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.45);
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--transition);
}

.carousel-btn:hover { background: rgb(0 0 0 / 0.75); }
.carousel-btn .icon { width: 1.25rem; height: 1.25rem; }
.carousel-btn.prev { left: 0.5rem; }
.carousel-btn.next { right: 0.5rem; }

.carousel-dots {
  position: absolute;
  bottom: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.dot {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.55);
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

.dot[aria-selected="true"] { background: var(--gold); transform: scale(1.2); }

/* ------------------------------------------------ built by a rider --- */
.about-band {
  background: var(--gold-soft);
  color: var(--ink);
  padding-block: 3.5rem;
  text-align: center;
}

.about-band h2 {
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}

.about-band p { font-size: 1.0625rem; line-height: 1.7; margin: 0; }

/* Blank line between the two paragraphs of the story. */
.about-band p + p { margin-top: 1.25rem; }

/* ---------------------------------------------------- testimonial --- */
.testimonial {
  background: var(--navy);
  padding-block: 4rem;
  text-align: center;
}

.testimonial blockquote {
  margin: 0 0 2rem;
  color: var(--white);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.7;
}

.testimonial blockquote p { margin: 0 0 1.5rem; }
.testimonial blockquote p:last-child { margin-bottom: 0; }

.attribution {
  color: var(--white);
  font-style: italic;
  margin: 0 0 3rem;
}

.reviews-lead {
  color: var(--white);
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

.yelp-link {
  display: inline-block;
  transition: transform var(--transition);
}

.yelp-link:hover { transform: scale(1.05); }

/* -------------------------------------------------------- pricing --- */
.pricing {
  background: var(--white);
  color: var(--ink);
  padding-block: 4rem;
}

.pricing-lead {
  text-align: center;
  font-size: 0.95rem;
  color: #3d3d3d;
  margin: -1.25rem auto 2.5rem;
  max-width: 60ch;
}

/* Three price tiers, equal width, sharing one row. */
.tier-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto 3rem;
}

.tier {
  border: 1px solid var(--ink);
  background: var(--panel);
}

.tier-head {
  background: var(--dark);
  color: var(--white);
  text-align: center;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tier-body { padding: 1.5rem 1rem 2rem; text-align: center; }

.starting { font-size: 1.125rem; font-weight: 400; margin: 0; }

.amount {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1.05;
  margin: 0.25rem 0 0;
}

/* What's included / add-ons, set narrower than the tiers above them. */
.detail-lists {
  max-width: 628px;
  margin-inline: auto;
}

.detail-lists h3 {
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.75rem;
}

.detail-lists h3 + .features { margin-bottom: 2rem; }

.features {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.features li::before { content: "\2022"; margin-right: 0.6rem; }

.fineprint {
  font-size: 0.9375rem;
  color: #3d3d3d;
  line-height: 1.6;
  margin: 0 0 2rem;
}

/* Seal + guarantee line. */
.certified {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.certified img { flex: none; }

@media (min-width: 768px) {
  .tier-grid { grid-template-columns: repeat(3, 1fr); }
}

/* payments + schedule */
.payments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.payments span { font-size: 1.125rem; }

.pay-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.pay {
  display: grid;
  place-items: center;
  width: 55px;
  height: 37px;
  border-radius: 4px;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  overflow: hidden;
}

.pay img { width: 43px; height: 25px; object-fit: contain; }
.pay svg { width: 55px; height: 37px; }

.pay-visa { background: #2a324b; }
.pay-mastercard { background: #2a324b; }
.pay-amex { background: #2d64af; font-size: 0.625rem; }
.pay-applepay { background: #303030; }
.pay-venmo { background: #3d99d2; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.schedule {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  text-align: center;
}

.schedule h2 {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.call-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--white);
  color: var(--dark);
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 2px;
  font-size: 1.125rem;
  transition: background-color var(--transition);
}

.call-btn:hover { background: #ececec; }

/* Same button on a light ground: the white surface would vanish, so it gets
   a hairline edge (border/on-inverse). box-sizing keeps it 48px tall. */
.pricing .call-btn { border: 1px solid var(--rule-strong); }


.call-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
}

.call-icon svg { width: 1.15rem; height: 1.15rem; }

@media (min-width: 768px) {
  .payments { flex-direction: row; justify-content: center; gap: 1.5rem; }
}

/* --------------------------------------------------------- footer --- */
.site-footer {
  background: var(--dark);
  border-top: 1px solid var(--gray-line);
  padding-block: 2rem 3rem;
  text-align: center;
}

.find-us {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--white);
  font-size: 1.05rem;
  margin: 0 0 1rem;
}

.find-us a { transition: color var(--transition); }
.find-us a:hover { color: var(--gold); }
.find-us .icon { width: 1.25rem; height: 1.25rem; }

.colophon {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}

/* --------------------------------------------------- back to top --- */
.back-to-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 50;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4);
  transition: transform var(--transition), opacity var(--transition);
}

.back-to-top:hover { transform: scale(1.1); }
.back-to-top[hidden] { display: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}