/* ==========================================================================
   KOKULA s. r. o.  —  stylesheet
   Mobile-first, 8px spacing rytmus, WCAG AA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens (CSS proměnné)
   -------------------------------------------------------------------------- */
:root {
    /* Barvy — pozadí / povrchy */
    --c-bg:           #FFFFFF;   /* světlé pozadí stránky (60 %) */
    --c-surface:      #F3F5F4;   /* sekundární / alternované sekce (30 %) */
    --c-surface-2:    #E9ECEA;   /* hlubší surface pro karty na alternované sekci */
    --c-dark:         #0F172A;   /* tmavý break + patička */

    /* Barvy — text */
    --c-text:         #0F172A;
    --c-text-muted:   #475569;
    --c-text-on-dark: #F8FAFC;
    --c-muted-on-dark:#CBD5E1;

    /* Akcenty (10 %) — deep teal */
    --c-accent:           #0F766E;
    --c-accent-hover:     #115E59;
    --c-accent-on-dark:   #2DD4BF;

    /* Okraje */
    --c-border:           #E2E8F0;
    --c-border-on-dark:   #1E293B;

    /* Stavové */
    --c-error:   #B42318;
    --c-success: #067647;
    --c-warning: #B54708;
    --c-info:    #175CD3;

    /* Typografie */
    --ff-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --ff-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fs-caption: 0.75rem;   /* 12 */
    --fs-body:    1rem;      /* 16 */
    --fs-h4:      1.25rem;   /* 20 */
    --fs-h3:      1.5rem;    /* 24 */
    --fs-h2:      2rem;      /* 32 */
    --fs-h1:      clamp(2.25rem, 4.5vw + 1rem, 3.5rem); /* 40 → 56 */

    /* Spacing 8px rytmus (s povolenými fine-tuningy) */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  16px;
    --sp-4:  24px;
    --sp-5:  32px;
    --sp-6:  48px;
    --sp-7:  64px;
    --sp-8:  96px;
    --sp-9:  128px;

    /* Layout */
    --container-max: 1280px;
    --container-px:  16px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 999px;

    /* Stíny */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.12);

    /* Přechody */
    --t-fast: 120ms ease;
    --t-base: 200ms ease;
}

@media (min-width: 768px) {
    :root {
        --container-px: 24px;
        --fs-h2: 2.25rem;  /* 36 */
    }
}

