/* ==========================================================================
   Hubert portfolio – main styles
   Tokens live in tokens.css. Only transform and opacity are animated.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
html:not(.lenis){ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.lenis){ scroll-behavior: auto; } }
body, h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }
img, picture, video, svg, canvas, iframe{ display: block; max-width: 100%; }
img, video{ height: auto; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ cursor: pointer; }
a{ color: inherit; }
table{ border-collapse: collapse; }

body{
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out);
}

/* Page-wide vertical grid lines. Fixed layer, composited once. */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  background-position: center top;
  opacity: 0.55;
}

/* Orange light on the page background. One fixed layer under the content: it never moves, so the
   browser paints it once. Two child layers: the strong hero light top right, and two softer lights
   lower left and lower right for the rest of the page. While the hero scrolls away, GSAP scrub
   (js/motion.js) dims the first and brings in the second. Opacity only, no transforms. */
.glow{ position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.glow__hero, .glow__low{ position: absolute; inset: 0; display: block; will-change: opacity; }
.glow__hero{
  background: radial-gradient(min(750px, 75vw) min(600px, 60vw) at calc(100% + min(520px, 40vw) - min(750px, 75vw)) calc(min(600px, 60vw) - 34vh),
    rgb(var(--glow-rgb) / var(--glow-a)), rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.42)) 48%, rgb(var(--glow-rgb) / 0) 100%);
}
.glow__low{
  opacity: 0;
  background:
    radial-gradient(min(550px, 65vw) min(550px, 65vw) at -1% 80%, rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.6)), rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.25)) 48%, rgb(var(--glow-rgb) / 0) 100%),
    radial-gradient(min(600px, 70vw) min(500px, 58vw) at 101% 18%, rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.36)), rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.15)) 48%, rgb(var(--glow-rgb) / 0) 100%);
}
/* No GSAP (reduced motion, script error): the hero light stays, the soft lights show at half strength. */
html:not(.motion-ok) .glow__low{ opacity: 0.5; }

::selection{ background: var(--accent); color: var(--on-accent); }

:focus-visible{
  outline: 3px solid var(--focus-halo);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link{
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-2) var(--ease-out);
}
.skip-link:focus{ transform: translateY(0); }

.mono{ font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; }
.muted{ color: var(--ink-2); }
.container{ width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

p{ max-width: var(--measure); }
p + p{ margin-top: var(--s-4); }
strong, b{ font-weight: 650; }
a:not([class]){ text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:not([class]):hover{ text-decoration-thickness: 2px; }

.icon{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1.5px solid var(--btn-bd); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none;
  overflow: hidden; isolation: isolate;
  transition: transform var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out);
}
.btn::before{
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: var(--accent); border-radius: inherit;
  transform: translateY(102%);
  transition: transform var(--t-2) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before{ transform: translateY(0); }
.btn:hover, .btn:focus-visible{ color: var(--on-accent); border-color: var(--accent); }
.btn:active{ transform: scale(0.97); }
.btn--primary{ --btn-bg: var(--ink); --btn-fg: var(--bg); --btn-bd: var(--ink); }
.btn--on-dark{ --btn-fg: #eeeeea; --btn-bd: rgb(238 238 234 / 0.6); }
.btn[disabled]{ opacity: 0.45; cursor: not-allowed; }
.btn[disabled]::before{ display: none; }
.btn .icon{ width: 18px; height: 18px; }

.icon-btn, .round-btn{
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink);
  transition: transform var(--t-2) var(--ease-out), background-color var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out), color var(--t-2);
}
.icon-btn:hover, .round-btn:hover{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.icon-btn:active, .round-btn:active{ transform: scale(0.92); }
.round-btn{ width: 52px; height: 52px; }
.round-btn svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .icon--sun{ display: none; }
:root[data-theme="dark"] .icon-btn .icon--sun{ display: block; }
:root[data-theme="dark"] .icon-btn .icon--moon{ display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .icon--sun{ display: block; }
  :root:not([data-theme="light"]) .icon-btn .icon--moon{ display: none; }
}

/* ---------- Nav ---------- */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  /* Solid enough to read over anything, no backdrop blur: blurring a moving background and the
     WebGL canvas behind it would cost a full repaint of the bar in every frame. */
  background: rgb(var(--bg-rgb) / 0.97);
  border-bottom: 1px solid var(--line);
}
.nav__inner{
  display: flex; align-items: center; gap: var(--s-5);
  max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto;
  padding: 10px var(--gutter);
  min-height: 64px;
}
.nav__brand{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-stretch: 125%; font-weight: 850; letter-spacing: -0.01em; text-transform: uppercase; }
.nav__mark{ display: block; width: 30px; height: 30px; flex: none; }
.nav__name{ font-size: 1rem; }
.nav__links{ position: relative; margin-left: auto; }
.nav__links ul{ display: flex; gap: 2px; }
.nav__links a{
  position: relative; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 10px 12px; border-radius: var(--r-pill);
  font-size: 0.92rem; font-weight: 520; text-decoration: none; color: var(--ink-2);
  transition: color var(--t-1) var(--ease-out);
}
.nav__links a:hover, .nav__links a[aria-current="true"]{ color: var(--ink); }
.nav__num{ font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-2); }
.nav__links a[aria-current="true"] .nav__num{ color: var(--accent-ink); }
.nav__indicator{
  position: absolute; left: 0; bottom: 2px; height: 2px; width: 1px;
  background: var(--accent); transform-origin: 0 50%;
  transform: translateX(var(--ix, 0px)) scaleX(var(--iw, 0));
  transition: transform var(--t-3) var(--ease-out);
}
.nav__tools{ display: flex; align-items: center; gap: 8px; }
.nav__menu-btn{ display: none; }
.nav__progress{ position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.nav__progress span{ display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

@media (max-width: 960px) {
  .nav__menu-btn{
    display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px;
    border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: transparent;
    font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .nav__burger{ position: relative; width: 16px; height: 10px; }
  .nav__burger i{ position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--t-2) var(--ease-out); }
  .nav__burger i:first-child{ top: 0; }
  .nav__burger i:last-child{ bottom: 0; }
  .nav__menu-btn[aria-expanded="true"] .nav__burger i:first-child{ transform: translateY(4.25px) rotate(45deg); }
  .nav__menu-btn[aria-expanded="true"] .nav__burger i:last-child{ transform: translateY(-4.25px) rotate(-45deg); }
  .nav__links{ position: static; margin-left: auto; }
  .nav__indicator{ display: none; }
  .nav__links ul{
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out), visibility 0s linear var(--t-2);
  }
  .nav.is-open .nav__links ul{ visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__links a{ width: 100%; padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-stretch: 115%; font-weight: 750; font-size: 1.35rem; color: var(--ink); text-transform: uppercase; }
  .no-js .nav__links ul{ position: static; visibility: visible; opacity: 1; transform: none; flex-direction: row; flex-wrap: wrap; box-shadow: none; border: 0; padding: 0; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 96px var(--gutter) clamp(28px, 5vh, 56px);
  overflow: hidden;
  isolation: isolate;
}

.hero__stage{
  --fs: clamp(52px, 11vw, 184px);
  position: relative;
  display: grid; place-items: center;
  min-height: calc(var(--fs) * 2.3);
  perspective: calc(var(--fs) * 13);
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}
@media (max-width: 600px) { .hero__stage{ --fs: clamp(48px, 16.5vw, 120px); min-height: calc(var(--fs) * 3); } }
.hero__bar{
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--fs) * 0.92); height: calc(var(--fs) * 1.95);
  margin: calc(var(--fs) * -0.975) 0 0 calc(var(--fs) * -0.46);
  background: var(--accent);
  border-radius: 2px;
  transform: translateZ(0);
  transform-origin: 50% 100%;
}
.hero__title{ position: relative; font-size: var(--fs); line-height: 1; transform-style: preserve-3d; }
.cyl{
  position: relative; display: block;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 900;
  letter-spacing: -0.01em; text-transform: uppercase;
  transform-style: preserve-3d;
}
.cyl__static{ display: block; position: relative; transform: translateZ(1px); line-height: 0.86; }
.hero__gl{ position: absolute; left: 0; top: 0; z-index: 1; display: block; pointer-events: none; }
.hero__stage.is-3d .cyl__static{ visibility: hidden; }

.hero__foot{
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
  align-items: end;
  max-width: var(--maxw); width: 100%; margin-inline: auto;
  position: relative; z-index: 2;
}
.hero__lead{ font-size: var(--fs-lead); line-height: 1.45; max-width: 34ch; font-weight: 450; }
.hero__cta{ display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 800px) {
  .hero__foot{ grid-template-columns: 1fr auto; }
}

/* ---------- Sections ---------- */
.section{ position: relative; padding-block: var(--section-pad); }
.sec-head{
  display: grid; gap: var(--s-4) var(--s-6);
  grid-template-columns: 1fr;
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem);
  padding-top: var(--s-5);
  border-top: 1.5px solid var(--ink);
}
.sec-head__num{ color: var(--ink-2); }
.sec-head__title{
  font-family: var(--font-display); font-stretch: 125%; font-weight: 880;
  font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.02em; text-transform: uppercase;
}
.sec-head__aside{ color: var(--ink-2); max-width: 46ch; }
@media (min-width: 900px) {
  .sec-head{ grid-template-columns: 1fr minmax(260px, 380px); align-items: end; }
  .sec-head__num{ grid-column: 1 / -1; }
}

