/* ==========================================================================
   WILD NATURE ATV — NEO-BRUTALIST BUILD, DAYLIGHT EDITION
   Rules enforced throughout this file:
     · NO border-radius anywhere (except the deliberate loop-nav pill)
     · NO gradients
     · NO soft/blurred shadows — hard offset blocks only
     · NO decorative flourishes; typography carries the weight
     · Photos are shown in FULL COLOUR, always. Text over a photo sits on a
       solid tag (paper or ink), never on a filter, dim or blur.
   ========================================================================== */

:root {
  /* --- Raw palette ---------------------------------------------------------
     Daylight: warm sand-white paper, a pale sky tint for alternate bands, and
     a deep slate-navy ink in place of black. The emerald stays as the brand.

     Contrast (WCAG 2.x), checked:
       ink on paper 14.8 · ink on white 16.2 · ink on sky 13.5 · ink on sand 13.2
       muted on paper 6.6 · on sky 6.0 · on sand 5.9 · on white 7.2
       accent-text on paper 5.9 · on sky 5.4 · on white 6.5
       ink on accent 5.5   (filled green ALWAYS takes ink text, never white)
       paper on ink 14.8 · dark-muted on ink 7.9 · accent-bright on ink 7.6
     #3FA96D itself is only 2.7:1 on paper — use it for FILLS, shadows and
     rules, and --accent-text when green has to be read as text. */
  --ink:          #14222B;   /* deep slate-navy: text, borders, dark bands */
  --ink-2:        #1E303B;   /* raised surface inside dark bands */
  --paper:        #F7F4EC;   /* page background: warm sand-white */
  --white:        #FFFFFF;   /* cards, form fields */
  --sky:          #DCEDF3;   /* breezy alternate band */
  --sand:         #EFE7D6;   /* warm alternate band */
  --slate:        #4A5963;   /* muted text on light surfaces */
  --slate-light:  #A9B7BF;   /* muted text on dark surfaces */

  --accent:        #3FA96D;  /* brand emerald — fills, shadows, rules */
  --accent-ink:    #14222B;  /* text ON a green fill (5.5:1) */
  --accent-deep:   #1D6B43;  /* green that reads as text on light (5.9:1) */
  --accent-bright: #5CC58C;  /* green that reads as text on ink (7.6:1) */

  --whatsapp:     #25D366;   /* brand fill only; put --ink on it (8.2:1) */

  /* --- Context tokens (LIGHT is the default) ------------------------------
     Components use THESE, not the raw palette, so the same component works
     in a light band and a dark band. A dark band flips them — see
     ".theme-dark" below. New CSS should use these names. */
  --bg:          var(--paper);   /* band background */
  --bg-alt:      var(--sky);     /* alternate band */
  --surface:     var(--white);   /* cards, fields, panels on the band */
  --fg:          var(--ink);     /* body text */
  --muted:       var(--slate);   /* secondary text, labels */
  --rule:        var(--ink);     /* 3px structural borders */
  --hair:        #C3CDD1;        /* decorative hairlines / empty meter cells */
  --accent-fg:   var(--accent-deep); /* green used as text */
  --focus:       var(--accent-deep); /* focus rings (≥3:1 vs light) */

  /* Legacy names. index.html still uses var(--off) for inline borders and
     var(--black) for the hero stats background, so they now mean
     "rule colour" and "band background". Don't use them in new CSS. */
  --black:       var(--bg);
  --black-2:     var(--bg-alt);
  --off:         var(--rule);
  --grey:        var(--muted);
  --line:        var(--hair);

  --border-w:    3px;
  --hard:        8px 8px 0 var(--accent);
  --hard-sm:     5px 5px 0 var(--accent);
  --hard-ink:    8px 8px 0 var(--ink);
  --hard-ink-sm: 5px 5px 0 var(--ink);
  --hard-off:    var(--hard-ink);   /* legacy alias */

  --icon-sm:     18px;   /* inline icons next to text (contact rows) */
  --icon-md:     24px;   /* icon buttons */
  --icon-lg:     32px;   /* social logos */

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "Archivo Black", "Arial Black", Impact, var(--mono);

  --nav-h: 72px;
}

/* --- Band themes ----------------------------------------------------------
   Put one of these on any section (or wrapper) to change its surface. The
   nav, footer and lightbox are dark bands by default. Because custom
   properties resolve where they are declared, the legacy aliases have to be
   re-declared in each scope too. */
.theme-dark, .nav, footer, .lb {
  --bg:        var(--ink);
  --bg-alt:    var(--ink-2);
  --surface:   var(--ink-2);
  --fg:        var(--paper);
  --muted:     var(--slate-light);
  --rule:      var(--paper);
  --hair:      #3A4C57;
  --accent-fg: var(--accent-bright);
  --focus:     var(--accent-bright);
  --black: var(--bg); --black-2: var(--bg-alt); --off: var(--rule);
  --grey: var(--muted); --line: var(--hair);
  background: var(--bg);
  color: var(--fg);
}
.theme-sky  { --bg: var(--sky);  --bg-alt: var(--paper); --black: var(--bg); --black-2: var(--bg-alt); background: var(--bg); }
.theme-sand { --bg: var(--sand); --bg-alt: var(--paper); --black: var(--bg); --black-2: var(--bg-alt); background: var(--bg); }
.theme-paper { background: var(--bg); }

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  background: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;              /* spec */
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

p { max-width: 70ch; margin: 0 0 1.4em; }   /* spec: max line length */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -0.035em;      /* spec: -0.02 → -0.05em */
  text-transform: uppercase;
  margin: 0;
}

h1 { font-size: clamp(72px, 8.5vw, 168px); }
h2 { font-size: clamp(44px, 5.5vw, 92px); }
h3 { font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.02em; }

/* The 72px H1 minimum is a desktop instruction; below 520px it overflows a
   phone viewport, so it steps down. Everything else holds. */
