/* ============================================================
   Pinge — brand styles (white edition, 2026-10-14)

   One typeface (Helvetica), three sizes, two surfaces: white and black.
   Structure is drawn with hairlines, never boxes: no cards, no shadows,
   no blur, no tinted panels. Yellow is the one accent and only ever
   carries black text. Concrete lives in the header and the footer alone.
   The kit is documented in docs/brand-kit.md.

   The old class names (.sheet, .sheet-dark, .card, .section-black,
   .section-green, .panel) stay in the markup and render flat.
   ============================================================ */

:root {
  --yellow: #FECD07;
  --yellow-hover: #EFC000;
  --green: #1B4D2E;
  --black: #0A0A0A;
  --white: #FFFFFF;
  --grey: #8C8C8C;

  --concrete: #DADADA;                 /* header and footer only */
  --page: #F1F1F1;                     /* off-white, so the page does not glare */
  --tile: #E4E4E4;                     /* photo tiles and input fields, one step darker than the page */
  --ink: #0A0A0A;
  --ink-2: #5C5C5C;                    /* secondary text and labels: 4.5:1 on white */
  --ink-soft: var(--ink-2);            /* old names kept for the page-specific blocks below */
  --ink-sheet: var(--ink);
  --sheet: transparent;
  --gutter: clamp(20px, 4vw, 48px);
  --mustard: rgb(204, 156, 36);        /* the logo bolt's dirty yellow: nav slashes, loop progress */
  --hair: rgba(10, 10, 10, 0.14);
  --hair-light: rgba(255, 255, 255, 0.24);

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --texture: url("assets/concrete.webp");
  --measure: 32em;
  --r: 8px;
  --r-card: var(--r);
  --r-btn: 999px;
  --shadow: none;
  --shadow-dark: none;
  --header-h: 120px;
  --screen: auto;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --section: clamp(72px, 9vw, 150px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 18px; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 880px; }

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7.5vw, 7rem); letter-spacing: -0.04em; line-height: 0.95; }
h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); margin-bottom: 0.4em; }
h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.4em; }
h4 { font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 0.3em; }

p { margin-bottom: 1em; }
strong { font-weight: 500; }
a { color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.lead {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: var(--measure);
}
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* the label above a heading: small caps in grey, the only small type on the page */
.kicker {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--ink-2);
  margin-bottom: clamp(16px, 2vw, 28px);
}
.kicker-yellow, .kicker-white { color: var(--ink-2); }
/* carved lettering is off for page kickers (build.py CARVE_KICKERS); the footer still carves */
.kicker-carved { --cap: 0.717em; line-height: 0; }
.kicker-carved img {
  display: inline-block;
  vertical-align: top;
  width: calc(var(--cap) * var(--w, 18));
  max-width: 100%;
  height: auto;
  margin-top: calc(var(--cap) * var(--t, 0) * -1);
  margin-bottom: calc(var(--cap) * var(--b, 0) * -1);
}

/* ---------- Buttons: the painted pills ----------
   Every button is a pill of dark glass with a thin yellow ring and bold white
   lettering, on every surface. Hovering grows it a little; its colours never change. */
:root {
  --btn-ring: var(--yellow);
  --btn-ink: var(--white);
  --btn-fill: rgba(10, 10, 10, 0.62);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 36px;
  border-radius: var(--r-btn);
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  border: 2.5px solid var(--btn-ring);
  cursor: pointer;
  color: var(--btn-ink);
  background: var(--btn-fill);
  transition: transform 0.18s var(--ease);
}
.btn:hover { transform: scale(1.05); }
.btn:active { transform: scale(1.02); }
/* the old colour variants all share the one style; the class names stay in the markup */
.btn-yellow, .btn-black, .btn-outline-black, .btn-outline-yellow, .btn-white, .btn-outline-white { color: var(--btn-ink); }
.btn-lg { min-height: 60px; padding: 16px 40px; font-size: 1.1rem; }
.btn-wide { width: 100%; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }
p + .btn-row, ul + .btn-row, ol + .btn-row, h1 + .btn-row, h2 + .btn-row, h3 + .btn-row { margin-top: clamp(28px, 3vw, 44px); }

.text-link {
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- Header ----------
   No bar, no edges: the logo and menu sit straight on the wall.
   The header keeps the wall texture, pinned to the viewport, so it
   is invisible against the page but content never shows through it. */
.site-header {
  position: relative;
  z-index: 100;
  padding: 12px 0;
  --crack-h: max(calc(100vw * 0.062), 44px);
}
/* Lower border: a crack in the wall.
   ::before carries the header's own pinned concrete down to the crack line
   (cut with a polygon traced from the crack), so content scrolling up
   disappears at the crack, not at a straight edge.
   ::after draws the crack itself on top, as a plain image. */
.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
}
.site-header::after {
  top: calc(100% - 26px);
  height: var(--crack-h);
}
/* ::before is the header's whole concrete: from the top of the page down to
   the crack, so nothing grey is painted under the crack line. */
