:root {
    --ink: #101820;
    --surface-dark: #182630;
    --card-dark: #202f3a;
    --paper: #f4f0e8;
    --cream: #e7dfd1;
    --gold: #c5a66a;
    --line: rgba(16,24,32,.17);
    --muted: #687681
}
  * {
    box-sizing: border-box
}
  html {
    scroll-behavior: smooth
}
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Arial,Helvetica,sans-serif
}
  a {
    color: inherit;
    text-decoration: none
}
  img {
    display: block;
    max-width: 100%
}
  button,input {
    font: inherit
}
  svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6
}
  .site-header {
    height: 90px;
    position: absolute;
    z-index: 30;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 4.5vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,.22)
}
  .brand img {
    width: 116px;
    height: 58px;
    object-fit: contain;
    filter: brightness(1.35)
}
  .nav {
    display: flex;
    gap: 38px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em
}
  .nav a,.text-link,.line-link {
    position: relative
}
  .nav a:after,.text-link:after,.line-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width .35s
}
  .nav a:hover:after,.text-link:hover:after,.line-link:hover:after {
    width: 100%
}
  .header-book {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em
}
  .menu-toggle {
    display: none
}
  .hero {
    height: 100svh;
    min-height: 720px;
    position: relative;
    color: white;
    overflow: hidden;
    background: var(--ink)
}
  .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: heroZoom 14s ease-out both
}
  .hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(5,6,6,.9) 0%,rgba(5,6,6,.56) 42%,rgba(5,6,6,.2) 72%),linear-gradient(0deg,rgba(0,0,0,.6),transparent 48%)
}
  @keyframes heroZoom {
    from {
      transform: scale(1.08)
  }
    to {
      transform: scale(1)
  }
}
  .hero-content {
    position: absolute;
    left: 8vw;
    top: 50%;
    transform: translateY(-45%);
    width: min(84vw,1180px);
    max-width: 1180px
}
  .eyebrow {
    font-size: 11px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .28em;
    font-weight: 700
}
  .hero-kicker {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 24px;
    padding: 16px 22px 19px;
    color: #fff;
    background: rgba(8,9,9,.46);
    border: 1px solid rgba(255,255,255,.14);
    border-left: 4px solid var(--gold);
    box-shadow: 0 16px 44px rgba(0,0,0,.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: Georgia,"Times New Roman",serif;
    font-size: clamp(55px,7.2vw,112px);
    line-height: .88;
    letter-spacing: -.055em;
    text-transform: none;
    font-weight: 400;
    text-wrap: balance;
    white-space: nowrap
}
  .hero h1,.section h2,.cta h2 {
    font-family: Georgia,"Times New Roman",serif;
    font-size: clamp(55px,7.2vw,112px);
    line-height: .88;
    letter-spacing: -.055em;
    font-weight: 400;
    margin: 0
}
  .hero h1 em,.section h2 em,.cta h2 em {
    color: var(--gold);
    font-weight: 400
}
  .hero-copy {
    font-size: 16px;
    line-height: 1.8;
    max-width: 590px;
    color: rgba(255,255,255,.76);
    margin: 32px 0
}
  .hero-actions {
    display: flex;
    align-items: center;
    gap: 34px
}
  .button {
    height: 58px;
    padding: 0 27px;
    display: inline-flex;
    align-items: center;
    gap: 25px;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: 12px;
    font-weight: 700;
    transition: background .3s,color .3s,transform .3s
}
  .button:hover {
    transform: translateY(-3px)
}
  .button-gold {
    background: var(--gold);
    color: var(--ink)
}
  .button-gold:hover {
    background: #d4bd93
}
  .text-link {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em
}
  .hero-stats {
    position: absolute;
    right: 5vw;
    bottom: 49px;
    display: flex;
    gap: 48px
}
  .hero-stats div {
    display: flex;
    flex-direction: column
}
  .hero-stats strong {
    font-family: Georgia,serif;
    font-size: 29px;
    font-weight: 400
}
  .hero-stats span {
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-top: 6px
}
  .scroll-cue {
    position: absolute;
    left: 4.5vw;
    bottom: 46px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: rgba(255,255,255,.55);
    transform: rotate(-90deg);
    transform-origin: left center
}
  .scroll-cue i {
    width: 52px;
    height: 1px;
    background: rgba(255,255,255,.55)
}
  .section {
    padding: 120px 8vw
}
  .section-label {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .23em;
    color: var(--muted);
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 75px
}
  .section-label span {
    color: var(--gold)
}
  .intro-grid {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 8vw;
    margin-bottom: 90px
}
  .intro h2,.fleet h2,.services h2,.process h2 {
    font-size: clamp(48px,6vw,88px)
}
  .intro-grid .lead {
    font-family: Georgia,serif;
    font-size: 27px;
    line-height: 1.35;
    margin: 4px 0 25px
}
  .intro-grid p:not(.lead) {
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
    max-width: 570px
}
  .line-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 25px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    font-weight: 700
}
  .intro-media {
    height: 600px;
    position: relative;
    overflow: hidden;
    background: #ccc
}
  .intro-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s
}
  .intro-media:hover img {
    transform: scale(1.035)
}
  .media-caption {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--ink);
    color: white;
    padding: 25px 34px;
    min-width: 300px
}
  .media-caption span,.media-caption strong {
    display: block
}
  .media-caption span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--gold);
    margin-bottom: 8px
}
  .media-caption strong {
    font-family: Georgia,serif;
    font-size: 20px;
    font-weight: 400
}
  .fleet,.process {
    background: var(--surface-dark);
    color: white
}
  .fleet .section-label,.process .section-label {
    color: #8c8e8d;
    border-color: rgba(255,255,255,.15)
}
  .fleet-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 60px
}
  .fleet-heading .eyebrow,.services-title .eyebrow {
    color: var(--gold);
    margin-bottom: 22px
}
  .search {
    border-bottom: 1px solid rgba(255,255,255,.3);
    width: 260px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 0
}
  .search input {
    border: 0;
    outline: 0;
    background: transparent;
    color: white;
    width: 100%;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em
}
  .car-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: rgba(255,255,255,.16)
}
  .car-card {
    background: var(--surface-dark);
    overflow: hidden
}
  .car-image {
    height: 310px;
    position: relative;
    background: var(--card-dark);
    overflow: hidden
}
  .car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s,filter .7s
}
  .car-card:hover .car-image img {
    transform: scale(1.045);
    filter: brightness(1.08)
}
  .car-no {
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: 2;
    font: 14px Georgia;
    color: rgba(255,255,255,.6)
}
  .car-body {
    padding: 28px 25px 32px
}
  .car-body h3 {
    font: 400 25px Georgia;
    margin: 0 0 21px
}
  .car-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 17px;
    color: #949897;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em
}
  .car-specs span:not(:last-child):after {
    content: "·";
    margin-left: 17px;
    color: var(--gold)
}
  .car-body a {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.13);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--gold)
}
  .load-more {
    display: flex;
    margin: 55px auto 0;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.35);
    background: none;
    color: white;
    gap: 55px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    cursor: pointer
}
  .load-more span {
    color: var(--gold)
}
  .services-grid {
    display: grid;
    grid-template-columns: .8fr 1fr;
    gap: 8vw
}
  .service-item {
    display: grid;
    grid-template-columns: 50px 1fr 24px;
    gap: 20px;
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
    align-items: start
}
  .service-item:first-child {
    border-top: 1px solid var(--line)
}
  .service-item>span {
    font: 14px Georgia;
    color: var(--gold)
}
  .service-item h3 {
    font: 400 25px Georgia;
    margin: 0 0 9px
}
  .service-item p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
    max-width: 470px
}
  .service-item svg {
    margin-top: 5px;
    transition: transform .3s
}
  .service-item:hover svg {
    transform: translateX(5px)
}
  .process-head {
    display: grid;
    grid-template-columns: 1fr .7fr;
    align-items: end;
    gap: 10vw;
    margin-bottom: 70px
}
  .process-head p {
    color: #a3a5a4;
    font-size: 14px;
    line-height: 1.8;
    max-width: 500px
}
  .process-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid rgba(255,255,255,.16);
    border-bottom: 1px solid rgba(255,255,255,.16)
}
  .process-card {
    padding: 42px 45px 45px;
    border-right: 1px solid rgba(255,255,255,.16)
}
  .process-card:last-child {
    border: 0
}
  .process-card>span {
    font: 17px Georgia;
    color: var(--gold)
}
  .process-card h3 {
    font: 400 25px Georgia;
    margin: 70px 0 15px
}
  .process-card p {
    font-size: 12px;
    line-height: 1.8;
    color: #929594
}
  .cta {
    height: 720px;
    position: relative;
    color: white;
    overflow: hidden
}
  .cta>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
  .cta-shade {
    position: absolute;
    inset: 0;
    background: rgba(6,7,7,.67)
}
  .cta-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}
  .cta .eyebrow {
    color: var(--cream);
    margin-bottom: 25px
}
  .cta h2 {
    font-size: clamp(55px,7vw,100px);
    margin-bottom: 40px
}
  footer {
    background: var(--ink);
    color: white;
    padding: 80px 8vw 30px
}
  .footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    padding-bottom: 70px;
    border-bottom: 1px solid rgba(255,255,255,.14)
}
  .footer-top img {
    width: 155px
}
  .footer-top p {
    font-size: 13px;
    line-height: 1.8;
    color: #909392;
    max-width: 400px;
    margin: 0
}
  .footer-top a {
    justify-self: end;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    display: flex;
    gap: 18px
}
  .footer-bottom {
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #6e7270
}
  .floating-wa {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 40;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #25d366;
    color: white;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
    transition: transform .3s
}
  .floating-wa:hover {
    transform: translateY(-4px) scale(1.04)
}
  .reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)
}
  .reveal.is-visible {
    opacity: 1;
    transform: none
}
  @media(prefers-reduced-motion:reduce) {
    * {
      scroll-behavior: auto!important;
      animation: none!important;
      transition: none!important
  }
    .reveal {
      opacity: 1;
      transform: none
  }
}
  @media(max-width:900px) {
    .hero-kicker {
      margin-bottom: 18px;
      padding: 12px 15px 14px;
      border-left-width: 3px;
      font-size: clamp(48px,13.5vw,72px);
      line-height: .9;
      letter-spacing: -.05em;
      white-space: normal
  }
    .site-header {
      height: 76px;
      padding: 0 22px;
      grid-template-columns: 1fr auto
  }
    .brand img {
      width: 94px
  }
    .nav {
      position: absolute;
      top: 76px;
      left: 0;
      right: 0;
      padding: 28px 24px;
      background: var(--ink);
      flex-direction: column;
      gap: 25px;
      transform: translateY(-130%);
      opacity: 0;
      transition: .4s;
      z-index: -1
  }
    .nav.is-open {
      transform: none;
      opacity: 1
  }
    .header-book {
      display: none
  }
    .menu-toggle {
      display: flex;
      border: 0;
      background: transparent;
      width: 34px;
      height: 34px;
      flex-direction: column;
      justify-content: center;
      gap: 7px
  }
    .menu-toggle span {
      height: 1px;
      width: 25px;
      background: white
  }
    .hero {
      min-height: 900px
  }
    .hero-content {
      left: 24px;
      right: 24px;
      top: 46%;
      width: auto;
      max-width: none;
      transform: translateY(-43%)
  }
    .hero h1 {
      font-size: clamp(48px,13.5vw,72px)
  }
    .hero-copy {
      font-size: 14px
  }
    .hero-actions {
      align-items: flex-start;
      flex-direction: column;
      gap: 25px
  }
    .hero-stats {
      left: 24px;
      right: 24px;
      bottom: 28px;
      gap: 0;
      justify-content: space-between
  }
    .hero-stats strong {
      font-size: 23px
  }
    .scroll-cue {
      display: none
  }
    .section {
      padding: 85px 24px
  }
    .section-label {
      margin-bottom: 50px
  }
    .intro-grid,.services-grid,.process-head {
      grid-template-columns: 1fr;
      gap: 45px
  }
    .intro-media {
      height: 420px
  }
    .media-caption {
      min-width: 0;
      left: 20px;
      right: 20px;
      padding: 20px 23px
  }
    .fleet-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 40px
  }
    .search {
      width: 100%
  }
    .car-grid {
      grid-template-columns: 1fr
  }
    .car-image {
      height: 300px
  }
    .services-title {
      margin-bottom: 15px
  }
    .process-grid {
      grid-template-columns: 1fr
  }
    .process-card {
      border-right: 0;
      border-bottom: 1px solid rgba(255,255,255,.16);
      padding: 35px 20px
  }
    .process-card h3 {
      margin-top: 40px
  }
    .cta {
      height: 620px
  }
    .footer-top {
      grid-template-columns: 1fr;
      gap: 35px
  }
    .footer-top a {
      justify-self: start
  }
    .footer-bottom {
      gap: 18px;
      flex-direction: column
  }
    .intro h2,.fleet h2,.services h2,.process h2 {
      font-size: clamp(43px,12vw,62px)
  }
}
  .footer-top>img {
    display: block;
    width: 155px!important;
    height: auto!important;
    max-height: 100px;
    object-fit: contain;
    object-position: left center;
    aspect-ratio: auto
}
  .contact-line {
    display: inline-block;
    margin-top: 10px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em
}
  .book-link {
    width: 100%;
    margin-top: 26px;
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.13);
    background: none;
    color: var(--gold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    cursor: pointer
}
  .car-extra {
    display: none
}
  .car-extra.is-shown {
    display: block
}
  .car-card.is-filter-hidden {
    display: none!important
}
  .empty-state {
    text-align: center;
    color: #9da09f;
    padding: 50px 0
}
  .service-item>b {
    font-weight: 400;
    color: var(--gold)
}
  .site-header.is-scrolled {
    position: fixed;
    background: rgba(8,9,9,.93);
    backdrop-filter: blur(14px);
    animation: headerIn .35s ease
}
  @keyframes headerIn {
    from {
      transform: translateY(-100%)
  }
    to {
      transform: none
  }
}
  .menu-toggle span {
    transition: transform .3s
}
  .menu-toggle.is-open span:first-child {
    transform: translateY(4px) rotate(45deg)
}
  .menu-toggle.is-open span:last-child {
    transform: translateY(-4px) rotate(-45deg)
}