/* ============================================================
   Kristián Jankó — Architektura & Design
   Design tokens taken from Figma (file 6gUJ2hTKdzIIfNMXajsQd2)
   ============================================================ */

:root {
  /* ---- colour ---- */
  --c-bg:          #1a1a1a;
  --c-bg-light:    #ffffff;
  --c-text:        #ffffff;
  --c-text-dark:   #000000;
  /* Zlatá dle revize ve Figmě: bledá šampaňská místo dřívější syté #d4af37.
     #e3d69f nese linky karet, podtitulky, ceny a všechny linky v rozhraní,
     #f0dba8 popisky u čísel. */
  --c-accent:      #e3d69f;
  --c-gold-warm:   #f0dba8;
  --c-gold-light:  #fff1ae;
  /* Sytá tmavá zůstává — na bílé sekci Filosofie by se šampaňská ztratila. */
  --c-gold-deep:   #9f791d;
  --c-muted:       #919090;
  --c-muted-2:     #878787;
  --c-muted-3:     #b7b7b7;
  /* Figma specifies #707070, but on #1a1a1a that is 3.5:1 — below WCAG AA.
     Lifted to the nearest tone that clears 4.5:1. */
  --c-muted-4:     #8a8a8a;

  --c-glass:       rgba(255, 255, 255, 0.10);
  --c-glass-2:     rgba(255, 255, 255, 0.16);
  --c-glass-line:  rgba(142, 142, 147, 0.20);
  --c-rule:        rgba(255, 255, 255, 0.22);

/* ---- type ----
   Sazba dle Figmy: Tenor Sans na všechno bezpatkové, Roboto Condensed na
   čísla, Cormorant Garamond na patkové nadpisy, Corinthia na script.
   Tenor Sans nahradil Jost a Roboto Condensed nahradilo Archivo Black.

   POZOR: Tenor Sans má jediný řez a žádnou kurzívu. Nikde mu proto
   nepředepisuj font-weight nad 400 ani font-style: italic — prohlížeč by řez
   dopočítal sám a rozmazal kresbu. Kurzíva patří Cormorantu. */
  --f-display: "Tenor Sans", "Helvetica Neue", Arial, sans-serif;
  /* Hero byl dřív v Cinzelu — římská kapitálka jako odkaz na Vitruvia, jehož
     utilitas / firmitas / venustas ten titulek je. Revize ho ale sází
     v Roboto Condensed, takže odkaz padl. České verzálky kreslí správně. */
  --f-hero:    "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --f-body:    "Tenor Sans", "Helvetica Neue", Arial, sans-serif;
  --f-text:    "Tenor Sans", "Helvetica Neue", Arial, sans-serif;
  --f-script:  "Corinthia", cursive;
  --f-numeric: "Roboto Condensed", "Arial Narrow", Impact, sans-serif;
  /* Archivo Black má jediný řez a ten je už sám černý — nikde mu nepředepisuj
     font-weight nad 400, prohlížeč by ho ztučnil podruhé. */
  --f-black:   "Archivo Black", "Arial Black", Impact, sans-serif;

  /* Verzálky. Tenor Sans je pro ně v češtině nepoužitelný: jeho velká písmena
     s diakritikou mají akcent v nulové šířce jako skládanou značku, takže se
     háček ztratí (IČO→ICO, KONCEPČNÍ→KONCEPCNI) a čárka se překlopí na
     obrácenou (ÚP→ÙP). Ověřeno v prohlížeči na 12–44 px; správně to sedí až
     zhruba od 60 px, tedy nad rozsahem, ve kterém web sází. Malá písmena
     přitom kreslí bezchybně — proto se Tenor Sans nechává na běžný text
     a verzálky přebírá Jost, nejbližší náhrada, která je v pořádku.
     Cinzel a Cormorant Garamond mají velká písmena v pořádku, ty zůstávají. */
  --f-caps:    "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

  /* ---- layout ---- */
  --container:  min(1770px, 92vw);
  --narrow:     min(1234px, 88vw);
  --header-h:   clamp(64px, 5.2vw, 100px);
  --gutter:     clamp(1.5rem, 4vw, 3.75rem);
  --strip-gap:  clamp(12px, 1.25vw, 24px);
  /* Jediná mezera pro celý pravý sloupec sekce Služby — karty, kalkulačka
     i čísla ji sdílejí, takže mezi nimi nikde nevznikne jiný odstup. */
  --offer-gap:  clamp(0.9rem, 1.5vw, 1.4rem);
  /* O kolik se musí prvek vytáhnout z kontejneru, aby sahal k okraji okna.
     100vw počítá i se svislým scrollbarem, takže by to bez --sbw (šířku píše
     main.js) přestřelilo a text u kraje by se ořízl. */
  --bleed-x:    calc((var(--container) - 100vw + var(--sbw, 0px)) / 2);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* Označený text ani obrázek nemá žloutnout — dřív tu byla plná šampaňská
   s tmavým písmem a přes celý nadpis to vypadalo jako chyba sazby. Neutrální
   průsvitná šedá tmavé podklady prosvětlí, bílou Filosofii ztmaví, takže je
   výběr vidět všude a nikde nebarví. Barvu písma nechává být.
   Úplně neviditelný výběr by šel (background: transparent), ale pak by nebylo
   poznat, co je vybrané. */
::selection { background: rgba(150, 150, 150, 0.35); color: inherit; }

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

.container { width: var(--container); margin-inline: auto; }
.container--narrow { width: var(--narrow); }
.upper { text-transform: uppercase; }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -120%;
  z-index: 200;
  padding: 0.75rem 1.5rem;
  background: var(--c-accent);
  color: #1a1a1a;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  transition: translate 0.2s var(--ease);
}
.skip-link:focus-visible { translate: -50% 0; }


