/* Helio Arc Automobile - Professional Corporate CSS (Flexbox Only) */
/* -------------------------------------------------------------- */
/* 1) CSS Reset & Base Normalize */
/* -------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');

* { box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }

html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; }
ol, ul { list-style: none; padding-left: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font: inherit; }
input, select, textarea { font: inherit; }

/* -------------------------------------------------------------- */
/* 2) Theme Variables & Base Typography */
/* -------------------------------------------------------------- */
:root {
  --brand-primary: #0B3A5E;
  --brand-secondary: #FF6B2C;
  --brand-accent: #F4F7FB;
  --text-main: #1F2A37; /* dark gray for body */
  --text-muted: #5B6770;
  --border: #E1E7EF;
  --surface: #FFFFFF;
  --surface-alt: #F8FAFC;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-2: 0 6px 16px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.06);
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --transition-fast: 180ms ease;
  --transition-mid: 280ms ease;
}

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-main);
  background: var(--surface);
}

h1, h2, h3, .display { font-family: 'Montserrat', 'Inter', Arial, sans-serif; color: var(--brand-primary); letter-spacing: 0.2px; }
h1 { font-size: 32px; line-height: 1.2; font-weight: 800; }
h2 { font-size: 24px; line-height: 1.3; font-weight: 700; margin-bottom: var(--space-16); }
h3 { font-size: 18px; line-height: 1.35; font-weight: 700; }

p, li, address { font-size: 16px; color: var(--text-main); }
small { font-size: 14px; color: var(--text-muted); }

strong { font-weight: 700; }

/* Links */
a { color: var(--brand-primary); }
a:hover, a:focus { color: #0c4b7c; }

/* Focus styles */
:focus-visible { outline: 3px solid rgba(11,58,94,0.35); outline-offset: 2px; border-radius: 4px; }

/* -------------------------------------------------------------- */
/* 3) Layout Primitives (Flexbox-only) */
/* -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-20);
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* MANDATORY SPACING AND ALIGNMENT PATTERNS */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Utilities */
.hidden { display: none !important; }
.muted { color: var(--text-muted); }
.divider { height: 1px; background: var(--border); width: 100%; }

/* -------------------------------------------------------------- */
/* 4) Header & Navigation (mobile-first) */
/* -------------------------------------------------------------- */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 50;
}

header .container {
  height: 64px;
  align-items: center;
  justify-content: space-between;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.main-nav a img { height: 32px; width: auto; }

/* Mobile: show only logo inside main-nav */
.main-nav a:not(:first-child) { display: none; }

.mobile-menu-toggle {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.mobile-menu-toggle:hover { background: var(--surface-alt); border-color: #d6dee8; }

/* Mobile Menu Overlay */
.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: 85%; max-width: 420px;
  background: var(--surface);
  box-shadow: -8px 0 24px rgba(16,24,40,0.12);
  transform: translateX(100%);
  transition: transform var(--transition-mid);
  display: flex; flex-direction: column; padding: var(--space-20);
  z-index: 100;
}
.mobile-menu.active, .mobile-menu.open { transform: translateX(0); }
.mobile-menu-close {
  align-self: flex-end; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; margin-bottom: var(--space-16);
}
.mobile-nav {
  display: flex; flex-direction: column; gap: var(--space-12);
}
.mobile-nav a {
  padding: 14px 12px; border-radius: 8px; color: var(--brand-primary);
  border: 1px solid transparent; transition: background var(--transition-fast), border-color var(--transition-fast);
}
.mobile-nav a:hover { background: var(--brand-accent); border-color: var(--border); }

/* Desktop Navigation */
@media (min-width: 992px) {
  .mobile-menu-toggle { display: none; }
  .main-nav { gap: var(--space-24); }
  .main-nav a:not(:first-child) { display: inline-flex; align-items: center; }
  .main-nav a { color: var(--text-main); font-weight: 500; }
  .main-nav a:hover { color: var(--brand-primary); }
}

/* -------------------------------------------------------------- */
/* 5) Buttons */
/* -------------------------------------------------------------- */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 10px; font-weight: 600; line-height: 1.2;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  border: 2px solid transparent;
}

.btn-primary { background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover { background: #0c4b7c; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary { background: #fff; color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-secondary:hover { background: var(--brand-accent); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* -------------------------------------------------------------- */
/* 6) Hero Sections */
/* -------------------------------------------------------------- */
.hero { background: var(--brand-accent); }
.hero .container { padding-top: var(--space-32); padding-bottom: var(--space-32); }
.hero h1 { margin-top: var(--space-8); }
.hero .subheadline { color: var(--text-muted); font-size: 18px; }

.trust-badges { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; }
.trust-badges img { height: 28px; width: auto; opacity: 0.9; }

.supporting-points { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-20); }
.supporting-points li { position: relative; padding-left: 22px; color: var(--text-main); }
.supporting-points li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-secondary); position: relative; display: inline-block; margin-right: 10px; top: -1px; }

