/* ==========================================================================
   CARFIX 66 - clickable prototype
   Tokens follow docs/brand.md. Gold comes from the client's logo.
   Layout is our own design - the client's mockups are a content source only.
   ========================================================================== */

:root {
  /* Surfaces - layered off-black instead of one flat #000.
     Depth is built from these layers, not from shadows. */
  --bg: #0b0b0c;
  --surface-1: #121214;
  --surface-2: #17171a;
  --surface-3: #1e1e22;

  /* Brand gold, sampled from the logo */
  --gold: #a97e16;
  --gold-light: #c29119;
  --gold-dim: rgba(169, 126, 22, 0.14);
  --gold-line: rgba(169, 126, 22, 0.38);

  /* Text */
  --text: #f4f4f5;
  --text-muted: #a3a3ab;
  --text-dim: #74747c;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  /* Shapes lifted from the logo.
     The gold flash in the badge is a parallelogram whose leading edge
     leans about 34deg off vertical. That angle is reused for buttons,
     markers and accents so the page and the mark share a geometry. */
  --slant: -34deg;
  --notch: 15px;

  --header-h: 76px;
  --container: 1180px;
  --gutter: 24px;

  /* Space above and below every section - one value, so the gap between
     two sections is always the same on both sides (Arne, 30. 9. 2026:
     half of the earlier 120px). Gap between sections = twice this. */
  --section-space: clamp(36px, 4.5vw, 60px);

  /* Between two sections that belong together (proof bar -> services,
     Kontakt -> Kde nás najdete): a tighter gap, again split evenly. */
  --section-space-tight: calc(var(--section-space) * .6);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--gold-light); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  font-weight: 600;
}

p { margin: 0; }

::selection { background: var(--gold); color: #000; }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

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

.section {
  padding: var(--section-space) 0;
  scroll-margin-top: var(--header-h);
  position: relative;
}

.section--alt { background: var(--surface-1); }

/* Pairs of sections that belong together - see --section-space-tight */
.section--pair-start { padding-bottom: var(--section-space-tight); }
.section--pair-end { padding-top: var(--section-space-tight); }


/* Small gold label above a heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* The logo's gold flash, shrunk to a marker */
.eyebrow::before {
  content: "";
  width: 22px;
  height: 7px;
  background: var(--gold);
  transform: skewX(var(--slant));
}

/* Same gap from a heading (or its lead) to the content in every section
   (Arne, 30. 9. 2026: smaller, the old 64px felt loose). */
.section__head {
  max-width: 720px;
  margin-bottom: clamp(24px, 2.6vw, 36px);
}

.section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section__head--center .eyebrow::before { display: none; }

/* For a lead that reads better as one line on a desktop. Narrower
   screens still wrap it naturally. */
.section__head--wide { max-width: none; }

.section__lead strong {
  color: var(--text);
  font-weight: 600;
}

.section__title {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  margin-bottom: 18px;
}

.section__lead {
  color: var(--text-muted);
  font-size: clamp(16px, 1.6vw, 19px);
}

.text-gold { color: var(--gold-light); }

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

/* Buttons are parallelograms, echoing the gold flash in the logo.
   Both variants are filled - an outlined variant would lose its border
   along the clipped edges. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 15px calc(30px + var(--notch));
  border: none;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
  white-space: nowrap;
  clip-path: polygon(
    var(--notch) 0,
    100% 0,
    calc(100% - var(--notch)) 100%,
    0 100%
  );
}

/* Gold fill always takes BLACK text - white fails contrast on this gold.
   See docs/brand.md. */
.btn--primary {
  background: var(--gold);
  color: #000;
}

.btn--primary:hover {
  background: var(--gold-light);
  color: #000;
  transform: translateY(-2px);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
  color: var(--text);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text);
  transform: translateY(-2px);
}