@media (max-width: 520px) { h1 { font-size: 52px; } h2 { font-size: 36px; } }

/* --- Shared utility ------------------------------------------------------ */
.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;        /* spec: UI tracking */
  text-transform: uppercase;
  color: var(--muted);
}
.accent { color: var(--accent-fg); }
.rule { height: var(--border-w); background: var(--rule); border: 0; margin: 0; }

.section {
  border-bottom: var(--border-w) solid var(--rule);
  scroll-margin-top: var(--nav-h);
}

/* ==========================================================================
   HEBREW / RTL
   IBM Plex Mono and Archivo Black have no Hebrew glyphs, so Hebrew swaps to
   Heebo — it carries a 900 weight that holds up next to Archivo Black, and
   reads cleanly at UI sizes. Everything below only applies when the toggle
   sets lang="he" dir="rtl" on <html>.
   ========================================================================== */
html[lang="he"] body,
html[lang="he"] .mono-label,
html[lang="he"] .btn,
html[lang="he"] .nav-toggle,
html[lang="he"] .field input,
html[lang="he"] .field select,
html[lang="he"] .field textarea,
html[lang="he"] table.specs,
html[lang="he"] .faq summary {
  font-family: "Heebo", var(--mono);
  letter-spacing: 0;                 /* Hebrew has no case; tracking hurts it */
}
html[lang="he"] h1, html[lang="he"] h2,
html[lang="he"] h3, html[lang="he"] h4,
html[lang="he"] .nav-brand,
html[lang="he"] .price, html[lang="he"] .svc-rate,
html[lang="he"] .hero-stats .v,
html[lang="he"] table.specs td.route,
html[lang="he"] .vault-empty .mark {
  font-family: "Heebo", var(--display);
  font-weight: 900;
  letter-spacing: -0.01em;           /* Hebrew needs far less negative tracking */
}
/* Hebrew has no uppercase — forcing it does nothing but it also can't hurt
   Latin fragments (phone numbers, WhatsApp) that stay inside Hebrew text. */
html[lang="he"] h1 { line-height: 1.02; }
html[lang="he"] h2 { line-height: 1.06; }

/* --- RTL mirroring ------------------------------------------------------- */
html[dir="rtl"] .nav-track { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .nav-burger { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .nav-toggle + .nav-toggle { border-left: 0; border-right: var(--border-w) solid var(--rule); }
html[dir="rtl"] .split > * + * { border-left: 0; border-right: var(--border-w) solid var(--rule); }
html[dir="rtl"] .svc,
html[dir="rtl"] .work,
html[dir="rtl"] .vault-item,
html[dir="rtl"] .foot > div { border-right: 0; border-left: var(--border-w) solid var(--rule); }
html[dir="rtl"] table.specs th,
html[dir="rtl"] table.specs td { text-align: right; border-right: 0; border-left: var(--border-w) solid var(--rule); }
html[dir="rtl"] .work-cap { text-align: right; }
html[dir="rtl"] .diff span { margin-left: 0; margin-right: 9px; }
html[dir="rtl"] .lb-close { right: auto; left: 22px; }
html[dir="rtl"] .lb-arrows button { border-left: 0; border-right: var(--border-w) solid var(--rule); }
html[dir="rtl"] .field + .field label { border-left: var(--border-w) solid var(--rule); border-right: 0; }
html[dir="rtl"] .skip { left: auto; right: 10px; }
@media (max-width: 900px) {
  html[dir="rtl"] .split > * + * { border-right: 0; border-top: var(--border-w) solid var(--rule); }
}
@media (max-width: 860px) {
  html[dir="rtl"] .nav-toggle + .nav-toggle { border-right: 0; border-top: var(--border-w) solid var(--rule); }
}

/* --- The language toggle ------------------------------------------------- */
.lang-btn {
  appearance: none; cursor: pointer;
  background: var(--bg); color: var(--fg);
  border: var(--border-w) solid var(--rule);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 14px;
  margin-inline-start: 10px;
  flex: none; white-space: nowrap;
  transition: background .14s linear, color .14s linear;
}
.lang-btn:hover { background: var(--accent); color: var(--accent-ink); }
a.lang-btn { display: inline-block; text-decoration: none; line-height: normal; }
.lang-btn:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: 3px; }
html[lang="he"] .lang-btn { font-family: "Heebo", var(--mono); }
@media (max-width: 860px) { .lang-btn { margin-inline-start: 8px; padding: 11px 12px; } }

/* --- Photo backgrounds ---------------------------------------------------
   A full-colour trail photo fills the section. No greyscale, no dimming, no
   hover reveal: the colour is there from the first paint.

   Readability comes from solid TAGS instead: headings and paragraphs sit on
   paper panels with an ink border, labels on ink chips. They read like
   stickers slapped on the photo — on-brand for brutalism, legible on any
   picture, and they cover only the text, not the photo.

   NOTE ON PATHS: --mesh is set inline in the HTML but consumed here, so the
   URL resolves relative to THIS stylesheet, not the page. That is why the
   HTML uses ../images/foo.jpg and not images/foo.jpg.
   (--mesh-op in the HTML is now ignored: photos are always fully opaque.) */
.bg-mesh { position: relative; isolation: isolate; }
/* Two layers: ::before is a tiny blurred preview (--mesh-lq, inlined in the
   HTML as a data URI) that paints instantly; ::after is the real photo, which
   main.js loads 1-2 screens ahead and fades in by adding .mesh-in. Without JS
   (no html.js) the real photo just loads normally. Heroes ship with .mesh-in. */
.bg-mesh::before,
.bg-mesh::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-size: cover;
  background-position: var(--mesh-pos, center);
  pointer-events: none;
}
.bg-mesh::before {
  background-color: var(--sky);   /* shows only if there is no preview */
  background-image: var(--mesh-lq, none);
}
.bg-mesh::after {
  background-image: var(--mesh);
  transition: opacity .45s ease;
}
html.js .bg-mesh:not(.mesh-in)::after { background-image: none; opacity: 0; }
/* Banner strips get room so the photo is actually seen around the tags. */
.pad.bg-mesh { padding-block: clamp(56px, 9vw, 132px); }

