/* hair.by.kristyna
   The brief, the route and the motion plan live in PRODUCT.md and DESIGN.md.
   Colours, type steps, the spacing ladder, radii and durations live only in the
   first block. Local geometry (icon, emblem and photo sizes, the dot pattern,
   focus offsets, z-order) is typed where it is used; breakpoints are literals
   because media queries cannot read custom properties. One theme: light. */

/* Faces are self-hosted so no visitor's IP goes to a font CDN.
   Cormorant Garamond carries the print's high-contrast serif; Jost carries the
   spaced caps of the logo's "KADEŘNICTVÍ" and does the reading. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fonts/cormorant-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fonts/cormorant-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url(assets/fonts/cormorant-500i-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url(assets/fonts/cormorant-500i-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(assets/fonts/jost-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(assets/fonts/jost-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;

  /* Palette, light only (the client asked for one white site). Ratios are WCAG.
     The ground is the print's blush taken almost to white; the print's own blush
     returns as the band behind the price list and the footer. */
  --paper: #fbf7f4;        /* page ground: the card stock lightened toward white */
  --blush: #f4e8e2;        /* the printed ceník's blush: bands for ceník and footer */
  --card: #ffffff;         /* the price card and the call card */
  --ink: #3d1e16;          /* espresso of the printed "CENÍK"; 14.12:1 on paper, 12.53:1 on blush */
  --ink-soft: #75544b;     /* 6.31:1 on paper, 5.59:1 on blush */
  --toner: #93535c;        /* the print's rose darkened to clear 4.5:1: 5.43 paper, 4.81 blush, 5.78 card */
  --toner-deep: #834845;   /* the flyer's rose-brown: button fill (paper text 6.62:1) and focus ring */
  --foil: #a17261;         /* rose-gold line art: control edges, 3.87:1 paper, 3.43:1 blush */
  --hairline: #c4a7a7;     /* the print's dashed rule and dotted leaders; decorative only */
  --rule: #e6d6cf;         /* full-width section lines; decorative only */
  --logo: url(assets/img/logo-light.webp);

  /* Type. Six kinds of text, six steps. */
  --face-display: "Cormorant Garamond", "Times New Roman", serif;
  --face-text: "Jost", "Segoe UI", Arial, sans-serif;
  --t-note: 0.875rem;                                   /* labels, legal lines, footnotes */
  --t-body: 1.125rem;                                   /* reading text and every price */
  --t-group: 1.5rem;                                    /* price-group names, service names */
  --t-lead: clamp(1.375rem, 1.05rem + 1.1vw, 2rem);     /* section leads in the display face */
  --t-title: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem);   /* section titles */
  --t-display: clamp(3.25rem, 1.4rem + 7.4vw, 8rem);   /* the footer's one big line */
  --lh-body: 1.55;
  --lh-display: 1.02;
  --track-caps: 0.16em;

  /* Spacing from the body line box: 1.125rem × 1.55 ≈ 28px. ÷4 ÷2 ×1 ×2 ×4. */
  --line: calc(var(--t-body) * var(--lh-body));
  --gap-quarter: calc(var(--line) / 4);
  --gap-half: calc(var(--line) / 2);
  --gap-line: var(--line);
  --gap-block: calc(var(--line) * 2);
  --gap-section: calc(var(--line) * 4);

  --measure: 62ch;
  --page: 76rem;
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);

  /* Radius: pills from their own height; photo frames and the price card from their size. */
  --pill: 999px;
  --r-card: 2rem;
  --r-photo: 1.5rem;
  --box-pad: clamp(var(--gap-line), 0.5rem + 3vw, var(--gap-block)); /* inside the rectangles: a line on phones, two on desktop */
  --target: 2.75rem;

  /* Elevation: one level for anything lifted off the paper (card, photos, dialog, header). */
  --lift: 0 1px 0 rgb(61 30 22 / 0.04), 0 30px 60px -30px rgb(61 30 22 / 0.28);

  /* Motion. Marketing page, rare visit: the delight budget is spent on arrival and
     scroll; every control still answers inside the UI band. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-ui: 220ms;
  --dur-bar: 420ms;

  --bar-h: 3.75rem;
  --bar-top: 0.75rem;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + var(--bar-top) + var(--gap-half)); background: var(--paper); }
/* The scrollbar, as on disdesign: thin, in the page's own colours. While the film fills most of the
   window its track turns the film's dark (motion.js sets .over-film), so no light strip runs beside it. */
html { scrollbar-width: thin; scrollbar-color: var(--foil) var(--paper); }
html.over-film { scrollbar-color: var(--foil) #1e0f0b; }
/* Reading progress: a rose-gold hairline under the top edge, driven by the scroll itself (no script).
   Where scroll timelines are not supported it stays at zero width, which is to say absent. */
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: 2px; background: var(--foil); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
@supports (animation-timeline: scroll()) { .progress { animation: progress linear both; animation-timeline: scroll(root); } }
@keyframes progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-body) / var(--lh-body) var(--face-text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, dl, dd, table, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2 { font-family: var(--face-display); font-weight: 500; line-height: var(--lh-display); text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; }
a { color: inherit; text-decoration-color: var(--foil); text-decoration-thickness: 1px; text-underline-offset: 0.22em; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: currentColor; } }
:focus-visible { outline: 2px solid var(--toner-deep); outline-offset: 3px; }
.hero :focus-visible, .has-film .bar:not(.is-solid) :focus-visible { outline-color: #fff8f4; } /* the rose ring is 2.6:1 on the film */
.nowrap { white-space: nowrap; }
::selection { background: var(--toner-deep); color: var(--paper); }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Doubled class: .button sets position: relative and is declared later. */
.skip-link.skip-link { position: fixed; left: var(--gutter); top: var(--gap-quarter); z-index: 9; transform: translateY(-200%); }
.skip-link.skip-link:focus-visible { transform: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }
.label { font: 500 var(--t-note) / 1.4 var(--face-text); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--toner); }
.note { font-size: var(--t-note); color: var(--ink-soft); }
.lead { font: 500 var(--t-lead) / 1.3 var(--face-display); color: var(--ink-soft); max-width: 36ch; }

