/* Design system: BMW.com-style automotive showcase (see GARAGE DESIGN.md at
   the repo root). Two surfaces only — white and Carbon — connected by a single
   whisper-weight (300) 60px display heading. No accent colors, no gradients,
   no shadows, no rounded corners anywhere. Photography (once real photos
   replace the placeholders below) is the system's only source of color. */

:root {
  --color-carbon: #262626;
  --color-pure-white: #ffffff;
  --color-concrete: #bbbbbb;
  --color-fog: #f1f1f1;

  --bg: var(--color-pure-white);
  --text: var(--color-carbon);
  --text-muted: var(--color-concrete);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-body-sm: 16px;
  --leading-body-sm: 1.6;
  --text-body: 18px;
  --leading-body: 1.63;
  --text-display: 60px;
  --leading-display: 1.3;

  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-100: 100px;

  --page-max-width: 1200px;
  --section-gap: 56px;

  /* Radii are deliberately absent from this file — every element on this site
     uses the browser default (0). Do not add border-radius anywhere. */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  color: var(--text);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
}

.section {
  padding: var(--section-gap) 0;
}

/* --- Display heading: reserved for the single largest title on the page — 60px,
   weight 300. Never reused below 40px, never bolded. --- */
.display-heading {
  font-weight: 300;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  color: var(--text);
  text-align: center;
  letter-spacing: normal;
}

/* Secondary section titles use the workhorse family at 700 (the token's own
   documented role: "700 for inline emphasis and section labels") — the 300/60px
   treatment stays exclusive to the hero. */
.section-heading {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  color: var(--text);
  text-align: center;
}

.inline-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-body-sm);
  font-weight: 400;
  color: var(--text);
}
.inline-arrow-link:hover {
  text-decoration: underline;
}
.inline-arrow-link svg {
  width: 14px;
  height: 14px;
}

/* --- Buttons: solid Carbon fill or plain outline — the palette's own two
   surfaces are the entire "CTA color" vocabulary. Zero radius, zero shadow. --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: var(--text-body-sm);
  font-weight: 400;
  font-family: var(--font);
  border: 1px solid var(--color-carbon);
  cursor: pointer;
  background: none;
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-fill {
  background: var(--color-carbon);
  color: var(--color-pure-white);
}
.btn-fill:hover {
  background: #000000;
}
.btn-outline:hover {
  background: var(--color-fog);
}

/* --- Top navigation --- */
.navbar {
  background: var(--color-pure-white);
  padding: 14px 0;
}
.navbar-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
}
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.navbar-logo img {
  width: 32px;
  height: 32px;
}
.navbar-wordmark {
  font-size: var(--text-body-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.navbar-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: var(--text-body-sm);
  font-weight: 400;
}
.navbar-links a:hover {
  text-decoration: underline;
}
@media (max-width: 860px) {
  .navbar-links {
    display: none;
  }
}
@media (max-width: 540px) {
  .navbar-phone {
    display: none;
  }
}

/* --- Mobile drawer --- */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(38, 38, 38, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 40;
}
.menu-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(320px, 86vw);
  background: var(--color-pure-white);
  border-left: 1px solid var(--color-concrete);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 50;
  padding: var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}
.menu-drawer.is-open {
  transform: translateX(0);
}
.menu-drawer nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  font-size: var(--text-body);
}

/* --- Full-bleed photography ----------------------------------------------
   Locally generated (ComfyUI/DirectML, SD1.5 — see gen_site07.py) placeholder
   automotive photography: dramatic, moody, dark charcoal backgrounds, no
   text/logo baked in. Swap for real photos of the actual premises/vehicles
   when available — the sizing below is already correct either way. */
.photo-placeholder {
  width: 100%;
  background: var(--color-fog);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-concrete);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--spacing-16);
  overflow: hidden;
}
.photo-placeholder svg {
  opacity: 0.5;
}
.photo-placeholder img,
.photo-placeholder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo {
  height: 64vh;
  min-height: 420px;
}
.vehicle-photo {
  aspect-ratio: 4 / 3;
}

