/* About Us page — Figma frame 1019:719 (1729px canvas, 1180px content column at x=274). */

/* Page background: white until canvas y=1826, then fades to baby blue through the footer. */
.about-page {
  background: linear-gradient(to bottom, #fff 0, #fff 1552.1px, var(--baby-blue) 100%);
}
.about-page .site-footer { background: transparent; }

/* ---------- Nav (translucent white bar over hero) ---------- */
.about-page .site-header--overlay .nav {
  background: rgba(255, 255, 255, 0.75);
  padding: 0 27.88px 0 27.88px;
}
.about-page .nav__logo img { width: 201.96px; height: 33.83px; }
.about-page .nav__links { gap: 22.01px; }
.about-page .nav__links a { font-size: 13.22px; line-height: 18.51px; padding: 0 4.67px 3.15px; }
.about-page .nav__cta {
  height: 36.3px;
  width: 187.34px;
  padding: 0 4.76px 0 0;
  border-radius: 8.5px;
  justify-content: flex-end;
  gap: 15.3px;
  font-size: 13.49px;
}
.about-page .nav__cta img { width: 35.1px; height: 26.86px; }

/* ---------- Shared type bits ---------- */
.ab-eyebrow {
  font-weight: 600;
  font-size: 16.72px;
  letter-spacing: 1.7px;
  color: #101828;
  text-transform: uppercase;
}
.ab-eyebrow--light { color: #fff; }
.ab-title {
  font-weight: 700;
  font-size: 30.48px;
  line-height: 1.2;
  color: var(--navy);
}
.ab-lead {
  font-weight: 500;
  font-size: 16.79px;
  color: rgba(16, 24, 40, 0.65);
}

/* ---------- Hero ---------- */
.ab-hero {
  position: relative;
  height: 661.3px;
  overflow: hidden;
  background: #1c2a6a;
}
.ab-hero__art {
  position: absolute;
  top: 0;
  left: calc(50% - 734.82px);
  width: 1469.65px;
  height: 661.3px;
}
.ab-hero__photo {
  position: absolute;
  left: 513.4px;
  top: -24.65px;
  width: 981.75px;
  height: 685.95px;
}
.ab-hero__shape {
  position: absolute;
  left: 0;
  top: 0;
  width: 992.8px;
  height: 661.3px;
}
.ab-hero__content {
  position: relative;
  padding-top: 192.95px;
}
.ab-hero__title {
  margin-top: 12.75px;
  max-width: 521.05px;
  font-weight: 700;
  font-size: 39.42px;
  line-height: 1.2;
  color: #fff;
}
.ab-hero__title span { color: var(--yellow); }
.ab-hero__text {
  margin-top: 22.95px;
  max-width: 418.2px;
  font-weight: 500;
  font-size: 18.98px;
  color: #fff;
}
.ab-hero__mobile-photo { display: none; }

/* ---------- White sheet (rounded top over hero) ---------- */
.ab-sheet {
  position: relative;
  z-index: 1;
  margin-top: -97.75px;
  border-radius: 42.5px 42.5px 0 0;
  /* solid white until canvas y=1826 (988.55px into the sheet); body gradient takes over below */
  background: linear-gradient(to bottom, #fff 0, #fff 988.55px, transparent 988.55px);
}

/* ---------- About Hilton Garage ---------- */
.ab-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 34px;
  padding-top: 80.75px;
}
.ab-intro__copy { padding-top: 7.65px; max-width: 442px; }
.ab-intro__copy .ab-title { margin-top: 12.75px; }
.ab-intro__copy .ab-lead { margin-top: 22.95px; max-width: 396.1px; }
.ab-intro__media {
  position: relative;
  width: 460.7px;
  flex: none;
  padding-bottom: 26.35px; /* badge overhang */
}
.ab-intro__photo {
  width: 100%;
  aspect-ratio: 542 / 300;
  border-radius: 8.5px;
}
.ab-badge {
  position: absolute;
  left: -62.05px;
  top: 194.65px;
  width: 254.66px;
  height: 86.87px;
  display: flex;
  align-items: flex-start;
  gap: 15.3px;
  padding-left: 19.55px;
  border-radius: 8.5px;
  background: var(--yellow);
  box-shadow: var(--shadow);
}
.ab-badge::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 76.92px;
  border-radius: 8.5px 8.5px 0 0;
  background: #fff;
}
.ab-badge__icon {
  position: relative;
  flex: none;
  width: 58.65px;
  height: 66.3px;
  display: grid;
  place-items: center;
  padding-top: 1.7px;
  border-radius: 0 0 8.5px 8.5px;
  background: var(--yellow);
}
.ab-badge__icon img { width: 39.86px; height: 39.78px; }
.ab-badge__text {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 12.75px;
}
.ab-badge__text strong { font-weight: 700; font-size: 25.55px; line-height: 1.2; color: var(--navy); }
.ab-badge__text small { margin-top: 1px; padding-left: 2.55px; font-weight: 500; font-size: 13px; color: rgba(16, 24, 40, 0.65); }

/* ---------- Legacy + timeline ---------- */
.ab-legacy {
  display: flex;
  justify-content: space-between;
  gap: 51px;
  padding-top: 80.75px;
}
.ab-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.7px;
  width: 445.4px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 57.8px;
}
/* yellow connector (Figma Line 54: 8px, #FCCD0B @ 50%) */
.ab-timeline::before {
  content: '';
  position: absolute;
  left: 38.67px;
  top: 42.5px;
  bottom: 15.3px;
  width: 6.8px;
  background: rgba(252, 205, 11, 0.5);
}
.ab-tl {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 33.15px;
}
.ab-tl__dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 80.75px;
  height: 80.75px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f8fbff; /* #DDECFC @ 20% over white */
  box-shadow: 0 4.59px 4.59px rgba(0, 0, 0, 0.25);
}
.ab-tl__dot img { object-fit: contain; }
.ab-tl__card {
  width: 329.54px;
  min-height: 228.31px;
  padding: 22.1px 28.47px 22.1px;
  border-radius: 11.47px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 1.7px 4.59px 21.25px 4.25px rgba(0, 0, 0, 0.1);
}
.ab-tl__year { font-weight: 700; font-size: 17.99px; line-height: 1.2; color: var(--yellow); }
.ab-tl__title { font-weight: 600; font-size: 21.9px; color: var(--navy); }
.ab-tl__text {
  margin-top: 8.5px;
  font-weight: 500;
  font-size: 15.8px;
  color: rgba(16, 24, 40, 0.65);
}
.ab-tl__text b { font-weight: 700; }
@media (min-width: 935.85px) { .ab-tl:nth-child(2) .ab-tl__text { margin-right: -11.9px; } } /* Figma text box is 332px here vs 318px */
.ab-tl__end {
  position: absolute;
  z-index: 1;
  left: 30.6px;
  bottom: -1px;
  width: 28.56px;
  height: 28.56px;
  border-radius: 50%;
  background: var(--yellow);
  color: #fff;
  font-weight: 900;
  font-size: 16.5px;
  line-height: 25.2px;
  text-align: center;
}