.site-header::before {
  top: 0;
  height: calc(100% + var(--crack-h) - 26px);
  background: var(--concrete) var(--texture) center / cover no-repeat fixed;
  -webkit-clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - var(--crack-h) * 0.766), 99.55% calc(100% - var(--crack-h) * 0.82), 99.05% calc(100% - var(--crack-h) * 0.799), 98.55% calc(100% - var(--crack-h) * 0.802), 98.05% calc(100% - var(--crack-h) * 0.786), 97.55% calc(100% - var(--crack-h) * 0.759), 97.05% calc(100% - var(--crack-h) * 0.748), 96.55% calc(100% - var(--crack-h) * 0.747), 96.05% calc(100% - var(--crack-h) * 0.734), 95.55% calc(100% - var(--crack-h) * 0.692), 95.05% calc(100% - var(--crack-h) * 0.663), 94.55% calc(100% - var(--crack-h) * 0.641), 94.05% calc(100% - var(--crack-h) * 0.619), 93.55% calc(100% - var(--crack-h) * 0.6), 93.05% calc(100% - var(--crack-h) * 0.571), 92.55% calc(100% - var(--crack-h) * 0.545), 92.05% calc(100% - var(--crack-h) * 0.526), 91.55% calc(100% - var(--crack-h) * 0.491), 91.05% calc(100% - var(--crack-h) * 0.47), 90.55% calc(100% - var(--crack-h) * 0.448), 90.05% calc(100% - var(--crack-h) * 0.44), 89.54% calc(100% - var(--crack-h) * 0.381), 89.04% calc(100% - var(--crack-h) * 0.355), 88.54% calc(100% - var(--crack-h) * 0.324), 88.04% calc(100% - var(--crack-h) * 0.297), 87.54% calc(100% - var(--crack-h) * 0.278), 87.04% calc(100% - var(--crack-h) * 0.252), 86.54% calc(100% - var(--crack-h) * 0.204), 86.04% calc(100% - var(--crack-h) * 0.161), 85.54% calc(100% - var(--crack-h) * 0.138), 85.04% calc(100% - var(--crack-h) * 0.116), 84.54% calc(100% - var(--crack-h) * 0.099), 84.04% calc(100% - var(--crack-h) * 0.087), 83.54% calc(100% - var(--crack-h) * 0.09), 83.04% calc(100% - var(--crack-h) * 0.105), 82.54% calc(100% - var(--crack-h) * 0.139), 82.04% calc(100% - var(--crack-h) * 0.194), 81.54% calc(100% - var(--crack-h) * 0.28), 81.04% calc(100% - var(--crack-h) * 0.335), 80.54% calc(100% - var(--crack-h) * 0.392), 80.04% calc(100% - var(--crack-h) * 0.439), 79.54% calc(100% - var(--crack-h) * 0.461), 79.04% calc(100% - var(--crack-h) * 0.464), 78.54% calc(100% - var(--crack-h) * 0.472), 78.04% calc(100% - var(--crack-h) * 0.483), 77.54% calc(100% - var(--crack-h) * 0.499), 77.04% calc(100% - var(--crack-h) * 0.516), 76.54% calc(100% - var(--crack-h) * 0.52), 76.04% calc(100% - var(--crack-h) * 0.493), 75.54% calc(100% - var(--crack-h) * 0.46), 75.04% calc(100% - var(--crack-h) * 0.426), 74.54% calc(100% - var(--crack-h) * 0.406), 74.04% calc(100% - var(--crack-h) * 0.395), 73.54% calc(100% - var(--crack-h) * 0.391), 73.04% calc(100% - var(--crack-h) * 0.372), 72.54% calc(100% - var(--crack-h) * 0.348), 72.04% calc(100% - var(--crack-h) * 0.363), 71.54% calc(100% - var(--crack-h) * 0.378), 71.04% calc(100% - var(--crack-h) * 0.397), 70.54% calc(100% - var(--crack-h) * 0.424), 70.04% calc(100% - var(--crack-h) * 0.437), 69.53% calc(100% - var(--crack-h) * 0.451), 69.03% calc(100% - var(--crack-h) * 0.465), 68.53% calc(100% - var(--crack-h) * 0.482), 68.03% calc(100% - var(--crack-h) * 0.485), 67.53% calc(100% - var(--crack-h) * 0.493), 67.03% calc(100% - var(--crack-h) * 0.52), 66.53% calc(100% - var(--crack-h) * 0.529), 66.03% calc(100% - var(--crack-h) * 0.534), 65.53% calc(100% - var(--crack-h) * 0.528), 65.03% calc(100% - var(--crack-h) * 0.546), 64.53% calc(100% - var(--crack-h) * 0.585), 64.03% calc(100% - var(--crack-h) * 0.607), 63.53% calc(100% - var(--crack-h) * 0.608), 63.03% calc(100% - var(--crack-h) * 0.6), 62.53% calc(100% - var(--crack-h) * 0.604), 62.03% calc(100% - var(--crack-h) * 0.596), 61.53% calc(100% - var(--crack-h) * 0.595), 61.03% calc(100% - var(--crack-h) * 0.572), 60.53% calc(100% - var(--crack-h) * 0.503), 60.03% calc(100% - var(--crack-h) * 0.452), 59.53% calc(100% - var(--crack-h) * 0.421), 59.03% calc(100% - var(--crack-h) * 0.398), 58.53% calc(100% - var(--crack-h) * 0.404), 58.03% calc(100% - var(--crack-h) * 0.417), 57.53% calc(100% - var(--crack-h) * 0.413), 57.03% calc(100% - var(--crack-h) * 0.405), 56.53% calc(100% - var(--crack-h) * 0.4), 56.03% calc(100% - var(--crack-h) * 0.336), 55.53% calc(100% - var(--crack-h) * 0.316), 55.03% calc(100% - var(--crack-h) * 0.324), 54.53% calc(100% - var(--crack-h) * 0.344), 54.03% calc(100% - var(--crack-h) * 0.355), 53.53% calc(100% - var(--crack-h) * 0.366), 53.03% calc(100% - var(--crack-h) * 0.375), 52.53% calc(100% - var(--crack-h) * 0.393), 52.03% calc(100% - var(--crack-h) * 0.416), 51.53% calc(100% - var(--crack-h) * 0.436), 51.03% calc(100% - var(--crack-h) * 0.44), 50.53% calc(100% - var(--crack-h) * 0.446), 50.03% calc(100% - var(--crack-h) * 0.455), 49.52% calc(100% - var(--crack-h) * 0.458), 49.02% calc(100% - var(--crack-h) * 0.459), 48.52% calc(100% - var(--crack-h) * 0.459), 48.02% calc(100% - var(--crack-h) * 0.439), 47.52% calc(100% - var(--crack-h) * 0.453), 47.02% calc(100% - var(--crack-h) * 0.469), 46.52% calc(100% - var(--crack-h) * 0.464), 46.02% calc(100% - var(--crack-h) * 0.459), 45.52% calc(100% - var(--crack-h) * 0.473), 45.02% calc(100% - var(--crack-h) * 0.486), 44.52% calc(100% - var(--crack-h) * 0.502), 44.02% calc(100% - var(--crack-h) * 0.482), 43.52% calc(100% - var(--crack-h) * 0.475), 43.02% calc(100% - var(--crack-h) * 0.464), 42.52% calc(100% - var(--crack-h) * 0.447), 42.02% calc(100% - var(--crack-h) * 0.439), 41.52% calc(100% - var(--crack-h) * 0.421), 41.02% calc(100% - var(--crack-h) * 0.413), 40.52% calc(100% - var(--crack-h) * 0.41), 40.02% calc(100% - var(--crack-h) * 0.401), 39.52% calc(100% - var(--crack-h) * 0.393), 39.02% calc(100% - var(--crack-h) * 0.389), 38.52% calc(100% - var(--crack-h) * 0.385), 38.02% calc(100% - var(--crack-h) * 0.4), 37.52% calc(100% - var(--crack-h) * 0.41), 37.02% calc(100% - var(--crack-h) * 0.421), 36.52% calc(100% - var(--crack-h) * 0.434), 36.02% calc(100% - var(--crack-h) * 0.439), 35.52% calc(100% - var(--crack-h) * 0.437), 35.02% calc(100% - var(--crack-h) * 0.462), 34.52% calc(100% - var(--crack-h) * 0.497), 34.02% calc(100% - var(--crack-h) * 0.526), 33.52% calc(100% - var(--crack-h) * 0.564), 33.02% calc(100% - var(--crack-h) * 0.61), 32.52% calc(100% - var(--crack-h) * 0.67), 32.02% calc(100% - var(--crack-h) * 0.731), 31.52% calc(100% - var(--crack-h) * 0.75), 31.02% calc(100% - var(--crack-h) * 0.765), 30.52% calc(100% - var(--crack-h) * 0.771), 30.02% calc(100% - var(--crack-h) * 0.767), 29.51% calc(100% - var(--crack-h) * 0.758), 29.01% calc(100% - var(--crack-h) * 0.726), 28.51% calc(100% - var(--crack-h) * 0.69), 28.01% calc(100% - var(--crack-h) * 0.665), 27.51% calc(100% - var(--crack-h) * 0.635), 27.01% calc(100% - var(--crack-h) * 0.613), 26.51% calc(100% - var(--crack-h) * 0.6), 26.01% calc(100% - var(--crack-h) * 0.572), 25.51% calc(100% - var(--crack-h) * 0.538), 25.01% calc(100% - var(--crack-h) * 0.506), 24.51% calc(100% - var(--crack-h) * 0.489), 24.01% calc(100% - var(--crack-h) * 0.457), 23.51% calc(100% - var(--crack-h) * 0.439), 23.01% calc(100% - var(--crack-h) * 0.43), 22.51% calc(100% - var(--crack-h) * 0.41), 22.01% calc(100% - var(--crack-h) * 0.383), 21.51% calc(100% - var(--crack-h) * 0.369), 21.01% calc(100% - var(--crack-h) * 0.369), 20.51% calc(100% - var(--crack-h) * 0.373), 20.01% calc(100% - var(--crack-h) * 0.4), 19.51% calc(100% - var(--crack-h) * 0.424), 19.01% calc(100% - var(--crack-h) * 0.44), 18.51% calc(100% - var(--crack-h) * 0.462), 18.01% calc(100% - var(--crack-h) * 0.474), 17.51% calc(100% - var(--crack-h) * 0.502), 17.01% calc(100% - var(--crack-h) * 0.547), 16.51% calc(100% - var(--crack-h) * 0.571), 16.01% calc(100% - var(--crack-h) * 0.58), 15.51% calc(100% - var(--crack-h) * 0.585), 15.01% calc(100% - var(--crack-h) * 0.584), 14.51% calc(100% - var(--crack-h) * 0.592), 14.01% calc(100% - var(--crack-h) * 0.599), 13.51% calc(100% - var(--crack-h) * 0.608), 13.01% calc(100% - var(--crack-h) * 0.625), 12.51% calc(100% - var(--crack-h) * 0.653), 12.01% calc(100% - var(--crack-h) * 0.691), 11.51% calc(100% - var(--crack-h) * 0.773), 11.01% calc(100% - var(--crack-h) * 0.811), 10.51% calc(100% - var(--crack-h) * 0.837), 10.01% calc(100% - var(--crack-h) * 0.855), 9.50% calc(100% - var(--crack-h) * 0.875), 9.00% calc(100% - var(--crack-h) * 0.894), 8.50% calc(100% - var(--crack-h) * 0.905), 8.00% calc(100% - var(--crack-h) * 0.915), 7.50% calc(100% - var(--crack-h) * 0.901), 7.00% calc(100% - var(--crack-h) * 0.898), 6.50% calc(100% - var(--crack-h) * 0.88), 6.00% calc(100% - var(--crack-h) * 0.849), 5.50% calc(100% - var(--crack-h) * 0.812), 5.00% calc(100% - var(--crack-h) * 0.797), 4.50% calc(100% - var(--crack-h) * 0.79), 4.00% calc(100% - var(--crack-h) * 0.781), 3.50% calc(100% - var(--crack-h) * 0.773), 3.00% calc(100% - var(--crack-h) * 0.76), 2.50% calc(100% - var(--crack-h) * 0.727), 2.00% calc(100% - var(--crack-h) * 0.686), 1.50% calc(100% - var(--crack-h) * 0.643), 1.00% calc(100% - var(--crack-h) * 0.631), 0.50% calc(100% - var(--crack-h) * 0.622), 0.00% calc(100% - var(--crack-h) * 0.636));
  clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - var(--crack-h) * 0.766), 99.55% calc(100% - var(--crack-h) * 0.82), 99.05% calc(100% - var(--crack-h) * 0.799), 98.55% calc(100% - var(--crack-h) * 0.802), 98.05% calc(100% - var(--crack-h) * 0.786), 97.55% calc(100% - var(--crack-h) * 0.759), 97.05% calc(100% - var(--crack-h) * 0.748), 96.55% calc(100% - var(--crack-h) * 0.747), 96.05% calc(100% - var(--crack-h) * 0.734), 95.55% calc(100% - var(--crack-h) * 0.692), 95.05% calc(100% - var(--crack-h) * 0.663), 94.55% calc(100% - var(--crack-h) * 0.641), 94.05% calc(100% - var(--crack-h) * 0.619), 93.55% calc(100% - var(--crack-h) * 0.6), 93.05% calc(100% - var(--crack-h) * 0.571), 92.55% calc(100% - var(--crack-h) * 0.545), 92.05% calc(100% - var(--crack-h) * 0.526), 91.55% calc(100% - var(--crack-h) * 0.491), 91.05% calc(100% - var(--crack-h) * 0.47), 90.55% calc(100% - var(--crack-h) * 0.448), 90.05% calc(100% - var(--crack-h) * 0.44), 89.54% calc(100% - var(--crack-h) * 0.381), 89.04% calc(100% - var(--crack-h) * 0.355), 88.54% calc(100% - var(--crack-h) * 0.324), 88.04% calc(100% - var(--crack-h) * 0.297), 87.54% calc(100% - var(--crack-h) * 0.278), 87.04% calc(100% - var(--crack-h) * 0.252), 86.54% calc(100% - var(--crack-h) * 0.204), 86.04% calc(100% - var(--crack-h) * 0.161), 85.54% calc(100% - var(--crack-h) * 0.138), 85.04% calc(100% - var(--crack-h) * 0.116), 84.54% calc(100% - var(--crack-h) * 0.099), 84.04% calc(100% - var(--crack-h) * 0.087), 83.54% calc(100% - var(--crack-h) * 0.09), 83.04% calc(100% - var(--crack-h) * 0.105), 82.54% calc(100% - var(--crack-h) * 0.139), 82.04% calc(100% - var(--crack-h) * 0.194), 81.54% calc(100% - var(--crack-h) * 0.28), 81.04% calc(100% - var(--crack-h) * 0.335), 80.54% calc(100% - var(--crack-h) * 0.392), 80.04% calc(100% - var(--crack-h) * 0.439), 79.54% calc(100% - var(--crack-h) * 0.461), 79.04% calc(100% - var(--crack-h) * 0.464), 78.54% calc(100% - var(--crack-h) * 0.472), 78.04% calc(100% - var(--crack-h) * 0.483), 77.54% calc(100% - var(--crack-h) * 0.499), 77.04% calc(100% - var(--crack-h) * 0.516), 76.54% calc(100% - var(--crack-h) * 0.52), 76.04% calc(100% - var(--crack-h) * 0.493), 75.54% calc(100% - var(--crack-h) * 0.46), 75.04% calc(100% - var(--crack-h) * 0.426), 74.54% calc(100% - var(--crack-h) * 0.406), 74.04% calc(100% - var(--crack-h) * 0.395), 73.54% calc(100% - var(--crack-h) * 0.391), 73.04% calc(100% - var(--crack-h) * 0.372), 72.54% calc(100% - var(--crack-h) * 0.348), 72.04% calc(100% - var(--crack-h) * 0.363), 71.54% calc(100% - var(--crack-h) * 0.378), 71.04% calc(100% - var(--crack-h) * 0.397), 70.54% calc(100% - var(--crack-h) * 0.424), 70.04% calc(100% - var(--crack-h) * 0.437), 69.53% calc(100% - var(--crack-h) * 0.451), 69.03% calc(100% - var(--crack-h) * 0.465), 68.53% calc(100% - var(--crack-h) * 0.482), 68.03% calc(100% - var(--crack-h) * 0.485), 67.53% calc(100% - var(--crack-h) * 0.493), 67.03% calc(100% - var(--crack-h) * 0.52), 66.53% calc(100% - var(--crack-h) * 0.529), 66.03% calc(100% - var(--crack-h) * 0.534), 65.53% calc(100% - var(--crack-h) * 0.528), 65.03% calc(100% - var(--crack-h) * 0.546), 64.53% calc(100% - var(--crack-h) * 0.585), 64.03% calc(100% - var(--crack-h) * 0.607), 63.53% calc(100% - var(--crack-h) * 0.608), 63.03% calc(100% - var(--crack-h) * 0.6), 62.53% calc(100% - var(--crack-h) * 0.604), 62.03% calc(100% - var(--crack-h) * 0.596), 61.53% calc(100% - var(--crack-h) * 0.595), 61.03% calc(100% - var(--crack-h) * 0.572), 60.53% calc(100% - var(--crack-h) * 0.503), 60.03% calc(100% - var(--crack-h) * 0.452), 59.53% calc(100% - var(--crack-h) * 0.421), 59.03% calc(100% - var(--crack-h) * 0.398), 58.53% calc(100% - var(--crack-h) * 0.404), 58.03% calc(100% - var(--crack-h) * 0.417), 57.53% calc(100% - var(--crack-h) * 0.413), 57.03% calc(100% - var(--crack-h) * 0.405), 56.53% calc(100% - var(--crack-h) * 0.4), 56.03% calc(100% - var(--crack-h) * 0.336), 55.53% calc(100% - var(--crack-h) * 0.316), 55.03% calc(100% - var(--crack-h) * 0.324), 54.53% calc(100% - var(--crack-h) * 0.344), 54.03% calc(100% - var(--crack-h) * 0.355), 53.53% calc(100% - var(--crack-h) * 0.366), 53.03% calc(100% - var(--crack-h) * 0.375), 52.53% calc(100% - var(--crack-h) * 0.393), 52.03% calc(100% - var(--crack-h) * 0.416), 51.53% calc(100% - var(--crack-h) * 0.436), 51.03% calc(100% - var(--crack-h) * 0.44), 50.53% calc(100% - var(--crack-h) * 0.446), 50.03% calc(100% - var(--crack-h) * 0.455), 49.52% calc(100% - var(--crack-h) * 0.458), 49.02% calc(100% - var(--crack-h) * 0.459), 48.52% calc(100% - var(--crack-h) * 0.459), 48.02% calc(100% - var(--crack-h) * 0.439), 47.52% calc(100% - var(--crack-h) * 0.453), 47.02% calc(100% - var(--crack-h) * 0.469), 46.52% calc(100% - var(--crack-h) * 0.464), 46.02% calc(100% - var(--crack-h) * 0.459), 45.52% calc(100% - var(--crack-h) * 0.473), 45.02% calc(100% - var(--crack-h) * 0.486), 44.52% calc(100% - var(--crack-h) * 0.502), 44.02% calc(100% - var(--crack-h) * 0.482), 43.52% calc(100% - var(--crack-h) * 0.475), 43.02% calc(100% - var(--crack-h) * 0.464), 42.52% calc(100% - var(--crack-h) * 0.447), 42.02% calc(100% - var(--crack-h) * 0.439), 41.52% calc(100% - var(--crack-h) * 0.421), 41.02% calc(100% - var(--crack-h) * 0.413), 40.52% calc(100% - var(--crack-h) * 0.41), 40.02% calc(100% - var(--crack-h) * 0.401), 39.52% calc(100% - var(--crack-h) * 0.393), 39.02% calc(100% - var(--crack-h) * 0.389), 38.52% calc(100% - var(--crack-h) * 0.385), 38.02% calc(100% - var(--crack-h) * 0.4), 37.52% calc(100% - var(--crack-h) * 0.41), 37.02% calc(100% - var(--crack-h) * 0.421), 36.52% calc(100% - var(--crack-h) * 0.434), 36.02% calc(100% - var(--crack-h) * 0.439), 35.52% calc(100% - var(--crack-h) * 0.437), 35.02% calc(100% - var(--crack-h) * 0.462), 34.52% calc(100% - var(--crack-h) * 0.497), 34.02% calc(100% - var(--crack-h) * 0.526), 33.52% calc(100% - var(--crack-h) * 0.564), 33.02% calc(100% - var(--crack-h) * 0.61), 32.52% calc(100% - var(--crack-h) * 0.67), 32.02% calc(100% - var(--crack-h) * 0.731), 31.52% calc(100% - var(--crack-h) * 0.75), 31.02% calc(100% - var(--crack-h) * 0.765), 30.52% calc(100% - var(--crack-h) * 0.771), 30.02% calc(100% - var(--crack-h) * 0.767), 29.51% calc(100% - var(--crack-h) * 0.758), 29.01% calc(100% - var(--crack-h) * 0.726), 28.51% calc(100% - var(--crack-h) * 0.69), 28.01% calc(100% - var(--crack-h) * 0.665), 27.51% calc(100% - var(--crack-h) * 0.635), 27.01% calc(100% - var(--crack-h) * 0.613), 26.51% calc(100% - var(--crack-h) * 0.6), 26.01% calc(100% - var(--crack-h) * 0.572), 25.51% calc(100% - var(--crack-h) * 0.538), 25.01% calc(100% - var(--crack-h) * 0.506), 24.51% calc(100% - var(--crack-h) * 0.489), 24.01% calc(100% - var(--crack-h) * 0.457), 23.51% calc(100% - var(--crack-h) * 0.439), 23.01% calc(100% - var(--crack-h) * 0.43), 22.51% calc(100% - var(--crack-h) * 0.41), 22.01% calc(100% - var(--crack-h) * 0.383), 21.51% calc(100% - var(--crack-h) * 0.369), 21.01% calc(100% - var(--crack-h) * 0.369), 20.51% calc(100% - var(--crack-h) * 0.373), 20.01% calc(100% - var(--crack-h) * 0.4), 19.51% calc(100% - var(--crack-h) * 0.424), 19.01% calc(100% - var(--crack-h) * 0.44), 18.51% calc(100% - var(--crack-h) * 0.462), 18.01% calc(100% - var(--crack-h) * 0.474), 17.51% calc(100% - var(--crack-h) * 0.502), 17.01% calc(100% - var(--crack-h) * 0.547), 16.51% calc(100% - var(--crack-h) * 0.571), 16.01% calc(100% - var(--crack-h) * 0.58), 15.51% calc(100% - var(--crack-h) * 0.585), 15.01% calc(100% - var(--crack-h) * 0.584), 14.51% calc(100% - var(--crack-h) * 0.592), 14.01% calc(100% - var(--crack-h) * 0.599), 13.51% calc(100% - var(--crack-h) * 0.608), 13.01% calc(100% - var(--crack-h) * 0.625), 12.51% calc(100% - var(--crack-h) * 0.653), 12.01% calc(100% - var(--crack-h) * 0.691), 11.51% calc(100% - var(--crack-h) * 0.773), 11.01% calc(100% - var(--crack-h) * 0.811), 10.51% calc(100% - var(--crack-h) * 0.837), 10.01% calc(100% - var(--crack-h) * 0.855), 9.50% calc(100% - var(--crack-h) * 0.875), 9.00% calc(100% - var(--crack-h) * 0.894), 8.50% calc(100% - var(--crack-h) * 0.905), 8.00% calc(100% - var(--crack-h) * 0.915), 7.50% calc(100% - var(--crack-h) * 0.901), 7.00% calc(100% - var(--crack-h) * 0.898), 6.50% calc(100% - var(--crack-h) * 0.88), 6.00% calc(100% - var(--crack-h) * 0.849), 5.50% calc(100% - var(--crack-h) * 0.812), 5.00% calc(100% - var(--crack-h) * 0.797), 4.50% calc(100% - var(--crack-h) * 0.79), 4.00% calc(100% - var(--crack-h) * 0.781), 3.50% calc(100% - var(--crack-h) * 0.773), 3.00% calc(100% - var(--crack-h) * 0.76), 2.50% calc(100% - var(--crack-h) * 0.727), 2.00% calc(100% - var(--crack-h) * 0.686), 1.50% calc(100% - var(--crack-h) * 0.643), 1.00% calc(100% - var(--crack-h) * 0.631), 0.50% calc(100% - var(--crack-h) * 0.622), 0.00% calc(100% - var(--crack-h) * 0.636));
}
.site-header::after {
  background: url("assets/header-crack.webp?v=2") center / 100% 100% no-repeat;
}
/* Full width: logo on the left edge, menu on the right, language flag in the right corner */
.header-inner {
  padding: 0 clamp(20px, 3vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 96px;
}
.header-brand { display: flex; align-items: center; flex-shrink: 0; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-img { height: 62px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 calc(var(--nav-h) * 0.7);
  border-radius: var(--r-btn);
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: transparent;
  border: none;
  font-family: var(--font);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.nav-link:hover, .nav-item.open > .nav-link, .nav-link[aria-current="page"] {
  background: rgba(10, 10, 10, 0.08);
}
/* Menu items use cast-concrete lettering instead of text, all one height,
   noticeably smaller than the letters of the Pinge wordmark */
/* --nav-h is the height of the menu's capitals. It shrinks on narrower desktops
   so the whole menu scales down in one piece instead of being squeezed. */
.main-nav { --nav-h: clamp(15px, calc(2.4vw - 8px), 22px); }
.nav-item { flex-shrink: 0; }
.nav-img {
  display: block;
  flex-shrink: 0;
  max-width: none;
  width: auto;
  /* --k, --t, --b come from build.py for generated lettering: they scale the
     image so its capitals are --nav-h tall and pull its padding out of the layout */
  height: calc(var(--nav-h) * var(--k, 1));
  margin-top: calc(var(--nav-h) * var(--t, 0) * -1);
  margin-bottom: calc(var(--nav-h) * var(--b, 0) * -1);
}
/* yellow slash between menu items: the logo's bolt, in the menu's lettering.
   Sized like the lettering, and a little taller, as the bolt is. */
.nav-sep {
  display: block;
  flex-shrink: 0;
  max-width: none;
  width: auto;
  height: calc(var(--nav-h) * var(--k, 1));
  margin: calc(var(--nav-h) * var(--t, 0) * -1) -2px calc(var(--nav-h) * var(--b, 0) * -1);
  pointer-events: none;
  user-select: none;
}
/* dropdown arrows: carved yellow chevrons, sized to the lettering; the open menu shows the up one */
.nav-link .chev { display: block; flex-shrink: 0; width: auto; height: calc(var(--nav-h) * 0.5); }
.nav-link .chev-up, .nav-item.open > .nav-link .chev-down { display: none; }
.nav-item.open > .nav-link .chev-up { display: block; }

/* products mega menu */
.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 760px;
  padding: 18px;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r);
}
.nav-item.open > .mega { display: grid; }
.mega a {
  display: block;
  padding: 16px 18px;
  border-radius: 6px;
  color: var(--ink);
  text-shadow: none;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.mega a:hover { background: rgba(10, 10, 10, 0.06); }
.mega strong { display: block; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; }
.mega span { display: block; font-size: 0.95rem; color: var(--ink-soft); margin-top: 2px; }
.mega .tag {
  display: inline-block;
  margin: 8px 0 0;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  padding: 3px 10px;
  border-radius: 999px;
}
.mega .tag-soft { background: rgba(10, 10, 10, 0.08); }
/* physical products carry a picture beside the name, Tesla style */
.mega .mega-text { min-width: 0; margin-top: 0; color: inherit; }
.mega:not(.mega-right) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.mega a.has-thumb { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.mega .mega-thumb {
  flex-shrink: 0;
  width: 112px;
  aspect-ratio: 4 / 3;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--tile);
}
.mega .mega-thumb svg { width: 86%; height: auto; }
.mega .mega-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* services menu: a line icon on a tile, left of each item */
.mega a.has-icon { display: flex; align-items: center; gap: 14px; }
.mega .mega-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--tile);
}
.mega .mega-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* a service's description is one line, always, so the whole menu fits one screen (Jakov, 2026-10-14);
   the copy in build.py is kept short enough that nothing is cut off */
.mega a.has-icon .mega-text > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* services menu: one column per audience */
.mega.mega-3 { width: 1040px; grid-template-columns: repeat(3, 1fr); }
.mega.mega-1 { width: 420px; grid-template-columns: 1fr; }
.mega-col { display: grid; gap: 6px; align-content: start; }
.mega-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 18px 6px;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.72;
}
/* a small slash in the menu's dirty yellow, like the bolt between the nav items,
   then a faint rule running out to the column edge */
.mega-head::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 13px;
  background: var(--mustard);
  transform: skewX(-20deg);
  border-radius: 1px;
}
.mega-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(10, 10, 10, 0.12);
}

/* language switcher */
.lang { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.lang-btn:hover, .lang.open .lang-btn { background: rgba(10, 10, 10, 0.08); }
.flag { width: 30px; height: 20px; border-radius: 6px; overflow: hidden; display: inline-block; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset; }
.flag svg { width: 100%; height: 100%; display: block; }
.lang-btn .flag { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14) inset, 0 4px 12px -4px rgba(0, 0, 0, 0.35); }
.lang-btn .flag svg { width: 66px; height: 44px; margin-left: -11px; }
.lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 200px;
  padding: 8px;
  display: none;
  flex-direction: column;
  /* greyer tint than .mega: this menu sits over bare concrete, with nothing
     dark behind it to blur in, so plain white would read as a solid white box */
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r);
}
.lang.open .lang-menu { display: flex; }
.lang-menu { color: var(--ink); text-shadow: none; }
.lang-menu a,
.lang-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.lang-menu a { text-decoration: none; }
.lang-menu a:hover,
.lang-menu button:hover { background: rgba(10, 10, 10, 0.06); }
.lang-menu a[aria-current="true"] { background: rgba(10, 10, 10, 0.06); }
.lang-menu a[aria-current="true"]::after { content: "✓"; margin-left: auto; }
.lang-menu button[aria-checked="true"] { font-weight: 500; }
.lang-menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; }

/* phone menu button: three bars carved like the logo (assets/nav-burger.webp,
   from make_nav_lettering.py); the crossed bars show while the menu is open */