@media (min-width: 1024px) {
    :root {
        --container-px: 32px;
        --fs-h2: 2.5rem;   /* 40 */
    }
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    font-family: var(--ff-sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--c-text);
    background-color: var(--c-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background-color: var(--c-surface); }   /* fallback dokud se neobrázek nenačte */

a {
    color: var(--c-accent);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover { color: var(--c-accent-hover); }

h1, h2, h3, h4 {
    font-family: var(--ff-serif);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-text);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { max-width: 68ch; }

ul { list-style: none; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.section--dark :focus-visible {
    outline-color: var(--c-accent-on-dark);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--c-dark);
    color: var(--c-text-on-dark);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    z-index: 1000;
    transition: top var(--t-fast);
}
.skip-link:focus { top: 16px; color: var(--c-text-on-dark); }

/* --------------------------------------------------------------------------
   3. Layout — page wrapper, container
   -------------------------------------------------------------------------- */
.page {
    background: var(--c-bg);
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow-x: clip;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    padding-left: var(--container-px);
    padding-right: var(--container-px);
    margin-left: auto;
    margin-right: auto;
}

section {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
}
@media (min-width: 768px)  { section { padding-top: var(--sp-8); padding-bottom: var(--sp-8); } }
@media (min-width: 1024px) { section { padding-top: var(--sp-9); padding-bottom: var(--sp-9); } }

.section--surface { background-color: var(--c-surface); }
.section--dark    { background-color: var(--c-dark); color: var(--c-text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-text-on-dark); }
.section--dark a  { color: var(--c-accent-on-dark); }
.section--dark a:hover { color: #5EEAD4; }

/* --------------------------------------------------------------------------
   4. Common — eyebrow, section-head, muted
   -------------------------------------------------------------------------- */
.eyebrow {
    display: inline-block;
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--sp-3);
}
.eyebrow--on-dark { color: var(--c-accent-on-dark); }

.section-head {
    max-width: 720px;
    margin: 0 auto var(--sp-6);
    text-align: center;
}
.section-head__lede {
    color: var(--c-text-muted);
    margin-top: var(--sp-3);
    margin-left: auto;
    margin-right: auto;
}

.section-head--row {
    text-align: left;
    max-width: 100%;
    display: grid;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
@media (min-width: 1024px) {
    .section-head--row {
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: var(--sp-6);
    }
    .section-head--row .section-head__lede { margin: 0; }
}

.muted { color: var(--c-text-muted); }
.section--dark .muted { color: var(--c-muted-on-dark); }

/* --------------------------------------------------------------------------
   5. Buttons (consistent across the whole site)
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;       /* Fitts */
    padding: 12px 22px;
    border-radius: var(--radius-full);
    font-family: var(--ff-sans);
    font-size: 0.9375rem;   /* 15px */
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
    border: 2px solid transparent;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

.btn--sm { min-height: 40px; padding: 10px 18px; font-size: 0.875rem; }

.btn--block { width: 100%; }

.btn--primary {
    background: var(--c-accent);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(15, 118, 110, 0.28);
}
.btn--primary:hover { background: var(--c-accent-hover); color: #FFFFFF; }
.section--dark .btn--primary {
    background: var(--c-accent-on-dark);
    color: var(--c-dark);
    box-shadow: 0 6px 18px rgba(45, 212, 191, 0.28);
}
.section--dark .btn--primary:hover { background: #5EEAD4; color: var(--c-dark); }

.btn--ghost {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-border);
}
.btn--ghost:hover { background: var(--c-surface); color: var(--c-text); }

.btn--ghost-on-dark {
    background: transparent;
    color: var(--c-text-on-dark);
    border-color: rgba(248, 250, 252, 0.4);
}
.btn--ghost-on-dark:hover {
    background: rgba(248, 250, 252, 0.1);
    color: var(--c-text-on-dark);
    border-color: rgba(248, 250, 252, 0.7);
}

/* --------------------------------------------------------------------------
   6. Header / Nav
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--c-border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 64px;
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--c-text);
    font-family: var(--ff-serif);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}
.logo:hover { color: var(--c-text); }
.logo__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--c-accent);
    color: #FFFFFF;
    border-radius: 10px;
    font-family: var(--ff-serif);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1;
}
.logo__suffix {
    color: var(--c-text-muted);
    font-weight: 500;
    font-size: 0.8em;
}

.logo--on-dark { color: var(--c-text-on-dark); }
.logo--on-dark .logo__mark { background: var(--c-accent-on-dark); color: var(--c-dark); }
.logo--on-dark .logo__suffix { color: var(--c-muted-on-dark); }

.nav { display: none; }
.nav__list {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
}
.nav__list a {
    display: inline-block;
    padding: 10px 4px;
    color: var(--c-text);
    font-weight: 500;
    font-size: 0.9375rem;
    position: relative;
}
.nav__list a:hover { color: var(--c-accent); }
.nav__list a::after {
    content: "";
    position: absolute;
    left: 4px; right: 4px; bottom: 6px;
    height: 2px;
    background: var(--c-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base);
}
.nav__list a:hover::after { transform: scaleX(1); }

.nav__cta { display: none; }

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid var(--c-border);
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-text);
    border-radius: 2px;
    transition: transform var(--t-base), opacity var(--t-base);
    transform-origin: center;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    border-top: 1px solid var(--c-border);
    background: var(--c-bg);
}
.mobile-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--container-px) var(--sp-4);
}
.mobile-nav a {
    display: block;
    padding: 12px 8px;
    color: var(--c-text);
    font-weight: 500;
    font-size: 1rem;
    border-radius: var(--radius-sm);
}
.mobile-nav a:hover { background: var(--c-surface); color: var(--c-text); }
.mobile-nav .btn { margin-top: var(--sp-2); }

@media (min-width: 1024px) {
    .nav, .nav__cta { display: flex; }
    .nav-toggle { display: none; }
    .mobile-nav { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { padding-top: var(--sp-5); padding-bottom: var(--sp-7); }
@media (min-width: 768px) { .hero { padding-top: var(--sp-6); } }

/* Hero má vlastní širší kontejner než zbytek stránky */
.hero > .container {
    max-width: 1600px;
}
@media (min-width: 1440px) {
    .hero > .container {
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }
}

.hero__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-surface);
}
@media (min-width: 1024px) {
    .hero__media { border-radius: var(--radius-xl); }
}

.hero__image {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
@media (min-width: 640px)  { .hero__image { aspect-ratio: 3 / 2; } }
@media (min-width: 1024px) { .hero__image { aspect-ratio: 16 / 9; } }

.hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-4);
    color: var(--c-text-on-dark);
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.55) 0%,
        rgba(15, 23, 42, 0.35) 40%,
        rgba(15, 23, 42, 0.70) 100%);
    text-align: left;
}
@media (min-width: 768px) {
    .hero__overlay { padding: var(--sp-6); }
}
@media (min-width: 1024px) {
    .hero__overlay { padding: var(--sp-7); }
}

