/*
 * joyfor space – styly podle návrhu Joyfor-space-2026.xd
 *
 * Kompozice z návrhu (šířka 1920 px) se přepočítávají přes --u = 1 px návrhu,
 * takže na počítači a tabletu odpovídají rozměry návrhu. Na mobilu (< 900 px)
 * mají sekce vlastní, jednosloupcové rozložení.
 */

/* ---------- Písma ---------- */

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url("../fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 100 1000;
    font-display: swap;
    src: url("../fonts/dm-sans-latin-ext-wght-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 100 1000;
    font-display: swap;
    src: url("../fonts/dm-sans-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- Proměnné ---------- */

:root {
    --c-bg: #f8f8f4;
    --c-dark: #072928;
    --c-teal: #168d8f;
    --c-teal-light: #22a9ad;
    --c-grey: #aeb0b3;
    --c-line: rgba(7, 41, 40, .5);
    --c-line-light: rgba(34, 169, 173, .7);

    /* Cy (Supertype) z Adobe Fonts – ID kitu je v administraci (Menu, patička, kontakty → SEO a vzhled).
       Číslování řezů v Adobe: Cy Light = 300, Cy Regular = 500. */
    --f-display: "cy", system-ui, sans-serif;
    --f-text: "DM Sans", system-ui, sans-serif;
    --w-display-light: 300;
    --w-display: 500;

    /* 1 px návrhu (šířka 1920), nad 1920 px se kompozice už nezvětšuje */
    --u: calc(min(100vw, 1920px) / 1920);
    --gutter: clamp(20px, calc(140 * var(--u)), 140px);
    --max: 1920px;

    --fs-section: max(26px, calc(40 * var(--u)));
    --fs-body: max(16px, calc(20 * var(--u)));
    --fs-lead: max(17px, calc(24 * var(--u)));
    --fs-small: max(15px, calc(18 * var(--u)));
    --fs-link: max(16px, calc(20 * var(--u)));

    --ease: cubic-bezier(.22, .61, .36, 1);
    --header-h: max(76px, calc(150 * var(--u)));
}

/* ---------- Základ ---------- */

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

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

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-dark);
    font-family: var(--f-text);
    font-weight: 300;
    font-size: var(--fs-body);
    line-height: 1.5;
    /* Cy střídá číslice za hranaté varianty (calt) – v letopočtech a telefonech to vypadá jako chyba */
    font-variant-ligatures: no-contextual;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: normal; }
address { font-style: normal; }
[hidden] { display: none !important; }

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

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 1rem; top: -100px;
    z-index: 200;
    padding: .6rem 1rem;
    background: var(--c-dark);
    color: var(--c-bg);
}
.skip-link:focus { top: 1rem; }

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

.accent, em.accent { color: var(--c-teal); }

.section { padding-block: max(64px, calc(110 * var(--u))); }

.section-title {
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    font-size: var(--fs-section);
    line-height: 1.2;
    letter-spacing: -.005em;
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    margin-bottom: max(20px, calc(26 * var(--u)));
}

.section-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: max(28px, calc(56 * var(--u)));
}

/* ---------- Dekorativní linky z návrhu ---------- */

.rule {
    display: block;
    position: relative;
    height: 1px;
    background: var(--c-line);
}
.rule::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 1px;
    height: max(14px, calc(25 * var(--u)));
    background: inherit;
}
.rule--end::before { left: auto; right: 0; }
.rule--light { background: var(--c-line-light); }

.rule--vertical {
    position: absolute;
    left: calc(-41 * var(--u));
    top: max(8px, calc(14 * var(--u)));
    bottom: 0;
    width: 1px;
    height: auto;
}
.rule--vertical::before {
    left: 0; top: 0;
    width: max(14px, calc(26 * var(--u)));
    height: 1px;
}

.rule--bracket {
    position: absolute;
    width: 1px;
    height: auto;
}
.rule--bracket::before {
    left: auto; right: 0; top: 0;
    width: max(14px, calc(30 * var(--u)));
    height: 1px;
}

/* ---------- Odkazy se šipkou (hover podle prototypu: tmavá + zvětšení) ---------- */

.link {
    display: inline-flex;
    align-items: baseline;
    gap: .35em;
    color: var(--c-teal);
    font-family: var(--f-display);
    font-weight: var(--w-display);
    font-size: var(--fs-link);
    line-height: 1.3;
    transform-origin: left center;
    transition: color .3s var(--ease), transform .3s var(--ease);
}
.link__icon {
    width: .75em;
    height: .75em;
    flex: none;
    align-self: center;
    transition: transform .3s var(--ease);
}
.link:hover, .link:focus-visible { color: var(--c-dark); transform: scale(1.18); }
.link:hover .link__icon { transform: translate(.08em, -.08em); }
.link--right { transform-origin: right center; }
.link--light { color: var(--c-bg); }
.link--light:hover, .link--light:focus-visible { color: var(--c-bg); }
.link--on-dark { color: var(--c-teal-light); transform-origin: center; }
.link--on-dark:hover, .link--on-dark:focus-visible { color: var(--c-bg); }
.link--soft {
    color: var(--c-teal-light);
    font-weight: var(--w-display-light);
    font-size: max(17px, calc(24 * var(--u)));
    transform-origin: center;
}
.link--big {
    color: var(--c-teal-light);
    font-weight: var(--w-display-light);
    font-size: max(22px, calc(40 * var(--u)));
    transform-origin: right center;
}
.link--big:hover { transform: scale(1.12); }
.link--lead .link__icon { width: 1em; }

/* ---------- Hlavička ---------- */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    transition: transform .45s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max);
    margin-inline: auto;
    padding: max(16px, calc(44 * var(--u))) var(--gutter) max(12px, calc(20 * var(--u)));
}
.site-header.is-scrolled {
    background: rgba(248, 248, 244, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.site-header.is-scrolled .site-header__inner { padding-top: max(10px, calc(16 * var(--u))); padding-bottom: max(10px, calc(16 * var(--u))); }
.site-header.is-scrolled .site-logo img { width: max(70px, calc(96 * var(--u))); }
.site-header.is-hidden { transform: translateY(-100%); }

.site-logo img {
    width: max(84px, calc(125 * var(--u)));
    height: auto;
    transition: width .3s var(--ease);
}

.site-header__tools {
    display: flex;
    align-items: center;
    gap: max(18px, calc(40 * var(--u)));
}

.lang-switch {
    display: flex;
    gap: .35em;
    font-family: var(--f-display);
    font-size: max(15px, calc(18 * var(--u)));
    color: var(--c-grey);
}
.lang-switch .is-active { color: var(--c-dark); }
.lang-switch a { color: var(--c-teal); transition: color .2s; }
.lang-switch a:hover { color: var(--c-dark); }

/* Tlačítko menu: tři čáry stejné délky (na mobilu i na počítači), prostřední se při najetí posune */
.burger {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    color: var(--c-dark);
}
.burger__line {
    position: absolute;
    left: 2px;
    width: 36px;
    height: 3px;
    background: currentColor;
    transition: transform .35s var(--ease);
}
.burger__line--top { top: 9px; }
.burger__line--middle { top: 18.5px; }
.burger__line--bottom { top: 28px; }
.burger:hover .burger__line--middle { transform: translateX(-6px); }

/* Zavírací křížek ze stejně silných čar */
.menu-close {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    color: var(--c-dark);
}
.menu-close__line {
    position: absolute;
    left: 4px;
    top: 18.5px;
    width: 32px;
    height: 3px;
    background: currentColor;
    transform: rotate(45deg);
    transition: transform .45s var(--ease);
}
.menu-close__line + .menu-close__line { transform: rotate(-45deg); }
.menu-close:hover .menu-close__line { transform: rotate(135deg); }
.menu-close:hover .menu-close__line + .menu-close__line { transform: rotate(45deg); }

/* ---------- Menu ----------
   Počítač: vlevo velké číslované odkazy na světlém podkladu, vpravo tmavý panel s fotkou
   Honzy, kontaktem, službami a sítěmi. Mobil viz konec souboru. */

.site-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    visibility: hidden;
    pointer-events: none;
    /* Při zavření zůstane menu viditelné, dokud panel neodjede zpět doprava */
    transition: visibility 0s linear .9s;
}
.site-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(7, 41, 40, .25);
    opacity: 0;
    transition: opacity .6s var(--ease);
}
.site-menu__panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 34vw, 620px);
    background: var(--c-bg);
    transform: translateX(100%);
    transition: transform .9s var(--ease);
}
.site-menu.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.site-menu.is-open::before { opacity: 1; }
.site-menu.is-open .site-menu__panel { transform: none; }