.btn--sm {
  --notch: 11px;
  padding: 11px calc(20px + var(--notch));
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(11, 11, 12, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header__logo { margin-right: auto; }
.header__logo img { height: 50px; width: auto; }

.nav { display: flex; align-items: center; gap: 30px; }

/* nowrap: just above the mobile-menu breakpoint (861-869px) the items
   used to break onto two lines. With the phone button gone from the
   header they fit on one line - checked down to 861px. */
.nav__link {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width .22s ease;
}

.nav__link:hover { color: var(--text); }
.nav__link.is-active { color: var(--text); }
.nav__link.is-active::after,
.nav__link:hover::after { width: 100%; }

.header__cta { display: inline-flex; gap: 10px; }

/* The booking button inside the menu - only in the mobile menu */
.nav__cta { display: none; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  height: 2px;
  width: 20px;
  background: var(--text);
  transition: transform .2s ease, opacity .2s ease;
  content: "";
}

.nav-toggle span { top: 21px; left: 12px; }
.nav-toggle span::before { top: -6px; left: 0; }
.nav-toggle span::after { top: 6px; left: 0; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

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

/* Height follows the content, not the viewport. The copy block is only
   about 370px tall, so a tall min-height just buys dead space above and
   below it. Kept well under one screen so the services heading peeks. */
.hero {
  position: relative;
  min-height: min(56vh, 600px);
  display: flex;
  align-items: center;
  /* Top: half the earlier gap under the header (Arne, 30. 9. 2026).
     Extra room at the bottom: the proof bar overlaps this edge and must
     not crowd the buttons. 18px less than it used to be, so the "per
     year" note under the bar still fits the first screen at 1600 x 831
     (Arne wanted it seen straight away, 30. 9. 2026). */
  padding: clamp(24px, 2.75vw, 42px) 0 clamp(88px, calc(9vw - 18px), 106px);
  overflow: hidden;
}

/* The photo is a panel on the right that melts into the background on
   its left edge (Arne, 30. 9. 2026). The copy sits on the plain page
   background, never on the photo - the real shoot will have a busy
   workshop behind the mechanic, not a clean wall.
   The panel starts 380px into the content column and fades in over the
   next 380px, so the fade lines up with the copy at every screen width. */
.hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: max(calc(var(--gutter) + 380px), calc(50% - var(--container) / 2 + var(--gutter) + 380px));
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 380px);
          mask-image: linear-gradient(90deg, transparent 0, #000 380px);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Top and bottom only - the bottom fade blends the photo into the
   section below and sits under the proof bar. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,.2) 0%, rgba(11,11,12,0) 22%, rgba(11,11,12,0) 66%, rgba(11,11,12,.92) 100%);
}

.hero__inner { position: relative; z-index: 1; max-width: 700px; }

.hero__title {
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 0;
}

/* Line 1 - a small label carrying the name and the town.
   Kept quiet so it reads as a signature, not as a second headline. */
.hero__brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--gold-light);
  font-size: clamp(12.5px, 1.3vw, 14.5px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* A clear gap, so the label reads as a signature on its own and not as
     a second line competing with the claim right below it. */
  margin-bottom: clamp(26px, 2.8vw, 40px);
}

.hero__brand-sep {
  width: 1px;
  height: 14px;
  background: var(--gold-line);
}

.hero__place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  letter-spacing: 0.18em;
}

.hero__place svg { color: var(--gold); }

/* Line 2 - both services set in caps and stacked, so neither reads as
   subordinate to the other. Colour carries the separation, not punctuation.
   Inline-block so the block is exactly as wide as its widest word - the
   claim's rule below depends on that. */