/* ============================================================
   HEADER  (Figma 309:12 — nav row)
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: var(--gutter);
  color: #fff;
  /* Revize chce navigaci bez podkladové lišty — místo plného pruhu jen spád,
     který na spodní hraně hlavičky končí v nule, takže nikde není vidět
     rozhraní. Zároveň to je ten „легкий градієнт" z anotace nahoře. */
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.52), rgba(12, 12, 12, 0));
  /* Blur je v základu nulový, ne none — z none se nedá plynule přejet a přechod
     by sekl. Samo sklo se zapíná až v .is-stuck. */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.35s var(--ease),
              color 0.35s var(--ease),
              backdrop-filter 0.35s var(--ease),
              -webkit-backdrop-filter 0.35s var(--ease);
}

/* Od Služeb dál nese hlavička rozmazané sklo přes celou šířku, aby obsah pod
   ní neprosvítal do navigace (dřív se přes logo a menu kreslil text sekcí).
   .is-stuck přidá main.js teprve až hero odjede pod hlavičku — nad fotkou
   zůstává jen měkký spád, tam se nic nekříží.
   Podklad je plochý, ne spád: blur je po celé výšce stejný, takže by slábnoucí
   tón působil rozpojeně. */
.site-header.is-stuck {
  background: rgba(16, 16, 16, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* over the white "Filosofie" section */
.site-header.is-light {
  color: #1a1a1a;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0));
}
/* Světlá varianta téhož skla — na Filosofii je hlavička vždycky i .is-stuck,
   takže tahle trojkombinace přebíjí spád nad ní. */
.site-header.is-stuck.is-light { background: rgba(255, 255, 255, 0.55); }

.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 300;
  width: calc(var(--scroll-progress, 0) * 100%);
  height: 2px;
  background: linear-gradient(90deg, var(--c-gold-deep), var(--c-accent), var(--c-gold-light));
  box-shadow: 0 0 14px rgba(227, 214, 159, 0.7);
  transform-origin: left;
  pointer-events: none;
}

/* Ve Figmě je monogram v hero bílý, ne zlatý — a je to i praktické: nad
   světlou oblohou se zlatá ztrácela, když hlavička přišla o plnou lištu.
   Zlatý přeliv v SVG jede dál, jen po bílé místo po zlaté. */
.logo {
  flex: none;
  display: block;
  color: #fff;
}
.site-header.is-light .logo { color: var(--c-gold-deep); }
.logo svg {
  width: clamp(40px, 3.1vw, 59px);
  height: auto;
}
.logo { transition: transform 0.28s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .logo:hover { transform: scale(1.08); }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.9vw, 2.25rem);
}

.site-nav a {
  position: relative;
  /* Roboto Condensed dle zadání. Má skutečný tučný řez, takže verzálky nad
     fotkou drží kresbu — Tenor Sans si tuk musel dopočítávat a tahy se slily. */
  font-family: var(--f-caps);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.05vw, 1.25rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-block: 0.35rem;
  opacity: 0.92;
  transition: opacity 0.25s var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-accent);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.3s var(--ease);
}
.site-nav a:hover,
.site-nav a.is-active { opacity: 1; }
.site-nav a:hover::after,
.site-nav a.is-active::after { scale: 1 1; }
.site-nav a:focus-visible::after { scale: 1 1; }

/* burger */
.nav-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: currentColor;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  margin: 6px auto;
  background: currentColor;
  transition: translate 0.3s var(--ease), rotate 0.3s var(--ease), opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 7.5px; rotate: 45deg; }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -7.5px; rotate: -45deg; }


/* ============================================================
   HERO  (Figma 309:12)
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--header-h) - clamp(0px, 2.2vh, 32px));
  padding-inline: var(--gutter);
  padding-bottom: clamp(2rem, 5vh, 4rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Dvě nezávislé složky: --hero-shift-* píše pohyb myši, --hero-scroll-y
     scroll. Obojí je v px, takže je stačí sečíst. Fotka zůstává trvale o pár
     procent zvětšená (viz .js .hero.is-intro níž), jinak by se při posunu
     odkryl okraj. */
  translate: var(--hero-shift-x, 0px)
             calc(var(--hero-shift-y, 0px) + var(--hero-scroll-y, 0px));
}
/* keeps the white type legible over the sky and the water */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 38%),
    linear-gradient(to top,    rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 30%);
}

/* A soft, cursor-responsive pool of light gives the still render depth without
   turning the hero into a generic video background. */
.hero__halo {
  position: absolute;
  z-index: 0;
  width: min(48vw, 680px);
  aspect-ratio: 1;
  left: calc(var(--pointer-x, 50) * 1%);
  top: calc(var(--pointer-y, 45) * 1%);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 241, 174, 0.20), rgba(227, 214, 159, 0.06) 32%, transparent 68%);
  filter: blur(12px);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: left 0.65s var(--ease), top 0.65s var(--ease);
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  /* The render puts the house right of centre and leaves the sky open across
     the left ~70%, so the type is nudged off-centre to sit in that gap.
     Posun je jen poloviční proti původnímu — Kristián chtěl blok víc doprava.
     Cancelled below 900px, where the cover-crop recentres on the house. */
  translate: clamp(-52px, -2.6vw, 0px) 0;
}

