/* ==========================================================================
   pages.css
   Rozvržení vázané na konkrétní stránky: hero s malbou a vodoznakem,
   sekce služeb otevírané scrollem, úvodní koláž, proces, případová
   studie, průvodce cenou, kontakt.
   ========================================================================== */

/* ================================== HERO =================================
   Světlý, na střed. Vzadu obří vodoznak loga, pod ním barevná malba
   maskovaná tak, aby zůstala jen kolem nadpisu. Dole řada log klientů.
   Rozměry a masky přesně dle reference.
   ========================================================================= */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: var(--header-height);
    padding-bottom: var(--space-4);
    overflow: hidden;
}

/* Podstránky: výšku dává obsah, mezery nad nadpisem a pod textem jsou pevné
   (od 13. 10. 2026). Dřív měla hlavička minimální výšku podle výšky okna
   a obsah se v ní centroval, takže na telefonu zbylo nad nadpisem i pod
   textem přes 110 px prázdna (Oliver: „nejsou to moc velké mezery?"). */
.hero--inner {
    min-height: 0;
    padding-bottom: var(--space-8);
}

@media (min-width: 62rem) {
    .hero--inner {
        padding-bottom: var(--space-10);
    }
}

/* Obří vodoznak: bílé logo přes celou šířku, posunuté nahoru, 35 %.
   Leží NAD malbou, takže ji na světlém podkladu "vygumuje" do ducha. */
.hero__watermark {
    position: absolute;
    top: -15%;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
    z-index: 2;
    opacity: .35;
    pointer-events: none;
    user-select: none;
}

.hero__watermark svg {
    width: 100%;
    height: auto;
    /* Nápis uvnitř používá currentColor, proto se barva nastavuje přes
       color. Bílá na světlém podkladu je skoro neviditelná a zviditelní
       ji až malba, která prosvítá zezadu. Přesně jako na referenci. */
    color: var(--paint-3);
    fill: currentColor;
    /* Měkký stín pod písmeny: bílý nápis na světlém podkladu je tak
       nepatrně vidět jako ražba do papíru, ještě než za ním projde kouř. */
    filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--ink) 10%, transparent));
}

/* Na výšku (mobil, tablet na výšku) vodoznak není. Za nadpis se celé slovo
   nevejde (při dvojnásobné šířce bylo vidět jen „SCEN"), nad nadpisem
   působilo jako druhé logo hned pod hlavičkou a za nadpisem ani dole nad
   logy nebylo k ničemu. Oliver 13. 10. 2026: „nech to zatím bez toho". */
@media (orientation: portrait) {
    .hero__watermark {
        display: none;
    }
}

/* Malba. Celoplošná vrstva maskovaná: svisle mizí směrem dolů a dvě
   obří skvrny barvy podkladu ji vymažou uprostřed a v levém horním rohu.
   Výsledek: barva žije hlavně u horního okraje a po stranách nadpisu. */
.hero__paint {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0 / 0));
    mask-image: linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0 / 0));
}

.hero__paint::before,
.hero__paint::after {
    content: '';
    position: absolute;
    width: max(80vw, 80vh);
    height: max(80vw, 80vh);
    background-image: radial-gradient(closest-side, var(--bg) 0, transparent 100%);
    z-index: 2;
}

.hero__paint::before {
    left: 0;
    top: 0;
    transform: translate3d(-50%, -50%, 0);
}

.hero__paint::after {
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
}

/* Základní úroveň malby: pomalu plující skvrny v barvách značky.
   Na výkonných zařízeních ji nahradí plátno s tekutým kouřem. */
.hero__gradient {
    position: absolute;
    inset: -10%;
    z-index: 1;
    background:
        radial-gradient(closest-side at 78% 18%, color-mix(in srgb, var(--paint-1) 40%, transparent) 0, transparent 100%),
        radial-gradient(closest-side at 10% 55%, color-mix(in srgb, var(--paint-2) 30%, transparent) 0, transparent 100%),
        radial-gradient(closest-side at 60% 78%, color-mix(in srgb, var(--orange) 22%, transparent) 0, transparent 100%);
    filter: blur(70px);
    animation: hero-drift 24s ease-in-out infinite alternate;
}

@keyframes hero-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__gradient { animation: none; }
}

/* Plátno kouře nahrazuje celou vrstvu malby (vkládá motion.js). */
/* Kouř ke spodnímu okraji hlavičky plynule mizí (stejně jako CSS malba),
   aby nekončil ostrou hranou proti bílé sekci pod ním. */
.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0) 65%, rgb(0 0 0 / 0));
    mask-image: linear-gradient(to bottom, rgb(0 0 0) 65%, rgb(0 0 0 / 0));
}

.hero.has-fluid .hero__paint {
    display: none;
}

/* Obsah: na střed, nad vodoznakem.
   Celý blok textu je průchozí pro myš (pointer-events: none), takže kouř
   reaguje i nad nadpisem, a text se nedá označit ani kopírovat. Stejné
   řešení jako reference. Tlačítka a odkazy se zapínají zpátky níže. */
.hero__container {
    position: relative;
    z-index: var(--z-content);
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.hero__container--head {
    margin-top: auto;
    margin-bottom: auto;
}

.hero__content .btn,
.hero__lead a {
    pointer-events: auto;
}

.hero__content {
    text-align: center;
    margin-inline: auto;
    width: 100%;
}

@media (min-width: 75rem) {
    .hero__content {
        width: 66.666%;
    }
}

/* Nadpis: malá písmena jako v referenci, zvýrazněná část s přechodem,
   druhá řádka tenkým řezem. Žádné umělé zužování. */
.hero__title {
    font-size: var(--size-hero);
    font-weight: var(--weight-medium);
    line-height: 1;
    letter-spacing: var(--tracking-heading);
    text-transform: lowercase;
    margin-bottom: var(--space-6);
}

.hero__title-light {
    font-weight: var(--weight-light);
    display: block;
}

.hero__lead {
    max-width: var(--measure);
    margin-inline: auto;
    margin-bottom: var(--space-6);
    line-height: var(--leading-body);
}

.hero__lead strong {
    font-weight: var(--weight-semibold);
}

/* Svislý ukazatel Scroll na levém okraji. Svislé písmo se nastavuje na
   vnitřní span: přímo na <button> ho některé prohlížeče nepropíší a text
   by po otočení skončil vzhůru nohama. */
.hero__scroll {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-content);
    color: var(--ink);
    opacity: .7;
    font-size: var(--size-small);
    letter-spacing: var(--tracking-sub);
    cursor: pointer;
}