.bg-mesh h1,
.bg-mesh h2 {
  width: fit-content; max-width: 100%;
  background: var(--paper); color: var(--ink);
  border: var(--border-w) solid var(--ink);
  padding: .14em .22em .1em;
  box-shadow: var(--hard-sm);
}
.bg-mesh p:not(.mono-label) {
  width: fit-content;
  background: var(--paper); color: var(--ink);
  border: var(--border-w) solid var(--ink);
  padding: 14px 18px;
}
.bg-mesh .mono-label {
  width: fit-content; max-width: 100%;
  background: var(--ink); color: var(--paper);
  padding: 6px 10px;
}
.bg-mesh .mono-label .accent { color: var(--accent-bright); }
.bg-mesh .placeholder { background: var(--paper); }
/* Focus over a photo: a green ring alone can vanish into foliage, so it gets
   a paper halo underneath (hard, not blurred). */
.bg-mesh :focus-visible { box-shadow: 0 0 0 7px var(--paper); }
.bg-mesh .btn:focus-visible { box-shadow: var(--hard-ink), 0 0 0 7px var(--paper); }
.bg-mesh .btn--ghost:focus-visible { box-shadow: var(--hard), 0 0 0 7px var(--paper); }

/* Stats already sit on their own solid panel — their labels stay plain. */
.bg-mesh .hero-stats .mono-label { background: transparent; color: var(--muted); padding: 0; width: auto; }

/* Split-screen architecture: 50vw / 50vw ------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--nav-h)); }
.split > * { padding: clamp(28px, 4vw, 64px); }
.split > * + * { border-left: var(--border-w) solid var(--rule); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split > * + * { border-left: 0; border-top: var(--border-w) solid var(--rule); }
}

.pad { padding: clamp(28px, 4vw, 64px); }

/* ==========================================================================
   NAVIGATION — hard-bordered toggles with a sliding highlighter
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: var(--border-w) solid var(--accent);   /* green keel under the dark bar */
  display: flex; align-items: center; gap: 20px;
  padding-inline: clamp(14px, 2.5vw, 28px);
}

/* The real brand mark, recovered from the old site and re-sharpened.
   It is a white-on-transparent PNG, so it sits on the dark (ink) bar as-is.
   On a light surface use images/logo-dark.webp instead. */
.nav-brand { flex: none; display: flex; align-items: center; }
.nav-brand img {
  height: 40px; width: auto;
  display: block;
}
@media (max-width: 480px) { .nav-brand img { height: 32px; } }

/* The toggle track. `overflow: hidden` clips the highlighter to the track,
   and the pill radius is the one deliberate exception to the no-radius rule
   ("circle rounded experience"). */
.nav-track {
  position: relative;
  display: flex;
  margin-left: auto;
  border: var(--border-w) solid var(--rule);
  background: var(--bg);
}
.nav-toggle {
  position: relative; z-index: 2;
  appearance: none; background: transparent; border: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg);
  padding: 11px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s linear;
  display: flex; align-items: center; gap: 7px;
}
.nav-toggle + .nav-toggle { border-left: var(--border-w) solid var(--rule); }
.nav-toggle .idx { color: var(--muted); font-weight: 400; transition: color .18s linear; }
.nav-toggle[aria-current="true"] { color: var(--accent-ink); }
.nav-toggle[aria-current="true"] .idx { color: var(--accent-ink); }
/* Only un-selected toggles turn green on hover. The selected one already sits
   on a green highlight, so tinting its text green would erase the word. */
.nav-toggle:not([aria-current="true"]):hover { color: var(--accent-fg); }
.nav-toggle[aria-current="true"]:hover,
.nav-toggle[aria-current="true"]:hover .idx { color: var(--accent-ink); }
.nav-toggle:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: -6px; }

.nav-highlight {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: var(--accent);
  z-index: 1;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), width .32s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.nav-burger {
  display: none;
  margin-left: auto;
  appearance: none; background: var(--bg);
  border: var(--border-w) solid var(--rule);
  color: var(--fg);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 16px; cursor: pointer;
}

@media (max-width: 860px) {
  .nav-burger { display: block; }
  .nav-track {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    margin: 0;
    flex-direction: column;
    border: 0; border-bottom: var(--border-w) solid var(--accent);
    display: none;
  }
  .nav-track.is-open { display: flex; }
  .nav-toggle { padding: 16px 18px; font-size: 13px; justify-content: flex-start; }
  .nav-toggle + .nav-toggle { border-left: 0; border-top: var(--border-w) solid var(--rule); }
  .nav-highlight { display: none; }
  .nav-toggle[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
  .nav-toggle[aria-current="true"] .idx { color: var(--accent-ink); }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 17px 28px;
  background: var(--accent); color: var(--accent-ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--hard-ink);
  cursor: pointer;
  transition: transform .12s linear, box-shadow .12s linear;
}
.btn:hover { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(8px, 8px); box-shadow: 0 0 0 var(--ink); }
.btn:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: 4px; }
.btn--ghost { background: var(--paper); color: var(--ink); box-shadow: var(--hard); }
.btn--ghost:hover { box-shadow: 4px 4px 0 var(--accent); }
.btn--block { width: 100%; }

/* ==========================================================================
   HOME / HERO
   ========================================================================== */
.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(60px, 8vw, 90px) !important;
}
.hero-left h1 span { display: block; }
.hero-left h1 .on { color: var(--accent-fg); }

.hero-right {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 32px;
  background: transparent;
}
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; border: var(--border-w) solid var(--rule); background: var(--paper); box-shadow: var(--hard-ink-sm); }
.hero-stats > div { padding: 18px 20px; }
.hero-stats > div:nth-child(odd) { border-right: var(--border-w) solid var(--rule); }
.hero-stats > div:nth-child(-n+2) { border-bottom: var(--border-w) solid var(--rule); }
.hero-stats .v { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: -0.03em; }