.hero__eyebrow {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.56vw, 1.875rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.hero__title {
  margin-top: clamp(0.35rem, 0.9vw, 0.9rem);
  font-family: var(--f-hero);
  font-weight: 700;
  /* Roboto Condensed je užší než Cinzel, takže na stejnou šířku řádku unese
     větší stupeň — a potřebuje víc prostrkání, aby verzálky nedržely při sobě.
     Horní mez je nastavená tak, aby se řádek i na širokém okně vešel do
     kontejneru bez zalomení. */
  font-size: clamp(1.55rem, 5.2vw, 4.1rem);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Anotace: blok má zůstat zafixovaný na třech řádcích (nadtitulek / titulek
     / script). Na desktopu se titulek proto nezalamuje; na mobilu, kde by
     přetekl, se raději zalomí vyváženě než aby vylezl z okna. */
  text-wrap: balance;
}
@media (min-width: 901px) {
  .hero__title { white-space: nowrap; }
}

.hero__script {
  margin-top: clamp(0.4rem, 1vw, 1rem);
  /* flush with the left edge of the title above it, not centred under it */
  text-align: left;
  font-family: var(--f-script);
  font-size: clamp(2rem, 4.6vw, 3.44rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.95);
}

/* Anotace žádá průhledné pozadí, takže sklo i rámeček padly a čitelnost drží
   jen stín. Všech pět vět sedí v jedné buňce gridu — pill je tím vysoký podle
   té nejdelší a střídání textů stránkou nehne. */
.hero__pill {
  position: relative;
  z-index: 1;
  margin-top: auto;
  align-self: flex-start;
  display: grid;
  max-width: min(769px, 100%);
  padding: clamp(0.7rem, 1vw, 0.9rem) 0;
  font-family: var(--f-body);
  font-size: clamp(1.125rem, 1.35vw, 1.625rem);
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.62), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero__pill-line {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  translate: 0 0.5rem;
  /* visibility se přepne až na konci prolnutí, aby text nezmizel z odečítače
     dřív, než dobledne — a při náběhu naopak hned */
  transition: opacity 0.8s var(--ease), translate 0.8s var(--ease),
              visibility 0s linear 0.8s;
}
.hero__pill-line.is-current {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 0.8s var(--ease), translate 0.8s var(--ease),
              visibility 0s;
}



/* ---- hero intro ------------------------------------------------------
   Plays on load and again whenever "Úvod" is clicked. Only armed once the
   inline head script has set .js, so without scripting the hero renders
   plainly instead of staying invisible.                                */

.js .hero__bg,
.js .hero.is-intro .hero__bg {
  transition: scale 2.2s var(--ease);
}
/* „спочатку віддалялася трохи" — fotka najede přiblížená a odjede zpět. Klidová
   hodnota není 1, ale 1.08: ta rezerva je to, co drží okraje mimo záběr, když
   se pak pozadím při scrollu posouvá. */
.js .hero__bg            { scale: 1.18; }
.js .hero.is-intro .hero__bg { scale: 1.08; }

/* Snaps the hero back to its "before" state with no transition, so a replay
   starts from zero instead of cross-fading out of the finished state. */
.js .hero.intro-reset .hero__bg,
.js .hero.intro-reset .hero__eyebrow,
.js .hero.intro-reset .hero__title,
.js .hero.intro-reset .hero__script,
.js .hero.intro-reset .hero__pill { transition: none; }

.js .hero__eyebrow,
.js .hero__title,
.js .hero__script,
.js .hero__pill {
  opacity: 0;
  transition:
    opacity 0.9s var(--ease),
    translate 1s var(--ease),
    letter-spacing 1.2s var(--ease),
    filter 0.9s var(--ease),
    clip-path 1.1s var(--ease);
}

/* the eyebrow draws itself together from wide tracking */
.js .hero__eyebrow { letter-spacing: 0.5em; translate: 0 0.75rem; }
/* the title wipes open from its baseline */
.js .hero__title   { clip-path: inset(0 0 100% 0); translate: 0 1.5rem; }
/* the script line resolves out of a blur */
.js .hero__script  { filter: blur(9px); translate: 0 1rem; }
.js .hero__pill    { translate: 0 2rem; }

.js .hero.is-intro .hero__eyebrow {
  opacity: 1; letter-spacing: 0.01em; translate: 0 0;
  transition-delay: 0.15s;
}
.js .hero.is-intro .hero__title {
  opacity: 1; clip-path: inset(0 0 0 0); translate: 0 0;
  transition-delay: 0.4s;
}
.js .hero.is-intro .hero__script {
  opacity: 1; filter: blur(0); translate: 0 0;
  transition-delay: 0.85s;
}
.js .hero.is-intro .hero__pill {
  opacity: 1; translate: 0 0;
  transition-delay: 1.15s;
}


/* ============================================================
   SLUŽBY  (Figma 319:128)
   ============================================================ */

.services {
  padding-top: clamp(3.5rem, 7.5vw, 8.5rem);
  background: var(--c-bg);
}

.services__title {
  /* Revize: Tenor Sans místo Roboto Condensed. Jediný řez, takže 400. */
  font-family: var(--f-display);
  font-weight: 400;
  /* Tenor Sans je širší než Roboto Condensed, které tu bylo dřív — na 3.55vw
     už se titulek nevešel na jeden řádek. 3.45vw je nejvyšší stupeň, který
     se do kontejneru vejde na celou šířku okna (ověřeno měřením textu). */
  font-size: clamp(1.6rem, 3.45vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

.services__lead {
  margin-top: clamp(0.5rem, 1vw, 1rem);
  font-family: var(--f-body);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.1rem, 2vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--c-accent);
  text-align: center;
  text-wrap: balance;
}

/* ---- nabídka služeb --------------------------------------------------
   Časovou osu tří fází vystřídaly karty stupňů dokumentace: revize je chce
   proklikávací, s cenou a s obrázkem, který se mění podle toho, co je zrovna
   otevřené. Otevřená je vždy právě jedna karta, zavřené jdou do šedé.
   Bez skriptu jsou otevřené obě a nic se neschová.                        */

.services__intro {
  margin-top: clamp(3rem, 5vw, 5rem);
  /* Stojí na stejné svislici jako nadpisy a texty níž (REFERENCE, REZIDENCE):
     nejdřív se vytáhne z kontejneru až k hraně okna a pak si přidá gutter. */
  margin-inline-start: var(--bleed-x);
  padding-inline-start: var(--gutter);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.66vw, 2rem);
  letter-spacing: 0.02em;
  color: var(--c-muted-3);
  text-align: left;
}

.offer {
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
  display: grid;
  /* stejný poměr jako u referencí, aby obě sekce stály na jednom rastru */
  grid-template-columns: 1067fr 654fr;
  gap: clamp(1.75rem, 3.2vw, 3.5rem);
  /* stretch, ne start: obrázek si tím dorovná výšku celého pravého sloupce */
  align-items: stretch;
}

/* Snímky leží přes sebe v jedné buňce gridu, takže výška je daná rámem
   a přepnutí nehne layoutem — mění se jen krytí.
   Rám sahá doleva až k okraji okna: kontejner zabírá 92 vw, takže se stačí
   vytáhnout o tu polovinu volného místa, která zbývá vlevo. Zaoblení na té
   strane nemá smysl, je mimo obraz. */
.offer__media {
  display: grid;
  margin-left: var(--bleed-x);
  min-height: clamp(240px, 26vw, 520px);
  overflow: hidden;
  border-radius: 0 10px 10px 0;
  background: #272727;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20);
}
.offer__shot {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.04;
  transition: opacity 0.7s var(--ease), scale 1.3s var(--ease);
}
.offer__shot.is-current { opacity: 1; scale: 1; }

.offer__side {
  display: grid;
  align-content: start;
  gap: var(--offer-gap);
}
.offer__list { display: grid; gap: var(--offer-gap); }

.offer-card {
  border: 1px solid rgba(227, 214, 159, 0.28);
  border-radius: clamp(18px, 1.8vw, 35px);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
  transition: border-color 0.45s var(--ease), filter 0.45s var(--ease),
              opacity 0.45s var(--ease);
}
/* „невибране було тускле і сіре" — jen se skriptem: bez něj jsou otevřené
   obě karty a ztlumit jednu z nich by nedávalo smysl */
.js .offer-card:not(.is-open) { filter: grayscale(1); opacity: 0.55; }
.js .offer-card:not(.is-open):hover { filter: grayscale(0.3); opacity: 0.82; }
.offer-card.is-open { border-color: var(--c-accent); }

/* <h3> nese v základu 700; tlačítko uvnitř by ho zdědilo a Tenor Sans nemá
   tučný řez. Vlastní stupně si obě řádky nastavují níž samy. */
.offer-card__head { margin: 0; font-weight: 400; }
.offer-card__head button {
  display: block;
  width: 100%;
  padding: clamp(1rem, 1.6vw, 1.65rem) clamp(1.1rem, 1.8vw, 1.9rem);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.offer-card__name {
  display: block;
  /* Tenor Sans dle předlohy. Stupně v celé kartě jsou dopočítané tak, aby se
     text vešel i na ~1251 px, kde je pravý sloupec nejužší (media query pod
     1250 px sloupce srovnává na 1fr 1fr, nad ní platí 1067:654). */
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.7vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: letter-spacing 0.35s var(--ease);
}
.offer-card__head button:hover .offer-card__name { letter-spacing: 0.035em; }

.offer-card__kind {
  display: block;
  margin-top: clamp(0.2rem, 0.45vw, 0.5rem);
  font-family: var(--f-body);
  /* Bez tohohle by podtitulek zdědil bold z <h3> a Tenor Sans by se ztučnil
     synteticky — má jediný řez. */
  font-weight: 400;
  font-size: clamp(1rem, 1.45vw, 1.6rem);
  line-height: 1.2;
  color: var(--c-accent);
}

/* Rozbalení přes grid-template-rows 0fr → 1fr. Proti max-height nemusí nic
   hádat a dojede přesně tam, kde obsah končí — proto ten vnitřní obal:
   animovaná řádka smí mít jen jedno dítě. */
.js .offer-card__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.js .offer-card.is-open .offer-card__body { grid-template-rows: 1fr; }
.js .offer-card__inner { min-height: 0; overflow: hidden; }

/* Jen boční odsazení. Spodní mezera musí být uvnitř — padding obalu se do
   nulové řádky nesmrskne (zůstal by z karty pruh přesně té výšky), kdežto
   margin posledního dítěte se ořízne spolu s obsahem. */
.offer-card__inner { padding-inline: clamp(1.1rem, 1.8vw, 1.9rem); }

.offer-card__list { display: grid; gap: clamp(0.45rem, 0.85vw, 0.9rem); }
.offer-card__list li {
  position: relative;
  padding-left: 1.5em;
  font-family: var(--f-body);
  font-size: clamp(1rem, 1.45vw, 1.7rem);
  line-height: 1.35;
}
.offer-card__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--c-accent);
}