/* ---------- Buttons ---------- */

.button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-half);
  min-height: var(--target); padding: var(--gap-quarter) var(--gap-line);
  border: 1px solid var(--toner-deep); border-radius: var(--pill);
  font: 500 1rem / 1.2 var(--face-text); letter-spacing: 0.02em; text-decoration: none; text-align: center; white-space: nowrap;
  touch-action: manipulation; user-select: none; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, color var(--dur-ui) ease, border-color var(--dur-ui) ease;
}
.button--solid { background: var(--toner-deep); color: var(--paper); }
.button--line { background: transparent; color: var(--ink); border-color: var(--foil); }
.button--lg { min-height: 3.5rem; padding-inline: calc(var(--gap-line) * 1.25); font-size: var(--t-body); }
@media (hover: hover) and (pointer: fine) {
  .button--solid:hover { background: var(--ink); border-color: var(--ink); }
  .button--line:hover { border-color: var(--ink); }
}
.button:active { transform: scale(0.97); }
.button svg { width: 1.125rem; height: 1.125rem; flex: none; }
/* Spaced caps leave their tracking after the last letter; the right side gives it back. */
.button--small { min-height: var(--target); padding-inline: var(--gap-half) calc(var(--gap-half) - var(--track-caps)); font-size: var(--t-note); letter-spacing: var(--track-caps); text-transform: uppercase; }
@media (min-width: 60rem) { .button--small { padding-inline: var(--gap-line) calc(var(--gap-line) - var(--track-caps)); } }
.round {
  display: inline-grid; place-items: center; flex: none; width: var(--target); height: var(--target); padding: 0;
  border: 1px solid var(--foil); border-radius: var(--pill); background: transparent; color: var(--ink); cursor: pointer; touch-action: manipulation;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-ui) ease, background-color var(--dur-ui) ease;
}
.round svg { width: 1.125rem; height: 1.125rem; }
@media (hover: hover) and (pointer: fine) { .round:hover { border-color: var(--ink); background: var(--card); } }
.round:active { transform: scale(0.94); }

/* ---------- The bar: a floating pill ---------- */

.bar { position: fixed; z-index: 8; top: var(--bar-top); left: 0; right: 0; transition: transform var(--dur-bar) var(--ease-out); }
.bar.is-hidden { transform: translateY(calc(-100% - var(--bar-top) - 4px)); }
.bar-inner {
  display: flex; align-items: center; gap: var(--gap-quarter);
  width: min(100% - 2 * var(--gutter) + 1rem, var(--page) + 2rem); margin-inline: auto;
  height: var(--bar-h); padding-inline: var(--gap-line) var(--gap-quarter);
  border: 1px solid transparent; border-radius: var(--pill);
  transition: background-color var(--dur-bar) ease, border-color var(--dur-bar) ease, box-shadow var(--dur-bar) ease;
}
.bar.is-solid .bar-inner {
  background: rgb(255 255 255 / 0.78); border-color: var(--rule); box-shadow: var(--lift);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.wordmark { margin-right: auto; font: italic 500 var(--t-group) / 1 var(--face-display); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--target); }
.bar-nav { display: none; }
.bar-nav a { position: relative; font-size: var(--t-note); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; padding: var(--gap-half) var(--gap-quarter); }
.bar-nav a::after { content: ""; position: absolute; left: var(--gap-quarter); right: var(--gap-quarter); bottom: calc(var(--gap-half) - 4px); height: 1px; background: var(--toner-deep); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bar-nav a:hover::after { transform: scaleX(1); transform-origin: left; } }
.bar-nav a[aria-current]::after { transform: scaleX(1); }
@media (min-width: 60rem) { .bar-nav { display: flex; gap: var(--gap-half); margin-right: var(--gap-half); } .menu { display: none; } }
@media (max-width: 23rem) { .wordmark { font-size: var(--t-body); } }
@media (max-width: 21rem) { .bar .button--small { display: none; } }

