/* Sun Star V.I.P — layout. Every colour, size and space reads from tokens.css.
   No literal hex in this file: if you need a new colour, add a token. */

/* font-weight is explicit because Assistant is a variable font whose DEFAULT instance is
   200 (ExtraLight). Without this every unweighted element renders ExtraLight. */
body{background:var(--ss-bg-canvas);color:var(--ss-text-primary);
  font-family:var(--ss-font-body-family);font-size:var(--ss-font-body-size);
  font-weight:400;
  line-height:var(--ss-font-body-line-height);margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:var(--ss-border-focus-ring) solid var(--ss-border-focus);outline-offset:3px}

.wrap{width:min(var(--ss-layout-content-max),92vw);margin-inline:auto}
.sec{padding-block:var(--ss-space-section-y);background:var(--ss-bg-canvas);color:var(--ss-text-primary)}
.sec--tight{padding-block:var(--ss-space-section-y-tight)}

/* eyebrow — the logo's own device: hairline, spaced Latin caps, hairline */

h1,h2,h3{margin:0;text-wrap:balance}
.h-hero{font-family:var(--ss-font-hero-family);font-size:var(--ss-font-hero-size);
  font-weight:var(--ss-font-hero-weight);line-height:var(--ss-font-hero-line-height)}
.h-1{font-family:var(--ss-font-h1-family);font-size:var(--ss-font-h1-size);
  font-weight:var(--ss-font-h1-weight);line-height:var(--ss-font-h1-line-height)}
.h-2{font-family:var(--ss-font-h2-family);font-size:var(--ss-font-h2-size);
  font-weight:var(--ss-font-h2-weight);line-height:var(--ss-font-h2-line-height)}
.h-3{font-family:var(--ss-font-h3-family);font-size:var(--ss-font-h3-size);
  font-weight:var(--ss-font-h3-weight);line-height:var(--ss-font-h3-line-height)}
.lede{font-size:var(--ss-font-body-lg-size);color:var(--ss-text-secondary);max-width:var(--ss-layout-prose-max);
  margin:var(--ss-space-block-md) 0 0}
.muted{color:var(--ss-text-secondary)}

/* buttons — the gold fill is identical on both grounds, the brand thread */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ss-space-inline-xs);
  min-height:var(--ss-button-cta-min-height);padding-inline:var(--ss-button-cta-padding-inline);
  border-radius:var(--ss-button-radius);text-decoration:none;border:1px solid transparent;
  font-family:var(--ss-font-button-family);font-size:var(--ss-font-button-size);
  font-weight:var(--ss-font-button-weight);line-height:var(--ss-font-button-line-height);
  transition:background-color var(--ss-motion-duration-fast) var(--ss-motion-easing-standard)}
.btn--primary{background:var(--ss-action-primary-bg);color:var(--ss-action-primary-text)}
.btn--primary:hover{background:var(--ss-action-primary-bg-hover)}
.btn--ghost{background:transparent;color:var(--ss-action-secondary-text);border-color:var(--ss-action-secondary-border)}
.btn--ghost:hover{background:var(--ss-action-secondary-bg-hover)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--ss-space-inline-md);margin-top:var(--ss-space-block-lg)}

/* header */

/* hero */
.hero{position:relative;min-height:min(92vh,860px);display:grid;align-items:end;
  background:var(--ss-bg-sunken);overflow:hidden}
.hero__media{grid-area:1/1;position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__scrim{grid-area:1/1;position:absolute;inset:0;
  background:linear-gradient(to top,var(--ss-bg-sunken) 6%,rgba(5,4,3,.72) 38%,rgba(5,4,3,.15) 78%)}
.hero__in{position:relative;grid-area:1/1;align-self:end;
  padding-block:var(--ss-space-section-y-tight) var(--ss-space-section-y)}
.hero__copy{max-width:22ch}
.hero .h-hero{color:var(--ss-text-primary);font-size:var(--ss-font-display-size);
  line-height:var(--ss-font-display-line-height)}
.hero .lede{color:var(--ss-text-secondary)}

/* fleet */
.grid-3{display:grid;gap:var(--ss-space-grid-gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.veh{background:var(--ss-vehicle-card-bg);border:1px solid var(--ss-vehicle-card-border);
  border-radius:var(--ss-vehicle-card-radius);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--ss-motion-duration-fast) var(--ss-motion-easing-standard)}
.veh:hover{border-color:var(--ss-vehicle-card-border-selected)}
.veh__img{aspect-ratio:var(--ss-vehicle-card-media-ratio);object-fit:cover;width:100%}
.veh__body{padding:var(--ss-vehicle-card-padding);display:flex;flex-direction:column;gap:var(--ss-space-block-xs);flex:1}
.veh__seats{font-family:var(--ss-font-numeric-family);color:var(--ss-text-accent);
  font-weight:var(--ss-font-numeric-weight)}
.veh__note{font-size:var(--ss-font-caption-size);color:var(--ss-text-secondary);margin-top:auto}

/* audience columns */
.cols-3{display:grid;gap:var(--ss-space-grid-gap);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:var(--ss-space-block-lg)}
.col__rule{height:1px;background:var(--ss-border-strong);margin-bottom:var(--ss-space-block-md)}
.col p{color:var(--ss-text-secondary);margin:var(--ss-space-block-xs) 0 0}

/* since-2006 band */
.band{background:var(--ss-bg-sunken);padding-block:var(--ss-space-block-lg);text-align:center}
.band__mark{display:flex;align-items:center;gap:var(--ss-space-inline-lg);justify-content:center;
  max-width:34rem;margin-inline:auto}
.band__mark::before,.band__mark::after{content:"";height:1px;background:var(--ss-border-strong);flex:1}
.band__mark span{font-family:var(--ss-font-latin-wordmark-family);font-size:var(--ss-font-h3-size);
  letter-spacing:var(--ss-font-latin-wordmark-letter-spacing);color:var(--ss-text-accent);white-space:nowrap}
.clients{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ss-space-inline-lg) var(--ss-space-10);
  margin:var(--ss-space-block-lg) 0 0;padding:0;list-style:none}
.clients li{color:var(--ss-text-secondary);font-size:var(--ss-font-body-sm-size);opacity:.75}

/* footer */
.site-foot{background:var(--ss-bg-sunken);padding-block:var(--ss-space-block-lg) 0;
  border-top:1px solid var(--ss-border-subtle)}
.site-foot__logo{width:44px;color:var(--ss-border-strong)}
.site-foot small{color:var(--ss-text-secondary)}
.site-foot__grid{display:grid;gap:var(--ss-space-8);
  grid-template-columns:1.5fr repeat(3,1fr);align-items:start}
.site-foot__brand p{color:var(--ss-text-secondary);font-size:var(--ss-font-body-sm-size);
  margin:var(--ss-space-3) 0 0;max-width:32ch}
.site-foot__h{font-size:var(--ss-font-caption-size);color:var(--ss-color-gold-300);
  font-weight:700;margin:0 0 var(--ss-space-3)}
.site-foot__col{display:flex;flex-direction:column;gap:var(--ss-space-2)}
.site-foot__col a{color:var(--ss-color-bone-100);text-decoration:none;
  font-size:var(--ss-font-body-sm-size);width:fit-content}
.site-foot__col a:hover{color:var(--ss-color-gold-400)}
.site-foot__col p{color:var(--ss-text-secondary);font-size:var(--ss-font-body-sm-size);margin:0}
.site-foot__hours{margin-top:var(--ss-space-1) !important}
.site-foot__bar{margin-top:var(--ss-space-8);padding-block:var(--ss-space-5);
  border-top:1px solid var(--ss-color-ink-500)}
@media (max-width:820px){
  .site-foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .site-foot__grid{grid-template-columns:1fr}
}

@media (max-width:700px){
  /* The sticky bottom bar carries call/book here, but the header still has to
     carry the logo and the burger — hiding it left mobile with no navigation. */
  .hero{min-height:78vh}
}

/* ── service-led additions ─────────────────────────────────────────────── */
.wrap--narrow{width:min(46rem,92vw)}
.center{text-align:center}
.btn-row--center{justify-content:center}
.lede--center{margin-inline:auto}

/* centred hero */
.hero--center .hero__in{text-align:center}
.hero--center .hero__copy{max-width:26ch;margin-inline:auto}
.hero--center .lede{margin-inline:auto}

/* phone in the header — the market's real closing channel */

/* service cards */
.card{background:var(--ss-bg-surface);border:1px solid var(--ss-border-subtle);
  border-radius:var(--ss-radius-card);padding:var(--ss-space-6)}
.card h3{margin-bottom:var(--ss-space-2)}
.card p{color:var(--ss-text-secondary);margin:0}

/* proof stats */

/* how it works */

/* fleet strip — supporting evidence, not the spine */

/* faq */
.faq{border-bottom:1px solid var(--ss-border-subtle);padding-block:var(--ss-space-4)}
.faq summary{cursor:pointer;font-weight:var(--ss-font-h4-weight);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--ss-space-4);
  min-height:var(--ss-layout-touch-target)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ss-text-accent);font-size:1.4em;line-height:1;flex-shrink:0}
.faq[open] summary::after{content:"−"}
.faq p{color:var(--ss-text-secondary);margin:var(--ss-space-3) 0 0}

.band__sub{color:var(--ss-text-secondary);font-size:var(--ss-font-body-sm-size);
  margin:var(--ss-space-block-md) 0 0}

@media (max-width:700px){ .site-head__tel{display:none} }

/* Hello Elementor sets figcaption{color:#333}, which is 1.57:1 on our dark ground.
   Reclaim it explicitly rather than relying on inheritance. */

/* Centred hero: clear the fixed header, keep the headline narrow but let the lede and
   the button row use the full measure so they do not wrap onto separate lines. */
.hero--center .hero__in{padding-block-start:calc(var(--ss-space-section-y) * 1.6)}
.hero--center .hero__copy{max-width:40ch}
.hero--center .h-hero{max-width:13ch;margin-inline:auto}
.hero--center .lede{max-width:36ch}

/* ── split hero: warm image on one side, copy + quote panel on the other ────── */
/* A stray ".hero--center" with no declaration block used to sit directly above this rule,
   so the parser swallowed it into ".hero--center .hero--split" and NONE of the split-hero
   sizing applied — the hero was silently inheriting align-items:end from .hero. */
.hero--split{min-height:min(88vh,820px);align-items:center}
.hero--split .hero__scrim{
  background:linear-gradient(to left,rgba(5,4,3,.90) 0%,rgba(5,4,3,.78) 34%,rgba(5,4,3,.30) 62%,transparent 88%)}
.hero--split .hero__in{
  display:grid;gap:var(--ss-space-10);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  padding-block:calc(var(--ss-space-section-y) * 1.5) var(--ss-space-section-y)}
.hero--split .hero__copy{max-width:none}
.hero--split .h-hero{font-size:var(--ss-font-hero-size);line-height:var(--ss-font-hero-line-height);
  max-width:12ch}
.hero--split .lede{max-width:38ch;font-size:var(--ss-font-body-lg-size)}

/* quote panel */
.quote{background:rgba(11,10,9,.72);backdrop-filter:blur(14px);
  border:1px solid var(--ss-border-strong);border-radius:var(--ss-radius-card);
  padding:var(--ss-space-6);box-shadow:var(--ss-elevation-overlay)}
.quote__h{font-family:var(--ss-font-h4-family);font-size:var(--ss-font-h4-size);
  font-weight:var(--ss-font-h4-weight);color:var(--ss-text-primary);margin:0 0 var(--ss-space-4)}
.quote__grid{display:grid;gap:var(--ss-space-3);grid-template-columns:1fr 1fr}
/* `hidden` is an author-stylesheet casualty: the browser's own [hidden]{display:none}
   is a user-agent rule, so any author `display` — including the .field rule below —
   silently outranks it. avail.js hides the fields with el.hidden = true on a
   successful submit, and without this the customer is left staring at the form they
   just sent, still filled in, under a success message. Belt and braces on the
   element that actually does it. */
[hidden]{display:none !important}
.field{display:flex;flex-direction:column;gap:var(--ss-space-1)}
.field span{font-size:var(--ss-font-caption-size);color:var(--ss-text-secondary)}
/* The line under an optional field that says why filling it in is worth the
   visitor's time. Smaller than the label so it reads as an answer to "why do you
   want this?" rather than as a second question. */
.field__why{font-size:var(--ss-font-caption-size);color:var(--ss-text-secondary);
  line-height:1.45}
.field input,.field select{
  min-height:var(--ss-field-min-height);padding-inline:var(--ss-field-padding-inline);
  background:var(--ss-field-bg);color:var(--ss-field-text);
  border:1px solid var(--ss-field-border);border-radius:var(--ss-field-radius);
  font-family:inherit;font-size:var(--ss-font-body-sm-size);width:100%}
.field input::placeholder{color:var(--ss-field-placeholder)}
.field input:focus-visible,.field select:focus-visible{
  outline:none;border-color:var(--ss-field-border-focus);
  box-shadow:0 0 0 3px rgba(234,193,126,.22)}
/* A consent row is the one .field that is not label-above-input. Without this it
   inherits the column direction and the checkbox floats on a line of its own,
   detached from the sentence it governs — which reads as a rendering fault on the
   one control a customer is legally agreeing with. Row, checkbox first (start =
   right in RTL), aligned to the first line of text rather than centred, because
   the label wraps to two lines. */
