/* ==========================================================================
   Peddlers 30A — Services page
   Loads after sections.css, which supplies the shared header, footer and
   section primitives. Geometry is measured from the 1920 × 11869 Figma export;
   every length is authored in rem against that canvas (1rem = 16 design px).
   ========================================================================== */

/* The home page stacks its sections with a 60px gap (set in sections.css).
   This page does not: every band butts against the next, so that rhythm is
   cancelled here rather than duplicated into each section's padding. */
main > section + section {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   01 — Hero                                                    y104 – y1024
   -------------------------------------------------------------------------- */

.sv-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  min-height: 35rem;
  overflow: hidden;
  isolation: isolate;
}

.sv-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Matched to the export: the text-free bands of the Figma hero average a
   brightness of 63, which needs a 0.52 black scrim over this photograph.
   Re-check this value once the real sv-hero.jpg is dropped in — if that source
   is already graded dark, the scrim will need to come back down. */
.sv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.52);
}

.sv-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sv-hero__title {
  max-width: 62.5rem;
  color: var(--s3);
}

.sv-hero__lead {
  max-width: 57rem;
  margin-top: 2.125rem;
  font-family: var(--font-label);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-label-xs);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--s1);
}

.sv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.375rem;
  margin-top: 3.25rem;
}

.sv-hero__actions .btn {
  min-height: 4rem;
  padding-inline: 2.75rem;
  font-size: var(--fs-body-md);
}

/* --------------------------------------------------------------------------
   02 — More Than a Stop                                       y1024 – y1744
   -------------------------------------------------------------------------- */

.sv-intro {
  background: var(--s1);
  padding-block: 4.875rem 3.5rem;
}

.sv-intro__title {
  margin-top: 2.25rem;
  text-align: center;
}

.sv-intro__body {
  max-width: 41.25rem;
  margin: 1.25rem auto 0;
  text-align: center;
}

/* Three narrow columns with generous air between them, each under a rule. */
.sv-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17.8125rem; /* 285px */
  margin-top: 1.375rem;
}

.sv-pillars > li {
  padding-top: 1.9375rem;
  border-top: 1px solid var(--s3);
}

.sv-pillars__kicker,
.sv-bike__kicker,
.sv-choice__kicker {
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text);
}

.sv-pillars__name {
  margin-top: 1.5rem;
}

.sv-pillars__copy {
  margin-top: 1.25rem;
  font-weight: 300;
  font-size: var(--fs-body-md);
  line-height: 1.5;
  color: var(--text);
}

/* Small teal link with a trailing arrow, used across the page. */
.sv-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--s2);
}

.sv-arrow-link::after {
  content: "";
  width: 1.125rem;
  height: 1px;
  background: currentColor;
  box-shadow: 0.3125rem -0.1875rem 0 -0.0625rem currentColor,
    0.3125rem 0.1875rem 0 -0.0625rem currentColor;
  transition: width var(--dur) var(--ease);
}

.sv-arrow-link:hover::after {
  width: 1.75rem;
}

.sv-arrow-link--cream {
  color: var(--s3);
}

/* --------------------------------------------------------------------------
   03 — Find the Ride banner + 04 bike categories             y1745 – y3476
   -------------------------------------------------------------------------- */

.sv-rentals {
  padding-block: 3.5rem 8.6875rem;
}

.sv-banner {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 31.5rem; /* 504px */
  overflow: hidden;
  isolation: isolate;
}

/* Only the clean right-hand slice of the exported banner is used, so it is
   anchored right and the scrim carries the left side behind the copy. */
.sv-banner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.sv-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.62) 34%,
    rgba(0, 0, 0, 0.12) 62%,
    rgba(0, 0, 0, 0) 100%
  );
}

.sv-banner__content {
  max-width: 45rem;
  padding: 3.5rem 4.0625rem;
}

.sv-banner__kicker {
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--s1);
}

.sv-banner__title {
  margin-top: 1.5rem;
  color: var(--white);
}

.sv-banner__lead {
  max-width: 30rem;
  margin-top: 1.5rem;
  font-family: var(--font-label);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-label-xs);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--s3);
}

.sv-bikes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--col-gap);
  margin-top: 3.5rem;
}

/* Cards stretch to the tallest in the row and the CTA is pushed to the
   bottom, so all four BOOK NOW buttons sit on one line however many lines of
   copy each card carries. */
