/* ═══════════════════════════════════════════
   AI_KTIVISTA v3 — Cream · Yellow · Black
   Award-winning editorial design
═══════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  --cream:   #f3ede0;
  --cream-d: #e8e0d0;
  --blk:     #0d0c09;
  --blk-2:   #1b1916;
  --yel:     #f2c200;
  --yel-dk:  #c9a000;
  --muted:   #7a7265;
  --white:   #faf8f3;

  --ff-d: 'Bebas Neue', cursive;
  --ff-s: 'Barlow Condensed', sans-serif;
  --ff-b: 'Barlow', sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-sharp: cubic-bezier(0.77, 0, 0.18, 1);

  /* per-section tokens (default = cream) */
  --bg:    var(--cream);
  --fg:    var(--blk);
  --fgm:   var(--muted);
  --bdr:   rgba(13, 12, 9, 0.1);
  --bdr-h: rgba(13, 12, 9, 0.22);

  --scroll-p: 0;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth; font-size: 16px;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background: var(--cream);
  color: var(--blk);
  font-family: var(--ff-b);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  max-width: 100vw;
  overscroll-behavior-x: none;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

a  { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Images scale proportionally — overrides any HTML width/height attrs
   set for CLS prevention. Rules with explicit height: (e.g. featured__logo,
   ref-card__photo) still win via specificity. */
img, video {
  max-width: 100%;
  height: auto;
}
button { cursor: none; border: none; background: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; width: 100%; }
select option { background: var(--blk-2); color: var(--cream); }
strong { font-weight: 500; }

/* ─── SCROLL PROGRESS BAR ─── */
.progress-bar {
  position: fixed;
  left: 0; top: 0;
  width: 3px;
  height: 100vh;
  z-index: 9000;
  pointer-events: none;
  background: var(--bdr);
}

.progress-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  background: var(--yel);
  height: calc(var(--scroll-p, 0) * 100%);
  transition: height 0.05s linear;
  box-shadow: 0 0 8px rgba(242, 194, 0, 0.5);
}

/* ─── CURSOR ─── */
.cur { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; }

.cur__dot {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--blk);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease), height 0.3s var(--ease),
              background 0.2s, transform 0.15s;
  mix-blend-mode: multiply;
}

.cur__ring {
  position: absolute;
  width: 38px; height: 38px;
  border: 1.5px solid var(--yel);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease), height 0.4s var(--ease),
              background 0.3s, border-color 0.3s;
  background: transparent;
}

body.cur-hover .cur__ring {
  width: 56px; height: 56px;
  background: transparent;
  border-color: var(--yel);
}

body.cur-hover .cur__dot {
  width: 32px; height: 32px;
  background: var(--yel);
  mix-blend-mode: normal;
}

body.cur-dark .cur__dot {
  background: var(--yel);
  mix-blend-mode: normal;
}

body.cur-dark .cur__ring {
  border-color: var(--yel);
}

body.cur-dark.cur-hover .cur__ring {
  background: rgba(242, 194, 0, 0.15);
}

/* Hover-capable devices: hide native cursor everywhere — custom cursor takes over.
   !important overrides per-component cursor: pointer set elsewhere. */
@media (hover: hover) {
  *, *::before, *::after { cursor: none !important; }
}

/* Touch / no-hover devices: restore native cursors and hide the custom one */
@media (hover: none) { .cur { display: none; } body { cursor: auto; } a, button { cursor: pointer; } }

/* ─── NAV ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 36px;
  height: 64px;
  transition: background 0.15s, border-color 0.15s, color 0.1s;
  color: var(--blk);
}

.nav.scrolled {
  background: rgba(243, 237, 224, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bdr);
}

/* Nav invert — over dark sections */
.nav.inv { color: var(--cream); }
.nav.inv.scrolled {
  background: rgba(13, 12, 9, 0.92);
  border-bottom-color: rgba(243, 237, 224, 0.1);
}
.nav.inv .nav__dot { box-shadow: 0 0 8px var(--yel); }

/* During horizontal pair transitions both sections are dark —
   give the nav a background so it stays visible on either section */
.nav.inv.fp-transitioning {
  background: rgba(13, 12, 9, 0.9);
  border-bottom-color: rgba(243, 237, 224, 0.1);
}

/* Nav over yellow quote section */
.nav.on-quote { color: var(--blk); }
.nav.on-quote.scrolled {
  background: rgba(242, 194, 0, 0.88);
  border-bottom-color: rgba(13, 12, 9, 0.15);
}
.nav.on-quote .nav__logo { color: var(--blk); }
.nav.on-quote .nav__logo:hover { color: var(--blk); opacity: 0.7; }
.nav.on-quote .nav__btn { color: var(--blk); border-color: rgba(13,12,9,0.3); }
.nav.on-quote .nav__btn:hover { color: var(--blk); border-color: var(--blk); opacity: 1; }
.nav.on-quote .nav__dot { background: var(--blk); }

.nav__logo {
  font-family: var(--ff-d);
  font-size: 20px;
  letter-spacing: 0.08em;
  transition: color 0.2s;
  cursor: none;
}
.nav__logo:hover { color: var(--yel); }

.nav__btn {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-s);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em;
  padding: 8px 16px;
  border: 1px solid currentColor;
  opacity: 0.7;
  transition: opacity 0.25s, color 0.2s, border-color 0.2s;
  cursor: none;
}

.nav__btn:hover { opacity: 1; color: var(--yel); border-color: var(--yel); }
.nav__btn:focus-visible { outline: 2px solid var(--yel); outline-offset: 3px; }
.nav__btn.open { opacity: 1; }

.nav__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--yel);
  animation: nav-blink 2s ease-in-out infinite;
}

.nav__btn.open .nav__dot { background: var(--cream); box-shadow: none; animation: none; }

@keyframes nav-blink { 0%,100%{opacity:1}50%{opacity:0.2} }

/* ─── MENU OVERLAY ─── */
.overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 96px 36px 36px;
  pointer-events: none; visibility: hidden;
  overflow-y: auto;
}

.overlay__nav { margin-top: auto; margin-bottom: auto; }

.overlay__panel {
  position: absolute; inset: 0;
  background: var(--blk);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease);
}

.overlay.open { pointer-events: all; visibility: visible; }
.overlay.open .overlay__panel { clip-path: inset(0 0 0% 0); }

.overlay__nav {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  max-width: 900px; margin: 0 auto; width: 100%;
}

/* Each link line */
.ol {
  display: flex; align-items: baseline; gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(243, 237, 224, 0.1);
  overflow: hidden;
  cursor: none;
}

.ol__n {
  font-family: var(--ff-s);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(243, 237, 224, 0.4);
  transform: translateY(110%);
  transition: transform 0.65s var(--ease), color 0.2s;
  min-width: 28px;
}

.ol__t {
  font-family: var(--ff-d);
  font-size: clamp(32px, min(6vw, 7vh), 72px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--cream);
  transform: translateY(110%);
  transition: transform 0.7s var(--ease), color 0.2s;
}

.overlay.open .ol__n { transform: translateY(0); }
.overlay.open .ol__t { transform: translateY(0); }

.ol:nth-child(1) .ol__n { transition-delay: 0.1s; }  .ol:nth-child(1) .ol__t { transition-delay: 0.12s; }
.ol:nth-child(2) .ol__n { transition-delay: 0.17s; } .ol:nth-child(2) .ol__t { transition-delay: 0.19s; }
.ol:nth-child(3) .ol__n { transition-delay: 0.24s; } .ol:nth-child(3) .ol__t { transition-delay: 0.26s; }
.ol:nth-child(4) .ol__n { transition-delay: 0.31s; } .ol:nth-child(4) .ol__t { transition-delay: 0.33s; }
.ol:nth-child(5) .ol__n { transition-delay: 0.38s; } .ol:nth-child(5) .ol__t { transition-delay: 0.40s; }
.ol:nth-child(6) .ol__n { transition-delay: 0.45s; } .ol:nth-child(6) .ol__t { transition-delay: 0.47s; }
.ol:nth-child(7) .ol__n { transition-delay: 0.52s; } .ol:nth-child(7) .ol__t { transition-delay: 0.54s; }

.ol:hover .ol__t { color: var(--yel); }
.ol:hover .ol__n { color: var(--yel); }

/* Masterclass — highlighted as a separate members destination */
.ol--mc .ol__n, .ol--mc .ol__t { color: var(--yel); }
.ol--mc:hover .ol__n, .ol--mc:hover .ol__t { color: var(--white); }
.ol__ext { font-size: 0.5em; vertical-align: middle; margin-left: 0.15em; }