.hero__scroll span {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

@media (max-width: 61.9rem) {
    .hero__scroll { display: none; }
}

/* Loga klientů dole. Také průchozí pro myš, aby kouř fungoval až k okraji. */
.hero__clients {
    position: relative;
    z-index: var(--z-content);
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    padding-bottom: var(--space-5);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Vnitřní stránky: menší hero, nadpis vlevo bez transformace. */
.hero--inner .hero__content {
    text-align: left;
    width: 100%;
    margin-top: var(--space-7);
}

@media (min-width: 62rem) {
    .hero--inner .hero__content {
        margin-top: var(--space-10);
    }
}

/* Nadpis podstránek ve stylu loga (od 12. 10. 2026, Oliver podle loga):
   verzálky, Archivo v šířce 118 % jako logo, polotučně, černě, na konci
   červená tečka. Písmena prořezává stoupající zářez jako v logu (maska
   #ascent-cut ve sprite.php): šest tenkých průřezů, zleva doprava vždy
   o kus výš. Vyvážené lámání, ať dlouhý nadpis nekončí osamělým slovem.
   Šířka nadpisu je šířka textu (inline-block), zářez se rozloží po ní. */
.hero--inner .hero__title {
    display: inline-block;
    font-size: clamp(2rem, 1.1rem + 4.2vw, 5.75rem);
    font-weight: var(--weight-semibold);
    font-stretch: 118%;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-wrap: balance;
}

/* Zářez maskou (od 13. 10. 2026): každý řádek nadpisu prořízne jedna
   rovná, plynulá čára, která stoupá zleva doprava přes celou šířku
   nadpisu, jako zářez v logu. Dřív to bylo šest samostatných vodorovných
   pruhů bez spojení a na velkém nadpisu působily jako náhodné bílé čárky.

   Maska je soubor assets/img/brand/title-cut.svg: dlaždice vysoká jako
   řádek (1.05em), roztažená na šířku nadpisu a opakovaná dolů, takže
   víceřádkový nadpis má čáru na každém řádku. Výšky podle Archiva
   (změřil Oliver 12. 10. 2026): v řádku 1.05em leží účaří 0.86em od
   horního okraje, verzálky jsou vysoké 0.686em. Čára stoupá od 0.1em
   do 0.56em nad účařím, tloušťka 0.06em (v logu 2,4 z 40). Změní-li se
   písmo nebo line-height, je potřeba upravit čísla v souboru masky. */
.hero--inner .hero__title {
    -webkit-mask-image: url("../img/brand/title-cut.svg");
    mask-image: url("../img/brand/title-cut.svg");
    -webkit-mask-size: 100% 1.05em;
    mask-size: 100% 1.05em;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
}

.hero__dot {
    color: var(--red);
}

/* Úvod pod velkým nadpisem podstránky o stupeň větší než běžný text, aby
   mezi nadpisem a úvodem nebyl tak velký skok (od 14. 10. 2026). */
.hero--inner .hero__lead {
    margin-inline: 0;
    max-width: 42rem;
    font-size: var(--size-subhead);
}

/* Poznámka pod popiskem manifestu na O nás. Na užších obrazovkách, kde jsou
   sloupce pod sebou, jde až za manifest: popisek, text, poznámka. */
.about-manifesto__note {
    max-width: 22rem;
    margin: var(--space-4) 0 0;
    color: var(--muted-2);
    line-height: var(--leading-body);
}

@media (max-width: 63.99rem) {
    .about-manifesto .split__aside {
        display: contents;
    }

    .about-manifesto .label {
        order: 1;
        margin: 0;
    }

    .about-manifesto .statement {
        order: 2;
    }

    .about-manifesto__note {
        order: 3;
        margin-top: 0;
    }
}

/* ============================ NADPIS ÚVODKY =============================
   Plakát na všech šířkách (na telefonu od 13. 10. 2026, Oliver vybral
   variantu C ze tří; na počítači od 13. 10. 2026 na Filipův pokyn):
   verzálky v šířce loga se zářezem a červenou tečkou jako nadpisy
   podstránek, na střed. Zářez dává stejná maska title-cut.svg (popis
   u nadpisu podstránek výše). Na počítači stejná velikost jako nadpisy
   podstránek, na telefonu podle šířky obrazovky (blok níže). */
.hero:not(.hero--inner) .hero__title {
    display: inline-block;
    font-size: clamp(2rem, 1.1rem + 4.2vw, 5.75rem);
    font-weight: var(--weight-semibold);
    font-stretch: 118%;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    -webkit-mask-image: url("../img/brand/title-cut.svg");
    mask-image: url("../img/brand/title-cut.svg");
    -webkit-mask-size: 100% 1.05em;
    mask-size: 100% 1.05em;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
}

.hero:not(.hero--inner) .hero__title strong,
.hero:not(.hero--inner) .hero__title-light {
    font-weight: inherit;
}

/* ============================ VĚJÍŘ OKEN ÚVODKY ==========================
   Tři okna se skutečnými weby (hero.php): prostřední rovně a vpředu,
   krajní natočená, níž a za ním. Pomalu se pohupují (čisté CSS, při
   omezeném pohybu stojí). Do 61.99rem jsou pod tlačítkem, od 62rem ve
   druhém sloupci vedle textu (blok ÚVODKA NA POČÍTAČI níže). */
.hero__windows {
    position: relative;
    z-index: var(--z-content);
    width: 100%;
    pointer-events: none;
}

.hero__window {
    position: absolute;
    top: 0;
    left: 50%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 10px;
    background-color: var(--panel-dark-2);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .45);
    transform: translateX(var(--x)) rotate(var(--r));
    animation: hero-window-float 7s ease-in-out infinite alternate;
}

.hero__window:nth-child(1) { --x: -92%; --r: -9deg; }
.hero__window:nth-child(2) { --x: -50%; --r: 0deg;  z-index: 2; animation-delay: -2s; }
.hero__window:nth-child(3) { --x: -8%;  --r: 9deg;  animation-delay: -4s; }

.hero__window-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 1.1rem;
    padding: 0 .5rem;
    border-bottom: 1px solid var(--border-on-dark);
}

.hero__window-bar span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .2);
}

.hero__window img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
}

/* ===================== ÚVODKA NA TELEFONU A TABLETU ======================
   Do 61.99rem: nadpis na střed, pod tlačítkem vějíř, který vyplní místo nad
   pásem log a hned ukáže práci. Okna přesahují okraje obrazovky (hero má
   overflow: hidden). Výška bloku počítá s výškou okna (62vw, snímek 16:10,
   lišta) a odsazením krajních oken. */
@media (max-width: 61.99rem) {
    .hero__windows {
        height: calc(62vw * .625 + 5rem);
        margin-top: var(--space-6);
    }

    .hero__window {
        width: 62vw;
    }

    .hero__window:nth-child(1),
    .hero__window:nth-child(3) {
        top: 2.2rem;
    }
}

@media (max-width: 47.99rem) {
    /* Plakát: velikost podle šířky. Při 10.6vw nejdelší slovo (NEVYPADAJÍ)
       vyplnilo celý řádek, Oliverovi to přišlo velké (13. 10. 2026),
       9vw nechává po stranách vzduch. */
    .hero:not(.hero--inner) .hero__title {
        font-size: 9vw;
    }

    .hero:not(.hero--inner) .hero__lead {
        font-size: 1.0625rem;
    }
}

/* ========================== ÚVODKA NA POČÍTAČI ===========================
   Od 62rem (od 14. 10. 2026 podle Filipova návrhu): dva sloupce. Vlevo
   nadpis, úvod a tlačítko zarovnané vlevo, vpravo vějíř oken. Text je
   odsazený od levého okraje víc než zbytek stránky, aby se nemačkal ke
   svislému ukazateli Posunout dolů. Nadpis má tři řádky: zvýrazněná část
   a pod ní vyvážená druhá část (NEVYPADAJÍ / JAKO OSTATNÍ). Vodoznak loga
   by stál za okny, proto tu není.

   Úvod pod nadpisem nemá vlastní maximální šířku, vyplní sloupec. Levý
   sloupec je o pětinu širší než pravý, aby se český úvod (asi 670 px)
   vešel na jeden řádek od šířky okna kolem 1440 px. Kde se nevejde (užší
   okna, delší anglický text), rozdělí se na dva vyrovnané řádky místo
   dlouhého řádku a krátkého zbytku. */