/* Gap must clear the 8px hard shadow, or the first button's shadow is
   swallowed by the next button. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 26px 24px; }

.hero-media { border: var(--border-w) solid var(--rule); aspect-ratio: 16/10; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   SERVICES — hard-bordered cards
   ========================================================================== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--border-w) solid var(--rule);
}
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }

.svc {
  border-right: var(--border-w) solid var(--rule);
  border-bottom: var(--border-w) solid var(--rule);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface);
  transition: background .14s linear, color .14s linear;
}
.svc { cursor: pointer; }   /* the whole card books that tour (main.js) */
.svc:hover { background: var(--accent); color: var(--accent-ink); }
.svc:hover .mono-label, .svc:hover .svc-rate small { color: var(--accent-ink); }
.svc:hover .svc-rate { color: var(--accent-ink); }
.svc-no { font-family: var(--display); font-size: 13px; letter-spacing: 0; color: var(--accent-fg); }
.svc:hover .svc-no { color: var(--accent-ink); }
.svc p { font-size: 14px; margin: 0; flex: 1; }
.svc-rate {
  font-family: var(--display); font-size: 26px; letter-spacing: -0.03em;
  color: var(--accent-fg); line-height: 1;
  padding-top: 14px; border-top: var(--border-w) solid var(--hair);
}
.svc:hover .svc-rate { border-top-color: var(--accent-ink); }
.svc-rate small {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; color: var(--muted); margin-top: 6px; text-transform: uppercase;
}

.svc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-actions a {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 12px 16px; border: var(--border-w) solid var(--ink);
}
.svc-book { background: var(--accent); color: var(--accent-ink); }
.svc:hover .svc-book { background: var(--ink); color: var(--surface); }
.svc-more:hover, .svc-more:focus-visible { background: var(--ink); color: var(--surface); }
.svc-book::after, .occasion-go::after { content: " \2192"; }
.svc-more::after { content: " \2193"; }
html[dir="rtl"] .svc-book::after, html[dir="rtl"] .occasion-go::after { content: " \2190"; }
html[lang="he"] .svc-actions a, html[lang="he"] .occasion-go {
  font-family: "Heebo", var(--mono); letter-spacing: 0; font-size: 14px;
}

/* ==========================================================================
   OCCASIONS — who books the two routes (not extra products)
   ========================================================================== */
.occasions { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--sky); }
@media (max-width: 1100px) { .occasions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .occasions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .occasions { grid-template-columns: 1fr; } }

.occasion {
  display: block;
  border-right: var(--border-w) solid var(--rule);
  border-bottom: var(--border-w) solid var(--rule);
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--sky);
  transition: background .14s linear, color .14s linear;
}
.occasion:hover { background: var(--accent); color: var(--accent-ink); }
.occasion:hover p { color: var(--accent-ink); }
.occasion .ico { font-size: 1.7rem; display: block; margin-bottom: 14px; }
.occasion h3 { font-size: 1.05rem; margin-bottom: 8px; }
.occasion p { font-size: .93rem; color: var(--muted); margin: 0; }
.occasion-go {
  display: inline-block; margin-top: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-fg);
}
.occasion:hover .occasion-go { color: var(--accent-ink); }
html[dir="rtl"] .occasion { border-right: 0; border-left: var(--border-w) solid var(--rule); }

/* ==========================================================================
   SELECTED WORK — terrain / machines grid
   ========================================================================== */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--border-w) solid var(--rule); }
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }

.work {
  position: relative;
  border-right: var(--border-w) solid var(--rule);
  border-bottom: var(--border-w) solid var(--rule);
  aspect-ratio: 1;
  overflow: hidden;
  display: block; padding: 0; background: var(--sky); cursor: pointer;
  font: inherit; color: inherit;
}
/* Full colour at rest — hover only adds a slight push-in. */
.work img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s linear;
}
.work:hover img { transform: scale(1.04); }
.work-cap {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: var(--paper); color: var(--ink);
  border-top: var(--border-w) solid var(--ink);
  padding: 8px 10px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 8px;
  text-align: left;
}
.work:hover .work-cap { background: var(--accent); color: var(--accent-ink); }
.work:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: -6px; }

/* ==========================================================================
   THE VAULT — technical media directory
   ========================================================================== */
/* Vertical reels — the clips are phone footage, so the slots are portrait
   too: no letterboxing, and it reads like a reel strip. Three across keeps
   six clips as two clean rows, and makes each tile bigger than four across.
   Keep the reel count a multiple of 3 or the last row goes ragged. */
.vault-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--border-w) solid var(--rule); background: var(--sky); }
@media (max-width: 1000px) { .vault-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .vault-grid { grid-template-columns: 1fr; } }

.vault-item {
  border-right: var(--border-w) solid var(--rule);
  border-bottom: var(--border-w) solid var(--rule);
  padding: clamp(16px, 1.8vw, 24px);
}
.vault-screen {
  position: relative;
  aspect-ratio: 9/16;
  border: var(--border-w) solid var(--rule);
  background: var(--ink);   /* letterbox behind video stays dark */
  display: grid; place-items: center;
  overflow: hidden;
}

/* Every clip is clickable, and says so. Hover previews it silently; clicking
   plays it with sound. The click matters technically as well as visually — it
   is a real user gesture, which is the only thing browsers accept as
   permission to play audio. */
.vault-item { cursor: pointer; }
.vault-screen { position: relative; }
.sound-badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ink); color: var(--paper);
  border: var(--border-w) solid var(--paper);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 11px;
  pointer-events: none;
  transition: background .14s linear, color .14s linear;
}
.vault-item.is-sounding .sound-badge, .vault-feature.is-sounding .sound-badge { background: var(--accent); color: var(--accent-ink); border-color: var(--ink); }
html[lang="he"] .sound-badge { font-family: "Heebo", var(--mono); letter-spacing: 0; }