.hero__service {
  display: inline-block;
  font-size: clamp(33px, 6.6vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

/* The claim opens the headline phrase ("Váš spolehlivý autoservis").
   Sentence case and mid size keep it part of the headline rather than a
   second label; the rule runs to the edge of the widest word and ties the
   two together. */
.hero__claim {
  display: flex;
  align-items: center;
  gap: .45em;
  font-size: max(.4em, 20px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.15;
  text-transform: none;
  color: var(--text);
  margin-bottom: .2em;
}

.hero__claim::after {
  content: "";
  flex: 1;
  height: 1.5px;
  margin-top: .15em;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 35%, var(--gold-line) 100%);
}

.hero__service-a,
.hero__service-b { display: block; }

.hero__service-a { color: var(--text); }
.hero__service-b { color: var(--gold); }

.hero__lead {
  color: var(--text-muted);
  font-size: clamp(16.5px, 1.8vw, 19.5px);
  max-width: 480px;
  margin: clamp(24px, 2.4vw, 34px) 0 24px;
}

/* Google rating - straight after the lead, so "top rated" lands while
   the visitor is still reading who we are and what we do (Arne,
   30. 9. 2026). Same place on every screen size. All five stars share
   one colour - it has to read as five, not four.
   A thin outline of its own, because as plain grey text it read as one
   more line of the lead paragraph. Outline, not a fill: every button on
   this site is a filled shape and none is outlined, so an outline reads
   as information, never as an action. Corner radius from the existing
   scale (--radius-sm), so no new shape enters the design. */
.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(28px, 2.8vw, 40px);
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color .2s ease;
}

.hero__rating:hover { border-color: var(--gold-line); }

.hero__rating > span { white-space: nowrap; }
.hero__rating strong { color: var(--text); font-weight: 600; }

.hero__stars { display: inline-flex; gap: 2px; color: var(--gold-light); }

.hero__rating-out { opacity: .6; transition: opacity .2s ease, transform .2s ease; }

.hero__rating:hover .hero__rating-out { opacity: 1; transform: translate(1px, -1px); }

/* The USP row that used to sit here was removed - it repeated the stat
   strip below. USPs now live only in .proof, inside the services block. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   Proof bar - floats across the seam between the hero and the content
   -------------------------------------------------------------------------- */

/* The bar closes the hero and the services follow on from it, so the
   gap below it is the tighter "pair" gap (the services section is
   .section--pair-end). */
.proofbar-wrap { padding-bottom: var(--section-space-tight); }

/* All spacing in the bar comes from one value, --pb-pad: the padding
   round the edge, the distance from any text to a divider, and the gap
   between rows on a phone. The column gap is twice that, with the
   divider dead centre - so it sits the same distance from the text on
   both sides, everywhere. */
.proofbar {
  --pb-pad: clamp(20px, 2.6vw, 36px);
  --pb-num: clamp(30px, 3.2vw, 42px);
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: calc(var(--pb-pad) * 2);
  margin-top: clamp(-64px, -4vw, -44px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pb-pad);
  overflow: hidden;
}

/* Gold flash in the corner - the logo shape again. Lines up with the
   start of the first number. */
.proofbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pb-pad);
  width: 78px;
  height: 4px;
  background: var(--gold);
  transform: skewX(var(--slant));
}

/* Number over label (Arne, 30. 9. 2026 - replaces "icon + claim" from
   28. 9.). The numbers count up when the bar comes into view.
   Centred in equal columns, so every divider sits exactly between two
   stats. Left-aligned, a divider hugged the next number and stood far
   from the previous one. */
.proofbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* Slanted dividers, matching the logo's leading edge. Exactly as tall as
   the numbers and level with them, so they read as "30+ / 1 500 / ...".
   A short line only leans a few pixels either way; a full-height one
   leaned into the neighbouring numbers. */
.proofbar__item + .proofbar__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--pb-pad) * -1);
  width: 1px;
  height: var(--pb-num);
  background: var(--line-strong);
  transform: translateX(-50%) skewX(var(--slant));
}

/* Tabular figures keep every digit the same width, so the number doesn't
   wobble while it counts. */
