/* vertikala.si — glavni slog: postavitev po domači strani bricksbuilder.io (kartice z robom, pasovi s pozivom, zaobljen
   spodnji levi kot sekcij), barve in pisave po nordqr.com (modra, sivine, črno-vijoličen preliv, Inter, PT Serif za glavne naslove).
   Struktura: osnova, postavitev in naslovi sekcij, gumbi, logotip, glava, uvod, glavna referenca z logotipi,
   reference (trakova), pas s predlogom prenove, cenik, kartice (postopek), mnenja, FAQ, kontakt, noga,
   zahvalna stran, animacije, odzivnost, zmanjšano gibanje. */

/* ---------- Osnova ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: -0.01em;
  color: var(--color-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; color: var(--color-heading); }
/* Besedilo je v pisavi Inter, glavni naslovi (h1 v uvodu in h2 sekcij) pa v PT Serif, kot naslov uvoda na nordqr.com. */
h1, h2, h3 { letter-spacing: -0.02em; }
h1, h2 { font-family: var(--font-serif); }
h2 { letter-spacing: -0.01em; }
strong, b { font-weight: 700; }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.section--dark :focus-visible, .footer :focus-visible { outline-color: var(--color-brand-on-dark); }

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

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-skip);
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus, .skip-link:focus-visible { top: 10px; }

.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--chev { width: 16px; height: 16px; stroke-width: 1.8; }
/* Tri zvezdice (AI) na gumbu za brezplačen predlog: polne, v barvi besedila gumba. */
.icon--sparkle { width: 20px; height: 20px; fill: currentColor; stroke: none; }
/* Raketa (Lucide, ISC) na gumbu Začnimo nov projekt v uvodu: debelejša črta, da se ujema s krepkim besedilom gumba. */
.icon--rocket { stroke-width: 1.9; }

/* ---------- Postavitev in naslovi sekcij ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { position: relative; padding: var(--pad-y) 0; background: var(--color-white); }
.section--grey { background: var(--color-surface); }
.section--accent { background: var(--color-brand-light); }
.section--dark { background: var(--color-night) var(--gradient-night); color: var(--color-night-muted); }
.section--dark h2, .section--dark h3 { color: var(--color-night-text); }
.section--tight-top { padding-top: clamp(48px, 5.5vw, 80px); }

/* Zaobljen spodnji levi kot: sekcija prekrije začetek naslednje, ki se pomakne podnjo. Plasti padajo po strani,
   ker mora biti vsaka sekcija s kotom nad naslednjo, tudi če ima tudi ta kot. */
.corner { z-index: 1; border-bottom-left-radius: var(--radius-section); }
#predlog { z-index: 9; }
#reference { z-index: 8; }
#proces { z-index: 6; }
#uredimo { z-index: 5; }
#uredimo .section-head { margin-bottom: 0; }
#mnenja { z-index: 4; }
#faq { z-index: 3; }
#kontakt { z-index: 2; }
.corner + .section {
  margin-top: calc(-1 * var(--radius-section));
  padding-top: calc(var(--pad-y) + var(--radius-section));
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "over ." "title lead";
  column-gap: clamp(32px, 6vw, 96px);
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.overline {
  grid-area: over;
  margin-bottom: 12px;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-brand);
}
.section-head h2 { grid-area: title; font-size: var(--text-h2); line-height: var(--leading-h2); text-wrap: balance; }
.section-lead { grid-area: lead; }
.section--dark .overline, .section--dark .section-lead { color: var(--color-night-muted); }
.section-head--center {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "over" "title" "lead";
  justify-items: center;
  text-align: center;
}
.section-head--stack { grid-template-columns: minmax(0, 1fr); grid-template-areas: "over" "title" "lead"; }
.section-head--stack .section-lead { margin-top: 16px; }

/* ---------- Gumbi in povezave ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.btn--lg { min-height: 52px; padding: 8px 20px; font-size: 19px; }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: 16px; font-weight: 500; }
.btn--block { width: 100%; }
.btn .icon { width: 20px; height: 20px; }
.btn--solid { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); }
.btn--solid:hover { background: var(--color-brand-darker); border-color: var(--color-brand-darker); }
/* Beli gumb z obročem namesto obrobe, kot drugi gumb v uvodu nordqr.com. */
.btn--outline { background: var(--color-white); border-color: transparent; color: var(--color-ink); box-shadow: var(--shadow-ring); }
.btn--outline:hover { background: var(--color-surface-2); }
.btn--light { background: #fcfcfc; border-color: #fcfcfc; color: var(--color-body); }
.btn--light:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-ink); }