.site-menu__main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}
.site-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(16px, calc(44 * var(--u))) max(24px, calc(60 * var(--u))) 0 var(--gutter);
}
/* Křížek stojí přesně tam, kde bylo tlačítko menu – nad tmavým panelem */
.site-menu__top .menu-close {
    position: fixed;
    top: max(16px, calc(44 * var(--u)));
    right: var(--gutter);
    color: var(--c-bg);
}
.site-menu__top .menu-close:hover { color: var(--c-teal-light); }

.site-menu__nav {
    flex: 1;
    display: flex;
    align-items: center;
    padding: max(32px, calc(60 * var(--u))) max(24px, calc(80 * var(--u))) max(40px, calc(80 * var(--u))) max(var(--gutter), calc(260 * var(--u)));
}
.site-menu__nav ol { width: 100%; max-width: 920px; }
.site-menu__nav li {
    position: relative;
    border-top: 1px solid rgba(7, 41, 40, .16);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: calc(.3s + var(--i) * .07s);
}
/* háček na začátku linky jako u nadpisů sekcí */
.site-menu__nav li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 14px;
    background: rgba(7, 41, 40, .45);
}
.site-menu.is-open .site-menu__nav li { opacity: 1; transform: none; }

.site-menu__link {
    display: grid;
    grid-template-columns: max(48px, calc(80 * var(--u))) minmax(0, 1fr) auto;
    align-items: center;
    padding: max(14px, calc(22 * var(--u))) 0 max(12px, calc(18 * var(--u)));
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    font-size: clamp(34px, 3.5vw, 66px);
    line-height: 1.05;
}
.site-menu__num {
    align-self: start;
    padding-top: .35em;
    padding-left: 14px;
    font-weight: var(--w-display);
    font-size: max(14px, calc(18 * var(--u)));
    color: var(--c-teal);
}
.site-menu__text { transition: transform .5s var(--ease), color .3s; }
.site-menu__arrow {
    width: .42em;
    height: .42em;
    color: var(--c-teal);
    opacity: 0;
    transform: translate(-12px, 12px);
    transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.site-menu__link:hover .site-menu__text,
.site-menu__link:focus-visible .site-menu__text { transform: translateX(14px); color: var(--c-teal); }
.site-menu__link:hover .site-menu__arrow,
.site-menu__link:focus-visible .site-menu__arrow,
.site-menu__link.is-highlight .site-menu__arrow { opacity: 1; transform: none; }
.site-menu__link.is-active .site-menu__text,
.site-menu__link.is-highlight .site-menu__text { color: var(--c-teal); }

/* Pravý tmavý panel */
.site-menu__aside {
    display: flex;
    flex-direction: column;
    gap: max(22px, calc(32 * var(--u)));
    min-height: 0;
    overflow-y: auto;
    padding: calc(max(16px, calc(44 * var(--u))) + 64px) clamp(28px, 3.2vw, 60px) max(28px, calc(44 * var(--u)));
    background: var(--c-dark);
    color: var(--c-bg);
    opacity: 0;
    transform: translateX(12%);
    transition: opacity .8s var(--ease) .2s, transform 1s var(--ease) .15s;
}
.site-menu.is-open .site-menu__aside { opacity: 1; transform: none; }

.site-menu__media {
    position: relative;
    flex: 1 1 auto;
    min-height: 200px;
    overflow: hidden;
    background: rgba(248, 248, 244, .06);
}
.site-menu__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* ořez jen zespodu – hlava zůstane vždy celá */
    transform: scale(1.06);
    transition: transform 1.6s var(--ease) .2s;
}
.site-menu.is-open .site-menu__media img { transform: none; }

.site-menu__contact {
    display: grid;
    justify-items: start;
    gap: 6px;
    font-family: var(--f-display);
    font-size: max(18px, calc(24 * var(--u)));
}
.site-menu__title {
    margin-bottom: 6px;
    font-weight: var(--w-display-light);
    font-size: max(26px, calc(40 * var(--u)));
    line-height: 1.1;
}
.site-menu__contact a { font-weight: var(--w-display); transition: color .2s; }
.site-menu__contact a:hover { color: var(--c-teal-light); }

