/* Public site styles.
   Written with logical properties throughout so the right-to-left layout is
   the natural one rather than a set of overrides. */

/* Assistant, served from here rather than from Google's font servers, so a
   visit sends nothing to a third party and the privacy policy can say so
   (B30). The same two files as the console's and serviceil.com's, cut by
   platform-site-src/make_fonts.py; the weight axis is whole, 200 to 800. */
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/assistant-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/assistant-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* Two modes, one set of names.

   Every colour below is a role rather than a shade: `--paper` is whatever a
   card is made of, `--brand` is whatever the header is painted in. The rules
   further down name only the roles, so switching between light and dark is
   these blocks and nothing else.

   These are the mode's colours, shared by every business on the platform.
   The business's own, the header bar, the accent, the focus ring and the ink
   on each, are not here: they arrive from `/brand.css`, generated from its
   scheme by `services/palette.py` and linked beside this file, with the same
   three selectors. A rule below names `--brand` exactly as before.

   The server writes `data-theme` onto the html element when the visitor has
   set the cookie, which is why there is no flash of the wrong palette on
   navigation. When they have not set one it leaves the attribute off, and
   the media query further down answers from their system setting.

   `warm` is the light mode and the default, and is the one an eye spends a
   day in: sand rather than white, espresso rather than black. `dark` is the
   same after dark, warm the whole way down, not a cold grey borrowed from
   somewhere else. The name `warm` predates the scheme and stays, because it
   is stored in every visitor's cookie. */
:root,
:root[data-theme="warm"] {
  color-scheme: light;

  --page: #faf5ec;        /* the ground everything sits on */
  --paper: #fffcf7;       /* a card lifted off it */
  --surface: #f4ecdf;     /* an alternating section, the price box */
  --surface-2: #ebe0cf;   /* a sunken well: photo placeholders, gaps */
  --line: #e6d9c4;
  --line-strong: #8e7852;  /* an input's edge. 3:1, or the box is not there */
  --text: #2d2219;
  --muted: #715d4a;       /* the console's too. 4.5:1 on the deepest well, --surface-2 */

  --good: #2b7049;
  --warn: #b4531a;
  --on-good: #fdf8f1;   /* text on a sold or reserved badge */
  --on-warn: #fdf8f1;
  /* The tilted label across a car's photograph, שמור or נמכר!: red with white
     ink in both palettes, because it is drawn on a photograph, whose colours
     no palette changes. 5.6:1. */
  --sash: #c62828;
  --on-sash: #ffffff;
  --notice-bg: #eaf4ec;
  --notice-line: #b9dcc4;
  --notice-ink: #1d5c38;

  --shadow-hue: 61 45 30; /* warm, so a shadow is not a grey smudge on sand */
  --radius: 22px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgb(var(--shadow-hue) / .07), 0 8px 24px rgb(var(--shadow-hue) / .09);
  /* How a sheet lies on its backdrop, when the business chose that shape. In
     light the step from tan to page is clear and a shadow is enough. */
  --shadow-sheet: 0 2px 8px rgb(var(--shadow-hue) / .14), 0 40px 90px rgb(var(--shadow-hue) / .30);
  --wrap: 1140px;
}

