/* FK Solutions — implemented from Claude Design "FK Solutions Web.dc.html".
   Desktop (≥1024px) is a non-scrolling, full-viewport bento of five panels that
   cross-fade in place; below 1024px they become tabs, one scrolling panel at a time. */

/* Self-hosted variable fonts (Google Fonts, OFL — see assets/fonts/), trimmed by
   scripts/subset-fonts.py to the axis ranges below; the latin-ext files hold only the
   Czech and Slovak letters. unicode-range loads only what a page uses. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 100% 110%;
  font-display: swap;
  src: url(../assets/fonts/archivo-v2-latin-ext.woff2) format('woff2');
  unicode-range: U+010C-010F, U+011A-011B, U+0139-013A, U+013D-013E, U+0147-0148, U+0154-0155, U+0158-0159, U+0160-0161, U+0164-0165, U+016E-016F, U+017D-017E;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 100% 110%;
  font-display: swap;
  src: url(../assets/fonts/archivo-v2-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-v2-latin-ext.woff2) format('woff2');
  unicode-range: U+010C-010F, U+011A-011B, U+0139-013A, U+013D-013E, U+0147-0148, U+0154-0155, U+0158-0159, U+0160-0161, U+0164-0165, U+016E-016F, U+017D-017E;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-v2-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 {
  --navy: #0A1128;
  --navy-2: #1B2A47;
  --navy-3: #24365A;
  --cream: #F8F3E0;
  --cream-hi: #FFFDF4;
  --slate: #CBD5E1;
  --dot-off: rgba(203, 213, 225, .45);
  --line-on-navy: rgba(248, 243, 224, .7);

  --font-display: 'Archivo', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  --radius: 22px;
  --gap: 10px;
  --ease-fade: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-2); }
h1, h2, h3, p, ul { margin: 0; }
button { font-family: inherit; }

/* Two-tone ring: cream outer ring for controls on navy surfaces… */
:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--navy);
}
/* …and the inverse for controls sitting directly on cream tiles. */
.chip:focus-visible,
.contact-card__links a:focus-visible,
.copy-email:focus-visible,
.contact-card__legal a:focus-visible {
  outline-color: var(--navy);
  box-shadow: 0 0 0 4px var(--cream);
}
.panel:focus, .panel:focus-visible { outline: none; box-shadow: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Archivo caps used for every small label, chip and button. */
.label {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 110%;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ── Shell ─────────────────────────────────────────────────────────────── */

.app {
  --m: 1; /* motion multiplier: 0 disables every transition */
  height: 100vh;
  min-height: 620px;
  min-width: 1024px;
  padding: 12px;
  display: grid;
  grid-template-columns: clamp(92px, 12.5vh, 150px) minmax(0, 1fr);
  gap: var(--gap);
  background: var(--navy);
  color: var(--navy);
  font-family: var(--font-body);
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .app { --m: 0; }
}
.app.no-anim { --m: 0; } /* set briefly by main.js for non-navigation state changes */

.wordmark {
  border: 0;
  padding: 18px 0;
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--navy);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  transition: background-color .4s ease;
}
@media (hover: hover) {
  .wordmark:hover { background: var(--cream-hi); }
}

.wordmark__text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: 10vh; /* refined by fitWordmark() in main.js */
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .78;
  text-transform: uppercase;
  white-space: nowrap;
}

/* All panels share one grid cell; only the active one is visible and interactive. */
.stage {
  display: grid;
  min-height: 0;
}

.panel {
  --o: 0; /* tile opacity / slide-in progress */
  --d: 0; /* 1 while entering, so the staggered delays apply only on the way in */
  grid-area: 1 / 1;
  display: grid;
  gap: var(--gap);
  min-height: 0;
  pointer-events: none;
  z-index: 1;
}
.panel { scroll-margin-top: 12px; } /* matches .app padding: a #hash load leaves .app unscrolled */
.panel.is-active {
  --o: 1;
  --d: 1;
  pointer-events: auto;
  z-index: 3;
}

/* ── Tiles ─────────────────────────────────────────────────────────────── */