.site-menu__label {
    margin-bottom: 12px;
    font: 600 12px/1.2 var(--f-text);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(7, 41, 40, .55);
}
.site-menu__aside .site-menu__label { color: rgba(248, 248, 244, .55); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a {
    display: block;
    padding: 10px 13px;
    border: 1px solid rgba(7, 41, 40, .22);
    font: 600 12px/1.2 var(--f-text);
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .2s, border-color .2s, background-color .2s;
}
.chips a:hover, .chips a:active { color: var(--c-teal); border-color: var(--c-teal); }
.chips--light a { border-color: rgba(248, 248, 244, .28); }
.chips--light a:hover { color: var(--c-dark); background: var(--c-bg); border-color: var(--c-bg); }

/* Dlaždice služeb a spodní lišta v hlavní části – jen na mobilu */
.site-menu__topics, .site-menu__bar { display: none; }

.socials { display: flex; gap: 14px; }
.socials a { display: block; color: var(--c-teal-light); transition: color .2s, transform .3s var(--ease); }
.socials a:hover { color: var(--c-teal); transform: translateY(-2px); }
.socials svg { width: 22px; height: 22px; }
.site-menu__aside .socials a:hover { color: var(--c-bg); }

body.menu-open { overflow: hidden; }

/* ---------- Úvod (hero) ---------- */

.hero { position: relative; overflow: hidden; }
.hero__stage {
    position: relative;
    max-width: var(--max);
    height: calc(1180 * var(--u));
    margin-inline: auto;
}
.hero__title {
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    line-height: .8;
    letter-spacing: -.01em;
}
.hero__title > span,
.hero__media,
.hero__intro {
    position: absolute;
}
.hero__l1 { left: calc(196 * var(--u)); top: calc(236 * var(--u)); font-size: calc(245 * var(--u)); z-index: 3; }
.hero__l2 { left: calc(264 * var(--u)); top: calc(432 * var(--u)); font-size: calc(199 * var(--u)); z-index: 3; }
.hero__accent {
    left: calc(452 * var(--u));
    top: calc(628 * var(--u));
    font-size: calc(96 * var(--u));
    font-weight: var(--w-display);
    color: var(--c-teal);
    z-index: 3;
}
.hero__end {
    left: calc(1434 * var(--u));
    top: calc(628 * var(--u));
    font-size: calc(96 * var(--u));
    line-height: .97;
    z-index: 3;
}
.hero__l3, .hero__l4 { display: block; }
.hero__l4 { margin-left: calc(61 * var(--u)); }

.hero__media {
    left: calc(683 * var(--u));
    top: calc(-94 * var(--u));
    width: calc(807 * var(--u));
    z-index: 2;
}
.hero__photo, .hero__video { width: 100%; height: auto; }
.hero__video { aspect-ratio: 807 / 1175; object-fit: cover; }

.hero__intro {
    left: calc(298 * var(--u));
    top: calc(838 * var(--u));
    z-index: 4;
}
.hero__text {
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    font-size: max(18px, calc(29 * var(--u)));
    line-height: 1.43;
}
.hero__text em { color: var(--c-teal); font-weight: var(--w-display); }
.hero__cta { margin-top: max(14px, calc(26 * var(--u))); }

/* Nástup úvodu */
.js .hero [data-hero-step] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.js .hero [data-hero-step="0"] { transform: translateY(20px) scale(.98); transition-duration: 1.4s; }
.js .hero.is-in [data-hero-step] { opacity: 1; transform: none; }
.hero [data-hero-step="1"] { transition-delay: .15s; }
.hero [data-hero-step="2"] { transition-delay: .3s; }
.hero [data-hero-step="3"] { transition-delay: .55s; }
.hero [data-hero-step="4"] { transition-delay: .7s; }
.hero [data-hero-step="5"] { transition-delay: .9s; }

/* ---------- Příběh realizací ---------- */

.story { padding-top: max(40px, calc(64 * var(--u))); }
.story .rule--story {
    margin-left: calc(106 * var(--u));
    margin-right: calc(32 * var(--u));
    margin-bottom: calc(40 * var(--u));
}
.story .section-head { padding-left: calc(44 * var(--u)); }
.story__slider .fade-slider__slide img { width: 100%; aspect-ratio: 1640 / 1094; object-fit: cover; }

/* ---------- Plynulá prezentace (prolínání) ---------- */

.fade-slider { position: relative; }
.fade-slider__viewport, .story__slider { position: relative; transition: height .6s var(--ease); }
.fade-slider__viewport.is-resizing { overflow: hidden; }
/* Výška se řídí aktivním snímkem, ostatní se přes něj prolínají */
.fade-slider__slide {
    position: absolute;
    inset: 0 0 auto 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s var(--ease), visibility 0s linear .9s;
}
.fade-slider__slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transition: opacity .9s var(--ease), visibility 0s;
}

/* ---------- A co právě řešíte vy? ---------- */

.situations { padding-top: max(60px, calc(120 * var(--u))); padding-bottom: max(100px, calc(119 * var(--u))); overflow-x: clip; }
.situations__title {
    position: relative;
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    line-height: .95;
    letter-spacing: -.01em;
}
.situations__t1 {
    display: block;
    margin-left: calc(113 * var(--u));
    font-size: max(46px, calc(125 * var(--u)));
}
.situations__t2 {
    display: flex;
    align-items: baseline;
    gap: calc(22 * var(--u));
    margin-left: calc(457 * var(--u));
    margin-top: calc(28 * var(--u));
    font-size: max(60px, calc(168 * var(--u)));
}
.situations__t2 em {
    color: var(--c-teal);
    font-size: max(70px, calc(200 * var(--u)));
}

.situations__body {
    position: relative;
    display: grid;
    grid-template-columns: 1fr calc(470 * var(--u));
    gap: calc(60 * var(--u));
    min-height: calc(560 * var(--u));
    margin-top: calc(-60 * var(--u));
}
.situations__choices-wrap { position: relative; align-self: end; padding-top: calc(380 * var(--u)); }
.situations__choices-wrap .rule--bracket {
    top: calc(-30 * var(--u));
    left: calc(190 * var(--u));
    height: calc(390 * var(--u));
}
.situations__choices { display: grid; gap: max(6px, calc(14 * var(--u))); }
.situations__choices button {
    text-align: left;
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    font-size: max(22px, calc(40 * var(--u)));
    line-height: 1.6;
    color: var(--c-dark);
    transition: color .3s var(--ease), transform .4s var(--ease);
    transform-origin: left center;
}
.situations__lead { color: var(--c-teal-light); transition: color .3s; }
.situations__choices button:hover { transform: translateX(10px); }
.situations__choices button[aria-selected="true"] { color: var(--c-teal); }
.situations__choices button[aria-selected="true"] .situations__lead { color: var(--c-dark); }

.situations__answers {
    display: grid;
    align-content: end;
    padding-left: calc(114 * var(--u));
    padding-bottom: calc(20 * var(--u));
}
.situations__answer {
    display: grid;
    gap: max(16px, calc(24 * var(--u)));
    max-width: calc(860 * var(--u));
    animation: answer-in .7s var(--ease);
}
.situations__answer-text {
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    font-size: max(20px, calc(30 * var(--u)));
    line-height: 1.4;
}
.situations__video { max-width: calc(560 * var(--u)); }
@keyframes answer-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

.situations__note {
    position: relative;
    margin-top: calc(10 * var(--u));
    padding-top: max(36px, calc(104 * var(--u)));
}
.situations__note .rule--note {
    position: absolute;
    top: 0;
    left: calc(160 * var(--u));
    width: calc(918 * var(--u));
}
.situations__note p {
    margin-left: calc(74 * var(--u));
    font-family: var(--f-display);
    font-weight: var(--w-display);
    font-size: max(19px, calc(30 * var(--u)));
    line-height: 1.37;
}
.situations__note em { color: var(--c-teal); }
/* Svislá čára pod poznámkou – vede dolů k nadpisu služeb */
.situations__note .rule--note-down {
    position: absolute;
    top: calc(100% + max(20px, calc(36 * var(--u))));
    left: calc(160 * var(--u));
    width: 1px;
    height: max(56px, calc(123 * var(--u)));
}
.situations__note .rule--note-down::before { display: none; }

/* ---------- Služby (rozbalovací seznam) ---------- */

.services { padding-top: max(30px, calc(70 * var(--u))); }
.services__title { margin-left: calc(53 * var(--u)); margin-bottom: max(28px, calc(52 * var(--u))); }

.service { position: relative; }
.service > .rule { margin-left: calc(62 * var(--u)); margin-right: calc(76 * var(--u)); }
.service__toggle {
    display: grid;
    grid-template-columns: calc(117 * var(--u)) minmax(0, calc(653 * var(--u))) 1fr max(30px, calc(44 * var(--u)));
    align-items: center;
    width: 100%;
    padding: max(18px, calc(30 * var(--u))) calc(58 * var(--u)) max(16px, calc(28 * var(--u))) calc(58 * var(--u));
    text-align: left;
}
.service__num {
    font-family: var(--f-display);
    font-weight: var(--w-display);
    font-size: max(22px, calc(40 * var(--u)));
    color: var(--c-teal);
    line-height: 1;
}
.service__name {
    font-family: var(--f-display);
    font-weight: var(--w-display);
    font-size: max(26px, calc(50 * var(--u)));
    line-height: 1.1;
    transition: transform .5s var(--ease);
    transform-origin: left center;
}
.service__excerpt {
    font-weight: 200;
    font-size: var(--fs-lead);
    line-height: 1.3;
}
.service__icon {
    justify-self: end;
    width: max(28px, calc(42 * var(--u)));
    height: max(28px, calc(42 * var(--u)));
    transition: transform .6s var(--ease);
}
.service__icon .i-plus-v { transition: opacity .4s var(--ease); }
.service__toggle:hover .service__name { transform: translateX(8px); }
.service__toggle:hover .service__icon { transform: rotate(90deg); }
.service.is-open .service__icon { transform: rotate(180deg); }
.service.is-open .service__icon .i-plus-v { opacity: 0; }

