:root {
    --ink: #111111;
    --ink-heading: rgba(17,17,17,0.8);
    --ink-body: rgba(17,17,17,0.85);
    --paper: #F5F3EF;
    --red: #7A2C1E;
    --line: rgba(17,17,17,0.14);
    --sans: 'Archivo', sans-serif;
    --max-w: 1400px;

    /* Three font sizes, used everywhere on the site — no other size is allowed. */
    --fs-display: clamp(34px, 4.4vw, 60px); /* hero + section headlines */
    --fs-heading: clamp(20px, 2.2vw, 28px); /* card/subsection titles */
    --fs-body: 14px; /* everything else: nav, labels, paragraphs, buttons */

    /* Spacing scale — every section padding, grid gap and stacked-block margin
       on the site resolves to one of these steps. No other spacing value is allowed
       (component-internal micro-paddings like list rows and button padding are exempt). */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-7: 56px;
    --space-8: 64px;
    --space-9: 90px;
    --space-10: 100px;
    --space-11: 110px;
  }
  * { box-sizing: border-box; margin:0; padding:0; }
  body { font-family: var(--sans); background: var(--paper); color: var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; font-size: var(--fs-body); padding:0 var(--space-5); }
  @media (max-width:700px){ body{padding:0 var(--space-3);} }
  img { display:block; width:100%; height:100%; object-fit:cover; }
  a { color:inherit; text-decoration:none; }
  .gallery-link { text-decoration:underline; text-underline-offset:3px; font-weight:400; letter-spacing:0.02em; color: var(--ink-body); }
  .wrap { max-width: var(--max-w); margin:0 auto; }

  .plus { font-size: var(--fs-body); font-weight:700; }

  /* ---------- Header ---------- */
  header { position:relative; z-index:20; padding: var(--space-3) 0; border-bottom:1px solid var(--line); background: var(--paper); }
  .nav { position:relative; display:flex; justify-content:space-between; align-items:center; }
  .logo { font-weight:700; font-size: var(--fs-body); letter-spacing:0.06em; }
  .nav-links { display:flex; gap: var(--space-4); font-size: var(--fs-body); font-weight:500; }
  .nav-links a { color: rgba(17,17,17,0.55); transition: color 0.2s ease; }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a.active { color: var(--ink); font-weight:700; }
  .nav-links .nav-call { display:none; }
  .nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:28px; height:28px; background:none; border:0; padding:0; cursor:pointer; }
  .nav-toggle span { display:block; width:100%; height:2px; background: var(--ink); }
  @media (max-width:800px){
    .nav-toggle { display:flex; }
    .nav-links { display:none; position:absolute; top:calc(100% + var(--space-3)); left:0; right:0; flex-direction:column; gap:0; background: var(--paper); border:1px solid var(--line); padding: var(--space-2) var(--space-3); z-index:10; }
    .nav-links.open { display:flex; }
    .nav-links a { padding: var(--space-2) 0; border-bottom:1px solid var(--line); }
    .nav-links a:last-child { border-bottom:0; }
    .nav-links .nav-call { display:block; color: var(--ink); font-weight:700; }
  }

  /* ---------- Background video embed (Vimeo, cropped to cover) — sized relative to its own container so it always fills it edge-to-edge, no letterboxing ---------- */
  .video-embed { position:absolute; inset:0; overflow:hidden; }
  .video-embed iframe {
    position:absolute; top:50%; left:50%;
    width:100cqw; height:56.25cqw; /* 16:9 */
    min-height:100cqh; min-width:177.78cqh; /* cover trick, relative to the container's own size */
    transform:translate(-50%,-50%);
    pointer-events:none; border:0;
    transition: filter .8s ease;
  }
  /* iOS Safari's support for cqw/cqh on narrow containers doesn't crop reliably (bars showed up on
     mobile even though the exact same math covers correctly on desktop) — vw/vh are older and far
     more consistently supported, and here the container is effectively viewport-sized anyway, so
     swapping the same cover formula onto vw/vh sidesteps the bug without touching desktop at all. */
  @media (max-width:900px){
    .video-embed iframe {
      width:100vw; height:56.25vw;
      min-height:100vh; min-width:177.78vh;
    }
  }
  .video-bw iframe { filter: grayscale(1) contrast(1.1); }

  /* ---------- Hero — orbiting video collage ---------- */
  .hero-collage { display:block; min-height:0; background: var(--paper); padding: var(--space-8) 0 0; overflow-x:clip; }
  .hc-scroll-pin { position:relative; }
  .hc-orbit-viewport { position:relative; width:100%; height:min(750px, 55vw); margin:0 auto; overflow:hidden; }
  .hc-orbit-wrap { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1150px, 86vw); aspect-ratio:1/1; }
  .hc-orbit-scale { position:absolute; inset:0; transform: scaleX(1.65); }
  .orbit-ring { position:absolute; inset:0; animation: orbit-spin 90s linear infinite; }
  .orbit-tile {
    position:absolute; width:44%; aspect-ratio:800/340;
    left: calc(var(--ox) + (var(--tx) - var(--ox)) * var(--progress, 0));
    top: calc(var(--oy) + (var(--ty) - var(--oy)) * var(--progress, 0));
    transform: translate(-50%,-50%);
    transition: left .1s linear, top .1s linear, transform .1s linear;
  }
  .orbit-tile-inner { position:absolute; inset:0; overflow:hidden; background: var(--ink); animation: orbit-counter-spin 90s linear infinite; }
  .orbit-tile-inner img { width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.1); transition: filter .6s ease; }
  .orbit-tile-inner iframe { position:absolute; top:50%; left:50%; width:150%; height:150%; transform:translate(-50%,-50%); border:0; pointer-events:none; filter: grayscale(1) contrast(1.1); transition: filter .6s ease; }
  /* grayscale until playback actually starts (.is-playing, toggled by wireOrbitVideoLoop's Vimeo Player 'play' listener), then fades to color */
  /* only the iframe ever colorizes — the poster img underneath stays grayscale so there's no
     colored-but-still-a-photo moment while the video is buffering its first visible frame */
  .orbit-tile-inner.is-playing iframe { filter: contrast(1.1); }
  .ot-1 { --ox:74%; --oy:50%;   --tx:51%; --ty:48%; }
  .ot-2 { --ox:62%; --oy:70.8%; --tx:49%; --ty:52%; }
  .ot-3 { --ox:38%; --oy:70.8%; --tx:52%; --ty:51%; }
  .ot-4 { --ox:26%; --oy:50%;   --tx:48%; --ty:49%; }
  .ot-5 { --ox:38%; --oy:29.2%; --tx:50%; --ty:47%; }
  .ot-6 { --ox:62%; --oy:29.2%; --tx:53%; --ty:50%; }
  .hc-orbit-wrap.is-stacked .orbit-ring, .hc-orbit-wrap.is-stacked .orbit-tile-inner { animation-play-state: paused; }
  @keyframes orbit-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
  @keyframes orbit-counter-spin { from { transform:rotate(0deg) scaleX(0.606); } to { transform:rotate(-360deg) scaleX(0.606); } }
  .hc-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:min(360px, 38%); display:flex; justify-content:center; align-items:center; opacity: var(--claim-opacity, 1); transition: opacity .2s linear; }
  .hc-center h1 { display:inline-block; white-space:nowrap; color: var(--ink); font-family: var(--sans); text-transform:uppercase; font-size: calc(var(--fs-display) * 0.95); font-weight:800; line-height:1; letter-spacing:-0.01em; background: var(--paper); padding: 8px 22px; }
  .hc-center-video { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:44%; aspect-ratio:800/340; }
  .hc-center-video .orbit-tile-inner { animation:none; }
  .hc-mobile-video { display:none; }
  .bottom-section { padding-top: var(--space-1); padding-bottom: var(--space-4); text-align:center; }
  .separator-line { border:0; border-top:1px solid var(--line); margin: 0 0 var(--space-4); }
  .mid-claim { text-align:center; font-size: var(--fs-display); font-weight:700; line-height:0.95; letter-spacing:-0.025em; color: var(--ink); margin-bottom: var(--space-3); }
  .mid-claim-body { display:inline-block; text-align:left; }
  /* min-height taller than the row's own top offset, so .claim-text/.quote-line (now on one shared
     row, positioned lower — closer to .proof-photo below) have room to render without spilling past
     the anchor's bottom edge into the next section */
  /* height ≈ the row's own rendered height (~70px, 3 lines) — shorter than its top offset + height,
     so the row overflows the anchor's box by exactly enough that combined with the fixed spacing
     below (.bottom-section's padding, etc.) the gap to .proof-photo lands on var(--space-8), matching
     .proof-photo's own row-gap to the stats beside it (measured/tuned against the live layout) */
  .claim-anchor { position:relative; margin-top:0; min-height: 37px; }
  .claim-text { position:absolute; top: var(--space-2); left:0; white-space:normal; font-size: var(--fs-body); font-weight:400; line-height:1.65; color: var(--ink-body); text-align:left; width:460px; }
  /* left edge matches .proof-stats-col's own left edge: .proof-photo's 60% width + the row's gap, in the shared .wrap coordinate space */
  .quote-line { position:absolute; top: var(--space-2); left: calc(60% + (var(--space-8) * 0.4)); white-space:normal; font-size: var(--fs-body); font-weight:700; line-height:1.65; color: var(--ink-body); text-align:left; width:300px; }
  .quote-line .quote-author { font-weight:400; }
  @media (max-width:900px){
    .hero-collage { padding:80px 0 0; }
    .orbit-ring, .orbit-tile-inner { animation:none; }
    .orbit-tile { display:none; }
    .hc-center-video { display:none; }
    .hc-orbit-viewport { height:70vh; }
    .hc-orbit-wrap { position:static; transform:none; width:100%; aspect-ratio:auto; height:100%; }
    .hc-mobile-video { display:block; position:absolute; inset:0; overflow:hidden; z-index:1; }
    .hc-mobile-video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; }
    .hc-center { width:auto; max-width:92%; top:auto; bottom:9%; transform:translateX(-50%); }
    .bottom-section { padding-top: var(--space-3); padding-bottom: var(--space-3); }
  }
  @media (min-width:901px){
    .hc-scroll-pin { height: 140vh; }
    .hc-orbit-viewport { position:sticky; top:0; }
  }

  /* Fixed-width claim/quote columns only fit side by side once there's ~1060px
     of content width to spare; below that (tablets included) they overlap,
     so this stacks them well before the general 900px breakpoint kicks in. */
  @media (max-width:1150px){
    .mid-claim { text-align:left; }
    .mid-claim-body { display:block; }
    .claim-anchor { min-height:0; margin-top: var(--space-3); }
    .claim-text { gap: var(--space-3); position:static; text-align:left; width:auto; max-width:none; margin:0; }
    .quote-line { position:static; right:auto; text-align:left; width:50%; max-width:none; margin: var(--space-3) 0 0 auto; }
  }

  /* ---------- Belief list (standalone, after the banner video) ---------- */
  .belief-list-section { padding: var(--space-9) 0 50px; }
  .belief-list { list-style:none; max-width:640px; margin-left: 54.34%; margin-right:auto; }
  @media (max-width:900px){ .belief-list { margin-left:auto; } }
  .belief-list li { font-size: var(--fs-heading); font-weight:700; line-height:1.4; letter-spacing:-0.01em; color: var(--ink-heading); }
  .belief-list li + li { margin-top: var(--space-1); }

  /* ---------- Section label ---------- */
  .section-label { padding: var(--space-10) 0 var(--space-6); }
  .section-label .wrap { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--line); padding-bottom: var(--space-3); flex-wrap:wrap; gap: var(--space-2); }
  .section-label h2 { font-size: var(--fs-display); font-weight:700; line-height:0.86; letter-spacing:-0.025em; }
  #work h2 { line-height:1.1; }
  .section-label .side { max-width:320px; font-size: var(--fs-body); line-height:1.5; text-align:right; font-weight:400; }
  .section-label .gallery-link { display:inline-block; font-size: var(--fs-body); white-space:nowrap; }

  /* ---------- Proof block (photo + stats, between the hero quote and "Tři cesty") ---------- */
  .proof-block { padding: var(--space-8) 0 50px; }
  .proof-photo { width:100%; max-width:460px; aspect-ratio:4/3; overflow:hidden; background: var(--ink); margin-bottom: var(--space-4); }
  .proof-photo img { width:100%; height:100%; object-fit:cover; }
  .proof-stats { list-style:none; max-width:460px; }
  .proof-stats li { font-size: var(--fs-heading); font-weight:700; letter-spacing:-0.01em; color: var(--ink-heading); line-height:1.15; }
  .proof-stats li + li { margin-top:4px; }
  .proof-note { max-width:360px; font-size: var(--fs-body); line-height:1.6; color: var(--ink-body); margin-top: var(--space-3); }
  .proof-cta { margin-top: var(--space-2); }
  /* small accent photo — before the reassurance text on mobile, absolutely positioned beside it on desktop.
     Its width (the shorter side) is half of .proof-photo's own width (its longer side, since that photo is
     landscape 4:3) — same min(...,460px) cap as .proof-photo so the ratio holds at any viewport width. */
  /* top margin matches the gap between the quote and the kissing photo above this block
     (.bottom-section's padding-bottom + .proof-block's own padding-top) */
  .proof-photo-small { display:block; width:min(50%, 230px); aspect-ratio:2/3; overflow:hidden; margin: calc(var(--space-3) + var(--space-8)) 0 var(--space-3) auto; }
  .proof-photo-small img { width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.05); }
  @media (min-width:901px){
    .proof-block { display:flex; align-items:center; gap: var(--space-8); position:relative; container-type:inline-size; }
    .proof-photo { max-width:none; flex:1 1 60%; margin-bottom:0; }
    .proof-stats-col { flex:1 1 40%; display:flex; flex-direction:column; align-items:flex-start; align-self:flex-start; margin-top:var(--space-6); }
    .proof-stats { max-width:none; width:fit-content; }
    /* left-aligned, starting at .proof-stats' own left edge (.proof-photo's width + the row gap); height matches .proof-photo-small so its content centers vertically against it */
    .proof-side { position:absolute; left: calc((100cqw - var(--space-8)) * 0.6 + var(--space-8)); top: calc((100cqw - var(--space-8)) * 0.225 + var(--space-8)); height: calc((100cqw - var(--space-8)) * 0.225); width:270px; display:flex; flex-direction:column; justify-content:center; gap: var(--space-2); text-align:left; }
    .proof-side .proof-note, .proof-side .proof-cta { margin-top:0; }
    /* height = half of .proof-photo's own height (60% of this container's width, minus its share of the gap, times its 4:3 ratio), so its top edge starts at .proof-photo's vertical midpoint; bottom:50px cancels the block's own padding-bottom so it lines up with .proof-photo's bottom edge, not the padding box */
    .proof-photo-small { position:absolute; right:0; bottom:50px; height:calc((100cqw - var(--space-8)) * 0.225); width:auto; aspect-ratio:2/3; margin:0; }
  }

  /* ---------- Work grid (services list + photo) ---------- */
  .work-grid { padding: 0 0 50px; }
  .work-services { display:block; margin-bottom: var(--space-3); }
  .work-services ul { list-style:none; }
  .work-services li { font-size: var(--fs-heading); font-weight:700; letter-spacing:-0.01em; color: var(--ink-heading); line-height:1.15; }
  .work-services li + li { margin-top:4px; }
  .work-gallery-link { display:inline-block; margin-bottom: var(--space-6); font-size: var(--fs-body); }
  .work-photo { width:100%; aspect-ratio:21/9; overflow:hidden; background: var(--ink); }
  .work-photo img { width:100%; height:100%; object-fit:cover; object-position: center 85%; }
  @media (max-width:900px){ .work-photo { aspect-ratio:4/3; } }

  /* ---------- Steps (jak focení probíhá) ---------- */
  .steps-section { padding: 0 0 var(--space-10); }
  .steps-list { display:flex; justify-content:space-between; }
  .step { flex:0 0 360px; }
  .step-num { display:block; font-size: var(--fs-body); font-weight:700; color: rgba(17,17,17,0.35); margin-bottom: var(--space-2); }
  .step h4 { font-size: var(--fs-heading); font-weight:700; letter-spacing:-0.01em; margin-bottom: var(--space-1); color: var(--ink-heading); }
  .step p { font-size: var(--fs-body); line-height:1.65; color: var(--ink-body); }
  @media (max-width:900px){ .steps-list{flex-direction:column; gap: var(--space-5);} .step{flex:1 1 auto;} }

  /* ---------- Full photo banner ---------- */
  .banner { position:relative; height:80vh; min-height:480px; overflow:hidden; container-type:size; }

  /* ---------- News / reference grid ---------- */
  .refs-grid { padding: 0; }
  .google-reviews { padding: 0 0 var(--space-10); }

  /* ---------- Google reviews (Elfsight) style override ---------- */
  .google-reviews, .google-reviews * { font-family: var(--sans) !important; }
  .google-reviews .es-widget-title { display:none !important; }
  .google-reviews .es-background-base,
  .google-reviews .es-widget-background-container,
  .google-reviews .es-widget-background-wrapper,
  .google-reviews .es-review-background-container { background: transparent !important; box-shadow:none !important; border:none !important; }
  .google-reviews .es-google-review { text-align:left !important; }
  .google-reviews .es-review-align-container { align-items:flex-start !important; }
  .google-reviews .es-review-author-block-container { align-items:flex-start !important; text-align:left !important; margin-left:0 !important; margin-right:0 !important; }
  .google-reviews .es-review-author-block-info-container { justify-content:flex-start !important; align-items:flex-start !important; }
  .google-reviews .es-rating-container { display:none !important; }
  .google-reviews .es-review-container { padding: 0 var(--space-5) !important; max-width:640px !important; margin-left:auto !important; margin-right:auto !important; }
  .google-reviews .es-review-content,
  .google-reviews .es-review-content-text-container,
  .google-reviews .es-text-shortener { text-align:left !important; font-family: var(--sans) !important; font-size: var(--fs-body) !important; font-style: normal !important; font-weight:400 !important; line-height:1.7 !important; color: var(--ink-body) !important; }
  .google-reviews .es-text-shortener-container { text-align:left !important; justify-content:flex-start !important; }
  .google-reviews .es-text-shortener-control { font-family: var(--sans) !important; font-size: var(--fs-body) !important; font-weight:400 !important; font-style:normal !important; color: var(--ink) !important; text-decoration:underline; text-underline-offset:2px; }
  .google-reviews .es-review-author-name { font-size: var(--fs-body) !important; font-weight:400 !important; letter-spacing:normal !important; text-transform:none !important; color: rgba(17,17,17,0.4) !important; }
  .google-reviews .es-review-info-date { font-size: var(--fs-body) !important; color: rgba(17,17,17,0.35) !important; }
  .google-reviews .es-review-author-block-container img { filter: grayscale(1) !important; border-radius:50% !important; }
  .google-reviews .es-carousel-arrow-control { background: transparent !important; border: 1px solid var(--line) !important; box-shadow:none !important; }
  .google-reviews .es-carousel-arrow-control-icon svg,
  .google-reviews .es-carousel-arrow-control-icon path { fill: var(--ink) !important; }
  .google-reviews .es-bullets-control-item { background: var(--line) !important; box-shadow:none !important; transform: scale(0.75) !important; }
  .google-reviews .es-bullets-control-item-active { background: rgba(17,17,17,0.35) !important; }
  .rg { display:flex; justify-content:space-between; gap: var(--space-6); }
  .rg .card { text-align:left; flex:0 0 auto; }
  .rg .card .thumb { width:150px; height:150px; border-radius:50%; overflow:hidden; margin:0 0 var(--space-4); }
  .rg .card .thumb img { filter: grayscale(1) contrast(1.05); }
  .rg .card p { font-size: var(--fs-body); line-height:1.65; color: var(--ink-body); max-width:360px; margin:0; }
  .rg .card p strong { font-weight:700; font-style:normal; }
  @media (max-width:900px){ .rg{flex-direction:column; gap: var(--space-8); max-width:400px; margin:0 auto;} }

  /* ---------- FAQ (Otázky & odpovědi) — accordion, one answer open at a time ---------- */
  .section-label:has(+ .faq-section) { padding-bottom: var(--space-4); }
  .faq-section { padding: 0; }
  .faq-list { max-width:760px; }
  .faq-item { border-bottom:1px solid var(--line); cursor:pointer; }
  .faq-question { display:flex; justify-content:space-between; align-items:center; gap: var(--space-4); padding: var(--space-4) 0; font-size: var(--fs-body); font-weight:600; color: var(--ink-heading); }
  .faq-item .plus { flex:none; font-size: var(--fs-body); font-weight:400; color: var(--ink-body); }
  .faq-answer { display:grid; grid-template-rows:0fr; transition: grid-template-rows .4s ease; }
  .faq-answer-inner { overflow:hidden; }
  .faq-item.open .faq-answer { grid-template-rows:1fr; }
  .faq-answer p { max-width:620px; padding: 0 0 var(--space-4); font-size: var(--fs-body); line-height:1.65; color: var(--ink-body); }

  /* ---------- Closing CTA ---------- */
  .closing { padding: var(--space-7) 0 50px; }
  .refs-grid + .closing, .faq-section + .closing { padding-top: 150px; }
  .about-bento + .closing { padding-top: 0; }
  .closing .top { text-align:left; }
  .closing-footer { padding: 0 0 var(--space-5); }
  .closing-title { font-size: var(--fs-display); font-weight:700; line-height:0.9; letter-spacing:-0.025em; color: var(--ink); padding-bottom: var(--space-4); border-bottom:1px solid var(--line); }
  .closing-note { font-size: var(--fs-body); color: var(--ink-body); margin: var(--space-4) 0 0; }
  .closing-lead { font-size: var(--fs-heading); font-weight:700; letter-spacing:-0.01em; color: var(--ink-heading); white-space:nowrap; margin: var(--space-4) 0 0; }
  .closing .about-thanks-cta { margin-top: var(--space-4); }
  @media (max-width:900px){ .closing-lead { white-space:normal; } }

  /* ---------- Contact form ---------- */
  .contact-form { margin: var(--space-5) auto 0; max-width:480px; display:flex; flex-direction:column; gap: var(--space-4); text-align:left; }
  .cf-row { display:flex; gap: var(--space-3); }
  .cf-field { display:flex; flex-direction:column; gap: 6px; flex:1; }
  .cf-field label { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-heading); }
  .cf-row input, .contact-form textarea { width:100%; background: var(--paper); border:1px solid var(--line); padding: var(--space-3); font-family:var(--sans); font-size: var(--fs-body); color: var(--ink); }
  .cf-row input::placeholder, .contact-form textarea::placeholder { color: rgba(17,17,17,0.35); }
  .cf-row input:focus, .contact-form textarea:focus { outline:none; border-color: var(--ink); }
  .contact-form textarea { resize:none; min-height:110px; line-height:1.5; }
  .cf-submit { align-self:center; display:inline-block; font-size: var(--fs-body); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--ink); padding:14px 28px; line-height:1.5; font-family:inherit; background:none; color: var(--ink); cursor:pointer; transition: background .2s ease, color .2s ease; }
  .cf-submit:hover { background: var(--ink); color:#fff; }
  .cf-divider { display:flex; align-items:center; gap: var(--space-3); margin: var(--space-5) auto; max-width:480px; }
  .cf-divider::before, .cf-divider::after { content:""; flex:1; height:1px; background: var(--line); }
  .cf-divider span { font-size: var(--fs-body); color: rgba(17,17,17,0.45); white-space:nowrap; }
  .cf-booking { display:block; width:fit-content; margin:0 auto; font-size: var(--fs-body); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--ink); padding:14px 28px; line-height:1.5; background: var(--ink); color:#fff; transition: background .2s ease, color .2s ease; }
  .cf-booking:hover { background: transparent; color: var(--ink); }
  @media (max-width:600px){ .cf-row{flex-direction:column;} .cf-submit{align-self:stretch; text-align:center;} .cf-booking{width:100%; max-width:480px; text-align:center;} .cf-row input, .contact-form textarea { font-size:16px; } }
  .footer-cols { display:flex; justify-content:space-between; padding: var(--space-4) 0; border-top:1px solid var(--line); flex-wrap:wrap; gap: var(--space-4); }
  .footer-col h5 { font-size: var(--fs-body); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; opacity:0.45; margin-bottom: var(--space-2); }
  .footer-col a, .footer-col p { display:block; font-size: var(--fs-body); font-weight:500; margin-bottom: var(--space-1); }
  .footer-bottom { display:flex; justify-content:space-between; padding-top: var(--space-2); border-top:1px solid var(--line); font-size: var(--fs-body); opacity:0.5; flex-wrap:wrap; gap: var(--space-1); }
  .footer-legal { display:flex; gap: var(--space-3); flex-wrap:wrap; }
  .footer-legal a { text-decoration:underline; }

  [data-reveal] { opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  [data-reveal].in { opacity:1; transform:translateY(0); }

  /* ---------- Portfolio grid ---------- */
  .portfolio-grid { padding: 0 0 var(--space-10); }
  .pg { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
  .pg .pcard { display:block; }
  .pg .pcard .thumb { aspect-ratio:3/4; overflow:hidden; margin-bottom: var(--space-3); }
  .pg .pcard .thumb img { transition: transform .6s cubic-bezier(0.25,1,0.5,1); }
  @media (hover:hover) and (pointer:fine) { .pg .pcard:hover .thumb img { transform: scale(1.06); } }
  .pg .pcard h4 { font-size: var(--fs-heading); font-weight:700; letter-spacing:-0.01em; color: var(--ink-heading); }
  @media (max-width:800px){ .pg{grid-template-columns:1fr; gap: var(--space-7);} }

  /* ---------- Gallery placeholder page ---------- */
  .gallery-hero { position:relative; height:60vh; min-height:360px; overflow:hidden; container-type:size; }
  .gallery-hero + .section-label { padding-top: 69px; }
  .gallery-hero img { filter: grayscale(1) contrast(1.1); }
  .gallery-soon { padding: var(--space-8) 0 var(--space-11); }
  .gallery-soon .wrap { max-width:640px; }
  .gallery-soon h2 { font-size: var(--fs-heading); font-weight:800; letter-spacing:-0.02em; margin-bottom: var(--space-2); color: var(--ink-heading); }
  .gallery-soon p { font-size: var(--fs-body); line-height:1.6; color: var(--ink-body); margin-bottom: var(--space-3); }

  /* ---------- Photo gallery (masonry) ---------- */
  .photo-gallery { padding: var(--space-4) 0 var(--space-11); }
  .pgg-series { margin-bottom: var(--space-10); }
  .pgg-series:last-of-type { margin-bottom: var(--space-6); }
  .pgg { columns:3; column-gap: var(--space-2); }
  .pgg-item { display:block; margin-bottom: var(--space-2); break-inside:avoid; overflow:hidden; }
  .pgg-item img { display:block; width:100%; transition: transform .6s cubic-bezier(0.25,1,0.5,1); }
  @media (hover:hover) and (pointer:fine) { .pgg-item:hover img { transform: scale(1.06); } }
  @media (max-width:900px){
    .pgg{columns:2; column-gap: var(--space-1);}
    .pgg-item{margin-bottom: var(--space-1);}
    .pgg-series:not(:last-of-type) { margin-bottom:0; }
    .pgg-series:not(:first-child)::before {
      content:"";
      display:block;
      width:18px; height:18px;
      margin: 50px auto;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237A2C1E' d='M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733C11.285 4.876 9.623 3.75 7.688 3.75 5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z'/%3E%3C/svg%3E") no-repeat center center;
      background-size: contain;
    }
  }
  @media (max-width:560px){ .pgg{columns:1;} }
  .back { display:inline-block; font-size: var(--fs-body); }
  .video-gallery .back, .photo-gallery .back { display:block; margin-top: var(--space-6); }

  /* ---------- Pricing (Ceník) ---------- */
  .pricing-grid { padding: 0 0 var(--space-11); }
  .price-bento { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-7); }
  .pb-card { display:flex; flex-direction:column; }
  .pb-card.pb-featured { grid-column: 1 / -1; flex-direction:row; align-items:center; gap: var(--space-8); }
  .pb-featured .pb-photo { flex:1.1; order:2; aspect-ratio:5/4; margin-bottom:0; }
  .pb-featured .pb-content { flex:1; order:1; max-width:460px; }
  .pb-photo { aspect-ratio:4/5; overflow:hidden; margin-bottom: var(--space-4); }
  .pb-photo img { width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.05); }
  .pb-content h3 { font-size: var(--fs-heading); font-weight:700; letter-spacing:-0.01em; margin-bottom: var(--space-3); color: var(--ink-heading); }
  .price-list { list-style:none; margin-bottom: var(--space-1); }
  .price-list li { font-size: var(--fs-body); line-height:1.7; color: var(--ink-body); margin-bottom: var(--space-2); }
  .price-list li:last-child { margin-bottom:0; }
  .price-list li.strong { font-weight:700; color: var(--ink); }
  .price-tag { display:block; font-size: var(--fs-body); font-weight:700; margin-top: var(--space-2); margin-bottom: var(--space-3); letter-spacing:0.02em; }
  .price-btn { display:inline-block; font-size: var(--fs-body); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; border:1px solid var(--ink); padding:16px 28px; margin-right: var(--space-2); transition: background .2s ease, color .2s ease; }
  .price-btn:hover { background: var(--ink); color:#fff; }
  .pb-content .gallery-link { display:inline-block; margin-top: var(--space-2); font-size: var(--fs-body); }
  @media (max-width:900px){ .price-bento{grid-template-columns:1fr;} .pb-card.pb-featured{flex-direction:column;} .pb-featured .pb-photo{order:1; margin-bottom: var(--space-4);} .pb-featured .pb-content{order:2; max-width:none;} }

  /* ---------- Video gallery ---------- */
  .video-gallery { padding: var(--space-4) 0 var(--space-11); }
  .vgg { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
  .vcard { cursor:pointer; }
  .vcard .thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:#0D0D0D; }
  .vcard .thumb img { filter: contrast(1.05); transition: transform .6s cubic-bezier(0.25,1,0.5,1); }
  .vcard-bw .thumb img { filter: grayscale(1) contrast(1.05); }
  .vcard .play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .vcard .play::before { content:""; width:52px; height:52px; border-radius:50%; background:rgba(245,243,239,0.94); display:block; transition: transform .25s ease; }
  @media (hover:hover) and (pointer:fine) {
    .vcard:hover .thumb img { transform: scale(1.06); }
    .vcard:hover .play::before { transform: scale(1.1); }
  }
  .vcard .play::after { content:""; position:absolute; width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent var(--ink); margin-left:3px; }
  .vcard .meta { display:flex; justify-content:space-between; align-items:center; margin-top: var(--space-2); gap: var(--space-1); }
  .vcard .meta span { font-size: var(--fs-body); color: rgba(17,17,17,0.4); white-space:nowrap; }
  .like-btn { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border:0; background:none; padding:0; color: rgba(17,17,17,0.4); cursor:pointer; transition: color .2s ease, transform .2s ease; }
  .like-btn svg { width:14px; height:14px; display:block; overflow:visible; }
  .like-btn path { fill:none; stroke: currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition: fill .2s ease; }
  .like-btn:hover { color: var(--red); transform: scale(1.12); }
  .like-btn.liked { color: var(--red); }
  .like-btn.liked path { fill: currentColor; }
  @media (max-width:900px){ .vgg{grid-template-columns:1fr; max-width:480px; margin:0 auto;} }

  /* ---------- Video lightbox ---------- */
  .video-lightbox { position:fixed; inset:0; background:rgba(10,10,10,0.95); display:none; align-items:center; justify-content:center; z-index:200; padding: var(--space-7) var(--space-3) var(--space-3); }
  .video-lightbox.open { display:flex; }
  .lb-inner { position:relative; width:100%; max-width:1040px; }
  .lb-frame { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
  .lb-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
  .lb-close { position:absolute; top:-40px; right:0; color:#fff; font-size: var(--fs-body); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; background:none; border:0; }

  /* ---------- O mně ---------- */
  .about-hero { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-4); padding: 0 0 var(--space-9); align-items:start; }
  .ab-hero-photo { grid-column:2 / 4; aspect-ratio:3234/1605; overflow:hidden; }
  .ab-hero-photo img { width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.05); }
  .ab-hero-text { grid-column:1; display:flex; flex-direction:column; text-align:left; }
  .ab-hero-text h3 { font-size: var(--fs-heading); font-weight:700; letter-spacing:-0.01em; margin-bottom: var(--space-3); color: var(--ink-heading); }
  .ab-hero-text p { font-size: var(--fs-body); line-height:1.75; color: var(--ink-body); }
  @media (max-width:900px){ .about-hero{grid-template-columns:1fr; gap: var(--space-4); padding: var(--space-6) 0 var(--space-7);} .ab-hero-photo{grid-column:1;} .ab-hero-text{grid-column:1;} }

  .about-bento { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-4); padding: 0 0 var(--space-11); }
  .ab-card { display:flex; flex-direction:column; }
  .ab-photo { width:100%; aspect-ratio:4/5; overflow:hidden; margin:0 0 var(--space-4); }
  .ab-photo img { width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.05); }
  .ab-photo-color img { filter: contrast(1.05); }
  .ab-content h2 { font-size: var(--fs-heading); font-weight:700; letter-spacing:-0.01em; margin-bottom: var(--space-3); color: var(--ink-heading); }
  .ab-content p { font-size: var(--fs-body); line-height:1.75; color: var(--ink-body); }
  @media (max-width:900px){ .about-bento{grid-template-columns:1fr; padding: var(--space-7) 0 var(--space-9);} }

  /* ---------- Contact page (business card + photo) ---------- */
  .contact-info { display:flex; align-items:center; gap: var(--space-8); padding: 0 0 var(--space-11); }
  .contact-info-photo { flex:0 1 560px; aspect-ratio: 8/5; overflow:hidden; }
  .contact-info-photo img { width:100%; height:100%; object-fit:cover; filter: contrast(1.05); }
  .contact-info-text { flex:1; max-width:420px; }
  .contact-info-name { font-size: var(--fs-heading); font-weight:700; letter-spacing:-0.01em; color: var(--ink-heading); margin-bottom: var(--space-3); }
  .contact-info-line { font-size: var(--fs-body); line-height:1.75; color: var(--ink-body); }
  .contact-info-line a { color: inherit; font-weight:inherit; transition: color 0.2s ease; }
  .contact-info-line a:hover { color: var(--red); }
  @media (max-width:900px){ .contact-info{flex-direction:column; align-items:flex-start; gap: var(--space-4); padding: 0 0 var(--space-9);} .contact-info-photo{flex-basis:auto; width:100%;} .contact-info-text{max-width:none;} }

  .about-thanks-cta { display:flex; align-items:center; justify-content:flex-start; gap: var(--space-4); flex-wrap:wrap; }
  .about-thanks-cta .about-cta-btn { border-color: var(--ink); color: var(--ink); }
  .about-thanks-cta .about-cta-btn:hover { background: var(--ink); color:#fff; }
  .about-cta-btn { display:inline-block; font-size: var(--fs-body); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--ink); padding:16px 32px; transition: background .2s ease, color .2s ease; }
  .about-cta-btn:hover { background: var(--ink); color:#fff; }

  /* ---------- Legal pages (GDPR / obchodní podmínky) ---------- */
  .legal-content { max-width:760px; margin:0 auto; padding: var(--space-6) 0 var(--space-10); text-align:left; }
  .legal-content h3 { font-size: var(--fs-heading); font-weight:700; letter-spacing:-0.01em; color: var(--ink-heading); margin: var(--space-6) 0 var(--space-2); }
  .legal-content h3:first-child { margin-top:0; }
  .legal-content p, .legal-content li { font-size: var(--fs-body); line-height:1.75; color: var(--ink-body); }
  .legal-content p { margin-bottom: var(--space-2); }
  .legal-content ul { list-style:disc; margin: 0 0 var(--space-3) var(--space-3); }
  .legal-content li { margin-bottom: var(--space-1); }
  .legal-content a { color: var(--ink); text-decoration:underline; }
  .legal-updated { font-size: var(--fs-body); color: var(--ink-body); opacity:0.6; margin-top: var(--space-5); }

  /* ---------- Cookie consent bar ---------- */
  .cookie-bar { position:fixed; left:0; right:0; bottom:0; z-index:80; background: var(--paper); border-top:1px solid var(--line); padding: var(--space-3) var(--space-5); display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); flex-wrap:wrap; }
  .cookie-bar[hidden] { display:none; }
  .cookie-bar p { font-size: var(--fs-body); line-height:1.6; color: var(--ink-body); max-width:640px; margin:0; }
  .cookie-bar a { color: var(--ink); text-decoration:underline; }
  .cookie-actions { display:flex; align-items:center; gap: var(--space-4); flex-wrap:wrap; }
  .cookie-reject { font-size: var(--fs-body); font-weight:700; letter-spacing:0.05em; color: var(--ink-body); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; }
  .cookie-accept { display:inline-block; font-size: var(--fs-body); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--ink); padding:12px 24px; background:none; color: var(--ink); cursor:pointer; transition: background .2s ease, color .2s ease; white-space:nowrap; }
  .cookie-accept:hover { background: var(--ink); color:#fff; }
  @media (max-width:700px){ .cookie-bar { padding: var(--space-3); flex-direction:column; align-items:flex-start; } .cookie-actions{ width:100%; justify-content:space-between; } }

  /* ---------- Sitewide photo hover zoom (homepage + other subpages, desktop only) ---------- */
  .proof-photo img,
  .proof-photo-small img,
  .work-photo img,
  .rg .card .thumb img,
  .pb-photo img,
  .ab-hero-photo img,
  .ab-photo img,
  .contact-info-photo img {
    transition: transform .6s cubic-bezier(0.25,1,0.5,1);
  }
  @media (hover:hover) and (pointer:fine) {
    .proof-photo:hover img,
    .proof-photo-small:hover img,
    .work-photo:hover img,
    .rg .card .thumb:hover img,
    .pb-photo:hover img,
    .ab-hero-photo:hover img,
    .ab-photo:hover img,
    .contact-info-photo:hover img {
      transform: scale(1.06);
    }
    /* stronger zoom on this one small accent photo, so she visibly comes closer on hover */
    .proof-photo-small:hover img {
      transform: scale(1.7);
    }
  }