@media (min-width: 62rem) {
    .hero:not(.hero--inner) .hero__container--head {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-8);
    }

    .hero:not(.hero--inner) .hero__content {
        width: auto;
        margin-inline: 0;
        padding-left: clamp(1.5rem, 3vw, 4rem);
        text-align: left;
    }

    .hero:not(.hero--inner) .hero__title {
        font-size: clamp(2.75rem, 4vw, 5.25rem);
    }

    .hero:not(.hero--inner) .hero__title-light {
        text-wrap: balance;
    }

    .hero:not(.hero--inner) .hero__lead {
        max-width: none;
        margin-inline: 0;
        text-wrap: balance;
    }

    .hero:not(.hero--inner) .hero__watermark {
        display: none;
    }

    /* Okno je 56 % šířky sloupce, krajní okna tak přesahují jeho okraje jen
       o pár pixelů (do mezery mezi sloupci a do okraje stránky). Výška
       bloku: okno (16:10 a lišta) a posun krajních oken dolů. */
    .hero__windows {
        aspect-ratio: 1.4;
    }

    .hero__window {
        width: 56%;
        top: 14%;
    }

    .hero__window:nth-child(1),
    .hero__window:nth-child(3) {
        top: 24%;
    }

    .hero__window-bar {
        height: 1.4rem;
        gap: 6px;
        padding: 0 .7rem;
    }

    .hero__window-bar span {
        width: 7px;
        height: 7px;
    }
}

@keyframes hero-window-float {
    from { transform: translateX(var(--x)) rotate(var(--r)) translateY(0); }
    to   { transform: translateX(var(--x)) rotate(var(--r)) translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__window { animation: none; }
}

/* ============================ ÚVODNÍ SEKCE ===============================
   Dva lidi, žádný mezičlánek. Nahoře vlevo mezititulek a krátký úvod,
   vpravo rámeček se srovnáním, kudy jde zadání jinde a u nás. Pod tím
   přes celou šířku tři krátké body.

   Srovnání (od 13. 10. 2026 zpátky místo tiché pošty, vylepšené): nahoře
   věta zadání. Pod ní každá cesta jako řada zastávek spojených čarou.
   Jinde šedá přerušovaná čára přes pět lidí, u nás jedna barevná linka
   se září (stejná jako v postupu) mezi dvěma zastávkami. Pod každou cestou,
   co ze zadání dorazí na konec: jinde zbytek úzkým bledým písmem, u nás
   celá věta v šířce loga.

   Kreslení: přerušovaná čára se natahuje trhaně po úsecích mezi
   zastávkami (steps), barevná linka jedním plynulým tahem a dorazí dřív.
   Řádky „dorazí" se objeví, až čára dojede. Délky jdou z tokenů, při
   omezeném pohybu a bez JS je všechno hned celé. Na úzkých oknech jsou
   obě cesty vedle sebe jako dvě svislé koleje.
   ========================================================================= */

.intro__layout {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

/* Vedle sebe až od 75rem: mezi 64 a 75rem se pět zastávek srovnání do
   užšího sloupce nevešlo a stránka šla posouvat do strany (14. 10. 2026). */
@media (min-width: 75rem) {
    .intro__layout {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--space-10);
    }
}

.intro__text {
    min-width: 0;
}

/* Mezititulek úvodu: míchá tučný a tenký řez, končí červenou tečkou. */
.intro__claim {
    font-size: var(--size-h2);
    font-weight: var(--weight-semibold);
    line-height: 1.1;
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--space-5);
}

.intro__claim .light {
    font-weight: var(--weight-light);
}

.intro__claim .dot {
    color: var(--red);
}

.intro__body {
    max-width: 34rem;
    font-size: var(--size-subhead);
    line-height: var(--leading-body);
    color: var(--muted-2);
    margin-bottom: var(--space-6);
}

/* ------------------------------------------------------------ srovnání */

/* Na telefonu jsou obě cesty vedle sebe jako dvě stejně vysoké svislé
   koleje: vlevo pět zastávek na přerušované čáře, vpravo nahoře Vy a dole
   Filip a Oliver spojení jednou dlouhou barevnou linkou. Stejná
   vzdálenost, pět zastávek proti jednomu skoku. Popisek, kolej a řádek
   „dorazí" leží v obou sloupcích ve stejných řádcích mřížky (subgrid),
   takže koleje jsou stejně dlouhé, i když u nás dorazí delší text.
   Od 48rem jsou cesty pod sebou a zastávky vodorovně. */
.compare {
    --compare-rail: 2px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-4) var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background-color: var(--bg);
}

.compare__row {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    min-width: 0;
}

@media (min-width: 48rem) {
    .compare {
        grid-template-columns: none;
        grid-template-rows: none;
        gap: var(--space-7);
        padding: var(--space-7) var(--space-7) var(--space-6);
    }

    .compare__row {
        display: block;
        grid-row: auto;
    }
}

/* Věta zadání přes celou šířku rámečku, oddělená linkou od cest. */
.compare__brief {
    grid-column: 1 / -1;
    margin: 0 0 var(--space-2);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
}

@media (min-width: 48rem) {
    .compare__brief {
        margin: 0;
        padding-bottom: var(--space-6);
    }
}

.compare__brief-label {
    margin-bottom: var(--space-2);
    font-size: var(--size-small);
    color: var(--muted);
}

.compare__brief-text {
    margin: 0;
}

.compare__brief-text p {
    margin: 0;
    font-size: var(--size-h5);
    font-weight: var(--weight-light);
    line-height: 1.3;
    letter-spacing: var(--tracking-sub);
    color: var(--ink);
}

.compare__label {
    margin: 0;
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

@media (min-width: 48rem) {
    .compare__label {
        margin-bottom: var(--space-4);
    }
}

.compare__row--elsewhere .compare__label {
    color: var(--muted);
    font-weight: var(--weight-regular);
}

/* Zastávky jsou pod sebou a čára vede svisle vlevo. Kolej vyplní celou
   výšku sloupce, takže u nás leží Vy nahoře a Filip a Oliver dole. */
.compare__chain {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.compare__chain::before,
.compare__chain::after {
    content: '';
    position: absolute;
    top: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-5);
    width: var(--compare-rail);
    transform-origin: top;
    pointer-events: none;
}

.compare__chain::after {
    display: none;
}

.compare__stop {
    position: relative;
    z-index: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background-color: var(--surface);
    font-size: var(--size-small);
    line-height: 1.2;
    white-space: nowrap;
}

/* Co dorazí na konec cesty: popisek nahoře, pod ním text v uvozovkách. */
.compare__arrives {
    margin: 0;
    font-size: var(--size-small);
    line-height: 1.35;
}

@media (min-width: 48rem) {
    .compare__arrives {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 var(--space-3);
        margin-top: var(--space-4);
    }
}

.compare__arrives-label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--muted);
}

.compare__arrives-text {
    display: block;
    font-size: var(--size-body);
}

/* Jinde: šedá přerušovaná čára, tlumené zastávky a ze zadání zbude
   pár slov úzkým bledším písmem (Archivo na 72 % šířky). */
.compare__row--elsewhere .compare__chain::before {
    width: 0;
    border-left: 1px dashed var(--muted);
    opacity: .6;
}

.compare__row--elsewhere .compare__stop {
    color: var(--muted-2);
}

.compare__row--elsewhere .compare__arrives-text {
    font-stretch: 72%;
    color: var(--muted-2);
}

/* U nás: barevná linka se září, výrazná druhá zastávka a celá věta
   zadání v šířce loga (118 %). */
.compare__row--us .compare__chain::before,
.compare__row--us .compare__chain::after {
    background: linear-gradient(to bottom, var(--orange), var(--pink), var(--violet));
}

.compare__row--us .compare__chain::after {
    display: block;
    left: calc(var(--space-5) - var(--compare-rail) * 3);
    width: calc(var(--compare-rail) * 7);
    filter: blur(var(--space-2));
    opacity: .6;
}

.compare__row--us .compare__stop {
    border-color: var(--border-strong);
    color: var(--ink);
}

.compare__row--us .compare__stop:last-child {
    border-color: var(--ink);
    background-color: var(--ink);
    color: var(--text-on-dark);
    font-weight: var(--weight-medium);
}

.compare__row--us .compare__arrives-label {
    color: var(--ink);
    font-weight: var(--weight-semibold);
}

.compare__row--us .compare__arrives-text {
    font-stretch: 118%;
    color: var(--ink);
}

