/* ============================================================================
   TEL AVIV AIRPORT TAXI — Transit diagram
   See DESIGN.md for the system and docs/CONTRAST.md for measured values.

   Three ideas:
     1. The destination ring is real information design, not a feature grid.
     2. Two type voices — serif display (authored) + grotesque data (functional).
     3. Figures are set as figures: tabular numerals, the signature element.

   This is a FLAT system. Separation is space, then rule, then band.
   There are exactly three elevation levels and none of them glow.
   ========================================================================== */

/* ---------- Fraunces — Latin display serif, variable 400-700 ---------- */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Frank Ruhl Libre — Hebrew display serif, variable ---------- */
@font-face{
  font-family:'Frank Ruhl Libre';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/frankruhl-hebrew.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

/* ---------- Figtree — Latin UI grotesque, variable 400-800 ---------- */
@font-face{
  font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Heebo — Hebrew UI ---------- */
@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+FB1D-FB4F}
@font-face{font-family:Heebo;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/heebo-500-hebrew.woff2) format(woff2);unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Heebo;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/heebo-700-hebrew.woff2) format(woff2);unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Heebo;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/heebo-800-hebrew.woff2) format(woff2);unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Heebo;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/heebo-400-latin.woff2) format(woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Heebo;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/heebo-700-latin.woff2) format(woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================================
   Tokens — the only place raw colour literals are allowed
   ========================================================================== */
:root{
  color-scheme:light;

  /* surfaces */
  --bg:#FFFFFF;
  --band:#EEF1F6;
  --board:#0B1220;

  /* text */
  --ink:#0B1220;
  --ink-2:#3A4557;
  --muted:#4F5967;

  /* accent — line blue: links AND the primary CTA fill */
  --accent:#1B48C9;
  --accent-strong:#1436A0;
  --accent-tint:#EDF1FD;

  /* mark — hub gold. FILLS and LARGE display only, never small text.
     mark-strong is LIGHTER than mark on purpose: it is the hover/active state
     of a gold fill under dark ink text, so hover must lighten to gain contrast,
     not darken (a darker gold under navy text drops below the Lc 60 floor). */
  --mark:#ECAA28;
  --mark-strong:#F2B93E;
  --mark-tint:#FDF4E3;

  /* corridors — categorical, always accompanied by a text label */
  --line-a:#C2410C;
  --line-b:#0E7C86;
  --line-c:#6D28D9;
  --line-d:#BE185D;   /* Jerusalem corridor — Route 1 east */

  /* lines */
  --rule:#DCE1EA;
  --rule-strong:#B9C2D0;

  --danger:#A81208;
  --focus:#1B48C9;
  --focus-on-dark:#ECAA28;

  /* text on the accent / whatsapp / ink fills */
  --on-accent:#FFFFFF;

  --whatsapp:#0F6B43;
  --whatsapp-strong:#0B5535;

  /* text on the dark board */
  --on-board:#FFFFFF;
  --on-board-2:#D3D9E4;

  /* type — two voices */
  --font:'Figtree',Heebo,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-he:'Heebo','Figtree',system-ui,sans-serif;
  --display:'Fraunces','Frank Ruhl Libre',Georgia,'Times New Roman',serif;
  --display-he:'Frank Ruhl Libre','Fraunces',Georgia,serif;

  /* radius — minimal, diagrams are drawn with straight lines */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-full:999px;

  /* elevation — three levels, and none of them glow */
  --elev-0:none;
  --elev-1:0 1px 0 var(--rule);
  --elev-2:0 10px 30px -12px rgb(11 18 32 / .18);

  /* spacing — 8px grid */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem;
  --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem; --s-24:8rem;

  /* motion */
  --dur-fast:140ms; --dur:200ms; --dur-slow:320ms;
  --ease:cubic-bezier(.2,0,0,1);

  --wrap:1120px; --header-h:72px;
}

/* ============================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-block-start:calc(var(--header-h) + var(--s-4));
}
body{
  margin:0;
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:lang(he) body,[dir="rtl"] body{font-family:var(--font-he);line-height:1.75}
img,svg{display:block;max-width:100%}

/* Two voices: serif display for h1/h2 only. h3+ is a label, so it is sans. */
h1,h2{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  color:var(--ink);
  text-wrap:balance;
  letter-spacing:-.02em;
}
:lang(he) h1,:lang(he) h2,[dir="rtl"] h1,[dir="rtl"] h2{
  font-family:var(--display-he);
  letter-spacing:0;
  font-weight:600;
}
h1{font-size:clamp(2.5rem,5.5vw,4rem);line-height:1.06}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.14}
h3,h4{
  margin:0;font-family:var(--font);font-weight:700;line-height:1.3;
  color:var(--ink);letter-spacing:-.005em;text-wrap:balance;
}
:lang(he) h3,:lang(he) h4,[dir="rtl"] h3,[dir="rtl"] h4{font-family:var(--font-he);letter-spacing:0}
h3{font-size:1.25rem}
h4{font-size:1.0625rem}

