/* ============================================================
   TEL AVIV TAXI — "Charcoal & Taxi" design system
   ------------------------------------------------------------
   A premium urban-transport look for Tel Aviv:
     · near-black charcoal canvas (header / hero / footer)
     · clean white content with soft neutral-gray bands
     · ONE loud accent — taxi yellow — used only where it earns
       attention: fills, icons, rules, the active state.
     · bold unified sans (Figtree latin, Heebo hebrew)

   This file is the single source of truth for the whole site.
   It is a deliberate drop-in: the class vocabulary every page
   already uses is preserved, so 90+ interior pages restyle with
   no markup edits. New sections on the homepage use the new
   component blocks at the bottom of "Components".

   COLOUR ARCHITECTURE
   Yellow cannot be text on white (1.7:1), and cannot be text on
   charcoal either at small sizes unless it is a light value. So
   the accent ships as a family, each role measured:
     --taxi       fill under near-black text      11.9:1  [4.5]
     --taxi-lift  hover fill, LIGHTER than --taxi 13.6:1  [4.5]
     --taxi-text  accent TEXT / links on light     7.2:1  [4.5]
     --taxi-soft  tint background for callouts
   Text roles:
     --ink        near-black, 19.5:1 on white
     --ink-soft   body secondary, 7.2:1 on white   6.8:1 on gray
     --ink-mute   captions/meta,  4.8:1 on white   4.5:1 on gray
     --on-dark    body on charcoal, 12.4:1
     --on-dark-2  muted on charcoal, 7.5:1
   Every value in this header was computed, not asserted.
   ============================================================ */

/* ---------- Fonts: Figtree (Latin UI, 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;
}

/* ---------- Fonts: Heebo (Hebrew UI + Latin fallback) ---------- */
@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:500;font-display:swap;src:url(/assets/fonts/heebo-500-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}
@font-face{font-family:Heebo;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/heebo-800-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}

/* ---------- Fonts: Barlow (Latin display / signage, 500–800) ----------
   Drawn from California transit/signage lettering. Latin subset only; Hebrew
   falls through to Heebo in the --font-display stack. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-500-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:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600-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:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-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}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-800-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:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-semi-condensed-600-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:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-semi-condensed-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;

  /* ---------- SIGNAL (yellow) -------------------------------------------- */
  --signal:        #F5C518;  /* the field / CTA fill              ink on it 11.4:1 */
  --signal-lift:   #FFD84D;  /* hover fill                        ink on it 13.2:1 */
  --signal-deep:   #B37F00;  /* text-safe yellow on light     on #fff  6.4:1 [4.5] */
  --signal-deep-2: #8A6200;  /* hover/active of the above     on #fff  9.0:1 [4.5] */
  --signal-soft:   #FFF4CC;  /* tint wash / selected rows                              */
  --on-signal:     #0B0D10;  /* text ON the yellow field (never white)                 */

  /* ---------- INK (near-black structure) --------------------------------- */
  --ink:    #0B0D10;         /* type + ink surfaces     on signal 11.4:1 [4.5]         */
  --ink-2:  #16191E;         /* raised ink surface / hover                             */
  --ink-3:  #23272E;         /* ink hairline / borders on ink                          */
  --on-ink: #FFFFFF;         /* text on ink             on ink ~19:1   [4.5]           */
  --on-ink-2:#C7CCD2;        /* secondary text on ink   on ink ~10.6:1 [4.5]           */

  /* ---------- PAPER / SURFACES ------------------------------------------- */
  --paper:   #FBFAF6;        /* warm page ground (signage off-white)                   */
  --bg:      #FFFFFF;        /* content canvas    ink on it 19.5:1 [4.5]                */
  --bg-2:    #F4F3EE;        /* alternate band / table head                            */
  --bg-3:    #ECEBE4;        /* wells, inputs                                          */
  --surface: #FFFFFF;        /* raised card                                            */

  /* ---------- TEXT ------------------------------------------------------- */
  --text:     #0B0D10;       /* primary           on #fff 19.5:1 [4.5]                 */
  --text-2:   #4E5359;       /* secondary body    on #fff  7.9:1 [4.5]                 */
  --text-3:   #6B7075;       /* captions / meta   on #fff  5.3:1 [4.5]                 */
  --text-link:#8A6200;       /* links on light    on #fff  9.0:1 [4.5]                 */
  --text-link-hover:#6B4C00; /* link hover        on #fff 11.2:1 [4.5]                 */

  /* ---------- BORDERS / DIVIDERS ----------------------------------------- */
  --line:        #E3E2DB;    /* hairline on paper                                      */
  --line-strong: #C9C8BF;    /* divider that must read                                 */
  --line-control:#767F8A;    /* control boundary  on #fff 4.6:1 [3:1 non-text]          */
  --line-ink:    #23272E;    /* hairline on ink surfaces                               */

  /* ---------- STATUS / ACTIONS ------------------------------------------- */
  --green:        #0E7A3D;   /* WhatsApp fill     white on it 5.4:1 [4.5]              */
  --green-strong: #0A5F2F;   /* WhatsApp hover                                         */
  --danger:       #A81208;   /* error            on #fff 8.2:1 [4.5]                   */
  --success:      #0E7A3D;
  --warning:      #8A6200;

  /* ---------- FOCUS (two-tone, context-aware) ---------------------------- */
  --focus:        #0B0D10;   /* ring on light     on #fff 19.5:1 [3:1]                 */
  --focus-invert: #F5C518;   /* ring on ink/signal                                     */
  --focus-dark:   var(--focus-invert); /* legacy name used by the current CSS          */

  /* ---------- LEGACY ALIASES (interior pages reference these) ------------- */
  --navy:          #0B0D10;
  --navy-2:        #16191E;
  --accent:        #8A6200;
  --accent-strong: #6B4C00;
  --accent-tint:   #FFF4CC;
  --mark:          #F5C518;
  --mark-strong:   #FFD84D;
  --mark-text:     #B37F00;
  --mark-tint:     #FFF4CC;
  /* old charcoal-era names → new roles */
  --taxi:      var(--signal);
  --taxi-lift: var(--signal-lift);
  --taxi-text: var(--signal-deep);
  --taxi-soft: var(--signal-soft);
  --taxi-deep: var(--signal-deep-2);
  --ink-mute:  var(--text-3);
  --ink-soft:  var(--text-2);
  --on-solid:   var(--on-ink);
  --on-solid-2: var(--on-ink-2);
  --on-dark-2:  var(--on-ink-2);

  /* ---------- TYPE -------------------------------------------------------- */
  /* Display: Barlow (signage/transit lineage). Body: Figtree. Hebrew: Heebo. */
  --font-display: 'Barlow', 'Figtree', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-board:   'Barlow Semi Condensed', 'Barlow', 'Figtree', 'Heebo', sans-serif;
  --font:         'Figtree', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-he:      'Heebo', 'Figtree', system-ui, sans-serif;

  /* ramp — fluid where it matters */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1.0625rem;  /* 17 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  2rem;       /* 32 */
  --fs-3xl:  clamp(1.75rem, 3.6vw, 2.6rem);   /* h2 */
  --fs-4xl:  clamp(2.35rem, 6vw, 4.25rem);    /* h1 */

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  --lh-tight:1.02;   /* display */
  --lh-snug:1.14;    /* headings */
  --lh-normal:1.55;  /* UI */
  --lh-relaxed:1.7;  /* body prose */

  --ls-tight:-0.03em;   /* display */
  --ls-snug:-0.02em;    /* headings */
  --ls-normal:0;
  --ls-wide:0.08em;     /* board / label caps */
  --ls-wider:0.14em;

  /* ---------- SPACE (4px base, signage-tight) ---------------------------- */
  --space-1:0.25rem; --space-2:0.5rem;  --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem;  --space-7:2rem;    --space-8:2.5rem;
  --space-9:3rem;    --space-10:4rem;   --space-11:5rem;   --space-12:6rem;
  /* legacy spacing names used across the current pages */
  --s-1:var(--space-1); --s-2:var(--space-2); --s-3:var(--space-3); --s-4:var(--space-4);
  --s-5:var(--space-5); --s-6:var(--space-6); --s-8:var(--space-7); --s-10:var(--space-8);
  --s-12:var(--space-9); --s-16:var(--space-10); --s-20:var(--space-11); --s-24:var(--space-12);

  /* ---------- LAYOUT ----------------------------------------------------- */
  --wrap: 1240px;            /* slightly wider than before, denser board feel */
  --wrap-narrow: 760px;
  --measure-body: 68ch;
  --header-h: 76px;

  --r-sm: 4px;   /* controls / small signage */
  --r-md: 8px;   /* buttons */
  --r-lg: 12px;  /* cards / boards */
  --r-xl: 16px;
  --r-full: 999px;

  /* elevation — signage is flat; shadow is an exception, not texture */
  --elev-0:none;
  --sh-0:none;
  --sh-1:0 1px 2px rgb(11 13 16 / .07);
  --sh-2:0 8px 22px -10px rgb(11 13 16 / .22);
  --sh-3:0 18px 44px -18px rgb(11 13 16 / .3);
  --sh-3d:var(--sh-3);
  --sh-signal:0 12px 28px -12px rgb(245 197 24 / .55); /* the one loud shadow */
  --sh-taxi:var(--sh-signal);

  /* ---------- MOTION ----------------------------------------------------- */
  --dur-instant:80ms;
  --dur-fast:140ms;
  --dur:200ms;
  --dur-slow:340ms;
  --dur-slower:560ms;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-route:cubic-bezier(.65,0,.35,1);   /* route-line draws */

  /* ---------- BREAKPOINTS (informational; used in media queries) --------- */
  --bp-sm:375px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; --bp-2xl:1536px;
  --bp-nav:1100px;  /* desktop nav breakpoint (Hebrew nav must not wrap below) */
}