/* Od 48rem jsou zastávky v řadě a čára vede vodorovně. */
@media (min-width: 48rem) {
    .compare__chain {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .compare__stop {
        padding: var(--space-2) var(--space-4);
    }

    .compare__chain::before,
    .compare__chain::after {
        top: calc(50% - var(--compare-rail) / 2);
        bottom: auto;
        left: var(--space-5);
        right: var(--space-5);
        width: auto;
        height: var(--compare-rail);
        transform-origin: left;
    }

    .compare__row--elsewhere .compare__chain::before {
        top: 50%;
        width: auto;
        height: 0;
        border-left: 0;
        border-top: 1px dashed var(--muted);
    }

    .compare__row--us .compare__chain::before,
    .compare__row--us .compare__chain::after {
        background: linear-gradient(to right, var(--orange), var(--pink), var(--violet));
    }

    .compare__row--us .compare__chain::after {
        top: calc(50% - var(--compare-rail) * 3.5);
        left: var(--space-5);
        width: auto;
        height: calc(var(--compare-rail) * 7);
    }

    .compare__arrives-label {
        margin-bottom: 0;
    }
}

/* Kreslení čar, jen s JS a bez omezeného pohybu (tokeny). Přerušovaná
   čára jinde jde ve čtyřech skocích, po jednom úseku mezi zastávkami,
   a trvá dvakrát déle. Barevná linka u nás jede plynule a je hotová
   dřív. Řádek „dorazí" se ukáže, až jeho čára dojede. */
.js .compare[data-reveal] .compare__chain::before,
.js .compare[data-reveal] .compare__chain::after {
    transform: scaleY(0);
}

@media (min-width: 48rem) {
    .js .compare[data-reveal] .compare__chain::before,
    .js .compare[data-reveal] .compare__chain::after {
        transform: scaleX(0);
    }
}

.js .compare[data-reveal] .compare__arrives {
    opacity: 0;
}

.js .compare[data-reveal].is-revealed .compare__chain::before,
.js .compare[data-reveal].is-revealed .compare__chain::after {
    transform: none;
}

.js .compare[data-reveal].is-revealed .compare__arrives {
    opacity: 1;
}

.js .compare[data-reveal].is-revealed .compare__row--elsewhere .compare__chain::before {
    transition: transform calc(var(--dur-slow) * 2) steps(4, jump-end) var(--dur-med);
}

.js .compare[data-reveal].is-revealed .compare__row--us .compare__chain::before,
.js .compare[data-reveal].is-revealed .compare__row--us .compare__chain::after {
    transition: transform var(--dur-slow) var(--ease-out) var(--dur-med);
}

.js .compare[data-reveal].is-revealed .compare__row--elsewhere .compare__arrives {
    transition: opacity var(--dur-med) var(--ease-out) calc(var(--dur-slow) * 2 + var(--dur-med));
}

.js .compare[data-reveal].is-revealed .compare__row--us .compare__arrives {
    transition: opacity var(--dur-med) var(--ease-out) calc(var(--dur-slow) + var(--dur-med));
}

/* ------------------------------------------------------------ tři body */

.intro__points {
    display: grid;
    gap: var(--space-6);
    margin: var(--space-9) 0 0;
    padding: var(--space-7) 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
}

@media (min-width: 48rem) {
    .intro__points {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-7);
    }
}

.intro__point-title {
    margin-bottom: var(--space-2);
    font-size: var(--size-h5);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-sub);
    line-height: 1.25;
}

.intro__point-text {
    margin-bottom: 0;
    color: var(--muted-2);
    line-height: var(--leading-body);
}

/* ======================= SLUŽBY OTEVÍRANÉ SCROLLEM ======================
   Model reference: každá služba je řádek. Vlevo velký nadpis, který se
   při scrollu přišpendlí, vpravo média + text + tlačítko + harmonika.
   Celý řádek se prolne z průhlednosti, jak k němu dojedete. Přes celý
   řádek leží odkaz, nad kterým kurzor naroste v kolečko s popiskem.
   ========================================================================= */

.services-flow {
    padding-top: 0;
}

.service-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: var(--section-pad-m);
}

@media (min-width: 75rem) {
    .service-row {
        padding-top: calc(var(--header-height) + var(--space-5));
    }
}

/* Odkaz přes celý řádek. Kurzor nad ním přepne do režimu cta. */
.service-row__link {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.service-row__heading {
    width: 100%;
}

@media (min-width: 75rem) {
    .service-row__heading {
        width: 40%;
        position: sticky;
        top: calc(var(--header-height) + var(--space-5));
        align-self: flex-start;
    }

    /* Nadpis nesmí clonit odkazu přes celý řádek. */
    @media (hover: hover) {
        .service-row__heading {
            pointer-events: none;
        }
    }
}

/* Název služby vždy na jednom řádku a v běžné velikosti (Filip 14. 10.
   2026, „Aplikace, automatizace a AI“ se lámalo). Na počítači smí text
   přesáhnout sloupec nadpisu do mezery před obsahem, k obsahu ani animaci
   nedosáhne (ověřeno od 390 do 2560 px). */
.service-row__heading .display {
    margin-bottom: var(--space-6);
    white-space: nowrap;
}

.service-row__content {
    width: 100%;
    position: relative;
    z-index: 1;
}

@media (min-width: 75rem) {
    .service-row__content {
        width: 50%;
    }
}

.service-row__media {
    border-radius: var(--radius-media);
    overflow: hidden;
    margin-bottom: var(--space-8);
}

@media (min-width: 75rem) {
    .service-row__media {
        margin-bottom: var(--layout-xs);
    }
}

.service-row__media img,
.service-row__media video {
    width: 100%;
    aspect-ratio: 7 / 5;
    object-fit: cover;
}

.service-row__body {
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-5);
}

.service-row__accordion {
    margin-top: var(--space-8);
}

/* =========================== SEKCE S NADPISEM ============================ */

.section__head {
    margin-bottom: var(--space-8);
}

@media (min-width: 75rem) {
    .section__head {
        margin-bottom: var(--layout-sm);
    }
}

.section__head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
}

.section__head h2 {
    margin-bottom: 0;
}

/* Nadpis tmavého panelu prací je záměrně omezený sloupcem, ne fontem. */
.section__head--narrow h2 {
    max-width: none;
}

@media (min-width: 62rem) {
    .section__head--narrow h2 { width: 75%; }
}

@media (min-width: 75rem) {
    .section__head--narrow h2 { width: 41.666%; }
}

/* ================================ PROCES =================================
   Sekce Náš postup, viz components/process-section.php. Stejná podoba
   na homepage, přehledu služeb i detailu každé služby. Tmavý vložený
   panel se zářemi v rozích (jako výzva ke kalkulaci a patička), všechny
   fáze i s texty najednou.

   Linka: jediná, v barevném přechodu značky (oranžová, růžová, fialová,
   purpurová). Na tmavém panelu svítí, záře pod ní je rozmazaná kopie.
   Od 1024 px vede vodorovně nad fázemi, pod tím svisle vlevo. Za poslední
   fází se rozplyne. Mezi fázemi z ní vybíhá tenká dělicí čára v barvě
   linky v tom místě, která přejde do šedé.

   Fáze: velké obrysové číslo, které se u rozsvícené fáze vybarví (pod
   myší, na telefonu ta uprostřed obrazovky, třída is-current z motion.js).
   Po celém panelu jde za kurzorem jedno světlo, viz níže.

   Kreslení spouští jediná třída is-revealed na obalu (data-reveal,
   motion.js): linka se natáhne a fáze naskočí, když k nim dojede
   (--process-i krát --process-step). Délky jdou z tokenů, takže při
   omezeném pohybu je všechno hned celé. Bez JS taky.
   ========================================================================= */