.overlay__foot {
  position: relative; z-index: 1;
  display: flex; gap: 36px;
  max-width: 900px; margin: 28px auto 0; width: 100%;
  font-family: var(--ff-s);
  font-size: 13px; letter-spacing: 0.05em;
  color: rgba(243, 237, 224, 0.4);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s 0.45s, transform 0.5s var(--ease) 0.45s;
}

.overlay.open .overlay__foot { opacity: 1; transform: none; }
.overlay__foot a:hover { color: var(--yel); }

/* ─── SIDE LABELS ─── */
.side {
  position: fixed;
  left: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 300;
  display: flex; flex-direction: column;
  padding-left: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}

.side.show,
body.loaded .side { opacity: 1; pointer-events: all; }

.side__lnk {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0;
  font-family: var(--ff-s);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  transition: color 0.25s;
  cursor: none;
  white-space: nowrap;
}

.side__lnk:hover, .side__lnk.on { color: var(--blk); }

.side__dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  transition: background 0.25s, transform 0.25s;
}

.side__lnk.on .side__dot {
  background: var(--yel);
  transform: scale(1.5);
  box-shadow: 0 0 6px var(--yel);
}

/* Invert side labels over dark sections */
.side.inv .side__lnk { color: rgba(243, 237, 224, 0.35); }
.side.inv .side__lnk:hover, .side.inv .side__lnk.on { color: var(--cream); }

@media (max-width: 1120px) { .side { display: none; } }

/* ─── RIGHT EDGE ─── */
.edge {
  position: fixed;
  right: 0; top: 50%;
  z-index: 200;
  transform: translateY(-50%) rotate(90deg) translateX(50%);
  transform-origin: 50% 50%;
  font-family: var(--ff-s);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--muted);
  white-space: nowrap;
  margin-right: -52px;
  /* now an interactive link to the Masterclass subpage */
  pointer-events: auto;
  text-decoration: none;
  transition: color 0.25s, letter-spacing 0.25s;
}

.edge:hover { color: var(--yel-dk); letter-spacing: 0.28em; }
.edge:focus-visible { outline: 2px solid var(--yel); outline-offset: 4px; color: var(--yel-dk); }

@media (max-width: 1120px) { .edge { display: none; } }

/* ─── REVEAL ANIMATIONS ─── */

/* Reveal-line: overflow hidden, child slides up */
.rl { display: block; overflow: hidden; line-height: 1.05; }
.rl > span { display: block; transform: translateY(108%); transition: transform 0.9s var(--ease); }
.rl.on > span { transform: none; }

/* Reveal-up: fade + translate */
.rv { opacity: 0; transform: translateY(36px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rv.on { opacity: 1; transform: none; }

/* Reveal from left */
.rv-l { opacity: 0; transform: translateX(-44px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.rv-l.on { opacity: 1; transform: none; }

/* Delays */
.d1  { transition-delay: 0.1s; }  .d2  { transition-delay: 0.2s; }
.d3  { transition-delay: 0.3s; }  .d4  { transition-delay: 0.4s; }
.rd1 { transition-delay: 0.12s; } .rd2 { transition-delay: 0.24s; } .rd3 { transition-delay: 0.36s; }

/* ─── SHARED ATOMS ─── */
.eyebrow {
  font-family: var(--ff-s);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 40px; }

/* Primary button */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  font-family: var(--ff-s);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--yel);
  color: var(--blk);
  border: 1.5px solid var(--yel);
  transition: background 0.25s, color 0.25s, transform 0.2s;
  cursor: none;
}

.btn:hover { background: transparent; color: var(--yel); transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--yel); outline-offset: 3px; }

.btn--inv { background: transparent; color: var(--yel); }
.btn--inv:hover { background: var(--yel); color: var(--blk); }

.btn--yel { background: var(--yel); color: var(--blk); border-color: var(--yel); }
.btn--yel:hover { background: transparent; color: var(--yel); }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.tags span {
  padding: 3px 10px;
  font-family: var(--ff-s);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--bdr-h);
  color: var(--fgm);
}

/* Placeholder image */
.ph {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--cream-d);
  border: 1px solid var(--bdr);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--ff-s);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  overflow: hidden;
}

/* Hatching on placeholders */
.ph::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 16px,
    rgba(0,0,0,0.03) 16px, rgba(0,0,0,0.03) 17px
  );
}

.ph small { font-size: 11px; font-weight: 400; }
.ph--wide    { aspect-ratio: 16/7; }
.ph--portrait { aspect-ratio: 3/4; }
.ph--proj    { aspect-ratio: 3/4; }

/* Dark-section placeholders use dark bg */
.sec--dark .ph {
  background: var(--blk-2);
  border-color: rgba(243, 237, 224, 0.08);
  color: rgba(243, 237, 224, 0.3);
}

.sec--dark .ph::before {
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 16px,
    rgba(255,255,255,0.03) 16px, rgba(255,255,255,0.03) 17px
  );
}

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 80px 40px 0;
  background: var(--cream);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Grain texture */
.hero__grain {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 160px;
}

/* Yellow horizontal accent bar — appears behind the title on load */
.hero__accent {
  position: absolute;
  height: clamp(72px, 14vw, 180px);
  background: var(--yel);
  left: 40%; right: 40px;
  top: 52%;
  transform: scaleX(0);
  transform-origin: right;
  z-index: 1;
  pointer-events: none;
}

body.loaded .hero__accent {
  animation: accent-in 0.8s var(--ease-sharp) 0.85s both;
}

@keyframes accent-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Portrait — transparent PNG, centered overlay */
.hero__portrait {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: clamp(400px, 84vh, 1020px);
  width: auto;
  max-width: 54vw;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s var(--ease) 1.5s;
}

body.loaded .hero__portrait { opacity: 1; }

/* Hero sweep line */
.hero__sweep {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--yel);
  z-index: 10; pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 20px rgba(242,194,0,.6);
}

body.loaded .hero__sweep {
  opacity: 1;
  animation: sweep 1.1s var(--ease-sharp) 0.2s both;
}

@keyframes sweep {
  from { transform: translateX(0); opacity: 1; }
  95%  { opacity: 1; }
  to   { transform: translateX(calc(100vw + 4px)); opacity: 0; }
}

.hero__top {
  position: relative; z-index: 2;
  margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/* Masterclass CTA tag — sharp editorial style, yellow star accent */
.hero__mc {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-s);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blk);
  border: 1.5px solid var(--blk);
  padding: 9px 16px 7px;
  cursor: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}
.hero__mc:hover { background: var(--blk); color: var(--cream); transform: translateY(-2px); }
.hero__mc__star { color: var(--yel-dk); transition: color 0.25s; }
.hero__mc:hover .hero__mc__star { color: var(--yel); }

/* Masterclass — temporarily hidden (remove this block to re-enable) */
.hero__mc,
.edge,
.ol--mc { display: none !important; }

.hero__eyebrow {
  font-family: var(--ff-s);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}

.hero__main {
  flex: 1;
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding-bottom: 60px;
}

.hero__right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 12px;
}

.hero__title {
  font-family: var(--ff-d);
  font-size: clamp(82px, 15vw, 200px);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-align: right;
}

.hero__line { display: block; }
.hero__line--1 { position: relative; z-index: 2; }
.hero__line--2 { position: relative; z-index: 2; margin-top: 4px; }


.hero__info {
  flex-shrink: 0;
  max-width: 220px;
  padding-bottom: 8px;
  display: flex; flex-direction: column; gap: 20px;
}

.hero__info-brand {
  font-family: var(--ff-d);
  font-size: 20px; letter-spacing: 0.1em;
  background: var(--blk);
  color: var(--cream);
  padding: 8px 16px 6px;
  display: inline-block;
  align-self: flex-start;
}

.hero__info-label {
  font-family: var(--ff-s); font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  display: block; margin-bottom: 8px;
}

.hero__info-names {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--ff-s); font-size: 14px; font-weight: 700;
  letter-spacing: 0.05em;
}

/* Hero bottom bar */
.hero__foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0 24px;
  border-top: 1px solid var(--bdr);
  font-family: var(--ff-s);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.hero__scroll-cta {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ff-s); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); cursor: none; transition: color 0.2s;
}

.hero__scroll-cta:hover { color: var(--blk); }

.scrl-icon {
  width: 22px; height: 36px;
  border: 1.5px solid currentColor;
  border-radius: 12px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 5px;
}

.scrl-icon__bar {
  width: 3px; height: 7px;
  background: var(--yel);
  border-radius: 2px;
  animation: scrl 2s ease-in-out infinite;
}