.service__panel {
    overflow: hidden;
    transition: height .8s var(--ease);
}
.service__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(60 * var(--u));
    padding: max(4px, calc(10 * var(--u))) calc(76 * var(--u)) max(36px, calc(56 * var(--u))) calc(175 * var(--u));
}
.service__content.has-media { grid-template-columns: calc(560 * var(--u)) calc(649 * var(--u)); justify-content: space-between; }
.service__text { display: grid; gap: max(12px, calc(16 * var(--u))); align-content: start; font-size: var(--fs-body); }
.service__intro { font-family: var(--f-display); font-weight: var(--w-display-light); font-size: var(--fs-lead); line-height: 1.35; }
.service__headline { font-weight: 500; }
.service__body { font-weight: 200; display: grid; gap: .8em; }
.service__list-title { font-weight: 500; margin-top: .4em; }
.service__list { display: grid; gap: .1em; font-weight: 200; line-height: 1.5; }
.service__list li::before { content: "– "; }
.service__text .link { margin-top: .6em; }
.service__media { align-self: start; }

.service.is-open .service__content > * { animation: answer-in .8s var(--ease) both; }
.service.is-open .service__media { animation-delay: .12s; }

/* ---------- Náhled videa ---------- */

.video-trigger {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: #e9e9e4;
}
.video-trigger img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--ease); }
.video-trigger__blank { display: block; aspect-ratio: 3 / 2; background: var(--c-dark); }
.video-trigger__play {
    position: absolute;
    left: 50%; top: 50%;
    width: max(56px, calc(80 * var(--u)));
    height: max(56px, calc(80 * var(--u)));
    transform: translate(-50%, -50%);
    transition: transform .4s var(--ease);
}
.video-trigger:hover img { transform: scale(1.04); }
.video-trigger:hover .video-trigger__play { transform: translate(-50%, -50%) scale(1.12); }
.video-trigger.is-static img { transform: none; }

/* ---------- Slider realizací ---------- */

.projects-slider { padding-top: max(50px, calc(110 * var(--u))); }
.projects-slider__frame { position: relative; padding-left: calc(21 * var(--u)); }
.projects-slider__title { margin-left: calc(45 * var(--u)); margin-bottom: max(16px, calc(20 * var(--u))); }

.slider { position: relative; }
.slider__viewport { overflow: hidden; contain: paint; }
.slider__track {
    display: flex;
    transition: transform 1s var(--ease);
    will-change: transform;
}
.slider.is-dragging .slider__track { transition: none; }
.slider__slide { flex: 0 0 100%; min-width: 0; }
.slider__media { display: block; overflow: hidden; contain: paint; }
.slider__media img {
    width: 100%;
    aspect-ratio: 1640 / 1094;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}
.slider__media:hover img { transform: scale(1.025); }

.slider__caption {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: max(70px, calc(100 * var(--u)));
    padding: max(8px, calc(12 * var(--u))) 0 0 calc(14 * var(--u));
}
.slider__meta { line-height: 1.25; }
.slider__name { font-family: var(--f-display); font-weight: var(--w-display-light); font-size: max(19px, calc(24 * var(--u))); }
.slider__place { font-size: var(--fs-small); }
.slider__year { font-family: var(--f-display); color: var(--c-teal); font-size: max(14px, calc(16 * var(--u))); }
.slider__detail { justify-self: center; }

.slider { container-type: inline-size; }
.slider__arrows {
    position: absolute;
    right: 0;
    /* pod fotkou, na úrovni popisku (fotka má poměr 1640 × 1094) */
    top: calc(100cqw * 1094 / 1640 + max(14px, calc(30 * var(--u))));
    display: flex;
    gap: max(14px, calc(30 * var(--u)));
}
.slider__arrows--static { position: static; }
.slider__arrow {
    width: max(38px, calc(48 * var(--u)));
    color: var(--c-dark);
    transition: color .3s, transform .3s var(--ease);
}
.slider__arrow svg { width: 100%; height: auto; aspect-ratio: 48 / 32; }
.slider__arrow:hover { transform: translateX(-4px); }
.slider__arrow[data-slider-next]:hover { transform: translateX(4px); }
.slider__arrow:disabled { color: var(--c-grey); cursor: default; transform: none; }

.slider__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-left: calc(14 * var(--u));
    margin-top: max(10px, calc(40 * var(--u)));
}

/* Čárky slideru podle návrhu: 46 × 2 px, tmavé = aktuální a předchozí snímky */
.dots { display: flex; flex-wrap: wrap; gap: 0 max(4px, calc(6 * var(--u))); min-width: 0; }
.dots__dot {
    position: relative;
    width: max(40px, calc(46 * var(--u)));
    height: 16px;
}
.dots__dot::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: max(2px, calc(2 * var(--u)));
    transform: translateY(-50%);
    background: #c8cfcc;
    transition: background-color .5s var(--ease);
}
.dots__dot.is-done::before, .dots__dot.is-active::before { background: #5b716f; }
.dots__dot:hover::before { background: var(--c-teal); }

.slider--hero .slider__footer { margin-top: max(16px, calc(48 * var(--u))); }

/* ---------- Jak spolupráce probíhá ---------- */

.process {
    background: var(--c-dark);
    color: var(--c-bg);
    padding-block: max(64px, calc(120 * var(--u))) max(56px, calc(100 * var(--u)));
}
.process__title { text-align: center; margin-bottom: max(32px, calc(52 * var(--u))); }
.process__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(188 * var(--u));
    row-gap: max(36px, calc(80 * var(--u)));
    padding-left: calc(42 * var(--u));
    padding-right: calc(150 * var(--u));
}
.process__step {
    display: grid;
    grid-template-columns: calc(70 * var(--u)) 1fr;
    column-gap: max(14px, 0px);
    row-gap: max(24px, calc(46 * var(--u)));
}
.process__step .rule { grid-column: 1 / -1; margin-left: calc(6 * var(--u)); }
.process__num {
    font-family: var(--f-display);
    font-size: max(18px, calc(30 * var(--u)));
    color: var(--c-teal);
    line-height: 1.3;
}
.process__name {
    font-family: var(--f-display);
    font-weight: var(--w-display);
    font-size: max(24px, calc(40 * var(--u)));
    line-height: 1.15;
}
.process__text { margin-top: .5em; font-weight: 200; font-size: var(--fs-lead); }
.process__cta { display: flex; justify-content: center; margin-top: max(36px, calc(60 * var(--u))); }

/* ---------- Reference ---------- */

.testimonials { padding-block: max(56px, calc(110 * var(--u))) max(56px, calc(100 * var(--u))); }
.testimonials__grid {
    display: grid;
    grid-template-columns: calc(598 * var(--u)) 1fr;
    gap: 2rem;
}
.testimonials__head { padding-left: calc(164 * var(--u)); }
.testimonials__mark { width: max(46px, calc(69 * var(--u))); margin: max(18px, calc(38 * var(--u))) 0 0 calc(98 * var(--u)); }
.testimonials__slider { max-width: calc(812 * var(--u)); min-width: 0; }