.process {
    --process-rail:   2px;                            /* tloušťka linky */
    --process-glow:   12px;                           /* rozmazání záře */
    --process-glow-opacity: .8;                       /* na tmavém záře svítí víc */
    --process-rule:   var(--border-on-dark);          /* šedá, do které přejde dělicí čára */
    --process-step:   calc(var(--dur-slow) * .375);   /* odstup mezi fázemi, .3 s */
    --process-colors: var(--orange), var(--pink) 25%, var(--violet) 50%, var(--purple) 75%, transparent;
    position: relative;
}

/* ------------------------------------------- hlava sekce s úvodem vedle */

.process__intro {
    max-width: 32rem;
    margin: var(--space-5) 0 0;
    font-size: var(--size-subhead);
    line-height: var(--leading-body);
    color: var(--muted-2-on-dark);
}

@media (min-width: 64rem) {
    .process__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
        gap: var(--space-8);
        align-items: end;
    }

    .process__intro {
        margin: 0;
    }
}

/* ------------------------------------------------------------ linka */

/* Linka (::before) a její záře (::after). Výchozí je svislá vlevo. */
.process::before,
.process::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--process-rail);
    border-radius: var(--radius-pill);
    background: linear-gradient(to bottom, var(--process-colors));
    transform-origin: top;
    pointer-events: none;
}

.process::after {
    left: calc(var(--process-rail) * -3);
    width: calc(var(--process-rail) * 7);
    filter: blur(var(--process-glow));
    opacity: var(--process-glow-opacity);
}

/* ------------------------------------------------------------- fáze */

.process__list {
    display: grid;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.process__phase {
    --process-c: var(--purple);
    --process-i: 0;
    position: relative;
    padding: var(--space-6) 0 0 var(--space-6);
}

.process__phase:nth-child(1) { --process-c: var(--orange); }
.process__phase:nth-child(2) { --process-c: var(--pink);   --process-i: 1; }
.process__phase:nth-child(3) { --process-c: var(--violet); --process-i: 2; }
.process__phase:nth-child(4) { --process-i: 3; }
.process__phase:nth-child(5) { --process-i: 4; }
.process__phase:nth-child(6) { --process-i: 5; }

/* Dělicí čára mezi fázemi: pod sebou vodorovně, vybíhá z linky. */
.process__phase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, var(--process-c), var(--process-rule) 45%, transparent);
    transform-origin: left;
    pointer-events: none;
}

.process__phase:first-child::before {
    display: none;
}

/* ------------------------------------------------- světlo přes celý panel
   Jedno světlo pro celý tmavý panel (.process__glow v pozadí sekce), ne
   každá fáze zvlášť. Jde za kurzorem po celé sekci, i přes nadpis
   a dělicí čáry, a plynule se přebarví do barvy fáze, nad kterou je.
   Na telefonu se přesune k fázi uprostřed obrazovky.

   Kvůli plynulosti je to kruh pevné velikosti, který motion.js jen
   posouvá (transform), takže ho posunuje grafická karta a nic se znovu
   nepřekresluje. Pod myší jde přímo za kurzorem bez zpoždění (třída
   is-tracking vypne přechod polohy), na telefonu mezi fázemi klouže.
   Přebarvení dělá registrovaná proměnná --process-spot-c. */

@property --process-spot-c {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

.process-panel {
    --process-spot: 26rem;                            /* poloměr světla */
}

.process__glow {
    --process-spot-c: var(--pink);
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--process-spot) * 2);
    aspect-ratio: 1;
    margin: calc(var(--process-spot) * -1) 0 0 calc(var(--process-spot) * -1);
    background: radial-gradient(closest-side,
                color-mix(in srgb, var(--process-spot-c) 30%, transparent), transparent 70%);
    opacity: 0;
    will-change: transform;
    transition: opacity var(--dur-med) var(--ease-out),
                transform var(--dur-slow) var(--ease-out),
                --process-spot-c var(--dur-slow) var(--ease-out);
    pointer-events: none;
}

.process-panel.is-tracking .process__glow {
    transition: opacity var(--dur-med) var(--ease-out),
                --process-spot-c var(--dur-slow) var(--ease-out);
}

.process-panel.is-lit .process__glow {
    opacity: 1;
}

/* ------------------------------------------------------------- obsah */

/* Velké obrysové číslo. Bez podpory obrysu písma zůstane plné a tlumené. */
.process__num {
    margin-bottom: var(--space-4);
    font-size: calc(var(--size-h2) * 1.7);
    font-weight: var(--weight-light);
    letter-spacing: var(--tracking-heading);
    line-height: 1;
    color: var(--muted-on-dark);
    transition: color var(--dur-med) var(--ease-out),
                -webkit-text-stroke-color var(--dur-med) var(--ease-out);
}

@supports (-webkit-text-stroke: 1px) {
    .process__num {
        color: transparent;
        -webkit-text-stroke: 1px var(--muted-on-dark);
    }

    .process__phase.is-current .process__num {
        color: var(--process-c);
        -webkit-text-stroke-color: var(--process-c);
    }

    @media (hover: hover) and (pointer: fine) {
        .process__phase:hover .process__num {
            color: var(--process-c);
            -webkit-text-stroke-color: var(--process-c);
        }
    }
}

.process__title {
    margin-bottom: var(--space-5);
    color: var(--text-on-dark);
}

/* Přepínač fáze na telefonu (initProcessToggle v main.js). Leží přes celé
   číslo s názvem, takže se dá klepnout kamkoli na ně; vpravo u názvu je
   plus, po otevření mínus (jako u dotazů). Bez JS a od 64rem je skrytý
   atributem hidden a všechno je rozbalené. */
.process__top {
    position: relative;
}

.process__toggle {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    padding: 0 0 .35em;
    border: 0;
    background: none;
    color: var(--text-on-dark);
    cursor: pointer;
}

.process__toggle[hidden] {
    display: none;
}

.process__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

.process__toggle-icon {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
}

.process__toggle-icon::before,
.process__toggle-icon::after {
    content: '';
    position: absolute;
    background-color: currentColor;
    transition: transform var(--dur-med) ease-out;
}

.process__toggle-icon::before {
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
}

.process__toggle-icon::after {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
}

.process__toggle[aria-expanded="true"] .process__toggle-icon::after {
    transform: rotate(90deg);
}

/* Sbalená fáze: jen číslo s názvem. */
.is-collapsible .process__phase:not(.is-open) .process__more {
    display: none;
}

.is-collapsible .process__phase:not(.is-open) .process__title {
    margin-bottom: 0;
}

.is-collapsible .process__list {
    gap: var(--space-6);
}

.process__stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.process__stat-value {
    font-size: var(--size-h4);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-heading);
    color: var(--text-on-dark);
}

.process__stat-label {
    font-size: var(--size-small);
    color: var(--muted-2-on-dark);
}

.process__text,
.process__step-text {
    margin-bottom: 0;
    font-size: var(--size-small);
    line-height: var(--leading-body);
    color: var(--muted-2-on-dark);
}

