/* ==========================================================================
   tel-aviv.taxi — "Signal" (2026 rebuild)
   One stylesheet, written from zero for the new site. No legacy layers.
   Palette: slate-green night, acid lime signal, warm brass for fares.
   Motif: the transfer ticket — dashed perforations, mono numerals, 1px rules.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --night: #0B1310;
  --night-2: #101C17;
  --surface: #14211B;
  --surface-2: #1A2A22;
  --line: #25382F;
  --line-2: #2F463B;
  --ink: #F2F7F4;
  --ink-2: #CFDDD6;
  --muted: #93AAA0;
  --acid: #D8FF3E;
  --acid-dim: #B4D42F;
  --acid-ink: #14210F;
  --brass: #F2B23C;
  --danger: #FF7A6B;
  --ok: #56D68A;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Heebo, Arial, sans-serif;
  --sans-he: "Heebo", -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step: clamp(14px, 1.6vw, 18px);
  --wrap: 1160px;
  --gut: clamp(16px, 4vw, 40px);
  --r: 14px;
  --r-sm: 8px;
  --dur: 160ms;
  --ease: cubic-bezier(.2, .8, .3, 1);

  /* The shared reviews service injects its own block with its own variable
     names. These aliases let that block inherit this identity instead of the
     browser defaults, so /en/reviews.html and /he/reviews.html look native. */
  --bg: var(--night);
  --band: var(--surface);
  --font: var(--sans);
  --display: var(--sans);
  --display-he: var(--sans-he);
  --rule: var(--line);
  --rule-strong: var(--line-2);
  --accent: var(--acid);
  --accent-strong: var(--acid-dim);
  --accent-tint: rgba(216, 255, 62, .12);
  --mark: var(--brass);
  --focus: var(--acid);
  --r-md: var(--r-sm);
  --r-full: 999px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;
  --s-8: 48px;
  --dur-fast: 120ms;
}

* { box-sizing: border-box; }
/* Hebrew is set in Heebo, self-hosted from this domain — no third-party font
   request, and the same files the reviews service already relies on. */
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/heebo-400-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB00-FB4F;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/heebo-400-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB00-FB4F;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/heebo-400-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB00-FB4F;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
html[lang="he"] body { font-family: var(--sans-he); line-height: 1.7; letter-spacing: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acid); text-decoration: none; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
h1 { font-size: clamp(30px, 4.6vw, 56px); }
h2 { font-size: clamp(23px, 2.7vw, 34px); }
h3 { font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.015em; }
p { margin: 0; }
strong { color: var(--ink); }
::selection { background: var(--acid); color: var(--acid-ink); }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--acid); outline-offset: 3px; border-radius: 4px;
}
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 12px; inset-block-start: 12px; z-index: 99; background: var(--acid); color: var(--acid-ink); padding: 8px 14px; border-radius: var(--r-sm); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --------------------------------------------------------------- header -- */
.hdr {
  position: sticky; inset-block-start: 0; z-index: 60;
  background: color-mix(in srgb, var(--night) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  border-block-end: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; letter-spacing: -0.02em; }
.brand-mark {
  display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px;
  background: var(--acid); color: var(--acid-ink); border-radius: 9px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0;
}
.brand-name { font-size: 15px; }
.brand-sub { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--muted); font-weight: 400; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav a {
  color: var(--ink-2); font-size: 14px; font-weight: 500; padding: 8px 11px; border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
html[lang="he"] .nav a { font-size: 14.5px; }
.nav a:hover { background: var(--surface); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--acid); }
.hdr-actions { display: flex; align-items: center; gap: 8px; }
.lang { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.lang a { color: var(--muted); }
.lang a[aria-current="true"] { color: var(--ink); }
.lang span { opacity: .4; padding-inline: 4px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn-acid { background: var(--acid); color: var(--acid-ink); border-color: var(--acid); }
.btn-acid:hover { background: var(--acid-dim); border-color: var(--acid-dim); color: var(--acid-ink); }
.btn-lg { min-height: 48px; padding: 12px 22px; font-size: 15px; }
.burger { display: none; }

/* -------------------------------------------------------------- sections -- */
.sec { padding-block: clamp(44px, 6vw, 88px); border-block-start: 1px solid var(--line); }
.sec:first-of-type { border-block-start: 0; }
.sec-head { display: grid; gap: 10px; margin-block-end: clamp(22px, 3vw, 36px); max-width: 62ch; }
.kicker {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--acid);
}
.sec p { color: var(--muted); }
.sec p + p { margin-block-start: 12px; }
.lead { font-size: clamp(16.5px, 1.5vw, 19px); color: var(--ink-2); line-height: 1.6; }

/* ------------------------------------------------------------------ hero -- */
.hero { padding-block: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 56px); }
.hero-grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
.hero-copy { display: grid; gap: 16px; align-content: start; }
.hero h1 { max-width: 22ch; text-wrap: balance; }
html[lang="he"] .hero h1 { max-width: 24ch; }
.hero .lead { max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 4px; }
.hero-note { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.points { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 6px 0 0; list-style: none; }
.points li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.points li::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--acid); }