/* Phone menu: native <details>; Escape and outside taps are wired in motion.js. */
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-sheet {
  position: absolute; right: 0; top: calc(100% + var(--gap-half)); min-width: 15rem;
  max-height: calc(100vh - var(--bar-top) - var(--bar-h) - var(--gap-half) - var(--gap-line));
  max-height: calc(100svh - var(--bar-top) - var(--bar-h) - var(--gap-half) - var(--gap-line));
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: var(--gap-quarter); padding: var(--gap-half);
  background: var(--card); border: 1px solid var(--rule); border-radius: 1.5rem; box-shadow: var(--lift);
  transform-origin: top right;
}
.menu[open] .menu-sheet { animation: sheet-in var(--dur-ui) var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.menu-sheet a[aria-current] { background: var(--blush); color: var(--toner-deep); }
.menu-sheet a { display: block; padding: var(--gap-half) var(--gap-line); border-radius: 1rem; text-decoration: none; font: 500 var(--t-group) / 1.1 var(--face-display); }
@media (hover: hover) and (pointer: fine) { .menu-sheet a:hover { background: var(--blush); } }

/* ---------- Hero: the film behind the sign ----------
   The film plays from the first moment and fills the whole first screen, edge to edge. Two <video> elements cross-fade over the clip's last 1.2 s,
   so the loop never shows a cut. Over it a dark veil keeps the cream text above
   4.5:1 on the film's brightest pixel (measured over the whole clip at 0.6: 4.70:1). */
/* The film runs on a little past the first screen (--film-run), so it keeps playing as the page starts to
   move; the sign stays centred in the first screen. */
.hero { --film-run: 14vh; position: relative; isolation: isolate; min-height: calc(100vh + var(--film-run)); min-height: calc(100svh + var(--film-run)); display: grid; place-items: start center; text-align: center; color: #fff8f4; overflow: clip; }
.film { position: absolute; z-index: -2; inset: 0; overflow: hidden; background: #2a1712; }
.film img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film video { z-index: 1; opacity: 0; transition: opacity 1.2s linear; }
.film video.is-top { z-index: 2; }
.film video.is-on { opacity: 1; }
.film::after { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(rgb(30 15 11 / 0.62), rgb(30 15 11 / 0.6) 45%, rgb(30 15 11 / 0.7)); }
/* A blush light follows the mouse (motion.js sets --gx/--gy); on touch it rests behind the emblem. */
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(34rem 26rem at var(--gx, 50%) var(--gy, 40%), rgb(232 176 183 / 0.2), transparent 70%);
}
.hero-content { display: grid; justify-items: center; align-content: center; min-height: 100vh; min-height: 100svh; gap: var(--gap-line); padding: calc(var(--bar-h) + var(--gap-block)) var(--gutter) var(--gap-block); }
.emblem { width: clamp(12rem, 5rem + 19svh, 20rem); aspect-ratio: 410 / 377; background: url(assets/img/logo-dark.webp) no-repeat center / contain; }
.hero h1 { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem); text-shadow: 0 2px 24px rgb(30 15 11 / 0.35); }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero h1 .line > span { display: inline-block; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-half); }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-quarter) var(--gap-line); font-size: var(--t-note); letter-spacing: 0.04em; }
.scroll-cue { position: absolute; bottom: calc(var(--film-run) + var(--gap-line)); left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: var(--gap-half); font-size: 0.75rem; letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; padding: var(--gap-quarter); }
.scroll-cue i { display: block; width: 1px; height: 3rem; background: linear-gradient(currentColor, transparent); transform-origin: top; animation: cue 2.4s var(--ease-in-out) infinite; }
@media (max-height: 52rem), (max-width: 40rem) { .scroll-cue { display: none; } }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* Arrival start states, held here so nothing shows once and then jumps. */
html.motion .emblem, html.motion .hero h1 .line > span, html.motion .hero-actions > *, html.motion .hero-meta, html.motion .scroll-cue { opacity: 0; }

/* The header over the film: cream until it turns solid. */
.has-film .bar:not(.is-solid) { color: #fff8f4; }
.has-film .bar:not(.is-solid) .menu summary { border-color: rgb(255 248 244 / 0.6); color: #fff8f4; }
.has-film .bar:not(.is-solid) .bar-nav a::after { background: currentColor; }
.menu-sheet { color: var(--ink); }
/* A light button for the film: glass, cream text. */
.button--glass { background: rgb(255 248 244 / 0.12); color: #fff8f4; border-color: rgb(255 248 244 / 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (hover: hover) and (pointer: fine) { .button--glass:hover { background: rgb(255 248 244 / 0.22); border-color: #fff8f4; } }

/* ---------- Page heads (every page but the home page) ---------- */
.page-head { display: grid; gap: var(--gap-half); padding-top: calc(var(--bar-top) + var(--bar-h) + var(--gap-block) * 1.5); margin-bottom: var(--gap-block); }
.page-head h1 { font-size: var(--t-title); }
.page-head h1 em { color: var(--toner); }

/* ---------- Rectangles: the stage behind every picture ----------
   One look for the service panels, the doors on the home page, the badge and the
   contact cards: blush, a soft light from the middle and a faint dot grid, as on
   disdesign's works stage. */
.panel, .door, .about-panel, .contact-card { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--blush); }
.panel::before, .door::before, .about-panel::before, .contact-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(closest-side at 50% 55%, rgb(255 255 255 / 0.85), transparent); }
.panel::after, .door::after, .about-panel::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(var(--hairline) 1px, transparent 1.6px); background-size: 1.25rem 1.25rem; -webkit-mask-image: radial-gradient(closest-side, black, transparent); mask-image: radial-gradient(closest-side, black, transparent); }

/* ---------- Home: the services as a bento grid ----------
   Five tiles in two rows: three across, then a narrow one and a wide one. A tile is
   one of the rectangles (blush, light, dot grid) with the service's name and a small
   photo in its corner. With a mouse, the big photo floods in from the point where
   the pointer entered (a circle clip, motion.js sets --mx/--my) and the name turns
   cream over it; it drains back toward where the pointer left. Touch screens and
   keyboard focus show the photo at once, since there is no hover to wait for. */
