/* ============================================================
   ZARYAPLANT — Podstránky služieb a oblasti pôsobenia
   Nová vrstva nad css/privacy.css — tá ostáva iba škrupinou (fonty,
   :root tokeny, hlavička, pätička, grain, skip-link, dotyk T134).
   Všetko vnútri <main> nesie tento súbor, výhradne cez triedy
   s predponou `svc-`, aby sa kaskáda s `.privacy-*` pravidlami nikdy
   nestretla (redesign.md §3.3).

   Rytmus stránky — sled celoplošných pásiem so striedavým tónom:

     (1) titulná dvojstrana      piesok, fotografia preteká vpravo hore
     (2) index kapitol           piesok, ikony + verzálky, vlasové linky
                                 (na stránke návrhu je zámerne vynechaný)
     (3) čo služba zahŕňa        TMAVOZELENÁ + fotografia vpravo;
                                 proces návrhu má papierovú dvojstranu
     (4) príprava + prečo tu     papier
     (5) realizácie              piesok, pás fotografií k pravému okraju
     (6) súvisiace + kontakt     papier, uzatvárací riadok

   Jediný tmavý moment je (3). Bez neho je 3 000 px dlhá stránka jeden
   nepretržitý pieskový pás, v ktorom oko nemá kde zastaviť — to bola
   hlavná chyba prvého pokusu.
   ============================================================ */

:root {
  --svc-paper: #f9f6ef;                          /* = --about-card-paper */
  --green-soft: #16281c;                         /* CTA z hlavnej stránky */
  --svc-band-y: clamp(3.25rem, 6vw, 5.5rem);
  --svc-gutter: 1.5rem;
  /* Bočný okraj mobilnej hlavičky (T147). Zhodný s `--about-mobile-gutter`
     domovskej stránky — nie `--svc-gutter`, ten pod 820 px klesá na
     1,15 rem a text hlavičky by sa tak lepil na okraj tesnejšie než
     ktorýkoľvek úvod sekcie na domovskej stránke. */
  --svc-hero-gutter: 1.5rem;
  /* Nadlinka v rytme domovskej stránky (T147). Hodnoty sú prevzaté
     z css/style.css — privacy.css tieto tokeny nenesie, lebo právne
     stránky nadlinku nemajú. Pri zmene v style.css meň aj tu. */
  --eyebrow-ink: #8a6829;
  --eyebrow-rule: 2px;
  --eyebrow-rule-length: 2.5rem;
  --eyebrow-rule-length-mobile: 1.85rem;
  --svc-max: 82rem;                              /* zhodné s pätičkou */
  --svc-container: min(calc(100% - var(--svc-gutter) * 2), var(--svc-max));
  /* Bočný okraj celoplošného pásma. Zámerne `100%` a nie `100vw` —
     na Windows so scrollbarom vyrába `100vw` vodorovné rolovanie
     (CLAUDE.md, redesign.md §3.3). */
  --svc-edge: minmax(var(--svc-gutter), calc((100% - var(--svc-max)) / 2));

  /* Strop kompozície na ultrawide (T153). Zhodné s css/style.css —
     podstránky style.css nelinkujú, takže sa tokeny musia zopakovať.
     Pri zmene meň obe miesta. Zámerne v `rem`: strop tak rastie so
     zväčšením stránky a kompozícia sa neláme ani pri 125 % zoome. */
  --shell-max: 120rem;
  --shell-air: max(0px, calc((100% - var(--shell-max)) / 2));
}

@media (max-width: 820px) {
  :root { --svc-gutter: 1.15rem; }
}

/* Kotvy z indexu kapitol musia zohľadniť fixnú hlavičku. */
html[data-page^="service-"],
html[data-page="area"] {
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

/* `main` v privacy.css je stredovaný a orezaný na 82rem — tu je obsah
   sled celoplošných pásiem, takže šírkové obmedzenie sa presúva dnu. */
[data-page^="service-"] main,
[data-page="area"] main {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: clip;   /* poistka proti pretečeniu pretekajúcich fotografií */
}

/* Bez `height: auto` vyhrá prezentačný atribút `height` z HTML nad
   `aspect-ratio` — obrázok si ponechá svoju pôvodnú výšku v pixeloch
   a pás realizácií narastie o tisíc pixelov. Presne tá chyba, ktorú
   mal pevný pomer strán odstrániť.

   `:where()` je tu nevyhnutné: bez neho má selektor s dvomi typmi
   (`main img`) vyššiu špecifickosť než `.svc-hero__figure img`, prebije
   mu `height: 100%` a fotografia hlavičky pretečie pod pásmo. */
:where([data-page^="service-"], [data-page="area"]) :where(main img) {
  max-width: 100%;
  height: auto;
}

.svc-container {
  width: var(--svc-container);
  margin-inline: auto;
}

/* Ikona je vždy tenký obrys Phosphor Thin priamo na podklade — žiadny
   vyplnený kruhový odznak. Taký odznak číta oko ako logo a presne to sa
   na predlohe nepáčilo (redesign.md §2.3). Hrúbka je súčasťou tvaru,
   `stroke-width` sa nikam nepridáva (CLAUDE.md §1b). */
.svc-icon {
  display: block;
  color: var(--gold-deep);
}

.svc-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

/* ============================================================
   (1) Titulná dvojstrana
   Fotografia sedí absolútne v pravej časti pásma a preteká k pravému
   okraju okna. Do piesku sa nerozplýva maskou, ale prekryvom
   z priesvitného piesku — maska (`mask-composite`) je mladšia funkcia
   a pri jej výpadku by fotografia skončila tvrdým obdĺžnikom.
   Plátno je jednoliata farba, takže prekryv dá presne ten istý výsledok
   a funguje všade.
   ============================================================ */
.svc-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns:
    var(--svc-edge)
    [copy-start] minmax(0, 34rem) [copy-end]
    minmax(0, 1fr);
  align-items: center;
  /* T154 — hlavička je presne jedna obrazovka na každej veľkosti okna.
     Do T154 tu stál `clamp(26rem, 44vw, 40rem)`: strop 40 rem sa nad
     ~1455 px prestal hýbať, takže pri 2560 aj 3840 px vykukovalo pod
     hlavičkou ďalšie pásmo — na 4K vypĺňala hlavička sotva tretinu
     obrazovky. Mechanizmus je ten istý, aký má od T138 oblasť pôsobenia:
     `max()` s podlahou namiesto `clamp()` so stropom. Mobilné vrstvy
     a vrstva pre telefón naležato na konci súboru si ho prepisujú samy. */
  min-height: max(26rem, calc(100svh - var(--header-h)));
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}

.svc-hero__figure {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: min(74%, 70rem);
  margin: 0;
}

.svc-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-hero__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      var(--sand) 0%,
      rgba(241, 235, 216, 0.94) 16%,
      rgba(241, 235, 216, 0.55) 34%,
      rgba(241, 235, 216, 0) 56%),
    linear-gradient(to bottom,
      rgba(241, 235, 216, 0) 58%,
      rgba(241, 235, 216, 0.55) 82%,
      var(--sand) 100%);
}

.svc-hero__copy {
  position: relative;
  z-index: 1;
  grid-column: copy-start / copy-end;
  padding-block: clamp(3rem, 5.5vw, 4.5rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
}

.svc-hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-caps-xs);
  text-transform: uppercase;
  color: var(--gold-deep);
}

.svc-hero__kicker::before {
  content: '';
  flex: 0 0 auto;
  width: 2.4rem;
  height: 1px;
  background: var(--gold);
}

.svc-hero h1 {
  margin-top: 0.85rem;
  font-family: var(--font-serif);
  font-size: var(--type-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: var(--lead-title);
  text-wrap: balance;
}

.svc-hero__intro {
  max-width: 30rem;
  margin-top: 1.25rem;
  color: var(--ink-soft);
  font-size: var(--type-card-title);
  line-height: var(--lead-body);
  text-wrap: pretty;
}

/* Návrh záhrady používa široký master 2,5 : 1 ako celoplošné pozadie.
   Pomer takmer presne sedí na desktopové hero pod hlavičkou, preto
   `cover` nevyrába viditeľné priblíženie; na úzkych obrazovkách sa celý
   záber zobrazuje pod textom. Typografia ostáva zhodná s hlavným herom. */
/* Mriežka, výška, padding a typografia hlavičky odišli do vrstvy T157
   (pred T153a) — boli to práve tie hodnoty, ktoré T157 rozšírilo na
   ostatné štyri stránky. Tu ostáva len to, čím sa Návrh naozaj líši. */
[data-page="service-navrh-zahrady"] .svc-hero {
  border-bottom-color: rgba(14, 26, 18, 0.14);
  background: #f4efe5;
}

[data-page="service-navrh-zahrady"] .svc-hero__figure {
  inset: 0;
  width: 100%;
  background: #d8c5aa;
}

[data-page="service-navrh-zahrady"] .svc-hero__figure img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin-left: 0;
  object-fit: cover;
  object-position: 50% 50%;
}

[data-page="service-navrh-zahrady"] .svc-hero__figure::after {
  background:
    linear-gradient(to right,
      rgba(244, 239, 229, 0.76) 0%,
      rgba(244, 239, 229, 0.58) 22%,
      rgba(244, 239, 229, 0.24) 38%,
      rgba(244, 239, 229, 0.03) 52%,
      rgba(244, 239, 229, 0) 60%),
    linear-gradient(to bottom,
      rgba(244, 239, 229, 0.05) 0%,
      rgba(244, 239, 229, 0) 72%,
      rgba(244, 239, 229, 0.08) 100%);
}

.svc-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  margin-top: 2rem;
  padding: 0.78rem 1.75rem;
  border: 1px solid var(--green-deep);
  border-radius: 999px;
  color: var(--gold);
  background: var(--green-deep);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-caps-sm);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.svc-hero__cta:hover,
.svc-hero__cta:focus-visible {
  color: var(--green-deep);
  background: var(--gold);
  border-color: var(--gold);
}

@media (prefers-reduced-motion: no-preference) {
  [data-page="service-navrh-zahrady"] .svc-hero__copy > * {
    animation: svc-hero-copy-in 720ms var(--ease-out) both;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__copy > :nth-child(2) { animation-delay: 70ms; }
  [data-page="service-navrh-zahrady"] .svc-hero__copy > :nth-child(3) { animation-delay: 140ms; }
  [data-page="service-navrh-zahrady"] .svc-hero__copy > :nth-child(4) { animation-delay: 210ms; }
}

@keyframes svc-hero-copy-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pod 901 px je dvojstrana **jedna plocha** (T140): fotografia vypĺňa
   celé hero, text leží na nej a číta sa cez pieskový závoj — rovnaký
   recept ako hero domovskej stránky. Predtým tu fotografia visela pod
   textom ako samostatný pás a čítala sa ako zabudnutý banner.

   Zvislý výrez tej istej fotografie dodáva `<source media>` v HTML;
   zo širokého mastera by `cover` v tomto pomere ukázal sotva tretinu
   záberu. Závlahy zvislý výrez nemajú — ich master je 3 : 2, čo sa
   oreže znesiteľne. */
@media (max-width: 900px) {
  .svc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-height: min(86svh, 42rem);
  }

  .svc-hero__figure {
    position: absolute;
    inset: 0;
    width: 100%;
    aspect-ratio: auto;
  }

  .svc-hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .svc-hero__copy {
    padding: 2.5rem var(--svc-gutter) 2.25rem;
  }

  .svc-hero__intro { max-width: none; }

  /* Návrh mal vlastnú mobilnú vetvu s `contain` a pomerom 1983/793 —
     tá platila pre fotografiu pod textom a s celoplošným herom by sa
     bila. Ostáva z nej len typografia. */
  [data-page="service-navrh-zahrady"] .svc-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: min(86svh, 42rem);
  }

  [data-page="service-navrh-zahrady"] .svc-hero__copy {
    padding: 2.5rem var(--svc-gutter) 2.25rem;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__kicker {
    gap: 0.7rem;
    max-width: 22rem;
    font-size: var(--type-micro);
    letter-spacing: 0.22em;
  }

  [data-page="service-navrh-zahrady"] .svc-hero h1 {
    max-width: 24rem;
    margin-top: 0.95rem;
    font-size: var(--type-display);
    line-height: 0.96;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__intro {
    max-width: 27rem;
    margin-top: 1.05rem;
    font-size: var(--type-supporting);
    line-height: 1.52;
  }
}

@media (max-width: 520px) {
  .svc-hero__cta {
    min-height: 2.9rem;
    margin-top: 1.25rem;
    padding: 0.7rem 1rem;
    font-size: var(--type-micro);
    letter-spacing: 0.11em;
  }
}

/* ============================================================
   (2) Index kapitol
   Statický riadok ikon a verzálok pod dvojstranou. Zámerne nie je
   lepkavý: lepkavá lišta pod fixnou hlavičkou zjedla na telefóne tretinu
   obrazovky a na desktope vytvorila druhý „header", ktorý stránku
   opticky rozťal. Riadok tu robí to isté, čo osnova, a nič nezakrýva.
   ============================================================ */
.svc-index {
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}

.svc-index__list {
  display: flex;
  width: var(--svc-container);
  margin-inline: auto;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.svc-index__list::-webkit-scrollbar { display: none; }

.svc-index__list li {
  flex: 1 1 0;
  min-width: 8.5rem;
  border-left: 1px solid var(--line);
}

.svc-index__list li:first-child { border-left: none; }

.svc-index__list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  padding: 1.5rem 0.75rem 1.6rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-caps-xs);
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  text-wrap: balance;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-quick) var(--ease-out);
}

.svc-index__icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--gold-deep);
  opacity: 0.85;
  transition: opacity var(--dur-quick) var(--ease-out);
}

.svc-index__list a:hover,
.svc-index__list a:focus-visible { color: var(--ink); }
.svc-index__list a:hover .svc-index__icon { opacity: 1; }

@media (max-width: 900px) {
  .svc-index__list li { flex: 0 0 9.5rem; }
  .svc-index__list a { padding: 1.15rem 0.6rem 1.25rem; }
}

/* ============================================================
   (3) Čo služba zahŕňa — tmavé pásmo s fotografiou
   Jediný tmavý akord stránky. Text vľavo v šírke obsahového rámca,
   fotografia vpravo až k okraju okna.
   ============================================================ */
.svc-feature {
  display: grid;
  grid-template-columns:
    var(--svc-edge)
    [copy-start] minmax(0, 41rem) [copy-end]
    minmax(18rem, 1fr);
  align-items: center;
  background: var(--green-deep);
  color: var(--sand);
}

.svc-feature__copy {
  grid-column: copy-start / copy-end;
  padding-block: var(--svc-band-y);
  padding-right: clamp(2rem, 4vw, 4rem);
}

.svc-feature__figure {
  grid-column: copy-end / -1;
  position: relative;
  align-self: stretch;
  margin: 0;
  min-height: 22rem;
  background: #16281c;
}

.svc-feature__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vysoký výrez zo širokej fotografie inak sedí na oblohe. */
  object-position: 50% 72%;
}

/* Mäkký prechod z tmavého textového poľa do fotografie — bez neho je
   medzi nimi tvrdá zvislá hrana presne v strede pásma. */
.svc-feature__figure::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      var(--green-deep) 0%,
      rgba(14, 26, 18, 0.55) 12%,
      rgba(14, 26, 18, 0) 32%),
    /* Fotografie z albumu sú skutočné zábery, takže na hornej tretine
       býva obloha. Proti tmavozelenému poľu je to jediné svetlé miesto
       pásma a oko ide rovno naň — tento prechod ju stiahne. */
    linear-gradient(to bottom,
      rgba(14, 26, 18, 0.6) 0%,
      rgba(14, 26, 18, 0.25) 18%,
      rgba(14, 26, 18, 0) 38%);
}

.svc-feature__num {
  display: block;
  margin-bottom: 0.9rem;
  color: rgba(201, 169, 106, 0.85);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-caps-sm);
}

.svc-feature h2 {
  font-family: var(--font-serif);
  font-size: var(--type-title);
  font-weight: 400;
  letter-spacing: var(--track-title);
  line-height: 1.12;
  color: var(--sand);
  text-wrap: balance;
}

.svc-feature p {
  margin-top: 1.1rem;
  max-width: 34rem;
  color: rgba(241, 235, 216, 0.76);
  text-wrap: pretty;
}

.svc-feature a { color: var(--gold); }

/* Body služby — pôvodné `<li><strong>Názov.</strong> text</li>`.
   Ikonu a obal doplní js/service-page.js; bez neho ostáva čitateľný
   zoznam, iba bez ikon. */
.svc-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 2.75rem);
  margin-top: 1.9rem;
  list-style: none;
}

.svc-points li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.svc-point__icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15rem;
  color: var(--gold);
}

.svc-point__title {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-serif);
  font-size: var(--type-card-title);
  font-weight: 500;
  letter-spacing: var(--track-head);
  color: var(--sand);
}

.svc-point__body {
  min-width: 0;
  color: rgba(241, 235, 216, 0.76);
  font-size: var(--type-supporting);
  line-height: var(--lead-snug);
}

/* Zlatá obrysová pilulka — inverzia `.privacy-header__back`. */
.svc-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3rem;
  margin-top: 2rem;
  padding: 0.4rem 1.75rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-caps-sm);
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.svc-feature__cta svg { width: 1rem; height: 1rem; fill: currentColor; }
.svc-feature__cta:hover { background: var(--gold); color: var(--green-deep); }