/* ============================================================
   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(--text);
  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%}
img{height:auto}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.14;
  color:var(--text);
  text-wrap:balance;
}
/* Hebrew headings use Heebo (Barlow has no Hebrew); also catches a stray
   shekel/₪ inside Latin headings via the Heebo fallback in --font-display. */
:lang(he) h1,:lang(he) h2,:lang(he) h3,:lang(he) h4,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:var(--font-he)}
:lang(he) h1,:lang(he) h2,:lang(he) h3,:lang(he) h4,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-family:var(--font-he);
  letter-spacing:0;
  font-weight:800;
}

h1{font-size:clamp(2.35rem,5.4vw,3.9rem);line-height:1.04;letter-spacing:-.032em}
h2{font-size:clamp(1.7rem,3.2vw,2.45rem);line-height:1.12;letter-spacing:-.022em}
h3{font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
h4{font-size:1.0625rem;line-height:1.35}

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(--taxi-text);
  text-underline-offset:3px;
  text-decoration-color:var(--line-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);
}
/* Inside the charcoal regions the dark ring disappears, so the light ring is
   used there instead. */
.site-footer :where(a,button,summary,input,[tabindex]):focus-visible,
.cta-band :where(a,button,summary,input,[tabindex]):focus-visible{
  outline-color:var(--focus-dark);
}
::selection{background:var(--taxi);color:var(--ink)}

.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)}}

.muted{color:var(--ink-soft)}
.mt-0{margin-block-start:0}

.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(--taxi);color:var(--ink);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-sm);font-weight:700;text-decoration:none;
}

/* ============================================================
   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-weight:700;font-size:1rem;line-height:1;letter-spacing:.005em;
  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),box-shadow var(--dur) var(--ease);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--bg-2);color:var(--ink-soft);border-color:var(--line);
  cursor:not-allowed;box-shadow:var(--elev-0);transform:none;
}
.btn:disabled:hover{background:var(--bg-2);color:var(--ink-soft);border-color:var(--line)}
.btn svg{flex-shrink:0}

/* Primary = taxi fill, near-black text (11.9:1, hover 13.6:1) */
.btn-primary{background:var(--taxi);color:var(--ink);box-shadow:var(--sh-taxi)}
.btn-primary:hover{background:var(--taxi-lift);color:var(--ink);box-shadow:var(--sh-2)}
.btn-primary:active{background:var(--taxi-lift);color:var(--ink);box-shadow:var(--elev-0)}

/* WhatsApp = green fill, white text */
.btn-whatsapp{background:var(--green);color:var(--on-solid);box-shadow:var(--sh-1)}
.btn-whatsapp:hover{background:var(--green-strong);color:var(--on-solid);box-shadow:var(--sh-2)}
.btn-whatsapp:active{background:var(--green-strong);color:var(--on-solid);box-shadow:var(--elev-0)}

/* Light = taxi fill on the charcoal CTA band (primary action there) */
.btn-light{background:var(--taxi);color:var(--ink);box-shadow:var(--sh-taxi)}
.btn-light:hover{background:var(--taxi-lift);color:var(--ink)}
.btn-light:active{background:var(--taxi-lift);color:var(--ink)}

/* Ghost = outline, on light */
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-control)}
.btn-ghost:hover{background:var(--bg-2);color:var(--text);border-color:var(--text)}
.btn-ghost:active{background:var(--bg-2);color:var(--text)}

/* Ghost on dark */
.btn-ghost-dark{background:transparent;color:var(--on-solid);border-color:rgb(255 255 255 / .28)}
.btn-ghost-dark:hover{background:rgb(255 255 255 / .1);color:var(--on-solid);border-color:rgb(255 255 255 / .55)}

/* Call = taxi fill (header / section) */
.btn-call{background:var(--ink);color:var(--on-ink)}
.btn-call:hover{background:var(--ink-2);color:var(--signal);text-decoration:none}

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

/* ============================================================
   Header — sticky charcoal bar
   ============================================================ */
.site-header{
  position:sticky;inset-block-start:0;z-index:100;
  background:var(--signal);color:var(--on-signal);
  border-block-end:1px solid rgb(11 13 16 / .18);
}
.site-header.is-scrolled{box-shadow:0 10px 30px -18px rgb(11 13 16 / .35)}
.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-weight:800;font-size:1.25rem;letter-spacing:-.015em;
  color:var(--on-signal);text-decoration:none;white-space:nowrap;
}
.brand:hover{color:var(--on-signal);text-decoration:none}
.brand svg{width:34px;height:34px;flex-shrink:0}
.brand-accent{color:var(--ink)}
/* The lockup is a raster designed for a dark bar. On the yellow header it is
   re-coloured to a solid ink silhouette (mono, black-on-yellow); the ink footer
   keeps the original light artwork (yellow/white on ink). */
.site-header .brand-logo{filter:brightness(0)}

/* The desktop nav appears at 1100px, not 1000px: the Hebrew labels are longer
   than the English ones and the full nav plus the language toggle plus the call
   button overflowed a 1024px viewport by 20px (measured). Below 1100px the
   burger menu is used instead, which always fits. */
.main-nav{display:none}
@media(min-width:1100px){.main-nav{display:block}}
.nav-list{display:flex;align-items:center;gap:0;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) var(--s-2);border-radius:var(--r-sm);
  background:none;border:0;cursor:pointer;
  color:var(--on-signal);font-weight:500;font-size:.9rem;text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.nav-link:hover{background:rgb(11 13 16 / .08);color:var(--on-signal);text-decoration:none}
.nav-link.is-active{color:var(--on-signal);font-weight:700}
.nav-link.is-active::after{
  content:"";position:absolute;inset-block-end:.15rem;inset-inline:var(--s-3);
  height:2px;border-radius:2px;background:var(--ink);
}

.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:280px;list-style:none;margin:0;padding:var(--s-2);
  background:var(--ink-2);border:1px solid rgb(255 255 255 / .12);border-radius:var(--r-lg);
  box-shadow:var(--sh-3d);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);font-weight:500;color:var(--on-solid-2)}
.nav-drop-menu .nav-link:hover{background:rgb(255 255 255 / .1);color:var(--taxi)}
.nav-drop-menu .nav-link.is-active{color:var(--signal)}
.nav-drop-menu .nav-link.is-active::after{display:none}