.index { padding-block: var(--gap-section); }
.bento { display: grid; gap: var(--gap-half); margin: 0; padding: 0; list-style: none; }
.tile {
  position: relative; isolation: isolate; display: grid; align-content: end; gap: var(--gap-quarter);
  height: 100%; min-height: 17rem; padding: var(--box-pad); overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--blush);
  color: #fff8f4; text-decoration: none;
}
.tile::after { content: ""; position: absolute; z-index: -3; inset: 0; background-image: radial-gradient(var(--hairline) 1px, transparent 1.6px); background-size: 1.25rem 1.25rem; -webkit-mask-image: radial-gradient(closest-side, black, transparent); mask-image: radial-gradient(closest-side, black, transparent); }
.tile-photo { position: absolute; z-index: -1; inset: 0; }
.tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 900ms var(--ease-out); }
.tile-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 8%, rgb(30 15 11 / 0.62) 30%, rgb(30 15 11 / 0.86) 55%, rgb(30 15 11 / 0.92)); } /* the text sits on the lower half: measured per tile, see docs/sessions */
.tile-num { font-size: var(--t-note); letter-spacing: var(--track-caps); }
.tile-name { font: 500 clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem) / 1.05 var(--face-display); text-wrap: balance; max-width: 16ch; }
.tile-sub { font-size: 1rem; }
.tile-more { justify-self: start; margin-top: var(--gap-quarter); font-size: var(--t-note); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; }
.tile-thumb { display: none; }

@media (min-width: 40rem) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento > li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 62.5rem) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(24rem, 42vh) minmax(27rem, 50vh); }
  .bento > li { grid-column: span 2; }
  .bento > li:first-child { grid-column: span 2; }
  .bento > li:last-child { grid-column: span 4; }
}

/* A mouse: the tile rests as a blush rectangle, the photo waits behind a closed clip. */
@media (hover: hover) and (pointer: fine) {
  .tile { color: var(--ink); transition: color 500ms var(--ease-out), translate 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
  .tile::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(closest-side at 50% 55%, rgb(255 255 255 / 0.85), transparent); }
  .tile-num, .tile-more { color: var(--toner); transition: color 500ms var(--ease-out); }
  .tile-sub { color: var(--ink-soft); transition: color 500ms var(--ease-out); }
  .tile-photo { clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path 800ms var(--ease-out); }
  .tile-photo img { scale: 1.12; }
  .tile-thumb {
    display: block; position: absolute; top: var(--box-pad); right: var(--box-pad); width: clamp(4rem, 2.5rem + 2.5vw, 5.75rem); aspect-ratio: 3 / 4;
    overflow: hidden; border: 0.25rem solid var(--card); border-radius: 1rem; box-shadow: var(--lift); rotate: 4deg;
    transition: opacity 400ms ease, rotate 600ms var(--ease-out), scale 600ms var(--ease-out);
  }
  .tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tile:is(:hover, :focus-visible) { color: #fff8f4; translate: 0 -4px; box-shadow: var(--lift); }
  .tile:is(:hover, :focus-visible) :is(.tile-num, .tile-more, .tile-sub) { color: #fff8f4; }
  .tile:is(:hover, :focus-visible) .tile-photo { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
  .tile:is(:hover, :focus-visible) .tile-photo img { scale: 1.02; }
  .tile:is(:hover, :focus-visible) .tile-thumb { opacity: 0; rotate: 12deg; scale: 0.8; }
  .tile:active { translate: 0 -1px; }
  html.calm .tile-photo { clip-path: none; opacity: 0; transition: opacity 500ms ease; }
  html.calm .tile:is(:hover, :focus-visible) .tile-photo { opacity: 1; }
}

/* ---------- Home: two doors, to the price list and to her ---------- */
.doors { padding-block: 0 var(--gap-section); }
.doors-grid { display: grid; gap: var(--gap-line); }
@media (min-width: 48rem) { .doors-grid { grid-template-columns: 1fr 1fr; } }
.door { display: grid; align-content: start; gap: var(--gap-half); min-height: 24rem; padding: var(--box-pad) var(--box-pad) 9rem; text-decoration: none; box-shadow: none; transition: translate 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.door-title { font: 500 clamp(2rem, 1.5rem + 2vw, 3.25rem) / 1.05 var(--face-display); max-width: 14ch; }
.door-text { color: var(--ink-soft); max-width: 36ch; }
.door-more { margin-top: var(--gap-half); font-weight: 500; text-decoration: underline; text-decoration-color: var(--foil); text-underline-offset: 0.22em; }
.door-art { position: absolute; right: var(--box-pad); bottom: var(--gap-line); }
.door-icons { display: flex; gap: var(--gap-half); }
.door-icons i { width: 3.5rem; aspect-ratio: 1; background-repeat: no-repeat; background-position: center; background-size: contain; }
.door-logo { width: 8rem; aspect-ratio: 410 / 377; background: var(--logo) no-repeat center / contain; }
@media (hover: hover) and (pointer: fine) { .door:hover { translate: 0 -6px; box-shadow: var(--lift); } .door:hover .door-more { text-decoration-color: currentColor; } }
.door:active { translate: 0 -2px; }

/* ---------- Services: a list that stays, a stage of panels that scrolls ----------
   A panel is the rectangle with the main photo, a second photo over its corner and
   the callouts pinned to it. On phones each service carries its own panel above
   its text; from 62.5rem the list stays on the left while the panels scroll past
   on the right. --p (motion.js) is how far a panel has travelled through the
   window, 0 to 1: the photos drift apart a little and the callouts arrive. */

.services, .cenik, .contact { padding-block: 0 var(--gap-section); }
.section-head { display: grid; gap: var(--gap-half); margin-bottom: var(--gap-block); }
.section-head h2 { font-size: var(--t-title); }
.services-grid { display: grid; gap: var(--gap-block); }
.svc-list { display: grid; align-content: start; margin: 0; padding: 0; list-style: none; }
.svc { position: relative; padding-block: var(--gap-line) var(--gap-block); }
.svc + .svc { border-top: 1px solid var(--rule); padding-top: var(--gap-block); }
.svc-title { margin: 0; font: 500 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem) / 1.1 var(--face-display); transition: color var(--dur-ui) ease; }
.svc-title a { text-decoration: none; display: inline-block; padding-block: var(--gap-quarter); }
.svc-sub { color: var(--toner); font-size: 1rem; }
.svc-body { display: grid; gap: var(--gap-half); padding-top: var(--gap-half); color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: var(--gap-quarter); }
.chips li { padding: 0.35rem 0.9rem; border: 1px solid var(--rule); border-radius: var(--pill); font-size: 0.9375rem; color: var(--ink); background: var(--card); }
.svc-more { justify-self: start; font-size: 1rem; font-weight: 500; color: var(--ink); padding-block: var(--gap-quarter); }
/* The thread under the active service fills as its panel passes the middle. */
.svc-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--toner-deep); transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; transition: opacity var(--dur-ui) ease; }
.photo-note { margin-top: var(--gap-line); }

.panel { display: grid; align-items: center; margin: 0 0 var(--gap-line); padding: 9% 0; }
.panel-main {
  position: relative; width: 80%; margin-left: 6%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-photo); background: var(--paper); box-shadow: var(--lift);
  transform: perspective(900px) rotateX(calc(var(--ly, 0) * -3deg)) rotateY(calc(var(--lx, 0) * 4deg)) translateY(calc((0.5 - var(--p, 0.5)) * 2.5rem));
  transition: transform 600ms var(--ease-out), opacity 600ms ease;
}
.panel-side {
  position: absolute; right: 5%; bottom: 7%; width: 28%; aspect-ratio: 3 / 4; overflow: hidden;
  border: 0.3rem solid var(--card); border-radius: 1.1rem; background: var(--card); box-shadow: var(--lift);
  transform: translateY(calc((0.5 - var(--p, 0.5)) * -3.5rem)) rotate(3deg);
  transition: transform 600ms var(--ease-out), opacity 600ms ease;
}
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.notes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.pin {
  --show: clamp(0, (var(--p, 0.5) - 0.12 - var(--k) * 0.08) * 6, 1); /* 0 before its turn, 1 once the panel is well in */
  position: absolute; display: flex; align-items: center; padding: 0.4rem 0.9rem;
  border: 1px solid var(--rule); border-radius: var(--pill); background: rgb(255 255 255 / 0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--lift);
  font-size: var(--t-note); font-weight: 500; white-space: nowrap; color: var(--ink);
  opacity: var(--show); translate: 0 calc((1 - var(--show)) * 1rem);
}
/* The leader: a dotted line to a dot on the photo. */
.pin::after { content: ""; position: absolute; top: 50%; width: 2.5rem; border-top: 2px dotted var(--foil); }
.pin::before { content: ""; position: absolute; top: calc(50% - 0.22rem); width: 0.44rem; height: 0.44rem; border-radius: 50%; background: var(--toner-deep); }
.pin-0, .pin-1 { left: 3%; }
.pin-0::after, .pin-1::after { left: 100%; }
.pin-0::before, .pin-1::before { left: calc(100% + 2.5rem); }
.pin-2 { right: 3%; }
.pin-2::after { right: 100%; }
.pin-2::before { right: calc(100% + 2.5rem); }
.pin-0 { --k: 0; top: 6%; }
.pin-1 { --k: 1; bottom: 5%; }
.pin-2 { --k: 2; top: 24%; }
/* Narrow phones: two callouts and no leaders, so nothing crowds the photos. */
@media (max-width: 30rem) { .pin-2 { display: none; } .pin::before, .pin::after { display: none; } }
html.calm .panel-main, html.calm .panel-side { transform: rotate(0); }
html.calm .pin { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .panel-main { transform: none; } .panel-side { transform: rotate(3deg); } .pin { opacity: 1; translate: none; } }

