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

* {
    margin: 0;
    padding: 0;
}

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

body {
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

ul {
    list-style: none;
}

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

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

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

/* ============================================
   TOKENS
   ============================================ */
:root {
    
    --bg-cream-flat:    #F9F6F1;
    --bg-bluenavy-flat: #1C3144;

    /* === TEXT === Used ONLY as foreground color. */
    --text-cream:    #ECE2D0;   /* text on dark surfaces */
    --text-bluenavy: #1C3144;   /* text on light surfaces */

    /* === ACCENTS === Emphasis surfaces — aboveheadline, em, badges, button-bg overrides. */
    --accent-yellow:       #F8C630;
    --accent-redwine:      #AB274F;
    --accent-redwine-deep: #841F3C;   /* darker wine — referenced inside the redwine-sateen gradient stack (currently inline) */

    
    --button-bg-navy: #1C3144;

    --container-max: 1460px;
    --container-width: 80%;

    --section-padding-y: 40px;
    --header-height: 102px;      /* includes 12px navy border-bottom */

    --font-headline: 'Marcellus', serif;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

    /* default column gap inside a row — overridable via row modifier */
    --column-gap: 40px;

    
    --headline-padding-bottom:      20px;
    --aboveheadline-padding-bottom: 0px;
    --text-button-gap:              24px;
    --blurb-icon-gap:               10px;
    --row-after-intro:              60px;   /* gap between a section's header row and the payload row that follows it */
    --footer-column-gap:            14px;   /* vertical rhythm inside each footer column */
    --list-padding-top:             0;      
}

/* ============================================
   BASE TYPOGRAPHY (mobile-first)
   ============================================ */
body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.7;
}

h1, h2, h3, h4 {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.5;
}

.dc {
    padding-bottom: var(--headline-padding-bottom);
}

strong, b {
    font-weight: 600;
}

.zd {
    font-size: 21px;
}

/* ============================================
   RESPONSIVE UTILITIES
   Mobile-first: hidden by default, surface at the breakpoint.
   ============================================ */

/* `dbr` = desktop-break. Hides the element below 768px so explicit `<br>` line
   breaks don't leave orphan lines on mobile. Keep a regular space immediately
   before `<br class="dbr">` so the surrounding words don't fuse on mobile. */
.ba { display: none; }

@media (min-width: 768px) {
    br.ba { display: inline; }
    .ba { display: initial; }
}



/* Primary section bg — cream sateen. */
.c {
    background-color: #ECE2D0;
    background-image:
        radial-gradient(ellipse at 15% 20%, #F9F6F1 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, #ECE2D0 0%, transparent 60%),
        radial-gradient(ellipse at 70% 30%, #F9F6F1 0%, transparent 45%),
        radial-gradient(circle at 25% 75%, rgba(255, 255, 255, 0.15) 0%, transparent 30%);
    color: var(--text-bluenavy);
}

/* Wine sateen — accent bg utility. Used by the menu / header. */
.e {
    background-color: #841f3c;
    background-image:
        radial-gradient(ellipse at 15% 20%, #ab274f 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, #841f3c 0%, transparent 60%),
        radial-gradient(ellipse at 70% 30%, #c93760 0%, transparent 45%),
        radial-gradient(circle at 25% 75%, rgba(248, 198, 48, 0.18) 0%, transparent 30%);
    color: var(--text-cream);
}

.b {
    background-color: var(--bg-cream-flat);
    color: var(--text-bluenavy);
}

/* Dark navy bg. Pairs with cream text (`--text-cream`). */
.a {
    background-color: var(--bg-bluenavy-flat);
    color: var(--text-cream);
}

/* #social-proof — compact bar (~120px tall total), tight section padding. */
#social-proof {
    padding: 32px 0;
}

/* Light sateen — mirrors the .c structure exactly (default ellipses, no linear sheen,
   one same-as-base "shadow" pool, yellow accent at low opacity). Two cream tones the user
   specified plus the project accent at 15% opacity for warmth. */
.d {
    background-color: #ECE2D0;
    background-image:
        radial-gradient(ellipse at 15% 20%, #F9F6F1 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, #ECE2D0 0%, transparent 60%),
        radial-gradient(ellipse at 70% 30%, #F9F6F1 0%, transparent 45%),
        radial-gradient(circle at 25% 75%, rgba(255, 255, 255, 0.15) 0%, transparent 30%);
    color: var(--text-bluenavy);
}

/* ============================================
   HERO — fills viewport minus header
   Section deviations:
   - light sateen via .d (mirrors .c structure with cream tones)
   - 2col: text 1-2 + image 1-2
   - 50px section padding top/bottom; image is square, height-driven by hero
   - headline italic emphasis allowed (only this section so far)
   ============================================ */
.wa {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));
    padding: 50px 0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;            /* clip dots-bg that hangs off the right edge */
}


.wa .bd {
    position: relative;          /* sit above the dots layer */
    z-index: 1;
}

.wa .bd {
    align-items: stretch;       /* both cols same height = max content height */
}

/* TEXT COL — base .h is already flex-column. Center the text-block wrapper;
   waves is positioned absolutely at the bottom so it doesn't push content. */
.wa .j:first-child {
    justify-content: center;
    position: relative;
}


.uc {
    display: flex;
    flex-direction: column;
}

.wa .uc {
    transform: translateY(-40px);
}


/* IMAGE COL — center image on both axes inside the stretched col. */
.wa .ya {
    padding: 0;
    align-items: center;
    justify-content: center;
}

/* Slight 10px lift of the photo (deviation, hero only) */
.wa .ya .fc {
    transform: translateY(-10px);
}

/* Hero photo — exclude the --bare variant so waves wrapper keeps its own aspect-ratio: auto */
.wa .fc:not(.gc) {
    aspect-ratio: 1 / 1;
    width: min(100%, calc(100vh - var(--header-height) - 100px));
    width: min(100%, calc(100dvh - var(--header-height) - 100px));
    height: auto;
    overflow: visible;     /* let decorations extend outside */
    position: relative;
    background-color: transparent;
}

/* Top-align the crop so the subject's head is preserved when the image's aspect
   ratio doesn't match the 1:1 frame. */
.wa .fc img {
    object-position: center top;
}

@media (max-width: 767px) {
    .wa .fc:not(.gc) {
        width: 100%;
    }
}

/* ============================================
   IMAGE — inset variant (passe-partout) on the hero photo only.
   SVG path frame; on hover one segment slides around (dashoffset transition).
   ============================================ */
.wa .ic .bb {
    position: absolute;
    top: 14px; right: 14px; bottom: 14px; left: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.wa .ic .bb path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);  /* slightly transparent — less shiny than pure #fff */
    stroke-width: 0.25;                /* viewBox units — ~1.2-1.5px rendered, slightly antialiased = softer look */
    stroke-dasharray: 400 0;            /* full perimeter visible (perimeter = 4 × 100 = 400) */
    stroke-dashoffset: 0;
    transition: stroke-dasharray 1s ease-in-out,
                stroke-dashoffset 1s ease-in-out;
}

.wa .ic:hover .bb path {
    stroke-dasharray: 40 400;
    stroke-dashoffset: -80;
}

.wa .dc em {
    display: block;            /* break to its own line */
    font-style: italic;
    color: var(--accent-redwine);
}

/* Hero typography overrides: H1 +8px, body +2px (section deviation). */
.wa .dc h1 {
    font-size: 38px;
}

@media (min-width: 768px) {
    .wa .dc h1 {
        font-size: 48px;
    }
}

.wa .nc p {
    font-size: 19px;
}

@media (min-width: 768px) {
    .wa .nc p {
        font-size: 20px;
    }
}


.wa .nc {
    padding-bottom: 30px;
}

/* Hero CTA pair — inline row, wraps on mobile. No top margin: text owns the gap. */
.wa .xa {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 0;
}

.wa .xa .wb { margin-top: 0; }

/* Waves — absolutely pinned at the text col bottom. Its bottom edge will
   align with the image bottom because the row is stretched (both cols equal height). */
.wa .za {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
}

.wa .za img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   SECTION — bare modifier
   Opts out of the default section vertical padding.
   Used by page-hero, footer, and any section that
   sets its own height/spacing.
   Compound selector → wins specificity over .jd.
   ============================================ */
.jd.kd {
    padding-top: 0;
    padding-bottom: 0;
}

/* ============================================
   PAGE-HERO — fixed 160px band on every subpage.
   H1 only, no aboveheadline. Always bg-cream-sateen.
   Pair with .kd to drop default padding.
   Mobile spec deferred — desktop values below.
   ============================================ */
.ld {
    min-height: 200px;
    display: flex;
    align-items: center;
}

/* page-hero `headline-text` variation — intro text capped to 50% so it sits
   under the headline without spanning the full row width. */
[data-c="f"][data-v="f"] .nc {
    max-width: 50%;
}

.ld .dc {
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .ld h1 {
        font-size: 50px;
    }
}

/* ============================================
   DIVI MODEL — SECTION > ROW > COLUMN > MODULE
   ============================================ */

/* SECTION — full-bleed bg, vertical padding only. Never holds content directly. */
.jd {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

/* ============================================
   BREAKPOINT-SPECIFIC SECTIONS
   ------------------------------------------------------------
   A section can declare it only exists at a given viewport via
   `data-breakpoint="desktop"` or `data-breakpoint="mobile"`. Pair
   a desktop section with a mobile sibling that re-implements the
   same content with a different layout; the browser swaps them
   automatically at the 768px breakpoint. Default state: mobile
   sibling is hidden; on small viewports the desktop sibling hides
   and the mobile sibling reveals. Lab can override (see debug.aa).
   ============================================ */
[data-b="b"] { display: none; }
@media (max-width: 767px) {
    [data-b="a"] { display: none; }
    [data-b="b"]  { display: block; }
}

/* ROW — width-constrained container holding columns. Mobile: stacked. Desktop: row. */
.bd {
    width: var(--container-width);
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: var(--column-gap);
}

/* Row gap modifiers — control space between columns inside this row */
.ed { --column-gap: 0;    }
.fd   { --column-gap: 20px; }
.dd   { --column-gap: 40px; } /* native */
.cd   { --column-gap: 60px; }
.gd   { --column-gap: 80px; }

/* Nested row — used inside a column. Strips the global container width
   (the outer row already constrains layout). Fills 100% of its parent column. */
.hd {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    align-items: center;
}

/* COLUMN — layout slot. Mobile: full width. Desktop: proportional.
   No native padding. Spacing between columns is controlled by row gap only. */
.h {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Section-scoped: center content inside these section columns only */
#jak-spoluprace-probiha .h,
#co-pro-vas-udelam .h,
#intro-band .h,
#nastroje .h,
#proces .h,
#proces-horizontal .h,
#cena-cas .h,

#sekce-1,
#sekce-2,
#sekce-3 {
    --section-padding-y: 120px;
    --list-padding-top: 15px;
}


#services-pair-1,
#services-pair-2,
#sluzba-5 {
    --list-padding-top: 20px;
}

/* sluzby in-page anchor targets — sticky header (102/106px) covers the headline
   when jumping to a column id; offset the scroll position by header + section-padding. */
#sprava,
#e-mailing,
#kurzy,
#ai,
#kongresy {
    scroll-margin-top: calc(var(--header-height) + 40px);
}


#sekce-1 .jc ul {
    display: block;
    columns: 2;
    column-gap: 32px;
}

