/* =====================================================================
   ROCC Team Page — /uber-uns/ (page 58)
   2026 Web Styleguide ("Vom Papier ins Web"): warm canvas, navy Montserrat
   headlines, DM Sans body, DM Mono for real numbers only.
   Tokens + hero/container/buttons match the portfolio (films-hub) 1:1.
   Everything scoped under .rteam so it never touches global Elementor CSS.
   ===================================================================== */

.rteam {
  /* --- 2026 tokens (identical values to .rcfv2 so the page matches the portfolio) --- */
  --rt-blue:#2F4E9E;        /* accent: overlines, links, leads */
  --rt-blue-deep:#1A2A5C;   /* headlines, primary buttons, dark bands */
  --rt-canvas:#F5F4F1;      /* warm page canvas — never pure white */
  --rt-surface:#FFFFFF;     /* cards / surfaces */
  --rt-chip:#ECEFF7;        /* chips, light-button fill */
  --rt-text:#1A2A5C;        /* headings = deep blue */
  --rt-ink:#1C1C1A;         /* names, strong UI text — never #000 */
  --rt-body:#2A2A28;        /* body copy */
  --rt-body-light:#7A7A7A;  /* captions only (not body text — sub-AA on canvas) */
  --rt-border:#E5E3DE;      /* card borders, row lines */
  --rt-border-strong:#D9D6CE;
  --rt-shadow-md:0 12px 32px rgba(20,20,18,.08);
  --rt-shadow-lg:0 18px 44px rgba(20,20,18,.10);
  --rt-head:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rt-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rt-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --rt-ease:cubic-bezier(.22,.61,.36,1);
  --rt-gap:clamp(18px,2vw,28px);

  width:100%; max-width:100%; overflow-x:clip;
  font-family:var(--rt-sans); color:var(--rt-body); line-height:1.65;
  background:var(--rt-canvas); -webkit-font-smoothing:antialiased;
}
.rteam *,.rteam *::before,.rteam *::after { box-sizing:border-box; }
.rteam h1,.rteam h2,.rteam h3,.rteam h4 {
  font-family:var(--rt-head); color:var(--rt-text); margin:0;
  font-weight:700; line-height:1.16; letter-spacing:-.018em; text-wrap:balance;
}
.rteam p { margin:0 0 1.1em; }
.rteam p:last-child { margin-bottom:0; }
.rteam a { color:var(--rt-blue); text-decoration:none; transition:color .15s var(--rt-ease); }
.rteam a:hover { color:var(--rt-blue-deep); }
.rteam img { max-width:100%; height:auto; display:block; }

.rteam .rt__container { max-width:1140px; margin:0 auto; padding:0 clamp(20px,4vw,40px); }
.rteam .rt__container--wide { max-width:1500px; }

/* screen-reader-only utility (mirrors portfolio .rcf-sr-only) */
.rteam .rt-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; }

