/* ============================================================================
   VELDON — foundation layer
   Fonts, reset, tokens. Composition layers land on top of this.

   The @font-face block below is not a draft: it is the exact block proven in
   _qa/czech-glyph-gate.html and screenshot-verified in WebKit. Do not "tidy"
   the Piazzolla unicode-range pair — see the note there.
   ============================================================================ */

/* --- faces ---------------------------------------------------------------- */

/* Schibsted Grotesk is the locked wordmark face, promoted to the whole voice.
   These cuts are combined latin + latin-ext, so they need no unicode-range. */
@font-face {
  font-family: Schibsted;
  src: url(../fonts/schibsted-grotesk-v7-latin_latin-ext-regular.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Schibsted;
  src: url(../fonts/schibsted-grotesk-v7-latin_latin-ext-500.woff2) format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Schibsted;
  src: url(../fonts/schibsted-grotesk-v7-latin_latin-ext-700.woff2) format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Piazzolla Italic ships SPLIT and both halves are mandatory: -ext carries the
   Latin Extended-A carons and rings (ě š č ř ž ů ň ť ď), -lat the Latin-1
   acutes (á í é ú ó ý). Drop either and Czech renders in two different fonts
   mid-word — "přesvědčivější" would mix Piazzolla with a system serif, which
   reads as a rendering bug to a Czech client and is easy to miss in review.
   -ext is declared first so the narrower range is not shadowed. */
@font-face {
  font-family: Piazzolla;
  src: url(../fonts/piazzolla-italic-ext.woff2) format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Piazzolla;
  src: url(../fonts/piazzolla-italic-lat.woff2) format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokens --------------------------------------------------------------- */

:root {
  /* studio voice */
  --ink: #141011;
  --paper: #F2EEE6;
  --cream: #F3EEE7;
  --ink-text: #191412;

  /* vermilion. --red is graphic/large only (4.9:1 on ink — never under 24px).
     The -deep / -bright pair exists so small text stays above 6:1 either way. */
  --red: #E8432D;
  --red-deep: #B2321F;
  --red-bright: #FF6A4D;

  /* room grounds — all desaturated so the client's own artwork is always the
     most saturated thing inside its room */
  --room-storm: #0F1114;
  --room-navy: #101B32;
  --room-cream: #F2E9DA;
  --room-porcelain: #E9EAE0;
  --room-graphite: #17191C;

  --hair-on-dark: rgba(243, 238, 231, 0.16);
  --hair-on-light: rgba(25, 20, 18, 0.16);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The V-seam is the brand mark as architecture. Exactly four exist site-wide:
     hero→room1, room5→services, team→price band, /cenik index→contact.
     A fifth use anywhere is a spec violation. */
  --seam: clamp(40px, 6vw, 88px);
  --seam-hero: clamp(48px, 9svh, 128px); /* deeper: it is a window, not a joint */

  /* written every frame by the lighting system; the static fallback matters
     because it is what reduced-motion and no-JS actually render */
  --room-live: var(--ink);

  --container: 1360px;
  --pad: 48px;
}

@media (max-width: 1023px) { :root { --pad: 32px; } }
@media (max-width: 767px)  { :root { --pad: 20px; } }

/* --- reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--room-live);
  color: var(--cream);
  font: 400 1.0625rem/1.6 Schibsted, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

/* One focus treatment site-wide. Never remove it — the ring is the only
   affordance a keyboard user gets on a page this typographic. */
:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
}
[data-theme='light'] :focus-visible,
.field-light :focus-visible {
  outline-color: var(--red-deep);
}

/* Entrance states are applied ONLY when JS runs, so a no-JS visitor gets the
   finished page rather than a blank one. The .js class is set by an inline
   script in <head>. */
.js [data-enter] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js [data-enter] { opacity: 1; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

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

/* ============================================================================
   COMPOSITION
   ============================================================================ */

/* --- type scale ----------------------------------------------------------- */

.gallery-title, .kicker-xl, .page-h1 {
  font-weight: 700; font-size: clamp(3.5rem, 9.6vw, 8.75rem);
  line-height: 0.95; letter-spacing: -0.02em;
}
/* The H1 size is a token because the hero staircase indents are multiples of it.
   Expressed as `em` they resolve against each element's OWN font-size, so the sub
   (26px) and the actions (17px) each landed on a different left edge instead of on
   line three's. Four alignments where the design wants one descending diagonal. */
:root { --h1: clamp(2.75rem, 7.2vw, 6.5rem); }
.hero-h1, .err-h1 {
  font-weight: 700; font-size: var(--h1);
  line-height: 0.98; letter-spacing: -0.02em;
}
.sec-h2, .room-inner h3, .privacy-h1 {
  font-weight: 700; font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.02; letter-spacing: -0.015em;
}
.band-h2 {
  font-weight: 700; font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.05; letter-spacing: -0.015em;
}
.row-t, .mail-link, .go, .err-link, .cd-choices legend, .cd-step h2, .person .name {
  font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 2.125rem);
  line-height: 1.15; letter-spacing: -0.01em;
}
.hero-sub, .pquote, .lede, .cd-handoff h2, .cd-thanks h2 {
  font-family: Piazzolla, Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.45;
}
.cat, .role, .cd-progress {
  font-weight: 500; font-size: 0.8125rem; line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pwho, .stamp, .legal, .cd-status, .cd-step-error, .cd-mail {
  font-size: 0.875rem; line-height: 1.5;
}

/* The site's smallest identity unit: precision rendered as a full stop.
   Poster scale only -- never at body size. */
.tp { color: var(--red); }

/* --- links: the ink-sweep underline --------------------------------------- */

.lnk {
  position: relative;
  text-decoration: none;
  padding-bottom: 3px;
  box-shadow: inset 0 -1px 0 0 currentColor;
}
.lnk::before {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--red-bright); transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--ease);
}
[data-theme='light'] .lnk::before, .field-paper .lnk::before,
.room-cream .lnk::before, .room-porcelain .lnk::before { background: var(--red-deep); }
.lnk:hover::before, .lnk:focus-visible::before { transform: scaleX(1); }

.visit { display: inline-flex; align-items: center; gap: 8px; }
.visit .ne { width: 16px; height: 16px; flex: none; }

/* --- buttons -------------------------------------------------------------- */

/* Fill is --red-deep, not --red: 18px/600 is not "large text" under WCAG (that needs
   14pt bold = 18.66px), so the label needs 4.5:1. #FFF9F2 on --red is 3.8:1 and on
   --red-deep is 5.96:1. --red keeps the signature work it is actually good at --
   the terminal punctuation at poster scale and the ignition rules. */
.btn {
  display: inline-block; border-radius: 2px;
  background: var(--red-deep); color: #FFF9F2;
  font-weight: 600; font-size: 1.125rem; line-height: 1.2;
  padding: 16px 28px; text-decoration: none;
  /* neutral shadow, not a red halo: a coloured glow under a button is the one
     SaaS-scented pixel this page can't afford */
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.35);
  transition: background 120ms var(--ease), transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: color-mix(in srgb, var(--red-deep) 86%, #000);
  transform: translateY(1px);
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.3);
}
.btn-sec {
  background: none; color: inherit; box-shadow: none;
  border: 1px solid var(--hair-on-dark);
}
.btn-sec:hover, .btn-sec:focus-visible { background: rgba(243,238,231,0.06); transform: translateY(1px); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus {
  left: 16px; top: 16px; padding: 12px 20px;
  background: var(--paper); color: var(--ink-text); border-radius: 2px;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- header --------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 40; height: 72px;
  /* the chrome wears the current room's light -- the concept, in the furniture */
  background: color-mix(in srgb, var(--room-live) 92%, transparent);
  border-bottom: 1px solid var(--hair-on-dark);
  color: var(--cream);
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.topbar[data-theme='light'] { color: var(--ink-text); border-bottom-color: var(--hair-on-light); }
.bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bwm svg { width: 92px; height: auto; }
.top-actions { display: flex; align-items: center; gap: 32px; }
.site-nav { display: flex; gap: 28px; }
.site-nav a, .top-mail { font-weight: 500; font-size: 0.9375rem; }
/* No resting underline in the chrome: a nav item's position is its own affordance,
   and six underlines in every frame is clutter. The hover sweep still fires.
   In-content links keep theirs — there the underline is the only non-colour cue. */
.site-nav .lnk, .top-mail { box-shadow: none; }
.top-mail { color: var(--red-bright); }
.topbar[data-theme='light'] .top-mail { color: var(--red-deep); }
.menu { display: none; }

/* --- hero ----------------------------------------------------------------- */
/* The bottom edge is a V-shaped WINDOW, not a joint. Room 1 tucks under it, so the
   storm photograph burns through the ink in the two wedges the clip removes. */

.hero {
  --ground: #141011;
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; align-items: center;
  background: var(--ink);
  padding-block: 128px calc(var(--seam-hero) + 96px);
}
/* The hero's only light rises from the world below the seam. Static; it does not breathe.
   The turbulence layer is anti-banding at 1.5%, not a grain aesthetic. */
.notch-glow {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence baseFrequency='0.8'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/></svg>"),
    radial-gradient(62% 58% at 50% 100%, rgba(243,238,231,0.06), transparent 70%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-h1 { color: var(--cream); max-width: 16ch; }
.hero-sub { color: rgba(243,238,231,0.78); max-width: 46ch; margin-top: 32px; }
.hero-ctas { display: flex; align-items: baseline; gap: 24px; margin-top: 40px; flex-wrap: wrap; }
.hero-ctas .lnk { color: var(--cream); }

/* The staircase: the type block's left edge draws the V's falling diagonal, and the
   sub and actions adopt the third line's indent so the whole block descends toward
   the seam. Line breaks become architecture instead of a rag. */
@media (min-width: 1024px) {
  .hero-h1 { max-width: none; }
  .hero-h1 .hl { display: inline-block; }
  .hero-h1 .hl2 { padding-left: calc(1.5 * var(--h1)); }
  .hero-h1 .hl3 { padding-left: calc(3 * var(--h1)); }
  /* the support group lands on line three's edge — one diagonal, not four edges */
  .hero-sub, .hero-ctas { margin-left: calc(3 * var(--h1)); }
}
@media (max-width: 1023px) {
  .hero-h1 br { display: none; }
  .hero-h1 { text-wrap: balance; }
}

/* --- the gallery ---------------------------------------------------------- */

.gallery { background: var(--room-live); }

.room {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: 12svh;
  overflow: clip;
}
/* Room 1 slides up under the hero's notch so the storm shows through the wedges. */
.room-storm { margin-top: calc(-1 * var(--seam-hero)); }

.room-storm     { --ground: #0F1114; color: var(--cream); }
.room-navy      { --ground: #101B32; color: var(--cream); }
.room-cream     { --ground: #F2E9DA; color: var(--ink-text); }
.room-porcelain { --ground: #E9EAE0; color: var(--ink-text); }
.room-graphite  { --ground: #17191C; color: var(--cream); }
.field-paper    { --ground: #F2EEE6; color: var(--ink-text); background: var(--paper); }
.field-ink      { --ground: #141011; color: var(--cream); background: var(--ink); }

/* Without JS -- and under reduced motion -- each room paints its own ground, so
   five distinctly lit rooms survive with no interpolation at all. */
html:not(.js) .room, html.reduce .room { background: var(--ground); }

/* Room 1: the photograph IS the room. */
.room-cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.scrim { position: absolute; inset-inline: 0; z-index: 1; pointer-events: none; }
/* The top scrim starts BELOW the notch band. It exists to seat the "Reference"
   title, which sits lower; running it to y=0 darkened the very strip the hero's
   V-window looks through, and the photo's upper right is storm sky, so the right
   flank of the V sank to within ~7 luminance of the ink and the brand gesture
   read as a single left-hand cut instead of a V. */
.scrim-top { top: var(--seam-hero); height: 26%; background: linear-gradient(rgba(15,17,20,0.62), transparent); }
/* and a scoped sky lift across the notch band only, so the darker right flank
   still reads as photograph rather than as more ink */
.room-storm::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: var(--seam-hero); z-index: 1;
  background: linear-gradient(to left, rgba(116, 145, 184, 0.3), transparent 72%);
  mix-blend-mode: screen; pointer-events: none;
}
.scrim-bottom { bottom: 0; height: 48%; background: linear-gradient(transparent, rgba(15,17,20,0.84)); }

/* The gallery's title painted on its first wall, like an exhibition door plate.
   The offset keeps it clear of the hero overlap at every seam depth. */
.gallery-title {
  position: absolute; z-index: 3;
  top: max(14svh, calc(var(--seam-hero) + 48px));
  left: var(--pad); color: var(--cream); margin: 0;
}

.room-inner { position: relative; z-index: 2; width: 100%; }

/* Fixed syntax: identical text anatomy in every room. Ground, plate treatment and
   composition are the ONLY variables -- that is what makes the variety read as
   art direction rather than as inconsistency. */
.rtext h3 { margin-bottom: 12px; }
.cat { opacity: 0.62; margin-bottom: 16px; }
.desc { max-width: 44ch; }
.visit { margin-top: 24px; }
.pquote { max-width: 34ch; }
.pwho { display: block; margin-top: 12px; opacity: 0.6; }
.proof { margin-top: 24px; }

.room-cinema {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  align-items: end; align-content: end; min-height: 68svh;
}
.room-cinema .rtext { grid-column: 1 / span 5; }
.room-cinema .proof { grid-column: 8 / span 5; margin-top: 0; }

.room-split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.room-split .rtext { grid-column: 1 / span 4; }
.room-split .plate, .room-split .plate-pair { grid-column: 6 / span 7; }
/* Two-column placements exist only where there are two columns. Scoping them here
   beats declaring them globally and unwinding each one in the mobile query. */
@media (min-width: 1024px) {
  .plate-left .plate { grid-column: 1 / span 7; grid-row: 1; }
  .plate-left .rtext { grid-column: 8 / span 5; grid-row: 1; }
  .room-graphite .plate-pair { grid-column: 7 / span 6; }
}

/* Plates are printed matter: no radius, a hairline, one shadow family.
   Never tilted, never in a browser mockup. */
.plate { margin: 0; border: 1px solid var(--hair-on-dark); }
.room-cream .plate, .room-porcelain .plate { border-color: var(--hair-on-light); }
.plate img { width: 100%; height: auto; display: block; }
.room-navy .plate, .room-graphite .plate { box-shadow: 0 32px 80px -24px rgba(0,0,0,0.55); }
.room-cream .plate, .room-porcelain .plate { box-shadow: 0 24px 64px -28px rgba(25,20,18,0.28); }

/* Each room's crop logic is different on purpose: the detail-crop rule fails when
   every project is mined for the same pretty zone. */
.plate-crop-etbar img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 65%; }
/* 1.45 not 16:9: cropping 16:9 out of a 16:10 source only bites ~6%, so their nav
   row survived and the brown serif — the whole appetite argument — rendered at ~28px.
   This makes "Poctivé jídlo. Dobrá nálada." the plate's actual subject. */
.plate-crop-arka img { aspect-ratio: 1.45; object-fit: cover; object-position: center 42%; }

/* The two-plate room. Plate A is a full-bleed screenshot with content in every
   corner, so any overlap covers something: the pair is narrowed to six columns and
   Plate B hangs left into the gutter, crossing only Plate A's own empty margin.
   Depth from overlap, without editor chrome sitting on the output it annotates. */
.plate-pair { position: relative; }
.plate-b { position: absolute; left: -140px; bottom: 64px; width: 150px; }

/* --- services + pricing rows (one system, two pages) ---------------------- */

.sec-h2 { margin-bottom: 64px; }
.rows { border-bottom: 1px solid var(--hair-on-light); }
.row {
  position: relative;
  border-top: 1px solid var(--hair-on-light);
  padding-block: 48px;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  align-items: start;
}
/* row ignition: the hairline is overdrawn in red, the title steps right */
.row::before {
  content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 100%;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 350ms var(--ease);
}
.row:hover::before, .row:focus-within::before { transform: scaleX(1); }
.row-t { grid-column: 1 / span 5; transition: transform 350ms var(--ease); }
.row:hover .row-t, .row:focus-within .row-t { transform: translateX(4px); }
.row-d { grid-column: 6 / span 6; max-width: 58ch; }

/* --- team ----------------------------------------------------------------- */

.people { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.person { grid-column: span 4; display: flex; flex-direction: column; align-items: flex-start; }
.person-offset { margin-top: 48px; }
.photo { display: block; width: 100%; border: 1px solid var(--hair-on-light); margin-bottom: 24px; }
/* One raster language across three un-art-directed shots: a warm ink duotone that
   unifies three different backgrounds. Deliberately NOT applied to the client
   plates -- their variety is the evidence. */
.photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(1.02) sepia(0.06);
  transition: filter 300ms var(--ease);
}
.person:hover .photo img, .person:focus-within .photo img, .person.lit .photo img { filter: none; }
.person .name { margin-bottom: 4px; }
.role { opacity: 0.6; margin-bottom: 16px; }
.person p { max-width: 36ch; }
.li-link { margin-top: 16px; display: block; }
.li-link svg { width: 20px; height: 20px; opacity: 0.55; transition: opacity 200ms var(--ease); }
.li-link:hover svg, .li-link:focus-visible svg { opacity: 1; }

/* --- price band + contact ------------------------------------------------- */

.price-band { min-height: 50svh; display: flex; align-items: center; padding-block: 96px; }
.band-h2 { max-width: 18ch; }
.go { display: inline-block; margin-top: 32px; color: var(--cream); }

.contact {
  position: relative; min-height: 90svh;
  display: flex; align-items: center; padding-block: 128px; overflow: clip;
}
.mail-link { display: inline-block; margin-top: 24px; color: var(--cream); }
.kicker-xl { color: var(--cream); }
/* the closing seal: the only drawn V on the homepage */
.seal {
  position: absolute; right: -3vw; bottom: -7vh; height: 25vh;
  color: rgba(243,238,231,0.10); pointer-events: none;
}
.seal svg { height: 100%; width: auto; }

/* --- sections + seams ----------------------------------------------------- */

.services, .team { padding-block: 128px; }

/* One V-notch definition, two depths. --v is the only thing that differs between
   the hero's window and an ordinary section joint. */
.hero, .notch-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--v)), 50% 100%, 0 calc(100% - var(--v)));
}
.hero { --v: var(--seam-hero); }
/* The notched section must paint ABOVE what follows, or the next section — which
   slides up under it — simply covers the clipped triangles and the V never shows.
   The hero gets this from its own z-index: 2. */
.notch-bottom {
  --v: var(--seam);
  position: relative; z-index: 1;
  padding-bottom: calc(128px + var(--seam));
}
.notch-bottom + * { margin-top: calc(-1 * var(--seam)); }

/* --- jumper --------------------------------------------------------------- */

.jumper {
  position: fixed; right: 24px; top: 50%; translate: 0 -50%; z-index: 30;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transition: opacity 200ms var(--ease);
}
.jumper[hidden] { display: none; }
.jumper.on { opacity: 1; }
.jump-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--hair-on-dark); color: var(--cream);
  background: color-mix(in srgb, var(--room-live) 70%, transparent);
  transition: transform 150ms var(--ease), opacity 200ms var(--ease);
}
.jumper[data-theme='light'] .jump-btn { border-color: var(--hair-on-light); color: var(--ink-text); }
.jump-btn svg { width: 20px; height: 20px; }
.jump-btn .up { rotate: 180deg; }
.jump-btn:hover:not(:disabled) { transform: translateY(2px); }
.jump-btn:first-child:hover:not(:disabled) { transform: translateY(-2px); }
.jump-btn:disabled { opacity: 0.3; cursor: default; }

/* --- footer --------------------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--cream); padding-block: 64px 48px; }
.foot {
  position: relative; display: flex; flex-direction: column; gap: 24px;
  border-top: 1px solid var(--hair-on-dark); padding-top: 32px;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 28px; font-weight: 500; font-size: 0.9375rem; }
.legal { display: flex; flex-wrap: wrap; gap: 24px; opacity: 0.6; }
.foot-v { position: absolute; right: var(--pad); bottom: 0; width: 24px; color: rgba(243,238,231,0.2); }
.foot-v svg { width: 24px; height: auto; }

/* --- entrance ------------------------------------------------------------- */

.js [data-enter] { transform: translateY(24px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.js [data-enter].in { opacity: 1; transform: none; }
/* the H1 animates per line so the staircase assembles in step order, red stop last */
.js .hero-h1[data-enter] { opacity: 1; transform: none; }
.js .hero-h1 .hl { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.js .hero-h1.in .hl { opacity: 1; transform: none; }
.js .hero-h1.in .hl1 { transition-delay: 80ms; }
.js .hero-h1.in .hl2 { transition-delay: 140ms; }
.js .hero-h1.in .hl3 { transition-delay: 200ms; }
.js .hero-sub.in { transition-delay: 280ms; }
.js .hero-ctas.in { transition-delay: 340ms; }
.js .room-cover { transform: scale(1.06); transition: transform 1400ms var(--ease); }
.js .room-storm.settled .room-cover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-h1 .hl { opacity: 1; transform: none; }
  .js .room-cover { transform: none; }
}

/* --- utility pages -------------------------------------------------------- */

.page-head { padding-block: 128px 64px; }
.lede { max-width: 52ch; margin-top: 24px; opacity: 0.78; }
/* 0.62 not 0.55: ink-text at 0.55 over paper is 3.88:1 at 14px. 0.62 is the same
   floor .cat and .role already sit on, and it is still unmistakably tertiary. */
.stamp { display: block; margin-top: 32px; opacity: 0.62; text-align: right; }
.err-main {
  position: relative; overflow: clip;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
}
/* the closing seal, mirrored: on a wrong turn the mark looks back */
.seal-404 {
  right: auto; left: -10vw; bottom: auto; top: 50%; translate: 0 -50%; height: 110vh;
}
.err-kicker { opacity: 0.6; margin-bottom: 24px; }
.err-link { display: inline-block; margin-top: 40px; color: var(--cream); }

/* prices are poster figures, not table cells */
/* Five columns and a lower ceiling: the two widest ranges ("15 000 až 30 000 Kč")
   wrapped at 44px in four columns and orphaned the Kč on its own line. */
.price {
  grid-column: 8 / span 5; justify-self: end; text-align: right;
  font-weight: 700; font-size: clamp(1.625rem, 2.6vw, 2.375rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.015em;
  text-wrap: nowrap;
}
.rate-d { grid-column: 1 / span 7; max-width: 58ch; margin-top: 16px; }

.prose { max-width: 68ch; }
.prose h2 { font-weight: 700; font-size: 1.375rem; line-height: 1.3; margin: 48px 0 12px; }
.prose p { line-height: 1.65; }
.prose .lnk { color: var(--red-deep); }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1023px) {
  .room-cinema, .room-split, .row, .people { grid-template-columns: 1fr; }
  .room-cinema .rtext, .room-cinema .proof,
  .room-split .rtext, .room-split .plate, .room-split .plate-pair,
  .plate-left .plate, .plate-left .rtext,
  .row-t, .row-d, .rate-d, .price, .person { grid-column: 1 / -1; }
  .room-cinema .proof { margin-top: 24px; }
  .price { justify-self: start; text-align: left; margin-top: 16px; }
  .rate-d { margin-top: 12px; }
  .person-offset { margin-top: 0; }
  .people { gap: 64px; }
  /* plate first, text below -- the work leads on mobile too */
  .room-split .plate, .room-split .plate-pair { order: -1; margin-bottom: 32px; }
  .services, .team { padding-block: 80px; }
  .notch-bottom { padding-bottom: calc(80px + var(--seam)); }
  .hero { padding-block: 96px calc(var(--seam-hero) + 72px); }
}

@media (max-width: 899px) {
  .site-nav, .top-mail { display: none; }
  .menu { display: block; position: relative; }
  .menu > summary {
    list-style: none; cursor: pointer; font-weight: 500; font-size: 0.9375rem;
    padding: 8px 4px;
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu-panel {
    position: fixed; inset: 0; z-index: 50;
    background: var(--ink); color: var(--cream);
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    padding: 96px var(--pad) 48px;
    animation: menu-in 300ms var(--ease);
  }
  .menu-panel nav { display: flex; flex-direction: column; gap: 8px; }
  .menu-panel nav a { font-weight: 700; font-size: 2rem; line-height: 1.5; text-decoration: none; }
  .panel-foot { margin-top: 48px; display: flex; flex-direction: column; gap: 8px; font-size: 0.875rem; }
  .panel-foot .dim { opacity: 0.55; }
  .nav-open, .nav-open body { overflow: hidden; }
}

@keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  @keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
}

@media (max-width: 767px) {
  .topbar { height: 60px; }
  .jumper { display: none; }
  /* .room is a flex ROW; un-absoluting the title would drop it in beside the
     content and squeeze it off-screen, so the axis has to turn first. */
  .room { flex-direction: column; justify-content: center; min-height: auto; padding-block: 80px; }
  .gallery-title { position: static; padding-inline: var(--pad); padding-top: calc(var(--seam-hero) + 16px); margin-bottom: 32px; }
  .room-storm { min-height: auto; }
  /* one full-height wash instead of two edge scrims: on a phone the whole column
     of text sits over the photograph, not just its top and bottom bands */
  .scrim-top { height: 100%; background: linear-gradient(rgba(15,17,20,0.40), rgba(15,17,20,0.88)); }
  .scrim-bottom { display: none; }
  .plate-b { position: static; width: 150px; margin-top: 16px; }
  .room-cinema { min-height: 0; }
  .contact { min-height: 70svh; padding-block: 96px; }
  .seal { height: 18vh; }
}

/* --- contact dialog ------------------------------------------------------- */
/* Restyle only: the three-step flow, the low-budget handoff branch, the honeypot
   and every string are frozen production behaviour. */

.contact-dialog {
  border: 0; padding: 0; margin: 0 0 0 auto;
  width: min(560px, 100%); max-width: 100%; height: 100%; max-height: 100%;
  background: var(--ink); color: var(--cream);
  border-left: 1px solid var(--hair-on-dark);
}
.contact-dialog::backdrop { background: rgba(15, 17, 20, 0.55); }
.contact-dialog[open] { animation: sheet-in 300ms var(--ease) 80ms backwards; }
.contact-dialog[open]::backdrop { animation: fade-in 200ms var(--ease); }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.cd-form {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px 48px 48px;
  overflow-y: auto;
}
.cd-close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; font-size: 1.5rem; line-height: 1;
  color: var(--cream); opacity: 0.7;
}
.cd-close:hover, .cd-close:focus-visible { opacity: 1; }
.cd-progress { opacity: 0.6; margin-bottom: 32px; }
.cd-step { animation: step-in 250ms var(--ease); }
@keyframes step-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cd-step h2 { margin-bottom: 32px; }

.cd-choices { border: 0; padding: 0; margin: 0; }
.cd-choices legend { padding: 0; margin-bottom: 32px; }
.cd-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cd-choices legend { grid-column: 1 / -1; }
.cd-choice {
  display: block; cursor: pointer;
  border: 1px solid var(--hair-on-dark); padding: 16px; border-radius: 2px;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.cd-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cd-choice:hover { border-color: rgba(243,238,231,0.35); }
.cd-choice:has(input:checked) { border: 2px solid var(--red); color: var(--red-bright); padding: 15px; }
.cd-choice:has(input:focus-visible) { outline: 2px solid var(--red-bright); outline-offset: 3px; }

.cd-field { display: block; margin-bottom: 24px; }
.cd-field > span {
  display: block; margin-bottom: 8px;
  font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.7;
}
.cd-field input, .cd-field textarea {
  width: 100%; background: none; border: 0;
  border-bottom: 1px solid var(--hair-on-dark);
  padding: 8px 0; border-radius: 0;
  transition: border-color 200ms var(--ease);
}
.cd-field input:focus, .cd-field textarea:focus {
  outline: none; border-bottom: 2px solid var(--red-bright); padding-bottom: 7px;
}
.cd-field textarea { resize: vertical; }

.cd-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.cd-mail { margin-left: auto; opacity: 0.7; color: var(--cream); }
.cd-status, .cd-step-error { margin-top: 16px; min-height: 1.5em; }
.cd-status.err, .cd-step-error { color: var(--red-bright); }
/* clipped, not display:none -- a hidden-by-display honeypot is not filled by bots */
.cd-hp { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }

@media (max-width: 767px) {
  .contact-dialog { width: 100%; border-left: 0; }
  .cd-form { padding: 88px 20px 40px; }
  .cd-choices { grid-template-columns: 1fr; }
}
@media (max-width: 419px) {
  .cd-choices { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-dialog[open] { animation: fade-in 150ms var(--ease); }
  .cd-step { animation: fade-in 120ms var(--ease); }
}