/* Masked headline reveal: inner span slides up (transform only). */
.mask{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.mask > span{ display: inline-block; }

/* ---------- Arc carousel ---------- */
.work{ padding-top: clamp(3rem, 2rem + 4vw, 6rem); padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; }
.work .sec-head{ margin-bottom: 0; }
.arc{ position: relative; }
.arc{ --cw: clamp(176px, 14vw + 70px, 272px); --ch: calc(var(--cw) * 1.333); --fade: clamp(110px, 8vw + 60px, 150px); }
.arc__viewport{
  position: relative;
  height: calc(var(--ch) + 150px);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  outline-offset: -6px;
}
.arc__viewport.is-dragging{ cursor: grabbing; }
.arc__track{ position: absolute; left: 50%; top: 0; width: 0; height: 0; }
.arc__item{
  position: absolute; left: 0; top: 0;
  width: var(--cw); height: var(--ch);
  margin-left: calc(var(--cw) / -2);
  will-change: transform; /* the only always-animated elements: turned by js/carousel.js */
}
/* No-JS / pre-init fallback: horizontal scroll row */
.no-js .arc__viewport{ height: auto; overflow-x: auto; padding: 24px var(--gutter); }
.no-js .arc__track{ position: static; display: flex; gap: 16px; width: auto; height: auto; }
.no-js .arc__item{ position: relative; margin: 0; flex: 0 0 var(--cw); }

.card{
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: var(--r-md); overflow: hidden;
  background: #111; color: #fff; text-decoration: none;
  box-shadow: var(--shadow-2);
  transform: translateZ(0);
  transition: transform var(--t-3) var(--ease-out), box-shadow var(--t-3) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.card:focus-visible{ outline: 3px solid var(--focus-halo); outline-offset: 4px; }
.arc__item.is-hover .card, .card:focus-visible{ transform: translateY(-18px) scale(1.04); box-shadow: var(--shadow-3); }
.card__media{ position: absolute; inset: 0; }
.card__media img{ width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.card--basko .card__media img{ object-position: 50% 12%; }
.card--ksk .card__media img{ object-position: 50% 45%; transform: scale(1.35); }
.card--ak .card__media img{ object-position: 46% 40%; transform: scale(1.5); }
.card--living .card__media img{ object-position: 50% 55%; transform: scale(1.25); }
.card--training .card__media img{ object-position: 50% 30%; }
.card__meta{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 2px;
  padding: 44px 16px 14px;
  background: linear-gradient(to top, rgb(0 0 0 / 0.82), rgb(0 0 0 / 0.55) 55%, transparent);
}
.card__num{ color: #ffb08f; font-size: 0.7rem; }
.card__title{ font-family: var(--font-display); font-stretch: 118%; font-weight: 820; font-size: clamp(1rem, 0.85rem + 0.5vw, 1.3rem); line-height: 1.05; text-transform: uppercase; }
.card__tag{ font-size: 0.64rem; color: rgb(255 255 255 / 0.82); }
.card--psy { background: #f4f3ef; color: var(--ink); }
.card--psy .card__meta { background: linear-gradient(to top, rgb(244 243 239 / 0.97), rgb(244 243 239 / 0.75) 60%, transparent); color: #0d0d0d; }
.card--psy .card__num { color: #b23300; }
.card--psy .card__tag { color: #44443f; }

/* Typographic covers */
.type-cover{ position: absolute; inset: 0; display: block; overflow: hidden; color: #0d0d0d; }
.type-cover__word{
  position: absolute; left: 16px; right: 16px; top: 16px;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 900;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); line-height: 0.92; text-transform: uppercase; letter-spacing: -0.02em;
}
.type-cover--psy{ background: #dfe5dc; }
.type-cover__path{ position: absolute; inset: 0; }
.type-cover__path i{ position: absolute; border-radius: 50%; border: 1.5px solid #0d0d0d; }
.type-cover__path i:nth-child(1){ width: 140%; height: 70%; left: -20%; bottom: -36%; background: #c8d3c4; border: 0; }
.type-cover__path i:nth-child(2){ width: 120%; height: 60%; left: 10%; bottom: -40%; background: #b6c3b1; border: 0; }
.type-cover__path i:nth-child(3){ width: 18px; height: 18px; left: 62%; top: 44%; background: #ff4f12; border: 0; }
.type-cover__path i:nth-child(4){ width: 120%; height: 120%; left: -58%; top: 46%; border-style: dashed; }

.arc__controls{ display: flex; align-items: center; justify-content: center; gap: var(--s-5); margin-top: var(--s-5); }
.arc__status{ min-width: 220px; text-align: center; color: var(--ink-2); }

/* ---------- Case studies ---------- */
.case-index ol{ display: flex; flex-wrap: wrap; gap: 8px; }
.case-index a{
  display: inline-flex; gap: 8px; align-items: baseline;
  padding: 10px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong);
  text-decoration: none; font-weight: 560; font-size: 0.95rem;
  transition: background-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out), border-color var(--t-2);
}
.case-index a:hover{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.case-index .mono{ color: var(--accent-ink); }
.case-index a:hover .mono{ color: var(--accent); }

.case{ position: relative; padding-block: clamp(4rem, 3rem + 5vw, 8rem); scroll-margin-top: 64px; }
.case + .case{ border-top: 1px solid var(--line); }
.case__head{ display: grid; gap: var(--s-3); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.case__num{ color: var(--accent-ink); }
.case__title{
  font-family: var(--font-display); font-stretch: 125%; font-weight: 900;
  font-size: clamp(2.4rem, 1.2rem + 5.4vw, 6.4rem); line-height: 0.9; letter-spacing: -0.025em; text-transform: uppercase;
}
.case__sub{ font-size: var(--fs-lead); line-height: 1.4; max-width: 48ch; color: var(--ink); }
.facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin-top: var(--s-5); border-top: 1px solid var(--line); }
.facts > div{ padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); }
.facts dt{ font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 4px; }
.facts dd{ font-size: 0.98rem; line-height: 1.45; }

.case__intro{ display: grid; gap: var(--s-6) var(--s-8); margin-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
@media (min-width: 900px) { .case__intro{ grid-template-columns: 1fr 1fr; } }
.block__title{ display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-stretch: 112%; font-weight: 780; font-size: var(--fs-h4); text-transform: uppercase; margin-bottom: var(--s-4); }

.block + .block{ margin-top: var(--s-7); }
.case__intro .block + .block{ margin-top: 0; }
.list{ display: grid; gap: 10px; }
.list li{ position: relative; padding-left: 22px; max-width: 62ch; }
.list li::before{ content: ""; position: absolute; left: 2px; top: 0.68em; width: 9px; height: 1.5px; background: var(--accent); }
.list--tight{ gap: 6px; }
.lead{ font-size: var(--fs-lead); line-height: 1.45; }

/* Screenshots, frames */
.shot{ position: relative; }
.shot figcaption{ margin-top: 12px; color: var(--ink-2); }
.shot__frame{ position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: var(--shadow-2); }
.shot__frame img, .shot__frame video{ width: 100%; height: auto; }
.shot--browser .shot__frame{ border-radius: 0 0 var(--r-sm) var(--r-sm); }
.browser{
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.browser i{ width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.browser i:first-child{ background: var(--accent); }
.browser__url{ margin-left: 12px; padding: 3px 14px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: 0.66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-parallax] .shot__frame img{ transform: scale(1.08); transform-origin: 50% 50%; }

.phone{
  position: relative; width: 100%; max-width: 280px; margin-inline: auto;
  aspect-ratio: 9 / 19.5;
  padding: 10px; border-radius: 38px;
  background: #0d0d0d;
  box-shadow: var(--shadow-3), inset 0 0 0 1.5px rgb(255 255 255 / 0.12);
}
.phone::before{ content: ""; position: absolute; top: 18px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #000; z-index: 2; }
.phone img, .phone video{ width: 100%; height: 100%; object-fit: cover; border-radius: 29px; background: #111; }
.phone video{ object-fit: contain; background: #0b1240; }
.shot--phone figcaption{ text-align: center; max-width: 30ch; margin-inline: auto; }

.gallery{ display: grid; gap: var(--s-6); margin-block: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: start; }
@media (min-width: 900px) {
  .gallery--3{ grid-template-columns: 1fr 1fr 0.62fr; }

}

/* What AI did / What I did */

.ai-table__grid{ display: grid; border: 1.5px solid var(--ink); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
@media (min-width: 760px) { .ai-table__grid{ grid-template-columns: 1fr 1fr; } }

/* Accordion (native details) */

/* Content pending: planned, styled gap */
.pending{
  position: relative;
  display: grid; gap: 8px; align-content: start;
  padding: 22px 24px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgb(var(--ink-rgb) / 0.03) 14px 15px),
    var(--surface);
}
.pending__label{ display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); font-weight: 500; }
.pending__label::before{ content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }

.pending p{ color: var(--ink-2); }

.pending--inline{ margin-block: var(--s-4); padding: 14px 18px; border-radius: var(--r-sm); }
.pending--cta{ align-self: end; justify-self: start; }
.pending-inline{ display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-pill); color: var(--accent-ink); font-size: 0.72rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }

@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Dark case (KSK Pretor) */
.case--dark{
  --bg: #0d0d0d; --bg-rgb: 13 13 13; --surface: #171717; --surface-2: #222;
  --ink: #eeeeea; --ink-rgb: 238 238 234; --ink-2: #a3a39c;
  --line: rgb(238 238 234 / 0.14); --line-strong: rgb(238 238 234 / 0.32);
  --accent-ink: #ff8a5c; --focus: #eeeeea;
  background: var(--bg); color: var(--ink);
  border-radius: clamp(20px, 3vw, 40px);
  margin-inline: clamp(6px, 1vw, 16px);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
}
.case--dark + .case{ border-top: 0; }
.case--dark .btn--primary{ --btn-bg: #eeeeea; --btn-fg: #0d0d0d; --btn-bd: #eeeeea; }

/* Stats */

/* Journeys diagram */

/* Sub-projects */
.sub{ margin-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: 80px; }

.sub__head{ display: grid; gap: 10px; margin-bottom: var(--s-6); max-width: 900px; }
.sub__kicker{ color: var(--accent-ink); }
.sub__title{ font-family: var(--font-display); font-stretch: 125%; font-weight: 880; font-size: clamp(1.7rem, 1rem + 2.6vw, 3.4rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.015em; }
.sub__lead{ color: var(--ink-2); font-size: 1.05rem; max-width: 62ch; }

.sub__grid{ display: grid; gap: var(--s-7); }
@media (min-width: 1000px) {
  .sub__grid{ grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }

}

.mini-title{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-display); font-stretch: 112%; font-weight: 780; font-size: 1.05rem; text-transform: uppercase; margin-bottom: var(--s-4); }

/* Model embed */
.model-embed{ position: relative; border-radius: var(--r-md); overflow: hidden; background: #0a0a0a; aspect-ratio: 16 / 10; margin-bottom: var(--s-7); box-shadow: var(--shadow-3); }
.model-embed__poster, .model-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.model-embed__poster img{ width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.model-embed__cta{ position: absolute; inset: auto 0 0 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-start; padding: 32px; background: linear-gradient(to top, rgb(0 0 0 / 0.85), transparent); color: #eeeeea; }
.model-embed__cta .btn--ghost{ background: rgb(13 13 13 / 0.9); }
.model-embed.is-loaded .model-embed__poster{ display: none; }

@media (max-width: 700px) { .model-embed{ aspect-ratio: 3 / 4; } }

.state-shots{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.state-shots li{ display: grid; gap: 8px; align-content: start; }
.state-shots img{ border-radius: 10px; box-shadow: var(--shadow-1); }
.state-shots span{ color: var(--ink-2); font-size: 0.66rem; }
.state-shots__phone img{ max-width: 140px; }

.film-strip{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.film-strip img{ border-radius: 10px; }

.shot__frame--16x9{ aspect-ratio: 16 / 9; background: #000; }
.shot__frame--16x9 video{ width: 100%; height: 100%; object-fit: contain; }

/* Flow diagram (psychologist) */
.flow{ margin-block: clamp(2.5rem, 2rem + 2vw, 4rem); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--r-lg); border: 1.5px solid var(--ink); background: var(--surface); }
.flow__title{ color: var(--ink-2); margin-bottom: var(--s-5); }
.flow__steps{ display: grid; gap: 12px; }
@media (min-width: 860px) { .flow__steps{ grid-template-columns: repeat(4, 1fr); gap: 0; } }
.flow__step{ position: relative; display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line-strong); }
@media (min-width: 860px) {
  .flow__step{ margin-right: 28px; }
  .flow__step:not(:last-child)::after{ content: ""; position: absolute; right: -24px; top: 30px; width: 20px; height: 1.5px; background: var(--ink); }
  .flow__step:not(:last-child)::before{ content: ""; position: absolute; right: -25px; top: 26px; border: 5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
}
.flow__n{ display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 0.7rem; }
.flow__t{ font-family: var(--font-display); font-stretch: 112%; font-weight: 780; text-transform: uppercase; font-size: 1rem; }
.flow__t em{ font-style: normal; padding: 1px 6px; margin-left: 4px; border-radius: 4px; border: 1.5px dashed var(--accent-ink); color: var(--accent-ink); font-size: 0.62rem; vertical-align: middle; }
.flow__note{ color: var(--ink-2); font-size: 0.88rem; line-height: 1.4; }
.flow__step--mock{ border-style: dashed; border-color: var(--accent-ink); }
.flow__branch{ display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center; margin-top: 16px; padding: 14px 18px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg); }
.flow__branch .flow__n{ background: var(--accent); color: var(--on-accent); }
@media (max-width: 600px) { .flow__branch{ grid-template-columns: auto 1fr; } .flow__branch .flow__note{ grid-column: 1 / -1; } }

/* Training: split */
.case__split{ display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) { .case__split{ grid-template-columns: 1fr 1fr; } }
.phones{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.phones .shot:nth-child(2){ margin-top: 48px; }

/* ---------- AI section ---------- */
.workflow{ display: grid; gap: 0; border-top: 1.5px solid var(--ink); counter-reset: wf; }
@media (min-width: 760px) { .workflow{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .workflow{ grid-template-columns: repeat(3, 1fr); } }
.wf{ position: relative; display: grid; gap: 10px; align-content: start; padding: 28px 24px 28px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .wf{ padding-left: 24px; border-left: 1px solid var(--line); } }
.wf__n{ color: var(--accent-ink); }
.wf__t{ font-family: var(--font-display); font-stretch: 118%; font-weight: 820; font-size: var(--fs-h3); line-height: 1.05; text-transform: uppercase; }
.wf p{ color: var(--ink-2); }

.split-panel{ display: grid; gap: 0; margin-block: clamp(3rem, 2rem + 3vw, 5rem); border-radius: var(--r-lg); overflow: hidden; border: 1.5px solid var(--ink); }
@media (min-width: 860px) { .split-panel{ grid-template-columns: 1fr 1fr; } }
.split-panel__col{ padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); background: var(--surface); }
.split-panel__col + .split-panel__col{ background: var(--ink); color: var(--bg); }
.split-panel__col + .split-panel__col .list li::before{ background: var(--accent); }


/* ---------- About ---------- */
.about__grid{ display: grid; gap: var(--s-7); }
@media (min-width: 1000px) { .about__grid{ grid-template-columns: 1.3fr 0.7fr; gap: var(--s-9); } }
.about__main .lead{ font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.3rem); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: var(--s-6); max-width: 28ch; }
.about__main p:not(.lead){ font-size: 1.1rem; }
.bg-list{ display: grid; border-top: 1.5px solid var(--ink); }
.bg-list li{ display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.bg-list .mono{ color: var(--accent-ink); padding-top: 3px; }

/* ---------- CV ---------- */
.cv .sec-head .pending{ grid-column: 1 / -1; }
@media (min-width: 900px) { .cv .sec-head .pending{ grid-column: 2; } }
.cv__grid{ display: grid; gap: var(--s-8); }
@media (min-width: 1000px) { .cv__grid{ grid-template-columns: 1fr 1fr; } }
.timeline{ display: grid; gap: var(--s-6); border-left: 1.5px solid var(--ink); padding-left: 24px; }
.timeline li{ position: relative; }
.timeline li::before{ content: ""; position: absolute; left: -31px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.timeline__when{ color: var(--ink-2); margin-bottom: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.timeline h4{ font-family: var(--font-display); font-stretch: 112%; font-weight: 780; font-size: 1.15rem; text-transform: uppercase; margin-bottom: 10px; }
.skills{ display: grid; border-top: 1.5px solid var(--ink); }
.skills > div{ display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.skills dt{ font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); padding-top: 3px; }

/* ---------- Contact ---------- */
.contact{ padding-bottom: 0; }
.contact__grid{ display: grid; gap: var(--s-7); align-items: end; }
@media (min-width: 1000px) { .contact__grid{ grid-template-columns: 1.4fr 0.6fr; } }
.contact__lead{ color: var(--ink-2); margin-bottom: var(--s-4); font-size: 1.1rem; }
.contact__mail{
  display: inline-block; max-width: 100%;
  font-family: var(--font-display); font-stretch: 100%; font-weight: 850;
  font-size: clamp(1.15rem, 0.35rem + 3.1vw, 3rem); line-height: 1.05; letter-spacing: -0.02em;
  text-decoration: none; overflow-wrap: anywhere;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0% 0.14em no-repeat;
  padding-bottom: 0.1em;
  transition: background-size var(--t-3) var(--ease-out);
}
.contact__mail:hover, .contact__mail:focus-visible{ background-size: 100% 0.14em; }
.contact__phone{ display: block; width: max-content; margin-top: var(--s-3); font-size: clamp(1rem, 0.3rem + 2.4vw, 2.2rem); }
.contact__actions{ display: flex; align-items: center; gap: 16px; margin-top: var(--s-6); flex-wrap: wrap; }
.copy-status{ color: var(--success); }
.contact__links{ display: grid; border-top: 1.5px solid var(--ink); }
.contact__links li{ display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.contact__links .mono{ color: var(--ink-2); }
.footer{ margin-top: var(--section-pad); padding-block: 28px; border-top: 1px solid var(--line); }
.footer__inner{ display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; color: var(--ink-2); }
.footer__top{ text-decoration: none; color: var(--ink); }
.footer p{ max-width: none; }

/* ---------- Cursor (desktop, fine pointer) ---------- */
.cursor{
  position: fixed; left: 0; top: 0; z-index: var(--z-cursor);
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: var(--on-accent);
  pointer-events: none; opacity: 0;
  transform: translate3d(-200px, -200px, 0) scale(0.3);
  transition: opacity var(--t-2) var(--ease-out);
}
.cursor__label{ font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.cursor.is-on{ opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor{ display: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .cursor, .arc__controls, .model-embed__cta{ display: none !important; }
  body::before, .glow{ display: none; }
  .case--dark{ background: none; color: #000; }
  details{ display: block; }
}

/* ---------- Small-screen fixes (QA round 1) ---------- */
.sub__grid > *, .case__intro > *, .gallery > *, .case__split > *, .cv__grid > *, .about__grid > *, .contact__grid > * { min-width: 0; }
.case__title, .sec-head__title, .sub__title{ overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 560px) {
  .case__title{ font-size: clamp(1.9rem, 8.6vw, 3rem); font-stretch: 108%; }
  .sec-head__title{ font-size: clamp(1.9rem, 9.4vw, 3rem); }
  .sub__title{ font-size: clamp(1.4rem, 6.6vw, 2rem); font-stretch: 112%; }

  .nav__menu-label{ display: none; }
  .nav__menu-btn{ width: 44px; padding: 0; justify-content: center; }
  .nav__name{ font-size: 0.95rem; }
}

/* ---------- Review round 1 ---------- */
/* Hero role line under the word */
.hero__role{
  position: relative; z-index: 2; justify-self: center; text-align: center;
  margin-top: calc(var(--s-4) * -1); margin-bottom: var(--s-6);
  font-family: var(--font-display); font-stretch: 112%; font-weight: 700;
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.35rem); letter-spacing: 0.04em; text-transform: uppercase;
}
.hero__role span{ color: var(--accent-ink); margin-inline: 0.4em; }
.hero{ grid-template-rows: 1fr auto auto; }
@media (max-width: 600px) {
  .hero{ min-height: 92svh; padding-top: 84px; }
  .hero__stage{ --fs: clamp(56px, 19vw, 120px); min-height: calc(var(--fs) * 2.6); }
  .hero__role{ margin-top: 0; }
}

/* Small headings in sentence case; wide capitals stay for section and case titles */
.block__title, .mini-title, .wf__t, .flow__t, .timeline h4 {
  text-transform: none; font-stretch: 104%; letter-spacing: -0.005em;
}
.block__title, .mini-title{ font-size: 1.15rem; }

.wf__t{ font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); font-weight: 760; }

/* Single-column helpers */

 .sub .sub__head{ margin-bottom: var(--s-5); }

/* Spacing fixes */
.case__split-text > * + *{ margin-top: var(--s-5); }

.footer__inner{ align-items: baseline; }
.footer__inner p{ margin: 0; }
.card--living .card__media img{ object-position: 50% 78%; transform: scale(1.5); }
.film-strip{ grid-template-columns: 1fr 1fr; }

/* Case 07: this portfolio */
.meta-case{ margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-lg); border: 1.5px solid var(--ink); background: var(--surface); }
.meta-case__head{ display: grid; gap: 10px; margin-bottom: var(--s-5); max-width: 760px; }
.meta-case__head:last-child{ margin-bottom: 0; }
.meta-case__title{ font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: clamp(1.7rem, 1rem + 2.6vw, 3.2rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.02em; }


/* Journeys v2: planning-time axis only, counts below */

code{ font-family: var(--font-mono); font-size: 0.88em; padding: 1px 5px; border-radius: 4px; background: rgb(var(--ink-rgb) / 0.07); }

/* ---------- Review round 2 ---------- */
.hero__foot{ grid-template-columns: 1fr !important; justify-items: start; gap: var(--s-5); }
.hero__lead{ text-wrap: pretty; max-width: 40ch; }
@media (max-width: 600px) { .hero__stage{ --fs: clamp(44px, 14vw, 100px); } }
.card__meta{ padding-top: 64px; background: linear-gradient(to top, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.75) 45%, rgb(0 0 0 / 0) 100%); }
.card--psy .card__meta{ background: linear-gradient(to top, rgb(223 229 220 / 1) 0%, rgb(223 229 220 / 0.92) 50%, rgb(223 229 220 / 0) 100%); color: #0d0d0d; }
.case--minor .case__title{ font-size: clamp(2rem, 1rem + 4vw, 4.6rem); }
.minor{ padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.minor + .minor{ margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); border-top: 1px solid var(--line); }
.minor__title{ font-family: var(--font-display); font-stretch: 112%; font-weight: 820; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); line-height: 1.05; margin: 6px 0 var(--s-4); }

/* ---------- Review round 3 ---------- */
.timeline li::before{ content: none; }
.timeline > li::before{ content: ""; position: absolute; left: -31px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.timeline .list li{ position: relative; }
.timeline .list li::before{ content: ""; position: absolute; left: 2px; top: 0.68em; width: 9px; height: 1.5px; background: var(--accent); border: 0; border-radius: 0; }
.contact__grid{ align-items: start; }
.card--basko .card__media img{ object-position: 50% 62%; }
.facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .facts{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .facts{ grid-template-columns: 1fr; } }
.ai{ padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.case--minor#psychologist-site .case__title{ font-size: clamp(1.9rem, 1rem + 3.4vw, 4rem); }
.minor__title{ font-stretch: 104%; font-weight: 780; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem); }

@media (min-width: 601px) and (max-width: 1099px) { .hero{ min-height: 82svh; } }
@media (max-width: 600px) { .hero{ min-height: 80svh; } }

/* ---------- Review round 4 ---------- */
:root{ --section-pad: clamp(4rem, 2.5rem + 5vw, 7.5rem); }
/* Card text never sits on the cover: media above, solid label below */
.card__media{ bottom: 78px; }
.card__meta{ min-height: 78px; padding: 12px 14px; background: #0d0d0d; align-content: center; }
.card--psy .card__meta{ background: #c8d3c4; }
.card--psy .card__num{ color: #8a2a00; }
/* Sub-section titles: sentence case, calmer */
.sub__title{ text-transform: none; font-stretch: 108%; font-weight: 820; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.05; }
.case--minor .case__title, .case--minor#psychologist-site .case__title{ font-size: clamp(1.9rem, 1rem + 3vw, 3.6rem); }
/* Portfolio concept sits in its own, visibly different frame */

/* Video: film full width, frames in one row */
.sub__grid--video-stack{ display: grid; gap: 14px; }
.sub__grid--video-stack .film-strip{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .sub__grid--video-stack .film-strip{ grid-template-columns: 1fr 1fr; } }
/* Forms in prototypes: readable line length */

/* Spacing */
@media (min-width: 601px) and (max-width: 1099px) { .hero{ min-height: 0; padding-top: 150px; } }
.shot--video .shot__frame--16x9{ max-height: 72vh; }
.sub__grid.sub__grid--video-stack{ grid-template-columns: minmax(0, 1fr); }

/* ---------- Review round 5 ---------- */
.ai + .about{ padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.shot--video .shot__frame--16x9{ max-height: none; }

/* ---------- Review round 6 ---------- */
@media (max-width: 700px) {
  .case--dark{ margin-inline: 0; border-radius: 0; box-shadow: none; }

}
 .meta-case__title{ text-transform: none; font-stretch: 108%; letter-spacing: -0.015em; }

@media (max-width: 700px) {
  .card__media{ bottom: 54px; }
  .card__meta{ min-height: 54px; padding: 8px 12px; }
}

/* ---------- Revisions round 1: card covers fill the whole card ---------- */
.card__media, .card__media{ inset: 0; bottom: 0; }
.card__media img, .card--basko .card__media img, .card--ksk .card__media img, .card--ak .card__media img,
.card--living .card__media img, .card--training .card__media img{ object-fit: cover; object-position: 50% 50%; transform: none; }
.card__meta{
  min-height: 0; padding: 40px 14px 12px; align-content: end;
  background: linear-gradient(to top, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.72) 58%, transparent);
}
.card--psy .card__meta{ background: linear-gradient(to top, rgb(200 211 196 / 0.98), rgb(200 211 196 / 0.85) 58%, transparent); }
.card__badge{
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: #0d0d0d; color: #fff; font-size: 0.62rem; letter-spacing: 0.08em;
}
@media (max-width: 700px) {
  .card__meta{ min-height: 0; padding: 32px 12px 10px; }
}

/* ---------- Revisions round 1: short case studies ---------- */
.case__did{ max-width: 64ch; margin: var(--s-6) 0 var(--s-7); }
.case__did .block__title{ margin-bottom: var(--s-3); }
.case__did .list li{ font-size: var(--fs-lead, 1.1rem); line-height: 1.5; }
.tag-progress{
  display: inline-block; vertical-align: middle; margin-left: 0.4em;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--accent); color: #0d0d0d;
  font-size: 0.72rem; letter-spacing: 0.08em; line-height: 1.2;
  transform: translateY(-0.4em);
}
/* 3D model: small preview shots in one row under the model */
.sub__grid:has(> div > .state-shots){ display: block; margin-top: var(--s-5); }
@media (min-width: 900px) {
  .state-shots{ grid-template-columns: 1fr 1fr 1fr auto; align-items: start; }
  .state-shots__phone img{ max-width: 92px; }
}

/* ---------- Revisions round 1: AI tools as tiles ---------- */
.tool-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: var(--s-4); align-items: start; }
.tool{ border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--t-2) var(--ease-out); }
.tool:hover{ border-color: var(--ink); }
.tool__btn{
  display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px; border: 0; background: none; color: var(--ink);
  font: inherit; text-align: left; border-radius: inherit;
}
.tool__btn:focus-visible{ outline: 3px solid var(--focus-halo); outline-offset: 2px; }
.tool__logo{ display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); }
.tool__name{ font-weight: 650; font-size: 0.98rem; line-height: 1.3; }
.tool.is-open .tool.is-open .no-js .no-js 
/* ---------- Revisions round 2: carousel ---------- */
/* One alignment for every card; the label turns with its card and never moves. */
.card__meta{ text-align: left; justify-items: start; }
.card__tag{ font-size: 0.66rem; letter-spacing: 0.04em; }
/* Centre card: lifted by JS, soft accent glow underneath and a lit bottom edge. Glow and edge are
   their own elements (added by js/carousel.js), so JS changes only their opacity. */
.arc__glow{
  position: absolute; display: block; z-index: -1; pointer-events: none;
  left: -6%; right: -6%; bottom: -34px; height: 72px;
  background: radial-gradient(closest-side, rgb(255 90 31 / 0.55), rgb(255 90 31 / 0.18) 55%, transparent);
  opacity: 0;
}
.card__edge{
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 -2px 0 rgb(255 150 100 / 0.95), inset 0 -36px 40px -30px rgb(255 110 50 / 0.55);
  opacity: 0;
}
@media (max-width: 700px) {
  .card__tag{ font-size: 0.6rem; }
}

/* ---------- Revisions round 2: real tool logos ---------- */
/* Same box for every logo: centred in a 40px square, 28px tall. Monochrome in the text colour,
   brand colours on hover, focus or when the tile is open (colour file cross-fades in). */
.tool__logo{ position: relative; }
.tool__mono, .tool__color, .tool__file{ position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; object-fit: contain; }
.tool__mono{ fill: currentColor; transition: opacity var(--t-2) var(--ease-out); }
.tool__mono .k{ fill: var(--surface); }
.tool__mono .t{ fill-opacity: 0.55; }
.tool__mono .t2{ fill-opacity: 0.3; }
.tool__color{ opacity: 0; transition: opacity var(--t-2) var(--ease-out); }
.tool__btn:hover .has-color .tool__mono, .tool__btn:focus-visible .has-color .tool__mono, .tool.is-open .has-color .tool__mono{ opacity: 0; }
.tool__btn:hover .tool__color, .tool__btn:focus-visible .tool__color, .tool.is-open .tool__color{ opacity: 1; }
/* Logo files dropped into assets/logos/ (picked up by JS) */
.tool__logo--file::before{ content: ""; width: 26px; height: 26px; border-radius: 7px; border: 1.5px dashed var(--line-strong); }
.tool__logo--file.has-file::before{ content: none; }
.tool__file{ filter: grayscale(1) contrast(1.15); transition: filter var(--t-2) var(--ease-out); }
.tool__btn:hover .tool__file, .tool__btn:focus-visible .tool__file, .tool.is-open .tool__file{ filter: none; }

/* ---------- Revisions round 2: personal logo in the footer ---------- */
.footer__brand{ display: inline-flex; align-items: center; gap: 10px; }
.footer__mark{ width: 22px; height: 22px; flex: none; }
.footer__inner{ align-items: center; }

/* ---------- Revisions round 2: grab the 3D word ---------- */
.hero__stage.is-3d{ cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.hero__stage.is-3d.is-grabbing{ cursor: grabbing; }

/* ---------- Revisions round 2: project roulette in the hero ---------- */
.roulette-open{
  position: absolute; z-index: 3; top: 84px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px 0 10px; border-radius: var(--r-pill);
  border: 1.5px solid var(--ink); background: rgb(var(--bg-rgb) / 0.88);
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  transition: background-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out), opacity var(--t-3) var(--ease-out);
}
.roulette-open:hover, .roulette-open:focus-visible{ background: var(--ink); color: var(--bg); }
.roulette-open__icon{ width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.7; transition: transform var(--t-4) var(--ease-out); }
.roulette-open__icon .dot{ fill: var(--accent); stroke: none; }
.roulette-open:hover .roulette-open__icon, .roulette-open:focus-visible .roulette-open__icon{ transform: rotate(150deg); }
@media (max-width: 600px) { .roulette-open{ top: 76px; } }
@media (min-width: 601px) and (max-width: 1099px) { .roulette-open{ top: 96px; } }

.hero__role, .hero__foot{ transition: opacity var(--t-3) var(--ease-out); }
.hero.is-roulette .roulette-open, .hero.is-roulette .hero__role, .hero.is-roulette .hero__foot{
  opacity: 0 !important; visibility: hidden; transition: opacity var(--t-2) var(--ease-out), visibility 0s linear var(--t-2);
}
.hero.is-roulette .hero__bar{ opacity: 0; }
.hero__stage{ transition: opacity var(--t-3) var(--ease-out); }
.hero.is-roulette-fb .hero__stage{ opacity: 0.16; }
.hero.is-roulette-fb .hero__bar{ opacity: 1; }
.hero.is-wheel .hero__gl{ pointer-events: auto; cursor: grab; touch-action: none; }
.hero.is-wheel .hero__gl.is-grabbing{ cursor: grabbing; }

.roulette{ position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.roulette[hidden]{ display: none; }
.roulette__bar, .roulette__card{ pointer-events: auto; }
.roulette__bar{
  position: absolute; left: 50%; bottom: clamp(20px, 5vh, 48px); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 12px; width: max-content; max-width: calc(100% - 2 * var(--gutter));
}
.roulette__bar[hidden], .roulette__card[hidden]{ display: none; }
.roulette__hint{ color: var(--ink-2); text-align: center; }
.roulette__actions{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.roulette.is-spinning #roulette-spin{ opacity: 0.5; cursor: progress; }
.btn--sm{ min-height: 44px; padding: 0 18px; font-size: 0.82rem; }

.roulette__card{
  position: absolute; right: var(--gutter); top: 50%;
  width: min(340px, calc(100% - 2 * var(--gutter)));
  display: grid; overflow: hidden;
  border-radius: var(--r-md); border: 1.5px solid var(--ink);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
  transform: translateY(-50%);
}
.roulette__card.is-in{ animation: rouletteIn var(--t-3) var(--ease-out) both; }
@keyframes rouletteIn{ from{ opacity: 0; transform: translateY(calc(-50% + 18px)); } to{ opacity: 1; transform: translateY(-50%); } }
.roulette__cover{ aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.roulette__cover img{ width: 100%; height: 100%; object-fit: cover; }
.roulette__cover.is-type{ display: grid; align-items: end; padding: 14px 16px; background: #dfe5dc; color: #0d0d0d; }
.roulette__type{ font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 1.5rem; line-height: 0.92; text-transform: uppercase; }
.roulette__body{ display: grid; gap: 4px; padding: 16px 18px 18px; }
.roulette__kicker{ color: var(--accent-ink); }
.roulette__name{ font-family: var(--font-display); font-stretch: 118%; font-weight: 850; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); line-height: 1.05; text-transform: uppercase; }
.roulette__cat{ color: var(--ink-2); margin-bottom: 12px; }
.roulette__card .roulette__actions{ justify-content: flex-start; }

/* Simple panel without the wheel (reduced motion or no WebGL): the card sits in the middle */
.roulette.is-fallback .roulette__card{ right: auto; left: 50%; transform: translate(-50%, -50%); animation: none; }
.roulette.is-fallback .roulette__bar{ display: none; }

@media (max-width: 700px) {
  .roulette__card{ left: var(--gutter); right: var(--gutter); top: auto; bottom: 16px; width: auto; transform: none; grid-template-columns: 104px 1fr; }
  .roulette__card.is-in{ animation-name: rouletteInUp; }
  @keyframes rouletteInUp{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
  .roulette__cover{ aspect-ratio: auto; height: 100%; }
  .roulette__cover.is-type{ padding: 10px; }
  .roulette__type{ font-size: 0.95rem; }
  .roulette__body{ padding: 12px 14px 14px; }
  .roulette__cat{ margin-bottom: 8px; }
  .roulette__card .btn--sm{ min-height: 40px; padding: 0 14px; font-size: 0.74rem; }
  .roulette.is-fallback .roulette__card{ left: var(--gutter); right: var(--gutter); top: 50%; bottom: auto; transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) { .roulette__card.is-in{ animation: none; } }

/* ---------- Revisions round 3: carousel fades out at the bottom ---------- */
/* No hard edge: the lower part of the wheel dissolves into the page. The viewport is tall enough
   for the centre card, its lift and its glow to sit fully above the fade zone (--fade). */
.arc__viewport{ height: calc(var(--ch) + 96px + var(--fade)); }
/* The fade is an overlay in the page colour above the cards, not a mask: a mask on the layer with
   the turning cards makes the browser redraw that whole layer in every frame. The overlay is static.
   It reaches full page colour exactly at the bottom of the viewport (where the cards are cut off)
   and fades out again below it, so the glow behind has no hard edge. It also redraws the page's
   vertical lines (same positions as body::before) with the opposite fade, so they run on unbroken. */
.arc__fade{
  position: absolute; left: 0; right: 0; z-index: 400; pointer-events: none;
  top: calc(var(--ch) + 96px); height: calc(var(--fade) * 2);
  background:
    linear-gradient(to bottom, rgb(var(--ink-rgb) / 0), rgb(var(--ink-rgb) / 0.077) 50%, rgb(var(--ink-rgb) / 0)) 0.0000% 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, rgb(var(--ink-rgb) / 0), rgb(var(--ink-rgb) / 0.077) 50%, rgb(var(--ink-rgb) / 0)) 16.6667% 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, rgb(var(--ink-rgb) / 0), rgb(var(--ink-rgb) / 0.077) 50%, rgb(var(--ink-rgb) / 0)) 33.3333% 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, rgb(var(--ink-rgb) / 0), rgb(var(--ink-rgb) / 0.077) 50%, rgb(var(--ink-rgb) / 0)) 50.0000% 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, rgb(var(--ink-rgb) / 0), rgb(var(--ink-rgb) / 0.077) 50%, rgb(var(--ink-rgb) / 0)) 66.6667% 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, rgb(var(--ink-rgb) / 0), rgb(var(--ink-rgb) / 0.077) 50%, rgb(var(--ink-rgb) / 0)) 83.3333% 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, rgb(var(--bg-rgb) / 0), rgb(var(--bg-rgb)) 50%, rgb(var(--bg-rgb) / 0));
}
.arc__controls{ position: relative; z-index: 401; margin-top: 0; }
.no-js .arc__fade{ display: none; }
@media (max-width: 600px) {
  /* The wheel is flatter on phones, so a shorter fade is enough. */
  .arc{ --fade: 84px; }
  .arc__viewport{ height: calc(var(--ch) + 84px + var(--fade)); }
  .arc__fade{ top: calc(var(--ch) + 84px); }
  .arc__controls{ margin-top: -12px; }
}

/* ---------- Revisions round 3: hero buttons level from the first frame ---------- */
/* Entrance: the lead and the whole button row fade up as CSS animations. Both buttons share one
   animation, so they are level on every frame. fill-mode: backwards leaves no transform behind. */
@keyframes heroFootIn{ from{ opacity: 0; transform: translateY(24px); } }
.motion-ok .hero__lead{ animation: heroFootIn 1s var(--ease-out) 0.25s backwards; }
.motion-ok .hero__cta{ animation: heroFootIn 1s var(--ease-out) 0.33s backwards; }
/* Magnetic hover moves `translate` (separate from transform), and glides back on leave. */
[data-magnetic]{ transition: transform var(--t-2) var(--ease-out), translate 0.45s var(--ease-out), color var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out); }

/* ---------- Revisions round 3: language switch EN / PL ---------- */
.lang-switch{
  display: inline-flex; align-items: center; height: 44px; padding: 3px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
}
.lang-switch__btn{
  min-width: 36px; height: 100%; padding: 0 8px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out);
}
.lang-switch__btn:hover{ color: var(--ink); }
.lang-switch__btn[aria-pressed="true"]{ background: var(--ink); color: var(--bg); cursor: default; }
.lang-switch__btn:focus-visible{ outline: 3px solid var(--focus-halo); outline-offset: 2px; }
@media (max-width: 380px) {
  .lang-switch__btn{ min-width: 32px; padding: 0 6px; }
}
/* Polish chosen: hide the page until js/i18n.js has swapped the text (it runs before first paint
   in practice). If the script fails, the page shows anyway after 1.2 s. */
.lang-pending .nav, .lang-pending main{ visibility: hidden; animation: langFailsafe 0s linear 1.2s forwards; }
@keyframes langFailsafe{ to{ visibility: visible; } }