@media (max-width: 900px) {
  .svc-feature { display: block; }
  .svc-feature__copy { padding: var(--svc-band-y) var(--svc-gutter); }
  .svc-feature__figure {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .svc-feature__figure::before {
    background: linear-gradient(to bottom,
      var(--green-deep) 0%,
      rgba(14, 26, 18, 0.5) 14%,
      rgba(14, 26, 18, 0) 38%);
  }
}

/* Proces návrhu je jediná výnimka z tmavého servisného pásma. Rozloženie
   kopíruje pracovný postup: mriežka štyroch krokov vľavo a výsledná záhrada
   vpravo. Mäkký papierový prechod je podpisom tejto konkrétnej sekcie. */
[data-page="service-navrh-zahrady"] .svc-feature {
  grid-template-columns:
    [copy-start] minmax(0, 50%) [copy-end]
    minmax(0, 1fr);
  align-items: stretch;
  min-height: clamp(36rem, 37.5vw, 45rem);
  background: var(--sand);
  color: var(--ink);
}

[data-page="service-navrh-zahrady"] .svc-feature__copy {
  padding: clamp(3.5rem, 4.8vw, 5.75rem)
           clamp(2.25rem, 5vw, 6rem)
           clamp(3.25rem, 4.5vw, 5.25rem)
           clamp(3rem, 5vw, 6rem);
}

[data-page="service-navrh-zahrady"] .svc-feature__figure {
  grid-column: copy-end / -1;
  min-height: 100%;
  background: var(--sand);
}

[data-page="service-navrh-zahrady"] .svc-feature__figure img {
  object-position: 50% 50%;
}

[data-page="service-navrh-zahrady"] .svc-feature__figure::before {
  background: linear-gradient(to right,
    var(--sand) 0%,
    rgba(241, 235, 216, 0.96) 8%,
    rgba(241, 235, 216, 0.68) 18%,
    rgba(241, 235, 216, 0.2) 30%,
    rgba(241, 235, 216, 0) 42%);
}

[data-page="service-navrh-zahrady"] .svc-feature h2 {
  color: var(--green-deep);
  font-size: clamp(2.65rem, 3.25vw, 4rem);
  line-height: 1;
}

[data-page="service-navrh-zahrady"] .svc-feature p {
  max-width: 38rem;
  margin-top: 1.3rem;
  color: var(--ink-soft);
  font-size: var(--type-supporting);
  line-height: 1.65;
}

[data-page="service-navrh-zahrady"] .svc-points {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(1.8rem, 2.6vw, 2.75rem);
}

[data-page="service-navrh-zahrady"] .svc-points li {
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 1.15rem;
  padding: 0.25rem 1.45rem 1.55rem 0;
}

[data-page="service-navrh-zahrady"] .svc-points li:nth-child(odd) {
  border-right: 1px solid var(--line);
}

[data-page="service-navrh-zahrady"] .svc-points li:nth-child(even) {
  padding-right: 0;
  padding-left: 1.45rem;
}

[data-page="service-navrh-zahrady"] .svc-points li:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

[data-page="service-navrh-zahrady"] .svc-points li:nth-child(n + 3) {
  padding-top: 1.55rem;
  padding-bottom: 0.25rem;
}

[data-page="service-navrh-zahrady"] .svc-point__icon {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0;
  padding: 1.05rem;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 106, 0.28);
  background: var(--green-soft);
  color: var(--gold);
  box-shadow: 0 0.55rem 1.15rem rgba(14, 26, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-page="service-navrh-zahrady"] .svc-point__body {
  color: var(--ink-soft);
  font-size: clamp(0.76rem, 0.72vw, 0.88rem);
  line-height: 1.48;
}

[data-page="service-navrh-zahrady"] .svc-point__title {
  margin: 0.2rem 0 0.42rem;
  color: var(--green-deep);
  font-size: clamp(1.45rem, 1.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1;
}

@media (min-width: 901px) and (max-width: 1240px) {
  [data-page="service-navrh-zahrady"] .svc-feature {
    grid-template-columns:
      [copy-start] minmax(0, 56%) [copy-end]
      minmax(0, 1fr);
  }

  [data-page="service-navrh-zahrady"] .svc-feature__copy {
    padding-inline: clamp(2rem, 4vw, 3.5rem);
  }

  [data-page="service-navrh-zahrady"] .svc-points li {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 0.85rem;
  }

  [data-page="service-navrh-zahrady"] .svc-point__icon {
    width: 3.6rem;
    height: 3.6rem;
    padding: 0.9rem;
  }
}

@media (max-width: 900px) {
  [data-page="service-navrh-zahrady"] .svc-feature {
    min-height: 0;
    background: var(--sand);
  }

  [data-page="service-navrh-zahrady"] .svc-feature__copy {
    padding: var(--svc-band-y) var(--svc-gutter);
  }

  [data-page="service-navrh-zahrady"] .svc-feature__figure {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  [data-page="service-navrh-zahrady"] .svc-feature__figure::before {
    background: linear-gradient(to bottom,
      var(--sand) 0%,
      rgba(241, 235, 216, 0.82) 11%,
      rgba(241, 235, 216, 0.24) 24%,
      rgba(241, 235, 216, 0) 38%);
  }
}

@media (max-width: 620px) {
  [data-page="service-navrh-zahrady"] .svc-points {
    grid-template-columns: 1fr;
  }

  [data-page="service-navrh-zahrady"] .svc-points li,
  [data-page="service-navrh-zahrady"] .svc-points li:nth-child(n) {
    grid-template-columns: 3.8rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.35rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  [data-page="service-navrh-zahrady"] .svc-points li:first-child {
    padding-top: 0.25rem;
  }

  [data-page="service-navrh-zahrady"] .svc-points li:last-child {
    padding-bottom: 0.25rem;
    border-bottom: 0;
  }

  [data-page="service-navrh-zahrady"] .svc-point__icon {
    width: 3.8rem;
    height: 3.8rem;
    padding: 0.95rem;
  }

  [data-page="service-navrh-zahrady"] .svc-point__body {
    font-size: var(--type-supporting);
  }

}

/* ============================================================
   (4) Papierové pásmo — príprava + prečo je to tu iné
   ============================================================ */
.svc-band {
  padding-block: var(--svc-band-y);
}

.svc-band--paper { background: var(--svc-paper); }
.svc-band--sand { background: var(--sand); }

.svc-band h2 {
  font-family: var(--font-serif);
  font-size: var(--type-subtitle);
  font-weight: 400;
  letter-spacing: var(--track-head);
  line-height: 1.18;
  text-wrap: balance;
}

.svc-band p {
  margin-top: 0.95rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.svc-band a {
  color: var(--ink);
  text-decoration-color: rgba(104, 85, 38, 0.45);
  transition: color var(--dur-quick) var(--ease-out), text-decoration-color var(--dur-quick) var(--ease-out);
}

.svc-band a:hover { color: var(--gold-deep); text-decoration-color: var(--gold-deep); }
.svc-band strong { color: var(--ink); font-weight: 500; }

.svc-prep {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

/* Odškrtávací zoznam — ikonu `check-circle` doplní dekorátor. */
.svc-checklist {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.35rem;
  list-style: none;
}

.svc-checklist li {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  color: var(--ink-soft);
  font-size: var(--type-supporting);
  line-height: var(--lead-snug);
}

.svc-checklist__icon {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  color: var(--gold-deep);
}

/* Prvý odsek výkladu nesie pätkový rez a väčší stupeň. Je to ten istý
   text, len povýšený na úvodné slovo sekcie — lacnejšie a čistejšie než
   opakovať jednu vetu v citácii, ktorú by bolo treba udržiavať v troch
   jazykoch (odklon od redesign.md §2.2, vedomý). */
.svc-why > p:first-of-type {
  max-width: 44rem;
  margin-top: 1.35rem;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--type-lead);
  font-style: italic;
  line-height: var(--lead-snug);
  letter-spacing: var(--track-serif);
}

.svc-why > p { max-width: 44rem; }

/* Stránka oblasti má v papierovom pásme jedinú sekciu — bez obmedzenia
   by sa riadok tiahol cez celých 82rem a nedal by sa čítať. */
.svc-why--solo { max-width: 52rem; }

.svc-why > p + p {
  font-size: var(--type-supporting);
  line-height: var(--lead-body);
}

@media (max-width: 1024px) {
  .svc-prep { grid-template-columns: 1fr; gap: 2.75rem; }
}

/* Návrh záhrady kopíruje rytmus hlavnej stránky: spoločné typografické
   roly, 82rem kontajner a jediný botanický motív, ktorý web už používa.
   Žiadne samostatne kreslené tvary — vizuálnu väzbu tvorí existujúca
   kresba `footer-botanical.svg` a krátka bronzová linka nadpisov. */
:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-band--paper {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--svc-paper);
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-band--paper::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    url('../assets/footer-botanical.svg') no-repeat left -1.25rem bottom -5rem / auto 27rem,
    url('../assets/footer-botanical.svg') no-repeat right -1rem bottom -8rem / auto 23rem;
  opacity: 0.13;
  pointer-events: none;
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-prep {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(18rem, 21.5rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 4.5vw, 4.5rem);
  width: var(--svc-container);
  contain-intrinsic-size: 1px 720px;
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-prep > #priprava {
  padding: clamp(1.5rem, 2.2vw, 2rem);
  background: rgba(255, 253, 248, 0.68);
  border: 1px solid rgba(104, 85, 38, 0.14);
  border-radius: 1.35rem;
  box-shadow: 0 0.8rem 2rem rgba(49, 42, 27, 0.05);
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-prep > #priprava h2,
:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why__main h2 {
  font-size: var(--type-title);
  line-height: var(--lead-title);
  letter-spacing: var(--track-title);
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-prep > #priprava > p {
  max-width: 18rem;
  margin-top: 2rem;
  font-size: var(--type-supporting);
  line-height: var(--lead-body);
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-checklist {
  gap: 0;
  margin-top: 0.9rem;
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-checklist li {
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid rgba(104, 85, 38, 0.12);
  font-size: var(--type-supporting);
  line-height: var(--lead-snug);
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-checklist li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-checklist__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 14rem);
  gap: clamp(2rem, 3.5vw, 3.5rem);
  align-items: start;
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why__main h2 {
  max-width: 44rem;
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why__main > p {
  max-width: 45rem;
  color: var(--ink-soft);
  font-size: var(--type-body);
  line-height: var(--lead-body);
  text-wrap: pretty;
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why__main > p:first-of-type {
  margin-top: 2.4rem;
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: var(--type-lead);
  font-style: italic;
  line-height: var(--lead-snug);
  letter-spacing: var(--track-serif);
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why__main > p + p {
  margin-top: 1.5rem;
}

/* Karta zaujímavosti nesie len typografiu — žiadny odznak v kruhu.
   Rola „Vedeli ste?" oznamuje serifový nadpis vo zlatej, rovnaký
   prostriedok ako labely sekcií inde na stránke. */
:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why__fact {
  align-self: center;
  padding: 1.55rem 1.5rem 1.5rem;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(190, 151, 75, 0.36);
  border-radius: 1.2rem;
  box-shadow: 0 0.65rem 1.8rem rgba(49, 42, 27, 0.04);
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why__fact p {
  margin: 0;
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why__fact-label {
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: var(--type-card-title);
  line-height: var(--lead-snug);
  letter-spacing: var(--track-serif);
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why__fact-copy {
  margin-top: 0.75rem !important;
  color: var(--ink-soft);
  font-size: var(--type-caption);
  line-height: var(--lead-snug);
  text-wrap: pretty;
}

@media (max-width: 1180px) {
  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-prep {
    grid-template-columns: minmax(17rem, 19rem) minmax(0, 1fr);
    gap: 2.5rem;
  }

  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why {
    grid-template-columns: minmax(0, 1fr) 12rem;
    gap: 1.75rem;
  }
}

@media (max-width: 1024px) {
  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-prep {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-prep > #priprava {
    max-width: 38rem;
  }

  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 14rem);
    gap: clamp(2rem, 5vw, 3rem);
  }
}

@media (max-width: 700px) {
  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-band--paper::before {
    background: url('../assets/footer-botanical.svg') no-repeat left -2rem bottom -6rem / auto 23rem;
    opacity: 0.1;
  }

  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-prep {
    gap: 2.75rem;
  }

  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-prep > #priprava {
    padding: 1.4rem;
    border-radius: 1rem;
  }

  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why__main h2 {
    max-width: 18ch;
  }

  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-why__fact {
    width: min(100%, 25rem);
    padding: 1.4rem 1.35rem;
  }
}

/* --- Návrh záhrady: Medzibodrožie ako fotografická kapitola --------
   Rieka nie je ilustrácia vedľa textu, ale samotné prostredie kapitoly.
   Svetlé sklenené plochy ponechávajú čitateľnosť dlhého odborného textu,
   pričom fotografia ostáva viditeľná cez celú šírku aj výšku obrazovky. */
[data-page="service-navrh-zahrady"] .svc-band--paper {
  display: grid;
  align-items: center;
  min-height: max(52rem, calc(100svh - var(--header-h)));
  padding-block: clamp(2.25rem, 4vw, 4rem);
  background: #243126;
}

[data-page="service-navrh-zahrady"] .svc-band--paper::before {
  background:
    linear-gradient(90deg,
      rgba(247, 242, 229, 0.54) 0%,
      rgba(247, 242, 229, 0.18) 38%,
      rgba(18, 34, 24, 0.12) 100%),
    image-set(
      url('../assets/optimized/backgrounds/medzibodrozie-river-1440.webp') 1x,
      url('../assets/optimized/backgrounds/medzibodrozie-river-1672.webp') 2x
    ) center / cover no-repeat;
  opacity: 1;
}

[data-page="service-navrh-zahrady"] .svc-band--paper::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 30, 21, 0.06),
    transparent 24%,
    transparent 72%,
    rgba(16, 30, 21, 0.16));
  pointer-events: none;
}

[data-page="service-navrh-zahrady"] .svc-prep {
  grid-template-columns: minmax(17.5rem, 20.5rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.75rem);
  align-items: center;
}

[data-page="service-navrh-zahrady"] .svc-prep > #priprava,
[data-page="service-navrh-zahrady"] .svc-why__main {
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 1.25rem 3.75rem rgba(12, 28, 18, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(0.88);
  backdrop-filter: blur(16px) saturate(0.88);
}

[data-page="service-navrh-zahrady"] .svc-prep > #priprava {
  padding: clamp(1.5rem, 2.2vw, 2rem);
}

[data-page="service-navrh-zahrady"] .svc-why {
  grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 14rem);
  gap: clamp(1.25rem, 2vw, 2rem);
  align-items: center;
}

[data-page="service-navrh-zahrady"] .svc-why__main {
  padding: clamp(1.75rem, 2.6vw, 2.75rem);
  border-radius: 1.35rem;
}

[data-page="service-navrh-zahrady"] .svc-why__main h2 {
  max-width: 16ch;
}

[data-page="service-navrh-zahrady"] .svc-why__main-icon {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 9.5rem;
  height: 1.6rem;
  margin-bottom: 1rem;
}

[data-page="service-navrh-zahrady"] .svc-why__main-icon::after {
  content: '';
  width: 6.4rem;
  height: 1px;
  background: rgba(165, 121, 50, 0.5);
}

[data-page="service-navrh-zahrady"] .svc-why__main-icon svg {
  flex: 0 0 auto;
  width: 1.35rem;
}

[data-page="service-navrh-zahrady"] .svc-why__main > p:first-of-type {
  margin-top: 1.6rem;
}

[data-page="service-navrh-zahrady"] .svc-why__main > p + p {
  margin-top: 1.05rem;
}

[data-page="service-navrh-zahrady"] .svc-why__fact {
  position: relative;
  align-self: center;
  padding: 3.5rem 1.5rem 1.65rem;
  color: var(--sand);
  background: rgba(18, 48, 34, 0.95);
  border-color: rgba(190, 151, 75, 0.64);
  box-shadow: 0 1.25rem 3.5rem rgba(10, 26, 17, 0.3);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

[data-page="service-navrh-zahrady"] .svc-why__fact-icon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3.9rem;
  height: 3.9rem;
  padding: 0.85rem;
  color: #d2aa63;
  background: var(--green-soft);
  border: 1px solid #d2aa63;
  border-radius: 50%;
  box-shadow: 0 0 0 0.4rem rgba(18, 48, 34, 0.62);
  transform: translate(-50%, -34%);
}

[data-page="service-navrh-zahrady"] .svc-why__fact-label {
  color: #d2aa63;
  text-align: center;
}

[data-page="service-navrh-zahrady"] .svc-why__fact-copy {
  margin-top: 1.1rem !important;
  color: rgba(249, 246, 239, 0.88);
  line-height: var(--lead-body);
}

@media (max-width: 1180px) {
  [data-page="service-navrh-zahrady"] .svc-prep {
    grid-template-columns: minmax(17rem, 19rem) minmax(0, 1fr);
    gap: 1.75rem;
  }

  [data-page="service-navrh-zahrady"] .svc-why {
    grid-template-columns: minmax(0, 1fr) 12rem;
    gap: 1.25rem;
  }
}

@media (max-width: 1024px) {
  [data-page="service-navrh-zahrady"] .svc-band--paper {
    min-height: 100svh;
  }

  [data-page="service-navrh-zahrady"] .svc-prep {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  [data-page="service-navrh-zahrady"] .svc-prep > #priprava {
    max-width: none;
  }

  [data-page="service-navrh-zahrady"] .svc-why {
    grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 14rem);
  }
}

@media (max-width: 700px) {
  [data-page="service-navrh-zahrady"] .svc-band--paper {
    min-height: 100svh;
    padding-block: 1.5rem;
  }

  [data-page="service-navrh-zahrady"] .svc-band--paper::before {
    background:
      linear-gradient(180deg,
        rgba(247, 242, 229, 0.34),
        rgba(18, 34, 24, 0.18)),
      image-set(
        url('../assets/optimized/backgrounds/medzibodrozie-river-640.webp') 1x,
        url('../assets/optimized/backgrounds/medzibodrozie-river-960.webp') 2x
      ) 54% center / cover no-repeat;
    opacity: 1;
  }

  [data-page="service-navrh-zahrady"] .svc-prep {
    gap: 1.5rem;
  }

  [data-page="service-navrh-zahrady"] .svc-prep > #priprava,
  [data-page="service-navrh-zahrady"] .svc-why__main {
    border-radius: 1rem;
  }

  [data-page="service-navrh-zahrady"] .svc-why {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }

  [data-page="service-navrh-zahrady"] .svc-why__main {
    padding: 1.5rem 1.35rem;
  }

  [data-page="service-navrh-zahrady"] .svc-why__fact {
    width: 100%;
    padding: 3.35rem 1.35rem 1.45rem;
  }
}

/* ============================================================
   (5) Realizácie — jeden nosný záber a tri listy portfólia
   ============================================================ */
.svc-works-band {
  display: grid;
  grid-template-columns: minmax(20rem, 0.78fr) minmax(0, 2.42fr);
  gap: clamp(2.25rem, 2.4vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 1.8vw, 2rem)
    max(var(--svc-gutter), calc((100% - 96rem) / 2));
  background: var(--svc-paper);
  border-top: 1px solid var(--line);
  content-visibility: auto;
  contain-intrinsic-size: 1px 760px;
}

.svc-works__copy {
  position: relative;
  z-index: 1;
  max-width: 22rem;
}

.svc-works__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 clamp(1.7rem, 2.3vw, 2.35rem);
  color: var(--gold-deep);
  font-size: var(--type-label);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: var(--track-caps-xs);
  text-transform: uppercase;
}

/* Nadlinka pred oznamom pásu realizácií žije len na výsadbe, údržbe
   a oblasti — Návrh a Závlahy majú nadpisy bez kreslených ozdôb
   (spätnej väzby k T139). */
html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__eyebrow::before {
  content: '';
  flex: 0 0 1.75rem;
  height: 1px;
  background: var(--gold);
}

.svc-works__copy h2 {
  font-family: var(--font-serif);
  font-size: clamp(3.8rem, 4.4vw, 4.85rem);
  font-weight: 400;
  letter-spacing: var(--track-title);
  line-height: 0.96;
  text-wrap: balance;
}

/* Krátka linka pod titulom zostáva len na výsadbe, údržbe a oblasti.
   Návrh a Závlahy ju nemajú — titul tam stojí priamo nad odsekom. */
html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__copy h2::after {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  margin-top: 1.5rem;
  background: var(--gold);
}

.svc-works__copy p:not(.svc-works__eyebrow) {
  margin-top: clamp(1.5rem, 2.2vw, 2.1rem);
  color: var(--ink-soft);
  font-size: var(--type-body);
  line-height: 1.75;
  text-wrap: pretty;
}

.svc-works__copy p a {
  color: var(--ink);
  text-decoration-color: rgba(190, 151, 75, 0.55);
  text-underline-offset: 0.18em;
}

.svc-works {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(13rem, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  min-width: 0;
  height: clamp(29rem, 31vw, 32rem);
  list-style: none;
}

.svc-works__item:first-child { grid-row: 1 / -1; }

.svc-works__item,
.svc-works__item > a,
.svc-works__item > button {
  min-width: 0;
  min-height: 0;
}

.svc-works__item > a,
.svc-works__item > button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0.8rem;
  background: var(--green-deep);
  color: var(--sand);
  text-align: left;
  text-decoration: none;
  cursor: zoom-in;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.svc-works__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  transition: transform 0.65s var(--ease-glide), filter 0.4s var(--ease-out);
}

.svc-works__item > :is(a, button)::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 38% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(7, 18, 11, 0.78));
  pointer-events: none;
}

.svc-works__item > :is(a, button):hover img,
.svc-works__item > :is(a, button):focus-visible img {
  transform: scale(1.035);
  filter: saturate(1.06);
}

.svc-works__item > :is(a, button):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.svc-works__caption,
.svc-works__item > a > span {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  bottom: 1.1rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--sand);
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: var(--track-serif);
  text-shadow: 0 1px 0.8rem rgba(0, 0, 0, 0.38);
}

.svc-works__caption svg {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
  transition: transform var(--dur-base) var(--ease-glide);
}

.svc-works__item > button:hover .svc-works__caption svg { transform: translateX(0.3rem); }

[data-page="service-navrh-zahrady"] .svc-works__item > :is(a, button)::after,
[data-page="service-navrh-zahrady"] .svc-works__caption,
[data-page="service-navrh-zahrady"] .svc-works__item > a > span {
  display: none;
}

@media (max-width: 1100px) {
  .svc-works-band {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .svc-works__copy { max-width: 42rem; }
  .svc-works__copy h2 { font-size: clamp(3.4rem, 8vw, 5.15rem); }

  .svc-works {
    height: clamp(31rem, 65vw, 42rem);
  }
}

@media (max-width: 700px) {
  .svc-works-band {
    padding-block: 3.75rem;
  }

  .svc-works__copy h2 { font-size: clamp(3.15rem, 15vw, 4.5rem); }

  .svc-works {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    height: auto;
  }

  .svc-works__item { aspect-ratio: 4 / 3; }
  .svc-works__item:first-child {
    grid-row: auto;
    grid-column: 1 / -1;
    aspect-ratio: 5 / 4;
  }

  .svc-works__item:last-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .svc-works__caption,
  .svc-works__item > a > span { right: 0.95rem; bottom: 0.9rem; left: 0.95rem; }
}

@media (max-width: 460px) {
  .svc-works { grid-template-columns: 1fr; }
  .svc-works__item,
  .svc-works__item:first-child,
  .svc-works__item:last-child { grid-column: auto; aspect-ratio: 4 / 3; }
}

/* ============================================================
   (6) Uzatváracie pásmo — tri služby a samostatný kontakt
   ============================================================ */
.svc-close {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--sand);
  border-top: 1px solid var(--line);
  content-visibility: auto;
  contain-intrinsic-size: 1px 500px;
}

.svc-close::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -4rem;
  bottom: -8rem;
  width: 25rem;
  height: 25rem;
  background: url('../assets/footer-botanical.svg') no-repeat center / contain;
  opacity: 0.15;
  pointer-events: none;
}

.svc-close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(26rem, 0.9fr);
  gap: clamp(5rem, 8vw, 8rem);
  align-items: start;
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-close__grid {
  width: min(calc(100% - var(--svc-gutter) * 2), 96rem);
  padding-block: 2rem 3rem;
}

.svc-close h2 {
  color: var(--gold-deep);
  font-family: var(--font-sans);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-caps-xs);
  text-transform: uppercase;
}

.svc-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.2rem;
  list-style: none;
}

.svc-related li {
  display: flex;
}

.svc-related a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  width: 100%;
  height: 100%;
  min-height: 7.6rem;
  padding: 1.2rem;
  background: rgba(255, 253, 248, 0.58);
  border: 1px solid rgba(104, 85, 38, 0.18);
  border-radius: 0.85rem;
  box-shadow: 0 0.6rem 1.5rem rgba(49, 42, 27, 0.045);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-glide), box-shadow var(--dur-base) var(--ease-out);
}

.svc-related a:hover {
  transform: translateY(-0.2rem);
  border-color: rgba(190, 151, 75, 0.48);
  box-shadow: 0 0.9rem 2rem rgba(49, 42, 27, 0.08);
}

.svc-related a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.svc-related__icon {
  grid-row: 1 / -1;
  width: 3.35rem;
  height: 3.35rem;
  padding: 0.8rem;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--gold);
  box-shadow: 0 0.45rem 1rem rgba(14, 26, 18, 0.14);
}

.svc-related__label {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  letter-spacing: var(--track-serif);
  line-height: 1.1;
}

.svc-related__copy {
  grid-column: 2;
  max-width: 18rem;
  color: var(--ink-soft);
  font-size: var(--type-caption);
  line-height: 1.7;
  text-wrap: pretty;
}

.svc-related__arrow {
  grid-column: 3;
  grid-row: 1;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--gold-deep);
  transition: transform var(--dur-base) var(--ease-glide);
}

.svc-related a:hover .svc-related__arrow { transform: translateX(0.3rem); }

.svc-contact {
  position: relative;
  padding-left: clamp(2rem, 4vw, 4rem);
  border-left: 1px solid rgba(104, 85, 38, 0.22);
}

.svc-contact p {
  margin-top: 0.85rem;
  max-width: 26rem;
  color: var(--ink-soft);
  font-size: var(--type-supporting);
  line-height: var(--lead-snug);
}

.svc-contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.2rem;
  margin-top: 1.25rem;
}

.svc-contact__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  color: var(--ink);
  font-size: var(--type-supporting);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.svc-contact__links a:hover { color: var(--gold-deep); }

.svc-contact__icon {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0.55rem;
  border: 1px solid rgba(190, 151, 75, 0.32);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.68);
  color: var(--gold-deep);
}

.svc-contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.35rem;
  margin-top: 1.55rem;
  padding: 0.45rem 2rem;
  background: var(--green-deep);
  border: 1px solid var(--green-deep);
  border-radius: 999px;
  color: var(--sand);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-caps-sm);
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-glide);
}

.svc-contact__btn svg { width: 1rem; height: 1rem; fill: currentColor; }
.svc-contact__btn:hover { color: var(--green-deep); background: transparent; transform: translateY(-0.12rem); }

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-contact__btn {
  color: var(--gold);
  background: var(--green-soft);
  border-color: var(--green-soft);
  box-shadow: 0 16px 32px -20px rgba(14, 26, 18, 0.85), 0 2px 6px -4px rgba(14, 26, 18, 0.4);
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-contact__btn:hover {
  color: var(--green-deep);
  background: var(--gold);
  border-color: var(--gold);
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .privacy-header__back {
  color: var(--gold);
  background: var(--green-soft);
  border-color: var(--green-soft);
  box-shadow: 0 16px 32px -20px rgba(14, 26, 18, 0.85), 0 2px 6px -4px rgba(14, 26, 18, 0.4);
}

:is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .privacy-header__back:hover {
  color: var(--green-deep);
  background: var(--gold);
  border-color: var(--gold);
}

@media (min-width: 1121px) {
  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-contact {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-contact__btn {
    align-self: flex-start;
    margin-top: auto;
  }

  :is([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-contact__links a + a {
    padding-left: 1.2rem;
    border-left: 1px solid rgba(104, 85, 38, 0.25);
  }
}

.svc-stamp {
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: var(--type-label);
  letter-spacing: var(--track-caps-sm);
  text-transform: uppercase;
}

/* ============================================================
   Pätička podstránok — kolofón v duchu hlavnej stránky
   Vertikálna kompozícia ako `#koniec`: značka, tmavozelená kontaktná
   pilulka a register odkazov nad sebou, dole právny riadok. Bez
   botanických vetiev po bokoch — tie sú výsadou pätičky hlavnej
   stránky; podstránka necháva plátno pokojné.
   ============================================================ */
.svc-footer {
  padding: clamp(2.75rem, 5vh, 4rem) clamp(1.25rem, 4vw, 3.5rem) clamp(2.25rem, 4vh, 3.25rem);
  background: var(--sand);
  border-top: 1px solid rgba(14, 26, 18, 0.12);
  color: var(--green-deep);
  text-align: center;
}

.svc-footer__inner {
  width: min(100%, 40rem);
  margin: 0 auto;
}

.svc-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 1.8vh, 1.1rem);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.svc-footer__brand:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.svc-footer__mark { display: block; width: clamp(4.75rem, 7vw, 6rem); }

.svc-footer__mark img { display: block; width: 100%; height: auto; }

.svc-footer__identity {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
}

.svc-footer__wordmark {
  font-family: var(--font-serif);
  font-size: clamp(2.7rem, 5vw, 4.25rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0.13em;
  white-space: nowrap;
}

.svc-footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  line-height: 1;
  color: #8a6829;
}

/* Kontakt — rovnaká tmavozelená pilulka s kapslovým textom ako na
   hlavnej stránke; hover ju rozsvieti do zlatej. */
.svc-footer__contact {
  width: min(100%, 30rem);
  margin: clamp(1.75rem, 3.5vh, 2.5rem) auto 0;
}

.svc-footer__label {
  margin-bottom: 0.2rem;
  color: rgba(14, 26, 18, 0.84);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.svc-footer__mail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.5vw, 0.8rem);
  width: 100%;
  min-height: 3.5rem;
  padding: 0.55rem clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--green-soft);
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.25vw, 1.45rem);
  line-height: 1.1;
  letter-spacing: var(--track-head);
  text-decoration: none;
  box-shadow: 0 16px 32px -20px rgba(14, 26, 18, 0.85), 0 2px 6px -4px rgba(14, 26, 18, 0.4);
  transition:
    color var(--dur-quick) var(--ease-out),
    background var(--dur-quick) var(--ease-out),
    border-color var(--dur-quick) var(--ease-out),
    box-shadow var(--dur-quick) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.svc-footer__mail-icon { flex: 0 0 auto; width: 1.42rem; height: 1.42rem; }

.svc-footer__mail-text { overflow-wrap: normal; white-space: nowrap; }

.svc-footer__mail-arrow {
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-glide);
}

.svc-footer__mail:hover,
.svc-footer__mail:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--green-deep);
  box-shadow: 0 18px 34px -20px rgba(14, 26, 18, 0.55);
}

.svc-footer__mail:hover .svc-footer__mail-arrow { transform: translateX(0.3rem); }

.svc-footer__note {
  margin-top: 0.15rem;
  color: rgba(14, 26, 18, 0.54);
  font-size: var(--type-supporting);
}

/* Register odkazov — štyri vstupy s ikonami nad verzálkami, oddelené
   zvislými vlasovými linkami; os pod nimi nesie zlatú linku. */
.svc-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 40rem);
  margin: clamp(2rem, 4.2vh, 2.9rem) auto 0;
  padding-top: clamp(1.05rem, 2.4vh, 1.45rem);
  border-top: 1px solid rgba(181, 138, 58, 0.3);
}

.svc-footer__nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  min-width: 0;
  min-height: 4.1rem;
  padding: 0 clamp(0.25rem, 1vw, 0.7rem);
  color: rgba(14, 26, 18, 0.88);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-base) var(--ease-out);
}

.svc-footer__nav a + a { border-left: 1px solid rgba(14, 26, 18, 0.16); }

.svc-footer__nav-icon {
  width: clamp(2rem, 3.45vw, 2.45rem);
  height: clamp(2rem, 3.45vw, 2.45rem);
  color: var(--green-deep);
  transition: color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-glide);
}

.svc-footer__nav a:hover { color: #685526; }

.svc-footer__nav a:hover .svc-footer__nav-icon {
  color: #685526;
  transform: translateY(-0.2rem);
}

.svc-footer__nav a:focus-visible,
.svc-footer__mail:focus-visible,
.svc-footer__legal a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Právny riadok — micro verzálky na jednej osi, ako na hlavnej stránke.
   Odkazy sú podčiarknuté vlasovou linkou, ktorá pri hoveri zozlatie. */
.svc-footer__legal {
  width: min(100%, 40rem);
  margin: clamp(1.5rem, 3.2vh, 2.25rem) auto 0;
  color: rgba(14, 26, 18, 0.7);
  font-size: var(--type-micro);
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.svc-footer__company {
  margin-top: 0.45rem;
  color: rgba(14, 26, 18, 0.52);
}

.svc-footer__links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
  margin-top: 0.45rem;
}

.svc-footer__links a {
  color: rgba(14, 26, 18, 0.72);
  text-decoration: underline;
  text-decoration-color: rgba(201, 169, 106, 0.36);
  text-underline-offset: 0.22em;
  transition: color var(--dur-quick) var(--ease-out), text-decoration-color var(--dur-quick) var(--ease-out);
}

.svc-footer__links a:hover {
  color: var(--gold-deep);
  text-decoration-color: var(--gold-deep);
}

@media (max-width: 760px), (max-width: 1024px) and (max-height: 480px) {
  .svc-footer {
    padding: 2.5rem calc(1rem + env(safe-area-inset-right))
      calc(2.25rem + env(safe-area-inset-bottom))
      calc(1rem + env(safe-area-inset-left));
  }

  .svc-footer__inner { width: min(100%, 23rem); }
  .svc-footer__brand { gap: 0.75rem; }
  .svc-footer__mark { width: 4.25rem; }

  .svc-footer__wordmark {
    font-size: clamp(2.05rem, 10vw, 2.75rem);
    letter-spacing: 0.065em;
  }

  .svc-footer__tagline {
    margin-top: 0.15rem;
    font-size: clamp(1.05rem, 5vw, 1.25rem);
  }

  .svc-footer__contact { width: min(100%, 18rem); }

  .svc-footer__label {
    margin-bottom: 0.15rem;
    font-size: var(--type-micro);
    letter-spacing: 0.2em;
  }

  .svc-footer__mail {
    min-height: 3.15rem;
    padding-inline: clamp(0.8rem, 4vw, 1rem);
    font-size: clamp(1.02rem, 5vw, 1.18rem);
  }

  .svc-footer__mail-icon { width: 1.26rem; height: 1.26rem; }
  .svc-footer__mail-arrow { width: 1.05rem; height: 1.05rem; }

  .svc-footer__nav {
    width: 100%;
    margin-top: 2.3rem;
    padding-top: 1rem;
  }

  .svc-footer__nav a {
    gap: 0.4rem;
    min-height: 3.6rem;
    padding-inline: 0.1rem;
    /* Štyri položky v jednom riadku na 390 px — verzálky idú pod plnú
       rolu, rovnaké riešenie ako pätička hlavnej stránky (T98). */
    font-size: clamp(0.52rem, 2.15vw, 0.62rem);
    letter-spacing: 0.075em;
  }

  .svc-footer__nav-icon {
    width: clamp(1.78rem, 8vw, 2.05rem);
    height: clamp(1.78rem, 8vw, 2.05rem);
  }

  .svc-footer__legal { letter-spacing: 0.14em; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-footer__mail,
  .svc-footer__mail-arrow,
  .svc-footer__nav a,
  .svc-footer__nav-icon,
  .svc-footer__links a { transition: none; }
}

@media (max-width: 1120px) {
  .svc-close__grid { grid-template-columns: 1fr; }
  .svc-contact { padding: 2.5rem 0 0; border-top: 1px solid rgba(104, 85, 38, 0.22); border-left: 0; }
}

@media (max-width: 760px) {
  .svc-related { grid-template-columns: 1fr; }
  .svc-related a { min-height: 8.5rem; }
  .svc-close::after { right: -8rem; opacity: 0.1; }
}

/* Ostatné tri služby zdieľajú tento súbor, ale ich posledné dve pásma
   neboli súčasťou redizajnu stránky Návrh. Vyššie pravidlá preto na
   nich vyrovnáme na pôvodný kompaktný pás a riadkový footer. */
html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works-band {
  display: grid;
  grid-template-columns:
    var(--svc-edge)
    [copy-start] minmax(0, 19rem) [copy-end]
    minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
  padding: var(--svc-band-y) 0;
  background: var(--sand);
}

html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__copy {
  grid-column: copy-start / copy-end;
  max-width: none;
}

html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__copy::before { display: none; }

html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__copy h2 {
  font-size: var(--type-subtitle);
  line-height: 1.15;
  letter-spacing: var(--track-head);
}

html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__copy p {
  margin-top: 0.9rem;
  font-size: var(--type-supporting);
  line-height: var(--lead-snug);
}

html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works {
  grid-column: copy-end / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 0.55rem;
  width: auto;
  height: auto;
}

html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__item,
html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__item:first-child,
html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__item:last-child {
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: auto;
}

html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__item > a {
  display: block;
  height: auto;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__item > a::after { display: none; }

html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-position: 50% 64%;
}

html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__item > a > span {
  position: static;
  display: block;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  line-height: 1.35;
  letter-spacing: normal;
  text-shadow: none;
}

html[data-page="area"] .svc-close {
  overflow: visible;
  background: var(--svc-paper);
}

html[data-page="area"] .svc-close::after { display: none; }

html[data-page="area"] .svc-close__grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

html[data-page="area"] .svc-related {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  margin-top: 1.1rem;
}

html[data-page="area"] .svc-related a {
  display: flex;
  min-height: 0;
  padding: 0.95rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

html[data-page="area"] .svc-related a:hover {
  transform: none;
  box-shadow: none;
}

html[data-page="area"] .svc-related__icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gold-deep);
  box-shadow: none;
}

html[data-page="area"] .svc-related__label {
  font-size: var(--type-card-title);
}

html[data-page="area"] .svc-contact {
  padding: 0;
  border: 0;
}

html[data-page="area"] .svc-contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
}