.field--check{flex-direction:row;align-items:flex-start;gap:var(--ss-space-2);
  cursor:pointer;padding-block:var(--ss-space-1)}
.field--check input[type="checkbox"]{
  flex:0 0 auto;inline-size:1.15rem;block-size:1.15rem;min-height:0;width:auto;
  margin-block-start:.15em;accent-color:var(--ss-color-gold-400,#EAC17E)}
.field--check span{font-size:var(--ss-font-caption-size);line-height:1.5;
  color:var(--ss-text-secondary)}
.field--check a{color:inherit;text-underline-offset:.2em}
.quote__go{width:100%;margin-top:var(--ss-space-4)}
.quote__alt{margin:var(--ss-space-3) 0 0;text-align:center;
  font-size:var(--ss-font-body-sm-size);color:var(--ss-text-secondary)}
.quote__alt a{color:var(--ss-text-accent);text-decoration:none;font-weight:500}

@media (max-width:900px){
  .hero--split .hero__in{grid-template-columns:1fr;gap:var(--ss-space-8)}
  .hero--split .hero__scrim{background:linear-gradient(to top,rgba(5,4,3,.92) 30%,rgba(5,4,3,.55) 70%,rgba(5,4,3,.25))}
  .hero--split .h-hero{max-width:none}
}

/* split content section — photography beside copy, so the body is not text-only */
.split{display:grid;gap:var(--ss-space-10);align-items:center;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.split__media{margin:0}
.split__media img{width:100%;border-radius:var(--ss-radius-card);
  border:1px solid var(--ss-border-subtle);aspect-ratio:4/3;object-fit:cover}
.split__body .cols-3{grid-template-columns:1fr;gap:var(--ss-space-6)}
.split__body .col__rule{margin-bottom:var(--ss-space-3)}
@media (max-width:900px){ .split{grid-template-columns:1fr} }

/* The header floats over photography, so it cannot rely on the section behind it.
   A top-down scrim guarantees a dark ground for the logo, nav and phone whatever
   the hero image happens to be — bright stone, night asphalt, anything. */

/* .ss-ltr isolates bidi for phone numbers and prices inside running text. On a BLOCK
   element it also flips alignment, so keep it off standalone numeric headings. */

/* fleet strip: give the photographs more presence now that they carry the section */

/* ── icons ─────────────────────────────────────────────────────────────── */
.ico{width:1em;height:1em;flex-shrink:0;stroke-width:1.75}
.btn .ico{width:1.15em;height:1.15em}
.btn{gap:var(--ss-space-2)}

/* ── service cards: photograph + icon + copy ───────────────────────────── */

/* A trailing ".col__ico," left an invalid selector list in front of this at-rule, which made
   the browser discard BOTH — including this reduced-motion guard. */
@media (prefers-reduced-motion:reduce){ .svc:hover{transform:none} }

/* The height of the fixed header, in one place.
   .pagehead has to clear it, and it used to do that with a hardcoded `76px`
   that silently went stale the moment the bar changed — the page heads ended
   up 11px clear of the nav. Both sides now read the same variable. The three
   values match the three widths the bar actually renders at. */
:root{--ss-nav-h:76px}
@media (max-width:900px){ :root{--ss-nav-h:60px} }
@media (min-width:1001px){ :root{--ss-nav-h:96px} }

/* ════════ NAVBAR ════════ */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;padding:var(--ss-space-3) var(--ss-space-4);
  background:var(--ss-color-gold-400);color:var(--ss-color-ink-800)}
.skip:focus{inset-inline-start:0}
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;
  transition:background-color .3s var(--ss-motion-easing-standard),border-color .3s var(--ss-motion-easing-standard);
  border-bottom:1px solid transparent}
.nav[data-solid="true"]{background:rgba(5,4,3,.94);border-bottom-color:var(--ss-color-ink-500)}
.nav__in{min-height:var(--ss-nav-h);padding-block:var(--ss-space-3)}

/* Centred lockup: links divide either side of the mark.
   Three grid columns with the outer two at 1fr keeps the mark optically centred
   even when one side holds more links than the other — which it always does with
   an odd number of items. A flex row with margin:auto would centre the mark
   between its neighbours instead of in the bar, and the difference is visible. */
.nav__nav{display:flex;align-items:center;gap:var(--ss-space-5);width:100%}
.nav__side{display:flex;align-items:center;gap:var(--ss-space-5);min-width:0}
.nav__brand{flex-shrink:0;display:block}
.nav__logo{width:116px;color:var(--ss-color-gold-400);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));display:block}
.nav__links{display:flex;gap:var(--ss-space-6);
  font-size:var(--ss-font-body-sm-size)}

@media (min-width:1001px){
  .nav--split .nav__nav{display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;gap:var(--ss-space-6)}
  .nav--split .nav__side--start{justify-self:start}
  .nav--split .nav__side--end{justify-self:end}
  .nav--split .nav__brand{justify-self:center}
  /* Size the mark by HEIGHT, not width. lockup.svg is square (viewBox 0 0 964
     964), so `width:150px` also made it 150px tall and dragged the fixed header
     to 167px — a sixth of the viewport before any content. Height-first keeps
     the bar predictable whatever the artwork's aspect ratio turns out to be. */
  .nav--split .nav__logo{width:auto;height:64px}
  .nav--split .nav__in{min-height:var(--ss-nav-h)}
}
.nav__links a{color:var(--ss-color-bone-100);text-decoration:none;position:relative;
  padding-block:var(--ss-space-2);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.nav__links a::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;height:1px;
  background:var(--ss-color-gold-400);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .28s var(--ss-motion-easing-standard)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
/* Which page you are on. The bar had no active state at all, which was tolerable
   on a one-page site and is not across twelve. Colour AND a persistent rule, so
   the signal does not rest on hue alone. */
.nav__links a[aria-current]{color:var(--ss-color-gold-300)}
.nav__links a[aria-current]::after{transform:scaleX(1);background:var(--ss-color-gold-400)}
.nav__drawer a[aria-current]{color:var(--ss-color-gold-300);
  box-shadow:inset 2px 0 0 var(--ss-color-gold-400)}
[dir="rtl"] .nav__drawer a[aria-current]{box-shadow:inset -2px 0 0 var(--ss-color-gold-400)}
.nav__cta{display:flex;align-items:center;gap:var(--ss-space-3);flex-shrink:0}
.nav__tel{display:inline-flex;align-items:center;gap:var(--ss-space-2);text-decoration:none;
  color:var(--ss-color-gold-300);font-weight:500;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.nav__tel:hover{color:var(--ss-color-gold-400)}
.btn--sm{min-height:40px;padding-inline:var(--ss-space-5);font-size:var(--ss-font-caption-size)}
.nav__burger{display:none;background:none;border:1px solid var(--ss-color-gold-500);
  border-radius:var(--ss-radius-control);color:var(--ss-color-gold-300);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;font-size:1.25rem}
.nav__burger .ico--close{display:none}
.nav[data-open="true"] .nav__burger .ico--close{display:block}
.nav[data-open="true"] .nav__burger .ico--open{display:none}
.nav__drawer{display:flex;flex-direction:column;gap:var(--ss-space-1);
  background:rgba(5,4,3,.98);border-top:1px solid var(--ss-color-ink-500);padding:var(--ss-space-4)}
/* An author display value outranks the UA [hidden] rule — nav.js toggles .hidden,
   so the closed state has to be restated here or the drawer renders open. */
.nav__drawer[hidden]{display:none}
.nav__drawer a{color:var(--ss-color-bone-100);text-decoration:none;padding:var(--ss-space-3);
  border-radius:var(--ss-radius-control);min-height:var(--ss-layout-touch-target);display:flex;align-items:center}
.nav__drawer a:hover{background:var(--ss-color-ink-700);color:var(--ss-color-gold-400)}
.nav__drawer-tel{color:var(--ss-color-gold-300);font-weight:600}
@media (max-width:1000px){
  .nav__links{display:none}
  .nav__tel{display:none}
  .nav__burger{display:inline-flex}
  /* The leading side holds only links at this width, so it would render as an
     empty flex child eating gap. The mark takes the space instead. */
  .nav--split .nav__side--start{display:none}
  .nav--split .nav__brand{margin-inline-end:auto}
}
@media (min-width:1001px){ .nav__drawer{display:none} }

/* ════════ SECTION HEADS ════════ */
.sec__head{max-width:52ch;margin-bottom:var(--ss-space-block-lg)}
.sec__head .lede{margin-top:var(--ss-space-3)}

/* ════════ SERVICES — asymmetric, never a uniform grid ════════ */
.tag{display:inline-flex;align-items:center;gap:var(--ss-space-2);
  font-size:var(--ss-font-caption-size);color:var(--ss-text-accent);
  border:1px solid var(--ss-border-accent);border-radius:var(--ss-radius-pill);
  padding:var(--ss-space-1) var(--ss-space-3);margin-bottom:var(--ss-space-4)}
.svc-lead{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--ss-space-10);
  align-items:center;padding-block:var(--ss-space-block-lg);
  border-block:1px solid var(--ss-border-subtle)}
.svc-lead__media{margin:0}
.svc-lead__media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--ss-radius-card)}
.svc-lead__body p{color:var(--ss-text-secondary);margin:var(--ss-space-3) 0 0;max-width:44ch}
.link-arrow{display:inline-flex;align-items:center;gap:var(--ss-space-2);
  color:var(--ss-text-accent);text-decoration:none;font-weight:600;
  margin-top:var(--ss-space-5);min-height:var(--ss-layout-touch-target)}
.link-arrow .ico{transition:transform .25s var(--ss-motion-easing-standard)}
.link-arrow:hover .ico{transform:translateX(-4px)}

.svc-rest{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ss-space-8);
  margin-top:var(--ss-space-block-lg)}
.svc2__media{margin:0 0 var(--ss-space-4)}
.svc2__media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--ss-radius-card)}
.svc2__body h3{display:flex;align-items:center;gap:var(--ss-space-2);color:var(--ss-text-primary)}
.svc2__body h3 .ico{color:var(--ss-text-accent);font-size:1.1em}
.svc2__body p{color:var(--ss-text-secondary);margin:var(--ss-space-2) 0 0}

/* ════════ FACTS — a spec sheet, not cards ════════ */
.facts{margin:var(--ss-space-block-lg) 0 0;padding:0;border-top:1px solid var(--ss-border-subtle)}
.facts__row{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--ss-space-6);padding-block:var(--ss-space-4);
  border-bottom:1px solid var(--ss-border-subtle)}
.facts dt{color:var(--ss-text-secondary);font-size:var(--ss-font-body-sm-size);flex-shrink:0}
.facts dd{margin:0;text-align:end}
.facts__v{font-weight:700;color:var(--ss-text-primary)}
.ss-num{font-family:var(--ss-font-latin-wordmark-family);direction:ltr;unicode-bidi:isolate}

/* ════════ FLOW — connected diagram, right to left ════════ */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--ss-space-8);position:relative}
/* The line has to land on the node centres, not on a guessed percentage: 27px is half a
   node on the inline-start side, and one grid column minus half a node on the other.
   At 12% it overshot the last step and stopped short of the first. */
.flow::before{content:"";position:absolute;inset-block-start:27px;
  inset-inline-start:27px;
  inset-inline-end:calc((100% - 2 * var(--ss-space-8)) / 3 - 27px);
  height:1px;background:linear-gradient(to left,transparent,var(--ss-color-gold-700) 12%,
    var(--ss-color-gold-700) 88%,transparent)}
.flow__step{position:relative;padding-top:0}
.flow__node{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:var(--ss-radius-pill);
  background:var(--ss-bg-canvas);border:1px solid var(--ss-color-gold-500);
  color:var(--ss-color-gold-400);font-size:1.35rem;margin-bottom:var(--ss-space-4)}
/* .ss-num forces direction:ltr for the numeral, which flips this block's start edge to the
   left — so the number landed at the opposite edge from its own right-aligned step and read
   as belonging to the neighbouring one. text-align:end resolves to the right here, putting
   the number back above its own heading. */
.flow__num{display:block;font-size:var(--ss-font-caption-size);text-align:end;
  color:var(--ss-text-accent);font-weight:700;margin-bottom:var(--ss-space-1)}
.flow__step p{color:var(--ss-text-secondary);margin:var(--ss-space-2) 0 0;max-width:34ch}
@media (max-width:800px){
  .flow{grid-template-columns:1fr;gap:var(--ss-space-6)}
  .flow::before{inset-block:34px auto;inset-inline-start:26px;inset-inline-end:auto;
    width:1px;height:calc(100% - 60px);
    background:linear-gradient(to bottom,var(--ss-color-gold-700),transparent)}
}

/* ════════ FLEET — editorial rows with a large numeral ════════ */
.fleet2{list-style:none;margin:0;padding:0;border-top:1px solid var(--ss-border-subtle)}
.fleet2__row{display:grid;grid-template-columns:auto 1fr 22rem;gap:var(--ss-space-8);
  align-items:center;padding-block:var(--ss-space-6);
  border-bottom:1px solid var(--ss-border-subtle)}
.fleet2__num{font-family:var(--ss-font-latin-wordmark-family);
  font-size:clamp(3rem,2rem + 3.5vw,5rem);line-height:1;color:var(--ss-text-accent);
  direction:ltr;min-width:3ch;text-align:center}
