@font-face {
 font-family:"Bebas Neue";
 src:url("/assets/fonts/bebas-neue-regular.woff2") format("woff2");
 font-style:normal;
 font-weight:400;
 font-display:swap;
}
.about-design { --about-gap:clamp(1.5rem,4vw,4rem); background:#000; max-width:100%; overflow:clip; }
.about-design h1 { margin:0; font-size:1rem; font-weight:400; }
.about-design p { line-height:1.6; }
.about-options { display:flex; max-width:1440px; margin:auto; align-items:center; flex-wrap:wrap; gap:.3rem; padding:.8rem var(--side); border-bottom:1px solid var(--line); font-size:.875rem; }
.about-options > span { margin-right:auto; color:#aaa; padding-right:1rem; }
.about-options a { display:flex; gap:.5rem; padding:.75rem 1rem; align-items:center; min-height:2.75rem; }
.about-options small { font-size:.8125rem; color:#aaa; }
.about-options a[aria-current] { color:var(--orange); box-shadow:inset 0 -1px var(--orange); }
.about-options a:hover { color:var(--orange); }
.about-topline,.film-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.875rem; }
.about-topline > span { color:#999; }
.about-meet { padding:clamp(2rem,4vw,4rem) var(--side) 2rem; max-width:1440px; margin:auto; }
.about-word { display:flex; justify-content:center; white-space:nowrap; font-size:clamp(3.7rem,12.8vw,12rem); font-weight:500; line-height:1.1; letter-spacing:-.065em; padding:.1em .07em .15em 0; }
.about-meet .about-word { margin:clamp(1rem,3.2vw,3rem) 0 1rem; }
.about-design-1 .about-meet { --name-travel:clamp(1.5rem,7vw,5rem); padding-top:clamp(1.5rem,3vw,3rem); padding-bottom:1rem; }
.about-design-1 .about-word { font-family:"Bebas Neue",sans-serif; font-size:clamp(3.5rem,14vw,13rem); font-weight:400; font-synthesis:none; line-height:1; letter-spacing:0; padding:.12em 0 .04em; }
.about-design-1 .about-meet .about-word { margin:clamp(1rem,2.1vw,2rem) 0 .75rem; }
.about-design-1 .about-meet .name-origins { max-width:58rem; margin-inline:auto; }
.about-design-1 .word-right { color:var(--orange); }
.word-left,.word-right,.word-period { display:inline-block; }
.word-period { color:var(--orange); }
.name-origins { display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1rem,3vw,3rem); align-items:center; }
.name-source { display:flex; align-items:baseline; gap:1rem; justify-content:center; padding:.7rem 0; }
.name-source > span { color:#bdbdbd; font-size:1rem; }
.name-source strong { font-size:1.4rem; font-weight:400; }
.name-plus { color:var(--orange); font-size:1.6rem; }
.identity-bottom { display:flex; gap:2rem; justify-content:space-between; align-items:end; margin-top:1.5rem; }
.identity-bottom p,.identity-explanation { max-width:52ch; margin:0; color:#aaa; font-size:.9375rem; }
.about-replay { display:inline-flex; flex:none; gap:.5rem; min-height:2.75rem; padding:.45rem 0; align-items:center; border:0; background:transparent; color:#c5c5c5; font-size:.875rem; cursor:pointer; }
.about-replay span { color:var(--orange); font-size:1.25rem; }
.about-replay:hover { color:#fff; }
.about-panorama { position:relative; margin:clamp(1rem,3vw,3rem) var(--side) 0; overflow:hidden; }
.about-panorama img { width:100%; height:auto; }
.about-panorama figcaption { position:absolute; bottom:1rem; right:1rem; padding:.3rem .55rem; color:#fff; background:#000; font-size:.875rem; }
.about-copy { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,6vw,6rem); max-width:1280px; padding:clamp(2rem,4vw,4rem) var(--side); margin:auto; }
.about-copy p { margin:0 0 1.3rem; font-family:inherit; font-size:1.0625rem; font-weight:400; line-height:1.75; color:#c8c8c8; }
.about-copy p:last-child { margin-bottom:0; }
.about-team { display:grid; grid-template-columns:1fr 1fr; max-width:1360px; gap:var(--about-gap); margin:auto; padding:0 var(--side) clamp(3rem,6vw,6rem); }
.about-team article { display:flex; gap:1.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.person-number { color:var(--orange); font-size:.875rem; }
.about-team h2 { font-size:clamp(1.2rem,2vw,1.8rem); font-weight:400; margin:0; }
.about-team p { color:#bbb; font-size:.9375rem; margin:.4rem 0 1rem; }
.about-team p span { color:#999; }
.about-team a,.person-phone { display:block; font-size:1rem; }
.about-team a:hover { color:var(--orange); }
.person-phone { color:#bbb; margin-top:.35rem; }
.about-design-1 .about-team { max-width:1280px; gap:clamp(2rem,6vw,6rem); }
.about-design-1 .about-team h2,.about-design-1 .about-team p,.about-design-1 .about-team a,.about-design-1 .person-phone { font-family:inherit; font-size:1.0625rem; font-weight:400; line-height:1.75; }

/* Dvojice: a tall image meets a narrow typographic column. */
.about-duo-hero { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--about-gap); padding:clamp(2rem,4vw,4rem) var(--side); max-width:1440px; margin:auto; }
.about-duo-hero figure { position:relative; margin:0; min-height:30rem; overflow:hidden; }
.about-duo-hero img { width:100%; height:100%; object-fit:cover; object-position:50% 48%; }
.about-duo-hero figcaption { position:absolute; bottom:1rem; left:1rem; background:#000; padding:.25rem .5rem; font-size:.875rem; }
.duo-heading { display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.duo-title { margin:1.5rem 0; font-size:clamp(2.1rem,5.1vw,5rem); letter-spacing:-.05em; line-height:1.05 !important; }
.duo-title span { color:var(--orange); }
.duo-caption { font-size:1rem; line-height:1.8; color:#bbb; }
.duo-name-story { max-width:1360px; padding:2rem var(--side) 3rem; margin:auto; }
.duo-name-story .name-origins { border-block:1px solid var(--line); padding:1rem 0; }
.duo-combined { display:flex; justify-content:space-between; align-items:center; gap:2rem; }
.duo-combined .about-word { font-size:clamp(3.3rem,8vw,8rem); padding-block:1.8rem; }
.duo-paragraphs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--about-gap); max-width:1360px; margin:auto; padding:1rem var(--side) 5rem; }
.duo-paragraphs article > span { color:var(--orange); font-size:.875rem; }
.duo-paragraphs p { color:#ccc; font-size:1rem; }

/* Filmový titulek: one full-width photographic frame and a quiet credits area. */
.about-title-film { position:relative; isolation:isolate; display:flex; min-height:clamp(29rem,53vw,48rem); flex-direction:column; justify-content:space-between; padding:2rem var(--side); }
.film-photo { position:absolute; inset:0; z-index:-2; }
.film-photo img { height:100%; width:100%; object-fit:cover; object-position:center 40%; }
.about-title-film::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.05) 28%,rgba(0,0,0,.22) 48%,#000 100%); }
.film-top { color:#fff; }
.film-title .about-word { justify-content:start; font-size:clamp(3.7rem,12vw,11.5rem); }
.film-title p { color:#ddd; margin:0 0 1rem; font-size:1rem; }
.film-name-story { max-width:1360px; padding:1rem var(--side) 3rem; margin:auto; }
.film-name-story .name-origins { border-bottom:1px solid var(--line); padding-bottom:1.8rem; }
.film-about-text { display:grid; grid-template-columns:1fr 1fr; gap:var(--about-gap); max-width:1360px; padding:1rem var(--side) 5rem; margin:auto; }
.film-about-text p { color:#bbb; margin:0 0 1.5rem; font-size:1.1rem; }
.film-about-text .about-lead { font-size:clamp(1.35rem,2.2vw,2rem); color:#fff; line-height:1.5; }

@media (prefers-reduced-motion:no-preference) {
  [data-name-scene].name-animate .word-left { animation:name-arrive-left 1100ms cubic-bezier(.18,.75,.2,1) both; }
  [data-name-scene].name-animate .word-right { animation:name-arrive-right 1100ms cubic-bezier(.18,.75,.2,1) both; }
  [data-name-scene].name-animate .word-period { animation:name-period 400ms 750ms both; }
  .about-design-1 [data-name-scene].name-pending .word-left { transform:translateX(calc(-1 * var(--name-travel))); opacity:0; }
  .about-design-1 [data-name-scene].name-pending .word-right { transform:translateX(var(--name-travel)); opacity:0; }
  .about-design-1 [data-name-scene].name-pending .word-right,
  .about-design-1 [data-name-scene].name-animate:not(.name-joined) .word-right { color:var(--white); transition:none; }
  .about-design-1 [data-name-scene].name-animate .word-left { animation:name-join-left 1100ms cubic-bezier(.22,.7,.24,1) both; }
  .about-design-1 [data-name-scene].name-animate .word-right { animation:name-join-right 1100ms cubic-bezier(.22,.7,.24,1) both; }
  .about-design-1 [data-name-scene].name-animate.name-joined .word-right { color:var(--orange); transition:color 1000ms cubic-bezier(.4,0,.2,1) 180ms; }
  .about-design-2 [data-name-scene].name-animate .word-left { animation-name:name-rise; }
  .about-design-2 [data-name-scene].name-animate .word-right { animation-name:name-drop; }
  .about-design-3 [data-name-scene].name-animate .about-word { animation:film-title-in 1000ms cubic-bezier(.2,.65,.2,1) both; }
  .about-design-3 [data-name-scene].name-animate .word-left,.about-design-3 [data-name-scene].name-animate .word-right { animation:none; }
}
@keyframes name-arrive-left { from { transform:translateX(-18vw); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes name-arrive-right { from { transform:translateX(18vw); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes name-period { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
@keyframes name-join-left { from { transform:translateX(calc(-1 * var(--name-travel))); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes name-join-right { from { transform:translateX(var(--name-travel)); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes name-rise { from { transform:translateY(45%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes name-drop { from { transform:translateY(-45%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes film-title-in { from { clip-path:inset(100% 0 0); transform:translateY(.12em); } to { clip-path:inset(0); transform:none; } }
@media(max-width:900px) {
 .name-source { flex-direction:column; gap:.2rem; }
 .name-source:last-child { align-items:end; text-align:right; }
 .about-copy { column-gap:2rem; }
 .about-duo-hero { grid-template-columns:1fr 1fr; }
 .about-duo-hero figure { min-height:25rem; }
 .duo-paragraphs { grid-template-columns:1fr; gap:1rem; }
 .duo-paragraphs article { display:grid; grid-template-columns:2rem 1fr; gap:1rem; }
 .duo-paragraphs article > span { margin-top:1.1rem; }
}
@media(max-width:600px) {
 .about-options { gap:0; }
 .about-options > span { width:100%; padding:.3rem 0; }
 .about-options a { padding:.65rem .6rem; font-size:.875rem; }
 .about-options a:first-of-type { padding-left:0; }
 .about-options small { display:none; }
 .about-word,.film-title .about-word { font-size:12.1vw; }
 .about-topline > span { display:none; }
 .about-meet .about-word { margin:2rem 0 1rem; }
 .name-source > span { font-size:.875rem; }
 .name-source strong { font-size:1.2rem; }
 .identity-bottom { display:block; margin-top:1rem; }
 .about-replay { margin-top:.75rem; }
 .about-panorama { margin-inline:0; }
 .about-panorama figcaption { position:static; padding:.5rem var(--side); }
 .about-team,.film-about-text { grid-template-columns:1fr; }
 .about-copy { grid-template-columns:1fr; gap:1.3rem; }
 .about-team { gap:2rem; }
 .about-duo-hero { display:flex; flex-direction:column-reverse; padding-top:1.5rem; gap:1.5rem; }
 .about-duo-hero figure { min-height:0; height:18rem; }
 .duo-title { font-size:clamp(2.4rem,10vw,3.8rem); }
 .duo-title br:first-of-type { display:none; }
 .duo-title { word-spacing:.1em; }
 .duo-caption { display:none; }
 .duo-combined { flex-wrap:wrap; gap:0; }
 .duo-combined .about-word { font-size:12vw; padding-block:1.2rem .3rem; }
 .duo-combined .about-replay { width:100%; margin:0 0 .75rem; }
 .about-title-film { min-height:0; padding:0; }
 .about-title-film::after { display:none; }
 .film-top { order:-1; padding:1.5rem var(--side); background:#000; }
 .film-photo { position:relative; inset:auto; z-index:0; aspect-ratio:1468 / 630; }
 .film-title { padding:1.5rem var(--side) .5rem; background:#000; }
 .film-top > span { max-width:17ch; text-align:right; font-size:.875rem; }
 .film-title p { font-size:.9375rem; }
 .film-photo img { object-position:center; }
 .film-about-text { gap:.5rem; }
}