.proofbar__num {
  font-size: var(--pb-num);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A smaller "+" in the same colour and stroke weight as the digits, so
   four of them don't shout (Arne, 30. 9. 2026). A smaller glyph sits
   lower on the baseline; the -.14em lift puts it back on the middle of
   the digits (measured from Poppins glyph bounds - re-measure if the
   size or weight changes). Kept outside the counting span - only the
   number itself counts up. */
.proofbar__plus {
  position: relative;
  top: -.14em;
  margin-left: .06em;
  font-size: .75em;
  font-weight: 700;
}

.proofbar__label {
  font-size: clamp(14px, 1.3vw, 15.5px);
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
}

/* "Per year" said once for the whole bar, like a source line under a
   chart - a unit next to each number spoilt the clean figures. Under the
   bar, not inside it: inside, it made the bar taller and left it looking
   empty at the bottom (Arne, 30. 9. 2026). */
.proofbar__note {
  margin: 12px 4px 0;
  text-align: right;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-dim);
  letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   Page header (subpages) - the homepage hero's voice without the photo.
   Carries the page's only H1: brand line + page name in caps.
   -------------------------------------------------------------------------- */

.page-hero { padding: clamp(40px, 6vw, 84px) 0 clamp(8px, 1.5vw, 16px); }

.page-hero__title {
  margin: 0;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.page-hero__name {
  display: block;
  font-size: clamp(33px, 6.6vw, 70px);
  line-height: .98;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--text);
}

/* The first section is the page's own content, not a new chapter - it
   follows the page header closely. */
.page-hero + .section { padding-top: clamp(24px, 3vw, 44px); }

/* --------------------------------------------------------------------------
   Traits - what we stand for, ring icon + claim (O nás on the homepage)
   -------------------------------------------------------------------------- */

.traits {
  display: grid;
  gap: 14px;
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
}

.traits__item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
  color: var(--text);
}

/* Ring from the logo badge, same family as the service icons */
.traits__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
}

/* --------------------------------------------------------------------------
   Team photo - the people behind the garage
   -------------------------------------------------------------------------- */

.team-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

/* The group stands a touch left of centre in the 3:2 frame; 45% keeps
   all four people in when it is cropped to 4:3. Re-check with the real
   photo from the shoot. */
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% center;
}

/* --------------------------------------------------------------------------
   Reviews - real Google reviews, word for word, with their source
   -------------------------------------------------------------------------- */

.reviews {
  display: grid;
  grid-template-columns: .8fr 1fr 1fr;
  gap: 22px;
}