/* Sound toggle. Off by default — unexpected audio drives people away, and
   browsers block unmuted playback until the visitor interacts anyway. */
.sound-btn {
  appearance: none; cursor: pointer;
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); color: var(--fg);
  border: var(--border-w) solid var(--rule);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 13px 20px;
  box-shadow: var(--hard);
  transition: transform .12s linear, box-shadow .12s linear, background .14s linear, color .14s linear;
}
.sound-btn:hover { transform: translate(4px,4px); box-shadow: 4px 4px 0 var(--accent); }
.sound-btn:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: 4px; }
.sound-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.sound-btn .ico { font-size: 15px; line-height: 1; }
html[lang="he"] .sound-btn { font-family: "Heebo", var(--mono); letter-spacing: 0; }

/* Landscape clips get 16:9 slots of their own. Putting a wide clip in a
   portrait slot crops it to a letterbox sliver, so orientation decides which
   row a clip belongs in — check with video.videoWidth, not the filename. */
.vault-wide { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--border-w) solid var(--rule); background: var(--sky); }
@media (max-width: 900px) { .vault-wide { grid-template-columns: 1fr; } }
.vault-screen--wide { aspect-ratio: 16/9; }

/* The one landscape clip gets a full-width feature slot above the strip. */
.vault-feature {
  border-top: var(--border-w) solid var(--rule);
  background: var(--sky);
  padding: clamp(20px, 3vw, 40px);
}
.vault-feature .vault-screen { aspect-ratio: 16/9; }
.vault-feature .vault-meta { font-size: 12px; }
.vault-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder shown until a real file is dropped in. Flat — no hatching. */
.vault-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 10px;
  background: var(--surface);
  text-align: center; padding: 20px;
}
.vault-empty .mark {
  font-family: var(--display); font-size: 34px; color: var(--accent-fg); letter-spacing: -0.03em;
}
.vault-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 14px; padding-top: 12px;
  border-top: var(--border-w) solid var(--ink);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.vault-meta .t { font-weight: 700; color: var(--fg); }
.vault-meta .tc { color: var(--accent-fg); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-copy p { font-size: 16px; }
/* The family photo is the point of this section: the story sits low in its
   column so the faces stay clear. On a phone the photo is shown whole, above the text. */
#about .about-copy { align-self: end; }
#about .split > * + * { border-left: 0; border-right: 0; border-top: 0; }
/* English runs longer in the mono face — tighten it so it clears the faces too. */
@media (min-width: 901px) {
  html:not([lang="he"]) #about .about-copy p { font-size: 14px; line-height: 1.55; padding: 10px 14px; margin-top: 12px; }
}
@media (max-width: 900px) {
  #about { padding-top: 65.9vw; }   /* photo is 1748x1152 */
  #about::before { background-size: 100% auto; background-position: top; background-repeat: no-repeat; background-color: var(--paper); }
}
/* Keep faces clear of the text boxes. The crowd photos are mirrored for the
   reading direction whose boxes would otherwise land on people, and the
   column divider no longer cuts through the hero photo. */
html[dir="ltr"] .mesh-flip-ltr::before,
html[dir="ltr"] .mesh-flip-ltr::after,
html[dir="rtl"] .mesh-flip-rtl::before,
html[dir="rtl"] .mesh-flip-rtl::after { transform: scaleX(-1); }
#home > .split > * + * { border-left: 0; border-right: 0; border-top: 0; }
@media (min-width: 901px) {
  html[dir="ltr"] .pad--end-ltr > * { margin-left: auto; }
}
/* Recommendations: framed certificates (and, later, customer quotes). */
.recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 28px; align-items: start; max-width: 980px; }
@media (max-width: 720px) { .recs { grid-template-columns: 1fr; } }
.rec { margin: 0; background: var(--white); border: var(--border-w) solid var(--ink); box-shadow: var(--hard-sm); }
.rec img { display: block; width: 100%; height: auto; border-bottom: var(--border-w) solid var(--ink); }
.rec figcaption { padding: 16px 18px; }
.rec h3 { font-size: 1rem; margin-bottom: 8px; }
.rec p { font-size: 14px; margin: 0; }
.rec .by { margin-top: 10px; color: var(--muted); font-size: 12px; }
.placeholder {
  border: var(--border-w) dashed var(--accent-fg);
  padding: 22px;
  margin-top: 26px;
  font-size: 13px;
  color: var(--muted);
}
.placeholder strong { color: var(--accent-fg); display: block; margin-bottom: 8px; letter-spacing: 0.14em; }

/* ==========================================================================
   TOUR SPECS — technical briefing table
   ========================================================================== */