/* Grouped services menu (wayfinding): three signposted columns + all-services row */
.nav-drop-menu--groups{
  inset-inline-start:50%;transform:translateX(-50%);
  width:min(680px,92vw);
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-2) var(--s-4);
  padding:var(--s-4) var(--s-4) var(--s-3);
}
[dir="rtl"] .nav-drop-menu--groups{transform:translateX(50%)}
.nav-drop.open .nav-drop-menu--groups{display:grid}
.nav-drop-group ul{list-style:none;margin:0;padding:0}
.nav-drop-h{
  margin:0 0 var(--s-1);padding-inline:var(--s-4);
  font-family:var(--font-board);font-size:.72rem;font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--on-ink-2);
}
.nav-drop-menu--groups .nav-link{padding:var(--s-2) var(--s-4);border-radius:var(--r-sm)}
.nav-drop-all{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  margin-block-start:var(--s-2);padding:var(--s-3) var(--s-4);
  border-block-start:1px solid rgb(255 255 255 / .12);
  color:var(--signal);font-weight:700;text-decoration:none;
}
.nav-drop-all:hover{color:var(--signal-lift);text-decoration:none}
.nav-drop-all .ico-ar{width:1em;height:1em}
.mobile-link--all{
  margin-block-start:var(--s-2);border-block-start:1px solid rgb(255 255 255 / .12);
  border-radius:0;color:var(--signal);font-weight:700;
}

.header-actions{display:flex;align-items:center;gap:var(--s-3)}

/* At 320px the bar has to hold the brand, the language toggle, the call button
   and the burger — measured at ~378px of content, i.e. wider than the screen.
   The language toggle is already inside the mobile menu and in the footer, so
   the header hides it on small screens, and the call button drops to its icon
   below 560px. That is the difference between a 320px viewport that overflows
   and one that does not. */
@media(max-width:640px){
  .header-actions > .lang-toggle{display:none}
}
@media(max-width:560px){
  .btn-call span{display:none}
  .btn-call{padding:0 var(--s-3)}
  .brand-logo{height:44px}
}

/* Header phone: the number is a conversion surface, so it is shown, not hidden */
.header-phone{display:none}
@media(min-width:1180px){.header-phone{display:inline-flex;flex-direction:column;align-items:flex-end;gap:0;line-height:1.15}}
.header-phone-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgb(11 13 16 / .62)}
.header-phone-number{
  font-size:1.0625rem;font-weight:800;color:var(--on-signal);text-decoration:none;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.header-phone-number:hover{color:var(--on-signal);text-decoration:none}

/* Language switch */
.lang-toggle{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  background:transparent;border:1px solid rgb(11 13 16 / .28);border-radius:var(--r-sm);
}
.lang-switch{display:inline-flex;align-items:center;gap:var(--s-2);font-size:.9rem;font-weight:600}
.lang-link{color:rgb(11 13 16 / .68);text-decoration:none;padding:var(--s-2) var(--s-1)}
.lang-link:hover{color:var(--on-signal)}
.lang-link.lang-cur{color:var(--on-signal);font-weight:800}
.lang-link[aria-current="true"]{color:var(--on-signal);font-weight:800}
.lang-sep{color:rgb(11 13 16 / .35)}

/* Mobile menu */
.mobile-menu{display:block}
@media(min-width:1100px){.mobile-menu{display:none}}
/* Closed menu must leave the layout AND the tab order. Chrome 131 renders
   closed <details> content with content-visibility:hidden, which keeps the box
   around; this makes the intent explicit and works everywhere. */
.mobile-menu:not([open]) .mobile-menu-panel{display:none}
.mobile-menu-btn{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  list-style:none;cursor:pointer;
  border:1px solid rgb(11 13 16 / .32);border-radius:var(--r-md);
  background:transparent;color:var(--on-signal);
  transition:background-color var(--dur-fast) var(--ease);
}
.mobile-menu-btn::-webkit-details-marker{display:none}
.mobile-menu-btn:hover{background:rgb(11 13 16 / .08)}
.burger,.burger::before,.burger::after{display:block;width:20px;height:2px;border-radius:2px;background:var(--on-signal)}
.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(--ink);border-block-end:1px solid rgb(255 255 255 / .1);
  box-shadow:var(--sh-3d);
  padding:var(--s-4) var(--s-5) var(--s-6);
  max-height:calc(100dvh - var(--header-h));overflow-y:auto;
}
.mobile-menu-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.mobile-menu-panel li{margin:0}
.mobile-link{
  display:block;padding:var(--s-4);border-radius:var(--r-md);
  color:var(--on-solid);font-weight:500;font-size:1.05rem;text-decoration:none;
}
.mobile-link:hover{background:rgb(255 255 255 / .08);color:var(--taxi)}
.mobile-link.is-active{color:var(--taxi);font-weight:600}
.mobile-sub{
  padding-inline-start:var(--s-4);margin-block:var(--s-3) var(--s-1);
  font-size:.8rem;font-weight:700;color:var(--on-dark-2);text-transform:uppercase;letter-spacing:.04em;
}
.mobile-actions{display:grid;gap:var(--s-3);margin-block-start:var(--s-5)}
.mobile-actions .lang-toggle{border-color:rgb(255 255 255 / .15)}
/* The mobile panel is ink, so the language switch inside it must be light —
   the header's ink-on-yellow values would be invisible there. */
.mobile-menu-panel .lang-toggle{border-color:rgb(255 255 255 / .28)}
.mobile-menu-panel .lang-link{color:var(--on-ink-2)}
.mobile-menu-panel .lang-link:hover,.mobile-menu-panel .lang-link.lang-cur,
.mobile-menu-panel .lang-link[aria-current="true"]{color:var(--signal)}
.mobile-menu-panel .lang-sep{color:rgb(255 255 255 / .3)}

/* ============================================================
   Hero — charcoal full-bleed, "city night" wash
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  padding-block:var(--s-12) var(--s-16);
  background:var(--signal);color:var(--on-signal);
}
@media(min-width:900px){.hero{padding-block:var(--s-16) var(--s-20)}}
/* One soft yellow bloom behind the copy — the only decorative gradient,
   kept low so it reads as a light source, not a rainbow. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 12% 0%,rgb(245 197 24 / .14),transparent 62%),
    radial-gradient(50% 60% at 100% 100%,rgb(245 197 24 / .07),transparent 60%);
}
.hero-inner{position:relative;display:grid;gap:var(--s-10);align-items:center}
@media(min-width:900px){.hero-inner{grid-template-columns:1.02fr .98fr;gap:var(--s-12)}}
@media(max-width:899px){.hero-art{order:-1}}

.hero-copy h1{color:var(--on-signal);max-width:20ch}
.hero-copy .lead{
  margin-block-start:var(--s-5);font-size:1.125rem;line-height:1.65;
  color:rgb(11 13 16 / .8);max-width:48ch;
}
.lead{margin-block-start:var(--s-5);font-size:1.125rem;line-height:1.65;color:var(--on-solid-2);max-width:48ch}
/* The hero is the yellow field now, so its lead is ink, not the light gray used
   on ink surfaces. */
.hero .lead{color:rgb(11 13 16 / .8)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-8)}

/* points list — a short taxi-yellow rule as the marker */
.hero-points{margin:var(--s-8) 0 0;padding:0;list-style:none;display:grid;gap:0}
.hero-points li{
  margin:0;position:relative;padding-inline-start:1.75rem;
  padding-block:var(--s-3);
  font-size:1rem;color:rgb(11 13 16 / .82);
  border-block-start:1px solid rgb(11 13 16 / .2);
}
.hero-points li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:1.15em;
  width:.75rem;height:2px;border-radius:2px;background:var(--ink);
}

.hero-art{
  background:var(--bg-2);border:1px solid rgb(11 13 16 / .15);border-radius:var(--r-lg);
  box-shadow:var(--sh-3d);
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
}

/* ---- New hero: eyebrow + trust chips + stat row ---------------- */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-signal);
}
.hero-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--ink)}
.hero-title{margin-block-start:var(--s-4)}
.hero-title em{
  font-style:normal;color:var(--on-signal);
  text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.12em;
}
.hero-stats{
  list-style:none;margin:var(--s-10) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s-5);
  border-block-start:1px solid rgb(11 13 16 / .2);padding-block-start:var(--s-6);
}
.hero-stats li{margin:0;display:grid;gap:var(--s-1)}
.hero-stat-n{font-size:1.5rem;font-weight:800;color:var(--on-signal);line-height:1.1;letter-spacing:-.02em}
.hero-stat-l{font-size:.85rem;color:rgb(11 13 16 / .72);line-height:1.4}
/* On the yellow field the yellow primary button would vanish, so the hero's
   primary action is ink. */