/* ticket board: the signature element */
.board {
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface);
  overflow: hidden;
}
.board-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px dashed var(--line-2); }
.board-top span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.board-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 18px 16px; }
.board-city { display: grid; gap: 2px; }
.board-code { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.board-label { font-size: 12.5px; color: var(--muted); }
.board-city--end { text-align: end; }
.board-arrow { font-family: var(--mono); color: var(--acid); font-size: 18px; }
.board-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-block-start: 1px dashed var(--line-2); }
.board-fact { padding: 12px 16px; display: grid; gap: 2px; }
.board-fact + .board-fact { border-inline-start: 1px dashed var(--line-2); }
.board-fact b { font-family: var(--mono); font-size: 15px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.board-fact .fare { color: var(--brass); font-size: 17px; }
.board-fact span { font-size: 11.5px; color: var(--muted); font-family: var(--mono); letter-spacing: .06em; }
.board-foot { padding: 12px 16px; border-block-start: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.board-foot small { color: var(--muted); font-size: 12.5px; }
.fare { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--brass); }

/* ----------------------------------------------------------------- cards -- */
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  display: grid; gap: 10px; align-content: start;
  padding: 18px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-2px); }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--acid); }
.card p { font-size: 14px; color: var(--muted); }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.card-meta b { color: var(--brass); font-weight: 700; }
.card-link { font-size: 13.5px; font-weight: 600; color: var(--acid); }
.card-link::after { content: " ↗"; font-family: var(--mono); }

/* route table */
.routes { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.route {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr) auto;
  align-items: center; gap: 12px; padding: 13px 16px;
  border-block-end: 1px solid var(--line); background: var(--surface);
}
.route:last-child { border-block-end: 0; }
.route:hover { background: var(--surface-2); }
.route-name { color: var(--ink); font-weight: 600; font-size: 15px; }
.route-name small { display: block; color: var(--muted); font-weight: 400; font-size: 12.5px; }
.route-num { font-family: var(--mono); font-size: 13px; color: var(--ink-2); letter-spacing: .04em; }
.route-fare { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--brass); text-align: end; white-space: nowrap; }
.route-fare small { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: .06em; }

/* ------------------------------------------------------------------- FAQ -- */
.faq { display: grid; gap: 0; border-block-start: 1px solid var(--line); }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 2px; cursor: pointer; list-style: none;
  color: var(--ink); font-weight: 600; font-size: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--acid); font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 2px 18px; color: var(--muted); max-width: 74ch; }

/* reviews — the shared service bakes its list and form into these slots */
.reviews-panel { margin-block-start: 26px; padding-block-start: 20px; border-block-start: 1px solid var(--line); display: grid; gap: 12px; }
.reviews-panel h2 { font-size: clamp(19px, 2.2vw, 25px); }
.reviews-panel p { color: var(--muted); }
/* The service parks its anti-spam honeypot 9999px off-canvas with
   left:-9999px. On a right-to-left page that widens the scroll area and puts a
   horizontal scrollbar under the whole page, so pin the box instead: still in
   the DOM for bots, invisible and inert for people. */
.rv-hp {
  position: absolute !important;
  inset-inline-start: auto !important;
  left: 0 !important; right: auto !important; top: 0 !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
  clip-path: inset(50%) !important; opacity: 0 !important;
}