.tile {
  --delay: 100ms;
  position: relative;
  border-radius: var(--radius);
  will-change: opacity, translate;
  opacity: var(--o);
  translate: 0 calc((1 - var(--o)) * 32px);
  transition:
    opacity calc(var(--m) * 600ms) var(--ease-fade) calc(var(--d) * var(--m) * var(--delay)),
    translate calc(var(--m) * 900ms) var(--ease-out) calc(var(--d) * var(--m) * var(--delay)),
    scale .55s var(--ease-out),
    background-color .4s ease,
    filter .4s ease;
}

/* Entrance stagger per tile (default 100ms). A data attribute, not style="--delay:…":
   the CSP's style-src has no 'unsafe-inline', so style attributes would be blocked. */
[data-delay="160"] { --delay: 160ms; }
[data-delay="200"] { --delay: 200ms; }
[data-delay="220"] { --delay: 220ms; }
[data-delay="260"] { --delay: 260ms; }
[data-delay="280"] { --delay: 280ms; }
[data-delay="320"] { --delay: 320ms; }
[data-delay="340"] { --delay: 340ms; }
[data-delay="380"] { --delay: 380ms; }
[data-delay="400"] { --delay: 400ms; }

/* The same staggered rise as a CSS animation, for page loads: on index the opening panel
   (.app.is-intro, dropped by main.js once it has played), on the subpages every tile. */
@keyframes tile-fade { from { opacity: .01; } } /* not 0: Chrome skips FCP/LCP for opacity-0 paints */
@keyframes tile-rise { from { translate: 0 32px; } }
@media (prefers-reduced-motion: no-preference) {
  .app.is-intro .panel.is-active .tile {
    animation:
      tile-fade 600ms var(--ease-fade) var(--delay) backwards,
      tile-rise 900ms var(--ease-out) var(--delay) backwards;
  }
  /* The wordmark leads the stagger; it stays put during panel switches. */
  .app.is-intro .wordmark {
    animation:
      tile-fade 600ms var(--ease-fade) backwards,
      tile-rise 900ms var(--ease-out) backwards;
  }
}