.testimonial__author {
    display: flex;
    align-items: center;
    gap: max(12px, calc(20 * var(--u)));
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    font-size: max(16px, calc(20 * var(--u)));
}
.testimonial__author .rule { flex: 1; min-width: 40px; }
.testimonial__quote {
    display: grid;
    gap: .9em;
    margin-top: max(16px, calc(26 * var(--u)));
    font-weight: 200;
    font-style: italic;
    font-size: max(16px, calc(18 * var(--u)));
    line-height: 1.38;
}
.testimonial__project { margin-top: max(14px, calc(20 * var(--u))); font-size: max(15px, calc(18 * var(--u))); }

.fade-slider__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: max(30px, calc(60 * var(--u)));
}

/* Desktop: všechny recenze v jedné buňce mřížky – výška podle nejdelší,
   šipky a čárky proto zůstávají pořád na stejném místě */
@media (min-width: 900px) {
    .testimonials__slider .fade-slider__viewport { display: grid; }
    .testimonials__slider .fade-slider__slide { grid-area: 1 / 1; position: relative; inset: auto; }
}

/* ---------- Podcast ---------- */

.podcast .rule--podcast {
    margin-left: calc(84 * var(--u));
    margin-right: calc(56 * var(--u));
    margin-bottom: max(24px, calc(48 * var(--u)));
}
.podcast .section-head { padding-inline: 0 calc(80 * var(--u)); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(41 * var(--u));
    row-gap: max(40px, calc(64 * var(--u)));
}

.episode-card__media, .project-card__media { display: block; overflow: hidden; }
.episode-card__media img, .project-card__media img {
    width: 100%;
    aspect-ratio: 800 / 534;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}
.project-card__media:hover img { transform: scale(1.04); }
.episode-card__title, .project-card__name {
    margin-top: max(10px, calc(14 * var(--u)));
    padding-left: calc(9 * var(--u));
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    font-size: max(19px, calc(24 * var(--u)));
    line-height: 1.25;
}
.episode-card__guest, .project-card__place, .episode-card__meta, .episode-card__text {
    padding-left: calc(9 * var(--u));
    font-size: var(--fs-small);
    line-height: 1.4;
}
.episode-card__meta { color: var(--c-teal); margin-top: .4em; }
.episode-card__text { margin-top: .6em; font-weight: 200; }
.project-card__year { padding-left: calc(9 * var(--u)); font-family: var(--f-display); color: var(--c-teal); font-size: max(14px, calc(16 * var(--u))); }
.project-card__name a { transition: color .2s; }
.project-card__name a:hover { color: var(--c-teal); }

/* ---------- Loga klientů ---------- */

.logos { text-align: center; }
.logos__head { display: grid; justify-items: center; gap: max(18px, calc(36 * var(--u))); }
.logos__mark { width: max(46px, calc(69 * var(--u))); }
.logos__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: max(24px, calc(50 * var(--u))) max(20px, calc(60 * var(--u)));
    max-width: calc(1380 * var(--u));
    margin: max(36px, calc(84 * var(--u))) auto 0;
}
.logos__item a, .logos__item > img, .logos__item > span { display: grid; place-items: center; height: max(52px, calc(84 * var(--u))); }
/* Velikost podle plochy loga: široká i čtvercová loga působí stejně velká */
.logos__item img {
    --logo: max(40px, calc(58 * var(--u)));
    width: min(100%, calc(var(--logo) * sqrt(var(--ar, 3))));
    height: auto;
    max-height: calc(var(--logo) * 1.15);
    margin-inline: auto;
    object-fit: contain;
    filter: grayscale(1);
    mix-blend-mode: multiply;
    opacity: .55;
    transition: filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.logos__item:hover img { filter: none; opacity: 1; transform: scale(1.05); }
.logos__name { font-family: var(--f-display); color: var(--c-grey); font-size: max(16px, calc(22 * var(--u))); }

/* ---------- O mně a kontakt ---------- */

.about { margin-top: max(48px, calc(90 * var(--u))); }
.about__band { background: var(--c-dark); color: var(--c-bg); }
.about__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(681 * var(--u));
    min-height: calc(786 * var(--u));
}
.about__text {
    padding-top: calc(225 * var(--u));
    padding-bottom: calc(21 * var(--u));
    padding-left: calc(42 * var(--u));
    padding-right: calc(20 * var(--u));
}
.about__title {
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    font-size: max(44px, calc(125 * var(--u)));
    line-height: 1.08;
    letter-spacing: -.01em;
}
.about__title em { color: var(--c-teal-light); font-weight: var(--w-display); }
.about__subtitle {
    margin-top: max(18px, calc(58 * var(--u)));
    font-family: var(--f-display);
    font-weight: var(--w-display);
    font-size: max(19px, calc(30 * var(--u)));
}
.about__subtitle em { color: var(--c-teal-light); }
.about__link { margin-top: max(18px, calc(40 * var(--u))); }
.about:hover .about__link { transform: scale(1.12); }

/* Text o mně – otevřený, křížkem se skryje a tlačítkem „Něco o mně“ znovu otevře */
.about__more { max-width: calc(824 * var(--u)); margin-top: max(20px, calc(38 * var(--u))); }
.about__more-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .8s var(--ease), opacity .6s var(--ease);
}
.about__more:not(.is-open) .about__more-body { grid-template-rows: 0fr; opacity: 0; }
.about__more-inner {
    display: grid;
    gap: .8em;
    min-height: 0;
    overflow: hidden;
    font-family: var(--f-display);
    font-weight: var(--w-display);
    font-size: max(16px, calc(24 * var(--u)));
    line-height: 1.48;
}
.about__toggle {
    display: flex;
    align-items: center;
    gap: max(14px, calc(22 * var(--u)));
    width: 100%;
    margin-top: min(-4px, calc(-12 * var(--u)));
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: var(--f-display);
    font-size: max(17px, calc(29 * var(--u)));
    text-align: left;
    cursor: pointer;
}
.about__toggle-label { white-space: nowrap; transition: opacity .5s var(--ease), color .2s; }
.about__toggle-rule { flex: 1; height: 1px; background: currentColor; opacity: .35; transition: opacity .5s var(--ease); }
.about__toggle-icon {
    flex: none;
    /* Otočené plus = křížek široký 2/3 ikony (32 px na 1920) */
    width: max(34px, calc(50 * var(--u)));
    height: max(34px, calc(50 * var(--u)));
    transition: transform .7s var(--ease), color .2s;
}
.about__more.is-open .about__toggle-icon { transform: rotate(45deg); }
.about__more.is-open .about__toggle-label, .about__more.is-open .about__toggle-rule { opacity: 0; }
/* V otevřeném stavu reaguje jen křížek, ne prázdný řádek vedle něj */
.about__more.is-open .about__toggle { pointer-events: none; }
.about__more.is-open .about__toggle-icon { pointer-events: auto; cursor: pointer; }
.about__toggle:hover .about__toggle-icon, .about__toggle:hover .about__toggle-label { color: var(--c-teal-light); }
.about__toggle:focus-visible { outline: 1px solid var(--c-teal-light); outline-offset: 6px; }

.about__photo {
    position: relative;
    /* Podle návrhu lehce přesahuje pravý okraj obsahu */
    left: calc(21 * var(--u));
    align-self: start;
    margin-top: calc(119 * var(--u));
    margin-bottom: calc(-355 * var(--u));
    z-index: 2;
}
.about__photo img { width: 100%; aspect-ratio: 681 / 1022; object-fit: cover; }
.about__photo figcaption {
    position: absolute;
    left: calc(67 * var(--u));
    top: calc(62 * var(--u));
    font-family: var(--f-display);
    font-size: max(18px, calc(30 * var(--u)));
    color: var(--c-bg);
}