.reviews__summary,
.review {
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.reviews__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.reviews__score {
  font-size: clamp(44px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.reviews__stars,
.review__stars { display: inline-flex; gap: 2px; color: var(--gold-light); }

.reviews__caption { margin-bottom: auto; font-size: 15px; color: var(--text-muted); }

.reviews__summary .service__link { margin-top: 18px; }

.review {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.review__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.review__text::before { content: "„"; }
.review__text::after { content: "“"; }

.review__author { margin-top: auto; font-size: 14px; color: var(--text-dim); }


/* --------------------------------------------------------------------------
   Service cards (overview)
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 22px;
}

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Compact card (Arne, 30. 9. 2026): icon beside the title instead of above
   it, tighter spacing. On a phone all three services with their points
   are visible just by scrolling down - none hidden in a sideways swipe.
   Rows: icon + title / points / link. The middle row takes the spare
   height, so points start at the same line in every card and links
   line up at the bottom. */
.service {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 16px;
  align-items: start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 34px 34px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

/* Speed stripes from the logo, tucked into the corner as texture.
   Kept narrow enough to stay clear of the longest title. */
.service::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 64px;
  background: repeating-linear-gradient(
    124deg,
    var(--gold) 0 2px,
    transparent 2px 12px
  );
  opacity: .14;
  pointer-events: none;
  transition: opacity .25s ease;
}

.service:hover {
  border-color: var(--gold-line);
  background: var(--surface-3);
  transform: translateY(-4px);
}

.service:hover::after { opacity: .32; }

/* Concentric rings, taken from the badge in the logo */
.service__icon {
  position: relative;
  align-self: center;
  width: 52px;
  height: 52px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  display: grid;
  place-items: center;
  color: var(--gold-light);
  transition: background .2s ease, border-color .2s ease;
}

/* The symbol fills more than half the ring, so the wrench and the wheel
   read at a glance (Arne, 30. 9. 2026). */
.service__icon svg { width: 28px; height: 28px; }

.service__icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(169, 126, 22, 0.24);
}

.service:hover .service__icon {
  background: rgba(169, 126, 22, 0.24);
  border-color: var(--gold);
}

.service__title { align-self: center; margin: 0; font-size: 22px; font-weight: 600; }

/* Airy on purpose (Arne, 30. 9. 2026): a hairline under the header splits
   the card into "what" and "what's included", and roomy rows make the
   points easy to take in at a glance instead of reading as a text block. */
.service__list {
  grid-column: 1 / -1;
  list-style: none;
  margin: 28px 0 32px;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 16px;
}

.service__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-muted);
}

.service__list svg { color: var(--gold); flex-shrink: 0; margin-top: 4px; }

.service__link {
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Inside a card the link sits at the bottom and covers the whole card,
   so a tap anywhere on it opens the service page - not just the words. */
.service .service__link {
  grid-column: 1 / -1;
  align-self: end;
  justify-self: start;
}

.service .service__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Wide card under the three services - "Servis od A do Z" (Arne, 30. 9.
   2026). The umbrella over them, not a fourth service: gold tint and
   gold edge instead of the corner stripes (they would run into the
   points). Phone: stacked like the other cards. Desktop: text on the
   left, points in two columns on the right. */
.service--wide {
  grid-column: 1 / -1;
  grid-template-areas: "icon title" "lead lead" "list list" "link link";
  grid-template-rows: auto auto 1fr auto;
  border-color: var(--gold-line);
  background:
    linear-gradient(120deg, rgba(169, 126, 22, .10), transparent 55%),
    var(--surface-2);
}

.service--wide::after { display: none; }

.service--wide .service__icon { grid-area: icon; }
.service--wide .service__title { grid-area: title; }
.service--wide .service__list { grid-area: list; }
.service--wide .service__link { grid-area: link; }

.service__lead {
  grid-area: lead;
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}

/* Below 1140px three service cards get too narrow - most points break
   onto two lines. Two columns instead, and the wide card takes the empty
   slot next to the third card, so the grid closes as 2 x 2. */
/* 681-759px: two columns would be too narrow as well, so the cards stay
   stacked like on a phone. */
@media (min-width: 681px) and (max-width: 759px) {
  .grid:has(> .service) { grid-template-columns: 1fr; }
}

@media (min-width: 760px) and (max-width: 1139px) {
  .grid:has(> .service) { grid-template-columns: repeat(2, 1fr); }
  .service--wide { grid-column: auto; }
}

@media (min-width: 1140px) {
  .service--wide {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.45fr);
    grid-template-areas: "icon title list" "lead lead list" "link link list";
    grid-template-rows: auto 1fr auto;
  }

  .service--wide .service__lead { margin: 18px 0 26px; }

  .service--wide .service__list {
    grid-template-columns: 1fr 1fr;
    align-self: stretch;
    align-content: center;
    column-gap: 24px;
    margin: 0 0 0 28px;
    padding: 0 0 0 36px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

.service__link svg { transition: transform .18s ease; }
.service:hover .service__link svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Split section (text + panel)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.split__body p + p { margin-top: 18px; }
.split__body p { color: var(--text-muted); }

.split__body .section__title { margin-bottom: 22px; }

/* Chip list used for service names */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 17px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
}

.chip svg { color: var(--gold); }

.panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
}

.panel__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 22px;
}

.panel__item {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.panel__item:last-child { border-bottom: none; padding-bottom: 0; }
.panel__item:first-of-type { padding-top: 0; }

.panel__item h4 { font-size: 16.5px; font-weight: 600; margin-bottom: 7px; }
.panel__item p { font-size: 15px; color: var(--text-muted); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Tech cards (Hunter) - the strongest differentiator, given more weight
   -------------------------------------------------------------------------- */

.tech {
  position: relative;
  background:
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}

.tech::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .6;
}

.tech:hover { border-color: var(--gold-line); transform: translateY(-4px); }

.tech__badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: var(--gold-dim);
  padding: 6px 18px;
  margin-bottom: 18px;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.tech__title { font-size: 19px; font-weight: 600; margin-bottom: 12px; }
.tech__text { color: var(--text-muted); font-size: 15.5px; line-height: 1.65; }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 30px 28px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.step__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: #000;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 20px;
}

