:root{
  --brand:#4a6cf7;
  --brand-600:#3559e5;
  --ring:rgba(10,99,255,.25);
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --shadow: 0 10px 30px rgba(2, 8, 23, .08), 0 2px 10px rgba(2, 8, 23, .06);

  --logo-h:120px;
  --hero-tint:205 28% 22%;
}


/* =============== */

*{ box-sizing:border-box }
html, body{ height:100% }
html{ font-size:75% }
 body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  color:var(--text);
  background: none;
}
}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(
    180deg,
    hsl(var(--hero-tint)/0.32) 0%,
    hsl(var(--hero-tint)/0.18) 25%,
    hsl(var(--hero-tint)/0.10) 55%,
    hsl(var(--hero-tint)/0.06) 80%,
    hsl(var(--hero-tint)/0.03) 100%
  );
}

body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:url('assets/images/noise-8pct.png');
  opacity:.06; mix-blend-mode:multiply;
}
.fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('/assets/images/back.webp') center/cover no-repeat;
  z-index: -2;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* =============== */

.container{
  width:100%;
  max-width:1400px;
  margin-inline:auto;
  padding-inline:clamp(16px,3.2vw,56px);
}

/* =============== */

:root{ --gutter:56px }
@media (max-width:640px){ :root{ --gutter:16px } }

.container.container{
  width:100%;
  max-width:none !important;
  margin-inline:auto;
  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
}
#fleet .container.container{
  max-width:none !important;
  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
}

[class*="container"][style*="max-width"],
.container[style*="max-width"]{ max-width:none !important }


/* =============== */

.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, hsl(var(--hero-tint)/.18) 0%, hsla(0,0%,100%,.78) 100%);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(2,8,23,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding-block:1.35rem;
  flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none; flex-shrink:0 }
.brand-logo{ height:clamp(56px, 6.5vw, var(--logo-h)); width:auto; object-fit:contain }
.brand-name{ font-weight:700; letter-spacing:.2px }