.text-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--color-ink); }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.inline-link { font-weight: 600; color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Logotip: besedni znak, v katerem se prva črka v nadaljuje v puščico ---------- */
/* Datoteki SVG z zaokroženimi obrisi pisave Inter ExtraBold: skoraj črna beseda, črka v s prelivom iz črne v vijolično;
   v nogi je negativ (bela beseda, preliv iz bele v vijolično). Prejšnja različica je shranjena kot logo-vertikala-v1*.svg. */
.brand { display: inline-flex; align-items: center; color: var(--color-ink); }
.brand-logo { display: block; width: auto; height: 28px; }
.brand--light { color: var(--color-night-text); }
/* Samostojni znak (noga, kartica v uvodu, favicon): ista črka v s puščico, bela na kvadratu.
   Kvadrat znaka nosi črno-vijoličen preliv kot ozadje elementa svg, zato ne rabi gradientov z id v vsakem svg. */
.brand-mark { flex-shrink: 0; border-radius: 25%; background: var(--color-night) var(--gradient-mark); }
.brand-mark path { fill: var(--color-white); }
/* Logotip je povezava na domačo stran; ob prehodu miške rahlo pobledi. */
a.brand { transition: opacity var(--transition-base); }
a.brand:hover { opacity: 0.8; }

/* ---------- Glava po nordqr.com: logotip levo, meni na sredini, telefon in gumb desno ---------- */
/* Zabrisano ozadje je na psevdoelementu: backdrop-filter na sami glavi bi zlomil fiksni mobilni meni v njej. */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  isolation: isolate;
  background: rgba(255, 255, 255, 0.85);
  transition: box-shadow var(--transition-base);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.header.scrolled { box-shadow: 0 1px 0 var(--color-line); }

/* Tri stolpci: meni je na sredini, dokler je prostor; stranska stolpca se razširita na vsebino, zato se nič ne prekriva. */
.header-inner {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  column-gap: 32px;
  height: var(--header-h);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.header-inner > .brand { justify-self: start; }
.nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 40px); }
.nav > a { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-ink); transition: color var(--transition-base); }
.nav > a:hover { color: var(--color-brand); }
.nav-extra { display: none; }

.header-actions { display: flex; align-items: center; gap: 20px; justify-self: end; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-btn);
  background: none;
  cursor: pointer;
}
.hamburger span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-ink);
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Uvod ---------- */
.hero { position: relative; background: var(--color-white); text-align: center; overflow-x: clip; }
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(1024px + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 72px) var(--gutter) 0;
}
/* Vse besedilo uvoda je enotno črno (želja uporabnika). */
.hero h1 { max-width: 13.5em; font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: -0.022em; color: var(--color-night); text-wrap: balance; }
.hero-lead { max-width: 720px; margin-top: 24px; font-size: clamp(18px, 1.7vw, 22.4px); line-height: 1.4; letter-spacing: -0.01em; color: var(--color-night); }
/* Podnaslov: vsak stavek v svoji vrstici, na namizju sta to največ dve vrstici; na telefonu se drugi stavek uravnoteženo prelomi. */
.hero-lead span { display: block; text-wrap: balance; }
.hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
.hero-buttons .btn { min-height: 51px; padding: 12px 32px; font-size: 18px; font-weight: 500; }


/* ---------- Glavna referenca: sedanja stran v oknu brskalnika (okvir kot okno aplikacije v uvodu nordqr.com) ---------- */
/* Okno sega v pas pod uvodom; za koliko, določa --shot-overlap. */
.hero-visual {
  --shot-overlap: clamp(48px, 9vw, 140px);
  position: relative;
  z-index: 10;
  margin-bottom: calc(-1 * var(--shot-overlap));
  padding: clamp(48px, 6vw, 72px) var(--gutter) 0;
}
.hero + .section { padding-top: calc(clamp(48px, 9vw, 140px) + clamp(48px, 5vw, 72px)); }