html[data-page="area"] .svc-contact__icon {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html[data-page="area"] .svc-contact__btn {
  min-height: 3rem;
  padding-inline: 1.75rem;
}

@media (max-width: 900px) {
  html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works-band {
    display: block;
    padding: var(--svc-band-y) 0;
  }

  html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__copy,
  html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works {
    width: var(--svc-container);
    margin-inline: auto;
  }

  html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.9rem;
  }
}

@media (max-width: 680px) {
  html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works {
    display: flex;
    width: auto;
    margin-inline: 0;
    padding-inline: var(--svc-gutter);
    padding-bottom: 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--svc-gutter);
    scrollbar-width: none;
  }

  html:not([data-page="service-navrh-zahrady"], [data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-works__item {
    flex: 0 0 68%;
    scroll-snap-align: start;
  }
}

@media (max-width: 820px) {
  html[data-page="area"] .svc-close__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-works__item img,
  .svc-works__caption svg,
  .svc-related a,
  .svc-related__arrow,
  .svc-feature__cta,
  .svc-contact__btn,
  .svc-index__list a { transition: none; }
}

/* ============================================================
   ZÁVLAHY — vrstva navyše nad spoločným základom (T139)
   Stránka zdieľa s Návrhom papierové pásmo aj uzatvárací blok (selektory
   vyššie). Líši sa v troch veciach: hlavička nesie prehľad prínosov
   a výzvu, tmavé pásmo je jeden zvislý sled krokov s osou, a pás
   realizácií na nej nie je vôbec.
   ============================================================ */

/* --- (1) Titulná dvojstrana ---------------------------------------
   Mriežka, výška, padding a typografia hlavičky sú od T157 spoločné
   pre všetkých päť stránok (vrstva na konci súboru). */

/* Botanická kresba v ľavom okraji — tá istá, ktorou žije papierové
   pásmo aj uzatvárací blok. Leží pod textom aj fotografiou. */
:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: -3.5rem;
  top: 50%;
  width: 16rem;
  height: 34rem;
  background: url('../assets/footer-botanical.svg') no-repeat left center / auto 34rem;
  opacity: 0.16;
  transform: translateY(-50%);
  pointer-events: none;
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__figure {
  width: min(62%, 66rem);
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__figure::after {
  background:
    linear-gradient(to right,
      var(--sand) 0%,
      rgba(241, 235, 216, 0.92) 14%,
      rgba(241, 235, 216, 0.5) 32%,
      rgba(241, 235, 216, 0) 54%),
    linear-gradient(to bottom,
      rgba(241, 235, 216, 0) 62%,
      rgba(241, 235, 216, 0.4) 86%,
      rgba(241, 235, 216, 0.8) 100%);
}

/* Prehľad prínosov. Ikony dopĺňa js/service-page.js — v prekladovom
   bloku je iba text, inak by sa tri kópie SVG rozišli (CLAUDE.md). */
:is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
  list-style: none;
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__meta li {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding-inline: clamp(0.5rem, 0.8vw, 0.8rem);
  border-left: 1px solid rgba(104, 85, 38, 0.28);
  color: var(--ink-soft);
  /* Pevná veľkosť, nie `--type-caption`. Ten rastie s vw, kým stĺpec
     hlavičky je zastropovaný na 39rem — na širokej obrazovke sa preto
     prínosy zalamovali práve tam, kde je miesta najviac (T141). */
  font-size: 0.78rem;
  line-height: 1.45;
  text-wrap: balance;
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__meta li:first-child {
  padding-left: 0;
  border-left: 0;
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__meta-icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--gold-deep);
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__cta {
  margin-top: 2.25rem;
  color: var(--gold);
  background: var(--green-soft);
  border-color: var(--green-soft);
  box-shadow: 0 16px 32px -20px rgba(14, 26, 18, 0.85), 0 2px 6px -4px rgba(14, 26, 18, 0.4);
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__cta:hover,
:is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__cta:focus-visible {
  color: var(--green-deep);
  background: var(--gold);
  border-color: var(--gold);
}

/* --- (3) Tmavé pásmo: kroky ako zvislý sled ------------------------ */
:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-feature {
  --svc-rail: rgba(201, 169, 106, 0.3);
  position: relative;
  grid-template-columns:
    var(--svc-edge)
    [copy-start] minmax(0, 45rem) [copy-end]
    minmax(20rem, 1fr);
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-feature__figure img {
  object-position: 50% 60%;
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-feature h2 {
  max-width: 20ch;
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-points {
  display: block;
  margin-top: 2.1rem;
  border-top: 1px solid var(--svc-rail);
}

/* Os s bodmi je nakreslená dvomi podkladmi na `li`: zvislá vlasová
   linka a zlatý bod. Pseudo prvok by sa v `display: grid` stal ďalšou
   bunkou mriežky a rozhodil by stĺpce. */
:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-points li {
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: 3.1rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--svc-rail);
  background-image:
    linear-gradient(var(--svc-rail), var(--svc-rail)),
    radial-gradient(circle at center, var(--gold) 0 2.5px, transparent 2.6px);
  background-repeat: no-repeat;
  background-size: 1px 100%, 6px 6px;
  background-position: 3.15rem 0, calc(3.15rem - 2.5px) 1.65rem;
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-point__icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.05rem;
}

/* Názov kroku a výklad sú dva stĺpce jednej bunky. Text za `<strong>`
   tvorí anonymnú bunku mriežky — nemusí sa teda baliť do ďalšieho prvku
   a prekladový blok ostáva čistým textom. */
:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-point__body {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  column-gap: 1.5rem;
  align-items: start;
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-point__title {
  margin-bottom: 0;
  font-size: var(--type-card-title);
  font-weight: 400;
  line-height: var(--lead-snug);
  text-wrap: balance;
}

/* --- (4) Papierové pásmo: výklad bez bočnej karty ------------------ */
[data-page="service-zavlahy"] .svc-why {
  grid-template-columns: minmax(0, 1fr);
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-band--paper::before {
  background:
    url('../assets/footer-botanical.svg') no-repeat left -2.5rem bottom -4rem / auto 25rem,
    url('../assets/footer-botanical.svg') no-repeat right -2rem top -6rem / auto 28rem;
}

/* --- Mobil --------------------------------------------------------- */
@media (max-width: 1180px) {
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-points li {
    column-gap: 2.25rem;
    background-position: 2.7rem 0, calc(2.7rem - 2.5px) 1.55rem;
  }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-point__body {
    grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
    column-gap: 1.15rem;
  }
}

@media (max-width: 900px) {
  /* Závlahy mali vlastnú mobilnú vetvu s fotografiou pod textom (pomer
     3 : 2). Celoplošné hero ju nahrádza — ostáva len vypnutá ozdoba
     a typografia. */
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: min(86svh, 42rem);
    padding-bottom: 0;
  }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero::before { display: none; }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__copy {
    padding: 2.5rem var(--svc-gutter) 2.25rem;
  }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__figure {
    width: 100%;
    aspect-ratio: auto;
  }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero h1 { margin-top: 0.95rem; }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__intro {
    max-width: 36rem;
    margin-top: 1.15rem;
    font-size: var(--type-supporting);
    line-height: 1.55;
  }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__meta { margin-top: 1.6rem; }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-points li {
    column-gap: 1.15rem;
    background-position: 2.35rem 0, calc(2.35rem - 2.5px) 1.5rem;
  }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-point__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.35rem;
  }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-point__title { margin-bottom: 0.15rem; }
}

@media (max-width: 520px) {
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__meta li {
    grid-template-columns: 1.15rem minmax(0, 1fr);
    gap: 0.55rem;
  }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__meta-icon {
    width: 1.15rem;
    height: 1.15rem;
  }
}

/* Odškrtávací zoznam Závlah nesie `<strong>` a Výsadby `<a>`, v oboch
   prípadoch s vetou za nimi. V dvojstĺpcovej mriežke sa okolitý text
   rozpadne na anonymné bunky: `<strong>`/`<a>` obsadí jednu, zvyšok vety
   spadne do implicitného riadka do 1,25rem širokého stĺpca ikony a láme
   sa po jednom slove. Na Výsadbe to bolo vidieť naplno — prvá položka
   merala 301 px proti mediánu 93 px (`.imgopt/qa-resp/outlier.mjs`).
   Preto je položka bežný blok a ikona stojí mimo toku.

   Hodnoty sú zvolené tak, aby sa vzhľad nepohol: `padding-left: 2rem`
   je 1,25rem stĺpca ikony + 0,75rem medzery z mriežky a `top: 0.95rem`
   je 0,85rem `padding-block` položky + 0,1rem `margin-top` ikony.

   **Pridávaš do odškrtávacieho zoznamu odkaz alebo `<strong>`? Dopíš
   stránku sem**, inak sa jej veta rozsype rovnako. */
:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-checklist li {
  display: block;
  position: relative;
  padding-left: 2rem;
}

:is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-checklist__icon {
  position: absolute;
  top: 0.95rem;
  left: 0;
}

/* Na telefóne sa prínosy zalomia do stĺpca — tri položky vedľa seba by
   pri maďarských reťazcoch spadli na jedno-dve slová na riadok. */
@media (max-width: 620px) {
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__meta {
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid rgba(104, 85, 38, 0.2);
  }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__meta li {
    padding: 0.7rem 0;
    border-left: 0;
    border-bottom: 1px solid rgba(104, 85, 38, 0.2);
    text-wrap: pretty;
  }
}

/* Kompaktný riadkový zoznam ostatných troch služieb popis neunesie —
   `js/service-page.js` ho dopĺňa všade, tu sa iba nekreslí. */
html[data-page="area"] .svc-related__copy {
  display: none;
}

/* Odkaz „Zobraziť viac realizácií" nemal doteraz žiadne pravidlo, takže
   šípka, ktorú mu dopĺňa `decorateContact`, sa kreslila v prirodzenej
   veľkosti SVG — cez pol pásma. Ostáva na výsadbe, údržbe a oblasti;
   Návrh ani Závlahy tento odkaz nemajú. */
.svc-works__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  margin-top: 1.1rem;
  color: var(--gold-deep);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-caps-sm);
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-quick) var(--ease-out), gap var(--dur-base) var(--ease-glide);
}

.svc-works__more span {
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(104, 85, 38, 0.35);
}

.svc-works__more svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.svc-works__more:hover { gap: 0.85rem; color: var(--ink); }
.svc-works__more:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============================================================
   Úzka pätička podstránok služieb (T140)
   Kolofón so značkou, kontaktnou pilulkou a registrom odkazov ostáva
   oblasti pôsobenia. Na štyroch stránkach služieb je pod kartami
   súvisiacich služieb už všetko povedané, takže pätička je len tenký
   pás: copyright a odkaz na oblasť pôsobenia na jednom riadku.
   ============================================================ */
.svc-footer--slim {
  padding: 1.1rem clamp(1.25rem, 4vw, 3.5rem)
    calc(1.1rem + env(safe-area-inset-bottom));
}

.svc-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.5rem;
  width: min(100%, 82rem);
  margin: 0 auto;
  color: rgba(14, 26, 18, 0.62);
  font-size: var(--type-micro);
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Deliaca zvislica medzi oboma položkami — vlasová, ako v kontakte
   hlavnej stránky. Pri zalomení na mobile zmizne. */
.svc-footer__bar > * + *::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin-right: 1.5rem;
  vertical-align: -0.1em;
  background: rgba(14, 26, 18, 0.2);
}

.svc-footer__bar a {
  color: rgba(14, 26, 18, 0.72);
  text-decoration: underline;
  text-decoration-color: rgba(201, 169, 106, 0.36);
  text-underline-offset: 0.22em;
  transition: color var(--dur-quick) var(--ease-out),
    text-decoration-color var(--dur-quick) var(--ease-out);
}

.svc-footer__bar a:hover {
  color: var(--gold-deep);
  text-decoration-color: var(--gold-deep);
}

.svc-footer__bar a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 760px), (max-width: 1024px) and (max-height: 480px) {
  .svc-footer--slim {
    padding: 1rem calc(1rem + env(safe-area-inset-right))
      calc(1.1rem + env(safe-area-inset-bottom))
      calc(1rem + env(safe-area-inset-left));
  }

  .svc-footer__bar { gap: 0.3rem 1rem; letter-spacing: 0.12em; }
  .svc-footer__bar > * + *::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-footer__bar a { transition: none; }
}

/* ============================================================
   Uzatváracie pásmo podstránok služieb — úzky kontaktný pás (T140)
   Pod obsahom stránky už netreba druhú titulnú stranu: ostáva nadlinka,
   telefón s mailom, tlačidlo a tri karty. Výzva serifom aj obe ozdoby
   vypadli zámerne — pásmo má byť krátke, nie ďalšia obrazovka.

   Platí pre **všetky štyri** stránky služieb; `oblast-posobenia/`
   ostáva na kompaktnom páse, preto `html:not([data-page="area"])`.
   ============================================================ */
html:not([data-page="area"]) .svc-close__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(calc(100% - var(--svc-gutter) * 2), 82rem);
  padding-block: clamp(2rem, 3.6vw, 3rem) clamp(1.75rem, 3.2vw, 2.5rem);
  text-align: center;
}

/* Kontaktný blok stráca zvislicu aj ľavé odsadenie — v strede pásma
   by ho oko čítalo ako odseknutý stĺpec. */
html:not([data-page="area"]) .svc-contact {
  display: block;
  order: 2; /* kontakt patrí pod tri karty, nie nad ne */
  align-self: center;
  max-width: 46rem;
  margin-top: clamp(1.75rem, 3.4vw, 2.5rem);
  padding: 0;
  border: 0;
}

html:not([data-page="area"]) .svc-contact__links {
  justify-content: center;
  gap: 0.6rem clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(0.85rem, 1.8vw, 1.15rem);
}

/* Zvislica medzi telefónom a mailom — ako v kontakte domovskej stránky.
   Pri zalomení na mobile zmizne, inak by visela na začiatku riadka. */
@media (min-width: 561px) {
  html:not([data-page="area"]) .svc-contact__links a + a {
    padding-left: clamp(1.25rem, 3vw, 2.5rem);
    border-left: 1px solid rgba(104, 85, 38, 0.25);
  }
}

html:not([data-page="area"]) .svc-contact__btn {
  align-self: center;
  min-height: 3rem;
  margin-top: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--gold);
  background: var(--green-soft);
  border-color: var(--green-soft);
  box-shadow: 0 16px 32px -20px rgba(14, 26, 18, 0.85), 0 2px 6px -4px rgba(14, 26, 18, 0.4);
}

html:not([data-page="area"]) .svc-contact__btn:hover {
  color: var(--green-deep);
  background: var(--gold);
  border-color: var(--gold);
}

html:not([data-page="area"]) .svc-close__stack > #suvisiace {
  order: 1;
  width: 100%;
  margin-top: 0;
}

/* Nadpis „Súvisiace služby" v predlohe nie je — karty hovoria samy za
   seba. Ostáva pre čítačky, aby zoznam nevisel bez kontextu. */
html:not([data-page="area"]) .svc-close__stack > #suvisiace > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html:not([data-page="area"]) .svc-related {
  gap: clamp(0.85rem, 1.8vw, 1.5rem);
  margin-top: 0;
  text-align: left;
}

html:not([data-page="area"]) .svc-related li {
  display: flex;
}

/* Karta nesie len ikonu, názov a dva riadky — výška kariet je zjednotená
   (min-height: 7.6rem + height: 100%), aby v riadku nevznikali karty
   s rôznou výškou a spodné hrany lícovali v SK, EN aj HU bez zubov. */
html:not([data-page="area"]) .svc-related a {
  width: 100%;
  height: 100%;
  min-height: 7.6rem;
  padding: 1rem 1.1rem;
}

html:not([data-page="area"]) .svc-stamp {
  order: 3; /* bez neho by pečiatka stála nad kartami — flex ju berie ako 0 */
  width: 100%;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

@media (max-width: 900px) {
  html:not([data-page="area"]) .svc-related { grid-template-columns: 1fr; }
}

/* Telefón a mail nesú **tú istú pečať ako karty služieb** (T140) — tmavý
   kruh so zlatým znakom. Krúžkové ikony s bledou výplňou vedľa kariet
   pôsobili ako iná sada. Priemer ostáva menší; zhodná je farba. */
html:not([data-page="area"]) .svc-contact__icon {
  border: 0;
  background: var(--green-soft);
  color: var(--gold);
  box-shadow: 0 0.45rem 1rem rgba(14, 26, 18, 0.14);
}

/* Mobilný závoj hero (T140) — stojí **za** editoriálnymi vrstvami návrhu
   a závlah zámerne. Ich desktopový vodorovný závoj má rovnakú
   špecifickosť a je v súbore neskôr, takže by ten mobilný prebil; preto
   sa tu všetky tri selektory vymenujú naraz a až na konci.

   Hore je závoj takmer nepriehľadný, v spodnej tretine čistý — text drží
   kontrast a fotografia dostane priestor. Posledné percentá sa vracajú
   do piesku, aby šev na ďalšie pásmo nebol tvrdý. */
@media (max-width: 900px) {
  .svc-hero__figure::after,
  [data-page="service-navrh-zahrady"] .svc-hero__figure::after,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__figure::after {
    background: linear-gradient(to bottom,
      var(--sand) 0%,
      rgba(241, 235, 216, 0.96) 34%,
      rgba(241, 235, 216, 0.9) 52%,
      rgba(241, 235, 216, 0.6) 66%,
      rgba(241, 235, 216, 0.14) 84%,
      rgba(241, 235, 216, 0.04) 94%,
      rgba(241, 235, 216, 0.36) 100%);
  }

  .svc-hero__figure img,
  [data-page="service-navrh-zahrady"] .svc-hero__figure img,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* ============================================================
   NÁVRH ZÁHRADY — riečna krajina v uzatváracom páse
   Master má pomer 1920 : 821. Na desktope ho držíme na celej šírke
   (`100% auto`), takže sa fotografia nepribližuje kvôli výške pásma;
   viditeľný výrez vzniká iba pokojnou spodnou kotvou. Tenký právny
   footer ostáva samostatný a scénu uzatvára čistou zlatou linkou.
   ============================================================ */
[data-page="service-navrh-zahrady"] .svc-close {
  background-color: #f8f5ee;
  background-image: url('../assets/footer_bacgkround.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  border-top-color: rgba(181, 138, 58, 0.14);
}

/* Kresba je už súčasťou fotografie; druhá SVG vetva by ju zdvojila. */
[data-page="service-navrh-zahrady"] .svc-close::after { display: none; }

[data-page="service-navrh-zahrady"] .svc-close__stack {
  position: relative;
  z-index: 1;
}

[data-page="service-navrh-zahrady"] .svc-related a {
  background: rgba(255, 253, 248, 0.72);
  border-color: rgba(104, 85, 38, 0.2);
  box-shadow: 0 0.75rem 1.8rem rgba(49, 42, 27, 0.055);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

[data-page="service-navrh-zahrady"] .svc-footer--slim {
  position: relative;
  background: #f8f5ee;
  border-top-color: rgba(181, 138, 58, 0.42);
}

@media (max-width: 900px) {
  [data-page="service-navrh-zahrady"] .svc-close {
    /* Na úzkej obrazovke ostáva fotografia v prirodzenom pomere pri dne;
       vrch dopĺňa jej vlastný krémový odtieň bez zoomu a bez deformácie. */
    background-size: 100% auto;
  }
}

/* --- Nové fotografie bez orezu (T142) -------------------------------
   Výsadba, závlahy a údržba dostali vlastné mastery a požiadavka na ne
   znie: ukázať ich celé, nič nepribližovať. `object-fit: cover` ale
   oreže všetko, čo sa nezhoduje s pomerom rámu — a rámy tu boli zdedené
   (hlavička 62 % šírky, fotografia v tmavom pásme natiahnutá na výšku
   dlhého textu), takže z fotky bolo vidieť 48 – 87 %.

   Riešenie je opačné než obvyklé: **pomer si diktuje fotografia, rám sa
   prispôsobí.** Keď má rám pomer mastera, `cover` nemá čo orezať a
   výsledok je bit za bitom celý záber. `aspect-ratio` sa preto nesmie
   rozísť s rozmermi súboru — pri výmene fotografie ho prepočítaj. */

@media (min-width: 901px) {
  /* Hlavička: výšku diktuje hero (`inset: 0 0 0 auto`), šírku dopočíta
     pomer. `max-width` je poistka pre veľmi nízke a široké okno — tam sa
     rám o šírku okna zastaví a orez sa vráti, ale iba nepatrný. */
  [data-page="service-vysadba"] .svc-hero__figure {
    width: auto;
    max-width: 100%;
    aspect-ratio: 1672 / 941;
  }

  [data-page="service-udrzba"] .svc-hero__figure {
    width: auto;
    max-width: 100%;
    aspect-ratio: 1717 / 916;
  }

  /* Tmavé pásmo: rám sa prestane naťahovať na výšku textu a stane sa
     panelom s pomerom fotografie. Tmavozelená nad ním a pod ním je
     zámer — je to tá istá farba, na ktorej pásmo stojí, takže panel
     v nej plynie namiesto toho, aby vyzeral ako odseknutý. */
  :is([data-page="service-vysadba"],
      [data-page="service-zavlahy"],
      [data-page="service-udrzba"]) .svc-feature__figure {
    align-self: center;
    min-height: 0;
  }

  [data-page="service-vysadba"] .svc-feature__figure,
  [data-page="service-zavlahy"] .svc-feature__figure {
    aspect-ratio: 1448 / 1086;
  }

  [data-page="service-udrzba"] .svc-feature__figure {
    aspect-ratio: 1711 / 919;
  }
}

/* ============================================================
   ZÁVLAHY — fotografická kompozícia (T143)
   Tri dodané fotografie zostávajú bez efektov a na desktope aj bez
   viditeľného priblíženia. Proces preberá svetlú kartovú kompozíciu
   z predlohy; dlhé odborné texty ostávajú v samostatnom pásme.
   ============================================================ */

/* Hero: široký master už obsahuje svetlú plochu pre text, preto je
   fotografia cez celú šírku a `contain` ju na desktope neoreže. */
/* Mriežka a výška odišli do T157: táto stránka si ako jediná držala
   mimo media query **druhú** trojstĺpcovú mriežku (krajný stĺpec
   `clamp(4.5rem, …)`, textový 36rem) popri spoločnej vrstve závlah
   a výsadby o pár stoviek riadkov vyššie. Dve mriežky pre jednu
   stránku boli čistý nános — líšili sa len tým, kam sa práve
   zapisovalo. */
[data-page="service-zavlahy"] .svc-hero {
  /* Podklad hera je **tá istá farba ako hlavička nad ním a pásmo procesu
     pod ním**, nie vlastný svetlejší odtieň. `object-fit: contain` totiž
     fotografiu pod ~1345 px zvisle olemuje (rám je vtedy vyšší, než pomer
     mastera dovolí). Fotografia je preto nižšie ukotvená k spodku: voľné
     miesto ostane pri hlavičke a pri prechode do procesu už nevznikne svetlý
     pás proti tmavej tráve. Linka dole je zrušená z rovnakého dôvodu —
     `.svc-hero__figure` je `inset: 0`, teda len po vnútornú hranu rámčeka,
     takže rámček ostával nezakrytým prúžkom. */
  background: var(--sand);
  border-bottom: 0;
}

[data-page="service-zavlahy"] .svc-hero::before { display: none; }

[data-page="service-zavlahy"] .svc-hero__figure {
  inset: 0;
  width: 100%;
  background: var(--sand);
}

[data-page="service-zavlahy"] .svc-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}

[data-page="service-zavlahy"] .svc-hero__figure::after {
  background:
    linear-gradient(to right,
      rgba(241, 235, 216, 0.38) 0%,
      rgba(241, 235, 216, 0.18) 27%,
      rgba(241, 235, 216, 0) 47%),
    linear-gradient(to bottom,
      rgba(241, 235, 216, 0.04) 0%,
      rgba(241, 235, 216, 0) 82%,
      rgba(241, 235, 216, 0.18) 100%);
}

/* Inštalácia: päť krokov v tom istom rytme, aký má „Ako prebieha návrh"
   na stránke Návrh záhrady (T144). Predchádzajúca kartová mriežka mala
   vlastnú typografiu aj vlastné odsadenia, takže dve susedné stránky
   služieb čítal návštevník ako dva rôzne weby. Tu je teda text vľavo
   v polovici pásma, fotografia vpravo do okraja a kroky sú mriežka
   oddelená vlasovými linkami — bez kariet, bez tieňov. */
[data-page="service-zavlahy"] .svc-feature {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns:
    [copy-start] minmax(0, 50%) [copy-end]
    minmax(0, 1fr);
  align-items: stretch;
  min-height: clamp(36rem, 37.5vw, 45rem);
  overflow: hidden;
  background: var(--sand);
  color: var(--ink);
}

[data-page="service-zavlahy"] .svc-feature__copy {
  position: relative;
  z-index: 2;
  grid-column: copy-start / copy-end;
  width: auto;
  padding: clamp(3.5rem, 4.8vw, 5.75rem)
           clamp(2.25rem, 5vw, 6rem)
           clamp(3.25rem, 4.5vw, 5.25rem)
           clamp(3rem, 5vw, 6rem);
}

[data-page="service-zavlahy"] .svc-feature__figure {
  position: relative;
  inset: auto;
  z-index: 0;
  grid-column: copy-end / -1;
  align-self: stretch;
  width: auto;
  min-height: 100%;
  aspect-ratio: auto;
  margin: 0;
  background: var(--sand);
}

[data-page="service-zavlahy"] .svc-feature__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

[data-page="service-zavlahy"] .svc-feature__figure::before {
  background: linear-gradient(to right,
    var(--sand) 0%,
    rgba(241, 235, 216, 0.96) 8%,
    rgba(241, 235, 216, 0.68) 18%,
    rgba(241, 235, 216, 0.2) 30%,
    rgba(241, 235, 216, 0) 42%);
}

/* Poradové číslo pásma na Návrhu nie je a na Závlahách stálo nad
   nadpisom osamote — nadpis tým klesol do stredu pásma. */
[data-page="service-zavlahy"] .svc-feature__num { display: none; }

[data-page="service-zavlahy"] .svc-feature h2 {
  max-width: 22ch;
  color: var(--green-deep);
  font-size: clamp(2.65rem, 3.25vw, 4rem);
  line-height: 1.08;
}

/* Mriežka dvoch stĺpcov s vlasovými linkami. Krokov je päť, nie štyri
   ako na Návrhu — posledný preto preberá celý riadok a linky okolo neho
   miznú, inak by pod ním visel prázdny polovičný stĺpec. */
[data-page="service-zavlahy"] .svc-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(1.8rem, 2.6vw, 2.75rem);
  border-top: 0;
}

[data-page="service-zavlahy"] .svc-points li {
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 1.15rem;
  align-content: start;
  justify-items: stretch;
  min-height: 0;
  padding: 0.25rem 1.45rem 1.55rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
}

[data-page="service-zavlahy"] .svc-points li:nth-child(odd) {
  border-right: 1px solid var(--line);
}

[data-page="service-zavlahy"] .svc-points li:nth-child(even) {
  padding-right: 0;
  padding-left: 1.45rem;
}

[data-page="service-zavlahy"] .svc-points li:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

[data-page="service-zavlahy"] .svc-points li:nth-child(n + 3) {
  padding-top: 1.55rem;
  padding-bottom: 1.55rem;
  border-bottom: 1px solid var(--line);
}

[data-page="service-zavlahy"] .svc-points li:last-child {
  grid-column: 1 / -1;
  padding: 1.55rem 0 0.25rem;
  border-right: 0;
  border-bottom: 0;
}

[data-page="service-zavlahy"] .svc-point__icon {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0;
  padding: 1.05rem;
  border: 1px solid rgba(201, 169, 106, 0.28);
  border-radius: 50%;
  color: var(--gold);
  background: var(--green-soft);
  box-shadow: 0 0.55rem 1.15rem rgba(14, 26, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-page="service-zavlahy"] .svc-point__body {
  display: block;
  color: var(--ink-soft);
  font-size: clamp(0.76rem, 0.72vw, 0.88rem);
  line-height: 1.48;
  text-align: left;
  text-wrap: pretty;
}

/* Posledný krok je na celú šírku — text by sa inak tiahol cez 60 znakov. */
[data-page="service-zavlahy"] .svc-points li:last-child .svc-point__body {
  max-width: 30rem;
}

[data-page="service-zavlahy"] .svc-point__title {
  display: block;
  margin: 0.2rem 0 0.42rem;
  color: var(--green-deep);
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 1.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1;
  text-wrap: balance;
}

@media (min-width: 901px) and (max-width: 1240px) {
  [data-page="service-zavlahy"] .svc-feature {
    grid-template-columns:
      [copy-start] minmax(0, 56%) [copy-end]
      minmax(0, 1fr);
  }

  [data-page="service-zavlahy"] .svc-feature__copy {
    padding-inline: clamp(2rem, 4vw, 3.5rem);
  }

  [data-page="service-zavlahy"] .svc-points li {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 0.85rem;
  }

  [data-page="service-zavlahy"] .svc-point__icon {
    width: 3.6rem;
    height: 3.6rem;
    padding: 0.9rem;
  }
}

/* Miestny výklad stojí na tretej fotografii — tá je však pozadím celého
   pásma (`cover` na `::before`), nie pruhom pri hornom okraji. Predtým
   ju držalo `background-size: 100% auto`, takže pri dlhšom texte pásmo
   pod fotografiou pokračovalo holým papierom a posledné odseky viseli
   mimo obrazu. Čitateľnosť nesie sklenená karta, rovnako ako na Návrhu
   záhrady — samotný závoj na taký dlhý odborný text nestačil (T144). */
[data-page="service-zavlahy"] .svc-band--paper {
  display: grid;
  align-items: center;
  min-height: max(46rem, calc(100svh - var(--header-h)));
  padding-block: clamp(2.25rem, 4vw, 4rem);
  background: #2b3327;
  background-image: none;
}

[data-page="service-zavlahy"] .svc-band--paper::before {
  background:
    linear-gradient(90deg,
      rgba(247, 242, 229, 0.5) 0%,
      rgba(247, 242, 229, 0.16) 40%,
      rgba(20, 32, 22, 0.14) 100%),
    image-set(
      url('../assets/optimized/services/zavlahy-text-1440.webp?v=1') 1x,
      url('../assets/optimized/services/zavlahy-text-1983.webp?v=1') 2x
    ) center / cover no-repeat;
  opacity: 1;
}

[data-page="service-zavlahy"] .svc-band--paper::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 30, 21, 0.06),
    transparent 24%,
    transparent 72%,
    rgba(16, 30, 21, 0.16));
  pointer-events: none;
}