.step h3 { font-size: 18px; margin-bottom: 10px; }
.step p { color: var(--text-muted); font-size: 15.5px; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

/* Two parts (Arne, 30. 9. 2026): "Kontakt" = how to reach us (phone,
   e-mail, hours), "Kde nás najdete" = where to come (map + address +
   Navigate). Regular section spacing between them, like everywhere else. */

/* Phone: one card with rows. From 900px: one bar with three columns and
   slanted dividers - the same object as the proof bar in the hero
   (Arne, 30. 9. 2026). Narrower than 900px the phone number would wrap. */
.contact-tiles {
  position: relative;
  overflow: hidden;
  display: grid;
  padding: 4px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.contact-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}

.contact-tile + .contact-tile { border-top: 1px solid var(--line); }

@media (min-width: 900px) {
  .contact-tiles {
    grid-template-columns: repeat(3, 1fr);
    padding: 26px 0;
  }

  /* Gold flash in the corner, as on the proof bar */
  .contact-tiles::before {
    content: "";
    position: absolute;
    top: 0;
    left: 34px;
    width: 78px;
    height: 4px;
    background: var(--gold);
    transform: skewX(var(--slant));
  }

  .contact-tile {
    justify-content: center;
    padding: 0 28px;
  }

  .contact-tile + .contact-tile { border-top: 0; }

  /* Slanted divider, same angle as the logo and the proof bar */
  .contact-tile + .contact-tile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 44px;
    margin-top: -22px;
    background: var(--line-strong);
    transform: skewX(var(--slant));
  }
}

/* Ring from the logo badge, same family as the other icons */
.contact-tile__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
}

.contact-tile__label {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.contact-tile__value {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
}

a.contact-tile__value:hover { color: var(--gold-light); }

/* Address + Navigate on top, the map below, as one card (Arne, 30. 9.
   2026). The address uses the same label/value style as the contact bar.
   The map is darkened with a filter so the light Google tiles sit in
   the dark design. */
.map-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.map-card__map { height: 300px; background: var(--surface-1); }

.map-card__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(90%) hue-rotate(180deg) saturate(.6) brightness(.95) contrast(.9);
}

.map-card__bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.map-card__address { display: flex; align-items: center; gap: 14px; }

@media (min-width: 681px) {
  .map-card__map { height: 420px; }

  .map-card__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 28px;
  }

  .map-card__btn { flex-shrink: 0; }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

/* A full-width band that breaks the rhythm of the cards (Arne liked the
   edge-to-edge band), dressed like the "Servis od A do Z" card: the same
   gold tint from the left and gold lines where the card has its gold
   edge (Arne, 30. 9. 2026). Vertical space comes from .section; the
   content lines up with the rest of the page through .container. */
.cta-band {
  background:
    linear-gradient(120deg, rgba(169, 126, 22, .10), transparent 55%),
    var(--surface-2);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 32px;
}

.cta-band h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 8px; }
.cta-band p { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Placeholder marker
   Anything the client has not supplied yet is flagged so nobody mistakes
   filler for approved content. Remove with the .todo class.
   -------------------------------------------------------------------------- */

.todo {
  display: inline-block;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  padding: 1px 9px;
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
}

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

.footer { border-top: 1px solid var(--line); padding: var(--section-space) 0 32px; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 42px;
}

.footer__logo img { height: 72px; width: auto; margin-bottom: 18px; }
.footer__about { color: var(--text-muted); font-size: 15px; max-width: 280px; }

.footer h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 16px;
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer li { font-size: 15px; color: var(--text-muted); }
.footer li a { color: var(--text-muted); }
.footer li a:hover { color: var(--gold-light); }

.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Mobile call bar - phone is the main conversion for a garage
   -------------------------------------------------------------------------- */

.callbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 11, 12, .95);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}

/* Full width, but no taller than the other buttons (Arne, 30. 9. 2026:
   the old 57px button felt huge on a phone). */
.callbar .btn { flex: 1; }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

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