.hero-shot { position: relative; width: min(1040px, 100%); margin: 0 auto; }
/* Za oknom bela preide v lavando pasu pod uvodom, da rjava stran ne stoji sama na beli. Pas čez vso širino sega
   od vrha okna do začetka pasu (1px čezenj, da ni vidnega šiva); hero ga ob straneh odreže z overflow-x: clip. */
.hero-shot::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: calc(var(--shot-overlap) - 1px);
  left: 50%;
  width: 100vw;
  background: linear-gradient(var(--color-white), var(--color-brand-light));
  transform: translateX(-50%);
}
.hero-shot__window {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 40px 80px -30px rgba(19, 19, 22, 0.45), 0 18px 36px -18px rgba(19, 19, 22, 0.25);
}
.hero-shot__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-2);
}
.hero-shot__dots { position: absolute; top: 50%; left: 16px; display: flex; gap: 7px; transform: translateY(-50%); }
.hero-shot__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-line-strong); }
.hero-shot__url { padding: 4px 28px; border-radius: 999px; background: var(--color-surface); font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--color-muted); }
.hero-shot__img { width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top center; background: var(--color-surface); }

/* Telefon: tanek temen okvir z dinamičnim otokom in ročno izdelan mobilni vmesnik (rezervacija termina v barvah
   Manualnih masaž). Vse notranje mere so v cqw, zato se vmesnik pomanjša skupaj s telefonom. */