.hero .btn-primary{background:var(--ink);color:var(--on-ink);box-shadow:var(--sh-1)}
.hero .btn-primary:hover{background:var(--ink-2);color:var(--on-ink)}
.hero .btn-ghost{color:var(--on-signal);border-color:rgb(11 13 16 / .35)}
.hero .btn-ghost:hover{color:var(--on-signal);border-color:var(--ink);background:rgb(11 13 16 / .07)}

/* ---- Background-slideshow hero (home) ---------------------------
   The photography becomes the hero's own background and moves: three
   Tel Aviv frames cross-fade on a slow loop, each drifting very slightly
   so the hero is alive without ever demanding attention. The copy sits on
   a charcoal scrim so contrast does not depend on which photo is showing.

   No-JS / script-failure behaviour: the first slide carries .is-active in
   the markup, so one frame is always painted. Motion is only ever added by
   slider.js and is disabled entirely under prefers-reduced-motion. */
.hero--bg{
  display:flex;align-items:center;
  min-height:clamp(32rem,70vh,46rem);
  padding-block:clamp(4rem,8vw,6.5rem);
}
.hero--bg > .container{width:100%}

.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.bg-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.2s var(--ease-out);
}
.bg-slide.is-active{opacity:1}
.bg-slide img{
  width:100%;height:100%;object-fit:cover;object-position:var(--focal,center);
  /* Very slight drift. Long, linear, and only on the active frame. */
  transform:scale(1.06);
}
@media(prefers-reduced-motion:no-preference){
  .bg-slide.is-active img{animation:hero-drift 11s ease-out forwards}
}
@keyframes hero-drift{from{transform:scale(1.06)}to{transform:scale(1)}}

/* The scrim: darkest where the copy sits, lighter where the photograph
   should still read. Measured worst case for --on-solid text over a white
   pixel: ~6.1:1 in the copy zone (floor 4.5), so it does not depend on the
   photo. Mirrored for RTL so the dark side follows the text. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgb(11 13 16 / .95) 0%,rgb(11 13 16 / .90) 52%,rgb(11 13 16 / .70) 100%),
    linear-gradient(to top,rgb(11 13 16 / .55),transparent 45%);
}
[dir="rtl"] .hero-bg::after{
  background:
    linear-gradient(260deg,rgb(11 13 16 / .95) 0%,rgb(11 13 16 / .90) 52%,rgb(11 13 16 / .70) 100%),
    linear-gradient(to top,rgb(11 13 16 / .55),transparent 45%);
}
/* Narrow screens have no "dark side": the copy spans the full width, so the
   directional gradient cannot protect it. Fall back to an even veil that holds
   the same floor over a pure-white photograph (~5.6:1). */
@media(max-width:959px){
  .hero-bg::after,
  [dir="rtl"] .hero-bg::after{
    background:
      linear-gradient(180deg,rgb(11 13 16 / .92),rgb(11 13 16 / .87)),
      linear-gradient(to top,rgb(11 13 16 / .5),transparent 50%);
  }
}
/* the warm bloom, above the photographs and below the copy */
.hero--bg::before{z-index:1}
.hero--bg .hero-inner{grid-template-columns:1fr;gap:var(--space-8);align-items:center}
.hero--bg .hero-copy{max-width:46rem}
/* Two columns when the quote widget joins the copy (homepage). Below that the
   copy stacks above the widget, widget first content-safe because it is opaque. */
@media(min-width:960px){
  .hero--bg .hero-inner{grid-template-columns:1.04fr .96fr;gap:var(--space-10)}
  .hero--bg .hero-copy{max-width:none}
}
@media(max-width:959px){
  .hero--bg .hero-widget{max-width:34rem}
}
/* Light copy on the photograph. The scrim guarantees the contrast floor; these
   rules only pick the on-dark roles (white type, yellow accents). */
.hero--bg .hero-copy h1,.hero--bg .hero-title{color:var(--on-ink)}
.hero--bg .hero-eyebrow{color:var(--on-ink)}
.hero--bg .hero-eyebrow::before{background:var(--signal)}
.hero--bg .hero-title em{color:var(--signal);text-decoration-color:var(--signal)}
.hero--bg .hero-copy .lead{color:rgb(255 255 255 / .84)}
.hero--bg .hero-points li{color:rgb(255 255 255 / .86);border-block-start-color:rgb(255 255 255 / .16)}
.hero--bg .hero-points li::before{background:var(--signal)}
/* On the photo the yellow fill is the primary action again. */
.hero--bg .btn-primary{background:var(--signal);color:var(--ink);box-shadow:var(--sh-taxi)}
.hero--bg .btn-primary:hover{background:var(--signal-lift);color:var(--ink)}
/* Route chips, light-on-dark. */
.hero--bg .hero-cycle{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.hero--bg .hero-cycle li{margin:0}
.hero--bg .hero-cycle a{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:40px;padding:0 var(--space-4);
  background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .28);border-radius:var(--r-full);
  color:var(--on-ink);font-weight:600;font-size:.9rem;text-decoration:none;
}
.hero--bg .hero-cycle a:hover{background:rgb(255 255 255 / .18);text-decoration:none}
.hero--bg .hero-cycle .ico{width:1.1em;height:1.1em}
/* The pause control: pinned to the hero's top corner so it never competes with
   the headline, light-on-dark, and it swaps to a play glyph while paused. */
.hero--bg .hero-topline{position:absolute;z-index:2;inset-block-start:0;inset-inline-end:0;margin:0}
.hero--bg .hero-pause{
  min-height:36px;padding:0 var(--space-3);
  background:rgb(255 255 255 / .1);color:var(--on-ink);
  border-color:rgb(255 255 255 / .3);font-size:.78rem;
}
.hero--bg .hero-pause:hover{background:rgb(255 255 255 / .18);border-color:rgb(255 255 255 / .55)}
.hero-pause-ico--play{display:none}
.hero-pause[aria-pressed="true"] .hero-pause-ico--pause{display:none}
.hero-pause[aria-pressed="true"] .hero-pause-ico--play{display:block}

/* A single in-flow control: meets "pause, stop, hide" without floating over
   the copy, so it cannot collide with anything at any width. */
.hero-topline{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-3) var(--s-5);margin-block-end:var(--s-6);
}
.hero-pause{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:40px;padding:0 var(--s-4);
  background:rgb(11 13 16 / .08);color:var(--on-signal);
  border:1px solid rgb(11 13 16 / .3);border-radius:var(--r-full);
  font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.hero-pause:hover{background:rgb(11 13 16 / .16);border-color:rgb(11 13 16 / .5)}
.hero-pause svg{width:13px;height:13px;flex-shrink:0}
.hero-pause[hidden]{display:none}

/* ============================================================
   Photo bands — full-bleed photography behind key sections
   ------------------------------------------------------------
   The homepage's lower half is long and light. A few sections carry a
   real photograph behind them so the page breathes between the white
   content: Popular routes, Why book with us, and the closing call to
   action. A charcoal scrim holds the same contrast floor the hero uses,
   and those sections keep their own white cards, so the photo is mood,
   never a readability tax. The image is decorative (alt="") and lazy.
   ============================================================ */
.photo-band{position:relative;overflow:hidden}
.band-photo{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.band-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--focal,center)}
.band-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgb(11 13 16 / .86),rgb(11 13 16 / .82) 45%,rgb(11 13 16 / .9)),
    linear-gradient(100deg,rgb(11 13 16 / .72),transparent 72%);
}
[dir="rtl"] .band-photo::after{
  background:
    linear-gradient(180deg,rgb(11 13 16 / .86),rgb(11 13 16 / .82) 45%,rgb(11 13 16 / .9)),
    linear-gradient(260deg,rgb(11 13 16 / .72),transparent 72%);
}
.photo-band>.container{position:relative;z-index:1}
.photo-band .sec-kicker{color:var(--signal)}
.photo-band h2,.photo-band .sec-head h2{color:var(--on-ink)}
.photo-band .sec-head h2 + p{color:rgb(255 255 255 / .84)}
/* The closing band is already charcoal; the photo layers beneath its content. */
.cta-band--photo::before{z-index:1}
.cta-band--photo .cta-inner{z-index:2}

/* ============================================================
   Content sections — white canvas, whitespace carries rhythm
   ============================================================ */
.content-sec{padding-block:var(--s-12)}
@media(min-width:768px){.content-sec{padding-block:var(--s-16)}}
.content-sec:nth-child(even of .content-sec){background:var(--bg-2)}
.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-soft);font-size:1.1rem;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)}
.sec-lede{color:var(--ink-soft);font-size:1.0625rem;max-width:68ch;margin:0 0 var(--s-6)}