p{margin:0;text-wrap:pretty}
ul,ol{margin:0 0 1em;padding-inline-start:1.25rem}
li{margin-block-end:.4rem}

a{
  color:var(--accent);
  text-underline-offset:3px;
  text-decoration-color:var(--rule-strong);
  transition:color var(--dur-fast) var(--ease),text-decoration-color var(--dur-fast) var(--ease);
}
a:hover{color:var(--accent-strong);text-decoration-color:currentColor}
input,select,textarea,button{font:inherit}

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
/* On the dark board the blue ring disappears, so the ring switches to gold. */
.board :where(a,button,summary,[tabindex]):focus-visible{outline-color:var(--focus-on-dark)}

::selection{background:var(--accent);color:var(--on-accent)}

.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5)}
@media(min-width:768px){.container{padding-inline:var(--s-8)}}

.sr-only,.skip-link{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link:focus{
  inset-block-start:var(--s-3);inset-inline-start:var(--s-3);width:auto;height:auto;margin:0;
  clip:auto;z-index:200;background:var(--ink);color:var(--on-accent);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-sm);font-weight:700;text-decoration:none;
}
.muted{color:var(--muted)}

/* ============================================================================
   Figures — the signature element. Tabular numerals, always.
   ========================================================================== */
.figure,
.facts-table .num,
.facts-table .price-amount{
  font-family:var(--font);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.figure{
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
}
.figure-lg{font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.1}
.figure-row{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-block:var(--s-5) 0}
.figure-cell{display:grid;gap:var(--s-1);min-width:7rem}
.figure-cell dt,.figure-label{
  font-size:.8125rem;font-weight:600;color:var(--muted);
  letter-spacing:.01em;text-transform:none;
}
.figure-cell dd{margin:0}

/* ============================================================================
   Buttons — every variant declares all states
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:0 var(--s-6);
  border:1px solid transparent;border-radius:var(--r-md);
  font-family:var(--font);font-weight:700;font-size:1rem;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),transform var(--dur-fast) var(--ease);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--band);color:var(--muted);border-color:var(--rule);
  cursor:not-allowed;transform:none;
}
.btn:disabled:hover{background:var(--band);color:var(--muted);border-color:var(--rule)}
.btn svg{flex-shrink:0}

/* Primary — accent fill, white text. One accent, two roles (link + CTA). */
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-strong);color:var(--on-accent)}
.btn-primary:active{background:var(--accent-strong);color:var(--on-accent)}

.btn-whatsapp{background:var(--whatsapp);color:var(--on-accent)}
.btn-whatsapp:hover{background:var(--whatsapp-strong);color:var(--on-accent)}
.btn-whatsapp:active{background:var(--whatsapp-strong);color:var(--on-accent)}

/* Outline — the boundary uses --rule-strong for presence against the page.
   It is decorative: the button is identified by its text label, not its
   border, so the boundary carries no 3:1 non-text requirement of its own. */
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-ghost:hover{background:var(--band);color:var(--ink);border-color:var(--ink-2)}
.btn-ghost:active{background:var(--band);color:var(--ink)}

/* On the dark board */
.btn-board{background:var(--mark);color:var(--ink)}
.btn-board:hover{background:var(--mark-strong);color:var(--ink)}
.btn-board:active{background:var(--mark-strong);color:var(--ink)}

.btn-lg{min-height:54px;padding:0 var(--s-8);font-size:1.0625rem}
.btn-sm{min-height:40px;padding:0 var(--s-4);font-size:.9375rem}

/* ============================================================================
   Line badge — corridor colour AND corridor name. Never colour alone.
   ========================================================================== */
