/* Jetten Motors — white, restrained and photography-led. */
:root {
  --ink: #252525;
  --muted: #727272;
  --paper: #f7f7f5;
  --line: #e7e7e3;
  --font: 'Manrope', 'Segoe UI', Arial, sans-serif;
}
body { font-family: var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .hero h1, .page-intro h1, .vehicle-head h1,
.original-copy h2, .original-copy h3, .price, .vehicle-price, .signature {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -.035em;
}
p { line-height: 1.85; }
header {
  height: 104px;
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-inline: 5%;
}
.logo { width: 215px; }
nav { gap: 30px; font-size: 15px; font-weight: 600; }
nav a:hover, nav [aria-current=page] { color: var(--red); }
nav [aria-current=page] { border-bottom: 1px solid var(--red); }
.nav-cta { padding: 14px 20px; background: var(--red); border-color: var(--red); color: #fff; }
.nav-cta:hover { background: #7f1411; color: #fff; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 5%;
  padding: 68px 5% 42px;
  max-width: 1720px;
  margin: 0 auto;
  height: auto;
  min-height: 0;
  background: #fff;
  color: var(--ink);
  overflow: visible;
}
.hero-content { padding: 0; position: static; }
.hero .eyebrow { color: var(--red); font-size: 10px; letter-spacing: .2em; margin-bottom: 25px; }
.hero h1 { font-size: clamp(32px, 3.45vw, 58px); line-height: 1.16; margin: 0 0 25px; letter-spacing: -.045em; }
.hero-content > p:not(.eyebrow) { color: #707070; font-size: 14px; line-height: 1.9; margin: 0 0 30px; }
.hero-visual { min-width: 0; width: 100%; margin: 0; }
.hero-visual > img { display: block; position: static; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; }
.hero-visual figcaption { display: flex; justify-content: space-between; gap: 15px; color: #777; padding-top: 15px; font-size: 10px; line-height: 1.6; }
.hero-visual figcaption a { color: var(--ink); }
.hero-visual figcaption a:hover { color: var(--red); }
.hero-secondary { display: block; width: fit-content; font-size: 11px; color: #666; margin-top: 20px; }
.button { font-size: 12px; font-weight: 600; padding: 16px 21px; gap: 28px; }
.button span { font-size: 18px; }
.eyebrow { font-size: 10px; letter-spacing: .18em; font-weight: 700; }
.values { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 23px 5%; gap: 60px; color: #686868; font-size: 11px; }
.values i { background: #b99c98; }
.section { padding-top: 90px; padding-bottom: 90px; }
h2 { font-size: clamp(28px, 2.7vw, 42px); line-height: 1.25; }
h3 { font-size: 23px; line-height: 1.35; }
.section-head { margin-bottom: 38px; }
.text-link { font-size: 12px; font-weight: 600; padding-bottom: 8px; border-color: #ccc; }
.filter-row { border-color: var(--line); }
.filters button { border-color: var(--line); color: #666; font-size: 11px; padding: 10px 16px; }
.filters button.active { color: var(--red); background: #faf3f2; border-color: #e8d1ce; }
.cars { gap: 30px; }
.car-image { aspect-ratio: 1.6; }
.car-body { padding-top: 25px; }
.car h3 { font-size: 24px; }
.car small { font-size: 9px; letter-spacing: .16em; margin-bottom: 10px; }
.car .description { font-size: 12px; }
.specs { font-size: 11px; margin: 23px 0; }
.car-bottom { border-color: var(--line); }
.price { font-size: 22px; }
.stock-note { color: #777; font-size: 10px; line-height: 1.8; }
.story { margin: 0 5%; background: var(--paper); }
.story-image { min-height: 520px; }
.story-copy { padding: 65px 11%; }
.story-copy > p:not(.eyebrow), .original-copy p, .original-copy li { color: #666; font-size: 14px; line-height: 1.95; }
.story-copy > h2 { font-size: 26px; margin-block: 6px; line-height: 1.3; }
.signature { font-size: 16px; border-color: #ddd; font-weight: 500; line-height: 1.7; }
.service-grid { gap: 45px; }
.service-grid article { border-top: 1px solid #d7d7d3; padding-top: 24px; }
.service-grid h3 { font-size: 23px; margin-top: 24px; }
.service-grid p { font-size: 13px; line-height: 1.95; }
.contact { background: #faf8f6; color: var(--ink); padding: 65px 8%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact .eyebrow { color: var(--red); }
.contact p:not(.eyebrow) { color: #6b6b6b; font-size: 13px; line-height: 1.9; }
.contact-actions { font-size: 13px; }
.contact .white { background: var(--red); color: #fff; }
.contact .white:hover { background: #7f1411; }
footer { padding-top: 65px; background: #fff; color: var(--ink); }
.footer-hours { border-bottom-color: var(--line); gap: 90px; padding-bottom: 40px; }
.footer-hours h3 { font-size: 19px; }
.footer-hours p { color: #777; font-size: 11px; line-height: 2; }
.footer-top { padding-block: 8px 40px; }
.footer-top p { color: #777; font-size: 12px; }
.footer-top > a { font-size: 12px; }
.footer-bottom { color: #888; border-top-color: var(--line); padding-block: 22px 5px; font-size: 10px; }
.page-intro, .vehicle-head { background: #fff; border-bottom: 1px solid var(--line); padding-bottom: 45px; }
.page-intro h1, .vehicle-head h1 { font-size: clamp(34px, 4.1vw, 56px); font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
.page-intro > p:last-child { font-size: 14px; color: #777; }
.breadcrumbs { color: #888; font-size: 10px; }
.vehicle-spec { background: #fafaf9; border: 1px solid var(--line); padding: 30px; }
.vehicle-price { font-size: 31px; }
.vehicle-spec dl > div { border-color: var(--line); font-size: 12px; }
.gallery-toolbar button { background: white; color: var(--ink); border: 1px solid var(--line); padding: 8px 18px; }
.gallery-toolbar button:hover { color: var(--red); border-color: #d7bab7; }
.gallery-thumbs button { opacity: .85; }
.gallery-thumbs button[aria-pressed=true] { opacity: 1; }
.original-copy h2 { font-size: 27px; font-weight: 600; }
.original-copy h3 { font-size: 20px; font-weight: 600; }
.original-about { margin-top: 45px; margin-bottom: 70px; }
.original-about .story-copy { padding: 55px 10%; }
.inquiry { background: #fafaf9; border: 1px solid var(--line); padding: 36px; }
.inquiry input, .inquiry textarea, .inquiry select { font-family: var(--font); border-color: #d9d9d6; font-size: 13px; }
.inquiry h2 { font-size: 28px; }
.inquiry label { font-size: 11px; font-weight: 600; }
.related { background: #fafaf9; border-color: var(--line); }
@media (min-width: 1720px) { .hero { padding-inline: 86px; } }
@media (max-width: 1050px) {
  header { height: 90px; }
  .logo { width: 185px; }
  nav { gap: 18px; font-size: 13px; }
  .nav-cta { padding: 12px 14px; }
  .hero { padding-top: 50px; gap: 4%; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .hero h1 { font-size: clamp(30px, 3.7vw, 39px); }
  .hero-content > p:not(.eyebrow) { font-size: 12px; }
  .hero-visual figcaption { font-size: 9px; }
  .values { gap: 30px; }
  .story-copy { padding: 40px 9%; }
  .story-image { min-height: 460px; }
}
@media (max-width: 800px) {
  header { height: 82px; }
  #menu { display: block; background: white; color: var(--ink); border: 1px solid #ddd; padding: 10px 15px; font-size: 12px; }
  nav { display: none; position: absolute; top: 82px; left: 0; right: 0; padding: 24px 5%; background: #fff; color: var(--ink); flex-direction: column; align-items: stretch; font-size: 16px; border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px #00000006; }
  nav.open { display: flex; }
  .hero { grid-template-columns: 1fr; padding: 40px 5% 28px; gap: 32px; }
  .hero h1 { font-size: clamp(34px, 6vw, 46px); }
  .hero-content > p:not(.eyebrow) { font-size: 14px; }
  .hero-content { max-width: 580px; }
  .hero .eyebrow { margin-bottom: 20px; }
  .hero-secondary { display: inline-block; margin-left: 20px; margin-top: 12px; }
  .hero-visual figcaption { font-size: 10px; }
  .values { gap: 20px; font-size: 10px; }
  .story { grid-template-columns: 1fr; }
  .story-image { min-height: 0; height: 420px; }
  .story-copy { padding: 42px 7%; }
  .original-about .story-copy { padding: 42px 7%; }
  .section { padding-block: 60px; }
  .footer-hours { gap: 40px; }
}
@media (max-width: 650px) {
  .hero h1 { font-size: 37px; }
  .hero-content > p:not(.eyebrow) { font-size: 13px; }
  .hero-secondary { display: block; margin: 18px 0 0; }
  .hero-visual figcaption { align-items: start; font-size: 9px; }
  .values { gap: 12px; padding-block: 20px; }
  .values span { max-width: 110px; font-size: 9px; line-height: 1.7; }
  .cars { gap: 35px; }
  .car h3 { font-size: 24px; }
  .story-image { height: 340px; }
  .contact { padding: 45px 6%; }
  .footer-hours { gap: 20px; }
  footer { padding-top: 45px; }
  .footer-top { gap: 24px; }
  .inquiry { padding: 24px; }
}
nav a{line-height:1.6;color:#242424}.nav-cta{font-weight:700;color:white}.hero-slide{margin:0;min-width:0}.hero-slide[hidden]{display:none}.hero-photo-link{display:block;background:#f6f6f4;aspect-ratio:16/9;overflow:hidden}.hero-photo-link img{display:block;position:static;width:100%;height:100%;object-fit:contain}.hero-slide figcaption{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:18px;font-size:12px;min-height:70px}.hero-slide figcaption>div{min-width:0}.hero-slide figcaption strong{display:block;font-size:15px;color:var(--ink);font-weight:600;line-height:1.4}.hero-slide figcaption span{display:block;margin-top:6px;color:#707070;font-size:11px;line-height:1.5}.hero-slide figcaption>a{font-size:12px;font-weight:600;white-space:nowrap}.hero-slider-controls{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:16px;padding-top:12px;gap:15px}.hero-slider-arrows{display:flex;align-items:center;gap:15px}.hero-slider-arrows button{width:40px;height:40px;background:#fff;border:1px solid #d8d8d3;font-size:20px;color:#333}.hero-slider-arrows button:hover{border-color:var(--red);color:var(--red)}[data-slider-count]{font-size:11px;color:#666;font-variant-numeric:tabular-nums}.hero-slider-dots{display:flex;gap:2px}.hero-slider-dots button{padding:15px 8px;background:transparent;border:0;position:relative;width:28px;height:40px}.hero-slider-dots button::after{content:'';display:block;width:7px;height:7px;border-radius:50%;background:#d2d2cd}.hero-slider-dots button[aria-pressed=true]::after{background:var(--red)}.slider-toggle{background:white;border:0;color:#555;font-family:var(--font);font-size:11px;padding:10px 0 10px 10px;min-height:40px}.slider-toggle:hover{color:var(--red)}@media(min-width:801px) and (max-width:950px){header .logo{width:160px}nav{gap:14px;font-size:12px}.nav-cta{padding-inline:12px}}@media(max-width:650px){.hero-slide figcaption strong{font-size:14px}.hero-slide figcaption>a{font-size:10px}.hero-slide figcaption span{font-size:10px}.hero-slider-arrows{gap:10px}.hero-slider-controls{gap:8px}.hero-slider-dots button{width:24px;padding-inline:6px}.slider-toggle{font-size:10px}.hero-slide figcaption{min-height:72px}}
.hero-photo-link img{object-fit:cover;object-position:center}.filter-row{justify-content:flex-end}.language-switch{display:flex;gap:6px;align-items:center;order:2;margin-left:18px}.language-switch a{display:block;font-size:11px;font-weight:700;color:#707070;padding:8px 5px;border-bottom:2px solid transparent}.language-switch a[aria-current]{color:var(--red);border-bottom-color:var(--red)}header>nav{order:1}header>#menu{order:3}.social-buttons{display:flex;gap:12px;flex-wrap:wrap}.social-buttons a{display:inline-flex;align-items:center;border:1px solid #d7d0ce;padding:13px 19px;color:var(--red);font-size:12px;font-weight:600;background:white}.social-buttons a:hover{background:var(--red);color:white}.instagram-section{background:#f8f7f5;margin-block:0;padding-top:75px;padding-bottom:65px}.social-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:35px}.social-heading>div:first-child{max-width:640px}.social-heading>div>p:not(.eyebrow){font-size:14px;color:#6a6a65;line-height:1.85;max-width:600px}.social-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/2);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#d4c8c4 transparent;padding-bottom:15px}.social-card{background:white;border:1px solid #e4e1dc;scroll-snap-align:start;min-width:0;overflow:hidden}.social-card-top{padding:20px 23px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;font-size:12px;font-weight:600}.social-card-top>span{color:var(--red)}.social-card iframe{width:100%;height:550px;border:0;display:block;background:white}.social-post-link{display:block;margin:0 22px;padding:20px 0;border-top:1px solid #eee;font-size:12px;font-weight:600;color:var(--red)}.social-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:22px}.social-bottom p{font-size:12px;color:#777}.social-bottom>div{display:flex;gap:10px}.social-bottom button{height:42px;width:46px;border:1px solid #d6d3ce;background:white;font-size:21px;color:var(--red)}.social-bottom button:disabled{opacity:.3;cursor:default}footer .social-buttons{order:2}@media(max-width:1180px){header{height:88px;gap:14px}header .logo{width:185px}header>nav{display:none;position:absolute;top:88px;left:0;right:0;padding:24px 5%;background:white;flex-direction:column;align-items:stretch;font-size:15px;border-bottom:1px solid var(--line)}header>nav.open{display:flex}header>#menu{display:block;padding:10px 15px;background:white;color:#252525;border:1px solid #ddd;font-size:12px}.language-switch{margin-left:auto}.social-heading{align-items:start;flex-direction:column;gap:15px}}@media(max-width:700px){.social-track{grid-auto-columns:100%}.social-heading h2{font-size:30px}.social-card iframe{height:530px}.social-card-top{font-size:11px;padding:18px}.instagram-section{padding-top:50px;padding-bottom:45px}.social-bottom p{font-size:10px}.social-buttons a{padding:12px 16px}.social-bottom{gap:12px}}@media(max-width:450px){header{gap:8px}header .logo{width:140px}.language-switch{gap:2px;margin-left:auto}.language-switch a{font-size:10px;padding:7px 3px}header>#menu{padding:9px;font-size:11px}.social-card iframe{height:500px}}
.hero .button,.contact .button{white-space:nowrap}@media(max-width:900px){.contact{flex-direction:column;align-items:stretch;gap:25px}}.inquiry .button{max-width:100%;white-space:normal;gap:12px}
.social-card{container-type:inline-size}.social-card iframe{height:calc(100cqw + 240px)}
