/* Art of Driving — design system
   Colors sampled pixel-for-pixel from the live site's actual rendered UI
   (navy #0A0E27, gold #C9A84C, card bg #111530, border #1E2450). */

:root{
  --navy: #0a0e27;
  --navy-light: #111530;
  --navy-lighter: #141941;
  --navy-border: #1e2450;
  --gold: #c9a84c;
  --gold-dark: #a88d46;
  --white: #ffffff;
  --text-muted: #9aa0c3;
  --text-body: #c7cbe6;
  --red: #b23b30;
  --max-width: 1240px;
  --radius: 14px;
  --font-body: 'Lato', 'Noto Sans', Arial, sans-serif;
  --font-display: 'Lato', 'Noto Sans', Arial, sans-serif;
  --shadow-card: 0 10px 30px -12px rgba(0,0,0,.45);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 900; margin:0 0 .4em; line-height:1.15; }
p{ margin:0 0 1em; color: var(--text-body); }
.container{ max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.icon{ width:1.3em; height:1.3em; flex-shrink:0; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--gold); color:var(--navy); padding:10px 16px; z-index:200; }
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Header ---------- */
.site-header{ position: sticky; top:0; z-index:100; background: rgba(10,14,39,.92); backdrop-filter: blur(8px); border-bottom:1px solid var(--navy-border); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; letter-spacing:.06em; color: var(--gold); font-size:1.25rem; text-transform: uppercase; }
.brand img{ width:36px; height:36px; border-radius:50%; }