/* --- Flat list rows (services, pillars) — dividers, no card chrome -------- */
.flat-list {
  display: flex;
  flex-direction: column;
}
.flat-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--spacing-24);
  padding: var(--spacing-24) 0;
  border-top: 1px solid var(--color-concrete);
}
.flat-list .flat-row:last-child {
  border-bottom: 1px solid var(--color-concrete);
}
.flat-row-title {
  font-weight: 700;
  font-size: 18px;
}
.flat-row-text {
  font-size: var(--text-body-sm);
  color: var(--text);
}
@media (max-width: 640px) {
  .flat-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }
}

/* --- Vehicle showroom grid (photography + plain caption, no card chrome) - */
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-40) var(--spacing-24);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 860px) {
  .vehicle-grid {
    grid-template-columns: 1fr;
  }
}
.vehicle-caption {
  margin-top: var(--spacing-12);
  font-size: var(--text-body-sm);
}
.vehicle-caption .name {
  font-weight: 700;
}
.vehicle-caption .meta {
  color: var(--color-concrete);
  margin-top: 4px;
}
.vehicle-caption .price {
  margin-top: 4px;
  font-weight: 700;
}

.filter-row {
  display: flex;
  justify-content: center;
  gap: var(--spacing-20);
  margin-bottom: var(--spacing-40);
  font-size: var(--text-body-sm);
  flex-wrap: wrap;
}
.filter-row button {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--text-body-sm);
  color: var(--color-concrete);
  cursor: pointer;
  padding: 0;
}
.filter-row button.is-active {
  color: var(--text);
  text-decoration: underline;
}

/* --- Testimonials: flat quote blocks -------------------------------------- */
.testimonial-track {
  display: flex;
  gap: var(--spacing-40);
  overflow-x: auto;
  scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar {
  display: none;
}
.testimonial-card {
  flex-shrink: 0;
  width: 320px;
  border-top: 1px solid var(--color-concrete);
  padding-top: var(--spacing-20);
}
.testimonial-quote {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.testimonial-meta {
  margin-top: var(--spacing-16);
  font-size: 14px;
  color: var(--color-concrete);
}
.testimonial-nav {
  display: flex;
  justify-content: center;
  gap: var(--spacing-24);
  margin-top: var(--spacing-24);
}
.testimonial-nav button {
  background: none;
  border: 1px solid var(--color-carbon);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.testimonial-nav button:hover {
  background: var(--color-fog);
}

/* --- FAQ accordion: flat, hairline dividers ------------------------------- */
.faq-item {
  border-top: 1px solid var(--color-concrete);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--color-concrete);
}
.faq-trigger {
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-20) 0;
  text-align: left;
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: var(--text);
}
.faq-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-panel-inner {
  padding-bottom: var(--spacing-20);
  font-size: var(--text-body-sm);
  color: var(--text);
  max-width: 640px;
}

/* --- Forms: square inputs, underline-only focus state --------------------- */
.field {
  margin-bottom: var(--spacing-20);
}
.field label {
  display: block;
  font-size: 14px;
  color: var(--color-concrete);
  margin-bottom: 6px;
}
.field input,
.field textarea {
  width: 100%;
  background: var(--color-pure-white);
  border: 1px solid var(--color-concrete);
  padding: 12px 14px;
  font-size: var(--text-body-sm);
  font-family: var(--font);
  color: var(--text);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-carbon);
  border-width: 2px;
  padding: 11px 13px;
}
.field input.is-invalid,
.field textarea.is-invalid {
  border-color: var(--color-carbon);
  border-style: dashed;
}
.form-status {
  font-size: 14px;
  color: var(--color-concrete);
  min-height: 1.2em;
}

#map {
  filter: grayscale(1) contrast(1.05);
}