[data-page="service-zavlahy"] .svc-prep {
  align-items: center;
}

[data-page="service-zavlahy"] .svc-prep > #priprava,
[data-page="service-zavlahy"] .svc-why__main {
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 1.35rem;
  box-shadow: 0 1.25rem 3.75rem rgba(12, 28, 18, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(0.88);
  backdrop-filter: blur(16px) saturate(0.88);
}

[data-page="service-zavlahy"] .svc-why__main {
  max-width: 52rem;
  padding: clamp(1.75rem, 2.6vw, 2.75rem);
}

/* Rovnaké uzavretie ako na stránke Návrh záhrady. */
[data-page="service-zavlahy"] .svc-close {
  background-color: #f8f5ee;
  background-image: url('../assets/footer_bacgkround.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  border-top-color: rgba(181, 138, 58, 0.14);
}

[data-page="service-zavlahy"] .svc-close::after { display: none; }

[data-page="service-zavlahy"] .svc-close__stack {
  position: relative;
  z-index: 1;
}

[data-page="service-zavlahy"] .svc-related a {
  background: rgba(255, 253, 248, 0.72);
  border-color: rgba(104, 85, 38, 0.2);
  box-shadow: 0 0.75rem 1.8rem rgba(49, 42, 27, 0.055);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

[data-page="service-zavlahy"] .svc-footer--slim {
  position: relative;
  background: #f8f5ee;
  border-top-color: rgba(181, 138, 58, 0.42);
}

@media (max-width: 900px) {
  [data-page="service-zavlahy"] .svc-hero {
    min-height: min(86svh, 42rem);
  }

  [data-page="service-zavlahy"] .svc-hero__figure img {
    object-fit: cover;
    object-position: 66% 50%;
  }

  [data-page="service-zavlahy"] .svc-hero__figure::after {
    background: linear-gradient(to bottom,
      rgba(241, 235, 216, 0.98) 0%,
      rgba(241, 235, 216, 0.93) 48%,
      rgba(241, 235, 216, 0.5) 70%,
      rgba(241, 235, 216, 0.08) 100%);
  }

  [data-page="service-zavlahy"] .svc-feature {
    display: block;
    min-height: 0;
  }

  [data-page="service-zavlahy"] .svc-feature__copy {
    width: 100%;
    padding: var(--svc-band-y) var(--svc-gutter);
  }

  [data-page="service-zavlahy"] .svc-feature__figure {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1122 / 1402;
  }

  [data-page="service-zavlahy"] .svc-feature__figure::before {
    background: linear-gradient(to bottom,
      var(--sand) 0%,
      rgba(241, 235, 216, 0.82) 11%,
      rgba(241, 235, 216, 0.24) 24%,
      rgba(241, 235, 216, 0) 38%);
  }

  /* Pásmo prestáva byť na výšku okna — na telefóne je text dlhý a pevná
     výška by pod ním nechala prázdno. Fotografia ostáva pozadím cez
     `cover`, takže sa nikdy nekončí skôr než text. */
  [data-page="service-zavlahy"] .svc-band--paper {
    display: block;
    min-height: 0;
  }

  [data-page="service-zavlahy"] .svc-band--paper::before {
    background:
      linear-gradient(180deg,
        rgba(247, 242, 229, 0.42) 0%,
        rgba(20, 32, 22, 0.18) 100%),
      url('../assets/optimized/services/zavlahy-text-960.webp?v=1') center / cover no-repeat;
    opacity: 1;
  }

  /* Rozostrenie pod kartami je na telefóne najdrahšia vec, aká sa dá mať
     počas scrollu (CLAUDE.md) — karta preto stmavne namiesto blurovania. */
  [data-page="service-zavlahy"] .svc-prep > #priprava,
  [data-page="service-zavlahy"] .svc-why__main {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 253, 248, 0.95);
    box-shadow: 0 0.9rem 2.4rem rgba(12, 28, 18, 0.16);
  }

  [data-page="service-zavlahy"] .svc-close { background-size: 100% auto; }

  [data-page="service-zavlahy"] .svc-related a {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 253, 248, 0.88);
  }
}

@media (max-width: 620px) {
  [data-page="service-zavlahy"] .svc-feature h2 {
    max-width: 100%;
    font-size: clamp(2.25rem, 9vw, 3.1rem);
    line-height: 1.1;
  }

  [data-page="service-zavlahy"] .svc-points {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-page="service-zavlahy"] .svc-points li,
  [data-page="service-zavlahy"] .svc-points li:nth-child(n),
  [data-page="service-zavlahy"] .svc-points li:last-child {
    grid-column: 1;
    grid-template-columns: 3.8rem minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    min-height: 0;
    padding: 1.35rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  [data-page="service-zavlahy"] .svc-points li:first-child {
    padding-top: 0.25rem;
  }

  [data-page="service-zavlahy"] .svc-points li:last-child {
    padding-bottom: 0.25rem;
    border-bottom: 0;
  }

  [data-page="service-zavlahy"] .svc-point__icon {
    width: 3.8rem;
    height: 3.8rem;
    padding: 0.95rem;
  }

  [data-page="service-zavlahy"] .svc-point__body {
    max-width: 27rem;
    font-size: var(--type-supporting);
  }

  [data-page="service-zavlahy"] .svc-point__title {
    font-size: var(--type-card-title);
  }
}

/* Pod 901 px je hero celoplošné (T140) a rám je na výšku (~0,6), takže
   zo širokouhlého mastera je vidieť približne tretinu šírky. Celý záber
   by tam znamenal 220 px vysoký pruh pod textom — presne ten „zabudnutý
   banner", ktorý T140 odstraňovalo. Fotografia tu teda ostáva pozadím
   a posun ju aspoň nasmeruje na výjav; bez neho padne stred na prázdny
   podrast. Musí stáť **za** spoločným mobilným pravidlom vyššie, ktoré
   nastavuje `50% 50%`. */
@media (max-width: 900px) {
  [data-page="service-vysadba"] .svc-hero__figure img { object-position: 84% 50%; }
  [data-page="service-udrzba"] .svc-hero__figure img { object-position: 72% 50%; }

  /* Fotografia v tmavom pásme má na telefóne pevný pomer 16 : 10, ktorý
     sa s masterom nezhoduje. Nech si ho vezme od neho — pás je pod
     textom cez celú šírku, takže vyššia fotografia tam nič nerozbije. */
  [data-page="service-vysadba"] .svc-feature__figure,
  [data-page="service-zavlahy"] .svc-feature__figure {
    aspect-ratio: 1448 / 1086;
  }

  [data-page="service-udrzba"] .svc-feature__figure {
    aspect-ratio: 1711 / 919;
  }
}

/* T143 má zvislý master 1122 × 1402; toto pravidlo musí zostať za
   starším spoločným mobilným pomerom výsadby a závlah. */
@media (max-width: 900px) {
  [data-page="service-zavlahy"] .svc-feature__figure {
    aspect-ratio: 1122 / 1402;
  }
}

/* ============================================================
   VÝSADBA — vlastná vrstva (T145)
   Tri veci naraz, preto stojí až tu, na konci súboru: prepisuje
   spoločnú vrstvu závlah (`:is(zavlahy, vysadba)`) aj vyrovnávaciu
   vrstvu T142, ktoré sú obe vyššie.

     (1) hlavička bez botanickej kresby a bez orezu na telefóne
     (2) proces ako svetlé pásmo s kompaktnými kartami krokov
     (3) papierové pásmo na vlastnej fotografii, ako to má Návrh
         a od T144 aj Závlahy
   ============================================================ */

/* --- (1) Hlavička --------------------------------------------------
   Kresba `footer-botanical.svg` v ľavom okraji ležala pod nadpisom
   a pri pieskovom podklade z nej ostal iba nečitateľný sivý šum.
   Závlahám ostáva — tam ju drží tmavší podklad. */
[data-page="service-vysadba"] .svc-hero::before { display: none; }

/* Závoj nad fotografiou. Ľavá polovica mastera je sama o sebe takmer
   biela (je tak nasnímaná), takže pieskový závoj cez 54 % šírky bol
   dvojitá clona: text nezískal nič a z fotografie ostal iba tesný
   pravý výsek s borovicou — presne ten dojem priblíženia, ktorý mal
   T142 odstrániť. Kratší nábeh odkryje aj pokojné pásmo trvaliek. */
@media (min-width: 901px) {
  [data-page="service-vysadba"] .svc-hero__figure::after {
    background:
      linear-gradient(to right,
        var(--sand) 0%,
        rgba(241, 235, 216, 0.9) 9%,
        rgba(241, 235, 216, 0.6) 22%,
        rgba(241, 235, 216, 0.24) 34%,
        rgba(241, 235, 216, 0) 46%),
      linear-gradient(to bottom,
        rgba(241, 235, 216, 0) 62%,
        rgba(241, 235, 216, 0.4) 86%,
        rgba(241, 235, 216, 0.8) 100%);
  }
}

/* --- (2) Proces: svetlé pásmo s kartami krokov ---------------------
   Rytmus preberá Návrh a Závlahy: polovica pre obsah, polovica pre
   fotografiu. Karty ostávajú vlastným prvkom Výsadby, no bez poradových
   pečatí a v tichšej mierke, aby obraz aj text dýchali rovnako. */
[data-page="service-vysadba"] .svc-feature {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns:
    [copy-start] minmax(0, 50%) [copy-end]
    minmax(0, 1fr);
  align-items: stretch;
  min-height: clamp(36rem, 37.5vw, 45rem);
  overflow: hidden;
  background: var(--sand);
  color: var(--ink);
}

[data-page="service-vysadba"] .svc-feature__copy {
  position: relative;
  z-index: 2;
  grid-column: copy-start / copy-end;
  width: auto;
  padding: clamp(3.5rem, 4.8vw, 5.75rem)
           clamp(2.25rem, 5vw, 6rem)
           clamp(3.25rem, 4.5vw, 5.25rem)
           clamp(3rem, 5vw, 6rem);
}

[data-page="service-vysadba"] .svc-feature__num { display: none; }

[data-page="service-vysadba"] .svc-feature__kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  color: var(--gold-deep);
  font-family: var(--font-sans);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-caps-xs);
  text-transform: uppercase;
}

/* Linka s bodkou na konci — rovnaká rola ako `::before` v hlavičke,
   len opačným smerom, aby nadlinka viedla oko doprava k nadpisu. */
[data-page="service-vysadba"] .svc-feature__kicker::after {
  content: '';
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5px;
  background:
    radial-gradient(circle at right center, var(--gold) 0 2.5px, transparent 2.6px),
    linear-gradient(to right, var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 5px 5px, calc(100% - 7px) 1px;
  background-position: right center, left center;
}

[data-page="service-vysadba"] .svc-feature h2 {
  max-width: 22ch;
  margin-top: 0.9rem;
  color: var(--green-deep);
  font-size: clamp(2.65rem, 3.25vw, 4rem);
  line-height: 1;
}

[data-page="service-vysadba"] .svc-feature__intro {
  max-width: 34rem;
  margin-top: 1.3rem;
  color: var(--ink-soft);
  font-size: var(--type-supporting);
  line-height: var(--lead-body);
  text-wrap: pretty;
}

/* Tri karty v riadku udržia päť krokov v dvoch kompaktných radoch. */
[data-page="service-vysadba"] .svc-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1vw, 1.15rem);
  margin-top: clamp(1.8rem, 2.6vw, 2.75rem);
  border-top: 0;
}

[data-page="service-vysadba"] .svc-points li {
  position: relative;
  display: block;
  min-height: 0;
  padding: clamp(1.1rem, 1.35vw, 1.4rem);
  color: var(--ink);
  background: rgba(252, 250, 244, 0.9);
  background-image: none;
  border: 1px solid rgba(104, 85, 38, 0.14);
  border-radius: 1rem;
  box-shadow: 0 0.65rem 1.65rem rgba(49, 42, 27, 0.05);
}

[data-page="service-vysadba"] .svc-point__icon {
  display: block;
  float: left;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.08rem 0.65rem 0 0;
  padding: 0;
  color: var(--gold-deep);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

[data-page="service-vysadba"] .svc-point__body {
  display: block;
  color: var(--ink-soft);
  font-size: clamp(0.76rem, 0.72vw, 0.88rem);
  line-height: 1.48;
  text-align: left;
  text-wrap: pretty;
}

[data-page="service-vysadba"] .svc-point__title {
  display: block;
  /* Dva riadky rezervované aj tam, kde názov vyjde na jeden — inak sa
     vlasová linka pod názvom nezhoduje naprieč riadkom kariet a mriežka
     sa rozpadne na päť rôznych rytmov. */
  min-height: calc(2.3em + 0.65rem);   /* dva riadky + spodné odsadenie */
  margin: 0 0 0.7rem;
  padding-bottom: 0.65rem;
  color: var(--green-deep);
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.15vw, 1.35rem);
  font-weight: 500;
  line-height: 1.15;
  border-bottom: 1px solid rgba(104, 85, 38, 0.16);
  text-wrap: balance;
}

/* Portrétová fotografia si diktuje vlastný pomer 1122 : 1402. Na
   veľkých monitoroch je jej šírka zastropovaná, aby zbytočne
   nepredlžovala celé pásmo; zdroj napriek tomu ostáva bez priblíženia. */
[data-page="service-vysadba"] .svc-feature__figure {
  position: relative;
  inset: auto;
  z-index: 0;
  grid-column: copy-end / -1;
  align-self: center;
  justify-self: end;
  width: min(100%, 46rem);
  min-height: 0;
  aspect-ratio: 1122 / 1402;
  margin: 0;
  background: var(--sand);
}

[data-page="service-vysadba"] .svc-feature__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

[data-page="service-vysadba"] .svc-feature__figure::before {
  background: linear-gradient(to right,
    var(--sand) 0%,
    rgba(241, 235, 216, 0.92) 8%,
    rgba(241, 235, 216, 0.55) 20%,
    rgba(241, 235, 216, 0.14) 32%,
    rgba(241, 235, 216, 0) 42%);
}

/* --- (3) Papierové pásmo na fotografii -----------------------------
   Rovnaké riešenie ako Návrh (T138) a Závlahy (T144): fotografia je
   `cover` na `::before`, čitateľnosť nesú sklenené karty. Samotný
   závoj na takto dlhý odborný text nestačí — to sa už raz overilo. */
[data-page="service-vysadba"] .svc-band--paper {
  display: grid;
  align-items: center;
  min-height: max(46rem, calc(100svh - var(--header-h)));
  padding-block: clamp(2.25rem, 4vw, 4rem);
  background: #2b3327;
  background-image: none;
}

[data-page="service-vysadba"] .svc-band--paper::before {
  background:
    linear-gradient(90deg,
      rgba(247, 242, 229, 0.42) 0%,
      rgba(247, 242, 229, 0.14) 40%,
      rgba(20, 32, 22, 0.12) 100%),
    image-set(
      url('../assets/optimized/services/vysadba-text-1440.webp?v=1') 1x,
      url('../assets/optimized/services/vysadba-text-1672.webp?v=1') 2x
    ) center / cover no-repeat;
  opacity: 1;
}

[data-page="service-vysadba"] .svc-band--paper::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 30, 21, 0.06),
    transparent 24%,
    transparent 72%,
    rgba(16, 30, 21, 0.16));
  pointer-events: none;
}

[data-page="service-vysadba"] .svc-prep {
  align-items: center;
}

[data-page="service-vysadba"] .svc-prep > #priprava,
[data-page="service-vysadba"] .svc-why__main {
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 1.35rem;
  box-shadow: 0 1.25rem 3.75rem rgba(12, 28, 18, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(0.88);
  backdrop-filter: blur(16px) saturate(0.88);
}

[data-page="service-vysadba"] .svc-why {
  align-items: center;
}

[data-page="service-vysadba"] .svc-why__main {
  padding: clamp(1.75rem, 2.6vw, 2.75rem);
}

[data-page="service-vysadba"] .svc-why__main h2 {
  max-width: 20ch;
}

/* Karta zaujímavosti musí na fotografii stáť rovnako pevne ako na
   Návrhu — svetlá polopriehľadná karta by na tráve zmizla. */
[data-page="service-vysadba"] .svc-why__fact {
  position: relative;
  padding: 3.5rem 1.5rem 1.65rem;
  color: var(--sand);
  background: rgba(18, 48, 34, 0.95);
  border-color: rgba(190, 151, 75, 0.64);
  box-shadow: 0 1.25rem 3.5rem rgba(10, 26, 17, 0.3);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

[data-page="service-vysadba"] .svc-why__fact-icon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3.9rem;
  height: 3.9rem;
  padding: 0.85rem;
  color: #d2aa63;
  background: var(--green-soft);
  border: 1px solid #d2aa63;
  border-radius: 50%;
  box-shadow: 0 0 0 0.4rem rgba(18, 48, 34, 0.62);
  transform: translate(-50%, -34%);
}

[data-page="service-vysadba"] .svc-why__fact-label {
  color: #d2aa63;
  text-align: center;
}

[data-page="service-vysadba"] .svc-why__fact-copy {
  margin-top: 1.1rem !important;
  color: rgba(249, 246, 239, 0.88);
  line-height: var(--lead-body);
}

/* --- Uzatváracie pásmo: rovnaké ako Návrh a Závlahy ---------------- */
[data-page="service-vysadba"] .svc-close {
  background-color: #f8f5ee;
  background-image: url('../assets/footer_bacgkround.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  border-top-color: rgba(181, 138, 58, 0.14);
}

/* Kresba je už súčasťou fotografie; druhá SVG vetva by ju zdvojila. */
[data-page="service-vysadba"] .svc-close::after { display: none; }

[data-page="service-vysadba"] .svc-close__stack {
  position: relative;
  z-index: 1;
}

[data-page="service-vysadba"] .svc-related a {
  background: rgba(255, 253, 248, 0.72);
  border-color: rgba(104, 85, 38, 0.2);
  box-shadow: 0 0.75rem 1.8rem rgba(49, 42, 27, 0.055);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

[data-page="service-vysadba"] .svc-footer--slim {
  position: relative;
  background: #f8f5ee;
  border-top-color: rgba(181, 138, 58, 0.42);
}

/* --- Užšie okno: dve karty v riadku -------------------------------- */
@media (min-width: 901px) and (max-width: 1300px) {
  [data-page="service-vysadba"] .svc-feature {
    grid-template-columns:
      [copy-start] minmax(0, 56%) [copy-end]
      minmax(0, 1fr);
  }

  [data-page="service-vysadba"] .svc-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-page="service-vysadba"] .svc-feature__copy {
    padding-inline: clamp(2rem, 4vw, 3.5rem);
  }
}

/* --- Telefón a tablet ---------------------------------------------- */
@media (max-width: 900px) {
  /* Zvislý výrez (T145) sa s rámom hera zhoduje oveľa lepšie než
     širokouhlý master — orez klesol z 67 % na ~27 %, takže posun
     doprava, ktorý mal aspoň nasmerovať na výjav, je zbytočný. */
  [data-page="service-vysadba"] .svc-hero__figure img {
    object-position: 50% 42%;
  }

  [data-page="service-vysadba"] .svc-hero__figure::after {
    background: linear-gradient(to bottom,
      rgba(241, 235, 216, 0.98) 0%,
      rgba(241, 235, 216, 0.93) 44%,
      rgba(241, 235, 216, 0.46) 68%,
      rgba(241, 235, 216, 0.06) 100%);
  }

  [data-page="service-vysadba"] .svc-feature {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  [data-page="service-vysadba"] .svc-feature__copy {
    grid-column: 1 / -1;
    padding: clamp(2.5rem, 8vw, 3.5rem) var(--svc-gutter) clamp(2rem, 6vw, 3rem);
  }

  [data-page="service-vysadba"] .svc-feature__figure {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1122 / 1402;
  }

  [data-page="service-vysadba"] .svc-feature__figure::before { display: none; }

  [data-page="service-vysadba"] .svc-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-page="service-vysadba"] .svc-feature h2 {
    max-width: 20ch;
    font-size: clamp(2.45rem, 9vw, 3.35rem);
  }

  /* Rezerva na dva riadky názvu má zmysel len tam, kde je stĺpec karty
     úzky a názov sa reálne zalamuje. Na tablete a telefóne je karta
     široká, názov vyjde na jeden riadok vo všetkých troch jazykoch —
     rezerva by tam bola len prázdne miesto nad vlasovou linkou. */
  [data-page="service-vysadba"] .svc-point__title { min-height: 0; }

  /* Sklo na telefóne padá (CLAUDE.md §Výkon scrollu) — `backdrop-filter`
     je počas scrollu najdrahšia vec, akú sa dá na mobile mať. Namiesto
     neho nepriehľadnejšia karta. */
  [data-page="service-vysadba"] .svc-prep > #priprava,
  [data-page="service-vysadba"] .svc-why__main {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 253, 248, 0.95);
    box-shadow: 0 0.9rem 2.4rem rgba(12, 28, 18, 0.16);
  }

  [data-page="service-vysadba"] .svc-why__fact {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(18, 48, 34, 0.97);
  }

  [data-page="service-vysadba"] .svc-band--paper::before {
    background:
      linear-gradient(180deg,
        rgba(247, 242, 229, 0.3),
        rgba(20, 32, 22, 0.2)),
      image-set(
        url('../assets/optimized/services/vysadba-text-640.webp?v=1') 1x,
        url('../assets/optimized/services/vysadba-text-960.webp?v=1') 2x
      ) center / cover no-repeat;
    opacity: 1;
  }

  [data-page="service-vysadba"] .svc-close { background-size: 100% auto; }

  [data-page="service-vysadba"] .svc-related a {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 253, 248, 0.88);
  }
}

@media (max-width: 620px) {
  [data-page="service-vysadba"] .svc-points {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-page="service-vysadba"] .svc-feature h2 {
    font-size: clamp(2.35rem, 12vw, 3.2rem);
  }

  [data-page="service-vysadba"] .svc-point__body {
    font-size: 0.82rem;
  }
}

/* ============================================================
   ÚDRŽBA — vlastná vrstva (T146)
   Stojí až tu, na konci súboru, lebo prepisuje vyrovnávaciu vrstvu
   T142 (pomer rámu v pásme procesu) aj spoločné pravidlá papierového
   pásma. Tri veci:

     (1) zvislá fotografia vedľa textu v pásme procesu
     (2) papierové pásmo na vlastnej fotografii, ako to má Návrh,
         Závlahy (T144) a Výsadba (T146)
     (3) uzatváracie pásmo s tou istou pätičkovou kresbou ako ostatné
         tri stránky služieb
   ============================================================ */

/* --- (1) Proces: kompaktné sezónne pásmo ---------------------------
   Štyri body nepotrebujú výšku celého portrétu. Na desktope preto výšku
   určuje obsah a fotografia sa správa ako plnohodnotná polovica pásma:
   jemne sa oreže, ale nevyrába pod textom stovky pixelov prázdnej plochy. */
@media (min-width: 901px) {
  [data-page="service-udrzba"] .svc-feature {
    align-items: stretch;
  }

  [data-page="service-udrzba"] .svc-feature__copy {
    padding-block: clamp(3.25rem, 4.5vw, 4.5rem);
  }

  [data-page="service-udrzba"] .svc-points {
    gap: 1.2rem clamp(1.5rem, 2.5vw, 2.25rem);
    margin-top: 1.55rem;
  }

  [data-page="service-udrzba"] .svc-feature__figure {
    align-self: stretch;
    min-height: 0;
    aspect-ratio: auto;
  }

  [data-page="service-udrzba"] .svc-feature__figure img {
    object-position: 50% 53%;
  }
}

/* Zvislý výrez sa s masterom zhoduje aj na telefóne. */
@media (max-width: 900px) {
  [data-page="service-udrzba"] .svc-feature__figure {
    aspect-ratio: 1086 / 1448;
  }
}

/* --- (2) Papierové pásmo na fotografii -----------------------------
   Rovnaké riešenie ako Návrh (T138), Závlahy (T144) a Výsadba (T146):
   fotografia je `cover` na `::before`, čitateľnosť nesú sklenené
   karty. Samotný závoj na štyri odseky odborného textu nestačí. */
[data-page="service-udrzba"] .svc-band--paper {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: center;
  min-height: max(46rem, calc(100svh - var(--header-h)));
  padding-block: clamp(2.25rem, 4vw, 4rem);
  background: #2b3327;
  background-image: none;
}

/* Master si vlastný svetlý nábeh vľavo nesie sám (je tak
   nasnímaný), takže pieskový závoj cez ľavú polovicu — aký má Výsadba —
   je tu dvojitá clona: karty by stáli na takmer bielej ploche a stratili
   by hranu. Ostáva len tiché stmavenie pravej, hustej strany. */
[data-page="service-udrzba"] .svc-band--paper::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(20, 32, 22, 0) 38%,
      rgba(20, 32, 22, 0.16) 100%),
    image-set(
      url('../assets/optimized/services/udrzba-text-1440.webp?v=1') 1x,
      url('../assets/optimized/services/udrzba-text-1913.webp?v=1') 2x
    ) right center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}

[data-page="service-udrzba"] .svc-band--paper::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 30, 21, 0.06),
    transparent 24%,
    transparent 72%,
    rgba(16, 30, 21, 0.16));
  pointer-events: none;
}

[data-page="service-udrzba"] .svc-prep {
  position: relative;
  z-index: 1;
  align-items: center;
}