.tile--cream { background: var(--cream); }
.tile--navy { background: var(--navy-2); color: #fff; }
.tile--photo { overflow: hidden; background: var(--slate); }

/* Hover effects only where a pointer can hover, so taps don't leave them stuck on. */
@media (hover: hover) {
  .hover-bg.tile--cream:hover { background: var(--cream-hi); }
  .hover-bg.tile--navy:hover { background: var(--navy-3); }
  .hover-lift:hover { scale: 1.012; z-index: 3; }
  .hover-zoom:hover { scale: 1.008; z-index: 3; }
  .hover-zoom-lg:hover { scale: 1.015; z-index: 3; }
  .hover-bright:hover { filter: brightness(1.025); }
  .hover-bright-lg:hover { filter: brightness(1.12); }
}
/* !important keeps Chrome from running the scale on the compositor, which would
   stretch the cached 1x raster and blur text at 100% display scaling (the design
   runtime marks every hover declaration !important too). Desktop only, so the
   stacked layout's `scale: none` still applies. */
@media (hover: hover) and (min-width: 1024px) {
  .hover-lift:hover { scale: 1.012 !important; }
  .hover-zoom:hover { scale: 1.008 !important; }
  .hover-zoom-lg:hover { scale: 1.015 !important; }
}

[data-go]:not(button) { cursor: pointer; }

/* Pills */
.tag {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 10.5px;
}
.tile--navy .tag { border-color: var(--line-on-navy); color: var(--cream); }
.tag--lg { padding: 8px 16px; }

.eyebrow { font-size: 11px; color: var(--navy-2); }

/* Card typography shared by problem / solution / process tiles */
.card {
  padding: clamp(18px, 2vw, 30px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
}
.card__body { align-self: end; display: grid; gap: 10px; }
.card__title {
  font-size: clamp(15px, min(1.3vw, 2.5vh), 22px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: anywhere;
  color: var(--navy);
}
.card__text {
  font-size: clamp(13px, 1.02vw, 15.5px);
  line-height: 1.5;
  font-weight: 500;
  text-wrap: pretty;
  color: var(--navy-2);
}
.tile--navy .card__title { color: #fff; }
.tile--navy .card__text { color: var(--slate); }

/* Photo slots: fill the tile; an <img> dropped inside covers the placeholder. */
.slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slot__ph {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 90%;
  padding: 12px;
  text-align: center;
  overflow-wrap: anywhere;
  font-size: 10.5px;
  color: var(--navy-2);
  opacity: .55;
}
.slot__ph::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5.2-5.2L7 19.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5.2-5.2L7 19.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Pager (back home / next section) ─────────────────────────────────── */

.pager {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: var(--navy);
}
.pager--end { gap: 14px; padding: 6px 6px 6px 20px; }

.pager__back {
  height: 52px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 11.5px;
  white-space: nowrap;
  transition: background-color .25s ease;
}
@media (hover: hover) {
  .pager__back:hover { background: #fff; }
}

.pager__next {
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .25s ease;
}
@media (hover: hover) {
  .pager__next:hover { background: var(--navy-2); }
}

.pager__txt { display: grid; gap: 4px; text-align: left; }
.pager__kicker { font-size: 9.5px; color: var(--slate); }
.pager__name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1;
  text-transform: uppercase;
}

/* Vertical variant in the narrow solution side tile */
.pager--stack {
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: 30px;
}
.pager--stack .pager__back {
  height: auto;
  min-height: 48px;
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding: 8px 12px;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
}
.pager--stack .pager__next {
  height: auto;
  min-height: 52px;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  padding: 10px 14px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 22px;
  white-space: normal;
}

.home-ico {
  display: grid;
  grid-template-columns: 6px 9px;
  grid-template-rows: 6px 6px;
  gap: 2px;
}
.home-ico > span { border-radius: 2px; background: var(--navy); }
.home-ico > span:first-child { grid-row: 1 / 3; }
.home-ico > span:last-child { background: var(--navy-2); opacity: .55; }

.dots { display: flex; gap: 4px; }
.dots > span { width: 6px; height: 6px; border-radius: 3px; background: var(--dot-off); }
.dots > .on { background: var(--cream); }

/* ── Úvod ──────────────────────────────────────────────────────────────── */

.panel--hero {
  --nw: clamp(150px, 15vw, 210px); /* notch width  */
  --nh: clamp(62px, 10vh, 92px);   /* notch height */
  grid-template-columns: minmax(0, .46fr) minmax(0, 1fr) minmax(0, .82fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, .8fr);
}

.hero-intro {
  grid-column: 1 / 3;
  grid-row: 1;
  overflow: hidden;
  padding: clamp(18px, 2vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px 28px;
}
.hero-intro__title {
  font-size: clamp(20px, min(2.1vw, 3.9vh), 38px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--navy);
  max-width: 600px;
  text-wrap: balance;
}
.hero-intro__eyebrow {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 10.5px;
  color: var(--navy-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: start;
  gap: 6px;
  max-width: 230px;
}
.chip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-size: 10.5px;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.chip--solid { background: var(--navy); color: var(--cream); }
@media (hover: hover) {
  .chip:hover { background: var(--navy); color: var(--cream); }
}

/* Bottom-right cut-out that the booking tab of the tile below sits in */
.notch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--nw);
  height: var(--nh);
  background: var(--navy);
  border-top-left-radius: 26px;
}
.notch-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 0 0, transparent 21.5px, var(--navy) 22px);
}
.notch-corner--top { right: 0; bottom: var(--nh); }
.notch-corner--left { right: var(--nw); bottom: 0; }

.hero-teaser {
  grid-column: 1 / 3;
  grid-row: 2;
  border-radius: var(--radius) 0 var(--radius) var(--radius);
  padding: clamp(20px, 2.2vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px 32px;
}

.book-tab {
  position: absolute;
  right: 0;
  bottom: 100%;
  width: calc(var(--nw) - 10px);
  height: var(--nh);
  background: var(--navy-2);
  border-radius: 16px 16px 0 0;
  padding: 10px 10px 0;
  display: grid;
}
.book-tab__corner {
  position: absolute;
  right: calc(var(--nw) - 10px);
  bottom: 100%;
  width: 32px;
  height: 32px;
  background: radial-gradient(circle at 0 0, transparent 31.5px, var(--navy-2) 32px);
}

.book-link {
  min-width: 0;
  border-radius: 12px;
  background: var(--cream);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  transition: background-color .25s ease;
}
@media (hover: hover) {
  .book-link:hover { background: #fff; color: var(--navy); }
}
.book-link__txt { display: grid; gap: 4px; text-align: left; min-width: 0; }
.book-link__kicker { font-size: 9.5px; color: var(--navy-2); }
.book-link__name {
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.05;
  text-transform: uppercase;
}

.grid-dots {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-auto-rows: 4px;
  gap: 2px;
}
.grid-dots > span { border-radius: 1px; background: var(--navy); opacity: .28; }
.grid-dots > .on { opacity: 1; }

.hero-teaser__lead {
  grid-column: 1 / -1;
  font-size: clamp(16px, min(1.6vw, 2.9vh), 27px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: uppercase;
  max-width: 720px;
  text-wrap: pretty;
}
.hero-teaser__meta {
  align-self: end;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
}

.stat {
  align-self: end;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: .8;
  color: var(--cream);
}
.stat__num {
  font-size: clamp(64px, min(7.2vw, 12.5vh), 136px);
  font-weight: 800;
  letter-spacing: -.055em;
}
.stat__unit { font-size: 15px; font-weight: 600; }

.hero-photo { grid-column: 3; grid-row: 1 / 4; }
.hero-detail { grid-column: 1; grid-row: 3; background: var(--cream); }

.hero-list {
  grid-column: 2;
  grid-row: 3;
  overflow: hidden;
  padding: clamp(16px, 1.6vw, 24px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
}
.hero-list__items {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  align-content: start;
  max-width: 57%;
  min-height: 0;
  overflow: hidden;
  font-size: clamp(11px, min(.95vw, 1.75vh), 13px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--navy-2);
}
.hero-list__photo {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: 40%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--slate);
}

/* ── Problém / Spolupráce ──────────────────────────────────────────────── */

.panel--split {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.68fr);
  grid-template-rows: minmax(0, .8fr) minmax(0, 1fr);
}
.panel--split .card { grid-row: 2; }

.sec-head {
  grid-column: 1 / 4;
  grid-row: 1;
  padding: clamp(20px, 2.2vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px 24px;
}
.sec-title {
  grid-column: 1 / -1;
  align-self: end;
  font-size: clamp(30px, min(3.6vw, 6.6vh), 66px);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--navy);
}
.sec-photo { grid-column: 4; grid-row: 1 / 3; }

/* ── Řešení ────────────────────────────────────────────────────────────── */

.panel--solution {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.68fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.sol-side {
  grid-column: 1;
  grid-row: 1 / 4;
  padding: clamp(20px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
}
.sol-side__title {
  align-self: end;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-size: clamp(26px, min(2.6vw, 5vh), 48px);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--navy);
}

.sol-row {
  grid-column: 2 / 4;
  padding: clamp(18px, 2vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px 28px;
}
.sol-row .card__title { grid-column: 1; grid-row: 2; align-self: end; }
.sol-row .card__text { grid-column: 2; grid-row: 2; align-self: end; }

.sol-photo { grid-column: 4; grid-row: 1 / 4; }

/* ── Kontakt ───────────────────────────────────────────────────────────── */

.panel--contact {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.68fr);
  /* Row 2 never shrinks below the contact card, so the legal line can't overlap it. */
  grid-template-rows: minmax(0, 1.1fr) minmax(min-content, 1fr);
}

.contact-head {
  grid-column: 1 / 4;
  grid-row: 1;
  padding: clamp(22px, 2.4vw, 38px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px 24px;
}
.contact-head__title {
  grid-column: 1 / -1;
  align-self: end;
  font-size: clamp(34px, min(4.4vw, 8vh), 80px);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--navy);
  max-width: 900px;
  text-wrap: balance;
}
.contact-head__lead {
  grid-column: 1 / -1;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 500;
  color: var(--navy-2);
}

.contact-photo { grid-column: 4; grid-row: 1 / 3; }

.contact-book {
  grid-column: 1 / 3;
  grid-row: 2;
  padding: clamp(22px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
}
.contact-book__title {
  align-self: end;
  font-size: clamp(22px, min(2.3vw, 4.2vh), 40px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
  max-width: 520px;
}

.btn-cta {
  justify-self: start;
  height: 52px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy);
  font-size: 12px;
  transition: background-color .25s;
}
@media (hover: hover) {
  .btn-cta:hover { background: #fff; color: var(--navy); }
}

.contact-card {
  grid-column: 3;
  grid-row: 2;
  padding: clamp(18px, 2vw, 30px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}
.contact-card__who { display: grid; gap: 6px; }
.contact-card__brand {
  font-size: clamp(17px, 1.5vw, 24px);
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--navy);
}
.contact-card__name {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--navy-2);
}
.contact-card__links {
  align-self: end;
  display: grid;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 600;
}
.contact-card__links a,
.contact-card__links a:hover { color: var(--navy); }
.contact-card__phone { color: var(--navy-2); font-weight: 500; }

/* E-mail as a copy button (main.js), not a mailto: link. */
.copy-email {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--navy);
  text-align: left;
  cursor: copy;
}
@media (hover: hover) {
  .copy-email:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* "Copied" notice, shown by main.js */
.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: max-content; /* left: 50% would otherwise wrap it at half the screen */
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--cream);
  box-shadow: 0 0 0 1px rgba(248, 243, 224, .18), 0 12px 32px rgba(10, 17, 40, .45);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  translate: -50% 12px;
  transition: opacity .25s ease, translate .35s var(--ease-out);
}
.toast.is-visible { opacity: 1; translate: -50% 0; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* Business identification required on the site by § 435 of the Civil Code. */
.contact-card__legal {
  display: grid;
  gap: 2px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--navy-2);
}
.contact-card__legal a {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 24px; /* WCAG 2.5.8 target size */
  color: var(--navy-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  .contact-card__legal a:hover { color: var(--navy); }
}

/* Expanding colour wash created by main.js during panel changes */
.flood {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* ── Tabbed layout (< 1024px) ──────────────────────────────────────────
   Not part of the desktop design: one panel at a time, scrolling vertically,
   switched from a tab bar fixed to the bottom of the screen (main.js). */

.tabbar, .next-tile { display: none; }

@media (max-width: 1023.98px) {
  html, body { height: auto; }

  .app {
    height: auto;
    min-height: 0;
    min-width: 0;
    /* Bottom: room for the fixed tab bar (52px tabs + 12px padding + 10px offset). */
    padding:
      10px
      max(10px, env(safe-area-inset-right))
      calc(94px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .wordmark {
    padding: 16px 18px 12px;
    place-items: center start;
  }
  .wordmark__text {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 14.5vw; /* refined by fitWordmark() */
    line-height: .8;
  }

  .panel {
    grid-area: auto;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .panel:not(.is-active) { display: none; }
  /* A #hash load scrolls to the page top (clamped), as a tab switch does: wordmark stays in view. */
  .panel { scroll-margin-top: 100vh; }
  /* main.js renders a newly shown panel at --o: 0 for one frame, so its tiles stagger in. */
  .panel.is-entering { --o: 0; }

  .tile { will-change: auto; grid-column: 1 / -1; grid-row: auto; }
  .hover-lift:hover, .hover-zoom:hover, .hover-zoom-lg:hover { scale: none; }

  /* The tab bar takes over from the hero chips and the per-panel pagers
     (scoped to the panels: the subpages' header uses .pager too). */
  .stage .chips, .stage .pager { display: none; }

  .tabbar {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: min(100% - 20px, 560px);
    margin: 0 auto;
    padding: 6px;
    display: flex;
    gap: 2px;
    border-radius: 999px;
    background: var(--navy);
    box-shadow: 0 0 0 1px rgba(248, 243, 224, .14), 0 12px 32px rgba(10, 17, 40, .5);
  }
  .tabbar__tab {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--cream);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: clamp(9.5px, 2.75vw, 11.5px);
    font-stretch: 100%;
    letter-spacing: .04em;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease;
  }
  .tabbar__tab--home { flex: 0 0 52px; padding: 0; }
  .tabbar__tab[aria-current="true"] { background: var(--cream); color: var(--navy); }
  @media (hover: hover) {
    .tabbar__tab:not([aria-current="true"]):hover { background: var(--navy-2); }
  }
  .tabbar .home-ico > span { background: currentColor; }
  .tabbar .home-ico > span:last-child { opacity: .55; }

  .next-tile {
    min-height: 68px;
    padding: 12px 20px 12px 22px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .next-tile__txt { display: grid; gap: 5px; }
  .next-tile__kicker { font-size: 9.5px; color: var(--slate); }
  .next-tile__name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1;
    text-transform: uppercase;
  }
  .next-tile__arrow {
    flex: none;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Úvod */
  .hero-intro {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 22px;
    padding: 22px;
  }
  .hero-intro__title { font-size: clamp(24px, 5vw, 38px); }
  .notch, .notch-corner, .book-tab__corner { display: none; }

  .hero-teaser {
    border-radius: var(--radius);
    padding: 22px;
    grid-template-rows: none;
    gap: 22px 24px;
  }
  .book-tab {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
  }
  .book-link { min-height: 58px; padding: 10px 16px; }
  .book-link__name { font-size: 14px; }
  .hero-teaser__lead { font-size: clamp(18px, 3.4vw, 26px); }
  .stat__num { font-size: clamp(64px, 14vw, 110px); }

  /* Explicit width: an aspect-ratio item capped by max-height would otherwise narrow instead. */
  .hero-photo { width: 100%; aspect-ratio: 16 / 9; max-height: 50vh; }
  .hero-detail { grid-column: span 2; min-height: 200px; }
  .hero-list { grid-column: span 4; min-height: 200px; }
  .hero-list__items { font-size: 13px; }

  /* Problém, Řešení, Spolupráce: heading beside a tall photo, as in the desktop bento. */
  .sec-head, .sol-side {
    grid-column: 1 / 5;
    grid-row: 1;
    min-height: clamp(170px, 34vw, 280px);
    padding: 22px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
  }
  .sec-photo, .sol-photo { grid-column: 5 / 7; grid-row: 1; }
  .sec-title, .sol-side__title { font-size: clamp(22px, 7vw, 52px); }

  .panel--split .card { grid-column: span 2; grid-row: auto; min-height: 200px; }
  .card__title { font-size: 18px; }
  .card__text { font-size: 14px; }
  .sol-row { min-height: 150px; }

  /* Kontakt: heading, booking, then the portrait beside the contact card. */
  .contact-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 12px;
    padding: 22px;
  }
  .contact-head__title { font-size: clamp(30px, 7vw, 60px); padding-top: 28px; }
  .contact-book { grid-template-rows: none; gap: 18px; }
  .contact-book__title { font-size: clamp(24px, 4.4vw, 36px); }
  .contact-photo { grid-column: 1 / 3; grid-row: 3; }
  .contact-card { grid-column: 3 / 7; grid-row: 3; }
  .contact-card__links { gap: 0; }
  .contact-card__links a, .copy-email { display: inline-flex; align-items: center; min-height: 40px; }
  .toast { bottom: calc(94px + env(safe-area-inset-bottom, 0px)); } /* above the tab bar */
  .contact-card__legal a { min-height: 40px; }
}

/* Three cards across start at 640px; keep "Nespolupracující" on one line until they widen. */
@media (min-width: 640px) and (max-width: 699.98px) {
  .panel--split .card__title { font-size: 16.5px; }
}

/* Phones: one column of compact cards; the decorative detail photos drop out. */
@media (max-width: 639.98px) {
  .hero-detail, .hero-list__photo { display: none; }
  .hero-list { grid-column: 1 / -1; min-height: 0; }
  .hero-list__items { max-width: none; }
  .hero-teaser { grid-template-columns: minmax(0, 1fr) auto; gap: 18px 16px; }
  .hero-teaser__meta { align-self: end; }

  .panel--split .card { grid-column: 1 / -1; min-height: 0; }
  .card { padding: 20px; gap: 14px; }
  .card__body { gap: 6px; }

  .sol-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; gap: 8px; padding: 20px; }
  .sol-row .card__title, .sol-row .card__text { grid-column: 1; grid-row: auto; }
  .sol-row .tag { margin-bottom: 6px; }
}

/* Smallest phones (320px): fit "Spolupráce" in the heading tile and all five tabs in the bar. */
@media (max-width: 359.98px) {
  .sec-title, .sol-side__title { font-size: 20px; }
  .tabbar { gap: 0; }
  .tabbar__tab { padding: 0 4px; font-size: 9px; letter-spacing: .02em; }
  .tabbar__tab--home { flex-basis: 44px; }
}