/* Figma: ikona kalendáře, pod ní dvouřádkový popisek, svislý předěl a teprve
   pak cena. Předěl visí na pravé hraně popisku — když se řádek zalomí, zmizí
   spolu s ním (viz media query dole), aby nikde nezůstala osiřelá čárka. */
.offer-card__foot {
  margin-top: clamp(1rem, 1.8vw, 1.8rem);
  margin-bottom: clamp(1.1rem, 1.8vw, 1.9rem);
  padding-top: clamp(0.7rem, 1.1vw, 1.1rem);
  border-top: 1px solid rgba(227, 214, 159, 0.22);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem clamp(0.9rem, 1.7vw, 1.75rem);
}

.offer-card__out {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.9vw, 0.9rem);
  padding-right: clamp(0.9rem, 1.7vw, 1.75rem);
  border-right: 1px solid rgba(227, 214, 159, 0.3);
}
.offer-card__icon {
  flex: none;
  width: clamp(24px, 2vw, 36px);
  height: auto;
  color: var(--c-accent);
}
.offer-card__out-lines { display: grid; }
.offer-card__out-label,
.offer-card__out-value {
  font-family: var(--f-caps);
  font-size: clamp(0.75rem, 1.25vw, 1rem);
  line-height: 1.35;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-accent);
  white-space: nowrap;
}
/* „VÝSTUP" je jen návěští, údaj pod ním nese informaci — proto je tlumenější */
.offer-card__out-label { opacity: 0.68; }
/* Termín bílý dle předlohy, aby se odlišil od zlatého návěští nad ním. */
.offer-card__out-value { color: #fff; }
/* Figma 343:34 — cena je Tenor Sans Regular, ne patkové. Jediný řez, takže
   ani tady žádné tučné. */
.offer-card__price {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.55vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--c-accent);
  white-space: nowrap;
}


/* ---- čísla ------------------------------------------------------------ */

/* Čísla stojí pod kalkulačkou ve stejném sloupci. Vnitřní odsazení kopíruje
   karty, takže číslice začínají na stejné svislici jako text nad nimi. */
