/* MyKiwi Serviss Landing
   Phase 1: shell, theme tokens, header, bottom bar, anchor offsets.
   Phase 2+ adds section-specific rules to this same file. */

/* ---- PERF-01/03: self-hosted fonts, replacing the Google Fonts CDN link ----
   Both Space Grotesk and Figtree are variable fonts; Google serves exactly
   one physical file per Unicode subset (latin, latin-ext) regardless of how
   many static font-weight values are declared against it, and the browser
   interpolates the requested weight from that one file. These four files
   (fetched 2026-09-10 from the exact family/weight/display combination
   src/page.html requested) are that same set, self-hosted, with the same
   unicode-range split so a page only downloads the subset its own text
   actually uses (an LV page with diacritics fetches latin-ext; an EN/RU page
   whose Latin-script text is all ASCII does not). Neither family ships a
   Cyrillic subset at all (checked directly against the Google Fonts API), so
   RU headings/body already render in the fallback stack below for Cyrillic
   text; that is unchanged by self-hosting, not a regression it introduces.
   Regenerate by re-running scripts/fetch-fonts.md's documented curl commands
   if the type ramp ever changes. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.bf7828e2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin.4ba7d3d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/fonts/spacegrotesk-latin-ext.952dddb4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/fonts/spacegrotesk-latin.06408904.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- TYPO-02: Cyrillic companion for the RU page ----
   Neither Figtree nor Space Grotesk ships a single Cyrillic glyph (verified
   directly against Google's own CSS2 API response: zero "/* cyrillic *\/"
   block for either family). Measured with canvas text metrics: the Latin
   string "Aifonu labosana" renders at a different width in Space Grotesk
   than in a generic fallback (the webfont is used), but the Cyrillic string
   "Chinim ekran" (Cyrillic) renders at the SAME width in "Space Grotesk" as
   in a font that does not exist at all, meaning every Cyrillic glyph on the
   RU page silently falls back to whatever the OS supplies, not the brand
   typeface.

   Fix: Manrope, self-hosted, licensed SIL Open Font License 1.1 (license
   text: assets/fonts/manrope-OFL.txt; fetched from Google's own font
   repository, https://github.com/google/fonts/blob/main/ofl/manrope/OFL.txt,
   because the sharanda/manrope upstream repo the font's own name table
   points at has since disappeared). Chosen after comparing it, at the same
   measured metrics, against PT Sans and Golos Text (both Cyrillic-native,
   both on Google Fonts, both OFL): PT Sans has no variable "wght" axis at
   all (static weights only, which would mean shipping discrete extra files
   per weight instead of the one-variable-file-per-role pattern already used
   here) and its humanist proportions read materially rounder/wider than
   this project's two geometric faces (advance width of a capital H:
   Figtree 0.752 em, Space Grotesk 0.656 em, PT Sans 0.651 em but on
   noticeably heavier stroke weight at the same usWeightClass). Golos Text is
   a closer geometric match (H 0.760 em) and was a genuine second choice, but
   Manrope's variable "wght" axis (200-800) covers both this project's body
   range (400-800) and heading range (500-700) from ONE downloaded file, its
   capital-H advance width (0.660 em) sits closer to Space Grotesk's (0.656
   em) than any other candidate measured, and it is the more widely deployed
   of the two (broader hinting/rendering track record). Rendered side by side
   at matching sizes/weights, Manrope's even geometric letterforms sit
   comfortably next to both existing families; PT Sans visibly does not.

   Implementation: two @font-face rules below, declared under the SAME
   font-family names ('Figtree' and 'Space Grotesk') the rest of this file
   already uses via var(--font-body)/var(--font-heading), restricted by
   unicode-range to the standard Cyrillic block. This is deliberate, not a
   naming shortcut: unicode-range lets the browser pick the matching face
   PER CHARACTER within one font-family value, so no CSS elsewhere has to
   change, the LV/EN pages (all-Latin text) never trigger a fetch of this
   file at all, and the RU page fetches it exactly once regardless of how
   many elements reference 'Figtree' or 'Space Grotesk'. Range copied
   verbatim from Google's own "cyrillic" subset boundary for Manrope (not
   "cyrillic-ext", which this project's actual RU copy never uses: audited
   directly, ru.json's rendered text uses only U+0410-0427, U+042B, U+042D,
   U+042F and U+0430-044F, all inside this range). font-weight ranges below
   mirror the Figtree/Space Grotesk declarations above them so the same
   weight request resolves to a Cyrillic-capable face either way. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.c268b459.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.c268b459.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The page canvas and the browser's own widgets follow the theme.
   `background` here (not on body) is what paints an overscroll bounce, which
   used to stay near-black in light theme because body's own background falls
   back to the dark token: --bg is defined on .kiwi, which is body's CHILD, so
   body never sees it. `color-scheme` is what makes the scrollbar, the form
   controls, the checkbox and autofill render in the matching scheme instead of
   a light checkbox on a dark page. The attribute is set on <html> by the
   bootstrap script in page.html and kept in sync by the toggle in app.js. */
html[data-theme="light"] { background: #FFFFFF; color-scheme: light; }
html[data-theme="dark"] { background: #07090A; color-scheme: dark; }
/* Before that script runs (and if it never does), follow the system. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) { background: #07090A; color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) { background: #FFFFFF; color-scheme: light; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* 07-02: zeroes every :active press-feedback transition (buttons, tabs,
     chips, CTAs) added below in one place, and turns off the FAQ answer's
     grid-row open/close transform. State still changes instantly in every
     case; only the animation is removed, per prefers-reduced-motion:
     reduce -- fewer/gentler, not broken. 09-refinement: the theme toggle
     used to have its own thumb-sliding transition listed here; it is now a
     plain icon swap (display:none/block driven by data-theme, styles.css's
     .kiwi-theme-icon rules), which is not animated at all, so there is
     nothing left to zero for it. */
  :root { --dur-press: 0ms; }
  .kiwi-faq-item__answer,
  .kiwi-faq-item__sign {
    transition: none;
  }
}

body {
  margin: 0;
  background: var(--bg, #07090A);
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-body, 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  color: var(--text, #FFFFFF);
  /* Rule-1 fix (found 06-02/06-03): horizontal-bleed clipping (negative
     margins on .kiwi-hero__image-wrap / .kiwi-marquee-wrap) lived on
     .kiwi-shell as `overflow: hidden`, which per the CSS Overflow spec makes
     ANY box a "scroll container" on the axis(es) it applies to. That
     silently broke `.kiwi-header { position: sticky }` at every viewport
     width (verified: pre-existing since Phase 1, not introduced by this
     plan -- the bug was masked because the mobile bottom bar is
     `position: fixed`, which is NOT affected by an ancestor's overflow, so
     COMP-04 reachability still held by accident even though the header
     itself was silently scrolling away). Moving the horizontal clip up to
     `body` (a real ancestor of the sticky header, and the actual viewport-
     scrolling element) keeps the clip and restores real sticky behavior;
     verified with Playwright at both 390px and 1440px after a 2000px
     scroll (see 06-02-03-SUMMARY.md). */
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; transition: color 160ms ease, opacity 160ms ease; }
a:hover { color: var(--accentSoft); }
input, textarea, button { font: inherit; }

/* 19b: five controls became <button> so they can open the branch contact sheet
   instead of dialling one branch (see the 19b block further down). A <button>
   brings UA defaults a styled <a> never had. This reset is deliberately placed
   HERE, early, and uses plain class selectors rather than button.class: at
   equal specificity the later rule wins, so each control keeps its own
   background, border and colour further down the file, and only the defaults
   nothing else sets (appearance, cursor, alignment, the UA border on the two
   that declare none) are neutralised. A button.class reset would have
   out-specified those rules and flattened the bottom bar's green call button,
   which is exactly what happened first time. */
.kiwi-price-detail__cta-secondary,
.kiwi-form-result__call,
.kiwi-form-result__whatsapp,
.kiwi-bottombar__call,
.kiwi-bottombar__whatsapp {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  text-align: center;
  cursor: pointer;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: #6F7A6B; }
/* 07-02: the primary CTAs across this page (hero, price-detail, branch
   cards, footer, bottom bar) are styled buttons but are actually <a>
   elements, so the original `input, textarea, button` selector left every
   keyboard-tabbed link on the page with NO visible focus indicator at all.
   Extended to `a` and switched the hardcoded dark-theme green to
   var(--accent) so the ring itself adapts per theme instead of only working
   by coincidence in light theme too. Outline follows the target element's
   own border-radius in evergreen Chromium/Firefox/Safari, so this reads
   correctly on pill-shaped chips and rounded cards alike without per-shape
   overrides. */
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent, #6DBE45);
  outline-offset: 2px;
}

.kiwi { transition: opacity .2s ease; }

/* ---- Design tokens: copied verbatim from Serviss Landing v2.dc.html ---- */
/* SHELL-04: do not re-derive these values. */

.kiwi {
  --bg: #07090A; --bg2: #07090A; --bg3: #000000;
  --scrimRGB: 7,9,10;
  --card: linear-gradient(160deg, #12170F 0%, #0B0E0B 100%);
  --cardAccent: linear-gradient(160deg, #14190F 0%, #0B0E0B 100%);
  --text: #FFFFFF; --body: #C7CFC3; --muted: #97A092; --muted2: #8A9387;
  --accent: #6DBE45; --accentSoft: #8FD46E; --onAccent: #FFFFFF; --accentFill: #62B14A;
  --border: rgba(255,255,255,0.09); --borderSoft: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.14);
  --soft: rgba(255,255,255,0.045);
  --tint: rgba(109,190,69,0.13); --tintB: rgba(109,190,69,0.30);
  --glow1: rgba(109,190,69,0.22); --glow2: rgba(109,190,69,0.05);
  --headerBg: rgba(7,9,10,0.9); --barBg: rgba(0,0,0,0.94);
  --waBg: rgba(255,255,255,0.06); --waText: #FFFFFF; --waBorder: rgba(255,255,255,0.18);
  --mapFilter: invert(0.92) hue-rotate(180deg) saturate(0.7);
  --logoFilter: grayscale(1) invert(1) brightness(1.6);
}
.kiwi[data-theme="light"] {
  --bg: #FFFFFF; --bg2: #FFFFFF; --bg3: #FFFFFF;
  --scrimRGB: 255,255,255;
  --card: linear-gradient(160deg, #FFFFFF 0%, #F5F8F3 100%);
  --cardAccent: linear-gradient(160deg, #F6FBF2 0%, #FFFFFF 100%);
  --text: #101410; --body: #3D453A; --muted: #59604F; --muted2: #5A6154;
  --accent: #2E7D1B; --accentSoft: #2E7D1B; --onAccent: #FFFFFF; --accentFill: #62B14A;
  --border: #E1E7DC; --borderSoft: #EAEFE6; --border2: #D6DED0;
  --soft: #FFFFFF;
  --tint: #E9F5E1; --tintB: rgba(109,190,69,0.5);
  --glow1: rgba(109,190,69,0); --glow2: rgba(109,190,69,0);
  --headerBg: rgba(255,255,255,0.92); --barBg: rgba(255,255,255,0.95);
  --waBg: #FFFFFF; --waText: #101410; --waBorder: #D6DED0;
  --mapFilter: none;
  --logoFilter: grayscale(1);
}

/* ---- Additions on top of the verbatim tokens: font fallback stacks ---- */
/* Not present in the source design (which set font-family inline per element).
   Requirement asks for "the same preconnect hints, real fallback stack".
   TYPO-01 fix: these two tokens live at :root, not on .kiwi, on purpose.
   The color/spacing tokens above stay scoped to .kiwi (correct: every element
   that reads them is a DOM descendant of #kiwiRoot.kiwi). Font tokens do not
   get that luxury: the `body` element itself (src/page.html) sets
   `font-family: var(--font-body)`, and `body` is an ANCESTOR of div.kiwi, not
   a descendant, so a .kiwi-scoped custom property is undefined there. An
   unresolvable var() with no fallback is invalid at computed-value time, and
   because font-family is an inherited property that invalidity resolves to
   the INHERITED value, which for `body` is whatever `html` computed, which
   with nothing else set is the browser's UA-default generic (serif, i.e.
   literally "Times New Roman" on this measurement). :root is an ancestor of
   `body` too, so putting the tokens there makes them resolve at `body`
   itself, and the correct value then inherits down through every element
   that does not set its own font-family, including .kiwi-bottombar (a
   sibling of .kiwi-page, so it never benefited from .kiwi-page's own correct
   `font-family: var(--font-body)` re-declaration). */
:root {
  --font-heading: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---- 10-density: shared vertical-rhythm scale ----
   The client's "crowded, barely fits" complaint measured out to every
   vertical gap in the desktop hero running larger than the reference's
   equivalent gap, not to different content. Rather than shrinking each of
   those numbers ad hoc, every hero gap and every desktop section's own
   top/bottom padding below now draws from this one scale, so a spacing
   decision reads as "this system's rhythm", not a per-element guess.
   Mobile keeps its own already-tightened Phase 9 values (52-58px section
   padding, unchanged here) since the client's complaint and reference photo
   were both about the desktop hero at 100% zoom, not the phone composition. */
:root {
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 72px;
}

/* ---- 07-02: design-refinement motion tokens ----
   Shared easing curves and a single press-feedback duration, so every
   interactive control below animates consistently instead of each button
   inventing its own timing. Built-in CSS easings ("ease", "ease-out") read
   as weak/soft; these two custom cubic-beziers give real punch on both
   entrance and on-screen movement, per the project's design-eng guidance.
   `--dur-press` is the single knob prefers-reduced-motion turns to 0 below,
   which instantly zeroes every :active press-feedback transition across the
   whole page (buttons still change state, they just stop animating). */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
}

/* ---- Phase 3 addition: inline validation error color ---- */
/* Not present in the source design (which has no form validation states).
   Chosen to read clearly as an error against both themes' backgrounds
   without introducing an unrelated hue into the green/white brand palette. */
.kiwi {
  --error: #FF8A80;
  --errorBg: rgba(255,138,128,0.12);
  --errorBorder: rgba(255,138,128,0.45);
}
.kiwi[data-theme="light"] {
  --error: #C62828;
  --errorBg: rgba(198,40,40,0.07);
  --errorBorder: rgba(198,40,40,0.35);
}

/* ---- Phase 8 client round: hero cutout grounding-shadow tokens ---- */
/* A drop-shadow that reads on dark theme's near-black background needs to be
   much softer/darker than one that reads on light theme's white background,
   where a dark-theme-strength shadow would either vanish (too soft) or draw
   a visible dark smear (too strong). Checked by screenshot on both. */
.kiwi {
  --heroShadow: rgba(0,0,0,0.65);
  --heroShadow2: rgba(0,0,0,0.5);
}
.kiwi[data-theme="light"] {
  --heroShadow: rgba(16,20,16,0.28);
  --heroShadow2: rgba(16,20,16,0.18);
}

/* ---- Phase 8 client round: "Kā tas notiek" process background tuning ---- */
/* The client's complaint: the workbench photo was "barely visible", almost
   invisible in light theme. Dark and light need different values, not one
   shared number: light theme's paragraph text started this pass at 6.00:1
   contrast (the least headroom of the four sampled dark/light h2/p
   combinations, see 07-02-SUMMARY.md), so it can absorb far less extra photo
   visibility than dark theme's 7.37:1 paragraph before dropping near the
   4.5:1 AA floor. Re-measured after tuning, see 08-SUMMARY.md for the real
   sampled numbers in both themes. */
.kiwi {
  --processBgOpacity: 0.85;
  --processScrimTop: 0.78;
  --processScrimMid: 0.4;
  --processScrimBottom: 0.84;
}
.kiwi[data-theme="light"] {
  --processBgOpacity: 0.46;
  --processScrimTop: 0.87;
  --processScrimMid: 0.7;
  --processScrimBottom: 0.89;
}

/* ---- Visually-hidden but screen-reader-accessible utility ---- */
.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;
}

/* ---- Layout shell (SHELL-01) ---- */

.kiwi-page {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body, 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}

.kiwi-shell {
  width: 100%;
  max-width: 520px;
  min-width: 0;
  background: var(--bg);
  position: relative;
  padding-bottom: 100px; /* clears the fixed bottom bar */
}

.kiwi-main {
  display: block;
}

/* Empty placeholder sections Phase 2/3 will fill. No visible styling on
   purpose: they must not render as visible gaps or boxes. */
.kiwi-section-placeholder {
  display: block;
}

/* SHELL-06: anchors clear the sticky header */
#cenas, #pieteikums {
  scroll-margin-top: 64px;
}

/* ---- Sticky header (SHELL-02) ---- */

.kiwi-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  /* 09-refinement (coordinator round): trimmed from 8px to make room for
     the theme toggle folded in from the old themebar (below); see the
     <359px block and .kiwi-iconbtn--theme's own sizing for the rest of the
     budget this needed. Re-verified: no overflow at 320/390px in any
     language (09-SUMMARY.md). */
  gap: 6px;
  padding: 10px 14px;
  background: var(--headerBg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--borderSoft);
}

.kiwi-header__logo {
  height: 46px;
  width: auto;
  display: block;
}

.kiwi-header__langs {
  display: flex;
  gap: 3px;
}

.kiwi-header__lang-link {
  min-width: 36px;
  height: 34px;
  padding: 0 4px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, transform var(--dur-press) var(--ease-out);
}

.kiwi-header__lang-link:hover { color: var(--text); }
.kiwi-header__lang-link:active { transform: scale(0.94); }

.kiwi-header__lang-link.is-active {
  border-color: var(--accentFill);
  background: var(--accentFill);
  color: #FFFFFF;
}

.kiwi-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 42px;
  transition: transform var(--dur-press) var(--ease-out), opacity 160ms ease;
}

.kiwi-iconbtn:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .kiwi-iconbtn:hover { opacity: 0.85; }
}

/* 09-refinement: dropped this button's own glow (design restraint pass, item
   7 -- "the weight and number of competing accents"). The header call icon
   is always visible alongside the bottom bar's own call CTA (mobile); a
   glowing green circle in the same header row added nothing but visual
   noise.

   10-density: dropped the solid fill too. A solid brand-green circle next
   to a bright green "LV" pill and (formerly) a bright green CTA button read
   as three separate shouts in one small bar; per the client's own "simple
   and neat" reference, a contact icon does not need to be the loudest thing
   in the header to still read as clickable. Restyled to the same quiet
   tinted-circle treatment as the hero trust icons (var(--tint)/var(--tintB))
   with the accent color carried by the stroke instead of a solid fill --
   still unmistakably a call button (phone glyph, circle, always in the same
   header slot every other header keeps it in), just no longer competing in
   volume with the page's one real primary action (the hero CTA). */
.kiwi-iconbtn--call {
  background: var(--tint);
  border: 1px solid var(--tintB);
}

/* Rule-1 fix (found 06-02/06-03, RESP-03's 320px overflow sweep): the header
   (logo + 3 language pills + call icon + WhatsApp icon) does not fit a
   320px viewport at its normal sizes -- it measured ~27px too wide. This
   pre-dates this plan (Phase 1) and was invisible before now only because
   `.kiwi-shell { overflow: hidden }` silently clipped the WhatsApp icon
   button off-canvas rather than causing a scrollbar; removing that
   clipping to fix the sticky-header regression above exposed it as real
   overflow instead. Fixed by shrinking the header's own sizes (not by
   re-adding a clip that would just hide the button again) at the narrowest
   supported widths. Verified: 320px now measures scrollWidth === clientWidth
   with the WhatsApp icon fully visible (see 06-02-03-SUMMARY.md).

   10-density: found the SAME bug still open one step wider. This plan's
   mandated overflow sweep (320-1920px) turned up 360px failing the exact
   same way (scrollWidth 383 vs clientWidth 360, the WhatsApp button's own
   right edge landing at 383) in BOTH the pre-phase-10 build and this one --
   confirmed by rebuilding the prior commit into a throwaway dist and
   measuring it directly, so this is not something the header/nav/call-icon
   changes in this plan introduced. It sat un-caught between the 359px fix
   above and the next real checkpoint at 390px. Fixed the same way as the
   320px case: the breakpoint's upper bound moves from 359px to 389px, so
   360-389px now gets the same proven shrink treatment as 320-359px did
   (390px+ is untouched -- it already measured clean). */
@media (max-width: 389px) {
  .kiwi-header { padding: 8px 10px; gap: 4px; }
  .kiwi-header__logo { height: 36px; }
  .kiwi-header__langs { gap: 2px; }
  .kiwi-header__lang-link { min-width: 30px; height: 28px; font-size: 11px; }
  .kiwi-iconbtn { width: 36px; height: 36px; flex: 0 0 36px; }
  /* 09-refinement: the theme toggle is a lower-priority utility control
     than call/WhatsApp (COMP-04's actual reachability requirement), so it
     is sized a step smaller than them rather than claiming equal visual
     weight -- also the exact bit of width budget the header needed to fit
     a fifth control into a row that already only just fit four. */
  .kiwi-iconbtn--theme { width: 30px; height: 30px; flex: 0 0 30px; }
  .kiwi-theme-icon { width: 16px; height: 16px; }
}

.kiwi-iconbtn--whatsapp {
  background: var(--waBg);
  border: 1px solid var(--waBorder);
  box-shadow: none;
}

/* 09-refinement (coordinator round): the theme toggle, merged into the
   header (see the HTML comment above it in page.html for why). `margin-
   left: auto` moved here from .kiwi-header__langs so the same "logo left,
   preference cluster right" split still holds with one more control in
   the cluster. Styled as a neutral, low-key icon button (border + soft
   background from the shared theme tokens), not a colored/glowing one:
   this is a utility control, not a call to action, and the design-restraint
   pass already establishes that only the page's primary actions carry
   color/glow. Every color here is a token (var(--text)/var(--soft)/
   var(--border2)), so the button is correct in both themes with no
   theme-specific override needed -- unlike the black bar it replaces. */
.kiwi-iconbtn--theme {
  margin-left: auto;
  /* Sized a step below the generic 42px .kiwi-iconbtn (call/WhatsApp): a
     lower-priority utility control should not claim the same visual weight
     as the two reachability-critical contact actions beside it, and the
     header needed exactly this much width back to fit a fifth control
     into a row already tuned for four (see the 359px block for the
     narrowest step down from here). */
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: var(--soft);
  border: 1px solid var(--border2);
  color: var(--text);
}

.kiwi-theme-icon { width: 17px; height: 17px; display: none; }
/* The icon reflects the CURRENTLY ACTIVE theme (sun when light, moon when
   dark), not the theme a click would switch to: it should describe what
   you already see on screen, the same way the old thumb-on-a-track
   position did. */
.kiwi[data-theme="light"] .kiwi-theme-icon--sun { display: block; }
.kiwi[data-theme="dark"] .kiwi-theme-icon--moon { display: block; }

/* ---- Sticky bottom bar (SHELL-03) ---- */

.kiwi-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.kiwi-bottombar__inner {
  width: 100%;
  max-width: 520px;
  padding: 11px 12px 15px;
  background: var(--barBg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  pointer-events: auto;
}

.kiwi-bottombar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  transition: transform var(--dur-press) var(--ease-out), opacity 160ms ease;
}

.kiwi-bottombar a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .kiwi-bottombar a:hover { opacity: 0.9; }
}

