/* t2-about.css — T2 About, mereni 1:1 sa Direction B v2 etalonom.
   SVE vrednosti doslovno iz "T2 About.html" inline style objekata (bez derived spec-a).
   Wrap: etalon stavlja maxWidth 1440 + padding NA ISTI div (border-box) → sadržaj 1280 @d.
   Etalon body NEMA line-height → elementi bez lh u source-u dobijaju `line-height: normal`. */

.t2-wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.dot { color: var(--red); }

/* T2 B_SectionLabel default = ink50 (T2 prototip; T1 koristi ink80 — zato scoped) */
.t2-intro .section-label, .t2-manifest .section-label, .t2-timeline .section-label,
.t2-team .section-label, .t2-offices .section-label { color: var(--ink50); }
.t2-intro .section-label::before, .t2-manifest .section-label::before, .t2-timeline .section-label::before,
.t2-team .section-label::before, .t2-offices .section-label::before { background: var(--ink50); }
/* hero label = rgba(255,255,255,0.7); partner/careers = 0.55 (chrome --light default) */
.t2-hero .section-label--light { color: rgba(255,255,255,0.7); }
.t2-hero .section-label--light::before { background: rgba(255,255,255,0.7); }

/* ── 1. HERO (photo, dark) — height 660/540/460, sadržaj vertikalno centriran ── */
.t2-hero { position: relative; height: 660px; display: flex; align-items: center; background: var(--ink); overflow: hidden; }
.t2-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--t2-hero-img); background-size: cover; background-position: center 35%;
  filter: contrast(1.05) brightness(0.82) saturate(0.92);
}
/* dva etalonska gradijenta (drugi listed = donji sloj) */
.t2-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,26,26,0.35) 0%, transparent 30%, transparent 70%, rgba(26,26,26,0.45) 100%),
    linear-gradient(90deg, rgba(26,26,26,0.88) 0%, rgba(26,26,26,0.6) 42%, rgba(26,26,26,0.18) 100%);
}
.t2-hero__inner { position: relative; width: 100%; color: #fff; }
.t2-hero__h1 { margin: 28px 0 0; max-width: 1000px; font-family: var(--font-display); font-weight: 500; font-size: 88px; line-height: 0.96; letter-spacing: -0.04em; color: #fff; }
.t2-hero__lead { margin: 32px 0 0; max-width: 680px; font-size: 19px; line-height: 1.55; color: rgba(255,255,255,0.82); }
@media (max-width: 1024px) { .t2-hero { height: 540px; } .t2-hero__h1 { font-size: 62px; } }
@media (max-width: 600px)  { .t2-hero { height: 460px; } .t2-hero__h1 { margin-top: 20px; font-size: 40px; } .t2-hero__lead { margin-top: 22px; font-size: 15.5px; } }

/* ── 2. STATS (dark) — padding (m48:72), grid 5/3/2, gap 32 (m: 24×32) ───────── */
.t2-stats { background: var(--ink); color: #fff; padding: 72px 0; }
.t2-stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 32px; row-gap: 32px; }
.t2-stat { border-left: 2px solid rgba(255,255,255,0.22); padding-left: 20px; }
.t2-stat__num { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 0.9; letter-spacing: -0.03em; }
.t2-stat__label { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; line-height: normal; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
@media (max-width: 1024px) { .t2-stats__grid { grid-template-columns: repeat(3, 1fr); } .t2-stat__num { font-size: 54px; } }
@media (max-width: 600px)  {
  .t2-stats { padding: 48px 0; }
  .t2-stats__grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
  .t2-stat { padding-left: 14px; }
  .t2-stat__num { font-size: 44px; }
}

/* ── 3. INTRO — padding (m56:104), grid 280px/1fr gap 80, body maxW 800 ──────── */
.t2-intro { background: var(--bg); padding: 104px 0; }
.t2-intro__grid { display: grid; grid-template-columns: 280px 1fr; gap: 80px; }
/* label je direktno grid dete (etalon ga ima u Reveal wrapperu) — bez ovoga se stretch-uje
   na visinu reda pa flex-centriranje spusti sadržaj (Stevanov nalaz #6) */
.t2-intro__grid > .section-label { align-self: start; }
.t2-intro__body { max-width: 800px; }
.t2-intro__lead { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.32; letter-spacing: -0.015em; color: var(--ink); }
.t2-intro__p { margin: 28px 0 0; max-width: 700px; font-size: 16px; line-height: 1.65; color: var(--ink70); }
@media (max-width: 1024px) { .t2-intro__grid { grid-template-columns: 1fr; gap: 44px; } .t2-intro__lead { font-size: 26px; } }
@media (max-width: 600px)  { .t2-intro { padding: 56px 0; } .t2-intro__grid { gap: 28px; } .t2-intro__lead { font-size: 22px; } }

/* ── 4. MANIFEST — bez vertikalnog paddinga sekcije; sticky top 140 ──────────── */
.t2-manifest { background: var(--bg); border-top: 1px solid var(--ink15); }
.t2-manifest__grid { display: grid; grid-template-columns: 360px 1fr; gap: 80px; align-items: start; }
.t2-manifest__index { position: sticky; top: 140px; align-self: start; padding-top: 96px; }
.t2-man-idx { margin-top: 44px; display: flex; flex-direction: column; gap: 4px; }
.t2-man-idx__item { cursor: pointer; padding: 18px 0; border-top: 1px solid var(--ink15); }
.t2-man-idx__row { display: flex; align-items: baseline; gap: 16px; }
.t2-man-idx__num { font-family: var(--font-mono); font-size: 12px; line-height: normal; color: var(--ink30); transition: color .3s; }
.t2-man-idx__word { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: normal; letter-spacing: -0.03em; color: var(--ink30); transition: color .3s; }
.t2-man-idx__tagwrap { display: block; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .4s, opacity .4s; } /* mora block: max-height ne važi na inline span */
.t2-man-idx__tag { display: block; padding-left: 28px; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; line-height: normal; letter-spacing: 0.04em; color: var(--red); text-transform: uppercase; }
.t2-man-idx__item.is-active .t2-man-idx__num { color: var(--red); }
.t2-man-idx__item.is-active .t2-man-idx__word { color: var(--ink); }
.t2-man-idx__item.is-active .t2-man-idx__tagwrap { max-height: 40px; opacity: 1; }
.t2-manifest__panels { display: block; } /* etalon wrapper je običan div */
.t2-man-panel { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; padding: 80px 0; }
.t2-man-panel + .t2-man-panel { border-top: 1px solid var(--ink15); }
.t2-man-panel__tag { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: normal; color: var(--red); letter-spacing: -0.01em; }
.t2-man-panel__h2 { margin: 24px 0 0; max-width: 760px; font-family: var(--font-display); font-weight: 500; font-size: 46px; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.t2-man-panel__body { margin: 28px 0 0; max-width: 680px; font-size: 17px; line-height: 1.65; color: var(--ink70); }
@media (max-width: 1024px) {
  .t2-manifest__grid { grid-template-columns: 1fr; gap: 0; }
  .t2-manifest__index { position: static; padding-top: 96px; padding-bottom: 8px; }
  .t2-man-panel { min-height: auto; padding: 48px 0; }
  .t2-man-panel__h2 { font-size: 38px; }
}
@media (max-width: 600px) {
  .t2-manifest__index { padding-top: 48px; }
  .t2-man-idx { margin-top: 28px; }
  .t2-man-idx__word { font-size: 28px; }
  .t2-man-panel { padding: 36px 0; }
  .t2-man-panel__tag { font-size: 19px; }
  .t2-man-panel__h2 { font-size: 30px; }
  .t2-man-panel__body { font-size: 15.5px; }
}

/* ── 5. TIMELINE — padding (m56:96); h2 mt20 mb56 (m40), maxW 800, lh normal ── */
.t2-timeline { background: var(--bg-deep); border-top: 1px solid var(--ink15); padding: 96px 0; }
.t2-timeline__h2 { margin: 20px 0 56px; max-width: 800px; font-family: var(--font-display); font-weight: 500; font-size: 52px; line-height: normal; letter-spacing: -0.035em; color: var(--ink); }
.t2-tl { max-width: 760px; position: relative; padding-left: 44px; }
.t2-tl__line { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--ink15); }
.t2-tl__item { position: relative; padding-bottom: 44px; }
.t2-tl__item:last-child { padding-bottom: 0; }
.t2-tl__dot { position: absolute; left: -44px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 3px solid var(--bg-deep); z-index: 2; }
.t2-tl__yr { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: normal; color: var(--red); letter-spacing: 0.06em; }
.t2-tl__title { margin-top: 6px; font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: normal; letter-spacing: -0.018em; color: var(--ink); }
.t2-tl__body { margin: 8px 0 0; max-width: 600px; font-size: 15px; line-height: 1.6; color: var(--ink70); }
@media (max-width: 600px) { .t2-timeline { padding: 56px 0; } .t2-timeline__h2 { margin-bottom: 40px; font-size: 34px; } }
@media (max-width: 1024px) and (min-width: 601px) { .t2-timeline__h2 { font-size: 44px; } }

/* ── 6. TEAM — padding (m56:96); head flex-end gap 24 mb56 ───────────────────── */
.t2-team { background: var(--bg); border-top: 1px solid var(--ink15); padding: 96px 0; }
.t2-team__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 56px; }
.t2-team__h2 { margin: 20px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 52px; line-height: normal; letter-spacing: -0.035em; color: var(--ink); }
.t2-team__hint { margin: 0; max-width: 320px; font-size: 14px; line-height: 1.55; color: var(--ink70); }
.t2-team__tier { line-height: normal; } /* line-box oko inline-flex eyebrow-a: etalon body nema lh */
.t2-team__tier + .t2-team__tier { margin-top: 56px; }
.t2-team__tier > .eyebrow { display: inline-flex; margin-bottom: 24px; }
.t2-team__grid { display: grid; gap: 24px; }
.t2-team__grid--lead { grid-template-columns: 1fr 1fr; gap: 32px; }
.t2-team__grid--heads { grid-template-columns: repeat(4, 1fr); }
.t2-card { display: flex; flex-direction: column; align-items: stretch; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.t2-card__photo { display: block; width: 100%; height: 320px; background: var(--ink08) center/cover no-repeat; filter: grayscale(1) contrast(1.04); }
.t2-card--lg .t2-card__photo { height: 440px; }
.t2-card__name { margin-top: 16px; font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: normal; letter-spacing: -0.015em; color: var(--ink); }
.t2-card--lg .t2-card__name { font-size: 22px; }
.t2-card__role { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; line-height: normal; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink70); }
.t2-card__open { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
@media (max-width: 1024px) { .t2-team__h2 { font-size: 44px; } .t2-team__grid--heads { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
  .t2-team { padding: 56px 0; }
  .t2-team__h2 { font-size: 34px; }
  .t2-team__grid--lead { grid-template-columns: 1fr; gap: 24px; }
  .t2-team__grid--heads { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* Bio modal — etalon: box maxW 640, grid 220/1fr bez gap-a, content pad 36 ───── */
.t2-modal[hidden] { display: none; }
.t2-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.t2-modal__overlay { position: absolute; inset: 0; background: rgba(26,26,26,0.6); backdrop-filter: blur(4px); }
.t2-modal__box { position: relative; background: var(--paper); max-width: 640px; width: 100%; border-top: 4px solid var(--red); max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.3); }
.t2-modal__grid { display: grid; grid-template-columns: 220px 1fr; }
.t2-modal__photo { display: block; width: 100%; height: 100%; min-height: 280px; background: var(--ink08) center/cover no-repeat; filter: grayscale(1) contrast(1.04); }
.t2-modal__content { padding: 36px; position: relative; }
/* z-index OBAVEZAN: .t2-modal__content je position:relative i dolazi POSLE dugmeta u
   DOM-u, pa bi ga bez ovoga preslikao — klik na „×" je padao na .t2-modal__name. */
.t2-modal__close { position: absolute; z-index: 2; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.t2-modal__name { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: normal; letter-spacing: -0.02em; color: var(--ink); padding-right: 36px; }
.t2-modal__role { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.t2-modal__bio { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink70); }
.t2-modal__exp { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.t2-modal__exp span { font-family: var(--font-mono); font-size: 10.5px; line-height: normal; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; background: var(--ink08); color: var(--ink); }
@media (max-width: 600px) { .t2-modal__grid { grid-template-columns: 1fr; } .t2-modal__photo { min-height: 220px; } }

/* ── 7. PARTNERSHIP (navy) — padding (m56:104); top grid flex-end gap 80 ─────── */
.t2-partner { background: var(--blue); color: #fff; padding: 104px 0; }
.t2-partner__top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: flex-end; margin-top: 40px; }
.t2-partner__h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1.02; letter-spacing: -0.04em; color: #fff; }
.t2-partner__body { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.72); }
.t2-partner__trio { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.18); }
.t2-partner__cell { background: var(--blue); padding: 32px 28px; }
.t2-partner__big { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: normal; letter-spacing: -0.02em; color: #fff; }
.t2-partner__small { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
@media (max-width: 1024px) { .t2-partner__top { grid-template-columns: 1fr; } .t2-partner__h2 { font-size: 52px; } }
@media (max-width: 600px) {
  .t2-partner { padding: 56px 0; }
  .t2-partner__top { gap: 28px; }
  .t2-partner__h2 { font-size: 40px; }
  .t2-partner__trio { margin-top: 40px; grid-template-columns: 1fr; }
}

/* ── 8. OFFICES — padding (m56:96); kartica flex col, kontakt mono blok ──────── */
.t2-offices { background: var(--bg); border-top: 1px solid var(--ink15); padding: 96px 0; }
.t2-offices__h2 { margin: 20px 0 48px; font-family: var(--font-display); font-weight: 500; font-size: 52px; line-height: normal; letter-spacing: -0.035em; color: var(--ink); }
.t2-offices__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.t2-off-card { border: 1.5px solid var(--ink); padding: 40px; height: 100%; display: flex; flex-direction: column; }
.t2-off-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.t2-off-card__city { font-family: var(--font-display); font-weight: 500; font-size: 38px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.t2-off-card__tag { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; line-height: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink50); }
.t2-off-card__flag { font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: normal; padding: 6px 10px; background: var(--ink); color: #fff; letter-spacing: 0.06em; }
.t2-off-card__addr { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--ink15); font-size: 16px; line-height: 1.65; color: var(--ink); }
.t2-off-card__contact { margin-top: 20px; font-family: var(--font-mono); font-size: 13px; line-height: 1.9; color: var(--ink70); }
.t2-off-card__email { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--red); padding-bottom: 1px; }
.t2-off-card__ctarow { margin-top: 32px; padding-top: 8px; }
.t2-off-card__cta { padding: 12px 22px; }
@media (max-width: 600px) { .t2-offices { padding: 56px 0; } .t2-offices__h2 { font-size: 34px; } .t2-offices__grid { grid-template-columns: 1fr; gap: 20px; } .t2-off-card { padding: 26px; } }
@media (max-width: 1024px) and (min-width: 601px) { .t2-offices__h2 { font-size: 44px; } }

/* ── 9. CAREERS CTA (dark) — padding (m56:104); p maxW 560; cta mt40 gap14 ───── */
.t2-careers { background: var(--ink); color: #fff; padding: 104px 0; text-align: center; }
.t2-careers__inner { display: flex; flex-direction: column; align-items: center; }
.t2-careers .section-label { justify-content: center; }
.t2-careers__h2 { margin: 28px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 76px; line-height: 0.95; letter-spacing: -0.04em; color: #fff; }
.t2-careers__p { margin: 28px 0 0; max-width: 560px; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.72); }
.t2-careers__cta { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 1024px) { .t2-careers__h2 { font-size: 60px; } }
@media (max-width: 600px)  { .t2-careers { padding: 56px 0; } .t2-careers__h2 { font-size: 46px; } .t2-careers__p { font-size: 15.5px; } }