.fleet2__txt p{color:var(--ss-text-secondary);margin:var(--ss-space-2) 0 0}
.fleet2__seats{font-size:var(--ss-font-caption-size)}
.fleet2__media{margin:0}
.fleet2__media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--ss-radius-card)}
@media (max-width:900px){
  .fleet2__row{grid-template-columns:auto 1fr;gap:var(--ss-space-4)}
  .fleet2__media{grid-column:1 / -1}
}

/* ════════ CLIENT BAND ════════ */
.band__lead{color:var(--ss-text-secondary);font-size:var(--ss-font-body-sm-size);
  text-align:center;margin:0 0 var(--ss-space-6)}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--ss-space-6) var(--ss-space-10);list-style:none;margin:0;padding:0}
.logos__mark{font-family:var(--ss-font-h4-family);font-size:var(--ss-font-body-lg-size);
  font-weight:700;color:var(--ss-color-bone-300);opacity:.8;
  transition:opacity .25s var(--ss-motion-easing-standard),color .25s var(--ss-motion-easing-standard)}
.logos li:hover .logos__mark{opacity:1;color:var(--ss-color-gold-400)}
.band__since{text-align:center;color:var(--ss-color-bone-300);
  font-size:var(--ss-font-caption-size);letter-spacing:.22em;
  margin:var(--ss-space-8) 0 0;text-transform:uppercase}

/* The navbar is fixed, so the first section owns the clearance — but it has to go on the
   CONTENT, not on .hero. .hero__media is position:absolute with grid-area:1/1, so its
   containing block is the grid AREA, not the padding box: padding on .hero pushed the
   photograph down and left a black band across the top instead of running it full-bleed
   behind a transparent navbar. */
.hero__in{padding-block-start:76px}

/* ════════ TRUST BAR — skeleton §3: sits directly under the hero ════════ */
.trustbar{background:var(--ss-bg-sunken);border-block:1px solid var(--ss-color-ink-500);
  padding-block:var(--ss-space-5)}
.trustbar__in{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--ss-space-4) var(--ss-space-8)}
.trustbar__item{display:flex;align-items:center;gap:var(--ss-space-2);margin:0;
  color:var(--ss-color-bone-300);font-size:var(--ss-font-body-sm-size)}
.trustbar__item .ico{color:var(--ss-color-gold-400);font-size:1.2em}
.trustbar__item b{color:var(--ss-color-gold-400);font-weight:600}

.sec__cta{margin:var(--ss-space-block-lg) 0 0;text-align:center}

/* ════════ STICKY ACTION BAR — mobile only, uses the stickyBar tokens ════════ */
.stickybar{display:none}
@media (max-width:900px){
  .stickybar{display:grid;grid-template-columns:1fr 1fr;gap:var(--ss-space-2);
    position:fixed;inset-inline:0;inset-block-end:0;z-index:60;
    background:var(--ss-sticky-bar-bg);
    border-top:1px solid var(--ss-sticky-bar-border-top);
    padding:var(--ss-space-3) var(--ss-space-4);
    padding-block-end:calc(var(--ss-space-3) + var(--ss-sticky-bar-safe-area-bottom))}
  .stickybar__btn{display:inline-flex;align-items:center;justify-content:center;
    gap:var(--ss-space-2);min-height:var(--ss-layout-touch-target);
    border-radius:var(--ss-radius-control);text-decoration:none;
    font-weight:700;font-size:var(--ss-font-body-sm-size)}
  .stickybar__btn--call{color:var(--ss-color-gold-300);
    border:1px solid var(--ss-color-gold-500);background:transparent}
  .stickybar__btn--book{background:var(--ss-color-gold-400);color:var(--ss-color-ink-800)}
  /* the bar must not cover the footer or the last CTA */
  body{padding-block-end:calc(var(--ss-space-16) + var(--ss-sticky-bar-safe-area-bottom))}
  /* skeleton §4: the phone stays reachable in the bar, not hidden */
  .nav__tel{display:inline-flex}
  .nav__tel span{display:none}
}

/* ════════════════════════════════════════════════════════════════════════
   PRESET C — PREMIUM HAPTIC / GLASS  ·  archetype: Ethereal Glass
   One preset, committed. Depth comes from the concentric double-bezel and a
   diffused ambient shadow, never a hard drop shadow or a 1px gray border.
   Dials: VARIANCE 7 · MOTION 6 · DENSITY 3.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --bez: var(--ss-space-bezel);
  --hap: var(--ss-motion-duration-haptic) var(--ss-motion-easing-haptic);
}

/* Phosphor is filled, not stroked — drop the Lucide stroke rule */
.ico{stroke-width:initial}

/* radial-mesh orbs bleeding behind content — the Ethereal Glass signature.
   Fixed, pointer-events-none, decorative only. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46rem 34rem at 88% -6%, rgba(234,193,126,.13), transparent 62%),
    radial-gradient(34rem 26rem at 4% 32%, rgba(169,129,103,.10), transparent 60%),
    radial-gradient(40rem 30rem at 70% 96%, rgba(234,193,126,.07), transparent 62%);
}
/* film grain, one fixed layer, never tiled per card */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.ground-light{position:relative;isolation:isolate}

/* ── the double-bezel: outer shell + inner core ─────────────────────────── */
.bezel{padding:var(--bez);border-radius:var(--ss-radius-card);
  background:rgba(246,243,238,.05);box-shadow:0 0 0 1px rgba(246,243,238,.07);
  transition:box-shadow var(--hap),transform var(--hap)}
.bezel__core{border-radius:var(--ss-radius-core);overflow:hidden;
  background:var(--ss-bg-surface);box-shadow:var(--ss-elevation-inner-light),var(--ss-elevation-ambient)}
.ground-light .bezel{background:rgba(11,10,9,.04);box-shadow:0 0 0 1px rgba(11,10,9,.06)}
a.bezel:hover,.bezel:hover{box-shadow:0 0 0 1px rgba(234,193,126,.34)}

/* buttons get the haptic press */
.btn{border-radius:var(--ss-radius-pill);transition:background-color var(--hap),transform 160ms var(--ss-motion-easing-haptic)}
.btn:active{transform:scale(.98)}

/* ── re-cut every component onto the bezel, off the 1px gray border ────── */
.quote{background:rgba(11,10,9,.55);backdrop-filter:blur(22px) saturate(1.2);
  border:none;box-shadow:0 0 0 1px rgba(246,243,238,.10),var(--ss-elevation-ambient);
  border-radius:var(--ss-radius-card);padding:calc(var(--ss-space-6) + var(--bez))}
.field input,.field select{border:none;box-shadow:0 0 0 1px rgba(246,243,238,.12);
  border-radius:var(--ss-radius-control);background:rgba(5,4,3,.55);
  transition:box-shadow var(--hap)}
.field input:focus-visible,.field select:focus-visible{
  box-shadow:0 0 0 2px var(--ss-color-gold-400)}

.svc-lead{border-block:none;padding-block:var(--ss-space-block-lg)}
.svc-lead__media img,.svc2__media img,.split__media img,.fleet2__media img{
  border:none;border-radius:var(--ss-radius-media);
  box-shadow:var(--ss-elevation-ambient)}
.svc2__media{transition:transform var(--hap)}
.svc2:hover .svc2__media{transform:translateY(-4px)}

.trustbar{border-block:none;background:rgba(5,4,3,.55);backdrop-filter:blur(18px)}
.facts{border-top:none}
.facts__row{border-bottom:1px solid rgba(11,10,9,.08)}
.fleet2,.fleet2__row{border:none}
.fleet2__row{border-bottom:1px solid rgba(11,10,9,.08)}
.faq{border-bottom:1px solid rgba(11,10,9,.08)}
.flow__node{background:rgba(246,243,238,.05);border:none;
  box-shadow:0 0 0 1px rgba(234,193,126,.28),var(--ss-elevation-inner-light)}
.tag{border:none;box-shadow:0 0 0 1px rgba(234,193,126,.30)}
.nav[data-solid="true"]{border-bottom-color:transparent;
  box-shadow:0 1px 0 rgba(246,243,238,.08),0 18px 40px -24px rgba(0,0,0,.8);
  backdrop-filter:blur(18px)}

/* ── MOTION dial 6: the page must actually animate ──────────────────────── */
[data-anim]{opacity:0;transform:translateY(38px);filter:blur(6px)}
[data-anim].is-in{opacity:1;transform:none;filter:none;
  transition:opacity var(--ss-motion-duration-entry) var(--ss-motion-easing-haptic),
             transform var(--ss-motion-duration-entry) var(--ss-motion-easing-haptic),
             filter var(--ss-motion-duration-entry) var(--ss-motion-easing-haptic)}
[data-anim].is-in{transition-delay:calc(var(--i,0) * 90ms)}

@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1;transform:none;filter:none}
  .btn:active{transform:none}
  .svc2:hover .svc2__media{transform:none}
}

/* order action on each fleet row */
.fleet2__order{grid-column:2 / -1;justify-self:start;margin-top:var(--ss-space-3);
  min-height:44px;padding-inline:var(--ss-space-5);font-size:var(--ss-font-caption-size)}
.quote__note{margin:var(--ss-space-3) 0 0;font-size:var(--ss-font-caption-size);
  color:var(--ss-color-gold-300)}
@media (max-width:900px){ .fleet2__order{grid-column:1 / -1} }

/* ════════════════════════════════════════════════════════════════════════
   MOCKUP ALIGNMENT — light-dominant. The approved reference is white ground,
   dark text, gold accent only. Dark is now the exception, not the default.
   ════════════════════════════════════════════════════════════════════════ */

body{background:var(--ss-color-bone-50);color:var(--ss-color-ink-800)}
body::before,body::after{display:none}          /* no orbs / grain — the mockup is clean */

/* every section is light unless it opts out */
.sec{background:var(--ss-color-bone-50)}
.sec--white{background:var(--ss-color-pure-white)}

/* centred heading + short gold underline — the mockup's section signature */
/* Headings are deliberately quiet now. The gold underline used to repeat under all six
   section headings and was the loudest thing on the page; it is gone, the type is smaller,
   and most sections carry no heading at all — their lead-in line does the work instead.
   Only the two sections that genuinely need a label still have one. */
.sec__head{max-width:60ch;margin-inline:auto;margin-bottom:var(--ss-space-8);text-align:center}
.sec__head .h-2{color:var(--ss-color-ink-800);font-size:var(--ss-font-h3-size)}
.sec__head .lede{margin-inline:auto;color:var(--ss-color-warm-grey-700)}

/* A section whose heading was dropped: the lede alone leads it in, centred and muted. */
.sec__lead{max-width:60ch;margin:0 auto var(--ss-space-8);text-align:center;
  color:var(--ss-color-warm-grey-700)}

/* cards, mockup-style: white, hairline, small radius, soft lift */
.card2{background:var(--ss-color-pure-white);border:1px solid var(--ss-color-bone-300alt);
  border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(11,10,9,.04);
  transition:box-shadow var(--hap),transform var(--hap)}
.card2:hover{box-shadow:0 14px 34px -18px rgba(11,10,9,.28);transform:translateY(-3px)}
.card2__media{aspect-ratio:16/10;overflow:hidden;background:var(--ss-color-bone-75)}
.card2__media img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.card2__body{padding:var(--ss-space-5);display:flex;flex-direction:column;gap:var(--ss-space-2);flex:1}
.card2__body h3{color:var(--ss-color-ink-800);font-size:var(--ss-font-h4-size)}
.card2__body p{color:var(--ss-color-warm-grey-700);margin:0;font-size:var(--ss-font-body-sm-size)}
.card2__more{margin-top:auto;padding-top:var(--ss-space-3);color:var(--ss-color-bronze-deep-600);
  text-decoration:none;font-size:var(--ss-font-caption-size);font-weight:600;
  display:inline-flex;align-items:center;gap:var(--ss-space-2);min-height:40px}
.card2__more .ico{transition:transform .25s var(--ss-motion-easing-haptic)}
.card2__more:hover .ico{transform:translateX(-4px)}
.grid-4{display:grid;gap:var(--ss-space-5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* trust strip — 4 gold line-icons with vertical dividers */
.trustbar{background:var(--ss-color-pure-white);border-block:1px solid var(--ss-color-bone-300alt);
  backdrop-filter:none;padding-block:var(--ss-space-6)}
.trustbar__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--ss-space-5);justify-content:space-between}
.trustbar__item{flex-direction:row;align-items:flex-start;gap:var(--ss-space-3);
  padding-inline-start:var(--ss-space-5);border-inline-start:1px solid var(--ss-color-bone-300alt);
  color:var(--ss-color-ink-800)}
.trustbar__item:last-child{border-inline-start:none}
.trustbar__item .ico{font-size:1.9rem;color:var(--ss-color-gold-500)}
.trustbar__item b{display:block;color:var(--ss-color-ink-800);font-weight:700;
  font-size:var(--ss-font-body-sm-size)}
.trustbar__item small{display:block;color:var(--ss-color-warm-grey-700);
  font-size:var(--ss-font-caption-size);margin-top:2px;font-weight:400}

/* ── why-panel: one wide card, five gold-icon columns with dividers ─────── */
/* Five discrete cards rather than the mockup's single divided container — the tighter card
   is a deliberate departure, asked for directly. Hairline border + 12px radius + no shadow
   keeps them inside the page's one card system. */
