/* ==========================================================================
   Autoriepu nams / riepas.lv – riepu maiņas landing
   Ported from Claude Design "Riepu maina Rigas landing - desktop.dc.html".
   Desktop values are 1:1 with the prototype; breakpoints below 1100px are
   additions so the page holds up on tablet and phone.
   ========================================================================== */

:root {
  /* Official brand red, taken from the vector in Logo_AN_RED horizon.pdf.
     The design tool had shipped #d2232a; the client asked for the real one. */
  --red:        #ed2127;
  --red-dark:   #c8161c;
  --red-link:   #b3121a;
  --pink:       #ff9ea2;
  --ink:        #15181b;
  --ink-2:      #23282d;
  --grey-1:     #4a5055;
  --grey-2:     #5a5f63;
  --grey-3:     #6b7278;
  --grey-4:     #8a9095;
  --grey-5:     #9aa0a5;
  --grey-6:     #c3c8cc;
  --grey-7:     #dfe3e6;
  --line:       #e6e6e3;
  --line-2:     #cfcfcb;
  --line-3:     #e2e2df;
  --line-4:     #ececea;
  --panel:      #f6f6f4;
  --green:      #1f9d55;
  --wrap:       1280px;
  --gutter:     40px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Clears the sticky header, which is now the action row alone: about 77px
     on desktop and 104px once it wraps on a phone. It was 160px when the hours
     strip was still part of the sticky block, which over-scrolled every anchor
     by the height of a strip that no longer sticks. */
  scroll-padding-top: 124px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keyboard users land here first and can jump the whole header. */
.skiplink {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 100;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 2px;
  transition: top .15s ease;
}
.skiplink:focus { top: 8px; text-decoration: none; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-link); text-decoration: underline; }

/* Links sitting inside a sentence are told apart from the prose by hue alone,
   and red on grey body text measures about 1.3:1 against it, far under the 3:1
   that would make colour-only acceptable. Underline them. Standalone links in
   buttons and nav rows are not affected. */
.reviews__note a,
.prices__foot a,
.locations__note a,
.shop__text a { text-decoration: underline; text-underline-offset: 2px; }

img { max-width: 100%; }
input, select, button, textarea { font-family: inherit; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Grid items default to min-width:auto, so a wide image (or its width attribute
   while the file is missing) props the track open and scrolls the page
   sideways. Every media-bearing grid child opts out. */
.trio > *,
.trio__stack > *,
.hero__inner > *,
.vip > *,
.why__grid > *,
.locations__grid > * { min-width: 0; }

.h2 {
  margin: 0;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 700;
}
.h2--light { color: #fff; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
}

.eyebrow__rule { width: 36px; height: 2px; background: var(--red); display: inline-block; flex: 0 0 auto; }
.eyebrow, .eyebrow__text { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--pink); }

/* Small caps labels were vanishing into the dark sections. On dark they get the
   light pink; on light they get ink, never the mid red, which fails contrast at
   this size against both backgrounds. */
.eyebrow--onDark {
  display: block;
  margin: 0 0 16px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
}
.eyebrow--onLight { margin-bottom: 14px; }
.eyebrow--onLight .eyebrow__text { color: var(--grey-2); }

@keyframes fadeUp   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; }