.sv-bike {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sv-bike__media {
  aspect-ratio: 432 / 660;
  overflow: hidden;
}

.sv-bike__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.sv-bike:hover .sv-bike__media img {
  transform: scale(1.05);
}

.sv-bike__kicker {
  margin-top: 2.5rem;
}

.sv-bike__name {
  margin-top: 2rem;
  color: var(--s2);
}

.sv-bike__copy {
  margin-top: 1.25rem;
  font-family: var(--font-label);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-body-md);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--text);
}

.sv-bike__cta {
  width: 100%;
  min-height: 3rem;
  margin-top: auto;
  padding-top: 1.8125rem;
  border-color: var(--s3);
  color: var(--text);
}

.sv-bike__cta:hover {
  background: var(--s3);
  color: var(--p1);
}

/* --------------------------------------------------------------------------
   05 — Come for the Ride (Pavilion)                          y3476 – y4627
   -------------------------------------------------------------------------- */

.sv-pavilion {
  background: var(--s1);
  padding-block: 3.25rem 1.6875rem;
}

.sv-pavilion__title {
  margin-top: 1.75rem;
  text-align: center;
}

.sv-pavilion__body {
  max-width: 46.25rem;
  margin: 1.125rem auto 0;
  text-align: center;
}

.sv-pav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
  margin-top: 3.5rem;
}

.sv-pav {
  position: relative;
  aspect-ratio: 584 / 784;
  overflow: hidden;
  isolation: isolate;
}

.sv-pav__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 600ms var(--ease);
}

.sv-pav:hover .sv-pav__img {
  transform: scale(1.05);
}

.sv-pav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* Measured from the export: 58px side padding, 63px below the tags, with the
   numeral rule stopping level with the copy. */
.sv-pav__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 0 3.625rem 3.9375rem;
}

/* The numeral sits on a hairline that runs to the edge of the card. */
.sv-pav__num {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  /* The card numerals are set in the script face, not the body font. */
  font-family: var(--font-script);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--s1);
}

.sv-pav__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}

.sv-pav__name {
  margin-top: 2.375rem;
  color: var(--p2);
}

.sv-pav__copy {
  margin-top: 1rem;
  font-family: var(--font-label);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-body-md);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--s1);
}

.sv-pav__tags {
  margin-top: 1.1875rem;
  padding-top: 1.5625rem;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--s1);
}

/* --------------------------------------------------------------------------
   06 — Your Ride. Your Way.                                  y4628 – y6430
   -------------------------------------------------------------------------- */

.sv-options {
  padding-block: 4.5rem 3.625rem;
}

.sv-options__title {
  margin-top: 1.25rem;
}

.sv-options__lead {
  max-width: 45rem;
  margin-top: 1rem;
  font-family: var(--font-label);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-label-xs);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text);
}

/* Teal panel beside a photograph; the second block mirrors the first. */
.sv-option {
  display: grid;
  grid-template-columns: minmax(0, 580fr) minmax(0, 1220fr);
  min-height: 41.5rem;
  margin-top: 4.5rem;
}

.sv-option--reverse {
  grid-template-columns: minmax(0, 1220fr) minmax(0, 580fr);
  margin-top: 3.25rem;
}

.sv-option--reverse .sv-option__panel {
  order: 2;
}

.sv-option__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 3.125rem;
  background: var(--s2);
}

.sv-option__kicker {
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--s3);
}

.sv-option__name {
  margin-top: 1.25rem;
  color: var(--s3);
}

.sv-option__copy {
  max-width: 22.5rem;
  margin-top: 1.5rem;
  font-family: var(--font-label);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--s1);
}

.sv-option__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   07 — The Ride Might End                                    y6431 – y7650
   -------------------------------------------------------------------------- */

.sv-evening {
  background: var(--s1);
}

.sv-evening__inner {
  display: grid;
  grid-template-columns: minmax(0, 890fr) minmax(0, 860fr);
  gap: 3.5rem;
  align-items: center;
  padding-block: 3.5rem;
}

.sv-evening__title {
  margin-top: 1.75rem;
  max-width: 33rem;
}

.sv-evening__list {
  margin-top: 2.75rem;
}

.sv-evening__list li {
  position: relative;
  padding-left: 3.25rem;
}

.sv-evening__list li + li {
  margin-top: 2.75rem;
}

/* Oversized quote mark behind each entry. */
.sv-evening__list li::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.75rem;
  font-family: var(--font-body);
  font-size: 4rem;
  line-height: 1;
  color: var(--s3);
}

.sv-evening__name {
  font-family: var(--font-label);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-label-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--p2);
}

.sv-evening__copy {
  max-width: 35rem;
  margin-top: 0.625rem;
  font-weight: 300;
  font-size: var(--fs-body-md);
  line-height: 1.5;
  color: var(--text);
}