.specs-scroll { overflow-x: auto; border-top: var(--border-w) solid var(--rule); background: var(--surface); }
table.specs {
  width: 100%; min-width: 860px;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
table.specs th, table.specs td {
  border-right: var(--border-w) solid var(--rule);
  border-bottom: var(--border-w) solid var(--rule);
  padding: 15px 16px;
  text-align: left;
  vertical-align: top;
}
table.specs thead th {
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
}
table.specs tbody tr:hover td { background: var(--sky); }
/* Arriving from a tour card's FULL DETAILS link: keep the header row in view. */
table.specs tbody tr { scroll-margin-top: calc(var(--nav-h) + 72px); }
table.specs tbody tr:target td { background: var(--sky); }
table.specs td.route { font-family: var(--display); font-size: 15px; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; }
table.specs td.rate { color: var(--accent-fg); font-weight: 700; white-space: nowrap; }

/* Difficulty meter — solid blocks, no decoration */
.diff { display: inline-flex; gap: 3px; align-items: center; }
.diff i { width: 11px; height: 11px; background: var(--hair); display: block; }
.diff i.on { background: var(--accent); }
.diff span { margin-left: 9px; font-size: 10px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }

/* ==========================================================================
   DISPATCH — FAQ + booking form
   ========================================================================== */
.faq details {
  border: var(--border-w) solid var(--rule);
  margin-bottom: -3px;            /* collapse adjacent borders */
  background: var(--surface);
}
.faq summary {
  list-style: none; cursor: pointer;
  padding: 16px 18px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: -6px; }
.faq summary::after { content: "[+]"; color: var(--accent-fg); font-weight: 700; flex: none; }
.faq details[open] > summary { background: var(--accent); color: var(--accent-ink); }
.faq details[open] > summary::after { content: "[−]"; color: var(--accent-ink); }
.faq .a { padding: 16px 18px; border-top: var(--border-w) solid var(--rule); font-size: 14px; }
.faq .a p { margin: 0; }
.faq .a a { color: var(--accent-fg); font-weight: 700; text-decoration: underline; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  padding: 12px 14px 6px;
  border-top: var(--border-w) solid var(--rule);
  border-left: var(--border-w) solid var(--rule);
  border-right: var(--border-w) solid var(--rule);
}
.field + .field label { border-left: 0; }
@media (max-width: 620px) { .field + .field label { border-left: var(--border-w) solid var(--rule); } }
.field input, .field select, .field textarea {
  font-family: var(--mono); font-size: 14px; color: var(--fg);
  background: var(--surface);
  border: var(--border-w) solid var(--rule);
  border-top: 0;
  padding: 12px 14px;
  width: 100%;
  transition: background .12s linear, outline-color .12s linear;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: var(--border-w) solid var(--focus);
  outline-offset: -3px;
  background: var(--paper);
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; }

/* Phone numbers never break across lines. */
a[href^="tel:"], .foot .big { white-space: nowrap; }
.form-note { font-size: 11px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; margin: 14px 0 0; }

/* ==========================================================================
   FOOTER — barebones contact block
   ========================================================================== */
.foot { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .foot { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .foot { grid-template-columns: 1fr; } }
.foot > div { padding: 26px; border-right: var(--border-w) solid var(--rule); border-bottom: var(--border-w) solid var(--rule); }
.foot a:hover { color: var(--accent-fg); }
footer a:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: 3px; }
.foot .big { font-family: var(--display); font-size: 19px; letter-spacing: -0.02em; margin-top: 8px; display: block; }
.foot-bar {
  padding: 18px 26px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.foot-bar a:hover { color: var(--accent-fg); }

/* ==========================================================================
   LIGHTBOX (work grid)
   ========================================================================== */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,34,43,.96);   /* --ink, near-opaque */
  display: none; place-items: center; padding: 24px;
  touch-action: pan-y;
}
.lb.is-open { display: grid; }

.lb-stage { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 100%; }

/* The frame is a FIXED box so the bar beneath it never changes size — that is
   what stopped the next/prev buttons shifting under the cursor on each click.

   The photo is then bounded by EXPLICIT max dimensions rather than percentages.
   A percentage height here silently failed to resolve against the centred grid
   item, so tall photos rendered at full height and were cropped by the frame.
   Explicit lengths cannot fail that way. */
.lb-frame {
  --lb-w: min(1100px, 92vw);
  --lb-h: min(72vh, 720px);
  border: var(--border-w) solid var(--rule);
  background: var(--bg-alt);
  display: grid; place-items: center;
  width: var(--lb-w);
  height: var(--lb-h);
  overflow: hidden;
}
.lb-frame img {
  width: auto; height: auto;
  max-width: calc(var(--lb-w) - (var(--border-w) * 2));
  max-height: calc(var(--lb-h) - (var(--border-w) * 2));
  display: block;
  user-select: none; -webkit-user-drag: none;
}
.lb-bar {
  width: 100%;
  border: var(--border-w) solid var(--rule); border-top: 0;
  background: var(--bg);
  display: flex; align-items: stretch; justify-content: space-between;
}
.lb-title {
  padding: 12px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.lb-title .count { color: var(--accent-fg); font-variant-numeric: tabular-nums; }
.lb-arrows { display: flex; }
.lb-arrows button {
  background: var(--bg); color: var(--fg);
  border: 0; border-left: var(--border-w) solid var(--rule);
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  padding: 12px 22px; cursor: pointer;
  transition: background .12s linear, color .12s linear;
}
.lb-arrows button:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
.lb-arrows button:disabled { color: var(--hair); cursor: default; }
.lb button:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: -6px; }

.lb-close {
  position: absolute; top: 22px; right: 22px;
  background: var(--accent); color: var(--accent-ink);
  border: var(--border-w) solid var(--rule);
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  padding: 11px 17px; cursor: pointer; text-transform: uppercase;
}
.lb-hint {
  margin-top: 14px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}

/* Count badge on a tile that holds more than one photo */
.work-cap .n {
  background: var(--accent); color: var(--accent-ink);
  padding: 1px 6px; font-weight: 700;
}

.skip {
  position: absolute; top: -80px; left: 10px; z-index: 300;
  background: var(--accent); color: var(--accent-ink);
  border: var(--border-w) solid var(--ink);
  padding: 12px 18px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.skip:focus { top: 8px; }

/* ==========================================================================
   CONTACT ICONS, SOCIALS, FOR BUSINESS
   ========================================================================== */
.ico-svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; display: inline-block; vertical-align: middle; }

/* Buttons that carry an icon */
.btn--icon { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.btn--icon .ico-svg { width: var(--icon-md); height: var(--icon-md); }

/* Direct contact: WhatsApp 24/7 + call 08:00–17:00 */
.direct { margin-top: 28px; }
.direct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
@media (max-width: 620px) { .direct-grid { grid-template-columns: 1fr; } }
.direct-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--hard-ink-sm);
  color: var(--ink); text-decoration: none;
  transition: transform .12s linear, box-shadow .12s linear;
}
.direct-btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.direct-btn:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: 4px; }
.direct-btn .ico-svg { width: 34px; height: 34px; }
.direct-btn--wa   { background: var(--whatsapp); }
.direct-btn--call { background: var(--sky); }
.direct-txt { display: flex; flex-direction: column; line-height: 1.25; }
.direct-txt strong { font-family: var(--display); font-size: 18px; font-weight: 400; }
.direct-txt small { font-family: var(--mono); font-size: 13px; font-weight: 600; }