.btn--red { background: var(--red); color: #fff; font-size: 14px; padding: 12px 20px; border-radius: 2px; }
.btn--red:hover { background: var(--red-dark); color: #fff; }

.btn--lg { font-size: 17px; padding: 19px 34px; }
.btn--lg:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(237,33,39,.35); }

.btn--ghost-red { border: 1px solid var(--red); color: var(--red); font-size: 14px; padding: 12px 18px; }
.btn--ghost-red:hover { background: var(--red); color: #fff; }

.btn--ghost { border: 1px solid var(--line-2); color: var(--ink-2); font-size: 14px; padding: 12px 18px; }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--ink { background: var(--ink); color: #fff; font-size: 15px; padding: 16px 26px; }
.btn--ink:hover { background: var(--ink-2); color: #fff; }

.btn--ghost-ink { border: 1px solid var(--ink); color: var(--ink); font-size: 15px; padding: 16px 26px; }
.btn--ghost-ink:hover { background: var(--ink); color: #fff; }

/* One of the two in-content "call us" paths, and it was 21px tall. Inline-flex
   with a minimum height makes it a real tap target without moving the
   underline off the text. */
.link-underline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.35);
}
.link-underline:hover { color: #fff; box-shadow: inset 0 -1px 0 #fff; text-decoration: none; }

/* Tap-target sweep. Each of these measured 38 to 43px, close enough to look
   fine and still short of the 44px minimum. */
.btn--red, .btn--ghost-red, .btn--ghost, .btn--ink, .btn--ghost-ink,
.topbar__phone, .video__sound {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lb__nav { min-width: 44px; min-height: 44px; }

/* --- Topbar ------------------------------------------------------------- */

.topbar {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 18px var(--gutter);
}
.topbar__logo img { height: 26px; width: auto; display: block; }
.topbar__right {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Both branches, spelled out, in their own strip above the header row. The
   client asked for from-to hours at the very top, and the two closing times
   differ; as one more item inside .topbar__right the string was long enough to
   wrap the logo, the phone and the CTA onto separate rows. */
.topbar__hoursbar {
  background: #0e1113;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar__hours {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 7px var(--gutter);
  font-size: 13px;
  color: var(--grey-5);
  text-align: right;
}
/* Each branch is one unit. Left to wrap freely the line broke inside a time
   range, ending on an open "9:00-" with the closing time on the next line. */
.topbar__hours span { white-space: nowrap; }
.topbar__phone {
  flex: 0 0 auto;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.topbar__phone:hover { color: #fff; }
.topbar__cta { flex: 0 0 auto; white-space: nowrap; }

.langs {
  flex: 0 0 auto;
  display: flex;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 3px;
  overflow: hidden;
}
/* Was 26px tall, the smallest control on the page, sitting between two other
   controls in the header where a mis-tap switches language. */
.langs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border: 0;
  background: transparent;
  color: var(--grey-7);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 11px;
  cursor: pointer;
}
.langs__btn.is-on { background: var(--red); color: #fff; }

/* --- Hero --------------------------------------------------------------- */

.hero { background: var(--ink); color: #fff; position: relative; }
.hero__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 64px;
  padding: 64px var(--gutter) 140px;
  align-items: center;
}
.hero__copy { padding-top: 8px; }

/* One line, as large as that line allows. The size is computed rather than
   picked: the copy column gets whatever the video (24% of the content) and the
   64px gap leave it, and the longest of the three translations measures 9.82x
   its font-size, so .094 of the column width fills it with a margin to spare.
   A fixed size cannot do this, since the same clamp that fits Latvian at one
   width overflows English at another. */
.hero__title {
  margin: 0 0 22px;
  font-size: calc((min(var(--wrap), 100vw - 2 * var(--gutter)) * .76 - 64px) * .094);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 700;
  white-space: nowrap;
  animation: fadeUp .7s ease both;
}
.hero__lead {
  margin: 0 0 34px;
  font-size: 21px;
  line-height: 1.5;
  color: var(--grey-6);
  max-width: 44ch;
  text-wrap: pretty;
  animation: fadeUp .7s ease .12s both;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  animation: fadeUp .7s ease .22s both;
}





.hero__perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 30px 0 0;
  list-style: none;
  max-width: 680px;
  animation: fadeUp .7s ease .38s both;
}
.hero__perks li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.perk__text { min-width: 0; }
.perk__text strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.perk__sub { display: block; font-size: 13px; line-height: 1.4; color: var(--grey-5); }

/* The middle stat is a full sentence the client specified word for word, not a
   figure over a label. It keeps the sentence intact and lets it wrap, so the
   emphasis stays inline instead of being split onto its own line. */
.perk__text--sentence { font-size: 14px; line-height: 1.4; color: var(--grey-5); }
.perk__text--sentence strong {
  display: inline;
  font-size: inherit;
  margin: 0;
  color: #fff;
}

/* Thin outlined circles washed out against the dark sections. Filled disc with
   a solid pink glyph instead, used for every icon that sits on ink. */
.perk__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}
.perk__icon svg { width: 22px; height: 22px; }

/* The rating stat carries Google's own mark rather than a generic star, since
   the number it quotes is Google's. The multicolour G is only legible on a
   light ground, so this one disc goes white while keeping the same 44px. */
.perk__icon--google { background: #fff; }
.perk__icon--google svg { width: 24px; height: 24px; }
.perk__stars { color: #f5a623; font-size: 12px; letter-spacing: .06em; white-space: nowrap; }

/* The card takes a fixed 28% of the content width. That is the proportion: the
   video's size is a relationship to the column of copy next to it, so it reads
   the same on a laptop as on a 27in monitor.

   Deliberately no vh in here. Tying the card to viewport height made it shrink
   on a short screen, which is what left the laptop with a small video and the
   big monitor with a correct one. A hero is allowed to run past the fold; it is
   not allowed to change its proportions from screen to screen. */
.hero__media {
  position: relative;
  align-self: center;
  justify-self: start;
  width: calc(min(var(--wrap), 100vw - 2 * var(--gutter)) * .24);
  display: flex;
  animation: fadeUp .8s ease .2s both;
}
.video__frame {
  position: absolute;
  top: -16px; left: -16px;
  width: 100%; height: 100%;
  border: 1px solid var(--red);
  pointer-events: none;
}

/* --- Video card --------------------------------------------------------- */

/* The clip is self-hosted rather than embedded so it can autoplay muted on load
   and hand sound over on one click. The source is 9:16. */
.video { position: relative; margin: 0; display: flex; flex-direction: column; width: 100%; padding-bottom: 54px; }
/* 54px of the card is reserved for the caption by .video's padding; the stage
   takes its height from the clip's real aspect, so nothing is ever cropped. */
.video__stage {
  position: relative;
  background: #000;
  line-height: 0;
  width: 100%;
  aspect-ratio: 9 / 16;
}
.video__el {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink-2);
}
.video__sound {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(21, 24, 27, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px 10px 12px;
  cursor: pointer;
  transition: background .15s ease;
}
.video__sound:hover { background: var(--red); }
.video__soundicon { display: flex; width: 18px; height: 18px; }
.video__soundicon svg { width: 100%; height: 100%; }
.video.is-unmuted .video__soundicon svg > path:nth-child(2),
.video.is-unmuted .video__soundicon svg > path:nth-child(3) { opacity: .35; }
.video__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  padding: 0 12px;
  text-align: center;
}

/* --- Booking band ------------------------------------------------------- */

/* Booking itself lives on riepas.lv/Servisa-pieraksts. This band keeps the
   white card the wizard used to fill, so the hero still lands on a booking
   moment instead of running straight into the reviews. */
/* Full bleed and painted with the hero ink, so the dark runs unbroken behind
   the card. The card is pulled 110px up over the hero but is taller than that,
   so it used to overhang onto whatever came next. That was the white reviews
   section, which hid it. With the dark steps band there instead, the body
   white showed as shoulders beside the lower half of the card: 117px of it on
   desktop, 303px on a phone. The card now floats on one continuous dark field
   from the hero through to the steps. */
.booking {
  margin: -110px 0 0;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 5;
  scroll-margin-top: 92px;
  background: var(--ink);
}
/* max-width moves here off .booking, which now has to span the viewport to
   carry that background. Subtracting the gutters keeps the card exactly the
   width it was. */
.booking__card {
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  margin-inline: auto;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
}
.bookcta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  padding: 46px 48px;
}
.bookcta > * { min-width: 0; }
.bookcta__copy .h2 { margin: 0 0 14px; }
.bookcta__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grey-2);
  max-width: 62ch;
}
.bookcta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
}
.bookcta__call {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--line-2);
}
.bookcta__call:hover { box-shadow: inset 0 -1px 0 var(--ink); text-decoration: none; }

/* --- Why us ------------------------------------------------------------- */

.why {
  padding-top: 80px;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 64px;
  align-items: start;
}
.why__lead { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--grey-2); }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 48px; }
.why__item { border-top: 1px solid var(--line); padding: 26px 0; }
.why__item h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.why__item p  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--grey-2); }
/* Truck servicing only runs at two of the three addresses, so the claim above
   carries its exception rather than leaving the reader to find it. */