.sv-evening__media img {
  width: 100%;
  height: auto;
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.16);
}

/* --------------------------------------------------------------------------
   08 — One Place. A Whole Day of 30A.                        y7651 – y10423
   -------------------------------------------------------------------------- */

.sv-day {
  padding-block: 5rem 4rem;
}

.sv-day__title {
  margin-top: 1.5rem;
  text-align: center;
}

.sv-day__lead {
  max-width: 35rem;
  margin: 1.5rem auto 0;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
}

/* Column ratios are proportional, not fixed widths: a hard 892px media column
   collapses the copy beside it into a sliver between 1024px and ~1500px. */
/* Alternating rows with a hairline running down the centre of the section. */
.sv-timeline {
  position: relative;
  margin-top: 3.875rem;
}

.sv-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--s3);
}

.sv-step {
  display: grid;
  grid-template-columns: minmax(0, 892fr) minmax(0, 884fr);
  gap: 1.5rem;
  align-items: center;
}

.sv-step + .sv-step {
  margin-top: 6.875rem;
}

.sv-step--reverse {
  grid-template-columns: minmax(0, 884fr) minmax(0, 892fr);
}

.sv-step--reverse .sv-step__media {
  order: 2;
}

.sv-step--reverse .sv-step__body {
  text-align: right;
}

/* The export bakes a drop shadow under each photo; it is trimmed off the
   bitmaps and re-created here so it scales cleanly. */
.sv-step__media {
  aspect-ratio: 885 / 488;
  overflow: hidden;
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.16);
}

.sv-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.sv-step:hover .sv-step__media img {
  transform: scale(1.04);
}

.sv-step__body {
  padding-inline: 3.375rem;
}

.sv-step__time {
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text);
}

.sv-step__name {
  margin-top: 0.75rem;
}

.sv-step__copy {
  margin-top: 1rem;
  font-family: var(--font-label);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-body-md);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text);
}

.sv-step__tags {
  margin-top: 1.25rem;
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text);
}

.sv-day__outro {
  margin-top: 3.5rem;
  font-size: var(--fs-body-md);
  text-align: center;
  color: var(--s3);
}

/* --------------------------------------------------------------------------
   09 — So, What Are You Doing First?                        y10424 – y11317
   -------------------------------------------------------------------------- */

.sv-first {
  background: var(--s1);
  padding-block: 4rem 3.5rem;
}

.sv-first__title {
  margin-top: 1.625rem;
  text-align: center;
}

.sv-first__body {
  max-width: 41.25rem;
  margin: 1.25rem auto 0;
  text-align: center;
}

.sv-first__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
  margin-top: 3.875rem;
}

/* Measured from the export: kicker at y87, heading y146, copy y246, button
   y331–383, and 61px of air below it. */
.sv-choice {
  display: flex;
  flex-direction: column;
  min-height: 27.75rem; /* 444px */
  padding: 5rem 2.125rem 3.8125rem;
  background: var(--white);
}

.sv-choice__name {
  margin-top: 3.125rem;
}

.sv-choice__copy {
  margin-top: 2.75rem;
  font-family: var(--font-label);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-body-md);
  line-height: 1.56;
  letter-spacing: 0;
  color: var(--text);
}

.sv-choice__cta {
  width: 100%;
  min-height: 3.25rem; /* 52px */
  margin-top: auto;
  border-color: var(--s3);
  color: var(--text);
}

.sv-choice__cta:hover {
  background: var(--s3);
  color: var(--p1);
}

.sv-first__outro {
  margin-top: 3.375rem;
  font-size: var(--fs-body-md);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  .sv-pillars {
    gap: var(--sp-9);
  }

  .sv-bikes {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-7) var(--col-gap);
  }
}

@media (max-width: 1024px) {
  .sv-option,
  .sv-option--reverse,
  .sv-step,
  .sv-step--reverse,
  .sv-evening__inner {
    grid-template-columns: 1fr;
  }

  .sv-option__panel,
  .sv-step__media,
  .sv-evening__media {
    order: 0;
  }

  .sv-step__body {
    padding-inline: 0;
    margin-top: var(--sp-5);
  }

  .sv-step--reverse .sv-step__body {
    text-align: left;
  }

  /* The centre rule only makes sense while the rows alternate. */
  .sv-timeline::before {
    display: none;
  }

  .sv-pav-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .sv-pillars,
  .sv-bikes,
  .sv-pav-grid,
  .sv-first__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .sv-hero {
    height: auto;
    min-height: 32rem;
    padding-block: var(--sp-11);
  }

  .sv-banner__content {
    padding: var(--sp-7) var(--sp-6);
  }
}