.contact-snippet { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; color: var(--text-main); }
.contact-snippet img { width: 18px; height: 18px; opacity: 0.9; }

/* -------------------------------------------------------------- */
/* 7) Feature Grids & Service Cards (Flex-only) */
/* -------------------------------------------------------------- */
.feature-grid, .service-cards, .testimonial-list, .metrics-summary ul, .features-benefits ul,
.features-usp ul, .features-about-metrics ul, .feature-options ul, .comparison-points ul, .usps ul {
  display: flex; flex-wrap: wrap; gap: var(--space-24);
}

.feature-grid > div, .service-cards > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-20);
  box-shadow: var(--shadow-1);
  flex: 1 1 260px;
  display: flex; flex-direction: column; gap: var(--space-12);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.feature-grid > div:hover, .service-cards > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.feature-grid img, .service-cards img { width: 40px; height: 40px; }

/* Metrics & certifications */
.certifications-list { display: flex; flex-wrap: wrap; gap: var(--space-12); color: var(--text-muted); }
.metrics-summary ul li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 16px; flex: 1 1 180px; text-align: center; box-shadow: var(--shadow-1); }
.metrics-summary strong { color: var(--brand-primary); font-size: 20px; }

/* Lists in content sections */
.features-benefits ul li, .features-usp ul li, .features-about-metrics ul li, .feature-options ul li, .comparison-points ul li, .usps ul li {
  position: relative; padding-left: 22px; flex: 1 1 260px;
}
.features-benefits ul li::before,
.features-usp ul li::before,
.features-about-metrics ul li::before,
.feature-options ul li::before,
.comparison-points ul li::before,
.usps ul li::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-secondary); position: absolute; left: 0; top: 9px;
}

/* -------------------------------------------------------------- */
/* 8) Testimonials */
/* -------------------------------------------------------------- */
.testimonials, .testimonials-workshop, .testimonials-about { background: var(--brand-accent); }
.testimonials .container, .testimonials-workshop .container, .testimonials-about .container { padding-top: var(--space-32); padding-bottom: var(--space-32); }

.testimonial-list { align-items: stretch; }
.testimonial-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  flex: 1 1 280px; min-width: 260px;
  flex-direction: column; align-items: flex-start;
}
.testimonial-card p { color: var(--text-main); }
.testimonial-card span { color: var(--text-muted); }

.rating-summary { display: flex; align-items: center; gap: var(--space-12); color: var(--text-main); }
.rating-summary img { width: 18px; height: 18px; }

/* -------------------------------------------------------------- */
/* 9) Contact & Map placeholders */
/* -------------------------------------------------------------- */
.contact-details, address { display: flex; flex-direction: column; gap: var(--space-8); }
.map-placeholder {
  display: flex; align-items: center; gap: var(--space-12);
  padding: 16px; border: 1px dashed var(--border); border-radius: var(--radius-m); color: var(--text-muted);
}