.line-badge{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border:1px solid var(--rule);border-radius:var(--r-full);
  background:var(--bg);
  font-family:var(--font);font-size:.8125rem;font-weight:700;color:var(--ink);
  white-space:nowrap;
}
.line-badge::before{
  content:"";width:10px;height:10px;border-radius:var(--r-full);
  background:var(--badge,var(--accent));flex-shrink:0;
}
.line-badge--a{--badge:var(--line-a)}
.line-badge--b{--badge:var(--line-b)}
.line-badge--c{--badge:var(--line-c)}
.line-badge .line-road{color:var(--muted);font-weight:600}

/* ============================================================================
   Header — white sticky bar with a hairline. No dark canvas.
   ========================================================================== */
.site-header{
  position:sticky;inset-block-start:0;z-index:100;
  background:var(--bg);
  border-block-end:1px solid var(--rule);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  min-height:var(--header-h);
}
.brand{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--font);font-weight:800;font-size:1.1875rem;letter-spacing:-.015em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.brand:hover{color:var(--ink);text-decoration:none}
.brand-mark{width:30px;height:30px;flex-shrink:0}
.brand-accent{color:var(--accent)}

.main-nav{display:none}
@media(min-width:1000px){.main-nav{display:block}}
.nav-list{display:flex;align-items:center;gap:var(--s-1);list-style:none;margin:0;padding:0}
.nav-list li{margin:0}
.nav-link{
  position:relative;display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-3);border-radius:var(--r-sm);
  background:none;border:0;cursor:pointer;
  color:var(--ink-2);font-weight:500;font-size:.9375rem;text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.nav-link:hover{background:var(--band);color:var(--ink);text-decoration:none}
.nav-link.is-active{color:var(--accent);font-weight:700}
.nav-link.is-active::after{
  content:"";position:absolute;inset-block-end:.1rem;inset-inline:var(--s-3);
  height:2px;border-radius:2px;background:var(--accent);
}

.nav-drop{position:relative}
.nav-drop-btn{font:inherit;font-weight:500;text-align:start}
.chev{transition:transform var(--dur) var(--ease)}
.nav-drop.open .chev{transform:rotate(180deg)}
.nav-drop-menu{
  position:absolute;inset-block-start:calc(100% + var(--s-2));inset-inline-start:0;
  min-width:290px;list-style:none;margin:0;padding:var(--s-2);
  background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--elev-2);display:none;z-index:110;
}
.nav-drop.open .nav-drop-menu{display:block}
.nav-drop-menu li{margin:0}
.nav-drop-menu .nav-link{display:block;width:100%;border-radius:var(--r-md);padding:var(--s-3) var(--s-4)}
.nav-drop-menu .nav-link.is-active::after{display:none}
.nav-drop-group{
  padding:var(--s-2) var(--s-4) var(--s-1);
  font-size:.75rem;font-weight:700;color:var(--muted);
}
.header-actions{display:flex;align-items:center;gap:var(--s-3)}

.lang-toggle{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);
  border:1px solid var(--rule-strong);border-radius:var(--r-sm)}
.lang-switch{display:inline-flex;align-items:center;gap:var(--s-2);font-size:.875rem;font-weight:600}
.lang-link{color:var(--ink-2);text-decoration:none;padding:var(--s-2) var(--s-1)}
.lang-link:hover{color:var(--accent)}
.lang-link.lang-cur{color:var(--ink);font-weight:700}
.lang-sep{color:var(--rule-strong)}

.mobile-menu{display:block}
@media(min-width:1000px){.mobile-menu{display:none}}
.mobile-menu-btn{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  list-style:none;cursor:pointer;
  border:1px solid var(--rule-strong);border-radius:var(--r-md);
  background:transparent;color:var(--ink);
  transition:background-color var(--dur-fast) var(--ease);
}
.mobile-menu-btn::-webkit-details-marker{display:none}
.mobile-menu-btn:hover{background:var(--band)}
.burger,.burger::before,.burger::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor}
.burger{position:relative}
.burger::before,.burger::after{content:"";position:absolute;inset-inline-start:0}
.burger::before{inset-block-start:-6px}
.burger::after{inset-block-start:6px}
.mobile-menu-panel{
  position:absolute;inset-inline:0;inset-block-start:100%;z-index:110;
  background:var(--bg);border-block-end:1px solid var(--rule);
  box-shadow:var(--elev-2);
  padding:var(--s-4) var(--s-5) var(--s-6);
  max-height:calc(100dvh - var(--header-h));overflow-y:auto;
}
.mobile-link{
  display:block;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);
  color:var(--ink);font-weight:500;font-size:1rem;text-decoration:none;
}
.mobile-link:hover{background:var(--band);color:var(--ink)}
.mobile-link.is-active{color:var(--accent);font-weight:700}
.mobile-sub{
  padding-inline-start:var(--s-4);margin-block:var(--s-4) var(--s-1);
  font-size:.75rem;font-weight:700;color:var(--muted);
}
.mobile-actions{display:grid;gap:var(--s-3);margin-block-start:var(--s-5)}