.ab-legacy__copy {
  flex: 0 1 470.05px;
  min-width: 0;
  padding-top: 174.25px;
  margin-left: auto;
}
.ab-legacy__copy .ab-title { margin-top: 12.75px; white-space: nowrap; }
.ab-legacy__text { margin-top: 22.95px; max-width: 470.05px; }
.ab-legacy__text p + p { margin-top: 29.32px; }
.ab-cars {
  position: relative;
  width: 503.2px;
  aspect-ratio: 592 / 398;
  margin: 51.85px 0 0 -12.75px;
}
.ab-cars > * { position: absolute; }
.ab-cars__black        { left: 33.5%;  top: 0;      width: 66.48%; height: 49.96%; }
.ab-cars__black-shadow { left: 34.83%; top: 33.48%; width: 64.57%; height: 17.14%; object-fit: cover; }
.ab-cars__blue-shadow  { left: 0;      top: 82.95%; width: 89.53%; height: 17.17%; object-fit: cover; }
.ab-cars__blue         { left: 0;      top: 33.68%; width: 90.3%;  height: 66.44%; }

/* ---------- Why choose ---------- */
.ab-why { padding-top: 111.35px; }
.ab-why__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ab-why__title {
  margin-top: 12.75px;
  font-weight: 700;
  font-size: 38.18px;
  line-height: 1.05;
  color: var(--navy);
}
.ab-why__sub {
  margin-top: 22.95px;
  max-width: 481.95px;
  font-size: 16.79px;
  color: rgba(0, 19, 51, 0.65);
}
.ab-features {
  margin-top: 45.9px;
  display: grid;
  grid-template-columns: 489.09px 231.79px 231.79px;
  grid-template-rows: 231.2px 231.2px;
  gap: 25.5px;
  justify-content: space-between;
}
.ab-feat {
  position: relative;
  overflow: hidden;
  padding: 42.5px 33.15px 25.5px;
  border-radius: 17px;
  background: rgba(221, 236, 252, 0.2);
  box-shadow: 0 3.4px 11.9px rgba(0, 0, 0, 0.25);
}
.ab-feat__title {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 21.9px;
  line-height: 1.1;
  color: var(--navy);
  max-width: 211.65px;
}
.ab-feat__text {
  position: relative;
  z-index: 1;
  margin-top: 15.3px;
  font-size: 15.8px;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.75);
}
.ab-feat--big {
  grid-row: span 2;
  box-shadow: 0 2.55px 11.9px rgba(0, 0, 0, 0.25);
}
.ab-feat--big .ab-feat__title { max-width: 280.5px; }
.ab-feat--big .ab-feat__text { max-width: 371.45px; margin-top: 18.7px; }
.ab-feat__guarantee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%; /* 332.9 / 574 */
  border-radius: 0 0 17px 17px;
}
.ab-feat--wide { grid-column: span 2; padding-top: 31.45px; }
.ab-feat--wide .ab-feat__text { max-width: 191.25px; margin-top: 15.3px; }
.ab-feat__truck {
  position: absolute;
  right: 0;
  top: 18.7px;
  width: 326.82px;
  height: 199.16px;
}
.ab-feat--small { padding-top: 31.45px; }
.ab-feat--small .ab-feat__text { max-width: 164.05px; margin-top: 15.3px; }