.hero-shot__phone {
  position: absolute;
  right: -4%;
  bottom: -10%;
  z-index: 4;
  width: min(23%, 236px);
  aspect-ratio: 9 / 18.2;
  padding: 6px;
  border-radius: 40px;
  background: #0b0b0d;
  box-shadow:
    0 0 0 1px #3f3f46,
    0 30px 60px -20px rgba(19, 19, 22, 0.55),
    0 0 40px 12px rgba(0, 0, 0, 0.12);
  container-type: inline-size;
}
.hero-shot__phone::before {
  content: "";
  position: absolute;
  top: 24%;
  right: -3px;
  width: 3px;
  height: 11%;
  border-radius: 0 2px 2px 0;
  background: #27272a;
}
.hero-shot__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 15cqw;
  background: #f6efe7;
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-align: left;
}
.hero-shot__island {
  position: absolute;
  top: 3.2cqw;
  left: 50%;
  z-index: 3;
  width: 30cqw;
  height: 8.4cqw;
  border-radius: 99px;
  background: #0b0b0d;
  transform: translateX(-50%);
}
.mui-top { background: #7f5a43; color: #f5e9da; }
.mui-status { display: flex; align-items: center; justify-content: space-between; height: 14cqw; padding: 0 7cqw 0 9cqw; font-size: 4.4cqw; font-weight: 600; color: #fff; }
.mui-status__icons { display: flex; align-items: center; gap: 1.6cqw; }
.mui-status__icons i:first-child {
  width: 5.4cqw;
  height: 3.4cqw;
  background: linear-gradient(to right, #fff 0 16%, transparent 16% 28%, #fff 28% 44%, transparent 44% 56%, #fff 56% 72%, transparent 72% 84%, #fff 84%);
  -webkit-mask: linear-gradient(to top left, #000 50%, transparent 50%);
  mask: linear-gradient(to top left, #000 50%, transparent 50%);
}
.mui-status__icons i:last-child {
  width: 7.2cqw;
  height: 3.6cqw;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 1.2cqw;
  background: linear-gradient(#fff, #fff) 1px 50% / 68% calc(100% - 2px) no-repeat;
}
.mui-head { display: flex; align-items: center; justify-content: space-between; padding: 0.6cqw 6cqw 3.4cqw; }
/* Originalni logotip Manualnih masaž (figura in napis), kot v glavi njihove strani. */
.mui-logo { width: auto; height: 12.5cqw; }
.mui-burger { display: grid; gap: 1.4cqw; }
.mui-burger i { width: 6cqw; height: 0.9cqw; border-radius: 1px; background: currentColor; }
.mui-hero { position: relative; height: 62cqw; }
.mui-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mui-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(40, 26, 18, 0.35), rgba(40, 26, 18, 0.62)); }
/* Besedilo na sredini fotografije (nad robom kartice), kot na mobilni strani Manualnih masaž. */
.mui-hero__text { position: absolute; inset: 0 6cqw 5cqw; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; }
.mui-hero__text small { display: block; font-size: 3.4cqw; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.mui-hero__text b { display: block; margin-top: 1.6cqw; font-family: var(--font-serif); font-size: 7.4cqw; line-height: 1.12; text-wrap: balance; }
.mui-book {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: -5cqw;
  padding: 6cqw 6cqw 7cqw;
  border-radius: 7cqw 7cqw 0 0;
  background: #fff;
}
.mui-book__title { font-family: var(--font-serif); font-size: 6.4cqw; font-weight: 700; line-height: 1.15; color: #2d211a; }
.mui-book__sub { margin-top: 1cqw; font-size: 3.8cqw; color: #8a7b70; }
.mui-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4cqw; margin-top: 5cqw; }
.mui-days span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqw;
  padding: 2.6cqw 0;
  border: 1px solid #eadfd4;
  border-radius: 3.6cqw;
  font-size: 3.4cqw;
  color: #8a7b70;
}
.mui-days b { font-size: 5.4cqw; line-height: 1; color: #2d211a; }
.mui-days .is-on { border-color: #7f5a43; background: #7f5a43; color: #f5e9da; }
.mui-days .is-on b { color: #fff; }
.mui-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; margin-top: 4cqw; }
.mui-slots span { padding: 2.6cqw 0; border-radius: 3cqw; background: #f6efe7; font-size: 4cqw; font-weight: 600; text-align: center; color: #4a3a30; }
.mui-slots .is-on { background: #2d211a; color: #fff; }
.mui-slots .is-off { background: #faf6f1; color: #cbbfb4; text-decoration: line-through; }
.mui-sum { display: flex; justify-content: space-between; margin-top: 4cqw; padding: 3cqw 3.6cqw; border-radius: 3cqw; background: #f6efe7; font-size: 3.8cqw; color: #8a7b70; }
.mui-sum b { color: #2d211a; }
.mui-cta { margin-top: auto; padding: 3.6cqw 0; border-radius: 3.6cqw; background: #7f5a43; font-size: 4.2cqw; font-weight: 700; text-align: center; color: #fff; }

/* Plavajoče obvestilo ob telefonu: nova rezervacija, kot da je stran pravkar pripeljala stranko. */
.hero-shot__toast {
  position: absolute;
  top: 36%;
  left: -56%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 3.4cqw;
  padding: 3.4cqw 5.4cqw 3.4cqw 3.4cqw;
  border-radius: 5cqw;
  background: var(--color-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 18px 40px -12px rgba(19, 19, 22, 0.35);
  white-space: nowrap;
  text-align: left;
}
.hero-shot__toast i { display: grid; place-items: center; flex-shrink: 0; width: 10cqw; height: 10cqw; border-radius: 50%; background: #16a34a; color: #fff; }
.hero-shot__toast svg { width: 5.6cqw; height: 5.6cqw; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero-shot__toast b { display: block; font-size: 5cqw; line-height: 1.2; color: var(--color-ink); }
.hero-shot__toast small { display: block; font-size: 4cqw; line-height: 1.3; color: var(--color-muted); }

.hero-shot__card {
  position: absolute;
  left: -5%;
  bottom: -7%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 14px 14px;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 0 30px 12px rgba(0, 0, 0, 0.12);
  text-align: left;
}
.hero-shot__card b { display: block; font-size: 16px; line-height: 1.3; color: var(--color-ink); }
.hero-shot__card small { display: block; font-size: 14px; line-height: 1.4; color: var(--color-muted); }

/* ---------- Reference: dva trakova posnetkov v nasprotnih smereh (Pre-made Templates) ---------- */
/* Vsak trak ima seznam dvakrat, da se zanka ne pretrga; drugi seznam je skrit bralnikom zaslona. Safari na iPhonu izriše
   samo sloj, ki je brez animacije na zaslonu: zato drugi seznam v postavitvi stoji na mestu prvega in ga za seznam desno
   zamakne šele animacija. Premika se vsak seznam posebej, ker cel trak kot en širok sloj Safari izriše po ploščicah in
   ob premiku ostane prazen. */
.work-marquee {
  --gap: clamp(16px, 2.4vw, 38px);
  --card-w: clamp(250px, 30vw, 480px);
  display: grid;
  gap: var(--gap);
  max-width: 2400px;
  margin: 0 auto;
  padding: 8px 0 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.work-row { position: relative; display: flex; width: max-content; }
.work-list { display: flex; flex-shrink: 0; gap: var(--gap); animation: work-scroll 112s linear infinite; }
.work-list + .work-list { position: absolute; top: 0; left: 0; animation-name: work-scroll-next; }
.work-row--reverse .work-list { animation-duration: 96s; animation-direction: reverse; }
@keyframes work-scroll {
  to { transform: translateX(calc(-100% - var(--gap))); }
}
@keyframes work-scroll-next {
  from { transform: translateX(calc(100% + var(--gap))); }
  to { transform: translateX(0); }
}
.work-item {
  flex: 0 0 var(--card-w);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-night-line);
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}
.work-item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work-cta { margin-top: clamp(40px, 5vw, 64px); padding: 0 var(--gutter); text-align: center; }

/* ---------- Pas s predlogom prenove (po vzoru pasu Playground) ---------- */
.band-inner { display: flex; flex-direction: column; align-items: center; max-width: calc(760px + 2 * var(--gutter)); text-align: center; }
.band h2 { font-size: var(--text-h2); line-height: var(--leading-h2); color: var(--color-ink); text-wrap: balance; }
.band p { margin-top: 12px; color: var(--color-body); }
.offer-form { display: flex; gap: 10px; width: min(100%, 560px); margin-top: 28px; }
.offer-form__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-btn);
  background: var(--color-white);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-ink);
}
.offer-form__input::placeholder { color: #71717a; opacity: 1; }
.offer-form__input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.offer-form__input[aria-invalid="true"] { border-color: var(--color-form-error); box-shadow: 0 0 0 1px var(--color-form-error); }
.band p.offer-form__error { margin-top: 0; }
.band p.offer-form__error:not(:empty) { margin-top: 12px; font-size: var(--text-sm); font-weight: 700; color: var(--color-form-error); }

/* ---------- Cenik ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 3.5vw, 40px);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border: 1px solid var(--color-subtle);
  border-radius: var(--radius-btn);
  color: var(--color-ink);
}
.plan-name { font-size: var(--text-lead); line-height: 1.4; font-weight: 600; letter-spacing: 0; }
.plan-price { margin-top: 6px; font-size: var(--text-stat); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-ink); }
.plan-lead { margin-top: 12px; }
.offer-in { display: grid; gap: 14px; align-self: stretch; margin: 28px 0 36px; padding-top: 28px; border-top: 1px solid var(--color-line-strong); }
.offer-in li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink); }
.offer-check { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; color: var(--color-brand); }
.plan-btn { align-self: stretch; margin-top: auto; }

/* Doplačila kot pri pogostih vprašanjih: naslov in besedilo na sredini, pod njima ozek seznam s črtami. */
.addons { max-width: 760px; margin: clamp(64px, 8vw, 112px) auto 0; }
.addons-head { text-align: center; }
.addons-head h3 { font-family: var(--font-serif); font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: -0.01em; }
.addons-list { margin-top: 32px; border-top: 1px solid var(--color-line-strong); }
.addon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-line-strong);
  color: var(--color-ink);
}
.addon-text b { display: block; font-size: var(--text-sm); line-height: 1.4; }
.addon-text small { display: block; margin-top: 2px; font-size: var(--text-xs); line-height: 1.5; color: var(--color-body); }
.addon-price { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.addon-price small { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }

/* ---------- Kartice: postopek (po vzoru bloka Why Bricks) ---------- */
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-white);
}

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.step-num { font-size: var(--text-sm); font-weight: 700; }
.step h3 { margin-top: 24px; font-size: 24px; line-height: 1.3; }
.step p { margin-top: 10px; }

/* ---------- Mnenja: temne kartice s citatom ---------- */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 3.5vw, 40px);
  border: 1px solid var(--color-night-line);
  border-radius: var(--radius-card);
  text-align: center;
}
.quote blockquote p { font-family: var(--font-quote); font-size: 19px; line-height: 1.65; color: var(--color-night-text); }
.quote figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.quote-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-night-line);
  border-radius: 50%;
  background: var(--color-night-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-night-text);
}
img.quote-avatar { object-fit: cover; }
.quote-who b { display: block; font-size: var(--text-sm); line-height: 1.3; color: var(--color-night-text); }
.quote-who small { display: block; font-size: var(--text-xs); color: var(--color-night-muted); }
a.quote-who b, a.quote-who small { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--transition-base); }
a.quote-who:hover b, a.quote-who:hover small { text-decoration-color: currentColor; }

/* ---------- Pogosta vprašanja ---------- */
/* Po vzoru nordqr.com: serifni naslov na sredini, ozek seznam brez kartic, vrstice ločene s tanko črto, puščica desno. */
.faq-head .section-lead { margin-top: 16px; }
.faq-head .inline-link { font-weight: inherit; text-decoration: none; }
.faq-head .inline-link:hover { text-decoration: underline; }
.faq-list { max-width: 760px; margin-inline: auto; border-bottom: 1px solid var(--color-line); }
.faq-item { border-top: 1px solid var(--color-line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
}
.faq-item summary::-webkit-details-marker, .faq-item summary::marker { display: none; content: none; }
.faq-item summary::after {
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 7 6 6 6-6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--chev) center / contain no-repeat;
  mask: var(--chev) center / contain no-repeat;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: block-size 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0.35s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; opacity: 1; }
.faq-answer { padding: 0 44px 24px 0; }
.faq-answer p + p { margin-top: 12px; }

/* ---------- Kontakt ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(32px, 6vw, 96px);
  align-items: start;
}
.contact-info .section-head { margin-bottom: 32px; }
.contact-list { display: grid; gap: 14px; }
.contact-list li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--color-ink); }
.contact-list a { text-decoration: underline; text-underline-offset: 3px; }

.form-card {
  padding: clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}
.contact-form { position: relative; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group-full { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 8px; font-size: var(--text-xs); font-weight: 600; line-height: 1.4; color: var(--color-ink); }
.required { color: var(--color-form-error); }
/* Polnjena polja brez oznak nad njimi: ime polja je v polju, obroba se pokaže šele ob fokusu. */
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--color-surface);
  font-size: 17px;
  font-weight: 400;
  color: var(--color-ink);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}
.form-group textarea { min-height: 160px; resize: vertical; }
/* Siva za ime polja: dovolj kontrasta na sivi podlagi polja (5 : 1), ker je to edina vidna oznaka. */
.form-group input::placeholder, .form-group textarea::placeholder { color: #6b6b74; opacity: 1; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--color-brand);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgb(74 74 216 / 0.25);
}
.form-group input[aria-invalid="true"], .form-group textarea[aria-invalid="true"], .form-group select[aria-invalid="true"] { border-color: var(--color-form-error); }
.field-error { margin-top: 6px; font-size: var(--text-xs); color: var(--color-form-error); }

.form-consent { margin: 4px 0 20px; }
.checkbox-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: var(--text-xs); line-height: 1.6; }
.checkbox-label input[type="checkbox"] {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  appearance: none;
  border: 1.5px solid var(--color-subtle);
  border-radius: 6px;
  background: var(--color-white);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"]:checked { background: var(--color-brand); border-color: var(--color-brand); }
.checkbox-label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 2.5px;
  width: 5px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent-text a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5em; margin-bottom: 12px; text-align: center; font-size: var(--text-sm); color: var(--color-form-error); }
.form-status.is-ok { color: var(--color-success-text); }
.btn:disabled { opacity: 0.6; cursor: wait; }

/* ---------- Noga ---------- */
/* Zadnja sekcija strani ima zaobljen kot, zato se noga pomakne podnjo. */
.footer {
  position: relative;
  margin-top: calc(-1 * var(--radius-section));
  padding: calc(var(--pad-y) + var(--radius-section)) 0 40px;
  background: var(--color-night);
  color: var(--color-night-muted);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-night-line);
}
.footer-brand p { margin-top: 14px; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding: 40px 0;
  border-bottom: 1px solid var(--color-night-line);
}
.footer-head { margin-bottom: 10px; }
.footer-col a, .footer-col span, .footer-col address {
  display: block;
  padding: 4px 0;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-night-text);
}
.footer-col a:hover { color: var(--color-brand-on-dark); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 32px; font-size: var(--text-sm); }

/* ---------- Stran Reference ---------- */
/* Po vzoru nordqr.com: siva podlaga, posnetek strani v temni zaobljeni kartici, ob njem serifni naslov, opis in povezava;
   strani se izmenjujeta, na telefonu je posnetek vedno nad besedilom. */
.refs-page main { background: var(--color-surface); }
.refs-intro { padding: clamp(56px, 7vw, 104px) 0 clamp(16px, 3vw, 40px); text-align: center; }
.refs-intro h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.refs-lead { max-width: 44rem; margin: 20px auto 0; font-size: var(--text-lead); text-wrap: balance; }
.refs-list { padding-bottom: clamp(40px, 6vw, 88px); }
.refs-item { padding: clamp(40px, 5vw, 64px) 0; }
.refs-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}
.refs-item:nth-child(even) .refs-media { order: 2; }
.refs-media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 10%;
  border-radius: 16px;
  /* Barvi kartice sta vzeti iz posnetka projekta (--refs-base temna osnova, --refs-glow sij spodaj desno), nastavljeni
     na vrstici v reference.html; brez njiju ostane črno-vijoličen preliv strani. */
  background: linear-gradient(160deg, var(--refs-base, #131316) 0%, var(--refs-base, #181219) 40%, var(--refs-glow, #660047) 115%) var(--refs-base, var(--color-night));
}
.refs-media img { width: 100%; border-radius: 8px; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5); }
.refs-text h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: -0.01em; text-wrap: balance; }
.refs-text p { max-width: 34rem; margin-top: 20px; font-size: var(--text-lead); }
.refs-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 16px; font-weight: 600; color: var(--color-brand); }
.refs-link .icon { width: 18px; height: 18px; stroke-width: 2; }
.refs-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.refs-cta .btn { margin-top: 28px; }