.nav-toggle {
  display: none;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle img { display: block; height: 30px; width: auto; max-width: none; pointer-events: none; user-select: none; }
.nav-toggle .toggle-x { display: none; }
.nav-toggle[aria-expanded="true"] .toggle-bars { display: none; }
.nav-toggle[aria-expanded="true"] .toggle-x { display: block; }


/* ---------- Hero (inner pages): one big left-aligned sentence and air ---------- */
.hero { overflow: hidden; }
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.hero-mark { width: auto; height: clamp(100px, 17vh, 260px); max-width: 82vw; margin: 0 0 32px; }
.hero-copy { padding: clamp(48px, 8vw, 128px) 0 clamp(40px, 6vw, 96px); max-width: 1100px; }
.hero h1 { max-width: 12em; }
.hero .lead { margin: clamp(24px, 3vw, 40px) 0 0; max-width: 34em; }
.hero .btn-row { margin-top: clamp(28px, 3vw, 44px); }
.hero .btn-row.center { justify-content: flex-start; }
.hero-page h1 { font-size: clamp(2.6rem, 5.2vw, 5rem); max-width: 14em; }
/* Rent hub: the headline matches "Join the movement" on the join page, and only the form follows it. */
.hero-page h1.rent-title { font-size: clamp(2rem, 3.6vw, 3.2rem); max-width: 100%; overflow-wrap: break-word; hyphens: auto; }
/* Rent hub: headline and booking form share the banner on the plain grey page, top-aligned close to
   the header so the next section peeks in above the fold. White fields, no box around the form. */
.rent-hero { display: flex; flex-direction: column; padding-top: clamp(40px, 8vh, 96px); overflow: visible; z-index: 2; }
.rent-hero .hero-inner { flex: 0 0 auto; align-items: center; text-align: center; padding-bottom: clamp(24px, 4vh, 48px); }
.rent-hero .hero-copy { padding: clamp(16px, 4vh, 48px) 0 clamp(36px, 6vh, 64px); max-width: none; }
.hero.rent-hero + .section { border-top: 0; }   /* no line under the banner */
.rent-hero h1.rent-title { margin-left: auto; margin-right: auto; color: #2B2B2B; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.rent-sub { margin: 16px auto 0; max-width: 42em; text-wrap: balance; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--ink-2); }
/* title and subtitle sit at the container's left edge on every screen; from 900 px the subtitle stays on one line */
.rent-hero .hero-copy { width: 100%; text-align: left; }
.rent-hero h1.rent-title { margin: 0; }
.rent-sub { margin: 16px 0 0; text-wrap: pretty; }
@media (min-width: 900px) { .rent-sub { max-width: none; white-space: nowrap; } }
.rent-hero .rent-form { width: 100%; margin: 0 auto; text-align: left; }
.rent-hero .rent-form input, .rent-hero .rent-form select, .rent-hero .rent-form textarea { background-color: var(--white); border-color: var(--hair); }

/* Date range picker (script.js): one field opens a calendar; the first click is the start day,
   the second the end day. It fills the two native date inputs, which show on their own without JavaScript. */
.form-row[hidden] { display: none; }
/* "Where" suggestions (script.js): a white list under the field, in the same style as the calendar */
.place-wrap { position: relative; }
.place-list {
  position: absolute; z-index: 30; left: 0; right: 0; margin: 0; padding: 8px; list-style: none;
  border-radius: 24px; background: var(--white); box-shadow: 0 24px 60px rgba(10, 10, 10, 0.22), 0 0 0 1px var(--hair);
  max-height: min(360px, 50vh); overflow-y: auto;
}
.place-list[hidden] { display: none; }
.place-list li { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 16px; border-radius: 16px; cursor: pointer; }
.place-list li[aria-selected="true"], .place-list li:hover { background: var(--tile); }
.place-name { font-size: 1rem; color: var(--ink); }
.place-name b { font-weight: 700; }
.place-sub { font-size: 0.85rem; color: var(--ink-2); }
.range { position: relative; display: flex; flex-direction: column; gap: 8px; }
.range-label { font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); }
.range-field {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px;
  padding: 12px 18px; border: 1px solid var(--hair); border-radius: 28px; background: var(--white);
  font: inherit; font-size: 1rem; color: var(--ink); text-align: left; cursor: pointer;
}
.range-field[aria-expanded="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.range-field.is-empty .range-value { color: rgba(10, 10, 10, 0.5); }
.range-field svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.range-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 100%; max-width: 400px;
  padding: 16px; border-radius: 28px; background: var(--white); color: var(--ink);
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.22), 0 0 0 1px var(--hair);
}
.range-pop[hidden] { display: none; }
/* in the rent banner the calendar opens over the form box from its top edge, so it stays on screen */
.rent-hero .rent-form { position: relative; }
.rent-hero .range { position: static; }
.rent-hero .range-pop { top: 0; left: 50%; transform: translateX(-50%); width: min(100%, 400px); }
.range-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.range-month { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--ink); cursor: pointer; }
.range-month:hover { background: var(--tile); }
.range-month svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.2s var(--ease); }
.range-month.is-open svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .range-month svg { transition: none; } }
.range-grid.is-months { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 0; }
.range-mon { min-height: 52px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 1rem; color: var(--ink); cursor: pointer; }
.range-mon:hover { background: var(--tile); }
.range-mon.is-on { background: var(--btn-fill); color: var(--white); font-weight: 700; box-shadow: inset 0 0 0 2.5px var(--yellow); }
.range-mon:disabled { color: rgba(10, 10, 10, 0.28); background: none; cursor: default; }
.range-nav { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--tile); color: var(--ink); cursor: pointer; }
.range-nav:hover { background: var(--concrete); }
.range-nav:disabled { opacity: 0.35; cursor: default; }
.range-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.range-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.range-dow { padding: 6px 0; text-align: center; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.range-day { position: relative; height: 44px; border: 0; padding: 0; background: none; font: inherit; font-size: 0.95rem; color: var(--ink); cursor: pointer; }
.range-day span { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; }
.range-day:hover span { background: var(--tile); }
.range-day.is-today span { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.range-day:disabled { color: rgba(10, 10, 10, 0.28); cursor: default; }
.range-day:disabled span { background: none; }
.range-day.is-in::before, .range-day.is-start.has-end::before, .range-day.is-end::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; right: 0; background: var(--tile); }
/* the band's ends are round: tucked behind the start and end circles, and where a week or the month breaks it */
.range-day.is-start::before { left: calc(50% - 20px); border-radius: 20px 0 0 20px; }
.range-day.is-end::before { right: calc(50% - 20px); border-radius: 0 20px 20px 0; }
.range-day.is-start.is-end::before { display: none; }
.range-day.is-in.is-row-start::before { left: calc(50% - 20px); border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.range-day.is-in.is-row-end::before { right: calc(50% - 20px); border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.range-day.is-start.is-row-end::before, .range-day.is-end.is-row-start::before { display: none; }
.range-day.is-start span, .range-day.is-end span { background: var(--btn-fill); color: var(--white); font-weight: 700; box-shadow: inset 0 0 0 2.5px var(--yellow); }
.range-day:focus-visible { outline: none; }
.range-day:focus-visible span { outline: 3px solid var(--black); outline-offset: 1px; }
.range-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.range-hint { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.range-clear { border: 0; background: none; padding: 10px 4px; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.range-error { margin: 0; font-size: 0.95rem; font-weight: 500; color: #B42318; }
.range-error[hidden] { display: none; }
/* a hero split with the product drawing: the long SEO title sits beside it at section size */
.hero .feature { padding: clamp(32px, 5vw, 80px) 0; }
.hero .feature h1 { font-size: clamp(2.4rem, 4vw, 4rem); max-width: none; }
.hero .feature .lead { margin-top: 24px; }
.hero .trustbar-inner { margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--hair); width: 100%; }

/* ---------- Panels: plain sections now; no screen-high snapping ---------- */
.panel { position: relative; }
.panel > .container { width: 100%; }
.feature-panel > .container { display: flex; }

/* ---------- Sheets and cards render flat: the page is the surface ---------- */
.sheet, .sheet-dark,
.section-black > .container, .section-green > .container { background: transparent; color: var(--ink); }

/* ---------- Sections ----------
   Every section after the first opens with a hairline across the container. */
.section, .section-black, .section-green { padding: var(--section) 0; }
.section + .section, .section + .section-black, .section-black + .section, .section + .section-green, .section-green + .section,
.hero + .section, .hero + .section-black, .panel + .panel { border-top: 1px solid var(--hair); }
.section-head { max-width: 24em; margin: 0 0 clamp(32px, 4vw, 64px); text-align: left; }
.section-head .lead { margin: 0; }
.section-black, .section-green { color: var(--ink); }

/* the one black band: contact, at the foot of every page */
#contact.section-black { --btn-fill: rgba(255, 255, 255, 0.08); background: var(--black); color: var(--white); border-top: 0; }
#contact.section-black h2, #contact.section-black .lead, #contact.section-black p, #contact.section-black .contact-value { color: var(--white); }
#contact.section-black .kicker, #contact.section-black .contact-label, #contact.section-black .form label span { color: rgba(255, 255, 255, 0.64); }
#contact.section-black .contact-methods, #contact.section-black .contact-method { border-color: var(--hair-light); }
#contact.section-black .form input, #contact.section-black .form select, #contact.section-black .form textarea { background-color: rgba(255, 255, 255, 0.1); color: var(--white); }
#contact.section-black .form input::placeholder, #contact.section-black .form textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
#contact.section-black .form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.6'/%3E%3C/svg%3E"); }
#contact.section-black .form select option { color: var(--ink); }
#contact.section-black .form input:focus, #contact.section-black .form select:focus, #contact.section-black .form textarea:focus { box-shadow: 0 0 0 2px var(--white); }
#contact.section-black :focus-visible { outline-color: var(--white); }

/* ---------- Trust row ---------- */
.trustbar-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: left; }
.trust-item strong { display: block; font-size: 1.15rem; }
.trust-item span { font-size: 0.95rem; color: var(--ink-2); }

/* ---------- Grids & cards: hairline columns, no boxes ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.card {
  padding: 24px 0 0;
  border-top: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.card p { color: var(--ink-2); font-size: 1rem; }
.card .btn-row { margin-top: auto; padding-top: 20px; }
.card-dark .tag { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.tag {
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 8px 12px;
  border-radius: var(--r-btn);
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--ink);
  margin-bottom: 20px;
}
.tag-yellow { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.card-art { margin: 4px 0 20px; }
.card-art svg { width: 100%; height: clamp(56px, 8.5vh, 140px); display: block; }
.trike-svg-sm { width: 100%; max-width: 300px; display: block; }

/* hairline lists */
.list { border-top: 1px solid var(--hair); margin: clamp(16px, 2vw, 28px) 0 clamp(20px, 2.4vw, 36px); }
.list li { padding: 18px 0; border-bottom: 1px solid var(--hair); font-size: 1rem; }
.list strong { display: block; font-size: 1.2rem; letter-spacing: -0.015em; }
.list p { margin: 4px 0 0; font-size: 1rem; color: var(--ink-2); }
.list-steps li { display: flex; gap: 24px; align-items: flex-start; padding: 24px 0; }
.list-steps .num { flex-shrink: 0; width: 56px; font-size: 2.4rem; font-weight: 300; line-height: 1; color: var(--ink); letter-spacing: -0.03em; }

/* split layout: heading on the left, detail on the right */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 112px); align-items: start; }
.split .lead { margin-bottom: 0; }

/* feature rows (product pages) */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: center; padding: var(--section) 0; width: 100%; }
.feature.sheet-dark { padding: var(--section) 0; }
.feature .lead { margin-bottom: 0.4em; }
.feature .list { margin-bottom: 28px; }
.feature.reverse .feature-art { order: -1; }
.feature-art { display: flex; align-items: center; justify-content: center; background: var(--tile); border-radius: var(--r); aspect-ratio: 1; padding: 10%; }
.feature-art svg { width: 100%; max-width: 440px; }
.feature .kicker { margin-bottom: 16px; }
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; margin: clamp(16px, 2vw, 28px) 0 clamp(20px, 2.4vw, 36px); }
.spec div { border-top: 1px solid var(--hair); padding-top: 14px; }
.spec dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); margin-bottom: 6px; }
.spec dd { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; }

/* quote */
.quote {
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 22em;
  margin: 0 auto;
  text-align: center;
}
.quote-yellow { color: var(--ink); }

/* locations */
.loc strong { display: block; font-size: 1.35rem; }
.loc p { font-size: 1rem; }
.loc .addr { font-weight: 500; color: var(--ink); }

/* ---------- Contact ---------- */
/* the contact page: room between the WhatsApp / Email / Workshop row and the band below it */
.contact-hero { padding-bottom: clamp(56px, 7vw, 112px); }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 112px); align-items: start; }
.contact-methods { display: flex; flex-direction: column; margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--hair); }
.contact-method {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
}
.contact-method:hover .contact-value { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.contact-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); font-weight: 500; margin-bottom: 4px; }
.contact-value { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; letter-spacing: -0.02em; }