.main-nav{ display:none; }
.main-nav > ul{ display:flex; align-items:center; gap:28px; }
.main-nav > ul > li{ position:relative; }
.nav-link{ display:flex; align-items:center; gap:4px; font-size:.95rem; padding:8px 0; color:var(--white); background:none; border:none; font-family:inherit; cursor:pointer; text-transform:none; letter-spacing:normal; }
.nav-link:hover, .nav-link:focus{ color: var(--gold); }
.nav-link .icon{ width:1em; height:1em; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.dropdown{
  position:absolute; top:100%; left:0; min-width:230px; background: var(--navy-light);
  border:1px solid var(--navy-border); border-radius: 10px; padding:8px; margin-top:8px;
  opacity:0; visibility:hidden; transform: translateY(6px); transition: .15s ease; box-shadow: var(--shadow-card);
}
.dropdown li a{ display:block; padding:10px 12px; border-radius:7px; font-size:.92rem; }
.dropdown li a:hover{ background: var(--navy-lighter); color: var(--gold); }

.lang-switch{ display:flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; letter-spacing:.05em; }
.lang-switch a{ color: var(--text-muted); padding:4px; }
.lang-switch a.active, .lang-switch a:hover{ color: var(--gold); }
.header-right{ display:flex; align-items:center; gap:18px; }

.nav-toggle{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:none; border:1px solid var(--navy-border); border-radius:8px; color:var(--white); cursor:pointer; }
.nav-toggle .icon{ width:20px; height:20px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

.mobile-nav{ position:fixed; inset:76px 0 0 0; background: var(--navy); z-index:99; padding: 12px 24px 40px; overflow-y:auto; transform: translateY(-8px); opacity:0; visibility:hidden; transition:.18s ease; }
.mobile-nav.open{ transform:none; opacity:1; visibility:visible; }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav > ul > li{ border-bottom:1px solid var(--navy-border); }
.mobile-nav .nav-link{ padding:16px 0; justify-content:space-between; width:100%; background:none; border:none; font-size:1.05rem; font-family:inherit; text-align:left; }
.mobile-nav .dropdown{ position:static; opacity:1; visibility:visible; transform:none; display:none; background:none; border:none; margin:0 0 10px; padding:0; box-shadow:none; }
.mobile-nav li.expanded .dropdown{ display:block; }
.mobile-nav li.expanded .chevron{ transform: rotate(180deg); }
.mobile-nav .dropdown li a{ padding:10px 12px; color: var(--text-muted); }
body.nav-open{ overflow:hidden; }

@media (min-width: 960px){
  .main-nav{ display:block; }
  .nav-toggle, .mobile-nav{ display:none; }
}

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:8px; font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; border:1.5px solid transparent; cursor:pointer; transition:.15s ease; }
.btn-gold{ background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover{ background: var(--gold-dark); border-color: var(--gold-dark); }
.btn-outline{ background:transparent; color: var(--white); border-color: var(--navy-border); }
.btn-outline:hover{ border-color: var(--gold); color: var(--gold); }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* ---------- Hero (home) ---------- */
.hero{ padding: 64px 0 80px; text-align:center; position:relative; overflow:hidden; }
.hero-banner{ max-width: 800px; margin: 0 auto 40px; border-radius:10px; overflow:hidden; box-shadow: var(--shadow-card); }
.hero h1{ font-size: clamp(2.6rem, 7vw, 5rem); color:var(--white); }
.hero .divider{ width:70px; height:3px; background:var(--gold); margin:24px auto; border:none; }
.hero-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

/* ---------- Page header (inner pages) ---------- */
.page-header{ padding: 40px 0 44px; border-bottom:1px solid var(--navy-border); position:relative; overflow:hidden; }
.page-header::after{ content:''; position:absolute; top:-60px; right:-60px; width:260px; height:260px; border:1px solid var(--navy-border); border-radius:50%; }
.back-link{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--navy-border); border-radius:8px; padding:8px 16px; font-size:.85rem; margin-bottom:24px; }
.back-link:hover{ border-color:var(--gold); color:var(--gold); }
.breadcrumb{ color: var(--gold); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.breadcrumb a{ color: var(--gold); }
.breadcrumb a:hover{ text-decoration:underline; }
.page-header h1{ font-size: clamp(2rem, 5vw, 2.75rem); }
.page-header .divider{ width:60px; height:3px; background:var(--gold); border:none; margin-top:16px; }

/* ---------- Section intro ---------- */
.section{ padding: 72px 0; }
.section-alt{ background: var(--navy-light); }
.section-intro{ text-align:center; max-width:680px; margin: 0 auto 48px; }
.badge{ display:inline-block; border:1px solid var(--gold); color:var(--gold); font-size:.72rem; letter-spacing:.12em; font-weight:700; padding:6px 16px; border-radius:20px; margin-bottom:18px; text-transform:uppercase; }
.section-intro h2{ font-size: clamp(1.8rem, 4vw, 2.4rem); }
.section-intro .divider{ width:56px; height:3px; background:var(--gold); border:none; margin: 18px auto 0; }
.section-intro p{ margin-top:18px; }

/* ---------- Card grid ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:24px; }
.card{ background: var(--navy-light); border:1px solid var(--navy-border); border-radius: var(--radius); padding:32px 26px; text-align:center; transition:.15s ease; }
a.card{ display:block; }
a.card:hover{ border-color: var(--gold); transform: translateY(-3px); }
.card-icon{ width:56px; height:56px; border-radius:50%; background: var(--navy-lighter); display:flex; align-items:center; justify-content:center; margin: 0 auto 18px; color: var(--gold); }
.card-icon .icon{ width:26px; height:26px; }
.card h3{ font-size:1.15rem; margin-bottom:8px; color:var(--white); }
.card p{ font-size:.92rem; margin-bottom:0; }
.card .card-link{ display:inline-block; margin-top:14px; color:var(--gold); font-size:.85rem; font-weight:700; }

/* license category chip row */
.chip-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:16px; margin-top:44px; }
.chip-card{ background: var(--navy-lighter); border:1px solid var(--navy-border); border-radius:12px; padding:20px 12px; text-align:center; }
a.chip-card:hover{ border-color: var(--gold); }
.chip-card .chip-icon{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.chip-card .chip-icon .icon{ width:24px; height:24px; }
.chip-card .cat-tag{ display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.06em; padding:2px 8px; border-radius:10px; margin-bottom:6px; }
.chip-card h4{ font-family: var(--font-body); font-size:.92rem; font-weight:700; margin:0; }

/* ---------- Info chips (license/insurance detail) ---------- */
.info-chips{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin: 32px 0 34px; }
.info-chip{ display:flex; align-items:center; gap:8px; border:1px solid var(--navy-border); border-radius:8px; padding:10px 16px; font-size:.88rem; color:var(--text-body); }
.info-chip-icon{ color: var(--gold); display:inline-flex; }
.info-chip .icon{ width:1.1em; height:1.1em; }

.prose{ max-width:760px; margin:0 auto; }
.prose p:last-child{ margin-bottom:0; }

/* ---------- Two-column detail blocks ---------- */
.two-col{ display:grid; grid-template-columns: 1fr; gap:24px; max-width:1000px; margin: 40px auto 0; }
@media (min-width: 760px){ .two-col{ grid-template-columns: 1fr 1fr; } }
.detail-panel{ background: var(--navy-light); border:1px solid var(--navy-border); border-radius: var(--radius); padding:30px; }
.detail-panel h3{ display:flex; align-items:center; gap:10px; font-family: var(--font-body); font-size:1.05rem; color:var(--gold); border-bottom:1px solid var(--navy-border); padding-bottom:16px; margin-bottom:18px; }
.detail-panel h3 .icon{ width:1.1em; height:1.1em; }
.steps-list{ display:flex; flex-direction:column; gap:16px; }
.steps-list li{ display:flex; align-items:flex-start; gap:14px; font-size:.95rem; color: var(--text-body); }
.step-num{ flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--gold); color:var(--gold); font-size:.78rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.check-list li{ display:flex; align-items:flex-start; gap:10px; font-size:.95rem; color: var(--text-body); padding:6px 0; }
.check-list .icon{ color: var(--gold); margin-top:2px; }
.star-list li{ display:flex; align-items:flex-start; gap:10px; font-size:.95rem; color: var(--text-body); padding:6px 0; }
.star-list .icon{ color: var(--gold); margin-top:2px; width:.95em; height:.95em; }

.summary-card{ background: linear-gradient(180deg, var(--navy-lighter), var(--navy-light)); border:1px solid var(--navy-border); border-radius: var(--radius); padding:40px; text-align:center; max-width:720px; margin:0 auto 40px; }
.summary-card .card-icon{ width:64px; height:64px; }
.summary-card h2{ font-size:1.5rem; }
.note-box{ max-width:1000px; margin: 32px auto 0; border:1px dashed var(--navy-border); border-radius:12px; padding:20px 24px; font-size:.9rem; color: var(--text-muted); }

.subcats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:18px; max-width:1000px; margin: 40px auto 0; }
.subcat{ background: var(--navy-light); border:1px solid var(--navy-border); border-radius:12px; padding:22px; }
.subcat h4{ font-family: var(--font-body); color: var(--gold); font-size:1rem; margin-bottom:6px; }
.subcat p{ font-size:.88rem; margin:0; }

/* ---------- Homepage: about teaser ---------- */
.about-teaser{ display:grid; gap:40px; align-items:center; }
@media (min-width:860px){ .about-teaser{ grid-template-columns: 1fr 1fr; } }
.about-teaser p{ font-size:1.05rem; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; gap:28px; grid-template-columns: 1fr; }
@media (min-width: 880px){ .contact-grid{ grid-template-columns: 1.1fr .9fr; } }
.contact-panel{ background: var(--navy-light); border:1px solid var(--navy-border); border-radius: var(--radius); padding:32px; }
.contact-panel h3{ font-family: var(--font-body); font-size:1.2rem; margin-bottom:20px; }
.form-field{ margin-bottom:16px; }
.form-field label{ display:block; font-size:.82rem; color: var(--text-muted); margin-bottom:6px; }
.input-wrap{ display:flex; align-items:center; gap:10px; border:1px solid var(--navy-border); border-radius:8px; padding:0 14px; background: var(--navy); }
.input-wrap .icon{ color: var(--gold); flex-shrink:0; }
.input-wrap input, .input-wrap select, .input-wrap textarea{
  flex:1; background:none; border:none; outline:none; color:var(--white); font-family:inherit; font-size:.95rem; padding:13px 0; width:100%;
}
.input-wrap:has(textarea){ align-items:flex-start; }
.input-wrap textarea{ resize:vertical; min-height:110px; padding-top:13px; }
.input-wrap:has(textarea) .icon{ margin-top:14px; }
.input-wrap select option{ background: var(--navy-light); color: var(--white); }
.form-msg{ font-size:.88rem; padding:12px 14px; border-radius:8px; margin-bottom:16px; display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ background: rgba(76,175,80,.12); color:#8bd88f; border:1px solid rgba(76,175,80,.3); }
.form-msg.err{ background: rgba(178,59,48,.12); color:#e88f86; border:1px solid rgba(178,59,48,.3); }

.info-list{ display:flex; flex-direction:column; gap:20px; margin-bottom:24px; }
.info-list li{ display:flex; gap:14px; }
.info-list .info-ico{ width:40px; height:40px; border-radius:50%; border:1px solid var(--navy-border); display:flex; align-items:center; justify-content:center; color:var(--gold); flex-shrink:0; }
.info-list .info-label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-weight:700; margin-bottom:3px; }
.info-list .info-value{ font-size:.92rem; color: var(--text-body); }
.map-frame{ border:0; width:100%; height:280px; border-radius:10px; filter: grayscale(.2) contrast(1.05); }

.quick-strip{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); border:1px solid var(--navy-border); border-radius: var(--radius); overflow:hidden; margin-top:28px; }
.quick-strip > div{ padding:26px; text-align:center; border-left:1px solid var(--navy-border); }
.quick-strip > div:first-child{ border-left:none; }
.quick-strip .icon{ color: var(--gold); margin: 0 auto 10px; }
.quick-strip .q-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--gold); margin-bottom:4px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--navy-border); padding: 56px 0 24px; margin-top: 40px; background: #070a1c; }
.footer-grid{ display:grid; gap:36px; grid-template-columns: 1fr; margin-bottom:40px; }
@media (min-width: 760px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; color: var(--gold); font-size:1.15rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.footer-brand img{ width:34px; height:34px; border-radius:50%; }
.footer-brand small{ display:block; font-family: var(--font-body); font-weight:400; color: var(--text-muted); text-transform:none; letter-spacing:0; font-size:.75rem; }
.footer-col h5{ color: var(--gold); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a, .footer-col li{ font-size:.9rem; color: var(--text-muted); }
.footer-col a:hover{ color: var(--gold); }
.footer-contact-item{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--text-muted); }
.footer-contact-item .icon{ color: var(--gold); margin-top:3px; width:1em; height:1em; flex-shrink:0; }
.footer-bottom{ text-align:center; font-size:.82rem; color: var(--text-muted); border-top:1px solid var(--navy-border); padding-top:22px; }

/* ---------- Misc ---------- */
.divider{ border:none; }
.text-center{ text-align:center; }
.hero-banner img{ width:100%; height:auto; }
.not-found{ text-align:center; padding: 120px 24px; }
.not-found h1{ font-size:5rem; color: var(--gold); }

@media (max-width: 640px){
  .hero{ padding:44px 0 56px; }
  .section{ padding: 52px 0; }
  .quick-strip > div{ border-left:none; border-top:1px solid var(--navy-border); }
  .quick-strip > div:first-child{ border-top:none; }
}