/* ---------- Zahvalna stran ---------- */
.thanks-page .header { box-shadow: 0 1px 0 var(--color-line); }
.thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: calc(100vh - var(--header-h));
  padding: var(--pad-y) var(--gutter);
  text-align: center;
}
.thanks .overline { margin-bottom: 0; }
.thanks h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.2; }
.thanks p { max-width: 36rem; }
.thanks .btn { margin-top: 12px; }

/* ---------- Animacije ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

.offer-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.offer-in.is-drawn li:nth-child(1) .offer-check path { animation: offer-check-draw 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.04s forwards; }
.offer-in.is-drawn li:nth-child(2) .offer-check path { animation: offer-check-draw 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards; }
.offer-in.is-drawn li:nth-child(3) .offer-check path { animation: offer-check-draw 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; }
.offer-in.is-drawn li:nth-child(4) .offer-check path { animation: offer-check-draw 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards; }
.offer-in.is-drawn li:nth-child(5) .offer-check path { animation: offer-check-draw 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.36s forwards; }
@keyframes offer-check-draw { to { stroke-dashoffset: 0; } }

/* ---------- Odzivnost ---------- */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .header-inner { display: flex; justify-content: space-between; }
  .nav {
    position: fixed;
    top: var(--nav-top, var(--header-h));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-nav);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px var(--gutter) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-white);
    border-top: 1px solid var(--color-line);
  }
  .nav.active { display: flex; }
  .nav > a {
    display: flex;
    align-items: center;
    min-height: 60px;
    border-bottom: 1px solid var(--color-line);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-ink);
  }
  .nav-extra { display: grid; gap: 16px; margin-top: 28px; }
  .header-actions { display: none; }
  .hamburger { display: flex; }
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .hero-shot__phone, .hero-shot__card { display: none; }
  .section-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "over" "title" "lead"; }
  .section-head .section-lead { margin-top: 16px; }
  .plans, .quotes, .form-row { grid-template-columns: minmax(0, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; }
  .refs-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .refs-item:nth-child(even) .refs-media { order: 0; }
  /* Seznam referenc je tu pol ožji kot na računalniku, zato krajši čas (okoli 19 px/s); razmerje trakov ostane 112 : 96. */
  .work-list { animation-duration: 96s; }
  .work-row--reverse .work-list { animation-duration: 82s; }
}