@media (max-width: 860px) {
  #contact-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Footer: the only strong-contrast surface on the page ------------------ */
.footer {
  background: var(--color-carbon);
  color: var(--color-pure-white);
  padding: var(--spacing-56) 0;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-40);
}
@media (max-width: 860px) {
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}
.footer-col h4 {
  font-weight: 400;
  font-size: var(--text-body-sm);
  color: var(--color-pure-white);
  margin-bottom: var(--spacing-16);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a,
.footer-col p {
  font-size: var(--text-body-sm);
  color: var(--color-pure-white);
}
.footer-col a:hover {
  text-decoration: underline;
}
.footer-bottom {
  margin-top: var(--spacing-56);
  padding-top: var(--spacing-24);
  border-top: 1px solid #474747;
  font-size: 14px;
  color: var(--color-concrete);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

/* =====================================================================
   Chatbot widget — same monochrome system, zero radius, no glow/gradient.
   ===================================================================== */
.chatbot-root {
  position: fixed;
  right: var(--spacing-24);
  bottom: var(--spacing-24);
  z-index: 60;
  font-family: var(--font);
}

.chatbot-toggle {
  width: 56px;
  height: 56px;
  border: none;
  cursor: pointer;
  background: var(--color-carbon);
  color: var(--color-pure-white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.chatbot-toggle:hover {
  background: #000000;
}
.chatbot-icon-chat {
  width: 24px;
  height: 24px;
}
.chatbot-toggle-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: var(--color-pure-white);
  color: var(--color-carbon);
  border: 1px solid var(--color-carbon);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-window {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: min(360px, 88vw);
  height: min(480px, 68vh);
  display: flex;
  flex-direction: column;
  background: var(--color-pure-white);
  border: 1px solid var(--color-carbon);
}
/* The unconditional `display: flex` above has equal specificity to the browser's
   default `[hidden] { display: none }` rule, and author styles always win that tie —
   so toggling the `hidden` attribute from JS (see chatbot.js's setOpen()) silently did
   nothing and the window never actually closed. This re-asserts display:none whenever
   the attribute is set. Same fix applies to .chatbot-typing, which is toggled the same
   way. */
.chatbot-window[hidden],
.chatbot-typing[hidden] {
  display: none;
}

.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--color-carbon);
  color: var(--color-pure-white);
}
.chatbot-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chatbot-avatar {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-pure-white);
  color: var(--color-pure-white);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chatbot-name {
  font-size: 14px;
  font-weight: 700;
}
.chatbot-status {
  font-size: 12px;
  color: var(--color-concrete);
}
.chatbot-close {
  background: none;
  border: none;
  color: var(--color-pure-white);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chatbot-bubble {
  max-width: 82%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--color-concrete);
}
.chatbot-bubble--bot {
  align-self: flex-start;
  background: var(--color-fog);
}
.chatbot-bubble--user {
  align-self: flex-end;
  background: var(--color-carbon);
  color: var(--color-pure-white);
  border-color: var(--color-carbon);
}

.chatbot-typing {
  display: flex;
  gap: 5px;
  padding: 0 16px 10px;
}
.chatbot-typing span {
  width: 5px;
  height: 5px;
  background: var(--color-concrete);
  animation: chatbot-typing-bounce 1s infinite ease-in-out;
}
.chatbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatbot-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.chatbot-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
}
.chatbot-quick-reply {
  font-size: 12px;
  padding: 7px 12px;
  border: 1px solid var(--color-carbon);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.chatbot-quick-reply:hover {
  background: var(--color-fog);
}

.chatbot-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--color-concrete);
}
.chatbot-input {
  flex: 1;
  background: var(--color-pure-white);
  border: 1px solid var(--color-concrete);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
}
.chatbot-input:focus {
  outline: none;
  border-color: var(--color-carbon);
}
.chatbot-send {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  background: var(--color-carbon);
  color: var(--color-pure-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chatbot-send svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 420px) {
  .chatbot-window {
    right: -0.5rem;
  }
}