#sekce-1 .jc li {
    break-inside: avoid;
    margin-bottom: 8px;                      /* restore item gap — block layout doesn't honor the parent's flex `gap` */
}

#sekce-1 .jc li:nth-child(3) {
    break-after: column;
}

/* kontakt page — image stays 1:1 (project default); right column flows full
   column width. Earlier cap removed so the legal text wraps at column edge. */

/* `Najdete mě na sociálních sítích` heading — significantly smaller than h2 */
#kontakt-1-original .ob,
#kontakt-1-original .ob h3,
#kontakt-2 .ob,
#kontakt-2 .ob h3 {
    padding-top: 0;
    margin-top: 0;
}

#kontakt-1-original .ob h3,
#kontakt-2 .ob h3 {
    font-size: 20px;
}

@media (min-width: 768px) {
    #kontakt-1-original .ob h3,
    #kontakt-2 .ob h3 {
        font-size: 22px;
    }
}


#kontakt-1-original .wc .tb,
#kontakt-2 .wc .tb {
    border-color: rgba(28, 49, 68, 0.25);
}

/* kontakt-2 social blurbs (icon + handle text, anchor-wrapped): inline-row
   inside the right cell of the nested row. Navy text → wine on hover; icon
   stays wine to match the brand-accent feel of the social labels. */
#kontakt-2 .nb {
    color: var(--text-bluenavy);
    text-decoration: none;
    padding: 4px 0;
}

#kontakt-2 .nb .ec {
    color: var(--accent-redwine);
}

#kontakt-2 .nb:hover {
    color: var(--accent-redwine);
}


#kontakt-1-original .kb,
#kontakt-2 .kb {
    border-left: 3px solid var(--accent-redwine);
    padding: 0 0 0 22px;
    margin: 32px 0 24px;
}

#kontakt-1-original .kb .dc,
#kontakt-2 .kb .dc {
    padding-bottom: 12px;
}

#kontakt-1-original .kb .dc h4,
#kontakt-2 .kb .dc h4 {
    /* Headline stays in project headline font; size scoped smaller for inner-block use */
    font-size: 22px;
}

#kontakt-1-original .kb .nc p,
#kontakt-2 .kb .nc p {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;                     /* tighten — body's default 1.7 was too loose for the dense field list */
}

#kontakt-1-original .kb .nc p + p,
#kontakt-2 .kb .nc p + p {
    margin-top: 4px;
}

#kontakt-1-original .kb .nc p em,
#kontakt-2 .kb .nc p em {
    font-style: italic;
    opacity: 0.85;
}

/* Legal text — 14px, dimmed, tight line-height (body default 1.7 is too loose
   for the small font), with underlined wine links. */
#kontakt-1-original .lb p,
#kontakt-2 .lb p {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    opacity: 0.75;
}

#kontakt-1-original .lb p + p,
#kontakt-2 .lb p + p {
    margin-top: 8px;
}

#kontakt-1-original .lb a,
#kontakt-2 .lb a {
    text-decoration: underline;
    color: var(--accent-redwine);
}

/* kontakt redesigned section 1 (and its duplicate copy) — 1/4 image + 1/4 info-stack
   + 1/2 form. Image capped at 375x375. Info column has the page name as headline
   matched to the form headline size, then 4 vertically-stacked label+blurb pairs.
   Form: first two inputs sit in a 2-up form__row; submit button uses small deviation
   scoped to this section's form. */
#kontakt .fc,
#kontakt-1-copy .fc,
#kontakt-1-copy-2 .fc {
    max-width: 375px;
    aspect-ratio: 1 / 1;
}

#kontakt .gb,
#kontakt-1-copy .gb,
#kontakt-1-copy-2 .gb,
#kontakt .ib,
#kontakt-1-copy .ib,
#kontakt-1-copy-2 .ib {
    padding-bottom: 0;
}

#kontakt .gb h3,
#kontakt-1-copy .gb h3,
#kontakt-1-copy-2 .gb h3,
#kontakt .ib h3,
#kontakt-1-copy .ib h3,
#kontakt-1-copy-2 .ib h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    #kontakt .gb h3,
    #kontakt-1-copy .gb h3,
    #kontakt .ib h3,
    #kontakt-1-copy .ib h3 {
        font-size: 28px;
    }
}

#kontakt .hb,
#kontakt-1-copy .hb,
#kontakt-1-copy-2 .hb {
    gap: 18px;
}

/* Info-headline drops the margin-bottom that the form-headline carries — first
   info-item ("Telefon") should sit flush under the headline (col gap is the
   only spacing). Form-headline keeps its 20px breath above its inputs. */
#kontakt .ib h3,
#kontakt-1-copy .ib h3,
#kontakt-1-copy-2 .ib h3 {
    margin-bottom: 0;
}


#kontakt-1-copy-2 .fb > .h:nth-child(2) {
    margin-left: 40px;
}


#page-hero .zc {
    align-items: flex-end;
}

#page-hero .zc .wc .tb {
    border-color: rgba(28, 49, 68, 0.25);
}