@media (max-width: 62.49rem) { .stage { display: none; } }
@media (min-width: 40rem) and (max-width: 62.49rem) { .svc > .panel { max-width: 40rem; } }
.svc > .panel .pin-0 { top: 16%; } .svc > .panel .pin-1 { bottom: 15%; }

@media (min-width: 62.5rem) {
  .services-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: var(--gap-section); align-items: start; }
  .svc-list { position: sticky; top: calc(var(--bar-h) + var(--bar-top) + var(--gap-line)); border-top: 1px solid var(--rule); }
  .svc, .svc + .svc { border-top: 0; border-bottom: 1px solid var(--rule); padding-block: var(--gap-line); }
  .svc > .panel { display: none; }
  .svc-title { font-size: var(--t-group); }
  /* Only the active service opens; the others show title and subtitle. */
  html.motion .svc-body { display: none; }
  html.motion .svc.is-active .svc-body, html.motion .svc:focus-within .svc-body { display: grid; animation: open-in 500ms var(--ease-out); }
  html.calm .svc .svc-body { animation-name: fade-in; }
  html.motion .svc:not(.is-active) .svc-title { color: var(--ink-soft); }
  html.motion .svc.is-active .svc-progress { opacity: 1; }
  .stage { display: grid; gap: var(--gap-block); padding-block: 0 12vh; }
  .stage .panel { min-height: min(78vh, 44rem); min-height: min(78svh, 44rem); margin: 0; transition: opacity 600ms ease; }
  html.motion .stage .panel:not(.is-active) :is(.panel-main, .panel-side) { opacity: 0.55; } /* the one the list names is the lit one; callouts keep their contrast */
  .pin { font-size: 0.9375rem; }
  .stage .pin-0 { top: 24%; } .stage .pin-1 { bottom: 22%; } .stage .pin-2 { top: 36%; }
}
/* Shorter screens: inactive services show only their title and the active one only
   its chips, so the stuck list fits a laptop window. */