@media (max-width: 600px) {
  .hero-lead { font-size: 16px; }
  .brand-logo { height: 24px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .hero-buttons { flex-direction: column; align-items: stretch; width: 100%; }
  .offer-form { flex-direction: column; }
  .hero-shot__window { border-radius: 12px; }
  .hero-shot__bar { height: 24px; }
  .hero-shot__dots { left: 10px; gap: 5px; }
  .hero-shot__dots i { width: 7px; height: 7px; }
  .hero-shot__url { padding: 2px 16px; font-size: 10px; }
  .work-item { border-radius: var(--radius-btn); }
  .footer-top .btn { width: 100%; }
}

/* Zelo ozki telefoni: Inter je širši, zato je podnaslov nekoliko manjši, da prvi stavek ostane v eni vrstici. */
@media (max-width: 380px) {
  .hero-lead { font-size: 15px; }
}

/* ---------- Zmanjšano gibanje ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nav > a, .header, .hamburger span, .skip-link, .faq-item summary::after, .faq-item::details-content,
  .form-group input, .form-group textarea, .form-group select { transition: none; }
  .offer-check path { stroke-dashoffset: 0; animation: none; }
  .fade-in { opacity: 1; transform: none; transition: none; }
  .work-list { animation: none; }
  .work-list + .work-list { display: none; }
}

/* ---------- Storitve: kartice na domači strani in pristajalne strani storitev (izdelava, prenova, trgovine) ---------- */
/* Tri kartice storitev s povezavo na svojo stran; na pristajalnih straneh so prednosti štiri kartice v vrsti. */
#storitve { z-index: 7; }
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.service-card h3, .benefit h3 { font-size: 24px; line-height: 1.3; }
.service-card h3 a { color: inherit; transition: color var(--transition-base); }
.service-card h3 a:hover { color: var(--color-brand); }
.service-card > h3, .benefit > h3 { margin-top: 24px; }
.service-card p, .benefit p { margin-top: 10px; }
.service-card .text-link { margin-top: auto; padding-top: 24px; color: var(--color-brand); }
.benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.benefit p { font-size: var(--text-sm); }

/* Uvod pristajalne strani: brez okna z referenco, zato manj prostora pod gumbi in običajen odmik naslednje sekcije. */
.landing .hero-inner { padding-bottom: clamp(48px, 6vw, 80px); }
.landing .hero + .section { padding-top: var(--pad-y); }
.landing .hero h1 { max-width: 15em; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; font-size: var(--text-xs); color: var(--color-muted); }
.crumbs a { color: var(--color-muted); transition: color var(--transition-base); }
.crumbs a:hover { color: var(--color-brand); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--color-subtle); }
.crumbs [aria-current] { color: var(--color-ink); font-weight: 500; }
/* Plasti zaobljenih kotov na pristajalni strani (vrstni red sekcij: predlog, uvod, prednosti, vključeno, cenik, postopek,
   reference, mnenja, vprašanja, kontakt). */