.whypanel{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:var(--ss-space-4);background:none;border:none;border-radius:0}
.why2{padding:var(--ss-space-5) var(--ss-space-4);text-align:center;
  background:var(--ss-color-pure-white);border:1px solid var(--ss-color-bone-300alt);
  border-radius:12px}
.why2__ico{display:inline-flex;color:var(--ss-color-gold-500);font-size:1.5rem;
  margin-bottom:var(--ss-space-2)}
.why2 h3{font-size:var(--ss-font-body-size);color:var(--ss-color-ink-800);
  margin-bottom:var(--ss-space-1)}
.why2 p{color:var(--ss-color-warm-grey-700);font-size:var(--ss-font-caption-size);margin:0;
  line-height:1.55}

/* ── fleet cards, mockup-style, with our ordering action ───────────────── */
.fleet3{display:grid;gap:var(--ss-space-6);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.veh3__media{aspect-ratio:16/10;background:linear-gradient(180deg,#fff,var(--ss-color-bone-75));
  display:grid;place-items:center;overflow:hidden}
.veh3__media img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.veh3__body{padding:var(--ss-space-5);text-align:center;display:flex;flex-direction:column;
  gap:var(--ss-space-3);border-top:1px solid var(--ss-color-bone-300alt)}
.veh3__body h3{color:var(--ss-color-ink-800);font-size:var(--ss-font-h4-size)}
.veh3__specs{display:flex;justify-content:center;gap:var(--ss-space-5);flex-wrap:wrap;
  color:var(--ss-color-warm-grey-700);font-size:var(--ss-font-caption-size)}
.veh3__specs span{display:inline-flex;align-items:center;gap:var(--ss-space-2)}
.veh3__specs .ico{color:var(--ss-color-gold-500);font-size:1.15em}
.veh3__order{width:100%;background:var(--ss-color-ink-800);color:var(--ss-color-bone-100)}
.veh3__order:hover{background:var(--ss-color-ink-700)}
.veh3__note{margin:0;font-size:var(--ss-font-caption-size);color:var(--ss-color-bronze-deep-600)}

/* ── client roster in the testimonial slot ─────────────────────────────── */
.logos3{list-style:none;margin:0;padding:0;display:grid;gap:var(--ss-space-4);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.logo3{background:var(--ss-color-pure-white);border:1px solid var(--ss-color-bone-300alt);
  border-radius:10px;min-height:88px;display:grid;place-items:center;padding:var(--ss-space-4)}
.logo3 span{color:var(--ss-color-warm-grey-700);font-weight:700;text-align:center;
  font-size:var(--ss-font-body-sm-size)}
/* Real marks are desaturated to one visual system so six different brand palettes don't
   fight the gold; they come up to full colour on hover. Height-capped, never stretched. */
.logo3 img{max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter var(--hap),opacity var(--hap)}
.logo3:hover img{filter:grayscale(0);opacity:1}
@media (prefers-reduced-motion:reduce){.logo3 img{transition:none}}
.clients__note{text-align:center;color:var(--ss-color-warm-grey-700);
  font-size:var(--ss-font-caption-size);margin:var(--ss-space-6) 0 0}

/* fleet — the "something else" case, as a card in the same system as the vehicle cards */
.fleet3__custom{margin:var(--ss-space-6) 0 0;padding:var(--ss-space-6);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--ss-space-4);
  background:var(--ss-color-pure-white);border:1px solid var(--ss-color-bone-300alt);
  border-radius:12px}
.fleet3__custom p{margin:0;color:var(--ss-color-ink-800);
  font-size:var(--ss-font-body-size);font-weight:600}
.fleet3__custom-actions{display:flex;gap:var(--ss-space-3);flex-wrap:wrap}
.fleet3__custom .btn{white-space:nowrap}
.fleet3__custom svg{width:18px;height:18px}
@media (max-width:640px){
  .fleet3__custom{flex-direction:column;align-items:stretch;text-align:center}
  .fleet3__custom-actions{justify-content:center}
}

/* ── closing CTA band ──────────────────────────────────────────────────── */
.ctaband{background:var(--ss-color-ink-800);padding-block:var(--ss-space-16);
  border-radius:0;position:relative;overflow:hidden}
.ctaband__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--ss-space-8)}
.ctaband .h-2{color:var(--ss-color-bone-100)}
.ctaband .lede{color:var(--ss-color-bone-300);margin-top:var(--ss-space-3)}
.ctaband .btn--primary{background:var(--ss-color-gold-400);color:var(--ss-color-ink-800)}
.ctaband .btn--ghost{color:var(--ss-color-gold-300);box-shadow:0 0 0 1px var(--ss-color-gold-500);border:none}

/* light ground means the nav needs a solid state sooner + dark links when solid */
.nav[data-solid="true"] .nav__links a{color:var(--ss-color-bone-100)}

@media (max-width:900px){
  .trustbar__item{border-inline-start:none;padding-inline-start:0}
}

/* The navbar floats over a photograph, so it cannot rely on the section behind it.
   A top-down scrim guarantees a dark ground for the logo, links and phone whatever
   the hero image is — and makes the automated contrast check legitimate rather than
   a false pass that depends on the current photo. */
.nav::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:150px;
  pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,rgba(5,4,3,.72),rgba(5,4,3,.34) 55%,transparent)}
.nav{isolation:isolate}
.nav[data-solid="true"]::before{opacity:0}

/* The scrolled state is painted as its own layer rather than as background-color on .nav:
   a background-color set on the header — even inline and !important — does not take effect
   here, while a pseudo-element background-image does. Two layers, cross-fading:
   ::before = the top-of-page gradient (photo reads around the bar)
   ::after  = the opaque bar once scrolled. */
.nav::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,rgba(5,4,3,.94),rgba(5,4,3,.94));
  transition:opacity .3s var(--ss-motion-easing-standard)}
.nav[data-solid="true"]::after{opacity:1}

/* ════════ MOCKUP PASS 2 — gold is an ACCENT, not the surface ════════
   Reference: gold appears only on icons, section underlines, the nav CTA and
   quote marks. Every solid button is near-black. */

/* shorter navbar */
.nav__in{min-height:var(--ss-nav-h);padding-block:var(--ss-space-2)}
.nav__logo{width:68px}
/* Lighter than the base scrim: the hero photograph has to read AROUND the navbar at the top
   of the page, not sit under a black bar. Still enough ground for the logo and links to
   clear contrast; once scrolled, [data-solid] takes over and this fades to 0. */
.nav::before{height:132px;
  background:linear-gradient(to bottom,rgba(5,4,3,.55),rgba(5,4,3,.22) 58%,transparent)}

/* primary buttons go near-black; gold is reserved for the nav CTA only */
.btn--primary{background:var(--ss-color-ink-800);color:var(--ss-color-bone-100);border-radius:6px}
.btn--primary:hover{background:var(--ss-color-ink-700)}
.btn--ghost{color:var(--ss-color-ink-800);box-shadow:0 0 0 1px var(--ss-color-bone-300alt);
  background:var(--ss-color-pure-white);border-radius:6px}
.btn--ghost:hover{background:var(--ss-color-bone-75)}
/* the single gold button, as in the mockup */
.nav__cta .btn--primary{background:transparent;color:var(--ss-color-gold-300);
  box-shadow:0 0 0 1px var(--ss-color-gold-500)}
.nav__cta .btn--primary:hover{background:rgba(234,193,126,.12)}
.ctaband .btn--primary{background:var(--ss-color-gold-400);color:var(--ss-color-ink-800);box-shadow:none}

/* hero: dark quote panel, dark submit — not a gold slab */
.quote__go{background:var(--ss-color-ink-800);color:var(--ss-color-bone-100)}
.quote__go:hover{background:var(--ss-color-ink-700)}
.hero--split .btn--ghost{background:transparent;color:var(--ss-color-bone-100);
  box-shadow:0 0 0 1px rgba(246,243,238,.45)}

/* trust strip — reference #6: larger gold line icons, generous dividers */
.trustbar{padding-block:var(--ss-space-8)}
.trustbar__item{align-items:center;gap:var(--ss-space-4);padding-inline-start:var(--ss-space-6)}
.trustbar__item .ico{font-size:2.6rem;color:var(--ss-color-gold-500);opacity:.95}
.trustbar__item b{font-size:var(--ss-font-body-size)}
.trustbar__item small{line-height:1.5}

/* CTA band — reference #5: photo bleeding off the leading edge, copy trailing */
/* Square + full-bleed, as measured off the mockup (0 → 1440, no radius). */
.ctaband{padding-block:var(--ss-space-12);position:relative;overflow:hidden;border-radius:0}
/* The photo sat on inset-inline-START, which in RTL is the RIGHT — the same edge the copy
   is aligned to. The two occupied the same 435px and every line of text was rendered on top
   of the photograph (measured 1.82:1, well under AA), while the whole left half of the band
   stayed empty black. Photo goes on the inline-END edge, opposite the copy, and the scrim is
   logical so it fades toward the copy rather than away from it. */
.ctaband__media{position:absolute;inset-block:0;inset-inline-end:0;width:46%;z-index:0}
.ctaband__media img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.ctaband__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to var(--ss-cta-fade,right),var(--ss-color-ink-800) 2%,rgba(11,10,9,.45) 60%,rgba(11,10,9,0))}
[dir="rtl"] .ctaband__media::after{--ss-cta-fade:right}
[dir="ltr"] .ctaband__media::after{--ss-cta-fade:left}
.ctaband__in{position:relative;z-index:1;justify-content:flex-start}
.ctaband__in > div{max-width:46ch}
@media (max-width:820px){ .ctaband__media{width:100%;opacity:.22} }

/* section rhythm: alternate white / bone so blocks read apart */
#services{background:var(--ss-color-pure-white)}
#fleet{background:var(--ss-color-bone-50)}
/* #why is the dark credentials band now — an ID here would outrank .creds and repaint it
   white, which is exactly what happened. Only #clients stays in the light alternation. */
#clients{background:var(--ss-color-pure-white)}
#faq{background:var(--ss-color-bone-50)}

/* the light .btn--ghost must not leak into the dark CTA band */
.ctaband .btn--ghost{background:transparent;color:var(--ss-color-bone-100);
  box-shadow:0 0 0 1px rgba(246,243,238,.42)}
.ctaband .btn--ghost:hover{background:rgba(246,243,238,.10)}

/* RTL divider fix: items flow right-to-left, so the FIRST item is the rightmost and
   its inline-start border sits on the outer edge. It is the one to drop, not the last. */
.trustbar__item{border-inline-start:1px solid var(--ss-color-bone-300alt)}
.trustbar__item:last-child{border-inline-start:1px solid var(--ss-color-bone-300alt)}
.trustbar__item:first-child{border-inline-start:none}
/* .why2 is a self-contained card now, so it keeps its own full border — the divider rules
   that belonged to the old single-container treatment are gone deliberately. */
@media (max-width:900px){
  .trustbar__item,.trustbar__item:last-child{border-inline-start:none}
}

/* ════════ AVAILABILITY MODAL ════════
   Native <dialog>: the platform gives us the backdrop, focus trap and Esc handling. */
.modal{border:none;padding:0;max-width:min(440px,92vw);width:100%;
  background:var(--ss-color-pure-white);border-radius:14px;color:var(--ss-color-ink-800);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45)}
.modal::backdrop{background:rgba(5,4,3,.62);backdrop-filter:blur(3px)}
.modal__x-form{margin:0}
.modal__x{position:absolute;inset-block-start:14px;inset-inline-start:14px;
  background:none;border:none;cursor:pointer;color:var(--ss-color-warm-grey-700);
  padding:var(--ss-space-2);line-height:0;border-radius:6px}
.modal__x:hover{background:var(--ss-color-bone-75);color:var(--ss-color-ink-800)}
.modal__x svg{width:20px;height:20px}
.modal__title{margin:0;padding:var(--ss-space-6) var(--ss-space-6) 0;
  font-size:var(--ss-font-h4-size);color:var(--ss-color-ink-800)}
.modal__summary{margin:var(--ss-space-2) 0 0;padding:0 var(--ss-space-6) var(--ss-space-5);
  color:var(--ss-text-secondary);font-size:var(--ss-font-body-sm-size);
  border-bottom:1px solid var(--ss-color-bone-300alt)}
.modal__form{display:flex;flex-direction:column;gap:var(--ss-space-4);padding:var(--ss-space-6)}
.modal__body{display:flex;flex-direction:column;gap:var(--ss-space-4)}
/* Two short controls per row. auto-fit + minmax is the whole responsive rule: below
   about 300px of content width the second 140px column cannot be placed and the row
   becomes a single column by itself, so there is no breakpoint to keep in sync with
   the dialog's own max-width. */
.modal__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--ss-space-4)}
/* The optional route pair. The marker stays native — it is the affordance that tells
   a visitor there is more here and that it is closed, and a custom one buys nothing. */
.modal__more>summary{cursor:pointer;font-size:var(--ss-font-caption-size);
  color:var(--ss-text-accent);padding-block:var(--ss-space-1)}