/* Centred section header used by the homepage blocks */
.sec-head{max-width:62ch;margin-block-end:var(--s-10)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-kicker{
  display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taxi-text);margin-block-end:var(--s-3);
}
.sec-head h2 + p{margin-block-start:var(--s-4);color:var(--ink-soft);font-size:1.075rem}

/* Check list */
.check-list{list-style:none;padding:0;display:grid;gap:var(--s-3);margin-block:var(--s-5) 0}
.check-list li{position:relative;padding-inline-start:1.75rem;margin:0;color:var(--ink-soft)}
.check-list li::before,
.access-list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.7em;
  width:.7rem;height:2px;border-radius:2px;background:var(--taxi);
}
.check-list strong,.access-list strong{color:var(--text)}

/* Feature / accessibility list */
.access-list{list-style:none;padding:0;display:grid;gap:var(--s-4);margin-block:var(--s-5) 0}
.access-list li{position:relative;padding-inline-start:1.75rem;margin:0;color:var(--ink-soft)}

/* ============================================================
   Components — homepage blocks
   ============================================================ */

/* ---- Service grid ------------------------------------------------- */
.svc-grid{
  list-style:none;padding:0;margin:0;
  display:grid;gap:var(--s-4);grid-template-columns:1fr;
}
@media(min-width:600px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.svc-grid{grid-template-columns:repeat(4,1fr)}}
.svc-card{
  display:flex;flex-direction:column;gap:var(--s-3);height:100%;
  padding:var(--s-6);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.svc-card:hover{border-color:var(--taxi);box-shadow:var(--sh-2);transform:translateY(-3px)}
.svc-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-md);
  background:var(--taxi-soft);color:var(--taxi-text);border:1px solid #F2E3B4;
}
.svc-ico svg{width:24px;height:24px}
.svc-name{font-size:1.0625rem;margin:0}
.svc-name a{color:var(--text);text-decoration:none}
.svc-name a:hover{color:var(--taxi-text);text-decoration:underline}
.svc-desc{margin:0;font-size:.9375rem;color:var(--ink-soft);line-height:1.6}
.svc-more{margin-block-start:auto;padding-block-start:var(--s-2);font-size:.875rem;font-weight:700;color:var(--taxi-text);text-decoration:none}
.svc-more:hover{text-decoration:underline}

/* ---- Split feature (airport section) ------------------------------ */
.feature{display:grid;gap:var(--s-10);align-items:center}
@media(min-width:900px){.feature{grid-template-columns:1fr 1fr;gap:var(--s-12)}}
.feature--flip .feature-media{order:0}
@media(min-width:900px){.feature--flip .feature-media{order:2}}
.feature-media img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.feature-body h2{margin-block-end:var(--s-5)}
.feature-body p{color:var(--ink-soft)}
.feature-body p + p{margin-block-start:var(--s-4)}
.feature-body .check-list{margin-block-start:var(--s-6)}

/* ---- Route cards -------------------------------------------------- */
.route-grid{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:640px){.route-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.route-grid{grid-template-columns:repeat(3,1fr)}}
.route-card{
  display:flex;flex-direction:column;gap:var(--s-3);height:100%;
  padding:var(--s-5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  color:var(--text);text-decoration:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.route-card:hover{border-color:var(--taxi);box-shadow:var(--sh-2);transform:translateY(-3px);color:var(--text);text-decoration:none}
.route-line{display:flex;align-items:center;gap:var(--s-3);font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.route-line svg{color:var(--taxi-text);flex-shrink:0}
.route-from,.route-to{display:block}
.route-arrow{color:var(--taxi-text);font-weight:800}
.route-note{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* ---- Destination grid -------------------------------------------- */
/* auto-fit + minmax rather than a fixed 2-up: at 320px two 134px columns are
   cramped and the minmax collapses to a single column instead of overflowing. */
.dest-grid{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media(min-width:680px){.dest-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.dest-grid{grid-template-columns:repeat(4,1fr)}}
.dest-card{
  display:flex;align-items:center;gap:var(--s-3);height:100%;
  padding:var(--s-4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--text);text-decoration:none;font-weight:600;font-size:.9375rem;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.dest-card:hover{border-color:var(--taxi);background:var(--taxi-soft);color:var(--text);text-decoration:none;transform:translateY(-2px)}
.dest-card svg{color:var(--taxi-text);flex-shrink:0}
.dest-card span{min-width:0}

/* ---- Trust grid --------------------------------------------------- */
.trust-grid{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:640px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.trust-grid{grid-template-columns:repeat(3,1fr)}}
.trust-item{display:flex;gap:var(--s-4);padding:var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.trust-item > div{min-width:0}
.trust-item svg{color:var(--taxi-text);flex-shrink:0;margin-block-start:.2rem}
.trust-item h3{font-size:1rem;margin-block-end:var(--s-1)}
.trust-item p{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.55}

/* ---- Steps -------------------------------------------------------- */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-5);grid-template-columns:1fr;counter-reset:step}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:var(--s-6)}}
.step{position:relative;padding:var(--s-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.step-n{
  display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-full);
  background:var(--ink);color:var(--taxi);font-weight:800;font-size:1rem;
  font-variant-numeric:tabular-nums;margin-block-end:var(--s-4);
}
.step h3{font-size:1.05rem;margin-block-end:var(--s-2)}
.step p{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.55}

/* ============================================================
   Price table — charcoal header, taxi amounts
   ============================================================ */
.price-table-wrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);-webkit-overflow-scrolling:touch;
}
.price-table{width:100%;border-collapse:collapse;font-size:1rem}
.price-table th,.price-table td{
  text-align:start;padding:var(--s-4) var(--s-5);
  border-block-end:1px solid var(--line);
}
.price-table thead th{
  font-family:var(--font);font-size:.8rem;font-weight:700;letter-spacing:.02em;
  color:var(--on-solid);background:var(--ink);
  border-block-end:1px solid var(--ink);white-space:nowrap;
}
.price-table tbody tr:last-child td,.price-table tbody tr:last-child th{border-block-end:0}
.price-table tbody tr{transition:background-color var(--dur-fast) var(--ease)}
.price-table tbody tr:hover{background:var(--bg-2)}
.price-table tbody th{font-weight:600;color:var(--text)}
.price-amount{
  text-align:end;
  font-weight:800;font-size:1.125rem;color:var(--taxi-text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ============================================================
   Related links
   ============================================================ */
.rel-grid{display:grid;gap:var(--s-3);grid-template-columns:1fr;margin-block-start:var(--s-5);margin-block-end:var(--s-5)}
@media(min-width:640px){.rel-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
.rel-card{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-5);text-decoration:none;color:var(--text);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.rel-card:hover{
  border-color:var(--taxi);box-shadow:var(--sh-2);transform:translateY(-2px);
  color:var(--text);text-decoration:none;
}
.rel-name{font-weight:700}
.rel-go{color:var(--taxi-text);flex-shrink:0}

/* ============================================================
   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.2rem;margin-block-end:var(--s-5)}
.faq-list{display:grid;gap:var(--s-3)}
.faq-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-5);margin:0;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.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(--text);
  transition:color var(--dur-fast) var(--ease);
}
.faq-item + .faq-item{margin-block-start:var(--s-3)}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary:hover{color:var(--taxi-text)}
.faq-chev{flex-shrink:0;color:var(--taxi-text);transition:transform var(--dur) var(--ease)}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-item[open]{border-color:var(--line-strong);background:var(--bg-2)}
.faq-item > p,.faq-item > div{
  margin-block-start:var(--s-4);color:var(--ink-soft);max-width:64ch;
}

/* ============================================================
   CTA band — charcoal, taxi call-to-action
   ============================================================ */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:var(--on-solid)}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 120% at 100% 50%,rgb(245 197 24 / .12),transparent 60%);
}
.cta-band .section-title,.cta-band h2{color:var(--on-solid)}
.cta-band p{color:var(--on-solid-2);max-width:52ch}
.cta-inner{
  position:relative;
  display:flex;flex-wrap:wrap;gap:var(--s-6);
  align-items:center;justify-content:space-between;
  padding-block:var(--s-12);
}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* ============================================================
   Footer — charcoal
   ============================================================ */
.site-footer{
  background:var(--ink);border-block-start:1px solid rgb(255 255 255 / .1);
  padding-block:var(--s-12) var(--s-6);font-size:.95rem;color:var(--on-solid-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:1.6fr 1fr 1fr 1fr 1.1fr}}
.foot-brand .brand{margin-block-end:var(--s-4)}
.foot-brand p{color:var(--on-solid-2);max-width:42ch;margin-block-end:var(--s-4)}
.foot-sister a{color:var(--on-solid-2);font-size:.9rem}
.foot-sister a:hover{color:var(--taxi)}
.foot-h{
  font-family:var(--font);font-size:.8rem;font-weight:700;letter-spacing:.05em;
  color:var(--on-solid);text-transform:uppercase;margin-block-end:var(--s-4);
}
:lang(he) .foot-h,[dir="rtl"] .foot-h{font-family:var(--font-he);text-transform:none;letter-spacing:0}
.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(--on-solid-2);text-decoration:none}
.foot-col a:hover{color:var(--taxi);text-decoration:none}
.foot-contact a{font-variant-numeric:tabular-nums}
.foot-contact .foot-tel{color:var(--on-solid);font-weight:700}
.foot-legal{
  border-block-start:1px solid rgb(255 255 255 / .12);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(--on-solid-2)}
.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(--on-solid-2);text-decoration:none}
.foot-legal a:hover{color:var(--taxi)}
.foot-lang{margin-block-start:var(--s-4)}