.kiwi-bottombar__whatsapp {
  background: var(--waBg);
  border: 1px solid var(--waBorder);
  color: var(--waText);
}

.kiwi-bottombar__call {
  background: var(--accentFill);
  color: var(--onAccent);
  font-weight: 800;
  box-shadow: 0 8px 28px rgba(109,190,69,0.38);
}

/* ---- Headings use the design's heading font once Phase 2 adds copy ---- */
h1, h2, h3, h4 {
  font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
  margin: 0;
}

/* =========================================================================
   Phase 2: content sections (hero through footer) and the price explorer.
   Class rules below reproduce the design's inline styles exactly (same
   colors via var(), same paddings/radii/shadows) as BEM-ish classes.
   ========================================================================= */

/* ---- Horizontal-scroll utility (design's [data-hscroll]) ---- */
.kiwi [data-hscroll] { scrollbar-width: none; -ms-overflow-style: none; }
.kiwi [data-hscroll]::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---- Brand marquee keyframes (design's .kiwi-marquee, verbatim) ----
   12-client-round-3: the track used to be exactly 2 groups, so the keyframe
   could hardcode "-50%" (one group = half the track). scripts/build.mjs now
   generates MARQUEE_GROUP_COUNT groups (repeated enough times that the full
   track stays well past the widest supported viewport, so the loop never
   visibly runs out and restarts), and stamps that same constant onto
   .kiwi-marquee's own `--marquee-groups` custom property (see page.html),
   so the animation always travels exactly one group's width regardless of
   how many total groups exist -- the two can never drift out of sync
   because they both come from the one constant. The `2` fallback matches
   the old hardcoded behavior if the custom property is ever missing. */
@keyframes kiwiMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--marquee-groups, 2))); } }
.kiwi-marquee {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0;
  animation: kiwiMarquee 26s linear infinite;
}
/* 11-density-2 client round: "gaps too big, strip reads as empty" -- gap and
   padding-right both set to the shared --space-9 (48px) token, replacing the
   old 56px mobile / 340px desktop values (the desktop 340px gap was a Phase
   9 fix for a different complaint, "same logo appears twice on screen"; the
   client's new complaint is the opposite one, "only three or four logos are
   visible", so a wide gap is no longer the right trade-off -- see the
   desktop override below for the full account). */
.kiwi-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  padding-right: var(--space-9);
}
@media (prefers-reduced-motion: reduce) {
  .kiwi-marquee { animation: none; }
}

/* ---- SECT-01: Hero ---- */

.kiwi-hero {
  position: relative;
  background: radial-gradient(90% 40% at 78% 4%, var(--glow1) 0%, var(--glow2) 42%, rgba(var(--scrimRGB),0) 70%), var(--bg);
  overflow: hidden;
}

.kiwi-hero__inner {
  position: relative;
  padding: 34px 18px 40px;
}

.kiwi-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: var(--borderSoft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
}

.kiwi-hero__badge-star { color: var(--accent); font-size: 14px; }
.kiwi-hero__badge span:last-child { color: var(--body); }

.kiwi-hero__h1 {
  font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
  font-size: 48px;
  line-height: 0.93;
  letter-spacing: -0.042em;
  margin: 22px 0 0;
  font-weight: 700;
  text-wrap: pretty;
}

.kiwi-hero__h1-accent {
  color: var(--accent);
}

.kiwi-hero__subtitle {
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.kiwi-hero__branches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 14px;
}

.kiwi-hero__branch-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid rgba(109,190,69,0.6);
  padding-bottom: 4px;
}

.kiwi-hero__and {
  font-size: 16px;
  color: var(--muted2);
}

/* Phase 8 client round: the client's biggest, twice-stated complaint was that
   the hero photo read as "a picture pasted into a box" -- a rounded rectangle
   card with a visible edge. hero-phone.webp is a transparent cutout (the
   cracked phone, no background of its own), so the wrap no longer needs
   `overflow: hidden` (nothing to clip), a negative-margin bleed (nothing to
   bleed to the section edge), or a light-theme-only border/radius/shadow
   override (07-02's framing fix, retired below): a cutout has no rectangle to
   frame in the first place. The reference the client pointed at
   (../reference/riga-ilab-top.png) shows the phone floating directly in the
   page's own background with no visible container at all in either theme. */
.kiwi-hero__image-wrap {
  position: relative;
  margin: 26px 0 0;
  height: 340px;
}

/* Soft ambient glow behind the floating cutout, built from the same
   --glow1/--glow2 tokens every other section's own background gradient
   already uses (kiwi-hero, kiwi-speed, kiwi-cenas, kiwi-delivery), never a
   baked-in rectangle. In light theme those two tokens are intentionally
   rgba(...,0) -- the whole page never shows a colored glow in light theme,
   by the same existing convention -- so light theme's depth instead comes
   entirely from the drop-shadow below. Both are "deliberate": in dark theme
   the glow gives the crack's own orange/purple light somewhere to bloom
   into; in light theme the absence of a glow matches every other light-
   theme section, and the shadow alone grounds the phone on the page. */
.kiwi-hero__image-glow {
  position: absolute;
  inset: -12% -8% -6%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 62% at 50% 46%, var(--glow1) 0%, var(--glow2) 46%, rgba(var(--scrimRGB),0) 74%);
}

.kiwi-hero__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Grounding shadow via `filter: drop-shadow`, not `box-shadow`: box-shadow
     follows the element's rectangular box (which would draw a shadow around
     the cutout's own transparent padding, putting the rectangle right back);
     drop-shadow follows the actual alpha silhouette of the phone. Two
     stacked shadows -- a wide soft one for ambient lift, a tighter closer
     one for ground contact -- using --heroShadow/--heroShadow2 (themed
     below) so it reads correctly on both a near-black background (dark
     theme) and pure white (light theme), checked by screenshot in both. */
  filter: drop-shadow(0 30px 36px var(--heroShadow)) drop-shadow(0 8px 12px var(--heroShadow2));
}

.kiwi-hero__trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 12px;
  margin-top: 10px;
}

.kiwi-hero__trust-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 09-refinement, design restraint pass (item 7, "the weight and number of
   competing accents"): a green ambient glow was applied to nearly every
   small repeated icon circle across the page (hero trust icons, speed
   icons, the turnaround badge, bullet checkmarks, process/delivery step
   numbers, the branch status dot, active tabs/damage rows, the FAQ open
   state) as well as every CTA button (hero, price-detail, branch call,
   delivery, form submit, both header CTAs), all using the same accent
   color. Multiplied across a single scroll, that reads as competing noise
   rather than emphasis -- nothing stands out when everything glows. Per
   apple-design's materials guidance ("material weight encodes hierarchy")
   and emil-design-eng's core philosophy (taste is knowing what to leave
   out), this pass removes the glow from every REPEATED small element and
   every button below the page's one or two truly primary, always-visible
   actions, keeping only: the hero primary CTA (the entire point of the
   page), and the one always-on persistent contact action per breakpoint
   (mobile's fixed bottom-bar call button; desktop's equivalent header CTA).
   Everywhere else, the existing solid fill / border / color change already
   carries the state or affordance without an added glow. Each removal below
   is marked "(restraint pass)" rather than repeating this note. Text-shadow
   glows on accent-colored heading spans (hero h1, delivery h2, branches h2)
   are removed the same way, further down this file. */
.kiwi-hero__trust-icon {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tint);
  border: 1px solid var(--tintB);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 19-design-qa: one phrase per badge at one weight, replacing the bold
   title + muted subtitle pair. The split was the defect the client named
   ("it highlights half the sentence without any logic"): a two-tier
   treatment promises that the top tier is the keyword, and here the top
   tier was landing on "Kvalitativas" and "Bez". With one tier there is no
   promise to break, and the phrase wraps on its own natural break. */
.kiwi-hero__trust-text {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  min-width: 0;
}

.kiwi-hero__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 28px;
}

.kiwi-hero__cta-primary,
.kiwi-hero__cta-secondary {
  transition: transform var(--dur-press) var(--ease-out), box-shadow 160ms ease;
}
.kiwi-hero__cta-primary:active,
.kiwi-hero__cta-secondary:active {
  transform: scale(0.97);
}

.kiwi-hero__cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 15px;
  background: var(--accentFill);
  color: var(--onAccent);
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 14px 40px rgba(109,190,69,0.4);
}

.kiwi-hero__cta-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 15px;
  background: var(--borderSoft);
  border: 1px solid var(--border2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

/* ---- SECT-03/04: Brand marquee section ---- */

/* 12-client-round-3: "vertically cramped -- label, logos and disclaimer are
   too close together". Landed between the two named bounds: --space-9
   (48px) read as too tight for this section's own outer padding, and the
   loosest value in the project's own scale (matching what every OTHER
   desktop section in this file already uses, see the desktop override
   below) reads as too loose for a slim logo strip that is not a full
   content section. --space-10 (56px) sits exactly between those two
   existing tokens, so this is not a new magic number: it is the one rung of
   the established --space-* scale (see the :root block above) between "too
   tight" and "too loose". The two INTERNAL gaps (label-to-logos,
   logos-to-disclaimer) move off their old ad-hoc 20px/14px onto the same
   scale, one step looser each (--space-6/--space-5), so the three elements
   read as clearly separated instead of stacked edge to edge. */
.kiwi-brands {
  padding: var(--space-10) 18px;
  background: var(--bg2);
  border-top: 1px solid var(--borderSoft);
  border-bottom: 1px solid var(--borderSoft);
}

.kiwi-brands__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted2);
  font-weight: 700;
}

.kiwi-marquee-wrap {
  margin: var(--space-6) -18px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.kiwi-marquee__logo {
  display: block;
  object-fit: contain;
  filter: var(--logoFilter);
  opacity: 0.92;
}

/* COMP-01: independent-service disclaimer, a SHORT one-line version living
   here (next to the logos), with the full mandatory legal text kept intact
   and unchanged in the footer (`kiwi-footer__disclaimer`). 11-density-2
   client round: the full 3-line legal paragraph previously repeated here
   took up more of the frame than the 5 logos above it. `white-space: nowrap`
   is deliberate, not just a small font: BRIEF.txt section 5 asks for a
   "clear, visible" statement, which a line that silently wrapped or
   truncated on a narrow phone would not satisfy, so this is sized and
   worded (see the brands.disclaimerShort strings in src/data/i18n/*.json,
   COMPLIANCE.md "Disclaimer wording decision") to measurably fit on one line
   down to 320px, verified by Playwright rather than assumed. */
.kiwi-brands__disclaimer {
  margin: var(--space-5) 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---- SECT-05: Speed strip ---- */

/* 09-refinement, design restraint pass (item 7, vertical rhythm): every
   mobile section from here down shared the same ~40px/42px top/bottom
   padding, which read as one continuous, evenly-dense wall of content with
   nothing to signal "new topic starts here" beyond a 1px border. Bumped to
   ~52-54px/56-58px across all seven of these sections (speed, cenas,
   process, reviews, delivery, faq, branches) -- the same value everywhere,
   on purpose, so the increase reads as a deliberate rhythm change rather
   than an arbitrary per-section tweak. This does not touch desktop's own
   84-92px padding (already generous, matching the reference) or any
   section's internal spacing/type sizes, only the seam between sections. */
.kiwi-speed {
  border-top: 1px solid var(--borderSoft);
  padding: 52px 18px 56px;
  background: radial-gradient(90% 40% at 90% 0%, var(--glow1) 0%, rgba(var(--scrimRGB),0) 58%), var(--bg);
}

.kiwi-speed__h2 {
  font-size: 35px;
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.kiwi-speed__p {
  margin: 14px 0 0;
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.5;
}

.kiwi-speed__card {
  margin-top: 24px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
}

.kiwi-speed__row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 22px 20px;
  border-top: 1px solid var(--borderSoft);
}

.kiwi-speed__row:first-child { border-top: 0; }

.kiwi-speed__icon {
  flex: 0 0 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--tint);
  border: 1px solid var(--tintB);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kiwi-speed__text { flex: 1; }
.kiwi-speed__line { line-height: 1.1; }

.kiwi-speed__n {
  font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.kiwi-speed__t {
  font-size: 16px;
  font-weight: 700;
  color: var(--body);
  margin-left: 8px;
}

.kiwi-speed__s {
  font-size: 13.5px;
  color: var(--muted2);
  margin-top: 6px;
}

/* ---- PRICE-01..07: device/damage explorer ---- */

.kiwi-cenas {
  border-top: 1px solid var(--borderSoft);
  padding: 54px 18px 58px;
  background: radial-gradient(110% 42% at 10% 0%, var(--glow1) 0%, rgba(var(--scrimRGB),0) 60%), var(--bg2);
}

.kiwi-cenas__kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.kiwi-cenas__h2 {
  font-size: 35px;
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 14px 0 0;
  font-weight: 700;
}

.kiwi-cenas__p {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted);
}

.kiwi-price-tabs {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.kiwi-price-tab {
  min-height: 50px;
  padding: 0 17px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: box-shadow .16s ease, border-color .16s ease, transform var(--dur-press) var(--ease-out);
  border: 1px solid var(--border2);
  background: var(--soft);
  color: var(--body);
  flex: 0 0 auto;
}

.kiwi-price-tab:active { transform: scale(0.97); }

.kiwi-price-tab.is-active {
  border: 1px solid transparent;
  background: var(--accentFill);
  color: #FFFFFF;
}

.kiwi-damage-list {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.kiwi-damage-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 14px 18px;
  border-radius: 15px;
  cursor: pointer;
  text-align: left;
  transition: box-shadow .16s ease, border-color .16s ease, transform var(--dur-press) var(--ease-out);
  border: 1px solid var(--border);
  background: var(--card);
  color: inherit;
}

.kiwi-damage-item:active { transform: scale(0.98); }

.kiwi-damage-item.is-active {
  border: 1px solid transparent;
  background: var(--accentFill);
}

.kiwi-damage-item__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  flex: 1;
}

.kiwi-damage-item__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.kiwi-damage-item.is-active .kiwi-damage-item__title { color: #FFFFFF; }

.kiwi-damage-item__sub {
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted2);
}

.kiwi-damage-item.is-active .kiwi-damage-item__sub { color: #FFFFFF; }

.kiwi-damage-item__chev {
  flex: 0 0 18px;
  color: #7C857A;
}

.kiwi-damage-item.is-active .kiwi-damage-item__chev { color: #FFFFFF; }

.kiwi-price-card {
  margin-top: 20px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cardAccent);
  border: 1px solid var(--tintB);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}

.kiwi-price-card__photo { height: 200px; overflow: hidden; }
.kiwi-price-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Phase 8 client round: a short crossfade when src/app.js swaps this
     element's src to the newly-selected damage's own photo (price-explorer
     "every service uses the same image" fix), so the change reads as
     intentional rather than an abrupt pop. --dur-press is reused here even
     though this is not a press interaction, because it is already the
     project's one prefers-reduced-motion switch (zeroed to 0ms, see the
     `@media (prefers-reduced-motion: reduce)` block near the top of this
     file); a dedicated constant would need its own reduced-motion override.
     src/app.js's own swap timeout matches this duration. */
  transition: opacity var(--dur-press, 140ms) var(--ease-in-out, ease);
}
.kiwi-price-card__photo img.is-swapping { opacity: 0; }

.kiwi-price-card__body { padding: 24px 20px 26px; }

/* 09-refinement: "the service card needs to be the same size" -- across the
   15 damage entries, the title wraps to either 1 or 2 lines (12 to 30
   characters) and the price-rows list has either 1, 2 or 3 rows, so the
   card's natural content height varied by about a row-and-a-half between
   the shortest and tallest entry, making the page visibly jump every time a
   different service was picked. `.kiwi-price-detail__card` is a flex column
   so `.kiwi-price-detail__actions` (the CTA row) can be pinned to the
   bottom with `margin-top: auto` instead of a fixed value: the buttons
   always land in the same place at the bottom of the card, whatever height
   the card ends up at.

   12-client-round-3: the FIXED min-height that used to sit here (and its
   larger desktop-only override, see that breakpoint below) is gone. It was
   sized to the single tallest of all 15 damage entries GLOBALLY, so a
   category with fewer/shorter entries (tablets: 4 damages, comfortably
   under that global tallest) got padded out with visible dead space between
   its price rows and its buttons -- exactly what the client circled. The
   card's height now comes from the DESKTOP GRID ROW it shares with the
   damage-picker list beside it (see `[data-price-panels]` and
   `.kiwi-price-card`'s `align-self: stretch` in that breakpoint below):
   the picker list's own height is constant within a category (it always
   shows every damage in that category, regardless of which one is
   selected), so the row's height -- and therefore the card's height -- only
   changes when the visitor switches CATEGORY, a deliberate context change,
   never when they switch damage type within one category. On mobile there
   is no side-by-side column to match (picker and card stack in normal
   document flow), so the card simply sizes to its own natural content per
   damage there; no replacement mechanism is needed since nothing sits
   "beside" it to jump against. */
.kiwi-price-detail__card {
  display: flex;
  flex-direction: column;
}
/* Rule-1 fix (same class of bug as .kiwi-reviews__nav[hidden] elsewhere in
   this file): an unconditional `display: flex` on the plain class selector
   above beats the UA stylesheet's `[hidden] { display: none }` in the
   cascade, so without this override all 15 damage cards rendered stacked at
   once instead of src/app.js's `hidden` attribute actually hiding the 14
   inactive ones. Caught by measuring: the card's height stayed constant at
   the SUM of every entry's height regardless of which service was
   selected, not by eye. */
.kiwi-price-detail__card[hidden] { display: none; }

.kiwi-price-detail__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--tint);
  border: 1px solid var(--tintB);
  color: var(--accentSoft);
  font-size: 12.5px;
  font-weight: 700;
}