#page-hero .zc .wc .tb:hover {
    border-color: rgba(28, 49, 68, 0.5);
    background-color: rgba(28, 49, 68, 0.06);
}

#kontakt .jb > .nc:first-child p,
#kontakt-1-copy .jb > .nc:first-child p,
#kontakt-1-copy-2 .jb > .nc:first-child p {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

#kontakt .jb .qc,
#kontakt-1-copy .jb .qc,
#kontakt-1-copy-2 .jb .qc {
    padding-bottom: 0;
    align-items: center;
    gap: 12px;
}

#kontakt .jb .ec,
#kontakt-1-copy .jb .ec,
#kontakt-1-copy-2 .jb .ec {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

#kontakt .jb .qc .nc p,
#kontakt-1-copy .jb .qc .nc p,
#kontakt-1-copy-2 .jb .qc .nc p {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

/* Section deviation: small submit button inside section 1 form. */
#kontakt .cc .wb,
#kontakt-1-copy .cc .wb,
#kontakt-1-copy-2 .cc .wb {
    padding: 10px 20px;
    font-size: 14px;
}

/* Honeypot — hidden field that bots fill, humans don't see. */
.pa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Form status banners (success / error). Shown after form submission. */
.la {
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.5;
    border-left: 3px solid currentColor;
}

.na {
    color: #1c3144;
    background-color: rgba(212, 175, 55, 0.18);
    border-left-color: var(--accent-yellow, #d4af37);
}

.ma {
    color: var(--accent-redwine, #7c2238);
    background-color: rgba(124, 34, 56, 0.08);
}

.la a {
    color: inherit;
    text-decoration: underline;
}

/* Hide the reCAPTCHA v3 badge — site doesn't display any Google branding. */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Form section — centered form headline + capped form width. */
#kontakt-form .cc {
    max-width: 640px;
    margin: 0 auto;
}

#kontakt-form .oa {
    text-align: center;
}

#kontakt-form .oa h3 {
    font-size: 26px;
}

@media (min-width: 768px) {
    #kontakt-form .oa h3 {
        font-size: 32px;
    }
}

/* sekce-2 image (Niky Melia) — biased top-center so the face stays in frame. */
#sekce-2 .fc img {
    object-position: 50% 0%;
}


#sekce-3 .fc img {
    object-position: 50% 25%;
}


#sekce-4 {
    text-align: center;
}

#sekce-4 .bd:nth-of-type(2) {
    margin-top: 35px;
}

#sekce-4 .bd:nth-of-type(2) .h {
    display: flex;
    flex-direction: row;             
    flex-wrap: wrap;
    gap: 50px;                       
    justify-content: center;
}


#sekce-4 .bd:nth-of-type(2) .h {
    gap: 0;
}

#sekce-4 .pc {
    width: 130px;
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

#sekce-4 .pc:hover {
    transform: translateY(-12px);
}

/* Slow zoom on photo hover — image scales 1.05× over 600ms. Parent has
   `overflow: hidden` (project default on `.fc`) so the bleeding
   edges are cropped — visible center appears to grow.

   Applied on:
     - #sekce-1 / #sekce-2 / #sekce-3 (spoluprace case-study photos)
     - #o-mne (main page About-me photo)
     - #kontakt-1-copy-2 (kontakt page section-1 photo) */
#sekce-1 .fc > img,
#sekce-2 .fc > img,
#sekce-3 .fc > img,
#o-mne .fc > img,
#kontakt-1-copy-2 .fc > img {
    transition: transform 600ms ease-out;
}

#sekce-1 .fc:hover > img,
#sekce-2 .fc:hover > img,
#sekce-3 .fc:hover > img,
#o-mne .fc:hover > img,
#kontakt-1-copy-2 .fc:hover > img {
    transform: scale(1.05);
}



#sekce-5 .bd:first-child {
    text-align: center;
}

#sekce-5 .bd:nth-of-type(2),
#sekce-5 .bd:nth-of-type(3) {
    margin-top: 35px;
}

/* Section-scoped: section 2 cards — aboveheadline gets 7px vertical padding (no
   horizontal padding so the eyebrow text stays flush-left with the headline below). */
#pro-koho-pracuji .rc .rb {
    padding: 7px 0;
}

/* Card-lift hover (pattern from asets/Main.ab .ad:hover):
   lift 4px, switch border to wine, soft wine-tinted shadow.
   Applied on:
     - #pro-koho-pracuji (section 2 cards on main page)
     - #testimonials (testimonial cards on main page)
     - #sekce-5 (testimonial cards on spoluprace page) */
#pro-koho-pracuji .rc,
#testimonials .lc,
#sekce-5 .lc {
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

#pro-koho-pracuji .rc:hover,
#testimonials .lc:hover,
#sekce-5 .lc:hover {
    border-color: var(--accent-redwine);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(132, 31, 60, 0.1);
}

/* Section-scoped: pre-footer "Pracuji na PC" band — single blurb (laptop icon + text)
   centered horizontally; icon scaled up so the visual reads as a balanced row, not
   a tiny eyebrow. */
#pracuji-na-pc {
    --blurb-icon-gap: 16px;   
}

#pracuji-na-pc .qc {
    justify-content: center;
    padding-bottom: 0;
}

#pracuji-na-pc .ec,
#pracuji-na-pc .nc {
    height: 32px;
    display: flex;
    align-items: center;
}

#pracuji-na-pc .ec {
    width: 32px;
}

#pracuji-na-pc .nc p {
    font-size: 18px;
    margin: 0;
}

/* Section-scoped: CTA band — pitch on bg-redwine-sateen, centered, deeper-yellow em + button.
   Local --accent override flows into both the em (uses var(--accent-yellow)) and the button
   (inline `--button-bg: var(--accent-yellow)`). One value, two surfaces, no duplication. */

[data-c="b"][data-v="d"] {
    text-align: center;
}

[data-c="b"][data-v="d"] .uc {
    align-items: center;
}

[data-c="b"][data-v="d"] .wb {
    align-self: center;
}

#cta {
    --accent: #ECB309;
}


[data-c="b"] .dc em {
    color: var(--accent-yellow);
    font-style: italic;
}

#cta .f {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* Section-scoped: claim band — quote catalog on bg-bluenavy-flat, 40px display text. */
#claim,
#sluzba-extra,
#sluzba-intro,
#spoluprace-intro {
    text-align: center;
}

#claim .nc p,
#sluzba-extra .nc p,
#sluzba-intro .nc p,
#spoluprace-intro .nc p {
    font-family: var(--font-headline);
    font-style: italic;
    font-size: 32px;
    line-height: 1.3;
}

#sluzba-extra .nc,
#sluzba-intro .nc,
#spoluprace-intro .nc {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/* sluzba-intro / spoluprace-intro override the shared claim-band typography:
   25px display size, tight 40px section padding (vs project default 80px desktop).
   Full-width left-aligned text — overrides the centered 70% cap from shared rules. */
#sluzba-intro,
#spoluprace-intro {
    --section-padding-y: 40px;
    text-align: left;
}

#sluzba-intro .nc,
#spoluprace-intro .nc {
    max-width: 100%;
}

#sluzba-intro .nc p,
#spoluprace-intro .nc p {
    font-size: 25px;
}

/* nástroje section — center all text content; first badges row gets
   25px breath from the intro text, second row gets 20px from the first. */
#nastroje {
    text-align: center;
}

#nastroje .vb {
    margin-top: 25px;
}

#nastroje .vb + .vb {
    margin-top: 20px;
}

@media (min-width: 768px) {
    #claim .nc p {
        font-size: 45px;
    }
    #sluzba-extra .nc p {
        font-size: 40px;
    }
}

/* Section-scoped: intro band is a quote section.
   Narrow centered text with a large quote watermark behind it. */
#intro-band {
    position: relative;
    overflow: hidden;
}

#intro-band .nc {
    position: relative;
    z-index: 1;
    width: 65%;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    line-height: 1.6;
}

#intro-band::before {
    content: "„";
    position: absolute;
    top: -60px;
    left: 6%;
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: 240px;
    line-height: 1;
    color: rgba(28, 49, 68, 0.08);
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 768px) {
    #intro-band .nc {
        font-size: 24px;
    }
    #intro-band::before {
        top: -80px;
        font-size: 340px;
    }
}