/* Dark, twice.

   Once for a visitor who has asked for it, and once for a visitor who
   has asked for nothing and whose computer is set to dark screens. The
   server leaves the attribute off in that second case, because it cannot
   know the system setting, so the stylesheet is the only thing that can
   answer it. Plain CSS has no way to share one block between a selector
   and a media query, so the two are written out and a test compares
   them. If you edit one, edit the other. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --page: #15110d;
  --paper: #211a14;
  --surface: #1b1610;
  --surface-2: #2a211a;
  --line: #392e24;
  --line-strong: #87755e;
  --text: #f2e9dd;
  --muted: #ab9a85;

  --good: #41a06c;
  --warn: #d97b3a;
  --on-good: #1c1611;   /* these fills are light after dark, so the ink is dark */
  --on-warn: #1c1611;
  --sash: #c62828;
  --on-sash: #ffffff;
  --notice-bg: #16301f;
  --notice-line: #245c3a;
  --notice-ink: #a3e2bd;

  --shadow-hue: 0 0 0;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .34);
  /* After dark the backdrop is only a step below the page, so the sheet is
     edged in the line colour as well as lifted. */
  --shadow-sheet: 0 0 0 1px #392e24, 0 40px 90px rgb(0 0 0 / .6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --page: #15110d;
    --paper: #211a14;
    --surface: #1b1610;
    --surface-2: #2a211a;
    --line: #392e24;
    --line-strong: #87755e;
    --text: #f2e9dd;
    --muted: #ab9a85;

    --good: #41a06c;
    --warn: #d97b3a;
    --on-good: #1c1611;   /* these fills are light after dark, so the ink is dark */
    --on-warn: #1c1611;
    --sash: #c62828;
    --on-sash: #ffffff;
    --notice-bg: #16301f;
    --notice-line: #245c3a;
    --notice-ink: #a3e2bd;

    --shadow-hue: 0 0 0;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .34);
    /* After dark the backdrop is only a step below the page, so the sheet is
       edged in the line colour as well as lifted. */
    --shadow-sheet: 0 0 0 1px #392e24, 0 40px 90px rgb(0 0 0 / .6);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The shape of the pages.

   The business chooses full width or a sheet, and `/brand.css` serves the
   choice as lengths: the gap around the sheet, its corners, the inset around
   the bar, the hero and the dark blocks, and their corners. Full width is all
   of them at zero, so every rule below is written once for both shapes and
   none of them asks which one is showing.

   A phone takes a fraction of each, because a frame there costs width a
   thumb needs; zero divided is still zero. */
:root {
  --gap: var(--sheet-gap, 0px);
  --inset: var(--sheet-inset, 0px);
  --outer-corner: var(--sheet-radius, 0px);
  --block-corner: var(--sheet-block-radius, 0px);
}
@media (max-width: 720px) {
  :root {
    --gap: calc(var(--sheet-gap, 0px) / 4);
    --inset: calc(var(--sheet-inset, 0px) * .6);
    --outer-corner: calc(var(--sheet-radius, 0px) * .7);
    --block-corner: calc(var(--sheet-block-radius, 0px) * .75);
  }
}

/* The ground runs the length of the document, so on a long page the fade is
   slow; a ground fixed to the window stopped at the first screen in a full
   page capture, and Safari on a phone ignores a fixed background anyway. */
body {
  margin: 0;
  font-family: "Assistant", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--sheet-ground, var(--page));
  padding-block: var(--gap);
  padding-inline: var(--gap);
  -webkit-font-smoothing: antialiased;
}

/* Everything a page shows, on the page's colour.

   Its height is the small viewport's, the window with a phone's toolbars
   shown: `100vh` is the tall one, and a page shorter than the screen scrolled
   by the toolbar's height. `100vh` stays first for a browser without `svh`.

   Clipped to its own corners, because the bar's dock is square and page
   coloured and would otherwise show past a rounded corner. `clip` rather than
   `hidden`, which would make the sheet a scroll container and unstick the
   bar; a browser without it shows the dock's corners and nothing worse. */
.sheet {
  max-inline-size: var(--sheet-max, none);
  min-block-size: calc(100vh - 2 * var(--gap));
  min-block-size: calc(100svh - 2 * var(--gap));
  overflow: clip;
  margin-inline: auto;
  padding-block-end: var(--inset);
  background: var(--page);
  border-radius: var(--outer-corner);
  box-shadow: var(--sheet-lift, none);
  display: flex;
  flex-direction: column;
}
.sheet > main { flex: 1; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 12px;
  background: var(--brand);
  color: var(--on-brand);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 100;
}
.skip:focus { inset-block-start: 0; }

/* ---------------------------------------------------------------- header */

/* What the bar sticks by. In a sheet the bar is inset, and the page scrolled
   past in the gap around it: a figure showed above the bar and a row beside
   it. The dock is the page's colour from the top of the window to the air
   under the bar and edge to edge of the sheet, so the gap stays a gap. In full
   width it is exactly the bar.

   The strip below the bar is the dock's, not the block beneath it: with the
   dock ending at the bar's foot, a dark hero scrolled right up under the bar
   and its rounded bottom corners bit two page-coloured notches out of the
   dark. The bar now keeps the same frame on all four sides at every scroll
   position, and whatever is under it disappears behind that strip. So the
   blocks below take no top margin of their own, or the air under the bar
   would be two of them at rest and one while scrolling. */