.about__contact {
    display: grid;
    justify-items: start;
    gap: max(4px, calc(12 * var(--u)));
    padding-top: max(40px, calc(105 * var(--u)));
    padding-bottom: max(64px, calc(130 * var(--u)));
}
.about__contact > * { margin-left: calc(53 * var(--u)); }
.about__contact-title {
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    font-size: max(30px, calc(50 * var(--u)));
    line-height: 1.2;
    margin-bottom: .1em;
}
.about__contact-link {
    font-family: var(--f-display);
    font-weight: var(--w-display);
    font-size: max(20px, calc(30 * var(--u)));
    transition: color .2s;
}
.about__contact-link:hover { color: var(--c-teal); }
.about__note { margin-top: max(10px, calc(18 * var(--u))); font-weight: 200; font-size: var(--fs-lead); }

/* ---------- Patička ---------- */

.site-footer {
    background: var(--c-dark);
    color: var(--c-bg);
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    font-size: max(15px, calc(20 * var(--u)));
    padding-top: max(48px, calc(87 * var(--u)));
    padding-bottom: max(24px, calc(28 * var(--u)));
}
.site-footer .wrap { padding-left: max(var(--gutter), calc(193 * var(--u))); }
.site-footer__grid {
    display: grid;
    grid-template-columns: calc(393 * var(--u)) calc(245 * var(--u)) calc(368 * var(--u)) calc(306 * var(--u)) 1fr;
    align-items: start;
}
.site-footer__logo img { width: max(90px, calc(125 * var(--u))); }
.site-footer__links { display: grid; gap: max(2px, calc(5 * var(--u))); line-height: 1.25; }
.site-footer__links a { display: inline-flex; align-items: center; gap: .3em; transition: color .2s; }
.site-footer__links a:hover { color: var(--c-teal-light); }
.site-footer__links a.is-highlight .link__icon { width: .7em; height: .7em; }
.site-footer__company, .site-footer__ids { line-height: 1.75; }

.site-footer__claim {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: max(16px, calc(30 * var(--u)));
    margin-top: max(36px, calc(56 * var(--u)));
}
.site-footer__slogan { font-size: max(18px, calc(26 * var(--u))); line-height: 1.2; }
.site-footer__slogan em { font-weight: var(--w-display); }
.site-footer__rule {
    position: relative;
    height: 1px;
    background: rgba(248, 248, 244, .5);
    margin-bottom: .55em;
}
.site-footer__rule::after {
    content: "";
    position: absolute;
    right: 0; bottom: 0;
    width: 1px;
    height: max(14px, calc(26 * var(--u)));
    background: inherit;
}
.site-footer__claim .socials { align-self: end; margin-bottom: max(30px, calc(48 * var(--u))); margin-left: calc(-80 * var(--u)); }

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    margin-top: max(28px, calc(62 * var(--u)));
    padding-right: calc(55 * var(--u));
    font-size: max(13px, calc(14 * var(--u)));
}
.site-footer__credits .heart { color: var(--c-teal-light); }
.site-footer__credits a:hover { color: var(--c-teal-light); }

/* ---------- Podstránky ---------- */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding-top: max(110px, calc(256 * var(--u)));
    padding-bottom: max(16px, calc(20 * var(--u)));
}
.page-head .page-title { padding-left: calc(65 * var(--u)); }
.page-title {
    font-family: var(--f-display);
    font-weight: var(--w-display);
    font-size: max(32px, calc(50 * var(--u)));
    line-height: 1.1;
}

.project__frame, .listing__frame { position: relative; }
.project__frame > .rule--vertical, .listing__frame > .rule--vertical { left: calc(var(--gutter) - 41 * var(--u)); top: calc(230 * var(--u)); }
.project__frame .slider, .project__frame > section { margin-left: calc(21 * var(--u)); }

.slider--hero .slider__media img { aspect-ratio: 1640 / 1094; }

.project__facts { padding: max(48px, calc(110 * var(--u))) calc(14 * var(--u)) 0; }
.facts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 2rem; }
.facts__item { display: grid; gap: max(4px, calc(8 * var(--u))); align-content: start; text-align: center; }
.facts dt { font-size: var(--fs-small); line-height: 1.3; }
.facts dd { font-family: var(--f-display); font-weight: var(--w-display-light); font-size: max(18px, calc(24 * var(--u))); line-height: 1.3; }
.facts dd a { transition: color .2s; }
.facts dd a:hover { color: var(--c-teal); }
.facts--wide { display: grid; justify-content: stretch; margin-top: max(28px, calc(44 * var(--u))); }
.facts--wide .facts__item { text-align: left; max-width: calc(1100 * var(--u)); }
.facts--wide:empty { display: none; }

.project__testimonial { padding-top: max(64px, calc(130 * var(--u))); padding-left: calc(14 * var(--u)); max-width: calc(840 * var(--u)); }
.project__testimonial .section-title { margin-bottom: max(18px, calc(34 * var(--u))); }
.project__testimonial .testimonial + .testimonial { margin-top: 2.5rem; }

.project__story { padding-top: max(64px, calc(130 * var(--u))); padding-left: calc(14 * var(--u)); padding-right: calc(150 * var(--u)); }
.project__story .section-title { margin-bottom: max(18px, calc(38 * var(--u))); }
.rich-text { display: grid; gap: 1em; max-width: 78ch; font-weight: 200; font-size: max(17px, calc(24 * var(--u))); line-height: 1.3; }
.rich-text strong { font-weight: 500; }
.rich-text a { color: var(--c-teal); text-decoration: underline; text-underline-offset: .15em; }
.rich-text ul { list-style: none; display: grid; gap: .2em; }
.rich-text ul li::before { content: "– "; }
.rich-text ol { list-style: decimal; padding-left: 1.2em; }

.project__gallery { padding-top: max(72px, calc(170 * var(--u))); }
.project__gallery .section-title { padding-left: calc(43 * var(--u)); margin-bottom: max(14px, calc(18 * var(--u))); }
.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(29 * var(--u)) calc(39 * var(--u));
}
.gallery__item.is-wide { grid-column: 1 / -1; }
.gallery__item a { display: block; overflow: hidden; cursor: zoom-in; }
.gallery__item img { width: 100%; aspect-ratio: 800 / 534; object-fit: cover; transition: transform 1.2s var(--ease), opacity .3s; }
.gallery__item a:hover img { transform: scale(1.03); }
.gallery__item figcaption { padding: .5em 0 0 calc(9 * var(--u)); font-size: var(--fs-small); }

.big-cta { padding-block: max(80px, calc(220 * var(--u))) max(56px, calc(120 * var(--u))); }
.big-cta .wrap { position: relative; }
.big-cta__title {
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    line-height: .95;
    letter-spacing: -.01em;
}
.big-cta__l1 { display: block; margin-left: calc(169 * var(--u)); font-size: max(44px, calc(125 * var(--u))); }
.big-cta__l2 { display: block; margin-left: calc(530 * var(--u)); margin-top: calc(10 * var(--u)); font-size: max(64px, calc(200 * var(--u))); color: var(--c-teal); }
.big-cta .rule--bracket { left: calc(1445 * var(--u)); top: calc(200 * var(--u)); height: calc(420 * var(--u)); }
.big-cta .link--big { display: flex; width: max-content; margin: calc(330 * var(--u)) calc(260 * var(--u)) 0 auto; }