.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 8px; }
.form label span { font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); }
.form input, .form select, .form textarea {
  background: var(--tile);
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 12px 18px;
  font-size: 1rem;
  font-family: var(--font);
  color: var(--ink);
  min-height: 56px;
}
.form textarea { min-height: 120px; }
.form select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 18px;
}
.form select option { color: var(--ink); }
.form input::placeholder, .form textarea::placeholder { color: rgba(10, 10, 10, 0.4); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.form textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- CTA band ---------- */
.cta { text-align: center; padding: var(--section) 0; }
.cta h2 { margin-bottom: 0.3em; }
.cta .lead { margin: 0 auto 40px; }

/* ---------- Footer: the other window onto the wall ----------
   Like the header, the footer shows the concrete pinned to the viewport
   (the page scrolls past a wall that stays put) and begins with the same
   crack, turned upside down. ::before is the footer's concrete, cut along
   the crack line with the header's polygon rotated 180°; ::after draws the
   crack image on top, so the torn edge overlaps the end of the last section.
   The footer box itself is transparent: no straight grey edge above the crack. */
.site-footer {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  margin-top: 0;
  padding: clamp(56px, 7vh, 96px) 0 28px;
  --crack-h: max(calc(100vw * 0.062), 44px);
}
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(26px - var(--crack-h));
  z-index: -1;
  pointer-events: none;
}
.site-footer::after {
  height: var(--crack-h);
  background: url("assets/header-crack.webp?v=2") center / 100% 100% no-repeat;
  transform: rotate(180deg);
}
.site-footer::before {
  bottom: 0;
  background: var(--concrete) var(--texture) center / cover no-repeat fixed;
  -webkit-clip-path: polygon(0.00% calc(var(--crack-h) * 0.766), 0.45% calc(var(--crack-h) * 0.82), 0.95% calc(var(--crack-h) * 0.799), 1.45% calc(var(--crack-h) * 0.802), 1.95% calc(var(--crack-h) * 0.786), 2.45% calc(var(--crack-h) * 0.759), 2.95% calc(var(--crack-h) * 0.748), 3.45% calc(var(--crack-h) * 0.747), 3.95% calc(var(--crack-h) * 0.734), 4.45% calc(var(--crack-h) * 0.692), 4.95% calc(var(--crack-h) * 0.663), 5.45% calc(var(--crack-h) * 0.641), 5.95% calc(var(--crack-h) * 0.619), 6.45% calc(var(--crack-h) * 0.6), 6.95% calc(var(--crack-h) * 0.571), 7.45% calc(var(--crack-h) * 0.545), 7.95% calc(var(--crack-h) * 0.526), 8.45% calc(var(--crack-h) * 0.491), 8.95% calc(var(--crack-h) * 0.47), 9.45% calc(var(--crack-h) * 0.448), 9.95% calc(var(--crack-h) * 0.44), 10.46% calc(var(--crack-h) * 0.381), 10.96% calc(var(--crack-h) * 0.355), 11.46% calc(var(--crack-h) * 0.324), 11.96% calc(var(--crack-h) * 0.297), 12.46% calc(var(--crack-h) * 0.278), 12.96% calc(var(--crack-h) * 0.252), 13.46% calc(var(--crack-h) * 0.204), 13.96% calc(var(--crack-h) * 0.161), 14.46% calc(var(--crack-h) * 0.138), 14.96% calc(var(--crack-h) * 0.116), 15.46% calc(var(--crack-h) * 0.099), 15.96% calc(var(--crack-h) * 0.087), 16.46% calc(var(--crack-h) * 0.09), 16.96% calc(var(--crack-h) * 0.105), 17.46% calc(var(--crack-h) * 0.139), 17.96% calc(var(--crack-h) * 0.194), 18.46% calc(var(--crack-h) * 0.28), 18.96% calc(var(--crack-h) * 0.335), 19.46% calc(var(--crack-h) * 0.392), 19.96% calc(var(--crack-h) * 0.439), 20.46% calc(var(--crack-h) * 0.461), 20.96% calc(var(--crack-h) * 0.464), 21.46% calc(var(--crack-h) * 0.472), 21.96% calc(var(--crack-h) * 0.483), 22.46% calc(var(--crack-h) * 0.499), 22.96% calc(var(--crack-h) * 0.516), 23.46% calc(var(--crack-h) * 0.52), 23.96% calc(var(--crack-h) * 0.493), 24.46% calc(var(--crack-h) * 0.46), 24.96% calc(var(--crack-h) * 0.426), 25.46% calc(var(--crack-h) * 0.406), 25.96% calc(var(--crack-h) * 0.395), 26.46% calc(var(--crack-h) * 0.391), 26.96% calc(var(--crack-h) * 0.372), 27.46% calc(var(--crack-h) * 0.348), 27.96% calc(var(--crack-h) * 0.363), 28.46% calc(var(--crack-h) * 0.378), 28.96% calc(var(--crack-h) * 0.397), 29.46% calc(var(--crack-h) * 0.424), 29.96% calc(var(--crack-h) * 0.437), 30.47% calc(var(--crack-h) * 0.451), 30.97% calc(var(--crack-h) * 0.465), 31.47% calc(var(--crack-h) * 0.482), 31.97% calc(var(--crack-h) * 0.485), 32.47% calc(var(--crack-h) * 0.493), 32.97% calc(var(--crack-h) * 0.52), 33.47% calc(var(--crack-h) * 0.529), 33.97% calc(var(--crack-h) * 0.534), 34.47% calc(var(--crack-h) * 0.528), 34.97% calc(var(--crack-h) * 0.546), 35.47% calc(var(--crack-h) * 0.585), 35.97% calc(var(--crack-h) * 0.607), 36.47% calc(var(--crack-h) * 0.608), 36.97% calc(var(--crack-h) * 0.6), 37.47% calc(var(--crack-h) * 0.604), 37.97% calc(var(--crack-h) * 0.596), 38.47% calc(var(--crack-h) * 0.595), 38.97% calc(var(--crack-h) * 0.572), 39.47% calc(var(--crack-h) * 0.503), 39.97% calc(var(--crack-h) * 0.452), 40.47% calc(var(--crack-h) * 0.421), 40.97% calc(var(--crack-h) * 0.398), 41.47% calc(var(--crack-h) * 0.404), 41.97% calc(var(--crack-h) * 0.417), 42.47% calc(var(--crack-h) * 0.413), 42.97% calc(var(--crack-h) * 0.405), 43.47% calc(var(--crack-h) * 0.4), 43.97% calc(var(--crack-h) * 0.336), 44.47% calc(var(--crack-h) * 0.316), 44.97% calc(var(--crack-h) * 0.324), 45.47% calc(var(--crack-h) * 0.344), 45.97% calc(var(--crack-h) * 0.355), 46.47% calc(var(--crack-h) * 0.366), 46.97% calc(var(--crack-h) * 0.375), 47.47% calc(var(--crack-h) * 0.393), 47.97% calc(var(--crack-h) * 0.416), 48.47% calc(var(--crack-h) * 0.436), 48.97% calc(var(--crack-h) * 0.44), 49.47% calc(var(--crack-h) * 0.446), 49.97% calc(var(--crack-h) * 0.455), 50.48% calc(var(--crack-h) * 0.458), 50.98% calc(var(--crack-h) * 0.459), 51.48% calc(var(--crack-h) * 0.459), 51.98% calc(var(--crack-h) * 0.439), 52.48% calc(var(--crack-h) * 0.453), 52.98% calc(var(--crack-h) * 0.469), 53.48% calc(var(--crack-h) * 0.464), 53.98% calc(var(--crack-h) * 0.459), 54.48% calc(var(--crack-h) * 0.473), 54.98% calc(var(--crack-h) * 0.486), 55.48% calc(var(--crack-h) * 0.502), 55.98% calc(var(--crack-h) * 0.482), 56.48% calc(var(--crack-h) * 0.475), 56.98% calc(var(--crack-h) * 0.464), 57.48% calc(var(--crack-h) * 0.447), 57.98% calc(var(--crack-h) * 0.439), 58.48% calc(var(--crack-h) * 0.421), 58.98% calc(var(--crack-h) * 0.413), 59.48% calc(var(--crack-h) * 0.41), 59.98% calc(var(--crack-h) * 0.401), 60.48% calc(var(--crack-h) * 0.393), 60.98% calc(var(--crack-h) * 0.389), 61.48% calc(var(--crack-h) * 0.385), 61.98% calc(var(--crack-h) * 0.4), 62.48% calc(var(--crack-h) * 0.41), 62.98% calc(var(--crack-h) * 0.421), 63.48% calc(var(--crack-h) * 0.434), 63.98% calc(var(--crack-h) * 0.439), 64.48% calc(var(--crack-h) * 0.437), 64.98% calc(var(--crack-h) * 0.462), 65.48% calc(var(--crack-h) * 0.497), 65.98% calc(var(--crack-h) * 0.526), 66.48% calc(var(--crack-h) * 0.564), 66.98% calc(var(--crack-h) * 0.61), 67.48% calc(var(--crack-h) * 0.67), 67.98% calc(var(--crack-h) * 0.731), 68.48% calc(var(--crack-h) * 0.75), 68.98% calc(var(--crack-h) * 0.765), 69.48% calc(var(--crack-h) * 0.771), 69.98% calc(var(--crack-h) * 0.767), 70.49% calc(var(--crack-h) * 0.758), 70.99% calc(var(--crack-h) * 0.726), 71.49% calc(var(--crack-h) * 0.69), 71.99% calc(var(--crack-h) * 0.665), 72.49% calc(var(--crack-h) * 0.635), 72.99% calc(var(--crack-h) * 0.613), 73.49% calc(var(--crack-h) * 0.6), 73.99% calc(var(--crack-h) * 0.572), 74.49% calc(var(--crack-h) * 0.538), 74.99% calc(var(--crack-h) * 0.506), 75.49% calc(var(--crack-h) * 0.489), 75.99% calc(var(--crack-h) * 0.457), 76.49% calc(var(--crack-h) * 0.439), 76.99% calc(var(--crack-h) * 0.43), 77.49% calc(var(--crack-h) * 0.41), 77.99% calc(var(--crack-h) * 0.383), 78.49% calc(var(--crack-h) * 0.369), 78.99% calc(var(--crack-h) * 0.369), 79.49% calc(var(--crack-h) * 0.373), 79.99% calc(var(--crack-h) * 0.4), 80.49% calc(var(--crack-h) * 0.424), 80.99% calc(var(--crack-h) * 0.44), 81.49% calc(var(--crack-h) * 0.462), 81.99% calc(var(--crack-h) * 0.474), 82.49% calc(var(--crack-h) * 0.502), 82.99% calc(var(--crack-h) * 0.547), 83.49% calc(var(--crack-h) * 0.571), 83.99% calc(var(--crack-h) * 0.58), 84.49% calc(var(--crack-h) * 0.585), 84.99% calc(var(--crack-h) * 0.584), 85.49% calc(var(--crack-h) * 0.592), 85.99% calc(var(--crack-h) * 0.599), 86.49% calc(var(--crack-h) * 0.608), 86.99% calc(var(--crack-h) * 0.625), 87.49% calc(var(--crack-h) * 0.653), 87.99% calc(var(--crack-h) * 0.691), 88.49% calc(var(--crack-h) * 0.773), 88.99% calc(var(--crack-h) * 0.811), 89.49% calc(var(--crack-h) * 0.837), 89.99% calc(var(--crack-h) * 0.855), 90.50% calc(var(--crack-h) * 0.875), 91.00% calc(var(--crack-h) * 0.894), 91.50% calc(var(--crack-h) * 0.905), 92.00% calc(var(--crack-h) * 0.915), 92.50% calc(var(--crack-h) * 0.901), 93.00% calc(var(--crack-h) * 0.898), 93.50% calc(var(--crack-h) * 0.88), 94.00% calc(var(--crack-h) * 0.849), 94.50% calc(var(--crack-h) * 0.812), 95.00% calc(var(--crack-h) * 0.797), 95.50% calc(var(--crack-h) * 0.79), 96.00% calc(var(--crack-h) * 0.781), 96.50% calc(var(--crack-h) * 0.773), 97.00% calc(var(--crack-h) * 0.76), 97.50% calc(var(--crack-h) * 0.727), 98.00% calc(var(--crack-h) * 0.686), 98.50% calc(var(--crack-h) * 0.643), 99.00% calc(var(--crack-h) * 0.631), 99.50% calc(var(--crack-h) * 0.622), 100.00% calc(var(--crack-h) * 0.636), 100% 100%, 0 100%);
  clip-path: polygon(0.00% calc(var(--crack-h) * 0.766), 0.45% calc(var(--crack-h) * 0.82), 0.95% calc(var(--crack-h) * 0.799), 1.45% calc(var(--crack-h) * 0.802), 1.95% calc(var(--crack-h) * 0.786), 2.45% calc(var(--crack-h) * 0.759), 2.95% calc(var(--crack-h) * 0.748), 3.45% calc(var(--crack-h) * 0.747), 3.95% calc(var(--crack-h) * 0.734), 4.45% calc(var(--crack-h) * 0.692), 4.95% calc(var(--crack-h) * 0.663), 5.45% calc(var(--crack-h) * 0.641), 5.95% calc(var(--crack-h) * 0.619), 6.45% calc(var(--crack-h) * 0.6), 6.95% calc(var(--crack-h) * 0.571), 7.45% calc(var(--crack-h) * 0.545), 7.95% calc(var(--crack-h) * 0.526), 8.45% calc(var(--crack-h) * 0.491), 8.95% calc(var(--crack-h) * 0.47), 9.45% calc(var(--crack-h) * 0.448), 9.95% calc(var(--crack-h) * 0.44), 10.46% calc(var(--crack-h) * 0.381), 10.96% calc(var(--crack-h) * 0.355), 11.46% calc(var(--crack-h) * 0.324), 11.96% calc(var(--crack-h) * 0.297), 12.46% calc(var(--crack-h) * 0.278), 12.96% calc(var(--crack-h) * 0.252), 13.46% calc(var(--crack-h) * 0.204), 13.96% calc(var(--crack-h) * 0.161), 14.46% calc(var(--crack-h) * 0.138), 14.96% calc(var(--crack-h) * 0.116), 15.46% calc(var(--crack-h) * 0.099), 15.96% calc(var(--crack-h) * 0.087), 16.46% calc(var(--crack-h) * 0.09), 16.96% calc(var(--crack-h) * 0.105), 17.46% calc(var(--crack-h) * 0.139), 17.96% calc(var(--crack-h) * 0.194), 18.46% calc(var(--crack-h) * 0.28), 18.96% calc(var(--crack-h) * 0.335), 19.46% calc(var(--crack-h) * 0.392), 19.96% calc(var(--crack-h) * 0.439), 20.46% calc(var(--crack-h) * 0.461), 20.96% calc(var(--crack-h) * 0.464), 21.46% calc(var(--crack-h) * 0.472), 21.96% calc(var(--crack-h) * 0.483), 22.46% calc(var(--crack-h) * 0.499), 22.96% calc(var(--crack-h) * 0.516), 23.46% calc(var(--crack-h) * 0.52), 23.96% calc(var(--crack-h) * 0.493), 24.46% calc(var(--crack-h) * 0.46), 24.96% calc(var(--crack-h) * 0.426), 25.46% calc(var(--crack-h) * 0.406), 25.96% calc(var(--crack-h) * 0.395), 26.46% calc(var(--crack-h) * 0.391), 26.96% calc(var(--crack-h) * 0.372), 27.46% calc(var(--crack-h) * 0.348), 27.96% calc(var(--crack-h) * 0.363), 28.46% calc(var(--crack-h) * 0.378), 28.96% calc(var(--crack-h) * 0.397), 29.46% calc(var(--crack-h) * 0.424), 29.96% calc(var(--crack-h) * 0.437), 30.47% calc(var(--crack-h) * 0.451), 30.97% calc(var(--crack-h) * 0.465), 31.47% calc(var(--crack-h) * 0.482), 31.97% calc(var(--crack-h) * 0.485), 32.47% calc(var(--crack-h) * 0.493), 32.97% calc(var(--crack-h) * 0.52), 33.47% calc(var(--crack-h) * 0.529), 33.97% calc(var(--crack-h) * 0.534), 34.47% calc(var(--crack-h) * 0.528), 34.97% calc(var(--crack-h) * 0.546), 35.47% calc(var(--crack-h) * 0.585), 35.97% calc(var(--crack-h) * 0.607), 36.47% calc(var(--crack-h) * 0.608), 36.97% calc(var(--crack-h) * 0.6), 37.47% calc(var(--crack-h) * 0.604), 37.97% calc(var(--crack-h) * 0.596), 38.47% calc(var(--crack-h) * 0.595), 38.97% calc(var(--crack-h) * 0.572), 39.47% calc(var(--crack-h) * 0.503), 39.97% calc(var(--crack-h) * 0.452), 40.47% calc(var(--crack-h) * 0.421), 40.97% calc(var(--crack-h) * 0.398), 41.47% calc(var(--crack-h) * 0.404), 41.97% calc(var(--crack-h) * 0.417), 42.47% calc(var(--crack-h) * 0.413), 42.97% calc(var(--crack-h) * 0.405), 43.47% calc(var(--crack-h) * 0.4), 43.97% calc(var(--crack-h) * 0.336), 44.47% calc(var(--crack-h) * 0.316), 44.97% calc(var(--crack-h) * 0.324), 45.47% calc(var(--crack-h) * 0.344), 45.97% calc(var(--crack-h) * 0.355), 46.47% calc(var(--crack-h) * 0.366), 46.97% calc(var(--crack-h) * 0.375), 47.47% calc(var(--crack-h) * 0.393), 47.97% calc(var(--crack-h) * 0.416), 48.47% calc(var(--crack-h) * 0.436), 48.97% calc(var(--crack-h) * 0.44), 49.47% calc(var(--crack-h) * 0.446), 49.97% calc(var(--crack-h) * 0.455), 50.48% calc(var(--crack-h) * 0.458), 50.98% calc(var(--crack-h) * 0.459), 51.48% calc(var(--crack-h) * 0.459), 51.98% calc(var(--crack-h) * 0.439), 52.48% calc(var(--crack-h) * 0.453), 52.98% calc(var(--crack-h) * 0.469), 53.48% calc(var(--crack-h) * 0.464), 53.98% calc(var(--crack-h) * 0.459), 54.48% calc(var(--crack-h) * 0.473), 54.98% calc(var(--crack-h) * 0.486), 55.48% calc(var(--crack-h) * 0.502), 55.98% calc(var(--crack-h) * 0.482), 56.48% calc(var(--crack-h) * 0.475), 56.98% calc(var(--crack-h) * 0.464), 57.48% calc(var(--crack-h) * 0.447), 57.98% calc(var(--crack-h) * 0.439), 58.48% calc(var(--crack-h) * 0.421), 58.98% calc(var(--crack-h) * 0.413), 59.48% calc(var(--crack-h) * 0.41), 59.98% calc(var(--crack-h) * 0.401), 60.48% calc(var(--crack-h) * 0.393), 60.98% calc(var(--crack-h) * 0.389), 61.48% calc(var(--crack-h) * 0.385), 61.98% calc(var(--crack-h) * 0.4), 62.48% calc(var(--crack-h) * 0.41), 62.98% calc(var(--crack-h) * 0.421), 63.48% calc(var(--crack-h) * 0.434), 63.98% calc(var(--crack-h) * 0.439), 64.48% calc(var(--crack-h) * 0.437), 64.98% calc(var(--crack-h) * 0.462), 65.48% calc(var(--crack-h) * 0.497), 65.98% calc(var(--crack-h) * 0.526), 66.48% calc(var(--crack-h) * 0.564), 66.98% calc(var(--crack-h) * 0.61), 67.48% calc(var(--crack-h) * 0.67), 67.98% calc(var(--crack-h) * 0.731), 68.48% calc(var(--crack-h) * 0.75), 68.98% calc(var(--crack-h) * 0.765), 69.48% calc(var(--crack-h) * 0.771), 69.98% calc(var(--crack-h) * 0.767), 70.49% calc(var(--crack-h) * 0.758), 70.99% calc(var(--crack-h) * 0.726), 71.49% calc(var(--crack-h) * 0.69), 71.99% calc(var(--crack-h) * 0.665), 72.49% calc(var(--crack-h) * 0.635), 72.99% calc(var(--crack-h) * 0.613), 73.49% calc(var(--crack-h) * 0.6), 73.99% calc(var(--crack-h) * 0.572), 74.49% calc(var(--crack-h) * 0.538), 74.99% calc(var(--crack-h) * 0.506), 75.49% calc(var(--crack-h) * 0.489), 75.99% calc(var(--crack-h) * 0.457), 76.49% calc(var(--crack-h) * 0.439), 76.99% calc(var(--crack-h) * 0.43), 77.49% calc(var(--crack-h) * 0.41), 77.99% calc(var(--crack-h) * 0.383), 78.49% calc(var(--crack-h) * 0.369), 78.99% calc(var(--crack-h) * 0.369), 79.49% calc(var(--crack-h) * 0.373), 79.99% calc(var(--crack-h) * 0.4), 80.49% calc(var(--crack-h) * 0.424), 80.99% calc(var(--crack-h) * 0.44), 81.49% calc(var(--crack-h) * 0.462), 81.99% calc(var(--crack-h) * 0.474), 82.49% calc(var(--crack-h) * 0.502), 82.99% calc(var(--crack-h) * 0.547), 83.49% calc(var(--crack-h) * 0.571), 83.99% calc(var(--crack-h) * 0.58), 84.49% calc(var(--crack-h) * 0.585), 84.99% calc(var(--crack-h) * 0.584), 85.49% calc(var(--crack-h) * 0.592), 85.99% calc(var(--crack-h) * 0.599), 86.49% calc(var(--crack-h) * 0.608), 86.99% calc(var(--crack-h) * 0.625), 87.49% calc(var(--crack-h) * 0.653), 87.99% calc(var(--crack-h) * 0.691), 88.49% calc(var(--crack-h) * 0.773), 88.99% calc(var(--crack-h) * 0.811), 89.49% calc(var(--crack-h) * 0.837), 89.99% calc(var(--crack-h) * 0.855), 90.50% calc(var(--crack-h) * 0.875), 91.00% calc(var(--crack-h) * 0.894), 91.50% calc(var(--crack-h) * 0.905), 92.00% calc(var(--crack-h) * 0.915), 92.50% calc(var(--crack-h) * 0.901), 93.00% calc(var(--crack-h) * 0.898), 93.50% calc(var(--crack-h) * 0.88), 94.00% calc(var(--crack-h) * 0.849), 94.50% calc(var(--crack-h) * 0.812), 95.00% calc(var(--crack-h) * 0.797), 95.50% calc(var(--crack-h) * 0.79), 96.00% calc(var(--crack-h) * 0.781), 96.50% calc(var(--crack-h) * 0.773), 97.00% calc(var(--crack-h) * 0.76), 97.50% calc(var(--crack-h) * 0.727), 98.00% calc(var(--crack-h) * 0.686), 98.50% calc(var(--crack-h) * 0.643), 99.00% calc(var(--crack-h) * 0.631), 99.50% calc(var(--crack-h) * 0.622), 100.00% calc(var(--crack-h) * 0.636), 100% 100%, 0 100%);
}