/* Section-scoped: button centering for centered sections */
#proces-horizontal .wb,
#cena-cas .wb,
#cta-section .wb {
    align-self: center;
}

/* Multi-row sections — vertical gap between consecutive rows in the same section */
#proces-horizontal .bd + .bd,
#cena-cas .bd + .bd {
    margin-top: 40px;
}

/* cena-cas cards — add navy 1px border on default white fill. */
#cena-cas .ac {
    border: 1px solid var(--text-bluenavy);
}

/* cena-cas — center the section header (aboveheadline + headline in the first row);
   cards and bottom button rows keep their own alignment. */
#cena-cas .bd:first-child {
    text-align: center;
}

/* testimonials (main page) — center the section header (eyebrow + headline);
   testimonial cards in the second row keep their default left-aligned content. */
#testimonials .bd:first-child {
    text-align: center;
}

/* Decorative quote watermark behind each testimonial card. Marcellus glyph
   (matches headline font), wine accent at low opacity so it reads as ornament
   rather than competing with the body copy. Both cards use the right-double
   quote (\201D), pinned to the top-right corner. No overflow clip on the card
   so the glyph is fully visible. Applied on the main page #testimonials (2-up
   at 400px) and the spoluprace #sekce-5 testimonials grid (3-up scaled to ~66%
   = 264px so the glyph stays balanced in the narrower card). */
#testimonials .lc,
#sekce-5 .lc {
    position: relative;
}

#testimonials .lc::before,
#sekce-5 .lc::before {
    content: "\201D";
    position: absolute;
    top: 0;
    right: 20px;
    font-family: var(--font-headline);
    line-height: 1;
    color: var(--accent-redwine);
    opacity: 0.18;
    pointer-events: none;
}

#testimonials .lc::before {
    font-size: 400px;
}

#sekce-5 .lc::before {
    font-size: 264px;
}

/* co-pro-vas-udelam — center the section header (eyebrow + headline + intro text);
   service cards in the second row keep their default content alignment. */
#co-pro-vas-udelam .bd:first-child {
    text-align: center;
}


#co-pro-vas-udelam {
    --headline-padding-bottom: 10px;
}

/* co-pro-vas-udelam — section-scoped deviation: "Více informací →" link size 15px. */
#co-pro-vas-udelam .yb {
    font-size: 15px;
}

/* testimonials (main page) — 20px breath between section header row and cards row. */
#testimonials .bd:nth-of-type(2) {
    margin-top: 20px;
}

/* pro-koho-pracuji — center the section header (headline + intro text);
   cards in the second row keep their default content alignment. Intro text
   capped at 80% width and centered so the long sentence wraps to a comfortable
   measure under the headline. */
#pro-koho-pracuji .bd:first-child {
    text-align: center;
}

#pro-koho-pracuji .bd:first-child .nc {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Section deviation: process:horizontal6 — center each column's content */
#proces-horizontal .h {
    text-align: center;
}


/* Service rows — 2:1 image aspect (override global 1:1) */
#sluzba-1 .fc,
#sluzba-2 .fc,
#sluzba-3 .fc,
#sluzba-4 .fc,
#sluzba-5 .fc {
    aspect-ratio: 2 / 1;
}

/* Proces (indented variant) — only the intro row (first row) is centered.
   The :last-child match was authored for a structure that had a CTA row at
   the end; current HTML has no CTA, so :last-child resolved to the steps
   wrapper and silently centered all step content (visible on short
   headlines like "Testování a spuštění"). */
#proces-indented > .bd:first-child .h {
    text-align: center;
}

#proces-indented .wb {
    align-self: center;
}

#proces-indented > .bd + .bd {
    margin-top: 40px;
}

#proces-indented .hd:not(:last-child) {
    padding-bottom: 50px;
}

#proces-indented .tb {
    margin: 0;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.4s ease;
}

/* Connecting line — faint rail spans full indented column,
   drawn portion grows with --proces-progress (set by JS).
   Color matches the on-bg-cream-sateen button color (navy). */
#proces-indented .w {
    position: relative;
}

#proces-indented .w::before,
#proces-indented .w::after {
    content: "";
    position: absolute;
    /* Center the 2px line on the badge: badge sits centered in col-1 of the
       inner row--nested (1/6 + 5/6 split), so badge center = (W - gap)/12.
       Subtract 1px (half the 2px line width) to center the stroke. */
    left: calc((100% - var(--column-gap, 40px)) / 12 - 1px);
    width: 2px;
    pointer-events: none;
}

#proces-indented .w::before {
    top: var(--line-top, 0);
    bottom: var(--line-bottom, 0);
    background: rgba(28, 49, 68, 0.22);
}

#proces-indented .w::after {
    top: var(--line-top, 0);
    height: calc((100% - var(--line-top, 0px) - var(--line-bottom, 0px)) * var(--proces-progress, 0));
    background: currentColor;   /* connector line inherits section text color (navy on bg-cream-sateen) — decorative, not its own role */
    transition: height 0.5s ease-out;
}

/* Glow on all step circles when all six are connected */
#proces-indented.db .tb {
    animation: proces-glow 1.6s ease-in-out infinite alternate;
}

@keyframes proces-glow {
    from { box-shadow: 0 0 0 rgba(28, 49, 68, 0); }
    to   { box-shadow: 0 0 24px rgba(28, 49, 68, 0.55); }
}

#proces-indented .hd {
    align-items: flex-start;
}

/* Deviation: tighter blurb→text rhythm in this section (5px vs default 20px) */
#proces-indented .qc {
    padding-bottom: 5px;
}

/* Single-module columns stretch their module to fill column height
   (keeps adjacent equal-shape modules at equal heights, e.ta., testimonials).
   Excludes image — its height comes from aspect-ratio, not flex stretch. */
.h > .qb:only-child:not(.fc):not(.sb) {
    flex: 1;
}



.rb + .dc {
    margin-top: 0;
}
.dc + .qb {
    margin-top: 0;
}


.nc + .wb {
    margin-top: var(--text-button-gap);
}


#o-mne {
    --text-button-gap: 30px;
}

/* MODULE — atomic content block. No native padding or margin (per spec).
   Type modifiers will style content later. */
.qb {
    /* intentionally empty */
}

/* ============================================
   MODULE — text (one or more paragraphs)
   ============================================ */
.nc p + p {
    margin-top: 16px;
}

/* Section-scoped: bottom padding on intro text (section header row only — not card text) */
#pro-koho-pracuji .nc {
    padding-bottom: 25px;
}

/* Section 3 — breathing room between the intro-text header row and the payload row.
   Value lives in the `--row-after-intro` token, project-tunable in `:root`. */
#co-pro-vas-udelam .bd + .bd {
    margin-top: var(--row-after-intro);
}

/* Section 3 — badge grows when hovering anywhere within the column. */
#co-pro-vas-udelam .h .tb {
    transition: transform 0.35s ease-out;
}
#co-pro-vas-udelam .h:hover .tb {
    transform: scale(1.1);
}

/* ============================================
   MODULE — card (basic variant: headline + text)
   Native bg #fff. Alternation: on bg-cream-sateen → #ECE2D0 (per agenda pairings).
   ============================================ */
.ac {
    background-color: #fff;
    color: var(--text-bluenavy);
    border-radius: 0;
    padding: 24px;
}

.e .ac {
    background-color: #ECE2D0;
}

.g {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.4;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .ac {
        padding: 32px;
    }
    .g {
        font-size: 24px;
    }
}

/* ============================================
   MODULE — image (placeholder + real image variant)
   Variants:
     - default: square (1/1), no border-radius
     - --organic: asymmetric blob shape, portrait aspect, used when an image
       should feel non-rectangular (e.ta., hero portrait)
   ============================================ */
