/* ============ O nas page ============ */

/* Hero */
.hero{position:relative;height:100vh;min-height:680px;overflow:hidden;background:#080808;color:#fff;display:flex;align-items:flex-end}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.hero-fallback{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,#1a2438 0%,#080910 60%),radial-gradient(ellipse at 70% 70%,#0d1a2e 0%,#000 80%)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 39%,rgba(0,0,0,.65) 100%);pointer-events:none}
.hero-inner{position:relative;z-index:1;width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter) 56px}
/* E4: eyebrow bliżej H1 */
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.78);margin-bottom:12px}
.pulse{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 rgba(255,255,255,.45);animation:pulse 2.2s var(--ease-out) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
/* AD1 revert: hero h1 O nas (stan z _29): mono 500, clamp(45,7.2vw,115), line-height 1, letter-spacing -.025 */
.hero h1{font-family:var(--font-mono);font-size:clamp(45px,7.2vw,115px);max-width:14ch;color:#fff;line-height:1;letter-spacing:-.025em;font-weight:500}

/* Reveal section */
.reveal-sec{padding:clamp(48px,6vw,80px) var(--gutter);max-width:var(--max-width);margin:0 auto}
.reveal-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,96px);align-items:start}
@media (min-width:900px){.reveal-grid{grid-template-columns:1fr 1.15fr}}
.reveal-head{position:sticky;top:calc(var(--nav-h) + 32px)}
@media (max-width:900px){.reveal-head{position:static}}
.reveal-head .label{font-family:var(--font-mono);font-size:12px;color:var(--text-mute-2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px;display:block}
.reveal-head h2{font-family:var(--font-mono);font-weight:500;font-size:clamp(40px,5vw,72px);line-height:1.05;letter-spacing:-.025em;margin:0;max-width:14ch}
.reveal-body .body{font-size:clamp(18px,1.4vw,22px);line-height:1.5;color:var(--text);max-width:48ch;font-weight:400}
.reveal-body .body+.body{margin-top:1.2em}
.reveal-sec .body .rw{display:inline-block;opacity:.22;transition:opacity .35s var(--ease-out);will-change:opacity}
.reveal-sec .body .rw.lit{opacity:1}
/* B2: removed top/bottom dividers around 4 osoby — bez `border-top` */
.reveal-sec .persons{display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,48px);margin-top:80px;padding-top:48px}
/* K1: ukrywamy sekcję 4 osób na mobile (poniżej 900px) */
@media (max-width:900px){
  .reveal-sec .persons{display:none}
}