/* Row 1: brand, then three link columns (products, services, company) */
.footer-inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-right: clamp(0px, 3vw, 48px); }
.footer-logo { display: block; height: 40px; width: auto; }
.footer-tagline { color: var(--ink); font-weight: 500; font-size: 1.15rem; line-height: 1.4; max-width: 18em; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col .footer-col-title { margin-bottom: 8px; }   /* carved like the menu (build.py) */
.footer-col a, .footer-col span { text-decoration: none; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 44px; height: 44px; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center; transition: background-color 0.15s ease, color 0.15s ease; }
.footer-social a:hover { background: var(--mustard); color: var(--black); }
.footer-social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Row 2: customer support, centred, with the carved title */
.footer-band { margin-top: clamp(40px, 6vh, 64px); padding-top: clamp(48px, 7vh, 80px); border-top: 1px solid var(--hair); text-align: center; }
.footer-band-title { font-size: clamp(1.4rem, 1rem + 1vw, 2rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 clamp(20px, 3vh, 32px); color: var(--black); }
.footer-support { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px clamp(24px, 4vw, 56px); }
.footer-support a { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); font-weight: 500; text-decoration: none; color: var(--ink); }
.footer-support a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.footer-support svg { width: 32px; height: 32px; fill: none; stroke: var(--mustard); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Row 3: the language picker, title in the brand column, flags under the link columns */
.footer-lang { margin-top: clamp(40px, 6vh, 64px); padding-top: clamp(48px, 7vh, 80px); border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1.3fr 3fr; gap: 24px 40px; align-items: center; }
.footer-lang-title { font-size: clamp(1.4rem, 1rem + 1vw, 2rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin: 0; color: var(--black); overflow: hidden; }
/* the title rolls through the six languages (script.js): the old line slides up
   and out, the next slides in from below; with reduced motion it just swaps */
.footer-lang-title span { display: inline-block; transition: transform 0.32s var(--ease), opacity 0.32s var(--ease); }
.footer-lang-title span.is-out { transform: translateY(-110%); opacity: 0; }
.footer-lang-title span.is-in { transform: translateY(110%); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .footer-lang-title span { transition: none; } }
.footer-flags { display: flex; flex-wrap: wrap; gap: 16px clamp(16px, 2vw, 28px); }
.footer-flags a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; font-size: 1.05rem; font-weight: 500; color: var(--ink-2); }
.footer-flags .flag { width: 72px; height: 48px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14) inset, 0 6px 14px -9px rgba(0, 0, 0, 0.45); transition: transform 0.15s ease; }
.footer-flags a:hover .flag { transform: translateY(-2px); }
.footer-flags a[aria-current="true"] { color: var(--ink); }
.footer-flags a[aria-current="true"] .flag { box-shadow: 0 0 0 3px var(--mustard), 0 6px 14px -9px rgba(0, 0, 0, 0.45); }

/* Row 4: who we are and the EIT Urban Mobility mark. Row 5: the legal line. */
.footer-org-row { margin-top: clamp(40px, 6vh, 64px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.footer-org strong { display: block; font-size: 1.05rem; font-weight: 500; }
.footer-org span { display: block; font-size: 0.95rem; color: var(--ink-2); margin-top: 2px; }
.footer-eit { display: block; }
.footer-eit img { display: block; height: 52px; width: auto; }
.footer-legal {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-size: 0.9rem;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
}
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* the agency credit sits inside the copyright sentence, so it keeps an underline to read as a link */
.footer-legal > span:first-child a { text-decoration: underline; text-underline-offset: 4px; }
.footer-legal > span:first-child a:hover { color: var(--ink); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {  /* keep in sync with isMobile() in script.js */
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: calc(var(--header-h) - 12px);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* the list starts below the crack, which stays drawn over the open menu */
    padding: calc(var(--crack-h) - 6px) 20px 12px;
    background: var(--concrete) var(--texture) center / cover no-repeat fixed;
  }
  .main-nav.open { display: flex; }
  /* the open phone menu slides out from under the crack: the wall (pinned, so it
     joins the header's seamlessly) and the crease stay, by Jakov's request 2026-10-14 */
  .site-header:has(.main-nav.open)::after { z-index: 1; }
  /* with the menu open there is wall on both sides of the crack, so the header's
     concrete is not cut along it; otherwise the page shows through where the crack rises */
  .site-header:has(.main-nav.open)::before { -webkit-clip-path: none; clip-path: none; }
  .nav-item { border-bottom: 1px solid var(--hair); }
  .main-nav { --nav-h: 20px; }
  .nav-sep { display: none; }   /* the phone menu is a list; the rules between rows do the separating */
  .nav-link { width: 100%; height: 60px; padding: 0 8px; border-radius: 0; font-size: 1.3rem; justify-content: space-between; }
  .nav-link:hover, .nav-item.open > .nav-link, .nav-link[aria-current="page"] { background: transparent; box-shadow: none; }
  .mega {
    position: static;
    width: auto;
    display: none;
    grid-template-columns: 1fr;
    padding: 0 0 12px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .mega.mega-3 { width: auto; grid-template-columns: 1fr; }
  .mega.mega-1 { width: auto; }
  .nav-item.open > .mega { display: grid; }
  /* under an open section every link is its own white button on the concrete,
     so the tap targets are obvious and big (many riders are 65+) */
  .mega, .mega-col { gap: 8px; }
  .mega a {
    min-height: 60px;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--hair);
    border-radius: var(--r);
  }
  .mega a:hover, .mega a:focus-visible { background: var(--white); border-color: var(--ink); }
  /* the seven service rows plus the three menu rows fit one phone screen (812 px) */
  .mega a.has-icon { padding: 8px 14px; gap: 12px; }
  .mega a.has-icon strong { font-size: 1rem; line-height: 1.25; }   /* one line, even the long FI/LV/LT names */
  .mega a.has-icon .mega-text > span { line-height: 1.3; }
  .mega .mega-icon { width: 40px; height: 40px; }
  .mega.mega-1, .mega.mega-1 .mega-col { gap: 6px; }
  .mega.mega-1 { padding-bottom: 8px; }
  .mega-head { margin: 12px 8px 4px; }
  .mega .mega-thumb { width: 84px; border-radius: 10px; }
  .mega:not(.mega-right) { grid-template-columns: 1fr; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .mega { width: 640px; }
}
/* Desktop dropdowns: every panel (products, services, language) hangs from the
   same line under the header and keeps the header's side margins. script.js
   centres each one under its own item, then slides it sideways so it never
   leaves the screen; a panel taller than the screen scrolls inside itself. */
@media (min-width: 961px) {
  .site-header { --menu-gutter: clamp(20px, 3vw, 44px); --menu-top: calc(var(--header-h) - 23px); }
  .nav-item.has-menu, .lang { position: static; }
  .mega, .lang-menu {
    top: var(--menu-top);
    left: auto;
    right: var(--menu-gutter);   /* until script.js places it under its item */
    max-width: calc(100% - 2 * var(--menu-gutter));
    max-height: calc(100dvh - var(--menu-top) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* short screens: tighter rows, so the tall Services panel rarely needs to scroll */
@media (min-width: 961px) and (max-height: 820px) {
  .mega { padding: 12px; }
  .mega a { padding: 10px 16px; }
  .mega-head { margin: 4px 16px 2px; }
}
@media (max-width: 960px) {
  .split, .contact-inner, .grid-2, .grid-3, .feature, .spec { grid-template-columns: 1fr; }
  .feature { gap: 32px; }
  .feature.reverse .feature-art { order: 0; }
  .trustbar-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; padding-right: 0; }
  .footer-lang { grid-template-columns: 1fr; }
  .hero-copy { padding: 24px 0; }
  .trustbar-inner { text-align: left; }

}
@media (max-width: 560px) {
  html { font-size: 16px; }
  .container { padding: 0 20px; }
  .trustbar-inner, .form-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-support { flex-direction: column; align-items: center; }
  .footer-org-row { flex-direction: column; align-items: flex-start; }
  .footer-eit img { height: 44px; max-width: 100%; }
  .footer-flags { gap: 14px 16px; }
  .footer-flags .flag { width: 60px; height: 40px; }
  /* phones: the same roomier footer rows and bigger language text as on desktop */
  .footer-band, .footer-lang { margin-top: 48px; padding-top: 64px; }
  .footer-org-row { margin-top: 48px; padding-top: 56px; }
  .footer-lang-title { font-size: 1.6rem; }
  .footer-flags a { font-size: 1.1rem; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .logo-img { height: 48px; }
  .header-inner { height: 80px; }
  :root { --header-h: 104px; }

  h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nav-link, .chev, .offer-arrow, .footer-social a, .faq summary::after { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* ================================================================
   SEO build components
   ================================================================ */

/* keyboard users: visible focus everywhere, and a skip link */
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--yellow); color: var(--black); padding: 14px 22px; border-radius: 999px;
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* breadcrumbs sit where the kicker used to be */
.crumbs { margin-bottom: clamp(10px, 1.6vh, 20px); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); }
.hero-inner .crumbs ol { justify-content: flex-start; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* FAQ accordion: fully in the HTML so Google and AI assistants can read it.
   Each question is its own white card with air around it; type steps up on laptop widths. */
.faq { max-width: 880px; margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); padding: 0; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 64px; padding: 24px 0;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink); font-size: 2rem; font-weight: 300; line-height: 1; flex-shrink: 0; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 0; padding: 0 0 28px;
  color: var(--ink-2); font-size: 1.05rem; line-height: 1.55; max-width: 40em;
}
.faq a { font-weight: 500; color: var(--ink); }

/* prices */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 clamp(16px, 3vh, 28px); }
.price strong { font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -0.02em; font-weight: 500; }
.price span { font-size: 1rem; color: var(--ink-soft); }
.price-table { width: 100%; border-collapse: collapse; font-size: clamp(1.05rem, 2vh, 1.2rem); }
.price-table th, .price-table td { text-align: left; padding: clamp(10px, 1.8vh, 16px) 12px; border-bottom: 1px solid var(--hair); }
.price-table thead th { font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.price-table tbody th { font-weight: 500; }
.price-table td { font-weight: 500; }

/* 4-column spec grid on the product page */
.spec-4 { grid-template-columns: repeat(4, 1fr); }

/* .card-on-green / .card-on-dark / .tag-on-dark: plain white cards and grey tags now */
.date { font-size: 1rem; opacity: 0.7; margin: auto 0 0; }
.note { margin-top: clamp(16px, 3vh, 32px); font-size: 1.1rem; }
.note a { color: var(--ink); font-weight: 500; }
.quote-left { text-align: left; margin: 0; font-size: clamp(1.4rem, 2.8vh, 2rem); }
.btn-col { flex-direction: column; align-items: flex-start; }
.trust-item a { text-decoration: none; font-weight: 500; }

/* spec grids narrow in steps on smaller screens */
@media (max-width: 960px) {
  .spec-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .spec-4 { grid-template-columns: 1fr; }
  .price-table th, .price-table td { padding: 10px 6px; }
}

/* ---------- Cookie consent ---------- */
.consent {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 200;
  width: min(760px, calc(100% - 32px));
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.3);
  color: var(--ink);
}
.consent[hidden] { display: none; }
.consent p { flex: 1; margin: 0; font-size: 1rem; line-height: 1.5; }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent .btn { min-height: 48px; padding: 10px 20px; font-size: 0.95rem; white-space: nowrap; }
.footer-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.footer-link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent-actions { flex-direction: column; }
}


/* Home hero: a looping video fills the banner where the wordmark used to sit.
   A dark scrim keeps the copy readable; text flips to Cloud White over it. */
.hero-video { isolation: isolate; }
.hero-video { background: var(--black) url("assets/hero-poster.webp") center / cover no-repeat; }
.hero-video .hero-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); aspect-ratio: 16 / 9; min-width: 100%; min-height: 100%; border: 0; z-index: -2; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero-video .hero-bg { display: none; } }
.hero-video .hero-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 10, 0.22) 0%, rgba(10, 10, 10, 0.08) 45%, rgba(10, 10, 10, 0.34) 100%); }
.hero-video .hero-copy { padding-top: clamp(32px, 7vh, 80px); }
.hero-video h1 { font-size: clamp(3.4rem, 10vw, 9rem); font-weight: 600; letter-spacing: -0.04em; margin: 0 auto; }
.hero-video .hero-inner { align-items: center; text-align: center; }
.hero-video .hero-copy { max-width: 980px; }
.hero-video .hero-actions { margin-top: clamp(44px, 8vh, 72px); }
/* the "Join the movement" button: the house button for every new button (docs/brand-kit.md) */
.btn-hero { font-size: 1.35rem; padding: 12px 34px; }
.hero-video .hero-actions.center { justify-content: center; }
.hero-video h1, .hero-video .kicker, .hero-video .lead, .hero-video .trust-item strong { color: var(--white); }
.hero-video .lead { color: rgba(250, 250, 250, 0.88); }
.hero-video .trust-item span { color: rgba(250, 250, 250, 0.8); }
.hero-video .trustbar-inner { border-top-color: var(--hair-light); }
/* The banner starts behind the header, so the video runs right up to the
   crack and no wall shows between the crack line and the banner. */
.hero-video { margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); min-height: 100svh; }
/* phones and tablets: a tall banner with the copy centred in it */
@media (max-width: 960px) {
  .hero-video { min-height: 82svh; display: flex; flex-direction: column; }
  .hero-video .hero-inner { flex: 1; justify-content: center; }
  .hero-video .hero-copy { padding: 24px 0 clamp(32px, 8vh, 72px); }
}
@media (max-width: 560px) {
  .hero-video .hero-actions { align-items: center; }
  .btn-hero { width: auto; align-self: center; padding: 12px 26px; font-size: 1.05rem; white-space: nowrap; }
  .card .btn-hero, .btn-col .btn-hero { align-self: flex-start; }
}

/* Home: the headline runs on one line across the screen, sized from its width
   in em (--fit, set per headline in build.py), and the headline and button sit
   in the middle of the screen, measured from the very top (the header floats over it). */
.hero-video .hero-one-line { white-space: nowrap; max-width: none; font-size: min(9rem, calc((100vw - 64px) / var(--fit))); }
.hero-video .hero-copy:has(.hero-one-line) { max-width: none; }
.hero-video:has(.hero-one-line) { min-height: 100svh; padding-top: 0; display: flex; flex-direction: column; justify-content: center; }
.hero-video:has(.hero-one-line) .hero-inner { flex: 0 0 auto; }
.hero-video:has(.hero-one-line) .hero-copy { padding: clamp(48px, 14vh, 160px) 0 0; }
/* desktop: the headline fills about three quarters of the width, not all of it */
@media (min-width: 961px) {
  .hero-video .hero-one-line { font-size: min(7rem, calc((100vw - 64px) * 0.75 / var(--fit))); }
}

/* "Join the movement" leads to /join/, a page of options. Arriving from the
   button, the button turns into the page's heading and the options rise in one
   after another; that only happens on the click (script.js skips every other
   page change), and not at all with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.join-cta, .join-title { view-transition-name: join-cta; }
::view-transition-group(join-cta) { animation-duration: 0.5s; animation-timing-function: var(--ease); }
.join-page { background: var(--black) url("assets/hero-poster.webp") center / cover no-repeat; min-height: 100svh; padding-top: var(--header-h); display: flex; flex-direction: column; justify-content: center; }
.join-page .hero-inner { flex: 0 0 auto; }
.join-page .hero-copy { width: min(100%, 980px); max-width: none; padding: clamp(32px, 6vh, 64px) 0; }
.join-page .hero-scrim { background: rgba(10, 10, 10, 0.24); }
.hero-video .join-title { font-size: clamp(1.7rem, 7.5vw, 5.6rem); max-width: 100%; margin: 0 auto; width: fit-content; overflow-wrap: break-word; hyphens: auto; }
.join-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin: clamp(64px, 10vh, 112px) 0 0;
  padding: 0;
  list-style: none;
}
/* three big dark buttons on the banner */
.join-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 176px;
  padding: 32px 72px 32px 32px;
  border: 1.5px solid var(--hair-light);
  border-radius: 16px;
  background: rgba(10, 10, 10, 0.6);
  color: var(--white);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.join-opt:hover, .join-opt:focus-visible { border-color: var(--yellow); background: rgba(10, 10, 10, 0.74); }
/* a small "or" between Get and Rent */
.join-or { color: rgba(250, 250, 250, 0.82); font-size: 1.125rem; font-weight: 600; line-height: 1; text-align: center; padding: 0 4px; }
.join-opt:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.join-name { display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 700; font-size: 2.1rem; line-height: 1.15; letter-spacing: -0.01em; }
.join-ico { display: inline-flex; flex-shrink: 0; }
.join-ico svg { width: 1.1em; height: 1.1em; fill: none; stroke: var(--yellow); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* the calendar fills its whole square, the bag is narrower: shrink the calendar so they look the same size */
.join-ico.cal svg { transform: scale(0.84); }
.join-sub { font-size: 1rem; line-height: 1.5; color: rgba(250, 250, 250, 0.82); }
.join-arrow { position: absolute; right: 28px; top: 50%; width: 24px; height: 24px; margin-top: -12px; fill: none; stroke: var(--yellow); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease); }
.join-opt:hover .join-arrow, .join-opt:focus-visible .join-arrow { transform: translateX(4px); }
/* under the two buttons, "Learn more" to the story page */
/* a quiet text link, not a button (Jakov, 2026-10-15): white with a line under it, the line turns yellow on hover */
.join-list + .join-more { margin-top: 32px; }
.join-more { text-align: center; }
.join-more a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 4px; color: var(--white); font-weight: 600; font-size: 1.1rem;
  text-shadow: 0 1px 6px rgba(10, 10, 10, 0.55); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: rgba(255, 255, 255, 0.6); transition: text-decoration-color 0.2s var(--ease); }
.join-more a:hover, .join-more a:focus-visible { text-decoration-color: var(--yellow); }
.join-more a:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.join-more .join-arrow { position: static; margin: 0; width: 18px; height: 18px; }
.join-more a:hover .join-arrow, .join-more a:focus-visible .join-arrow { transform: translateX(4px); }
/* the client section, a white sheet under the banner: what every rider gets, each
   feature a light card whose icon draws itself when the rider hovers or focuses it;
   the cards rise in only on arrival from the home banner button (the same view
   transition as the buttons) */
.client-sec { padding-block: clamp(72px, 8vw, 112px); }
.client-sec .section-head { max-width: 36em; margin: 0 auto clamp(40px, 4vw, 56px); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.client-sec .section-head h2 { margin: 0; }
.client-feats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.client-feat { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 24px; border-radius: 16px; border: 1.5px solid var(--hair); background: var(--white); color: var(--ink); text-decoration: none; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.client-feat:hover, .client-feat:focus-visible { border-color: var(--mustard); }
.client-feat:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.client-feat strong { font-size: 1.05rem; line-height: 1.25; }
.client-feat span:last-child { font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); }
.client-ico { display: inline-flex; margin-bottom: 16px; }
.client-ico svg { width: 36px; height: 36px; fill: none; stroke: var(--mustard); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.client-cta { margin: clamp(40px, 4vw, 56px) 0 0; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes client-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .client-ico path, .client-ico rect { stroke-dasharray: 1; stroke-dashoffset: 0; }
  .client-feat:hover .client-ico path, .client-feat:hover .client-ico rect,
  .client-feat:focus-visible .client-ico path, .client-feat:focus-visible .client-ico rect { animation: client-draw 0.7s var(--ease) both; }
  html:active-view-transition .join-more { animation: join-rise 0.45s var(--ease) both; animation-delay: 0.35s; }
  html:active-view-transition .client-box { animation: join-rise 0.45s var(--ease) both; animation-delay: 0.45s; }
  html:active-view-transition .client-feats li { animation: join-rise 0.45s var(--ease) both; animation-delay: calc(0.6s + var(--i) * 0.06s); }
}
@media (prefers-reduced-motion: reduce) { .client-feat { transition: none; } }
/* the client portal's "Need help now?" line */
.join-client { margin: clamp(28px, 5vh, 48px) 0 0; text-align: center; color: rgba(250, 250, 250, 0.88); font-size: 1.05rem; }
.join-client a { color: var(--white); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.join-client a:hover { text-decoration-color: var(--yellow); }
/* client portal: the app's download button shows, but stays off until the app is out */
.client-page .lead { margin: 24px auto 0; text-align: center; }
.btn-soon { background: rgba(10, 10, 10, 0.62); color: var(--white); border: 1.5px solid var(--hair-light); cursor: not-allowed; gap: 12px; width: auto; white-space: nowrap; padding-inline: 28px; }
.btn-soon:hover, .btn-soon:active { transform: none; }
.soon-tag { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: var(--r-btn); background: var(--white); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes join-rise { from { opacity: 0; transform: translateY(18px); } }
  html:active-view-transition .join-list li { animation: join-rise 0.45s var(--ease) both; animation-delay: calc(0.2s + var(--i) * 0.05s); }
}
@media (prefers-reduced-motion: reduce) { .join-opt, .join-arrow { transition: none; } }
@media (max-width: 960px) {
  .join-list { grid-template-columns: 1fr; gap: 8px; }
  .client-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .join-opt { min-height: 0; padding: 20px 56px 20px 20px; gap: 6px; }
  .join-arrow { right: 20px; }
  .join-name { font-size: 1.7rem; }
  .join-or { padding: 4px 0; font-size: 1rem; }
  .join-list + .join-more { margin-top: 24px; }
}
@media (max-width: 560px) {
  .client-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .client-feats li:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* no lone card in the last row */
  .client-feat { padding: 20px 16px; }
  .client-ico { margin-bottom: 12px; }
}

/* ================================================================
   Story page (/story/): the whole Pinge story behind "Learn more" on /join/.
   Clicking that button (and only then), a yellow circle with the logo bolt bursts
   out of it (script.js); the story page opens under the yellow (html.story-arrive,
   set in its head), which fades while the bolt behind the headline draws itself and
   the words rise in, once. Reduced motion: none of it.
   ================================================================ */
.story-hero { overflow: hidden; }
.story-hero .hero-copy { width: min(100%, 1040px); }
.hero-video .story-title { font-size: clamp(2.4rem, 7vw, 6rem); line-height: 1.04; max-width: 13em; margin: 0 auto; text-wrap: balance; }
.story-hero .kicker { margin: 0 0 20px; }
.story-hero .lead { max-width: 36em; margin: clamp(20px, 3vh, 32px) auto 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); text-wrap: pretty; }
/* the logo bolt, drawn as a yellow outline behind the headline */
.story-bolt { position: absolute; left: 50%; top: 54%; z-index: -1; width: min(92vw, 760px); transform: translate(-50%, -50%); pointer-events: none;
  fill: none; stroke: var(--yellow); stroke-width: 4; stroke-linejoin: round; opacity: 0.8; }
/* chapter links */
.story-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(32px, 5vh, 56px); }
.story-nav a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px; border-radius: var(--r-btn); border: 1.5px solid var(--hair-light);
  background: rgba(10, 10, 10, 0.55); color: var(--white); font-weight: 600; font-size: 1rem; text-decoration: none; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.story-nav a span { color: var(--yellow); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; }
.story-nav a:hover, .story-nav a:focus-visible { border-color: var(--yellow); background: rgba(10, 10, 10, 0.75); }
.story-nav a:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.story-chap { scroll-margin-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) { html:has(.story-hero) { scroll-behavior: smooth; } }

/* each chapter opens with a big outlined number beside its kicker and heading */
.story-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(16px, 2.4vw, 32px); align-items: start; max-width: 46em; margin: 0 0 clamp(40px, 4.5vw, 64px); }
.story-head h2 { margin: 0; }
.story-head .lead { margin: 16px 0 0; }
.story-n { font-size: clamp(3.2rem, 7vw, 6rem); font-weight: 700; line-height: 0.82; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--ink); font-variant-numeric: tabular-nums; }
.story-chap .eco-head { max-width: none; }