.modal__more>summary:focus-visible{outline:2px solid var(--ss-border-focus);outline-offset:2px}
.modal__more[open]>summary{margin-block-end:var(--ss-space-3)}
/* The end-date limit, sitting in the second grid column beside the date itself. Self
   aligned to the end so it reads against the input's baseline rather than floating at
   the top of a taller cell; it collapses under the input on its own when the row does,
   because it is a .modal__row cell like any other and inherits that behaviour. */
.field__note{margin:0;align-self:end;padding-block-end:var(--ss-space-2);
  font-size:var(--ss-font-caption-size);color:var(--ss-text-secondary);line-height:1.5}
/* The CTA never leaves the screen. Sticky against the dialog's own scroll box, bled
   out to the dialog edges with negative margins so it reads as a footer bar rather
   than a floating card, and given an opaque ground so the body scrolls under it. */
.modal__foot{position:sticky;inset-block-end:0;display:flex;flex-direction:column;
  gap:var(--ss-space-3);
  margin:0 calc(var(--ss-space-6) * -1) calc(var(--ss-space-6) * -1);
  padding:var(--ss-space-4) var(--ss-space-6) var(--ss-space-5);
  background:var(--ss-color-pure-white);
  border-block-start:1px solid var(--ss-color-bone-300alt)}
/* On the confirmation the body is hidden and the footer is all that is left, so its
   top rule lands right under the summary's and frames an empty band. */
.modal__body[hidden] + .modal__foot{border-block-start:none;padding-block-start:0}
.modal__go{width:100%;margin-top:0}
.modal__alt{margin:0;text-align:center;color:var(--ss-text-secondary);
  font-size:var(--ss-font-caption-size)}
.modal__alt a{color:var(--ss-text-accent);font-weight:600}

/* ════════ HERO PANEL — closer to the mockup ════════
   Measured off homepage-desktop.png: the panel is not a flat fill, it is a blurred copy of
   the hero photograph graded warm brown (#6F5233 top-start → #423323 bottom-end). The old
   near-black tint read cold against a golden-hour photo. */
/* Opacity is high on purpose. At .58/.72 the panel let the hero's sunlit limestone through
   and every label measured 2.0–3.3:1 — well under AA. The panel has to carry its own ground
   so contrast holds whatever photograph sits behind it, exactly like the navbar scrim. */
.quote{background:linear-gradient(160deg,rgba(58,43,28,.90),rgba(30,23,16,.95));
  backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(234,193,126,.18);border-radius:24px}
/* Labels and the dial-us line were secondary-grey on a dark ground — lifted to the bone ramp
   so they clear AA rather than sitting just under it. */
.quote .field span,.quote__alt{color:var(--ss-color-bone-100)}
.quote__alt a{color:var(--ss-color-gold-300)}

/* The native controls were the panel's cheapest-looking element: the select drew an OS
   chevron and the date field an OS calendar button, neither of which belongs on a dark
   glass surface in an RTL layout. */
.quote .field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EAC17E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:18px;
  background-position:left var(--ss-space-3) center;
  padding-inline-end:var(--ss-field-padding-inline);
  padding-inline-start:calc(var(--ss-space-3) * 2 + 18px)}
.quote .field input[type="date"]{
  /* The value itself stays LTR — a date is a Latin-numeral string — but the field is laid
     out to the RTL edge like every other control in the panel. */
  direction:ltr;text-align:right}
.quote .field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(82%) sepia(28%) saturate(560%) hue-rotate(348deg) brightness(96%);
  cursor:pointer;opacity:.9}
.quote .field input[type="date"]::-webkit-datetime-edit{color:var(--ss-field-text)}

/* Hero headline measured off the mockup: ~72px at 1440 with a looser line-height, not the
   88px the global hero token tops out at. Overridden here rather than in tokens.css so the
   fluid ramp below 1440 and any other .h-hero use are untouched. */
.hero--split .h-hero{font-size:clamp(2.75rem, 1.6rem + 5.1vw, 4.5rem);line-height:1.18}

/* The shared .field styling is built for the dark hero panel, so on the modal's white
   surface the inputs rendered as grey blocks. Re-ground them for a light surface. */
.modal .field input{
  background:var(--ss-color-pure-white);color:var(--ss-color-ink-800);
  border:1px solid var(--ss-color-bone-300alt)}
.modal .field input::placeholder{color:var(--ss-color-warm-grey-700)}
.modal .field span,.modal .field__why{color:var(--ss-color-warm-grey-700)}
.modal .field input:focus-visible{border-color:var(--ss-color-gold-500);
  box-shadow:0 0 0 3px rgba(234,193,126,.28)}
/* inset-inline-start is the RIGHT edge in RTL — the same edge the title aligns to, so the
   close button sat on top of it. The end edge is the left one here, which is also where an
   RTL reader expects it. */
.modal__x{inset-inline-start:auto;inset-inline-end:14px}
.modal__title{padding-inline-end:var(--ss-space-10)}
.modal__status{margin:0;font-size:var(--ss-font-body-sm-size);text-align:center;
  padding:var(--ss-space-3);border-radius:8px}
.modal__status[data-state="ok"]{color:var(--ss-color-ink-800);background:var(--ss-color-bone-75);
  border:1px solid var(--ss-color-gold-500)}
.modal__status[data-state="error"]{color:#8a1c1c;background:#fdf2f2;border:1px solid #e6b8b8}

/* ════════ AUDIT FIXES — a11y blockers ════════ */

/* A4: fields replaced the outline with a box-shadow ring. Windows High Contrast Mode does
   not paint box-shadow, so those controls had NO focus indicator at all. Keep a real
   outline; the shadow stays as the soft brand ring on top. */
.field input:focus-visible,.field select:focus-visible,
.quote .field input:focus-visible,.modal .field input:focus-visible{
  outline:2px solid var(--ss-border-focus);outline-offset:2px}
@media (forced-colors:active){
  :focus-visible{outline:2px solid CanvasText;outline-offset:2px}
}

/* A1: the phone link hid its number below 900px, leaving a 16x16 target with no accessible
   name. Visually-hidden instead of display:none keeps the name; padding reaches 44px. */
@media (max-width:900px){
  .nav__tel span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .nav__tel{min-inline-size:44px;min-block-size:44px;justify-content:center}
}

/* Design #2: .quote__go inherited the light-ground primary (near-black) and sat on the
   near-black panel at 1.3:1 — the panel's only action had no visible edge. Gold is the
   brand's designated both-grounds fill and is the single gold fill above the fold. */
.quote__go{background:var(--ss-color-gold-400);color:var(--ss-color-ink-800)}
.quote__go:hover{background:var(--ss-color-gold-300)}

/* A10: reduced-motion only collapsed fast/base/slow. The card hover reads --hap, which maps
   to the haptic token, so cards still animated for users who asked us not to. */
@media (prefers-reduced-motion:reduce){
  :root{--ss-motion-duration-haptic:1ms;--ss-motion-duration-entry:1ms}
  .card2:hover{transform:none}
}

/* Design #3: white cards on a white ground are a 1.00:1 "card". Give them a real fill so
   they read as grouped evidence rather than eleven empty chips. */
.why2,.logo3{background:var(--ss-color-bone-75)}

/* A13: fixed header was covering every in-page anchor target. */
:root{scroll-padding-top:100px}

/* ════════ HERO — form removed, two buttons (client reference) ════════ */
/* NOT ch units here: `ch` resolves against .hero__copy's own 16px font-size, not the 72px
   headline, so max-width:20ch collapsed the column to ~200px and broke the headline onto
   one word per line. rem is unambiguous. */
.hero--split .hero__in{grid-template-columns:1fr}
.hero--split .hero__copy{max-width:min(38rem,92%);margin-inline:0 auto;text-align:start}
.hero--split .hero__copy .lede{max-width:min(30rem,100%)}
/* The copy sits over the brightest part of the plate, so the scrim has to be strongest on
   the inline-start (right) edge rather than only at the bottom. */
.hero--split .hero__scrim{background:
  linear-gradient(to left,rgba(5,4,3,.86) 0%,rgba(5,4,3,.66) 28%,rgba(5,4,3,.22) 58%,rgba(5,4,3,.05) 100%),
  linear-gradient(to top,rgba(5,4,3,.55),transparent 45%)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--ss-space-3);margin-top:var(--ss-space-8)}
.hero__cta .btn{min-height:52px;padding-inline:var(--ss-space-6)}
.hero__cta .btn--primary{background:var(--ss-color-ink-800);color:var(--ss-color-bone-100);
  border-color:var(--ss-color-ink-800)}
.hero__cta .btn--primary:hover{background:var(--ss-color-ink-700)}
.hero__cta .btn--ghost{background:var(--ss-color-pure-white);color:var(--ss-color-ink-800);
  border-color:var(--ss-color-pure-white)}
.hero__cta .btn--ghost:hover{background:var(--ss-color-bone-75)}
.hero__cta svg{width:18px;height:18px}
@media (max-width:520px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
}

/* The new hero plate is much brighter than the one this was tuned against, and the lede
   inherited --ss-text-secondary (a mid grey) — measured 2.85:1 over the photograph. Light
   text on a photo has to come from the bone ramp, not the secondary role. */
.hero .lede{color:var(--ss-color-bone-100)}

/* The photo panel met the flat black on a hard vertical edge. Mask it so the photograph
   dissolves into the band instead of being butted against it. Logical, so it fades toward
   the copy on both directions. */
.ctaband__media{
  -webkit-mask-image:linear-gradient(to var(--ss-cta-mask,right),
    rgba(0,0,0,1) 0%,rgba(0,0,0,1) 42%,rgba(0,0,0,.55) 72%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to var(--ss-cta-mask,right),
    rgba(0,0,0,1) 0%,rgba(0,0,0,1) 42%,rgba(0,0,0,.55) 72%,rgba(0,0,0,0) 100%)}
[dir="rtl"] .ctaband__media{--ss-cta-mask:right}
[dir="ltr"] .ctaband__media{--ss-cta-mask:left}
/* the ::after tint is no longer doing the separating, so soften it right down */
.ctaband__media::after{background:linear-gradient(to var(--ss-cta-fade,right),
  rgba(11,10,9,.35),rgba(11,10,9,0) 70%)}

/* ════════ HOW IT WORKS — full-bleed three-panel filmstrip ════════ */
.howstrip{padding:0;background:var(--ss-color-ink-800)}
.howstrip__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0}
.howpanel{position:relative;min-height:clamp(380px,46vw,560px);overflow:hidden;
  display:flex;align-items:flex-end;isolation:isolate}
.howpanel__media{position:absolute;inset:0;z-index:-2}
.howpanel__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Text sits on the lower half, so the gradient only has to carry that band. */
.howpanel::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(5,4,3,.92) 0%,rgba(5,4,3,.72) 34%,rgba(5,4,3,.15) 66%,rgba(5,4,3,.05) 100%)}
.howpanel__body{position:relative;padding:var(--ss-space-6);color:var(--ss-color-bone-100)}
.howpanel__title{font-family:var(--ss-font-h3-family);font-size:var(--ss-font-h4-size);
  color:var(--ss-color-bone-100);margin:0 0 var(--ss-space-2)}
.howpanel__body p{margin:0;color:var(--ss-color-bone-300);
  font-size:var(--ss-font-body-sm-size);max-width:34ch}
/* Hairlines between panels so they read as one strip, not three floating images. */
.howpanel + .howpanel{box-shadow:inset 1px 0 0 rgba(246,243,238,.10)}
@media (max-width:820px){
  .howstrip__list{grid-template-columns:1fr}
  .howpanel{min-height:300px}
  .howpanel + .howpanel{box-shadow:inset 0 1px 0 rgba(246,243,238,.10)}
}

/* ════════ CREDENTIALS — replaces the why-us adjective cards ════════ */
.creds{background:var(--ss-color-ink-800);color:var(--ss-color-bone-100);
  padding-block:var(--ss-space-section-y)}
.creds__in{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--ss-space-10);align-items:start}
.creds__intro .h-2{color:var(--ss-color-bone-100)}
.creds__intro p{color:var(--ss-color-bone-300);margin:var(--ss-space-3) 0 0;max-width:38ch}
.creds__actions{display:flex;flex-wrap:wrap;gap:var(--ss-space-3);margin-top:var(--ss-space-6)}
.creds__actions .btn--primary{background:var(--ss-color-gold-400);color:var(--ss-color-ink-800)}
.creds__actions .btn--ghost{background:transparent;color:var(--ss-color-bone-100);
  border-color:rgba(246,243,238,.35)}
.creds__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.creds__item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:var(--ss-space-4);padding-block:var(--ss-space-4);
  border-bottom:1px solid rgba(246,243,238,.12)}
.creds__item:first-child{border-top:1px solid rgba(246,243,238,.12)}
.creds__item svg{width:22px;height:22px;color:var(--ss-color-gold-400)}
.creds__label{font-weight:600}
.creds__value{color:var(--ss-color-gold-300);font-size:var(--ss-font-body-sm-size);white-space:nowrap}
@media (max-width:820px){
  .creds__in{grid-template-columns:1fr;gap:var(--ss-space-8)}
}

/* ════════ CLIENTS — de-boxed, marks sit on the ground ════════ */
/* The tiles made three real logos and three typeset placeholders look identical, and the
   greyscale treatment meant the PLACEHOLDERS dominated the PROOF. Inverted now. */