.process__steps {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.process__step-label {
    margin-bottom: var(--space-1);
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
    color: var(--text-on-dark);
}

/* Co dostanete: tlumené štítky, aby ve sloupci nepřebily text. */
.process__label {
    margin: var(--space-6) 0 var(--space-3);
    font-size: var(--size-small);
    color: var(--muted-on-dark);
}

.process__deliverables {
    margin: 0;
    padding: 0;
    list-style: none;
}

.process__deliverables .tag {
    border-color: var(--border-on-dark);
    color: var(--muted-2-on-dark);
}

/* Na tabletu jsou fáze pořád pod sebou, ale dílčí kroky uvnitř fáze se
   vejdou vedle sebe, ať se sekce zbytečně netáhne do výšky. */
@media (min-width: 48rem) {
    .process__steps {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        gap: var(--space-5) var(--space-7);
    }
}

/* ------------------------------------------------- od 1024 px v jedné řadě */

@media (min-width: 64rem) {
    .process::before,
    .process::after {
        bottom: auto;
        right: 0;
        width: auto;
        height: var(--process-rail);
        background: linear-gradient(to right, var(--process-colors));
        transform-origin: left;
    }

    .process::after {
        top: calc(var(--process-rail) * -3);
        left: 0;
        height: calc(var(--process-rail) * 7);
    }

    .process__list {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0;
    }

    .process__phase {
        padding: var(--space-8) var(--space-5) var(--space-6);
    }

    /* První fáze začíná u okraje, pod nadpisem. */
    .process__phase:first-child {
        padding-left: 0;
    }

    /* Dělicí čára svisle dolů z linky, přejde do šedé. */
    .process__phase::before {
        bottom: 0;
        right: auto;
        width: 1px;
        height: auto;
        background: linear-gradient(to bottom, var(--process-c), var(--process-rule) 40%, transparent);
        transform-origin: top;
    }

    .process__steps {
        grid-template-columns: none;
        gap: var(--space-5);
    }
}

/* ----------------------------------------------------------- kreslení */

/* Obal sám nenaskakuje, jen nese třídu is-revealed pro všechno uvnitř. */
.js .process[data-reveal] {
    opacity: 1;
    transform: none;
}

.js .process::before,
.js .process::after {
    transform: scaleY(0);
}

.js .process .process__phase {
    opacity: 0;
    transform: translateY(var(--space-5));
}

.js .process .process__phase::before {
    transform: scaleX(0);
}

@media (min-width: 64rem) {
    .js .process::before,
    .js .process::after {
        transform: scaleX(0);
    }

    .js .process .process__phase::before {
        transform: scaleY(0);
    }
}

.js .process.is-revealed::before,
.js .process.is-revealed::after {
    transform: none;
    transition: transform calc(var(--process-step) * 4) linear;
}

.js .process.is-revealed .process__phase {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--process-i) * var(--process-step));
}

.js .process.is-revealed .process__phase::before {
    transform: none;
    transition: transform var(--dur-slow) var(--ease-out)
                calc(var(--process-i) * var(--process-step));
}

/* Pojistka viditelnosti fází, když odhalení z motion.js nepřijde. Stejný
   princip a stejné hodnoty jako u [data-reveal] v components.css, odkud je
   i @keyframes reveal-failsafe. Dělicí čáry (::before, ::after) zůstanou
   v tom případě schované, jsou jen ozdoba. */
@supports (animation-timeline: view()) {
    .js .process:not(.is-revealed) .process__phase {
        animation: reveal-failsafe linear forwards;
        animation-timeline: view();
        animation-range: cover 45vh cover 60vh;
    }
}

@supports not (animation-timeline: view()) {
    .js .process:not(.is-revealed) .process__phase {
        animation: reveal-failsafe 1.2s var(--ease-out) 3s forwards;
    }
}

/* ========================== ÚVOD DETAILU SLUŽBY ========================== */

.service-intro {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 75rem) {
    .service-intro {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-11);
        align-items: start;
    }
}

/* Co dostanete (od 13. 10. 2026): úplný seznam položek služby ve dvou
   sloupcích vpravo od přišpendleného nadpisu, mezi položkami vlasové
   čáry jako v seznamu služeb. Pod tím Na konci máte: krátké položky jako
   štítky, aby na první pohled bylo vidět, co klient drží v ruce. */
.service-features {
    display: grid;
    gap: 0 var(--space-7);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .service-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.service-feature {
    padding-block: var(--space-5);
    border-top: 1px solid var(--border);
}

.service-feature__title {
    margin: 0 0 var(--space-2);
    font-size: var(--size-h5);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-sub);
    line-height: 1.25;
}

.service-feature__text {
    margin: 0;
    color: var(--muted-2);
    line-height: var(--leading-body);
}

.service-outcome {
    margin-top: var(--space-9);
}

.service-outcome__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-outcome__item {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-medium);
}

/* ===================== PRVNÍ KROK ZDARMA (VIDEO PROHLÍDKA) ================
   Od 13. 10. 2026. Na úvodce pás ve dvou sloupcích (nadpis vlevo, text
   a tlačítko vpravo) mezi vlasovými čarami, na kontaktu menší rámeček
   v postranním sloupci. Komponenta includes/components/review-offer.php. */
.review-offer {
    padding-block: var(--space-7);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.review-offer__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
}

.review-offer__text {
    margin: 0;
    max-width: 38rem;
    font-size: var(--size-subhead);
    line-height: var(--leading-body);
    color: var(--muted-2);
}


/* =========================== PŘÍPADOVÁ STUDIE ============================
   Od 12. 10. 2026 (Oliver: nadpis „odskočený", obsah „zúžený"). Všechno
   na plné šířce kontejneru a na jedné levé hraně s nadpisem. Pod nadpisem
   velké okno prohlížeče s webem klienta (stejné jako v portfoliu), pod ním
   řádek údajů. Texty od 64rem ve dvou sloupcích: nadpis sekce vlevo
   v pětině šířky, text vpravo s délkou řádku --measure. Galerie přes celou
   šířku. Mezi bloky jen vzduch, čáry jen tam, kde oddělují údaje.
   ========================================================================= */

/* Okno používá proměnné okna z components.css (.showcase), tady je
   pod jiným rodičem, proto vlastní kopie hodnot pro světlé pozadí. */
.case__window {
    --showcase-edge: rgba(0, 0, 0, .14);
    --showcase-shadow: 0 50px 100px -50px rgba(0, 0, 0, .45);
}

/* Okno má na širokém displeji přes 1600 px, tak větší lišta a zaoblení,
   ať nevypadá jako zvětšená miniatura. */
@media (min-width: 64rem) {
    .case__window .showcase__window { border-radius: 18px; }
    .case__window .showcase__bar { height: 3rem; padding-inline: var(--space-5); }
    .case__window .showcase__dots span { width: 11px; height: 11px; }
    .case__window .showcase__url { flex-basis: 24rem; font-size: var(--size-small); }
}

/* Malý tlumený popisek nad údajem. Používá ho i detail služby a právní
   stránky. */
.case__meta-label {
    font-size: var(--size-small);
    color: var(--muted);
    margin-bottom: var(--space-2);
}

/* Údaje: od 48rem v řádku, popisek malý a tlumený nad hodnotou. */
.case__facts {
    display: grid;
    gap: var(--space-5);
    margin: var(--space-8) 0 0;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border);
}

@media (min-width: 48rem) {
    .case__facts {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        gap: var(--space-7);
    }
}

.case__facts dt {
    margin-bottom: var(--space-2);
    font-size: var(--size-small);
    color: var(--muted);
}

.case__facts dd {
    margin: 0;
    font-size: var(--size-h5);
    letter-spacing: var(--tracking-sub);
    line-height: 1.3;
}

.case__visit {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color var(--dur-fast) var(--ease-out);
}

.case__visit:hover { color: var(--pink-ink); }

.case__visit:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

.case__body {
    margin-top: var(--space-10);
}

.case__section + .case__section {
    margin-top: var(--space-10);
}

@media (min-width: 75rem) {
    .case__body,
    .case__section + .case__section {
        margin-top: var(--space-11);
    }
}

/* Texty studie stojí v rozložení .split (layout.css): nadpis sekce vlevo,
   text vpravo. Text je od 48rem o stupeň větší než běžný text, studie se
   čte jako článek. */
.case__prose {
    font-size: 1.0625rem;
    color: var(--muted-2);
}

@media (min-width: 48rem) {
    .case__prose { font-size: var(--size-subhead); }
}

.case__prose p:last-child { margin-bottom: 0; }