/* 01 why: mission and vision as two big quotes */
.story-quote { margin: 0; padding-top: 24px; border-top: 2px solid var(--ink); }
.story-quote figcaption { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; }
.story-quote .quote { max-width: none; font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.2; }
/* 02 what we do */
.story-ico { display: inline-flex; margin-bottom: 16px; }
.story-ico svg { width: 40px; height: 40px; fill: none; stroke: var(--mustard); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.story-do h3, .story-pillar h3, .story-city h3 { margin: 0 0 8px; }
/* 03 the products: a tall photo tile on top of each */
.story-shot { aspect-ratio: 4 / 5; margin: 0 0 20px; border-radius: var(--r); overflow: hidden; background: var(--tile); }
.story-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-shot.is-soon { display: grid; place-items: center; }
.story-shot.is-soon svg { width: 60%; fill: none; stroke: var(--mustard); stroke-width: 6; stroke-linejoin: round; }
.story-product { border-top: 0; padding-top: 0; }
.story-product .tag { margin-bottom: 12px; }
.story-all { margin-top: clamp(40px, 4vw, 56px); }
/* 05 the four pillars */
.story-pillars { row-gap: clamp(40px, 4vw, 56px); }
.story-tag { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.story-tag span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-size: 0.85rem; letter-spacing: 0; }
/* 06 three cities: a dot on the line above each */
.story-city { position: relative; padding-top: 32px; }
.story-city::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--ink); }
/* the end: Get and Rent once more */
.story-end { text-align: center; }
.story-end h2 { margin: 0; }
.story-end .lead { margin: 16px auto 0; }
.story-end .btn-row { margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 960px) {
  .story-head { grid-template-columns: 1fr; }
  .story-n { margin-bottom: 12px; }
  .story-bolt { top: 50%; opacity: 0.6; }
}

/* "Learn more": the burst on /join/, then the fade on /story/ */
.story-wipe { display: none; position: fixed; inset: 0; z-index: 1000; place-items: center; background: var(--yellow); pointer-events: none; }
.story-wipe svg { width: min(28vmin, 220px); fill: var(--black); }
@media (prefers-reduced-motion: no-preference) {
  .story-wipe.is-bursting { display: grid; animation: story-burst 0.62s cubic-bezier(0.7, 0, 0.2, 1) both; }
  .story-wipe.is-bursting svg { animation: story-pop 0.62s cubic-bezier(0.3, 1.4, 0.5, 1) 0.12s both; }
  @keyframes story-burst {
    from { clip-path: circle(0 at var(--burst-x, 50%) var(--burst-y, 70%)); }
    to { clip-path: circle(150vmax at var(--burst-x, 50%) var(--burst-y, 70%)); }
  }
  @keyframes story-pop { from { transform: scale(0.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
  html.story-arrive .story-wipe { display: grid; animation: story-out 0.6s var(--ease) 0.15s both; }
  @keyframes story-out { to { opacity: 0; visibility: hidden; } }
  @keyframes story-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  html.story-arrive .story-bolt path { stroke-dasharray: 1; animation: story-draw 1.4s var(--ease) 0.3s both; }
  html.story-arrive .story-hero .kicker,
  html.story-arrive .story-title,
  html.story-arrive .story-hero .lead,
  html.story-arrive .story-nav a { animation: join-rise 0.6s var(--ease) both; }
  html.story-arrive .story-hero .kicker { animation-delay: 0.3s; }
  html.story-arrive .story-title { animation-delay: 0.38s; }
  html.story-arrive .story-hero .lead { animation-delay: 0.5s; }
  html.story-arrive .story-nav a { animation-delay: 0.6s; }
  html.story-arrive .story-nav a:nth-child(2) { animation-delay: 0.65s; }
  html.story-arrive .story-nav a:nth-child(3) { animation-delay: 0.7s; }
  html.story-arrive .story-nav a:nth-child(4) { animation-delay: 0.75s; }
  html.story-arrive .story-nav a:nth-child(5) { animation-delay: 0.8s; }
}

/* ================================================================
   Home: the ecosystem loop (#ecosystem)
   One vehicle, the logo bolt on a black puck, rides a concrete ring road
   through the five stations of the Pinge life cycle. Clicking a station, a
   step in the list or the arrow in the middle drives it there (script.js);
   the road it has ridden turns mustard. Ring on the left, steps on the
   right; on phones the ring sits above the steps.
   ================================================================ */
/* a section title on the wall above its white sheet, left-aligned like "What we make" */
.eco-head, .wall-head { padding-top: 0; margin: 0 0 clamp(32px, 4vw, 64px); max-width: none; text-align: left; }
.wall-head h2 { margin-bottom: 0; }
/* a split sheet whose left column ends in its button: the button sits in the space
   below the text, centred under it and lifted a little off the bottom */
.split.split-low { align-items: stretch; }
.split-low .split-intro { display: flex; flex-direction: column; max-width: 30em; }
.split-low .split-intro .btn-row { margin: 32px 0 0; padding: 0; justify-content: flex-start; }
.split-email { margin-top: 14px; font-size: 1.05rem; font-weight: 500; }
.split-email a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.split-email a:hover { text-decoration-color: var(--ink); }
.split-low .list { margin: 0; }
/* a hairline list whose rows are links: lines only between rows, the whole row is the
   link, and a carved-yellow chevron at the end slides a little on hover */
.list-links { border-top: 0; }
.list-links li { padding: 0; }
.list-links li:last-child { border-bottom: 0; }
.list-links a {
  display: block; position: relative;
  padding: clamp(7px, 1.2vh, 14px) 40px clamp(7px, 1.2vh, 14px) 0;
  color: inherit; text-decoration: none;
}
.list-links a::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px;
  border-right: 3px solid var(--mustard); border-top: 3px solid var(--mustard);
  transform: rotate(45deg); transition: transform 0.18s var(--ease);
}
.list-links a:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.list-links a:hover::after { transform: translateX(4px) rotate(45deg); }

.eco { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.eco-ring { position: relative; width: 100%; max-width: 540px; margin: 0 auto; }
.eco-svg { width: 100%; height: auto; display: block; }
.eco-road { fill: none; stroke: var(--tile); stroke-width: 28; }
.eco-track { fill: none; stroke: rgba(10, 10, 10, 0.2); stroke-width: 2; stroke-dasharray: 12 16; }
/* the stretch already ridden: a mustard dash along the road, its length set in script.js (0 to 1) */
.eco-done { fill: none; stroke: var(--mustard); stroke-width: 28; stroke-dasharray: 0 1; stroke-linecap: butt; }
.eco-hit { fill: transparent; }
.eco-dot { fill: var(--white); stroke: var(--ink); stroke-width: 3; transition: transform 0.18s var(--ease); transform-box: fill-box; transform-origin: center; }
.eco-n { font: 500 24px var(--font); fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.eco-station { cursor: pointer; }
.eco-station:hover .eco-dot { transform: scale(1.1); }
.eco-station.is-on .eco-dot { fill: var(--yellow); }
/* the vehicle: the logo bolt on a concrete-grey puck (Jakov found black too heavy, 2026-10-08) */
.eco-puck circle { fill: #555555; }   /* between concrete grey and black: grey was too light, black too heavy */
.eco-puck path { fill: var(--yellow); }
.eco-puck.is-moving circle { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }

/* the middle of the ring: which step we are on, its title, and the arrow that drives on */
.eco-centre {
  position: absolute; left: 50%; top: 50%; width: 56%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
.eco-centre-k { font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
.eco-centre-i { display: inline-block; min-width: 1.1em; text-align: right; }
.eco-centre-t { display: block; font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); }
/* the drive-on arrow: a white button with an ink ring, so it reads as the thing to press */
.offer-arrow.eco-next { margin-top: 12px; width: 60px; height: 60px; background: var(--btn-fill); color: var(--white); border: 2.5px solid var(--yellow); }
.offer-arrow.eco-next:hover { background: var(--btn-fill); color: var(--white); }
.offer-arrow.eco-next svg { width: 28px; height: 28px; stroke-width: 3; }
.eco-hint { margin: 12px 0 0; text-align: center; font-size: 0.95rem; color: var(--ink-2); }

/* the five steps as a list of buttons; the one the vehicle is at carries a yellow number */
.eco-steps { list-style: none; margin: 0; }
.eco-item + .eco-item { border-top: 1px solid var(--hair); }
.eco-btn {
  display: flex; gap: 18px; align-items: flex-start; width: 100%;
  padding: clamp(10px, 1.6vh, 18px) 8px clamp(10px, 1.6vh, 18px) 0;
  border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  border-radius: 12px;
}
.eco-num {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--white);
  font-weight: 500; font-size: 1rem; line-height: 1;
  transition: transform 0.18s var(--ease);
}
.eco-body { display: block; min-width: 0; padding-top: 6px; }
.eco-body strong { display: block; font-size: clamp(1.1rem, 1.4vw, 1.3rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 4px; }
.eco-body span { display: block; color: var(--ink-2); font-size: clamp(0.95rem, 1.7vh, 1.05rem); line-height: 1.4; }
.eco-btn:hover .eco-num { transform: scale(1.08); }
.eco-btn:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.eco-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.eco-item.is-on .eco-num { background: var(--ink); color: var(--white); }
.eco-item:not(.is-on) .eco-body strong { color: var(--ink-2); }

@media (max-width: 960px) {
  .eco { grid-template-columns: 1fr; gap: 12px; }
  .eco-ring { max-width: 400px; }
  .eco-centre-t { font-size: 1.3rem; }
  .eco-btn { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-dot, .eco-num { transition: none; }
}

/* ================================================================
   Home: the products rail (#products) and the services rail (#services)
   Tall photo tiles side by side, in the format of Bolt's "Our products and
   services". Since 2026-10-14 everything sits inside the photo: the tag, title
   and one line at the top, the painted button at the bottom, a soft scrim behind
   each so the words read on any photo. Three fit on a laptop; the rest scroll
   sideways (snap, arrows wired in script.js, hidden when every tile fits).
   The wall stays visible on both sides.
   ================================================================ */
.offer-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 0; margin-bottom: clamp(24px, 3vw, 48px); }
.offer-head { margin: 0; text-align: left; }
.offer-head h2 { margin-bottom: 0; }
.offer-nav { display: flex; gap: 10px; flex-shrink: 0; padding-bottom: 6px; }
.offer-nav[hidden] { display: none; }
.offer-arrow {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.2s ease;
}
.offer-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.offer-arrow:hover { background: var(--ink); color: var(--white); }
.offer-arrow[disabled] { opacity: 0.3; cursor: default; background: transparent; color: var(--ink); }

/* the rail's first card lines up with the container's left edge; the row then runs off the right */
.offer-rail-wrap { --offer-edge: max(var(--gutter), calc((100% - 1280px) / 2 + var(--gutter))); }
.offer-rail {
  list-style: none; margin: 0;
  display: flex; gap: clamp(16px, 2vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0 var(--offer-edge) 8px;
  scroll-padding-inline: var(--offer-edge);
  scrollbar-width: none;
}
.offer-rail::-webkit-scrollbar { display: none; }
/* the tile is the card: a 2:3 photo (the product shots' own shape) with the words laid over it */
.offer-card {
  position: relative; isolation: isolate;
  flex: 0 0 clamp(272px, calc((min(100vw, 1280px) - 2 * var(--gutter) - 2 * clamp(16px, 2vw, 24px)) / 3), 400px);
  aspect-ratio: 2 / 3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(20px, 2vw, 28px);
  border-radius: var(--r); background: var(--tile); overflow: hidden;
  color: var(--ink);
  scroll-snap-align: start;
}
.offer-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.offer-card .tag { margin: 0 0 14px; background: rgba(255, 255, 255, 0.72); border-color: rgba(10, 10, 10, 0.25); }
.offer-card h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-bottom: 8px; }
.offer-card p { color: var(--ink-2); font-size: 1rem; line-height: 1.5; margin: 0; max-width: 20em; }
.offer-card .btn-row { position: relative; z-index: 1; margin-top: 24px; padding-top: 0; }
.offer-art { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.offer-art svg, .offer-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.offer-art svg { padding: 12%; }
.offer-art.offer-photo img { object-fit: cover; object-position: center center; }
.offer-card.offer-dark .offer-art.offer-photo img { object-position: center 45%; }
.offer-card.offer-light .offer-art.offer-photo img { object-position: 46% center; }
.offer-card .offer-art svg text { fill: var(--grey); }
/* services with no photo: their menu icon, large and mustard, in the lower half of the grey tile */
.offer-art .offer-icon svg { inset: auto; left: 50%; top: 62%; width: 46%; height: auto; padding: 0; transform: translate(-50%, -50%);
  fill: none; stroke: var(--mustard); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
/* the scrim: a soft wash at the top under the words and at the bottom under the button */
.offer-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 34%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 24%);
}
/* a busy, bright photo (the repair bench): a heavier white wash so black words still read */
.offer-card.offer-light .offer-art::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 42%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 30%);
}
/* a dark photo (the Old Town rental): white words on a dark wash */
.offer-card.offer-dark, .offer-card.offer-dark h3 { color: var(--white); }
.offer-card.offer-dark p { color: rgba(255, 255, 255, 0.86); }
.offer-card.offer-dark .tag { background: rgba(10, 10, 10, 0.45); border-color: rgba(255, 255, 255, 0.55); color: var(--white); }
.offer-card.offer-dark .offer-art::after {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.6) 38%, rgba(10, 10, 10, 0) 58%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 28%);
}

@media (max-width: 960px) {
  .offer-head-row { align-items: flex-end; }
  .offer-card { flex-basis: min(72vw, 360px); }
}
@media (max-width: 560px) {
  .offer-head-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .offer-nav { padding-bottom: 0; }
  .offer-card { flex-basis: 78vw; }
}
@media (prefers-reduced-motion: reduce) {
  .offer-rail { scroll-behavior: auto; }
  .offer-arrow { transition: none; }
}

/* ================================================================
   Home: the film under the services rail (#film)
   One 16:9 player running from screen edge to screen edge (Jakov, 2026-10-08):
   the one surface on the site that is allowed to cover the wall side to side.
   ================================================================ */
.container.film { width: 100%; max-width: none; padding: 0; }
/* the video runs straight into the band below it: no strip of page grey under it (Jakov, 2026-10-15) */
#film { padding-bottom: 0; border-top: 0; }   /* and no hairline above it, under the services rail */
.film-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--black); }
.film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* until cookie consent the film frame holds only this button (script.js removes it on consent) */
.film-frame .film-consent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 32px); }

/* ---------- Rent page (/rent/) ---------- */
.rent-form { max-width: 640px; margin: 0 auto; }
.rent-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(12px, 2vh, 24px); min-width: 0; }
.rent-form fieldset[hidden] { display: none; }
/* Booking buttons: the same size as the home banner's "Join the movement", centred under the fields, on phones too. */
.rent-form .btn { width: auto; min-height: 60px; padding: 12px 34px; font-size: 1.35rem; }
@media (max-width: 560px) { .rent-form .btn { padding: 12px 26px; font-size: 1.05rem; white-space: nowrap; } }
.rent-form [data-next] { align-self: center; min-width: 200px; margin-top: clamp(16px, 3vh, 32px); }
/* phones: the Book button gets bigger words and a tighter box */
@media (max-width: 560px) { .rent-form [data-next] { font-size: 1.3rem; padding: 8px 20px; min-width: 160px; } }
.rent-form .btn-row { flex-direction: row; justify-content: center; margin-top: clamp(16px, 3vh, 32px); }
/* Back is the quiet one: no fill and no yellow ring, a dark outline and an arrow, so "Check availability" leads */
.rent-form .btn-back { background: transparent; color: var(--ink); border-color: rgba(10, 10, 10, 0.32); padding-left: 24px; padding-right: 28px; gap: 8px; }
.rent-form .btn-back:hover { border-color: var(--ink); }
.rent-form .btn-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rent-form input, .rent-form select, .rent-form textarea { border-radius: 28px; }
/* About the scooter: the eTricycle 2 unfolded and folded, side by side (stacked on phones) */
.scooter-shots { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 24px); margin: 0 0 clamp(32px, 4vw, 56px); padding-top: clamp(24px, 3vw, 40px); }
.scooter-shots figure { margin: 0; border-radius: 24px; overflow: hidden; background: var(--white); }
.scooter-shots img { display: block; width: 100%; height: auto; }
.scooter-shots figcaption { padding: 12px 20px 16px; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); }
@media (max-width: 560px) { .scooter-shots { grid-template-columns: 1fr; } }
/* Available destinations: a row of portrait photo cards. The arrows step one card, a mouse can grab
   and drag the row, and touch and trackpads scroll it natively (script.js, [data-rail]). */