/* ---------- CTA banner (shared .cta-banner, this page's fleet image & button sizes) ---------- */
.ab-cta { padding: 93.5px 0 55.25px; }
.ab-cta .cta-banner { padding: 42.5px 42.5px 42.5px 60.35px; align-items: flex-start; }
.ab-cta .cta-banner__actions { width: 365.25px; gap: 6.8px; margin-top: 17.85px; }
.ab-cta .cta-banner__actions .btn {
  height: 43.5px;
  padding: 0 17px;
  gap: 19.55px;
  border-radius: 7.51px;
  font-weight: 600;
  font-size: 17.45px;
}
.ab-cta .cta-banner__actions .btn img { height: 19.04px; }
.ab-cta__fleet.cta-banner__car {
  width: 494.7px;
  height: 109.2px;
  margin-top: 124.1px;
}
.ab-cta__fleet .cta-banner__car-shadow {
  left: 2.76px;
  top: 71.14px;
  width: 491.94px;
  height: 50.61px;
  opacity: 0.85;
}
.ab-cta__fleet .crop { height: 103.32px; }

/* ---------- Responsive ---------- */
@media (max-width: 1224px) {
  .about-page .site-header--overlay .nav { gap: 20.4px; }
}

@media (max-width: 1054px) {
  .ab-intro__media { width: 46%; }
  .ab-badge { left: -34px; top: auto; bottom: 0; }
  .ab-legacy__copy { padding-top: 102px; }
  .ab-legacy__copy .ab-title { white-space: normal; }
  .ab-cars { width: calc(100% + 12.75px); }
  .ab-features { grid-template-columns: 1.05fr 0.5fr 0.5fr; justify-content: stretch; }
  .ab-feat__truck { width: 62%; height: auto; aspect-ratio: 384.5 / 234.3; }
  .ab-cta .cta-banner { flex-direction: column; align-items: flex-start; }
  .ab-cta__fleet.cta-banner__car { margin-top: 0; align-self: center; width: min(494.7px, 100%); height: auto; aspect-ratio: 582 / 156; }
  .ab-cta__fleet .cta-banner__car-shadow { top: 53.7%; width: 99.4%; height: 46.3%; left: 0.56%; }
  .ab-cta__fleet .crop { height: 94.6%; }
}