.why__foot { display: block; margin-top: 8px; font-size: 13px; color: var(--grey-3); }
.why__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border: 2px solid var(--red);
  border-radius: 50%;
  color: var(--red);
}
.why__icon svg { width: 28px; height: 28px; }

/* --- Photo trio --------------------------------------------------------- */

.trio { padding-top: 56px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.trio figure { margin: 0; background: var(--ink-2); }
.trio__big img { width: 100%; height: 420px; object-fit: cover; display: block; }
.trio__stack { display: grid; gap: 16px; }
.trio__stack img { width: 100%; height: 202px; object-fit: cover; display: block; }

/* --- Price list --------------------------------------------------------- */

.prices { padding-top: 80px; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 28px;
}
.section-head__note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--grey-2); max-width: 44ch; }

.ptable-scroll { overflow-x: auto; }
/* It is a tab stop now, so it needs a visible focus ring like any other. */
.ptable-scroll:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.ptable { width: 100%; border-collapse: collapse; text-align: left; min-width: 720px; }
.ptable thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--grey-3);
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ink);
}
.ptable thead th + th { text-align: right; }
.ptable tbody th, .ptable tbody td {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  vertical-align: baseline;
  font-weight: 400;
}
/* Every row reserves the accent rail, so service names stay on one vertical
   line whether or not the row is a VIP one. */