@keyframes scrl {
  0%   { opacity: 1; transform: none; }
  60%  { opacity: 0; transform: translateY(12px); }
  61%  { opacity: 0; transform: none; }
  100% { opacity: 1; }
}

/* ─── HERO RADAR PULSE (index.html) ─── */
.hero__radar {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: 300px; height: 300px;
  pointer-events: none;
  z-index: 0;
}

.hero__radar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--yel);
  opacity: 0;
}

body.loaded .hero__radar-ring {
  animation: radar-pulse 4s cubic-bezier(0.4, 0, 0.8, 1) 1.6s infinite;
}

body.loaded .hero__radar-ring:nth-child(2) { animation-delay: 2.93s; }
body.loaded .hero__radar-ring:nth-child(3) { animation-delay: 4.27s; }

@keyframes radar-pulse {
  0%   { transform: scale(0.25); opacity: 0; }
  6%   { opacity: 0.6; }
  100% { transform: scale(4.5); opacity: 0; }
}

/* ─── HERO SCAN LINE (index2.html) ─── */
.hero__scan {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  background: var(--yel);
  box-shadow: 0 0 22px 6px rgba(242,194,0,0.32), 0 0 4px 1px rgba(242,194,0,0.75);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

body.loaded .hero__scan {
  animation: scan-sweep 5.5s linear 1.8s infinite;
}

@keyframes scan-sweep {
  0%   { transform: translateY(0);        opacity: 0; }
  4%   { opacity: 1; }
  88%  { opacity: 0.9; }
  96%  { transform: translateY(-100svh);  opacity: 0; }
  100% { transform: translateY(-100svh);  opacity: 0; }
}

/* ─── FEATURED IN ─── */
.featured {
  background: var(--cream);
  overflow: hidden;
  padding: 44px 0;
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
}

/* Inside kto-som section — pinned to the bottom */
.featured--inline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  border-bottom: none;
  background: transparent;
  padding: 28px 0;
}

.featured__label {
  font-family: var(--ff-s);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 28px;
  padding: 0 40px;
}

.featured__rail {
  display: flex; align-items: center;
  gap: 80px;
  width: max-content;
  /* 4 identical sets — animate by exactly 25% (= 1 set) for seamless loop */
  animation: marquee 28s linear infinite;
  will-change: transform;
}

.featured:hover .featured__rail { animation-play-state: paused; }

.featured__logo {
  height: 30px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.45;
  mix-blend-mode: multiply;
  transition: opacity 0.25s, filter 0.25s;
  flex-shrink: 0;
}

.featured__logo:hover { opacity: 0.85; filter: none; }

.featured__link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.featured__link:hover .featured__logo {
  opacity: 1;
  filter: none;
}

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-25%); } }

/* ─── PER-ELEMENT SECTION TRANSITIONS ─── */

/* Keyframes */
@keyframes el-out-up   { to { opacity: 0; transform: translateY(-32px); } }
@keyframes el-out-down { to { opacity: 0; transform: translateY(32px);  } }
@keyframes el-in-up    { from { opacity: 0; transform: translateY(40px);  } to { opacity: 1; transform: none; } }
@keyframes el-in-down  { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }

/* Shared section lock */
.fp-leaving-down,
.fp-leaving-up { pointer-events: none; }

/* ── EXIT going DOWN ── */
.fp-leaving-down .sec__head                   { animation: el-out-up 0.28s var(--ease-in) 0ms    forwards; }
.fp-leaving-down .sec__sub                    { animation: el-out-up 0.28s var(--ease-in) 0.05s  forwards; }
.fp-leaving-down .acc,
.fp-leaving-down .edu,
.fp-leaving-down .about,
.fp-leaving-down .ref-grid,
.fp-leaving-down .vytv-benefits,
.fp-leaving-down .vytv-wrap,
.fp-leaving-down .studio-cta,
.fp-leaving-down .proj-scroll,
.fp-leaving-down .proj-wide-row,
.fp-leaving-down .feat,
.fp-leaving-down .bigq,
.fp-leaving-down .contact-h,
.fp-leaving-down .contact-body                { animation: el-out-up 0.28s var(--ease-in) 0.1s   forwards; }

/* ── EXIT going UP ── */
.fp-leaving-up .sec__head                     { animation: el-out-down 0.28s var(--ease-in) 0ms    forwards; }
.fp-leaving-up .sec__sub                      { animation: el-out-down 0.28s var(--ease-in) 0.05s  forwards; }
.fp-leaving-up .acc,
.fp-leaving-up .edu,
.fp-leaving-up .about,
.fp-leaving-up .ref-grid,
.fp-leaving-up .vytv-benefits,
.fp-leaving-up .vytv-wrap,
.fp-leaving-up .studio-cta,
.fp-leaving-up .proj-scroll,
.fp-leaving-up .proj-wide-row,
.fp-leaving-up .feat,
.fp-leaving-up .bigq,
.fp-leaving-up .contact-h,
.fp-leaving-up .contact-body                  { animation: el-out-down 0.28s var(--ease-in) 0.1s   forwards; }

/* ── ENTER going DOWN (scrolled forward) ── */
.fp-entering-down .sec__head                  { animation: el-in-up 0.65s var(--ease) 0s    both; }
.fp-entering-down .sec__sub                   { animation: el-in-up 0.65s var(--ease) 0.1s  both; }
.fp-entering-down .acc,
.fp-entering-down .edu,
.fp-entering-down .about,
.fp-entering-down .ref-grid,
.fp-entering-down .vytv-benefits,
.fp-entering-down .vytv-wrap,
.fp-entering-down .studio-cta,
.fp-entering-down .proj-scroll,
.fp-entering-down .proj-wide-row,
.fp-entering-down .feat,
.fp-entering-down .bigq,
.fp-entering-down .contact-h,
.fp-entering-down .contact-body               { animation: el-in-up 0.7s var(--ease) 0.18s  both; }

/* ── ENTER going UP (scrolled backward) ── */
.fp-entering-up .sec__head                    { animation: el-in-down 0.65s var(--ease) 0s    both; }
.fp-entering-up .sec__sub                     { animation: el-in-down 0.65s var(--ease) 0.1s  both; }
.fp-entering-up .acc,
.fp-entering-up .edu,
.fp-entering-up .about,
.fp-entering-up .ref-grid,
.fp-entering-up .vytv-benefits,
.fp-entering-up .vytv-wrap,
.fp-entering-up .studio-cta,
.fp-entering-up .proj-scroll,
.fp-entering-up .proj-wide-row,
.fp-entering-up .feat,
.fp-entering-up .bigq,
.fp-entering-up .contact-h,
.fp-entering-up .contact-body                 { animation: el-in-down 0.7s var(--ease) 0.18s  both; }

/* Hero — just the right side text block */
.fp-leaving-down .hero__right,
.fp-leaving-down .hero__top                   { animation: el-out-up   0.28s var(--ease-in) 0ms   forwards; }
.fp-leaving-up   .hero__right,
.fp-leaving-up   .hero__top                   { animation: el-out-down 0.28s var(--ease-in) 0ms   forwards; }
.fp-entering-down .hero__right,
.fp-entering-down .hero__top                  { animation: el-in-up   0.65s var(--ease) 0s both; }
.fp-entering-up   .hero__right,
.fp-entering-up   .hero__top                  { animation: el-in-down 0.65s var(--ease) 0s both; }

/* ── NAUČÍM ŤA: cards are animated individually by Motion (motion-anim.js) ──
   Neutralise the block-level .edu animation (defined above) so the grid
   container doesn't move as one unit — Motion springs each .edu__item in/out
   with a stagger instead. The .sec__head / .sec__sub fp animations stay. */
#naucim.fp-entering-down .edu,
#naucim.fp-entering-up   .edu,
#naucim.fp-leaving-down  .edu,
#naucim.fp-leaving-up    .edu                 { animation: none; }


/* ─── SECTIONS ─── */
.sec {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}

/* Cream sections */
.sec--cream {
  --bg: var(--cream); --fg: var(--blk);
  --fgm: var(--muted); --bdr: rgba(13,12,9,.1); --bdr-h: rgba(13,12,9,.22);
  background: var(--cream);
  color: var(--blk);
}

/* Dark sections */
.sec--dark {
  --bg: var(--blk); --fg: var(--cream);
  --fgm: rgba(243,237,224,.45); --bdr: rgba(243,237,224,.1); --bdr-h: rgba(243,237,224,.22);
  background: var(--blk);
  color: var(--cream);
}

.sec--dark .eyebrow { color: rgba(243,237,224,.4); }
.sec--dark .muted   { color: rgba(243,237,224,.45); }
.sec--dark .edu__n  { color: rgba(243,237,224,.06); }