.stats {
  margin: 0;
  padding-inline: clamp(1.1rem, 1.8vw, 1.9rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}
.stats__item { margin: 0; }
/* Figma 343:46 — čísla i popisky v Roboto Condensed, popisek v Light */
.stats__num {
  font-family: var(--f-numeric);
  font-weight: 700;
  font-size: clamp(1.9rem, 2.9vw, 3.6rem);
  line-height: 1;
}
.stats__label {
  margin: 0.35em 0 0;
  font-family: var(--f-numeric);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.15vw, 1.35rem);
  letter-spacing: 0.06em;
  color: var(--c-gold-warm);
}


/* ---- orientační kalkulace ---------------------------------------------
   Sazby a slevová křivka jsou v js/main.js (objekt PRICING); tady je jen
   forma. Bez skriptu se formulář schová — nemá cenu nabízet výpočet,
   který by nikdy nedoběhl.                                              */

.calc {
  padding: clamp(1.25rem, 2.2vw, 2.25rem) clamp(1.25rem, 2.4vw, 2.5rem);
  border: 1px solid rgba(227, 214, 159, 0.28);
  border-radius: clamp(18px, 1.8vw, 35px);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html:not(.js) .calc { display: none; }

.calc__title {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.66vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calc__row {
  margin-top: clamp(0.9rem, 1.5vw, 1.4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
}
.calc__label {
  flex: none;
  min-width: 11.5em;
  font-family: var(--f-body);
  font-size: clamp(1rem, 1.2vw, 1.4rem);
  color: var(--c-accent);
}
.calc__field {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.5em 0.65em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-family: var(--f-body);
  font-size: clamp(1rem, 1.2vw, 1.4rem);
  line-height: 1.2;
  transition: border-color 0.25s var(--ease);
}
.calc__field:hover,
.calc__field:focus-visible { border-color: var(--c-accent); }
/* rozbalený seznam kreslí operační systém na světlém podkladu, takže bílý
   text zděděný z formuláře by v něm zmizel */
.calc__field option { color: #111; background: #fff; }

.calc__measure { flex: 1 1 12rem; display: flex; align-items: baseline; gap: 0.5rem; }
.calc__field--num { flex: 1 1 6rem; }
.calc__unit {
  flex: none;
  font-family: var(--f-body);
  font-size: clamp(1rem, 1.2vw, 1.4rem);
  color: var(--c-muted-3);
}

.calc__out {
  margin-top: clamp(1.2rem, 2vw, 2rem);
  padding-top: clamp(0.8rem, 1.2vw, 1.2rem);
  border-top: 1px solid rgba(227, 214, 159, 0.22);
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 1.35vw, 1.6rem);
}
.calc__out b {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 3.1rem);
  line-height: 1;
  color: var(--c-accent);
  white-space: nowrap;
}
.calc__note {
  margin-top: 0.7rem;
  font-family: var(--f-body);
  font-size: clamp(0.85rem, 0.95vw, 1.05rem);
  line-height: 1.4;
  color: var(--c-muted-4);
}

.services__strip {
  margin-top: clamp(2.5rem, 6vw, 6.6rem);
  overflow: hidden;
  /* fade the two ends so images enter and leave instead of being cut off */
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.services__strip-track {
  display: flex;
  width: max-content;
  /* Osm snímků místo čtyř znamená dvakrát delší dráhu, takže při původních
     75 s by pás jel dvojnásobnou rychlostí. Revize ho navíc chce pomalejší —
     odtud 140 s. */
  animation: strip-scroll 140s linear infinite;
}
/* The separator lives on the item, not as `gap`. With `gap` the track is
   16 items + 15 gaps, so -50% lands one gap short and the loop jitters once per
   cycle; as a margin every item is the same width and -50% is exact. */

/* -50% is exactly one full set of eight, so the loop is seamless */
@keyframes strip-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* The loop deliberately keeps running under the cursor — hovering only lifts
   the individual image, it never stops the strip. */

/* „рамка лишалася незмінна" — rám drží rozměr, zvětšuje se jen fotka uvnitř.
   Proto ten obal navíc: kdyby se škáloval sám <img>, rostl by i rám a pás by
   pod kurzorem poskočil. */
.strip__item {
  flex: none;
  margin: 0 var(--strip-gap) 0 0;
  /* original 2:1 proportion, scaled up ~1.6x from the first version */
  width: clamp(360px, 40vw, 800px);
  aspect-ratio: 486 / 243;
  border-radius: 6px;
  overflow: hidden;
}
.strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.5s var(--ease), filter 0.5s var(--ease);
}
/* pár procent, ne víc — pás pod kurzorem nezastavuje a nesmí sebou trhnout */
.strip__item:hover img {
  scale: 1.04;
  filter: brightness(1.08);
}


/* ============================================================
   REFERENCE  (Figma 320:164)
   ============================================================ */

.refs {
  /* svislá mezera mezi řadami referencí */
  --ref-gap: clamp(2.5rem, 5vw, 6rem);
  /* Nadpis sekce má nad sebou i pod sebou stejnou mezeru — obě strany berou
     tuhle jednu hodnotu. Horní mezeru nese padding sekce, proto .services
     v enhancements.css nemá spodní odsazení; jinak by se obě sečetly. */
  --ref-head-gap: clamp(3rem, 5vw, 5rem);
  padding: var(--ref-head-gap) 0 clamp(3.5rem, 7.5vw, 8rem);
  /* the text starts its reveal offset sideways; clip that so it can never widen
     the page. `clip` (not `hidden`) keeps the vertical axis unscrolled. */
  overflow-x: clip;
}

.section-label {
  /* Roboto Condensed dle zadání — jeho 700 je skutečný řez, kdežto Tenor Sans
     měl jen 400 a tuk si prohlížeč dopočítával (rozmazané okraje). */
  font-family: var(--f-caps);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Nadpis sekce Reference stojí na stejné svislici jako text v obrácených
   řadách („REZIDENCE"). Ten sedí gutter od okraje okna, takže se nadpis
   nejdřív vytáhne z kontejneru až k hraně a pak si ten gutter přidá zpátky. */
.refs .section-label {
  margin-inline-start: var(--bleed-x);
  padding-inline-start: var(--gutter);
  margin-bottom: var(--ref-head-gap);
  letter-spacing: 0.035em;
}

/* Řada přetéká z kontejneru na obě strany až k okraji okna — obrázek si tím
   sáhne k té své hraně úplně, text má od té své odsazení o gutter, aby se
   nelepil na sklo. */
.ref {
  --bleed: var(--bleed-x);
  position: relative;
  margin-inline: var(--bleed);
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  /* stretch, not center: the image and the text column share the same top and
     bottom edge. With `center` a text block taller than the image overhung it
     by ~40px at both ends. */
  align-items: stretch;
  gap: clamp(1.75rem, 3.2vw, 3.5rem);
}
.ref:not(.ref--reverse) { padding-right: var(--gutter); }
.ref--reverse {
  grid-template-columns: 1fr 1.45fr;
  padding-left: var(--gutter);
}

/* Řady se nepřekrývají — mezi snímky je mezera. Prolnutí by nešlo: jakmile
   se řady svisle protnou, text jedné vždycky skončí na obrázku druhé, protože
   se strany pravidelně střídají. */
.ref + .ref { margin-top: var(--ref-gap); }
.ref--reverse .ref__media { order: 2; }
.ref--reverse .ref__body  { order: 1; }

/* aspect-ratio sets the row's natural height; height:100% then lets the image
   grow to match a longer text column so both edges keep lining up */
.ref__media { display: flex; }
.ref__media {
  overflow: hidden;
  border-radius: 10px;
  background: #272727;
}
.ref__media img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  aspect-ratio: 1067 / 534;
  object-fit: cover;
  transition: scale 0.8s var(--ease), filter 0.8s var(--ease);
}
.ref:hover .ref__media img,
.ref.reveal:hover .ref__media img,
.ref.reveal.is-visible:hover .ref__media img { scale: 1.045; filter: saturate(1.08) contrast(1.03); }

/* Popis drží přesně výšku obrázku: nadpis začíná na jeho horní hraně a tag je
   přišpendlený k dolní. Žádné svislé odsazení, jinak by se zarovnání rozešlo. */
.ref__body {
  display: flex;
  flex-direction: column;
  padding-block: 0;
}
.ref__title {
  font-family: var(--f-display);
  /* Tenor Sans má jediný řez — 600 si prohlížeč dopočítával a kresbu rozmazal */
  font-weight: 400;
  font-size: clamp(1.6rem, 3.65vw, 4.375rem);
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ref__body p {
  margin-top: clamp(0.7rem, 1.15vw, 1.25rem);
  font-family: var(--f-text);
  /* Tenor Sans má jen jeden řez — cokoli nad 400 by prohlížeč ztučnil sám */
  font-weight: 400;
  font-size: clamp(1.125rem, 1.56vw, 1.875rem);
  line-height: 1.34;
  /* Bloková sazba tu byla, ale sloupec unese jen ~45 znaků na řádek a čeština
     se nedělí (hyphens: manual). Justify pak roztahoval mezislovní mezery tak,
     že řádkem prošly svislé řeky. Na praporek se sází vlevo. */
  text-align: left;
  text-wrap: pretty;
}
.ref__body .ref__tag {
  /* půlka řádku jde do verzálek (.upper), takže na Tenor Sans nesmí ani ta
     druhá — jinak by se uvnitř jedné věty potkala dvě písma */
  font-family: var(--f-caps);
  /* auto pushes the tag to the bottom of the stretched column, so it lines up
     with the bottom edge of the image */
  margin-top: auto;
  padding-top: clamp(1rem, 1.9vw, 2rem);
  color: var(--c-accent);
  text-align: left;
}


/* ---- scroll reveal for a reference row -------------------------------
   The row itself opts out of the generic .reveal fade; its two halves are
   animated instead. Image: wiped open from its bottom edge while a slight
   over-zoom settles back to 1. Text: slides in from the outer edge of the
   page — right-hand columns come from the right, left-hand ones from the
   left — with each line staggered behind the one above.               */

.ref.reveal { opacity: 1; translate: none; }

.ref.reveal .ref__media img {
  clip-path: inset(100% 0 0 0 round 10px);
  scale: 1.08;
  transition: clip-path 1.05s var(--ease), scale 1.4s var(--ease), filter 0.8s var(--ease);
}
.ref.reveal.is-visible .ref__media img {
  clip-path: inset(0 0 0 0 round 10px);
  scale: 1;
}

.ref.reveal .ref__body > * {
  opacity: 0;
  translate: 3.5rem 0;
  transition: opacity 0.75s var(--ease), translate 0.9s var(--ease);
}
.ref--reverse.reveal .ref__body > * { translate: -3.5rem 0; }

.ref.reveal.is-visible .ref__body > * {
  opacity: 1;
  translate: 0 0;
}

.ref.reveal.is-visible .ref__body > *:nth-child(1) { transition-delay: 0.14s; }
.ref.reveal.is-visible .ref__body > *:nth-child(2) { transition-delay: 0.24s; }
.ref.reveal.is-visible .ref__body > *:nth-child(3) { transition-delay: 0.34s; }
.ref.reveal.is-visible .ref__body > *:nth-child(4) { transition-delay: 0.44s; }
.ref.reveal.is-visible .ref__body > *:nth-child(5) { transition-delay: 0.54s; }


/* ============================================================
   O MNĚ  (Figma 321:220)
   ============================================================ */

.about { padding-block: clamp(3.5rem, 7.5vw, 8rem); }

.about__grid {
  margin-top: clamp(2rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 402fr 907fr;
  gap: clamp(2rem, 4.5vw, 5.5rem);
  align-items: start;
}

.portrait {
  position: relative;
  width: 100%;
  max-width: 366px;
  aspect-ratio: 366 / 640;
  border-radius: 17px;
  overflow: visible;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  border-radius: inherit;
}

.badge {
  position: absolute;
  right: -24px;
  bottom: clamp(1rem, 2.6vw, 2.9rem);
  /* Šířka podle obsahu, ne pevných 181 px — na velkém okně popisek vyrostl na
     15 px a do pevné šířky se už nevešel na jeden řádek. */
  width: max-content;
  padding: clamp(0.5rem, 1vw, 1.25rem) clamp(0.5rem, 0.9vw, 0.7rem);
  border-radius: 15px;
  background: var(--c-glass-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.badge strong {
  display: block;
  font-family: var(--f-black);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 3.125rem);
  line-height: 1;
}
.badge span {
  display: block;
  margin-top: 0.2em;
  font-family: var(--f-text);
  font-size: clamp(0.875rem, 0.78vw, 0.9375rem);
  line-height: 1.2;
  color: var(--c-muted-3);
  white-space: nowrap;
}

.about__cta {
  margin-top: clamp(1.25rem, 2.4vw, 2.5rem);
  max-width: 366px;
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 3.125rem);
  line-height: 1.1;
  text-align: center;
}

/* Odkazy na profily. Ve Figmě sedí zarovnané vlevo pod portrétem, tedy
   v jeho šířce, ne na střed jako výzva nad nimi. */
/* Kontakt je ve Figmě o poznání větší než býval — nadpis, telefon i mail. */
.contact { margin-top: clamp(2.5rem, 5.5vw, 6rem); }

.contact__label {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.75vw, 2.1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.contact__phone {
  margin-top: clamp(0.6rem, 1.2vw, 1.2rem);
  font-size: clamp(1.35rem, 2.15vw, 2.6rem);
  letter-spacing: 0.02em;
}
.contact__mail {
  margin-top: 0.15em;
  font-size: clamp(1.1rem, 1.5vw, 1.8rem);
  letter-spacing: 0.02em;
}
.contact__phone a,
.contact__mail a {
  transition: color 0.25s var(--ease);
}
.contact__phone a:hover,
.contact__mail a:hover { color: var(--c-accent); }
/* „IČO" je verzálka s háčkem, takže na Tenor Sans nesmí — vysázel by „ICO".
   Proto tenhle jeden řádek běží na Jostu jako ostatní verzálky na webu. */
.contact__ico {
  margin-top: 0.15em;
  font-family: var(--f-caps);
  font-size: clamp(1.05rem, 1.42vw, 1.7rem);
  letter-spacing: 0.02em;
  color: var(--c-muted-4);
}

.about__bio p,
.about__quote p {
  font-family: var(--f-body);
  font-size: clamp(1.125rem, 1.46vw, 1.75rem);
  line-height: 1.43;
  text-align: left;
  text-wrap: pretty;
}
.about__bio p + p { margin-top: 1.43em; }

.about__quote {
  margin: clamp(2rem, 4vw, 4.5rem) 0 0;
  padding-left: clamp(1rem, 1.6vw, 1.6rem);
  border-left: 2px solid var(--c-rule);
  color: var(--c-muted-2);
}
.about__quote p + p { margin-top: 1.43em; }


/* ============================================================
   FILOSOFIE  (Figma 85:4) — light section
   ============================================================ */

.philosophy {
  padding-block: clamp(3.5rem, 7.5vw, 9.4rem);
  background: var(--c-bg-light);
  color: var(--c-text-dark);
}

.philosophy__title {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(2rem, 4.16vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.philosophy__intro {
  margin-top: clamp(1rem, 1.8vw, 1.9rem);
  /* Kontejner --narrow je 1234 px, takže bez stropu vycházelo přes 100 znaků na
     řádek — dvojnásobek toho, co oko pohodlně přeskočí. Strop v ch drží míru
     kolem 65 znaků nezávisle na stupni písma. */
  max-width: 62ch;
  font-family: var(--f-body);
  font-size: clamp(1.0625rem, 1.56vw, 1.875rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: left;
  text-wrap: pretty;
}

.accordion { margin-top: clamp(2rem, 4vw, 4.5rem); }

.par {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.par:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }

.par > summary {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: clamp(0.85rem, 1.5vw, 1.35rem) clamp(2.5rem, 4vw, 3.5rem) clamp(0.85rem, 1.5vw, 1.35rem) clamp(0.25rem, 0.6vw, 0.6rem);
  position: relative;
  font-family: var(--f-body);
  font-size: clamp(1.125rem, 1.56vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.3s var(--ease);
}
.par > summary::-webkit-details-marker { display: none; }
.par > summary:hover { background: rgba(0, 0, 0, 0.035); }

.par__no {
  flex: none;
  color: rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
}

/* chevron */
.par > summary::after {
  content: "";
  position: absolute;
  right: clamp(0.6rem, 1.4vw, 1.4rem);
  top: 50%;
  width: 0.55em;
  height: 0.55em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  translate: 0 -70%;
  rotate: 45deg;
  opacity: 0.5;
  transition: rotate 0.3s var(--ease), opacity 0.3s var(--ease);
}
.par[open] > summary::after { rotate: -135deg; translate: 0 -25%; opacity: 0.9; }

.par[open] > summary { background: rgba(0, 0, 0, 0.05); }

.par__body {
  padding: clamp(0.6rem, 1.1vw, 1.1rem) clamp(0.25rem, 0.6vw, 0.6rem) clamp(1.4rem, 2.4vw, 2.4rem);
}
.par__body p {
  max-width: 64ch;
  font-family: var(--f-body);
  font-size: clamp(1.125rem, 1.35vw, 1.625rem);
  /* 1.35 bylo na tak dlouhý řádek málo — oko ztrácelo návaznost mezi řádky.
     1.55 sedí v pásmu 1.5–1.75, které se pro běžný text doporučuje. */
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-align: left;
  text-wrap: pretty;
}
.par__body p + p { margin-top: 0.9em; }

.par__soon {
  color: rgba(0, 0, 0, 0.42);
  font-style: italic;
  text-align: left !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  padding-block: clamp(2rem, 3.5vw, 3.5rem);
  background: var(--c-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--f-caps);
  font-size: clamp(1.15rem, 1.25vw, 1.4rem);
  color: var(--c-muted-3);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}
.site-footer a { transition: color 0.25s var(--ease); }
.site-footer a:hover { color: var(--c-accent); }


/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; translate: 0 0; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Poměr 1067:654 nechává kartám tak úzký sloupec, že se jim pod ~1250 px
   rozpadne patička (popisek | cena) na dva řádky. Dřív než k tomu dojde se
   proto sloupce srovnají na stejnou šířku. */
@media (max-width: 1250px) {
  .offer { grid-template-columns: 1fr 1fr; }

  .about__grid { grid-template-columns: 340fr 700fr; }
}

@media (max-width: 900px) {
  :root { --container: 92vw; --narrow: 92vw; }

  /* --- mobile nav --- */
  .nav-toggle { display: block; }

  .site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--header-h) + 0.5rem) var(--gutter) 1.75rem;
    background: rgba(20, 20, 20, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
    translate: 0 -100%;
    visibility: hidden;
    transition: translate 0.4s var(--ease), visibility 0.4s;
  }
  .site-nav.is-open { translate: 0 0; visibility: visible; }

  .site-nav a {
    font-size: 1.35rem;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }
  .site-nav a::after { display: none; }

  /* nav panel is dark even when the header is in light mode */
  .site-header.is-light .site-nav { color: #fff; }

  /* --- hero --- */
  /* Aby blok zůstal na třech řádcích i na telefonu, musí se titulek vejít na
     jeden — proto se tu velikost váže na šířku okna místo pevného minima. */
  /* stejný sklon jako na desktopu, jen s nižším dnem — pod ~370 px by jinak
     minimum přerostlo šířku okna a řádek by z hera vylezl */
  .hero__title { font-size: clamp(1rem, 5.2vw, 4.1rem); white-space: nowrap; }

  .hero__pill { align-self: stretch; text-align: left; }
  /* the crop recentres on the house here, so keep the type centred */
  .hero__inner { translate: none; }

  /* --- services --- */
  /* Složeno pod sebe jde obrázek nahoru a karty pod něj — přepínání tím
     nepřijde o smysl, jen se čte shora dolů. */
  /* Složeno pod sebe se obrázek vrací do kontejneru a bere si zpátky pevný
     poměr — dorovnávat výšku sloupce vedle sebe už nemá co. */
  /* složeno pod sebe se text vrací do kontejneru jako všechno ostatní */
  .services__intro { margin-inline-start: 0; padding-inline-start: 0; }

  .offer { grid-template-columns: 1fr; }
  .offer__media {
    margin-left: 0;
    min-height: 0;
    border-radius: 10px;
  }
  .offer__shot { height: auto; aspect-ratio: 16 / 9; }

  .calc__label { min-width: 100%; }

  /* narrower screen shows fewer images at once — shorten the cycle so the
     travel speed stays roughly the same as on desktop */
  .services__strip-track { animation-duration: 100s; }

  /* --- reference --- */
  /* Složeno pod sebe nemá přesah ani přetečení k okraji smysl — řady jdou
     zase hezky za sebou v kontejneru. */
  .ref,
  .ref--reverse {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-inline: 0;
    padding-inline: 0;
  }
  .ref + .ref { margin-top: clamp(2.5rem, 7vw, 4rem); }
  .refs .section-label,
  .refs .section-sub { margin-inline-start: 0; padding-inline-start: 0; }
  /* stacked layout: the text sits under its image, so a sideways entrance reads
     oddly — let it rise instead */
  .ref.reveal .ref__body > *,
  .ref--reverse.reveal .ref__body > * { translate: 0 1.5rem; }
  .ref--reverse .ref__media { order: 0; }
  .ref--reverse .ref__body  { order: 0; }

  /* --- about --- */
  .about__grid { grid-template-columns: 1fr; }
  .about__aside {
    display: grid;
    grid-template-columns: minmax(0, 366px) 1fr;
    gap: 1.5rem 2rem;
    align-items: end;
  }
  .about__cta { grid-column: 1 / -1; margin-inline: auto; }
  .contact { grid-column: 1 / -1; margin-top: 0; }
}

@media (max-width: 560px) {
  /* na úzké kartě se popisek a cena zalomí pod sebe — svislý předěl by pak
     visel na konci řádku bez druhé strany */
  .offer-card__out { padding-right: 0; border-right: 0; }

  .about__aside { grid-template-columns: 1fr; align-items: stretch; }
  .portrait { max-width: none; aspect-ratio: 366 / 500; }
  /* Portrét tu jde přes celou šířku kontejneru, takže přesah badge už nemá kam
     vylézt — vyjel by z okna a overflow-x na body by mu odřízl zaoblený rok. */
  .badge { right: 0; }
  .about__cta { max-width: none; }
}


/* ============================================================
   MOTION / PRINT
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; translate: none; }
  /* karty se nerozbalují animací, jen se přepnou; snímek se nepřibližuje */
  .js .offer-card__body { transition: none; }
  .offer__shot { scale: 1; transition: none; }
  /* věty v pillu přepíná skript dál, ale bez prolnutí a bez posunu */
  .hero__pill-line { transition: none; }
  /* show the reference rows outright — no wipe, no slide */
  .ref.reveal .ref__media img { clip-path: none; scale: 1; }
  .ref.reveal .ref__body > * { opacity: 1; translate: none; }
  /* hero arrives already assembled — zvětšení zůstává, jen se neanimuje */
  .js .hero__bg { scale: 1.08; }
  .js .hero__eyebrow,
  .js .hero__title,
  .js .hero__script,
  .js .hero__pill {
    opacity: 1;
    translate: none;
    filter: none;
    clip-path: none;
    letter-spacing: initial;
  }
  .js .hero__eyebrow { letter-spacing: 0.01em; }
  .js .hero__title   { letter-spacing: 0.05em; }
  .js .hero__script  { letter-spacing: 0.05em; }
  /* the blanket rule above would loop the marquee every 0.01ms — stop it dead
     instead, leaving the strip parked on the first four renders */
  .services__strip-track { animation: none !important; }
  .hero__halo { transition: none; }
}

@media print {
  .site-header, .services__strip, .hero__bg { display: none; }
  body { background: #fff; color: #000; }
}