/* Footer: icon beside the label, hours line under the numbers */
.foot-ico { display: flex; align-items: center; gap: 8px; }
.foot-ico .ico-svg { width: var(--icon-md); height: var(--icon-md); color: var(--accent-bright); }
.foot .hours { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--accent-fg); letter-spacing: .04em; }

/* Socials — big, with logos */
.socials-wrap { padding: 26px; border-bottom: var(--border-w) solid var(--rule); }
.socials { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.social {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px 14px 16px;
  border: var(--border-w) solid var(--rule);
  color: var(--fg); text-decoration: none;
  transition: transform .12s linear, box-shadow .12s linear, background .12s linear;
}
.social .ico-svg { width: var(--icon-lg); height: var(--icon-lg); }
.social span { display: flex; flex-direction: column; line-height: 1.2; }
.social strong { font-family: var(--display); font-size: 18px; font-weight: 400; }
.social small { font-size: 13px; color: var(--muted); }
.social:hover { background: var(--accent); color: var(--accent-ink); box-shadow: var(--hard-sm); transform: translate(-2px, -2px); }
.social:hover small { color: var(--accent-ink); }
.social:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: 3px; }
@media (max-width: 620px) { .social { flex: 1 1 100%; } }

/* For Business */
.biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--border-w) solid var(--rule); }
@media (max-width: 860px) { .biz-grid { grid-template-columns: 1fr; } }
.biz-card {
  background: var(--surface);
  padding: clamp(24px, 2.6vw, 36px);
  border-right: var(--border-w) solid var(--rule);
  border-bottom: var(--border-w) solid var(--rule);
  display: flex; flex-direction: column; gap: 10px;
}
html[dir="rtl"] .biz-card { border-right: 0; border-left: var(--border-w) solid var(--rule); }
.biz-no { font-family: var(--display); font-size: 34px; color: var(--accent-fg); line-height: 1; }
.biz-card h3 { margin: 0; }
.biz-card p { margin: 0; color: var(--muted); }
.biz-grid--2 { grid-template-columns: repeat(2, 1fr); }
.biz-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .biz-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .biz-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .biz-grid--4 { grid-template-columns: 1fr; } }
.biz-card .svc-rate small { display: block; }
.biz-card .svc-rate .vat { font-size: .6em; margin-inline-start: .35em; }
.biz-tag { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-fg); margin-top: auto; }
html[lang="he"] .biz-tag { font-family: "Heebo", var(--mono); letter-spacing: 0; font-size: 13px; }

/* "WILD" in extreme red. In Hebrew the words swap places: טבע (nature) comes
   first and פראי (wild) second, so the red follows the meaning, not the slot. */
:root { --extreme: #E10600; }   /* 4.5:1 on paper */
.hero-left h1 span:first-child { color: var(--extreme); text-shadow: 4px 4px 0 var(--ink); }
html[lang="he"] .hero-left h1 span:first-child { color: var(--accent-fg); text-shadow: none; }
html[lang="he"] .hero-left h1 .on { color: var(--extreme); text-shadow: 4px 4px 0 var(--ink); }

/* Watch: justified rows — same height per row, width by the clip's shape. */
.vault-row { display: flex; border-top: var(--border-w) solid var(--rule); background: var(--sky); }
.vault-row > .vault-item, .vault-row > .vault-feature {
  min-width: 0; border-top: 0; border-bottom: 0;
  border-right: var(--border-w) solid var(--rule);
  padding: clamp(14px, 1.6vw, 22px);
}
.vault-row > :last-child { border-right: 0; }
html[dir="rtl"] .vault-row > .vault-item, html[dir="rtl"] .vault-row > .vault-feature { border-right: 0; border-left: var(--border-w) solid var(--rule); }
html[dir="rtl"] .vault-row > :last-child { border-left: 0; }
.vault-row .vault-screen { width: 100%; }
.vault-feature { cursor: pointer; }
@media (max-width: 760px) {
  .vault-row { flex-direction: column; }
  .vault-row > .vault-item, .vault-row > .vault-feature { border-right: 0; border-left: 0; border-bottom: var(--border-w) solid var(--rule); }
  .vault-row > :last-child { border-bottom: 0; }
  .vault-row .vault-screen { max-height: 80vh; margin-inline: auto; }
}

/* Hero wordmark, take two: NATURE in black, WILD in blood red (both languages). */
:root { --extreme: #A10A0A; }   /* blood red — 8.6:1 on paper */
.hero-left h1 .on,
html[lang="he"] .hero-left h1 span:first-child { color: var(--ink); text-shadow: none; }
html[lang="he"] .hero-left h1 .on { color: var(--extreme); text-shadow: 4px 4px 0 var(--ink); }

/* Who-comes-with-us cards: clean white, line icons, no sky wash. */
.occasions { background: var(--white); border-top: 1px solid var(--hair); border-bottom: var(--border-w) solid var(--rule); }
.occasion { background: var(--white); border-right: 1px solid var(--hair); border-bottom: 0; transition: background .18s ease, box-shadow .18s ease; }
html[dir="rtl"] .occasion { border-left: 1px solid var(--hair); }
.occasion:last-child { border-right: 0; }
html[dir="rtl"] .occasion:last-child { border-left: 0; }
.occasion .ico { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 18px;
  color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 12%, white); }
.occasion .ico .ico-svg { width: 24px; height: 24px; }
.occasion h3 { letter-spacing: .01em; }
.occasion:hover { background: var(--paper); color: var(--ink); box-shadow: inset 0 4px 0 var(--accent); }
.occasion:hover p { color: var(--muted); }
@media (max-width: 1100px) { .occasion { border-bottom: 1px solid var(--hair); } }

/* Owner: light blue reads "old website". The sky wash becomes a clean,
   barely-cool white; loading placeholders match the page. */
:root { --sky: #F0F2F1; }
.bg-mesh::before { background-color: var(--paper); }

/* --- Signpost from the main page to /business -------------------------- */
.biz-link-wrap { padding: clamp(20px, 3vw, 36px); background: var(--paper); border-bottom: var(--border-w) solid var(--rule); }
.biz-link {
  display: flex; align-items: center; gap: 18px;
  max-width: 620px; padding: 18px 22px;
  background: var(--white); color: var(--ink); text-decoration: none;
  border: var(--border-w) solid var(--ink); box-shadow: var(--hard-sm);
  transition: transform .12s linear, box-shadow .12s linear;
}
.biz-link:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--accent); }
.biz-link:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: 4px; }
.biz-link-ico { width: 52px; height: 52px; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--accent-bright); }
.biz-link-ico .ico-svg { width: 26px; height: 26px; }
.biz-link-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.biz-link-txt strong { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.15; }
.biz-link-txt small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.biz-link-go { font-family: var(--display); font-size: 28px; color: var(--accent-fg); }
html[dir="rtl"] .biz-link-go { transform: scaleX(-1); }
html[lang="he"] .biz-link-txt strong { font-family: "Heebo", var(--display); font-weight: 900; }