.ptable tbody th { width: 40%; padding-left: 20px; border-left: 3px solid transparent; }
.ptable thead th:first-child { padding-left: 23px; }
.ptable tbody td { font-size: 20px; font-weight: 700; text-align: right; }
.ptable__nameline { display: flex; align-items: center; gap: 10px; }
.ptable__name { font-size: 19px; font-weight: 700; }
.ptable__sub { display: block; font-size: 14px; color: var(--grey-3); margin-top: 3px; }
/* Needs to outrank ".ptable tbody th", which sets the rail transparent. */
.ptable tbody tr.ptable__row--vip th { border-left-color: var(--red); }
.ptable__row--vip td { color: var(--red); }
.tag {
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 4px 7px;
  white-space: nowrap;
}

/* --- VIP band ----------------------------------------------------------- */

.vip {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--ink);
  color: #fff;
}
.vip__copy {
  padding: 72px 56px 72px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 660px;
  margin-left: auto;
  width: 100%;
}
.vip__lead { margin: 18px 0 28px; font-size: 17px; line-height: 1.6; color: var(--grey-6); max-width: 46ch; }
.vip__copy p:last-child { margin: 0; }
.vip__media { margin: 0; background: var(--ink-2); }
.vip__media img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; display: block; }
/* The photo is square in a landscape box, so cover crops top and bottom. A
   centre crop cut the branded cup in half, which is the detail that shows the
   free coffee the copy beside it promises. Biased downward far enough to keep
   the cup whole and still hold her face in frame. */
.vip__media img { object-position: 50% 70%; }

/* --- Reviews ------------------------------------------------------------ */

.reviews { padding-top: 80px; }
.reviews .section-head { margin-bottom: 28px; }

/* --- Review slider ------------------------------------------------------ */

/* The track scrolls itself, but WebKit still counts its 3000px of cards into
   the document scroll width, so the whole page could pan sideways on iOS and
   only body{overflow-x:hidden} was holding it back. Measured on an iPhone 14:
   documentElement.scrollWidth 3002 on a 390px viewport, 390 with this clip.
   clip, not hidden: hidden would make this a scroll container and force the
   vertical axis to auto as well. The margin keeps card focus rings visible. */
.rslider {
  position: relative;
  overflow-x: clip;
  overflow-clip-margin: 4px;
}
/* Stop a horizontal swipe on the cards from chaining to the page or the
   browser back gesture once the track hits either end. */
.rslider__track { overscroll-behavior-x: contain; }
/* Flex, not grid: grid-auto-columns still lets tracks shrink to fit the
   container, so ten cards squeezed to 98px instead of overflowing. */
.rslider__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.gcard { flex: 0 0 calc((100% - 48px) / 3); }
.rslider__track::-webkit-scrollbar { display: none; }