.logos3{gap:var(--ss-space-8) var(--ss-space-10);align-items:center;justify-items:center}
.logo3{background:none;border:none;border-radius:0;min-height:0;padding:0}
.logo3 img{max-height:52px;filter:grayscale(1);opacity:.88}
.logo3:hover img{filter:grayscale(0);opacity:1}
.logo3--type span{color:var(--ss-color-warm-grey-700);font-weight:500;opacity:.75}
.clients__note{margin:0 0 var(--ss-space-8)}

/* Five service cards now, not four. 5-across at 1152 would leave 217px cards with a 128px
   image — too small to carry a photograph. 3 + 2 keeps them readable; the last row is
   centred so it doesn't read as a broken grid. */
@media (min-width:901px){
  #services .grid-4{grid-template-columns:repeat(6,1fr)}
  #services .grid-4 > *{grid-column:span 2}
  #services .grid-4 > *:nth-child(4){grid-column:2 / span 2}
  #services .grid-4 > *:nth-child(5){grid-column:4 / span 2}
}

/* ════════ HERO — centred, to match the three-vehicle plate ════════
   The new hero photograph places one vehicle left, two right, and holds the centre third
   deliberately empty. The copy has to sit in that gap, so the split-hero's start-aligned
   column is overridden here rather than adding a second hero variant. */
.hero--split .hero__copy{max-width:min(46rem,92%);margin-inline:auto;text-align:center}
.hero--split .hero__copy .lede{max-width:min(34rem,100%);margin-inline:auto}
.hero--split .hero__cta{justify-content:center}
/* The centre of the plate is open sky and paving, so the edge-weighted scrim is wrong now —
   a soft vertical wash keeps the type legible without hiding the vehicles. */
.hero--split .hero__scrim{background:
  linear-gradient(to top,rgba(5,4,3,.78) 0%,rgba(5,4,3,.42) 38%,rgba(5,4,3,.30) 62%,rgba(5,4,3,.46) 100%)}
@media (max-width:700px){
  /* portrait crop is the Sprinter plus open paving — copy stays centred */
  .hero--split .hero__copy{text-align:center}
}

/* ════════ HERO TYPE — explicit lines, real hierarchy ════════
   Was: one long h1 left to wrap over a busy plate, orphaning "שירותי" onto its own line,
   with the lede at the same optical weight as the headline. */
.hero__kicker{margin:0 0 var(--ss-space-4);color:var(--ss-color-gold-300);
  font-size:var(--ss-font-caption-size);font-weight:600;
  letter-spacing:.02em}
.hero__line{display:block}
.hero--split .h-hero{font-size:clamp(2.6rem,1.2rem + 4.6vw,4.25rem);line-height:1.06;
  font-weight:700;text-wrap:balance}
.hero--split .hero__copy .lede{font-size:var(--ss-font-body-lg-size);
  margin-top:var(--ss-space-5);color:var(--ss-color-bone-100);opacity:.92}
.hero__cta{margin-top:var(--ss-space-8)}

/* The explicit hero lines were still wrapping: the copy column capped at 46rem, which is
   narrower than "שירותי הסעות VIP" at this size, and text-wrap:balance was re-breaking the
   spans it was meant to leave alone. Wider column, balance off, slightly smaller cap. */
.hero--split .hero__copy{max-width:min(58rem,94%)}
.hero--split .h-hero{font-size:clamp(2.4rem,1.1rem + 4.2vw,3.9rem);line-height:1.08;
  text-wrap:nowrap}
.hero__line{display:block;white-space:nowrap}
@media (max-width:600px){
  /* nowrap would overflow a phone — let it wrap there and drop a step */
  .hero--split .h-hero{text-wrap:balance}
  .hero__line{white-space:normal}
}

/* ════════ AUDIT FIXES — icon contrast, missing type step, rhythm ════════ */

/* Gold-500/400 measured 2.40:1 on white and 1.59:1 on bone. These icons convey information
   (seats, luggage, tender compliance, invoicing), so WCAG 1.4.11 wants 3:1. --ss-text-accent
   already resolves to bronze-deep on light ground and gold on .ground-dark, which is exactly
   what the ground opt-in architecture was built for — these rules were bypassing it. */
.trustbar__item .ico,
.why2__ico,
.veh3__specs .ico,
.flow__node svg{color:var(--ss-text-accent)}
.flow__node{box-shadow:0 0 0 1px var(--ss-color-bronze-deep-400)}

/* .h-4 was used in markup but never defined, so those headings fell through to Hello
   Elementor's reset (h3 = 28px) — landing 2px from the 30px section heading. Two levels
   2px apart are not a hierarchy. */
.h-4{font-family:var(--ss-font-h4-family);font-size:var(--ss-font-h4-size);
  font-weight:var(--ss-font-h4-weight);line-height:var(--ss-font-h4-line-height)}

/* Section rhythm ran 159 / 128 / 96px top to bottom — tightest at the CTA, so the page got
   less generous exactly as it made the ask. One scale, and the closing band gets the same
   air as the rest rather than the least. */
.sec,.sec--tight{padding-block:var(--ss-space-section-y)}
.ctaband{padding-block:var(--ss-space-section-y)}

/* ════════════════════════════════════════════════════════════════════════
   LEGAL PAGES — הצהרת נגישות · מדיניות פרטיות · תנאי שימוש וביטולים

   Long-form Hebrew prose, read once and carefully rather than scanned. One
   narrow measure, generous leading, and zero tracking: Hebrew has no case
   and no ascender rhythm to open up, so letter-spacing only shreds the word
   shape. Colours and spacing all come from tokens.css.
   ════════════════════════════════════════════════════════════════════════ */

/* .nav is position:fixed and hides under the homepage hero. A legal page has no
   hero, so it gets a static bar instead — a fixed one would sit on the first
   paragraph and steal a chunk of a small screen for the whole scroll. */
.legal-top{background:var(--ss-bg-sunken);padding-block:var(--ss-space-3)}
.legal-top__in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--ss-space-4);flex-wrap:wrap}
/* Height-first, same reason as .nav__logo: lockup.svg is square, so sizing it
   by width also set the header's height — 136px on a page that is a legal
   document and wants the least chrome of anything on the site. */
.legal-top__logo{width:auto;height:52px;color:var(--ss-color-gold-400)}
.legal-top__back{display:inline-flex;align-items:center;gap:var(--ss-space-2);
  min-height:var(--ss-layout-touch-target);
  color:var(--ss-color-bone-100);text-decoration:none;
  font-size:var(--ss-font-body-sm-size)}
.legal-top__back:hover{color:var(--ss-color-gold-400)}
/* The icon set has one arrow and it points left — which on an RTL page is FORWARD,
   the direction the homepage CTAs use it for. A "back" link points the other way,
   so this is a deliberate mirror of a directional icon, not a blanket flip. */
.legal-top__back .ico{transform:scaleX(-1)}

/* ~65ch is the comfortable measure; 1.8 sits above the body token (1.7) because
   these blocks run for screens at a time rather than three lines at a time. */
.legal{max-width:65ch;margin-inline:auto;line-height:1.8;
  letter-spacing:var(--ss-font-tracking-none);
  color:var(--ss-color-ink-800);text-wrap:pretty}
.legal > * + *{margin-block-start:var(--ss-space-4)}

.legal h1{margin-block-end:var(--ss-space-2)}
.legal__meta{color:var(--ss-color-warm-grey-700);font-size:var(--ss-font-body-sm-size);
  margin-block-end:var(--ss-space-10)}

/* h2 opens a clause and carries a hairline above it — the only structural
   device on the page, so the hierarchy reads without any colour. */
.legal h2{font-family:var(--ss-font-h4-family);font-size:var(--ss-font-h4-size);
  font-weight:var(--ss-font-h4-weight);line-height:var(--ss-font-h4-line-height);
  letter-spacing:var(--ss-font-tracking-none);
  margin-block-start:var(--ss-space-12);padding-block-start:var(--ss-space-5);
  border-block-start:1px solid var(--ss-color-bone-300alt)}
.legal h3{font-size:var(--ss-font-body-lg-size);font-weight:var(--ss-font-weight-bold);
  line-height:var(--ss-font-line-height-heading);
  margin-block-start:var(--ss-space-6)}

.legal p{margin:0}
.legal ul,.legal ol{margin:0;padding-inline-start:var(--ss-space-6);
  display:flex;flex-direction:column;gap:var(--ss-space-3)}
.legal li{padding-inline-start:var(--ss-space-1)}
.legal li::marker{color:var(--ss-text-accent)}
.legal a{color:var(--ss-color-bronze-deep-600);text-underline-offset:3px}

/* legal links in the footer bar. A separate row above the copyright line, so the
   existing .site-foot__grid is untouched. */
.site-foot__legal{display:flex;flex-wrap:wrap;gap:var(--ss-space-2) var(--ss-space-5);
  margin-block-end:var(--ss-space-3)}
.site-foot__legal a{color:var(--ss-color-bone-100);text-decoration:none;
  font-size:var(--ss-font-body-sm-size)}
.site-foot__legal a:hover{color:var(--ss-color-gold-400)}

/* ════════ CALENDAR PICKER ════════
   The Hebrew, Sunday-first, availability-aware replacement for the browser's own date
   control. avail.js builds every element below at runtime over the untouched
   <input type="date">, so with scripting off none of this exists and the native field
   is still there — nothing here may be load-bearing for the form to work.

   THE GROUND. This sits on the modal's white sheet, and the brand gold is 1.6:1 on
   white and may never carry text there (.nexo/brand.md). The wrapper carries
   .ground-light, so the tokens re-point beneath it: --ss-border-focus becomes
   bronze-deep #8F6828 at 4.7:1 rather than the dark ground's pale gold, which on white
   would have been an invisible focus ring. Gold appears here only where the brand says
   it can — as a FILL with ink text on it, the one pairing that is identical on both
   grounds — and otherwise as hairlines and washes, never as text.

   Radii stay small and the elevation is a gold hairline plus one restrained shadow
   (DESIGN.md): sharp reads expensive, and a popover over a white sheet still needs an
   edge to be read as a separate surface.

   EVERY INTERACTIVE RULE HERE IS PREFIXED `.ssdp `, AND THAT IS NOT TIDINESS. The
   parent theme's reset (hello-elementor/assets/css/reset.css) contains:

       [type="button"]:focus, [type="submit"]:focus, button:focus,
       [type="button"]:hover, ... , button:hover
           { background-color: #CC3366; color: #fff }

   #CC3366 is the Nexo agency pink, which .nexo/brand.md states is not used anywhere in
   this project. `[type="button"]:focus` is specificity (0,2,0), so a single class does
   NOT outrank it: without the extra `.ssdp ` every button in this picker turns hot pink
   the moment it takes focus, which is exactly what the first build did. Anything added
   below has to clear (0,2,0) or restate its ground on :hover and :focus. */

/* isolation:auto is load-bearing and must not be tidied away either. `.ground-light` is
   written for full-width SECTIONS and carries `isolation:isolate` with it, which turns
   this wrapper into a stacking context and traps the popover's z-index inside a field
   that sits below the modal's sticky footer in tree order — the calendar then renders
   perfectly and is painted over by the promise and the submit button. The class is
   wanted here for its colour tokens; the isolation is not. */
.ssdp{position:relative;display:block;isolation:auto}

/* ── The closed control. Reads as one of the modal's own inputs, because it stands
      exactly where one stood. ─────────────────────────────────────────────────── */
.ssdp .ssdp__trigger{
  display:flex;align-items:center;gap:var(--ss-space-2);width:100%;
  min-height:var(--ss-field-min-height);padding-inline:var(--ss-field-padding-inline);
  background:var(--ss-color-pure-white);color:var(--ss-color-ink-800);
  border:1px solid var(--ss-color-bone-300alt);border-radius:var(--ss-field-radius);
  font-family:inherit;font-size:var(--ss-font-body-sm-size);text-align:start;
  cursor:pointer;
  transition:border-color var(--ss-motion-duration-fast) var(--ss-motion-easing-standard)}
.ssdp .ssdp__trigger:hover,.ssdp .ssdp__trigger:focus{
  background:var(--ss-color-pure-white);color:var(--ss-color-ink-800);
  border-color:var(--ss-color-gold-500)}
.ssdp .ssdp__trigger:focus-visible{
  outline:2px solid var(--ss-border-focus);outline-offset:2px;
  box-shadow:0 0 0 3px rgba(234,193,126,.28)}
.ssdp.is-open .ssdp__trigger{border-color:var(--ss-color-gold-500)}

/* Bronze-deep, not gold: this is the light ground's accent, and a 1.6:1 gold glyph on
   white looks like a rendering fault rather than like restraint. */
.ssdp__ico{inline-size:18px;block-size:18px;flex:0 0 auto;
  color:var(--ss-color-bronze-deep-600)}

