/* TG Car Rentals — hand-coded. Palette from the logo file:
   purple #460989 (12.7:1 on white), orange #fd7e02 (accent only on light bg;
   4.9:1 on the purple, so orange text is allowed on purple sections). */

:root {
  --purple: #460989;
  --purple-deep: #350672;
  --orange: #fd7e02;
  --ink: #211a2b;
  --muted: #5c5566;
  --tint: #f6f3fc; /* the logo's own background, used to blend the JPEG mark */
  --cta: #e8722a; /* the "book" button orange, matched to the 1Now booking page */
  --cta-deep: #d5641f;
  --cta-ink: #241206; /* dark text on orange keeps AA contrast */
  --line: #e5e0ee;
  --max: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Public Sans", system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  font-size: 1.0625rem;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--purple); }

h1, h2, h3, .display {
  font-family: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 650; margin-bottom: 0.6em; }
h3 { font-size: 1.25rem; font-weight: 650; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.site-header {
  background: var(--tint);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; gap: 14px;
  min-height: 88px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 62px; height: 62px; border-radius: 50%; }
.brand span {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; font-size: 1.15rem; color: var(--purple);
  white-space: nowrap;
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.97rem; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-nav a.btn { color: #fff; }
.site-nav a.btn:hover { text-decoration: none; }
.nav-toggle { display: none; }

.btn {
  display: inline-block;
  background: var(--purple);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 8px;
  border: 0;
  font-size: 1rem;
}
.btn:hover { background: var(--purple-deep); }
/* Orange = the "book" action, everywhere it appears, matching the 1Now
   booking page's Book button. Purple stays the brand color for everything
   else (chrome, headers, browse actions). Dark text keeps AA on orange. */
.btn-book { padding: 10px 16px; font-size: 0.95rem; background: var(--cta); color: var(--cta-ink); }
.btn-book:hover { background: var(--cta-deep); }
.site-nav a.btn-book { color: var(--cta-ink); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex; align-items: flex-end;
  color: #fff;
  isolation: isolate;
}
.hero img.hero-photo {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,8,40,0.18) 0%, rgba(20,8,40,0.72) 82%);
}
.hero .wrap { padding-top: 96px; padding-bottom: 64px; max-width: var(--max); width: 100%; }
.hero h1 { color: #fff; max-width: 13ch; }
.hero p {
  max-width: 46ch; margin: 18px 0 28px;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: #f1ecfa;
}
.hero .hero-alt { margin-left: 18px; color: #fff; font-weight: 500; }

/* ---------- sections ---------- */
section { padding: 72px 0; }
section.tight { padding: 48px 0; }
.section-sub { color: var(--muted); max-width: 62ch; margin-bottom: 2.2em; }

/* fleet grid */
.fleet-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.fleet-card {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; background: #fff;
}
.fleet-card-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.fleet-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.fleet-card:hover .fleet-card-photo img { transform: scale(1.03); }
.fleet-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fleet-card-body h3 a { color: var(--ink); text-decoration: none; }
.fleet-card-body h3 a:hover { color: var(--purple); }
.fleet-card-specs { color: var(--muted); font-size: 0.94rem; }
.fleet-card-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: baseline; gap: 8px; }
.card-price { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.45rem; }
.card-per { color: var(--muted); font-size: 0.92rem; }
.fleet-card-foot .btn-book { margin-left: auto; }

/* alternating photo/text rows */
.row-split {
  display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: center;
}
.row-split.flip { grid-template-columns: 2fr 3fr; }
.row-split img { border-radius: 12px; width: 100%; object-fit: cover; }
.row-split p + p { margin-top: 1em; }

/* tinted band */
.band { background: var(--tint); }

/* FAQ */
.faq-list { max-width: 780px; }
.faq-list details {
  border-bottom: 1px solid var(--line); padding: 18px 0;
}
.faq-list summary {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 650; font-size: 1.1rem; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq-list summary::after { content: "+"; color: var(--orange); font-size: 1.4rem; line-height: 1; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin-top: 12px; color: var(--muted); max-width: 66ch; }

/* dark CTA band */
.cta-band { background: var(--purple); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #e9defc; max-width: 56ch; }
.cta-band .btn { background: var(--cta); color: var(--cta-ink); margin-top: 22px; }
.cta-band .btn:hover { background: var(--cta-deep); }
.cta-band a.quiet { color: #e9defc; }

/* ---------- footer ---------- */
.site-footer {
  background: #2a0b52; color: #cfc3e6; padding: 56px 0 40px; font-size: 0.95rem;
}
.site-footer .cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 36px;
}
.site-footer h4 {
  font-family: "Bricolage Grotesque", sans-serif; color: #fff;
  font-size: 1rem; margin-bottom: 12px;
}
.site-footer a { color: #e4daf5; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; }
.footer-brand {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.3rem; color: #fff; margin-bottom: 10px;
}
.footer-tagline { color: var(--orange); font-weight: 600; }
.footer-legal { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- car page ---------- */
.car-hero { padding: 40px 0 8px; }
.car-hero .crumbs { font-size: 0.92rem; color: var(--muted); margin-bottom: 18px; }
.car-hero .crumbs a { color: var(--muted); }
/* photo + details stack in the left column; book-box holds the right column
   (sticky). On mobile the order becomes photo -> book-box -> details so the
   price and Book button sit right under the photo, not below the spec list. */
.car-top {
  display: grid; grid-template-columns: 3fr 2fr; gap: 32px 44px; align-items: start;
  grid-template-areas: "photo book" "details book";
}
.car-top .lead-photo { grid-area: photo; }
.car-top .book-box { grid-area: book; }
.car-top .car-details { grid-area: details; }
.car-top .lead-photo img { border-radius: 12px; }
.book-box {
  border: 1px solid var(--line); border-radius: 12px; padding: 26px;
  position: sticky; top: 92px; background: #fff;
}
.book-box .price { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 2.1rem; }
.book-box .per { color: var(--muted); margin-left: 6px; }
.book-box .btn { width: 100%; text-align: center; margin: 18px 0 10px; padding: 14px; font-size: 1.05rem; }
.book-box .fine { font-size: 0.88rem; color: var(--muted); }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 24px; margin: 20px 0; }
.spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.spec dd { font-weight: 600; }
.feature-list { columns: 2; gap: 32px; list-style: none; }
.feature-list li { padding: 5px 0 5px 22px; position: relative; break-inside: avoid; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 10px; height: 3px; background: var(--orange); border-radius: 2px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.gallery img { border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .row-split, .row-split.flip { grid-template-columns: 1fr; gap: 28px; }
  .car-top { grid-template-columns: 1fr; gap: 24px; grid-template-areas: "photo" "book" "details"; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .book-box { position: static; }
}
@media (max-width: 760px) {
  .site-nav {
    display: none;
    position: absolute; top: 88px; left: 0; right: 0;
    background: var(--tint); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 20px 16px;
  }
  .site-nav a { padding: 12px 0; width: 100%; }
  .site-nav .btn { margin-top: 8px; width: auto; }
  .nav-open .site-nav { display: flex; }
  .nav-toggle {
    display: block; margin-left: auto; background: none; border: 0;
    font-size: 1.7rem; color: var(--purple); cursor: pointer; line-height: 1;
  }
  .site-header .wrap { position: relative; }
  .hero { min-height: 78vh; }
  .feature-list { columns: 1; }
  /* stack the hero CTA: full-width button, link on its own line below */
  .hero .btn { display: block; width: 100%; text-align: center; }
  .hero .hero-alt { display: inline-block; margin: 16px 0 0; }
  section { padding: 52px 0; }
  section.tight { padding: 40px 0; }
}
@media (max-width: 560px) {
  .site-footer .cols { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- for-sale spotlight ---------- */
.for-sale { background: #1a1222; color: #fff; }
.for-sale-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.fs-photo { position: relative; }
.fs-photo img { width: 100%; border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.fs-badge {
  position: absolute; top: 16px; left: 16px;
  background: var(--cta); color: var(--cta-ink);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 7px 13px; border-radius: 7px;
}
.fs-eyebrow { color: var(--orange); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; margin-bottom: 12px; }
.for-sale h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.fs-price { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 2.5rem; color: #fff; margin: 4px 0 16px; }
.fs-blurb { color: #d7cee6; max-width: 46ch; }
.fs-specs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 26px; }
.fs-specs li { border: 1px solid rgba(255,255,255,0.25); border-radius: 99px; padding: 6px 15px; font-size: 0.9rem; color: #e9e2f2; }
.fs-call { background: var(--cta); color: var(--cta-ink); padding: 14px 26px; }
.fs-call:hover { background: var(--cta-deep); }
@media (max-width: 760px) {
  .for-sale-inner { grid-template-columns: 1fr; gap: 26px; }
  .fs-call { display: block; text-align: center; }
}

/* sticky Book Now bar — mobile only */
.mobile-book-bar { display: none; }
@media (max-width: 760px) {
  .mobile-book-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(246, 243, 252, 0.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .mobile-book-bar a {
    display: block; text-align: center;
    background: var(--cta); color: var(--cta-ink);
    font-weight: 700; font-size: 1.05rem;
    padding: 14px; border-radius: 10px; text-decoration: none;
  }
  .mobile-book-bar a:active { background: var(--cta-deep); }
  /* keep the footer clear of the fixed bar */
  body { padding-bottom: 86px; }
}