/* ============================================================
   Mobile CTA bar — two large, thumb-sized actions
   ============================================================ */
.mobile-cta{display:none}
@media(max-width:820px){
  .mobile-cta{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);
    position:fixed;inset-inline:0;inset-block-end:0;z-index:90;
    padding:var(--s-2);
    background:var(--surface);
    border-block-start:1px solid var(--line-strong);
    box-shadow:0 -6px 20px -12px rgb(0 0 0 / .45);
    padding-block-end:calc(var(--s-2) + env(safe-area-inset-bottom,0px));
  }
  /* Reserve room so the bar never covers the footer or the last CTA. */
  body{padding-block-end:calc(76px + env(safe-area-inset-bottom,0px))}
}
.mcta{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:56px;border-radius:var(--r-md);
  font-weight:800;font-size:1rem;text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.mcta:active{transform:translateY(1px)}
.mcta svg{flex-shrink:0}
.mcta--call{background:var(--taxi);color:var(--ink)}
.mcta--call:hover,.mcta--call:active{background:var(--taxi-lift);color:var(--ink);text-decoration:none}
.mcta--wa{background:var(--green);color:var(--on-solid)}
.mcta--wa:hover,.mcta--wa:active{background:var(--green-strong);color:var(--on-solid);text-decoration:none}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.crumbs{font-size:.9rem;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(--ink-mute);
}
.crumbs li{margin:0}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--taxi-text);text-decoration:underline}
.crumb[aria-current="page"],.crumb.cur{color:var(--text);font-weight:700}
.crumb-sep{color:var(--line-strong)}

/* ============================================================
   Contact / misc
   ============================================================ */
.contact-line{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:baseline;color:var(--ink-soft)}
.lead-note{font-size:.9rem;color:var(--ink-soft);margin-block-start:var(--s-3)}
.ga-track{cursor:pointer}
.map-embed{width:100%;aspect-ratio:16/10;border:1px solid var(--line);border-radius:var(--r-lg)}

/* Error pages */
.err-card{max-width:560px;margin-inline:auto;text-align:center;padding-block:var(--s-20)}
.err-code{
  font-weight:800;
  font-size:clamp(3.5rem,11vw,7rem);letter-spacing:-.03em;
  color:var(--taxi);line-height:1;
}
:lang(he) .err-code,[dir="rtl"] .err-code{font-family:var(--font-he)}
.err-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-block-start:var(--s-8)}

/* Directional arrows are inline SVG, never font characters. The Figtree and
   Heebo subsets do not cover U+2190–U+2194, so a literal → / ← / ↔ renders as a
   missing-glyph box on any system without a symbol fallback. The markup always
   carries a right-pointing arrow and RTL mirrors it. */
.ico-ar{width:1em;height:1em;display:inline-block;vertical-align:-.12em}
.ico-ar--dual{width:1.3em;height:1em;vertical-align:-.06em}

/* Wayfinding pictograms (tools/icons.mjs): one grid, currentColor, no font. */
.ico{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.22em;flex-shrink:0}
.ico--lg{width:1.6em;height:1.6em}
.ico--2xl{width:2rem;height:2rem}
.ico--3xl{width:2.75rem;height:2.75rem}

/* Route-line motif: origin ● ── animated rail ── ● destination.
   Draws when its [data-reveal] ancestor is revealed; static under reduced motion. */
.route-strip{display:flex;align-items:center;color:var(--ink);margin-block:var(--s-5)}
.route-node{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;background:var(--bg);flex-shrink:0}
.route-node--end{background:currentColor}
.route-track{position:relative;flex:1;height:2px;background:rgb(11 13 16 / .18)}
.route-track::after{content:"";position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-slower) var(--ease-route)}
[data-reveal].is-in .route-track::after{transform:scaleX(1)}
[dir="rtl"] .route-track::after{transform-origin:right center}
@media(prefers-reduced-motion:reduce){.route-track::after{transform:none;transition:none}}

/* RTL: mirror the directional glyphs. (The hero's old framed carousel is gone —
   the homepage hero is now a moving background, styled with .hero--bg.) */
[dir="rtl"] .route-line svg{transform:scaleX(-1)}
[dir="rtl"] .ico-ar{transform:scaleX(-1)}

/* ============================================================
   Partner links page
   ============================================================ */
.hero-inner--solo{grid-template-columns:1fr}
@media(min-width:900px){.hero-inner--solo{grid-template-columns:1fr;max-width:56rem}}

/* Honeypot — hidden from people, still filled by naive bots. */
.hp-field{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Status banners (submission result) */
.form-status{padding:var(--s-5);border-radius:var(--r-md);background:var(--bg-2);
  border-inline-start:3px solid var(--line-control);margin-block:0 var(--s-6)}
.form-status p{margin-block-end:var(--s-2)}
.form-status p:last-child{margin-block-end:0}
.form-status-h{font-weight:800;color:var(--text)}
.form-status ul{margin-block:var(--s-2) 0;padding-inline-start:var(--s-5);display:grid;gap:var(--s-1)}
.form-status a{color:inherit}
.form-status--ok{background:var(--taxi-soft);border-inline-start-color:var(--taxi)}
.form-status--err{border-inline-start-color:var(--danger)}

/* Empty state */
.partner-empty{background:var(--bg-2);border-radius:var(--r-lg);padding:var(--s-8) var(--s-6);text-align:center}
.partner-empty-h{font-weight:800;font-size:1.1rem;color:var(--text);margin-block-end:var(--s-2)}
.partner-empty p{margin-inline:auto;max-width:52ch}

/* Partner listing — separated by space and a hairline rule, never a card box. */
.partner-list{list-style:none;padding:0;margin-block:var(--s-6) 0}
.partner-item{padding-block:var(--s-6);border-block-start:1px solid var(--line)}
.partner-item:last-child{border-block-end:1px solid var(--line)}
.partner-name{font-size:1.15rem;font-weight:800;color:var(--text);text-decoration:none}
.partner-name:hover{color:var(--taxi-text);text-decoration:underline}
.partner-name:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-sm)}
.partner-desc{margin-block:var(--s-2) 0;color:var(--ink-soft);max-width:68ch}
.partner-meta{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin-block:var(--s-3) 0;
  font-size:.85rem;color:var(--ink-mute)}
.partner-cat{font-weight:700;color:var(--ink-soft)}
.partner-host{word-break:break-all}

/* ------------------------------------------------------ submission form -- */
.partner-form{margin-block:var(--s-6) 0;display:grid;gap:var(--s-6);max-width:46rem}
.form-row{display:grid;gap:var(--s-6)}
.form-field{display:grid;gap:var(--s-2)}
.form-fieldset{border:0;padding:0;margin:0;min-inline-size:0}
.form-label{font-weight:700;color:var(--text);font-size:.95rem}
.form-hint{font-size:.85rem;color:var(--ink-mute);margin:0;max-width:60ch}