.listing__intro {
    max-width: 60ch;
    padding: 0 0 max(32px, calc(60 * var(--u))) calc(14 * var(--u));
    font-family: var(--f-display);
    font-weight: var(--w-display-light);
    font-size: max(19px, calc(30 * var(--u)));
    line-height: 1.35;
}
.listing__intro em { color: var(--c-teal); }
.listing__hero { margin-bottom: max(32px, calc(58 * var(--u))); }
.listing__hero img { width: 100%; aspect-ratio: 2.4; object-fit: cover; }
.listing .card-grid { padding-bottom: max(40px, calc(60 * var(--u))); }
.listing__empty { padding: 2rem 0 4rem; }

.error-page { padding-top: max(140px, calc(300 * var(--u))); padding-bottom: 120px; display: grid; gap: 1.2rem; justify-items: start; }
.error-page__code { font-family: var(--f-display); font-weight: var(--w-display-light); font-size: max(80px, calc(200 * var(--u))); color: var(--c-teal); line-height: 1; }

/* ---------- Video okno ---------- */

.video-modal {
    width: min(92vw, 1400px);
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}
.video-modal::backdrop { background: rgba(7, 41, 40, .9); }
.video-modal__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-modal__frame iframe, .video-modal__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal__frame.is-audio { aspect-ratio: auto; height: 352px; background: transparent; }
.video-modal__close { position: absolute; right: 0; top: -48px; color: var(--c-bg); padding: 6px; }
.video-modal__close svg { width: 28px; height: 28px; }
.video-modal[open] { animation: answer-in .4s var(--ease); }

/* ---------- Galerie (PhotoSwipe) ---------- */

