/* BLOK. — UI 1.9.13 | Jednotný design systém, sdílené komponenty a responzivita. */

:root {
  --paper: #F6F2E9;
  --lime: #C7F23A;
  --pink: #FF73C5;
  --violet: #7650E8;
  --ink: #171717;
  --display: "Archivo Black",Impact,"Arial Black",sans-serif;
  --body: "Space Grotesk",Arial,sans-serif;
  --max: 1440px;
  --gutter: 64px;
  --section: 112px;
  --border: 3px;
  --frame-border: 3px;
  --shadow: 5px 5px 0 var(--ink);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

a:focus-visible,button:focus-visible {
  outline: 4px solid var(--violet);
  outline-offset: 5px;
}

::selection {
  background: var(--pink);
  color: var(--ink);
}

.container {
  width: min(calc(100% - var(--gutter)*2),var(--max));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  background: var(--lime);
  padding: 12px;
  z-index: 99;
}

.skip-link:focus {
  top: 12px;
}

.concept-strip {
  min-height: 32px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 6px var(--gutter);
  font-size: 10px;
  letter-spacing: .13em;
  font-weight: 700;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  transition: transform .28s ease;
  will-change: transform;
}

.site-header.is-hidden { transform: translateY(-100%); }

.header-inner {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.logo {
  font: normal 39px/1 var(--display);
  letter-spacing: -.08em;
}

.logo span {
  display: inline-block;
  margin-left: .11em;
  letter-spacing: 0;
}

.logo span,.period {
  color: var(--violet);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 42px;
  font-size: 14px;
  font-weight: 700;
}

.main-nav>a:not(.nav-contact) {
  position: relative;
}

.main-nav>a:not(.nav-contact):after {
  content: "";
  height: 2px;
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 100%;
  background: var(--ink);
  transition: right .2s;
}

.main-nav>a:hover:after {
  right: 0;
}

.nav-contact {
  border: 2px solid var(--ink);
  background: var(--lime);
  padding: 12px 16px;
  display: flex;
  gap: 28px;
  align-items: center;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .18s,box-shadow .18s;
}

.nav-contact:hover,.btn:hover {
  transform: translate(3px,3px);
  box-shadow: 0 0 0 var(--ink);
}

.menu-toggle {
  display: none;
}

.hero {
  padding: 72px 0 84px;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
  gap: 48px;
  align-items: stretch;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: .13em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 30px;
}

.eyebrow-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  margin-right: 8px;
}

.hero h1,h2,h3,p {
  margin-top: 0;
}

.hero h1 {
  font: normal clamp(48px,5.65vw,100px)/.99 var(--display);
  letter-spacing: -.065em;
  margin: 0 0 30px;
  overflow-wrap: anywhere;
}

.hero-outline {
  display: block;
}

.line-break-mobile {
  display: none;
}

.hero-lead {
  font-size: clamp(17px,1.5vw,21px);
  line-height: 1.55;
  max-width: 500px;
  margin: 0 0 34px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: 17px 20px;
  border: var(--border) solid var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .025em;
  box-shadow: var(--shadow);
  transition: transform .18s,box-shadow .18s;
}

.btn span:last-child {
  font-size: 23px;
  line-height: .8;
}

.btn-primary {
  background: var(--lime);
}

.scroll-next {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color .18s;
}

.scroll-next:hover {
  border-color: var(--violet);
  color: var(--violet);
}

.hero-bottom {
  margin-top: auto;
  padding-top: 55px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
}

.hero-art {
  aspect-ratio: 1;
  min-height: 0;
  background: var(--violet);
  border: var(--border) solid var(--ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-art-top,.hero-art-bottom {
  position: absolute;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  z-index: 5;
}

.hero-art-top {
  top: 24px;
}

.hero-art-bottom {
  bottom: 24px;
}

.art-ring {
  position: absolute;
  width: 84%;
  aspect-ratio: 1;
  border: 42px solid var(--ink);
  border-radius: 50%;
  top: 14%;
  left: 19%;
  transform: rotate(-22deg);
}

.art-disc {
  position: absolute;
  width: 54%;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  background: var(--pink);
  border-radius: 50%;
  top: 22%;
  left: 25%;
}

.art-star {
  position: absolute;
  top: 27%;
  left: -13%;
  font: normal clamp(230px,25vw,410px)/1 var(--display);
  color: var(--lime);
  -webkit-text-stroke: 3px var(--ink);
  transform: rotate(-18deg);
  z-index: 2;
}

.art-label {
  position: absolute;
  bottom: 15%;
  right: 5%;
  z-index: 3;
  color: var(--paper);
  font: normal clamp(38px,4.4vw,74px)/.9 var(--display);
  letter-spacing: -.06em;
  transform: rotate(-8deg);
  text-shadow: 4px 4px 0 var(--ink);
}

.art-label span {
  color: var(--lime);
}

.ticker {
  background: var(--lime);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: flex;
  width: max-content;
  padding: 16px 0;
  font: normal 23px/1 var(--display);
  letter-spacing: -.04em;
  animation: marquee 38s linear infinite;
}

.ticker-group {
  display: flex;
  flex: none;
  white-space: nowrap;
}

.ticker-copy {
  display: block;
  flex: none;
  white-space: nowrap;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.section {
  padding: var(--section) 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 36px;
  margin-bottom: 48px;
}

.section-head .eyebrow {
  margin-bottom: 16px;
}

h2 {
  font: normal clamp(40px,5vw,76px)/1.02 var(--display);
  letter-spacing: -.055em;
  margin: 0;
}

.section-intro {
  max-width: 280px;
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 5px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 28px;
}

.project-card {
  min-width: 0;
}

.project-art {
  aspect-ratio: 4/4.65;
  border: var(--border) solid var(--ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .22s ease, filter .22s ease;
}
.project-card-link:is(:hover,:focus-visible) .project-art {
  box-shadow: 5px 5px 0 var(--violet);
  filter: saturate(1.06);
}

.art-one {
  background: var(--lime);
}

.art-two {
  background: var(--pink);
}

.art-three {
  background: var(--violet);
}

.project-corner,.project-art-footer {
  position: absolute;
  z-index: 3;
  left: 17px;
  right: 17px;
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 700;
}

.project-corner {
  top: 18px;
}

.project-art-footer {
  bottom: 18px;
}

.art-three .project-corner,.art-three .project-art-footer {
  color: #fff;
}

.project-form {
  position: absolute;
  inset: 15% 8%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-one {
  gap: 0;
  transform: rotate(-12deg);
}

.form-one span {
  font: normal clamp(36px,5.6vw,92px)/1 var(--display);
  letter-spacing: -.12em;
  color: var(--ink);
}

.form-one:before {
  content: "";
  position: absolute;
  width: 76%;
  aspect-ratio: 1;
  border: 30px solid var(--pink);
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0 0 0 3px var(--ink);
}

.form-two {
  flex-direction: column;
}

.burst {
  font: normal clamp(180px,23vw,350px)/.8 var(--display);
  color: var(--ink);
  transform: rotate(18deg);
}

.form-two strong {
  position: absolute;
  font: normal clamp(43px,6vw,100px)/1 var(--display);
  color: var(--lime);
  transform: rotate(-12deg);
}

.form-three {
  flex-direction: column;
  gap: 20px;
}

.tile-grid {
  width: 66%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  transform: rotate(-14deg);
}

.tile-grid i {
  display: block;
  aspect-ratio: 1;
  background: var(--lime);
  border: 2px solid var(--ink);
}

.tile-grid i:nth-child(even) {
  background: var(--ink);
}

.form-three strong {
  white-space: nowrap;
  font: normal clamp(30px,4.3vw,70px)/1 var(--display);
  color: var(--paper);
  letter-spacing: -.06em;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  padding-top: 18px;
}

.project-meta h3 {
  font: normal 27px/1.1 var(--display);
  letter-spacing: -.04em;
  margin: 0 0 5px;
}

.project-meta p {
  font-size: 14px;
  color: #505050;
  margin: 0;
}

.project-arrow {
  font-size: 30px;
  line-height: 1;
}

.project-note {
  font-size: 12px;
  color: #595959;
  margin: 28px 0 0;
}

.about {
  background: var(--lime);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 70px;
  align-items: center;
}

.about h2 {
  font-size: clamp(42px,5vw,78px);
}

.highlight-pink {
  background: var(--pink);
  box-shadow: 8px 0 0 var(--pink);
  position: relative;
  top: .09em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.about-side {
  max-width: 430px;
}

.asterisk {
  font: normal 95px/1 var(--display);
  color: var(--violet);
  -webkit-text-stroke: 2px var(--ink);
  margin-bottom: 10px;
}

.about-side p {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.text-link {
  display: inline-flex;
  gap: 30px;
  align-items: center;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 7px;
  transition: color .2s ease, border-color .2s ease;
  font-weight: 700;
  font-size: 13px;
  margin-top: 15px;
}

.text-link span {
  font-size: 24px;
}

.services-head {
  margin-bottom: 60px;
}

.service-list {
  border-top: 3px solid var(--ink);
}

.service-row {
  display: grid;
  grid-template-columns: 60px minmax(0,1fr) 190px 36px;
  align-items: center;
  gap: 20px;
  padding: 33px 12px;
  border-bottom: 3px solid var(--ink);
  transition: background .2s,padding .2s;
}

.service-row:hover {
  background: var(--pink);
  padding-left: 24px;
}

.service-index {
  font-size: 13px;
  font-weight: 700;
}

.service-row h3 {
  font: normal clamp(22px,3vw,43px)/1.1 var(--display);
  letter-spacing: -.04em;
  margin: 0;
}

.service-tag {
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 700;
}

.service-icon {
  font-size: 34px;
}

.contact {
  background: var(--pink);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 35px;
  align-items: center;
}

.contact h2 {
  font-size: clamp(45px,5.1vw,82px);
  margin-bottom: 26px;
}

.contact h2 span {
  color: var(--ink);
}

.contact p:not(.eyebrow) {
  font-size: 18px;
  max-width: 460px;
  line-height: 1.55;
  margin-bottom: 32px;
}

.btn-dark {
  background: var(--ink);
  color: white;
  box-shadow: 5px 5px 0 var(--lime);
}

.contact small {
  display: block;
  font-size: 11px;
  margin-top: 22px;
  max-width: 350px;
}

.contact-stamp {
  width: min(100%,400px);
  aspect-ratio: 1;
  background: var(--lime);
  border: 4px solid var(--ink);
  transform: rotate(10deg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px;
  position: relative;
  box-shadow: 14px 14px 0 var(--ink);
}

.contact-stamp>span {
  font: normal clamp(35px,4.8vw,70px)/.98 var(--display);
  letter-spacing: -.05em;
}

.stamp-arrow {
  position: absolute;
  right: 22px;
  bottom: 12px;
  font-size: 75px;
}

.footer {
  background: var(--ink);
  color: var(--paper);
}

.footer-main {
  padding: 64px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.footer-logo {
  font-size: 64px;
}

.footer-logo span {
  color: var(--lime);
}

.footer-main>div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
}

.back-top {
  font-size: 12px;
  font-weight: 700;
  border-bottom: 2px solid var(--paper);
  padding-bottom: 8px;
  transition: color .2s ease, border-color .2s ease;
}

.footer-bottom {
  border-top: 1px solid #666;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 10px;
  letter-spacing: .07em;
}

@media(max-width:1100px) {
  .ticker-track {
    animation-duration: 30s;
  }

  :root {
    --gutter: 36px;
    --section: 80px;
  }

  .hero-layout {
    gap: 28px;
  }

  .hero-art {
    min-height: 0;
  }

  .hero h1 {
    font-size: clamp(47px,5.8vw,75px);
  }

  .project-grid {
    gap: 20px;
  }

  .form-one span {
    font-size: 6vw;
  }

  .about-grid {
    gap: 40px;
  }

  .service-row {
    grid-template-columns: 40px minmax(0,1fr) 140px 30px;
  }

  .contact-stamp {
    padding: 26px;
  }
}

@media(max-width:760px) {
  html { scroll-padding-top: 90px; }
  .ticker-track {
    animation-duration: 24s;
  }

  :root {
    --gutter: 24px;
    --section: 72px;
  }

  .concept-strip span:nth-child(2) {
    display: none;
  }

  .header-inner {
    height: 76px;
  }

  .logo {
    font-size: 34px;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 48px;
    height: 44px;
    border: 2px solid var(--ink);
    background: var(--lime);
    padding: 10px;
    cursor: pointer;
    z-index: 12;
  }

  .menu-toggle span {
    height: 3px;
    background: var(--ink);
    width: 100%;
    transition: transform .2s,opacity .2s;
  }

  .menu-toggle[aria-expanded=true] span:first-child {
    transform: translateY(9px) rotate(45deg);
  }

  .menu-toggle[aria-expanded=true] span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded=true] span:last-child {
    transform: translateY(-9px) rotate(-45deg);
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 3px solid var(--ink);
    padding: 24px var(--gutter) 30px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 10px 0 rgba(23,23,23,.08);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav a {
    padding: 16px 0;
    font-size: 19px;
    border-bottom: 1px solid var(--ink);
  }

  .main-nav .nav-contact {
    margin-top: 18px;
    padding: 15px 17px;
    font-size: 16px;
  }

  .hero {
    padding: 48px 0 62px;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero h1 {
    font-size: clamp(43px,9.4vw,76px);
    max-width: 680px;
  }

  .hero-lead {
    font-size: 17px;
  }

  .hero-bottom {
    padding-top: 45px;
  }

  .hero-art {
    min-height: 0;
    max-height: 600px;
    width: 100%;
  }

  .art-label {
    font-size: clamp(58px,12vw,90px);
  }

  .art-star {
    font-size: clamp(260px,56vw,430px);
  }

  .section-head {
    align-items: start;
    flex-direction: column;
    gap: 18px;
  }

  .section-intro {
    max-width: 540px;
  }

  .project-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px;
  }

  .project-card:last-child {
    grid-column: 1/-1;
    max-width: calc(50% - 12px);
  }

  .form-one span {
    font-size: 8vw;
  }

  .form-two strong {
    font-size: 8vw;
  }

  .form-three strong {
  white-space: nowrap;
    font-size: 6vw;
  }

  .about-grid,.contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-side {
    max-width: 560px;
  }

  .contact-stamp {
    width: 270px;
    margin: 0 auto 15px;
  }

  .contact-stamp>span {
    font-size: 45px;
  }

  .service-row {
    grid-template-columns: 32px 1fr 30px;
    gap: 12px;
    padding: 26px 0;
  }

  .service-tag {
    display: none;
  }

  .service-row:hover {
    padding-left: 10px;
  }

  .footer-main {
    align-items: start;
    flex-wrap: wrap;
  }

  .footer-bottom {
    flex-wrap: wrap;
  }
}

@media(max-width:520px) {
  :root {
    --gutter: 22px;
    --section: 64px;
  }

  .concept-strip {
    padding-inline: var(--gutter);
    font-size: 9px;
  }

  .hero h1 {
    font-size: clamp(40px,10.4vw,56px);
  }

  .hero-outline {
    letter-spacing: -.075em;
  }

  .hero-bottom {
    font-size: 9px;
  }

  .hero-art {
    min-height: 0;
  }

  .art-ring {
    border-width: 28px;
  }

  .art-label {
    font-size: 58px;
  }

  .art-star {
    left: -18%;
    top: 30%;
    font-size: 270px;
  }

  .hero-art-top,.hero-art-bottom {
    left: 15px;
    right: 15px;
    font-size: 9px;
  }

  .ticker-track {
    font-size: 18px;
    padding: 13px 0;
  }

  h2,.about h2,.contact h2 {
    font-size: clamp(36px,9.2vw,52px);
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .project-card:last-child {
    grid-column: auto;
    max-width: none;
  }

  .project-art {
    aspect-ratio: 4/4.2;
  }

  .form-one span {
    font-size: 16vw;
  }

  .form-two strong {
    font-size: 16vw;
  }

  .burst {
    font-size: 75vw;
  }

  .form-three strong {
  white-space: nowrap;
    font-size: 13vw;
  }

  .project-meta h3 {
    font-size: 25px;
  }

  .about-side p {
    font-size: 16px;
  }

  .service-row h3 {
    font-size: clamp(20px,5.5vw,28px);
  }

  .contact-stamp {
    width: 230px;
  }

  .contact-stamp>span {
    font-size: 38px;
  }

  .footer-main {
    padding: 48px 0;
  }

  .footer-logo {
    font-size: 54px;
  }

  .footer-bottom {
    font-size: 9px;
    line-height: 1.5;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *,*:before,*:after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* === STRÁNKA PROJEKTY: vlastní komponenty === */


.portfolio-hero { padding: clamp(78px, 9vw, 144px) 0 74px; }
.portfolio-hero h1 { font: normal clamp(56px, 8.7vw, 132px)/.99 var(--display); letter-spacing: -.065em; margin: 30px 0 48px; max-width: 1250px; overflow-wrap: anywhere; }
.portfolio-hero h1 > span { color: var(--violet); }
.portfolio-hero .period { color: var(--ink); }
.portfolio-hero-bottom { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.portfolio-hero-bottom p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; max-width: 610px; margin: 0; }
.portfolio-scroll { font-size: 12px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; display: inline-flex; padding-bottom: 5px; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; }
.portfolio-scroll:hover { color: var(--violet); border-bottom-color: var(--violet); }
.portfolio-scroll:focus-visible { outline: 3px solid var(--violet); outline-offset: 5px; }
.portfolio-work { scroll-margin-top: 108px; border-top: var(--border) solid var(--ink); padding: 36px 0 var(--section); }
.portfolio-work-top { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 32px; font-size: 13px; font-weight: 700; letter-spacing: .065em; }
.portfolio-work-top strong { color: var(--violet); }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 32px; row-gap: 80px; }
.portfolio-card { min-width: 0; }
.portfolio-card .project-art { aspect-ratio: 4/3; }
.portfolio-card .project-form { inset: 12% 10%; }
.portfolio-card .form-one span { font-size: clamp(42px, 5.9vw, 98px); }
.portfolio-card .burst { font-size: clamp(170px, 24vw, 350px); }
.portfolio-card .form-two strong { font-size: clamp(50px, 7vw, 112px); }
.portfolio-card .form-three strong { font-size: clamp(42px, 5vw, 88px); }
.portfolio-card-wide { grid-column: 1/-1; }
.portfolio-card-wide .project-art { aspect-ratio: 2.35/1; }
.portfolio-card-wide .project-form { flex-direction: row; gap: clamp(30px, 8vw, 130px); }
.portfolio-card-wide .tile-grid { width: min(26%, 260px); flex: 0 0 min(26%, 260px); }
.portfolio-card-wide .form-three strong { font-size: clamp(65px, 11vw, 180px); }
.portfolio-meta { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; }
.portfolio-index { display: block; font-size: 12px; letter-spacing: .1em; font-weight: 700; margin-bottom: 8px; }
.portfolio-meta h2 { font: normal clamp(30px, 3.6vw, 52px)/1.06 var(--display); letter-spacing: -.05em; margin: 0 0 10px; }
.portfolio-meta p { margin: 0; font-size: 15px; line-height: 1.5; }
.portfolio-decor-arrow { font-size: 38px; line-height: 1; }
.portfolio-disclaimer { margin: 62px 0 0; max-width: 690px; font-size: 13px; line-height: 1.6; color: #505050; }
.portfolio-cta { background: var(--pink); border-top: var(--border) solid var(--ink); padding: var(--section) 0; overflow: hidden; }
.portfolio-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.portfolio-cta h2 { font: normal clamp(43px, 6.2vw, 90px)/1.02 var(--display); letter-spacing: -.06em; margin: 24px 0; }
.portfolio-cta h2 span { color: var(--ink); }
.portfolio-cta p:not(.eyebrow) { font-size: 19px; margin: 0 0 30px; }
.portfolio-cta-mark { font: normal clamp(170px, 25vw, 350px)/1 var(--display); transform: rotate(-12deg); flex-shrink: 0; }
@media (max-width: 1100px) {
  .gallery-puls-b .puls-type { font-size: clamp(70px, 8.5vw, 115px); }
  .portfolio-grid { gap: 24px; row-gap: 60px; }
  .portfolio-cta-mark { font-size: 190px; }
}
@media (max-width: 760px) {
  .portfolio-hero { padding: 64px 0 56px; }
  .portfolio-hero h1 { font-size: clamp(41px, 9vw, 70px); margin: 24px 0 34px; }
  .portfolio-hero-bottom { align-items: start; flex-direction: column; gap: 26px; }
  .portfolio-work { padding-top: 26px; }
  .portfolio-work-top { font-size: 10px; margin-bottom: 24px; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 44px; }
  .portfolio-card-wide { grid-column: auto; }
  .portfolio-card .project-art, .portfolio-card-wide .project-art { aspect-ratio: 4/3; }
  .portfolio-card-wide .project-form { flex-direction: column; gap: 12px; }
  .portfolio-card-wide .tile-grid { width: 52%; flex: initial; }
  .portfolio-card-wide .form-three strong { font-size: clamp(40px, 9vw, 76px); }
  .portfolio-card .form-one { inset: 15% 12% 22%; transform: rotate(-8deg); }
  .portfolio-card .form-one:before { width: 58%; border-width: clamp(12px, 4vw, 22px); }
  .portfolio-card .form-one span { font-size: clamp(29px, 8vw, 56px); }
  .portfolio-card .project-corner, .portfolio-card .project-art-footer { left: 14px; right: 14px; font-size: 9px; }
  .portfolio-card .project-art-footer { bottom: 12px; }
  .portfolio-card .burst { font-size: clamp(160px, 45vw, 300px); }
  .portfolio-card .form-two strong { font-size: clamp(52px, 13vw, 92px); }
  .portfolio-meta h2 { font-size: 32px; }
  .portfolio-meta p { font-size: 13px; }
  .portfolio-disclaimer { margin-top: 42px; }
  .portfolio-cta-mark { display: none; }
  .portfolio-cta h2 { font-size: clamp(37px, 9vw, 65px); }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-card .project-art { transition: none; }
}


/* === DETAILY PROJEKTŮ / BLOK. 1.5 === */
.project-card-link { display: block; height: 100%; }
.project-card-link:focus-visible { outline: 4px solid var(--violet); outline-offset: 6px; }


.detail-intro { padding: clamp(56px,7vw,105px) 0 clamp(58px,6vw,90px); }
.detail-back { display: inline-flex; font-size: 13px; font-weight: 700; letter-spacing: .06em; padding: 9px 0; border-bottom: 2px solid currentColor; }
.detail-back:hover { color: var(--violet); }
.detail-title-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: clamp(40px,5vw,80px); }
.detail-title-row h1 { font: normal clamp(76px,15vw,230px)/.92 var(--display); letter-spacing: -.08em; margin: 20px 0 0; }
.detail-title-row h1 .period { color: var(--violet); margin-left: .13em; }
/* Jediná komponenta tečky pro názvy projektů napříč webem. */
.project-dot { display: inline-block; width: .15em; height: .15em; margin-left: .16em; vertical-align: .015em; background: var(--violet); }
.project-dot-light { background: var(--paper); }
.detail-year { font-size: 14px; font-weight: 700; padding-bottom: 12px; white-space: nowrap; }
.detail-lead { max-width: 700px; margin: 38px 0 0; font-size: clamp(20px,2.2vw,29px); line-height: 1.4; }
.detail-cover { min-height: 500px; height: min(66vw,780px); border-top: var(--border) solid var(--ink); border-bottom: var(--border) solid var(--ink); position: relative; display: grid; place-items: center; overflow: hidden; }
.detail-cover-inner { width: min(80%, 940px); height: 80%; position: relative; display: grid; place-items: center; }
.detail-cover-label { position: absolute; bottom: 25px; left: max(var(--gutter),calc((100vw - var(--max))/2)); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.detail-panel-orbit { background: var(--lime); }
.detail-panel-puls { background: var(--pink); }
.detail-panel-modul { background: var(--violet); }
.detail-panel-modul .detail-cover-label { color: white; }
.detail-story { padding: var(--section) 0; }
.detail-story-grid { display: grid; grid-template-columns: minmax(160px,1fr) minmax(0,2fr); gap: clamp(35px,6vw,110px); }
.detail-kicker { margin: 10px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.detail-story h2 { font: normal clamp(39px,5vw,75px)/1.07 var(--display); letter-spacing: -.06em; margin: 0 0 30px; max-width: 920px; }
.detail-story-grid > div > p { font-size: clamp(17px,1.5vw,21px); line-height: 1.65; max-width: 750px; margin: 0; }
.detail-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 55px 0 0; padding: 25px 0 0; border-top: 2px solid var(--ink); }
.detail-facts dt { font-size: 11px; letter-spacing: .08em; font-weight: 700; margin-bottom: 10px; }
.detail-facts dd { font-size: 16px; font-weight: 700; margin: 0; }
.detail-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.detail-gallery-item { min-height: 400px; aspect-ratio: 1.08; display: grid; place-items: center; position: relative; overflow: hidden; border-block: var(--border) solid var(--ink); }
.detail-gallery-item + .detail-gallery-item { border-left: var(--border) solid var(--ink); }
.gallery-orbit-a { background: var(--ink); }
.gallery-orbit-b { background: var(--violet); }
.gallery-puls-a { background: var(--violet); }
.gallery-puls-b { background: var(--lime); }
.gallery-modul-a { background: var(--lime); }
.gallery-modul-b { background: var(--ink); }
.detail-system { padding-block: clamp(80px,10vw,160px); }
.detail-banner { height: min(45vw,550px); min-height: 300px; display: grid; place-items: center; overflow: hidden; border-block: var(--border) solid var(--ink); }
.detail-banner-orbit { background: var(--pink); }
.detail-banner-puls { background: var(--pink); }
.detail-banner-modul { background: var(--violet); }
.detail-banner-content { position: relative; width: min(65%,850px); height: 80%; display: grid; place-items: center; }
.detail-next { display: block; padding: clamp(70px,9vw,130px) 0; background: var(--paper); transition: background .2s ease; }
.detail-next:hover { background: var(--lime); }
.detail-next .container > span { font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.detail-next-title { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 22px; }
.detail-next-title strong { font: normal clamp(70px,14vw,200px)/1 var(--display); letter-spacing: -.07em; }
.detail-next-title > span { font-size: clamp(65px,10vw,140px); line-height: 1; }
.detail-next p { margin: 20px 0 0; font-size: 15px; }
/* ORBIT: concentric geometry */
.orbit-rings { width: min(58vw,540px); aspect-ratio: 1; position: relative; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.orbit-rings i { position: absolute; border-radius: 50%; }
.orbit-rings i:nth-child(1) { inset: 18%; background: var(--lime); }
.orbit-rings i:nth-child(2) { inset: 34%; background: var(--ink); }
.orbit-rings i:nth-child(3) { inset: 46%; background: var(--lime); }
/* Typografie ORBIT je v samostatném řádku mimo kruhový motiv. */
.orbit-layout { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 2.5vw, 36px); }
.orbit-layout .orbit-rings { width: min(42vw, 430px); max-height: 65%; flex: 0 1 auto; }
.artword { position: relative; z-index: 1; flex: 0 0 auto; font: normal clamp(28px, 4vw, 60px)/1 var(--display); letter-spacing: -.05em; white-space: nowrap; }
.detail-banner .orbit-layout .orbit-rings { width: min(24vw, 240px); }
.detail-banner .artword { font-size: clamp(25px, 3.5vw, 50px); }
.rings-alt { width: 60%; background: var(--lime); }
.rings-alt i:nth-child(1) { background: var(--ink); }
.rings-alt i:nth-child(2) { background: var(--lime); }
.rings-alt i:nth-child(3) { background: var(--ink); }
/* ORBIT: jednoznačný symbol nekonečna, bez kolidujících kruhových segmentů. */
.orbit-infinity { display: block; width: min(82%, 600px); height: auto; overflow: visible; }
.orbit-infinity .infinity-base { fill: none; stroke: var(--paper); stroke-width: 27; }
.orbit-infinity .infinity-accent { fill: none; stroke: var(--lime); stroke-width: 27; }
/* PULS: explosive typography */
.puls-star { position: absolute; font: normal clamp(250px,48vw,750px)/1 var(--display); color: var(--ink); transform: rotate(-18deg); }
.puls-word { white-space: nowrap; position: relative; z-index: 1; color: var(--paper); font: normal clamp(85px,16vw,240px)/1 var(--display); letter-spacing: -.08em; transform: rotate(-8deg); }
/* Dvě hvězdice tvoří jednu škálovatelnou SVG kompozici bez ořezu na mobilu. */
.puls-stars-art { width: min(84%, 540px); height: auto; display: block; overflow: visible; }
.puls-stars-art .star-main { stroke: var(--pink); stroke-width: 12; }
.puls-stars-art .star-accent { stroke: var(--ink); stroke-width: 6; }
.puls-type { color: var(--ink); font: normal clamp(43px,7vw,110px)/1.05 var(--display); letter-spacing: -.06em; transform: rotate(-8deg); text-align: left; max-width: 86%; }
/* MODUL: modular tiles */
.modul-grid { width: min(42vw,440px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; transform: rotate(-10deg); }
.modul-grid i { background: var(--lime); }
.modul-grid i:nth-child(3n) { background: var(--ink); }
.modul-grid i:nth-child(5n) { background: var(--pink); }
.modul-word { white-space: nowrap; position: absolute; color: white; font: normal clamp(60px,11vw,165px)/1 var(--display); letter-spacing: -.08em; text-shadow: 5px 5px 0 var(--ink); }
.modul-grid.alternate { width: 55%; transform: rotate(12deg); }
.modul-grid.alternate i:nth-child(3n) { background: var(--violet); }
.modul-bars { display: flex; align-items: stretch; gap: 10px; width: 70%; height: 60%; transform: rotate(-15deg); }
.modul-bars i { flex: 1; background: var(--lime); }
.modul-bars i:nth-child(even) { transform: translateY(25%); background: var(--violet); }
@media (max-width: 760px) {
  .detail-intro { padding: 42px 0 55px; }
  .detail-title-row { margin-top: 48px; }
  .detail-title-row h1 { font-size: clamp(58px,14vw,105px); }
  .detail-lead { margin-top: 25px; }
  .detail-year { padding-bottom: 4px; }
  .detail-cover { min-height: 340px; height: 90vw; max-height: 520px; }
  .detail-cover-label { left: var(--gutter); bottom: 16px; font-size: 10px; }
  .detail-story-grid { grid-template-columns: 1fr; gap: 24px; }
  .detail-story h2 { font-size: clamp(35px,9vw,55px); }
  .detail-facts { grid-template-columns:1fr; gap:0; margin-top:36px; padding-top:10px; }
  .detail-facts > div { display:grid; grid-template-columns:minmax(95px,38%) minmax(0,1fr); gap:16px; align-items:baseline; padding:18px 0; border-bottom:1px solid #b9b5ad; }
  .detail-facts > div:last-child { border-bottom:0; }
  .detail-facts dt { margin:0; }
  .detail-facts dd { font-size:15px; line-height:1.45; overflow-wrap:anywhere; }
  .detail-gallery { grid-template-columns: 1fr; }
  .detail-gallery-item { min-height: 330px; aspect-ratio: 1.15; }
  .detail-gallery-item + .detail-gallery-item { border-left: 0; border-top: 0; }
  .detail-banner { height: 70vw; }
  .detail-next-title strong { font-size: clamp(65px,14vw,100px); }
  .orbit-rings { width: 72vw; }
  .orbit-layout .orbit-rings { width: min(56vw, 230px); max-height: 62%; }
  .detail-banner .orbit-layout .orbit-rings { width: min(35vw, 150px); }
  .artword { font-size: clamp(22px, 6vw, 34px); }
  .detail-banner .artword { font-size: clamp(20px, 5vw, 30px); }
  .orbit-infinity { width: min(86%, 440px); }
  .puls-stars-art { width: min(88%, 390px); }
  .gallery-puls-b .puls-type { font-size: clamp(65px, 12vw, 92px); }
  .puls-star { font-size: 100vw; }
  .puls-word { font-size: 17vw; }
  .modul-grid { width: 65vw; }
  .modul-word { font-size: 15vw; }
}
@media (prefers-reduced-motion: reduce) { .detail-next, .site-header { transition: none; } }

/* O STUDIU — samostatná stránka, stejný design systém BLOK. */

/* Barevný stav aktuální stránky: jeden společný systém pro celý web. */
.main-nav a:is([aria-current="page"],[aria-current="location"]) {font-weight:700}
.main-nav a[href="projekty.html"]:is([aria-current="page"],[aria-current="location"]) {background:var(--pink);padding:11px 14px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.main-nav a[href="o-studiu.html"]:is([aria-current="page"],[aria-current="location"])::after {right:0;height:4px;background:var(--violet);bottom:-9px}
/* Služby: limetková diagonála za textem, bez obdélníku. */
.main-nav a[href$="#sluzby"]:is([aria-current="page"],[aria-current="location"]),
.main-nav a[href="#sluzby"]:is([aria-current="page"],[aria-current="location"]),
.main-nav a[href="sluzby.html"]:is([aria-current="page"],[aria-current="location"]) {
  isolation:isolate;
  position:relative;
  background:transparent;
  border:0;
  padding:0;
}
.main-nav a[href$="#sluzby"]:is([aria-current="page"],[aria-current="location"])::before,
.main-nav a[href="#sluzby"]:is([aria-current="page"],[aria-current="location"])::before,
.main-nav a[href="sluzby.html"]:is([aria-current="page"],[aria-current="location"])::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:13px;
  height:39px;
  background:var(--lime);
  transform:rotate(27deg);
  left:12px;
  top:50%;
  margin-top:-20px;
  pointer-events:none;
}
/* V aktivním stavu se nepřidává standardní hover podtržení. */
.main-nav a[href$="#sluzby"]:is([aria-current="page"],[aria-current="location"])::after,
.main-nav a[href="#sluzby"]:is([aria-current="page"],[aria-current="location"])::after,
.main-nav a[href="sluzby.html"]:is([aria-current="page"],[aria-current="location"])::after {right:100%}
.main-nav a.nav-contact:is([aria-current="page"],[aria-current="location"]) {background:var(--pink);box-shadow:4px 4px 0 var(--violet)}
@media(max-width:980px) {
  .main-nav a[href="projekty.html"]:is([aria-current="page"],[aria-current="location"]) {padding:14px 16px}
  .main-nav a[href$="#sluzby"]:is([aria-current="page"],[aria-current="location"]),
  .main-nav a[href="#sluzby"]:is([aria-current="page"],[aria-current="location"]),
.main-nav a[href="sluzby.html"]:is([aria-current="page"],[aria-current="location"]) {padding:0}
  .main-nav a[href="o-studiu.html"]:is([aria-current="page"],[aria-current="location"]) {color:var(--violet);border-bottom:4px solid var(--violet)}
  .main-nav a[href="o-studiu.html"]:is([aria-current="page"],[aria-current="location"])::after {display:none}
}

.studio-hero {padding:clamp(75px,9vw,145px) 0 clamp(55px,7vw,105px)}
.studio-hero h1 {font:normal clamp(55px,8.1vw,135px)/.99 var(--display);letter-spacing:-.065em;margin:35px 0 50px;overflow-wrap:break-word}
.studio-hero h1>span {color:var(--violet)}
.studio-hero-bottom {display:flex;justify-content:space-between;align-items:end;gap:45px}
.studio-hero-bottom p {font-size:clamp(19px,2vw,27px);line-height:1.45;max-width:650px;margin:0}
.studio-photo {margin:0;position:relative;overflow:hidden;background:#d9d4ca}
.studio-photo img {display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.07)}
.studio-photo-wide {aspect-ratio:2.3 / 1;max-height:none}
.studio-photo figcaption {position:absolute;left:24px;bottom:22px;right:24px;display:flex;justify-content:space-between;gap:20px;color:white;font-size:11px;font-weight:700;letter-spacing:.08em;text-shadow:0 1px 8px #000}
.studio-split {display:grid;grid-template-columns:1fr 2fr;gap:50px}
.studio-label {font-size:12px;font-weight:700;letter-spacing:.08em;margin:0}
.studio-approach {padding:clamp(80px,10vw,155px) 0}
.studio-approach h2,.studio-process h2 {font:normal clamp(40px,5.1vw,80px)/1.08 var(--display);letter-spacing:-.06em;margin:0}
.studio-approach h2 span,.studio-process h2 span {color:var(--violet)}
.studio-description {max-width:650px;font-size:clamp(19px,2vw,26px);line-height:1.5;margin:36px 0 60px}
.studio-pillars {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.studio-pillars>div {border-top:3px solid var(--ink);padding-top:18px}
.studio-pillars span {display:block;color:var(--violet);font-size:14px;font-weight:700;margin-bottom:20px}
.studio-pillars strong {font:normal clamp(16px,1.5vw,24px)/1.1 var(--display)}
.studio-pillars p {font-size:14px;line-height:1.5}
.studio-manifesto {background:var(--lime);border-block:var(--border) solid var(--ink);padding:clamp(75px,9vw,135px) 0;overflow:hidden}
.studio-manifesto .container {position:relative}
.studio-manifesto h2 {position:relative;z-index:1;font:normal clamp(64px,10vw,160px)/.99 var(--display);letter-spacing:-.07em;margin:40px 0}
.studio-manifesto h2 span {color:var(--violet)}
.studio-manifesto p:not(.studio-label) {font-size:clamp(18px,2vw,26px);max-width:640px;line-height:1.45;margin:0;position:relative;z-index:1}
.manifesto-asterisk {position:absolute;right:0;top:10%;font-size:clamp(110px,23vw,350px);line-height:1;color:var(--pink);transform:rotate(-15deg);opacity:.95}
.studio-process {padding:clamp(80px,10vw,150px) 0}
.studio-process-grid {display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,6vw,100px);align-items:center;margin-top:40px}
.studio-photo-process {aspect-ratio:4/5}
.studio-photo-process figcaption {font-size:10px}
.studio-process-copy p {font-size:clamp(18px,1.7vw,23px);line-height:1.55;max-width:560px;margin:35px 0}
.studio-cta {padding:clamp(75px,10vw,145px) 0;background:var(--pink);border-top:var(--border) solid var(--ink)}
.studio-cta h2 {font:normal clamp(55px,8vw,125px)/1.04 var(--display);letter-spacing:-.065em;margin:35px 0 50px}
.studio-cta h2 span {color:var(--violet)}
@media(max-width:760px){.studio-hero {padding:55px 0 60px}.studio-hero h1 {font-size:clamp(43px,10vw,76px);margin:32px 0}.studio-hero-bottom {display:block}.studio-hero-bottom .portfolio-scroll {display:inline-flex;margin-top:28px}.studio-photo-wide {aspect-ratio:auto;min-height:0}.studio-photo-wide img {height:auto;max-height:none;object-fit:contain}.studio-photo-process {aspect-ratio:auto;max-height:none}.studio-photo-process img {height:auto;object-fit:contain}.studio-photo figcaption {left:15px;right:15px;bottom:15px;font-size:9px}.studio-photo figcaption span {display:none}.studio-split {grid-template-columns:1fr;gap:30px}.studio-description {margin:28px 0 40px}.studio-pillars {gap:12px}.studio-pillars strong {font-size:12px}.studio-pillars p {font-size:12px}.studio-manifesto h2 {font-size:clamp(47px,10vw,83px)}.manifesto-asterisk {opacity:.65;right:8px;top:12%;font-size:clamp(75px,20vw,130px)}.studio-process-grid {grid-template-columns:1fr;gap:40px}.studio-photo-process {max-height:580px}.studio-process h2 {font-size:clamp(39px,9vw,65px)}.studio-cta h2 {font-size:clamp(44px,10vw,78px)}}

/* Photographic applications — case studies 1.9.5 */
.mockup-section{padding:clamp(64px,8vw,120px) 0;background:var(--paper)}
.mockup-heading{display:grid;grid-template-columns:1fr 2fr;gap:24px 40px;align-items:start;margin-bottom:36px}
.mockup-heading h2{font:normal clamp(30px,4vw,65px)/1.05 var(--display);letter-spacing:-.04em;margin:0}
.mockup-heading>p:last-child{grid-column:2;max-width:600px;line-height:1.55;margin:0}
.mockup-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.mockup-card{margin:0;min-width:0}
.mockup-card img{display:block;width:100%;height:auto;object-fit:contain;object-position:center}
.mockup-card figcaption{font-size:12px;font-weight:700;letter-spacing:.08em;padding:14px 0}
@media(max-width:700px){.mockup-heading{grid-template-columns:1fr;gap:18px}.mockup-heading>p:last-child{grid-column:1}.mockup-grid{grid-template-columns:1fr;gap:26px}.mockup-card img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:transparent}}

/* Fotografické rámy: jedna černá 3px hrana na obalu, bez mezery kolem obrázku.
   Transformace mění pouze fotografii uvnitř neměnného rámu. */
.portfolio-photo, .portfolio-wide-photo, .studio-photo, .mockup-media {
  border: var(--frame-border) solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  overflow: hidden;
  line-height: 0;
  padding: 0;
}
.portfolio-photo, .portfolio-wide-photo { margin: 0; }
.portfolio-photo img, .portfolio-wide-photo img, .studio-photo img, .mockup-media img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  border: 0;
  margin: 0;
  /* Drobný přesah eliminuje subpixelovou spáru při rasterizaci. */
  transform: scale(1.008);
  transform-origin: center;
  backface-visibility: hidden;
  transition: transform .38s cubic-bezier(.2,.7,.2,1);
}
/* Celostránkový fotografický pás: bez bočních čar na všech breakpointech. */
.studio-photo-wide { border-left: 0; border-right: 0; }
/* Velká studiová fotografie drží výšku rámu; malé mockupy svůj přirozený poměr stran. */
.studio-photo-wide img { height:100%; object-fit:cover; object-position:center 68%; }
.studio-photo-process img { height:100%; object-fit:cover; }
@media (max-width: 760px) {
  .studio-photo-wide img, .studio-photo-process img { height: auto; object-fit: contain; }
}
.mockup-media img { height: auto; object-fit: contain; }
.portfolio-card:is(:hover,:focus-within) .portfolio-photo img,
.portfolio-card:is(:hover,:focus-within) .portfolio-wide-photo img,
.mockup-card:hover .mockup-media img,
.mockup-card:focus-within .mockup-media img {
  transform: scale(1.035);
}
/* U fotografií mimo klikací karty zůstává přiblížení při najetí myší. */
.studio-photo:hover img { transform: scale(1.035); }
/* Homepage: stejný fialový stín jako na stránce Projekty. */
.project-card-link .project-art { transition: box-shadow .22s ease, filter .22s ease; }
.project-card-link:is(:hover,:focus-visible) .project-art {
  box-shadow: 5px 5px 0 var(--violet);
  filter: saturate(1.06);
}
/* Jediná interakce pro všechny tři karty, včetně MODULU.
   Grafické panely se neposouvají: horní rám se nikdy neořízne. */
.project-card-link {
  display: block;
  height: 100%;
  color: var(--ink);
  text-decoration: none;
}
.project-card-link:focus-visible { outline: 4px solid var(--violet); outline-offset: 6px; }
.portfolio-card .project-art,
.portfolio-wide-graphic {
  border: var(--frame-border) solid var(--ink);
  transition: box-shadow .22s ease, filter .22s ease;
}
.portfolio-card:is(:hover,:focus-within) .project-art,
.portfolio-card:is(:hover,:focus-within) .portfolio-wide-graphic {
  box-shadow: 5px 5px 0 var(--violet);
  filter: saturate(1.06);
}
.portfolio-photo, .portfolio-wide-photo { transition: box-shadow .22s ease; }
.portfolio-card:is(:hover,:focus-within) .portfolio-photo,
.portfolio-card:is(:hover,:focus-within) .portfolio-wide-photo { box-shadow: 5px 5px 0 var(--violet); }
.portfolio-card:not(.portfolio-card-wide) .portfolio-photo { margin-top: 22px; }
.portfolio-card:not(.portfolio-card-wide) .portfolio-meta { padding-top: 22px; }
.portfolio-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  flex-shrink: 0;
  background: var(--ink);
  color: var(--paper);
  border: var(--frame-border) solid var(--ink);
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.2;
  transition: background .2s ease, border-color .2s ease;
}
.portfolio-card:is(:hover,:focus-within) .portfolio-action {
  background: var(--violet);
  border-color: var(--violet);
}
.portfolio-meta { align-items: end; }

/* MODUL: stejné rámy, mezera a společný odkaz pod vizuály. */
.portfolio-wide-link {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px;
  align-items: stretch;
}
.portfolio-wide-graphic {
  background: var(--lime);
  padding: clamp(24px,4vw,65px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}
.portfolio-wide-kicker { font-weight: 700; font-size: 12px; letter-spacing: .09em; }
.portfolio-wide-graphic h2 {
  font: normal clamp(55px,7vw,116px)/.95 var(--display);
  letter-spacing: -.065em;
  margin: 12px 0 0;
  overflow-wrap: anywhere;
}
.portfolio-wide-graphic .project-dot {
  display: inline-block;
  width: .15em;
  height: .15em;
  background: var(--violet);
  margin-left: .23em;
  vertical-align: baseline;
}
.portfolio-wide-graphic p {
  max-width: 420px;
  font-size: clamp(16px,1.7vw,23px);
  line-height: 1.45;
  margin: 0;
}
.portfolio-wide-motif {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  width: min(100%,330px);
  height: 90px;
  margin: auto 0 12px;
  gap: 5px;
}
.portfolio-wide-motif span:nth-child(1) { background: var(--ink); }
.portfolio-wide-motif span:nth-child(2) { background: var(--violet); border-radius: 50% 50% 0 0; }
.portfolio-wide-motif span:nth-child(3) { background: var(--pink); }
.portfolio-wide-motif span:nth-child(4) { background: var(--ink); border-radius: 0 0 50% 50%; }
.portfolio-wide-motif span:nth-child(5) { background: var(--violet); }
.portfolio-wide-photo { min-width: 0; display: flex; align-items: stretch; }
.portfolio-wide-photo img { height: 100%; object-fit: cover; flex: 1; min-height: 0; }
.portfolio-wide-meta {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
}
.portfolio-wide-meta p { margin: 0; font-size: 15px; }

/* Jednotný hover všech podtržených textových odkazů, včetně patičky. */
.scroll-next:hover, .portfolio-scroll:hover, .text-link:hover,
.back-top:hover, .detail-back:hover {
  color: var(--violet);
  border-bottom-color: var(--violet);
}
.scroll-next:focus-visible, .portfolio-scroll:focus-visible,
.text-link:focus-visible, .back-top:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 5px;
}
@media (max-width: 760px) {
  .portfolio-card:not(.portfolio-card-wide) .portfolio-photo { margin-top: 16px; }
  .portfolio-wide-link { grid-template-columns: 1fr; gap: 16px; }
  .portfolio-wide-graphic { padding: 28px 22px; gap: 16px; }
  .portfolio-wide-graphic h2 { font-size: clamp(48px,12vw,82px); }
  .portfolio-wide-motif { height: 70px; margin: 16px 0; }
  .portfolio-wide-photo { display: block; }
  .portfolio-wide-photo img { width: 100%; height: auto; object-fit: contain; }
  .portfolio-wide-meta, .portfolio-meta { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .project-card .project-art, .portfolio-card .project-art, .portfolio-wide-graphic,
  .portfolio-photo img, .portfolio-wide-photo img, .studio-photo img,
  .mockup-media img, .portfolio-action { transition: none; }
}

/* BLOK. 1.9.18 — Experimental 02 homepage. Jediný izolovaný systém hero. */
/* BLOK. 1.9.20 — fotografická editorial hero, jediná sada pravidel */
.hero-editorial { padding: 0 0 32px; }
.hero-editorial-fullbleed { width: 100%; }
.hero-editorial-frame { position: relative; min-height: clamp(620px, 58vw, 900px); overflow: hidden; border-top: 0; border-bottom: var(--border) solid var(--ink); border-left: 0; border-right: 0; background: #282722; isolation: isolate; }
.hero-editorial-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 66% 50%; transform: scale(1.025); animation: editorial-photo-enter 1.25s ease-out both; }
.hero-editorial-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,15,15,.89) 0%, rgba(15,15,15,.72) 34%, rgba(15,15,15,.20) 72%, rgba(15,15,15,.04) 100%); }
.hero-editorial-content { position: relative; z-index: 1; padding: clamp(40px,6vw,110px) max(var(--gutter), calc((100vw - var(--max)) / 2)); min-height: inherit; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: #fff; }
.hero-editorial-kicker { display: flex; align-items: center; gap: 11px; font-size: 11px; font-weight: 700; letter-spacing: .12em; margin: 0 0 clamp(30px,3vw,48px); }
.hero-editorial-dot { display: inline-block; width: 12px; height: 12px; background: var(--pink); border: 2px solid #fff; border-radius: 50%; flex: none; }
.hero-editorial h1 { font: normal clamp(48px, 6.25vw, 108px)/.99 var(--display); letter-spacing: -.07em; margin: 0 0 30px; white-space: nowrap; overflow-wrap: normal; }
.hero-editorial-highlight { display: inline-block; position: relative; z-index: 0; }
.hero-editorial-highlight:before { content: ''; position: absolute; z-index: -1; left: -2%; right: -3%; bottom: .03em; height: .28em; background: var(--lime); transform: rotate(-2deg); }
.hero-editorial-period { color: var(--lime); }
.hero-editorial-lead { font-size: clamp(16px,1.35vw,20px); line-height: 1.55; max-width: 490px; margin: 0 0 29px; }
.hero-editorial-button { color: var(--ink); }
.hero-editorial-label { position: absolute; z-index: 1; bottom: 24px; right: 25px; color: white; font-size: 10px; letter-spacing: .12em; font-weight: 700; text-shadow: 0 1px 5px #000; }
.hero-editorial-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 0; padding-top: 22px; padding-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.hero-editorial-rule { display: none; }
@keyframes editorial-photo-enter { from { opacity: .65; transform: scale(1.065); } to { opacity: 1; transform: scale(1.025); } }
@media(max-width: 1100px) { .hero-editorial h1 { font-size: clamp(44px, 6.5vw, 76px); } .hero-editorial-content { padding: 44px; } }
@media(max-width: 760px) { .hero-editorial { padding-top: 0; } .hero-editorial-frame { min-height: 680px; } .hero-editorial-photo { object-position: 60% center; } .hero-editorial-shade { background: linear-gradient(180deg,rgba(15,15,15,.68) 0%,rgba(15,15,15,.83) 68%,rgba(15,15,15,.72) 100%); } .hero-editorial-content { justify-content: flex-end; padding: 35px 26px 75px; } .hero-editorial h1 { font-size: clamp(36px, 8.3vw, 63px); } .hero-editorial-kicker { font-size: 9px; margin-bottom: 28px; } .hero-editorial-lead { font-size: 16px; } .hero-editorial-label { right: 20px; bottom: 18px; font-size: 8px; } .hero-editorial-bottom { gap: 12px; font-size: 9px; } }
@media(max-width: 430px) { .hero-editorial-frame { min-height: 650px; } .hero-editorial-content { padding: 30px 19px 65px; } .hero-editorial h1 { font-size: clamp(31px,8.1vw,38px); } .hero-editorial-button { gap: 16px; padding: 13px 12px; font-size: 11px; } .hero-editorial-bottom { flex-wrap: wrap; row-gap: 12px; } .hero-editorial-rule { min-width: 30px; } }
@media(prefers-reduced-motion: reduce) { .hero-editorial-photo { animation: none; transform: none; } }

/* SLUŽBY — samostatná stránka, přehledné rozbalovací karty */
.services-page .main-nav a[href="sluzby.html"][aria-current="page"]{text-decoration:none}
.svc-intro{padding-top:clamp(70px,8vw,125px);padding-bottom:clamp(42px,6vw,82px)}
.svc-intro .eyebrow{margin-bottom:22px}.svc-intro-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,.65fr);gap:40px;align-items:end}
.svc-intro h1,.svc-process h2,.svc-cta h2{font-family:'Archivo Black',sans-serif;font-weight:400;letter-spacing:-.055em;line-height:1.02}
.svc-intro h1{font-size:clamp(50px,7.2vw,116px);margin:0}.svc-intro-grid>p{font-size:clamp(17px,1.6vw,22px);line-height:1.5;max-width:420px;margin:0 0 8px}
.svc-offer{padding-bottom:clamp(90px,10vw,150px)}.svc-item{border-bottom:3px solid #171717}.svc-item:first-child{border-top:3px solid #171717}
.svc-item summary{display:grid;grid-template-columns:70px minmax(0,1fr) 220px 32px;gap:22px;align-items:center;cursor:pointer;list-style:none;padding:28px 22px;transition:background .22s ease}
.svc-item summary::-webkit-details-marker{display:none}.svc-item summary:hover,.svc-item[open] summary{background:#FF73C5}.svc-num,.svc-tag{font-size:12px;font-weight:700;letter-spacing:.04em}.svc-name{font-family:'Archivo Black',sans-serif;font-size:clamp(23px,3.2vw,43px);letter-spacing:-.04em;line-height:1.15}.svc-chevron{width:18px;height:18px;border-right:3px solid #171717;border-bottom:3px solid #171717;transform:rotate(45deg);transition:transform .2s ease;justify-self:center;margin-top:-8px}.svc-item[open] .svc-chevron{transform:rotate(225deg);margin-top:8px}
.svc-panel{display:grid;grid-template-columns:1fr 1.2fr;gap:8%;padding:34px 50px 44px 114px;background:#F6F2E9}.svc-panel p{font-size:clamp(17px,1.7vw,21px);line-height:1.55;margin:0}.svc-panel ul{margin:0;padding:0;list-style:none}.svc-panel li{position:relative;padding:0 0 14px 27px;line-height:1.45;font-size:16px}.svc-panel li::before{content:'';position:absolute;left:0;top:.47em;width:12px;height:12px;background:#C7F23A;border-radius:50%}
.svc-process{padding-top:65px;padding-bottom:110px}.svc-process-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:50px}.svc-process h2{font-size:clamp(42px,5vw,78px);margin:18px 0 0}.svc-process-heading>p{max-width:290px;line-height:1.55}

.svc-cta{background:#7650E8;color:#fff;padding:clamp(65px,9vw,125px) 0}.svc-cta h2{font-size:clamp(46px,6vw,92px);margin:18px 0 32px}.svc-cta h2 span{color:#C7F23A}
@media(max-width:760px){.svc-intro-grid{grid-template-columns:1fr;gap:20px}.svc-item summary{grid-template-columns:36px 1fr 26px;gap:12px;padding:22px 10px}.svc-tag{grid-column:2;grid-row:2}.svc-chevron{grid-column:3;grid-row:1 / span 2}.svc-panel{grid-template-columns:1fr;gap:25px;padding:25px 18px 32px}.svc-process-heading{display:block}.svc-process{padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){.svc-item summary,.svc-chevron{transition:none}}

/* BLOK. 1.9.26 — časová osa, fotografické pásy, interaktivní služby */
.service-row { text-decoration:none; color:inherit; cursor:pointer; }
.service-row:focus-visible { outline:3px solid var(--violet); outline-offset:3px; background:var(--pink); }
.svc-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; list-style:none; margin:0; padding:0; position:relative; }
.svc-steps::before { content:""; position:absolute; top:15px; left:15px; right:calc(25% - 15px); height:2px; background:var(--ink); }
.svc-steps li { position:relative; padding:48px 12px 0 0; }
.svc-steps li::before { content:""; position:absolute; top:0; left:0; width:30px; height:30px; box-sizing:border-box; border:2px solid var(--ink); border-radius:50%; background:var(--lime); z-index:1; }
.svc-steps strong { display:block; font:normal 23px/1.25 var(--display); margin-bottom:3px; }
.svc-steps span { display:block; font-size:17px; line-height:1.4; }
.svc-photo { position:relative; margin:0; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); overflow:hidden; }
.svc-photo img { display:block; width:100%; height:auto; object-fit:contain; }
.svc-photo figcaption { position:absolute; right:24px; bottom:18px; color:#fff; font-size:11px; font-weight:700; text-shadow:0 1px 7px #171717; letter-spacing:.07em; }
@media(max-width:760px) {
  .svc-steps { display:flex; flex-direction:column; gap:0; padding-left:0; }
  .svc-steps::before { display:none; }
  .svc-steps li:not(:last-child)::after { content:""; position:absolute; left:14px; top:15px; bottom:-15px; width:2px; background:var(--ink); }
  .svc-steps li { display:grid; grid-template-columns:46px minmax(0,1fr); grid-template-rows:auto auto; padding:0 0 34px; min-height:88px; }
  .svc-steps li:last-child { padding-bottom:0; min-height:45px; }
  .svc-steps li::before { left:0; top:0; }
  .svc-steps strong { grid-column:2; grid-row:1; margin:0 0 5px; }
  .svc-steps span { grid-column:2; grid-row:2; font-size:16px; }
  .svc-photo figcaption { right:12px; bottom:12px; }
}