.gcard {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 22px 22px 20px;
  min-width: 0;
}
.gcard__top { display: flex; align-items: center; gap: 12px; }
.gcard__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.gcard__who { min-width: 0; }
.gcard__name { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }
.gcard__when { display: block; font-size: 12px; color: var(--grey-3); margin-top: 2px; }
.gcard__g { width: 20px; height: 20px; margin-left: auto; flex: 0 0 auto; }
.gcard__stars { color: #f5a623; font-size: 14px; letter-spacing: .1em; }
.gcard__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Rating sits bottom-left, on the same line as the arrows. */
.rslider__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.rslider__rating { display: flex; align-items: baseline; gap: 10px; margin: 0; flex-wrap: wrap; }
.rslider__rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rating__g { display: flex; width: 22px; height: 22px; flex: 0 0 auto; }
.rating__g svg { width: 100%; height: 100%; }
.rslider__rating .rating__stars { color: #f5a623; font-size: 16px; letter-spacing: .1em; }
.rslider__rating .rating__num { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.rslider__rating .rating__cap { font-size: 14px; color: var(--grey-2); }

.rslider__nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 0; }
.rslider__btn {
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
}
.rslider__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.rslider__btn:disabled { color: var(--grey-6); border-color: var(--line); cursor: default; }
.rating { display: flex; align-items: baseline; gap: 10px; margin: 0; flex-wrap: wrap; }
/* Gold, not brand red: these are Google review stars and the client asked for
   the familiar five gold ones everywhere they appear. */
.rating__stars { color: #f5a623; font-size: 16px; letter-spacing: .1em; }
.rating__num { font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.rating__cap { font-size: 14px; color: var(--grey-2); }






/* --- Emphasis ----------------------------------------------------------- */

/* Marker behind the phrase the eye should land on. Kept to one or two per
   block: highlight everything and nothing is highlighted. */
.hl {
  font-weight: 700;
  box-shadow: inset 0 -0.32em 0 rgba(237, 33, 39, .16);
  /* Without this the marker only draws on the first line when a highlight wraps. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero .hl, .vip .hl, .vip-points .hl, .steps .hl {
  color: #fff;
  box-shadow: inset 0 -0.32em 0 rgba(237, 33, 39, .5);
}

/* Colour, not a marker: used where the phrase is the headline's whole point. */
.accent { color: var(--red); }
.hero .accent { color: #ff5b62; }

/* --- Hero CTA friction reducer ------------------------------------------ */



/* --- How it works ------------------------------------------------------- */

.steps { background: var(--ink); color: #fff; padding: 66px 0 72px; }
.steps__head { margin-bottom: 34px; }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step > * { min-width: 0; }
/* Mid red on near-black failed contrast at this size, so the numerals use the
   light tint and sit in a bordered chip instead of floating. */
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pink);
  margin-bottom: 18px;
}
.step h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
.step p  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--grey-6); }

/* --- Brand strip -------------------------------------------------------- */

.brands { padding-top: 64px; }
.brands__inner {
  display: flex;
  align-items: center;
  gap: 16px 40px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.brands__label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  /* grey-5 measured 2.64:1 here, far short of 4.5 for 11px text. */
  color: var(--grey-3);
  flex: 0 0 auto;
}
.brands__list { display: flex; gap: 12px 32px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.brands__list li {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  opacity: .72;
}

/* --- VIP detail strip --------------------------------------------------- */

.vip-points { background: var(--ink-2); color: #fff; padding: 56px 0 64px; }
.vip-points__head { max-width: 62ch; margin-bottom: 36px; }
.vip-points__head h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
.vip-points__head p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--grey-6); }
.vip-points__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 48px; }
.vip-point > * { min-width: 0; }
/* h4 since the group title above them is the h3; the level changed, the look
   did not. */
.vip-point h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.vip-point p  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--grey-6); }
.vip-point__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}
.vip-point__icon svg { width: 30px; height: 30px; }

/* --- Step icons --------------------------------------------------------- */

.step__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}
.step__icon svg { width: 28px; height: 28px; }

.pullquote {
  margin: 48px 0 0;
  border-left: 3px solid var(--red);
  padding: 4px 0 4px 26px;
  max-width: 80ch;
}
.pullquote p {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: #fff;
}
.pullquote footer { font-size: 13px; color: var(--grey-5); }

.reviews__note { margin: 26px 0 0; padding-bottom: 72px; font-size: 13px; color: var(--grey-3); }

.prices__foot { margin: 22px 0 0; font-size: 14px; line-height: 1.6; color: var(--grey-3); max-width: 90ch; }

/* Two rows of this table are VIP, and VIP only exists at Ziepniekkalna iela 2.
   The band that says so is the next section down, which is late: the prices are
   where someone decides. Sits directly under the table, carrying the same chip
   as the rows it qualifies. */
.prices__vipnote {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--grey-2);
  /* Narrow enough to wrap on a phone, where the default break left the house
     number alone on its own line. */
  text-wrap: balance;
}
@media (max-width: 640px) {
  /* Two lines here, so the chip belongs beside the first one rather than
     floating halfway down the block.

     text-align:left as well: the section centres its text on mobile, and since
     the note's text is a full-width flex item next to a shrink-wrapped chip,
     that centring opened a 79px gap between the badge and the sentence it
     labels, reading as a loose sticker over an orphaned fragment. */
  .prices__vipnote { align-items: flex-start; text-align: left; }
  .prices__vipnote .tag { margin-top: 2px; }
}