/* Údržba má kratší prípravný zoznam než ostatné služby. Klimatický výklad
   preto nedostáva celý zvyšok 82-rem kontajnera: obe karty tvoria užšiu,
   vycentrovanú dvojicu a fotografia zostáva čitateľnou súčasťou kapitoly. */
@media (min-width: 1025px) {
  [data-page="service-udrzba"] .svc-prep {
    grid-template-columns: minmax(18rem, 21rem) minmax(0, 45rem);
    justify-content: center;
    gap: clamp(2.5rem, 4vw, 4rem);
  }
}

[data-page="service-udrzba"] .svc-prep > #priprava,
[data-page="service-udrzba"] .svc-why {
  padding: clamp(1.75rem, 2.6vw, 2.75rem);
  background: rgba(255, 253, 248, 0.88);
  /* Nábeh mastera je takmer biely, takže bledá hrana karty by na ňom
     zmizla — hrana aj tieň sú preto o stupeň hlbšie než na Výsadbe. */
  border: 1px solid rgba(122, 116, 92, 0.16);
  border-radius: 1.35rem;
  box-shadow: 0 1.5rem 4rem rgba(40, 48, 30, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(0.88);
  backdrop-filter: blur(16px) saturate(0.88);
}

[data-page="service-udrzba"] .svc-why {
  justify-self: center;
  width: min(100%, 45rem);
}

[data-page="service-udrzba"] .svc-why h2 {
  max-width: none;
}

[data-page="service-udrzba"] .svc-why > p {
  max-width: none;
}

/* --- (3) Uzatváracie pásmo: rovnaké ako ostatné tri služby --------- */
[data-page="service-udrzba"] .svc-close {
  background-color: #f8f5ee;
  background-image: url('../assets/footer_bacgkround.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  border-top-color: rgba(181, 138, 58, 0.14);
}

/* Kresba je už súčasťou fotografie; druhá SVG vetva by ju zdvojila. */
[data-page="service-udrzba"] .svc-close::after { display: none; }

[data-page="service-udrzba"] .svc-close__stack {
  position: relative;
  z-index: 1;
}

[data-page="service-udrzba"] .svc-related a {
  background: rgba(255, 253, 248, 0.72);
  border-color: rgba(104, 85, 38, 0.2);
  box-shadow: 0 0.75rem 1.8rem rgba(49, 42, 27, 0.055);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

[data-page="service-udrzba"] .svc-footer--slim {
  position: relative;
  background: #f8f5ee;
  border-top-color: rgba(181, 138, 58, 0.42);
}

/* --- Telefón a tablet ---------------------------------------------- */
@media (max-width: 900px) {
  /* Sklo na telefóne padá (CLAUDE.md §Výkon scrollu) — nahrádza ho
     nepriehľadnejšia karta. */
  [data-page="service-udrzba"] .svc-prep > #priprava,
  [data-page="service-udrzba"] .svc-why {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 253, 248, 0.95);
    box-shadow: 0 0.9rem 2.4rem rgba(12, 28, 18, 0.16);
  }

  /* Rám je na telefóne vysoký a master široký 2,33 : 1, takže z neho
     cover ukáže iba úzky zvislý pás. Nech je to ten pravý, hustý —
     v strede mastera je len jeho vlastný biely nábeh. */
  [data-page="service-udrzba"] .svc-band--paper::before {
    background:
      linear-gradient(180deg,
        rgba(247, 242, 229, 0.3),
        rgba(20, 32, 22, 0.2)),
      image-set(
        url('../assets/optimized/services/udrzba-text-640.webp?v=1') 1x,
        url('../assets/optimized/services/udrzba-text-960.webp?v=1') 2x
      ) right center / cover no-repeat;
    opacity: 1;
  }

  [data-page="service-udrzba"] .svc-close { background-size: 100% auto; }

  [data-page="service-udrzba"] .svc-related a {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 253, 248, 0.88);
  }
}

/* ============================================================
   OBLASŤ PÔSOBENIA — panoráma a editoriálna mapa regiónu
   Vlastná vrstva je na konci súboru, aby sa stránka mohla oprieť o
   spoločnú typografiu a komponenty služieb bez toho, aby menila ich
   rozloženie. Fotografie sú tie, ktoré dodal klient.
   ============================================================ */

/* --- Hero --------------------------------------------------------- */
/* Mriežka, výška, padding a typografia hlavičky odišli do T157. Táto
   stránka merala ľavý okraj od 82rem rámca obsahových pásiem, nie od
   okna — pri 1920 px preto začínala o 184 px hlbšie než tri stránky
   služieb a o 184 px hlbšie než hero domovskej stránky. */
html[data-page="area"] .area-hero {
  background: var(--sand);
  border-bottom-color: rgba(14, 26, 18, 0.14);
}

html[data-page="area"] .area-hero .svc-hero__figure {
  inset: 0;
  width: 100%;
  background: #c9c8bd;
}

html[data-page="area"] .area-hero .svc-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
}

html[data-page="area"] .area-hero .svc-hero__figure::after {
  background:
    linear-gradient(90deg,
      var(--sand) 0%,
      rgba(241, 235, 216, 0.98) 18%,
      rgba(241, 235, 216, 0.88) 29%,
      rgba(241, 235, 216, 0.48) 42%,
      rgba(241, 235, 216, 0.08) 57%,
      rgba(241, 235, 216, 0) 67%),
    linear-gradient(180deg,
      rgba(241, 235, 216, 0.04) 58%,
      rgba(241, 235, 216, 0.38) 84%,
      rgba(241, 235, 216, 0.8) 100%);
}

html[data-page="area"] .area-hero__cta {
  gap: 0.75rem;
  min-height: 3.25rem;
  margin-top: 2.25rem;
  padding-inline: 1.7rem;
  color: var(--gold);
  background: var(--green-soft);
  border-color: var(--green-soft);
  box-shadow: 0 16px 32px -20px rgba(14, 26, 18, 0.85), 0 2px 6px -4px rgba(14, 26, 18, 0.4);
}

html[data-page="area"] .privacy-header__back {
  color: var(--gold);
  background: var(--green-soft);
  border-color: var(--green-soft);
  box-shadow: 0 16px 32px -20px rgba(14, 26, 18, 0.85), 0 2px 6px -4px rgba(14, 26, 18, 0.4);
}

html[data-page="area"] .privacy-header__back:hover {
  color: var(--green-deep);
  background: var(--gold);
  border-color: var(--gold);
}

/* --- Kde pôsobíme ------------------------------------------------ */
html[data-page="area"] .area-reach {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 51%) minmax(0, 49%);
  align-items: stretch;
  min-height: clamp(53rem, 58vw, 67rem);
  overflow: clip;
  background: #10271d;
}

/* Ľavé odsadenie drží text v obsahovom rámci 82rem aj nad stropom
   kompozície (T153), takže tomuto pásmu netreba vzduchový stĺpec.
   `100vw` je tu **zámerné a nemeň ho na `100%`**: percento by sa
   počítalo zo šírky stĺpca mriežky (51 % pásma), nie okna, a text by
   spadol k ľavému okraju. Cenou je posun o šírku scrollbaru — v paddingu
   je neškodný, vodorovné rolovanie z neho vzniknúť nemôže. */
html[data-page="area"] .area-reach .svc-feature__copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  padding: clamp(4.25rem, 6vw, 6.5rem) clamp(2.25rem, 4.5vw, 5.25rem)
    clamp(8rem, 12vw, 12rem) max(var(--svc-gutter), calc((100vw - var(--svc-max)) / 2));
}

html[data-page="area"] .area-reach .svc-feature__copy > div {
  max-width: 38rem;
}

/* T148 — nadpis aj perex boli o triedu väčšie než na štyroch stránkach
   služieb (5,4rem proti 4rem, --type-lead proti --type-supporting)
   a pásmo tak vyskakovalo z rytmu webu. Hodnoty sú teraz tie isté ako
   v `[data-page="service-vysadba"] .svc-feature h2`. */
html[data-page="area"] .area-reach h2 {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
  max-width: 22ch;
  font-size: clamp(2.65rem, 3.25vw, 4rem);
  line-height: 1;
  letter-spacing: var(--track-title);
}

html[data-page="area"] .area-reach .area-reach__intro {
  max-width: 34rem;
  margin-top: 1.3rem;
  color: rgba(249, 246, 239, 0.78);
  font-family: var(--font-sans);
  font-size: var(--type-supporting);
  line-height: var(--lead-body);
  letter-spacing: normal;
  text-wrap: pretty;
}

html[data-page="area"] .area-reach .svc-points {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 36rem;
  margin-top: clamp(2.25rem, 3vw, 3.25rem);
}

html[data-page="area"] .area-reach .svc-points::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 3.9rem;
  bottom: 3.9rem;
  left: 2.25rem;
  width: 1px;
  background: rgba(201, 169, 106, 0.58);
}

html[data-page="area"] .area-reach .svc-points li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
  padding-block: 0.8rem;
}

html[data-page="area"] .area-reach .svc-point__icon {
  position: relative;
  z-index: 1;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0;
  padding: 1.18rem;
  border: 1px solid rgba(201, 169, 106, 0.76);
  border-radius: 50%;
  background: #10271d;
  color: var(--gold);
}

html[data-page="area"] .area-reach .svc-point__body {
  display: block;
  min-width: 0;
  padding: 0.15rem 0 1rem;
  border-bottom: 1px solid rgba(201, 169, 106, 0.32);
  color: rgba(249, 246, 239, 0.78);
  font-size: var(--type-supporting);
  line-height: var(--lead-snug);
}

html[data-page="area"] .area-reach .svc-points li:last-child .svc-point__body {
  border-bottom: 0;
}

html[data-page="area"] .area-reach .svc-point__title {
  display: block;
  margin: 0;
  color: #f5efdf;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--track-head);
}

html[data-page="area"] .area-reach__eyebrow,
html[data-page="area"] .area-reach__detail {
  display: block;
}

html[data-page="area"] .area-reach__eyebrow {
  margin-top: 0.45rem;
  color: var(--gold);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: 0.17em;
  line-height: 1.45;
  text-transform: uppercase;
}

html[data-page="area"] .area-reach__detail {
  margin-top: 0.38rem;
  color: rgba(249, 246, 239, 0.76);
  font-size: var(--type-supporting);
  line-height: var(--lead-snug);
}

html[data-page="area"] .area-reach .svc-feature__figure {
  position: relative;
  grid-column: 2;
  align-self: stretch;
  min-height: 100%;
  background: #233528;
}

html[data-page="area"] .area-reach .svc-feature__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

html[data-page="area"] .area-reach .svc-feature__figure::before {
  background:
    linear-gradient(90deg,
      #10271d 0%,
      rgba(16, 39, 29, 0.78) 12%,
      rgba(16, 39, 29, 0.3) 30%,
      rgba(16, 39, 29, 0) 48%),
    linear-gradient(180deg,
      rgba(10, 27, 19, 0.12) 0%,
      rgba(10, 27, 19, 0) 54%,
      rgba(10, 27, 19, 0.38) 100%);
}

/* T148 — karta stála na 42,5 % šírky a prekrývala poslednú položku
   zoznamu vľavo. Ľavá hrana je teraz odvodená od hranice stĺpcov
   (51 %, resp. 56 % pod 1180 px) mínus 1,5rem straddle — vždy menej než
   najmenší pravý padding textového stĺpca (2,25rem / 1,75rem), takže
   karta hranu pásma prekrýva, text nikdy. */
html[data-page="area"] .area-distance {
  position: absolute;
  z-index: 3;
  bottom: clamp(3.5rem, 5vw, 5.5rem);
  left: calc(51% - 1.5rem);
  width: min(27rem, calc(100% - 3rem));
  padding: 1.65rem 1.8rem 1.75rem;
  border: 1px solid rgba(201, 169, 106, 0.58);
  border-radius: 0.75rem;
  background: rgba(12, 32, 23, 0.88);
  box-shadow: 0 1.25rem 3rem rgba(4, 14, 9, 0.24);
}

html[data-page="area"] .area-distance::before {
  content: '';
  display: block;
  width: 4.5rem;
  height: 1px;
  margin-bottom: 1rem;
  background: rgba(201, 169, 106, 0.72);
}

html[data-page="area"] .area-distance h2 {
  display: block;
  max-width: none;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: 0.17em;
  line-height: 1.45;
  text-transform: uppercase;
  white-space: nowrap;
}

html[data-page="area"] .area-distance h2::after { display: none; }

html[data-page="area"] .area-distance p {
  margin-top: 0.8rem;
  color: rgba(249, 246, 239, 0.84);
  font-family: var(--font-serif);
  font-size: var(--type-supporting);
  line-height: 1.55;
  letter-spacing: var(--track-serif);
  text-wrap: pretty;
}

/* --- Súvisiace služby a rovnaká úzka pätička ako inde --------- */
html[data-page="area"] .area-related {
  background-color: #f8f5ee;
  background-image: url('../assets/footer_bacgkround.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  border-top-color: rgba(181, 138, 58, 0.14);
}

html[data-page="area"] .area-related::after { display: none; }

html[data-page="area"] .area-related .svc-close__stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(calc(100% - var(--svc-gutter) * 2), 82rem);
  padding-block: clamp(2.25rem, 3.8vw, 3.25rem);
  text-align: center;
}

html[data-page="area"] .area-related #suvisiace > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html[data-page="area"] .area-related .svc-related {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.8vw, 1.5rem);
  margin-top: 0;
  text-align: left;
}

html[data-page="area"] .area-related #suvisiace {
  order: 1;
  width: 100%;
}

html[data-page="area"] .area-related .svc-related li {
  display: flex;
}

html[data-page="area"] .area-related .svc-related a {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 8.5rem;
  padding: 1rem 1.1rem;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(104, 85, 38, 0.2);
  border-radius: 0.85rem;
  box-shadow: 0 0.75rem 1.8rem rgba(49, 42, 27, 0.055);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

html[data-page="area"] .area-related .svc-related a:hover {
  transform: translateY(-0.2rem);
  border-color: rgba(190, 151, 75, 0.48);
  box-shadow: 0 0.9rem 2rem rgba(49, 42, 27, 0.08);
}

html[data-page="area"] .area-related .svc-related__icon {
  width: 3.35rem;
  height: 3.35rem;
  padding: 0.8rem;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--gold);
  box-shadow: 0 0.45rem 1rem rgba(14, 26, 18, 0.14);
}

html[data-page="area"] .area-related .svc-related__label {
  font-size: var(--type-card-title);
}

html[data-page="area"] .area-related .svc-related__copy {
  display: block;
}

html[data-page="area"] .area-related .svc-contact {
  order: 2;
  display: block;
  align-self: center;
  max-width: 46rem;
  margin-top: clamp(1.75rem, 3.4vw, 2.5rem);
  padding: 0;
  border: 0;
}

html[data-page="area"] .area-related .svc-contact__links {
  justify-content: center;
  gap: 0.6rem clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(0.85rem, 1.8vw, 1.15rem);
}

html[data-page="area"] .area-related .svc-contact__icon {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0.55rem;
  border: 0;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--gold);
  box-shadow: 0 0.45rem 1rem rgba(14, 26, 18, 0.14);
}

html[data-page="area"] .area-related .svc-contact__btn {
  min-height: 3rem;
  margin-top: clamp(1.1rem, 2.2vw, 1.5rem);
  padding-inline: 1.75rem;
  color: var(--gold);
  background: var(--green-soft);
  border-color: var(--green-soft);
  box-shadow: 0 16px 32px -20px rgba(14, 26, 18, 0.85), 0 2px 6px -4px rgba(14, 26, 18, 0.4);
}

html[data-page="area"] .area-related .svc-contact__btn:hover {
  color: var(--green-deep);
  background: var(--gold);
  border-color: var(--gold);
}

@media (min-width: 561px) {
  html[data-page="area"] .area-related .svc-contact__links a + a {
    padding-left: clamp(1.25rem, 3vw, 2.5rem);
    border-left: 1px solid rgba(104, 85, 38, 0.25);
  }
}

html[data-page="area"] .svc-footer--slim {
  position: relative;
  background: #f8f5ee;
  border-top-color: rgba(181, 138, 58, 0.42);
}

@media (max-width: 1180px) {
  html[data-page="area"] .area-reach {
    grid-template-columns: minmax(0, 56%) minmax(0, 44%);
  }

  html[data-page="area"] .area-reach .svc-feature__copy {
    padding-right: clamp(1.75rem, 3vw, 3rem);
  }

  html[data-page="area"] .area-distance { left: calc(56% - 1.5rem); }

  html[data-page="area"] .area-related .svc-related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  html[data-page="area"] .area-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: min(88svh, 46rem);
  }

  html[data-page="area"] .area-hero .svc-hero__figure img {
    object-position: 58% 50%;
  }

  html[data-page="area"] .area-hero .svc-hero__figure::after {
    background: linear-gradient(180deg,
      var(--sand) 0%,
      rgba(241, 235, 216, 0.97) 31%,
      rgba(241, 235, 216, 0.84) 52%,
      rgba(241, 235, 216, 0.32) 76%,
      rgba(241, 235, 216, 0.08) 92%,
      rgba(241, 235, 216, 0.24) 100%);
  }

  html[data-page="area"] .area-hero .svc-hero__copy {
    padding: 3rem var(--svc-gutter) 2.5rem;
  }

  html[data-page="area"] .area-hero h1 {
    max-width: 27rem;
    margin-top: 0.95rem;
    font-size: var(--type-display);
  }

  html[data-page="area"] .area-hero .svc-hero__intro {
    max-width: 29rem;
    margin-top: 1.25rem;
    font-size: var(--type-supporting);
    line-height: 1.56;
  }

  html[data-page="area"] .area-hero__cta {
    min-height: 3rem;
    margin-top: 1.6rem;
  }

  html[data-page="area"] .area-reach {
    display: block;
    min-height: 0;
  }

  html[data-page="area"] .area-reach .svc-feature__copy {
    padding: clamp(3.75rem, 10vw, 5.25rem) var(--svc-gutter) 3.5rem;
  }

  html[data-page="area"] .area-reach .svc-feature__copy > div {
    max-width: 42rem;
    margin-inline: auto;
  }

  html[data-page="area"] .area-reach h2 {
    max-width: none;
    font-size: clamp(2.4rem, 9vw, 3.4rem);
  }

  html[data-page="area"] .area-reach .area-reach__intro {
    max-width: 28rem;
  }

  html[data-page="area"] .area-reach .svc-points {
    max-width: 38rem;
  }

  html[data-page="area"] .area-reach .svc-feature__figure {
    min-height: 0;
    aspect-ratio: 1122 / 1402;
  }

  html[data-page="area"] .area-reach .svc-feature__figure::before {
    background: linear-gradient(180deg,
      #10271d 0%,
      rgba(16, 39, 29, 0.7) 10%,
      rgba(16, 39, 29, 0.12) 30%,
      rgba(16, 39, 29, 0) 48%,
      rgba(10, 27, 19, 0.25) 100%);
  }

  html[data-page="area"] .area-distance {
    position: relative;
    bottom: auto;
    left: auto;
    width: auto;
    margin: -5rem var(--svc-gutter) 0;
    padding: 1.5rem;
  }

  html[data-page="area"] .area-related .svc-related a {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 253, 248, 0.88);
  }
}