/* ============================================================================
   Hero — white canvas. The diagram, not a dark banner, is the opening move.
   ========================================================================== */
.hero{padding-block:var(--s-12) var(--s-10);background:var(--bg)}
@media(min-width:900px){.hero{padding-block:var(--s-16) var(--s-12)}}
.hero-inner{display:grid;gap:var(--s-10);align-items:center}
@media(min-width:960px){.hero-inner{grid-template-columns:1fr 1fr;gap:var(--s-12)}}
.hero-copy h1{max-width:20ch}
.lead{
  margin-block-start:var(--s-5);font-size:1.125rem;line-height:1.65;
  color:var(--ink-2);max-width:46ch;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-8)}
.hero-points{
  margin:var(--s-8) 0 0;padding:0;list-style:none;display:grid;gap:0;
  border-block-start:1px solid var(--rule);
}
.hero-points li{
  margin:0;position:relative;padding-inline-start:1.5rem;
  padding-block:var(--s-3);font-size:.9688rem;color:var(--ink-2);
  border-block-end:1px solid var(--rule);
}
.hero-points li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:1.1em;
  width:.6rem;height:2px;background:var(--accent);
}

/* Photo — framed by a rule, captioned truthfully. */
.hero-photo{margin:0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--band)}
.hero-photo img{display:block;width:100%;height:auto}
.hero-photo figcaption{
  padding:var(--s-3) var(--s-4);font-size:.8125rem;color:var(--muted);
  background:var(--bg);border-block-start:1px solid var(--rule);
}
.photo{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--band)}
.photo img{display:block;width:100%;height:auto}
.photo-caption{
  padding:var(--s-3) var(--s-4);font-size:.8125rem;color:var(--muted);
  background:var(--bg);border-block-start:1px solid var(--rule);
}

/* ============================================================================
   The ring diagram
   ========================================================================== */
.ring{margin:0;padding:var(--s-5);background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-lg)}
.ring svg{width:100%;height:auto;overflow:visible;font-family:var(--font)}
.ring text{font-family:var(--font);fill:var(--ink)}
.ring .ring-hub-label{font-size:15px;font-weight:800}
.ring .ring-hub-sub{font-size:12px;font-weight:600;fill:var(--muted)}
.ring .ring-line-label{font-size:12.5px;font-weight:700;fill:var(--ink-2)}
.ring .ring-stop{font-size:14.5px;font-weight:600;fill:var(--ink)}
.ring .ring-stop-sub{font-size:12px;font-weight:600;fill:var(--muted)}
.ring .ring-axis{stroke:var(--rule);stroke-width:1}
.ring .ring-trunk{stroke:var(--ink);stroke-width:3;fill:none}
.ring .ring-branch{fill:none;stroke-width:4;stroke-linecap:round}
.ring .ring-branch--a{stroke:var(--line-a)}
.ring .ring-branch--b{stroke:var(--line-b)}
.ring .ring-branch--c{stroke:var(--line-c)}
.ring .ring-stop-dot{stroke:var(--bg);stroke-width:2.5}
.ring .ring-hub{fill:var(--mark)}
.ring-caption{
  margin-block-start:var(--s-4);padding-block-start:var(--s-4);
  border-block-start:1px solid var(--rule);
  font-size:.8125rem;color:var(--muted);
}

/* Route strip — the corridor line at the top of a destination page. */
.route-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  padding-block:var(--s-4);
  border-block:1px solid var(--rule);
  margin-block-end:var(--s-8);
  font-size:.9375rem;
}
.route-strip .route-end{font-weight:700;color:var(--ink)}
.route-strip .route-arrow{color:var(--muted)}