@media (max-width: 1000px) {
  .grid--3, .steps { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .reviews { grid-template-columns: 1fr 1fr; }
  .reviews__summary { grid-column: 1 / -1; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; order: 3; }
  .header__cta { display: none; }

  /* Full-screen menu (Arne, 30. 9. 2026): links and the booking button
     at the top, the rest of the screen left empty. The page behind does
     not scroll and the bottom bar hides while it is open. */
  /* Height set explicitly: the header's backdrop-filter makes it the
     containing block for this fixed element, so bottom: 0 would stop at
     the header's own bottom edge. dvh follows the phone's browser bars. */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    padding: 6px var(--gutter) 24px;
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
    overflow-y: auto;
  }

  .nav.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .28s ease;
  }

  .nav__link {
    padding: 15px 0;
    font-size: 16.5px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
  }

  .nav__link::after { display: none; }

  .nav__cta { display: inline-flex; align-self: flex-start; margin-top: 28px; }

  body.menu-open { overflow: hidden; }
  body.menu-open .callbar { display: none; }

  /* Smaller buttons wherever the phone layout is used - the same size as
     the header button on a desktop (Arne, 30. 9. 2026). */
  .btn {
    --notch: 11px;
    padding: 11px calc(20px + var(--notch));
    font-size: 15px;
  }

  .callbar { display: flex; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
  body { padding-bottom: 62px; }

  /* Hero - photo on top as its own band, copy below (Arne, 30. 9. 2026).
     Same breakpoint as the bottom bar on purpose: wherever the bar shows,
     the hero drops its buttons and stacks. A darkened backdrop hid the
     photo completely on a phone; the band keeps a similar shape from
     a small phone up to a portrait tablet. */
  .hero { display: block; min-height: 0; padding: 0 0 80px; }
  .hero__media {
    position: relative;
    inset: auto;
    height: clamp(200px, 56vw, 440px);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero__media img { object-position: center 30%; }
  .hero__media::after {
    inset: 0 0 -2px 0;
    background: linear-gradient(180deg, rgba(11,11,12,0) 58%, var(--bg) 100%);
  }
  .hero > .container { position: relative; margin-top: -22px; }
  .hero__lead { margin-bottom: 0; }
  .hero__rating { margin: 16px 0 0; }

  /* The bottom bar carries the booking button, so the hero doesn't repeat
     it. Scoped to .hero - the CTA band reuses the class. */
  .hero .hero__actions { display: none; }
}

@media (max-width: 680px) {
  :root { --gutter: 18px; --header-h: 68px; }

  body { font-size: 16px; }
  .grid--3, .grid--2, .steps, .reviews { grid-template-columns: 1fr; }

  /* Service cards on a phone - still roomy, but a whole card must fit
     between the header and the bottom bar (about 500px on a 360x640). */
  .grid:has(> .service) { gap: 18px; }
  /* Side padding stays at 20px: every point must fit one line, and the
     longest ("Nahlášení škody i dokumentace") needs 239 of the 241px. */
  .service { column-gap: 14px; padding: 26px 20px; }
  .service::after { width: 58px; height: 52px; }
  .service__icon { width: 44px; height: 44px; margin-left: 5px; }
  .service__icon::after { inset: -5px; }
  .service__icon svg { width: 25px; height: 25px; }
  .service__title { font-size: 20px; }
  .service__list { margin: 22px 0 24px; padding-top: 20px; gap: 13px; }

  /* Two by two - four stacked rows took a third of a phone screen.
     The third item starts a new row, so it has no divider on its left. */
  .proofbar { grid-template-columns: 1fr 1fr; row-gap: var(--pb-pad); }
  .proofbar__item:nth-child(3)::before { display: none; }
  .proofbar__note { text-align: center; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .header__logo img { height: 42px; }
  .hero__actions .btn { width: 100%; }

  /* Keeps the rating pill on one line, inside the column, on a 360px
     phone - with room to spare. */
  .hero__rating { gap: 6px; padding: 7px 11px 7px 10px; font-size: 13px; }
  .hero__stars { gap: 1px; }
  .hero__stars svg { width: 12px; height: 12px; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}