.kiwi-price-detail__title {
  font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
  font-size: 29px;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 16px 0 0;
  font-weight: 700;
}

.kiwi-price-detail__bullets {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.kiwi-price-detail__bullet {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.4;
}

.kiwi-price-detail__bullet-icon {
  flex: 0 0 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--accentFill);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.kiwi-price-detail__rows {
  margin-top: 20px;
  border-radius: 15px;
  background: var(--soft);
  border: 1px solid var(--border);
  overflow: hidden;
}

.kiwi-price-detail__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border-top: 1px solid var(--borderSoft);
}

.kiwi-price-detail__row:first-child { border-top: 0; }

.kiwi-price-detail__row-label { font-size: 14.5px; color: var(--body); }

.kiwi-price-detail__row-price {
  font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
  font-size: 16.5px;
  font-weight: 700;
  white-space: nowrap;
}

.kiwi-price-detail__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  /* 09-refinement: pinned to the card's bottom edge (see the
     .kiwi-price-detail__card min-height comment above), not a fixed offset
     from whatever content happens to precede it. */
  margin-top: auto;
  padding-top: 20px;
}

.kiwi-price-detail__cta-primary,
.kiwi-price-detail__cta-secondary {
  transition: transform var(--dur-press) var(--ease-out);
}
.kiwi-price-detail__cta-primary:active,
.kiwi-price-detail__cta-secondary:active {
  transform: scale(0.97);
}

.kiwi-price-detail__cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 14px;
  background: var(--accentFill);
  color: var(--onAccent);
  font-size: 15px;
  font-weight: 800;
}

.kiwi-price-detail__cta-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 14px;
  background: var(--borderSoft);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

/* 12-client-round-3: "why is there a dev note under the prices". It is a
   disclosed placeholder notice, not a leftover -- see prices.json's
   pricesArePlaceholders flag, which controls whether this element renders
   at all. Restyled to read as intentional: dropped the monospace face (was
   ui-monospace/SFMono-Regular/Menlo, which reads as a debug/dev artifact)
   in favor of the page's normal body font (inherited from `body`'s own
   `font-family: var(--font-body)`, no override needed here), kept it small
   and muted so it stays a quiet footnote under the section rather than
   competing with the prices above it. */
.kiwi-cenas__disclaimer {
  margin-top: 16px;
  padding-bottom: 4px;
  font-size: 11.5px;
  color: var(--muted2);
}

/* ---- SECT-06: Process ---- */

.kiwi-process {
  position: relative;
  padding: 54px 18px 58px;
  background: var(--bg);
  overflow: hidden;
}

.kiwi-process__bg-wrap {
  position: absolute;
  inset: 0;
  opacity: var(--processBgOpacity);
}

.kiwi-process__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kiwi-process__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--scrimRGB),var(--processScrimTop)) 0%, rgba(var(--scrimRGB),var(--processScrimMid)) 50%, rgba(var(--scrimRGB),var(--processScrimBottom)) 100%);
}

.kiwi-process__content {
  position: relative;
}

.kiwi-process__h2 {
  font-size: 35px;
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.kiwi-process__p {
  margin: 14px 0 0;
  font-size: 15.5px;
  color: var(--muted);
}

/* ---- 16-timeline: "Kā tas notiek" as a real timeline, not four cards ----
   Mobile: one continuous vertical rail threading all four markers. Each
   marker sits ON the rail (the marker circle is painted over the line, not
   floating inside its own bordered box), and each step's body copy reads
   to the right of its marker.

   The rail is built as one ::before per <li>, not a single absolute bar
   spanning the whole list. A single spanning bar would need to know the
   exact pixel Y of the first and last marker's centre, which depends on
   how many lines each step's body copy wraps to (LV/EN/RU differ) --
   fragile, and would need JS to get right. Anchoring each segment to ITS
   OWN <li> instead needs no measurement: `top: 40px` is the fixed marker
   height (segment starts exactly at the marker's own bottom edge), and
   `bottom: 0` reaches the <li>'s own padding-bottom, which is exactly
   where the NEXT <li> (and its marker) begins, because <li>s stack with
   zero margin between them. That stays correct at any body-copy line
   count, in any language, with zero JS. The last step has no ::before
   (nothing to connect to below it). */
.kiwi-timeline {
  position: relative;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.kiwi-timeline__rail {
  display: none; /* desktop-only single spanning bar, see the 1024px block below */
}

.kiwi-timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  padding-bottom: 28px;
}

.kiwi-timeline__step:last-child {
  padding-bottom: 0;
}

.kiwi-timeline__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 19px;
  width: 2px;
  background: var(--border2);
}

.kiwi-timeline__marker {
  grid-column: 1;
  align-self: start;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tint);
  border: 1px solid var(--tintB);
  color: var(--accentSoft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
  font-weight: 700;
  font-size: 13px;
  position: relative;
  z-index: 1;
}

/* The final marker reads as "arrival": a solid accent fill instead of the
   soft tint ring the first three steps use. One deliberate visual break at
   the end of the rail is the whole "sense of direction" cue -- everywhere
   else stays identical, so this reads as progression, not decoration. */
.kiwi-timeline__marker--last {
  background: var(--accentFill);
  border-color: var(--accentFill);
  color: var(--onAccent);
}

.kiwi-timeline__body {
  grid-column: 2;
}

.kiwi-timeline__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent);
  margin-top: 9px;
}

.kiwi-timeline__text {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.45;
}

/* 16-timeline: scroll reveal, drawing the rail and bringing the four steps
   in in sequence. Per the animation decision framework: a visitor sees
   this section once (maybe twice); it earns a subtle entrance. The default
   state below (no `.kiwi-timeline--armed` class present) is fully visible
   -- app.js (SECT-06 module) only ADDS that class, and only after checking
   both IntersectionObserver support and `prefers-reduced-motion`. That
   means: JavaScript disabled -> class never added -> full content, always
   visible, no dependency on JS for comprehension. Reduced motion -> app.js
   skips arming it at all, same fully-visible result. The
   `@media (prefers-reduced-motion: reduce)` block at the end is a second,
   belt-and-suspenders guarantee for anyone whose OS setting changes after
   the class was already added. Durations are short (rail 480ms, each step
   360ms) and the stagger is 90ms per step, per the design-eng guidance:
   long entrance delays on a section the visitor is actively scrolling
   toward would read as the content "catching up" to them, which is the
   opposite of subtle. */
.kiwi-timeline--armed:not(.kiwi-timeline--revealed) .kiwi-timeline__step {
  opacity: 0;
  transform: translateY(10px);
}

.kiwi-timeline--armed .kiwi-timeline__step {
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}

.kiwi-timeline--armed .kiwi-timeline__step:nth-child(1) { transition-delay: 0ms; }
.kiwi-timeline--armed .kiwi-timeline__step:nth-child(2) { transition-delay: 90ms; }
.kiwi-timeline--armed .kiwi-timeline__step:nth-child(3) { transition-delay: 180ms; }
.kiwi-timeline--armed .kiwi-timeline__step:nth-child(4) { transition-delay: 270ms; }

/* Mobile rail: each connecting segment is its own ::before (see the base
   rule above), so it draws independently, top-anchored, right after its
   own step fades in. */
.kiwi-timeline--armed:not(.kiwi-timeline--revealed) .kiwi-timeline__step:not(:last-child)::before {
  transform: scaleY(0);
  transform-origin: top;
}

.kiwi-timeline--armed .kiwi-timeline__step:not(:last-child)::before {
  transition: transform 420ms var(--ease-out);
}

.kiwi-timeline--armed .kiwi-timeline__step:nth-child(1)::before { transition-delay: 40ms; }
.kiwi-timeline--armed .kiwi-timeline__step:nth-child(2)::before { transition-delay: 130ms; }
.kiwi-timeline--armed .kiwi-timeline__step:nth-child(3)::before { transition-delay: 220ms; }

/* Desktop rail: one spanning bar (display switches to block in the 1024px
   block below), draws left-to-right ahead of the steps. */
.kiwi-timeline--armed:not(.kiwi-timeline--revealed) .kiwi-timeline__rail {
  transform: scaleX(0);
  transform-origin: left;
}

.kiwi-timeline--armed .kiwi-timeline__rail {
  transition: transform 480ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .kiwi-timeline--armed .kiwi-timeline__step,
  .kiwi-timeline--armed .kiwi-timeline__step:not(:last-child)::before,
  .kiwi-timeline--armed .kiwi-timeline__rail {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ---- SECT-07: Reviews ---- */

.kiwi-reviews {
  border-top: 1px solid var(--borderSoft);
  padding: 54px 18px 58px;
  background: radial-gradient(90% 36% at 50% 0%, var(--glow1) 0%, rgba(var(--scrimRGB),0) 60%), var(--bg2);
}

.kiwi-reviews__head { text-align: center; }

/* 14-style: h2 is still the real semantic section heading (accessible name,
   heading hierarchy), but visually it is now a small kicker above the Google
   Reviews lockup, reusing the exact 11px/uppercase/0.16em/muted2/700 recipe
   .kiwi-brands__label already established elsewhere on this page, so this
   reads as the same "small label above the real content" convention, not a
   one-off. */
.kiwi-reviews__eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted2);
  font-weight: 700;
  margin: 0 0 10px;
}

/* 19-design-qa client round: "on the reviews a number should be the main
   thing somebody sees and should be placed next to the title of the
   section". The score used to sit in its own right-hand column of the
   header row while a 40px Google wordmark held the left, so the biggest
   thing in the section was a logo and the number was as far from the
   section title as that row could put it. Now: eyebrow title, then the
   score directly beneath it at display size, with the stars, the count and
   the Google attribution stacked small beside it. The four-colour G
   (assets/img/google-g.svg, Google's own asset) is kept because the client
   asked for it in 15-fixes and because the number needs a source, but it
   is sized to a source credit rather than a headline. */
.kiwi-reviews__score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.kiwi-reviews__score {
  font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
  font-size: 64px;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--text);
}

.kiwi-reviews__score-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
}

.kiwi-reviews__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.kiwi-reviews__count {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.kiwi-reviews__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted2);
}

.kiwi-reviews__google-icon {
  display: block;
  flex: 0 0 auto;
}

/* ---- Phase 13 (reviews rebuild): a real page-based card carousel ----
   Replaces the two-group CSS-keyframe "like the logos" marquee AND its
   `.is-static`/grid fallback (Phase 9 / 11-density-2). Both of those existed
   to cope with the section having only 2 real reviews: a marquee for
   visual movement even though 2 cards never genuinely overflowed, and
   `.is-static` (a JS overflow measurement toggling a class) to fall back to
   a plain centered pair when they did not. With reviews.json now carrying
   24 real reviews, the section overflows its viewport at EVERY supported
   width (390-1920px, verified: 24 cards' combined width always exceeds the
   ~1200-1280px container this site caps content to at every breakpoint,
   see 13-SUMMARY.md), so `.is-static`'s "few enough to fit unscrolled"
   branch is now genuinely unreachable dead code -- removed rather than kept
   "just in case", per this plan's own instruction. If reviews.json is ever
   pruned back down to a handful, this section should get a real grid
   fallback again, deliberately re-added, not the automatic toggle this
   used to be.

   --kiwi-reviews-per-page drives both this file's card sizing AND
   src/app.js's paging math (read via getComputedStyle so the two can never
   drift out of sync) -- 1 phone, 2 small tablet+ (600px), 3 desktop
   (1024px, matching this project's own established desktop threshold).
   24 divides evenly by 1, 2 and 3, so every breakpoint's pages are equal
   size with no short final page to special-case. */
/* 14-style: "the padding between the reviews is too much" -- gap tightened
   10px (phone)/12px (desktop), down from 14px/16px. See 14-SUMMARY.md for
   the measured before/after. */
.kiwi-reviews {
  --kiwi-reviews-per-page: 1;
  --kiwi-reviews-gap: 10px;
}
@media (min-width: 600px) {
  .kiwi-reviews { --kiwi-reviews-per-page: 2; }
}
@media (min-width: 1024px) {
  .kiwi-reviews { --kiwi-reviews-per-page: 3; --kiwi-reviews-gap: 12px; }
}

.kiwi-reviews__carousel {
  position: relative;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kiwi-reviews__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.kiwi-reviews__track {
  display: flex;
  align-items: stretch;
  gap: var(--kiwi-reviews-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  /* transform, not scroll-left: interruptible/retargetable mid-transition
     (Emil Kowalski's "use transitions for dynamic UI" -- an arrow click
     mid-autoplay-advance should retarget smoothly, never restart from
     zero), and it stays off the main thread under load. ease-in-out: this
     is discrete on-screen movement between two settled positions, not an
     entering/exiting element and not the brand marquee's constant-rate
     scroll, so ease-out/linear are both the wrong curve per the
     emil-design-eng animation decision framework. */
  transition: transform 420ms var(--ease-in-out);
}

/* Pause on hover and on keyboard focus so a reader is never fighting the
   motion to finish a quote. src/app.js listens for the same two events to
   pause the autoplay TIMER; this rule only has to stop a transition that
   might already be mid-flight the instant the pointer/focus event lands
   (belt and braces -- in practice src/app.js never starts a new step while
   paused, so this rarely has anything to interrupt). */
.kiwi-reviews__track:focus-visible {
  outline: 2px solid var(--accent, #6DBE45);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  /* Stops the CONTINUOUS AUTOMATIC ADVANCE entirely (src/app.js checks the
     same query and never starts the autoplay timer). Arrow clicks still
     work -- reduced motion means fewer/gentler animations, not a broken
     control -- but the step itself becomes an instant jump, matching this
     project's existing house rule of turning duration-based motion off via
     the transition itself rather than hiding functionality. */
  .kiwi-reviews__track { transition: none; }
}

.kiwi-reviews__arrow {
  position: relative;
  z-index: 1;
  flex: 0 0 42px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
}
@media (hover: hover) and (pointer: fine) {
  .kiwi-reviews__arrow:hover { border-color: var(--tintB); color: var(--accent); }
}

/* 11-density-2 client round's own target values carried forward unchanged:
   max-width 380px, padding ~20px, body 15px/1.5, star row and attribution
   one step smaller -- this rebuild keeps that same compact density, only
   the mechanism around the cards changed. Width is now a real flex-basis
   driven by --kiwi-reviews-per-page (not a viewport clamp): every card in
   the SAME page-of-N is exactly (100% of the viewport minus (N-1) gaps) /
   N wide, so N cards always fill the viewport exactly with no partial card
   creeping into view -- what "count the cards fully visible" is measuring
   against. */
/* 14-style: "the padding between the reviews is too much" -- card padding
   tightened to 14px/16px (was 18px/20px). See 14-SUMMARY.md for the measured
   before/after. */
.kiwi-review-card {
  flex: 0 0 auto;
  width: calc((100% - (var(--kiwi-reviews-per-page) - 1) * var(--kiwi-reviews-gap)) / var(--kiwi-reviews-per-page));
  max-width: 380px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  /* Flex column: name/when row, star row, quoted text stack in that reading
     order (14-style client round: "name at the top ... star row ... text",
     reversing the previous stars-then-name-at-the-bottom order). Height
     equalization WITHIN the currently visible page is done by src/app.js
     (min-height, never a fixed/max height -- see its own comment on why: 24
     reviews range from one sentence to five, and stretching every card to
     the single longest of all 24 would make the whole section far taller
     than the "cards too big" complaint this density already fixed once). */
  display: flex;
  flex-direction: column;
}

.kiwi-review-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.kiwi-review-card__name { color: var(--body); font-weight: 700; font-size: 14.5px; }
.kiwi-review-card__when { color: var(--muted2); font-size: 11.5px; white-space: nowrap; flex: 0 0 auto; }

.kiwi-review-card__stars {
  margin-top: 6px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.14em;
}

.kiwi-review-card__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
}

.kiwi-reviews__cta {
  display: block;
  width: max-content;
  margin: 22px auto 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--tintB);
  padding-bottom: 1px;
  transition: opacity 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .kiwi-reviews__cta:hover { opacity: 0.8; }
}