/* Section-level call to action, so the reader never has to scroll back up. */
.section-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 32px 0 0;
}
.section-cta--stacked { flex-direction: column; align-items: flex-start; gap: 10px; }
.section-cta__note { margin: 0; font-size: 14px; color: var(--grey-3); }

/* Price list closes with the button on the left and the small print beside it,
   rather than the button stranded under a paragraph of caveats. */
.prices__end {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 32px;
  margin-top: 26px;
}
.prices__end > * { min-width: 0; }
.prices__cta { margin: 0; }
.prices__end .prices__foot { margin: 0; }
.locations__note { margin: 24px 0 0; font-size: 15px; line-height: 1.6; color: var(--grey-2); }
.vip__note { margin: 0 0 24px; font-size: 14px; color: var(--grey-5); }

/* --- Gallery ------------------------------------------------------------ */

.gallery { padding-top: 80px; }
/* Scoped to the desktop layout on purpose. Unscoped, this two-class selector
   outranked the single-class centring in the 640px block (media queries add no
   specificity) and pinned the gallery heading to the right edge on phones,
   while every other section heading centred. */
@media (min-width: 641px) {
  .gallery .section-head { align-items: flex-end; }
}

.gallery .h2 { margin-top: 0; }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__grid > li { min-width: 0; }
.shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink-2);
  cursor: zoom-in;
  overflow: hidden;
}
.shot img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, opacity .2s ease;
}
.shot:hover img { transform: scale(1.04); opacity: .92; }

/* --- Lightbox ----------------------------------------------------------- */

.lb {
  position: fixed;
  inset: 0;
  /* Above the consent layer, which runs 290 to 320. At 60 the cookie banner
     and the reopen button painted on top of the open modal: inert made them
     unclickable, but they were still sitting there over a 94% opaque backdrop
     looking like part of the dialog. */
  z-index: 400;
  background: rgba(10, 12, 14, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 72px;
}
.lb[hidden] { display: none; }
.lb__stage { margin: 0; max-width: 100%; max-height: 100%; }
.lb__stage img { max-width: 100%; max-height: 88vh; display: block; object-fit: contain; }
.lb__count {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}
.lb__close, .lb__nav {
  position: absolute;
  border: 1px solid rgba(255,255,255,.28);
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.lb__close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 18px; }
.lb__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 28px; }
.lb__nav--prev { left: 16px; }
.lb__nav--next { right: 16px; }
.lb__close:hover, .lb__nav:hover { background: var(--red); border-color: var(--red); }

/* --- FAQ ---------------------------------------------------------------- */

.faq { padding-top: 80px; display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq details.is-last { border-bottom: 1px solid var(--line); }
/* Was a bare 20.8px line with 40px of inert gap around it. The row is the tap
   target now, so the whitespace between questions is part of the control. */
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  min-height: 44px;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 700;
}
/* Flex rather than float: floated, the marker dropped below the text whenever
   the question came within a few px of filling the line, and then rendered
   outside the summary box because floats do not expand their parent. */
.faq summary::after { content: "+"; color: var(--red); font-weight: 700; flex: 0 0 auto; }
/* Making summary a flex container shrink-wraps a one-line question, so the
   mobile block's centring is a no-op on those and applies to the ones that
   wrap, leaving the column half left-aligned and half centred. Questions read
   as a list, so they all align left. */
.faq summary { text-align: left; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--grey-2); max-width: 76ch; }

/* --- Locations ---------------------------------------------------------- */

.locations { padding-top: 80px; }
.locations .h2 { margin-bottom: 28px; }
.locations__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.place figure { margin: 0; background: var(--ink-2); }
.place img { width: 100%; height: 260px; object-fit: cover; display: block; }
.place__name { margin: 22px 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.place__meta { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--grey-2); }
.place__actions { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; }

/* --- Shop cross-sell ---------------------------------------------------- */