.nav-links{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:0; background:transparent; border:0;
}
.nav-links a{
  font-family:"Manrope", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  font-weight:800;
  font-size:clamp(1.35rem, 1vw + 1.15rem, 2rem);
  letter-spacing:.18px; line-height:1.05;
  color:var(--text); text-decoration:none;

  padding:clamp(.75rem, .45vw + .65rem, 1.1rem)
          clamp(1.15rem, .7vw + 1rem, 1.7rem);
  border-radius:999px;
  background:hsla(0,0%,100%,.60);
  backdrop-filter:saturate(160%) blur(8px);
  -webkit-backdrop-filter:saturate(160%) blur(8px);
  border:1px solid rgba(2,8,23,.10);
  box-shadow:0 6px 14px rgba(2,8,23,.08);
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.nav-links a:hover{ background:hsla(0,0%,100%,.72); transform:translateY(-1px) }
.nav-links a:focus-visible{ outline:none; box-shadow:0 0 0 .35rem var(--ring) }

@media (max-width:820px){
  .nav{ flex-direction:column; align-items:flex-start; padding-block:1.1rem }
  .nav-links a{ font-size:clamp(1.2rem, 1.6vw + 1rem, 1.55rem); padding:.65rem 1.15rem }
}
@media (min-width:821px){ .nav{ flex-wrap:nowrap } }

@media (max-width: 768px) {
  :root {
    --logo-h: 80px;
  }
  .nav {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .menu {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-left: auto;
  }
  .menu li {
    margin: 0;
  }
}
/* =============== */

.btn{ appearance:none; border:none; border-radius:.75rem; padding:.8rem 1.2rem; cursor:pointer; font-weight:700; font-size:1.1rem }
.btn-primary{ background:linear-gradient(135deg,var(--brand),var(--brand-600)); color:#fff; box-shadow:0 .5rem 1.375rem rgba(10,99,255,.25) }
.btn-primary:hover{ transform:translateY(-1px) }
.btn-outline{ background:#fff; border:1px solid rgba(2,8,23,.08) }

/* =============== */

.hero{ position:relative; isolation:isolate }
.hero-copy{ max-width:90ch }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; filter:saturate(1.1) contrast(1.05) }
.hero-grid{
  display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:start;
gap:clamp(28px,4.5vw,64px);
  padding-block:clamp(50px,10vw,120px);
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr } }
.hero h1{ font-size:clamp(3rem,5.5vw,4.8rem); line-height:1.05; margin:0 0 .75rem }
.sub{ color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.35); font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.55; max-width:60ch; margin:.5rem 0 1rem; }
.hero-badges{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.5rem }
.badge{ background:hsla(0,0%,100%,.96); border:1px solid rgba(2,8,23,.12); padding:.85rem 1.25rem; border-radius:999px; font-weight:700; color:#0b1220; font-size:clamp(1.2rem,1vw+1.1rem,1.5rem); box-shadow:0 6px 16px rgba(2,8,23,.18) }
.form-card{ align-self:start }

/* =============== */

.section{ padding:1.75rem 0 4rem }
.section h2{ font-size:clamp(1.8rem,3.2vw,2.2rem); margin:0 0 .625rem; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.8) }
.lead{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5) }
.card{ background:linear-gradient(180deg,#fff 0%,#f8fbff 100%); border:1px solid rgba(2,8,23,.08); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow) }

/* =============== */

.form-card{ padding:2rem }
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
.form-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
@media (max-width:700px){ .form-grid, .form-grid-3{ grid-template-columns:1fr } }
.field{ display:flex; flex-direction:column; gap:.5rem }
label{ font-size:1.1rem; color:#334155 }
input, select{
  font:inherit; color:var(--text); background:#fff;
  border:1px solid rgba(2,8,23,.12); border-radius:.75rem; padding:.75rem 1rem;
  outline:none; box-shadow:inset 0 -1px 0 rgba(2,8,23,.03); font-size:1rem
}
input:focus, select:focus{ border-color:var(--brand); box-shadow:0 0 0 .375rem var(--ring) }
.inline-hint{ font-size:.86rem; color:#475569; margin-top:.375rem }
.actions{ display:flex; gap:.625rem; align-items:center; margin-top:.5rem }


/* =============== */

.fleet{ position:relative; overflow:hidden; background:transparent; border:none; box-shadow:none; backface-visibility:hidden; transform:translateZ(0); border-radius:1rem }
.fleet-inner{ display:flex; flex-direction:row; gap:1rem; animation:slide 40s linear infinite; transition:transform .45s ease-out; will-change:transform; backface-visibility:hidden; transform:translateZ(0); background:transparent }
.fleet-inner:hover{ animation-play-state:paused }
@keyframes slide{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.85); border:1px solid rgba(2,8,23,.12); color:var(--text); font-size:1.5rem; padding:.625rem 1.25rem; cursor:pointer; z-index:10; border-radius:50%; transition:background .3s }
.slider-arrow:hover{ background:var(--brand); color:#fff }
.left{ left:.625rem } .right{ right:.625rem }
.fleet::before,.fleet::after{ content:''; position:absolute; top:0; bottom:0; width:12rem; z-index:5; pointer-events:none }
.fleet::before{ left:0; background:linear-gradient(to right,rgba(255,255,255,.6) 0%,transparent 100%) }
.fleet::after { right:0; background:linear-gradient(to left, rgba(255,255,255,.6) 0%, transparent 100%) }
.car{ flex:0 0 calc((100% - 2rem)/3); min-width:280px; background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(248,251,255,.5) 100%); border:1px solid rgba(2,8,23,.08); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow) }
@media (max-width:1100px){ .car{ flex:0 0 calc((100% - 1rem)/2) } }
@media (max-width:700px){ .car{ flex:0 0 100% } }
.car .car-body{ padding:1.25rem 1.375rem 1rem }
.car h3{ margin:.375rem 0 .375rem; font-size:1.6rem }
.meta{ font-size:1.3rem; color:#0f172a }
.tags{ margin:.35rem 0 .5rem; display:flex; gap:.375rem; flex-wrap:wrap }
.tag{ display:inline-flex; gap:.375rem; align-items:center; padding:.28rem .55rem; border-radius:999px; border:1px solid rgba(2,8,23,.12); color:#0f172a; font-size:1.2rem; background:#f8fafc }
.car-img-wrap{ display:flex; justify-content:center; align-items:center; overflow:visible; padding:1.25rem }
.car-img{ width:auto; max-width:100%; object-fit:contain }
.sienna-img,.grand-highlander-img,.camry-img,.carnival-img,.traverse-img,.odyssey-img{ height:12.5rem }
@media (max-width:980px){
  .fleet-inner{ animation:none; overflow-x:auto; flex-wrap:nowrap; padding-bottom:.625rem; }
  .fleet{ overflow-x:scroll; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior: contain; }
  .slider-arrow{ display:none }
  .car{ flex:0 0 75%; min-width:240px; }
}

/* =============== */

.contact-card{ background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(248,251,255,.9) 100%); border-radius:1rem; box-shadow:var(--shadow); padding:1.875rem; margin-bottom:2.5rem }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr } }
.contact-info h2{ font-size:2.2rem; margin-bottom:.9375rem; font-weight:700 }
.contact-item{ margin-bottom:.9375rem; color:#0f172a; font-size:1.4rem }
.contact-item strong{ display:block; color:#0f172a; font-size:1.6rem }
.contact-map iframe{ width:100%; height:15.625rem; border:0; border-radius:.75rem }

/* =============== */

.footer{

  background: linear-gradient(
    180deg,
    hsla(0,0%,100%,.92) 0%,
    hsla(0,0%,100%,.88) 100%
  );
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid rgba(2,8,23,.08);
  box-shadow:
    0 -8px 25px rgba(2,8,23,.06) inset,
    0 -1px 0 rgba(255,255,255,.22) inset;
  padding: 1rem 0;
  color: var(--muted);
}

.footer .container{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.25rem;
}

.footer-column{ flex:1; min-width:9.375rem; }

.footer-column h3{
  font-size:1.4rem; color:#0f172a; margin-bottom:.9375rem;
}

.footer-column ul{ list-style:none; padding:0; }
.footer-column li{ margin-bottom:.625rem; font-size:1.1rem; }

.footer-column a{
  color:#0f172a; text-decoration:none;
}
.footer-column a:hover{ color:var(--brand); }

.social-links{ display:flex; gap:.9375rem; }
.social-icon{ color:#0f172a; font-size:1.7rem; }
.social-icon:hover{ color:var(--brand); }

.copyright{
  text-align:right; margin-top:1.5rem; font-size:1.1rem;
  border-top:1px solid rgba(2,8,23,.08); padding-top:.75rem; color:#0f172a;
}


/* =============== */


#about{ margin-top:2.2rem; }


.about-header{
  text-align:center;
  margin-bottom:1.4rem;
}
.about-header h2{
  color:#ffffff;
  text-shadow:0 2px 4px rgba(0,0,0,.8);
}
.about-header .lead,
.about-header .about-sub{
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  max-width:60ch;
  margin:0 auto;
}


.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem, 2.5vw, 2.5rem);
}


.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(248,251,255,.9) 100%);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border:1px solid rgba(2,8,23,.08);
  border-radius:1rem;
  box-shadow:var(--shadow);
  padding:clamp(12px, 1.6vw, 18px) clamp(22px, 6vw, 64px) 32px;
  overflow:hidden;

  max-width:1400px;
  margin-inline:auto;
}