/* ---- SECT-08: Delivery ---- */

.kiwi-delivery {
  border-top: 1px solid var(--borderSoft);
  padding: 54px 18px 58px;
  background: radial-gradient(100% 40% at 88% 0%, var(--glow1) 0%, rgba(var(--scrimRGB),0) 60%), var(--bg2);
}

.kiwi-delivery__kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.kiwi-delivery__h2 {
  font-size: 35px;
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 14px 0 0;
  font-weight: 700;
}

.kiwi-delivery__h2-accent {
  color: var(--accent);
}

.kiwi-delivery__p {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted);
}

.kiwi-delivery__list {
  display: grid;
  gap: 2px;
  margin-top: 24px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.kiwi-delivery__item {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--card);
}

.kiwi-delivery__n {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tint);
  border: 1px solid var(--tintB);
  color: var(--accentSoft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
  font-weight: 700;
  font-size: 13px;
}

.kiwi-delivery__title { font-size: 16.5px; font-weight: 700; }
.kiwi-delivery__body { font-size: 14px; color: var(--muted); margin-top: 5px; line-height: 1.45; }

/* Client 2026-09-14: "on mobile the omniva section is missing a cta button".
   Below the desktop breakpoint the section is a flex column so the CTA (which
   sits before the steps in the DOM, for the desktop grid) moves under the
   three steps as a full-width button, styled like the hero's primary CTA. */
.kiwi-delivery {
  display: flex;
  flex-direction: column;
}
.kiwi-delivery__cta {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-top: 20px;
  border-radius: 15px;
  background: var(--accentFill);
  color: var(--onAccent);
  font-size: 16px;
  font-weight: 800;
  transition: transform var(--dur-press) var(--ease-out);
}
.kiwi-delivery__cta:active { transform: scale(0.97); }

/* ---- SECT-09: FAQ accordion ---- */

.kiwi-faq {
  border-top: 1px solid var(--borderSoft);
  padding: 54px 18px 58px;
  background: var(--bg2);
}

.kiwi-faq__h2 {
  font-size: 35px;
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.kiwi-faq__p {
  margin: 14px 0 22px;
  font-size: 15.5px;
  color: var(--muted);
}

.kiwi-faq__list {
  display: grid;
  gap: 9px;
}

.kiwi-faq-item {
  border: 1px solid var(--border);
  border-radius: 15px;
  overflow: hidden;
  background: var(--card);
  box-shadow: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.kiwi-faq-item.is-open {
  border: 1px solid rgba(109,190,69,0.55);
}

.kiwi-faq-item__heading { margin: 0; }

.kiwi-faq-item__question {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 17px 18px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .kiwi-faq-item__question:hover { background: var(--soft); }
}

.kiwi-faq-item__q-text { flex: 1; }

.kiwi-faq-item__sign {
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: transform 200ms var(--ease-in-out);
}

/* The glyph itself is a plain "+" in the markup (app.js no longer swaps its
   text content); rotating it 45deg reads as an "x" when open. On-screen
   rotation is real movement, so it is disabled under prefers-reduced-motion
   in the media query near the top of this file. */
.kiwi-faq-item.is-open .kiwi-faq-item__sign {
  transform: rotate(45deg);
}

/* 07-02: the accordion used to toggle the browser's `hidden` attribute
   (display:none <-> block), which cannot be transitioned, so open/close was
   an instant pop. `.kiwi-faq-item__answer` is now a permanently-rendered
   CSS grid row (0fr collapsed, 1fr open). Three levels, not two: the
   collapsing item (`__answer-inner`, overflow:hidden + min-height:0, so its
   automatic minimum size is genuinely 0 per the CSS Grid spec) must carry
   NO padding of its own -- padding is a fixed addition to the border-box
   regardless of how small the content shrinks, so a padding-bottom placed
   directly on the overflow:hidden element leaves a visible residual gap at
   full "collapse" (measured: 18px leftover, exactly the old padding-bottom
   value, confirmed with Playwright before this fix). Padding lives one
   level deeper, on `__answer-content`, which the outer two elements clip
   away completely at 0fr. */
.kiwi-faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--ease-in-out);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.kiwi-faq-item.is-open .kiwi-faq-item__answer {
  grid-template-rows: 1fr;
}

.kiwi-faq-item__answer-inner {
  overflow: hidden;
  min-height: 0;
}

.kiwi-faq-item__answer-content {
  padding: 0 18px 18px;
}

/* ---- SECT-10: Footer ---- */

.kiwi-footer {
  padding: 40px 18px 132px;
  background: var(--bg3);
  color: var(--muted);
  border-top: 1px solid var(--border);
}

.kiwi-footer__logo { height: 62px; width: auto; display: block; }

.kiwi-footer__info {
  margin-top: 22px;
  display: grid;
  gap: 7px;
  font-size: 14.5px;
}

.kiwi-footer__strong { color: var(--text); }

.kiwi-footer__phone-wrap { margin-top: 12px; }

.kiwi-footer__phone { font-weight: 700; font-size: 18px; }

.kiwi-footer__email { font-weight: 700; }

.kiwi-footer__disclaimer {
  margin: 26px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted2);
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

.kiwi-footer__legal {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted2);
}

/* =========================================================================
   Phase 3: branch cards, map, and the enquiry form.
   ========================================================================= */

/* 11-density-2 client round, sharpest complaint: both branch cards repeated
   the SAME phone number and the SAME Zvanit/WhatsApp button pair, only the
   address differed -- proximity implies relationship, and two identical
   contact blocks wrongly implied two different contacts when there is only
   one. Replaces the old two-card grid (`.kiwi-branch-card` x2, each with its
   own copy of the phone + actions) with ONE shared contact block
   (`.kiwi-branch-contact`, rendered once by scripts/build.mjs's
   renderBranchContact()) plus a compact list of location rows
   (`.kiwi-branch-locations` / `.kiwi-branch-row`, one per branch, from
   renderBranchLocations()), separated by a hairline (`border-top`) rather
   than by card chrome (radius/border/shadow per row). If branches.json ever
   carries DIFFERENT phone numbers per branch, build.mjs detects that and
   omits the shared contact block entirely, falling back to a phone number
   on each row instead (`.kiwi-branch-row__phone`) -- see build.mjs's own
   comment on renderBranchContact/renderBranchLocations for the exact check. */
.kiwi-branch-block {
  margin-top: var(--space-6);
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
}

.kiwi-branch-locations {
  display: flex;
  flex-direction: column;
}

.kiwi-branch-row {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.kiwi-branch-row:last-child { border-bottom: 0; }

.kiwi-branch-row__main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.kiwi-branch-row__pin { flex: 0 0 14px; margin-top: 4px; }

.kiwi-branch-row__info { flex: 1; min-width: 0; }

.kiwi-branch-row__name {
  font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.024em;
}

/* 19-design-qa: "you should have all the working times, not just until X".
   The full schedule now lives on the row itself, under the address, so it is
   visible whether or not the status pill has resolved (and whether or not
   JavaScript ran at all). Muted one step below the address: it is a
   qualifier on the location, not a second address. */
.kiwi-branch-row__hours {
  font-size: 12.5px;
  color: var(--muted2);
  margin-top: 3px;
}

/* 19b client round: "the Slegts is not aligned with the other pills".
   See the desktop rule for .kiwi-branch-row__status; it is scoped to >=1024px
   on purpose. Below that the row STACKS (actions wrap onto their own line under
   the info block), and the pill belongs on the branch name's line, which is
   what `align-items: flex-start` on .kiwi-branch-row__main already gives it.
   Centring it at every width instead pushed it ~19px down the three-line info
   block on mobile, level with the address. Measured across 390/768/1024/1280/
   1440/1920 in all three languages. */

.kiwi-branch-row__addr {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 3px;
}

.kiwi-branch-row__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--tint);
  border: 1px solid var(--tintB);
  color: var(--accentSoft);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}

.kiwi-branch-row__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6DBE45;
  display: block;
}

/* Phase 18 audit: src/app.js adds this modifier once it has checked the
   visitor's actual Riga local time and found the branch closed (outside
   10:00-21:00). The green "open" dot would otherwise read as a permanent,
   inaccurate "open now" signal outside business hours; muting both the
   dot and the pill's text/background to the existing --muted/--border
   tokens (already used elsewhere on this page for inactive state) reads as
   "closed" without inventing a new colour language for one pill. */
.kiwi-branch-row__status--closed {
  background: var(--borderSoft);
  border-color: var(--border2);
  color: var(--muted);
}

.kiwi-branch-row__status--closed .kiwi-branch-row__status-dot {
  background: var(--muted2);
}

/* Phase 17 content audit: rendered by build.mjs's renderBranchLocations()
   whenever branches.json carries different phone numbers per branch (true
   today: Akropole Riga and Akropole Alfa have different real numbers). Each
   branch gets its own call button (phone number, always) and, only where
   branches.json's 'wa' field is present for that branch, a WhatsApp button
   too -- the live site exposes WhatsApp for Akropole Riga only, so Alfa's
   row renders the call button alone. Kept compact (small pill buttons under
   the existing address/status row) rather than a second full contact card,
   since the client's original complaint was duplicated CARD CHROME, not the
   presence of a phone number on each row. */
.kiwi-branch-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-left: 24px;
}

.kiwi-branch-row__call,
.kiwi-branch-row__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  transition: transform var(--dur-press) var(--ease-out);
}

.kiwi-branch-row__call:active,
.kiwi-branch-row__whatsapp:active {
  transform: scale(0.96);
}

.kiwi-branch-row__call {
  background: var(--accentFill);
  color: var(--onAccent);
}

.kiwi-branch-row__whatsapp {
  background: var(--waBg);
  border: 1px solid var(--waBorder);
  color: var(--waText);
  font-weight: 700;
}

.kiwi-branch-row__links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  margin-left: 24px;
}

.kiwi-branch-row__waze,
.kiwi-branch-row__maps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  transition: opacity 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .kiwi-branch-row__waze:hover,
  .kiwi-branch-row__maps:hover {
    opacity: 0.75;
  }
}

.kiwi-branch-row__waze { color: var(--accent); }
.kiwi-branch-row__maps { color: var(--muted); }

.kiwi-branch-row__divider {
  width: 1px;
  height: 14px;
  background: var(--border2);
}

/* ---- BRANCH-02: embedded map, theme-tinted, switches branch client-side ---- */

/* ---- CONV-01..10: enquiry form ---- */

.kiwi-pieteikums {
  border-top: 1px solid var(--borderSoft);
  padding: 42px 18px 44px;
  background: var(--bg);
}

.kiwi-pieteikums__kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.kiwi-pieteikums__h2 {
  font-size: 35px;
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 14px 0 0;
  font-weight: 700;
}

.kiwi-pieteikums__p {
  margin: 14px 0 0;
  font-size: 15.5px;
  color: var(--muted);
}

.kiwi-form {
  margin-top: 24px;
  display: grid;
  gap: 22px;
  padding: 24px 22px 26px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
}

/* Since .kiwi-form sets its own `display`, an author rule beats the
   user-agent's `[hidden] { display: none }` rule at equal specificity.
   Restate it explicitly so the CONV-09 success/failure swap (which toggles
   the `hidden` attribute on this exact element) actually hides the form. */
.kiwi-form[hidden] { display: none; }

.kiwi-form__group-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accentSoft);
  margin-bottom: 11px;
  letter-spacing: 0.04em;
}

.kiwi-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.kiwi-form__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.kiwi-form__fields {
  display: grid;
  gap: 9px;
}

.kiwi-form__field { display: grid; gap: 0; }

.kiwi-form__input {
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  width: 100%;
  border: 1px solid var(--border2);
  background: var(--soft);
  color: var(--text);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.kiwi-form__textarea {
  min-height: 94px;
  padding: 15px 16px;
  line-height: 1.45;
  resize: vertical;
}

.kiwi-form__input.has-error {
  border-color: var(--errorBorder);
  background: var(--errorBg);
}

.kiwi-form__error {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--error);
}

.kiwi-form__consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.kiwi-form__consent input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: 0 0 22px;
  accent-color: var(--accent);
}

.kiwi-form__submit {
  min-height: 58px;
  border: 0;
  border-radius: 15px;
  background: var(--accentFill);
  color: var(--onAccent);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), opacity 160ms ease, box-shadow 160ms ease;
}

.kiwi-form__submit:not(:disabled):active { transform: scale(0.97); }

.kiwi-form__submit:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  box-shadow: none;
}

.kiwi-form__mailto {
  font-size: 12.5px;
  color: var(--muted2);
  text-align: center;
}

/* ---- CONV-09: success / failure result cards ---- */

.kiwi-form-result {
  margin-top: 24px;
  padding: 28px;
  border-radius: 20px;
  background: var(--cardAccent);
  border: 1px solid var(--tintB);
}

.kiwi-form-result--failure {
  border: 1px solid var(--errorBorder);
  background: var(--card);
}

.kiwi-form-result__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accentFill);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 34px rgba(109,190,69,0.5);
}

.kiwi-form-result__icon--failure {
  background: var(--error);
  box-shadow: 0 0 34px var(--errorBorder);
}

.kiwi-form-result__title {
  font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
  font-size: 25px;
  font-weight: 700;
  margin-top: 18px;
  letter-spacing: -0.03em;
}

.kiwi-form-result__body {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted);
}

.kiwi-form-result__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

.kiwi-form-result__call,
.kiwi-form-result__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  transition: transform var(--dur-press) var(--ease-out);
}

.kiwi-form-result__call:active,
.kiwi-form-result__whatsapp:active {
  transform: scale(0.97);
}

.kiwi-form-result__call {
  background: var(--accentFill);
  color: var(--onAccent);
}

.kiwi-form-result__whatsapp {
  background: var(--waBg);
  border: 1px solid var(--waBorder);
  color: var(--waText);
  font-weight: 700;
}

.kiwi-form-result__retry {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: var(--borderSoft);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), background-color 160ms ease;
}

.kiwi-form-result__retry:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .kiwi-form-result__retry:hover { background: var(--border2); }
}

/* =========================================================================
   Phase 6 (06-02/06-03): Desktop layout, RESP-01..05.

   Approach (mobile-first, per the executor brief): every rule in this block
   lives inside a `min-width` media query, so nothing here can change the
   390px composition unless a selector is also touched by JS or an
   above-the-fold base rule. New DOM elements this plan adds (desktop-only
   header nav/phone/CTA, the delivery courier CTA, the pieteikums
   "contact us directly" block) are NOT present in the approved MOBILE
   design (Serviss Landing v2.dc.html; verified by grep, see 06-02-03
   summary) and default to `display:none` immediately below, so they add
   zero visual footprint below the desktop breakpoint.

   Breakpoints chosen (not given by either design; the mobile artboard stops
   at ~520px, the desktop artboard starts at a fixed 1440px/1280-container
   preview, and the roadmap explicitly calls the gap between them out as
   this plan's real engineering work):

   - 1024px ("desktop layout switch"): every section flips from the mobile
     single-column card to the desktop CSS-Grid composition; the sticky
     bottom bar is suppressed (RESP-02, justified below); the header grows
     a section-nav row and keeps its mobile-style call/WhatsApp icon
     buttons (never hidden, so COMP-04 holds at every desktop width).
     Below 1024px the existing mobile "card" (max-width: 520px, centered)
     simply gets more surrounding whitespace as the viewport widens; that
     is a deliberately boring, safe intermediate state -- it cannot
     overflow (a narrower fixed-width box never overflows a wider
     viewport) and it is never "neither composition": it is exactly the
     approved mobile composition, just not edge-to-edge. This is what
     covers the 700-1100px tablet band the brief calls out as uncovered by
     either design.
   - 1280px ("full desktop header"): the header additionally reveals the
     desktop design's own phone-number-as-link + hours text + "Pieteikt
     ierīci" CTA button, once the full 1280px container genuinely has the
     room the design assumes. Measured necessary because the combined
     width of logo + 4 nav links + lang switcher + phone block + WhatsApp
     icon + CTA button does not reliably fit before the container itself
     reaches 1280px (see 06-02-03 summary for the boundary tests at
     1279/1280px).

   RESP-02 (sticky bottom bar): the desktop design has no fixed bottom bar
   at all -- it is a phone-only pattern in the mobile design, and the
   desktop header already carries a permanent call icon button and a
   WhatsApp icon button (never hidden by any rule below), so COMP-04
   ("call/WhatsApp reachable without scrolling") is satisfied by the
   header alone from 1024px up. The bottom bar is suppressed at exactly
   the same 1024px breakpoint the rest of the layout switches at, not a
   separate one, so there is never a mid-range width with neither the
   bottom bar nor a header action visible.
   ========================================================================= */

:root {
  --container-pad: max(40px, calc((100% - 1280px) / 2));
}

/* ---- New desktop-only elements: hidden by default (mobile-first) ---- */
.kiwi-header__nav,
.kiwi-header__phones,
.kiwi-pieteikums__altcontact {
  display: none;
}

/* Wrapper added purely so FAQ's h2+p can become one sticky unit at desktop.
   display:contents removes it from the box model entirely below the
   desktop breakpoint, so mobile's existing .kiwi-faq__h2/.kiwi-faq__p
   layout and CSS are completely unaffected by its presence in the DOM. */
.kiwi-faq__head {
  display: contents;
}

