:root {
  /* Brand colors extracted from your logo */
  --brand-navy: #0f4770;
  --brand-navy-2: #0a3656;
  --brand-navy-3: #08253d;
  --brand-deep: #071f34;
  --brand-gold: #d4af37;
  --brand-gold-2: #b9962f;
  --brand-silver: #e9eef3;

  --glass-bg: rgba(10, 43, 69, 0.45);
  --glass-border: rgba(255,255,255,0.18);
}

/* Page baseline */
body {
  background: linear-gradient(180deg, #071f34 0%, #0a2b45 40%, #0f4770 100%);
  color: #fff;
}

/* Navbar */
.aax-navbar {
  background: radial-gradient(150% 100% at 50% 0%, var(--brand-navy) 0%, var(--brand-navy-2) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.badge-gold { background: var(--brand-gold); color: #0b2741; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: clamp(3rem, 5vw + 1rem, 6rem) 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
  isolation: isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image: var(--hero-parallax, url('assets/herohero.webp'));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transform: scale(1.1);
  filter: blur(6px) brightness(.55);
}
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(100% 120% at 80% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
              linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
}

/* Extra hero pieces */
.hero-logo-wrap{display:flex; justify-content:center; align-items:center; margin-bottom:.75rem;}
.hero-logo{ height:200px; width:auto; max-width: 92vw; object-fit: contain; }
@media (max-width:576px){ .hero-logo{ height:120px; } }
.hero-title{ text-align:center; font-weight:900; letter-spacing:.3px; margin-bottom:.35rem; }
.hero-subcopy{ text-align:center; color:#e9ecef; max-width:60ch; margin:0 auto 1rem auto; }
.hero-cta .btn{ min-width:190px; }
.contact-mini{ color:#bcd; font-size:.95rem; text-align:center; margin-top:.75rem; }

/* Glass card */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Featured section background (simple, on-brand) ---------- */
#featured{
  position: relative; isolation: isolate;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--brand-deep) 0%, var(--brand-navy-3) 45%, var(--brand-navy-2) 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ---------- Cards ---------- */
.featured-grid > .col,
.featured-grid > [class*="col-"] { display:flex; }

.car-card{
  background: linear-gradient(180deg, #0f4770, #0a3656);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
}
.car-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.35); border-color:rgba(255,255,255,.25); }

.car-img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.car-img-wrap{ position:relative; flex:0 0 auto; }

.card-badges{ position:absolute; inset:0; pointer-events:none; }
.price-flag{
  position:absolute; top:10px; left:10px;
  background: linear-gradient(180deg, var(--brand-gold), var(--brand-gold-2));
  color:#13212b; font-weight:800;
  padding:.35rem .6rem; border-radius:.65rem;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.sale-flag{
  position:absolute; top:10px; right:10px;
  background: rgba(255,255,255,.14);
  color:#fff; font-weight:900; letter-spacing:.5px;
  padding:.35rem .6rem; border-radius:.65rem;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}

.car-body{ display:flex; flex-direction:column; flex:1; padding:1rem 1rem 1.1rem; align-items:center; text-align:center; }
.make-line{ display:flex; justify-content:center; align-items:center; gap:.5rem; margin:.25rem 0; }
.make-line img{
  height:28px; width:auto; object-fit:contain;
  filter: brightness(0) invert(1) saturate(0) contrast(110%);
  opacity:.95; display:block;
}
.make-line .make-name{ color:#fff; font-weight:700; letter-spacing:.2px; }
.car-title{ color:#fff; margin:.35rem 0 .5rem; }
.spec{ font-size:.9rem; color:rgba(255,255,255,.8); }

.car-short{
  color:#cfd8e3; font-size:.95rem; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:4;
  min-height: calc(1.35em * 4);
}
.car-actions{ margin-top:auto; display:flex; gap:.5rem; width:100%; }

/* Buttons */
.btn-gold {
  background: linear-gradient(180deg, var(--brand-gold), var(--brand-gold-2));
  color: #0a2b45; border: none; font-weight: 800;
}
.btn-outline-gold { border: 2px solid var(--brand-gold); color: #fff; font-weight: 700; }
.btn-outline-gold:hover { background: var(--brand-gold); color: #0a2b45; }

/* Section title */
.section-title { font-weight: 900; letter-spacing: .3px; text-shadow: 0 6px 24px rgba(0,0,0,.25); }

/* ---------- Static ticker (between hero + trust) ---------- */
.ticker-static{
  background: rgba(255,255,255,.05);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color:#e9f1f8;
  font-size:.95rem;
  padding:.35rem 0;
}
@media (max-width:576px){ .ticker-static{ font-size:.9rem; } }
.ticker-list{ display:flex; align-items:center; justify-content:center; gap:.6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t-sep{ color:#f7c948; opacity:.95; font-weight:800; }

/* ---------- Trust bar ---------- */
.trust {
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* ---------- Footer ---------- */
footer { background: #0a2b45; }
footer a { color: var(--brand-gold); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.map-wrap{
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  filter: saturate(.9) contrast(1.05) hue-rotate(-10deg);
}
.footer-heading{ color: var(--brand-silver); font-weight: 800; letter-spacing: .3px; }
.footer-meta{ color: rgba(255,255,255,.8); }

/* ---------- Fonz Modal (chat-only) ---------- */
.fonz-modal .modal-content {
  background: rgba(7, 31, 52, 0.9);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
}
.fonz-loader {
  min-height: 220px;
  display: grid; place-items: center; text-align: center; padding: 1.5rem;
}
.fonz-loader .spinner {
  width: 2.75rem; height: 2.75rem;
  border: .35rem solid rgba(255,255,255,.2);
  border-top-color: var(--brand-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto .75rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hint { color: rgba(255,255,255,.85); font-size: .95rem; }

/* Chat UI */
.chat-panel { border-radius: 14px; border: 1px solid rgba(255,255,255,.15); overflow: hidden; }
.chat-messages { max-height: 100%!important; overflow: auto; padding: 1rem; background: rgba(0,0,0,.25); }
.msg { display: flex; margin-bottom: .75rem; gap: .5rem; }
.msg .bubble { padding: .6rem .8rem; border-radius: 10px; max-width: 100%; line-height: 1.35; }
.msg.user .bubble { background: linear-gradient(180deg, var(--brand-gold), var(--brand-gold-2)); color: #0a2b45; margin-left: auto; }
.msg.fonz .bubble { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }

/* Structured lists & links in bubbles */
.bubble ol, .bubble ul { margin: .25rem 0 .25rem 1.25rem; }
.bubble li { margin: .15rem 0; }
.bubble a { color: #ffd77b; text-decoration: underline; }
.bubble a:hover { text-decoration: none; }

/* Typing indicator */
.msg.typing .bubble { display:inline-flex; align-items:center; gap:.4rem; }
.typing-dots { display:inline-flex; gap:.22rem; transform: translateY(2px); }
.typing-dots span { width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.8); display:inline-block; animation: blink 1.2s infinite; }
.typing-dots span:nth-child(2){ animation-delay:.15s; }
.typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes blink { 0%,80%,100%{opacity:.2;} 40%{opacity:1;} }

/* Inline photo gallery inside messages */
.fonz-gallery{ margin-top:.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; }
.fonz-gallery a{ display:block; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.2); }
.fonz-gallery img{ width:100%; height:80px; object-fit:cover; display:block; background:#0a2b45; }
@media (min-width:576px){ .fonz-gallery img{ height:90px; } }
@media (min-width:768px){ .fonz-gallery img{ height:100px; } }

/* Quick-reply chips */
.quick-replies{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.quick-replies .chip{ padding:.25rem .6rem; border-radius:999px; font-size:.85rem; border:1px solid rgba(255,255,255,.25); color:#fff; background:rgba(255,255,255,.06); cursor:pointer; }
.quick-replies .chip:hover{ background:rgba(255,255,255,.12); }

/* ---------- Sticky mobile CTA bar ---------- */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0;
  z-index:1040;
  display:flex; gap:4px;
  background:#0b2230;
  border-top:1px solid rgba(255,255,255,0.12);
  padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
  box-shadow:0 -6px 18px rgba(0,0,0,.35);
}
.mobile-cta .mcta-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background: rgba(255,255,255,0.06);
  color:#fff; border:1px solid rgba(255,255,255,0.18);
  border-radius:.6rem; padding:.55rem .6rem; text-decoration:none;
  font-weight:600;
}
.mobile-cta .mcta-btn:active{ transform: translateY(1px); }
@media (max-width:767.98px){
  body{ padding-bottom:70px; } /* keep content visible above sticky bar */
}
/* ---------- FEATURED ---------- */
    .featured-grid > .col,
    .featured-grid > [class*="col-"] { display:flex; }
    .car-card{
      background: #0b2230;
      border-radius:16px;
      box-shadow: 0 10px 24px rgba(0,0,0,.35);
      overflow:hidden;
      height:100%;
      display:flex;
      flex-direction:column;
    }
    .car-img-wrap{ position:relative; flex:0 0 auto; }
    .car-img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

    /* Overlays on image */
    .card-badges{ position:absolute; inset:0; pointer-events:none; }
    .price-flag{
      position:absolute; top:10px; left:10px;
      background:#f2c230; color:#13212b; font-weight:800;
      padding:.35rem .6rem; border-radius:.5rem;
      box-shadow:0 6px 14px rgba(0,0,0,.35);
    }
    .sale-flag{
      position:absolute; top:10px; right:10px;
      background:#ff4757; color:#fff; font-weight:900; letter-spacing:.5px;
      padding:.35rem .6rem; border-radius:.5rem;
      box-shadow:0 6px 14px rgba(0,0,0,.35);
    }

    .car-body{
      display:flex; flex-direction:column; flex:1;
      padding: 1rem 1rem 1.1rem 1rem;
      align-items:center;
      text-align:center;
    }

    /* centered make logo + brand text above title */
    .make-line{
      display:flex; justify-content:center; align-items:center; gap:.5rem;
      margin-top:.25rem; margin-bottom:.25rem;
    }
    .make-line img{
      height:28px; width:auto; object-fit:contain;
      filter: brightness(0) invert(1) saturate(0) contrast(110%);
      opacity:.95; display:block;
    }
    .make-line .make-name{ color:#fff; font-weight:700; letter-spacing:.2px; }

    .car-title{ color:#fff; margin: .35rem 0 .5rem 0; }
    .spec{ color:#cfe1f7; }

    /* consistent-length description */
    .car-short{
      color:#cfd8e3; font-size:.95rem; line-height:1.35;
      display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
      -webkit-line-clamp:4;
      min-height: calc(1.35em * 4);
    }

    .car-actions{ margin-top:auto; display:flex; gap:.5rem; width:100%; }

    /* =========================
       FONZ FULLSCREEN MODAL + CHAT
       ========================= */
    .fonz-modal .modal-dialog { margin:0; max-width:none; }
    .fonz-modal .modal-dialog.modal-fullscreen { width:100vw; }
    .fonz-modal .modal-content{
      min-height:100vh;
      border:0; border-radius:0;
      background: radial-gradient(1200px 600px at 50% -10%, #12314a 0%, #0b1e2b 60%, #081621 100%);
      color:#fff;
      display:flex; flex-direction:column;
    }
    .fonz-modal .modal-header{
      border:0; padding: .75rem 1rem;
      background: rgba(255,255,255,0.05);
      backdrop-filter: blur(4px);
    }
    .fonz-modal .modal-title{ font-weight:800; letter-spacing:.3px; }
    .fonz-modal .modal-body{ flex:1 1 auto; display:flex; padding:0; }
    .fonz-modal .modal-footer{ border:0; background: transparent; }

    /* Chat container fills the body */
    .chat-panel{
      display:flex; flex-direction:column;
      width:100%; height:100%;
    }

    /* Messages: full width rows */
    .chat-messages{
      flex:1 1 auto;
      min-height:0;
      overflow:auto;
      padding: 1rem 1rem 0 1rem;
      scroll-behavior:smooth;
      width:100%;
      max-height:100%;
    }
    .msg{ display:block; width:100%; margin:.5rem 0; }
    .msg .bubble{
      width:100%;
      padding: .9rem 1rem;
      border-radius: .75rem;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .msg.user .bubble{
      background: rgba(247,201,72,0.12);
      border-color: rgba(247,201,72,0.45);
      color:#ffe8a1;
      font-weight:600;
    }

    /* Input uses full width at the bottom */
    .chat-input{
      flex:0 0 auto;
      display:flex; gap:.5rem; align-items:center;
      background: rgba(255,255,255,0.06);
      border-top:1px solid rgba(255,255,255,0.1);
      padding:.6rem .8rem;
      width:100%;
    }
    .chat-input .form-control{
      background: transparent; color:#fff; border:0;
      box-shadow:none; outline: none;
      font-size:1rem;
    }
    .chat-input .form-control::placeholder{ color: rgba(255,255,255,0.6); }
    .chat-input .btn{
      border-radius:.6rem; padding:.55rem .9rem;
      display:inline-flex; align-items:center; gap:.4rem;
      white-space:nowrap;
    }

    /* Loader card */
    .fonz-loader{
      width:100%;
      text-align:center; padding: 3rem 1rem; color:#eaf2f9;
    }
    .fonz-loader .spinner{
      width:34px; height:34px; margin:0 auto .75rem auto;
      border:3px solid rgba(255,255,255,.3); border-top-color:#f7c948; border-radius:50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin{ to { transform: rotate(360deg); } }

    /* Chat cards */
    .fonz-card {
      background: #0e2433;
      border:1px solid rgba(255,255,255,0.08);
      border-radius: .75rem;
      overflow: hidden;
      margin: 0.75rem 0;
      width: 100%;
      color:#fff;
    }
    .fonz-card .card-body { padding: 1rem; background: rgba(255,255,255,0.03); }
    .fonz-card h5 { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.5rem; }

    /* Chat images: FULL WIDTH, centered, no forced cropping */
    .chat-messages img{ display:block; width:100%; height:auto; object-fit:contain; object-position:center; }

    /* Neutralize the old square crop classes so they don't crop anymore */
    .img-1x1{ width:100%; background:#0b2030; }
    .square-img{ width:100%; height:auto; object-fit:contain; object-position:center; display:block; }

    /* Tidy lists in bubbles */
    .bubble ol, .bubble ul { padding-left: 1.25rem; margin: 0.5rem 0; }
    .bubble li { margin-bottom: 0.25rem; }

    /* =========================
       NEW FOOTER (mobile-first)
       ========================= */
    .site-footer{
      background: #082133;
      color:#e8f1f8;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .site-footer .f-title{
      font-size:1.05rem;
      font-weight:800;
      letter-spacing:.3px;
      margin:0;
      padding:.25rem 0;
      display:flex; align-items:center; justify-content:space-between;
      cursor:pointer;
      color:#fff;
    }
    .site-footer .f-title .chev{
      transition: transform .2s ease;
      opacity:.85;
    }
    .site-footer .collapse:not(.show){ border-top:0; }
    .site-footer .f-links a{

      color:#d7e6f6; text-decoration:none;
      display:flex; align-items:center; gap:.5rem;
      padding:.25rem 0;
    }
    .site-footer .f-links a:hover{ color:#fff; text-decoration:underline; }
    .site-footer .footer-meta{ color:#cfd8e3; }
    .site-footer .newsletter input{
      background: rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.2);
      color:#fff;
    }
    .site-footer .newsletter input::placeholder{ color:rgba(255,255,255,.7); }
    .site-footer .social a{
      width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
      border:1px solid rgba(255,255,255,0.25);
      border-radius:50%;
      color:#fff; text-decoration:none;
    }
    .site-footer .social a:hover{
      background:#f2c230; color:#13212b; border-color:#f2c230;
    }
    .site-footer .map-wrap{ border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.35); }

    /* accordion behavior: open by default on md+ */
    @media (min-width: 768px){
      .site-footer .collapse.show-md{ display:block !important; height:auto !important; }
      .site-footer .f-title{ cursor:default; }
      .site-footer .f-title .chev{ display:none; }
    }

    /* Sticky mobile CTA bar */
    .mobile-cta{
      position:fixed; left:0; right:0; bottom:0;
      z-index:1040;
      display:flex; gap:4px;
      background:#0b2230;
      border-top:1px solid rgba(255,255,255,0.12);
      padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
      box-shadow:0 -6px 18px rgba(0,0,0,.35);
    }
    .mobile-cta .mcta-btn{
      flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
      background: rgba(255,255,255,0.06);
      color:#fff; border:1px solid rgba(255,255,255,0.18);
      border-radius:.6rem; padding:.55rem .6rem; text-decoration:none;
      font-weight:600;
    }
    .mobile-cta .mcta-btn:active{ transform: translateY(1px); }
    @media (max-width: 767.98px){
      body{ padding-bottom: 70px; } /* keep content visible above sticky bar */
    }

    /* ===== NARROW MARQUEE TICKER (between hero + trust) ===== */
    .ticker-bar{
      --speed: 36s;                 /* total loop time */
      background: rgba(255,255,255,.04);
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      overflow: hidden;
      color:#e9f1f8;
      font-size: .95rem;
    }
    @media (max-width: 576px){ .ticker-bar{ font-size: .9rem; } }

    .ticker-wrap{ position:relative; overflow:hidden; white-space:nowrap; }
    .ticker-inner{
      display:inline-block;
      will-change: transform;
      padding-left: 100%;                 /* start offscreen to the right */
      animation: aax-ticker var(--speed) linear infinite;
    }
    .ticker-bar:hover .ticker-inner{ animation-play-state: paused; }

    .t-msg{ display:inline-block; padding:.4rem 0; }
    .t-sep{ color:#f7c948; opacity:.95; padding:0 .75rem; font-weight:800; }

    @keyframes aax-ticker{
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); } /* we render two copies; -50% advances by one copy */
    }

    /* Motion accessibility */
    @media (prefers-reduced-motion: reduce){
      .ticker-inner{ animation:none; transform:none; padding-left:0; }
    }

    /* === Featured gradient background (no animation) === */
    #featured { position: relative; z-index: 0; isolation: isolate; }
    #featured::before{
      content:"";
      position:absolute; inset:0; z-index: 0;
      background: radial-gradient(1200px 600px at 50% -10%, #12314a 0%, #0b1e2b 60%, #081621 100%);
      opacity: 1;
    }
    #featured > .container{ position: relative; z-index: 1; } /* keep cards above */
/* ===== Disclaimer modal look (matches site theme) ===== */
.modal-disclaimer {
  background: rgba(7, 31, 52, 0.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal-disclaimer .modal-header,
.modal-disclaimer .modal-footer {
  border-color: rgba(255,255,255,.12);
}
.modal-disclaimer .btn-close {
  filter: invert(1);
}

/* Ensure .btn-gold looks right inside this modal as well */
.modal-disclaimer .btn.btn-gold {
  font-weight: 800;
  border: 0;
}