.ssdp__value{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A date is a Latin-numeral string and is isolated so the surrounding Hebrew cannot
   reorder it. The placeholder is Hebrew and is left alone. */
.ssdp__value:not(.is-empty){direction:ltr;unicode-bidi:isolate;text-align:start}
.ssdp__value.is-empty{color:var(--ss-color-warm-grey-700)}

/* The real form control. Still in the layout, still focusable, still the thing that
   posts — see the long note in avail.js for why it is opacity:0 with geometry rather
   than display:none: reportValidity() will not raise a bubble for a control it cannot
   focus and silently refuses to submit the form instead. The extra specificity is
   deliberate — `.modal .field input` would otherwise repaint it as a grey box. */
.modal .field input.ssdp__native,.ssdp__native{
  position:absolute;inset-block:0;inset-inline:0;inline-size:100%;block-size:100%;
  min-height:0;margin:0;padding:0;border:0;background:none;
  opacity:0;pointer-events:none;appearance:none;-webkit-appearance:none}

.ssdp__live{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}

/* ── The popover ─────────────────────────────────────────────────────────────────
   position:fixed so the dialog's own scroll box and border radius cannot clip it, and
   so it can overhang the modal's sticky footer. Both offsets are set by avail.js in
   logical terms — inset-inline-start is the RIGHT edge in Hebrew — so the arithmetic
   survives an LTR translation. */
.ssdp__pop{
  position:fixed;z-index:20;
  /* 344px is arithmetic, not taste: 344 − 24 padding − 12 gaps = 308, and 308 / 7 is
     exactly 44 — the touch target this picker promised on a 390px phone. */
  inline-size:min(21.5rem,calc(100vw - 1rem));
  padding:var(--ss-space-3);
  background:var(--ss-color-pure-white);
  border:1px solid rgba(201,162,77,.45);
  border-radius:var(--ss-radius-sm);
  box-shadow:0 18px 44px -18px rgba(11,10,9,.42);
  animation:ssdp-in var(--ss-motion-duration-fast) var(--ss-motion-easing-standard)}
@keyframes ssdp-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.ssdp__head{display:flex;align-items:center;gap:var(--ss-space-1);
  margin-block-end:var(--ss-space-1)}
.ssdp .ssdp__nav{
  display:grid;place-items:center;flex:0 0 auto;
  min-inline-size:var(--ss-size-touch-target);min-block-size:var(--ss-size-touch-target);
  background:none;border:0;border-radius:var(--ss-radius-xs);cursor:pointer;
  color:var(--ss-color-warm-grey-700);
  transition:background-color var(--ss-motion-duration-fast) var(--ss-motion-easing-standard)}
.ssdp .ssdp__nav:hover,.ssdp .ssdp__nav:focus{background:none;color:var(--ss-color-warm-grey-700)}
.ssdp .ssdp__nav:hover:not(:disabled){background:var(--ss-color-bone-75);color:var(--ss-color-ink-800)}
.ssdp .ssdp__nav:focus-visible{outline:2px solid var(--ss-border-focus);outline-offset:-2px}
.ssdp .ssdp__nav:disabled{opacity:.28;cursor:default}
.ssdp__nav svg{inline-size:20px;block-size:20px}

/* Hebrew is never letter-spaced — the display treatment that reads as luxury in Latin
   reads as a fault here (.nexo/brand.md). */
.ssdp__month{flex:1 1 auto;text-align:center;font-weight:600;
  font-size:var(--ss-font-body-sm-size);color:var(--ss-color-ink-800)}

.ssdp__grid{display:flex;flex-direction:column;gap:2px}
/* minmax(0,1fr), not 1fr. `1fr` is `minmax(auto,1fr)`, and `auto` refuses to shrink a
   track below its item's min-content width — which, thanks to the parent reset's
   padding on every <button>, is wider than a seventh of the popover as soon as the row
   holds two-digit dates. The result was the 15th, 22nd and 29th rows growing past the
   popover's edge while the 1st–8th row sat correctly inside it. */
.ssdp__row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.ssdp__dow{text-align:center;font-size:.75rem;font-weight:600;
  padding-block:var(--ss-space-1);color:var(--ss-color-warm-grey-700)}
/* Seventh column is Saturday. Marked typographically, never as unavailable — this
   fleet runs seven days a week and greying it out would be a lie. */
.ssdp__dow:last-child{color:var(--ss-color-bronze-deep-600)}

.ssdp .ssdp__day{
  position:relative;display:grid;place-items:center;
  min-block-size:var(--ss-calendar-cell-size);min-inline-size:0;
  /* padding:0 is not cosmetic — the parent reset gives every button a generous
     padding, which is what was inflating the grid tracks above. */
  padding:0;
  background:none;border:0;border-radius:var(--ss-calendar-cell-radius);
  color:var(--ss-color-ink-800);font-family:inherit;
  font-size:var(--ss-font-body-sm-size);font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background-color var(--ss-motion-duration-fast) var(--ss-motion-easing-standard)}
.ssdp .ssdp__day:hover,.ssdp .ssdp__day:focus{
  background:var(--ss-color-bone-75);color:var(--ss-color-ink-800)}

/* Ink rather than the bronze used elsewhere: a day cell can be sitting on white, on a
   gold wash or on a solid gold fill, and ink is the only ring that clears 3:1 against
   all three. Inset so it cannot overlap the neighbouring cell. */
.ssdp .ssdp__day:focus-visible{outline:2px solid var(--ss-color-ink-800);outline-offset:-2px}

/* Today: a hairline ring AND a dot, so it is never signalled by colour alone. */
.ssdp .ssdp__day.is-today{box-shadow:inset 0 0 0 1px var(--ss-color-gold-500)}
.ssdp .ssdp__day.is-today::after{content:"";position:absolute;inset-block-end:5px;
  inline-size:3px;block-size:3px;border-radius:50%;background:var(--ss-color-gold-500)}

/* The one place gold is a fill rather than a hairline. Gold with ink on it is 11.7:1
   and is identical on both grounds — the thread that ties the dark and the light
   halves of this site together (.nexo/brand.md). */
.ssdp .ssdp__day.is-selected{background:var(--ss-color-gold-400);
  color:var(--ss-color-ink-800);font-weight:700}
.ssdp .ssdp__day.is-selected.is-today::after{background:var(--ss-color-ink-800)}
.ssdp .ssdp__day.is-edge{background:rgba(234,193,126,.72);
  color:var(--ss-color-ink-800);font-weight:600}
.ssdp .ssdp__day.is-range{background:rgba(234,193,126,.24)}

/* Fully booked (§8.2). Colour PLUS a struck line, because a state signalled only by a
   lighter grey is a state a colour-blind or low-contrast reader does not receive. */
.ssdp .ssdp__day.is-taken{color:var(--ss-color-warm-grey-500);cursor:not-allowed}
.ssdp .ssdp__day.is-taken:hover,.ssdp .ssdp__day.is-taken:focus{background:none}
.ssdp .ssdp__day.is-taken::before{content:"";position:absolute;inset-inline:22%;
  block-size:1px;background:var(--ss-color-bone-300);transform:rotate(-32deg)}

/* Out of range — before today, or past the longest trip the route accepts. A different
   answer from "taken", so it is deliberately not given the same strike. */
.ssdp .ssdp__day.is-off{color:var(--ss-color-bone-300);cursor:default}
.ssdp .ssdp__day.is-off:hover,.ssdp .ssdp__day.is-off:focus{background:none}

.ssdp__pad{display:block}

.ssdp__msg{margin:var(--ss-space-2) 0 0;padding:var(--ss-space-2) var(--ss-space-3);
  background:var(--ss-color-bone-75);border-radius:var(--ss-radius-xs);
  font-size:var(--ss-font-caption-size);line-height:1.45;color:var(--ss-color-ink-800)}

.ssdp__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--ss-space-2);margin-block-start:var(--ss-space-2);
  padding-block-start:var(--ss-space-2);
  border-block-start:1px solid var(--ss-color-bone-300alt)}
.ssdp__legend{display:flex;align-items:center;gap:var(--ss-space-2);margin:0;
  font-size:.75rem;color:var(--ss-color-warm-grey-700)}
.ssdp__swatch{position:relative;inline-size:16px;block-size:16px;flex:0 0 auto;
  border:1px solid var(--ss-color-bone-300alt);border-radius:3px}
.ssdp__swatch::before{content:"";position:absolute;inset-inline:2px;inset-block-start:7px;
  block-size:1px;background:var(--ss-color-bone-300);transform:rotate(-32deg)}
.ssdp__acts{display:flex;align-items:center;gap:var(--ss-space-2)}
.ssdp .ssdp__act{min-block-size:var(--ss-size-touch-target);
  padding-inline:var(--ss-space-4);
  background:none;border:1px solid var(--ss-color-bone-300alt);
  border-radius:var(--ss-radius-xs);cursor:pointer;font-family:inherit;
  font-size:var(--ss-font-caption-size);color:var(--ss-color-ink-800)}
.ssdp .ssdp__act:hover,.ssdp .ssdp__act:focus{background:none;color:var(--ss-color-ink-800)}
.ssdp .ssdp__act:hover{background:var(--ss-color-bone-75);border-color:var(--ss-color-gold-500)}
.ssdp .ssdp__act:focus-visible{outline:2px solid var(--ss-border-focus);outline-offset:2px}

/* Windows High Contrast paints neither background-color nor box-shadow, so every state
   above would collapse into one identical cell. Restate each as a border. */
@media (forced-colors:active){
  .ssdp__pop{border:1px solid CanvasText}
  .ssdp .ssdp__day.is-selected,.ssdp .ssdp__day.is-edge{border:2px solid Highlight}
  .ssdp .ssdp__day.is-today{border:1px dashed CanvasText}
  .ssdp .ssdp__day.is-taken,.ssdp .ssdp__day.is-off{color:GrayText}
}

/* ==========================================================================
   Inner pages
   --------------------------------------------------------------------------
   Everything below is shared by the pages that are not the homepage. The
   homepage keeps its bespoke split hero; an inner page gets .pagehead, which
   is the same dark ground and the same gold kicker at a third of the height.
   Giving every inner page a full-bleed hero would make each one announce
   itself as loudly as the front door, and none of them are the front door.
   ========================================================================== */

/* Sized by its own content, not by a fixed number.
   A fixed band was the actual defect. Measured across the eight pages, the copy
   ranges from 194px (contact: kicker, one-line h1, two-line lede) to 379px
   (corporate: two-line h1 plus a button row) — nearly double. Forcing one
   height on all of them left a 169px void above the copy on the short pages
   and 31px on the long ones, so the same component read differently on almost
   every page. Making the number bigger makes the voids bigger.
   So: symmetric padding does the work, and the height follows the copy. The
   floor only catches a page shorter than anything that exists today.
   Subordinate to the homepage hero by design — that one is min(92vh,860px);
   these land between roughly 320px and 510px of visible band. */
.pagehead{background:var(--ss-bg-canvas);color:var(--ss-text-primary);
  display:flex;align-items:center;
  min-height:calc(var(--ss-nav-h) + 280px)}
/* No width here. `.pagehead__in` is also `.wrap`, which sets
   width:min(content-max,92vw) and centres itself with auto inline margins —
   `width:100%` overrode that and threw the copy to the viewport edge. As the
   single flex child it keeps its own width and the auto margins still centre it. */
.pagehead__in{padding-block:calc(var(--ss-nav-h) + var(--ss-space-16)) var(--ss-space-16)}

@media (max-width:700px){
  /* Copy wraps to more lines on a phone, so it needs less padding around it to
     reach the same optical weight. */
  .pagehead{min-height:calc(var(--ss-nav-h) + 240px)}
  .pagehead__in{padding-block:calc(var(--ss-nav-h) + var(--ss-space-12)) var(--ss-space-12)}
}
.pagehead .h-1{color:var(--ss-text-primary);max-width:18ch;text-wrap:balance}
.pagehead .lede{max-width:52ch}

/* The gold "מאז 2006" mark, matching .hero__kicker rather than restating it in
   a second colour and weight that would drift from it. */
.eyebrow{margin:0 0 var(--ss-space-4);color:var(--ss-color-gold-300);
  font-size:var(--ss-font-caption-size);font-weight:600;letter-spacing:.02em}

/* Contact channels. A whole card is the link — a visitor tapping the middle of
   a "call us" card on a phone expects it to dial, not to do nothing. */
.chanrow{align-items:stretch}
.chan{display:flex;flex-direction:column;gap:var(--ss-space-2);
  padding:var(--ss-space-5);background:var(--ss-color-pure-white);
  border:1px solid var(--ss-color-bone-300alt);border-radius:10px;
  text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(11,10,9,.04);
  transition:box-shadow var(--hap),transform var(--hap)}
.chan:hover{box-shadow:0 14px 34px -18px rgba(11,10,9,.28);transform:translateY(-3px)}
.chan__ico{display:inline-flex;align-items:center;justify-content:center;
  inline-size:44px;block-size:44px;border-radius:50%;
  background:var(--ss-color-bone-75);color:var(--ss-color-bronze-deep-600)}
.chan__title{margin:0;color:var(--ss-color-ink-800);font-size:var(--ss-font-h4-size)}
.chan__say{margin:0;color:var(--ss-color-warm-grey-700);font-size:var(--ss-font-body-sm-size)}
.chan__do{margin-block-start:auto;padding-block-start:var(--ss-space-3);
  color:var(--ss-color-bronze-deep-600);font-size:var(--ss-font-caption-size);
  font-weight:600;display:inline-flex;align-items:center;gap:var(--ss-space-2);
  min-height:40px}
.chan__do .ico{transition:transform .25s var(--ss-motion-easing-haptic)}
.chan:hover .chan__do .ico{transform:translateX(-4px)}

/* Company facts. A two-column definition list on desktop, stacked on a phone —
   term above value, never a squeezed two-column grid at 390px. */
