:root {
  --brand: #7aa5b8;
  --brand-dark: #1f4f67;
  --brand-ink: #4f6a7a;
  --muted: #9aa5ad;
  --soft: #f2f2f2;
}

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

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #4d5f6a;
  background: #ffffff;
}

/* Deliberately no min-height:100vh. The homepage stops at the closing band, and
   .page carries no background of its own, so stretching it to the viewport bought
   nothing but a gap -- it shoved the footer to the bottom of the screen and left
   several hundred px of white between it and the support pill on tall displays
   (~200px at 1080p, ~560px at 1440p). The footer now follows the content. */
.page {
  min-height: 0;
}

.page-banner {
  display: block;
  width: 100%;
  max-width: 920px;
  height: 76px;
  margin: auto;
  object-fit: cover;
}

.page-banner-top{
  margin-top: 32px;
}

/* Account nav row, between the banner photo and the hero logo. Same 920px column as
   .page-banner/.hero-inner so the space-between flex row's ends line up with the photo's
   edges instead of the viewport's. */
.acct-band {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 16px;
}
.acct-band .ro-acct-nav {
  margin: 12px 0 0;
}

/* --------------------------------------------------------------------------
   Closing band: a two-column plate. The sentence is split across the columns
   ("Saving Classic BMWs..." / "One part at a time.") and sits ABOVE the photos
   rather than on them, so no scrim is needed and both pictures run at full
   strength. Each photo is labelled with its chassis code, which is the site's
   own organising primitive -- the same thing you pick to enter the catalog --
   so the labels carry information rather than decorating the band.
   The 2px seam runs from the top rule down through the type and the photos,
   which is what holds the two columns together as one plate.
   -------------------------------------------------------------------------- */

/* Wider than the 920px content column on purpose, so the closing band reads as a
   plate rather than one more block in the stack. */
/* The 36px bottom padding on .info already separates the band from the copy
   above it, so the top margin only has to keep the rule off that padding --
   anything larger just leaves a gap the single photo can't fill. */
.footer-hero {
  width: 100%;
  max-width: 1100px;
  margin: 12px auto 32px;
  border-top: 1px solid #e4e9ec; /* the plate's top edge */
  padding-top: 16px;
}

.footer-hero-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px; /* hairline seam, so the two photos read as two photos */
}

/* v2 closes on the single m62 photo rather than the two-panel pair the grid was
   built for. Left in one track the lone column sits in the left half and reads
   as a missing second panel, so it spans both tracks and centres its image. */
.footer-hero-col {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}

/* Half a sentence each. The fall from --brand-dark to the softer ink is what
   makes the two columns read as one continuous line instead of two captions. */
.footer-hero-line {
  margin: 0 0 16px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--brand-dark);
}

.footer-hero-line-b {
  color: #6b757e;
}

.footer-hero-figure {
  margin: 0;
}

/* The panel carries the aspect-ratio so the grid still sizes itself once the
   columns stack on mobile. The image is pinned with inset:0 rather than
   height:100% -- a percentage height has nothing definite to resolve against
   here, and collapses the image to nothing. */
.footer-hero-panel {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #2b3238; /* shows through until the photo decodes */
}

/* Both sources are 4:3 and the panel is far wider than tall, so object-fit
   already crops top and bottom; the scale() on top is the extra zoom, and the
   object-position keeps the car body (not the sky) in the visible band. */
.footer-hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  transform: scale(1.14);
}

/* Set in the same uppercase micro-type as .hero-subtitle at the top of the page,
   so the page opens and closes in the same voice. */
.footer-hero-label {
  margin-top: 11px;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #7f8b93;
}

.footer-hero-chassis {
  color: var(--brand-ink);
  font-weight: 600;
}

.ad-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px auto 10px;
}

.ad-leaderboard {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 8px auto 0;
}

.splinks {
  width: 100%;
}

.gad-wide {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
}

.ad-rails {
  position: relative;
}

.right {
  position: fixed;
  right: 10px;
  top: 140px;
  width: 300px;
  z-index: 3;
}

.gad-right {
  width: 300px;
  height: 600px;
}