.fc {
    background-color: #fff;
    border-radius: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* --cut: sharp diagonal corner-clip. Straight lines, no rounding — fits the sharp aesthetic.
   Bottom-right corner sliced off at 8%; the rectangle is visibly off the "board" without going soft. */
.hc {
    aspect-ratio: 4 / 5;
    border-radius: 0;
    background-color: transparent;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
}

/* --bare: strip the default shell — no aspect ratio, no white bg, no overflow clip.
   Used for free-form decorative images (e.ta., wave graphic) that bring their own size. */
.gc {
    aspect-ratio: auto;
    background-color: transparent;
    overflow: visible;
}


.fc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   MODULE — button (CTA link)
   accent bg, custom text color, no border-radius (per globals)
   ============================================ */
.wb {
    display: inline-block;
    align-self: flex-start;
    background-color: var(--button-bg, var(--button-bg-navy)); /* navy native; override per-instance via --button-bg */
    color: var(--button-color, var(--text-cream));
    padding: 14px 28px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    border-radius: 0;
    border: 2px solid var(--button-bg, var(--button-bg-navy));
}

/* Outline variant — transparent bg, border-only. Same dimensions as filled. */
.zb {
    background-color: transparent;
    color: var(--text-bluenavy);
}

/* Inset variant — same passe-partout effect as .ic.
   Thin 1px line drawn 6px inside the button edge. */
.xb {
    position: relative;
}

.xb::after {
    content: "";
    position: absolute;
    top: 6px; right: 6px; bottom: 6px; left: 6px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

/* Link variant — text-only underlined inline link. No bg, no border, no padding. */
.yb {
    background-color: transparent;
    color: var(--accent-redwine);
    border: none;
    padding: 0;
    font-weight: 600;
    text-decoration: underline;
    align-self: flex-start;
}


.wb {
    position: relative;
    overflow: hidden;
}

.wb::after {
    content: "";
    position: absolute;
    top: -50px;
    left: -75px;
    width: 50px;
    height: 155px;
    background-color: rgba(127, 168, 207, 0.35);    /* default = steel-blue (filled navy bg) */
    transform: rotate(35deg);
    transition: left 715ms cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

/* Override → white shine on the 0.4 alpha + faster 550ms sweep:
   1) outline buttons (transparent fill, shine reads against page bg)
   2) buttons with own inline `--button-bg` style (e.ta. yellow CTA on main page)
   3) buttons inside a parent that carries the `--button-bg` override (yellow CTA on sluzby/spoluprace)
   Each override is duplicated with itself to bump specificity above any other
   rule that might target the same element. */
.wb.wb.zb::after,
.wb.wb[style*="--button-bg"]::after,
[style*="--button-bg"] .wb.wb::after {
    background-color: rgba(255, 255, 255, 0.4);
    transition: left 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.wb:hover::after {
    left: 120%;
}

/* Link variant — inline link, no shine sweep. */
.yb {
    overflow: visible;
}

.yb::after {
    content: none;
}

.yb:hover {
    text-decoration: none;
}


/* ============================================
   MODULE — aboveheadline (eyebrow / kicker)
   ============================================ */
.rb {
    padding-bottom: var(--aboveheadline-padding-bottom);
}

.rb p {
    color: var(--accent-yellow);            /* default: on bg-cream-sateen */
    font-weight: 300;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

/* Aboveheadline color override on light bgs (cream sateen + flat cream) */
.b .rb p,
.c .rb p {
    color: var(--accent-redwine);
}

@media (min-width: 768px) {
    .rb p {
        font-size: 16px;
    }
}

/* ============================================
   MODULE — headline (h2 default)
   ============================================ */
.dc h2,
.dc h3 {
    /* inherits global h1–h4 styling: Marcellus 400, 30px / 40px */
}

/* ============================================
   LEGACY — step__* (pre-badge/blurb refactor)
   Used by: main page #jak-spoluprace (4 cards), sluzby #proces-horizontal.
   To be migrated to badge + headline + text section-by-section. Delete when no usages remain.
   ============================================ */
.qd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #ECE2D0;
    color: var(--accent-redwine);
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    margin: 0 auto 16px;
}

.rd {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.pd {
    /* body inherits */
}

@media (min-width: 768px) {
    .qd { width: 80px; height: 80px; font-size: 32px; }
    .rd  { font-size: 24px; }
}

/* ============================================
   MODULE — badge (single content, shape variants)
   ============================================ */
.sb {
    display: inline-flex;
    flex: 0 0 auto;          /* never stretch — preserve shape */
    align-self: center;       /* center on column cross-axis */
    align-items: center;
    justify-content: center;
    font-family: var(--font-headline);
    font-weight: 400;
    line-height: 1.2;
}

.tb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--badge-bg, #ECE2D0); /* native on bg-cream-sateen */
    color: var(--badge-color, var(--accent-redwine));
    font-size: 28px;
}

.b .tb,
.c .tb {
    background-color: var(--badge-bg, var(--accent-redwine));
    color: var(--badge-color, #ECE2D0);
}

.ub {
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    border-radius: 0;
    background-color: var(--badge-bg, #ECE2D0); /* native on bg-cream-sateen */
    color: var(--badge-color, var(--text-bluenavy));
}

.b .ub,
.c .ub {
    background-color: var(--badge-bg, var(--accent-redwine));
    color: var(--badge-color, var(--text-cream));
}

@media (min-width: 768px) {
    .tb {
        width: 80px;
        height: 80px;
        font-size: 32px;
    }
}


.sb > svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

@media (min-width: 768px) {
    .sb > svg {
        width: 36px;
        height: 36px;
    }
}


.ec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: currentColor;
}

.ec svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}


.bc {
    display: block;
    width: 100%;
    height: 1px;
    border: 0;
    margin: 0;
    background-color: var(--divider-color, currentColor);
    opacity: var(--divider-opacity, 0.18);
}


.rc {
    background-color: var(--card-bg, #fff);
    color: var(--text-bluenavy);
    border-radius: 0;
    padding: 32px;
    display: flex;
    flex-direction: column;
    border: solid 1px #1c3144;
}

.rc .dc { padding-bottom: 12px; }

.rc .dc h1,
.rc .dc h2,
.rc .dc h3,
.rc .dc h4 {
    font-size: 22px;
    line-height: 1.3;
    margin: 0;
}

@media (min-width: 768px) {
    .rc .dc h1,
    .rc .dc h2,
    .rc .dc h3,
    .rc .dc h4 {
        font-size: 24px;
    }
}


.rc .nc + .nc,
.rc .bc + .nc {
    margin-top: 16px;
    font-style: italic;
    font-size: 15px;
    opacity: 0.85;
}

/* Tighten the gap before a divider inside a card (default sibling spacing is 24px). */
.rc .nc + .bc {
    margin-top: 16px;
}

/* RWS variant — wine sateen card on light section bg.
   Auto-flipped pairings: aboveheadline → accent (yellow on wine). */
.tc {
    background-color: #841f3c;
    background-image:
        radial-gradient(ellipse at 15% 20%, #ab274f 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, #841f3c 0%, transparent 60%),
        radial-gradient(ellipse at 70% 30%, #c93760 0%, transparent 45%),
        radial-gradient(circle at 25% 75%, rgba(248, 198, 48, 0.18) 0%, transparent 30%);
    color: var(--text-cream);
}

.tc .rb p {
    color: var(--accent-yellow);
}

/* Flat dark card variant — bg color via inline `--card-bg`; auto-pairs cream text + accent aboveheadline. */
.sc {
    background-color: var(--card-bg, var(--accent-redwine));
    background-image: none;
    color: var(--text-cream);
}

.sc .rb p {
    color: var(--accent-yellow);
}


.vc {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.vc .tb {
    align-self: center;
    margin-bottom: 16px;
}

/* Tighten the gap between the badge and the headline that follows.
   Default is badge mb (16) + sibling .qb + .qb mt (24) = 40px;
   zero out the 24 here so the visible gap drops to 16+9 = 25px (15px closer than default). */
.vc .tb + .qb {
    margin-top: 9px;
}

.vc .wb,
.vc .yb {
    align-self: center;
    margin-top: 16px;
}

.vc .dc h1,
.vc .dc h2,
.vc .dc h3,
.vc .dc h4 {
    font-size: 21px;
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 768px) {
    .vc .dc h1,
    .vc .dc h2,
    .vc .dc h3,
    .vc .dc h4 {
        font-size: 24px;
    }
}


.cc {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sa {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .sa {
        flex-direction: row;
    }
    .sa .qa {
        flex: 1 1 0;
    }
}

.qa {
    display: block;
    width: 100%;
}

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

.cc input,
.cc textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(28, 49, 68, 0.2);
    border-radius: 0;
    background-color: transparent;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-bluenavy);
    line-height: 1.4;
}

.cc textarea {
    resize: vertical;
    min-height: 120px;
}

.cc input::placeholder,
.cc textarea::placeholder {
    color: rgba(28, 49, 68, 0.55);
}

.cc input:focus,
.cc textarea:focus {
    outline: none;
    border-color: var(--accent-redwine);
}


.pc {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 80px;                             /* fixed width = desktop badge size, so the row's `gap` measures BADGE→BADGE directly; names wrap below as needed */
}

/* Image inside a circle badge — fills the shell, clips to the circle. */
.tb img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.pc .dc {
    padding-bottom: 0;          
}

.pc .dc h1,
.pc .dc h2,
.pc .dc h3,
.pc .dc h4 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    font-family: var(--font-body);   /* body font for small label readability */
}


.wc {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.wc .tb {
    --badge-bg: transparent;
    --badge-color: currentColor;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}

.wc .tb:hover {
    --badge-bg: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
}

.wc .tb > svg {
    display: block;           /* drop inline baseline alignment so all 4 SVGs sit identically in the badge */
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
}

.wc .tb > span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .wc .tb {
        width: 44px;
        height: 44px;
    }
    .wc .tb > svg {
        width: 20px;
        height: 20px;
    }
}


.xc {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .xc {
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
    }
}


.yc {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.yc .dc { padding-bottom: 0; }

/* Tighter line-height for the number; size stays at the global headline default (30/40px). */
.yc .dc h1,
.yc .dc h2,
.yc .dc h3,
.yc .dc h4 {
    line-height: 1.1;
    margin: 0;
}

.yc .nc {
    padding-bottom: 0;
}


.qc {
    display: flex;
    align-items: center;
    gap: var(--blurb-icon-gap);
    padding-bottom: 20px;
    margin-bottom: 0;
}

.qc .dc {
    padding-bottom: 0;
}

.qc .dc h1,
.qc .dc h2,
.qc .dc h3,
.qc .dc h4 {
    font-size: 21px;
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 768px) {
    .qc .dc h1,
    .qc .dc h2,
    .qc .dc h3,
    .qc .dc h4 {
        font-size: 24px;
    }
}


.oc {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.oc .dc h1,
.oc .dc h2,
.oc .dc h3,
.oc .dc h4 {
    font-size: 21px;
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 768px) {
    .oc .dc h1,
    .oc .dc h2,
    .oc .dc h3,
    .oc .dc h4 {
        font-size: 24px;
    }
}

/* ============================================
   MODULE — service (icon + title + description)
   Mirrors `step` styling. Used inside bg-cream-flat sections.
   ============================================ */
.md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--accent-redwine);
    color: #ECE2D0;
    margin-bottom: 16px;
}

.md svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.od {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.nd {
    display: inline-block;
    margin-top: 16px;
    color: var(--accent-redwine);
    font-weight: 600;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .md {
        width: 80px;
        height: 80px;
    }
    .md svg {
        width: 36px;
        height: 36px;
    }
    .od {
        font-size: 24px;
    }
}

/* ============================================
   MODULE — list (checklist / bullets / numbered / dashes variants)
   Bullet symbol is fixed by variant. Custom only allowed on `bullets`.
   ============================================ */
.jc {
    padding-top: var(--list-padding-top);   
}

.jc ul,
.jc ol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.kc li {
    position: relative;
    padding-left: 28px;
}

.kc li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--accent-yellow);            /* default — on bg-cream-sateen */
}

.b .kc li::before,
.c .kc li::before {
    color: var(--accent-redwine);           /* override — on light bgs (cream sateen + flat cream) */
}

/* ============================================
   MODULE — badges (array container of badge--pill items)
   Filled style. Auto-flips per section bg.
   ============================================ */
.vb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* ============================================
   MODULE — testimonial
   ============================================ */
.lc {
    background-color: var(--testimonial-bg, #ECE2D0);
    color: var(--testimonial-color, #1C3144);
    border: 1px solid var(--testimonial-border, transparent);
    border-radius: 0;
    padding: 24px;
}

/* Pairing: testimonial on bg-cream-flat → cream sateen card (mirrors `.c` gradient
   composition) with 1px navy border + navy author name. */
.b .lc {
    --testimonial-bg: #ECE2D0;              /* per-pairing literal — testimonial card surface on bg-cream-flat; role-pure (no token reuse) */
    --testimonial-border: currentColor;     /* inherits section text color (text-bluenavy on bg-cream-flat) */
    background-image:
        radial-gradient(ellipse at 15% 20%, #F9F6F1 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, #ECE2D0 0%, transparent 60%),
        radial-gradient(ellipse at 70% 30%, #F9F6F1 0%, transparent 45%),
        radial-gradient(circle at 25% 75%, rgba(255, 255, 255, 0.15) 0%, transparent 30%);
}

.b .lc .wd {
    color: var(--text-bluenavy);
}

.yd {
    margin-bottom: 24px;
}

.yd p + p {
    margin-top: 16px;
}

.xd {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* placeholder variant — empty circle when no real photo exists yet */
.ud {
    background-color: rgba(28, 49, 68, 0.1);
}

/* QUOTE-LINE variant — minimal shell: left accent line + italic quote +
   smaller author. No card box, no rounded corners. Bg/text/border via the
   existing `--testimonial-bg` / `--testimonial-color` / `--testimonial-border`
   parametrization (inline per-instance for one-off color flips). */
/* TESTIMONIAL — `:short` variant (catalog: testimonial:short).
   Minimal shell: left accent line + italic quote + smaller author + optional link.
   Bg / text / border via `--testimonial-*` parametrization.
   Note: chained `.lc.mc` selector
   (specificity 0,2,0) needed to beat `.b .lc`
   section-pairing rule (also 0,2,0) on `background-image`. Source order decides;
   this block sits later, so it wins. */
.lc.mc {
    border: none;
    border-left: 3px solid var(--testimonial-border, var(--accent-yellow));
    border-radius: 0;
    padding: 22px 26px;
    box-shadow: none;
    background-image: none;                 /* override section pairings (e.ta. bg-cream-flat sateen overlay) — short is always flat */
    margin-top: 35px;                        
}

.mc .yd p {
    font-family: var(--font-headline);
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: -0.005em;
}

.mc .wd {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-bluenavy);             /* override default `.wd { color: var(--accent-redwine) }` */
    margin-top: 3px;                         /* +3px from preceding quote */
}

.mc .vd {
    font-size: 12px;
    opacity: 0.7;
}

.mc .yb {
    display: block;
    margin-top: 2px;                         /* +2px from author name */
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.td {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background-color: #C9B89A;
}

.sd {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wd {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.5;
    color: var(--accent-redwine);
}

.vd {
    font-size: 15px;
}

@media (min-width: 768px) {
    .lc {
        padding: 32px;
    }
    .td {
        width: 64px;
        height: 64px;
    }
    .wd {
        font-size: 20px;
    }
    .vd {
        font-size: 16px;
    }
}

/* ============================================
   HEADER + MENU (mobile-first)
   ============================================ */
.z {
    width: var(--container-width);
    max-width: var(--container-max);
    margin: 0 auto;
}

#header {
    padding-top: 20px;
    padding-bottom: 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 12px solid #1c3144;
}

.va {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pb {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
}

.ua {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    padding: 0;
}

.ua span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.ua.cb span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.ua.cb span:nth-child(2) {
    opacity: 0;
}

.ua.cb span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

#menu {
    display: none;
    width: 100%;
    margin-top: 20px;
}

#menu.eb {
    display: block;
}

#menu ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#menu a {
    font-size: 17px;
    position: relative;
    text-decoration: none;
}

/* Menu link hover — combined effect:
   1. Wine `●` dot fades + scales in to the LEFT of the text (::before).
   2. 1px underline grows from the center outward to both edges (::after).
   Both animate over 0.3s for a coordinated reveal. */
#menu a::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-redwine);
    transform: translateY(-50%) scale(0.3);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

#menu a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

#menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform 0.3s ease;
}

#menu a:hover::after {
    transform: scaleX(1);
}

/* ============================================
   FOOTER — 4col top row + 2col bottom row.
   Footer is `section--bare` (opts out of default section padding).
   Padding applied here, project-specific.
   ============================================ */
#footer {
    padding-top: 60px;
    padding-bottom: 27px;
}


#footer .dc h2 {
    font-size: 24px;
    line-height: 1.2;
}

#footer .dc h3 {
    font-size: 18px;
}

#footer .nc p {
    font-size: 15px;
    line-height: 1.6;
}

#footer .jc {
    font-size: 15px;
}

#footer .jc ul {
    gap: 8px;
}