/* Yellow borders on edu grid in the dark Naučím ťa section */
#naucim .edu {
  border-top-color: rgba(242,194,0,0.35);
  border-left-color: rgba(242,194,0,0.35);
}
#naucim .edu__item {
  border-right-color: rgba(242,194,0,0.35);
  border-bottom-color: rgba(242,194,0,0.35);
}

/* Giant section number decoration */
.sec__deco {
  position: absolute;
  top: -0.1em; right: -0.05em;
  font-family: var(--ff-d);
  font-size: clamp(180px, 30vw, 360px);
  line-height: 0.8;
  letter-spacing: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.04;
  color: currentColor;
  overflow: hidden;
}

.sec__head { margin-bottom: 72px; }

.sec__head .eyebrow { display: block; text-align: center; margin-bottom: 28px; }

.sec__title {
  font-family: var(--ff-d);
  font-size: clamp(64px, 11vw, 148px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin-top: 8px;
}

/* Force single line — shrinks font so the full title fits without wrapping */
.sec__title--single {
  font-size: clamp(40px, 7.5vw, 110px);
  white-space: nowrap;
}

.sec__sub {
  font-size: 17px;
  color: var(--fgm);
  line-height: 1.75;
  max-width: 500px;
  margin-top: 20px;
}

/* ─── ACCORDION ─── */
.acc { border-top: 1px solid var(--bdr); margin-bottom: 72px; }

.acc__row { border-bottom: 1px solid var(--bdr); }

.acc__hd {
  width: 100%;
  display: grid;
  grid-template-columns: 52px 1fr 36px;
  align-items: center; gap: 20px;
  padding: 24px 0;
  text-align: left;
  cursor: none;
  transition: background 0.2s;
}

.acc__hd:hover { background: rgba(255,255,255,0.03); }
.acc__hd:focus-visible { outline: 2px solid var(--yel); outline-offset: -2px; }

.acc__n {
  font-family: var(--ff-s); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--fgm);
}

.acc__label {
  font-family: var(--ff-s);
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 700; letter-spacing: 0.01em;
  transition: color 0.2s;
}

.acc__hd:hover .acc__label { color: var(--yel); }
.acc__row[data-open] .acc__label { color: var(--yel); }

/* Cross icon */
.acc__cross {
  width: 20px; height: 20px;
  position: relative; flex-shrink: 0;
  color: var(--fgm);
  transition: color 0.2s, transform 0.4s var(--ease);
}

.acc__row[data-open] .acc__cross { transform: rotate(45deg); color: var(--blk); }

.acc__cross span {
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}

.acc__cross span:nth-child(1) { width: 100%; height: 1.5px; top: 50%; left: 0; transform: translateY(-50%); }
.acc__cross span:nth-child(2) { width: 1.5px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); transition: opacity 0.3s; }

/* Body */
.acc__bd {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
  overflow: hidden;
}

.acc__row[data-open] .acc__bd { grid-template-rows: 1fr; }

.acc__bd-in { min-height: 0; }
.acc__row[data-open] .acc__bd-in { padding: 0 0 32px 72px; }

.acc__bd-in p {
  font-size: 16px; color: var(--fgm);
  line-height: 1.8; max-width: 540px; margin-bottom: 18px;
}

.acc__list { display: flex; flex-wrap: wrap; gap: 6px 24px; }

.acc__list li {
  font-family: var(--ff-s);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fgm);
  padding-left: 16px; position: relative;
}

.acc__list li::before { content: '—'; position: absolute; left: 0; color: var(--yel); }

/* ─── STUDIO CTA PANEL ─── */
.studio-cta {
  margin-top: 48px;
  padding: 36px 40px;
  border: 1px solid rgba(242,194,0,0.25);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
  background: #1e1c18;
  transition: border-color 0.25s;
}

.studio-cta:hover { border-color: var(--yel); }

.studio-cta__text {
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.55;
  max-width: 500px;
  letter-spacing: 0.005em;
}

.studio-cta .btn {
  font-size: 15px;
  padding: 17px 32px;
  letter-spacing: 0.08em;
}

/* ─── VYTVORÍM BENEFITS ─── */
.vytv-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bdr);
  border: 1px solid var(--bdr);
  margin-bottom: 2px;
}

.vytv-item {
  padding: 40px 36px;
  background: var(--cream);
  position: relative;
  transition: background 0.25s;
}

.vytv-item:hover { background: var(--cream-d); }

.vytv-n {
  font-family: var(--ff-d);
  font-size: 64px; line-height: 0.8;
  color: rgba(13,12,9,0.06);
  position: absolute; top: 16px; right: 20px;
  pointer-events: none;
}

.vytv-item h3 {
  font-family: var(--ff-s);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700; letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.vytv-item p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}

.vytv-wrap {
  position: relative;
}

.vytv-arrow {
  position: absolute;
  left: calc(100% + 16px);
  bottom: -100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--muted);
}

.vytv-arrow__svg {
  width: 52px; height: 92px;
  opacity: 0.55;
}

.vytv-arrow span {
  font-family: var(--ff-s);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.65;
  transform: rotate(-8deg);
  transform-origin: left center;
  display: inline-block;
}

@media (max-width: 860px) {
  .vytv-wrap { padding-right: 0; }
  .vytv-arrow { display: none; }
}


/* 4th card — same cream styling as siblings, content centered vertically */
.vytv-item--why {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vytv-why {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid var(--bdr);
}

.vytv-why li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bdr);
  font-family: var(--ff-s);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.vytv-check {
  color: var(--yel-dk);
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .vytv-benefits { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .vytv-benefits { grid-template-columns: 1fr; }
}

/* ─── FEATURED PROJECT ─── */
.feat { border-top: 1px solid var(--bdr); padding-top: 56px; }

.feat__label { margin-bottom: 28px; }

.feat__grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px; align-items: center;
}

.feat__img { position: relative; }

.feat__yr {
  position: absolute; bottom: 16px; left: 16px;
  font-family: var(--ff-d); font-size: 32px; line-height: 1;
  color: var(--yel);
  background: rgba(13,12,9,0.65);
  border: 1px solid rgba(242,194,0,0.4);
  padding: 4px 12px 2px;
  pointer-events: none;
}

.feat__copy .eyebrow { display: block; margin-bottom: 14px; }

.feat__title {
  font-family: var(--ff-d);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.92; margin-bottom: 18px;
}

.feat__copy p { font-size: 15px; color: var(--fgm); line-height: 1.75; margin-bottom: 28px; max-width: 380px; }

/* ─── EDUCATION ─── */
.edu {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--bdr);
  border-left: 1px solid var(--bdr);
}

.edu__item {
  padding: 40px;
  border-right: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  position: relative;
  transition: background 0.25s;
}

.edu__item:hover { background: rgba(242,194,0,0.04); }

.edu__n {
  font-family: var(--ff-d);
  font-size: 72px; line-height: 0.8;
  color: rgba(13,12,9,0.06);
  position: absolute; top: 16px; right: 20px;
  pointer-events: none;
}

.edu__item h3 {
  font-family: var(--ff-s);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700; letter-spacing: 0.02em;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.edu__item p { font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 320px; }

.edu__item--soon { opacity: 0.55; }

.edu__item--full {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.edu__item--full p { max-width: 480px; }
.edu__item--full .edu__cta { align-self: center; }

.edu__cta {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--ff-s);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.edu__cta:hover { color: var(--fg); border-color: var(--fg); }

.edu__cta--yel { color: var(--yel-dk); }
.edu__cta--yel:hover { color: var(--yel-dk); border-color: var(--yel); }

.badge {
  font-family: var(--ff-s); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--yel-dk); border: 1px solid var(--yel);
  padding: 3px 8px;
}

/* ─── QUOTE SECTION ─── */
.quote-sec {
  background: var(--yel);
  color: var(--blk);
  padding: 80px 0;
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}

.bigq {
  font-family: var(--ff-d);
  font-size: clamp(52px, 10vw, 136px);
  line-height: 0.9;
  letter-spacing: 0.015em;
  font-style: normal;
}

.bigq__cite {
  display: block; font-family: var(--ff-s);
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.08em; font-style: normal;
  color: rgba(13,12,9,0.55);
  margin-top: 40px; line-height: 1;
}

/* ─── ABOUT ─── */
.about {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px; align-items: start;
}

.about__img { position: relative; }

.about__photo {
  width: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(0.15);
}

.about__badge {
  position: absolute; bottom: -1px; left: -1px; right: 0;
  background: var(--yel);
  padding: 10px 16px;
  font-family: var(--ff-s);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blk);
}