/* -------------------------------------------------------------- */
/* 10) Footer */
/* -------------------------------------------------------------- */
footer { background: var(--surface-alt); border-top: 1px solid var(--border); margin-top: var(--space-32); }
footer .container { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.footer-content { display: flex; flex-direction: column; gap: var(--space-20); }
.footer-nav, .footer-legal, .footer-social-links, .footer-cta { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.footer-nav a, .footer-legal a { color: var(--text-muted); }
.footer-nav a:hover, .footer-legal a:hover { color: var(--brand-primary); }
.footer-contact-mini { display: flex; flex-direction: column; gap: 6px; color: var(--text-muted); }
.footer-contact-mini img { width: 16px; height: 16px; display: inline-block; }
.footer-social-links a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.footer-social-links a:hover { background: var(--brand-accent); }

@media (min-width: 992px) {
  .footer-content { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
  .footer-nav, .footer-legal { gap: var(--space-16); }
}

/* -------------------------------------------------------------- */
/* 11) Page-specific sections */
/* -------------------------------------------------------------- */
/* About preview and general content */
.about-preview .container,
.services-overview .container,
.features .container,
.features-process .container,
.services-packages .container,
.usps .container,
.contact-section .container,
.services-buying .container,
.contact-vehicle .container,
.contact-workshop .container,
.contact-about .container,
.contact-details-section .container,
.legal-section .container,
.thankyou-section .container {
  padding-top: var(--space-32); padding-bottom: var(--space-32);
}

/* Process steps */
.process-steps { display: flex; flex-direction: column; gap: var(--space-12); counter-reset: step; }
.process-steps li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 14px 16px; box-shadow: var(--shadow-1); }
.timeline-visual { display: flex; justify-content: center; }
.timeline-visual img { width: 100%; max-width: 520px; }
.download-sample { display: flex; }

/* Before/after & cases */
.before-after-short, .case-snippets { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-16); box-shadow: var(--shadow-1); }

/* Privacy note */
.privacy-note, .service-dropoff-info { display: flex; align-items: center; gap: var(--space-12); color: var(--text-muted); }
.privacy-note img { width: 18px; height: 18px; }

/* Legal pages */
.legal-section h1 { margin-bottom: var(--space-12); }
.legal-section h2 { margin-top: var(--space-24); }
.legal-section p, .legal-section li, .legal-section address { margin-top: var(--space-8); }

/* Thank you page */
.thankyou-section .content-wrapper { align-items: center; text-align: center; }
.icon-thankyou img { filter: drop-shadow(0 3px 8px rgba(16,24,40,0.12)); }

/* -------------------------------------------------------------- */
/* 12) Cards baseline (for any div used as a card) */
/* -------------------------------------------------------------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-20); box-shadow: var(--shadow-1); }

/* -------------------------------------------------------------- */
/* 13) Responsive adjustments */
/* -------------------------------------------------------------- */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }

  .hero .container { padding-top: var(--space-48); padding-bottom: var(--space-48); }
  .text-image-section { flex-direction: row; }
}

@media (min-width: 1200px) {
  h1 { font-size: 48px; }
}

/* -------------------------------------------------------------- */
/* 14) Mobile-first alignment rules for required classes */
/* -------------------------------------------------------------- */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

/* -------------------------------------------------------------- */
/* 15) Tables (if any appear in legal text) - Flex-friendly block style */
/* -------------------------------------------------------------- */
.table-like { display: flex; flex-direction: column; gap: var(--space-8); }
.table-like .row { display: flex; flex-wrap: wrap; gap: var(--space-12); padding: 8px 0; border-bottom: 1px solid var(--border); }
.table-like .cell { flex: 1 1 220px; }

/* -------------------------------------------------------------- */
/* 16) Mobile Menu Backdrop (optional helper) */
/* -------------------------------------------------------------- */
.mobile-menu-backdrop { position: fixed; inset: 0; background: rgba(16,24,40,0.35); opacity: 0; pointer-events: none; transition: opacity var(--transition-mid); z-index: 90; }
.mobile-menu-backdrop.active { opacity: 1; pointer-events: auto; }