.hero__title {
    color: #FFFFFF;
    max-width: 18ch;
    margin-bottom: var(--sp-3);
}
.hero__lede {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.0625rem;
    max-width: 52ch;
    margin-bottom: var(--sp-5);
}
@media (min-width: 768px) { .hero__lede { font-size: 1.125rem; } }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.hero__stats {
    position: relative;
    margin: calc(-1 * var(--sp-5)) var(--sp-2) 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: var(--c-bg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-3);
    z-index: 2;
}
@media (min-width: 768px)  {
    .hero__stats {
        margin: calc(-1 * var(--sp-6)) auto 0;
        max-width: 640px;
        padding: var(--sp-3) var(--sp-5);
    }
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-2);
    border-right: 1px solid var(--c-border);
}
.stat:last-child { border-right: none; }
.stat__num {
    font-family: var(--ff-serif);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--c-text);
    line-height: 1;
}
@media (min-width: 768px) { .stat__num { font-size: 2rem; } }
.stat__label {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    margin-top: 4px;
}
@media (min-width: 768px) { .stat__label { font-size: 0.875rem; } }

/* --------------------------------------------------------------------------
   8. Services
   -------------------------------------------------------------------------- */
.service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}
@media (min-width: 768px)  { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

.service-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.service-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: #CBD5E1;
}
.service-card h3 { font-size: var(--fs-h4); }
.service-card p { color: var(--c-text-muted); font-size: 0.9375rem; }
.service-card__phase {
    margin-top: auto;
    font-family: var(--ff-serif);
    font-size: 0.875rem;
    color: var(--c-accent);
    letter-spacing: 0.04em;
}

.icon-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--c-accent);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.25);
}
.icon-bubble--lg { width: 56px; height: 56px; border-radius: 16px; }

.services__extra {
    margin: var(--sp-5) auto 0;
    max-width: 60ch;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 0.9375rem;
}
.services__extra span { color: var(--c-accent); font-weight: 700; }

/* --------------------------------------------------------------------------
   9. References
   -------------------------------------------------------------------------- */
.ref-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}
@media (min-width: 640px)  { .ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ref-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }

.ref-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.ref-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ref-card h3 { font-size: var(--fs-h4); margin-top: 4px; }
.ref-card p { color: var(--c-text-muted); font-size: 0.9375rem; }
.ref-card__tag {
    display: inline-block;
    align-self: flex-start;
    background: rgba(15, 118, 110, 0.08);
    color: var(--c-accent);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   10. Gallery
   -------------------------------------------------------------------------- */
.tabs {
    display: inline-flex;
    background: var(--c-surface);
    border-radius: var(--radius-full);
    padding: 4px;
    margin: 0 auto var(--sp-5);
    box-shadow: inset 0 0 0 1px var(--c-border);
}
.section--surface .tabs { background: var(--c-bg); }

.gallery .section-head { margin-bottom: var(--sp-4); }
.gallery .container > .tabs { display: flex; width: max-content; margin-left: auto; margin-right: auto; }

.tab {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    color: var(--c-text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    transition: background var(--t-base), color var(--t-base);
}
.tab:hover { color: var(--c-text); }
.tab.is-active {
    background: var(--c-accent);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}
.tab.is-active:hover { color: #FFFFFF; }

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--sp-3);  /* 16 */
}
@media (min-width: 640px)  {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--sp-4);  /* 24 */
    }
}

.gallery-tile {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    display: block;
    margin-bottom: var(--sp-4);   /* 24 — vertikální mezera mezi řádky */
}
@media (min-width: 1024px) {
    .gallery-tile { margin-bottom: var(--sp-5); }   /* 32 */
}
.gallery-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--t-base);
}
.gallery-tile:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   11. Why us — feature blocks (decorative)
   -------------------------------------------------------------------------- */
.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}
@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }

.feature-block {
    position: relative;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    overflow: hidden;
    min-height: 220px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.feature-block:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature-block--highlight:hover { transform: translateY(-2px); }
.feature-block h3 { font-size: var(--fs-h4); }
.feature-block p  { color: var(--c-text-muted); font-size: 0.9375rem; }

.feature-block--highlight {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #FFFFFF;
}
.feature-block--highlight h3 { color: #FFFFFF; }
.feature-block--highlight p  { color: rgba(255, 255, 255, 0.85); }
.feature-block--highlight .link-arrow { color: #FFFFFF; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    color: var(--c-accent);
    font-weight: 600;
    font-size: 0.9375rem;
}
.link-arrow:hover { color: var(--c-accent-hover); }
.feature-block--highlight .link-arrow:hover { color: #CCFBF1; }

/* Decorations */
.feature-block__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.dot {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--c-accent);
    opacity: 0.18;
}
.dot--tl { top: 14px; left: 14px; }
.dot--tr { top: 14px; right: 14px; }
.dot--bl { bottom: 14px; left: 14px; }
.dot--br { bottom: 14px; right: 14px; }

.ring {
    position: absolute;
    width: 220px; height: 220px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    top: -90px; right: -90px;
}
.feature-block--highlight .ring { display: block; }

/* --------------------------------------------------------------------------
   12. About + Team
   -------------------------------------------------------------------------- */
.about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}
@media (min-width: 1024px) {
    .about__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--sp-7);
        align-items: start;
    }
}

.about__copy h2 { margin-bottom: var(--sp-3); }
.about__copy p { color: var(--c-text-muted); margin-top: var(--sp-3); }
.about__copy p:first-of-type { margin-top: var(--sp-3); }

.team {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}
@media (min-width: 640px) { .team { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }

.team-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.team-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.team-card__avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #FFFFFF;
    font-family: var(--ff-serif);
    font-weight: 600;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.04em;
}
.team-card__avatar--alt { background: #0F172A; }
.team-card h3 { font-size: var(--fs-h4); }
.team-card__role { color: var(--c-text-muted); font-size: 0.875rem; margin-top: -8px; }
.team-card__contact { display: flex; flex-direction: column; gap: 4px; font-size: 0.9375rem; }
.team-card__contact a { color: var(--c-text); }
.team-card__contact a:hover { color: var(--c-accent); }

/* --------------------------------------------------------------------------
   13. Contact + Form
   -------------------------------------------------------------------------- */
.contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}
@media (min-width: 1024px) {
    .contact__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--sp-7);
        align-items: start;
    }
}