#footer .h {
    gap: var(--footer-column-gap);
    justify-content: flex-start;
}

#footer .h > * {
    margin-top: 0;
}

#footer .dc {
    padding-bottom: 0;
}

#footer .qc {
    padding-bottom: 0;
    gap: 12px;            
}

#footer .wc {
    padding-top: 15px;
}

/* Footer text links underline on hover (Navigace + Služby column lists),
   with a 4px offset so the line breathes below the text. */
#footer .jc a {
    text-decoration: none;
    text-underline-offset: 4px;
}

#footer .jc a:hover {
    text-decoration: underline;
}

.ka {
    margin-top: 48px;
    padding-top: 27px;
    border-top: 1px solid rgba(236, 226, 208, 0.22);  /* cream tint — readable on navy */
}

#footer .ka .nc p {
    font-size: 14px;
}

@media (min-width: 768px) {
    #footer {
        padding-top: 80px;
        padding-bottom: 27px;
    }
    .ja {
        text-align: right;
    }
    /* Copyright (left) and the `Vytvořil: MK` line (right) sit on the same
       baseline — the 27px above/below the copyright stay symmetric. The
       domain underneath the credit hangs below this baseline and breaks
       the symmetry on the right side only (intentional). */
    .ka {
        align-items: baseline;
    }
}