/* One panel, aligned rows.
   Two earlier attempts were wrong in opposite directions. Bare rows with
   hairline rules read as a spreadsheet; breaking them into free-floating tiles
   fixed that and broke the composition instead — ragged bottoms, uneven gaps
   and an orphan card whenever the count was odd.
   So: a single contained panel, every label on one axis, every value on
   another. Orderly like a table, but designed like a panel — tinted ground,
   bronze labels against a gold tick, real padding, and a divider that only
   separates rows rather than ruling a grid around them. */
.deflist{margin:0;border:1px solid var(--ss-color-bone-300alt);border-radius:12px;
  background:var(--ss-color-bone-50);overflow:hidden}
.deflist__row{display:grid;gap:var(--ss-space-1);
  padding:var(--ss-space-5) var(--ss-space-6);
  border-block-end:1px solid var(--ss-color-bone-300alt)}
.deflist__row:last-child{border-block-end:none}
/* A whisper of alternation. Enough to help the eye track a long row across to
   its value; not enough to reintroduce the zebra-striped-table look. */
.deflist__row:nth-child(even){background:rgba(255,255,255,.55)}

.deflist dt{position:relative;padding-inline-start:var(--ss-space-3);
  color:var(--ss-color-bronze-deep-600);
  font-size:var(--ss-font-caption-size);font-weight:600;letter-spacing:.01em}
/* Hebrew has no letter case, so the label is marked by colour, weight and this
   gold tick rather than by uppercasing, which would do nothing here. */
.deflist dt::before{content:"";position:absolute;inset-inline-start:0;
  inset-block:.15em .15em;inline-size:2px;border-radius:2px;
  background:var(--ss-color-gold-500)}
.deflist dd{margin:0;color:var(--ss-color-ink-800);line-height:1.6}
.deflist dd a{color:inherit}

@media (min-width:700px){
  /* Label and value on their own axes, baseline-aligned. The label column is
     capped so a long value never gets squeezed by a short label's neighbour. */
  .deflist__row{grid-template-columns:minmax(10ch,18%) 1fr;
    gap:var(--ss-space-6);align-items:baseline}
}

/* An outstanding-information note. Visible on purpose: these mark real gaps in
   what the client has supplied, and a placeholder nobody can see is a
   placeholder that ships. */
.note{margin-block-start:var(--ss-space-5);font-size:var(--ss-font-body-sm-size);
  color:var(--ss-color-warm-grey-700)}
.note--todo{padding:var(--ss-space-4);border-radius:8px;
  border-inline-start:3px solid var(--ss-color-gold-500);
  background:var(--ss-color-bone-75);color:var(--ss-color-ink-700)}

/* Fleet page — one class per row, image and copy alternating. The homepage keeps
   its compact three-up strip; this is the same data with room to read. */
.vrow{display:grid;gap:var(--ss-space-6);align-items:center;
  padding-block:var(--ss-space-8);
  border-block-end:1px solid var(--ss-color-bone-300alt)}
.vrow:last-child{border-block-end:none}
.vrow__media{border-radius:10px;overflow:hidden;background:var(--ss-color-bone-75)}
.vrow__media img,.vrow__media picture{display:block;inline-size:100%;block-size:auto}
.vrow__body{display:flex;flex-direction:column;gap:var(--ss-space-3);align-items:flex-start}
.vrow__body .h-2{margin:0;color:var(--ss-color-ink-800)}
.vrow__body .muted{margin:0;max-width:52ch}

@media (min-width:820px){
  .vrow{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--ss-space-8)}
  /* Flip by reordering the grid children, not by changing direction — swapping
     `direction` here would also mirror the Hebrew text inside them. */
  .vrow--flip .vrow__media{order:2}
  .vrow--flip .vrow__body{order:1}
}

/* A .chan that is a card rather than a link: same shape, no hover lift, no
   pointer. Used for "what's included", where nothing is clickable. */
.chan--static{box-shadow:none;transition:none}
.chan--static:hover{box-shadow:none;transform:none}

/* Page-head with its own photograph.
   Same layering as .ctaband: the image is a sibling behind the copy, not a CSS
   background, so it gets a real <img> with srcset and can be lazy-decoded. The
   gradient is what keeps the Hebrew headline legible over it — without it the
   dark ground token does nothing, because the photograph is now the ground. */
.pagehead--media{position:relative;overflow:hidden;isolation:isolate}
.pagehead--media .pagehead__media{position:absolute;inset:0;z-index:0}
.pagehead--media .pagehead__media img{inline-size:100%;block-size:100%;
  object-fit:cover;object-position:50% 45%}
/* Lighter at the top than it was. The band is taller now, so the scrim that
   worked over 271px was burying the whole photograph over 363px — and the copy
   sits at the bottom, which is the only place the contrast actually has to hold.
   Measured after the change rather than assumed: see the note in the commit. */
.pagehead--media .pagehead__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(11,10,9,.42) 0%, rgba(11,10,9,.40) 38%, rgba(11,10,9,.86) 100%)}
.pagehead--media .pagehead__in{position:relative;z-index:1}

/* The image is decoration; the words are the page. On a narrow screen the copy
   grows and the photograph has less room to say anything, so lean the scrim
   further toward the text rather than letting contrast drift. */
@media (max-width:700px){
  /* Narrower screen, longer wrapped headline, less photograph worth showing —
     lean the scrim back toward the text. */
  .pagehead--media .pagehead__media::after{
    background:linear-gradient(to bottom,
      rgba(11,10,9,.60) 0%, rgba(11,10,9,.58) 38%, rgba(11,10,9,.90) 100%)}
}

/* A <picture> inside a card's media box.
   .card2__media sets the aspect ratio and its img is height:100% — but a <picture>
   between them is display:inline with auto height, so the percentage resolves against
   nothing and the image collapses. The occasion cards on the private-clients page are
   the first to need AVIF here, hence the first to need this. */
.card2__media picture,
.vrow__media picture{display:block;inline-size:100%;block-size:100%}

/* A <picture> inside the CTA band's media box — same collapse as .card2__media.
   .ctaband__media img is height:100%, which needs a block-level parent with a height. */
.ctaband__media picture{display:block;inline-size:100%;block-size:100%}

/* ==========================================================================
   Occasion carousel — split: copy on one side, photograph on the other
   --------------------------------------------------------------------------
   Base rules describe the NO-JS state: a readable vertical stack of panels.
   `.is-live` (added by carousel.js) is what turns it into a carousel. Written
   this way round so a script failure degrades to content rather than to one
   visible slide and nine hidden ones.

   The split replaced a full-bleed slide with the copy laid over the picture.
   Two reasons it is better and not just different: text over a photograph
   needs a scrim heavy enough to bury the photograph, and the copy column can
   now hold a real button row without fighting the subject of the shot.
   ========================================================================== */

.occar{position:relative;background:var(--ss-color-ink-800);color:var(--ss-color-bone-100)}

.occar__slide{display:grid;grid-template-columns:1fr;align-items:stretch}
.occar__media{display:block;order:-1}
.occar__media img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 45%;
  min-block-size:240px}
.occar__in{display:flex;flex-direction:column;justify-content:center;
  padding:var(--ss-space-8) var(--ss-space-gutter)}
.occar__title{margin:0 0 var(--ss-space-2);color:var(--ss-color-bone-100);
  font-family:var(--ss-font-h2-family);font-size:var(--ss-font-h3-size);
  line-height:1.15;text-wrap:balance}
.occar__say{margin:0 0 var(--ss-space-5);color:var(--ss-color-bone-300);
  font-size:var(--ss-font-body-lg-size);max-width:38ch}
.occar__in .btn-row{margin:0}

@media (min-width:820px){
  /* Body first in the DOM, media second: in RTL that lands the words on the
     right and the picture on the left, and it inverts by itself under LTR. */
  .occar__slide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    min-height:clamp(400px,42vw,520px)}
  .occar__media{order:0}
  /* Match the page gutter on the outer edge so the copy lines up with every
     other section, and give it room off the image on the inner edge. */
  .occar__in{padding-inline-start:max(var(--ss-space-gutter),
    calc((100vw - min(var(--ss-layout-content-max), 92vw)) / 2));
    padding-inline-end:var(--ss-space-8)}
}

/* The catch-all panel has no photograph, so it spans and gets its own ground. */
.occar__slide--any{grid-template-columns:1fr}
.occar__in--any{align-items:flex-start;
  background:radial-gradient(120% 120% at 80% 0%, rgba(201,162,77,.16), transparent 60%),
    var(--ss-color-ink-900)}
.occar__emblem{inline-size:44px;block-size:auto;margin-block-end:var(--ss-space-4);opacity:.9}

@media (min-width:820px){
  .occar__slide--any .occar__in{
    padding-inline:max(var(--ss-space-gutter),
      calc((100vw - min(var(--ss-layout-content-max), 92vw)) / 2));
    align-items:center;text-align:center}
  .occar__slide--any .occar__say{max-width:52ch;margin-inline:auto}
}

/* --- Live carousel ------------------------------------------------------- */

.occar.is-live .occar__stage{display:grid}
/* Every slide in one grid cell so the tallest sets the height and the rest
   crossfade in place — no absolute positioning, so nothing collapses. */
.occar.is-live .occar__slide{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .6s var(--ss-motion-easing-haptic),visibility 0s linear .6s}
.occar.is-live .occar__slide.is-on{opacity:1;visibility:visible;
  transition:opacity .6s var(--ss-motion-easing-haptic),visibility 0s}

.occar__controls{position:absolute;z-index:3;inset-block-end:var(--ss-space-5);
  inset-inline-start:var(--ss-space-6);display:flex;align-items:center;
  gap:var(--ss-space-3)}
.occar__dots{display:flex;gap:var(--ss-space-2)}
.occar__dot{position:relative;inline-size:10px;block-size:10px;padding:0;border-radius:50%;
  border:1px solid rgba(246,243,238,.55);background:transparent;cursor:pointer;
  transition:background var(--hap),border-color var(--hap)}
.occar__dot.is-on{background:var(--ss-color-gold-300);border-color:var(--ss-color-gold-300)}
/* The dot is 10px, far under the 24px target minimum in WCAG 2.5.8 — this
   invisible pad is what is actually hit. */
.occar__dot::before{content:"";position:absolute;inset:-8px}

.occar__toggle{inline-size:34px;block-size:34px;display:grid;place-items:center;
  padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(246,243,238,.55);background:rgba(11,10,9,.55);
  color:var(--ss-color-bone-100)}
.occar__toggle:hover{background:rgba(11,10,9,.85)}
.occar__toggle-pause,.occar__toggle-play{display:block}
.occar__toggle-pause{inline-size:9px;block-size:11px;border-inline:3px solid currentColor}
.occar__toggle-play{inline-size:0;block-size:0;border-block:6px solid transparent;
  border-inline-end:9px solid currentColor}
/* One button, two glyphs — show whichever matches the current state. */
.occar:not(.is-playing) .occar__toggle-pause{display:none}
.occar.is-playing .occar__toggle-play{display:none}

.occar__live{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:0}

@media (max-width:819px){
  /* Stacked: the controls sit over the picture, which is the only place with
     enough contrast for them at this width. */
  .occar__controls{inset-block-end:auto;inset-block-start:var(--ss-space-4);
    inset-inline-start:var(--ss-space-4)}
}

/* Reduced motion: the script does not autoplay, and the crossfade itself goes. */
@media (prefers-reduced-motion:reduce){
  .occar.is-live .occar__slide{transition:none}
}

/* A <picture> inside the CTA band's media box — same collapse as .card2__media.
   .ctaband__media img is height:100%, which needs a block-level parent with a height. */
.ctaband__media picture{display:block;inline-size:100%;block-size:100%}

/* A button row that centres under a full-width grid rather than hanging off
   the inline-start edge, which reads as a stray control. */
.btn-row--center{justify-content:center;margin-block-start:var(--ss-space-6)}

/* Numbered steps on the filmstrip.
   The markup is already an <ol>, so the numeral comes from a counter rather
   than from typed text — insert a step and the numbering follows on its own.
   Marked aria-hidden by `content` being decorative: a screen reader already
   gets the ordinal from the list itself, and reading "1" twice is noise. */
.howstrip__list{counter-reset:howstep}
.howpanel{counter-increment:howstep}
.howpanel__title::before{content:counter(howstep);
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:26px;block-size:26px;margin-inline-end:var(--ss-space-3);
  border-radius:50%;border:1px solid var(--ss-color-gold-500);
  color:var(--ss-color-gold-300);font-size:var(--ss-font-caption-size);
  font-weight:600;font-family:var(--ss-font-body-family);
  vertical-align:middle}

/* The "this is easy" line under the three panels. */
.howstrip__easy{margin:0;padding:var(--ss-space-5) var(--ss-space-gutter);
  text-align:center;color:var(--ss-color-bone-300);
  font-size:var(--ss-font-body-sm-size);
  border-block-start:1px solid rgba(246,243,238,.10)}

/* Three constraints on one line — not cards, and deliberately not steps.
   Wraps to a column on a phone rather than squeezing three icons across. */
.factrow{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--ss-space-4) var(--ss-space-8);
  margin:0;padding:0;list-style:none}
.factrow li{display:inline-flex;align-items:center;gap:var(--ss-space-2);
  color:var(--ss-color-warm-grey-700);font-size:var(--ss-font-body-sm-size)}
.factrow .ico{color:var(--ss-color-bronze-deep-600);flex:none}