/* Timeline — bez border-top żeby nie było linii pod sekcją persons */
.timeline{padding:clamp(40px,5vw,70px) var(--gutter);max-width:var(--max-width);margin:0 auto}
.timeline-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,80px);align-items:start}
@media (min-width:900px){.timeline-grid{grid-template-columns:1fr 1.4fr;gap:clamp(48px,7vw,120px)}}
.timeline-head{position:sticky;top:calc(var(--nav-h) + 32px)}
@media (max-width:900px){.timeline-head{position:static}}
.timeline-head .label{font-family:var(--font-mono);font-size:12px;color:var(--text-mute-2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px;display:block}
.timeline-head h2{font-family:var(--font-mono);font-weight:500;font-size:clamp(40px,5vw,72px);line-height:1.05;letter-spacing:-.025em;margin:0;max-width:12ch}
.timeline-head .tl-foot{margin-top:32px;font-size:14px;color:var(--text-muted);max-width:32ch}
.tl-list{display:flex;flex-direction:column}
.tl-row{display:grid;grid-template-columns:1fr;gap:14px;padding:36px 0;border-top:1px solid var(--hairline-2)}
@media (min-width:600px){.tl-row{grid-template-columns:auto 1fr;gap:clamp(28px,4vw,56px);align-items:baseline}}
.tl-row:first-child{border-top:0;padding-top:0}
/* C3: fade-up animation for timeline rows (głównie mobile) */
.tl-row{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.tl-row.in-view{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tl-row{opacity:1;transform:none;transition:none}}

/* K2 + AO1: Mobile timeline — flip vertically, płynniejsze przejścia + +10% wysokość. */
@media (max-width:900px){
  .tl-list{perspective:1200px;perspective-origin:50% 50%}
  .tl-row{
    /* AO1: padding 36→40 (+10% wysokość kafelka — mniej "skakania" przy scroll). */
    padding:40px 0;
    /* AO1: mniej dramatyczna rotacja (45→30deg) i mniej kontrastu (.25→.4). */
    opacity:.4;
    transform:rotateX(30deg) scale(.96);
    transform-origin:50% 50%;
    transform-style:preserve-3d;
    /* AO1: dłuższy + smooth cubic-bezier dla płynnych przejść przy szybkim scrollu. */
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1),max-height .7s cubic-bezier(.22,.61,.36,1);
    will-change:transform,opacity;
  }
  /* C3 .in-view nie zmienia stanu na mobile — domyślnie flipped */
  .tl-row.in-view{opacity:.4;transform:rotateX(30deg) scale(.96)}
  /* Centered row — flat + visible */
  .tl-row.is-center{opacity:1;transform:rotateX(0) scale(1)}
  /* Treść (paragraph w info) chowamy gdy non-center */
  .tl-row .tl-info p{
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .55s cubic-bezier(.22,.61,.36,1),opacity .4s cubic-bezier(.22,.61,.36,1),margin-top .55s cubic-bezier(.22,.61,.36,1);
    margin-top:0
  }
  .tl-row.is-center .tl-info p{max-height:400px;opacity:1;margin-top:12px}
  @media (prefers-reduced-motion:reduce){
    .tl-row{opacity:1;transform:none}
    .tl-row .tl-info p{max-height:none;opacity:1}
  }
}
.tl-num{font-family:var(--font-mono);font-weight:500;font-size:clamp(40px,4.6vw,68px);line-height:1;letter-spacing:-.02em;color:var(--text);min-width:2.4ch}
.tl-info h3{font-family:var(--font-mono);font-weight:500;font-size:clamp(18px,1.4vw,22px);letter-spacing:-.01em;line-height:1.25;margin:0 0 10px}
.tl-info p{font-size:clamp(14px,1vw,16px);line-height:1.55;color:var(--text-muted);max-width:52ch;margin:0}

/* Approach (interactive ring) */
.approach{padding:clamp(48px,6vw,80px) var(--gutter);max-width:var(--max-width);margin:0 auto;border-top:1px solid var(--hairline)}
.approach-grid{display:grid;grid-template-columns:1fr;gap:clamp(48px,7vw,120px);align-items:center}
@media (min-width:1024px){.approach-grid{grid-template-columns:1fr 1fr}}
/* C4: na mobile reorder — najpierw approach-main (eyebrow + H2), potem koło (approach-side), potem lista.
   approach-main już zawiera H2 + listę. Rozdzielamy je: H2 zostaje na górze, lista na dole, koło między. */
@media (max-width:1023px){
  .approach-grid{display:flex;flex-direction:column;gap:32px}
  .approach-main{display:contents}
  .approach-main .label{order:1}
  .approach-main h2{order:2}
  .approach-side{order:3}
  .approach-main .approach-list{order:4}
}
.approach-side{position:relative;aspect-ratio:1;max-width:520px;margin:0 auto;width:100%;color:var(--text);container-type:inline-size}
.approach-ring{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ring-scroll{transform-origin:120px 120px;transform:rotate(var(--ring-scroll-rot,0deg))}
.ring-scroll-counter{transform-origin:120px 120px;transform:rotate(calc(var(--ring-scroll-rot,0deg) * -1.6))}
@media (prefers-reduced-motion:reduce){.ring-scroll,.ring-scroll-counter{transform:none}}
.ring-points{position:absolute;inset:0;--ring-target:0deg;transform:rotate(var(--ring-target));transition:transform .85s cubic-bezier(.4,0,.2,1)}
.rp{position:absolute;top:50%;left:50%;background:none;border:0;padding:0;cursor:pointer;color:var(--text);transform:translate(-50%,-50%) rotate(var(--a)) translateY(-38cqi);width:auto;font:inherit}
.rp-inner{display:inline-flex;flex-direction:column;align-items:center;gap:8px;transform:rotate(calc(-1 * (var(--a) + var(--ring-target))));transition:transform .85s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.rp-dot{width:9px;height:9px;border-radius:50%;border:1.2px solid currentColor;background:transparent;transition:all .35s var(--ease-out)}
.rp-name{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--text-mute-2);text-transform:uppercase;transition:color .35s var(--ease-out)}
.rp:hover .rp-dot{transform:scale(1.3)}
.rp:hover .rp-name{color:var(--text)}
.rp.is-active .rp-dot{background:currentColor;transform:scale(1.5)}
.rp.is-active .rp-name{color:var(--text)}
@media (prefers-reduced-motion:reduce){.ring-points,.rp-inner{transition:none}}
.ring-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text);pointer-events:none}
/* V1: usunięty stary override (był clamp 48-76px) — teraz base.css ustala 193-298 (2.5× większe). */
.ring-core-text{font-family:var(--font-mono);font-size:clamp(11px,1.05vw,14px);letter-spacing:.22em;text-transform:uppercase;font-weight:500;text-align:center}