/* ============================================
   FOOTER — `Vytvořil:` credit with SVG-style hover-reveal
   ------------------------------------------------------------
   Inspired by the Uiverse "u → universe" logo. Two-treatment look:
     · Filled letters: M and K (solid, currentColor)
     · Outlined letters: "ichal " and "omárek" (text-stroke, transparent fill)
   Default state shows "Vytvořil: MK". On hover the outlined spans grow
   their width, pushing K rightward and revealing the remaining letters.
   A gradient overlay sweeps the right edge once per hover-in (no
   reverse animation on close — only the natural width transition).
   Headline serif (Marcellus) gives the name a designed feel close to
   the original's custom SVG wordmark without authoring actual paths.
   ============================================ */
.ea {
    position: relative;             /* anchor for the absolutely-positioned domain */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;        /* don't stretch to fill the column (mobile) */
    text-decoration: none;
    color: inherit;
    cursor: pointer;                /* same as any link — clear hover affordance */
    line-height: 1.2;
}

/* Cursor visibility timeline (animation duration 2.6s = 1.6s reveal + 1s
   rest period). Pointer for the first 100ms (lets the user register the
   link affordance), then `none` for the next 2.5s (clear view of the
   revealed name + domain), then pointer again at the very end so the
   cursor is visible if the user stays hovering. `cursor` interpolates
   discretely — value flips at the midpoint between two adjacent
   keyframes — so paired stops 0.1% apart give sharp boundaries. */
.ea:hover,
.ea:focus-visible {
    animation: dby-cursor-hide 2.6s forwards;
}

@keyframes dby-cursor-hide {
    0%, 3.8%      { cursor: pointer; }   /* 0–100ms */
    3.9%, 99.9%   { cursor: none; }      /* 100ms–~2.6s */
    100%          { cursor: pointer; }   /* 2.6s onward */
}

@media (min-width: 768px) {
    .ja .ea {
        align-items: flex-end;     /* inner content right-aligned on desktop */
        align-self: flex-end;      /* element itself sits on the right side of the column */
    }
}

.ha {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    white-space: nowrap;
}

.ga {
    opacity: 0.55;
    letter-spacing: 0.04em;
}

.ia {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-headline);
    font-size: 17px;
    letter-spacing: 0.04em;
}

/* All letters render the same way — solid Marcellus in currentColor.
   The reveal is purely structural: `.da` spans live behind a
   collapsed `max-width` and expand on hover. The outlined-text effect
   was dropped (didn't read well on a real serif font). */
.ca {
    display: inline-block;
}

.da {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 1.6s cubic-bezier(0.45, 0, 0.55, 1);
}

.ea:hover .da,
.ea:focus-visible .da {
    max-width: 6em;
}

.fa {
    position: absolute;
    top: 100%;                       /* hang below the credit line */
    left: 0;                         /* mobile: hangs from the left edge of the credit */
    margin-top: 4px;                 /* gap between credit line and domain */
    font-size: 12px;
    letter-spacing: 0.03em;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.5s ease-out 0.5s;
}

@media (min-width: 768px) {
    .fa {
        left: auto;                  /* desktop: anchor to the right edge of the credit */
        right: 0;
    }
}

.ea:hover .fa,
.ea:focus-visible .fa {
    opacity: 0.7;
}

/* Debug overlay lives in debug.aa (dev only — strip for production). */

/* ============================================
   DESKTOP (≥ 768px)
   ============================================ */
@media (min-width: 768px) {
    :root {
        --section-padding-y: 80px;
        --header-height: 106px;  /* includes 12px navy border-bottom */
    }

    h1, h2, h3, h4 {
        font-size: 40px;
    }

    .pb {
        font-size: 28px;
    }

    .ua {
        display: none;
    }

    #menu {
        display: block;
        width: auto;
        margin-top: 0;
    }

    #menu ul {
        flex-direction: row;
        gap: 32px;
    }

    /* Row goes horizontal */
    .bd {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* Reverses column visual order on desktop only. HTML/source order unchanged. */
    .id {
        flex-direction: row-reverse;
    }

    /* Columns share row width proportionally (12-part grid).
       flex-basis: 0 + flex-grow ratio = each column gets its fraction of
       the space remaining after gaps, regardless of which columns share the row.
       Equal-size columns always render equal width; gaps just push them apart. */
    .h {
        flex-basis: 0;
    }
    .i { flex-grow: 12; }
    .j { flex-grow: 6;  }
    .t { flex-grow: 6;  } /* alias of 1-2 */
    .k { flex-grow: 4;  }
    .o { flex-grow: 8;  }
    .l { flex-grow: 3;  }
    .r { flex-grow: 9;  }
    .u { flex-grow: 3;  }
    .y { flex-grow: 5;  }
    .n { flex-grow: 2;  }
    .q { flex-grow: 4;  } /* alias of 1-3 */
    .w { flex-grow: 8;  } /* alias of 2-3 */
    .x { flex-grow: 10; }
    /* 5-grid — flex-grow values are absolute (not normalised per-row), so this set
       only behaves correctly when a row contains exclusively 5-grid columns
       (e.ta. footer = column--2-5 + 1-5 + 1-5 + 1-5 = 5/5). Don't combine with
       12/6-grid columns in the same row. */
    .m { flex-grow: 1;  }
    .p { flex-grow: 2;  }
    .s { flex-grow: 3;  }
    .v { flex-grow: 4;  }
}

/* ============================================
   MOBILE — main-page layout overrides
   ------------------------------------------------------------
   Per-section padding bump (40 → 60) and stack-order fixes for
   hero (image first) and #o-mne (image between headline and body).
   Hero, #claim (@4) and footer keep their default vertical rhythm.
   ============================================ */