.site-dock {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  padding-block: var(--inset);
  padding-inline: var(--inset);
  background: var(--page);
}

.site-header {
  position: relative;
  border-radius: var(--block-corner);
  background: var(--brand);
  color: var(--on-brand);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 88px;
}

/* Whose site this is, and the first thing a visitor should read: clearly
   larger than the navigation beside it. At link size it read as one more
   link, on the page whose whole job is looking like a real business. */
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-name { font-weight: 700; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; }
/* In the header a long name takes a second line and then an ellipsis, rather
   than a third line or the navigation's room. The footer's name is the same
   class and is left alone: cut to one line there, it held its grid track as
   wide as the name and scrolled every page sideways on a phone. */
.site-header .brand-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.logo { flex: none; }
svg.logo { inline-size: 48px; block-size: 48px; }
/* An uploaded mark is whatever shape he has: square, round, or a wide
   wordmark. Trimmed of its margin on upload, and a very wide one stops before
   it pushes the navigation off a phone. */
.logo-image {
  block-size: 64px;
  inline-size: auto;
  max-inline-size: 200px;
  object-fit: contain;
}
/* A mark with no transparency, on a plate of the colour it was drawn on. */
.logo-plate {
  padding: 4px;
  border-radius: 14px;
}

/* The navigation keeps its size and each link its one line: the name beside it
   is what gives way. */
.site-nav {
  margin-inline-start: auto;
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.site-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--on-brand-muted);
  font-weight: 600;
  font-size: .97rem;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--brand-2); color: var(--on-brand); }
.site-nav a.current { color: var(--accent); }

.btn-call {
  background: var(--accent);
  color: var(--on-accent) !important;
  margin-inline-start: 8px;
  direction: ltr;
}
.btn-call:hover { background: var(--accent-strong) !important; }
/* In the bar a button is the height of the controls beside it, not a page's. */
.site-nav .btn { min-block-size: 44px; padding-block: 8px; }

.nav-toggle, .nav-burger { display: none; }

/* ------------------------------------------------------------ theme switch */
/* Sits in the header row rather than in the nav, because the nav folds into
   the burger menu on a phone and a switch nobody can find is not a switch. */

.theme-form { display: flex; flex: none; }

.theme-toggle {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 1px solid rgb(var(--on-brand-rgb) / .22);
  border-radius: 50%;
  background: transparent;
  color: var(--on-brand-muted);
  cursor: pointer;
  font: inherit;
}
.theme-toggle:hover { background: rgb(var(--on-brand-rgb) / .10); color: var(--on-brand); }
/* On the bar, so the ring is the bar's ink: `--focus` is drawn for the page
   and was 2.93:1 on the bar in light, short of the 3 a ring needs. */
.theme-toggle:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 2px; }

/* Light is showing, so offer dark. */
.theme-to-dark { display: grid; }
.theme-to-light { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-to-dark { display: none; }
  :root:not([data-theme]) .theme-to-light { display: grid; }
}

:root[data-theme="dark"] .theme-to-dark { display: none; }
:root[data-theme="dark"] .theme-to-light { display: grid; }
:root[data-theme="warm"] .theme-to-dark { display: grid; }
:root[data-theme="warm"] .theme-to-light { display: none; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* No top margin: the air above it is the dock's, see `.site-dock`. */
  margin-block: 0;
  margin-inline: var(--inset);
  border-radius: var(--block-corner);
  background: linear-gradient(160deg, var(--brand), var(--brand-2));
  color: var(--on-brand);
  padding-block: clamp(48px, 8vw, 92px);
}
.hero h1 { max-width: 18ch; text-wrap: balance; }
.hero p { color: var(--on-brand-muted); max-width: 52ch; font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 26px; }

/* The words alone left the other half of the front page empty, on a business
   whose product is a thing people look at. The photograph is optional, so the
   layout only splits once there is one: without it the words keep the whole
   width they always had. */
