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

/* 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: #786450;

  --good: #2b7049;
  --warn: #b4531a;
  --on-good: #fdf8f1;   /* text on a sold or reserved badge */
  --on-warn: #fdf8f1;
  --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;
  --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;
    --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 foot of
   the bar and edge to edge of the sheet, so the gap stays a gap. In full width
   it is exactly the bar. */
.site-dock {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  padding-block-start: 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;
  margin-block: var(--inset) 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;
}

.badge {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
/* The status fills are the mode's, so their ink is the mode's too. They took
   the badge's `--on-brand`, a scheme ink never checked against them: 2.69:1
   after dark in every scheme, and 2.6:1 under the white bar in light. */
.badge-sold { background: var(--warn); color: var(--on-warn); }
.badge-reserved { background: var(--good); color: var(--on-good); }

.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 {
  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;
  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; 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, with the bar's inset again as air. */
  inset-block-start: calc(88px + 3 * 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; }
.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;
}

/* ---------------------------------------------------------- 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;
}