.landing #predlog { z-index: 12; }
.landing #uvod { z-index: 11; }
.landing #prednosti { z-index: 10; }
.landing #vkljuceno { z-index: 9; }
.landing #proces { z-index: 8; }
.landing #reference { z-index: 7; }
.landing #mnenja { z-index: 6; }
.landing #faq { z-index: 5; }
.landing #kontakt { z-index: 4; }
.prose { max-width: 760px; margin-inline: auto; }
.prose p + p { margin-top: 16px; }
/* Vključeno v ceno: kljukice v dveh stolpcih (izven cenika kljukica ni animirana, zato je narisana takoj). */
.included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; max-width: 900px; margin-inline: auto; }
.included li { display: flex; align-items: flex-start; gap: 12px; color: var(--color-ink); }
.included .offer-check path { stroke-dashoffset: 0; }
.cenik-note { max-width: 760px; margin: 32px auto 0; text-align: center; font-size: var(--text-sm); }
/* Izbor referenc: tri statične kartice z okvirjem kot v traku, podnapis pod njimi. */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.work-grid .work-item { flex: none; border-color: var(--color-line); }
.work-grid figcaption { margin-top: 12px; font-size: var(--text-sm); color: var(--color-body); }
.work-grid + .work-cta { padding: 0; }

@media (max-width: 1100px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .services, .work-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .benefits, .included { grid-template-columns: minmax(0, 1fr); } }