/* ============================================================================
   Board — the one dark surface. A departure board, not a theme.
   ========================================================================== */
.board{background:var(--board);color:var(--on-board);padding-block:var(--s-12)}
.board h2,.board h3{color:var(--on-board)}
.board p{color:var(--on-board-2)}
.board a{color:var(--on-board)}
.board a:hover{color:var(--mark)}
.board-rows{display:grid;gap:0;margin-block-start:var(--s-8);border-block-start:1px solid rgb(255 255 255 / .16)}
.board-row{
  display:grid;grid-template-columns:1fr auto;gap:var(--s-4);
  align-items:baseline;
  padding-block:var(--s-4);
  border-block-end:1px solid rgb(255 255 255 / .16);
}
.board-row dt{font-weight:600;color:var(--on-board)}
.board-row dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--on-board)}
.board-note{color:var(--on-board-2);font-size:.875rem;margin-block-start:var(--s-5);max-width:60ch}
/* Gold on the board clears the LARGE floor (Lc 66.7) and the non-text floor,
   but not the small-text floor. Restricted to display and graphic roles. */
.board-highlight{color:var(--mark);font-weight:700;font-size:1.125rem}

/* ============================================================================
   Content sections
   ========================================================================== */
.content-sec{padding-block:var(--s-12)}
@media(min-width:768px){.content-sec{padding-block:var(--s-16)}}
.content-sec--band{background:var(--band)}
.sec-body{max-width:68ch}
.sec-body h2{margin-block-end:var(--s-5)}
.sec-body p + p{margin-block-start:var(--s-4)}
.section-title{margin-block-end:var(--s-4)}
.section-subtitle{color:var(--ink-2);font-size:1.0625rem;margin-block-end:var(--s-8);max-width:60ch}
.sec-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-8)}

/* Rule list — replaces cards. Horizontal hairlines, no boxes. */
.rule-list{list-style:none;padding:0;margin:0;display:grid}
.rule-list li{
  position:relative;margin:0;padding-block:var(--s-4);padding-inline-start:1.5rem;
  color:var(--ink-2);border-block-end:1px solid var(--rule);
}
.rule-list li:first-child{border-block-start:1px solid var(--rule)}
.rule-list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:1.55em;
  width:.6rem;height:2px;background:var(--accent);
}
.rule-list strong{color:var(--ink)}

/* ============================================================================
   Facts table
   ========================================================================== */