@media (min-width: 62.5rem) and (max-height: 62rem) {
  .svc, .svc + .svc { padding-block: var(--gap-half); }
  html.motion .svc:not(.is-active) .svc-sub, html.motion .svc-body > .chips { display: none; }
}
/* Very short screens: no stuck list at all, each service carries its own panel. */
@media (min-width: 62.5rem) and (max-height: 40rem) {
  .svc-list { position: static; }
  .stage { display: none; }
  .svc > .panel { display: grid; max-width: 34rem; }
  html.motion .svc-body, html.motion .svc-body > p, html.motion .svc-body > .chips { display: grid; }
  html.motion .svc:not(.is-active) .svc-sub { display: block; }
  html.motion .svc:not(.is-active) .svc-title { color: var(--ink); }
}
@keyframes open-in { from { opacity: 0; transform: translateY(8px); } }


/* ---------- Ceník ---------- */

.cenik { background: var(--blush); }
.cenik-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: clamp(var(--gap-line), 4vw, calc(var(--gap-block) * 1.25)); box-shadow: var(--lift); }

@supports not selector(:has(*)) { #delka-label, .segments { display: none; } }
.segments {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--gap-half); width: min(100%, 27rem);
  background: var(--card); border: 1px solid var(--foil); border-radius: var(--pill);
  padding: 3px; /* Departure: the thumb sits inside the track; a quarter step would make the pinned pill 56px */
}
.segments input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segments label { position: relative; z-index: 1; display: grid; place-items: center; min-height: 2.5rem; padding-inline: var(--gap-half); border-radius: var(--pill); font-size: var(--t-note); font-weight: 500; white-space: nowrap; cursor: pointer; touch-action: manipulation; user-select: none; transition: color var(--dur-ui) var(--ease-out); }
.segments label::before { content: ""; position: absolute; inset: -4px 0; } /* 40 + 8 = 48px hit */
@media (max-width: 23rem) { .segments label { padding-inline: 0; font-size: 0.8125rem; } }
.segments input:focus-visible + label { outline: 2px solid var(--toner-deep); outline-offset: 2px; }
.segments input:checked + label { color: var(--paper); }
.thumb { position: absolute; inset: 3px auto 3px 3px; width: calc((100% - 6px) / 3); border-radius: var(--pill); background: var(--toner-deep); transition: translate 360ms var(--ease-in-out); }
#d-polodlouhe:checked ~ .thumb { translate: 100% 0; }
#d-dlouhe:checked ~ .thumb { translate: 200% 0; }
@media (hover: hover) and (pointer: fine) { .segments input:not(:checked) + label:hover { color: var(--toner); } }
@media (forced-colors: active) {
  .thumb { forced-color-adjust: none; background: Highlight; }
  .segments input:checked + label { forced-color-adjust: none; color: HighlightText; }
}

.group { display: grid; gap: var(--gap-half); }
.by-length > .group { margin-top: var(--gap-block); }
.group + .group, .flat-groups { padding-top: var(--gap-block); border-top: 1px dashed var(--hairline); }
.group h2 { display: flex; align-items: center; gap: var(--gap-half); margin: 0; font: 500 var(--t-group) / 1.15 var(--face-display); letter-spacing: 0.05em; text-transform: uppercase; text-wrap: balance; }
.group-icon { flex: none; width: 3.5rem; aspect-ratio: 1; background: no-repeat center / contain; }
.ic-damske { background-image: url(assets/img/ic-damske-light.webp); } .ic-panske { background-image: url(assets/img/ic-panske-light.webp); }
.ic-detske { background-image: url(assets/img/ic-detske-light.webp); } .ic-barveni { background-image: url(assets/img/ic-barveni-light.webp); }