.approach-main .label{font-family:var(--font-mono);font-size:11px;color:var(--text-mute-2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px;display:block}
.approach-main h2{font-family:var(--font-mono);font-weight:500;font-size:clamp(32px,3.8vw,52px);line-height:1.1;letter-spacing:-.02em;margin:0 0 48px;max-width:16ch}
.approach-list{border-top:1px solid var(--hairline)}
.ap-item{border-bottom:1px solid var(--hairline)}
.ap-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:36px 1fr auto;align-items:baseline;gap:20px;padding:22px 0;color:var(--text);transition:opacity .25s var(--ease-out)}
/* C5: mobile — bez numerków, lista bez dziedziczonego grida; sticky-to-top aktywny otwarty element */
@media (max-width:1023px){
  .ap-item summary{grid-template-columns:1fr auto;gap:14px}
  .ap-num{display:none}
  .ap-body p{padding-left:0}
  /* Aktywny otwarty element przykleja się do góry tuż pod navem żeby był widoczny po kliknięciu w koło */
  .ap-item[open]{position:sticky;top:calc(var(--nav-h) + 8px);background:var(--bg);z-index:2;box-shadow:0 1px 0 var(--hairline)}
}
.ap-item summary::-webkit-details-marker{display:none}
.ap-item summary:hover{opacity:.65}
.ap-num{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--text-mute-2);letter-spacing:.06em}
.ap-item[open] .ap-num{color:var(--text)}
.ap-name{font-family:var(--font-mono);font-weight:500;font-size:clamp(16px,1.2vw,19px);letter-spacing:-.005em;line-height:1.3}
.ap-arrow{flex-shrink:0;width:12px;height:12px;display:grid;place-items:center;color:var(--text-mute-2);transition:transform .35s var(--ease-out);align-self:center}
.ap-item[open] .ap-arrow{transform:rotate(180deg)}
.ap-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-out)}
.ap-item[open] .ap-body{grid-template-rows:1fr}
.ap-body-inner{overflow:hidden}
.ap-body p{padding:0 0 22px 56px;font-size:14.5px;line-height:1.6;color:var(--text-muted);max-width:54ch;margin:0}

/* Team */
.team{padding:clamp(40px,5vw,70px) var(--gutter);max-width:var(--max-width);margin:0 auto;border-top:1px solid var(--hairline)}
.team .label{font-family:var(--font-mono);font-size:12px;color:var(--text-mute-2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px;display:block}
.team h2{font-family:var(--font-mono);font-weight:500;font-size:clamp(40px,5vw,72px);line-height:1.05;letter-spacing:-.02em;margin:0 0 48px}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr}}
.tm{display:flex;flex-direction:column;gap:14px}
.tm-photo{aspect-ratio:1;background:var(--surface-2);border-radius:var(--radius-lg);overflow:hidden}
.tm-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4);transition:filter .8s var(--ease-out),transform .8s var(--ease-out)}
.tm:hover .tm-photo img{filter:grayscale(0);transform:scale(1.04)}
.tm-name{font-size:17px;font-weight:500;letter-spacing:-.01em}
.tm-role{font-size:14px;color:var(--text-muted);margin-top:2px}