.hero-inner { display: grid; gap: clamp(24px, 4vw, 44px); align-items: center; }
.hero-shot .hero-inner { grid-template-columns: 1fr; }

/* With a photograph, the photograph is the hero: it fills the block and the
   words sit at its foot on the bar's own colour, which fades into the picture
   above them. So the words are the bar's ink on the bar's colour, the pair
   every scheme is checked for, however bright the picture is.

   The fade is drawn by the words' own box, not by the hero's. It was a
   gradient in percentages of the hero's height, and a four-line headline on a
   phone climbed out of the opaque part into a part a third opaque: 2.12:1 on
   a near-white photograph. Now the colour is solid from the top of the words
   to the foot of the hero, whatever the copy and the width make of the words,
   and only the stretch above them fades. */
.hero-photo-fill {
  --hero-pad: clamp(28px, 4vw, 44px);
  --hero-fade: clamp(96px, 14vw, 180px);
  display: grid;
  align-items: end;
  min-block-size: clamp(480px, 46vw, 620px);
  padding-block: var(--hero-pad);
}
.hero-photo-fill .hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-photo-fill .hero-inner { position: relative; }
.hero-photo-fill .hero-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* The solid part starts 20px above the words' box, because a line's glyphs
     reach above a box whose line height is tighter than the font. */
  inset-block: calc(-1 * var(--hero-fade) - 20px) calc(-1 * var(--hero-pad));
  /* Past the words to both edges of the hero, which clips it. */
  inset-inline: -100vw;
  background: linear-gradient(0deg,
    rgb(var(--brand-rgb)) calc(100% - var(--hero-fade)),
    rgb(var(--brand-rgb) / .7) calc(100% - var(--hero-fade) * .55),
    rgb(var(--brand-rgb) / 0) 100%);
}
.hero-photo {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.hero-photo-fill .hero-inner { align-items: end; }
.hero-photo-fill h1 {
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  max-width: 15ch;
  margin: 0;
}
.hero-photo-fill p { color: var(--on-brand); }
.hero-photo-fill .hero-actions { margin-block-start: 22px; }

@media (min-width: 820px) {
  .hero-shot .hero-inner { grid-template-columns: 1.05fr 1fr; }
  .hero-photo-fill .hero-inner { grid-template-columns: 1.25fr 1fr; column-gap: 48px; }
}

@media (max-width: 819px) {
  .hero-photo-fill { min-block-size: 560px; }
}

/* A featured logo. On its own it takes the half of the front page the words
   leave empty; with a photograph it is a badge on the photograph's corner.
   A logo drawn on a flat background sits on a card of that colour, as it does
   in the header, so a white background reads as a card and not a box. */
.logo-card { padding: clamp(8px, 1.5vw, 16px); border-radius: clamp(18px, 2.5vw, 28px); }

.hero-logo {
  display: block;
  justify-self: center;
  inline-size: min(340px, 100%);
  block-size: auto;
  box-shadow: 0 18px 40px rgb(0 0 0 / .35);
}
.hero-logo:not(.logo-card) { box-shadow: none; filter: drop-shadow(0 14px 28px rgb(0 0 0 / .35)); }

.hero-media { position: relative; }
/* On the hero's top corner. It is outside the photograph's layer, so it is
   drawn above the fade wherever the words take the fade. */
.hero-badge {
  z-index: 1;
  position: absolute;
  inset-block-start: clamp(14px, 2.5vw, 28px);
  inset-inline-end: clamp(14px, 2.5vw, 28px);
  inline-size: clamp(88px, 12vw, 140px);
  block-size: auto;
  box-shadow: 0 12px 28px rgb(0 0 0 / .4);
}
/* A mark with transparency has no card, and a box shadow would draw the
   rectangle it does not have. */
.hero-badge:not(.logo-card) { box-shadow: none; filter: drop-shadow(0 8px 18px rgb(0 0 0 / .45)); }

/* On a phone the words stack under the logo, which comes first and smaller:
   it is what says whose page this is before the headline says what it sells. */
@media (max-width: 819px) {
  .hero-logo-only .hero-logo { order: -1; inline-size: min(210px, 60%); }
}

.footer-logo {
  display: block;
  inline-size: 120px;
  block-size: auto;
  margin-block-end: 14px;
}

/* The same shape on the two pages whose only job is trust: him on the about
   page, the van on the services page. Both stack before they split, and
   neither is drawn at all until there is a photograph to draw. */
.portrait-split { display: grid; gap: clamp(20px, 3vw, 36px); align-items: start; }

.portrait {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 360px;
  object-fit: cover;
  border-radius: var(--radius);
}

.portrait-wide { max-block-size: 300px; margin-block-start: 22px; }

@media (min-width: 820px) {
  .portrait-split { grid-template-columns: 1.3fr 1fr; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 48px;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
}
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* The arrow in a circle of its own, at the end of a button that takes him
   somewhere. The padding at that end becomes the circle's margin. */
.btn-chip { gap: 12px; padding-block: 6px; padding-inline-end: 6px; }
.chip {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  transition: transform .18s ease;
}
.chip svg { inline-size: 16px; block-size: 16px; }
.btn:hover .chip { transform: translate(-2px, -2px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary .chip { background: var(--on-accent); color: var(--accent); }
/* Drawn on the bar, so its edge and hover are the bar's own ink: white
   overlays would vanish on a business whose bar is light. */
.btn-ghost { border-color: rgb(var(--on-brand-rgb) / .34); color: var(--on-brand); }
.btn-ghost:hover { background: rgb(var(--on-brand-rgb) / .10); }
/* The bar's two colours the other way round, which is as legible as the bar:
   the lightest thing on a dark block, with the accent only in its arrow. Only
   ever on the hero or a block in the bar's colours, never on the page. */
.btn-light { background: var(--on-brand); color: var(--brand); }
.btn-light:hover { background: rgb(var(--on-brand-rgb) / .88); }
.btn-light .chip { background: var(--accent); color: var(--on-accent); }
.hero .btn:focus-visible, .site-footer .btn:focus-visible { outline-color: var(--on-brand); }
/* The site's main button. Named for how it looked in the first scheme; it is
   `primary`, the role checked against every surface, and not the bar colour,
   which after dark is the page's own colour and left these buttons as bare
   words. */
.btn-dark { background: var(--primary); color: var(--on-primary); }
.btn-dark:hover { background: var(--primary-hover); }
.btn-dark .chip { background: var(--on-primary); color: var(--primary); }

/* --------------------------------------------------------------- section */

.section { padding-block: clamp(44px, 6vw, 76px); }
.section-alt { background: var(--surface); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 28px;
  flex-wrap: wrap;
}
.section-head p { color: var(--muted); margin: 0; }
.link-more { color: var(--accent-ink); font-weight: 700; }

/* ----------------------------------------------------------- car listing */

.car-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 22px;
}

/* The photograph is inset in the card with corners of its own, so the card
   reads as a mount rather than a crop. */
.car-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / .06);
  transition: transform .16s ease, box-shadow .16s ease;
  display: flex;
  flex-direction: column;
}
.car-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgb(var(--shadow-hue) / .15); }
.car-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.car-photo {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border-radius: calc(var(--radius) - 8px);
  position: relative;
  overflow: hidden;
}
.car-photo img { width: 100%; height: 100%; object-fit: cover; }
.car-photo .placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-size: .9rem;
}