.rteam .rt__overline {
  font-family:var(--rt-sans); font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rt-blue); margin:0 0 14px;
  display:inline-flex; align-items:center; gap:12px;
}
.rteam .rt__overline::before { content:""; width:28px; height:1px; background:var(--rt-blue); display:inline-block; }
.rteam .rt__overline--light { color:#8FB8D9; }
.rteam .rt__overline--light::before { background:#8FB8D9; }

/* ---------- BUTTONS (match portfolio) ---------- */
.rteam .rt-btn {
  display:inline-flex; align-items:center; gap:10px; font-family:var(--rt-sans);
  font-size:15px; font-weight:600; letter-spacing:.01em; padding:13px 26px; border-radius:8px;
  text-decoration:none!important; cursor:pointer; transition:all .2s var(--rt-ease);
  border:1.5px solid transparent; white-space:nowrap;
}
.rteam .rt-btn--primary { background:var(--rt-blue-deep); color:#fff!important; }
.rteam .rt-btn--primary:hover { background:var(--rt-blue); transform:translateY(-2px); box-shadow:var(--rt-shadow-md); }
.rteam .rt-btn--ghost { background:transparent; color:var(--rt-blue-deep)!important; border-color:var(--rt-border-strong); }
.rteam .rt-btn--ghost:hover { background:var(--rt-chip); border-color:var(--rt-blue); color:var(--rt-blue-deep)!important; transform:translateY(-2px); }
.rteam .rt-btn__arrow { transition:transform .2s var(--rt-ease); display:inline-block; color:inherit!important; }
.rteam .rt-btn:hover .rt-btn__arrow { transform:translateX(4px); }

/* ---------- HERO (matches .port-hero) ---------- */
.rteam .team-hero { background:var(--rt-canvas); padding:clamp(36px,5.5vw,76px) 0 clamp(28px,3.5vw,48px); }
.rteam .hero-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px,4vw,56px); align-items:center; }
@media(max-width:860px){ .rteam .hero-grid { grid-template-columns:1fr; gap:clamp(24px,5vw,36px); } }
.rteam .hero-copy h1 { font-family:var(--rt-head); font-weight:800; font-size:clamp(2rem,5vw,3.25rem); line-height:1.06; letter-spacing:-.022em; color:var(--rt-text); margin:0 0 18px; }
.rteam .hero-sub { font-size:clamp(1.0625rem,1.4vw,1.25rem); line-height:1.55; color:var(--rt-body); max-width:600px; margin:0 0 26px; } /* intro = body colour, not blue (Robin no-blue-text rule, 2026-06-18) */
.rteam .hero-cta { display:flex; flex-wrap:wrap; gap:12px; }
.rteam .hero-media { width:100%; margin:0; }
.rteam .hero-photo {
  position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  box-shadow:var(--rt-shadow-lg); background:var(--rt-blue-deep);
}
.rteam .hero-photo img { width:100%; height:100%; object-fit:cover; object-position:center; }
.rteam .hero-photo figcaption {
  position:absolute; left:0; right:0; bottom:0; z-index:2; margin:0;
  padding:26px 18px 14px; font-family:var(--rt-sans); font-size:12.5px; font-weight:500;
  letter-spacing:.02em; color:#EAEEF8;
  background:linear-gradient(to top,rgba(13,18,42,.62),transparent);
}

/* ---------- TEAM GRID ---------- */
.rteam .team-sec { background:var(--rt-canvas); padding:clamp(40px,5.5vw,80px) 0 clamp(40px,5.5vw,80px); }
.rteam .team-head { max-width:720px; margin:0 0 clamp(28px,3.5vw,44px); }
.rteam .team-head h2 { font-size:clamp(1.75rem,3.4vw,2.5rem); margin:0 0 14px; }
.rteam .team-head p { font-size:clamp(1.0625rem,1.4vw,1.1875rem); line-height:1.6; color:var(--rt-body); margin:0; }

.rteam .team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--rt-gap); }
@media(max-width:1100px){ .rteam .team-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:860px){ .rteam .team-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .rteam .team-grid { grid-template-columns:1fr; } }

.rteam .tcard {
  display:flex; flex-direction:column; background:var(--rt-surface); border:1px solid var(--rt-border);
  border-radius:14px; overflow:hidden; transition:transform .25s var(--rt-ease),box-shadow .25s var(--rt-ease),border-color .25s var(--rt-ease);
}
.rteam .tcard:hover { transform:translateY(-3px); border-color:var(--rt-blue); box-shadow:var(--rt-shadow-md); }
.rteam .tcard-photo { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--rt-chip); }
.rteam .tcard-photo img { width:100%; height:100%; object-fit:cover; object-position:center 26%; filter:grayscale(1); transition:transform .6s var(--rt-ease),filter .4s var(--rt-ease); }
.rteam .tcard:hover .tcard-photo img { transform:scale(1.04); filter:grayscale(0); }