.facts-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--bg)}
.facts-table{width:100%;border-collapse:collapse;font-size:.9688rem}
.facts-table th,.facts-table td{
  text-align:start;padding:var(--s-3) var(--s-5);border-block-end:1px solid var(--rule);
}
.facts-table thead th{
  font-family:var(--font);font-size:.75rem;font-weight:700;color:var(--ink-2);
  background:var(--band);white-space:nowrap;
}
.facts-table tbody tr:last-child td,.facts-table tbody tr:last-child th{border-block-end:0}
.facts-table tbody tr{transition:background-color var(--dur-fast) var(--ease)}
.facts-table tbody tr:hover{background:var(--accent-tint)}
.facts-table tbody th{font-weight:600;color:var(--ink)}
.facts-table .num{color:var(--ink)}
.facts-table .price-amount{
  text-align:end;font-weight:700;font-size:1.0625rem;color:var(--accent);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.facts-table .stop-link{font-weight:600;text-decoration:none}
.facts-table .stop-link:hover{text-decoration:underline}
.facts-table .cell-muted{color:var(--muted)}

/* ============================================================================
   Destination grid — diagram-ordered, grouped by corridor
   ========================================================================== */
.corridor-group + .corridor-group{margin-block-start:var(--s-10)}
.corridor-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  margin-block-end:var(--s-5);
}
.corridor-head h3{font-size:1.0625rem}
.stop-grid{display:grid;gap:0;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media(min-width:700px){.stop-grid{grid-template-columns:repeat(2,1fr);column-gap:var(--s-8)}}
.stop-grid li{margin:0}
.stop{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding-block:var(--s-4);
  border-block-end:1px solid var(--rule);
  text-decoration:none;color:var(--ink);
}
.stop:hover{color:var(--accent);text-decoration:none}
.stop-name{font-weight:700}
.stop:hover .stop-name{text-decoration:underline}
.stop-meta{font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.stop-meta::after{content:" →"}
[dir="rtl"] .stop-meta::after{content:" ←"}

/* ============================================================================
   FAQ
   ========================================================================== */
.faq-sec{padding-block:var(--s-12)}
@media(min-width:768px){.faq-sec{padding-block:var(--s-16)}}
.faq-group-title{font-size:1.0625rem;margin-block-end:var(--s-5);color:var(--muted)}
.faq-item{
  border-block-end:1px solid var(--rule);
  padding-block:var(--s-4);
}
.faq-item:first-of-type{border-block-start:1px solid var(--rule)}
.faq-item > summary{
  cursor:pointer;font-weight:700;font-size:1.0625rem;list-style:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  color:var(--ink);
  transition:color var(--dur-fast) var(--ease);
}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary:hover{color:var(--accent)}
.faq-chev{flex-shrink:0;color:var(--muted);transition:transform var(--dur) var(--ease)}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-item[open] > summary{color:var(--accent)}
.faq-item > p,.faq-item > div{
  margin-block-start:var(--s-3);color:var(--ink-2);max-width:64ch;
}

/* ============================================================================
   CTA band — light, ruled. The dark surface is reserved for the board.
   ========================================================================== */
.cta-band{background:var(--band);border-block-start:1px solid var(--rule)}
.cta-inner{
  display:flex;flex-wrap:wrap;gap:var(--s-6);
  align-items:center;justify-content:space-between;
  padding-block:var(--s-12);
}
.cta-band p{color:var(--ink-2);max-width:52ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* ============================================================================
   Footer — light surface, ruled. No dark footer.
   ========================================================================== */
.site-footer{
  background:var(--bg);border-block-start:1px solid var(--rule);
  padding-block:var(--s-12) var(--s-6);font-size:.9375rem;color:var(--ink-2);
}
.foot-grid{display:grid;gap:var(--s-8);grid-template-columns:1fr;margin-block-end:var(--s-8)}
@media(min-width:640px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1.2fr}}
.foot-brand .brand{margin-block-end:var(--s-4)}
.foot-brand p{color:var(--ink-2);max-width:42ch;margin-block-end:var(--s-4)}
.foot-sister a{color:var(--ink-2);font-size:.875rem}
.foot-h{
  font-family:var(--font);font-size:.75rem;font-weight:700;
  color:var(--muted);margin-block-end:var(--s-4);
}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
.foot-col li{margin:0}
.foot-col a{color:var(--ink-2);text-decoration:none}
.foot-col a:hover{color:var(--accent);text-decoration:underline}
.foot-contact a{font-variant-numeric:tabular-nums}
.foot-legal{
  border-block-start:1px solid var(--rule);padding-block-start:var(--s-5);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);
  align-items:center;justify-content:space-between;
}
.foot-legal p{margin:0;color:var(--muted)}
.foot-legal ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-5);margin:0;padding:0}
.foot-legal li{margin:0}
.foot-legal a{color:var(--muted);text-decoration:none}
.foot-legal a:hover{color:var(--accent);text-decoration:underline}

/* ============================================================================
   Mobile CTA bar
   ========================================================================== */
.mobile-cta{display:none}
@media(max-width:640px){
  .mobile-cta{
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-1);
    position:fixed;inset-inline:0;inset-block-end:0;z-index:90;
    padding:var(--s-2);
    background:var(--bg);border-block-start:1px solid var(--rule-strong);
    box-shadow:var(--elev-2);
    padding-block-end:calc(var(--s-2) + env(safe-area-inset-bottom,0px));
  }
  .mobile-cta .mcta{min-height:52px;padding:0 var(--s-2);font-size:.8125rem}
  body{padding-block-end:72px}
}
.mcta{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);
  min-height:52px;border-radius:var(--r-md);
  color:var(--ink-2);font-weight:700;font-size:.8125rem;text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.mcta:hover{background:var(--band);color:var(--ink);text-decoration:none}
.mcta:active{background:var(--band)}
.mcta svg{color:var(--accent)}

/* ============================================================================
   Breadcrumbs
   ========================================================================== */
.crumbs{font-size:.875rem;margin-block-end:var(--s-5)}
.crumbs ol{
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);
  margin:0;padding:0;color:var(--muted);
}
.crumbs li{margin:0}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumb[aria-current="page"],.crumb.cur{color:var(--ink);font-weight:700}
.crumb-sep{color:var(--rule-strong)}