/* A reserved or sold car says so across the corner of every photograph of
   it, tilted, in red with white ink: on the grid's card, on each photograph
   of the car page and on each of its thumbnails (A119, asked 2026-09-25; a
   flat chip in the corner was easy to miss, and the owner asked for it on
   every image). The band is drawn inside `.sash-clip`, a box laid over the
   photograph that clips the band's ends, so nothing about the photograph's
   own box has to change to carry it. It sits at the start corner, the right
   in Hebrew, and leans so that its outer end runs down the edge. Sizes are in
   ems, so a smaller font is a smaller band in the same place. */
.sash-clip {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.sash {
  --sash-turn: 45deg;
  position: absolute;
  inset-block-start: 1.9em;
  inset-inline-start: -2.75em;
  inline-size: 11em;
  padding-block: .4em;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1.2;
  background: var(--sash);
  color: var(--on-sash);
  /* A hairline of the ink along both edges, as a printed ribbon has, and a
     shadow that lifts it off a pale photograph. */
  box-shadow:
    inset 0 1px 0 currentColor,
    inset 0 -1px 0 currentColor,
    0 4px 12px rgb(0 0 0 / .4);
  transform: rotate(var(--sash-turn));
}
.sash:dir(ltr) { --sash-turn: -45deg; }
.sash-large { font-size: clamp(1.15rem, 2.6vw, 1.5rem); }
.sash-small { font-size: .62rem; }

.car-body { padding: 14px 10px 6px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.car-title { font-weight: 700; font-size: 1.08rem; }
.car-specs { color: var(--muted); font-size: .92rem; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.car-price {
  margin-block-start: auto;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.car-price .chip { background: var(--surface); color: var(--text); transition: background .15s ease, color .15s ease; }
.car-card:hover .car-price .chip { background: var(--accent); color: var(--on-accent); }
.car-price .ask { color: var(--muted); font-size: .92rem; font-weight: 600; }

/* --------------------------------------------------------- car detail */

.car-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }

.gallery-main {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}

/* One slide per photograph, side by side, each exactly as wide as the frame.
   Snapping is what makes a swipe land on a photograph rather than between
   two, and it is also what the script's arrows scroll by. */
.gallery-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.gallery-slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }

/* Over a photograph, whose colours are the same in either palette, so the
   chip is the header's fill and ink: dark in both, and legible on anything. */
.gallery-arrow,
.gallery-count {
  position: absolute;
  /* Above the tilted שמור or נמכר! band, whose edge reaches the back arrow
     on a narrow phone (the A119 review, at 320). */
  z-index: 3;
  background: rgb(var(--brand-rgb) / .78);
  color: var(--on-brand);
}
.gallery-arrow {
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.gallery-arrow[hidden] { display: none; }
.gallery-arrow:hover { background: var(--brand); }
.gallery-arrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gallery-prev { inset-inline-start: 10px; }
.gallery-next { inset-inline-end: 10px; }
.gallery-count {
  inset-block-end: 10px;
  inset-inline-end: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
}

.gallery-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  margin-block-start: 10px;
}
.gallery-strip a { display: block; position: relative; border-radius: var(--radius-sm); }
.gallery-strip a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gallery-strip img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
/* The photograph showing above. A frame rather than dimming the others,
   which would make every thumbnail but one look unavailable. */
.gallery-strip a[aria-current="true"] img {
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 2px var(--accent-ink);
}

.spec-table { width: 100%; border-collapse: collapse; margin-block: 18px; }
.spec-table th, .spec-table td {
  text-align: start;
  padding: 10px 0;
  border-block-end: 1px solid var(--line);
  font-size: .98rem;
}
.spec-table th { color: var(--muted); font-weight: 600; width: 45%; }

.price-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  position: sticky;
  /* Under the bar and its dock, which is the bar's inset above it and the
     same below, with the inset again as air. */
  inset-block-start: calc(88px + 4 * var(--inset) + 12px);
}
/* The price box's column runs the height of the photographs beside it, or the
   sticky box above had nowhere to travel and scrolled away with the page. */
.car-hero > aside { align-self: stretch; }
.price-big { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.price-box .muted { color: var(--muted); font-size: .92rem; }

.ad-text { white-space: pre-line; }

/* ---------------------------------------------------------- other cards */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.card h3 { margin-block-end: .35em; }
.card p { color: var(--muted); margin: 0; }
/* The first thing he does, filled so the list has a lead. In `primary` and not
   the bar's `brand`: a card sits among other cards on the page, and the bar's
   colour was never checked against either. After dark every scheme lifts the
   bar to about the page's own darkness, and this card was one step from the
   cards beside it. `primary` is checked against every surface at 3:1, and in
   light it is the bar's colour for any dark bar, so the light card is as it was. */
.card-lead { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.card-lead p { color: var(--on-primary); }

.quote { border-inline-start: 3px solid var(--accent); padding-inline-start: 16px; }
.quote p { color: var(--text); font-size: 1.02rem; }
.quote cite { color: var(--muted); font-style: normal; font-weight: 600; font-size: .92rem; }

/* ------------------------------------------------------------------ form */

.form { display: grid; gap: 16px; max-width: 540px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .95rem; }
.field input, .field textarea {
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: transparent;
}
.field textarea { min-height: 130px; resize: vertical; }
/* No select here yet. When one comes, its list is drawn by the browser from
   the select's background, white where that is transparent, while its words
   inherit the page's ink: after dark, light words on a white list, which is
   what the console's status dropdowns did. */
option, optgroup { background-color: var(--paper); color: var(--text); }
/* Chrome's own placeholder grey is one grey for every page: 3.73:1 on the
   enquiry form after dark. */
::placeholder { color: var(--muted); opacity: 1; }
.honey { position: absolute; inset-inline-start: -9999px; }

.notice {
  background: var(--notice-bg);
  border: 1px solid var(--notice-line);
  color: var(--notice-ink);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin-block-end: 20px;
}

/* ---------------------------------------------------------------- footer */

/* How to reach him, then the site's own links: one block in the bar's colours,
   inset as the hero is. The contact facts were a band of their own at the foot
   of the front page once, and in full width the page showed through in a
   strip between that band and this. */
.site-footer {
  background: var(--brand);
  color: var(--on-brand-muted);
  margin-block: var(--inset) 0;
  margin-inline: var(--inset);
  border-radius: var(--block-corner);
}
/* Not a button: the light button's ink is the bar, and this would have
   written the accent on its own light fill. */
.site-footer a:not(.btn):hover { color: var(--accent); }
.site-footer p { margin: 0; }

.footer-reach { padding-block-start: clamp(40px, 6vw, 64px); }
.footer-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; }
.footer-top h2 { margin: 0; color: var(--on-brand); }
.footer-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 32px;
  margin-block-start: 32px;
}
.footer-fact { border-block-start: 1px solid rgb(var(--on-brand-rgb) / .16); padding-block: 16px 4px; }
.footer-fact b { display: block; color: var(--on-brand); }

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
  padding-block: 44px;
}
.footer-brand { color: var(--on-brand); }
.footer-links { display: grid; align-content: start; gap: .4em; }
.footer-legal {
  border-block-start: 1px solid rgb(var(--on-brand-rgb) / .12);
  padding-block: 18px;
  font-size: .88rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

/* Under an enquiry form: where the details go, and the platform's policy. */
.form-privacy {
  margin: 0;
  font-size: .88rem;
  color: var(--muted);
}

/* ---------------------------------------------------------- whatsapp fab */

.wa-float {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  /* Dark, not white: the icon was 2:1 on this green, below the 3:1 a control
     needs, and this is 8:1. */
  color: #0a2a15;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgb(0 0 0 / .24);
  z-index: 60;
}
.wa-float:hover { background: #1eb958; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 880px) {
  .car-hero { grid-template-columns: 1fr; }
  .price-box { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* The navigation folds into the burger below 900 pixels, not 720: with the
   header's larger name and mark, the five links and the switch no longer fit
   beside them on a tablet, and wrapped to two lines each. */
@media (max-width: 900px) {
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-inline-start: auto;
    flex: none;
    width: 42px;
    height: 42px;
    padding-inline: 9px;
    cursor: pointer;
  }
  .nav-burger span { display: block; height: 2px; background: var(--on-brand); border-radius: 2px; }

  .theme-form { order: 1; margin-inline-start: 8px; }
  .theme-toggle { inline-size: 42px; block-size: 42px; }

  .header-inner { min-height: 72px; gap: 12px; }
  .brand { gap: 10px; }
  .logo-image { block-size: 52px; max-inline-size: 140px; }
  svg.logo { inline-size: 42px; block-size: 42px; }
  /* A long name gives way before the burger and the switch do, which both
     keep their size. */
  .site-header .brand-name { font-size: 1.2rem; }

  .site-nav {
    display: none;
    position: absolute;
    /* Under the header, whatever its height: a fixed 68px here was the old
       header's height, and would open the menu over the taller one. */
    /* Straight under the bar, with the inset drawn as a strip of the page's
       colour: a gap left open showed the page scrolling past between the
       bar and its menu. */
    inset-block-start: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--brand-2);
    padding: 10px 16px 16px;
    gap: 2px;
    border-block-start: var(--inset) solid var(--page);
    box-shadow: inset 0 1px 0 rgb(var(--on-brand-rgb) / .10);
    border-radius: 0 0 var(--block-corner) var(--block-corner);
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .btn-call { margin-inline-start: 0; margin-block-start: 8px; justify-content: center; }
}

@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ before and after pairs */
/* Two images side by side at the same size, so the comparison is honest.
   A larger "after" would be a thumb on the scale. */
.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
}
.ba-pair figure { margin: 0; position: relative; background: var(--surface-2); }
.ba-pair img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.ba-pair figcaption {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-start: 6px;
  background: rgb(0 0 0 / .68);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

/* The three want fields on the enquiry form. One row on a desktop, stacked on
   a phone, because a budget and a year beside each other are two taps and one
   scroll less than three full-width boxes. */
.wants {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px 4px;
  margin-block-end: 14px;
}
.wants legend {
  padding-inline: 6px;
  font-weight: 600;
  font-size: .95rem;
}
.field-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
}

/* A phone number is left to right wherever it appears. The header button had
   this and the footer link did not, so the same number rendered +972500000000
   in one place and 972500000000+ in the other. */
.tel {
  unicode-bidi: isolate;
}

/* A number inside Hebrew text. Isolation and nothing else: `direction: ltr`
   here would carry any label sharing the span to the far side of it. The
   templates used the class before this stylesheet declared it. */
.num {
  unicode-bidi: isolate;
}

/* ------------------------------------------------------- the estimate page */

/* What a customer sees when he sends them a link: the photographs of what is
   wrong with their car, the priced lines and a button. Narrower than the rest
   of the site, because it is read once on a phone and there is nothing to
   browse. Every colour here is a role that already has a rule behind it. */

.estimate { max-width: 640px; }
.estimate-eyebrow { color: var(--muted); font-weight: 600; margin: 0; }
.estimate-title { margin-block: .1em .15em; }
.estimate-for { color: var(--muted); margin-block-end: 22px; }
.estimate-note { margin-block-end: 22px; }

/* A fill and its ink named in the same rule. A refusal is the one thing on
   this page a customer has to notice, and the plain notice is the green one. */
.notice-warn {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--on-warn);
}