.shop { margin-top: 80px; }
.shop__inner {
  border-top: 1px solid var(--line);
  padding: 44px 0 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.shop__title { margin: 0 0 8px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.shop__text  { margin: 0; font-size: 16px; line-height: 1.6; color: var(--grey-2); max-width: 62ch; }
.shop__actions { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; }

/* --- Footer ------------------------------------------------------------- */

.footer { background: var(--ink); color: var(--grey-5); }
.footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  font-size: 13px;
}
.footer__brand { display: flex; align-items: center; gap: 24px; }
.footer__brand img { height: 24px; width: auto; display: block; }
.footer__brand p { margin: 0; line-height: 1.6; }
/* A phone number split across two lines reads as a typo. */
.footer__brand a[href^="tel:"] { white-space: nowrap; }
/* Same colour as the text around them and no underline meant the mail and
   phone links were not identifiable as links by anything but hovering. */
.footer__brand a { color: var(--grey-6); text-decoration: underline; text-underline-offset: 2px; }
.footer__brand a:hover { color: #fff; }
/* Wraps rather than running off the edge. In Russian the four labels are long
   enough to overflow a 360px screen by 3px at each side, and because the body
   clips horizontal overflow the ends were cut off with nothing to scroll. */
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__links a { color: var(--grey-6); display: inline-flex; align-items: center; min-height: 44px; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1180px) {
  .hero__inner { grid-template-columns: 1fr auto; gap: 48px; }
  /* The gap narrows to 48px here, which the base formula already treats as 64
     and so errs on the safe side. Nothing to override. */
  .why, .faq { grid-template-columns: 280px 1fr; gap: 40px; }
}

@media (max-width: 980px) {
  :root { --gutter: 24px; }

  .topbar__inner { flex-wrap: wrap; gap: 16px; }
  /* The hours used to be hidden here to save a row inside the header. In their
     own strip they cost nothing, and the client asked for them at the top on
     every screen, so they stay and wrap instead. */
  .topbar__hours { text-align: center; font-size: 12px; line-height: 1.5; }

  .hero__inner { grid-template-columns: 1fr; gap: 40px; padding-bottom: 120px; }
  /* Stacked: the copy gets the whole content width, no video column to share
     with, so the headline can take .0957 of it and still hold one line. */
  .hero__title { font-size: calc((100vw - 2 * var(--gutter)) * .0957); }
  .hero__lead { font-size: 19px; }
  .hero__media { align-self: auto; justify-self: center; width: 100%; max-width: 340px; }
  .hero__perks { grid-template-columns: 1fr 1fr; }



  .bookcta { grid-template-columns: 1fr; gap: 26px; padding: 34px 28px; }
  .bookcta__actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 18px; }

  .gcard { flex-basis: calc((100% - 24px) / 2); }
  .vip-points__grid { grid-template-columns: 1fr 1fr; gap: 26px 32px; }
  .steps__grid { grid-template-columns: 1fr; gap: 28px; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .shot img { height: 200px; }
  .lb { padding: 20px; }
  .lb__nav { width: 42px; height: 42px; font-size: 22px; }
  .why, .faq { grid-template-columns: 1fr; gap: 24px; }
  .why__grid { gap: 0 32px; }
  .trio { grid-template-columns: 1fr; }
  .vip { grid-template-columns: 1fr; }
  .vip__copy { padding: 48px var(--gutter); max-width: none; }
  .vip__media img { min-height: 300px; }

  .locations__grid { grid-template-columns: 1fr; }
  .shop__inner { grid-template-columns: 1fr; }
  .prices__end { grid-template-columns: 1fr; gap: 20px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .h2 { font-size: 30px; }

  .hero__lead { font-size: 17px; }
  /* Three across, icon over text: side by side in a row, each icon would land
     at a different x because the labels are different lengths. */
  .hero__perks { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hero__perks li { flex-direction: column; gap: 9px; align-items: center; }
  .perk__icon { width: 38px; height: 38px; }
  .perk__icon svg { width: 19px; height: 19px; }
  .perk__text strong { font-size: 13px; }
  .perk__sub { font-size: 11px; }
  .hero__actions .btn--lg { width: 100%; text-align: center; }

  .bookcta { padding: 32px 24px; }
  .bookcta__actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .bookcta__actions .btn--lg { width: 100%; text-align: center; }
  .bookcta__call { align-self: center; }


  .gcard { flex-basis: 84%; }
  .vip-points__grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .trio__big img { height: 260px; }


  /* Call and book move into the sticky header, so the fixed bar that used to
     sit over the bottom of the page is gone. Two rows: identity, then the two
     actions side by side. display:contents lets the four right-hand items wrap
     as siblings of the logo instead of as one block. */
  .topbar__inner { flex-wrap: wrap; gap: 10px 12px; padding: 11px var(--gutter); }
  .topbar__right { display: contents; }
  /* Trimmed so the logo and the language switch share the first row; at 26px
     the pair overflowed and pushed the switch down onto the action row. */
  .topbar__logo { min-width: 0; }
  .topbar__logo img { width: clamp(140px, 45vw, 192px); height: auto; }
  .langs { order: 1; }
  .langs__btn { padding: 6px 10px; }
  .topbar__phone,
  .topbar__cta {
    flex: 1 1 calc(50% - 10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding: 12px 10px;
    border-radius: 2px;
  }
  .topbar__phone { order: 2; border: 1px solid rgba(255,255,255,.4); }
  .topbar__cta { order: 3; display: inline-flex; }

  /* One column means a left rag leaves every block hanging off the same edge,
     so the phone reads centred throughout. Form fields and the price table are
     left alone below: centred inputs and centred table rows are harder to read,
     not easier. */
  .hero__copy, .steps, .steps__head, .step, .why, .why__intro, .why__item,
  .trio, .prices, .prices__end, .prices__foot, .vip__copy, .vip-points,
  .vip-points__head, .vip-point, .brands__inner, .faq, .locations,
  .locations__note, .place, .shop__inner, .reviews, .reviews__note,
  .section-head, .section-cta, .footer__inner, .gcard, .bookcta,
  .bookcta__copy {
    text-align: center;
  }

  /* .hero__perks li is deliberately absent: it is a column here, so
     justify-content would centre it vertically and drop the shorter of the
     three icons out of line with the other two. align-items does the work. */
  .eyebrow, .hero__actions, .step__head, .brands__list,
  .place__actions, .shop__actions, .gcard__top, .rslider__foot,
  .footer__links, .section-cta {
    justify-content: center;
  }

  /* Standalone icon blocks are their own flex boxes, so centring the text
     around them does not move them. */
  .vip-point__icon, .why__icon { margin-left: auto; margin-right: auto; }

  .section-head, .section-cta--stacked,
  .footer__inner { align-items: center; }

  .ptable, .ptable th, .ptable td { text-align: left; }

  /* The mark and the address sat on one line and pushed the footer 32px wider
     than the screen on a 320px phone. */
  .footer__brand { flex-direction: column; gap: 12px; }
}

/* The table has a 720px min-width, so it is clipped by its container from
   about 880px down, and the scrollbar is an overlay on touch devices, meaning
   nothing signals that the right-hand columns exist. On a page headlined
   "no 40 EUR" that showed service names and no prices.

   Below 900px it stops being a grid and becomes one card per service, each
   price on its own row labelled with its size. Same markup and same table
   semantics for assistive tech, no sideways scrolling. The breakpoint is 900
   rather than 640 so it also covers tablet portrait and a narrow laptop
   window, where the last column was cut off just as invisibly. */
@media (max-width: 900px) {
  .ptable, .ptable th, .ptable td { text-align: left; }
  .ptable { min-width: 0; }
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ptable tbody tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .ptable tbody tr:last-child { border-bottom: 0; }
  .ptable tbody th,
  .ptable tbody td { display: block; width: auto; border: 0; padding: 0; }
  .ptable tbody th { margin-bottom: 12px; padding-left: 14px; }
  .ptable tbody tr.ptable__row--vip th { border-left: 3px solid var(--red); }
  .ptable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 7px 0 7px 14px;
    font-size: 17px;
  }
  .ptable tbody td + td { border-top: 1px solid var(--line-4); }
  .ptable tbody td::before {
    content: attr(data-size);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--grey-3);
  }
  .ptable__nameline { justify-content: flex-start; }
}


/* --- short viewports ------------------------------------------------------

   On a 640 or 667 tall phone the consent bar covered the hero CTA outright.
   Shrinking the bar alone cannot fix it: pinned to bottom:12px on a 640 screen
   it would have to be 106px or less to clear the button, which no compliant
   three-choice bar fits into. The CTA has to come up to meet it.

   Most of the gap is chrome. The header grew to 200px once every control in it
   was raised to a 44px tap target, and the hero then opens with 40px of its
   own padding. Here the header rows tighten, the hours strip stops being part
   of the sticky block (the client asked for hours at the top of the page, not
   pinned to the screen), and the hero loses most of its top padding. */
@media (max-height: 700px) {
  .topbar__hours { padding-top: 4px; padding-bottom: 4px; font-size: 11px; }
  .topbar__inner { gap: 8px 12px; padding-top: 7px; padding-bottom: 7px; }
  .hero__inner { padding-top: 14px; padding-bottom: 56px; gap: 24px; }
  .hero__title { margin-bottom: 12px; }
  .hero__actions { margin-top: 14px; }
  .hero__perks { margin-top: 4px; }
}