.case__gallery {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 48rem) {
    .case__gallery--2 { grid-template-columns: repeat(2, 1fr); }
    .case__gallery--3 { grid-template-columns: repeat(3, 1fr); }
}

.case__gallery img,
.case__image img,
.case__image video {
    width: 100%;
    border-radius: var(--radius-panel);
    box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .4);
}

/* Reference: velká citace na střed, nad ní a pod ní vzduch jako mezi
   sekcemi. */
.case__quote {
    margin-top: var(--space-11);
}

@media (min-width: 75rem) {
    .case__quote { margin-top: var(--space-12); }
}

.case__stats {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 36rem) {
    .case__stats { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

.case__stat-value {
    font-size: var(--size-h2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-heading);
    line-height: 1;
    color: var(--pink-ink);
}

.case__stat-label {
    color: var(--muted-2);
    margin-top: var(--space-2);
}

/* Sousední projekty: dva velké odkazy, název v šířce loga. Následující
   je vždy vpravo, i když předchozí chybí. */
.case__nav {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-11);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
}

@media (min-width: 48rem) {
    .case__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .case__nav-link--next { grid-column: 2; text-align: right; }
}

@media (min-width: 75rem) {
    .case__nav { margin-top: var(--space-12); }
}

.case__nav-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.case__nav-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--size-small);
    color: var(--muted);
}

.case__nav-name {
    display: inline-block;
    font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
    font-weight: var(--weight-medium);
    font-stretch: 112%;
    letter-spacing: var(--tracking-sub);
    line-height: 1.05;
    transition: color var(--dur-fast) var(--ease-out),
                transform var(--dur-med) var(--ease-out);
}

.case__nav-link--prev .case__nav-name::before { content: '← '; }
.case__nav-link--next .case__nav-name::after  { content: ' →'; }

.case__nav-link:hover .case__nav-name { color: var(--pink-ink); }
.case__nav-link--prev:hover .case__nav-name { transform: translateX(-.25rem); }
.case__nav-link--next:hover .case__nav-name { transform: translateX(.25rem); }

.case__nav-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .case__nav-link:hover .case__nav-name { transform: none; }
}

/* ========================= PRŮVODCE CENOU (FORMULÁŘ) ===================== */

/* Věta nad formulářem pro ty, kdo ho nepotřebují (jen správa nebo SEO).
   Odkaz je vidět hned, ne až po najetí, stejně jako u odkazu na zásady
   pod formulářem (.form-note a). */
.cost-direct a {
    color: var(--ink);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.cost-direct a:hover {
    color: var(--pink-ink);
}

.quote-form {
    position: relative;
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background-color: var(--surface);
}

.quote-form__progress {
    display: none;
    margin-bottom: var(--space-7);
}

.js .quote-form__progress { display: block; }

.quote-form__progress-track {
    height: 3px;
    border-radius: var(--radius-pill);
    background-color: var(--border);
    overflow: hidden;
}

/* Pruh má vždy plnou šířku a zkracuje se měřítkem zleva (quote-form.js
   nastaví scaleX podle kroku). Měřítko počítá grafická karta, změna
   šířky by při každém snímku přepočítávala rozvržení (od 13. 10. 2026).
   Zaoblené konce drží dráha (overflow: hidden). */
.quote-form__progress-bar {
    height: 100%;
    width: 100%;
    background: var(--gradient-brand);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-med) var(--ease-out);
}

.quote-form__progress-label {
    margin-top: var(--space-3);
    font-size: var(--size-small);
    color: var(--muted);
}

.quote-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.quote-step + .quote-step {
    margin-top: var(--space-10);
    padding-top: var(--space-9);
    border-top: 1px solid var(--border);
}

.js .quote-step {
    display: none;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.js .quote-step.is-active {
    display: flex;
}

.quote-step__title {
    font-size: var(--size-h3);
    margin-bottom: 0;
}

.quote-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-8);
}

.field--conditional[hidden] { display: none; }

.quote-summary {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-media);
    background-color: var(--bg);
    font-size: var(--size-small);
}

.quote-summary__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}

.quote-summary__row:last-child { border-bottom: 0; padding-bottom: 0; }

.quote-summary__label { color: var(--muted); }
.quote-summary__value { text-align: right; }

/* ------------------------------------------------- obsah dlouhého textu */

.guide__layout {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 62rem) {
    .guide__layout {
        grid-template-columns: 18rem 1fr;
        gap: var(--space-10);
        align-items: start;
    }
}

/* Obsah stránky. Přišpendlený je jen ve dvousloupcovém rozvržení.
   V jednom sloupci by zůstal viset na místě a text by se pod ním
   posouval, takže by se překrývaly. */
.guide__contents {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
}

@media (min-width: 62rem) {
    .guide__contents {
        position: sticky;
        top: calc(var(--header-height) + var(--space-6));
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
        /* Delší obsah než je okno by se jinak dole uřízl a poslední
           odkazy by nešly nijak zobrazit. */
        max-height: calc(100vh - var(--header-height) - var(--space-10));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.guide__contents-title {
    font-size: var(--size-label);
    letter-spacing: var(--tracking-sub);
    color: var(--muted);
    margin-bottom: var(--space-4);
}

.guide__contents-list li + li { margin-top: var(--space-4); }

.guide__contents-link {
    color: var(--muted-2);
    font-size: var(--size-body);
    line-height: var(--leading-body);
}

.guide__contents-link:hover,
.guide__contents-link.is-current {
    color: var(--pink-ink);
}

/* Text průvodce vyplní svůj sloupec. Obecná šířka .prose (--measure) je
   pro jednosloupcovou sazbu; tady sloupec sám drží délku řádku, takže by
   se text zbytečně mačkal doleva a vpravo od něj by zůstalo prázdno. */
@media (min-width: 62rem) {
    .guide__section .prose { max-width: none; }
}

.guide__section + .guide__section {
    margin-top: var(--space-10);
}

.guide__section h2 {
    font-size: var(--size-h3);
    line-height: 1.2;
    margin-bottom: var(--space-5);
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

/* ================================ KONTAKT ================================ */

.contact__layout {
    display: grid;
    gap: var(--space-9);
}

@media (min-width: 62rem) {
    .contact__layout {
        grid-template-columns: 1.2fr 1fr;
        gap: var(--space-11);
        align-items: start;
    }
}

.contact__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.contact__group-title {
    font-size: var(--size-label);
    color: var(--muted);
    margin-bottom: var(--space-3);
}

.contact__value {
    font-size: var(--size-h4);
    letter-spacing: var(--tracking-sub);
}

a.contact__value:hover { color: var(--pink-ink); }

/* ============ KOMPONENTY UVNITŘ TMAVÉHO PANELU ===========================
   Prvky níže se používají na světlé stránce i uvnitř tmavého panelu.
   Výchozí barvy jsou pro světlý podklad, tady se přepnou na tmavý,
   aby text nikde nesplynul s pozadím.
   ========================================================================= */

.inverted .case__meta-label,
.inverted .contact__group-title,
.inverted .guide__contents-title {
    color: var(--muted-on-dark);
}

.inverted .case__stat-label,
.inverted .stat__label,
.inverted .guide__contents-link,
.inverted .quote__role,
.inverted .field__desc,
.inverted .option__note,
.inverted .form-note {
    color: var(--muted-2-on-dark);
}

.inverted .case__facts,
.inverted .case__nav {
    border-color: var(--border-on-dark);
}

/* ============================== O NÁS ==================================== */

.values-grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .values-grid { grid-template-columns: repeat(2, 1fr); }
}

.value__title {
    font-size: var(--size-h4);
    margin-bottom: var(--space-3);
}

.value__title::before {
    content: '';
    display: inline-block;
    width: .5em;
    height: .5em;
    margin-right: .5em;
    border-radius: 50%;
    background-color: var(--red);
    vertical-align: middle;
}

.stats-row {
    display: grid;
    gap: var(--space-7);
    padding-block: var(--space-9);
}

/* Počet sloupců se řídí tím, kolik čísel je doplněných. Šablona vynechá
   číslo, které majitelé ještě nedodali, a mřížka pak nenechá prázdný sloupec. */
@media (min-width: 48rem) {
    .stats-row { grid-template-columns: repeat(3, 1fr); }
    .stats-row--2 { grid-template-columns: repeat(2, 1fr); }
    .stats-row--1 { grid-template-columns: 1fr; }
}

/* Čísla v šířce loga (118 %), stejně jako nadpisy podstránek. */
.stat__value {
    font-size: var(--size-h2);
    font-weight: var(--weight-semibold);
    font-stretch: 118%;
    letter-spacing: var(--tracking-heading);
    line-height: 1;
}

.stat__label {
    color: var(--muted-2);
    margin-top: var(--space-2);
}

/* Telefon (od 13. 10. 2026, Filip schválil): čísla jako přehled v řádcích
   mezi vlasovými čarami, číslo vlevo, popisek vpravo na stejné výšce.
   Dřív stála pod sebou s velkými mezerami a malým písmem a působila jako
   zapomenuté řádky textu. */
@media (max-width: 47.99rem) {
    .stats-row {
        gap: 0;
        padding-block: var(--space-8);
    }

    .stats-row > * {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: baseline;
        gap: var(--space-4);
        padding-block: var(--space-5);
        border-top: 1px solid var(--border);
    }

    .stats-row > :last-child {
        border-bottom: 1px solid var(--border);
    }

    .inverted .stats-row > * {
        border-color: var(--border-on-dark);
    }

    .stat__value {
        font-size: clamp(2rem, 1.5rem + 2.5vw, 2.5rem);
    }

    .stat__label {
        margin-top: 0;
    }
}

.team-grid {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 48rem) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}

.member__photo {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-panel);
    overflow: hidden;
    background-color: var(--surface);
    margin-bottom: var(--space-5);
}

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