@media (min-width: 1024px) {
  /* ---- RESP-02: bottom bar suppressed; header carries reachability ---- */
  .kiwi-bottombar { display: none; }
  .kiwi-shell { padding-bottom: 0; max-width: none; }

  /* ---- Header: fluid, centered, capped at 1280px content ---- */
  .kiwi-header {
    padding: 12px var(--container-pad);
    gap: 20px;
    flex-wrap: nowrap;
  }

  /* 10-density: this nav is the ONLY wayfinding desktop gets (RESP-02
     suppresses the mobile bottom bar entirely at this width, see above), so
     it stays -- a long single-page site with no jump links and no bottom
     bar would leave a desktop visitor with nothing but the scrollbar. What
     changes is its weight: smaller, lighter-weight, muted-colored text
     (matching the header's other secondary controls) instead of near-full-
     strength body color at 600 weight, so it reads as a quiet utility row
     rather than another competing headline-weight element in the busiest
     part of the page. */
  .kiwi-header__nav {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 4px;
  }

  .kiwi-header__nav a {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    transition: color 160ms ease;
  }
  .kiwi-header__nav a:hover { color: var(--accent); }

  /* ---- RESP-05: anchors clear the taller desktop header ---- */
  #cenas, #pieteikums, #branches, #faq, #process {
    scroll-margin-top: 90px;
  }

  /* =======================================================================
     Hero: 2-column grid, image on the right, spanning every row of the
     text column (design's own single-row 2-col grid, reproduced here as
     named areas so the existing DOM order does not need to change).

     10-density: every gap below now comes from the shared --space-* scale
     (defined near the top of this file) instead of its own one-off value.
     Reference (../reference/ilab-top.png) fits rating pill through subtitle
     in about 700px of vertical space below its header; this build carried
     the same content plus a locations row and a 4-badge trust row the
     reference doesn't show, in roughly 900px, past the fold at a realistic
     900px-tall browser window once real browser chrome (tabs/address bar)
     is subtracted from that height. Real, measured before/after numbers for
     every change below are in ../.planning/phases/10-density/10-SUMMARY.md.
     ======================================================================= */
  .kiwi-hero__inner {
    padding: var(--space-9) var(--container-pad) var(--space-10);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    column-gap: 72px;
    align-items: center;
    grid-template-areas:
      "badge image"
      "h1 image"
      "sub image"
      "branches image"
      "ctas image"
      "trust image";
  }
  .kiwi-hero__badge { grid-area: badge; justify-self: start; }
  .kiwi-hero__h1 { grid-area: h1; font-size: 74px; letter-spacing: -0.045em; margin-top: var(--space-5); }
  /* 10-density: the fixed `max-width: 30ch` below capped this box at 384px
     regardless of the grid column it actually sits in (measured: 616px wide
     at 1440), which is the real reason the LV/EN subtitle wrapped to 2 lines
     while its own column had another 230px of unused room to its right --
     not a font-size or column-width problem. Removing the cap lets the
     paragraph use its actual grid-area width (a <p> already stretches to
     fill a grid cell by default), matching the reference's one-line
     subtitle for LV/EN. RU's string is long enough (measured 739px at this
     font-size, wider than the 616-890px column at every desktop width) that
     it still wraps to 2 lines even with the cap gone; see the SUMMARY for
     the measured numbers in all three languages. */
  .kiwi-hero__subtitle { grid-area: sub; font-size: 20px; margin-top: var(--space-4); }
  .kiwi-hero__branches { grid-area: branches; margin-top: var(--space-4); }
  .kiwi-hero__branch-pill, .kiwi-hero__and { font-size: 18px; }
  .kiwi-hero__ctas { grid-area: ctas; grid-template-columns: auto auto; margin-top: var(--space-6); }
  .kiwi-hero__cta-primary, .kiwi-hero__cta-secondary { min-height: 60px; padding: 0 34px; font-size: 17px; }
  /* 09-refinement: "the desktop hero does not even fit all the trust
     badges" -- the mobile 2x2 grid (base rule, 1fr 1fr) was reused unchanged
     at desktop, and at the hero's own left-column width that overflowed its
     column at 1280/1440/1920. The client's reference (../reference/riga-
     ilab-top.png) puts all four badges in ONE horizontal row with real
     breathing room between them, so this switches to a genuine 4-column row
     instead of trying to rescue the 2x2 grid. Icon/type sizes below are
     trimmed from the mobile values (44px icon, 15/13px type) to fit four
     columns without wrapping the title, matching the reference's own
     smaller, quieter badge treatment; `min-width: 0` on the text column is
     required so a long label can still wrap onto its own second line
     instead of forcing the column wider than its 1fr share (verified: no
     overflow at 1280/1440/1920, see 09-SUMMARY.md).

     10-density: margin-top and padding-top both trimmed one step down the
     scale (see file header); the divider border is kept (it is doing real
     work separating "what you get" from "what to do next", not decoration). */
  .kiwi-hero__trust-grid {
    grid-area: trust;
    /* 19-design-qa: 4-across starts at 1440, not here. Measured at 1280: the
       hero's left column is 568px, so four badges get 142px each and the text
       column 87px, while LV "prieksapmaksas" is a single unbreakable 95px
       word. It clipped (caught in the light theme, where the overflow is
       visible against white). Shrinking type and icon to close an 8px gap
       leaves no headroom for the next translation, so this drops to 2x2 at
       1024-1439 and keeps the 4-up row only where it genuinely fits. The
       09-refinement complaint that produced the 4-up row was "the desktop
       hero does not even fit all the trust badges", i.e. overflow; a 2x2 at
       1280 does not overflow, so that fix is not being undone here. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--borderSoft);
    /* 19-design-qa: measured, not guessed. At 1440 the hero left column is
       616px, so at gap:18 / icon:38 / 13.5px each badge had 93px of text
       width while LV "prieksapmaksas" needs 99px, and the fourth badge
       overflowed the row (visible clip on the light theme). Trimming the gap
       to 14 and the icon to 34 gives 99.5px and the type down to 13px puts
       the longest word at ~95px, with the same headroom checked against the
       longest word in each of the other two languages. */
    gap: 0 14px;
  }
  .kiwi-hero__trust-item { align-items: flex-start; gap: 10px; }
  .kiwi-hero__trust-icon { flex: 0 0 34px; height: 34px; }
  /* 19-design-qa: `min-width: 0` is still required so a long label wraps
     inside its 1fr share instead of forcing the column wider (see the
     4-column note above). The 2-line reservation that used to live on
     .kiwi-hero__trust-sub moves here, for the same reason it existed: at
     this column width every badge's phrase breaks onto a second line in at
     least one of the three languages, and reserving the height on all four
     keeps the row's baselines level whichever language is showing. */
  .kiwi-hero__trust-text {
    font-size: 13.5px;
    line-height: 1.35;
    min-height: 2.7em;
    /* Last-resort guard. Every current string in all three languages fits
       without it (verified by scrollWidth at 1024/1280/1440/1920), but a
       longer word in a future translation should break rather than clip. */
    overflow-wrap: break-word;
  }
  /* Phase 8 client round: no border/border-radius here on purpose -- the
     cutout has no rectangle to frame at any breakpoint, mobile or desktop.

     10-density: dropped from 640px. This wrapper spans every row of the
     text column as one grid item (see grid-template-areas above); CSS
     Grid's auto-row sizing distributes whatever extra height a spanning
     item needs across every row it spans, so at 640px tall this was
     silently re-inflating the badge/h1/sub/branches/ctas/trust gaps back
     out again no matter how far their own margins were trimmed above --
     measured directly: trimming ~76px of margin only moved the last badge
     up ~31px, not ~76, because the grid kept stretching those same rows
     back out to sum to 640px. 500px is close to the tightened text
     column's own natural height (measured ~480px), so the column now
     governs the row heights instead of the image fighting it. */
  .kiwi-hero__image-wrap { grid-area: image; margin: 0; height: 500px; }

  /* =======================================================================
     Brand marquee: label stays stacked above the strip (same order as
     mobile), just with desktop padding.
     12-client-round-3: 34px was the ODD ONE OUT among this file's desktop
     sections -- every sibling (.kiwi-cenas, .kiwi-process, .kiwi-reviews,
     .kiwi-branches, etc.) already runs var(--space-11)/var(--space-12)
     top/bottom padding from the 10-density spacing-scale pass; this section
     was apparently missed then, and reads visibly more cramped than its
     neighbors as a result at desktop, on top of the client's named mobile
     complaint. Brought in line with the rest of the file. Internal gaps
     bumped one rung each, same idea as the mobile rule above.
     ======================================================================= */
  .kiwi-brands { padding: var(--space-11) var(--container-pad) var(--space-12); }
  .kiwi-marquee-wrap { margin: var(--space-7) 0 0; }
  .kiwi-brands__disclaimer { margin-top: var(--space-6); }

  /* 09-refinement (client round, superseded by 11-density-2 below): two bugs
     were fixed together here. (1) a prior round wrongly stopped the
     animation at desktop; restored the same two-group seamless loop mobile
     already used. (2) "the same logo appears twice on screen" at 1440px --
     with only 5 real logos, a narrow gap makes one full group barely ~700px
     wide, far short of a 1440-1920px viewport, so the seamless-loop
     duplicate group was already on screen before the first group scrolled
     past. That round's fix was to widen the gap to 340px so one group's real
     span (~2160px) exceeded every tested viewport, so no single logo could
     ever appear twice at once.

     11-density-2 client round: the OPPOSITE complaint arrived next --
     "only three or four logos are visible across 1440px... the strip reads
     as empty". A 340px gap between only 5 logos is exactly why: it spread
     them so thin that a 1440-1920px viewport showed less than one full
     group's worth of logos on screen. Per the task spec, gap and
     padding-right both go to the shared --space-9 (48px) token (see the
     base mobile rule above, which this now matches exactly, so there is one
     spacing decision instead of two). This deliberately reopens the
     multiple-repeats-visible situation rule (2) above fixed away: at the
     new, much narrower ~700px group span, 2 full groups' worth of logos are
     visible at once on a 1440-1920px screen. That is normal, expected
     marquee behavior (any sponsor/logo strip shorter than the viewport
     shows more than one repeat), not the bug the 09-refinement note
     describes -- that bug was a single group's own duplicate wrap-copy
     appearing prematurely mid-scroll, not multiple genuine repeats of a
     short sequence sitting side by side. Measured and reported in
     11-SUMMARY.md rather than assumed. */
  .kiwi-marquee__group { gap: var(--space-9); padding-right: var(--space-9); }
  .kiwi-marquee__logo { width: auto; }
  .kiwi-marquee__logo--apple { height: 44px; }
  .kiwi-marquee__logo--samsung { height: 24px; }
  .kiwi-marquee__logo--xiaomi { height: 26px; }
  .kiwi-marquee__logo--huawei { height: 46px; }
  .kiwi-marquee__logo--google { height: 46px; }

  /* 10-density: every desktop section below this point (speed, cenas,
     process, reviews, branches, delivery, pieteikums, faq) shared one
     84px-top/92px-bottom padding pair, on top of which the hero above was
     also over-spaced. The client's complaint was about the page as a
     system, not just the hero being the most visible offender, so every one
     of these now draws its top/bottom padding from the same --space-11
     (64px) / --space-12 (72px) pair as the hero uses elsewhere in this
     file, instead of each section keeping its own copy of the old number.
     Internal section layout (grids, card spacing, type sizes) is
     unchanged: this pass is bounded to outer rhythm, per the "no content
     cuts, no section deletions" constraint. =======================================================================
     Speed strip: header row (h2|p), then 3 individual fact cards. The
     existing single "card with 3 rows" markup becomes the facts grid
     container; each row becomes its own visual card via CSS only.

     14-style client round: "this section also should be formatted like I
     keep asking with the icons next to the text not above it" -- the
     previous desktop rule stacked the icon above the number/label
     (margin-bottom on the icon, `display: block` on every text line). Icon
     is now beside the content again, vertically centred, the same flex-row
     recipe the mobile .kiwi-speed__row already used and the hero's own
     trust badges use (kept consistent, per the brief). Card padding
     dropped along with the row's own height now that there is no stacked
     icon reserving vertical space above the text -- see 14-SUMMARY.md for
     the measured before/after card heights.
     ======================================================================= */
  .kiwi-speed {
    padding: var(--space-11) var(--container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    align-items: end;
    grid-template-areas: "h2 p" "card card";
  }
  .kiwi-speed__h2 { grid-area: h2; font-size: 48px; letter-spacing: -0.042em; }
  .kiwi-speed__p { grid-area: p; font-size: 18px; max-width: 46ch; margin-top: 0; }
  .kiwi-speed__card {
    grid-area: card;
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .kiwi-speed__row {
    display: flex;
    align-items: center;
    gap: 22px;
    border-top: 0;
    padding: 26px 26px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
  }
  .kiwi-speed__icon { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 0; flex: 0 0 56px; }
  .kiwi-speed__text { flex: 1; }
  .kiwi-speed__n { font-size: 32px; }
  .kiwi-speed__t { margin-left: 8px; margin-top: 0; font-size: 17px; }
  .kiwi-speed__s { margin-top: 6px; font-size: 14.5px; }

  /* =======================================================================
     Price explorer: header row, tabs, then damage-list (420px) beside a
     sticky detail card whose own photo/body split into 2 columns.
     ======================================================================= */
  .kiwi-cenas {
    padding: var(--space-11) var(--container-pad) var(--space-12);
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    grid-template-areas:
      "kicker right"
      "h2 right"
      "tabs tabs"
      "panels card"
      "disclaimer disclaimer";
  }
  .kiwi-cenas__kicker { grid-area: kicker; }
  .kiwi-cenas__h2 { grid-area: h2; font-size: 48px; letter-spacing: -0.042em; margin-top: 18px; }
  .kiwi-cenas__p { grid-area: right; align-self: end; font-size: 18px; max-width: 50ch; margin-top: 0; }
  .kiwi-price-tabs { grid-area: tabs; margin-top: 40px; overflow-x: visible; flex-wrap: wrap; }
  /* 12-client-round-3: "panels" and "card" share the same grid row
     ("panels card" in grid-template-areas above). .kiwi-cenas sets
     `align-items: start` for the row as a whole (correct for every OTHER
     area: kicker/h2/right/tabs/disclaimer are plain text blocks that should
     stay top-aligned, and .kiwi-cenas__p already opts itself out with its
     own `align-self: end`). `align-self: stretch` here does the same kind
     of per-item opt-out, but the other way: it makes the shorter of these
     two items grow to match the row's height. The damage-picker list's own
     height is constant within a category (always shows every damage in
     that category). */
  [data-price-panels] { grid-area: panels; margin-top: 24px; align-self: stretch; }
  .kiwi-damage-list { gap: 10px; }
  .kiwi-damage-item { min-height: 76px; padding: 16px 22px; border-radius: 16px; gap: 14px; }
  .kiwi-damage-item__title { font-size: 17.5px; }
  .kiwi-damage-item__sub { font-size: 14px; }
  /* 12-client-round-3: CSS Grid's `auto` row sizing always takes the TALLER
     of the two intrinsic contents sharing a row, and measurably, the
     card's own intrinsic content differs per DAMAGE (some carry 3 price
     rows, others 1), not just per category -- so with the card itself as
     the direct grid item, the row height (and both stretched items) kept
     changing every time a different damage inside the SAME category was
     picked, in whichever direction the card's content happened to swing.
     Fix: `.kiwi-cenas__card-slot`, not `.kiwi-price-card`, is the actual
     grid item now. Its only child (.kiwi-price-card) is absolutely
     positioned (`inset: 0`, see below), which takes it OUT of normal flow
     entirely, so the slot's own natural/intrinsic content height is 0 --
     it contributes nothing to the row's auto-sizing. The row's height
     therefore comes ONLY from [data-price-panels]'s own (genuinely
     category-constant) content, `align-self: stretch` grows the slot to
     match it, and the absolutely-positioned card fills that stretched slot
     exactly via `inset: 0`. `position: sticky` moves here too (sticky
     still needs to apply to something that stays in-flow as the page
     scrolls; a `position: sticky` element also establishes the containing
     block an absolutely-positioned descendant sizes against, so the card
     inside still sizes and sticks correctly). */
  /* Client feedback 2026-09-11: the card visibly drifted against the damage
     picker while scrolling the section. Cause was `position: sticky; top: 108px`
     here (carried over from the desktop design's sticky detail panel): the slot
     detached at the offset and floated while the picker beside it scrolled on.
     `relative` still establishes the containing block the absolutely-positioned
     .kiwi-price-card sizes against (see the note above), so the inset:0 fill and
     the category-constant row height are both unaffected; only the drift is gone. */
  .kiwi-cenas__card-slot {
    grid-area: card;
    margin-top: 24px;
    align-self: stretch;
    position: relative;
  }
  .kiwi-price-card {
    /* Cancels the mobile base rule's `margin-top: 20px`: with `inset: 0` on
       all four sides below, a leftover non-zero margin would eat into the
       slot's stretched height instead of the card filling it exactly. The
       24px gap the mobile margin used to provide now lives on
       .kiwi-cenas__card-slot above, the element actually in normal flow. */
    margin-top: 0;
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    grid-template-areas: "body photo";
    box-shadow: 0 30px 70px rgba(0,0,0,0.4);
  }
  .kiwi-price-card__photo { grid-area: photo; height: auto; min-height: 100%; }
  /* 07-02: reverted to `cover` now that a real photo (price-detail.webp) is
     wired in. The `contain` override this rule used to carry was a
     placeholder-era-only fix (see git history / 05/06 SUMMARYs): the SVG
     placeholder baked its own caption text into the image, and under
     `cover` CSS Grid's item-stretch (this column's height matches the
     often-much-taller body column, varying per damage entry) zoomed that
     caption down to an unreadable fragment. A real photo carries no baked
     text, so `cover` is correct again: it fills the full-height column at
     every damage entry instead of letterboxing a real photograph, which
     would read as a bug, not a design choice. Mobile's fixed 200px photo
     height already used `cover` throughout (src/styles.css base rule) and
     was never affected either way. */
  .kiwi-price-card__photo img { object-fit: cover; }
  .kiwi-price-card__body { grid-area: body; padding: 36px 34px 38px; }
  /* 12-client-round-3: replaces the old fixed `min-height: 560px` here (see
     the base-rule comment on .kiwi-price-detail__card above for why that
     was removed). `.kiwi-price-card__body` already receives a definite
     height from `.kiwi-price-card`'s own grid (default `align-items:
     stretch`, unchanged, is what already stretches `.kiwi-price-card__photo`
     to match it too, see that rule above). `.kiwi-price-detail__card` is
     just an ordinary block element inside that body, though, and a block
     element does not fill a definite-height parent on its own -- it needs
     `height: 100%` to actually consume it. With that in place, the currently
     active card fills exactly the space the OUTER grid row handed to
     `.kiwi-price-card` in the first place (the damage-picker column's own
     height, within a category), and `.kiwi-price-card__photo`'s existing
     stretch keeps the photo matching that same final height, so the whole
     sticky card is one height across every damage IN A GIVEN CATEGORY, and
     only changes when the category itself changes. */
  .kiwi-price-detail__card { height: 100%; }
  /* 12-client-round-3: src/app.js's applyCategoryHeightFloor() temporarily
     un-hides every card in a category to measure its true natural content
     height (to guard against the picker column alone not being tall
     enough for its own category's cards, see that function's own comment).
     `height: auto` overrides the rule above for that instant so the
     measurement reflects genuine content need, not whatever height the
     slot happens to be mid-recalculation. */
  .kiwi-price-detail__card.is-measuring { height: auto !important; }
  .kiwi-price-detail__title { font-size: 38px; margin-top: 22px; }
  .kiwi-price-detail__bullet { font-size: 16px; }
  .kiwi-price-detail__row-label { font-size: 15.5px; }
  .kiwi-price-detail__row-price { font-size: 18px; }
  .kiwi-cenas__disclaimer { grid-area: disclaimer; margin-top: 20px; }

  /* =======================================================================
     Process: header row (h2|p), then the timeline below it, entirely via
     named areas on the existing .kiwi-process__content children.

     16-timeline: desktop swaps orientation, not markup. The rail becomes
     ONE spanning bar (.kiwi-timeline__rail, hidden on mobile where each
     step draws its own connecting segment instead -- see the base rule
     comment for why mobile needs per-segment anchoring but desktop does
     not). It can be one plain bar here because every marker sits at the
     exact same y (`top: 19px`, the vertical centre of the 40px marker) --
     markers are always each step's first child, top-aligned, so unequal
     body-copy line counts across the four columns never move a marker off
     that shared line. `left: 20px; right: 20px` insets it by exactly the
     marker's own radius, so the bar starts/ends at the outer edges of the
     first and last marker's centres, not the section's outer padding.
     The bar's gradient (faint border colour -> solid accent) is the same
     "arrival" cue as the last marker's solid fill below: one continuous,
     restrained signal of direction, using only existing tokens. */
  .kiwi-process { padding: var(--space-11) var(--container-pad) var(--space-12); }
  .kiwi-process__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    align-items: end;
    grid-template-areas: "h2 p" "steps steps";
  }
  .kiwi-process__h2 { grid-area: h2; font-size: 48px; letter-spacing: -0.042em; }
  .kiwi-process__p { grid-area: p; font-size: 18px; margin-top: 0; }
  .kiwi-timeline {
    grid-area: steps;
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 32px;
  }
  .kiwi-timeline__rail {
    display: block;
    position: absolute;
    top: 19px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--border2) 0%, var(--accentFill) 100%);
    z-index: 0;
  }
  .kiwi-timeline__step { display: block; padding-bottom: 0; }
  .kiwi-timeline__step:not(:last-child)::before { display: none; }
  .kiwi-timeline__marker { margin-bottom: 26px; }
  .kiwi-timeline__title { font-size: 20px; margin-top: 0; }
  .kiwi-timeline__text { font-size: 15px; }

  /* =======================================================================
     Reviews: header row (Google Reviews lockup | rating) using the existing
     .kiwi-reviews__head wrapper, then the 3-up carousel
     (--kiwi-reviews-per-page: 3 at this same 1024px threshold, set on
     .kiwi-reviews itself above).
     ======================================================================= */
  .kiwi-reviews { padding: var(--space-11) var(--container-pad) var(--space-12); }
  /* 19-design-qa: the 2-column header row is gone with the lockup it was
     built for. Title and score now read top-to-bottom on one left edge, so
     the first thing the eye meets after the section title is the number. */
  .kiwi-reviews__head { text-align: left; }
  .kiwi-reviews__eyebrow { margin-bottom: 14px; }
  .kiwi-reviews__score-row { justify-content: flex-start; gap: 20px; }
  .kiwi-reviews__score { font-size: 84px; }
  .kiwi-reviews__count { font-size: 15px; }
  .kiwi-reviews__source { font-size: 13px; }
  .kiwi-reviews__carousel { margin-top: 36px; gap: 14px; }

  /* =======================================================================
     Branches: header row (h2|p), ONE shared contact bar + a compact
     location list (11-density-2 redesign, see the block comment on
     .kiwi-branch-block above), taller map iframe.
     ======================================================================= */
  .kiwi-branch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 30px;
  }
  .kiwi-branch-row__main { flex: 1; min-width: 0; }
  /* 19b: at this breakpoint the row is one horizontal line, so the status pill
     shares it with the call button and the Waze/Maps links. It was inheriting
     .kiwi-branch-row__main's `align-items: flex-start` (correct for the pin,
     which should sit on the branch name's line) and riding ~12px above
     everything it lines up with. Centring only the pill leaves the pin alone. */
  .kiwi-branch-row__status { align-self: center; }
  .kiwi-branch-row__actions { margin-top: 0; margin-left: 0; }
  .kiwi-branch-row__links { margin-top: 0; margin-left: 0; flex: 0 0 auto; }

  /* =======================================================================
     Delivery: 2-column (text+CTA | delivery steps).
     ======================================================================= */
  .kiwi-delivery {
    padding: var(--space-11) var(--container-pad) var(--space-12);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 72px;
    align-items: start;
    grid-template-areas: "kicker list" "h2 list" "p list" "cta list";
  }
  .kiwi-delivery__kicker { grid-area: kicker; }
  .kiwi-delivery__h2 { grid-area: h2; font-size: 48px; letter-spacing: -0.042em; }
  .kiwi-delivery__p { grid-area: p; font-size: 18px; max-width: 42ch; margin-top: 22px; }
  .kiwi-delivery__cta {
    grid-area: cta;
    order: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 32px;
    border-radius: 15px;
    background: var(--accentFill);
    color: var(--onAccent);
    font-size: 16.5px;
    font-weight: 800;
    margin-top: 32px;
    width: fit-content;
    transition: transform var(--dur-press) var(--ease-out);
  }
  .kiwi-delivery__cta:active { transform: scale(0.97); }
  .kiwi-delivery__list { grid-area: list; margin-top: 0; }
  .kiwi-delivery__item { padding: 32px 34px; gap: 22px; }
  .kiwi-delivery__title { font-size: 20px; }
  .kiwi-delivery__body { font-size: 16px; }

  /* =======================================================================
     Enquiry form: 2-column (info+altcontact | form/result), form/result
     cards share one grid area since only one of the three is ever visible
     (the other two carry `hidden`, which removes them from grid layout).
     ======================================================================= */
  .kiwi-pieteikums {
    padding: var(--space-11) var(--container-pad) var(--space-12);
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 72px;
    align-items: start;
    grid-template-areas: "kicker right" "h2 right" "p right" "alt right";
  }
  .kiwi-pieteikums__kicker { grid-area: kicker; }
  .kiwi-pieteikums__h2 { grid-area: h2; font-size: 48px; letter-spacing: -0.042em; }
  .kiwi-pieteikums__p { grid-area: p; font-size: 18px; max-width: 38ch; margin-top: 0; }
  .kiwi-pieteikums__altcontact {
    grid-area: alt;
    display: grid;
    gap: 14px;
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--borderSoft);
  }
  .kiwi-pieteikums__altlabel { font-size: 14px; font-weight: 700; color: var(--muted2); letter-spacing: 0.04em; }
  /* 19-design-qa: this was a single 30px number, Akropole Rīga's, sitting
     under a form whose first question is which branch you want. Two entries
     now, each labelled. The number steps down from 30px to 22px because
     there are two of them and because the label above each one is now
     carrying part of the weight; the pair still reads louder than the
     WhatsApp and email lines beneath. */
  /* 19b: each branch is a block of its own, number plus that branch's
     WhatsApp, so neither action has to stand for both workshops. */
  .kiwi-pieteikums__altbranch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .kiwi-pieteikums__altbranchwa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--waBg);
    border: 1px solid var(--waBorder);
    color: var(--waText);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: opacity 160ms ease;
  }
  .kiwi-pieteikums__altphone {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    transition: opacity 160ms ease;
  }
  .kiwi-pieteikums__altphone-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .kiwi-pieteikums__altphone-branch {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted2);
  }
  .kiwi-pieteikums__altphone-num {
    font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  .kiwi-pieteikums__altwa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--accent);
    transition: opacity 160ms ease;
  }
  .kiwi-pieteikums__altemail { font-size: 16.5px; font-weight: 700; transition: opacity 160ms ease; }
  .kiwi-pieteikums__altphone:hover,
  .kiwi-pieteikums__altwa:hover,
  .kiwi-pieteikums__altemail:hover {
    opacity: 0.75;
  }
  .kiwi-form, .kiwi-form-result { grid-area: right; margin-top: 0; padding: 40px 38px 42px; }
  .kiwi-form-result { padding: 44px 40px 46px; }

  /* =======================================================================
     FAQ: sticky question column (h2+p) beside a 2-column-wide answer list.
     ======================================================================= */
  .kiwi-faq {
    padding: var(--space-11) var(--container-pad) var(--space-12);
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 72px;
    align-items: start;
  }
  /* RESP-01 fix: display:contents (mobile default) removes .kiwi-faq__head
     from the box model, so its children (h2, p) become direct grid items
     instead of one unit -- that auto-placed h2 into column 1 and p into
     column 2, leaving .kiwi-faq__list alone in row 2 column 1 and the
     entire right column empty. Restoring a real display here makes
     .kiwi-faq__head itself the single column-1 grid item (heading+subtitle
     together, sticky), so .kiwi-faq__list auto-places into column 2 and
     fills it. */
  .kiwi-faq__head { display: block; position: sticky; top: 108px; }
  .kiwi-faq__h2 { font-size: 48px; letter-spacing: -0.042em; text-wrap: pretty; }
  .kiwi-faq__p { font-size: 18px; max-width: 34ch; margin-top: 22px; }
  .kiwi-faq__list { margin-top: 0; gap: 10px; }
  .kiwi-faq-item__question { min-height: 72px; padding: 20px 26px; font-size: 18.5px; }
  .kiwi-faq-item__answer { font-size: 17px; max-width: 68ch; }
  .kiwi-faq-item__answer-content { padding: 0 26px 24px; }

  /* =======================================================================
     Footer: logo+disclaimer beside the info list, legal line full width.
     (The desktop design further splits the info list into two labeled
     sub-columns ("Darbnīcas" / "Saziņa"); not replicated here since it
     needs new markup this plan's scope did not call for touching, and
     footer is not one of RESP-01's named required sections -- documented
     in 06-02-03-SUMMARY.md as a deliberate, lower-priority simplification.)
     ======================================================================= */
  .kiwi-footer {
    padding: 72px var(--container-pad) 56px;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: 64px;
    grid-template-areas: "logo info" "disclaimer info" "legal legal";
  }
  .kiwi-footer__logo { grid-area: logo; }
  .kiwi-footer__disclaimer { grid-area: disclaimer; border-top: 0; padding-top: 0; margin-top: 22px; max-width: 46ch; }
  .kiwi-footer__info { grid-area: info; align-self: start; margin-top: 0; }
  .kiwi-footer__legal { grid-area: legal; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--border); }
}