.about__title {
  font-family: var(--ff-d);
  font-size: clamp(60px, 9vw, 120px);
  line-height: 0.9;
  margin: 12px 0 28px;
}

.about__copy .eyebrow { display: block; }

.about__text p {
  font-size: 16px; color: var(--muted);
  line-height: 1.8; margin-bottom: 16px; max-width: 480px;
}

.about__text strong { color: var(--blk); }

.about__stats {
  display: flex; gap: 48px;
  padding: 28px 0;
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  margin: 28px 0 32px;
}

.stat { display: flex; flex-direction: column; }

.stat__n, .stat__s {
  font-family: var(--ff-d);
  font-size: 56px; line-height: 1;
}

.stat__n { display: inline; }
.stat__s { display: inline; color: var(--yel-dk); }

.stat small {
  font-family: var(--ff-s); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px;
}

/* ─── PROJECTS GRID ─── */
.proj-scroll {
  padding: 0 40px 40px;
}

.proj-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 280px));
  gap: 2px;
  justify-content: center;
}

#kto-som { padding-bottom: 0; }
#kto-som > .wrap { padding-bottom: 120px; }

/* Center the PROJEKTY section heading */
#spoluprace .sec__head { text-align: center; }

/* Project card real image */
.proj-card__img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: filter 0.5s var(--ease);
}

.proj-card:hover .proj-card__img { filter: grayscale(0); }

.proj-card__thumb {
  filter: grayscale(1);
  transition: filter 0.5s var(--ease);
}

.proj-card:hover .proj-card__thumb { filter: grayscale(0); }

/* Featured section image — landscape banner */
.feat__img .proj-card__img {
  aspect-ratio: 16/9;
}

/* Project card video thumbnail */
.proj-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  background: var(--blk-2);
}

.proj-card__thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  /* grayscale set above via filter rule */
}

.proj-card__play {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,12,9,0.35);
  border: none; cursor: pointer;
  transition: background 0.25s;
}

.proj-card__play:hover { background: rgba(13,12,9,0.55); }

.proj-card__play svg {
  width: 52px; height: 52px;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* Video modal */
.vid-modal {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(13,12,9,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}

.vid-modal.open { opacity: 1; pointer-events: all; }

.vid-modal__inner {
  width: min(92vw, 1100px);
  aspect-ratio: 16/9;
  position: relative;
}

.vid-modal__video {
  width: 100%; height: 100%;
  background: #000;
  outline: none;
}

.vid-modal__close {
  position: fixed;
  top: 24px; right: 28px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: rgba(243,237,224,0.7);
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}

.vid-modal__close:hover { color: var(--cream); transform: rotate(90deg); }
.vid-modal__close svg { width: 28px; height: 28px; }

.proj-card {
  display: block;
  background: var(--blk-2);
  border: 1px solid rgba(243,237,224,.08);
  transition: border-color 0.25s, transform 0.4s var(--ease);
  cursor: none;
  color: inherit;
}

.proj-card:hover {
  border-color: var(--yel);
  transform: translateY(-6px);
}

.proj-card .ph--proj { width: 100%; }

.proj-card__info {
  padding: 12px 14px 16px;
  border-top: 1px solid rgba(243,237,224,0.08);
}

.proj-card__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
  font-family: var(--ff-s); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(243,237,224,.35);
}

.proj-card__info h3 {
  font-family: var(--ff-s);
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cream); margin-bottom: 8px;
}

.proj-card:hover .proj-card__info h3 { color: var(--yel); }

.proj-card__info p { font-size: 12px; color: rgba(243,237,224,.45); line-height: 1.6; }

/* CTA card */
.proj-card--cta {
  background: var(--yel);
  border-color: var(--yel);
  display: flex; align-items: center; justify-content: center;
}

.proj-card--cta:hover { transform: translateY(-6px); border-color: var(--yel-dk); }

.proj-card__cta-inner {
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 16px;
}

.proj-card--cta .eyebrow { color: rgba(13,12,9,.5); }

.proj-card--cta h3 {
  font-family: var(--ff-d);
  font-size: 44px; line-height: 0.92;
  color: var(--blk);
}

/* Aftercode Studio card */
.proj-card--aftercode {
  background: var(--blk);
  border-color: rgba(243,237,224,0.12);
}

.proj-card--aftercode:hover { border-color: var(--yel); }
.proj-card--aftercode:hover .proj-card__info h3 { color: var(--yel); }

.proj-card__ac-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  background: #0d0c09;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 24px 28px;
  overflow: hidden;
}

.proj-card__ac-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(242,194,0,0.04) 0px,
    rgba(242,194,0,0.04) 1px,
    transparent 1px,
    transparent 12px
  );
}

.proj-card__ac-name {
  font-family: var(--ff-d);
  font-size: clamp(52px, 7vw, 80px);
  line-height: 0.88;
  letter-spacing: 0.04em;
  color: var(--cream);
  position: relative; z-index: 1;
}

.proj-card__ac-tag {
  position: absolute;
  top: 20px; right: 22px;
  font-family: var(--ff-s);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--yel);
  border: 1px solid var(--yel);
  padding: 3px 8px;
}

.proj-card__link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--ff-s);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--yel);
  border-bottom: 1px solid rgba(242,194,0,0.35);
  transition: border-color 0.2s;
}

.proj-card__link:hover { border-color: var(--yel); }

.proj-drag-hint {
  padding: 16px 40px 0;
  font-family: var(--ff-s); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(243,237,224,.25);
}

/* ─── PROJ WIDE CARDS ─── */
.proj-wide-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bdr);
  border: 1px solid var(--bdr);
  margin-top: 40px;
}

.proj-wide {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 36px 40px 36px;
  transition: background 0.25s;
  overflow: hidden;
}

/* ── Aftercode card ── */
.proj-wide--aftercode {
  background: rgba(243,237,224,0.05);
  justify-content: flex-end;
}

.proj-wide--aftercode:hover { background: var(--blk-2); }

/* Ghost AFTERCODE text fills background */
.proj-wide__ac-name {
  position: absolute;
  top: 50%; left: 36px;
  transform: translateY(-50%);
  font-family: var(--ff-d);
  font-size: clamp(64px, 8vw, 120px);
  line-height: 0.88;
  letter-spacing: 0.04em;
  color: rgba(243,237,224,0.06);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.proj-wide__ac-tag {
  position: absolute;
  top: 28px; right: 28px;
  font-family: var(--ff-s);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--yel);
  border: 1px solid rgba(242,194,0,0.5);
  padding: 3px 8px;
}

.proj-wide__info {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 8px;
}

.proj-wide__info h3 {
  font-family: var(--ff-s);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700; letter-spacing: 0.02em;
  color: var(--cream);
  transition: color 0.2s;
}

.proj-wide--aftercode:hover .proj-wide__info h3 { color: var(--yel); }

.proj-wide__info p {
  font-size: 14px;
  color: rgba(243,237,224,.45);
  line-height: 1.6;
  max-width: 380px;
}

/* ── CTA card ── */
.proj-wide--cta {
  background: var(--yel);
  justify-content: flex-start;
  border: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}

.proj-wide--cta:hover {
  background: var(--blk);
  border-color: var(--yel);
}

.proj-wide__cta-default {
  position: relative; z-index: 1;
  width: 100%;
  transition: opacity 0.3s var(--ease);
}

.proj-wide__cta-hover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.proj-wide--cta:hover .proj-wide__cta-default {
  opacity: 0;
  pointer-events: none;
}

.proj-wide--cta:hover .proj-wide__cta-hover {
  opacity: 1;
  pointer-events: all;
}

.proj-wide--cta .proj-wide__info { gap: 20px; }

.proj-wide--cta .eyebrow { color: rgba(13,12,9,.5); }

.proj-wide--cta .proj-wide__info h3 {
  font-family: var(--ff-d);
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 0.9;
  color: var(--blk);
}

.proj-wide__cta-btn {
  position: absolute;
  bottom: 28px; right: 28px;
  background: var(--blk);
  color: var(--yel);
  border-color: var(--blk);
  transition: opacity 0.3s var(--ease);
}

.proj-wide--cta:hover .proj-wide__cta-btn {
  opacity: 0;
  pointer-events: none;
}

.proj-wide__cta-label {
  font-family: var(--ff-d);
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 0.08em;
  color: var(--yel);
  text-align: center;
  line-height: 1;
  text-shadow:
    0 0 40px rgba(242,194,0,0.6),
    0 0 80px rgba(242,194,0,0.3);
}