@media (max-width: 620px) {
  html[data-page="area"] .area-hero {
    min-height: 43rem;
  }

  html[data-page="area"] .area-hero .svc-hero__kicker {
    font-size: var(--type-micro);
  }

  html[data-page="area"] .area-reach h2 {
    gap: 0.75rem;
  }

  html[data-page="area"] .area-reach .svc-points li {
    grid-template-columns: 3.85rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 0.65rem;
  }

  html[data-page="area"] .area-reach .svc-points::before {
    top: 3.35rem;
    bottom: 3.35rem;
    left: 1.925rem;
  }

  html[data-page="area"] .area-reach .svc-point__icon {
    width: 3.85rem;
    height: 3.85rem;
    padding: 1rem;
  }

  html[data-page="area"] .area-reach .svc-point__title {
    font-size: clamp(1.35rem, 6.4vw, 1.65rem);
  }

  html[data-page="area"] .area-reach__eyebrow {
    letter-spacing: 0.13em;
  }

  html[data-page="area"] .area-related .svc-related {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   T147 — MOBILNÁ HLAVIČKA V RYTME DOMOVSKEJ STRÁNKY
   Stojí úplne na konci súboru zámerne: prepisuje spoločnú mobilnú
   vrstvu T140, editoriálne vrstvy Návrhu a Závlah, vlastnú vrstvu
   Výsadby (T145) aj vrstvu Oblasti — všetky sú vyššie a všetky si
   doteraz niesli vlastnú mobilnú typografiu hlavičky.

   Do T147 mala každá z piatich stránok na telefóne iný odstup, inú
   veľkosť nadlinky aj iné zarovnanie: nadlinka 8,6 px na Návrhu
   a Oblasti proti 11,2 px na Závlahách, Výsadbe a Údržbe; gutter
   18,4 px proti 72 px na Závlahách; perex 13,9 px proti 17,6 px na
   Údržbe. Päť podstránok tak čítal návštevník ako päť rôznych webov
   a ani jedna z nich nezodpovedala domovskej stránke.

   Predlohou je úvod sekcie domovskej stránky (T126) — O nás, Služby,
   Realizácie a Kontakt majú na telefóne všetky rovnaký recept:

     · text v osi sekcie (`text-align: center`)
     · nadlinka s vlasovou čiarkou **po oboch stranách**, 1,85 rem
       dlhou a 2 px hrubou, vo farbe `--eyebrow-ink`
     · gutter 1,5 rem (= `--about-mobile-gutter`)
     · perex `--type-body` / 1,56 v úzkej role, aby stredové
       zarovnanie nevyrábalo roztrhaný pravý okraj

   Nadpis ostáva `--type-display` (nie `--type-title` ako v sekciách) —
   je to `h1` stránky a v predlohe domovskej stránky mu zodpovedá
   nadpis hera, nie nadpis sekcie.
   ============================================================ */

@media (max-width: 900px) {
  /* Jedno pravidlo pre všetkých päť stránok — zoznam selektorov musí
     obsiahnuť každú vrstvu, ktorá si vyššie nastavuje vlastný padding,
     inak by ju špecifickosť atribútového selektora prebila. */
  /* Závlahy si mimo media query držia trojstĺpcovú mriežku s krajným
     stĺpcom `clamp(4.5rem, 6.25vw, 7.5rem)`. Špecifickosť atribútového
     selektora prebíja spoločné mobilné pravidlo vyššie, takže text
     hlavičky začínal na 390 px displeji až na 96 px — o 72 px hlbšie
     než na ostatných štyroch stránkach. Jeden stĺpec pre všetkých päť. */
  .svc-hero,
  [data-page="service-navrh-zahrady"] .svc-hero,
  [data-page="service-zavlahy"] .svc-hero,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero,
  html[data-page="area"] .area-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-hero__copy,
  [data-page="service-navrh-zahrady"] .svc-hero__copy,
  [data-page="service-zavlahy"] .svc-hero__copy,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__copy,
  html[data-page="area"] .area-hero .svc-hero__copy {
    /* Menované linky `copy-start`/`copy-end` v jednostĺpcovej mriežke
       neexistujú, takže si ich prehliadač domyslí ako implicitné stopy —
       text potom začínal 30 px od okraja namiesto v gutteri. */
    grid-column: 1 / -1;
    padding: 2.75rem var(--svc-hero-gutter) 2.5rem;
    text-align: center;
  }

  /* Nadlinka: čiarka po oboch stranách slova. `flex: 0 0 auto` drží
     obe rovnako dlhé aj vtedy, keď sa text zalomí na dva riadky
     („Starostlivosť podľa ročného obdobia" to v slovenčine robí). */
  .svc-hero__kicker,
  [data-page="service-navrh-zahrady"] .svc-hero__kicker,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__kicker,
  html[data-page="area"] .area-hero .svc-hero__kicker {
    justify-content: center;
    gap: 0.7rem;
    max-width: none;
    margin-inline: auto;
    color: var(--eyebrow-ink);
    font-size: var(--type-label);
    font-weight: 500;
    letter-spacing: var(--track-caps-xs);
    line-height: 1.35;
    text-wrap: balance;
  }

  /* Nadlinka sa musí zmestiť na jeden riadok: pri zalomení sa čiarky
     ocitnú v zvislom strede dvojriadkového bloku a odtrhnú sa od textu.
     Pri 390 px to znamená zhruba 34 znakov — over vo všetkých troch
     jazykoch, maďarský reťazec býva o pätinu dlhší. */

  .svc-hero__kicker::before,
  .svc-hero__kicker::after {
    content: '';
    flex: 0 0 auto;
    width: var(--eyebrow-rule-length-mobile);
    height: var(--eyebrow-rule);
    background: currentColor;
  }

  .svc-hero h1,
  [data-page="service-navrh-zahrady"] .svc-hero h1,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero h1,
  html[data-page="area"] .area-hero h1 {
    max-width: none;
    margin: 1.05rem auto 0;
    font-size: var(--type-display);
    line-height: 0.96;
    letter-spacing: var(--track-display);
    text-wrap: balance;
  }

  /* Úzka rola je pri stredovom zarovnaní podmienka, nie ozdoba: cez
     celú šírku displeja by päť riadkov vyrobilo päť rôznych odsadení
     na oboch stranách. 20,5 rem je tá istá miera, akú má `.about__lead`
     na domovskej stránke. */
  .svc-hero__intro,
  [data-page="service-navrh-zahrady"] .svc-hero__intro,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__intro,
  html[data-page="area"] .area-hero .svc-hero__intro {
    max-width: 20.5rem;
    margin: 1.1rem auto 0;
    font-size: var(--type-body);
    line-height: 1.56;
    text-wrap: pretty;
  }

  /* Prínosy: blok sa stredí, položky vnútri ostávajú zarovnané doľava —
     ikona a text vedľa seba sa pri stredovom zarovnaní každého riadka
     rozsypú. `width: fit-content` je preto na zozname, nie na položke. */
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__meta {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }

  .svc-hero__cta,
  html[data-page="area"] .area-hero__cta {
    margin-top: 1.75rem;
  }
}

/* Užší telefón: nadlinka klesá na `--type-micro` rovnako ako v hero
   domovskej stránky, aby sa dlhší slovenský a maďarský reťazec zmestil
   na dva riadky namiesto troch. Perex ide o stupeň nižšie z rovnakého
   dôvodu — pri 16 px a 20,5 rem role by „Starostlivosť podľa ročného
   obdobia" vytlačilo tlačidlo pod ohyb. */
@media (max-width: 520px) {
  .svc-hero__kicker,
  [data-page="service-navrh-zahrady"] .svc-hero__kicker,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__kicker,
  html[data-page="area"] .area-hero .svc-hero__kicker {
    gap: 0.5rem;
    font-size: var(--type-micro);
    letter-spacing: 0.2em;
  }

  /* Kratšie čiarky uvoľnia textu ~15 px — práve toľko chýbalo
     najdlhším reťazcom na 360 px displeji. */
  .svc-hero__kicker::before,
  .svc-hero__kicker::after { width: 1.5rem; }

  .svc-hero__intro,
  [data-page="service-navrh-zahrady"] .svc-hero__intro,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__intro,
  html[data-page="area"] .area-hero .svc-hero__intro {
    max-width: 19.5rem;
    font-size: var(--type-supporting);
    line-height: 1.58;
  }
}

/* ============================================================
   T148 — MOBILNÁ KOMPOZÍCIA TEXT + FOTOGRAFIA

   Desktopová dvojstrana ostáva nedotknutá. Pod 901 px sa však fotografia
   už neukladá ako samostatný panel pod text: rozprestrie sa pod celým
   obsahovým pásmom a dvojica závojov ju odhalí až v jeho spodnej polovici.
   Zvislý závoj drží prvých 38 % v čistej farbe stránky, vodorovný chráni
   text vľavo a ponecháva fotografiu najčistejšiu vpravo dole.

   Riešenie používa existujúci responzívny <img> namiesto CSS backgroundu,
   takže ostávajú zachované srcset, lazy-loading aj alternatívny text.
   ============================================================ */
@media (max-width: 900px) {
  :is(
    [data-page="service-navrh-zahrady"],
    [data-page="service-zavlahy"],
    [data-page="service-vysadba"],
    [data-page="service-udrzba"]
  ) .svc-feature,
  html[data-page="area"] .area-reach {
    position: relative;
    isolation: isolate;
    display: block;
    min-height: 0;
    overflow: clip;
  }

  :is(
    [data-page="service-navrh-zahrady"],
    [data-page="service-zavlahy"],
    [data-page="service-vysadba"],
    [data-page="service-udrzba"]
  ) .svc-feature__copy {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    width: 100%;
    padding-bottom: clamp(10rem, 46vw, 13rem);
  }

  html[data-page="area"] .area-reach .svc-feature__copy {
    padding-bottom: clamp(10rem, 46vw, 13rem);
  }

  :is(
    [data-page="service-navrh-zahrady"],
    [data-page="service-zavlahy"],
    [data-page="service-vysadba"],
    [data-page="service-udrzba"]
  ) .svc-feature__figure,
  html[data-page="area"] .area-reach .svc-feature__figure {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    aspect-ratio: auto;
    background: inherit;
  }

  :is(
    [data-page="service-navrh-zahrady"],
    [data-page="service-zavlahy"],
    [data-page="service-vysadba"],
    [data-page="service-udrzba"]
  ) .svc-feature__figure img,
  html[data-page="area"] .area-reach .svc-feature__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  :is(
    [data-page="service-navrh-zahrady"],
    [data-page="service-zavlahy"],
    [data-page="service-vysadba"]
  ) .svc-feature__figure::before {
    display: block;
    background:
      linear-gradient(to bottom,
        var(--sand) 0%,
        var(--sand) 38%,
        rgba(241, 235, 216, 0.95) 48%,
        rgba(241, 235, 216, 0.7) 66%,
        rgba(241, 235, 216, 0.34) 82%,
        rgba(241, 235, 216, 0.07) 100%),
      linear-gradient(to right,
        rgba(241, 235, 216, 0.82) 0%,
        rgba(241, 235, 216, 0.48) 58%,
        rgba(241, 235, 216, 0) 100%);
  }

  [data-page="service-udrzba"] .svc-feature__figure::before {
    display: block;
    background:
      linear-gradient(to bottom,
        var(--green-deep) 0%,
        var(--green-deep) 38%,
        rgba(14, 26, 18, 0.92) 48%,
        rgba(14, 26, 18, 0.65) 65%,
        rgba(14, 26, 18, 0.3) 82%,
        rgba(14, 26, 18, 0.08) 100%),
      linear-gradient(to right,
        rgba(14, 26, 18, 0.78) 0%,
        rgba(14, 26, 18, 0.42) 58%,
        rgba(14, 26, 18, 0) 100%);
  }

  html[data-page="area"] .area-reach .svc-feature__figure::before {
    display: block;
    background:
      linear-gradient(to bottom,
        #10271d 0%,
        #10271d 38%,
        rgba(16, 39, 29, 0.92) 48%,
        rgba(16, 39, 29, 0.65) 65%,
        rgba(16, 39, 29, 0.3) 82%,
        rgba(16, 39, 29, 0.08) 100%),
      linear-gradient(to right,
        rgba(16, 39, 29, 0.78) 0%,
        rgba(16, 39, 29, 0.42) 58%,
        rgba(16, 39, 29, 0) 100%);
  }

  [data-page="service-navrh-zahrady"] .svc-feature__figure img {
    object-position: 58% 50%;
  }

  [data-page="service-zavlahy"] .svc-feature__figure img {
    object-position: 50% 50%;
  }

  [data-page="service-vysadba"] .svc-feature__figure img {
    object-position: 58% 50%;
  }

  [data-page="service-udrzba"] .svc-feature__figure img {
    object-position: 68% 50%;
  }

  html[data-page="area"] .area-reach .svc-feature__figure img {
    object-position: 52% 50%;
  }

  html[data-page="area"] .area-reach {
    padding-bottom: clamp(5.5rem, 16vw, 8rem);
  }

  /* Karta vzdialenosti leží na fotografii dostatočne vysoko, aby fotografia
     vyčnievala aj pod ňou (rovnako ako na desktope). */
  html[data-page="area"] .area-distance {
    position: relative;
    z-index: 3;
    margin-top: calc(clamp(10rem, 46vw, 13rem) * -0.58 - 3.75rem);
  }

  /* `Kde pôsobíme` používa veľký editoriálny h2. Karta je jeho vnorený
     súrodenec, preto jej titul explicitne vraciame do utility mierky. */
  html[data-page="area"] .area-reach .area-distance h2 {
    display: block;
    gap: 0;
    max-width: none;
    color: var(--gold);
    font-family: var(--font-sans);
    font-size: var(--type-micro);
    font-weight: 500;
    letter-spacing: 0.17em;
    line-height: 1.45;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/* --- T148 — kontakt v uzatváracom pásme: ikony pod sebou v jednej osi ---
   Riadky telefónu a mailu sa pod 561 px zalomia pod seba a `justify-content:
   center` ich zarovnával každý zvlášť — kruh telefónu tak stál o pár desiatok
   pixelov inde než kruh mailu, podľa dĺžky textu vedľa neho. Zvislý flex so
   `width: fit-content` vycentruje celú dvojicu ako blok, takže obe ikony
   držia tú istú ľavú linku. Platí pre všetkých päť podstránok naraz. */
@media (max-width: 560px) {
  html:not([data-page="area"]) .svc-contact__links,
  html[data-page="area"] .area-related .svc-contact__links {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: fit-content;
    margin-inline: auto;
  }
}

/* --- T148 — vlastné mobilné fotografie piatich stránok ---------------
   Hlavičky Návrhu, Výsadby, Údržby a Oblasti aj fotografie pod textom
   sú na telefóne samostatné zvislé zábery, nie orezy širokouhlých
   masterov. Vodorovné posuny, ktorými sa orez predtým aspoň nasmeroval
   na výjav (84 %, 72 %, 68 %, 58 %), tým stratili zmysel — rám je
   s masterom takmer zhodný, takže stred je naozaj stred. Musí stáť za
   vrstvami T140 – T146, ktoré tie posuny nastavujú. */
@media (max-width: 900px) {
  [data-page="service-vysadba"] .svc-hero__figure img,
  [data-page="service-udrzba"] .svc-hero__figure img,
  html[data-page="area"] .area-hero .svc-hero__figure img {
    object-position: 50% 50%;
  }

  [data-page="service-navrh-zahrady"] .svc-feature__figure img,
  [data-page="service-vysadba"] .svc-feature__figure img,
  [data-page="service-udrzba"] .svc-feature__figure img,
  html[data-page="area"] .area-reach .svc-feature__figure img {
    object-position: 50% 50%;
  }
}

/* --- T148 — Návrh a Oblasť: výjav hore, text dole -------------------
   Nové mobilné hlavičky sú dve rôzne kompozície, nie jedna. Údržba
   a Výsadba majú výjav v spodnej polovici a hore si nesú vlastný
   pieskový nábeh — spoločný závoj T140 (nepriehľadný hore, čistý dole)
   im sadne. Návrh a Oblasť pôsobenia ho majú presne naopak: monitor,
   resp. panoráma s hradom, sú úplne hore a spodné dve tretiny sú prázdny
   piesok. Spoločný závoj by teda zakryl práve to jediné, čo na
   fotografii je, a text by ležal na prázdnej ploche.

   Preto sa pre tieto dve stránky obracia oboje naraz — závoj aj text.
   Kotva `50% 0%` je podmienka, nie ladenie: rám má pomer ~0,58, návrh
   0,46, takže `cover` odreže pätinu výšky a pri strede by z monitora
   ostala polovica. */
@media (max-width: 900px) {
  [data-page="service-navrh-zahrady"] .svc-hero__figure img,
  html[data-page="area"] .area-hero .svc-hero__figure img {
    object-position: 50% 0%;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__figure::after,
  html[data-page="area"] .area-hero .svc-hero__figure::after {
    background: linear-gradient(to bottom,
      rgba(241, 235, 216, 0) 0%,
      rgba(241, 235, 216, 0.06) 26%,
      rgba(241, 235, 216, 0.42) 38%,
      rgba(241, 235, 216, 0.86) 48%,
      rgba(241, 235, 216, 0.97) 56%,
      var(--sand) 64%,
      var(--sand) 100%);
  }

  /* Text klesá na spodok hlavičky, teda na plochu, ktorú fotografia
     necháva prázdnu. Bez `align-content` by ostal hore nad výjavom. */
  [data-page="service-navrh-zahrady"] .svc-hero,
  html[data-page="area"] .area-hero {
    align-content: end;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__copy,
  html[data-page="area"] .area-hero .svc-hero__copy {
    padding-top: 0;
    padding-bottom: 3rem;
  }
}

/* ============================================================
   (5) Časté otázky — S28
   ------------------------------------------------------------
   Pásmo existuje kvôli dopytom, ktoré na stránke dovtedy nemali
   kde pristáť: „koľko stojí", „kedy sa vysádza", „dá sa doplniť
   do hotovej záhrady". Sú to otázky s vlastným zámerom, nie
   variácie na hlavný dopyt, takže bez odpovede na stránke sa web
   o celú vrstvu dlhého chvosta pripravoval.

   Zámerne BEZ `FAQPage` JSON-LD: Google FAQ rich results zrušil
   7. 5. 2026 (seo.md §3) a značkovanie by tu nič neprinieslo —
   hodnotu nesie samotný text. Rovnako zámerne bez `<details>`:
   zbalený obsah sa síce indexuje, ale odpoveď, ktorú treba
   rozkliknúť, prestáva byť odpoveďou.

   Rozloženie kopíruje `.svc-prep` (21rem nadpis + zvyšok obsah),
   aby papierové pásmo nad ním a toto pásmo držali jeden rytmus.
   Podklad je piesok — papier by sa zlial s pásmom nad ním a tmavá
   zelená je na stránke vyhradená jedinému pásmu (3).
   ============================================================ */
.svc-faq {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

.svc-faq__head p {
  max-width: 24rem;
  font-size: var(--type-supporting);
  line-height: var(--lead-body);
}

.svc-faq__list {
  display: grid;
  gap: 0;
  margin: 0;
}

/* `<div>` medzi `<dl>` a `<dt>/<dd>` je platné HTML5 a je tu nutné:
   bez neho sa dvojica otázka/odpoveď nedá držať pohromade ako jedna
   bunka mriežky a vlasová linka by padla medzi otázku a jej odpoveď. */
.svc-faq__item {
  padding-block: clamp(1.25rem, 2vw, 1.6rem);
  border-top: 1px solid var(--line);
}

.svc-faq__item:first-child { border-top: 0; padding-top: 0; }
.svc-faq__item:last-child { padding-bottom: 0; }

.svc-faq__item dt {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--type-lead);
  line-height: var(--lead-snug);
  letter-spacing: var(--track-serif);
  text-wrap: balance;
}

.svc-faq__item dd {
  max-width: 46rem;
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: var(--type-supporting);
  line-height: var(--lead-body);
  text-wrap: pretty;
}

@media (max-width: 1024px) {
  .svc-faq { grid-template-columns: 1fr; gap: 2.25rem; }
  .svc-faq__head p { max-width: 46rem; }
}

/* ============================================================
   T149 — JEDNA HLAVIČKA PRE PÄŤ OBSAHOVÝCH PODSTRÁNOK
   ------------------------------------------------------------
   Album realizácií je referenčný stav: kompletný brand lockup ostáva
   v rovnakej ľavej osi, zatiaľ čo prepínač jazyka a návrat tvoria
   jeden kompaktný pravý zhluk. `grid` je tu zámerný — pôvodný
   `space-between` rozťahoval medzi všetky tri prvky dve rôzne veľké
   medzery a prepínač tak po prekliku viditeľne poskočil.

   Úprava platí iba v mobilnom pásme. Selektor je obmedzený na štyri
   služby a oblasť pôsobenia; právne stránky, ktoré tiež používajú
   `.privacy-header`, sa nemenia. Farba návratu kopíruje tlačidlá albumu:
   mäkká tmavozelená + zlatý obsah. Desktop ostáva v pôvodnej kaskáde.
   ============================================================ */
@media (max-width: 920px) {
html:is([data-page^="service-"], [data-page="area"]) .privacy-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  justify-content: stretch;
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

html:is([data-page^="service-"], [data-page="area"]) .privacy-header__brand {
  min-width: 0;
  width: max-content;
  max-width: 100%;
  justify-self: start;
}

html:is([data-page^="service-"], [data-page="area"]) .privacy-header .language-switcher {
  margin-right: 0;
}

html:is([data-page^="service-"], [data-page="area"]) .privacy-header__back {
  color: var(--gold);
  background: var(--green-soft);
  border-color: var(--green-soft);
  box-shadow:
    0 16px 32px -20px rgba(14, 26, 18, 0.85),
    0 2px 6px -4px rgba(14, 26, 18, 0.4);
}

html:is([data-page^="service-"], [data-page="area"]) .privacy-header__back:hover {
  color: var(--green-deep);
  background: var(--gold);
  border-color: var(--gold);
}

  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__brand {
    gap: 0.5rem;
  }

  /* The project album is the mobile header reference. privacy.css used to
     compact this lockup already at 480 px, while the album only compacts at
     420 px. In the 421–480 px band that made the logo 7.2 px smaller, hid
     the descriptor and shifted the language control. Keep the full album
     geometry throughout the shared tablet/mobile band; the 420 px rules
     below still provide the intentionally compact narrow-phone variant. */
  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__mark {
    width: 3.2rem;
    height: 3.2rem;
  }

  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__mark img {
    width: 3.1rem;
    height: 3.1rem;
  }

  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__descriptor {
    display: block;
  }
}

@media (max-width: 620px) {
  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__inner {
    column-gap: 1.4rem;
  }

  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__back {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    gap: 0;
    padding: 0.45rem 0;
    border-radius: 50%;
  }

  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__back-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__back-icon {
    display: block;
    width: 1.35rem;
    stroke-width: 1.4;
  }
}

@media (max-width: 420px) {
  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__inner {
    /* Zosúladené s hlavnou stránkou: odstup prepínača od pravého tlačidla
       je 0.5rem (8 px) namiesto 0.75rem, aby poloha prepínača dokonale
       sedela s index.html a ochrana-sukromia. */
    column-gap: 0.5rem;
  }

  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__brand {
    gap: 0.35rem;
  }

  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__mark {
    width: 2.75rem;
    height: 2.75rem;
  }

  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__mark img {
    width: 2.7rem;
    height: 2.7rem;
  }

  html:is([data-page^="service-"], [data-page="area"]) .privacy-header__descriptor {
    display: block;
    font-size: clamp(0.5375rem, 0.505rem + 0.1385vw, 0.65rem);
    line-height: 1.3;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
}

/* ============================================================
   T149 — NÁVRH ZÁHRADY: OBRAZOVÁ PRVÁ OBRAZOVKA
   ------------------------------------------------------------
   Iba pod 901 px tvorí fotografia samostatnú celoplošnú plochu presne
   pod fixnou hlavičkou. Pomer z referencie ju ukončí hneď za stolom,
   aby sa nezobrazila prázdna spodná polovica mobilného mastera určená
   pre starý prekrytý text. Text začína až pod obrazom na čistom
   krémovom plátne. Desktop ostáva v pôvodnej dvojstranovej kompozícii.
   ============================================================ */
@media (max-width: 900px) {
[data-page="service-navrh-zahrady"] .svc-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: normal;
  min-height: 0;
  background: #f4efe5;
}

[data-page="service-navrh-zahrady"] .svc-hero__figure {
  position: relative;
  inset: auto;
  order: 1;
  width: 100%;
  height: min(calc(100svh - var(--header-h)), 91vw);
  min-height: 0;
  overflow: hidden;
}

[data-page="service-navrh-zahrady"] .svc-hero__figure picture {
  display: block;
  width: 100%;
  height: 100%;
}

[data-page="service-navrh-zahrady"] .svc-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}

[data-page="service-navrh-zahrady"] .svc-hero__figure::after {
  display: none;
}

[data-page="service-navrh-zahrady"] .svc-hero__copy {
  order: 2;
  width: min(100%, 58rem);
  margin-inline: auto;
  padding: clamp(3.75rem, 7vw, 6.5rem) var(--svc-gutter)
    clamp(4rem, 7.5vw, 7rem);
  text-align: center;
}

[data-page="service-navrh-zahrady"] .svc-hero__kicker {
  justify-content: center;
  gap: 0.85rem;
  max-width: none;
  margin-inline: auto;
  color: var(--gold-deep);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-caps-xs);
  line-height: 1.35;
}

[data-page="service-navrh-zahrady"] .svc-hero__kicker::before,
[data-page="service-navrh-zahrady"] .svc-hero__kicker::after {
  content: '';
  flex: 0 0 auto;
  width: var(--eyebrow-rule-length);
  height: var(--eyebrow-rule);
  background: currentColor;
}

[data-page="service-navrh-zahrady"] .svc-hero h1 {
  max-width: none;
  margin: 1.25rem auto 0;
  line-height: 0.96;
}

[data-page="service-navrh-zahrady"] .svc-hero__intro {
  max-width: 46rem;
  margin: 1.65rem auto 0;
  color: rgba(14, 26, 18, 0.78);
  font-size: var(--type-body);
  line-height: var(--lead-body);
}

[data-page="service-navrh-zahrady"] .svc-hero__cta {
  margin-top: 2.25rem;
}

  [data-page="service-navrh-zahrady"] .svc-hero__figure img {
    object-position: 50% 0%;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__copy {
    padding: 2.75rem var(--svc-hero-gutter) 3.25rem;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__kicker {
    gap: 0.7rem;
    font-size: var(--type-label);
    letter-spacing: var(--track-caps-xs);
  }

  [data-page="service-navrh-zahrady"] .svc-hero__kicker::before,
  [data-page="service-navrh-zahrady"] .svc-hero__kicker::after {
    width: var(--eyebrow-rule-length-mobile);
  }

  [data-page="service-navrh-zahrady"] .svc-hero h1 {
    margin-top: 1.05rem;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__intro {
    max-width: 31rem;
    margin-top: 1.1rem;
    font-size: var(--type-body);
    line-height: 1.56;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__cta {
    margin-top: 1.75rem;
  }
}

@media (max-width: 520px) {
  [data-page="service-navrh-zahrady"] .svc-hero__kicker {
    gap: 0.5rem;
    font-size: var(--type-micro);
    letter-spacing: 0.2em;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__kicker::before,
  [data-page="service-navrh-zahrady"] .svc-hero__kicker::after {
    width: 1.5rem;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__intro {
    max-width: 20.5rem;
    font-size: var(--type-supporting);
    line-height: 1.58;
  }
}

/* ============================================================
   ZÁVLAHY — MOBILNÉ HERO PODĽA OBRAZOVEJ PREDLOHY
   ------------------------------------------------------------
   Na desktope zostáva pôvodná široká dvojstrana. Pod 901 px je nový
   zvislý master samostatným obrazovým panelom pod hlavičkou a text
   pokračuje až pod ním na pokojnom krémovom plátne. Výška 76vw ukáže
   fotografickú časť dodaného mastera bez jeho prázdnej spodnej plochy.
   ============================================================ */
@media (max-width: 900px) {
  [data-page="service-zavlahy"] .svc-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: normal;
    min-height: 0;
    background: #f4efe5;
    border-bottom: 0;
  }

  [data-page="service-zavlahy"] .svc-hero__figure {
    position: relative;
    inset: auto;
    order: 1;
    width: 100%;
    height: min(calc(100svh - var(--header-h)), 76vw);
    min-height: 0;
    overflow: hidden;
    background: #d7c98b;
  }

  [data-page="service-zavlahy"] .svc-hero__figure picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  [data-page="service-zavlahy"] .svc-hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
  }

  [data-page="service-zavlahy"] .svc-hero__figure::after {
    display: none;
  }

  [data-page="service-zavlahy"] .svc-hero__copy {
    order: 2;
    width: min(100%, 58rem);
    margin-inline: auto;
    padding: 2.75rem var(--svc-hero-gutter) 3.25rem;
    text-align: center;
  }

  [data-page="service-zavlahy"] .svc-hero__meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    width: min(100%, 26rem);
    margin: 1.75rem auto 0;
    border: 0;
  }

  [data-page="service-zavlahy"] .svc-hero__meta li,
  [data-page="service-zavlahy"] .svc-hero__meta li:first-child {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    min-height: 3.25rem;
    padding: 0.72rem 1.25rem;
    border: 1px solid rgba(104, 85, 38, 0.24);
    border-radius: 999px;
    color: rgba(14, 26, 18, 0.78);
    background: rgba(255, 253, 248, 0.14);
    font-size: var(--type-supporting);
    line-height: 1.4;
    text-wrap: pretty;
  }

  [data-page="service-zavlahy"] .svc-hero__meta-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  [data-page="service-zavlahy"] .svc-hero__cta {
    width: min(100%, 26rem);
    min-height: 3.5rem;
    margin-top: 1.9rem;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  [data-page="service-zavlahy"] .svc-hero__figure img {
    object-position: 50% 28%;
  }
}

@media (max-width: 520px) {
  [data-page="service-zavlahy"] .svc-hero__copy {
    padding: 2.6rem var(--svc-hero-gutter) 3rem;
  }

  [data-page="service-zavlahy"] .svc-hero__meta {
    margin-top: 1.55rem;
  }

  [data-page="service-zavlahy"] .svc-hero__meta li,
  [data-page="service-zavlahy"] .svc-hero__meta li:first-child {
    min-height: 3rem;
    padding: 0.64rem 1rem;
  }

  [data-page="service-zavlahy"] .svc-hero__cta {
    margin-top: 1.65rem;
  }
}

/* ============================================================
   VÝSADBA — MOBILNÉ HERO S VERTIKÁLNYM MASTEROM
   ------------------------------------------------------------
   Desktopová dvojstrana ostáva bez zmeny. Pod 901 px vyplní zvislý
   master celú prvú obrazovku pod fixnou hlavičkou. Text sedí v jeho
   svetlej spodnej časti; dodatočný prechod zaručí rovnakú čitateľnosť
   aj na širších tabletoch, kde `cover` z mastera oreže viac spodku.
   ============================================================ */
@media (max-width: 900px) {
  [data-page="service-vysadba"] .svc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    align-content: end;
    min-height: calc(100svh - var(--header-h));
    overflow: hidden;
    background: #f4efe5;
    border-bottom: 0;
  }

  [data-page="service-vysadba"] .svc-hero__figure {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #d8c983;
  }

  [data-page="service-vysadba"] .svc-hero__figure picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  [data-page="service-vysadba"] .svc-hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
  }

  [data-page="service-vysadba"] .svc-hero__figure::after {
    display: block;
    background: linear-gradient(
      to bottom,
      rgba(244, 239, 229, 0) 30%,
      rgba(244, 239, 229, 0.18) 40%,
      rgba(244, 239, 229, 0.88) 57%,
      #f4efe5 71%
    );
  }

  [data-page="service-vysadba"] .svc-hero__copy {
    position: relative;
    z-index: 1;
    grid-column: 1;
    align-self: end;
    width: min(100%, 46rem);
    margin-inline: auto;
    padding: clamp(1.5rem, 3svh, 2.5rem) var(--svc-hero-gutter)
      max(clamp(1.5rem, 3svh, 2.5rem), env(safe-area-inset-bottom));
    text-align: center;
  }

  [data-page="service-vysadba"] .svc-hero__kicker {
    justify-content: center;
    gap: 0.7rem;
    max-width: none;
    margin-inline: auto;
    font-size: var(--type-label);
    letter-spacing: var(--track-caps-xs);
  }

  [data-page="service-vysadba"] .svc-hero__kicker::before,
  [data-page="service-vysadba"] .svc-hero__kicker::after {
    content: '';
    flex: 0 0 auto;
    width: var(--eyebrow-rule-length-mobile);
    height: var(--eyebrow-rule);
    background: currentColor;
  }

  [data-page="service-vysadba"] .svc-hero h1 {
    max-width: 36rem;
    margin: 1.05rem auto 0;
    line-height: 0.96;
  }

  [data-page="service-vysadba"] .svc-hero__intro {
    max-width: 31rem;
    margin: 1.1rem auto 0;
    color: rgba(14, 26, 18, 0.78);
    font-size: var(--type-body);
    line-height: 1.56;
  }

  [data-page="service-vysadba"] .svc-hero__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: min(100%, 36rem);
    margin: 1.35rem auto 0;
    border-block: 1px solid rgba(104, 85, 38, 0.24);
  }

  [data-page="service-vysadba"] .svc-hero__meta li,
  [data-page="service-vysadba"] .svc-hero__meta li:first-child {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0.4rem;
    align-items: center;
    min-height: 4.6rem;
    padding: 0.7rem 0.45rem;
    border: 0;
    border-left: 1px solid rgba(104, 85, 38, 0.24);
    border-radius: 0;
    color: rgba(14, 26, 18, 0.78);
    background: transparent;
    font-size: var(--type-caption);
    line-height: 1.35;
    text-align: center;
    text-wrap: pretty;
  }

  [data-page="service-vysadba"] .svc-hero__meta li:first-child {
    border-left: 0;
  }

  [data-page="service-vysadba"] .svc-hero__meta-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  [data-page="service-vysadba"] .svc-hero__cta {
    width: min(100%, 26rem);
    min-height: 3.25rem;
    margin-top: 1.35rem;
  }
}

@media (max-width: 520px) {
  [data-page="service-vysadba"] .svc-hero__copy {
    padding: 1.35rem var(--svc-hero-gutter)
      max(1.35rem, env(safe-area-inset-bottom));
  }

  [data-page="service-vysadba"] .svc-hero__kicker {
    gap: 0.5rem;
    font-size: var(--type-micro);
    letter-spacing: 0.2em;
  }

  [data-page="service-vysadba"] .svc-hero__kicker::before,
  [data-page="service-vysadba"] .svc-hero__kicker::after {
    width: 1.5rem;
  }

  [data-page="service-vysadba"] .svc-hero h1 {
    max-width: 22rem;
    font-size: clamp(2.35rem, 11.5vw, 2.75rem);
  }

  [data-page="service-vysadba"] .svc-hero__intro {
    max-width: 20.5rem;
    font-size: var(--type-supporting);
    line-height: 1.58;
  }

  [data-page="service-vysadba"] .svc-hero__meta {
    margin-top: 1.2rem;
  }

  [data-page="service-vysadba"] .svc-hero__meta li,
  [data-page="service-vysadba"] .svc-hero__meta li:first-child {
    min-height: 4.35rem;
    padding: 0.6rem 0.25rem;
    font-size: var(--type-micro);
    line-height: 1.3;
  }

  [data-page="service-vysadba"] .svc-hero__meta li:first-child {
    border-left: 0;
  }

  [data-page="service-vysadba"] .svc-hero__cta {
    margin-top: 1.2rem;
  }
}

/* ============================================================
   ÚDRŽBA — CELOPLOŠNÉ MOBILNÉ HERO
   ------------------------------------------------------------
   Desktopová dvojstrana ostáva bez zmeny. Pod 901 px používa hero
   vlastný zvislý master: fotografia vypĺňa prvú obrazovku pod
   hlavičkou a text sedí v jeho svetlej spodnej časti. Master už
   obsahuje fotografický prechod, preto sa starý dodatočný závoj vypína.
   ============================================================ */
@media (max-width: 900px) {
  [data-page="service-udrzba"] .svc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    align-content: end;
    min-height: calc(100svh - var(--header-h));
    overflow: hidden;
    background: #efe5ca;
    border-bottom: 0;
  }

  [data-page="service-udrzba"] .svc-hero__figure {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #efe5ca;
  }

  [data-page="service-udrzba"] .svc-hero__figure picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  [data-page="service-udrzba"] .svc-hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
  }

  [data-page="service-udrzba"] .svc-hero__figure::after {
    display: none;
  }

  [data-page="service-udrzba"] .svc-hero__copy {
    position: relative;
    z-index: 1;
    grid-column: 1;
    align-self: end;
    width: min(100%, 46rem);
    margin-inline: auto;
    padding: clamp(1.35rem, 3svh, 2.25rem) var(--svc-hero-gutter)
      max(clamp(1.35rem, 3svh, 2.25rem), env(safe-area-inset-bottom));
    text-align: center;
  }

  [data-page="service-udrzba"] .svc-hero__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: min(100%, 36rem);
    margin: 1.25rem auto 0;
    border-block: 1px solid rgba(104, 85, 38, 0.24);
  }

  [data-page="service-udrzba"] .svc-hero__meta li,
  [data-page="service-udrzba"] .svc-hero__meta li:first-child {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0.4rem;
    align-items: center;
    min-height: 4.5rem;
    padding: 0.65rem 0.4rem;
    border: 0;
    border-left: 1px solid rgba(104, 85, 38, 0.24);
    border-radius: 0;
    color: rgba(14, 26, 18, 0.78);
    background: transparent;
    font-size: var(--type-caption);
    line-height: 1.35;
    text-align: center;
    text-wrap: pretty;
  }

  [data-page="service-udrzba"] .svc-hero__meta li:first-child {
    border-left: 0;
  }

  [data-page="service-udrzba"] .svc-hero__meta-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  [data-page="service-udrzba"] .svc-hero__cta {
    width: min(100%, 26rem);
    min-height: 3.25rem;
    margin-top: 1.25rem;
  }
}

@media (max-width: 520px) {
  [data-page="service-udrzba"] .svc-hero__copy {
    padding: 1.15rem var(--svc-hero-gutter)
      max(1.15rem, env(safe-area-inset-bottom));
  }

  [data-page="service-udrzba"] .svc-hero h1 {
    max-width: 22rem;
    font-size: clamp(2.35rem, 11.5vw, 2.75rem);
  }

  [data-page="service-udrzba"] .svc-hero__meta {
    margin-top: 1.05rem;
  }

  [data-page="service-udrzba"] .svc-hero__meta li,
  [data-page="service-udrzba"] .svc-hero__meta li:first-child {
    min-height: 4.15rem;
    padding: 0.55rem 0.2rem;
    font-size: var(--type-micro);
    line-height: 1.3;
  }

  [data-page="service-udrzba"] .svc-hero__meta li:first-child {
    border-left: 0;
  }

  [data-page="service-udrzba"] .svc-hero__cta {
    margin-top: 1.1rem;
  }
}

/* ============================================================
   OBLASŤ PÔSOBENIA — CELOPLOŠNÉ MOBILNÉ HERO
   ------------------------------------------------------------
   Zvislý master už obsahuje panorámu aj hotový prechod do krémovej
   plochy. Na telefóne preto vypíname starý dodatočný závoj a nechávame
   obrázok vyplniť celú prvú obrazovku pod fixnou hlavičkou. Minimálnych
   43 rem zachová kompozíciu návrhu aj na nízkych displejoch, kde ďalší
   obsah prirodzene pokračuje pod ohybom.
   ============================================================ */
@media (max-width: 900px) {
  html[data-page="area"] .area-hero {
    min-height: max(43rem, calc(100svh - var(--header-h)));
    overflow: hidden;
  }

  html[data-page="area"] .area-hero .svc-hero__figure::after {
    display: none;
  }
}

/* ============================================================
   T152 — JEDNA CELOOBRAZOVKOVÁ MOBILNÁ HLAVIČKA PRE PÄŤ STRÁNOK
   ------------------------------------------------------------
   Vrstvy T140 – T149 nechali každú z piatich podstránok pri inom
   recepte a na telefóne to bolo vidieť na prvý pohľad. Namerané pred
   touto úlohou (`.imgopt/qa-t152/hero-fit.mjs`, sedem telefónov):

     stránka   výška hlavičky / obrazovka   tlačidlo        nad ohybom
     návrh     0,97 – 1,35×                 139 × 46 px     3 zo 7
     závlahy   1,08 – 1,62×                 312 – 416 × 56  0 zo 7
     výsadba   1,00×                        312 – 416 × 52  7 zo 7
     údržba    1,00×                        312 – 416 × 52  7 zo 7
     oblasť    1,00 – 1,22×                 178 × 48 px     5 zo 7

   Teda tri rôzne šírky tlačidla, štyri rôzne výšky, dve stránky
   s hlavičkou vyššou než obrazovka a na nízkych telefónoch tlačidlo
   pod ohybom. Návštevník to nečíta ako päť kompozícií, ale ako web,
   ktorý sa nevie rozhodnúť.

   Táto vrstva je posledná v súbore, takže prepisuje všetky vyššie.
   Drží tri veci:

   (1) HLAVIČKA = PRESNE JEDNA OBRAZOVKA. `min-height: calc(100svh -
       var(--header-h))` na všetkých piatich. `svh` (nie `vh`) preto,
       že na mobilnom Chrome sa adresný riadok schováva — s `vh` by
       hlavička v pokoji pretekala o výšku toho pruhu. `min-height`,
       nie `height`: keď sa text na nízkom telefóne nezmestí, hlavička
       radšej narastie, než by mala text orezať.

   (2) ZÁVOJ JE VIAZANÝ NA TEXT, NIE NA RÁM. Do T152 ho niesla
       fotografia (`.svc-hero__figure::after`) alebo si ho master
       priniesol sám. Oboje je závislé na pomere rámu: pri 360 × 640
       ukázal `cover` z mastera údržby toľko výšky, že prechod do
       krémovej padol až pod nadpis a nadpis sa čítal na živom plote
       (viď `before-udrzba-360x640.png`). Závoj je preto teraz horný
       podklad `.svc-hero__copy` s pevnou výškou `--svc-hero-veil`:
       pásmo prechodu leží presne v hornom paddingu kópie, takže text
       začína tam, kde je závoj plný — na každom telefóne rovnako,
       bez ohľadu na orez.

       Farba závoja je **spodný pixel konkrétneho mastera**, nie
       `--sand`. Všetkých päť zvislých hlavičkových fotografií sa dole
       stráca do vlastnej krémovej a tie sa navzájom líšia o 12 bodov
       (#e7dbc0 závlahy proti #f3eadb oblasti). Spoločná farba by na
       každej stránke vyrobila viditeľný šev. Pri výmene mastera
       prevzorkuj spodný riadok a hodnotu prepíš.

   (3) TLAČIDLO JE NA VŠETKÝCH PIATICH JEDNO. Šírka `min(100%, 20rem)`,
       výška 3,25 rem, vždy v osi. Zastropovanie na 20 rem je zámer:
       bez neho sa tlačidlo na 390 px displeji roztiahne od okraja
       k okraju a prestane vyzerať ako tlačidlo — stane sa z neho pás.
   ============================================================ */
@media (max-width: 900px) {
  /* Spodná krémová každého mastera. Zložky RGB zvlášť, aby sa dal
     závoj miešať cez `rgb(… / alfa)` bez piatich kópií gradientu. */
  [data-page="service-navrh-zahrady"] { --svc-hero-cream: 235 226 206; }
  [data-page="service-zavlahy"]       { --svc-hero-cream: 231 219 192; }
  [data-page="service-vysadba"]       { --svc-hero-cream: 239 230 214; }
  [data-page="service-udrzba"]        { --svc-hero-cream: 239 230 202; }
  html[data-page="area"]              { --svc-hero-cream: 243 234 219; }

  :is(
    [data-page="service-navrh-zahrady"],
    [data-page="service-zavlahy"],
    [data-page="service-vysadba"],
    [data-page="service-udrzba"],
    html[data-page="area"]
  ) {
    /* Výška rozplynutia fotografie do krémovej nad prvým riadkom. */
    --svc-hero-veil: 8rem;
  }

  /* --- (1) rám: presne jedna obrazovka pod fixnou hlavičkou --- */
  [data-page="service-navrh-zahrady"] .svc-hero,
  [data-page="service-zavlahy"] .svc-hero,
  [data-page="service-vysadba"] .svc-hero,
  [data-page="service-udrzba"] .svc-hero,
  html[data-page="area"] .area-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* `align-content: end` posadí text na spodok obrazovky a nechá
       fotografii celý zvyšok. Bez neho by na vysokom telefóne ostal
       text hore a pod ním by zívala prázdna krémová plocha. */
    align-content: end;
    align-items: end;
    min-height: calc(100svh - var(--header-h));
    height: auto;
    overflow: clip;
    background: rgb(var(--svc-hero-cream));
    border-bottom: 0;
  }

  /* --- fotografia: celá plocha, kotvená hore ---------------------
     Všetkých päť zvislých masterov má výjav v hornej časti a dole sa
     stráca do krémovej. `50% 0%` teda drží výjav a orezáva len tú
     prázdnu plochu — na žiadnom z piatich nie je čo posúvať. */
  [data-page="service-navrh-zahrady"] .svc-hero__figure,
  [data-page="service-zavlahy"] .svc-hero__figure,
  [data-page="service-vysadba"] .svc-hero__figure,
  [data-page="service-udrzba"] .svc-hero__figure,
  html[data-page="area"] .area-hero .svc-hero__figure {
    position: absolute;
    inset: 0;
    z-index: 0;
    order: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    aspect-ratio: auto;
    background: rgb(var(--svc-hero-cream));
  }

  [data-page="service-navrh-zahrady"] .svc-hero__figure picture,
  [data-page="service-zavlahy"] .svc-hero__figure picture,
  [data-page="service-vysadba"] .svc-hero__figure picture,
  [data-page="service-udrzba"] .svc-hero__figure picture,
  html[data-page="area"] .area-hero .svc-hero__figure picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__figure img,
  [data-page="service-zavlahy"] .svc-hero__figure img,
  [data-page="service-vysadba"] .svc-hero__figure img,
  [data-page="service-udrzba"] .svc-hero__figure img,
  html[data-page="area"] .area-hero .svc-hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
  }

  /* Starý závoj na fotografii je zbytočný — nahradil ho závoj kópie,
     ktorý nie je závislý na oreze. Dva naraz by plochu prekrémovali. */
  [data-page="service-navrh-zahrady"] .svc-hero__figure::after,
  [data-page="service-zavlahy"] .svc-hero__figure::after,
  [data-page="service-vysadba"] .svc-hero__figure::after,
  [data-page="service-udrzba"] .svc-hero__figure::after,
  html[data-page="area"] .area-hero .svc-hero__figure::after {
    display: none;
  }

  /* --- (2) text na plnej krémovej, závoj NAD ním ----------------
     Prechodové pásmo je `::before` zavesené nad horný okraj kópie
     (`bottom: 100%`), nie jej horný padding. Rozdiel je podstatný:
     padding by si pásmo odkrojil z výšky textového bloku, takže čím
     dlhší závoj, tým menej ostane fotografii. Takto pásmo leží *na*
     fotografii, kópia ostáva kompaktná a plne krémová a rozplynutie
     sa dá natiahnuť na 8 rem bez toho, aby fotografia stratila
     čo i len pixel. Prvý pokus mal závoj v paddingu a pri 390 px
     ostal Výsadbe pruh 27 % výšky s tvrdou hranou. */
  [data-page="service-navrh-zahrady"] .svc-hero__copy,
  [data-page="service-zavlahy"] .svc-hero__copy,
  [data-page="service-vysadba"] .svc-hero__copy,
  [data-page="service-udrzba"] .svc-hero__copy,
  html[data-page="area"] .area-hero .svc-hero__copy {
    position: relative;
    z-index: 1;
    order: 1;
    grid-column: 1 / -1;
    align-self: end;
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding: 1.9rem var(--svc-hero-gutter)
      max(2.1rem, calc(env(safe-area-inset-bottom) + 1.35rem));
    text-align: center;
    background: rgb(var(--svc-hero-cream));
  }

  [data-page="service-navrh-zahrady"] .svc-hero__copy::before,
  [data-page="service-zavlahy"] .svc-hero__copy::before,
  [data-page="service-vysadba"] .svc-hero__copy::before,
  [data-page="service-udrzba"] .svc-hero__copy::before,
  html[data-page="area"] .area-hero .svc-hero__copy::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: var(--svc-hero-veil);
    pointer-events: none;
    background: linear-gradient(to top,
      rgb(var(--svc-hero-cream) / 1) 0%,
      rgb(var(--svc-hero-cream) / 0.94) 16%,
      rgb(var(--svc-hero-cream) / 0.72) 40%,
      rgb(var(--svc-hero-cream) / 0.38) 66%,
      rgb(var(--svc-hero-cream) / 0.12) 85%,
      rgb(var(--svc-hero-cream) / 0) 100%);
  }

  /* Typografia je spoločná už z T147; tu sa dorovnávajú len odstupy,
     aby päť rôznych zostáv (návrh nemá prínosy, ostatné áno) skončilo
     v rovnakom rytme. */
  [data-page="service-navrh-zahrady"] .svc-hero h1,
  [data-page="service-zavlahy"] .svc-hero h1,
  [data-page="service-vysadba"] .svc-hero h1,
  [data-page="service-udrzba"] .svc-hero h1,
  html[data-page="area"] .area-hero h1 {
    max-width: 22rem;
    margin: 1rem auto 0;
    font-size: var(--type-display);
    line-height: 0.96;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__intro,
  [data-page="service-zavlahy"] .svc-hero__intro,
  [data-page="service-vysadba"] .svc-hero__intro,
  [data-page="service-udrzba"] .svc-hero__intro,
  html[data-page="area"] .area-hero .svc-hero__intro {
    max-width: 20.5rem;
    margin: 1rem auto 0;
    color: var(--ink-soft);
    font-size: var(--type-supporting);
    line-height: 1.55;
  }

  /* --- prínosy: jeden trojstĺpcový pás na všetkých troch stránkach.
     Závlahy mali do T152 tri pilulky pod sebou. Zabrali 210 px, teda
     presne toľko, o koľko im hlavička pretekala pod ohyb, a proti
     pásu Výsadby a Údržby to bola tretia rôzna zostava. */
  [data-page="service-zavlahy"] .svc-hero__meta,
  [data-page="service-vysadba"] .svc-hero__meta,
  [data-page="service-udrzba"] .svc-hero__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: min(100%, 26rem);
    margin: 1.15rem auto 0;
    padding: 0;
    border: 0;
    border-block: 1px solid rgb(104 85 38 / 0.24);
    list-style: none;
  }

  [data-page="service-zavlahy"] .svc-hero__meta li,
  [data-page="service-zavlahy"] .svc-hero__meta li:first-child,
  [data-page="service-vysadba"] .svc-hero__meta li,
  [data-page="service-vysadba"] .svc-hero__meta li:first-child,
  [data-page="service-udrzba"] .svc-hero__meta li,
  [data-page="service-udrzba"] .svc-hero__meta li:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: center;
    gap: 0.38rem;
    min-height: 4.35rem;
    padding: 0.65rem 0.3rem;
    border: 0;
    border-left: 1px solid rgb(104 85 38 / 0.24);
    border-radius: 0;
    color: var(--ink-soft);
    background: transparent;
    font-size: var(--type-micro);
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
  }

  [data-page="service-zavlahy"] .svc-hero__meta li:first-child,
  [data-page="service-vysadba"] .svc-hero__meta li:first-child,
  [data-page="service-udrzba"] .svc-hero__meta li:first-child {
    border-left: 0;
  }

  [data-page="service-zavlahy"] .svc-hero__meta-icon,
  [data-page="service-vysadba"] .svc-hero__meta-icon,
  [data-page="service-udrzba"] .svc-hero__meta-icon {
    width: 1.2rem;
    height: 1.2rem;
  }

  /* --- (3) jedno tlačidlo pre všetkých päť ----------------------- */
  [data-page="service-navrh-zahrady"] .svc-hero__cta,
  [data-page="service-zavlahy"] .svc-hero__cta,
  [data-page="service-vysadba"] .svc-hero__cta,
  [data-page="service-udrzba"] .svc-hero__cta,
  html[data-page="area"] .area-hero__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 20rem);
    min-height: 3.25rem;
    margin: 1.35rem auto 0;
    padding: 0.85rem 1.25rem;
    font-size: var(--type-label);
    letter-spacing: var(--track-caps-md);
  }
}