/* =========================================================================
   19-design-qa: the hero's 4-across trust row, restored only at the width
   that actually holds it. See the .kiwi-hero__trust-grid note in the 1024
   block for the measurement that moved it here.
   ========================================================================= */
@media (min-width: 1440px) {
  .kiwi-hero__trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 14px;
  }
  .kiwi-hero__trust-text { font-size: 13px; }
}

@media (min-width: 1280px) {
  /* ---- Full desktop header: BOTH branch phone numbers ----
     10-density: this used to be a two-line block (number + opening hours)
     followed by a solid green "Pieteikt ierīci" button, the loudest thing
     in the header and a straight duplicate of the hero's own primary CTA
     sitting directly below it. Both were removed (see page.html).

     19-design-qa: what remained was ONE number, Akropole Rīga's, which the
     client caught against the iLab reference ("the reference always shows
     both", ../reference/ilab-top.png, where each workshop gets its own
     labelled number). Two columns now, each naming its branch above its own
     number, generated from src/data/branches.json. The branch label is what
     makes two numbers legible rather than confusing: without it a visitor
     has no way to tell which one to ring. */
  .kiwi-header__phones {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: 4px;
  }
  .kiwi-header__phone {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .kiwi-header__phone-branch {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted2);
    margin-bottom: 2px;
  }
  .kiwi-header__phone-num {
    font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    white-space: nowrap;
  }

  /* 19b client round: "still only two buttons. I can only assume both lead to
     the same number, we have 2 numbers so this will not work."
     Printing both numbers was not enough: the generic call and WhatsApp icon
     buttons beside them still had to resolve to ONE branch each, with nothing
     on them saying which. Two numbers cannot share one action. Each branch now
     owns its pair, matching the client's iLab reference, and the generic pair
     is hidden below, because a control whose target the visitor has to guess is
     worse than no control when the real ones are right there. */
  .kiwi-header__phone {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "branch branch"
      "num    actions";
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
  }
  .kiwi-header__phone-branch { grid-area: branch; margin-bottom: 0; }
  .kiwi-header__phone-num { grid-area: num; }
  .kiwi-header__phone-actions {
    grid-area: actions;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .kiwi-header__phone-call,
  .kiwi-header__phone-wa {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--dur-press) var(--ease-out);
  }
  .kiwi-header__phone-call:active,
  .kiwi-header__phone-wa:active { transform: scale(0.94); }
  .kiwi-header__phone-call { background: var(--accentFill); }
  .kiwi-header__phone-wa {
    background: var(--waBg);
    border: 1px solid var(--waBorder);
  }

  /* The ambiguous generic pair, retired at this width only. Below 1280 they
     stay, and they open the contact sheet rather than dialling a guess. */
  .kiwi-iconbtn--call,
  .kiwi-iconbtn--whatsapp { display: none; }
}

/* =========================================================================
   19-design-qa: both branch numbers wherever a number is offered
   -------------------------------------------------------------------------
   Client: "in the form and the header there is still only the number for one
   of the locations, as an example the reference always shows both".
   Three surfaces, one rule: never print one workshop's number as if it were
   the company's. The wide header prints both; narrower widths open the call
   sheet; the enquiry form lists both beside the branch picker.
   ========================================================================= */

/* ---- The call sheet ---- */
.kiwi-callsheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Caught in 19-design-qa browser verification: WITHOUT this rule the sheet
   swallowed every tap on the page. The UA sheet gives [hidden] a
   `display: none` of specificity 0,0,1,0; the class rule above is also
   0,0,1,0 but comes later, so it wins, and a full-viewport fixed overlay
   stayed in the hit-test layer while rendering nothing visible. The mobile
   bottom bar's own call button, sitting directly under it, became
   unclickable. Any `display` on an element that is also toggled with
   [hidden] needs this pairing. */
.kiwi-callsheet[hidden] { display: none; }

.kiwi-callsheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}

.kiwi-callsheet__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(14px);
  opacity: 0;
  transition: transform 200ms var(--ease-out), opacity 180ms var(--ease-out);
}

.kiwi-callsheet.is-open .kiwi-callsheet__scrim { opacity: 1; }
.kiwi-callsheet.is-open .kiwi-callsheet__panel {
  transform: translateY(0);
  opacity: 1;
}

.kiwi-callsheet__title {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted2);
  font-weight: 700;
  margin-bottom: 14px;
}

/* 19b: each entry is a branch, not a single call link, because the header's
   WhatsApp button opens this sheet too. So the row is a container and the two
   real actions live inside it. */
.kiwi-callsheet__item {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  margin-bottom: 10px;
}

.kiwi-callsheet__item-branch {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.kiwi-callsheet__item-meta {
  display: block;
  font-size: 12px;
  color: var(--muted2);
  margin-top: 3px;
}

.kiwi-callsheet__item-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}

.kiwi-callsheet__call,
.kiwi-callsheet__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  transition: transform var(--dur-press) var(--ease-out);
}
.kiwi-callsheet__call:active,
.kiwi-callsheet__wa:active { transform: scale(0.97); }

.kiwi-callsheet__call {
  background: var(--accentFill);
  color: var(--onAccent);
}

.kiwi-callsheet__wa {
  background: var(--waBg);
  border: 1px solid var(--waBorder);
  color: var(--waText);
  font-weight: 700;
  padding: 0 16px;
}

.kiwi-callsheet__close {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  margin-top: 4px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .kiwi-callsheet__scrim,
  .kiwi-callsheet__panel { transition: none; }
}

/* ---- The enquiry form's selected-branch line ---- */
/* Client: "when you select a location you should also see their working times
   under the location". Sits directly beneath the two branch chips and changes
   with them (src/app.js swaps the address; the hours are shared, so they are
   static). */
.kiwi-form__branch-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted2);
}

.kiwi-form__branch-addr { font-weight: 700; color: var(--muted); }

.kiwi-form__branch-hours::before {
  content: "\00b7";
  margin-right: 8px;
  color: var(--muted2);
}

/* =========================================================================
   19b: buttons that took over from links, and the footer's two numbers
   -------------------------------------------------------------------------
   Client: "still only two buttons. I can only assume both lead to the same
   number, we have 2 numbers so this will not work." A link audit of the
   rendered page found the same defect in four more places than the header:
   the price explorer's secondary CTA (x15), the form's failure card (x2) and
   the footer, all pointing at Akropole Riga with nothing saying so. The three
   ACTIONS became <button data-call-chooser-open> so they offer both branches;
   the footer prints both numbers outright.

   Those three keep their existing class styling, but a <button> brings UA
   defaults a styled <a> never had (border, background, colour, alignment),
   so they are reset here rather than duplicating each rule.
   ========================================================================= */


.kiwi-footer__branch { display: flex; flex-direction: column; gap: 1px; }
.kiwi-footer__branch + .kiwi-footer__branch { margin-top: 14px; }
.kiwi-footer__branch-addr { font-size: 13px; color: var(--muted); }
.kiwi-footer__phone-branch {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted2);
}
.kiwi-footer__phone-num {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--font-heading, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
}

/* =========================================================================
   19c client round
   ========================================================================= */

/* ---- 1. Enquiry section: the left column no longer stretches ----
   Client: "Pieteikums section has really weird padding where the whole section
   is really really stretched out". Measured at 1440: 124px between kicker and
   heading, 110px heading to paragraph, 146px paragraph to the contact block.
   None of that was padding. The form spans all four grid rows on the right and
   is ~780px tall, and CSS Grid shares a spanning item's surplus height across
   every row it spans, so each short left-column item got its own ~150px slice.
   Sizing the first three rows to content and giving the last row 1fr sends the
   surplus to the empty space BELOW the contact block, where it belongs. */
@media (min-width: 1024px) {
  /* 19d: superseded, see the 19d block at the end of this file */
  .kiwi-pieteikums__h2 { margin-top: 12px; }
  .kiwi-pieteikums__p { margin-top: 18px; }
  .kiwi-pieteikums__altcontact { align-self: start; margin-top: 40px; }
}

/* ---- 2. Icon tiles without the tinted-ring template look ----
   Client: "the icons have this very AI beige background thing". Every icon and
   step number sat in the same container: a pale green wash (--tint, 13% accent)
   inside a green hairline ring (--tintB, 30% accent). That pairing is the
   default "feature icon" of generated landing pages, and repeating it on the
   trust badges, speed cards, timeline and delivery steps made the page read as
   one template. The container now carries no hue: a solid neutral tile one step
   off its surface, with a hairline inner edge instead of a coloured ring. The
   icon's own stroke is the only green, so colour means "icon", not "box".
   Glyph tiles become rounded squares; numbered markers stay round on the rail.
   --tint/--tintB still drive the status pill and price badge, where a green
   wash means a state. The tile is opaque on purpose: timeline markers sit ON the
   rail, and a translucent fill let the rail show straight through them. */
.kiwi {
  --iconTile: #171C14;
  --iconTileHi: rgba(255,255,255,0.08);
  --iconTileHover: rgba(109,190,69,0.55);
}
.kiwi[data-theme="light"] {
  --iconTile: #EEF2EA;
  --iconTileHi: rgba(16,20,16,0.07);
  --iconTileHover: rgba(46,125,27,0.45);
}