@media (max-width: 860px) {
  .proj-wide-row { grid-template-columns: 1fr; }
  .proj-wide { min-height: 220px; }
  .proj-wide__ac-name { font-size: clamp(56px, 14vw, 100px); }
}

/* On touch devices: disable hover effect, show default state always */
@media (hover: none) {
  .proj-wide--cta:hover { background: var(--yel); border-color: transparent; }
  .proj-wide--cta:hover .proj-wide__cta-default { opacity: 1; pointer-events: auto; }
  .proj-wide--cta:hover .proj-wide__cta-hover   { opacity: 0; pointer-events: none; }
  .proj-wide--cta:hover .proj-wide__cta-btn     { opacity: 1; pointer-events: auto; }
}

/* ─── PROJ MORE BUTTON ─── */
.proj-more-btn {
  width: 100%;
  margin-top: 40px;
  padding: 20px 28px;
  border: 1px solid var(--bdr);
  background: transparent;
  color: var(--fgm);
  font-family: var(--ff-s);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; align-items: center; gap: 16px;
  cursor: none;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.proj-more-btn:hover {
  border-color: var(--yel);
  color: var(--cream);
  background: rgba(242,194,0,0.04);
}

.proj-more-btn__count {
  font-family: var(--ff-d);
  font-size: 30px; letter-spacing: 0.04em;
  color: var(--yel); line-height: 1;
  margin-right: auto;
}

.proj-more-btn__arrow {
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}

.proj-more-btn[aria-expanded="true"] .proj-more-btn__arrow { transform: rotate(180deg); }

/* ─── PROJ MORE GRID ─── */
.proj-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--ease);
}

.proj-more.open { grid-template-rows: 1fr; }

.proj-more__inner { overflow: hidden; }

.proj-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bdr);
  border: 1px solid var(--bdr);
  margin-top: 2px;
  padding-top: 0;
}

.proj-tile {
  background: var(--blk);
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), background 0.25s;
}

.proj-tile:hover { background: var(--blk-2); }

.proj-tile .ph--proj { width: 100%; }

.proj-tile__info {
  padding: 18px 22px 24px;
}

.proj-tile__info .eyebrow { margin-bottom: 6px; display: block; }

.proj-tile__info h3 {
  font-family: var(--ff-s);
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cream);
}

@media (max-width: 680px) {
  .proj-more__grid { grid-template-columns: 1fr; }
}

/* ─── MEDIA ROW ─── */
.media-row {
  padding: 32px 0;
  border-top: 1px solid var(--bdr);
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}

.media-names {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--ff-s); font-size: 16px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cream);
}

.med-sep { color: var(--bdr-h); }

/* Compact Referencie layout — all 5 cards in one viewport */
.ref-wrap { padding-top: 0 !important; }
.ref-head  { margin-bottom: 28px !important; }

/* ─── REFERENCIE ─── */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bdr);
  border: 1px solid var(--bdr);
  margin-top: 48px;
}

.ref-card {
  background: var(--blk);
  padding: 24px 28px 22px;
  display: flex; flex-direction: column;
  gap: 20px;
  transition: background 0.25s;
}

.ref-card:hover { background: var(--blk-2); }

.ref-card__ql {
  font-family: var(--ff-d);
  font-size: 52px;
  line-height: 1;
  color: var(--yel);
  display: block;
  margin-bottom: -34px;
}

.ref-card__quote {
  font-size: 14px; line-height: 1.75;
  color: rgba(243,237,224,0.8);
  flex: 1;
}

.ref-card__more {
  align-self: flex-start;
  font-family: var(--ff-s);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--yel);
  background: none; border: none;
  padding: 0; cursor: pointer;
  transition: opacity 0.2s;
}
.ref-card__more:hover { opacity: 0.7; }

/* ─── REFERENCE MODAL ─── */
.ref-modal {
  position: fixed; inset: 0;
  z-index: 900;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.ref-modal.open { opacity: 1; pointer-events: all; }

.ref-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(13,12,9,0.82);
  backdrop-filter: blur(4px);
}

.ref-modal__inner {
  position: relative; z-index: 1;
  background: var(--blk);
  border: 1px solid var(--bdr);
  padding: 48px 52px 44px;
  max-width: 640px; width: calc(100% - 48px);
  display: flex; flex-direction: column; gap: 20px;
  transform: translateY(16px);
  transition: transform 0.35s var(--ease);
}
.ref-modal.open .ref-modal__inner { transform: translateY(0); }

.ref-modal__close {
  position: absolute; top: 20px; right: 20px;
  background: none; border: none;
  color: var(--fgm); cursor: pointer;
  transition: color 0.2s, transform 0.25s;
  padding: 4px;
}
.ref-modal__close:hover { color: var(--cream); transform: rotate(90deg); }

.ref-modal__quote {
  font-size: 14px; line-height: 1.8;
  color: rgba(243,237,224,0.85);
}

.ref-card__author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--bdr);
  margin-top: auto;
}

.ref-card__photo {
  width: 50px; height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  filter: grayscale(0.2);
}

.ref-card__avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid var(--bdr);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--fgm);
}

.ref-card__avatar svg { width: 26px; height: 26px; }

.ref-card__name {
  font-family: var(--ff-d);
  font-size: 18px; letter-spacing: 0.06em;
  color: var(--cream);
  display: block;
}

.ref-card__role {
  font-family: var(--ff-s);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fgm);
  display: block;
  margin-top: 3px;
}

/* Empty 6th slot — fills with card bg so the 1px gap lines become its visible borders */
.ref-grid::after {
  content: '';
  display: block;
  background: var(--blk);
}

@media (max-width: 860px) {
  .ref-grid { grid-template-columns: 1fr; }
  .ref-grid::after { display: none; }
}

/* ─── CONTACT ─── */
#kontakt { padding: 80px 0 0; }
.kontakt-wrap {
  height: 100%;
  display: flex; flex-direction: column;
  min-height: 0;
  max-width: 1320px;
}
.kontakt-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.contact-h {
  font-family: var(--ff-d);
  font-size: clamp(44px, 7.2vw, 92px);
  line-height: 0.9;
  letter-spacing: 0.015em;
  margin-bottom: 32px;
  overflow: hidden;
}

.contact-body {
  display: grid; grid-template-columns: 0.9fr 1.8fr;
  gap: 48px;
  border-top: 1px solid var(--bdr);
  padding-top: 28px;
}

.contact-links { display: flex; flex-direction: column; margin-bottom: 24px; }

.clink {
  display: flex; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--bdr);
  gap: 0; transition: color 0.2s; cursor: none;
}

.clink:hover { color: var(--yel-dk); }
.clink:hover .clink__arr { transform: translate(4px,-4px); }

.clink__lbl {
  font-family: var(--ff-s); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); min-width: 68px;
}

.clink__val {
  font-family: var(--ff-s); font-size: 16px; font-weight: 600;
  flex: 1; color: var(--blk);
  transition: color 0.2s;
}

.clink:hover .clink__val { color: var(--yel-dk); }

.clink__arr { flex-shrink: 0; color: var(--muted); transition: transform 0.25s var(--ease); }

.socials { display: flex; flex-wrap: wrap; gap: 0; }

.soc {
  font-family: var(--ff-s); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  padding: 8px 16px 8px 0;
  border-right: 1px solid var(--bdr); margin-right: 16px;
  transition: color 0.2s; cursor: none; white-space: nowrap;
}

.soc:last-child { border-right: none; }
.soc:hover { color: var(--yel-dk); }

/* Form */
.cform { display: flex; flex-direction: column; gap: 0; }

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bdr); margin-bottom: 1px; }

.cf-f {
  background: var(--cream-d);
  padding: 10px 16px; margin-bottom: 1px;
  transition: background 0.2s;
}

.cf-f:focus-within { background: rgba(242,194,0,0.08); }

.cf-f label {
  display: block; font-family: var(--ff-s);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
  transition: color 0.2s;
}

.cf-f:focus-within label { color: var(--yel-dk); }

.cf-f input, .cf-f select, .cf-f textarea {
  font-size: 15px; color: var(--blk); resize: none; line-height: 1.5;
}

.cf-f input::placeholder, .cf-f textarea::placeholder { color: rgba(13,12,9,.25); }
.cf-f select { cursor: pointer; }

.cform .btn { align-self: flex-start; margin-top: 14px; }