.contact__lede {
    color: var(--c-text-muted);
    margin-top: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.contact-list {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
}
.contact-list__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--sp-3);
    align-items: start;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
}
.contact-list__row:first-child { border-top: none; padding-top: 0; }
.contact-list dt {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
    font-weight: 600;
}
.contact-list dd { color: var(--c-text); }
.contact-list dd a { color: var(--c-text); }
.contact-list dd a:hover { color: var(--c-accent); }

/* Form */
.form {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { .form { padding: var(--sp-6); } }

.form__title {
    font-family: var(--ff-serif);
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-2);
}

.form__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-text);
}
.form label .muted { font-weight: 400; }

.form input,
.form select,
.form textarea {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-family: var(--ff-sans);
    font-size: 1rem;
    color: var(--c-text);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.form textarea { min-height: 132px; resize: vertical; line-height: 1.5; }

.form input:hover,
.form select:hover,
.form textarea:hover { border-color: #CBD5E1; }

.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: 2px solid var(--c-accent);
    outline-offset: 1px;
    border-color: var(--c-accent);
}

.form input::placeholder,
.form textarea::placeholder { color: #94A3B8; }

.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"] {
    border-color: var(--c-error);
}

.form__actions {
    margin-top: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.form__note {
    font-size: 0.875rem;
    color: var(--c-text-muted);
    min-height: 1.5em;
}
.form__note.is-success { color: var(--c-success); }
.form__note.is-error { color: var(--c-error); }

/* --------------------------------------------------------------------------
   14. CTA banner (dark break)
   -------------------------------------------------------------------------- */
.cta-banner__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    align-items: center;
}
@media (min-width: 1024px) {
    .cta-banner__inner {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--sp-7);
    }
}

.cta-banner__copy h2 {
    font-size: clamp(2rem, 3.5vw + 1rem, 3rem);
    color: var(--c-text-on-dark);
    margin-bottom: var(--sp-3);
}
.cta-banner__copy p {
    color: var(--c-muted-on-dark);
    margin-bottom: var(--sp-5);
    font-size: 1.0625rem;
}
.cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.cta-banner__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.cta-banner__media img {
    width: 100%; height: 100%; object-fit: cover;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--c-dark);
    color: var(--c-text-on-dark);
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-5);
    border-top: 1px solid var(--c-border-on-dark);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}
@media (min-width: 640px)  { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--sp-6); } }

.site-footer__brand .logo { margin-bottom: var(--sp-3); }
.site-footer__brand p { color: var(--c-muted-on-dark); font-size: 0.9375rem; max-width: 40ch; }

.site-footer__col h4 {
    color: var(--c-text-on-dark);
    font-family: var(--ff-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-3);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: 8px; }
.site-footer__col a {
    color: var(--c-muted-on-dark);
    font-size: 0.9375rem;
}
.site-footer__col a:hover { color: var(--c-text-on-dark); }

/* Strukturované kontakty (per osoba) */
.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.footer-contacts__person {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-contacts__person p { margin: 0; max-width: none; font-size: 0.9375rem; }
.footer-contacts__name {
    color: var(--c-text-on-dark);
    font-weight: 500;
}
.footer-contacts__role {
    color: var(--c-muted-on-dark);
    font-size: 0.8125rem;
    margin-bottom: 4px !important;
}
.footer-contacts__person a {
    color: var(--c-muted-on-dark);
}
.footer-contacts__person a:hover { color: var(--c-text-on-dark); }

.site-footer address {
    font-style: normal;
    color: var(--c-muted-on-dark);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.site-footer__legal {
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border-on-dark);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    color: var(--c-muted-on-dark);
    font-size: 0.875rem;
}
@media (min-width: 768px) {
    .site-footer__legal { flex-direction: row; justify-content: space-between; align-items: center; }
}
.site-footer__credit a { color: var(--c-text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__credit a:hover { color: var(--c-accent-on-dark); }

/* --------------------------------------------------------------------------
   16. Utility — selection
   -------------------------------------------------------------------------- */
::selection {
    background: var(--c-accent);
    color: #FFFFFF;
}