.pswp { --pswp-bg: #072928; --pswp-placeholder-bg: #0d3534; }
.pswp__custom-caption {
    position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    max-width: min(90vw, 900px);
    padding: 6px 14px;
    color: var(--c-bg);
    font-family: var(--f-text);
    font-size: 15px;
    text-align: center;
}
.pswp__custom-caption:empty { display: none; }

/* ---------- Lišta náhledu ---------- */

.preview-bar {
    position: fixed;
    left: 50%; bottom: 16px;
    z-index: 300;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
    max-width: calc(100vw - 24px);
    padding: 10px 18px;
    transform: translateX(-50%);
    border-radius: 6px;
    background: #fff1c9;
    color: #4a3a00;
    box-shadow: 0 8px 30px rgba(7, 41, 40, .25);
    font: 14px/1.4 var(--f-text);
}
.preview-bar a { text-decoration: underline; font-weight: 500; }

/* ---------- Animace při posunu stránky ---------- */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
    transition-delay: var(--delay, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Najíždění podle rolování – průběh --sp (0–1) nastavuje main.js */
/* Jen lehký posun – i když rolování zastaví uprostřed, text nevyjede z okna */
.js [data-scroll] { --sp: 0; --scroll-shift: clamp(16px, 4vw, 80px); }
.js [data-scroll="left"] { opacity: var(--sp); transform: translate3d(calc((var(--sp) - 1) * var(--scroll-shift)), 0, 0); }
.js [data-scroll="right"] { opacity: var(--sp); transform: translate3d(calc((1 - var(--sp)) * var(--scroll-shift)), 0, 0); }
.js [data-scroll="up"] { opacity: var(--sp); transform: translate3d(0, calc((1 - var(--sp)) * 50px), 0); }
.js [data-scroll="draw-y"] { transform: scaleY(var(--sp)); transform-origin: top; }
.js [data-scroll="draw-x"] { transform: scaleX(var(--sp)); transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .js [data-reveal], .js .hero [data-hero-step], .js [data-scroll] { opacity: 1; transform: none; }
}

/* ======================================================================
   Tablet a menší notebooky
   ====================================================================== */

@media (max-width: 1199px) {
    .service__content.has-media { grid-template-columns: 1fr 1fr; }
    .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; row-gap: 2rem; }
    .site-footer__logo { grid-column: 1 / -1; }
}

/* ======================================================================
   Mobil
   ====================================================================== */

@media (max-width: 899px) {
    :root { --gutter: 20px; }

    .section { padding-block: 64px; }

    /* Tlačítko menu na mobilu: stejné tři čáry, jen menší */
    .burger, .menu-close { width: 36px; height: 36px; }
    .burger__line { left: 2px; width: 32px; }
    .burger__line--top { top: 8px; }
    .burger__line--middle { top: 16.5px; }
    .burger__line--bottom { top: 25px; }
    .menu-close__line { left: 3px; top: 16.5px; width: 30px; }

    /* Mobilní menu: logo a křížek nad linkou → velké odkazy → linka, štítek a dlaždice služeb
       → dole lišta se sociálními sítěmi a akcemi Napsat / Zavolat */
    .site-menu__panel { display: flex; flex-direction: column; }
    .site-menu__main { flex: 1; }
    .site-menu__aside { display: none; }
    .site-menu__top { padding: 16px var(--gutter); border-bottom: 1px solid rgba(7, 41, 40, .15); }
    .site-menu__top .menu-close { position: relative; top: auto; right: auto; color: var(--c-dark); }
    .site-menu__top .menu-close:hover { color: var(--c-teal); }
    .site-menu__nav { flex: none; display: block; padding: 28px var(--gutter) 0; }
    .site-menu__nav li { border: 0; transform: translateX(40px); }
    .site-menu__nav li::before { display: none; }
    .site-menu__link {
        display: inline-flex;
        align-items: center;
        gap: .3em;
        padding-block: 3px;
        font-weight: var(--w-display);
        font-size: clamp(32px, 10vw, 44px);
        line-height: 1.08;
    }
    .site-menu__num { display: none; }
    .site-menu__arrow { display: none; }
    .site-menu__link.is-highlight .site-menu__arrow { display: block; width: .55em; height: .55em; }
    .site-menu__link:hover .site-menu__text { transform: none; }
    .site-menu__topics {
        display: block;
        margin: 26px var(--gutter) 0;
        padding: 22px 0 28px;
        border-top: 1px solid rgba(7, 41, 40, .15);
    }
    .chips a { padding: 11px 14px; }
    .site-menu__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: auto;
        padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(7, 41, 40, .15);
    }
    .site-menu__bar .socials svg { width: 20px; height: 20px; }
    .site-menu__actions { display: flex; gap: 20px; }
    .site-menu__actions a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font: 600 12px/1 var(--f-text);
        letter-spacing: .1em;
        text-transform: uppercase;
        transition: color .2s;
    }
    .site-menu__actions a:hover { color: var(--c-teal); }
    .site-menu__actions svg { width: 17px; height: 17px; }

    /* Úvod – „interiors“ stojí vlevo vedle hlavy ve stejném řádku jako fotka.
       Rozměry vychází z fotky: hlava je ve 16–47 % výšky a začíná na 37 % šířky,
       fotka má 78 % šířky obsahu (--c) a text „interiors“ je široký ~3,7× velikost písma. */
    .hero__stage {
        --c: calc(100vw - 2 * var(--gutter));
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "l1" "l2" "media" "end" "intro";
        height: auto;
        padding: 96px var(--gutter) 40px;
    }
    .hero__title { display: contents; }
    .hero__title > span, .hero__media, .hero__intro { position: static; }
    .hero__l1 { grid-area: l1; font-size: 27vw; }
    .hero__l2 { grid-area: l2; font-size: 22vw; margin: .02em 0 0 .3em; }
    .hero__media { grid-area: media; width: 78%; justify-self: end; margin-top: calc(var(--c) * -.13); }
    .hero__accent {
        grid-area: media;
        align-self: start;
        justify-self: start;
        margin-top: calc(var(--c) * .21);
        font-size: calc(var(--c) * .125);
        white-space: nowrap;
        position: relative;
        z-index: 3;
    }
    .hero__end { grid-area: end; font-size: 13vw; display: flex; gap: .25em; justify-self: end; margin-top: .1em; }
    .hero__l4 { margin-left: 0; }
    .hero__intro { grid-area: intro; margin-top: 32px; }
    .hero__text { font-size: 22px; }

    .story .rule--story, .podcast .rule--podcast { margin-inline: 0 0; margin-bottom: 20px; }
    .story .section-head { padding-left: 0; }

    /* A co právě řešíte vy? */
    .situations__t1 { margin-left: 0; font-size: 13vw; }
    .situations__t2 { margin-left: 8vw; font-size: 17vw; flex-wrap: wrap; }
    .situations__t2 em { font-size: 20vw; }
    .situations__body { grid-template-columns: 1fr; min-height: 0; margin-top: 36px; gap: 28px; }
    .situations__choices-wrap { order: -1; padding-top: 0; }
    .situations__choices-wrap .rule--bracket { display: none; }
    .situations__choices button { font-size: 24px; line-height: 1.35; padding: 6px 0; }
    .situations__answers { padding: 0; }
    .situations__answer, .situations__video { max-width: none; }
    .situations__note { padding-top: 36px; }
    .situations__note .rule--note { left: 0; width: 70%; }
    .situations__note .rule--note-down { left: 0; height: 80px; }
    .situations__note p { margin-left: 0; }

    /* Služby */
    .services__title { margin-left: 0; }
    .service > .rule { margin-inline: 0; }
    .service__toggle {
        grid-template-columns: 44px 1fr 30px;
        grid-template-areas: "num name icon" ". excerpt excerpt";
        row-gap: 8px;
        padding: 18px 0;
    }
    .service__num { grid-area: num; }
    .service__name { grid-area: name; }
    .service__excerpt { grid-area: excerpt; }
    .service__icon { grid-area: icon; }
    .service__content, .service__content.has-media { grid-template-columns: 1fr; padding: 0 0 36px 44px; gap: 28px; }
    .service__media { order: -1; }

    /* Slidery */
    .projects-slider__frame { padding-left: 0; }
    .projects-slider__title { margin-left: 0; }
    .rule--vertical { display: none; }
    .slider__caption { grid-template-columns: 1fr; gap: 6px; padding-left: 0; }
    .slider__detail { justify-self: start; }
    /* Šipky v kostičkách po stranách fotky – stejné tenké šipky jako v návrhu.
       Leží mimo posouvaný pás, takže se nehýbou se snímky; na prvním / posledním snímku se příslušná skryje. */
    .projects-slider .slider__arrows {
        top: calc(100cqw * 1094 / 1640 / 2);
        left: 0;
        right: 0;
        justify-content: space-between;
        transform: translateY(-50%);
        pointer-events: none;
    }
    .projects-slider .slider__arrow {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        background: rgba(248, 248, 244, .9);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        pointer-events: auto;
        transition: opacity .3s var(--ease), background-color .2s var(--ease);
    }
    .projects-slider .slider__arrow svg { width: 30px; }
    .projects-slider .slider__arrow:hover, .projects-slider .slider__arrow[data-slider-next]:hover { transform: none; }
    .projects-slider .slider__arrow:active { background: var(--c-bg); }
    .projects-slider .slider__arrow:disabled { opacity: 0; pointer-events: none; }
    /* Bez zvětšení fotky po dotyku – fotka pak přesně lícuje s kostičkami šipek */
    .slider__media:hover img { transform: none; }
    .projects-slider .slider__footer { margin-top: 14px; }
    .slider__footer { padding-left: 0; flex-wrap: wrap; }

    .dots__dot { width: 26px; }

    /* Spolupráce */
    .process__steps { grid-template-columns: 1fr; padding: 0; }
    .process__step { grid-template-columns: 44px 1fr; row-gap: 20px; }

    /* Reference */
    .testimonials__grid { grid-template-columns: 1fr; }
    .testimonials__head { display: flex; align-items: center; justify-content: space-between; padding-left: 0; }
    .testimonials__mark { margin: 0; }
    .testimonials__slider { max-width: none; }
    .fade-slider__controls { flex-wrap: wrap; row-gap: 14px; }
    .fade-slider__controls .dots { flex: 1 1 100%; }
    .fade-slider__controls .slider__arrows { margin-inline: auto; }
    /* Recenze: čárky a šipky nad textem – při přepínání zůstávají pořád na stejném místě */
    .testimonials__slider { display: flex; flex-direction: column; }
    .testimonials__slider .fade-slider__controls { order: -1; flex-wrap: nowrap; margin: 0 0 24px; }
    .testimonials__slider .fade-slider__controls .dots { flex: 1 1 auto; }
    .testimonials__slider .fade-slider__controls .slider__arrows { margin-inline: 0; }
    .testimonials__slider .dots__dot { width: 20px; }

    /* Podcast, realizace */
    .podcast .section-head { padding-inline: 0; }
    .card-grid { grid-template-columns: 1fr; }

    /* Loga */
    .logos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; max-width: none; }
    .logos__item a, .logos__item > img, .logos__item > span { height: 70px; }
    .logos__item img { --logo: 46px; opacity: .8; }

    /* O mně */
    .about__grid { grid-template-columns: 1fr; min-height: 0; gap: 32px; padding-bottom: 0; }
    .about__text { padding: 64px 0 0; }
    .about__photo { left: 0; }
    .about__more { max-width: none; }
    .about__title { font-size: 12.5vw; }
    .about__photo { margin: 0 0 -120px; width: 86%; justify-self: end; }
    .about__photo figcaption { left: 20px; top: 18px; }
    .about__contact { padding-top: 150px; }
    .about__contact > * { margin-left: 0; }

    /* Patička */
    .site-footer .wrap { padding-left: var(--gutter); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
    .site-footer__company, .site-footer__ids { grid-column: span 1; }
    .site-footer__claim { grid-template-columns: 1fr; }
    .site-footer__rule { display: none; }
    .site-footer__claim .socials { margin: 0; }

    /* Podstránky */
    .page-head .page-title { padding-left: 0; }
    .project__frame .slider, .project__frame > section { margin-left: 0; }
    .project__facts, .project__testimonial, .project__story { padding-left: 0; padding-right: 0; max-width: none; }
    .facts { display: grid; grid-template-columns: 1fr 1fr; }
    .facts__item { text-align: left; }
    .facts--wide { grid-template-columns: 1fr; }
    .project__gallery .section-title { padding-left: 0; }
    .gallery { grid-template-columns: 1fr; gap: 14px; }
    .big-cta__l1 { margin-left: 0; font-size: 13vw; }
    .big-cta__l2 { margin-left: 10vw; font-size: 20vw; }
    .big-cta .rule--bracket { display: none; }
    .big-cta .link--big { margin: 24px 0 0 auto; }
    .listing__intro { padding-left: 0; }
    .listing__hero img { aspect-ratio: 3 / 2; }
}

@media (max-width: 480px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .facts { grid-template-columns: 1fr; }
}