/* Honeypot field — hidden from humans, visible to bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0;
  pointer-events: none;
}

/* Form status line */
.cf-status {
  font-family: var(--ff-s); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; margin-top: 10px; min-height: 16px;
}
.cf-status--ok  { color: #2a7a3f; }
.cf-status--err { color: #c0392b; }

/* Per-field error state */
.cf-f { position: relative; }
.cf-f--err {
  background: rgba(192,57,43,0.06);
  box-shadow: inset 2px 0 0 #c0392b;
}
.cf-f--err label { color: #c0392b !important; }
.cf-f__err {
  display: block;
  font-family: var(--ff-s); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; color: #c0392b;
  margin-top: 6px;
}

/* ─── FOOTER (inline inside #kontakt, matches section bg) ─── */
.footer--inline {
  margin-top: auto;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: transparent; color: var(--blk);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px clamp(20px, 4vw, 40px);
  border-top: 1px solid var(--bdr);
}

.footer__col--brand { display: flex; flex-direction: column; gap: 4px; }

.footer__logo {
  font-family: var(--ff-d); font-size: 18px; letter-spacing: 0.08em;
  color: var(--blk);
  cursor: none; transition: color 0.2s;
}
.footer__logo:hover { color: var(--yel-dk); }

.footer__copy {
  font-family: var(--ff-s); font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted); margin: 0;
}

.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 18px;
}
.footer__legal a,
.footer__cookie-reset {
  font-family: var(--ff-s); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  background: none; border: none; padding: 0;
  cursor: none; transition: color 0.2s;
}
.footer__legal a:hover,
.footer__cookie-reset:hover { color: var(--yel-dk); }

.footer__mail {
  font-family: var(--ff-s); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--muted);
  transition: color 0.2s; cursor: none;
  justify-self: end;
}
.footer__mail:hover { color: var(--yel-dk); }

/* ─── COOKIE BANNER ─── */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  z-index: 600;
  background: var(--blk); color: var(--cream);
  border: 1px solid rgba(243,237,224,.12);
  border-left: 3px solid var(--yel);
  padding: 18px 22px;
  max-width: 720px; margin: 0 auto;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.cookie.show {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}

.cookie__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: 24px;
}

.cookie__txt h4 {
  font-family: var(--ff-d); font-size: 18px;
  letter-spacing: 0.04em; margin: 0 0 4px;
  color: var(--cream);
}
.cookie__txt p {
  font-family: var(--ff-s); font-size: 12.5px; line-height: 1.55;
  color: rgba(243,237,224,.7); margin: 0;
}
.cookie__txt a {
  color: var(--yel); text-decoration: underline;
  text-underline-offset: 2px; transition: opacity 0.2s;
}
.cookie__txt a:hover { opacity: 0.75; }

.cookie__acts { display: flex; gap: 10px; flex-shrink: 0; }

.cookie__btn {
  font-family: var(--ff-s); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 11px 18px; border: 1px solid transparent;
  cursor: none; transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.cookie__btn--ghost {
  background: transparent; color: rgba(243,237,224,.7);
  border-color: rgba(243,237,224,.25);
}
.cookie__btn--ghost:hover { color: var(--cream); border-color: var(--cream); }
.cookie__btn--yel {
  background: var(--yel); color: var(--blk);
  border-color: var(--yel);
}
.cookie__btn--yel:hover { background: var(--yel-dk); border-color: var(--yel-dk); }

@media (max-width: 640px) {
  .cookie__inner { grid-template-columns: 1fr; gap: 14px; }
  .cookie__acts { justify-content: stretch; }
  .cookie__btn { flex: 1; padding: 12px 14px; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .proj-track { grid-template-columns: repeat(2, minmax(0, 280px)); }
  .hero { padding: 80px 32px 0; }
  .sec  { padding: 80px 0; }
  .wrap { padding: 0 32px; }
  .feat__grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: 44px; }
  .about .ph--portrait { aspect-ratio: 4/3; max-width: 380px; }
  .contact-body { grid-template-columns: 1fr; gap: 44px; }

  .hero__portrait { max-width: 70vw; }
}

@media (max-width: 680px) {
  body { cursor: auto; }
  .cur { display: none; }
  a, button { cursor: pointer; }

  .nav  { padding: 0 20px; }
  .hero { padding: 72px 20px 0; height: 100svh; min-height: unset; }

  /* ── Mobile hero layout ──
     Title moves to the TOP so portrait rises from the bottom
     without text sitting on top of the person's face.
     The transparent PNG naturally puts the person in the lower
     portion and sky/empty in the upper portion under the title. */
  .hero__main {
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 0;
    padding-top: 4px;
  }
  .hero__right   { align-items: flex-start; }
  .hero__title   {
    font-size: clamp(46px, 13vw, 80px);
    text-align: left; line-height: 0.92;
    position: relative;
  }
  /* Thin centered separator between name and portrait — mobile only */
  .hero__title::after {
    content: '';
    display: block;
    width: 80%;
    max-width: 360px;
    height: 1px;
    background: rgba(13, 12, 9, 0.35);
    margin: 12px auto 0;
  }

  /* Portrait fills the lower portion — leaves clear space at top for title */
  .hero__portrait {
    height: clamp(280px, 48svh, 520px);
    max-width: 88vw;
  }

  /* Yellow accent bar: hidden on mobile */
  .hero__accent { display: none; }

  /* Cream gradient fade at the very bottom so portrait blends cleanly */
  .hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent, var(--cream));
    pointer-events: none;
    z-index: 2;
  }

  /* Scroll CTA floats over the portrait — absolutely pinned, no divider */
  .hero__foot {
    position: absolute;
    bottom: 36px;
    left: 0; right: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-top: none;
  }
  .hero__foot { display: none; }

  .wrap { padding: 0 20px; }
  .sec  { padding: 72px 0; }
  .quote-sec { padding: 72px 0; }
  .bigq { font-size: clamp(42px, 12vw, 72px); }
  .edu { grid-template-columns: 1fr; }
  .about__stats { gap: 28px; flex-wrap: wrap; }
  .cf-row { grid-template-columns: 1fr; }
  .contact-h { font-size: clamp(32px, 8.5vw, 52px); margin-bottom: 18px; line-height: 0.95; }
  .acc__hd { grid-template-columns: 40px 1fr 28px; gap: 12px; }
  .acc__label { font-size: 20px; }
  .acc__row[data-open] .acc__bd-in { padding-left: 52px; }
  .footer--inline {
    grid-template-columns: 1fr;
    text-align: center; gap: 12px;
    padding: 16px 18px;
  }
  .footer__col--brand { align-items: center; }
  .footer__mail { justify-self: center; }
  .overlay { padding: 64px 20px 24px; }
  .ol__t { font-size: clamp(38px, 11vw, 60px); }
  /* Projects — 2-column on mobile */
  .proj-scroll { padding: 0 20px 32px; }
  .proj-track  { grid-template-columns: 1fr 1fr; }
  .proj-card {
  }
  .proj-drag-hint { display: none; }
}

/* ─── ULTRAWIDE (21:9 and wider) ─── */
@media (min-width: 1680px) {

  /* Title scales up — remove the 200px cap */
  .hero__title { font-size: clamp(200px, 12vw, 320px); }

  /* Portrait fills more of the tall viewport */
  .hero__portrait {
    max-width: 36vw;
    height: clamp(400px, 94vh, 1400px);
  }

  /* Accent bar stretches further left */
  .hero__accent { left: 20%; }

  /* Ghost "AI" watermark — huge outline text behind the portrait */
  .hero::after {
    content: 'AI';
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-46%);
    font-family: var(--ff-d);
    font-size: 30vw;
    color: rgba(13,12,9,0.045);
    line-height: 1;
    letter-spacing: -0.04em;
    pointer-events: none;
    z-index: 0;
    user-select: none;
  }
}