/* ============================================================================
   Contact / 404
   ========================================================================== */
.contact-line{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:baseline;color:var(--ink-2)}
.ga-track{cursor:pointer}
.err-card{max-width:560px;margin-inline:auto;padding-block:var(--s-20)}
.err-code{
  font-family:var(--display);font-weight:700;
  font-size:clamp(3.5rem,11vw,7rem);letter-spacing:-.03em;
  color:var(--accent);line-height:1;
}
:lang(he) .err-code,[dir="rtl"] .err-code{font-family:var(--display-he)}
.err-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-8)}

/* ============================================================================
   Reduced motion — the diagram animates on load, so this is not optional
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .btn:active{transform:none}
  .ring .ring-branch{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
}

/* ============================================================================
   Language chooser (site root) + single-column hero
   ========================================================================== */
.brand-name{display:inline}
.hero-inner--solo{grid-template-columns:1fr}
@media(min-width:960px){.hero-inner--solo{grid-template-columns:1fr;max-width:52rem}}

/* Ring diagram — "you are here" state on a destination page.
   The current stop is distinguished three ways, so colour is never the only
   signal: a larger dot, a bold ink label, and its corridor stays at full
   weight while the other two recede. */
.ring .ring-branch--dim{stroke-width:2.5;opacity:.4}
.ring .ring-stop-dot--cur{stroke-width:3}
.ring .ring-stop-dot--dim{opacity:.4}
.ring .ring-stop--cur{font-weight:800;font-size:16px;fill:var(--ink)}
.ring .ring-stop--dim{fill:var(--muted)}
.ring .ring-stop-sub--cur{fill:var(--ink-2);font-weight:700}
.ring .ring-stop-sub--dim{fill:var(--muted);opacity:.85}

/* Footer sister services — two links, contextual and named. */
.foot-sisters{margin-block-start:var(--s-5)}
.foot-sisters ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2)}
.foot-sisters li{margin:0}
.foot-sisters a{color:var(--ink-2);text-decoration:none;font-size:.875rem}
.foot-sisters a:hover{color:var(--accent);text-decoration:underline}

/* Fourth corridor: the Jerusalem corridor (Route 1 east).
   Rose — nameably distinct from orange, teal and violet. Deep rose clears the
   non-text floor on white (Lc 78) and carries white text as a badge (Lc 84). */
.line-badge--d{--badge:var(--line-d)}
.ring .ring-branch--d{stroke:var(--line-d)}

/* ============================================================================
   Floating WhatsApp

   The persistent direct-chat affordance. Shown from 641px up ONLY: below that
   the fixed mobile CTA bar already carries WhatsApp, so a second floating
   target would be a duplicate control competing with it.

   Positioned with logical properties (inset-inline-end), so it mirrors to the
   bottom-left automatically in Hebrew. It sits at z-index 80 — above page
   content, below the sticky header (100) and the open mobile menu (110).
   ========================================================================== */
.wa-float{display:none}

@media(min-width:641px){
  .wa-float{
    display:inline-flex;align-items:center;gap:var(--s-2);
    position:fixed;z-index:80;
    inset-block-end:calc(var(--s-6) + env(safe-area-inset-bottom,0px));
    inset-inline-end:var(--s-6);
    min-height:52px;padding:0 var(--s-5);
    background:var(--whatsapp);color:var(--on-accent);
    border-radius:var(--r-full);
    font-family:var(--font);font-weight:700;font-size:.9375rem;line-height:1;
    text-decoration:none;white-space:nowrap;
    box-shadow:var(--elev-2);
    transition:background-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease);
  }
  .wa-float:hover{background:var(--whatsapp-strong);color:var(--on-accent);text-decoration:none}
  .wa-float:active{transform:translateY(1px)}
  .wa-float:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
  .wa-float svg{flex-shrink:0}
  :lang(he) .wa-float,[dir="rtl"] .wa-float{font-family:var(--font-he)}

  /* Reserve space so the button can never cover the footer's legal links when
     the page is scrolled to the bottom. Without this the pill lands on top of
     the Accessibility Statement link at bottom-right. */
  .site-footer{padding-block-end:calc(var(--s-6) + 76px)}
}