/* --- T152 — vzhľad tlačidla je spoločný pre všetky šírky -----------
   Rozmery sa líšia (na telefóne pevná šírka, na desktope pilulka podľa
   dĺžky textu), farba a hmotnosť nie. Oblasť pôsobenia mala do T152
   `--green-soft` a o 4 px vyšší rám než štyri stránky služieb — vedľa
   seba to vyzeralo ako dva rôzne komponenty.

   `:is()` berie špecifickosť najsilnejšieho argumentu, takže obe
   pravidlá sú (0,2,0) a (0,3,0) — hover teda spoľahlivo vyhráva nad
   základným stavom aj napriek tomu, že stojí v súbore nižšie. */
html:is([data-page^="service-"], [data-page="area"]) .svc-hero__cta {
  color: var(--gold);
  background: var(--green-deep);
  border-color: var(--green-deep);
  /* Tlačidlo je jediný tmavý prvok na krémovej prvej obrazovke —
     mäkký tieň mu dá hmotnosť, aby sa nečítalo ako nadpis v rámčeku. */
  box-shadow: 0 16px 32px -22px rgb(14 26 18 / 0.8);
}

html:is([data-page^="service-"], [data-page="area"]) .svc-hero__cta:hover,
html:is([data-page^="service-"], [data-page="area"]) .svc-hero__cta:focus-visible {
  color: var(--green-deep);
  background: var(--gold);
  border-color: var(--gold);
}

@media (min-width: 901px) {
  html:is([data-page^="service-"], [data-page="area"]) .svc-hero__cta {
    min-height: 3.25rem;
    margin-top: 2.25rem;
    padding-inline: 1.9rem;
  }

  /* Stabilná poloha hero CTA tlačidla naprieč SK, EN aj HU:
     perex a prínosy dostávajú jednotnú minimálnu výšku, aby pri
     rôznych dĺžkach cudzojazyčného textu tlačidlo neskákalo hore-dolu. */
  [data-page="service-navrh-zahrady"] .svc-hero__intro {
    min-height: 10.5rem;
  }

  html:is([lang="en"], [lang="hu"])[data-page="service-navrh-zahrady"] .svc-hero__intro {
    min-height: 11.2rem;
  }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__intro {
    min-height: 8.25rem;
  }

  :is([data-page="service-zavlahy"], [data-page="service-vysadba"], [data-page="service-udrzba"]) .svc-hero__meta {
    min-height: 2.25rem;
  }

  html[data-page="area"] .area-hero .svc-hero__intro {
    min-height: 11.5rem;
  }
}

/* Nízky telefón (iPhone SE, staršie Androidy) a landscape: obrazovka
   pod hlavičkou má sotva 560 px a plná zostava textu by z fotografie
   nechala pruh. Text sa preto stiahne — nie preto, aby sa zmestil,
   ale aby fotografii ostala aspoň tretina prvej obrazovky. */