@media (max-width: 767px) {
    /* Section padding bump for main-page sections except hero + @4 claim band. */
    #social-proof,
    #pro-koho-pracuji,
    #co-pro-vas-udelam,
    #o-mne,
    #testimonials,
    #cta {
        --section-padding-y: 60px;
    }

    /* Hero: image column above text column on mobile. */
    .wa .ya {
        order: -1;
    }

    
    #o-mne .bd {
        gap: 0;
    }
    #o-mne .bd > .h {
        display: contents;
    }
    #o-mne .rb { order: 1; }
    #o-mne .dc      { order: 2; }
    #o-mne .fc         { order: 3; }
    #o-mne .nc          { order: 4; }
    
    #o-mne .fc {
        margin-bottom: 24px;
    }

    /* ----- sluzby page ----- */
    /* Section padding bump for @2/@3/@4 and @6/@7/@8/@9. @1 (sluzba-intro) and
       @5 (sluzba-extra) keep their existing rhythm. */
    #services-pair-1,
    #services-pair-2,
    #sluzba-5,
    #nastroje,
    #proces-indented,
    #cena-cas,
    #cta-section {
        --section-padding-y: 60px;
    }

    /* @5 sluzba-extra: drop the 70% centered max-width on mobile so the
       quote can use full column width. */
    #sluzba-extra .nc {
        max-width: 100%;
    }

    /* @4 sluzba-5: HTML has an empty col-3-8 for desktop layout balance. On
       mobile it stacks below the content and the row gap (60px from row--gap-lg)
       fires between it and the content column → looks like extra padding-bottom.
       Hide empty columns inside the section to remove that phantom space. */
    #sluzba-5 .h:empty {
        display: none;
    }

    /* @7 proces-indented: restore horizontal step layout on mobile (badge left,
       blurb+text right, top-aligned). Default mobile stack puts the badge above
       the content with a 40px row gap — looks broken next to a 64px circle. */
    /* Hide the outer indent columns so the inner step rows get full width. */
    #proces-indented > .bd > .n {
        display: none;
    }
    /* Step rows go horizontal; badge column sizes to badge, content takes the rest.
       32px gap = the badge "right margin" before content starts. */
    #proces-indented .hd {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 32px;
    }
    #proces-indented .hd > .n {
        flex: 0 0 auto;
        width: auto;
    }
    #proces-indented .hd > .x {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    /* Vertical rail position — the desktop calc assumes a 1/6 + 5/6 flex split.
       On mobile the badge column is auto-width (64px badge), so the rail center
       sits at 32px from col-4-6's left edge. Override left to keep the line
       running through the badge centers. */
    #proces-indented .w::before,
    #proces-indented .w::after {
        left: 31px;   /* 32px (badge half-width) − 1px (half the 2px stroke) */
    }

    /* ----- main page hero (mobile) ----- */
    /* Center headline, text, and CTA pair. */
    .wa .uc {
        text-align: center;
    }
    .wa .xa {
        justify-content: center;
    }

    /* Em inside H1 stays inline on mobile (no forced line break). The
       "Vy získáte prostor." wrap is desktop-only. */
    .wa .dc em {
        display: inline;
    }

    /* +35px breath above the hero image on mobile (where it now stacks above
       the text via `order: -1`). */
    .wa .ya .fc {
        margin-top: 35px;
    }

    /* ----- main page @5 o-mne (mobile) ----- */
    /* Section default centered (covers aboveheadline + headline + image),
       body text overridden to left for readability of the bio paragraphs. */
    #o-mne {
        text-align: center;
    }
    #o-mne .nc {
        text-align: left;
    }

    /* ----- main page @2 pro-koho-pracuji (mobile) ----- */
    /* Strip the 80% intro-text cap so the headline blurb breathes full-width. */
    #pro-koho-pracuji .bd:first-child .nc {
        max-width: 100%;
    }

    /* ----- main page @1 social-proof (mobile) ----- */
    /* Try preserving the 3-column stat layout on mobile; tighter gap to fit. */
    .xc {
        flex-direction: row;
        gap: 12px;
        align-items: stretch;
    }

    /* ----- spoluprace page case-study sections (mobile) ----- */
    /* sekce-1/2/3 — bring section padding from the 120px desktop deviation down
       to 60px on mobile, and slot the image between the headline and the body
       text via the same display:contents reorder pattern used on #o-mne. */
    #sekce-1,
    #sekce-2,
    #sekce-3 {
        --section-padding-y: 60px;
    }
    #sekce-1 .bd,
    #sekce-2 .bd,
    #sekce-3 .bd {
        gap: 0;
    }
    #sekce-1 .bd > .h,
    #sekce-2 .bd > .h,
    #sekce-3 .bd > .h {
        display: contents;
    }
    #sekce-1 .rb,
    #sekce-2 .rb,
    #sekce-3 .rb { order: 1; }
    #sekce-1 .dc,
    #sekce-2 .dc,
    #sekce-3 .dc { order: 2; }
    #sekce-1 .fc,
    #sekce-2 .fc,
    #sekce-3 .fc { order: 3; }
    #sekce-1 .nc,
    #sekce-2 .nc,
    #sekce-3 .nc { order: 4; }
    #sekce-1 .jc,
    #sekce-2 .jc,
    #sekce-3 .jc { order: 5; }
    #sekce-1 .lc,
    #sekce-2 .lc,
    #sekce-3 .lc { order: 6; }
    /* Slotted image needs explicit breath below before the body text. */
    #sekce-1 .fc,
    #sekce-2 .fc,
    #sekce-3 .fc {
        margin-bottom: 24px;
    }
    /* Testimonial card needs explicit breath above the list block. */
    #sekce-1 .lc,
    #sekce-2 .lc,
    #sekce-3 .lc {
        margin-top: 24px;
    }

    /* @5 sekce-4 (spoluprace clients row): badges wrap to 3 rows on mobile;
       horizontal gap stays 0 (contiguous wave-hover region), row gap = 40px
       so the badge rows have clear breath between them. */
    #sekce-4 .bd:nth-of-type(2) .h {
        gap: 40px 0;
    }

    /* @6/@7 spoluprace section padding bump (was missed in earlier pass). */
    #sekce-5,
    #sekce-7 {
        --section-padding-y: 60px;
    }

    /* @6 sekce-5: testimonial rows sit closer to the header on mobile (35→20px). */
    #sekce-5 .bd:nth-of-type(2),
    #sekce-5 .bd:nth-of-type(3) {
        margin-top: 20px;
    }

    /* ----- kontakt page (mobile) ----- */
    /* page-hero (kontakt only — selector pin via `:has(.zc)`):
       keep headline + social badges on a single line, sharing the row by their
       inline flex-grow ratios (7 vs 4). */
    #page-hero .bd:has(.zc) {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
    }
    #page-hero .bd:has(.zc) > .h {
        flex-basis: 0;     /* allow inline flex-grow values to set the split */
        min-width: 0;
    }
    
    #page-hero .zc .wc {
        flex-wrap: nowrap;
    }

    /* @1 kontakt-1-copy-2: image breath above, info column centered + flush-
       left with image, form headline gets 40px breath above, form column gets
       60px breath below. */
    /* ----- kontakt mobile sibling (#kontakt-mobile, data-breakpoint="mobile") -----
       Single-column layout; all content centered; modules stacked vertically
       inside one `.i` with explicit breath between sections. */
    #kontakt-mobile {
        --section-padding-y: 60px;
        text-align: center;
    }
    #kontakt-mobile .mb {
        gap: 14px;       
    }
    #kontakt-mobile .fc {
        margin: 0 auto;
    }
    #kontakt-mobile .ib {
        margin-top: 20px;
    }
    #kontakt-mobile .ib h3,
    #kontakt-mobile .gb h3 {
        font-size: 24px;
        margin: 0;
    }
    #kontakt-mobile .jb {
        text-align: center;
    }
    #kontakt-mobile .jb > .nc:first-child p {
        font-weight: 600;
        font-size: 16px;
        margin: 0 0 4px;
    }
    /* The gap between flex items comes from the column's `gap: 14px`, not from
       any element's margin. Absorb that gap for the first info-item (Telefon)
       so it sits flush under "Lucie Doležalová"; same trick for the form so it
       sits flush under the form headline. `:first-of-type` would match the
       first <div>, not the first .jb — use the adjacent-sibling
       combinator instead. */
    #kontakt-mobile .ib + .jb {
        margin-top: -14px;
    }
    #kontakt-mobile .cc {
        margin-top: -14px;
    }
    #kontakt-mobile .jb .qc {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding-bottom: 0;
    }
    #kontakt-mobile .jb .ec {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
    }
    #kontakt-mobile .jb .qc .nc p {
        font-size: 14px;
        line-height: 1.4;
        margin: 0;
    }
    #kontakt-mobile .gb {
        margin-top: 32px;
        padding-bottom: 10px;
    }
    /* Form is flex-column with `.wb { align-self: flex-start }` —
       override to center the submit button so it follows the centered form copy. */
    #kontakt-mobile .cc .wb {
        align-self: center;
        padding: 10px 20px;
        font-size: 14px;
    }
}