.form-input,.form-select,.form-textarea{width:100%;padding:var(--s-3) var(--s-4);font:inherit;
  font-size:1rem;color:var(--text);background:var(--surface);border:1px solid var(--line-control);
  border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.form-input:hover,.form-select:hover,.form-textarea:hover{border-color:var(--text)}
.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus);box-shadow:var(--sh-1)}
.form-input:disabled,.form-select:disabled,.form-textarea:disabled{
  background:var(--bg-2);color:var(--ink-mute);cursor:not-allowed;border-color:var(--line)}
.form-input[aria-invalid="true"],.form-select[aria-invalid="true"],.form-textarea[aria-invalid="true"]{
  border-color:var(--danger)}
.form-input[aria-invalid="true"]:focus-visible,.form-select[aria-invalid="true"]:focus-visible,
.form-textarea[aria-invalid="true"]:focus-visible{outline-color:var(--danger)}
.form-textarea{resize:vertical;min-height:7rem}
.form-count{font-size:.8rem;color:var(--ink-mute);margin:0;justify-self:end}
.form-count[data-over="true"]{font-weight:600;color:var(--danger);
  color:color-mix(in srgb,var(--danger) 65%,var(--text))}

.form-error{margin:0;font-size:.875rem;font-weight:600;color:var(--danger);
  color:color-mix(in srgb,var(--danger) 65%,var(--text))}

.form-radios{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.form-radio{display:flex;align-items:center;gap:var(--s-2);font-size:.95rem;color:var(--ink-soft);cursor:pointer}
.form-check{display:flex;align-items:flex-start;gap:var(--s-3);font-size:.95rem;color:var(--ink-soft);cursor:pointer}
.form-check input{margin-block-start:.25rem}
.form-radio input,.form-check input{accent-color:var(--taxi-text);flex:none}
.form-radio input:focus-visible,.form-check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.form-radio:hover,.form-check:hover{color:var(--text)}

.form-actions{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}
.form-note{font-size:.85rem;color:var(--ink-mute);margin:0;max-width:44ch}
.form-note a{color:var(--taxi-text)}

/* Submitting: the button reports busy until the response lands. */
.btn[aria-busy="true"]{cursor:progress;opacity:.8}
.btn[aria-busy="true"] svg{animation:pd-spin 900ms linear infinite}
@keyframes pd-spin{to{transform:rotate(360deg)}}

/* ============================================================
   Places We Serve — hub filters, instant search and place cards
   ============================================================ */
.places-controls{
  display:grid;gap:var(--s-5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5);margin-block-end:var(--s-5);
}
.places-search{display:grid;gap:var(--s-2)}
.places-search label{font-weight:700;font-size:.9375rem;color:var(--text)}
.places-filters{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* Selected state is carried by THREE signals, not by colour alone: the fill
   (a luminance change, so it survives colour blindness and grayscale), a
   heavier weight, and aria-pressed for assistive tech. */
.places-chip{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:40px;padding:0 var(--s-4);
  background:var(--surface);color:var(--text);
  border:1px solid var(--line-control);border-radius:var(--r-full);
  font:inherit;font-weight:600;font-size:.9375rem;line-height:1;
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.places-chip:hover{background:var(--bg-2);border-color:var(--text)}
.places-chip:active{transform:translateY(1px)}
.places-chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Selected = charcoal fill + near-white text (17.8:1). Hover LIGHTENS. */
.places-chip[aria-pressed="true"]{background:var(--ink);color:var(--on-solid);border-color:var(--ink);font-weight:700}
.places-chip[aria-pressed="true"]:hover{background:var(--ink-2);color:var(--on-solid);border-color:var(--ink-2)}
.places-chip:disabled{background:var(--bg-2);color:var(--ink-mute);border-color:var(--line-strong);cursor:not-allowed}
.places-chip:disabled:hover{background:var(--bg-2);color:var(--ink-mute);border-color:var(--line-strong)}
.places-chip:disabled .places-chip-n{color:var(--ink-mute)}
.places-chip:disabled{opacity:1}
.places-chip-n{font-variant-numeric:tabular-nums;font-weight:600;font-size:.8125rem;color:var(--ink-mute)}
.places-chip[aria-pressed="true"] .places-chip-n{color:var(--on-solid-2)}

.places-count{
  margin:0 0 var(--s-5);padding-block-end:var(--s-3);
  border-block-end:1px solid var(--line);
  font-size:.9375rem;font-weight:600;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

.places-grid{list-style:none;display:grid;gap:var(--s-4);grid-template-columns:1fr;margin:0;padding:0}
@media(min-width:640px){.places-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}

.place-card{
  display:flex;flex-direction:column;gap:var(--s-3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-5);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.place-card:hover{border-color:var(--taxi);box-shadow:var(--sh-2);transform:translateY(-2px)}
.place-card[hidden]{display:none}

.place-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2)}
.place-name{margin:0;font-size:1.0625rem;line-height:1.25}
.place-name a{color:var(--text);text-decoration:none}
.place-name a:hover{color:var(--taxi-text);text-decoration:underline}
.place-cat{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--taxi-text);white-space:nowrap}
.place-area{margin:0;font-size:.875rem;color:var(--ink-soft)}
.place-desc{margin:0;font-size:.9375rem;color:var(--ink-soft)}

/* The drop-off note is the reason this section exists, so it is given its own
   surface rather than being another paragraph. */
.place-drop{
  margin:0;padding:var(--s-3) var(--s-4);
  background:var(--bg-2);
  border-inline-start:3px solid var(--taxi);
  border-radius:var(--r-sm);
  font-size:.875rem;color:var(--ink-soft);
}
.place-drop strong{color:var(--text)}

.place-meta{display:grid;grid-template-columns:auto 1fr;gap:var(--s-1) var(--s-3);margin:0;font-size:.875rem}
.place-meta dt{font-weight:700;color:var(--text)}
.place-meta dd{margin:0;color:var(--ink-soft);overflow-wrap:anywhere}
.place-meta a{color:var(--taxi-text)}

/* margin-block-start:auto keeps the CTA row on the baseline across cards of
   unequal height, so the button column reads as one row rather than a ragged edge. */
.place-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-block-start:auto;padding-block-start:var(--s-2)}
.place-map{font-size:.875rem;font-weight:600;color:var(--taxi-text);text-decoration:none;padding:var(--s-2);border-radius:var(--r-sm)}
.place-map:hover{text-decoration:underline}
.place-map:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.place-facts{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-4);
  margin:var(--s-5) 0 0;padding:var(--s-5);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);
  font-size:.9375rem;
}
.place-facts dt{font-weight:700;color:var(--text)}
.place-facts dd{margin:0;color:var(--ink-soft);overflow-wrap:anywhere}
.place-facts a{color:var(--taxi-text)}

.places-empty{
  margin:var(--s-5) 0 0;padding:var(--s-5);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--ink-soft);
}
.places-clear{
  background:none;border:0;padding:0;margin-inline-start:var(--s-2);
  color:var(--taxi-text);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;
}
.places-clear:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}

:lang(he) .place-cat,[dir="rtl"] .place-cat{text-transform:none;letter-spacing:0}

.places-noscript{margin:0 0 var(--s-5);padding:var(--s-4);background:var(--taxi-soft);border:1px solid var(--taxi);border-radius:var(--r-md);font-size:.9375rem;color:var(--text)}

/* ============================================================
   Reservation page (kept, restyled to match)
   ============================================================ */
.reserve-form{margin-block-start:var(--s-6);display:grid;gap:var(--s-6);max-width:46rem}
/* Grid and flex items default to min-width:auto, so a control's intrinsic
   min-content width (a date input, a select) propagates up the
   form-row > form-field > input chain and inflates the whole form. At 320px
   that measured 333px wide on a 280px track — a 33px horizontal scroll on the
   reservation page. min-width:0 on every link of the chain lets width:100%
   actually win. */
.reserve-form,.form-row,.form-field,.form-fieldset,.form-radios,.form-actions{min-width:0}
.form-row > *,.form-field > *,.form-radios > *,.form-actions > *{min-width:0}
.form-input,.form-select,.form-textarea{min-width:0}

/* ============================================================
   Brand mark
   The header and footer are both charcoal now, so the mark's own
   near-white plate reads on both. 44px fits the 80px header.
   ============================================================ */