.estimate-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-block-end: 24px;
}
.estimate-photo { margin: 0; }
.estimate-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.estimate-photo figcaption {
  color: var(--muted);
  font-size: .9rem;
  padding-block-start: 6px;
}

.estimate-lines { width: 100%; border-collapse: collapse; margin-block: 8px 14px; }
.estimate-lines th, .estimate-lines td {
  text-align: start;
  padding: 12px 0;
  border-block-end: 1px solid var(--line);
  font-size: .98rem;
  vertical-align: top;
}
.estimate-lines thead th { color: var(--muted); font-weight: 600; font-size: .9rem; }
/* A line's discount or warranty cover, under the line it lowers (A121). */
.estimate-lines .estimate-discount td { color: var(--muted); padding-block-start: 0; font-size: .92rem; }
/* The two money columns sit at the far end of the row and stay together, so
   the eye runs down one column of figures rather than across three widths. */
.estimate-lines td:last-child,
.estimate-lines th:last-child { text-align: end; white-space: nowrap; }
.estimate-lines td:nth-child(2) { white-space: nowrap; color: var(--muted); }
.estimate-lines tfoot th,
.estimate-lines tfoot td {
  border-block-end: none;
  font-weight: 700;
  font-size: 1.15rem;
  padding-block-start: 16px;
}

.estimate-vat { color: var(--muted); font-size: .92rem; margin-block: 0 24px; }
.estimate-approve { margin-block-end: 20px; }
/* A button worth finding with a thumb, on the one screen where tapping it is
   the whole purpose. */
.estimate-approve .btn { width: 100%; justify-content: center; padding-block: 16px; font-size: 1.1rem; }
.estimate-talk { color: var(--muted); }

/* Named for a screen reader, drawn for nobody. Not `display: none`, which
   takes it out of the accessibility tree as well. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}