/* -------------------------------------------------------------- */
/* 17) Cookie Consent Banner & Modal */
/* -------------------------------------------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(16,24,40,0.08);
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-16) var(--space-20);
  transform: translateY(100%);
  transition: transform var(--transition-mid);
}
.cookie-banner.show, .cookie-banner.active { transform: translateY(0); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.cookie-banner .btn-primary { background: var(--brand-secondary); border-color: var(--brand-secondary); }
.cookie-banner .btn-primary:hover { background: #ff7f4b; }
.cookie-banner .btn-secondary { border-color: var(--text-muted); color: var(--text-main); }

.cookie-modal {
  position: fixed; inset: 0; z-index: 70; background: rgba(16,24,40,0.45);
  display: none; align-items: center; justify-content: center; padding: var(--space-20);
}
.cookie-modal.open, .cookie-modal.active { display: flex; }
.cookie-modal-content {
  background: #fff; border-radius: var(--radius-l); border: 1px solid var(--border);
  width: 100%; max-width: 760px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-20);
}
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal-body { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 12px 14px; }
.cookie-modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: flex-end; }

/* Toggle switch */
.toggle { position: relative; width: 44px; height: 26px; border-radius: 30px; background: #e5eaf1; border: 1px solid var(--border); display: inline-flex; align-items: center; padding: 2px; transition: background var(--transition-fast), border-color var(--transition-fast); }
.toggle::after { content: ''; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-1); transform: translateX(0); transition: transform var(--transition-fast); }
.toggle.active, input:checked + .toggle { background: #cde5f6; border-color: #9bc9ea; }
.toggle.active::after, input:checked + .toggle::after { transform: translateX(18px); }

/* -------------------------------------------------------------- */
/* 18) Accessibility & Micro Interactions */
/* -------------------------------------------------------------- */
.hover-raise { transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.hover-raise:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* -------------------------------------------------------------- */
/* 19) Additional alignment and spacing for all sections */
/* -------------------------------------------------------------- */
main section { margin-bottom: 60px; }

/* Ensure all text-image combos center vertically by default */
.text-image-section > * { flex: 1 1 320px; }

/* -------------------------------------------------------------- */
/* 20) Desktop refinements */
/* -------------------------------------------------------------- */
@media (min-width: 992px) {
  .cta-row { gap: var(--space-16); }
  .metrics-summary ul { gap: var(--space-16); }
}

/* -------------------------------------------------------------- */
/* 21) Ensure proper contrast in rating/testimonial areas */
/* -------------------------------------------------------------- */
.testimonials .rating-summary, .testimonials-workshop .rating-summary, .testimonials-about .rating-summary { color: var(--text-main); }

/* -------------------------------------------------------------- */
/* 22) Edge Elements present in markup */
/* -------------------------------------------------------------- */
.footer-contact-mini p { display: flex; align-items: center; gap: 8px; }
.quick-contact address p, .contact-details p { display: flex; align-items: center; gap: 8px; }

/* -------------------------------------------------------------- */
/* 23) Hover states for nav CTAs inside header/footer */
/* -------------------------------------------------------------- */
header .btn-primary, footer .btn-primary { background: var(--brand-secondary); border-color: var(--brand-secondary); }
header .btn-primary:hover, footer .btn-primary:hover { background: #ff7f4b; }
header .btn-secondary, footer .btn-secondary { border-color: var(--brand-primary); color: var(--brand-primary); }
header .btn-secondary:hover, footer .btn-secondary:hover { background: var(--brand-accent); }

/* -------------------------------------------------------------- */
/* 24) Prevent overlapping & maintain spacing */
/* -------------------------------------------------------------- */
.feature-grid > div, .service-cards > div, .testimonial-card, .metrics-summary ul li { margin-bottom: 20px; }

/* Ensure z-index layering */
header { z-index: 50; }
.mobile-menu, .mobile-menu-backdrop { z-index: 100; }
.cookie-banner { z-index: 60; }
.cookie-modal { z-index: 70; }

/* -------------------------------------------------------------- */
/* 25) German typography subtlety */
/* -------------------------------------------------------------- */
sub, sup { line-height: 0; }

/* End of stylesheet */