@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..800&family=Montserrat:wght@600..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400..800&display=swap");

:root{color-scheme:light;--paper:#f5f6f2;--ink:#172521;--muted:#52615b;--accent:#2557dc;--line:#ced7cd}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:var(--accent);text-underline-offset:.2em}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.header,.footer{max-width:1180px;margin:auto;padding:1.4rem clamp(1rem,4vw,3rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.header{border-bottom:1px solid var(--line)}
.header nav{display:flex;flex-wrap:wrap;gap:1rem}
.header a,.footer a{color:var(--ink)}
.brand{font-size:1.5rem;font-weight:800;letter-spacing:-.05em;text-decoration:none}
.brand span,.eyebrow,.number{color:var(--accent)}
main{max-width:1180px;margin:auto;padding:clamp(2rem,7vw,6rem) clamp(1rem,4vw,3rem)}
.intro{max-width:780px;margin-bottom:2.5rem}
h1{font-size:clamp(2.2rem,6vw,5rem);line-height:1.03;letter-spacing:-.05em;margin:.55em 0 .35em;overflow-wrap:anywhere}
.intro>p:last-child{font-size:1.15rem;line-height:1.65;color:var(--muted);max-width:52ch}
.eyebrow,.number{font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:.8rem}
.cards{padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.card{height:100%;display:flex;flex-direction:column;padding:1.35rem;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--ink);background:#fff}
.card:hover{border-color:var(--accent)}
.card h2{font-size:1.45rem;margin:.9rem 0 .2rem}
.card p{line-height:1.5;color:var(--muted);margin:.4rem 0 1.25rem}
.km{margin-top:auto;color:var(--accent);font-size:.9rem;font-weight:700}
.article{max-width:72ch;margin:auto;font-size:clamp(1rem,2vw,1.125rem);line-height:1.72}
.article h1{font-size:clamp(2.1rem,5vw,4rem)}
.article h2{font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.2;margin-top:2em;scroll-margin-top:1rem}
.article .back{display:inline-block;margin-bottom:1rem}
.toc,.sources{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.75rem 0}
summary{cursor:pointer;font-weight:700}
#distance+p{border-inline-start:3px solid var(--accent);padding:1rem;background:#fff}
.footer{border-top:1px solid var(--line);justify-content:flex-start}
.skip{position:absolute;left:1rem;top:-4rem;background:#fff;padding:.6rem;z-index:1}
.skip:focus{top:1rem}

.trip-languages{max-width:1180px;margin:auto;padding:1rem clamp(1rem,4vw,3rem);display:flex;gap:.45rem 1rem;flex-wrap:wrap}.trip-languages a{display:inline-block;padding:.25rem .2rem}.trip-languages [aria-current=page]{font-weight:700;color:var(--ink);text-decoration-thickness:2px}.header .brand{direction:ltr}.article [dir=ltr]{unicode-bidi:isolate}


/* BookCars typography and layout */
:root {
  --bookcars-text: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --bookcars-heading: "Montserrat", var(--bookcars-text);
  --bookcars-number: "Inter", var(--bookcars-text);
  --bookcars-tracking: -.025em;
}

:root:lang(he) {
  --bookcars-text: "Noto Sans Hebrew", "Inter", Arial, sans-serif;
  --bookcars-heading: var(--bookcars-text);
  --bookcars-tracking: normal;
}

:root:lang(zh) {
  --bookcars-text: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Inter", sans-serif;
  --bookcars-heading: var(--bookcars-text);
  --bookcars-tracking: normal;
}

html body {
  font-family: var(--bookcars-text);
  font-size: 1rem;
  line-height: 1.6;
}

html :is(input, select, textarea, button) { font-family: var(--bookcars-text); }
html :is(input, select, textarea) { font-size: 1rem; }
html :is(h1, h2, h3) {
  font-family: var(--bookcars-heading);
  font-weight: 700;
  letter-spacing: var(--bookcars-tracking);
  line-height: 1.16;
  overflow-wrap: anywhere;
}

html main h1 { font-size: clamp(2rem, 4.8vw, 4rem); }
html main h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
html main h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

html .hero .hero-copy h1 {
  font-size: clamp(2.15rem, 5.4vw, 4.65rem);
  font-weight: 800;
  line-height: 1.07;
}

html:is(:lang(de), :lang(tr), :lang(he), :lang(zh)) .hero .hero-copy h1 {
  font-size: clamp(2rem, 4.65vw, 4.1rem);
}

html .hero .hero-mileage {
  font-family: var(--bookcars-text);
  font-size: clamp(.94rem, 1.8vw, 1.15rem);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.4;
}

html .hero-copy p.intro,
html .car-content p.car-description,
html .seo-content p,
html .seo-content li {
  font-size: 1rem;
  line-height: 1.68;
}

html .hero-copy p.intro { max-inline-size: 38ch; }
html:lang(zh) .hero-copy p.intro { max-inline-size: 27em; line-height: 1.75; }

html .hero-photo :is(.photo-label, .photo-bottom) {
  font-family: var(--bookcars-text);
  font-weight: 650;
  letter-spacing: normal;
  line-height: 1.24;
  text-shadow: 0 1px 4px #0009;
}
html .hero-photo .photo-label { font-size: .8rem; }
html .hero-photo .photo-bottom { font-size: clamp(1rem, 2.3vw, 1.75rem); }

html .car-content h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
html .car-content .specs span { font-size: .8125rem; line-height: 1.45; }
html .car-bottom { flex-wrap: wrap; gap: .65rem; }
html .car-bottom b {
  font-family: var(--bookcars-number);
  font-size: clamp(1.65rem, 2.8vw, 2.1rem);
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.1;
}
html .car-bottom span,
html .car-bottom .total { font-size: .875rem; line-height: 1.45; }
html .car-bottom .total { font-weight: 600; font-variant-numeric: tabular-nums; }

html :is(.button, .outline, .navcta, .contact-option) {
  font-family: var(--bookcars-text);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.35;
}

html main article.article { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.72; }
html main article.article h1 { font-size: clamp(2rem, 4.7vw, 3.5rem); }
html main article.article h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
html main article.article p { line-height: 1.72; }
html main .cards .km { font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  html .hero .hero-copy h1,
  html:is(:lang(de), :lang(tr), :lang(he), :lang(zh)) .hero .hero-copy h1 {
    font-size: clamp(1.9rem, 8.4vw, 2.6rem);
  }
}

/* Keep typography consistent where the language and page styles specialize it. */
html[lang] body { font-family: var(--bookcars-text); }
html:root:lang(zh) body { font-family: var(--bookcars-text); }
html[lang] main :is(h1, h2, h3) { letter-spacing: var(--bookcars-tracking); }
html[lang] .hero .hero-copy h1 { letter-spacing: var(--bookcars-tracking); }
html .hero h2.seo-service-heading { font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.4; }
html .seo-content .service-lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
html .hero .photo-label { text-shadow: none; gap: .5rem; }
html .hero .photo-label > :last-child { flex-shrink: 0; }
html .hero .photo-bottom { max-inline-size: calc(100% - 40px); overflow-wrap: anywhere; }
html .hero-copy, html .section-top > *, html .datebar > *, html .steps > * { min-inline-size: 0; }
html .datebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, auto); }
html .datebar label { font-size: .8125rem; }
html .steps p, html .terms p { font-size: 1rem; line-height: 1.7; }
html footer { overflow-wrap: anywhere; }
html footer :is(p, small) { font-size: .8125rem; }
html dialog :is(h2, h3) { padding-inline-end: 1.75rem; }
html dialog pre { overflow-wrap: anywhere; }
html .language-picker select { font-size: .875rem; }

html a:is([href^="https://wa.me/"], [href^="https://t.me/"], #whatsapp-request) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding: 0;
  gap: 0;
  vertical-align: middle;
  font-size: 0;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: .625rem;
  color: var(--ink);
  background: #fff;
}
html a:is([href^="https://wa.me/"], [href^="https://t.me/"], #whatsapp-request):hover {
  border-color: currentColor;
  background: var(--paper);
}
html a:is([href^="https://wa.me/"], [href^="https://t.me/"], #whatsapp-request)::before {
  content: "";
  display: block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background: currentColor;
  mask: var(--messenger-icon) center / contain no-repeat;
}
html a:is([href^="https://wa.me/"], #whatsapp-request) {
  color: #157149;
  --messenger-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2a9.84 9.84 0 0 0-8.53 14.76L2 22l5.4-1.42A9.9 9.9 0 1 0 12.04 2Zm0 18.05c-1.48 0-2.92-.4-4.16-1.14l-.3-.18-3.2.84.85-3.12-.2-.32a8.25 8.25 0 1 1 7.01 3.92Zm4.53-6.17c-.25-.12-1.47-.72-1.7-.8-.23-.09-.4-.12-.56.12-.17.25-.64.8-.78.97-.15.17-.29.19-.54.06-.25-.12-1.05-.39-2-1.24-.74-.66-1.24-1.47-1.39-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.38-.43.12-.15.16-.25.25-.42.08-.16.04-.31-.03-.43-.06-.13-.56-1.35-.76-1.85-.2-.48-.41-.41-.56-.42h-.47c-.17 0-.44.06-.67.31-.23.25-.87.85-.87 2.07 0 1.22.89 2.41 1.02 2.57.12.17 1.75 2.68 4.23 3.75.59.25 1.05.4 1.41.52.6.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.15-1.18-.06-.1-.23-.16-.48-.29Z'/%3E%3C/svg%3E");
}
html a[href^="https://t.me/"] {
  color: #16688d;
  --messenger-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.8 3.15 2.42 10.63c-1.32.53-1.31 1.26-.24 1.59l4.98 1.55L18.7 6.5c.55-.33 1.04-.15.63.22l-9.35 8.44-.35 5.16c.51 0 .73-.23 1.01-.5l2.43-2.36 5.06 3.74c.93.52 1.6.25 1.84-.86L23.3 4.7c.34-1.38-.53-2-1.5-1.55Z'/%3E%3C/svg%3E");
}
html footer a:is([href^="https://wa.me/"], [href^="https://t.me/"]) { margin-block-end: .35rem; }
html .header-actions { min-inline-size: 0; }
html header nav:not(.trip-languages) { align-items: center; }
html header nav a { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  html .datebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  html .hero-photo { min-height: clamp(15rem, 86vw, 22.5rem); }
  html .section-top { overflow-wrap: anywhere; }
  html .car-content { padding: clamp(1rem, 5vw, 1.375rem); }
  html .car-bottom .outline { max-inline-size: 100%; }
}
@media (max-width: 380px) {
  html .datebar { grid-template-columns: minmax(0, 1fr); }
  html .datebar .button { justify-content: center; }
}