/* --- Business page ------------------------------------------------------- */
.back-btn {
  flex: none; white-space: nowrap; margin-inline-start: 10px;
  padding: 11px 14px; border: var(--border-w) solid var(--accent-bright);
  color: var(--accent-bright); text-decoration: none;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: background .14s linear, color .14s linear;
}
.back-btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.back-btn:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: 3px; }
html[lang="he"] .back-btn { font-family: "Heebo", var(--mono); letter-spacing: 0; font-size: 13px; }
@media (max-width: 520px) { .back-btn { padding: 9px 10px; letter-spacing: .06em; } }
/* Text sits high so the riders at the bottom of the photo stay visible. */
.biz-hero { min-height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; justify-content: flex-start; }
.biz-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 560px) {
  .page-business .nav-burger { white-space: nowrap; padding: 9px 9px; letter-spacing: .04em; }
  .page-business .lang-btn { padding: 9px 9px; margin-inline-start: 6px; }
  .page-business .back-btn { padding: 9px 8px; margin-inline-start: 6px; font-size: 10px; letter-spacing: .03em; }
  .page-business .nav-brand img { max-width: 64px; height: auto; }
}
@media (max-width: 560px) { .page-business .nav { gap: 6px; padding-inline: 10px; } }
/* Signpost directly under the hero: full-width strip, box on the start side. */
.biz-link-wrap { border-top: var(--border-w) solid var(--rule); }
/* Hero: the call-to-action sits under the title; the short version under the stats. */
.hero-left-actions { margin-top: clamp(28px, 3.5vw, 44px); }
.hero-left-actions .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
/* Hero, take three: keep the top of the photo clear so the faces show.
   Title column = title + buttons, short description pinned to the bottom.
   Other column = stats only, pinned to the bottom. */
.hero-left { justify-content: flex-start; }
.hero-left > .mono-label:first-child { margin-top: auto; }
.hero-left .hero-desc { margin-top: auto; padding-top: clamp(28px, 4vw, 48px); }
.hero-left .hero-desc p { max-width: 560px; }
.hero-right { justify-content: flex-end; }
@media (max-width: 900px) {
  .hero-left > .mono-label:first-child, .hero-left .hero-desc { margin-top: 0; }
}

/* Business quote form: same fields as the booking form, plus add-on checkboxes. */
.quote { max-width: 720px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: var(--border-w) solid var(--rule); border-top: 0; padding: 6px 0; }
@media (max-width: 620px) { .checks { grid-template-columns: 1fr; } }
html .field .checks label.check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg);
  background: none; border: 0; padding: 10px 14px;
}
.checks input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

/* Smallest phones (320px): the hero word NATURE., the stats box (REQUIRED in
   the display face) and the business header's four controls were each wider
   than the screen. */
@media (max-width: 360px) {
  h1 { font-size: 44px; }
  .hero-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-stats .v { font-size: 20px; }
  .hero-stats > div { padding-inline: 10px; }
  .page-business .nav { gap: 4px; padding-inline: 8px; }
  .page-business .nav-brand img { max-width: 44px; }
  .page-business .lang-btn, .page-business .back-btn { margin-inline-start: 2px; }
  .page-business .nav-burger, .page-business .lang-btn { padding: 9px 6px; }
}

/* Business hero: the main button goes to the quote form; this is the quiet
   alternative for people who would rather just chat. Dark chip so it stays
   legible over the photo, same family as .mono-label. */
.hero-wa {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  margin-top: 18px; padding: 8px 12px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-decoration: none;
}
.hero-wa .ico-svg { width: 18px; height: 18px; color: var(--accent-bright); }
.hero-wa:hover span { text-decoration: underline; }

/* Prices by vehicle size (2/4/6 seats). Cards show "from"; the full list sits
   in the specs table (main page) and inside each package card (business). */
.svc-rate .from { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; margin-inline-end: .5em; vertical-align: middle; }
html[lang="he"] .svc-rate .from { font-family: "Heebo", var(--mono); font-size: 14px; letter-spacing: 0; }
.size-prices { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.size-prices li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.size-prices span { font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
html[lang="he"] .size-prices span { font-family: "Heebo", var(--mono); font-size: 13px; letter-spacing: 0; }
.size-prices b { color: var(--accent-fg); font-weight: 700; }
table.specs td.rate .size-prices { min-width: 220px; }
.biz-card .size-prices { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-family: var(--mono); }