:root{
  --bg:#000; --panel:#0b0b0b; --panel-2:#111; --line:#222;
  --fg:#fff; --muted:#bfbfbf; --muted-2:#8e8e8e; --gold:#897106;
  --radius:14px; --radius-sm:10px;
  --shadow:0 18px 60px rgba(0,0,0,.45); --shadow-soft:0 10px 30px rgba(0,0,0,.35);
}

.site-header .logo a img {
  transform: scale(1.75);
  transform-origin: center;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:'Rajdhani',sans-serif}

/* Layout */
.contact-wrap{padding:48px 20px;display:flex;justify-content:center}
.lux-panel{
  width:min(1120px,100%);
  background:
    linear-gradient(135deg, rgba(137,113,6,.06), rgba(137,113,6,0) 30%),
    radial-gradient(60rem 60rem at -10% -20%, rgba(255,255,255,.05), transparent 40%),
    var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.lux-panel::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.07), transparent 18%);
  pointer-events:none;
}

/* Head */
.panel-head{padding:8px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.panel-head h1{text-transform:uppercase;letter-spacing:.6px;font-size:2.1rem}
.panel-head p{color:var(--muted);margin-top:.25rem}

/* Form layout */
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:940px){.contact-form{grid-template-columns:1fr}}
.form-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-col .full{grid-column:1 / -1}

/* Floating fields */
.field{position:relative}
.field input,.field textarea{
  width:100%;padding:16px 14px 14px;border-radius:var(--radius-sm);
  background:var(--panel-2);border:1px solid #2b2b2b;color:var(--fg);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .06s ease;
}
.field textarea{min-height:136px;resize:vertical}
.field label{
  position:absolute;left:12px;top:12px;color:var(--muted-2);pointer-events:none;
  transition:transform .15s ease, color .15s ease, top .15s ease, font-size .15s ease;
  background:transparent;padding:0 4px;
}
.field input:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(137,113,6,.28)}
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field input:focus + label, .field textarea:focus + label{
  top:-9px; font-size:.82rem; color:var(--gold);
  background:linear-gradient(180deg, transparent 35%, var(--panel) 36%);
}