.prices { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.prices thead th { padding-bottom: var(--gap-quarter); text-align: right; vertical-align: bottom; }
.prices th[scope="row"] { font-weight: 400; text-align: left; padding: var(--gap-quarter) 0; vertical-align: bottom; }
.prices td { padding: var(--gap-quarter) 0 var(--gap-quarter) var(--gap-line); text-align: right; white-space: nowrap; vertical-align: bottom; }
@media (hover: hover) and (pointer: fine) { .prices tbody tr:hover th, .prices tbody tr:hover .price { color: var(--toner-deep); } }
/* The print's dotted leader: grows out of the name, runs through the price cell
   and stops behind the price, which wears the card as a mask. */
.item { display: flex; align-items: flex-end; gap: var(--gap-half); }
.item::after, .prices tbody td { background-image: linear-gradient(to right, var(--hairline) 50%, transparent 0); background-size: 4px 2px; background-repeat: repeat-x; }
/* Basis 0 so the leader never forces a short name to wrap. */
.item::after { content: ""; flex: 1 0 0; height: 2px; margin-bottom: calc(13px - var(--gap-quarter)); }
.prices tbody td { background-position: 0 calc(100% - 13px); }
.price { display: inline-block; background: var(--card); padding-left: var(--gap-quarter); transition: color var(--dur-ui) ease; }
.item small { display: block; font-size: var(--t-note); color: var(--ink-soft); }
.sub .item { padding-left: var(--gap-line); color: var(--ink-soft); }
.none { color: var(--ink-soft); }
@media (min-width: 40rem) {
  .prices:has(thead) { table-layout: fixed; }
  .prices :is(td, th)[class*="len-"] { width: 9rem; padding-left: var(--gap-half); }
  .prices tbody td:is(.len-p, .len-d) { background-image: none; }
  .prices .flat td {
    text-align: center; padding-left: 0;
    background-image: linear-gradient(var(--card), var(--card)), linear-gradient(to right, var(--hairline) 50%, transparent 0);
    background-size: calc(50% + 1px) 100%, 4px 2px;
    background-position: right top, 0 calc(100% - 13px);
    background-repeat: no-repeat, repeat-x;
  }
  .cenik:has(#d-kratke:checked) :is(td, th).len-k,
  .cenik:has(#d-polodlouhe:checked) :is(td, th).len-p,
  .cenik:has(#d-dlouhe:checked) :is(td, th).len-d { color: var(--toner); font-weight: 500; }
  .cenik:has(#d-kratke:checked) td:is(.len-p, .len-d),
  .cenik:has(#d-polodlouhe:checked) td:is(.len-k, .len-d),
  .cenik:has(#d-dlouhe:checked) td:is(.len-k, .len-p) { color: var(--ink-soft); }
}
@media (max-width: 39.99rem) {
  @supports selector(:has(*)) {
    .cenik:has(#d-kratke:checked) :is(.len-p, .len-d),
    .cenik:has(#d-polodlouhe:checked) :is(.len-k, .len-d),
    .cenik:has(#d-dlouhe:checked) :is(.len-k, .len-p) { display: none; }
  }
  .prices tbody td { padding-left: var(--gap-quarter); }
  .item { gap: var(--gap-quarter); }
  /* Only the pill rides along; its card-coloured ring hides the rows passing above and below. */
  .segments { position: sticky; top: calc(var(--bar-h) + var(--bar-top) + var(--gap-quarter)); z-index: 2; width: 100%; box-shadow: 0 0 0 var(--gap-quarter) var(--card); }
}
.flat-groups { display: grid; gap: var(--gap-block); margin-top: var(--gap-block); }
@media (min-width: 48rem) {
  .flat-groups { grid-template-columns: 1fr 1fr; column-gap: var(--gap-section); align-items: start; }
  .flat-groups > .group + .group { border-top: 0; padding-top: 0; }
}
.cenik-foot { margin-top: var(--gap-block); }

/* ---------- O mně ---------- */

.about { padding-block: calc(var(--bar-top) + var(--bar-h) + var(--gap-block)) var(--gap-section); }
.about .wrap { display: grid; gap: var(--gap-block); align-items: center; }
.about-panel { display: grid; place-items: center; padding: var(--box-pad); }
.about-text h1 { font-size: var(--t-title); }
.about-text h2 { margin-top: var(--gap-half); }
.about-text .ask-actions { margin-top: var(--gap-half); }
@media (min-width: 56rem) { .about .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gap-section); } }
/* overflow: clip, because a rotating square's corners would widen the page on phones;
   the ring text is a circle inside the square, so nothing visible is cut. */
.badge { position: relative; width: min(100%, 28rem); aspect-ratio: 1; justify-self: center; overflow: clip; }
.badge-float { position: absolute; inset: 0; display: grid; place-items: center; }
.badge-logo { width: 62%; aspect-ratio: 410 / 377; background: var(--logo) no-repeat center / contain; }
.badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--toner); animation: spin 48s linear infinite; }
.badge-ring text { font: 500 7.4px var(--face-text); letter-spacing: 0.32em; text-transform: uppercase; fill: currentColor; }
@keyframes spin { to { transform: rotate(1turn); } }
.about-text { display: grid; gap: var(--gap-line); max-width: var(--measure); }
.about-text .lead { color: var(--ink); max-width: none; }
.care { display: grid; border-top: 1px solid var(--rule); }
.care li { padding-block: var(--gap-half); border-bottom: 1px solid var(--rule); }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; gap: var(--gap-line); }
@media (min-width: 48rem) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-card { display: grid; align-content: start; gap: var(--gap-half); padding: var(--box-pad); }
.contact-card > * { position: relative; }
.contact-big { justify-self: start; font: 500 clamp(2.5rem, 1.8rem + 3vw, 4.5rem) / 1 var(--face-display); font-variant-numeric: lining-nums; text-decoration: none; }
.contact-call .button { justify-self: start; margin-top: var(--gap-half); }
.contact-mid { justify-self: start; font: 500 var(--t-lead) / 1.25 var(--face-display); font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
a.contact-mid { padding-block: var(--gap-quarter); }
.contact-mail { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.contact .map-links { display: flex; flex-wrap: wrap; gap: 0 var(--gap-line); font-size: 1rem; }
.contact .map-links a { display: inline-block; padding-block: var(--gap-quarter); }

/* ---------- Footer: the ask, the contacts, the index and the small print, one block ----------
   Full-width lines (edge to edge) open it and divide it. */
.foot { background: var(--blush); border-top: 1px solid var(--rule); }
.foot-ask { padding-block: var(--gap-section) var(--gap-block); }
.foot-ask .wrap { display: grid; gap: var(--gap-line); }
.foot-title { font: 500 var(--t-display) / 0.92 var(--face-display); text-wrap: balance; }
.foot-title em { color: var(--toner); }
.ask-row { display: grid; gap: var(--gap-line); align-items: end; }
@media (min-width: 56rem) { .ask-row { grid-template-columns: 1fr auto; } }
.ask-actions { display: flex; flex-wrap: wrap; gap: var(--gap-half); }
.foot-body { padding-block: var(--gap-block); }
.foot-ask + .foot-body { border-top: 1px solid var(--rule); }
.foot-cols { display: grid; gap: var(--gap-block); }
@media (min-width: 52rem) { .foot-cols { grid-template-columns: 1fr 1.25fr 1.5fr; column-gap: var(--gap-block); } }
.foot-cols h2 { margin: 0 0 var(--gap-half); font: 500 var(--t-note) / 1.4 var(--face-text); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
.foot-links { display: grid; gap: var(--gap-quarter); }
.foot-links a { display: inline-block; padding-block: var(--gap-quarter); font-size: 1.25rem; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { color: var(--toner-deep); } }
.foot-contact { display: grid; gap: var(--gap-half); align-content: start; color: var(--ink-soft); font-size: 1rem; }
.foot-contact strong { color: var(--ink); font-weight: 500; }
.foot-contact p > a { color: var(--ink); display: inline-block; padding-block: var(--gap-quarter); }
.icons { display: flex; gap: var(--gap-half); margin-top: var(--gap-quarter); }
.foot-services { display: grid; gap: var(--gap-line); align-content: start; }
.foot-services h2 { margin-bottom: 0; }
.foot-services a { display: inline-block; padding-block: var(--gap-quarter); font: 500 var(--t-group) / 1.15 var(--face-display); color: var(--ink); }
.foot-services p { margin-top: var(--gap-quarter); color: var(--ink-soft); font-size: 1rem; max-width: 40ch; }
.foot-small { border-top: 1px solid var(--rule); }
.foot-small .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-half) var(--gap-line); padding-block: var(--gap-line); color: var(--ink-soft); font-size: var(--t-note); }
.foot-small p:last-of-type { flex: 1 1 24rem; }
.foot-small .wordmark { margin-right: 0; gap: var(--gap-half); color: var(--ink); font-size: 1.375rem; }
.foot-small .wordmark i { width: 2rem; aspect-ratio: 1; background: url(assets/img/ic-damske-light.webp) no-repeat center / contain; }
.foot-small a:not(.wordmark) { display: inline-block; padding-block: var(--gap-half); }

/* The floating call button: phones only, while scrolling back up, never over the footer. */
.fab {
  position: fixed; z-index: 7; left: 50%; bottom: max(var(--gap-line), env(safe-area-inset-bottom));
  translate: -50% 0; box-shadow: 0 18px 40px -12px rgb(61 30 22 / 0.45);
  opacity: 0; visibility: hidden; transform: translateY(1.5rem);
  transition: opacity var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}
.fab.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fab.is-on:active { transform: scale(0.97); }
@media (min-width: 21.0625rem) { .fab { display: none; } } /* wider, the header's own Zavolat is always there */

/* ---------- The call card: what "Zavolat" opens on a computer ---------- */

.call { width: min(100% - 2 * var(--gutter), 32rem); padding: 0; border: 0; border-radius: var(--r-card); background: var(--card); color: var(--ink); box-shadow: 0 40px 80px -30px rgb(61 30 22 / 0.5); }
.call::backdrop { background: rgb(61 30 22 / 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.call[open] { animation: call-in 260ms var(--ease-out); }
.call[open]::backdrop { animation: fade-in 260ms ease; }
@keyframes call-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes fade-in { from { opacity: 0; } }
.call-body { position: relative; display: grid; gap: var(--gap-line); padding: var(--gap-block) var(--gap-block) var(--gap-line); }
.call h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.call-number { font: 500 clamp(2.25rem, 1.8rem + 2vw, 3rem) / 1 var(--face-display); font-variant-numeric: lining-nums; text-decoration: none; }
.call-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-half); }
.call-actions [data-copy] { grid-column: 1 / -1; }
@media (max-width: 30rem) { .call-actions { grid-template-columns: 1fr; } }
.call-close { position: absolute; top: var(--gap-half); right: var(--gap-half); }
.call .note { padding-top: var(--gap-half); border-top: 1px solid var(--rule); }


/* ---------- Reveal: blocks rise once as they arrive ---------- */

html.motion [data-reveal] { opacity: 0; transform: translateY(28px); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
/* Visitors who asked for less motion get the same arrivals as fades, without travel,
   and nothing spins on its own. */
html.calm [data-reveal] { transform: none; }
html.motion .door.is-in { transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), translate 500ms var(--ease-out), box-shadow 500ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s; }
/* #10: no travel on hover for visitors who asked for less motion */
html.calm .door:hover, html.calm .door:active, html.calm .tile:is(:hover, :focus-visible), html.calm .tile:active { translate: none; }
@media (prefers-reduced-motion: reduce) { .badge-ring, .scroll-cue i { animation: none; } }

/* ---------- Plain pages (privacy, 404) ---------- */

.page { padding-block: calc(var(--bar-top) + var(--bar-h) + var(--gap-block) * 1.5) var(--gap-section); min-height: 70svh; }
.page .wrap > * { max-width: var(--measure); }
.page h1 { font-size: var(--t-title); margin-bottom: var(--gap-line); }
.page h2 { font: 500 var(--t-group) / 1.15 var(--face-display); margin: var(--gap-block) 0 var(--gap-half); }
.page p, .page ul { margin: 0 0 var(--gap-half); }
.page ul { padding-left: var(--gap-line); list-style: disc; }
.gap-mark { display: block; padding: var(--gap-half) var(--gap-line); border-left: 3px solid var(--toner-deep); background: var(--blush); }

/* ---------- Print: everything visible, nothing fixed, no film ---------- */
@media print {
  .bar, .skip-link, .progress, .fab, .scroll-cue, .film, .stage, .about-panel, .call, .door-art, .tile img, .tile-thumb { display: none !important; }
  .tile { color: var(--ink) !important; min-height: 0 !important; }
  .hero { color: var(--ink); }
  html.motion [data-reveal], .prices tbody tr, html.motion .hero * { opacity: 1 !important; transform: none !important; }
  html.motion .svc-body { display: grid !important; }
  .panel { break-inside: avoid; }
  .hero { min-height: 0; }
  body, .cenik, .foot { background: #fff !important; }
  .cenik-card { box-shadow: none; }
}