/* ------------------------------------------------------------- book form -- */.book { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); padding: clamp(16px, 2.4vw, 24px); display: grid; gap: 14px; }
.book-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.book-head h2 { font-size: clamp(20px, 2.2vw, 26px); }
.book-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.book-steps li { padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.book-steps li[aria-current="step"] { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); }
.book-steps li.is-done { border-color: var(--line-2); color: var(--ink-2); }
.fields { display: grid; gap: 12px; }
.row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--night-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: inherit; font-size: 15px;
}
.field textarea { min-height: 78px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--acid); outline-offset: 1px; border-color: var(--acid);
}
.hint { font-size: 12.5px; color: var(--muted); }
.error { color: var(--danger); font-size: 13.5px; font-weight: 600; }
.error[hidden] { display: none; }
.book-fare { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--night-2); }
.book-fare span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.book-fare b { font-family: var(--mono); font-size: 16px; color: var(--brass); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .btn { flex: 1 1 160px; }
.summary { border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 14px; background: var(--night-2); display: grid; gap: 10px; }
.summary[hidden] { display: none; }
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.summary dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.summary dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.summary .actions .btn { flex: 1 1 140px; }

/* ---------------------------------------------------------------- footer -- */
.ftr { border-block-start: 1px solid var(--line); background: var(--night-2); padding-block: clamp(32px, 4vw, 52px) 24px; }
.ftr-grid { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.ftr h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-block-end: 10px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ftr a { color: var(--ink-2); font-size: 14px; }
.ftr a:hover { color: var(--acid); }
.ftr-brand p { color: var(--muted); font-size: 13.5px; margin-block-start: 10px; max-width: 40ch; }
.ftr-tel { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 12px; font-family: var(--mono); font-size: 15px; color: var(--ink); }
.ftr-bottom { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; margin-block-start: 26px; padding-block-start: 16px; border-block-start: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------ mobile bar -- */
.mbar {
  display: none; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70;
  background: color-mix(in srgb, var(--night) 94%, transparent);
  backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--line-2);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  grid-template-columns: 1fr 1fr 1.2fr; gap: 8px;
}
.mbar a {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; border-radius: var(--r-sm); font-size: 13px; font-weight: 700;
  border: 1px solid var(--line-2); color: var(--ink); background: var(--surface);
}
.mbar a.mbar-primary { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); }
.mbar svg { inline-size: 16px; block-size: 16px; }

/* ------------------------------------------------------------ utilities -- */
.banner {
  border: 1px dashed var(--line-2); border-radius: var(--r); padding: 14px 16px;
  background: var(--night-2); color: var(--ink-2); font-size: 14px;
}
.banner b { color: var(--acid); }
.crumbs { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--acid); }
.crumbs span { opacity: .5; padding-inline: 6px; }
.two { display: grid; gap: clamp(20px, 3vw, 34px); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
.note { font-size: 13.5px; color: var(--muted); }
table.data { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
table.data th, table.data td { padding: 12px 14px; text-align: start; border-block-end: 1px solid var(--line); font-size: 14.5px; }
table.data th { background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
table.data td { color: var(--ink-2); }
table.data tr:last-child td { border-block-end: 0; }
table.data td.num { font-family: var(--mono); color: var(--brass); white-space: nowrap; }

/* ---------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------ responsive -- */
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); }
}
@media (max-width: 859px) {
  .nav, .hdr-actions .lang { display: none; }
  .burger {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin-inline-start: auto; min-height: 44px; padding: 8px 14px;
    background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-sm);
    color: var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; cursor: pointer;
  }
  .mbar { display: grid; }
  body { padding-block-end: 74px; }
  .btn, .hero-cta .btn, .actions .btn { min-height: 46px; }
  .two { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .route { grid-template-columns: 1fr auto; }
  .route-num { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .row { grid-template-columns: 1fr; }
  .board-row { grid-template-columns: 1fr auto; }
  .board-city--end { text-align: start; grid-column: 1; }
  .board-arrow { display: none; }
  .board-facts { grid-template-columns: 1fr; }
  .board-fact + .board-fact { border-inline-start: 0; border-block-start: 1px dashed var(--line-2); }
  .ftr-grid { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 100%; }
}
@media print {
  .hdr, .mbar, .ftr, .book, .actions { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .card, .board, table.data { border-color: #ccc; background: #fff; }
  h1, h2, h3, .card h3 a { color: #000; }
}