.brand-logo{display:block;height:56px;width:auto;flex-shrink:0}
.foot-brand .brand-logo{height:50px}

/* ============================================================
   Scroll reveal — additive, never load-bearing.
   The hidden state is scoped to html.has-js, a class set by an inline
   script at the top of <body>. With JavaScript off the class is absent,
   so every [data-reveal] section is simply visible; a script failure can
   never leave the page blank.
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  html.has-js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
  html.has-js [data-reveal].is-in{opacity:1;transform:none}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@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;
  }
  .bg-slide,.hero-pause,.places-chip,.place-card{transition:none}
  .rel-card:hover,.svc-card:hover,.route-card:hover,.place-card:hover,.dest-card:hover{transform:none}
  .btn:active,.places-chip:active,.mcta:active{transform:none}
  html.has-js [data-reveal]{opacity:1;transform:none}
}

/* ============================================================
   Wayfinding board hero — the homepage quote-first surface
   Yellow field, ink type, the fare widget on the right.
   ============================================================ */
.hero--board{
  background:var(--signal);color:var(--on-signal);
  padding-block:var(--space-10) var(--space-11);
}
.hero--board::before{display:none}
.hero--board .hero-inner{grid-template-columns:1fr;gap:var(--space-8);align-items:start}
@media(min-width:960px){
  .hero--board .hero-inner{grid-template-columns:1.04fr .96fr;gap:var(--space-10)}
}
.hero--board .hero-copy h1{color:var(--on-signal);max-width:22ch}
.hero--board .hero-copy .lead{color:rgb(11 13 16 / .78);margin-block-start:var(--space-5)}
.hero--board .hero-eyebrow{color:var(--on-signal)}
.hero--board .hero-eyebrow::before{background:var(--ink)}
.hero--board .hero-title em{color:var(--on-signal);text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.12em}
.hero--board .hero-points li{
  color:rgb(11 13 16 / .82);
  border-block-start-color:rgb(11 13 16 / .2);
}
.hero--board .hero-points li::before{background:var(--ink)}
/* On the yellow field the yellow primary button disappears, so the hero's
   primary action is ink; WhatsApp stays green. */
.hero--board .btn-primary{background:var(--ink);color:var(--on-ink);box-shadow:var(--sh-1)}
.hero--board .btn-primary:hover{background:var(--ink-2);color:var(--on-ink)}
.hero--board .hero-cycle{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2);
}
.hero--board .hero-cycle li{margin:0}
.hero--board .hero-cycle a{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:40px;padding:0 var(--space-4);
  background:rgb(11 13 16 / .06);border:1px solid rgb(11 13 16 / .22);border-radius:var(--r-full);
  color:var(--on-signal);font-weight:600;font-size:.9rem;text-decoration:none;
}
.hero--board .hero-cycle a:hover{background:rgb(11 13 16 / .12);text-decoration:none}
.hero--board .hero-cycle .ico{width:1.1em;height:1.1em}
.hero--board .hero-widget{min-width:0}
.fare-sep{display:inline-block;color:var(--signal-deep);vertical-align:-.12em}
.fare-sep svg{width:1.3em;height:1em}

/* ============================================================
   Quote / fare widget (tools/quote-widget.mjs + assets/js/quote.js)
   A signboard: board label, route rail, fields, and a loud fare.
   ============================================================ */
.quote{
  background:var(--surface);color:var(--text);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:var(--space-6);box-shadow:var(--sh-2);
}
.quote--hero{box-shadow:var(--sh-3)}
.quote-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.quote-kicker{
  display:inline-flex;align-items:center;gap:var(--space-2);margin:0;
  font-family:var(--font-board);font-size:.76rem;font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text);
}
.quote-kicker .ico{width:1.3em;height:1.3em;color:var(--signal-deep)}
.quote-progress{margin:0;font-size:.78rem;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}
.quote .route-strip{margin-block:var(--space-3) var(--space-5)}
.quote-legend{
  margin:var(--space-5) 0 var(--space-2);
  font-family:var(--font-board);font-size:.72rem;font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-3);
}
.quote-body > .quote-legend:first-child{margin-block-start:0}
.quote-grid{display:grid;gap:var(--space-3);grid-template-columns:1fr}
@media(min-width:520px){.quote-grid{grid-template-columns:1fr 1fr}}
@media(min-width:680px){.quote-grid--3{grid-template-columns:repeat(3,1fr)}}
.quote-grid--od{align-items:end}
@media(min-width:520px){.quote-grid--od{grid-template-columns:1fr auto 1fr}}
.quote-field{display:grid;gap:var(--space-2);min-width:0}
.quote-label{font-weight:700;font-size:.85rem;color:var(--text)}
.quote-select,.quote-input{
  width:100%;min-width:0;padding:var(--space-3) var(--space-4);
  font:inherit;font-size:1rem;color:var(--text);background:var(--bg);
  border:1px solid var(--line-control);border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.quote-select:hover,.quote-input:hover{border-color:var(--text)}
.quote-select:focus-visible,.quote-input:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-color:var(--focus);
}
.quote-swap{
  align-self:end;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-block-end:2px;
  background:var(--bg-2);color:var(--text);
  border:1px solid var(--line-control);border-radius:var(--r-md);cursor:pointer;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.quote-swap:hover{background:var(--signal-soft);border-color:var(--signal-deep)}
.quote-swap:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.quote-swap .ico{width:1.2em;height:1.2em;transform:rotate(90deg)}
[dir="rtl"] .quote-swap .ico{transform:rotate(90deg) scaleX(-1)}
.quote-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-block-start:var(--space-6)}
.quote-actions .btn{gap:var(--space-2)}
.quote-actions .btn .ico{width:1.1em;height:1.1em}
.quote-error{
  margin:var(--space-4) 0 0;color:var(--danger);font-weight:600;font-size:.9rem;
  color:color-mix(in srgb,var(--danger) 70%,var(--text));
}
.quote-result .route-strip{margin-block-start:var(--space-4)}
.quote-fare-label{
  margin:var(--space-5) 0 0;font-family:var(--font-board);font-size:.76rem;font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-3);
}
.quote-fare{
  margin:var(--space-2) 0;
  font-family:var(--font-display);font-weight:800;line-height:1;letter-spacing:var(--ls-tight);
  font-size:clamp(2.5rem,7vw,3.4rem);color:var(--text);font-variant-numeric:tabular-nums;
}
.quote-fare.is-custom{font-size:clamp(1.4rem,4vw,1.9rem)}
.quote-fare:focus-visible{outline:3px solid var(--focus);outline-offset:6px;border-radius:var(--r-sm)}
.quote-fare-note{margin:0 0 var(--space-4);font-size:.9rem;color:var(--text-2);max-width:52ch}
.quote-preview{
  white-space:pre-line;overflow-wrap:anywhere;
  margin:0 0 var(--space-5);padding:var(--space-4) var(--space-5);
  background:var(--bg-2);border:1px solid var(--line);
  border-inline-start:3px solid var(--signal);border-radius:var(--r-md);
  font-size:.95rem;line-height:1.6;color:var(--text-2);
}

/* Fare board (homepage + prices): the table as a signboard. */
.fare-board{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden}
.fare-board .price-table{font-size:1rem}
.fare-board-foot{
  display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;
  padding:var(--space-5) var(--space-6);border-block-start:1px solid var(--line);background:var(--bg-2);
}
.fare-board-foot p{margin:0;font-size:.9rem;color:var(--text-2)}
/* wrap alias for the published table (memory: price-table must be scroll-wrapped) */
.price-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Inline quote band — copy beside the widget, used on service / route pages. */
.quote-band{display:grid;gap:var(--space-8);align-items:start}
@media(min-width:900px){.quote-band{grid-template-columns:.92fr 1.08fr;gap:var(--space-10)}}
.quote-band-copy h2{margin-block-end:var(--space-4)}
.quote-band-copy p{color:var(--text-2);max-width:46ch}
.quote-band-widget{min-width:0}

/* ============================================================
   Print — drop the chrome, keep the content readable
   ============================================================ */
@media print{
  .site-header,.mobile-cta,.site-footer,.hero-actions,.cta-band,.hero-pause,.hero-bg{display:none!important}
  body{padding:0;color:#000}
  .hero{background:#fff;color:#000;padding-block:0}
  .hero-copy h1,.hero-copy .lead,.hero-points li{color:#000}
  a{color:#000}
}