.dest { --dest-edge: max(var(--gutter), calc((100% - 1280px) / 2 + var(--gutter))); margin-top: clamp(40px, 5vw, 72px); }
.dest-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 2vw, 24px); }
.dest-head h3 { margin: 0; }
.dest-nav { display: flex; gap: 10px; }
.dest-nav[hidden] { display: none; }
.dest-rail {
  list-style: none; margin: 0; display: flex; gap: clamp(12px, 1.6vw, 20px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 4px var(--dest-edge) 12px; scroll-padding-inline: var(--dest-edge);
  scrollbar-width: none; cursor: grab;
}
.dest-rail::-webkit-scrollbar { display: none; }
.dest-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.dest-rail:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }
.dest-card { flex: 0 0 clamp(200px, 22vw, 280px); scroll-snap-align: start; }
.dest-card > a, .dest-card > div {
  position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 24px; overflow: hidden;
  background: var(--tile); color: var(--white); text-decoration: none; isolation: isolate;
}
.dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.4s var(--ease); -webkit-user-drag: none; }
/* a dark wash at the bottom so the white names read on any photo */
.dest-card > a::after, .dest-card > div::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.3) 32%, rgba(10, 10, 10, 0) 55%); }
.dest-copy { position: absolute; left: 20px; right: 56px; bottom: 18px; display: flex; flex-direction: column; gap: 2px; }
.dest-city { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.dest-country { font-size: 0.95rem; color: rgba(255, 255, 255, 0.88); }
.dest-go { position: absolute; right: 16px; bottom: 18px; width: 36px; height: 36px; padding: 8px; border-radius: 50%; border: 2px solid var(--yellow); background: rgba(10, 10, 10, 0.5); fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dest-card a:hover img, .dest-card a:focus-visible img { transform: scale(1.04); }
.dest-card a:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .dest-card img { transition: none; } .dest-card a:hover img, .dest-card a:focus-visible img { transform: none; } }
.dest .rent-anywhere { margin-top: clamp(20px, 2.4vw, 32px); }
/* Concrete bands (build.py concrete_bands): sections that are only words sit on the same pinned concrete
   as the header and footer, so the grey pages get a break. Text goes full ink to stay readable on it. */
.panel.band-concrete { background: var(--concrete) var(--texture) center / cover no-repeat fixed; border-top: 0; }
.band-concrete + .panel { border-top: 0; }
/* secondary grey one step darker on the concrete, so small text keeps AA contrast on its darker patches */
.band-concrete { --ink-2: #474747; --ink-soft: #474747; }
.band-concrete h2, .band-concrete .lead { color: var(--ink); }
.band-concrete .lead + .lead { margin-top: 1em; }
.band-concrete li { border-color: rgba(10, 10, 10, 0.18); }
.rent-anywhere { margin: 24px 0 0; max-width: 32em; font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); }
.rent-anywhere a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.review { margin: 0; }
.review .stars { display: block; color: var(--ink); font-size: 1.05rem; letter-spacing: 0.08em; line-height: 1.3; margin-top: 4px; }
/* a half star: the left half in ink, the right half faded, like the empty stars */
.review .stars .star-half { background: linear-gradient(90deg, var(--ink) 50%, rgba(10, 10, 10, 0.22) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.review .stars span { color: var(--ink); }   /* beats the grey for text in the caption */
.review .stars .star-off { color: rgba(10, 10, 10, 0.22); }
.review blockquote { margin: 0 0 16px; }
.review figcaption { margin-top: auto; display: flex; align-items: flex-start; gap: 14px; }
.review-face { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--tile); }
.review-who { display: flex; flex-direction: column; min-width: 0; }
.review figcaption strong { display: block; font-size: 1.1rem; }
.review figcaption span { color: var(--ink-soft); font-size: 0.95rem; }
.spec-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) { .spec-5 { grid-template-columns: 1fr 1fr; } }

/* ================================================================
   News and blog (/news/, /blog/): article body on one white sheet,
   a readable column of about 68 characters, same type as the rest.
   ================================================================ */
.container.prose { max-width: 920px; }
.container.prose > * { max-width: 40rem; margin-left: auto; margin-right: auto; }   /* one column width for text, headings and lists */
.prose p, .prose li { color: var(--ink); font-size: 1.1rem; line-height: 1.65; }
.container.prose > h2 { font-size: clamp(1.6rem, min(3.2vw, 3.6vh), 2.4rem); margin: 1.4em auto 0.4em; }
.container.prose > h3 { font-size: clamp(1.25rem, min(2.2vw, 2.6vh), 1.6rem); margin: 1.2em auto 0.3em; }
.container.prose > h2:first-child, .container.prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--ink); }
.prose a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.prose blockquote { border-left: 2px solid var(--ink); padding: 0.2em 0 0.2em 1em; margin: 1.2em auto; }
.prose figure { margin: 1.6em auto; max-width: 100%; }
.prose img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.prose figcaption { font-size: 0.95rem; color: var(--ink-soft); margin-top: 8px; }
.prose .sources { border-top: 1px solid var(--hair); padding-top: 1em; margin-top: 2em; }
.prose .sources p, .prose .sources li { font-size: 1rem; }
.post-meta { font-size: 1.05rem; color: var(--ink-soft); margin: 0.6em 0 0; }
.post-meta time { font-weight: 500; }
.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.post-card .tag { margin-bottom: 12px; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; }   /* whole card is the link */
.post-card { position: relative; }
.post-card .date { margin: 0 0 10px; }
@media (max-width: 960px) { .post-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .post-list { grid-template-columns: 1fr; } }

/* ================================================================
   Fleet solutions (/services/fleet-solutions/): the loop-road scene.
   Three vehicles drive the road (SVG animateMotion, one lap in 18 s);
   each station's ring pulses every 6 s, timed to when a vehicle passes.
   Reduced motion: the moving vehicles are hidden and a still set shown.
   ================================================================ */
.fleet-scene { text-align: center; }
.fleet-svg { width: 100%; max-width: 980px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.fleet-road { fill: none; stroke: var(--tile); stroke-width: 34; }
.fleet-track { fill: none; stroke: rgba(10, 10, 10, 0.3); stroke-width: 2; stroke-dasharray: 12 16; }
.fleet-depot rect { fill: var(--white); stroke: var(--ink); stroke-width: 3; }
.fleet-depot path { fill: var(--mustard); stroke: var(--ink); stroke-width: 24; stroke-linejoin: round; }
.fleet-depot-t { font: 700 30px var(--font); fill: var(--ink); letter-spacing: -0.02em; }
.fleet-depot-s { font: 500 20px var(--font); fill: var(--ink-soft); }
.fleet-stem { stroke: var(--hair); stroke-width: 2; }
.fleet-mark { fill: var(--mustard); stroke: var(--ink); stroke-width: 3; }
.fleet-pulse { fill: none; stroke: var(--mustard); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: fleet-pulse 6s linear infinite; }
@keyframes fleet-pulse { 0% { opacity: 0.9; transform: scale(1); } 18% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; transform: scale(2.6); } }
.fleet-dot { fill: var(--white); stroke: var(--ink); stroke-width: 3; transition: transform 0.18s var(--ease); transform-box: fill-box; transform-origin: center; }
.fleet-ico { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.fleet-label { font: 600 21px var(--font); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.fleet-station { cursor: pointer; }
.fleet-station:hover .fleet-dot, .fleet-station:focus-visible .fleet-dot { transform: scale(1.12); fill: var(--mustard); }
.fleet-station:focus-visible { outline: none; }
.fleet-station:focus-visible .fleet-dot { stroke-width: 5; }
.fleet-puck circle { fill: var(--black); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3)); }
.fleet-puck path { fill: var(--yellow); }
.fleet-still { display: none; }
.fleet-caption { max-width: 40rem; margin: clamp(12px, 2vh, 24px) auto 0; color: var(--ink-2); font-size: 1.05rem; }
.fleet-card-ico { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px;
  padding: 8px; border-radius: 50%; background: rgba(204, 156, 36, 0.18); box-sizing: content-box; }
@media (max-width: 640px) {
  .fleet-label { font-size: 26px; }
  .fleet-depot-s { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fleet-moving { display: none; }
  .fleet-still { display: inline; }
  .fleet-pulse { animation: none; }
}
@media (max-width: 480px) { .fleet-label { display: none; } }   /* the cards below carry the names */

/* ================================================================
   Resources: /news/ and /blog/ indexes in the magazine layout
   (after sqwiki.com/magazine). Hero sits left-aligned on the wall,
   a still row of section lines, topic chips, a wide featured card.
   ================================================================ */
.mag-hero { padding: clamp(40px, 7vh, 110px) 0 clamp(8px, 2vh, 24px); }
.mag-hero .container { max-width: 1280px; }
.mag-hero .crumbs { margin-bottom: clamp(12px, 2.4vh, 28px); }
.mag-hero h1 { font-size: clamp(2.8rem, min(8vw, 9vh), 6.4rem); line-height: 0.98; letter-spacing: -0.035em; max-width: 12em; margin: 0.15em 0 0; }
.mag-hero .lead { margin: clamp(14px, 2.4vh, 28px) 0 0; max-width: 34em; }
.mag-hero .lead a { font-weight: 500; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.mag-strip { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin: clamp(28px, 5vh, 56px) 0 0; padding: 14px var(--gutter);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); white-space: nowrap; }
.mag-strip::-webkit-scrollbar { display: none; }
.mag-strip li { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); flex-shrink: 0; }
.mag-strip li + li::before { content: "/"; color: var(--mustard); font-weight: 500; margin: 0 1.1em; }
.mag-list { padding-top: clamp(20px, 3vh, 36px); }
.mag-list > .container { max-width: 1280px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(20px, 3.4vh, 36px); }
.chip { font: 500 0.95rem var(--font); color: var(--ink); background: transparent; border: 1px solid var(--hair); border-radius: 999px; padding: 10px 18px;
  cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.post-empty { text-align: center; color: var(--ink-sheet); font-size: 1.15rem; padding: clamp(24px, 6vh, 64px) 0; }
.post-empty a { font-weight: 500; }

.post-card .post-body { display: flex; flex-direction: column; flex: 1; }
.post-card .post-body > p:not(.date) { margin-bottom: 14px; }
.post-card .date { margin: auto 0 0; font-size: 0.95rem; }
.post-card.has-img { padding: 0; border-top: 0; }
.post-card.has-img .post-body { padding: 20px 0 0; }
.post-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); background: var(--tile); }
.post-card[hidden] { display: none; }
.post-feature-wrap { margin-bottom: 24px; }
.post-featured { padding: 0 0 clamp(32px, 4vw, 56px); border-top: 0; border-bottom: 1px solid var(--hair); }
.post-featured h2 { font-size: clamp(1.9rem, min(4.4vw, 5vh), 3.4rem); line-height: 1.05; max-width: 18em; margin: 0 0 0.35em; }
.post-featured h2 a { text-decoration: none; }
.post-featured h2 a::after { content: ""; position: absolute; inset: 0; }
.post-featured .post-body > p:not(.date) { font-size: clamp(1.05rem, 2vh, 1.25rem); max-width: 36em; }
.post-featured.has-img { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; }
.post-featured.has-img .post-body { padding-top: 0; }
.post-featured.has-img .post-img img { height: 100%; aspect-ratio: auto; }
@media (max-width: 960px) { .post-featured.has-img { grid-template-columns: 1fr; } }

/* article pages: tag, table of contents */
.post-meta .tag { margin: 0 8px 0 0; vertical-align: middle; }
.container.prose > .toc { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 18px 0; margin-bottom: 2em; }
.toc-title { font-size: 0.8rem !important; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.4em; }
.prose .toc ul { margin: 0; padding-left: 0; list-style: none; }
.toc li { font-size: 1.02rem !important; margin-bottom: 0.2em; }
.prose h2[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
/* the "All news" / "All guides" buttons sit well clear of the cards above them */
.post-list + .btn-row, .mag-list .post-list + .btn-row { margin-top: clamp(36px, 6vh, 72px); }

/* Home trial and test ride forms (build.py slot_form): the rent form with one day and a time.
   White fields on the grey page; beside the text in the test ride band. */
.form.slot-form input, .form.slot-form select { background-color: var(--white); border-color: var(--hair); }
.split .slot-form { width: 100%; margin: 0; position: relative; }
.split .slot-form .range { position: static; }
.split .slot-form .range-pop { top: 0; left: 50%; transform: translateX(-50%); width: min(100%, 400px); }
.rent-hero .crumbs { margin-bottom: 16px; }
@media (min-width: 900px) { .trial-hero .rent-sub { max-width: 42em; white-space: normal; } }

/* quiet links beside a lead paragraph, e.g. the two audiences on solutions.pinge.tech */
.split-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; font-size: 1.05rem; }
.split-links .text-link { color: inherit; border-bottom: 3px solid var(--yellow); }   /* black words, yellow underline (home B2B band) */
.split-links .text-link:hover { border-bottom-color: var(--mustard); }

/* ---------- eTricycle series (/products/etricycle/ and the three model pages, 2026-10-15) ---------- */
/* Banner selector: three tall model panels side by side. The panel under the pointer or keyboard
   focus widens (user-driven only, off with reduced motion); clicking a panel opens the model page. */
.hero.series-hero { padding: clamp(56px, 8vw, 120px) 0 clamp(72px, 8vw, 128px); }   /* room under the model panels before the next band */
.series-hero .lead { margin: clamp(20px, 2.4vw, 32px) 0 clamp(32px, 4vw, 56px); max-width: 34em; }
/* one line on desktop: the headline is about 17.5em wide, so the size follows the container width */
.series-hero h1 { font-size: clamp(2.2rem, calc((min(100vw, 1280px) - 2 * var(--gutter)) / 18), 4.4rem); max-width: none; }
.series-pick { list-style: none; display: flex; gap: clamp(12px, 1.6vw, 20px); height: clamp(480px, 68vh, 680px); }
.series-card { flex: 1 1 0; min-width: 0; transition: flex-grow 0.45s var(--ease); }
.series-pick .series-card:hover, .series-pick .series-card:focus-within { flex-grow: 1.6; }
.series-card a {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; padding: clamp(20px, 2.2vw, 32px); border-radius: var(--r); overflow: hidden;
  background: var(--tile); color: var(--ink); text-decoration: none;
}
.series-card a:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
.series-media { position: absolute; inset: 0; z-index: -1; }
.series-media img, .series-media svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.series-media img { object-fit: cover; object-position: center 72%; transition: transform 0.6s var(--ease); }
.series-card a:hover .series-media img, .series-card a:focus-visible .series-media img { transform: scale(1.04); }
.series-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0) 48%); }
.series-etricycle-3 .series-media { background: var(--concrete) var(--texture) center / 600px; }
.series-etricycle-3 .series-media svg { padding: 14% 10% 6%; }
.series-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.series-copy .tag { background: rgba(255, 255, 255, 0.78); border-color: rgba(10, 10, 10, 0.25); }
.series-etricycle-2 .series-copy .tag { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.series-name { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: -0.02em; }
.series-line { font-size: 1rem; line-height: 1.45; color: var(--ink); max-width: 18em; }
.series-go { align-self: flex-start; white-space: nowrap; }
@media (max-width: 960px) {
  .series-pick { flex-direction: column; height: auto; }
  .series-card, .series-pick .series-card:hover, .series-pick .series-card:focus-within { flex: none; }
  .series-card a { min-height: 440px; }
  .series-media img { object-position: center 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .series-card, .series-media img { transition: none; }
  .series-pick .series-card:hover, .series-pick .series-card:focus-within { flex-grow: 1; }
  .series-card a:hover .series-media img, .series-card a:focus-visible .series-media img { transform: none; }
}

/* Model switcher on top of each model page: a segmented control on a white tray. Each segment shows
   the model name over its status; the current model is a solid black pill with its status in yellow
   (yellow on black, never on white). On phones the tray spans the width, "All models" shrinks to its
   grid icon and the status line goes, so all four segments fit on a 375 px screen. */
.series-switch { display: flex; justify-content: center; margin: clamp(48px, 5vw, 72px) 0 0; }
.series-track {
  display: inline-flex; align-items: stretch; gap: 4px; max-width: 100%; padding: 6px;
  border-radius: 24px; background: var(--white);
  box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(10, 10, 10, 0.04), 0 12px 32px -12px rgba(10, 10, 10, 0.18);
}
.series-track a {
  position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 64px; padding: 10px 26px; border-radius: 18px; color: var(--ink); text-decoration: none; text-align: center;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.ss-name { font-size: 1.0625rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; }
.ss-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; color: var(--ink-2); white-space: nowrap; }
.series-track a:hover { background: var(--page); }
.series-track a:active { transform: scale(0.98); }
.series-track a[aria-current="page"] {
  background: var(--ink); color: var(--white);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 18px -6px rgba(10, 10, 10, 0.45);
}
.series-track a[aria-current="page"] .ss-tag { color: var(--yellow); }
.series-track a[aria-current="page"] .ss-tag::before {   /* a small yellow light next to the status */
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(254, 205, 7, 0.22);
}
.series-track a:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }
.series-track a[aria-current="page"]:focus-visible { outline-color: var(--yellow); }
.series-track .ss-all { flex-direction: row; gap: 10px; padding: 10px 22px; }
.ss-all-label { font-size: 1rem; font-weight: 500; white-space: nowrap; }
.ss-grid { width: 18px; height: 18px; fill: currentColor; opacity: 0.85; }
.ss-divider { flex: none; width: 1px; margin: 14px 4px; background: var(--hair); }
@media (max-width: 560px) {
  .series-switch { padding: 0 4px; }
  .series-track { display: flex; width: 100%; gap: 2px; padding: 5px; border-radius: 20px; }
  .series-track a { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 8px 6px; border-radius: 15px; }
  .series-track .ss-all { flex: 0 0 44px; padding: 8px 4px; }
  .ss-all-label, .ss-tag { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ss-name { font-size: 0.9rem; letter-spacing: -0.02em; }
  .ss-divider { margin: 12px 0; }
}
@media (prefers-reduced-motion: reduce) { .series-track a { transition: none; } .series-track a:active { transform: none; } }
.model-hero .feature { padding-top: clamp(32px, 4vw, 64px); }
.model-art { padding: 0; overflow: hidden; aspect-ratio: 4 / 3.4; background: #fff; }
.model-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.model-art svg { width: 100%; height: 100%; max-width: none; background: var(--concrete) var(--texture) center / 600px; padding: 4% 18%; }
.model-hero .price { margin-top: clamp(20px, 2.4vw, 32px); }

/* Ways to get one: icon, heading, text and a quiet link per card */
.ways { row-gap: 56px; }
#ways .section-head { max-width: 40rem; }
.way-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; background: var(--yellow); }
.way-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--black); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.way h3 { margin-bottom: 8px; }
.way .way-link { margin-top: auto; padding-top: 18px; color: var(--ink); font-size: 1.05rem; }
.way .way-link .text-link { color: var(--ink); }

/* Compare table: scrolls sideways on phones instead of squeezing */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 3px solid var(--black); outline-offset: 4px; }
.compare-table { min-width: 640px; }
.compare-table thead th a { color: var(--ink); font-size: 1.15rem; text-transform: none; letter-spacing: -0.01em; }
.compare-table td { font-weight: 400; }