.about-card{
  font-size:1.45rem;
  line-height:1.65;
  color:var(--text);

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(20px, 2.5vw, 40px);
  align-items:start;
}

.about-card h3{
  font-size:1.7rem; margin:0 0 .6rem; color:var(--text);
}
.about-card p{ margin:.6rem 0; }


#about .about-card h3:first-of-type,
#about .about-card p{
  grid-column:1;
}

#about .about-card h3:nth-of-type(2){
  grid-column:2; grid-row:1; align-self:start;
}
#about .about-card ul{
  grid-column:2; grid-row:2;
  margin:.25rem 0 0; list-style:none; padding:0;
}

#about .about-card li{
  position:relative;
  margin:.35rem 0;
  padding-left:1.3rem;
}
#about .about-card li::before{
  content:"•";
  position:absolute; left:0; top:0;
  font-weight:900; color:#334155;
}
#about .about-card strong{ color:var(--brand); }

#about .about-card .about-list,
#about .about-list.two-col{ column-count:1; }

@media (max-width:1099px){
  .about-card{ grid-template-columns:1fr; }
  .about-card > *{ grid-column:1 !important; grid-row:auto !important; }
}



/* =============== */

.hero h1{ max-width:56ch }
.sub{ max-width:70ch }
.form-card{ width:min(700px,100%) }/* unify spec icon color */


@media (max-width: 768px) {
  .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* Pack left to fit tightly */
    flex-wrap: nowrap; /* No wrapping */
    padding: 0.75rem 0.5rem; /* Keeps header taller as you like */
    overflow: hidden; /* Hide overflow */
  }
  .brand {
    flex-shrink: 0; /* Don't shrink logo too much */
    margin-right: 0.3rem; /* Tight space to buttons */
  }
  .brand-logo {
    max-height: 50px; /* Matches your preference for visibility */
    width: auto;
  }
  .brand-name {
    font-size: 1rem; /* Adjust if name is shown */
  }
  .nav-links {
    display: flex;
    flex-direction: row;
    gap: 0.1rem; /* Very tight gap */
    margin-left: auto; /* Push to right */
    flex-shrink: 1; /* Allow shrinking */
    background: transparent; /* Ensure no background issues */
  }
  .nav-links li {
    margin: 0;
    flex: 1 1 auto; /* Buttons shrink to fit */
    min-width: 0; /* Allow full shrink */
  }
  .nav-links a {
    padding: 0.5rem 0.8rem; /* Larger padding for bigger buttons */
    font-size: 1rem; /* Larger text for better readability */
    white-space: nowrap;
    min-width: fit-content; /* As small as possible */
    border-radius: 999px; /* Keep pill shape */
  }
}