/* Notes / errors */
.field-note{display:block;margin-top:6px;color:#ff4d4f;min-height:1em}
.is-invalid{border-color:#b00020 !important; box-shadow:none !important}

/* Buttons */
.btn{
  display:inline-block; padding:.95rem 2.2rem; border-radius:12px; text-transform:uppercase; font-weight:800;
  letter-spacing:.5px; border:1px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.btn-primary{background:#fff;color:#000}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--gold);border-color:var(--gold);transform:translateY(-1px) scale(1.02);box-shadow:var(--shadow)}
.btn-secondary{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn-secondary:hover,.btn-secondary:focus-visible{background:var(--gold);color:#000;transform:translateY(-2px);box-shadow:var(--shadow-soft)}

/* Assurances */
.assurances{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.assurances li{list-style:none;color:var(--muted);font-weight:600;padding:.5rem .8rem;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.02)}
.assurances.centered{justify-content:center}
.assurances.centered li{text-align:center}

/* Searchable select (custom) */
.search-select{position:relative}
.ss-control{
  width:100%; display:flex; align-items:center; gap:8px; padding:12px 14px; border:1px solid #2b2b2b; border-radius:var(--radius-sm);
  background:var(--panel-2); color:var(--fg); cursor:text; transition:border-color .18s ease, box-shadow .18s ease;
}
.ss-control:focus-within{border-color:var(--gold); box-shadow:0 0 0 2px rgba(137,113,6,.28)}
.ss-input{flex:1; min-width:40px; background:transparent; border:0; outline:none; color:var(--fg); font:inherit}
.ss-placeholder{color:var(--muted-2)}
.ss-caret{opacity:.7}

.ss-menu{
  position:absolute; left:0; right:0; margin-top:6px; max-height:280px; overflow:auto; z-index:50;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00)), var(--panel-2);
  border:1px solid #2b2b2b; border-radius:12px; box-shadow:var(--shadow-soft); display:none;
}
.ss-menu.open{display:block}
.ss-group{padding:8px 10px}
.ss-group h5{font-size:.82rem; color:var(--muted-2); padding:6px 6px 4px}
.ss-option{padding:10px 12px; border-radius:8px; cursor:pointer; transition:background .12s ease}
.ss-option:hover,.ss-option[aria-selected="true"]{background:rgba(137,113,6,.16)}
.ss-empty{padding:14px; color:var(--muted-2); text-align:center}

/* Disabled / invalid states for custom select */
.is-disabled .ss-control{opacity:.6; filter:grayscale(.1)}
.ss-control.is-invalid{border-color:#b00020 !important; box-shadow:none !important}

/* Upload block */
.upload-block{margin-top:6px}
.upload-label{display:block;margin-bottom:.45rem;font-weight:600;color:var(--muted)}
.dropzone{
  background:var(--panel-2);
  border:1px dashed #3a3a3a;
  border-radius:var(--radius-sm);
  padding:18px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.dropzone:focus,
.dropzone.dragover{
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(137,113,6,.28);
  background:#0f0f0f;
}
.dz-instructions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;color:var(--muted);margin-bottom:10px}
.dz-trigger{padding:.35rem .8rem;font-size:.9rem}
.dz-preview{
  display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:10px;
}
@media (max-width:780px){.dz-preview{grid-template-columns:repeat(2,1fr)}}
.thumb{
  position:relative;background:#0d0d0d;border:1px solid #2b2b2b;border-radius:10px;overflow:hidden;aspect-ratio:1/1;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .remove{
  position:absolute;top:6px;right:6px;border:none;border-radius:8px;padding:.2rem .45rem;
  background:rgba(0,0,0,.7);color:#fff;font-weight:700;cursor:pointer;
}
.dz-note{display:block;margin-top:8px;color:var(--muted-2);font-size:.9rem}

/* CTA / Modal */
.dealer-cta{background:var(--panel-2);padding:4rem 2rem;text-align:center;border-top:1px solid var(--line)}
.dealer-content{max-width:800px;margin:0 auto}
.dealer-content h2{font-size:2rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:1rem}
.dealer-content p{color:var(--muted);margin-bottom:2rem}

.zip-modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:999}
.zip-modal.hidden{display:none}
.zip-modal-content{background:var(--panel-2);padding:2rem;border-radius:14px;box-shadow:var(--shadow);border:1px solid #2a2a2a;text-align:center}
.zip-modal-content input{margin-top:.5rem;width:82%;padding:.8rem 1rem;background:#0f0f0f;border:1px solid #333;border-radius:10px;color:var(--fg)}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .btn,.field input,.field textarea,.ss-option,.ss-control{transition:none}
}

/* ===== HEADER ===== */
.site-header{width:100%;background:#000;color:#fff;padding:1.25rem 2rem;position:sticky;top:0;z-index:1000;border-bottom:1px solid rgba(255,255,255,.1)}
.nav-container{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{flex:0 0 auto;text-align:center}
.logo img{height:42px;display:block}
.nav-left,.nav-right{display:flex;gap:2rem;flex:1}
.nav-left{justify-content:flex-start;padding-left:2rem}
.nav-right{justify-content:flex-end;padding-right:2rem}
.nav-left a,.nav-right a{color:#fff;text-decoration:none;font-weight:600;letter-spacing:.5px;transition:color .3s ease}
.nav-left a:hover,.nav-right a:hover{color:#897106}

/* ===== FOOTER ===== */
.site-footer{width:100%;padding:1.5rem 2rem;background:#111;color:#aaa;display:flex;justify-content:center;align-items:center}
.footer-container{max-width:1200px;width:100%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.85rem}
.footer-left{flex:1;color:#777}
.footer-center{flex:1;display:flex;justify-content:center;gap:1.5rem}
.footer-center a{color:#fff;text-decoration:none;border-bottom:1px solid transparent;transition:border .3s ease, opacity .3s ease;font-weight:600}
.footer-center a:hover{border-bottom:1px solid #fff;opacity:.7}
.footer-right{flex:1;text-align:right;color:#999;font-style:italic}

.field textarea {
  background: var(--panel-2) !important;
  border: 1px solid #2b2b2b;
  color: var(--fg);
}

/* Hide honeypot field (anti‑bot) */
.hp{
  display: none !important;
  /* if you prefer visually-hidden instead of display:none:
  position:absolute !important;
  left:-9999px !important;
  width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important;
  */
}

.form-submit {
  display: flex;
  justify-content: center;
  margin-top: 1rem; /* spacing from message box */
}

/* Reduce gap between message box and button */
.contact-form textarea {
  margin-bottom: 0.2rem; /* smaller gap */
}

/* Increase gap between button and footer */
.form-submit {
  margin-bottom: 2rem; /* larger gap before footer */
}

.form-submit .btn-primary {
  padding: 0.65rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  background-color: transparent; /* Transparent by default */
  color: var(--gold);
  border: 2px solid var(--gold);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.form-submit .btn-primary:hover {
  background-color: var(--gold);
  color: #000;
}

/* Reduce gap between message box and button */
.contact-form textarea { margin-bottom: 0.2rem; }  /* adjust smaller/bigger as needed */

/* Increase gap between button and footer */
.form-submit { 
  display: flex; 
  justify-content: center; 
  margin-top: 0.5rem;   /* smaller gap from textarea */
  margin-bottom: 2.5rem; /* larger gap before footer */
}

/* Dropzone trigger button */
.dz-trigger {
  font-size: 0.85rem;
  font-weight: 400;      /* unbold */
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
}

.contact-form input[type="file"] {
  font-size: 0.85rem;
  font-weight: 600;      /* bold */
  padding: 0.3rem 0.5rem;
  max-width: 200px;
}

/* Dropzone trigger button */
.dz-trigger {
  font-size: 0.85rem;
  font-weight: 600;      /* bold */
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
}

.btn {
  text-decoration: none; /* remove underline */
}

.gold-text {
  color: var(--gold);
  font-weight: 700;
}

a.no-underline {
  text-decoration: none;
}

a.no-underline:hover {
  text-decoration: none; /* still no underline on hover */
}

/* ===== Mobile fixes: single-column + no cutoff ===== */
@media (max-width: 820px) {
  /* 1) Header logo scaling was causing horizontal overflow on phones */
  .site-header .logo a img {
    transform: none;          /* cancel the 1.75x scale on mobile */
    height: 40px;             /* tweak as you like */
  }

  /* 2) Panel + layout spacing tuned for small screens */
  .contact-wrap { padding: 28px 14px; }
  .lux-panel {
    padding: 20px;
    border-radius: 12px;
    overflow: visible;        /* let dropdown menus render outside the panel */
  }

  /* 3) Full single-column stack */
  .contact-form { 
    display: grid;
    grid-template-columns: 1fr; 
    gap: 16px;
  }
  .form-col {
    display: grid;
    grid-template-columns: 1fr;   /* stack fields inside each column */
    gap: 14px;
  }
  .form-col .full { grid-column: 1 / -1; } /* harmless but keeps intent */

  /* 4) Comfortable controls */
  .field input, .field textarea { padding: 14px 12px; }
  .field textarea { min-height: 120px; }

  /* 5) Searchable selects: comfy tap targets + safe menu height */
  .ss-control { padding: 12px; }
  .ss-menu { max-height: 50vh; }

  /* 6) Upload grid: 2-up thumbs on mobile */
  .dz-preview { grid-template-columns: repeat(2, 1fr); }

  /* 7) Buttons centered with extra breathing room */
  .form-submit { 
    justify-content: center; 
    margin-top: .5rem; 
    margin-bottom: 2.5rem; 
  }
}

/* Safety net in case anything still nudges the page wider than viewport */
html, body { overflow-x: hidden; }

@media (max-width: 820px){
  .site-header .logo a img{
    transform: scale(1.65);
    transform-origin: left center;
    height: 42px;
  }
}