.member__name { font-size: var(--size-h4); margin-bottom: var(--space-1); }
.member__role { color: var(--pink-ink); margin-bottom: var(--space-3); }

/* Role je volitelná (šablona ji vynechá, když je prázdná). Medailonek,
   který následuje hned za jménem, by jinak seděl příliš těsně. */
.member__name + .text-muted { margin-top: var(--space-2); }

/* Portréty zatím nejsou a šablona pro ně nevykreslí žádné místo. Dvojice pak
   stojí jen na typografii: pevná linka nahoře dává každému sloupci začátek
   a větší jméno nahrazuje váhu, kterou by jinak nesla fotka. */
.member--no-photo {
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-strong);
}

.member--no-photo .member__name { font-size: var(--size-h3); }

/* Medailonky mají různou délku. Když jsou sloupce stejného druhu (všichni
   mají portrét, nebo nikdo), přitlačí se kontakt ke spodku sloupce, ať oba
   stojí na stejné lince. To zapíná třída team-grid--aligned, kterou nastavuje
   šablona about.php. Odstup od medailonku drží jeho vlastní spodní okraj.
   Ve flexu se okraje nesloučí jako v běžném toku, takže by každý další odstup
   navíc udělal mezeru příliš velkou. */
.member {
    display: flex;
    flex-direction: column;
}

/* Základ je obyčejný odstup za medailonkem. Auto by u smíšené dvojice
   (portrét má jen jeden člen) odtlačilo kontakt druhého o celou výšku
   portrétu pod jeho text, protože sloupec bez fotky je v mřížce stejně
   vysoký jako ten s fotkou. */
.member__contact { margin-top: var(--space-2); }

.team-grid--aligned .member__contact { margin-top: auto; }

/* Kontakt jako vizitka: tenká linka oddělí místo a telefon od medailonku.
   Místo je drobný šedý údaj, telefon větší, aby se na něj dalo pohodlně
   ťuknout. Číslo se nikdy nezalomí uprostřed. */
.member__contact {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.member__location {
    font-size: var(--size-label);
    color: var(--muted);
    margin-bottom: var(--space-1);
}

.member__phone {
    font-size: var(--size-h5);
    letter-spacing: var(--tracking-sub);
    white-space: nowrap;
}

/* Osamocená reference (na homepage je teď jen jedna). Ve třísloupcové mřížce
   by zůstala úzká karta a dva prázdné sloupce, tak se roztáhne na šířku
   sloupce běžného textu. Víc referencí se řadí do mřížky jako dřív. */
.service-grid > .quote:only-child {
    grid-column: 1 / -1;
    max-width: var(--measure);
}

/* Uvozovky reference jsou ve components.css české („ a “). Anglická verze
   citace je teď překlad, takže na anglických stránkách patří k textu
   anglické uvozovky (“ a ”). Specifičností (:lang + třída) přebije původní
   pravidlo bez ohledu na pořadí souborů. */
:lang(en) .quote__text::before { content: '\201C'; }
:lang(en) .quote__text::after  { content: '\201D'; }

/* =============================== STYLEGUIDE ==============================
   Jen pro vývojářskou stránku /styleguide, na ostrém webu se nepoužije.
   ========================================================================= */

.sg-top {
    padding-top: calc(var(--header-height) + var(--space-9));
}

.sg-title { max-width: 14ch; }

.sg-var { font-size: var(--size-small); }

.sg-swatch {
    height: 5rem;
    border-radius: var(--radius-media);
    border: 1px solid var(--border);
}

.sg-swatch--bg          { background: var(--bg); }
.sg-swatch--surface     { background: var(--surface); }
.sg-swatch--panel-dark  { background: var(--panel-dark); }
.sg-swatch--ink         { background: var(--ink); }
.sg-swatch--red         { background: var(--red); }
.sg-swatch--pink        { background: var(--pink); }
.sg-swatch--lime        { background: var(--lime); }
.sg-swatch--border      { background: var(--border); }

.sg-messages {
    display: grid;
    gap: var(--space-4);
}

/* ========================== PATIČKOVÝ FORMULÁŘ ===========================
   Nahoře závěrečná výzva stránky (nadpis, věta, případně odkaz na
   kalkulaci), od 12. 10. 2026 místo samostatného tmavého pásu nad patičkou.
   Od 75rem výzva vlevo a formulář vpravo ve stejném poměru jako ostatní
   bloky webu (.split v layout.css, 2 : 3), níž výzva nad formulářem.
   Formulář má dva sloupce: vlevo jméno, e-mail a velká zpráva, vpravo
   firma, telefon, čárkovaný box na zadání, věta o údajích a Odeslat.
   ========================================================================= */

.footer-form {
    display: grid;
    gap: var(--space-7);
    padding-bottom: var(--space-10);
    margin-bottom: var(--space-9);
}

@media (min-width: 75rem) {
    .footer-form {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: var(--space-9);
        align-items: start;
    }
}

.footer-form__title {
    margin: 0;
    font-size: var(--size-h2);
    text-wrap: balance;
}

.footer-form__text {
    max-width: 30rem;
    margin: var(--space-4) 0 0;
    color: var(--muted-2-on-dark);
    line-height: var(--leading-relaxed);
}

.footer-form__link {
    margin: var(--space-5) 0 0;
}

.footer-form__link a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
    transition: color var(--dur-fast) var(--ease-out);
}

.footer-form__link a:hover { color: var(--pink); }

.footer-form__link a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

.footer-form__grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 62rem) {
    .footer-form__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
        align-items: stretch;
    }
}

.footer-form__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Zpráva vyplní zbývající výšku levého sloupce. */
.field--grow {
    flex: 1;
    display: flex;
}

.field--grow .field__control {
    flex: 1;
    min-height: 12rem;
    resize: none;
}

.footer-form__submit {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.footer-form__message {
    grid-column: 1 / -1;
}