.kiwi-hero__trust-icon,
.kiwi-speed__icon {
  background: var(--iconTile);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--iconTileHi);
}
.kiwi-hero__trust-icon { border-radius: 12px; }
.kiwi-speed__icon { border-radius: 14px; }

.kiwi-timeline__marker,
.kiwi-delivery__n {
  background: var(--iconTile);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--iconTileHi);
  color: var(--text);
}

/* the last step keeps its solid accent "arrival" fill */
.kiwi-timeline__step:last-child .kiwi-timeline__marker,
.kiwi-timeline__marker--last {
  background: var(--accentFill);
  box-shadow: none;
  color: var(--onAccent);
}

/* the header call icon wore the green wash while the WhatsApp icon beside it
   was neutral, so one of a matched pair looked selected */
.kiwi-iconbtn--call {
  background: var(--waBg);
  border: 1px solid var(--waBorder);
}

/* ---- 3. Hover ----
   Client: "introduce some more modern hover effects where applicable, like in
   the Ka tas notiek section and where we have icons". Hover is seen tens of
   times a visit (emil-design-eng frequency rule), so every effect is short
   (160-260ms), moves at most 3px, animates only transform, colour and
   box-shadow, and uses `ease` for colour and --ease-out for movement. Gated to
   real pointers, because touch fires :hover on tap and leaves cards stuck
   lifted. Reduced motion keeps the colour changes and drops the movement. */
@media (hover: hover) and (pointer: fine) {
  /* Timeline: the step you point at lights up the way step 04 already is. */
  .kiwi-timeline__marker {
    transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 220ms var(--ease-out);
  }
  .kiwi-timeline__step:hover .kiwi-timeline__marker {
    background: var(--accentFill);
    color: var(--onAccent);
    box-shadow: 0 0 0 6px rgba(109,190,69,0.14);
    transform: scale(1.08);
  }
  .kiwi-timeline__body { transition: transform 220ms var(--ease-out); }
  .kiwi-timeline__step:hover .kiwi-timeline__body { transform: translateY(-3px); }
  .kiwi-timeline__text { transition: color 180ms ease; }
  .kiwi-timeline__step:hover .kiwi-timeline__text { color: var(--body); }

  /* Icon cards and badges: the tile edge picks up the accent and the glyph
     rises a pixel, so the icon responds rather than the whole block. */
  .kiwi-speed__row { transition: border-color 180ms ease, transform 220ms var(--ease-out); }
  .kiwi-speed__row:hover { border-color: var(--border2); transform: translateY(-3px); }
  .kiwi-speed__icon,
  .kiwi-hero__trust-icon { transition: box-shadow 180ms ease; }
  .kiwi-speed__icon svg,
  .kiwi-hero__trust-icon svg { transition: transform 260ms var(--ease-out); }
  .kiwi-speed__row:hover .kiwi-speed__icon,
  .kiwi-hero__trust-item:hover .kiwi-hero__trust-icon { box-shadow: inset 0 0 0 1px var(--iconTileHover); }
  .kiwi-speed__row:hover .kiwi-speed__icon svg,
  .kiwi-hero__trust-item:hover .kiwi-hero__trust-icon svg { transform: translateY(-1px) scale(1.1); }

  /* Branch rows and review cards: surface change only. Both sit inside clipped
     containers, so a lift would be cut off at the edge. */
  .kiwi-branch-row { transition: background-color 180ms ease; }
  .kiwi-branch-row:hover { background-color: var(--soft); }
  .kiwi-review-card { transition: border-color 180ms ease; }
  .kiwi-review-card:hover { border-color: var(--border2); }
  /* Hero branch links (see block 6) */
  .kiwi-hero__branch-pill { transition: border-color 180ms ease, color 180ms ease; }
  .kiwi-hero__branch-pill:hover { border-bottom-color: var(--accent); color: var(--accent); }

  /* Footer */
  .kiwi-footer__link,
  .kiwi-footer__policy,
  .kiwi-footer__phone-num,
  .kiwi-footer__wa { transition: color 160ms ease, border-color 160ms ease; }
  .kiwi-footer__link:hover,
  .kiwi-footer__policy:hover,
  .kiwi-footer__phone-num:hover { color: var(--accent); }
  .kiwi-footer__wa:hover { border-color: var(--border2); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .kiwi-timeline__step:hover .kiwi-timeline__marker,
  .kiwi-timeline__step:hover .kiwi-timeline__body,
  .kiwi-speed__row:hover,
  .kiwi-speed__row:hover .kiwi-speed__icon svg,
  .kiwi-hero__trust-item:hover .kiwi-hero__trust-icon svg { transform: none; }
}

/* ---- 4. Footer: full contact per branch, policy link ---- */
.kiwi-footer__branch-hours { font-size: 13px; color: var(--muted2); }

.kiwi-footer__branch-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 10px;
}

.kiwi-footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--waBg);
  border: 1px solid var(--waBorder);
  color: var(--waText);
  font-size: 13px;
  font-weight: 700;
}

.kiwi-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.kiwi-footer__link--waze { color: var(--accent); }

.kiwi-footer__email-row { margin-top: 18px; }

.kiwi-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted2);
}

/* The agency credit sits at the far end of the bottom row on a wide footer and
   simply wraps onto its own line when the row runs out of space. */
.kiwi-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.kiwi-footer__credit-link {
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 180ms var(--ease-out, ease);
}
.kiwi-footer__credit-link:hover,
.kiwi-footer__credit-link:focus-visible { opacity: 1; }
.kiwi-footer__credit-logo { height: 22px; width: auto; display: block; }
@media (max-width: 599.98px) {
  /* Nothing to push against once the row has wrapped. */
  .kiwi-footer__credit { margin-left: 0; }
}

.kiwi-footer__policy {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .kiwi-footer {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    grid-template-areas: "logo info" "disclaimer info" "legal legal" "bottom bottom";
  }
  .kiwi-footer__phone-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
  }
  .kiwi-footer__branch + .kiwi-footer__branch { margin-top: 0; }
  .kiwi-footer__bottom { grid-area: bottom; }
}

/* ---- 5. Privacy policy dialog ---- */
.kiwi-policy {
  width: min(680px, calc(100vw - 32px));
  max-height: min(82vh, 780px);
  padding: 0;
  border: 1px solid var(--border2);
  border-radius: 18px;
  background: var(--bg);
  color: var(--body);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.kiwi-policy[open] { display: flex; flex-direction: column; }
/* literal colour: ::backdrop does not reliably see the .kiwi custom properties */
.kiwi-policy::backdrop { background: rgba(0,0,0,0.6); }

.kiwi-policy__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border);
}

.kiwi-policy__title {
  margin: 0;
  font-family: var(--font-heading, "Space Grotesk", "Helvetica Neue", Arial, sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.kiwi-policy__x {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.kiwi-policy__note {
  margin: 14px 22px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--iconTile);
  font-size: 13px;
  color: var(--muted);
}
.kiwi-policy__note:empty { display: none; }

.kiwi-policy__body {
  overflow: auto;
  padding: 16px 22px 8px;
  font-size: 14.5px;
  line-height: 1.65;
}
.kiwi-policy__body p { margin: 0 0 12px; }
.kiwi-policy__body ul { margin: 0 0 12px; padding-left: 20px; }

.kiwi-policy__close {
  appearance: none;
  -webkit-appearance: none;
  margin: 8px 22px 20px;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

/* ---- 6. Hero branch names are links ----
   Client: "these should be clickable, maybe scroll to the maps section". The
   two names under the hero subtitle looked like links (accent underline) and
   did nothing. They are now <a href="#branches"> and src/app.js scrolls to the
   map and switches it to the branch that was clicked. */
.kiwi-hero__branch-pill { text-decoration: none; cursor: pointer; }

/* =========================================================================
   19d client round
   ========================================================================= */

/* ---- Enquiry: sticky left column, same mechanism as the FAQ ----
   Client: "on the desktop view make the Pieteikums left column sticky the same
   way that it works for the faq section". .kiwi-pieteikums__head wraps the
   kicker, heading, intro and branch contacts. Mobile: display:contents, so
   those four lay out exactly as before. Desktop: one grid item in column 1,
   sticky at the same top offset the FAQ uses (108px clears the sticky header
   with the same breathing room), so it stays in view while the ~780px form
   scrolls past. This also retires the 19c row fix: with the left column as a
   single item there are no left-column rows left to stretch. */
.kiwi-pieteikums__head { display: contents; }

@media (min-width: 1024px) {
  .kiwi-pieteikums {
    grid-template-rows: auto;
    grid-template-areas: "left right";
  }
  .kiwi-pieteikums__head {
    display: block;
    grid-area: left;
    align-self: start;
    position: sticky;
    top: 108px;
  }
}

/* ---- Process: subtitle under its headline ----
   Client: "The 'Vienkarss process bez liekas sarezgitibas.' line seems out of
   place. Move it to be under the headline of that section." The desktop header
   row put the h2 in column 1 and the subtitle in column 2, bottom-aligned, so
   the line floated alone in the middle of the section above the timeline, with
   nothing on its row to belong to. Heading, subtitle and timeline now stack in
   one column. */
@media (min-width: 1024px) {
  .kiwi-process__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "h2" "p" "steps";
    align-items: start;
  }
  .kiwi-process__p { margin-top: 14px; max-width: 52ch; }
}

/* ---- Price explorer: light-theme photos ----
   Client: "regenerate the images for the light version for the services
   section. Right now it has the same images as the dark mode and it stands out
   as something that does not fit." The card carries two <picture> elements,
   one per theme, and the theme decides which one is displayed. A display:none
   <img loading="lazy"> is never fetched, so each visitor downloads only the set
   for the theme they are actually looking at, and switching the theme needs no
   JavaScript to pick a file. */
.kiwi-price-photo--light { display: none; }
.kiwi[data-theme="light"] .kiwi-price-photo--dark { display: none; }
.kiwi[data-theme="light"] .kiwi-price-photo--light { display: block; }
/* Client, 2026-09-13: "a line under the image ... only in the light version,
   for every image". The light <picture> was display:block with no height, so
   its <img height:100%> had no definite height to resolve against and fell
   back to its intrinsic aspect ratio: measured 190px in a 200px slot on mobile
   and 517px in a 520px slot on desktop, leaving the card background showing as
   a strip under the photo. The dark <picture> never had the bug because it is
   inline, which lets the img resolve 100% against the photo box. Both pictures
   now fill the slot explicitly. */
.kiwi-price-card__photo picture { height: 100%; }
.kiwi-price-card__photo picture.kiwi-price-photo--dark { display: block; }

/* =========================================================================
   19f client round: services section and bottom bar on mobile
   ========================================================================= */

/* ---- Services: pick and see on one screen ----
   Client: "when you pick a different service the actual service card is not
   visible until you scroll, and then to see the other services you need to
   scroll back up". The picker was a vertical stack of six 68px cards, about
   500px of list between the category tabs and the service card, so the card
   always started below the fold and the list always ended above it.
   Below 1024px the list is now one horizontal, swipeable row of compact chips
   directly above the card. Picking a chip never takes the card off screen, and
   src/app.js scrolls the card into view if it was not already. The symptom line
   that lived in each list item moves into the card itself, so nothing is lost.
   Desktop keeps the side-by-side list and hides the duplicate line in the card. */
.kiwi-price-detail__sub {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--muted);
}

@media (max-width: 1023.98px) {
  .kiwi-damage-list {
    display: flex;
    gap: 8px;
    margin: 14px -18px 0;
    padding: 0 18px 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: 0 18px;
    scrollbar-width: none;
  }
  .kiwi-damage-list::-webkit-scrollbar { display: none; }
  .kiwi-damage-item {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .kiwi-damage-item__title { font-size: 14.5px; }
  .kiwi-damage-item__sub,
  .kiwi-damage-item__chev { display: none; }
  .kiwi-price-card { margin-top: 14px; }
  /* The chip row sticks just under the sticky header for as long as the card
     is on screen, so every other service stays one tap away while reading the
     card: no scrolling back up to switch. Sticky sits on the panels wrapper,
     not the list, because the wrapper's containing block is the whole section
     (the list's own parent is only as tall as the list, so it could never
     stick). The opaque band keeps card content from showing through as it
     scrolls under the row. scroll-margin-top clears header + chip row when
     src/app.js brings the card into view. */
  [data-price-panels] {
    position: sticky;
    top: var(--kiwi-header-h, 66px);
    z-index: 5;
    margin: 0 -18px;
    padding: 0 18px 10px;
    background: var(--bg2);
  }
  [data-price-panels] .kiwi-damage-list { margin-top: 0; padding-top: 12px; }
  .kiwi-price-card { scroll-margin-top: calc(var(--kiwi-header-h, 66px) + 74px); }
}

@media (min-width: 1024px) {
  .kiwi-price-detail__sub { display: none; }
}

/* ---- Bottom bar ----
   Client: "the sticky CTA buttons at the bottom are not very well designed and
   don't fit the aesthetic". Two causes. A bug: in 19b both controls became
   <button> so they could open the branch sheet, but their size, radius and
   layout rules still targeted `.kiwi-bottombar a`, so they rendered square,
   flat and full-bleed. And the look: a hard-edged strip glued to the screen
   edge with a neon green glow under the call button, unlike every card on the
   page. Now a floating rounded panel inset from the edges, the same radius and
   hairline border language as the cards, no glow, and safe-area aware. */
.kiwi-bottombar__inner {
  width: calc(100% - 20px);
  max-width: 500px;
  margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 8px;
  border: 1px solid var(--border2);
  border-radius: 20px;
  gap: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.kiwi-bottombar__call,
.kiwi-bottombar__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  transition: transform var(--dur-press) var(--ease-out), opacity 160ms ease;
}
.kiwi-bottombar__call { box-shadow: none; font-weight: 800; }
.kiwi-bottombar__whatsapp { border: 1px solid var(--waBorder); }
.kiwi-bottombar__call:active,
.kiwi-bottombar__whatsapp:active { transform: scale(0.97); }
.kiwi[data-theme="light"] .kiwi-bottombar__inner { box-shadow: 0 12px 36px rgba(16, 20, 16, 0.14); }

/* =========================================================================
   20-variants: alternative section layouts behind the Tweaks panel.
   Base design is tag base-v1 = every section on "a". Layout B for a section
   is switched on by data-v-<section>="b" on #kiwiRoot. Everything below is
   additive: with all four on "a", none of these rules match anything visible.
   ========================================================================= */

/* Pieces only a B layout shows. */
.kiwi-devmap-wrap,
.kiwi-cenas__sheet-scrim,
.kiwi-cenas__sheet-close,
.kiwi-route,
.kiwi-timeline__icon,
.kiwi-contactmap { display: none; }
.kiwi-route-wrap { display: contents; }
.kiwi-devmap[hidden],
.kiwi .kiwi-contactmap__rows .kiwi-branch-row[hidden] { display: none !important; }
html.kiwi-lock { overflow: hidden; }

/* ---- Services B: point at the broken part ---- */
.kiwi[data-v-services="b"] [data-price-panels] { display: none; }
.kiwi[data-v-services="b"] .kiwi-devmap-wrap { display: block; margin-top: 18px; }

.kiwi-devmap__hint {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}
.kiwi-devmap__hint::before {
  content: "";
  flex: 0 0 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accentFill);
  box-shadow: 0 0 0 4px var(--tint);
}

.kiwi-devmap {
  position: relative;
  width: 100%;
  aspect-ratio: var(--dm-ar, 4 / 3);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: radial-gradient(60% 55% at 50% 50%, var(--glow1) 0%, rgba(var(--scrimRGB), 0) 72%), var(--card);
}
.kiwi-devmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Two arrangements of the same artwork: wide (devices side by side) from
   700px up, tall (stacked, each device nearly twice the size) on phones. */
@media (max-width: 699.98px) { .kiwi-devmap--wide { display: none !important; } }
@media (min-width: 700px) { .kiwi-devmap--tall { display: none !important; } }
.kiwi-devmap__svg * { vector-effect: non-scaling-stroke; }
/* The devices are studio renders on a light plate, in both themes: they are lit
   from above and cut out against grey, so they read on a light ground and a
   cutout never shows the edge it was shot against (the hero cutout lesson). */
.kiwi-devmap {
  background: linear-gradient(180deg, #FBFCFA 0%, #EDF2EA 100%);
  border-color: rgba(16, 20, 16, 0.08);
  overflow: hidden;
}
/* Dark theme keeps the plate dark so the section does not turn into one bright
   slab; the devices are lit from above in the render and keep their edges. */
.kiwi[data-theme="dark"] .kiwi-devmap {
  background: radial-gradient(72% 62% at 50% 42%, #2B332A 0%, #151A14 72%);
  border-color: rgba(255, 255, 255, 0.10);
}
.kiwi[data-theme="dark"] .kiwi-devmap__svg image { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55)) brightness(1.06); }
/* The renders are cut out, so the shadow that grounded them on the studio
   sweep is gone; this puts it back under every device at once. */
.kiwi-devmap__svg image { filter: drop-shadow(0 14px 18px rgba(16, 20, 16, 0.22)); }

/* The cracked twin of a view, an edit of the same render, so this is a plain
   cross-fade with nothing moving. */
.kiwi-devmap .dm-broken { opacity: 0; transition: opacity 260ms var(--ease-out); }
.kiwi-devmap .dm-broken.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .kiwi-devmap .dm-broken { transition: none; }
}

/* The ring marks the part the visitor picked, on the device itself. */
.kiwi-devmap .dm-ring {
  fill: none;
  stroke: var(--accentFill);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.82);
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.kiwi-devmap .dm-ring.is-lit { opacity: 0.95; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .kiwi-devmap .dm-ring { transition: none; }
}

/* A numbered dot on the part; the name of the repair lives in the legend under
   the map, because a phone has no hover and a label per dot would cover the
   device at 390px. */
/* A numbered dot on the part, with the name of the repair beside it: on a phone
   there is no hover, so nothing may depend on pointing at it. */
.kiwi .kiwi-hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 7px;
  /* An absolutely positioned box is shrink-to-fit, and the space it is offered
     is what is left between `left` and the right edge of the plate. A dot at
     93% therefore collapsed to its longest word and the name broke over three
     cramped lines (client, 2026-09-23: "the labels are still funky and seem to
     not really fit"). max-content takes the offered space out of it: the pill
     is as wide as the name wants, capped by max-width, and the transform is
     what moves it back over the device. */
  width: max-content;
  /* ...and how wide it is allowed to get is what the plate can still give it on
     the side it opens towards, so a pill never hangs off the edge (the plate
     clips). A name that does not fit that room wraps to a second line inside
     the pill instead. */
  --dm-lab-max: 168px;
  max-width: min(var(--dm-lab-max), calc(100% - var(--x) + 16px - 10px));
  padding: 4px 10px 4px 4px;
  border: 1px solid rgba(46, 125, 27, 0.22);
  /* Not a pill: a long name wraps to two lines in LV and RU, and a 999px
     radius turns that into a lozenge with the text spilling past the curve. */
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #16200F;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16, 20, 16, 0.22);
  transition: transform 200ms var(--ease-out), background-color 180ms ease, border-color 180ms ease;
}
/* The number sits ON the part; the pill grows away from it. */
.kiwi-hotspot--r { transform: translate(-16px, -50%); }
.kiwi-hotspot--l { transform: translate(calc(-100% + 16px), -50%); }
.kiwi-hotspot--l { flex-direction: row-reverse; padding: 4px 4px 4px 10px; }
/* Opening leftwards, the room is everything to the left of the dot instead. */
.kiwi .kiwi-hotspot--l { max-width: min(var(--dm-lab-max), calc(var(--x) + 16px - 10px)); }
.kiwi-hotspot__n {
  flex: 0 0 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accentFill);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}