.gad-left {
  position: fixed;
  left: 10px;
  top: 140px;
  width: 160px;
  height: 600px;
  z-index: 3;
}

.hero {
  text-align: center;
  padding: 24px 16px 18px;
  background: #ffffff;
}

.hero-inner {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 10px;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-image {
  display: block;
  width: 300px;
  max-width: 70vw;
  height: auto;
}

/* Sits directly under the m62 photo as the closing band's last line. fit-content
   shrink-wraps the box to the address so the auto margins can centre it; it is a
   flow-level box now rather than an absolutely positioned one -- the old absolute
   rules had no positioned ancestor and resolved against the viewport instead. */
.support-pill {
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: #f3f5f7;
  border: 1px solid #e2e6ea;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #60717a;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.support-pill:hover {
  color: #2b5364;
  border-color: #d3d9de;
}

.hero-title {
  /* Top margin carries the gap the engine photo used to hold open under the logo. */
  margin: 22px 0 0;
  font-size: 28px;
  font-weight: 500;
  color: var(--brand-ink);
}

.hero-subtitle {
  margin: 8px 0 16px;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-chevron {
  width: 14px;
  height: 14px;
  margin: 0 auto;
  border-right: 1px solid #c5ced4;
  border-bottom: 1px solid #c5ced4;
  transform: rotate(45deg);
}

.info {
  background: var(--soft);
  padding: 28px 16px 36px;
  text-align: center;
  border-top: 1px solid #e8ecef;
}

.info-inner {
  max-width: 640px;
  margin: 0 auto;
}

.info-text {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b757e;
}

.cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  min-width: 240px;
  border-radius: 999px;
  background: var(--brand-dark);
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(31, 79, 103, 0.18);
}

.cta-button.cta-secondary {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  letter-spacing: 0.8px;
}

.cta-button:hover {
  background: #244f65;
}

.cta-button.cta-secondary:hover {
  background: transparent;
  color: #12384c;
}

.cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.cta-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.page-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px 12px 80px;
  font-size: 12px;
  color: #9aa2a9;
  margin-bottom: 80px;
}

.page-footer a,
.page-footer button {
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.legacy-hidden {
  position: absolute;
  left: -99999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .right,
  .gad-left {
    display: none;
  }
}

@media (max-width: 820px) {
  .page-banner {
    height: 60px;
  }

  .brand-row {
    flex-direction: column;
    gap: 18px;
  }

  .logo {
    order: 2;
  }
  .cta-button {
    width: auto;
    max-width: 320px;
    min-width: 200px;
  }

  .cta-button.cta-secondary {
    width: 100%;
    max-width: 360px;
    min-width: 0;
  }

  /* The panels stay 2/1 all the way down to the stack; only the type steps back,
     so the sentence never crowds the seam. */
  .footer-hero-line {
    font-size: 22px;
  }
}

@media (max-width: 640px) {
  .page-banner,
  .ad-top {
    display: none;
  }

  /* Side-by-side columns are too narrow to read here, so they stack. Each column
     keeps its own half of the sentence directly above its own photo, so stacked
     they still read top-to-bottom in the right order. */
  .footer-hero {
    margin: 10px auto 24px;
  }

  .footer-hero-panels {
    grid-template-columns: 1fr;
    gap: 26px; /* stacked, the 2px seam stops reading as a seam */
  }

  .footer-hero-panel {
    aspect-ratio: 3 / 2;
  }

  .footer-hero-line {
    margin-bottom: 12px;
    font-size: 21px;
  }
}

@media (max-width: 520px) {
  .logo-image {
    width: 260px;
  }

  .hero-title {
    font-size: 26px;
  }

  .hero-subtitle {
    font-size: 12px;
    letter-spacing: 1.1px;
  }

  .info-text {
    font-size: 14px;
  }

  .cta-stack {
    gap: 16px;
  }

  .cta-button {
    padding: 12px 28px;
    font-size: 12px;
  }

  .cta-button.cta-secondary {
    font-size: 11px;
    letter-spacing: 0.7px;
  }
}