@media (max-width: 935px) {
  /* hero: stack navy copy above the team photo */
  .ab-hero {
    height: auto;
    background: linear-gradient(119deg, #061230 0%, var(--navy) 72%);
  }
  .ab-hero__art { display: none; }
  .ab-hero__content { padding-top: 144.5px; padding-bottom: 40.8px; }
  .ab-hero__title { font-size: 32.12px; }
  .ab-hero__text { font-size: 16.17px; }
  .ab-hero__mobile-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1155 / 700;
  }
  .ab-sheet { margin-top: -42.5px; border-radius: 27.2px 27.2px 0 0; background: #fff; }
  .about-page { background: linear-gradient(to bottom, #fff 0, #fff 40%, var(--baby-blue) 100%); }
  .ab-sheet { background: linear-gradient(to bottom, #fff 0, #fff 40%, transparent 40%); }

  .ab-intro { flex-direction: column; padding-top: 54.4px; }
  .ab-intro__copy { max-width: none; }
  .ab-intro__media { width: 100%; max-width: 527px; padding-bottom: 42.5px; }
  .ab-badge { left: 13.6px; }

  .ab-legacy { flex-direction: column; gap: 47.6px; padding-top: 40.8px; }
  .ab-legacy__copy { order: -1; padding-top: 0; margin-left: 0; max-width: none; }
  .ab-timeline { width: 100%; }
  .ab-tl__card { flex: 1; width: auto; min-height: 0; }
  .ab-cars { margin: 34px auto 0; width: min(503.2px, 100%); }

  .ab-why { padding-top: 81.6px; }
  .ab-why__title { font-size: 29.2px; }
  .ab-features { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .ab-feat--big { grid-row: auto; grid-column: span 2; min-height: 442px; }
  .ab-feat--wide { grid-column: span 2; min-height: 231.2px; }
  .ab-feat--small { min-height: 204px; }
  .ab-cta { padding: 68px 0 81.6px; }
}

@media (max-width: 640px) {
  .ab-eyebrow { font-size: 14.4px; }
  .ab-title { font-size: 27px; }
  .ab-lead { font-size: 16.2px; }
  .ab-hero__content { padding-top: 135px; }
  .ab-hero__title { font-size: 30.6px; }
  .ab-hero__text { font-size: 16.2px; margin-top: 16.2px; }
  .about-page .nav__logo img { width: 171px; height: auto; }
  .about-page .site-header--overlay .nav { padding: 0 14.4px; width: calc(100% - 28.8px); }
  .about-page .site-header--overlay { padding-top: 21.6px; }
  .ab-hero__content { padding-top: 126px; }

  .ab-badge { left: 10.8px; width: 225px; height: 81px; gap: 10.8px; padding-left: 12.6px; }
  .ab-badge::before { height: 72px; }
  .ab-badge__icon { width: 50.4px; height: 61.2px; }
  .ab-badge__icon img { width: 34.2px; height: 34.2px; }
  .ab-badge__text { padding-top: 10.8px; }
  .ab-badge__text strong { font-size: 25.2px; }
  .ab-badge__text small { font-size: 12px; }

  .ab-timeline { gap: 28.8px; }
  .ab-timeline::before { left: 26.55px; top: 36px; }
  .ab-tl { gap: 12.6px; }
  .ab-tl__dot { width: 54px; height: 54px; }
  .ab-tl__dot img { width: 34.2px !important; height: 30.6px !important; }
  .ab-tl__card { padding: 18px; }
  .ab-tl__year { font-size: 18px; }
  .ab-tl__title { font-size: 19.8px; }
  .ab-tl__text { font-size: 14.4px; }
  .ab-tl__end { left: 13.5px; bottom: -36px; }
  .ab-timeline { margin-bottom: 36px; }
  .ab-legacy__text p + p { margin-top: 18px; }
  .ab-cars { margin-left: 0; }

  .ab-why__title { font-size: 27px; }
  .ab-why__sub { font-size: 15.3px; }
  .ab-features { grid-template-columns: 1fr; gap: 18px; margin-top: 32.4px; }
  .ab-feat, .ab-feat--big, .ab-feat--wide { grid-column: auto; }
  .ab-feat { padding: 25.2px 21.6px; }
  .ab-feat__title { font-size: 21.6px; max-width: none; }
  .ab-feat__text { font-size: 14.4px; }
  .ab-feat--big { min-height: 396px; }
  .ab-feat--big .ab-feat__text br { display: none; }
  .ab-feat__guarantee { height: 50%; }
  .ab-feat--wide { min-height: 324px; }
  .ab-feat--wide .ab-feat__text { max-width: none; }
  .ab-feat__truck { top: auto; bottom: 0; width: 85%; }
  .ab-feat--small, .ab-feat--small .ab-feat__text { min-height: 0; max-width: none; }
  .ab-cta .cta-banner { padding: 28.8px 19.8px; }
  .ab-cta .cta-banner__actions { width: 100%; }
  .ab-cta .cta-banner__actions .btn { font-size: 16.2px; height: 50.4px; gap: 12.6px; }
}