.kiwi-hotspot__label { pointer-events: none; }
.kiwi .kiwi-hotspot.is-active {
  z-index: 2;
  border-color: var(--accentFill);
  background: #FFFFFF;
}
.kiwi .kiwi-hotspot.is-active.kiwi-hotspot--r { transform: translate(-16px, -50%) scale(1.04); }
.kiwi .kiwi-hotspot.is-active.kiwi-hotspot--l { transform: translate(calc(-100% + 16px), -50%) scale(1.04); }
@media (hover: hover) and (pointer: fine) {
  .kiwi .kiwi-hotspot:hover { z-index: 3; border-color: var(--accentFill); }
}
@media (prefers-reduced-motion: reduce) {
  .kiwi .kiwi-hotspot { transition: none; }
}
@media (max-width: 699.98px) {
  .kiwi .kiwi-hotspot { --dm-lab-max: 166px; font-size: 11.5px; padding: 3px 9px 3px 3px; }
  .kiwi-hotspot--l { padding: 3px 3px 3px 9px; }
  .kiwi-hotspot__n { flex-basis: 22px; height: 22px; font-size: 11px; }
}
/* With a pointer the name is a hover state (client, 2026-09-23: "on desktop we
   don't need to have the labels, we can show the labels on hover like before").
   Touch screens keep them, since there is nothing to hover with. */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  .kiwi .kiwi-hotspot { padding: 4px; gap: 0; }
  .kiwi-hotspot--l { padding: 4px; }
  .kiwi-hotspot__label { display: none; }
  .kiwi .kiwi-hotspot:hover,
  .kiwi .kiwi-hotspot:focus-visible { padding: 4px 10px 4px 4px; gap: 7px; }
  .kiwi .kiwi-hotspot--l:hover,
  .kiwi .kiwi-hotspot--l:focus-visible { padding: 4px 4px 4px 10px; }
  .kiwi .kiwi-hotspot:hover .kiwi-hotspot__label,
  .kiwi .kiwi-hotspot:focus-visible .kiwi-hotspot__label { display: inline; }
}

/* ---- The legend: every repair readable without hovering or tapping ---- */
.kiwi-devlegend {
  list-style: none;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}
/* Phones keep the list as well: the pills are small there, and the list is the
   easy tap target. */
@media (max-width: 699.98px) {
  .kiwi-devlegend:not([hidden]) { display: grid; }
}
.kiwi-devlegend--unused {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}
.kiwi-devlegend[hidden] { display: none; }
.kiwi .kiwi-devlegend__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--body);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform var(--dur-press) var(--ease-out);
}
.kiwi .kiwi-devlegend__item:active { transform: scale(0.98); }
.kiwi-devlegend__n {
  flex: 0 0 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--soft);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.kiwi .kiwi-devlegend__item.is-active {
  border-color: var(--tintB);
  background: var(--tint);
  color: var(--text);
}
.kiwi .kiwi-devlegend__item.is-active .kiwi-devlegend__n {
  background: var(--accentFill);
  border-color: var(--accentFill);
  color: #FFFFFF;
}
@media (hover: hover) and (pointer: fine) {
  .kiwi .kiwi-devlegend__item:hover { border-color: var(--tintB); }
}
@media (max-width: 359.98px) {
  .kiwi-devlegend { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .kiwi-devlegend { gap: 10px; margin-top: 16px; }
  .kiwi .kiwi-devlegend__item { font-size: 14.5px; min-height: 50px; }
}

/* Phone and tablet: the price card is a bottom sheet over the diagram. */
@media (max-width: 1023.98px) {
  .kiwi[data-v-services="b"] .kiwi-cenas__card-slot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    max-width: 520px;
    margin: 0 auto;
    max-height: 88svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 380ms;
  }
  .kiwi[data-v-services="b"] .is-sheet-open .kiwi-cenas__card-slot {
    transform: translateY(0);
    visibility: visible;
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }
  .kiwi[data-v-services="b"] .kiwi-price-card { margin-top: 0; box-shadow: 0 -10px 40px rgba(0,0,0,0.35); }
  .kiwi[data-v-services="b"] .kiwi-cenas__sheet-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 69;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
  }
  .kiwi[data-v-services="b"] .is-sheet-open .kiwi-cenas__sheet-scrim { opacity: 1; pointer-events: auto; }
  .kiwi[data-v-services="b"] .kiwi-cenas__sheet-close {
    display: flex;
    position: sticky;
    top: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    margin: 0 10px -36px auto;
    transform: translateY(10px);
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #FFFFFF;
    cursor: pointer;
  }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .kiwi[data-v-services="b"] .kiwi-cenas__card-slot,
  .kiwi[data-v-services="b"] .is-sheet-open .kiwi-cenas__card-slot { transition: none; }
}

/* Desktop: diagram in the list's place, card beside it as in A. */
@media (min-width: 1024px) {
  .kiwi[data-v-services="b"] .kiwi-cenas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kiwi[data-v-services="b"] .kiwi-devmap-wrap {
    grid-area: panels;
    margin-top: 24px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .kiwi[data-v-services="b"] .kiwi-price-card { grid-template-columns: minmax(0, 1fr) minmax(0, 36%); }
  .kiwi[data-v-services="b"] .kiwi-price-detail__title { font-size: 32px; }
}

/* ---- Reviews B: simple grid ----
   The same review section and header, no carousel: a few cards in columns and
   the link to every review on Google. Clones (aria-hidden) never show. */

/* ---- Process B: route ---- */
.kiwi[data-v-process="b"] .kiwi-route-wrap { display: block; position: relative; margin-top: 32px; }
.kiwi[data-v-process="b"] .kiwi-timeline { margin-top: 0; position: relative; z-index: 1; }
.kiwi[data-v-process="b"] .kiwi-timeline__rail,
.kiwi[data-v-process="b"] .kiwi-timeline__step::before { display: none !important; }
.kiwi[data-v-process="b"] .kiwi-route {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.kiwi-route__base { fill: none; stroke: var(--border2); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 9; }
.kiwi-route__line { fill: none; stroke: var(--accentFill); stroke-width: 3; stroke-linecap: round; }
.kiwi[data-v-process="b"] .kiwi-timeline__icon { display: block; }
.kiwi[data-v-process="b"] .kiwi-timeline__marker,
.kiwi[data-v-process="b"] .kiwi-timeline__marker--last {
  width: 64px;
  height: 64px;
  background: var(--bg);
  border: 2px solid var(--border2);
  color: var(--muted);
  box-shadow: 0 0 0 6px var(--bg);
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease, transform 320ms var(--ease-out);
}
.kiwi[data-v-process="b"] .kiwi-timeline__marker-n {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  color: var(--muted);
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.kiwi[data-v-process="b"] .is-reached .kiwi-timeline__marker {
  background: var(--accentFill);
  border-color: var(--accentFill);
  color: #FFFFFF;
  transform: scale(1.04);
}
.kiwi[data-v-process="b"] .is-reached .kiwi-timeline__marker-n { background: var(--text); border-color: var(--text); color: var(--bg); }
.kiwi[data-v-process="b"] .kiwi-timeline__title { color: var(--text); transition: color 240ms ease; }
.kiwi[data-v-process="b"] .is-reached .kiwi-timeline__title { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .kiwi[data-v-process="b"] .kiwi-timeline__marker,
  .kiwi[data-v-process="b"] .is-reached .kiwi-timeline__marker { transition: none; transform: none; }
}
@media (max-width: 1023.98px) {
  .kiwi[data-v-process="b"] .kiwi-timeline__step {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
    padding-bottom: 36px;
  }
  .kiwi[data-v-process="b"] .kiwi-timeline__step:last-child { padding-bottom: 0; }
  /* One icon column, text beside it: the route runs straight down the icons. */
  .kiwi[data-v-process="b"] .kiwi-timeline__title { margin-top: 10px; }
}
@media (min-width: 1024px) {
  .kiwi[data-v-process="b"] .kiwi-route-wrap { grid-area: steps; margin-top: 56px; }
  /* Every second stop drops a row, so the route zig-zags across the section. */
  .kiwi[data-v-process="b"] .kiwi-timeline__step:nth-of-type(even) { margin-top: 132px; }
  .kiwi[data-v-process="b"] .kiwi-timeline__marker { margin-bottom: 22px; }
}

/* ---- Contact B: branches folded into the enquiry section ---- */
.kiwi[data-v-contact="b"] .kiwi-pieteikums__altcontact,
.kiwi[data-v-contact="b"] .kiwi-form__branch-group { display: none; }
.kiwi[data-v-contact="b"] .kiwi-contactmap {
  display: block;
  margin-top: 24px;
  scroll-margin-top: calc(var(--kiwi-header-h, 66px) + 16px);
}
.kiwi-contactmap__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.kiwi-contactmap__map {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: var(--card);
}
.kiwi-contactmap__frame {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  filter: var(--mapFilter);
}
.kiwi .kiwi-contactmap__rows {
  margin-top: 0;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--card);
}
@media (min-width: 1024px) {
  .kiwi[data-v-contact="b"] .kiwi-pieteikums {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "map head" "map right";
    column-gap: 56px;
  }
  .kiwi[data-v-contact="b"] .kiwi-pieteikums__head {
    grid-area: head;
    position: static;
    margin-bottom: 32px;
  }
  .kiwi[data-v-contact="b"] .kiwi-contactmap {
    grid-area: map;
    align-self: start;
    position: sticky;
    top: 108px;
    margin-top: 0;
  }
  .kiwi[data-v-contact="b"] .kiwi-contactmap__frame { height: 380px; }
}


/* 20-variants, contact B: the branch row sits in a half-width card under the
   map, so it keeps its stacked phone layout at every width instead of the
   desktop branch section's single full-width line. */
.kiwi .kiwi-contactmap__rows .kiwi-branch-row { display: block; padding: 18px 4px; }
.kiwi .kiwi-contactmap__rows .kiwi-branch-row:hover { background-color: transparent; }
.kiwi .kiwi-contactmap__rows .kiwi-branch-row__actions { margin: 14px 0 0; }
.kiwi .kiwi-contactmap__rows .kiwi-branch-row__links { margin: 12px 0 0; }

/* =========================================================================
   20-variants round 4 (client, 2026-09-13)
   ========================================================================= */

/* ---- Brand logos: grey, smaller, more air between them ----
   Heights are set per logo (optical sizes differ: the wordmarks are wide and
   short, the marks are tall) at roughly 80% of the previous desktop sizes. */
.kiwi-marquee__logo { width: auto; opacity: 0.45; }
.kiwi-marquee__group { gap: 64px; padding-right: 64px; }
.kiwi-marquee__logo--apple { height: 30px; }
.kiwi-marquee__logo--samsung { height: 16px; }
.kiwi-marquee__logo--xiaomi { height: 18px; }
.kiwi-marquee__logo--huawei { height: 32px; }
.kiwi-marquee__logo--google { height: 32px; }
@media (min-width: 1024px) {
  .kiwi-marquee__group { gap: 96px; padding-right: 96px; }
  .kiwi-marquee__logo--apple { height: 36px; }
  .kiwi-marquee__logo--samsung { height: 19px; }
  .kiwi-marquee__logo--xiaomi { height: 21px; }
  .kiwi-marquee__logo--huawei { height: 37px; }
  .kiwi-marquee__logo--google { height: 37px; }
}
/* Tweaks "Brand logos: Hide". */
.kiwi[data-v-brands="b"] #brands { display: none; }

/* ---- OMNIVA steps: hover ----
   Same language as the timeline markers: the number tile fills with the
   accent. The card's own background is a gradient, which cannot transition,
   so the wash is an overlay that fades in. Real pointers only. */
.kiwi-delivery__item { position: relative; }
.kiwi-delivery__item > * { position: relative; z-index: 1; }
.kiwi-delivery__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tint);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .kiwi-delivery__n { transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 220ms var(--ease-out); }
  .kiwi-delivery__title { transition: color 180ms ease; }
  .kiwi-delivery__item > div:last-child { transition: transform 220ms var(--ease-out); }
  .kiwi-delivery__item:hover::before { opacity: 1; }
  .kiwi-delivery__item:hover .kiwi-delivery__n {
    background: var(--accentFill);
    color: var(--onAccent);
    box-shadow: 0 0 0 6px rgba(109,190,69,0.14);
    transform: scale(1.08);
  }
  .kiwi-delivery__item:hover .kiwi-delivery__title { color: var(--accent); }
  .kiwi-delivery__item:hover > div:last-child { transform: translateX(4px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .kiwi-delivery__item:hover .kiwi-delivery__n,
  .kiwi-delivery__item:hover > div:last-child { transform: none; }
}

/* ---- Contact B: branch card uses the full width ----
   From 600px the card is wide enough for two columns: who and where on the
   left (name, address, hours, open status), what to do on the right (call and
   WhatsApp as full-width buttons, Waze and Maps under them). */
@media (min-width: 600px) {
  .kiwi .kiwi-contactmap__rows .kiwi-branch-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
    grid-template-rows: auto auto;
    column-gap: 28px;
    row-gap: 12px;
    align-items: start;
    padding: 24px 8px;
  }
  .kiwi .kiwi-contactmap__rows .kiwi-branch-row__main {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 14px;
  }
  .kiwi .kiwi-contactmap__rows .kiwi-branch-row__status { grid-column: 2; justify-self: start; align-self: start; }
  .kiwi .kiwi-contactmap__rows .kiwi-branch-row__name { font-size: 21px; }
  .kiwi .kiwi-contactmap__rows .kiwi-branch-row__addr { font-size: 15px; margin-top: 6px; }
  .kiwi .kiwi-contactmap__rows .kiwi-branch-row__hours { font-size: 13.5px; margin-top: 4px; }
  .kiwi .kiwi-contactmap__rows .kiwi-branch-row__actions {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .kiwi .kiwi-contactmap__rows .kiwi-branch-row__call,
  .kiwi .kiwi-contactmap__rows .kiwi-branch-row__whatsapp { justify-content: center; padding: 11px 16px; font-size: 14px; }
  .kiwi .kiwi-contactmap__rows .kiwi-branch-row__links { grid-column: 2; grid-row: 2; margin: 0; justify-content: center; }
}

/* ---- Hero B: fix on scroll ----
   Two layers, one silhouette. The fixed image and the light band sit
   exactly over the approved photo (same box, same object-fit, same alpha
   mask), so nothing can show outside the phone. Only the broken photo keeps
   the drop-shadow, so the shadow never doubles. --fix is the position of
   the diagonal edge, set by app.js from scroll. Inactive (A, no JS, reduced
   motion): both layers stay hidden and the page shows the static photo. */

/* ---- Hero C: video frames on a canvas ----
   The canvas takes the photo's exact box and drop-shadow (the frames carry the
   same alpha, so the shadow follows the same silhouette). The photo stays
   visible until .has-frames, so there is never an empty hero while frames load. */
.kiwi-hero__frames { display: none; }
.kiwi[data-v-hero="c"] .has-frames .kiwi-hero__frames {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 26px 34px var(--heroShadow)) drop-shadow(0 8px 12px var(--heroShadow2));
}
.kiwi[data-v-hero="c"] .has-frames #heroImage { visibility: hidden; }

/* ---- Reviews: hover (client, 2026-09-13) ----
   Same language as the OMNIVA steps: an accent wash fades in (the card's own
   background is a gradient, which cannot transition), the border picks up the
   accent, the stars grow a touch and the reviewer's name takes the accent.
   The carousel (A) clips its viewport, so a lift there would be cut off at the
   top edge; only the grid (B) lifts. Real pointers only; reduced motion keeps
   the colour changes and drops the movement. */
.kiwi-review-card { position: relative; }
.kiwi-review-card > * { position: relative; z-index: 1; }
.kiwi-review-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--tint);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.kiwi-review-card__stars { transform-origin: left center; }
@media (hover: hover) and (pointer: fine) {
  .kiwi-review-card { transition: border-color 180ms ease, transform 240ms var(--ease-out), box-shadow 240ms ease; }
  .kiwi-review-card__stars { transition: transform 240ms var(--ease-out); }
  .kiwi-review-card__name { transition: color 180ms ease; }
  .kiwi-review-card:hover { border-color: var(--tintB); }
  .kiwi-review-card:hover::before { opacity: 1; }
  .kiwi-review-card:hover .kiwi-review-card__stars { transform: scale(1.12); }
  .kiwi-review-card:hover .kiwi-review-card__name { color: var(--accent); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .kiwi-review-card:hover .kiwi-review-card__stars { transform: none; }
}

/* ---- Cookie consent banner (see the cookie IIFE in src/app.js) ----
   Phones: a card above the bottom call bar. Desktop: bottom-left, clear of the
   Tweaks panel on the right. */
.kiwi-cookie {
  position: fixed;
  z-index: 85;
  left: 12px;
  right: 12px;
  bottom: 88px;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 18px 16px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  font-family: var(--font-body);
  animation: kiwi-cookie-in 240ms var(--ease-out) both;
}
.kiwi-cookie[hidden],
.kiwi-cookie [hidden] { display: none !important; }
@keyframes kiwi-cookie-in {
  from { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .kiwi-cookie { animation: none; }
}
@media (min-width: 1024px) {
  .kiwi-cookie { left: 24px; right: auto; bottom: 24px; width: 440px; margin: 0; }
}

.kiwi-cookie__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.kiwi-cookie__body {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.kiwi-cookie__link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.kiwi-cookie__prefs {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.kiwi-cookie__pref {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
  cursor: pointer;
}
.kiwi-cookie__pref input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accentFill);
}
.kiwi-cookie__pref strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}
.kiwi-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.kiwi-cookie__btn {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
.kiwi-cookie__btn:active { transform: scale(0.97); }
.kiwi-cookie__btn--primary {
  background: var(--accentFill);
  color: var(--onAccent);
  border: 0;
}
.kiwi-cookie__btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border2);
}
.kiwi-cookie__btn--link {
  flex: 0 0 auto;
  padding: 0 6px;
  background: none;
  border: 0;
  color: var(--muted);
  text-decoration: underline;
}

/* Honeypot field for bots (api/contact.js drops enquiries that fill it). */
.kiwi-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}