/* ---------- HTML sitemap (/sitemap/) ---------- */
.sitemap { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 48px); align-items: start; }
.sitemap-group h2 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); padding-bottom: 12px; border-bottom: 1px solid var(--ink); display: flex; align-items: baseline; gap: 10px; }
.sitemap-count { font-size: 0.85rem; font-weight: 500; color: var(--ink-2); }
.sitemap-group ul { list-style: none; }
.sitemap-group li { border-bottom: 1px solid var(--hair); }
.sitemap-group a { display: flex; flex-direction: column; padding: 12px 0; color: var(--ink); text-decoration: none; line-height: 1.35; }
.sitemap-group a strong { font-weight: 500; font-size: 1rem; }
.sitemap-group a span { font-size: 0.85rem; color: var(--ink-2); overflow-wrap: anywhere; }
.sitemap-group a:hover strong { text-decoration: underline; text-decoration-color: var(--mustard); text-underline-offset: 4px; }
@media (max-width: 960px) { .sitemap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sitemap { grid-template-columns: 1fr; } }
.model-art img[src*="offer-etricycle-2r"] { object-fit: cover; object-position: center 74%; }

/* ---------- eTricycle 2 photos (2026-10-15) ---------- */
/* studio shots on white: the tile turns white and the photo fills it */
.feature-art.feature-photo { padding: 0; overflow: hidden; background: var(--white); aspect-ratio: 1293 / 1084; }
.feature-art.feature-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-art.card-photo { background: var(--white); border-radius: var(--r); overflow: hidden; }
.card-art.card-photo img { width: 100%; aspect-ratio: 1293 / 1084; object-fit: contain; display: block; }

/* Banner gallery on a model page: one photo per view, swipe or arrows, dots underneath */
.model-art:has(.model-gallery) { aspect-ratio: auto; background: none; overflow: visible; }
.model-hero .feature > * { min-width: 0; }   /* the photo strip must not widen its grid column */
.model-gallery { position: relative; width: 100%; min-width: 0; }
.mg-track {
  list-style: none; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--r); background: var(--white);
}
.mg-track::-webkit-scrollbar { display: none; }
.mg-track:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
.mg-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.mg-slide figure { margin: 0; }
.mg-slide img { width: 100%; aspect-ratio: 1293 / 1084; object-fit: contain; display: block; }
.mg-slide figcaption { padding: 0 20px 18px; font-size: 1rem; color: var(--ink-2); text-align: center; }
.mg-arrow {
  position: absolute; top: calc(50% - 44px); width: 52px; height: 52px; display: grid; place-items: center;
  border: 1.5px solid var(--hair); border-radius: 50%; background: rgba(255, 255, 255, 0.92); cursor: pointer;
  transition: opacity 0.2s var(--ease);
}
.mg-prev { left: 12px; }
.mg-next { right: 12px; }
.mg-arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-arrow:hover { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.mg-arrow:disabled { opacity: 0.35; cursor: default; }
.mg-arrow:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }
.mg-dots { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.mg-dot { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.mg-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); opacity: 0.45; }
.mg-dot[aria-current="true"]::before { width: 12px; height: 12px; background: var(--yellow); opacity: 1; box-shadow: 0 0 0 1.5px var(--ink); }
.mg-dot:focus-visible { outline: 3px solid var(--black); outline-offset: -4px; border-radius: 50%; }
@media (max-width: 560px) { .mg-arrow { width: 44px; height: 44px; top: calc(50% - 40px); } }
@media (prefers-reduced-motion: reduce) { .mg-arrow { transition: none; } }

/* ---------- About: mission and vision ---------- */
/* Two panels: mission in black, vision in white. The key phrase carries a yellow underline; under the
   pointer the underline grows into a full highlight, the panel lifts and its line drawing shifts.
   Motion only on hover, none with reduced motion. Yellow never sits under white text: on the black
   panel the highlighted phrase turns black. */
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.mv-panel {
  position: relative; overflow: hidden; margin: 0; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px);
  min-height: clamp(340px, 34vw, 460px); padding: clamp(28px, 4vw, 56px); border-radius: 28px;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.mv-mission { background: var(--ink); color: var(--white); }
.mv-vision { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--hair); }
.mv-label { display: flex; align-items: baseline; gap: 14px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mv-mission .mv-label { color: var(--yellow); }
.mv-vision .mv-label { color: var(--ink-2); }
.mv-n { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; opacity: 0.7; font-variant-numeric: tabular-nums; }
.mv-text {
  position: relative; z-index: 1; margin: auto 0 0; max-width: 20em;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem); font-weight: 500; line-height: 1.22; letter-spacing: -0.02em;
}
.mv-text mark {
  color: inherit; padding: 0 0.08em; margin: 0 -0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--yellow), var(--yellow)) left bottom / 100% 0.14em no-repeat;
  transition: background-size 0.5s var(--ease), color 0.3s var(--ease);
}
.mv-art {
  position: absolute; right: clamp(-28px, -2vw, -12px); top: clamp(-28px, -2vw, -12px); width: clamp(140px, 16vw, 220px); height: auto;
  fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.mv-mission .mv-art { stroke: var(--yellow); opacity: 0.35; }
.mv-vision .mv-art { stroke: var(--ink); opacity: 0.12; }
@media (hover: hover) {
  .mv-panel:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -28px rgba(10, 10, 10, 0.45); }
  .mv-vision:hover { box-shadow: 0 0 0 1px var(--hair), 0 28px 60px -28px rgba(10, 10, 10, 0.3); }
  .mv-panel:hover mark { background-size: 100% 100%; color: var(--black); }
  .mv-mission:hover .mv-art { transform: translate(-10px, 10px) rotate(-8deg) scale(1.06); opacity: 0.6; }
  .mv-vision:hover .mv-art { transform: translate(-10px, 8px) scale(1.06); opacity: 0.22; }
}
@media (max-width: 860px) {
  .mv { grid-template-columns: 1fr; }
  .mv-panel { min-height: 0; }
  .mv-text { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-panel, .mv-text mark, .mv-art { transition: none; }
  .mv-panel:hover, .mv-panel:hover .mv-art { transform: none; }
}

/* ---------- Day and time in one field (home trial, test ride) ---------- */
/* After a day is picked the hours show under the calendar in the same pop-up */
.range-times { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--hair); }
.range-times-label { margin: 0 0 10px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.range-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.range-slot {
  min-height: 48px; padding: 0 6px; border: 1.5px solid var(--hair); border-radius: 999px; background: var(--white);
  font: inherit; font-size: 0.95rem; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums;
}
.range-slot:hover { border-color: var(--ink-2); }
.range-slot[aria-pressed="true"] { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--white); font-weight: 700; box-shadow: inset 0 0 0 2.5px var(--yellow); }
.range-slot:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }
@media (max-width: 400px) { .range-slots { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Join page: four big buttons in a 2 × 2 grid (Buy now, Book a rental, Learn more, Try it for free) ---------- */
.join-list.join-four { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 16px; margin-top: clamp(48px, 8vh, 96px); }
.join-four .join-opt { height: 100%; min-height: 150px; padding: 28px 72px 28px 32px; gap: 10px; }
.join-four .join-name { justify-content: flex-start; font-size: clamp(1.6rem, 2.4vw, 2rem); }
@media (max-width: 960px) {
  .join-list.join-four { grid-template-columns: 1fr; gap: 10px; }
  .join-four .join-opt { min-height: 0; padding: 20px 56px 20px 20px; gap: 6px; }
  .join-four .join-name { font-size: 1.5rem; }
}

/* ---------- Join page: for organisations, under the client box ---------- */
/* two big white cards, For businesses and For governments; the icon and arrow answer the pointer */
.org-sec { padding-block: clamp(64px, 7vw, 104px); }
.org-head { max-width: 36em; margin: 0 auto clamp(32px, 4vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.org-head h2 { margin: 0; }
.org-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.org-card {
  position: relative; display: flex; align-items: center; gap: 24px; height: 100%;
  padding: clamp(24px, 3vw, 36px) 72px clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px);
  border-radius: 20px; border: 1.5px solid var(--hair); background: var(--white); color: var(--ink); text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.org-card:hover, .org-card:focus-visible { border-color: var(--mustard); box-shadow: 0 18px 40px -24px rgba(10, 10, 10, 0.35); }
.org-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.org-ico { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ink); }
.org-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.org-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.org-txt strong { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; }
.org-txt span { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.org-card .join-arrow { stroke: var(--ink); }
.org-card:hover .join-arrow, .org-card:focus-visible .join-arrow { transform: translateX(4px); }
@media (max-width: 760px) {
  .org-cards { grid-template-columns: 1fr; gap: 10px; }
  .org-card { gap: 16px; padding: 20px 56px 20px 20px; }
  .org-card .join-arrow { right: 20px; }
  .org-ico { width: 52px; height: 52px; }
  .org-ico svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .org-card { transition: none; } }

/* ---------- Client log in (/client/login/) ---------- */
/* a white card on the dark banner: name, password with a Show button, one big yellow button */
.login-card { width: min(100%, 440px); margin: clamp(28px, 5vh, 48px) auto 0; padding: clamp(24px, 4vw, 36px); border-radius: 20px; background: var(--white); color: var(--ink); text-align: left; gap: 20px; box-shadow: 0 24px 60px -28px rgba(10, 10, 10, 0.6); }
.login-pw { position: relative; display: block; }
.login-card .login-pw { font-size: inherit; text-transform: none; letter-spacing: normal; color: inherit; }
.login-pw input { width: 100%; padding-right: 92px; }
.login-show {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); min-height: 44px; min-width: 72px; padding: 0 14px;
  border: 0; border-radius: var(--r-btn); background: none; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hair);
}
.login-show:hover { text-decoration-color: var(--mustard); }
.login-show:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.login-card .btn { margin-top: 4px; }
.login-error { margin: 0; color: #B3261E; font-weight: 600; font-size: 1rem; }
.login-note { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--tile); font-size: 1rem; line-height: 1.5; border-left: 4px solid var(--yellow); }
.login-note:focus { outline: none; }
.login-back { display: inline-flex; align-items: center; gap: 8px; }
.login-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Client portal: "Get the app first" email sign-up ---------- */
/* a white card under the download button; the field and the button share one row, stacked on phones */
.notify-card { width: min(100%, 620px); margin: clamp(32px, 5vh, 48px) auto 0; padding: clamp(24px, 4vw, 36px); border-radius: 20px; background: var(--white); color: var(--ink); text-align: left; gap: 12px; box-shadow: 0 24px 60px -28px rgba(10, 10, 10, 0.6); }
.notify-title { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.2; letter-spacing: -0.01em; }
.notify-lead { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.notify-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 8px; }
.notify-row label { flex: 1 1 auto; min-width: 0; }
.notify-row .btn { flex: none; min-height: 56px; }
.notify-note { margin: 4px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
.notify-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .notify-row { flex-direction: column; align-items: stretch; }
  .notify-row .btn { width: 100%; }
}
/* the app's status at the top of the sign-up card: an app tile (black, yellow phone with the bolt),
   "Download the app" and "Coming soon" with a yellow dot. Plain text, not a dead button. */
.app-badge { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
.app-badge-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--ink); box-shadow: 0 6px 14px -6px rgba(10, 10, 10, 0.5); }
.app-badge-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-badge-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-badge-txt strong { font-size: 1.05rem; line-height: 1.3; }
.app-badge-soon { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 500; color: var(--ink-2); }
.app-badge-soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(254, 205, 7, 0.25); }
/* "Need help now?" sits between the Log in button and the card */
.client-help { margin-top: clamp(20px, 3vh, 28px); }
.client-help + .notify-card { margin-top: clamp(20px, 3vh, 28px); }

/* ---------- Banner pages (join, client portal, log in): more air ---------- */
/* Spacing grows with the screen height (vh) so every button still fits on the first screen at
   1440 x 900 and on a 375 x 812 phone. On desktop the client portal splits in two: title, Log in
   and help on the left, the app sign-up card on the right. */
.join-page .hero-copy { padding-block: clamp(32px, 7vh, 80px); }
.join-page .hero-copy > .lead, .client-intro > .lead { margin-top: clamp(16px, 2.6vh, 28px); line-height: 1.6; }
.join-page .hero-actions { margin-top: clamp(28px, 4.5vh, 48px); }
.client-help { margin-top: clamp(20px, 3.2vh, 32px); }

/* the sign-up card and the log in card: roomier inside */
.notify-card { gap: clamp(14px, 2vh, 20px); padding: clamp(28px, 4vw, 48px); border-radius: 24px; }
.app-badge { margin-bottom: clamp(4px, 1vh, 12px); padding-bottom: clamp(18px, 2.8vh, 28px); }
.notify-row { gap: 14px; margin-top: clamp(4px, 1vh, 12px); }
.login-card { gap: clamp(20px, 3vh, 28px); padding: clamp(28px, 4vw, 48px); border-radius: 24px; margin-top: clamp(32px, 5.5vh, 56px); }

/* join page: wider gaps between the four buttons */
.join-list.join-four { gap: clamp(16px, 2.4vh, 24px); margin-top: clamp(40px, 7vh, 80px); }
.join-four .join-opt { padding-block: clamp(26px, 3.6vh, 36px); gap: 12px; }

@media (min-width: 961px) {
  .client-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; gap: clamp(48px, 6vw, 112px); width: min(100%, 1180px); text-align: left; }
  .client-intro .join-title { margin: 0; width: auto; }
  .client-intro .btn-row.center { justify-content: flex-start; }
  .client-intro .client-help { text-align: left; }
  .client-split .notify-card { margin: 0; width: 100%; }
}
@media (max-width: 960px) {
  .client-split .notify-card { margin-top: clamp(32px, 5vh, 48px); }
  .join-list.join-four { gap: 12px; margin-top: clamp(32px, 5vh, 48px); }
  .join-four .join-opt { padding-block: 20px; gap: 8px; }
}
@media (max-width: 560px) {   /* phones: the four join buttons must fit under even the two-line Russian title */
  .join-page .hero-copy { padding-block: 24px 32px; }
  .join-list.join-four { gap: 12px; margin-top: 28px; }
  .join-four .join-opt { padding-block: 16px; gap: 6px; }
}
@media (min-width: 961px) { .client-intro > .lead { text-align: left; margin-left: 0; margin-right: 0; max-width: 30em; } }

/* ---------- Store: the models on sale as square tiles, then the comparison ---------- */
/* each tile is a square photo with the name and a Learn more button over its lower part; the tile
   size follows the screen height so both tiles sit on the first screen of a desktop (1440 x 900) */
.store-hero .hero-copy { padding-bottom: 0; }
.store-sec { padding-top: clamp(20px, 3vh, 36px); }
.store-tiles { --tile: min(100%, 56vh, 520px); display: grid; grid-template-columns: repeat(2, var(--tile)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.store-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 24px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.store-bg { position: absolute; inset: 0; }
.store-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; display: block; transition: transform 0.6s var(--ease); }
.store-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.62) 0%, rgba(10, 10, 10, 0) 32%); }   /* a dark fade under the name */
.store-name { position: absolute; z-index: 1; top: clamp(20px, 2.4vw, 32px); left: clamp(20px, 2.4vw, 32px); right: clamp(20px, 2.4vw, 32px); margin: 0;
  color: var(--white); font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; letter-spacing: -0.02em; text-shadow: 0 1px 12px rgba(10, 10, 10, 0.35); }
.store-over { position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; justify-content: flex-end; padding: clamp(20px, 2.4vw, 32px); }
.store-over .btn { flex: none; }
.store-tile:hover .store-bg img, .store-tile:focus-within .store-bg img { transform: scale(1.03); }
@media (max-width: 760px) {
  .store-tiles { --tile: 100%; grid-template-columns: 1fr; }
  .store-over { padding: 18px; }
  .store-name { top: 18px; left: 18px; font-size: 1.5rem; }
  .store-over .btn { width: auto; margin: 0; padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) { .store-bg img { transition: none; } .store-tile:hover .store-bg img, .store-tile:focus-within .store-bg img { transform: none; } }
/* the heading sits left like the rent page's, the tiles under it; no line between them */
.hero + .section.store-sec, .panel + .panel.store-sec { border-top: 0; }   /* beats the separator rule between panels */
.compare-table.compare-2 { min-width: 0; }   /* two models fit a phone without scrolling sideways */

/* Products dropdown: the online store as one button in the bottom-right corner, under both columns */
.mega-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: 6px; }
.mega a.mega-store, .mega a.mega-store:hover { display: inline-flex; width: auto; padding: 0 28px; min-height: 52px; border-radius: 999px; background: var(--btn-fill); color: var(--white); }
@media (max-width: 960px) { .mega-foot { justify-content: stretch; } .mega a.mega-store { width: 100%; justify-content: center; } }
@media (max-width: 960px) {   /* the phone menu turns links into white tiles; keep the store a real button with its yellow ring */
  .mega a.mega-store, .mega a.mega-store:hover, .mega a.mega-store:focus-visible { min-height: 60px; border: 2.5px solid var(--btn-ring); border-radius: 999px; background: var(--btn-fill); color: var(--white); }
}

/* ---------- Model page gallery: arrows that stand out on the white photos ---------- */
/* solid black circles with a white chevron and a soft shadow; on hover or focus they turn Pinge
   yellow with a black chevron; at either end of the gallery they fade back */
.mg-arrow {
  width: 56px; height: 56px; border: 0; background: var(--ink);
  box-shadow: 0 8px 20px -8px rgba(10, 10, 10, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.mg-arrow svg { width: 24px; height: 24px; stroke: var(--white); stroke-width: 2.5; }
.mg-arrow:hover:not(:disabled), .mg-arrow:focus-visible { background: var(--yellow); border: 0; box-shadow: 0 8px 20px -8px rgba(10, 10, 10, 0.45); transform: scale(1.06); }
.mg-arrow:hover:not(:disabled) svg, .mg-arrow:focus-visible svg { stroke: var(--black); }
.mg-arrow:disabled { opacity: 0.25; box-shadow: none; }
.mg-prev { left: 16px; }
.mg-next { right: 16px; }
@media (max-width: 560px) { .mg-arrow { width: 48px; height: 48px; } .mg-arrow svg { width: 22px; height: 22px; } .mg-prev { left: 10px; } .mg-next { right: 10px; } }
@media (prefers-reduced-motion: reduce) { .mg-arrow { transition: none; } .mg-arrow:hover:not(:disabled) { transform: none; } }
/* the model artwork rule (.model-art svg) must not reach the arrow icons: they were drawn as squares */
.model-art .mg-arrow svg { width: 24px; height: 24px; max-width: none; padding: 0; background: none; }
@media (max-width: 560px) { .model-art .mg-arrow svg { width: 22px; height: 22px; } }