@media (max-width: 900px) and (max-height: 740px) {
  :is(
    [data-page="service-navrh-zahrady"],
    [data-page="service-zavlahy"],
    [data-page="service-vysadba"],
    [data-page="service-udrzba"],
    html[data-page="area"]
  ) {
    --svc-hero-veil: 6rem;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__copy,
  [data-page="service-zavlahy"] .svc-hero__copy,
  [data-page="service-vysadba"] .svc-hero__copy,
  [data-page="service-udrzba"] .svc-hero__copy,
  html[data-page="area"] .area-hero .svc-hero__copy {
    padding-top: 1.4rem;
    padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
  }

  [data-page="service-navrh-zahrady"] .svc-hero h1,
  [data-page="service-zavlahy"] .svc-hero h1,
  [data-page="service-vysadba"] .svc-hero h1,
  [data-page="service-udrzba"] .svc-hero h1,
  html[data-page="area"] .area-hero h1 {
    margin-top: 0.75rem;
    font-size: clamp(2.15rem, 9.5vw, 2.6rem);
  }

  [data-page="service-navrh-zahrady"] .svc-hero__intro,
  [data-page="service-zavlahy"] .svc-hero__intro,
  [data-page="service-vysadba"] .svc-hero__intro,
  [data-page="service-udrzba"] .svc-hero__intro,
  html[data-page="area"] .area-hero .svc-hero__intro {
    max-width: 19.5rem;
    margin-top: 0.75rem;
    font-size: var(--type-caption);
    line-height: 1.5;
  }

  [data-page="service-zavlahy"] .svc-hero__meta,
  [data-page="service-vysadba"] .svc-hero__meta,
  [data-page="service-udrzba"] .svc-hero__meta {
    margin-top: 0.85rem;
  }

  [data-page="service-zavlahy"] .svc-hero__meta li,
  [data-page="service-zavlahy"] .svc-hero__meta li:first-child,
  [data-page="service-vysadba"] .svc-hero__meta li,
  [data-page="service-vysadba"] .svc-hero__meta li:first-child,
  [data-page="service-udrzba"] .svc-hero__meta li,
  [data-page="service-udrzba"] .svc-hero__meta li:first-child {
    min-height: 3.85rem;
    padding: 0.5rem 0.25rem;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__cta,
  [data-page="service-zavlahy"] .svc-hero__cta,
  [data-page="service-vysadba"] .svc-hero__cta,
  [data-page="service-udrzba"] .svc-hero__cta,
  html[data-page="area"] .area-hero__cta {
    margin-top: 1rem;
  }
}

/* ============================================================
   S29 — PÁSMO LOKALÍT NA ŠTYROCH STRÁNKACH SLUŽIEB
   ------------------------------------------------------------
   Konkurencia, ktorá vyhráva dopyty tvaru „<služba> <mesto>",
   nemá lepší text — má na stránke miesto, kde to mesto vôbec
   stojí. Do S29 sme mestá spomínali iba v odpovedi FAQ a v
   `areaServed`, teda nikde, kde by ich Google čítal ako tému.

   Rozloženie je zámerne to isté ako `.svc-faq` a `.svc-prep`
   (21rem nadpis + zvyšok obsah), aby tri po sebe idúce pásma
   držali jeden rytmus. Podklad určuje pásmo, v ktorom sedí.

   `<h3>` na obec, nie `<dt>`: dvojica dt/dd je odpoveď na
   otázku a Google ju tak aj číta. Tu je to podnadpis oblasti,
   takže mu zodpovedá nadpisová úroveň — o to v celom pásme ide.

   Pozor: text každej obce musí byť vecne iný. Štyri odseky
   s vymeneným názvom mesta sú presne ten vzor, ktorý S28c
   odstraňovalo z perexov — len o úroveň nižšie.
   ============================================================ */
.svc-local {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

.svc-local__head p {
  max-width: 24rem;
  font-size: var(--type-supporting);
  line-height: var(--lead-body);
}

.svc-local__list {
  display: grid;
  gap: 0;
  margin: 0;
  list-style: none;
}

.svc-local__item {
  padding-block: clamp(1.25rem, 2vw, 1.6rem);
  border-top: 1px solid var(--line);
}

.svc-local__item:first-child { border-top: 0; padding-top: 0; }
.svc-local__item:last-child { padding-bottom: 0; }

.svc-local__item h3 {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--type-lead);
  font-weight: 400;
  line-height: var(--lead-snug);
  letter-spacing: var(--track-serif);
  text-wrap: balance;
}

.svc-local__item p {
  max-width: 46rem;
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: var(--type-supporting);
  line-height: var(--lead-body);
  text-wrap: pretty;
}

/* Lokality a FAQ sedia v jednom pieskovom pásme, nie v dvoch za sebou:
   dve pásma by medzi seba dali dvojnásobok --svc-band-y a rytmus stránky
   by sa na konci roztiahol. Vlasová linka ich oddelí presne tak, ako
   oddeľuje jednotlivé otázky vnútri FAQ. */
.svc-local + .svc-faq {
  margin-top: clamp(3.25rem, 6vw, 5.5rem);
  padding-top: clamp(3.25rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line);
}

@media (max-width: 1024px) {
  .svc-local { grid-template-columns: 1fr; gap: 2.25rem; }
  .svc-local__head p { max-width: 46rem; }
}

/* ============================================================
   T157 — DESKTOPOVÁ HLAVIČKA V RYTME DOMOVSKEJ STRÁNKY
   ============================================================
   T147 zjednotilo hlavičku piatich podstránok pod 901 px. Nad ňou
   ostávalo päť rôznych kompozícií: každá stránka si niesla vlastnú
   mriežku, vlastný padding aj vlastné stupne. Namerané pred úlohou
   (`.imgopt/qa-hero-desktop/hero.mjs`; poradie návrh / závlahy /
   výsadba / údržba / oblasť):

     ľavý okraj textu  1440 px   90 / 90 / 90 / 64 / 64
                       1920 px   120 / 120 / 120 / 304 / 304
     nadlinka -> h1              21,6 / 19,2 / 19,2 / 13,6 / 17,5
     h1 -> perex                 24,8 / 23,1 / 23,1 / 20,0 / 26,4
     riadkovanie h1              1,00 / 1,00 / 1,00 / 1,06 / 0,98
     perex                       16 px všade okrem Údržby (18 px)
     zvislý padding    1440 px   56,7 / 48,6 / 56,7 / 72,0 / 64,8
     podlaha výšky               36 / 36 / 33 / 26 / 42 rem

   Rozdiel 184 px v ľavom okraji pri 1920 px má jednu príčinu: tri
   stránky merajú okraj hlavičky od okna (`6,25vw`, teda os hera
   domovskej stránky), kým Údržba a Oblasť ho merajú od 82rem rámca
   obsahových pásiem (`--svc-edge`). Nad 1400 px sa tie dve miery
   rozchádzajú tým rýchlejšie, čím je okno širšie.

   Predlohou je hero domovskej stránky po T104 — a jedna stránka ho
   už doslova reprodukovala: **Návrh záhrady**. Jeho hodnoty sú
   hodnotami `.hero--frames` jedna k jednej (ľavý okraj
   `--desktop-gutter`, pravý `clamp(1.75rem, 2.8vw, 2.5rem)`,
   nadlinka 31rem/1,45/400, nadpis 32rem/1, perex 29rem/1,55rem).
   Vrstva teda nič nevymýšľa — rozšíri Návrh na ostatné štyri.

   Tri veci, na ktoré si dať pozor pri ďalšej práci:

   · **Vrstva stojí pred T153a, nie na konci súboru.** T153a
     (telefón naležato) prepisuje v pásme 901–1024 px presne tie
     isté vlastnosti a musí vyhrať. Za T157 sú už len vrstvy,
     ktoré sa hlavičky dotýkajú cez `.svc-hero__figure::after`,
     teda disjunktne.
   · **Textový stĺpec je 39rem, ale text v ňom 29–32rem.** Je to
     recept domovskej stránky: stĺpec je nádoba, rytmus nesú
     `max-width`. Širší stĺpec potrebujú iba prínosy
     (`.svc-hero__meta`), ktoré `max-width` nemajú a v 34rem
     stĺpci Údržby sa lámali skôr než inde.
   · **Zoznamy selektorov vymenúvajú každú vrstvu, ktorá si
     vyššie nastavovala vlastnú hodnotu** — vrátane `html[data-page
     ="area"] .area-hero …`, ktorá je (0,3,1). Pridávaš ďalšiu
     stránku? Dopíš ju do všetkých piatich zoznamov naraz.
   · **Blok nie je centrovaný, hoci tak vyzerá.** Viď nižšie —
     centrovanie je práve to, čo rovnaké `y` znemožňuje.
   ============================================================ */

/* Ľavý okraj hlavičky = ľavý okraj hera domovskej stránky. Do 1101 px
   je to `.hero__content { left: clamp(1.5rem, 5vw, 5.5rem) }`, nad ňou
   `--desktop-gutter` z T104. Token sa musí zopakovať tu — podstránky
   `css/style.css` nelinkujú (rovnako ako `--eyebrow-*` v T147).
   Pri zmene v `style.css` meň aj tu.

   `--shell-air` v súčte je ultrawide poistka z T153: pod 1920 px je
   nula, takže sa tam nezmení ani pixel, a nad ňou odsunie hlavičku
   o presne ten vzduch, o ktorý sa odsunie hero domovskej stránky
   (pri 3840 px 576 + 168 = 744 px na oboch). Bez neho by text
   hlavičky ostal 168 px od hrany 4K okna, kým pásma pod ním začínajú
   pri ~1000 px. */
:root {
  --svc-hero-edge: calc(var(--shell-air) + clamp(1.5rem, 5vw, 5.5rem));

  /* Výška hlavičky a jej zvislý padding ako tokeny — počíta sa z nich
     odsadenie textu nižšie, takže musia byť na jednom mieste. */
  --svc-hero-h: max(36rem, calc(100svh - var(--header-h)));
  --svc-hero-pad: clamp(3rem, 7vh, 5rem);

  /* Menovitá výška textového bloku (bez paddingu). Nie je to meranie
     ani strop — je to jediné číslo, ktorým sa ladí, ako vysoko blok
     v hlavičke sedí. Skutočný blok meria 385–405 px, takže 24rem
     (384 px) reprodukuje doterajšie optické centrovanie na pixel
     presne pri 1440 px a s odchýlkou ~10 px pri 1920 px. */
  --svc-hero-band: 24rem;
}

@media (min-width: 1101px) {
  :root { --svc-hero-edge: calc(var(--shell-air) + clamp(5rem, 6.25vw, 7.5rem)); }
}

@media (min-width: 901px) {
  .svc-hero,
  [data-page="service-navrh-zahrady"] .svc-hero,
  [data-page="service-zavlahy"] .svc-hero,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero,
  html[data-page="area"] .area-hero {
    grid-template-columns:
      var(--svc-hero-edge)
      [copy-start] minmax(0, 39rem) [copy-end]
      minmax(0, 1fr);
    /* `start`, nie `center` — viď padding kópie nižšie. */
    align-items: start;
    /* Jedna podlaha namiesto piatich. Pôvodných 26–42 rem nedržalo
       nič vecné — obsah je na všetkých piatich stránkach ten istý
       (nadlinka, h1, perex, prípadne prínosy, tlačidlo) a najvyššia
       zostava sa do 36rem zmestí aj v maďarčine. `max()` s podlahou,
       nie `clamp()` so stropom — viď T154. */
    min-height: var(--svc-hero-h);
  }

  /* Zvislé odsadenie je **vypočítané centrovanie**, nie `align-items:
     center`. Rozdiel je celý zmysel tejto vrstvy:

     Pri centrovaní je vrch bloku `(výška hera − výška bloku) / 2`,
     teda závisí od toho, koľko obsahu stránka má. Návrh nemá prínosy
     a jeho perex je o riadok kratší, takže mu nadlinka po zjednotení
     mriežky a stupňov stále začínala o 13 px nižšie než Oblasti —
     pri rovnakej šírke okna a rovnakom `x`. Päť stránok sa tak
     rozchádzalo v jedinom čísle, ktoré sa centrovaním zosúladiť nedá.

     Tu sa polovica prázdneho miesta počíta z **menovitej** výšky
     bloku, ktorá je pre všetkých päť rovnaká, takže `y` vychádza
     zhodne bez ohľadu na obsah aj jazyk. Vyšší blok (maďarčina,
     dlhší perex) sa jednoducho predĺži nadol; hlavička má `min-height`,
     nie `height`, takže mu miesto dá. `max()` so spodným paddingom
     drží text pri okraji na veľmi nízkom okne. */
  .svc-hero__copy,
  [data-page="service-navrh-zahrady"] .svc-hero__copy,
  [data-page="service-zavlahy"] .svc-hero__copy,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__copy,
  html[data-page="area"] .area-hero .svc-hero__copy {
    padding: max(var(--svc-hero-pad),
                 calc((var(--svc-hero-h) - var(--svc-hero-band)) / 2))
             clamp(1.75rem, 2.8vw, 2.5rem)
             var(--svc-hero-pad) 0;
  }

  .svc-hero__kicker,
  [data-page="service-navrh-zahrady"] .svc-hero__kicker,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__kicker,
  html[data-page="area"] .area-hero .svc-hero__kicker {
    gap: 0.85rem;
    max-width: 31rem;
    font-size: var(--type-label);
    /* 400, nie 500: nadlinka domovskej stránky je v tejto veľkosti
       ľahká a 500 vedľa nej pôsobí ako iný rez. */
    font-weight: 400;
    letter-spacing: var(--track-caps-xs);
    line-height: 1.45;
  }

  .svc-hero h1,
  [data-page="service-navrh-zahrady"] .svc-hero h1,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero h1,
  html[data-page="area"] .area-hero h1 {
    max-width: 32rem;
    /* Odstup nesie nadpis (`margin-top`), nie nadlinka
       (`margin-bottom`) — inak by sa hodnota rozdvojila. */
    margin-top: 1.35rem;
    font-size: var(--type-display);
    line-height: 1;
  }

  [data-page="service-zavlahy"] .svc-hero h1 {
    max-width: 38rem;
    white-space: nowrap;
  }

  .svc-hero__intro,
  [data-page="service-navrh-zahrady"] .svc-hero__intro,
  :is([data-page="service-zavlahy"], [data-page="service-vysadba"]) .svc-hero__intro,
  html[data-page="area"] .area-hero .svc-hero__intro {
    max-width: 29rem;
    margin-top: 1.55rem;
    color: rgba(14, 26, 18, 0.78);
    /* Údržba tu jediná stála na základnom `--type-card-title`, teda
       o 2 px vyššie než ostatné štyri stránky aj než domovská. */
    font-size: var(--type-body);
    line-height: var(--lead-body);
  }
}


/* ============================================================
   T153a — TELEFÓN NALEŽATO: hlavička sa zmestí na obrazovku
   ============================================================
   T152 postavilo hlavičku piatich podstránok na `min-height:
   calc(100svh - var(--header-h))` a merala sa iba nastojato.
   Naležato je pod hlavičkou 283–337 px, kým samotný text bloku má
   350–450 px, takže `min-height` prerástol obrazovku a tlačidlo
   spadlo pod ohyb. Namerané pred úlohou (`.imgopt/qa-t152/hero-fit.mjs`,
   `QA_VP=844x390,896x414,932x430,740x360`):

     výška / obrazovka     1,00 – 2,01x
     tlačidlo nad ohybom   2 z 20

   Naležato je úzkym hrdlom výška, nie šírka — a šírky je naopak dosť.
   Blok si preto berie horizontálny priestor (nadpis a perex majú širší
   strop, takže sa zalomia na menej riadkov), stupne idú o triedu nižšie
   a zvislé medzery aj závoj sa stiahnu. Kompozícia ostáva tá istá:
   fotografia na celej ploche, text v osi na krémovej.

   Pásmo je `(max-width: 1024px) and (max-height: 520px) and
   (orientation: landscape)` — teda konvencia z css/style.css, nie
   `max-width: 900px` z T152. Dôvod je nespojitosť: pri 932 × 430
   (iPhone 15 Pro Max naležato) sa vrstva T152 už nechytí a stránka
   spadne na desktopové rozdelenie s hlavičkou dvakrát vyššou než okno.
   Jednostĺpcový tvar sa preto pre 901–1024 px zopakuje aj tu; pod
   901 px sú tie isté hodnoty už z T152 a nič sa nimi nemení.
   ============================================================ */
@media (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
  :is(
    [data-page="service-navrh-zahrady"],
    [data-page="service-zavlahy"],
    [data-page="service-vysadba"],
    [data-page="service-udrzba"],
    html[data-page="area"]
  ) {
    /* Krátky závoj: pri 313 px vysokej hlavičke by 8 rem z T152 zabralo
       41 % plochy a z fotografie by ostal pruh. */
    --svc-hero-veil: 2rem;
  }

  /* Rám: obrazovku už nevynucuje, ale ani ju neprerastá. Fotografia
     ostáva na celej ploche a text na nej — len sa oboje zmestí. */
  [data-page="service-navrh-zahrady"] .svc-hero,
  [data-page="service-zavlahy"] .svc-hero,
  [data-page="service-vysadba"] .svc-hero,
  [data-page="service-udrzba"] .svc-hero,
  html[data-page="area"] .area-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    align-items: end;
    min-height: calc(100svh - var(--header-h));
    height: auto;
    overflow: clip;
    border-bottom: 0;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__figure,
  [data-page="service-zavlahy"] .svc-hero__figure,
  [data-page="service-vysadba"] .svc-hero__figure,
  [data-page="service-udrzba"] .svc-hero__figure,
  html[data-page="area"] .area-hero .svc-hero__figure {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    aspect-ratio: auto;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__figure picture,
  [data-page="service-zavlahy"] .svc-hero__figure picture,
  [data-page="service-vysadba"] .svc-hero__figure picture,
  [data-page="service-udrzba"] .svc-hero__figure picture,
  html[data-page="area"] .area-hero .svc-hero__figure picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* `30 %` namiesto `0 %` z T152: naležato je rám široký a nízky, takže
     `cover` orezáva zvisle — pri kotve hore by z výjavu ostalo nebo. */
  [data-page="service-navrh-zahrady"] .svc-hero__figure img,
  [data-page="service-zavlahy"] .svc-hero__figure img,
  [data-page="service-vysadba"] .svc-hero__figure img,
  [data-page="service-udrzba"] .svc-hero__figure img,
  html[data-page="area"] .area-hero .svc-hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__figure::after,
  [data-page="service-zavlahy"] .svc-hero__figure::after,
  [data-page="service-vysadba"] .svc-hero__figure::after,
  [data-page="service-udrzba"] .svc-hero__figure::after,
  html[data-page="area"] .area-hero .svc-hero__figure::after {
    display: none;
  }

  /* Kópia: rovnaký tvar ako nastojato, len stiahnutý. Šírka bloku je tu
     34 rem namiesto 22 rem — naležato je jej dosť a každý ušetrený
     riadok je 20 px výšky, ktorú si vezme fotografia. */
  [data-page="service-navrh-zahrady"] .svc-hero__copy,
  [data-page="service-zavlahy"] .svc-hero__copy,
  [data-page="service-vysadba"] .svc-hero__copy,
  [data-page="service-udrzba"] .svc-hero__copy,
  html[data-page="area"] .area-hero .svc-hero__copy {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    align-self: end;
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding: 1rem var(--svc-hero-gutter)
      max(0.9rem, calc(env(safe-area-inset-bottom) + 0.6rem));
    text-align: center;
    background: rgb(var(--svc-hero-cream, 237 232 208));
  }

  [data-page="service-navrh-zahrady"] .svc-hero__copy::before,
  [data-page="service-zavlahy"] .svc-hero__copy::before,
  [data-page="service-vysadba"] .svc-hero__copy::before,
  [data-page="service-udrzba"] .svc-hero__copy::before,
  html[data-page="area"] .area-hero .svc-hero__copy::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: var(--svc-hero-veil);
    pointer-events: none;
    background: linear-gradient(to top,
      rgb(var(--svc-hero-cream, 237 232 208) / 1) 0%,
      rgb(var(--svc-hero-cream, 237 232 208) / 0.9) 22%,
      rgb(var(--svc-hero-cream, 237 232 208) / 0.55) 55%,
      rgb(var(--svc-hero-cream, 237 232 208) / 0) 100%);
  }

  [data-page="service-navrh-zahrady"] .svc-hero__kicker,
  [data-page="service-zavlahy"] .svc-hero__kicker,
  [data-page="service-vysadba"] .svc-hero__kicker,
  [data-page="service-udrzba"] .svc-hero__kicker,
  html[data-page="area"] .area-hero .svc-hero__kicker {
    justify-content: center;
    font-size: var(--type-micro);
  }

  [data-page="service-navrh-zahrady"] .svc-hero h1,
  [data-page="service-zavlahy"] .svc-hero h1,
  [data-page="service-vysadba"] .svc-hero h1,
  [data-page="service-udrzba"] .svc-hero h1,
  html[data-page="area"] .area-hero h1 {
    max-width: 34rem;
    margin: 0.5rem auto 0;
    font-size: var(--type-title);
    line-height: 1;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__intro,
  [data-page="service-zavlahy"] .svc-hero__intro,
  [data-page="service-vysadba"] .svc-hero__intro,
  [data-page="service-udrzba"] .svc-hero__intro,
  html[data-page="area"] .area-hero .svc-hero__intro {
    max-width: 52rem;
    margin: 0.5rem auto 0;
    color: var(--ink-soft);
    font-size: var(--type-caption);
    line-height: 1.45;
  }

  /* Prínosy ostávajú trojstĺpcové, len bez zvislého vzduchu: naležato je
     pás široký, takže sa text do troch stĺpcov zmestí na dva riadky. */
  [data-page="service-zavlahy"] .svc-hero__meta,
  [data-page="service-vysadba"] .svc-hero__meta,
  [data-page="service-udrzba"] .svc-hero__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: min(100%, 34rem);
    margin: 0.5rem auto 0;
    padding: 0;
    border: 0;
    border-block: 1px solid rgb(104 85 38 / 0.24);
    list-style: none;
  }

  [data-page="service-zavlahy"] .svc-hero__meta li,
  [data-page="service-zavlahy"] .svc-hero__meta li:first-child,
  [data-page="service-vysadba"] .svc-hero__meta li,
  [data-page="service-vysadba"] .svc-hero__meta li:first-child,
  [data-page="service-udrzba"] .svc-hero__meta li,
  [data-page="service-udrzba"] .svc-hero__meta li:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: center;
    gap: 0.2rem;
    min-height: 0;
    padding: 0.28rem 0.3rem;
    border: 0;
    border-left: 1px solid rgb(104 85 38 / 0.24);
    border-radius: 0;
    color: var(--ink-soft);
    background: transparent;
    font-size: var(--type-micro);
    line-height: 1.25;
    text-align: center;
  }

  [data-page="service-zavlahy"] .svc-hero__meta li:first-child,
  [data-page="service-vysadba"] .svc-hero__meta li:first-child,
  [data-page="service-udrzba"] .svc-hero__meta li:first-child {
    border-left: 0;
  }

  [data-page="service-zavlahy"] .svc-hero__meta-icon,
  [data-page="service-vysadba"] .svc-hero__meta-icon,
  [data-page="service-udrzba"] .svc-hero__meta-icon {
    width: 0.9rem;
    height: 0.9rem;
  }

  [data-page="service-navrh-zahrady"] .svc-hero__cta,
  [data-page="service-zavlahy"] .svc-hero__cta,
  [data-page="service-vysadba"] .svc-hero__cta,
  [data-page="service-udrzba"] .svc-hero__cta,
  html[data-page="area"] .area-hero__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 20rem);
    min-height: 2.75rem;
    margin: 0.7rem auto 0;
    padding: 0.6rem 1.25rem;
    font-size: var(--type-micro);
    letter-spacing: var(--track-caps-md);
  }
}

/* ============================================================
   T153b — ULTRAWIDE: pásmo procesu sa prestane rozťahovať
   ============================================================
   Väčšina pásiem podstránok stojí na `--svc-edge` alebo
   `--svc-container`, teda krajný stĺpec im prebytok nad 82 rem
   pohltí sám. Výnimkou je pásmo procesu Návrhu, Závlah a Výsadby:
   T144/T145 mu dali `minmax(0, 50%)`, aby text držal presnú polovicu
   pásma. Percento nemá strop, takže sa polovica ťahá s oknom, kým
   text v nej ostáva zastropovaný. Namerané pred úlohou
   (`.imgopt/qa-resp/stretch.mjs`, 1920 -> 3840 px):

     .svc-feature__copy    960 -> 1920 px   (2,00x)
     .svc-points           768 -> 1728 px   (2,25x)
     .svc-point__title     273 ->  753 px   (2,76x)

   Riešenie je to isté ako na domovskej stránke: nad `--shell-max`
   dostane mriežka prvý stĺpec, ktorý prebytok pohltí. Textový stĺpec
   si tak podrží presne tú polovicu, akú mal pri 1920 px, a fotografia
   naďalej preteká k pravému okraju okna — `grid-column: copy-end / -1`
   je viazaný na pomenované linky, nie na poradové číslo, takže ju
   nový stĺpec neposunie.

   Oblasť pôsobenia tu nie je: `.area-reach .svc-feature__copy` si
   ľavé odsadenie počíta z `(100vw - --svc-max) / 2`, takže sa jej
   text nad stropom centruje sám. To `100vw` je tam zámerné — `100%`
   by sa počítalo zo šírky stĺpca mriežky, nie okna, a text by spadol
   k ľavej hrane.
   ============================================================ */
@media (min-width: 120rem) {
  :is(
    [data-page="service-navrh-zahrady"],
    [data-page="service-zavlahy"],
    [data-page="service-vysadba"]
  ) .svc-feature {
    grid-template-columns:
      minmax(0, var(--shell-air))
      [copy-start] minmax(0, calc(var(--shell-max) / 2)) [copy-end]
      minmax(0, 1fr);
  }
}

/* ============================================================
   T154 — MIERKA NAD 1920 px: kompozícia sa zväčšuje, nepribúda obsah
   ============================================================
   T153 zastropovalo šírku kompozície na `--shell-max` (120rem)
   a prebytok premenilo na vzduch, ale mierka ostala tá z 1920 px.
   Na 27" a 4K monitore tak bol web ostrovčekom drobného písma
   uprostred prázdnej plochy. Zadanie z 28. 8. 2026 to ruší:
   na väčšom monitore má byť všetko proporčne väčšie — tá istá
   kompozícia, len vo väčšej mierke.

   Mierku nesie **veľkosť koreňového písma**, nie zoznam prepísaných
   stupňov. Nad 1101 px sú totiž všetky `--t-*` už na svojom `rem`
   strope (`--t-4xl: clamp(3.125rem, 3.65vw, 3.45rem)` = 3,45rem),
   rovnako ako všetky šírky, odsadenia, ikony aj polomery. Keď sa
   `rem` zväčší o k, zväčší sa presne o k všetko naraz — vrátane
   `--shell-max` — takže dĺžka riadku v znakoch ostane rovnaká
   a kompozícia je doslova tá istá, iba väčšia. Prepisovať jednotlivé
   stupne by naopak roztiahlo písmo v pevných stĺpcoch a rozbilo
   pomer typografie k odsadeniam.

     k = 1,00   pri 1920 px   (0,25rem + 0,625vw = 4 + 12 = 16 px)
     k = 1,25   pri 2560 px   (4 + 16 = 20 px)
     k = 1,40   od 2944 px    (strop 1,4rem = 22,4 px)

   Krivka je jediný `clamp()`, teda plynulá — žiadny media query,
   žiadny skok na hranici. Pod 1920 px je činná dolná hranica `1rem`,
   takže sa na telefóne, tablete ani na Full HD nezmení ani pixel.

   `rem` vo `font-size` koreňa sa podľa špecifikácie počíta z
   **počiatočnej** hodnoty, teda z používateľského nastavenia
   prehliadača — kto má predvolené písmo väčšie, o svoju veľkosť
   neprichádza.

   Dôsledok pre `--shell-max`: 120rem rastie s k, takže plocha
   kompozície je vždy 1920 „návrhových" pixelov a `--shell-air`
   pohltí iba skutočný prebytok (80 px na stranu pri 2560 px,
   576 px pri 3840 px). Hranica `@media (min-width: 120rem)` sa
   nemení — v media query je `rem` vždy počiatočná veľkosť, teda
   1920 px.

   Rovnaký blok je v `css/style.css`, `css/service-page.css`,
   `css/privacy.css` a `realizacie/album.css`; tie štyri hárky
   pokrývajú všetkých deväť stránok. **Pri zmene krivky meň všetky
   štyri naraz.**
   ============================================================ */
html {
  font-size: clamp(1rem, 0.25rem + 0.625vw, 1.4rem);
}

/* ============================================================
   T154b — hlavička na veľkej obrazovke: fotografia a závoj v mierke
   ============================================================
   Hlavička piatich podstránok je od T154 presne jedna obrazovka, teda
   na 16 : 9 monitore o tretinu až dvakrát vyššia než predtým. Dve veci
   sa tým posunuli a obe sú tu naprávané.

   (1) ZÁVLAHY — `object-fit: contain` prestal sedieť. Master je
   1916 × 821 (2,33 : 1), rám je nový 1,9 : 1, takže `contain` nechal
   nad fotografiou prázdny pieskový pruh: 177 px pri 1920 px a 403 px
   pri 3840 px. Do T154 bol rám pri 1920 px vysoký 821 px, teda presne
   pomer mastera, a pruh nevznikol — celý dôvod pre `contain` (T143:
   „bez viditeľného priblíženia") s novou výškou zanikol. `cover`
   oreže vodorovne 9 % na stranu pri 1920 px a 12 % pri 3840 px;
   rozprašovač aj kvitnúci záhon ostávajú celé a pri prechode do
   pásma procesu už nie je svetlý pás — to bola druhá vec, ktorú mal
   `contain` riešiť.

   (2) ÚDRŽBA — silnejší závoj. Jej rám vypĺňa po zvýšení celú šírku
   okna a v ľavej polovici mastera je tmavý živý plot, takže prínosy
   v hlavičke (najtenší text stránky) stáli na 0,33 krytí. Ostatné
   štyri stránky majú v ľavej polovici svetlú, rozostrenú plochu
   a vlastný závoj, takže sa ich to netýka — základné pravidlo
   `.svc-hero__figure::after` je v praxi závoj Údržby.

   Pravidlá sú v `@media (min-width: 901px)`, teda mimo mobilnej
   vrstvy T152 (tá závoj fotografie celkom vypína) aj mimo vrstvy
   pre telefón naležato. `object-position` sa tu zámerne nenastavuje —
   naležato ho vrstva T153 posúva na `50% 30%` a prepísať by sa jej
   nemal.
   ============================================================ */
@media (min-width: 901px) {
  [data-page="service-zavlahy"] .svc-hero__figure img {
    object-fit: cover;
  }

  [data-page="service-udrzba"] .svc-hero__figure::after {
    background:
      linear-gradient(to right,
        var(--sand) 0%,
        rgba(241, 235, 216, 0.96) 24%,
        rgba(241, 235, 216, 0.78) 36%,
        rgba(241, 235, 216, 0.34) 50%,
        rgba(241, 235, 216, 0) 66%),
      linear-gradient(to bottom,
        rgba(241, 235, 216, 0) 58%,
        rgba(241, 235, 216, 0.55) 82%,
        var(--sand) 100%);
  }
}

/* ============================================================
   T154c — ULTRAWIDE: závoj hlavičky sa meria kompozíciou, nie oknom
   ============================================================
   Zarážky vodorovných závojov sú percentá šírky rámu, teda pri
   celoplošnej fotografii percentá okna. Nad `--shell-max` je však
   okno v návrhových pixeloch širšie než kompozícia (pri 3840 px
   2743 proti 1920), takže sa závoj roztiahol, kým text ostal na
   svojom mieste: pri 3840 px končil fade Údržby na 2534 px namiesto
   návrhovo správnych 2054 px a text mal pod sebou o polovicu
   viditeľnejšiu fotografiu než pri 1920 px.

   Prepočet je presný a mechanický. Zarážka `N %` sa nahradí
   `calc(var(--shell-air) + (1,2 × N)rem)`:

     N % z 1920 px = N % zo 120rem = (1,2 × N) rem

   Pri 1920 px je `--shell-air` nula a `1,2N rem` presne N % šírky
   okna, takže sa hodnota nezmení ani o pixel; nad stropom sa celý
   závoj posunie o vzduch a jeho vnútorné odstupy rastú s `rem`,
   teda v mierke kompozície. Druhá zarážka rovnakej farby na
   `var(--shell-air)` drží ľavý vzduch v úvodnej farbe.

   Zvislé zarážky (`to bottom`) sa nemenia — sú percentom výšky
   hlavičky a tá je vždy presne jedna obrazovka.

   Výsadba je jediná, kde rám nie je celé okno (T142 mu drží pomer
   mastera, takže začína ~146 px od ľavého okraja). Odchýlka je
   v reálnych pixeloch takmer rovnaká pri 1920 aj 3840 px, teda pod
   rozlíšiteľnosťou závoja; prepočet sa preto používa aj tam.
   ============================================================ */
@media (min-width: 120rem) {
  /* Údržba — základný závoj, hodnoty z T154b */
  [data-page="service-udrzba"] .svc-hero__figure::after {
    background:
      linear-gradient(to right,
        var(--sand) 0,
        var(--sand) var(--shell-air),
        rgba(241, 235, 216, 0.96) calc(var(--shell-air) + 28.8rem),
        rgba(241, 235, 216, 0.78) calc(var(--shell-air) + 43.2rem),
        rgba(241, 235, 216, 0.34) calc(var(--shell-air) + 60rem),
        rgba(241, 235, 216, 0) calc(var(--shell-air) + 79.2rem)),
      linear-gradient(to bottom,
        rgba(241, 235, 216, 0) 58%,
        rgba(241, 235, 216, 0.55) 82%,
        var(--sand) 100%);
  }

  [data-page="service-navrh-zahrady"] .svc-hero__figure::after {
    background:
      linear-gradient(to right,
        rgba(244, 239, 229, 0.76) 0,
        rgba(244, 239, 229, 0.76) var(--shell-air),
        rgba(244, 239, 229, 0.58) calc(var(--shell-air) + 26.4rem),
        rgba(244, 239, 229, 0.24) calc(var(--shell-air) + 45.6rem),
        rgba(244, 239, 229, 0.03) calc(var(--shell-air) + 62.4rem),
        rgba(244, 239, 229, 0) calc(var(--shell-air) + 72rem)),
      linear-gradient(to bottom,
        rgba(244, 239, 229, 0.05) 0%,
        rgba(244, 239, 229, 0) 72%,
        rgba(244, 239, 229, 0.08) 100%);
  }

  [data-page="service-vysadba"] .svc-hero__figure::after {
    background:
      linear-gradient(to right,
        var(--sand) 0,
        var(--sand) var(--shell-air),
        rgba(241, 235, 216, 0.92) calc(var(--shell-air) + 16.8rem),
        rgba(241, 235, 216, 0.5) calc(var(--shell-air) + 38.4rem),
        rgba(241, 235, 216, 0) calc(var(--shell-air) + 64.8rem)),
      linear-gradient(to bottom,
        rgba(241, 235, 216, 0) 62%,
        rgba(241, 235, 216, 0.4) 86%,
        rgba(241, 235, 216, 0.8) 100%);
  }

  [data-page="service-zavlahy"] .svc-hero__figure::after {
    background:
      linear-gradient(to right,
        rgba(241, 235, 216, 0.38) 0,
        rgba(241, 235, 216, 0.38) var(--shell-air),
        rgba(241, 235, 216, 0.18) calc(var(--shell-air) + 32.4rem),
        rgba(241, 235, 216, 0) calc(var(--shell-air) + 56.4rem)),
      linear-gradient(to bottom,
        rgba(241, 235, 216, 0.04) 0%,
        rgba(241, 235, 216, 0) 82%,
        rgba(241, 235, 216, 0.18) 100%);
  }

  html[data-page="area"] .area-hero .svc-hero__figure::after {
    background:
      linear-gradient(90deg,
        var(--sand) 0,
        var(--sand) var(--shell-air),
        rgba(241, 235, 216, 0.98) calc(var(--shell-air) + 21.6rem),
        rgba(241, 235, 216, 0.88) calc(var(--shell-air) + 34.8rem),
        rgba(241, 235, 216, 0.48) calc(var(--shell-air) + 50.4rem),
        rgba(241, 235, 216, 0.08) calc(var(--shell-air) + 68.4rem),
        rgba(241, 235, 216, 0) calc(var(--shell-air) + 80.4rem)),
      linear-gradient(180deg,
        rgba(241, 235, 216, 0.04) 58%,
        rgba(241, 235, 216, 0.38) 84%,
        rgba(241, 235, 216, 0.8) 100%);
  }
}