/* ─── LEGAL SUBPAGES ─── */
.legal-page { background: var(--cream); color: var(--blk); cursor: auto; min-height: 100vh; }
.legal-page a, .legal-page button { cursor: pointer; }
.legal-page .legal-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px; border-bottom: 1px solid var(--bdr);
}
.legal-page .legal-nav a {
  font-family: var(--ff-d); font-size: 20px; letter-spacing: 0.08em;
  transition: color 0.2s;
}
.legal-page .legal-nav a:hover { color: var(--yel-dk); }
.legal-page .legal-nav .back {
  font-family: var(--ff-s); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.legal-page .legal-nav .back:hover { color: var(--blk); }
.legal-wrap {
  max-width: 760px; margin: 0 auto; padding: 80px 28px 120px;
}
.legal-wrap .eyebrow {
  font-family: var(--ff-s); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px;
}
.legal-wrap h1 {
  font-family: var(--ff-d); font-size: clamp(48px, 7vw, 88px);
  line-height: 0.95; letter-spacing: 0.015em; margin-bottom: 18px;
}
.legal-wrap .legal-meta {
  font-family: var(--ff-s); font-size: 12px; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--bdr);
}
.legal-wrap h2 {
  font-family: var(--ff-d); font-size: 28px; letter-spacing: 0.02em;
  margin: 44px 0 14px;
}
.legal-wrap h3 {
  font-family: var(--ff-s); font-size: 15px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 28px 0 8px; color: var(--blk);
}
.legal-wrap p, .legal-wrap li {
  font-family: var(--ff-b); font-size: 15px; line-height: 1.7;
  color: rgba(13,12,9,0.82); margin-bottom: 12px;
}
.legal-wrap ul, .legal-wrap ol { padding-left: 22px; margin: 8px 0 18px; }
.legal-wrap ul li { list-style: disc; }
.legal-wrap ol li { list-style: decimal; }
.legal-wrap a {
  color: var(--yel-dk); text-decoration: underline; text-underline-offset: 2px;
}
.legal-wrap a:hover { opacity: 0.75; }
.legal-wrap strong { font-weight: 600; }
.legal-wrap table {
  width: 100%; border-collapse: collapse; margin: 16px 0 24px;
  font-family: var(--ff-s); font-size: 14px;
}
.legal-wrap th, .legal-wrap td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--bdr);
}
.legal-wrap th {
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 11px; color: var(--muted);
}
.legal-foot {
  padding: 24px 28px; text-align: center;
  border-top: 1px solid var(--bdr);
  font-family: var(--ff-s); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
@media (max-width: 640px) {
  .legal-page .legal-nav { padding: 16px 20px; }
  .legal-wrap { padding: 48px 20px 80px; }
}

/* ═══════════════════════════════════════════
   MOBILE / TOUCH — natural scrolling, no snap
   Triggered on touch devices (no fine pointer) OR narrow viewports.
═══════════════════════════════════════════ */
@media (hover: none), (max-width: 860px) {
  /* Sections flow naturally — no forced viewport height, no clipping */
  .sec,
  .quote-sec {
    height: auto;
    min-height: auto;
    justify-content: flex-start;
    overflow: visible;
    padding: 64px 0;
  }

  /* Hero keeps its full-viewport feel, but content can breathe */
  .hero { min-height: 100svh; height: auto; }

  /* Kill all full-page transition animations on touch */
  .fp-leaving-down, .fp-leaving-up,
  .fp-entering-down, .fp-entering-up,
  .fp-leaving-down *, .fp-leaving-up *,
  .fp-entering-down *, .fp-entering-up * {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Reveal-on-scroll elements default to visible (no IO threshold blank state) */
  .rv, .rv-l { opacity: 1 !important; transform: none !important; }
  .rl > span { transform: none !important; }

  /* Hide desktop-only decorations on small screens */
  .side,
  .edge,
  .progress-bar,
  .vytv-arrow,
  .sec__deco { display: none; }
}

/* ═══════════════════════════════════════════
   MOBILE LAYOUTS — ≤ 720px
═══════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Section heads */
  .sec__head { margin-bottom: 32px; }
  .sec__title { font-size: clamp(44px, 13vw, 78px); line-height: 0.95; }
  .sec__title--single { font-size: clamp(44px, 13vw, 78px); }
  .sec__sub { font-size: 15px; }

  /* AI PRODUKCIA — already collapses, but tighten paddings */
  .vytv-item { padding: 28px 22px; min-height: auto; }
  .vytv-n { font-size: 48px; top: 12px; right: 14px; }
  .studio-cta { padding: 26px 22px; }
  .studio-cta__text { font-size: 14px; font-weight: 600; }
  .studio-cta .btn { font-size: 14px; padding: 15px 26px; }

  /* PROJEKTY pt.1 — stack single column with constrained width + landscape images */
  .proj-scroll { padding: 0 20px; overflow: visible; }
  .proj-track  { grid-template-columns: 1fr; gap: 14px; max-width: 380px; margin: 0 auto; }
  .proj-card { width: auto; min-width: 0; }
  .proj-card__img,
  .proj-card__media { aspect-ratio: 4/3; }
  .feat__img .proj-card__img { aspect-ratio: 16/9; }
  .proj-card__info { padding: 14px 16px; }
  .proj-card h3 { font-size: 16px; }
  .proj-card p  { font-size: 13px; }

  /* PROJEKTY pt.2 — stack the wide row */
  .proj-wide-row { grid-template-columns: 1fr; margin-top: 24px; }
  .proj-wide { min-height: 220px; padding: 28px 24px; }
  .proj-wide__ac-name { font-size: 64px; left: 24px; }
  .proj-wide__info h3 { font-size: 22px; }

  /* REFERENCIE — already collapses to 1 col, tighten card padding */
  .ref-grid { margin-top: 28px; }
  .ref-card { padding: 22px 22px 20px; }
  .ref-card__quote { font-size: 14px; }

  /* KTO SOM — stat row wraps */
  .about__title { font-size: clamp(64px, 18vw, 110px); }
  .featured__rail { animation-duration: 38s; }
  .featured__logo { height: 24px; }

  /* QUOTE — already scales */
  .quote-sec { padding: 80px 0; }

  /* CONTACT — already collapses, but make the heading tighter */
  #kontakt { padding: 56px 0 0; }
  #kontakt .wrap { padding-left: 14px; padding-right: 14px; }
  .kontakt-wrap { padding-bottom: 0; max-width: none; }
  .kontakt-main { padding-bottom: 40px; }
  .contact-body { padding-top: 20px; gap: 32px; }
  .contact-info { margin-bottom: 8px; }
  .cform .btn { align-self: center; }
  .cf-status { text-align: center; }

  /* Socials — one row, smaller text */
  .socials { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
  .soc {
    font-size: 10px; letter-spacing: 0.06em;
    padding: 6px 6px 6px 0;
    margin-right: 6px;
    border-right-width: 1px;
    flex: 0 0 auto;
  }
  .soc:last-child { margin-right: 0; padding-right: 0; }

  /* Inline footer — single column, smaller text */
  .footer--inline {
    width: 100%;
    margin-left: 0;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 20px;
    text-align: center;
  }
  .footer__col--brand { align-items: center; }
  .footer__legal { justify-content: center; }
  .footer__mail { justify-self: center; }

  /* Cookie banner narrower */
  .cookie { padding: 16px 18px; left: 12px; right: 12px; bottom: 12px; }
  .cookie__txt h4 { font-size: 16px; }
  .cookie__txt p  { font-size: 12px; }

  /* HERO — AI_KTIVISTA centered, TOMÁŠ + JEVČIK each on their own row */
  .hero__main { align-items: flex-start; justify-content: stretch; }
  .hero__right { width: 100%; align-items: stretch; gap: 32px; }
  .hero__info-brand { align-self: center; text-align: center; }
  .hero__title { width: 100%; display: block; }
  .hero__line { display: block; }
  /* Shift each name toward center so the trailing letters overlap past the midline */
  .hero__line--1 { text-align: left;  transform: translateX(14%); }
  .hero__line--2 { text-align: right; transform: translateX(-14%); margin-top: -4px; }

  /* Overlay menu — center everything on mobile */
  .overlay {
    padding: 80px 20px 24px;
    justify-content: center;
    text-align: center;
  }
  .overlay__nav { margin: 0 auto; align-items: center; }
  .ol {
    justify-content: center;
    text-align: center;
    border-bottom: none;
    padding: 10px 0;
    gap: 12px;
  }
  .ol__n { display: none; }
  .ol__t { font-size: clamp(34px, 9.5vw, 56px); }
  .overlay__foot {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 6px;
    margin-top: 24px;
  }
}

/* ═══════════════════════════════════════════
   SMALL MOBILE — ≤ 480px
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .sec  { padding: 48px 0; }

  .nav { padding: 0 16px; height: 56px; }
  .nav__logo { font-size: 15px; }
  .nav__btn  { font-size: 11px; }

  .sec__title { font-size: clamp(40px, 14vw, 64px); }

  /* Hero — tighter for small phones */
  .hero__title { font-size: clamp(38px, 12vw, 64px); line-height: 0.92; }
  .hero__portrait { height: clamp(240px, 42svh, 420px); }

  /* Forms — single column inputs already handled */
  .cf-f { padding: 10px 14px; }

  /* Contact heading shrinks more */
  .contact-h { font-size: clamp(28px, 8vw, 44px); margin-bottom: 14px; }

  /* Stack cookie action buttons */
  .cookie__inner { grid-template-columns: 1fr; gap: 12px; }
  .cookie__acts  { width: 100%; }
  .cookie__btn   { flex: 1; }
}