.rteam .tcard-body { display:flex; flex-direction:column; padding:18px 20px 20px; flex:1 1 auto; }
.rteam .tcard-name { font-family:var(--rt-head); font-size:1.0625rem; font-weight:700; color:var(--rt-text); line-height:1.25; margin:0; letter-spacing:-.01em; }
.rteam .tcard-role { font-family:var(--rt-sans); font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--rt-blue); margin:6px 0 12px; }
.rteam .tcard-bio { font-size:.9375rem; line-height:1.6; color:var(--rt-body); margin:0; }
.rteam .tcard-bio.is-clamped {
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
.rteam .tcard-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; }
.rteam .tcard-foot.is-empty { display:none; }
.rteam .tcard-toggle {
  font-family:var(--rt-sans); font-size:13px; font-weight:600; color:var(--rt-blue);
  background:none; border:0; padding:0; cursor:pointer; transition:color .15s var(--rt-ease);
}
.rteam .tcard-toggle:hover { color:var(--rt-blue-deep); }
.rteam .tcard-toggle:focus-visible { outline:2px solid var(--rt-blue); outline-offset:3px; border-radius:3px; }
.rteam .tcard-toggle[hidden] { display:none; }
.rteam .tcard-linkedin {
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:8px; color:var(--rt-blue); background:var(--rt-chip); flex:0 0 auto; margin-left:auto;
  transition:background .2s var(--rt-ease),color .2s var(--rt-ease);
}
.rteam .tcard-linkedin:hover { background:var(--rt-blue-deep); color:#fff; }
.rteam .tcard-linkedin svg { width:17px; height:17px; }

/* ---------- JOIN TILE (12th card = clean grid + recruiting CTA) ---------- */
.rteam .tcard--join {
  display:flex; flex-direction:column; justify-content:center; gap:10px; text-align:left;
  background:var(--rt-blue-deep); border-color:var(--rt-blue-deep); color:#fff;
  padding:clamp(22px,2vw,30px); text-decoration:none!important; min-height:100%;
}
.rteam .tcard--join:hover { transform:translateY(-3px); box-shadow:var(--rt-shadow-md); border-color:var(--rt-blue-deep); }
.rteam .join-overline { font-family:var(--rt-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8FB8D9; }
.rteam .join-title { font-family:var(--rt-head); font-weight:700; font-size:clamp(1.25rem,1.8vw,1.5rem); line-height:1.2; color:#fff; letter-spacing:-.01em; }
.rteam .join-text { font-family:var(--rt-sans); font-size:.9375rem; line-height:1.55; color:#C9D2EA; }
.rteam .join-cta { margin-top:8px; display:inline-flex; align-items:center; gap:8px; font-family:var(--rt-sans); font-weight:600; font-size:14px; color:#fff; }
.rteam .tcard--join:hover .rt-btn__arrow { transform:translateX(4px); }

/* ---------- STATS (navy card floating on the canvas) ---------- */
.rteam .stats-sec { background:var(--rt-canvas); padding:clamp(20px,3vw,48px) 0 clamp(48px,6vw,88px); }
.rteam .stats-box { background:var(--rt-blue-deep); color:#fff; border-radius:16px; padding:clamp(36px,5vw,72px) clamp(28px,4vw,64px); }
.rteam .stats-head { max-width:760px; margin:0 0 clamp(30px,4vw,52px); }
.rteam .stats-head h2 { color:#fff; font-size:clamp(1.625rem,3vw,2.25rem); line-height:1.2; margin:0 0 16px; }
.rteam .stats-head p { color:#C9D2EA; font-size:clamp(1rem,1.25vw,1.125rem); line-height:1.6; margin:0; max-width:680px; }
.rteam .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.5vw,40px); }
@media(max-width:760px){ .rteam .stats-grid { grid-template-columns:repeat(2,1fr); gap:32px 24px; } }
@media(max-width:380px){ .rteam .stats-grid { grid-template-columns:1fr; } }
.rteam .stat { padding-top:20px; border-top:2px solid rgba(143,184,217,.35); }
.rteam .stat-num { font-family:var(--rt-head); font-weight:800; font-size:clamp(2.25rem,4.4vw,3.5rem); line-height:1; color:#fff; letter-spacing:-.02em; display:flex; align-items:baseline; gap:2px; }
.rteam .stat-num .stat-suffix { font-size:.55em; font-weight:700; color:#8FB8D9; }
.rteam .stat-label { font-family:var(--rt-sans); font-size:.9375rem; font-weight:500; color:#C9D2EA; margin-top:12px; }

/* ---------- REVEAL ON SCROLL ---------- */
.rteam .rt-reveal { opacity:0; transform:translateY(14px); transition:opacity .5s var(--rt-ease),transform .5s var(--rt-ease); }
.rteam .rt-reveal.is-visible { opacity:1; transform:translateY(0); }
.rteam .rt-reveal[data-delay="1"]{ transition-delay:.06s; }
.rteam .rt-reveal[data-delay="2"]{ transition-delay:.12s; }

@media (prefers-reduced-motion: reduce) {
  .rteam .rt-reveal { opacity:1!important; transform:none!important; transition:none!important; }
  .rteam .tcard, .rteam .tcard-photo img, .rteam .tcard--join { transition:none!important; }
  .rteam .tcard:hover, .rteam .tcard--join:hover { transform:none!important; }
  .rteam .tcard:hover .tcard-photo img { transform:none!important; }
}