/* ============================================================
   ROCC Landing — layer-specific styles ONLY.
   Consumes the shared design system (rocc-components/assets/rocc-2026.css):
   uses its --r26-* tokens + .r26 base + .r26-h2/.r26-kicker/.r26-lead/.r26-btn/.r26-card.
   Defines ONLY landing-owned classes (rlk-*) so it can never collide with the
   shared .r26-* component namespace. Never redefine an --r26-* token here.
   ============================================================ */

/* ---- Breadcrumb trail ---- */
.rlk-crumbs {
  padding: 28px 0 0;
  font-size: 14px;
  color: var(--r26-muted);
}
.rlk-crumbs a { color: var(--r26-blue); text-decoration: none; }
.rlk-crumbs a:hover { text-decoration: underline; }
.rlk-crumbs .rlk-crumb-sep { margin: 0 8px; color: var(--r26-muted-soft); }
.rlk-crumbs [aria-current="page"] { color: var(--r26-muted); }

/* ---- Interlink ("Weitere Formate") fallback grid ---- */
.rlk-interlink-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .rlk-interlink-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rlk-interlink-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.rlk-interlink-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
  color: var(--r26-blue-deep);
  font-family: var(--r26-font-head);
  font-weight: 700;
  font-size: 17px;
}
.rlk-interlink-card .rlk-interlink-arrow {
  color: var(--r26-blue);
  font-size: 20px;
  transition: transform .2s ease;
}
.rlk-interlink-card:hover .rlk-interlink-arrow { transform: translateX(4px); }

/* ============================================================
   Price configurator — .rlk-konf
   ============================================================ */
.rlk-konf-header { text-align: center; margin-bottom: 48px; }
.rlk-konf-header .r26-lead { margin-left: auto; margin-right: auto; }

.rlk-konf-step { margin-bottom: 44px; }
.rlk-konf-step:last-child { margin-bottom: 0; }
.rlk-konf-step-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.rlk-konf-step-num {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--r26-blue-deep);
  color: #fff;
  font-family: var(--r26-font-body);
  font-weight: 700; font-size: 14px;
}
.rlk-konf-step-title {
  font-family: var(--r26-font-head);
  font-weight: 700; font-size: 20px; line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--r26-blue-deep);
  margin: 0;
}

/* option grid */
.rlk-konf-options {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .rlk-konf-options { grid-template-columns: repeat(3, 1fr); }
  .rlk-konf-options--multi { grid-template-columns: repeat(2, 1fr); }
}

/* option card (button) */
.rlk-konf-opt {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0; /* allow grid tracks to shrink — prevents the 3-up grid blowing past the container */
  text-align: center;
  cursor: pointer;
  background: var(--r26-surface);
  border: 1.5px solid var(--r26-hairline-soft);
  border-radius: var(--r26-radius-card);
  padding: 26px 22px;
  font-family: var(--r26-font-body);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rlk-konf-options--multi .rlk-konf-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 18px 20px;
}
.rlk-konf-opt:hover {
  border-color: var(--r26-blue);
  box-shadow: 0 10px 28px rgba(20, 20, 18, .08);
  transform: translateY(-2px);
}
.rlk-konf-opt.is-active {
  border-color: var(--r26-blue);
  background: var(--r26-chip);
}

/* check indicator */
.rlk-konf-check {
  position: absolute;
  top: 12px; right: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--r26-hairline);
  transition: background .2s ease, border-color .2s ease;
}
.rlk-konf-options--multi .rlk-konf-check {
  position: static;
  border-radius: 5px;
  flex-shrink: 0;
}
.rlk-konf-opt.is-active .rlk-konf-check {
  background: var(--r26-blue);
  border-color: var(--r26-blue);
}
.rlk-konf-opt.is-active .rlk-konf-check::after {
  content: "✓";
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.rlk-konf-opt-icon { display: block; font-size: 28px; margin-bottom: 10px; line-height: 1; }
.rlk-konf-options--multi .rlk-konf-opt-icon { margin-bottom: 0; }
.rlk-konf-opt-title {
  display: block;
  font-weight: 600; font-size: 16px;
  color: var(--r26-ink);
  margin-bottom: 4px;
}
.rlk-konf-opt-desc {
  display: block;
  font-size: 14px; line-height: 1.5;
  color: var(--r26-muted);
}

/* summary panel */
.rlk-konf-summary {
  margin-top: 48px;
  background: var(--r26-surface);
  border: 1.5px solid var(--r26-hairline-soft);
  border-radius: var(--r26-radius-card);
  padding: 32px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.rlk-konf-summary.is-filled {
  border-color: var(--r26-blue);
  box-shadow: 0 10px 32px rgba(20, 20, 18, .08);
}
.rlk-konf-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.rlk-konf-summary-title {
  font-family: var(--r26-font-head);
  font-weight: 700; font-size: 19px;
  color: var(--r26-blue-deep);
  margin: 0 0 4px;
}
.rlk-konf-summary-desc { font-size: 14px; color: var(--r26-muted); margin: 0; }
.rlk-konf-price { text-align: right; }
.rlk-konf-price[hidden] { display: none; }
.rlk-konf-price-range {
  font-family: var(--r26-font-mono);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
  color: var(--r26-blue);
  margin-bottom: 4px;
}
.rlk-konf-price-note { font-size: 12px; color: var(--r26-muted); }

.rlk-konf-items { list-style: none; margin: 0 0 26px; padding: 0; }
.rlk-konf-items .rlk-konf-item {
  position: relative;
  padding: 11px 0 11px 28px;
  border-bottom: 1px solid var(--r26-hairline-soft);
  font-size: 15px;
  color: var(--r26-body);
}
.rlk-konf-items .rlk-konf-item:last-child { border-bottom: none; }
.rlk-konf-items .rlk-konf-item::before {
  content: "✓";
  position: absolute;
  left: 0; top: 11px;
  color: var(--r26-blue);
  font-weight: 700;
}
.rlk-konf-item--inc { color: var(--r26-muted); }

.rlk-konf-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.rlk-konf-cta-hint { font-size: 14px; color: var(--r26-muted); }

/* ============================================================
   FAQ fallback — scoped under .rlk-faq-fallback so it never
   collides with the shared .r26-acc-* styles once those ship.
   Behaviour comes from shared rocc-2026.js (.r26-acc-q toggle).
   ============================================================ */
.rlk-faq-narrow { max-width: 860px; }
.rlk-faq-fallback .r26-acc-item { border-bottom: 1px solid var(--r26-hairline-soft); }
.rlk-faq-fallback .r26-acc-item:first-child { border-top: 1px solid var(--r26-hairline-soft); }
.rlk-faq-fallback .r26-acc-q {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  padding: 24px 48px 24px 0;
  font-family: var(--r26-font-body);
  font-weight: 600; font-size: 17px; line-height: 1.4;
  color: var(--r26-blue-deep);
  transition: color .2s ease;
}
.rlk-faq-fallback .r26-acc-q:hover { color: var(--r26-blue); }
.rlk-faq-fallback .r26-acc-q::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 24px; font-weight: 300;
  color: var(--r26-muted-soft);
  transition: color .2s ease;
}
.rlk-faq-fallback .r26-acc-item.is-open .r26-acc-q { color: var(--r26-blue); }
.rlk-faq-fallback .r26-acc-item.is-open .r26-acc-q::after { content: "\2212"; color: var(--r26-blue); }
.rlk-faq-fallback .r26-acc-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.rlk-faq-fallback .r26-acc-item.is-open .r26-acc-a { max-height: 800px; }
.rlk-faq-fallback .r26-acc-a-inner { padding: 0 0 24px; }
.rlk-faq-fallback .r26-acc-a-inner p {
  font-size: 16px; line-height: 1.7;
  color: var(--r26-body);
  max-width: 720px;
  margin: 0 0 12px;
}
.rlk-faq-fallback .r26-acc-a-inner p:last-child { margin-bottom: 0; }

/* ============================================================
   Section helpers used by the mapper (prose / boxed / stats / cards / process)
   ============================================================ */
.rlk-prose { max-width: 760px; }
.rlk-prose p { font-size: 17px; line-height: 1.65; color: var(--r26-body); margin: 0 0 16px; }
.rlk-prose p:last-child { margin-bottom: 0; }
.rlk-prose h3 {
  font-family: var(--r26-font-head); font-weight: 700; font-size: 22px;
  line-height: 1.25; letter-spacing: -0.012em; color: var(--r26-blue-deep); margin: 28px 0 10px;
}
.rlk-prose ul { margin: 0 0 16px; padding-left: 22px; }
.rlk-prose li { margin: 0 0 8px; }

.rlk-box {
  background: var(--r26-surface);
  border: 1px solid var(--r26-hairline-soft);
  border-left: 4px solid var(--r26-blue);
  border-radius: var(--r26-radius-card);
  padding: 28px 32px;
  max-width: none;
}
.rlk-box .rlk-prose { max-width: none; }

/* stat row — real numbers in DM Mono */
.rlk-stats {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 36px;
}
@media (min-width: 720px) { .rlk-stats { grid-template-columns: repeat(3, 1fr); } }
.rlk-stat { text-align: left; }
.rlk-stat-num {
  font-family: var(--r26-font-mono); font-weight: 400;
  font-size: clamp(30px, 4vw, 44px); line-height: 1;
  color: var(--r26-blue-deep); margin-bottom: 8px;
}
.rlk-stat-label { font-size: 15px; line-height: 1.5; color: var(--r26-muted); }

/* card grids reused from the mapper */
.rlk-cards { margin-top: 36px; }
.rlk-card-title {
  font-family: var(--r26-font-head); font-weight: 700; font-size: 19px;
  line-height: 1.25; letter-spacing: -0.012em; color: var(--r26-blue-deep); margin: 0 0 8px;
}
.rlk-cards p { font-size: 15px; line-height: 1.6; color: var(--r26-body); margin: 0; }

/* numbered process list — card grid; cells auto-equalize so columns don't drift */
.rlk-process { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 821px)  { .rlk-process { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1080px) { .rlk-process { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.r26 .rlk-process-step {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--r26-surface);
  border: 1px solid var(--r26-hairline-soft);
  border-radius: var(--r26-radius-card);
  padding: clamp(18px, 1.6vw, 24px);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.r26 .rlk-process-step::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--r26-blue); opacity: .85; }
.r26 .rlk-process-step:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(20, 20, 18, .09); border-color: var(--r26-hairline); }
.r26 .rlk-process-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--r26-hairline-soft); }
.r26 .rlk-process-num { font-family: var(--r26-font-mono); font-size: clamp(28px, 3vw, 34px); font-weight: 500; line-height: 1; color: var(--r26-blue-deep); letter-spacing: -0.02em; }
.r26 .rlk-process-label { font-family: var(--r26-font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--r26-muted-soft); }
.r26 .rlk-process-step .rlk-card-title { margin: 0; }
.r26 .rlk-process-step p { font-size: 15px; line-height: 1.55; color: var(--r26-body); margin: 0; }

/* ============================================================
   Hero fallback (.rlk-hero) — until the shared [rocc_hero] ships
   ============================================================ */
.rlk-hero-h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}
.rlk-hero-grid { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
.rlk-hero--split .rlk-hero-grid { grid-template-columns: 1fr; }
@media (min-width: 821px) {
  .rlk-hero--split .rlk-hero-grid { grid-template-columns: 1.04fr .96fr; gap: clamp(32px, 4vw, 64px); }
}
.rlk-hero-copy { min-width: 0; }
.rlk-hero-copy .r26-lead { margin-left: 0; max-width: 600px; }
.rlk-hero-bullets { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.rlk-hero-bullets li { position: relative; padding-left: 28px; font-size: 16px; color: var(--r26-body); }
.rlk-hero-bullets li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--r26-blue); font-weight: 700; }
.rlk-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.rlk-hero-media {
  position: relative; width: 100%; min-width: 0;
  aspect-ratio: 16 / 9; min-height: 300px;
  border-radius: var(--r26-radius-band); overflow: hidden;
  background: var(--r26-blue-deep);
  box-shadow: 0 26px 60px -24px rgba(20, 20, 18, .42);
}
.rlk-hero-media > img,
.rlk-hero-media .rlk-hero-play,
.rlk-hero-media .rlk-hero-play img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: 0;
}
.rlk-hero-media .rlk-hero-play { z-index: 1; }
.rlk-hero-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.rlk-hero-playbtn {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, .92);
  color: var(--r26-blue-deep); font-size: 22px;
  box-shadow: 0 8px 28px rgba(20, 20, 18, .28);
  transition: transform .25s ease, background .25s ease, color .25s ease;
  z-index: 2;
}
.rlk-hero-play:hover .rlk-hero-playbtn { transform: scale(1.06); background: var(--r26-blue); color: #fff; }
@media (max-width: 820px) {
  .rlk-hero-grid { gap: clamp(24px, 5vw, 36px); }
  .rlk-hero-media { min-height: 220px; }
}

/* ============================================================
   Film / portfolio grid (.rlk-film-*) — consumes the film CPT + legacy posts
   ============================================================ */
.rlk-film-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
@media (min-width: 640px) { .rlk-film-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .rlk-film-grid { grid-template-columns: repeat(3, 1fr); } }
.rlk-film-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  background: var(--r26-surface);
  border: 1px solid var(--r26-hairline-soft);
  border-radius: var(--r26-radius-card);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.rlk-film-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(20, 20, 18, .1); }
.rlk-film-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--r26-chip);
  overflow: hidden;
}
.rlk-film-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rlk-film-body { padding: 18px 20px 22px; }
.rlk-film-cat {
  display: block;
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--r26-blue);
  margin-bottom: 6px;
}
.rlk-film-title {
  display: block;
  font-family: var(--r26-font-head); font-weight: 700; font-size: 17px;
  line-height: 1.3; letter-spacing: -0.01em;
  color: var(--r26-blue-deep);
}
.rlk-film-more { margin-top: 36px; text-align: center; }

/* ============================================================
   THEME-BLEED GUARD (landing layer)
   The Elementor/Hello kit applies element-level typography
   (.elementor-kit-XXX h2..h6 / a, specificity 0,1,1) that BEATS our
   single-class rlk-* heading rules (0,1,0) → landing headings render in
   Roboto/black instead of Montserrat/blue-deep. Re-assert under the .r26
   wrapper (0,2,0 / 0,2,1) so they win on specificity. Mirrors the shared
   lib guard in rocc-2026.css; no !important, class names unchanged. Every
   rlk-* heading is emitted inside a `.r26` section, so the prefix is safe.
   ============================================================ */
.r26 .rlk-hero-h1,
.r26 .rlk-card-title,
.r26 .rlk-konf-step-title,
.r26 .rlk-konf-summary-title,
.r26 .rlk-prose h3,
.r26 .rlk-film-title,
.r26 .rlk-interlink-card {
  font-family: var(--r26-font-head);
  font-weight: 700;
  color: var(--r26-blue-deep);
}
.r26 .rlk-film-cat { color: var(--r26-blue); }

/* Konfigurator option cards are <button>s. The Elementor kit gives buttons a
   brand-accent (pink) border at the same specificity as our .rlk-konf-opt
   (0,1,0); now that rocc-landing.css loads in <head> (before the kit) the kit
   rule would win on source order. Re-assert the intended borders under .r26
   (0,2,0+) so they win regardless of stylesheet load order. */
.r26 .rlk-konf-opt { border: 1.5px solid var(--r26-hairline-soft); }
.r26 .rlk-konf-opt:hover { border-color: var(--r26-blue); }
.r26 .rlk-konf-opt.is-active { border-color: var(--r26-blue); }

/* Multi-select konfigurator options: title + (long) description sit in a flex
   row; without wrapping the description was clipped at the card edge. Let it
   wrap onto its own line, aligned under the title (past the checkbox). */
.rlk-konf-options--multi .rlk-konf-opt { flex-wrap: wrap; }
.rlk-konf-options--multi .rlk-konf-opt-title { margin-bottom: 0; }
.rlk-konf-options--multi .rlk-konf-opt-desc { flex: 1 0 100%; margin: 4px 0 0 36px; }


/* ════════════════════════════════════════════════════════════════════
   ROCC 2026 REDESIGN — template-wide landing additions (workflow ww7j2s7y2).
   Brand band, gallery-split, featured-film tiles, portfolio film tile, team.
   (Hero + process rewrites are applied IN-PLACE above, not here.)
   ════════════════════════════════════════════════════════════════════ */


/* ──────── Brand band "We will ROCC you!" — reusable centered brand/quote band (rlk-b ──────── */

/* ============================================================
   Brand band — reusable centered brand/quote statement.
   Used by [rocc_section class="rlk-brandband" align="center"] via the
   section mapper Style = "Brand band". Distinct surface "card" on the
   warm canvas; heading + body centered in one constrained column.
   Scoped under .r26 to beat Elementor's (0,1,1) bare-tag bleed.
   ============================================================ */
.r26 .rlk-brandband { background: var(--r26-canvas); }

/* the surface card: turns .r26-container into the band's panel */
.r26 .rlk-brandband .r26-container {
  max-width: 880px;
  background: var(--r26-surface);
  border: 1px solid var(--r26-hairline-soft);
  border-radius: var(--r26-radius-band);
  padding: clamp(40px, 5.5vw, 72px) clamp(28px, 5vw, 80px);
  box-shadow: 0 14px 40px rgba(20, 20, 18, 0.06);
  text-align: center;
}

/* header sits directly above the prose: tighten the default 40px gap */
.r26 .rlk-brandband .r26-head { margin-bottom: 18px; }

/* brand statement headline — a touch larger + tighter than a section h2 */
.r26 .rlk-brandband .r26-h2 {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
}

/* centered, comfortably constrained body column */
.r26 .rlk-prose--center {
  max-width: 58ch;
  margin-inline: auto;
  text-align: center;
}
.r26 .rlk-prose--center p { margin: 0 0 18px; }
.r26 .rlk-prose--center p:last-child { margin-bottom: 0; }

/* lead-in paragraph slightly larger; closing line gets brand-blue weight */
.r26 .rlk-brandband .rlk-prose--center p:first-child {
  font-size: clamp(17px, 1.4vw, 19px);
}
.r26 .rlk-brandband .rlk-prose--center p:last-child {
  color: var(--r26-blue-deep);
  font-weight: 600;
}

/* responsive: relax to full width + lighter chrome on small screens */
@media (max-width: 820px) {
  .r26 .rlk-brandband .r26-container {
    max-width: none;
    padding: clamp(28px, 7vw, 44px) clamp(20px, 6vw, 32px);
    border-radius: var(--r26-radius-card);
  }
  .r26 .rlk-prose--center { max-width: 100%; }
}

/* ──────── gallery_split — new GALLERY-SPLIT section (left 3x3+ image gallery grid /  ──────── */

/* ============================================================
   Gallery split (.rlk-gallery) — image grid (left) + right-aligned text (right).
   Self-contained section (emitted by rocc_l_render_gallery_split, NOT [rocc_section]).
   One row on desktop; stacks to one column at <= 820px (text moves above the grid
   and reverts to left-aligned). Token-based; headings scoped under .r26 to beat the
   Elementor kit (0,1,1) without !important.
   ============================================================ */
.rlk-gallery {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  grid-template-columns: 1fr;            /* mobile-first: single column */
}
@media (min-width: 821px) {
  /* gallery a touch wider than the copy; gallery sits LEFT, copy RIGHT */
  .rlk-gallery { grid-template-columns: 1.05fr 0.95fr; }
}

/* --- LEFT: the image gallery grid (>= 9 tiles → 3 columns on desktop) --- */
.rlk-gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(8px, 1vw, 14px);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 820px) {
  .rlk-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .rlk-gallery-grid { gap: 8px; }
}
.rlk-gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r26-radius-card);
  background: var(--r26-chip);
  border: 1px solid var(--r26-hairline-soft);
}
.rlk-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.rlk-gallery-tile:hover img { transform: scale(1.06); }

/* --- RIGHT: the right-aligned text block --- */
.rlk-gallery-copy {
  text-align: right;
  /* keep copy on a readable measure, pinned to the right edge of its column */
  max-width: 460px;
  margin-left: auto;
}
.rlk-gallery-copy .r26-kicker { margin-bottom: 14px; }
.rlk-gallery-h {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.rlk-gallery-body { color: var(--r26-body); }
.rlk-gallery-body p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--r26-body);
  margin: 0 0 16px;
}
.rlk-gallery-body p:last-child { margin-bottom: 0; }

/* --- Mobile stack (<= 820px): text first, full width, left-aligned --- */
@media (max-width: 820px) {
  .rlk-gallery-copy {
    order: -1;                 /* copy moves ABOVE the gallery */
    text-align: left;
    max-width: 640px;
    margin-left: 0;
  }
  .rlk-gallery-h { font-size: clamp(26px, 7vw, 34px); }
}

/* ---- THEME-BLEED GUARD: re-assert the headline under .r26 (0,2,0 beats kit 0,1,1) ---- */
.r26 .rlk-gallery-h {
  font-family: var(--r26-font-head);
  font-weight: 700;
  color: var(--r26-blue-deep);
}

/* ──────── featured_film (case-study film spotlight — reuses the portfolio overlay fi ──────── */

/* ============================================================
   Featured film (.rlk-ff-*) — a single overlay FILM TILE beside a copy
   column, as a case-study spotlight. The tile reproduces the portfolio
   overlay treatment (image + scrim + client-logo chip + tagline + play
   glyph) self-contained under .r26 with --r26-* tokens (no .rcfv2 dep).
   ============================================================ */
.rlk-ff {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: 8px;
}
@media (min-width: 821px) {
  .rlk-ff { grid-template-columns: 1fr 1.04fr; } /* copy | tile */
  .rlk-ff--media-left { grid-template-columns: 1.04fr 1fr; } /* tile | copy */
  .rlk-ff--media-left .rlk-ff-copy { order: 2; }
  .rlk-ff--media-left .rlk-ff-media { order: 1; }
}

/* ---- copy column ---- */
.rlk-ff-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--r26-body);
  margin: 0 0 22px;
  max-width: 56ch;
}
/* full case-study prose (migrated case studies that keep the original verbatim copy) */
.rlk-ff-body { margin: 0 0 22px; max-width: 60ch; }
.rlk-ff-body p { font-size: 16px; line-height: 1.66; color: var(--r26-body); margin: 0 0 14px; }
.rlk-ff-body p:last-child { margin-bottom: 0; }
.rlk-ff-points { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; }
.rlk-ff-points li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--r26-body);
}
.rlk-ff-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--r26-chip);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F4E9E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.rlk-ff-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- the overlay film tile ---- */
.rlk-ff-media { width: 100%; }
.rlk-ff-tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r26-radius-band);
  overflow: hidden;
  background: var(--r26-blue-deep);
  border: 1px solid var(--r26-hairline-soft);
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(20, 20, 18, .10);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rlk-ff-tile:hover {
  transform: translateY(-3px);
  border-color: var(--r26-blue);
  box-shadow: 0 18px 44px rgba(47, 78, 158, .18);
}
.rlk-ff-shot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.rlk-ff-tile:hover .rlk-ff-shot { transform: scale(1.06); }
.rlk-ff-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(13,18,42,.70) 0%, rgba(13,18,42,.32) 30%, rgba(13,18,42,.05) 58%, transparent 82%);
}
.rlk-ff-ov {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(16px, 1.8vw, 24px);
  pointer-events: none;
}
.rlk-ff-tag {
  font-family: var(--r26-font-head);
  font-weight: 700;
  color: #fff;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.24;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 62%;
  text-shadow: 0 1px 14px rgba(8, 12, 32, .65);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* client logo chip — bottom-right, white plate so any logo reads on the image */
.rlk-ff-logo {
  position: absolute;
  right: clamp(16px, 1.8vw, 24px);
  bottom: clamp(16px, 1.8vw, 24px);
  z-index: 2;
  height: 42px;
  width: auto;
  max-width: 46%;
  object-fit: contain;
  background: #fff;
  padding: 6px 10px;
  border-radius: 7px;
  box-shadow: 0 2px 12px rgba(8, 12, 32, .30);
}
.rlk-ff-client {
  position: absolute;
  right: clamp(16px, 1.8vw, 24px);
  bottom: clamp(16px, 1.8vw, 24px);
  z-index: 2;
  font-family: var(--r26-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--r26-blue-deep);
  background: #fff;
  padding: 5px 9px;
  border-radius: 7px;
  box-shadow: 0 2px 12px rgba(8, 12, 32, .30);
}
/* play glyph — fades + scales in on hover (purely decorative; whole tile is the link) */
.rlk-ff-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.82);
  z-index: 3;
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
  color: #fff;
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .25s ease;
}
.rlk-ff-tile:hover .rlk-ff-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: var(--r26-blue);
}

/* ---- THEME-BLEED GUARD: re-assert tile typography under .r26 (0,2,0) so the
   Elementor kit's bare-element rules (0,1,1) can't override font/colour. The
   tagline is white-on-image; the copy headline comes from [rocc_section]. ---- */
.r26 .rlk-ff-tag { font-family: var(--r26-font-head); font-weight: 700; color: #fff; }
.r26 .rlk-ff-client { color: var(--r26-blue-deep); }

@media (prefers-reduced-motion: reduce) {
  .rlk-ff-tile, .rlk-ff-shot, .rlk-ff-play { transition: none; }
  .rlk-ff-tile:hover .rlk-ff-shot { transform: none; }
}

/* ──────── FILM GRID "Mehr Imagefilme" (landing portfolio layout) — reuse the portfol ──────── */

/* ============================================================
   Portfolio film grid — overlay tile (.pcard), ported from the
   portfolio page (rocc-films .rcfv2 .pcard) into the landing layer.
   --rcf-* -> --r26-* (palettes identical: canvas/surface/blue/blue-deep/
   hairline-soft all match). Scoped under .r26 so heading/link rules beat
   the Elementor theme-bleed (bare h3/a at 0,1,1) WITHOUT !important.
   Reuses the existing .rlk-film-grid wrapper (3->2->1 responsive) +
   .rlk-film-more button below. Replaces the old .rlk-film-card look.
   ============================================================ */

/* Grid columns are already defined on .rlk-film-grid (1 -> 2 @640 -> 3 @980).
   Keep those; just tighten the gap to match the portfolio hub rhythm. */
.r26 .rlk-film-grid { gap: clamp(16px, 1.5vw, 24px); }

/* --- card shell --- */
.r26 .rlk-film-grid .pcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--r26-surface);
  border: 1px solid var(--r26-hairline-soft);
  border-radius: var(--r26-radius-card);
  overflow: hidden;
  transition: transform .3s var(--r26-ease, cubic-bezier(.22,.61,.36,1)),
              box-shadow .25s var(--r26-ease, cubic-bezier(.22,.61,.36,1)),
              border-color .25s var(--r26-ease, cubic-bezier(.22,.61,.36,1));
}
.r26 .rlk-film-grid .pcard:hover {
  transform: translateY(-3px);
  border-color: var(--r26-blue);
  box-shadow: 0 14px 34px rgba(47, 78, 158, .16);
}

/* --- media (16:9 stage, image fills + crops, navy fallback bg) --- */
.r26 .rlk-film-grid .pcard-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--r26-blue-deep);
  text-decoration: none;
}
.r26 .rlk-film-grid .pcard-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--r26-ease, cubic-bezier(.22,.61,.36,1));
}
.r26 .rlk-film-grid .pcard:hover .pcard-shot { transform: scale(1.06); }

/* gradient scrim so the white logo chip + white tagline stay legible */
.r26 .rlk-film-grid .rcf-tile-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(13, 18, 42, .68) 0%,
    rgba(13, 18, 42, .30) 28%,
    rgba(13, 18, 42, .04) 56%,
    transparent 80%);
}

/* overlay container: tagline pinned bottom-left, logo chip absolute bottom-right */
.r26 .rlk-film-grid .rcf-tile-ov {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(14px, 1.6vw, 22px);
  pointer-events: none;
}
/* logo chip — scoped under .rcf-tile-ov so it beats the generic media-img rule.
   height/width !important mirrors the source: required to override the cover img. */
.r26 .rlk-film-grid .rcf-tile-ov .rcf-tile-logo {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  height: 40px !important;
  width: auto !important;
  max-width: 50%;
  object-fit: contain;
  background: #fff;
  padding: 5px 9px;
  border-radius: 7px;
  box-shadow: 0 2px 12px rgba(8, 12, 32, .30);
}
/* text fallback chip when a client has no logo */
.r26 .rlk-film-grid .rcf-tile-ov .rcf-tile-client {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--r26-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--r26-blue-deep);
  background: #fff;
  padding: 5px 9px;
  border-radius: 7px;
  box-shadow: 0 2px 12px rgba(8, 12, 32, .30);
}
/* tagline — white Montserrat, 2-line clamp (scoped so it beats theme h3) */
.r26 .rlk-film-grid .rcf-tile-tag {
  font-family: var(--r26-font-head);
  font-weight: 700;
  color: #fff;
  font-size: clamp(.9rem, 1.05vw, 1.05rem);
  line-height: 1.24;
  margin: 0;
  max-width: 60%;
  letter-spacing: -.01em;
  text-shadow: 0 1px 14px rgba(8, 12, 32, .65);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* frosted play glyph: fades + scales in on hover, turns blue */
.r26 .rlk-film-grid .ply {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.8);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity .25s var(--r26-ease, cubic-bezier(.22,.61,.36,1)),
              transform .25s var(--r26-ease, cubic-bezier(.22,.61,.36,1)),
              background .25s var(--r26-ease, cubic-bezier(.22,.61,.36,1));
}
.r26 .rlk-film-grid .pcard:hover .ply {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: var(--r26-blue);
}

/* --- mobile: keep the overlay legible + tap-friendly when columns stack --- */
/* The .rlk-film-grid already collapses 3->2 @<=979px ->1 @<=639px (min-width
   queries above 980/640). Re-assert the portfolio breakpoints so the look is
   IDENTICAL to the hub on every landing page, and show the play glyph on
   touch (no hover) so the "playable" affordance survives on mobile. */
@media (max-width: 900px) {
  .r26 .rlk-film-grid .rcf-tile-tag { max-width: 72%; }   /* wider taglines when 2-up/1-up */
}
@media (max-width: 600px) {
  .r26 .rlk-film-grid .ply { opacity: .85; }              /* no :hover on touch — reveal it */
  .r26 .rlk-film-grid .rcf-tile-tag { max-width: 78%; font-size: 1rem; }
  .r26 .rlk-film-grid .rcf-tile-ov .rcf-tile-logo { height: 34px !important; }
}
/* Respect reduced-motion: kill the image zoom + glyph pop */
@media (prefers-reduced-motion: reduce) {
  .r26 .rlk-film-grid .pcard,
  .r26 .rlk-film-grid .pcard-shot,
  .r26 .rlk-film-grid .ply { transition: none; }
  .r26 .rlk-film-grid .pcard:hover .pcard-shot { transform: none; }
}

/* ──────── TEAM section "Lernt uns kennen" — compact team-member photo grid (replaces ──────── */

/* ============================================================
   Team teaser (.rlk-team*) — compact "Lernt uns kennen" photo grid.
   Landing-local; consumes the shared --r26-* tokens + .r26 base.
   Distinct from the shared bio-card grid (.r26-team/.r26-tm in
   rocc-2026.css) which the non-compact path still uses.
   Every heading/link rule is scoped under .r26 (0,2,x) to beat the
   Elementor kit's bare h2..h6/a rules (0,1,1) — no !important.
   ============================================================ */
.rlk-team {
  display: grid;
  gap: clamp(16px, 1.6vw, 24px);
  grid-template-columns: repeat(2, 1fr);   /* mobile-first: 2-up */
  margin-top: 8px;
}
@media (min-width: 600px) { .rlk-team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .rlk-team { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 400px) { .rlk-team { grid-template-columns: 1fr; } }  /* very narrow → single column */

.rlk-team-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--r26-surface);
  border: 1px solid var(--r26-hairline-soft);
  border-radius: var(--r26-radius-card);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rlk-team-card:hover {
  transform: translateY(-2px);
  border-color: var(--r26-blue);
  box-shadow: 0 12px 30px rgba(20, 20, 18, .1);
}

/* square photo, navy fallback, gentle zoom on hover */
.rlk-team-photo {
  display: block;
  aspect-ratio: 1 / 1;
  background: #0c1020;
  overflow: hidden;
}
.rlk-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* keep faces in frame on the square crop */
  display: block;
  transition: transform .5s ease;
}
.rlk-team-card:hover .rlk-team-photo img { transform: scale(1.04); }

/* caption block */
.rlk-team-meta { padding: 16px 18px 18px; }
.rlk-team-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--r26-font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--r26-blue-deep);
  margin: 0;
}
.rlk-team-role {
  font-family: var(--r26-font-body);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--r26-blue);
  margin: 4px 0 0;
}

/* tiny LinkedIn glyph link (the shared .r26-tm-li sizes the svg to 18px) */
.rlk-team-li {
  display: inline-flex;
  color: var(--r26-blue);
  transition: color .2s ease, transform .2s ease;
}
.rlk-team-li:hover { color: var(--r26-blue-deep); transform: translateY(-2px); }

/* "das ganze Team" link row */
.rlk-team-more { margin-top: clamp(28px, 3vw, 40px); text-align: center; }

/* ---- THEME-BLEED GUARD: re-assert headings/links under .r26 (0,2,x)
   so the Elementor kit's bare h2..h6/a (0,1,1) can't win. ---- */
.r26 .rlk-team-name { font-family: var(--r26-font-head); font-weight: 700; color: var(--r26-blue-deep); }
.r26 .rlk-team-role { color: var(--r26-blue); }
.r26 .rlk-team-name a.rlk-team-li { color: var(--r26-blue); text-decoration: none; }
.r26 .rlk-team-name a.rlk-team-li:hover { color: var(--r26-blue-deep); }
/* ════════════════════════════════════════════════════════════════════
   ROUND-2 TWEAKS — brand spacing, gallery swap, team-name size, beautiful
   FAQ, interlink spacing. Appended → source order wins for same specificity.
   ════════════════════════════════════════════════════════════════════ */

/* 1) Brand band: take space away above + below the card. */
.r26 .r26-section.rlk-brandband { padding-top: clamp(8px, 1.4vw, 20px); padding-bottom: clamp(8px, 1.4vw, 20px); }

/* 2) Gallery split: copy now FIRST (left) + left-aligned; gallery SECOND (right). */
@media (min-width: 821px) { .rlk-gallery { grid-template-columns: 0.92fr 1.08fr; } }
.rlk-gallery-copy { text-align: left; max-width: 480px; margin-left: 0; margin-right: auto; }
@media (max-width: 820px) { .rlk-gallery-copy { order: 0; max-width: 640px; } }

/* 3) Team names: the Elementor kit bleeds a big h3 size past the guard — pin it. */
.r26 .rlk-team-name { font-size: 15px; line-height: 1.2; }

/* 4) Interlink: tighten the space below the last block (before the footer). */
#rocc-landing-main > .r26:last-child .r26-section { padding-top: clamp(14px, 1.8vw, 28px); padding-bottom: clamp(60px, 7vw, 108px); }

/* 5) ════ Beautiful FAQ (.rlk-faq) — shared rocc-2026.js toggles .r26-acc-item.is-open ════ */
.rlk-faq { max-width: 860px; margin-inline: auto; }
.rlk-faq .r26-head { text-align: center; margin-bottom: clamp(28px, 3vw, 44px); }
.rlk-faq-list { display: grid; gap: 14px; }
.rlk-faq-item {
  background: var(--r26-surface);
  border: 1px solid var(--r26-hairline-soft);
  border-radius: var(--r26-radius-card);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rlk-faq-item:hover { border-color: var(--r26-hairline); }
.r26-acc-item.is-open.rlk-faq-item { border-color: var(--r26-blue); box-shadow: 0 12px 32px rgba(20, 20, 18, .08); }
/* question button — text wraps in its own span (the shared one clipped); icon pinned top-right */
.r26 .rlk-faq .r26-acc-q.rlk-faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: clamp(18px, 1.8vw, 23px) clamp(18px, 2vw, 28px);
  font-family: var(--r26-font-head);
  font-weight: 700;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.4;
  color: var(--r26-blue-deep);
  transition: color .2s ease;
}
.rlk-faq-qt { flex: 1 1 auto; min-width: 0; white-space: normal; }
.r26 .rlk-faq .r26-acc-q.rlk-faq-q:hover { color: var(--r26-blue); }
/* +/- icon */
.rlk-faq-ico {
  flex: 0 0 auto;
  position: relative;
  width: 24px; height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--r26-chip);
  transition: background .25s ease;
}
.rlk-faq-ico::before, .rlk-faq-ico::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 2px; border-radius: 2px;
  background: var(--r26-blue);
  transform: translate(-50%, -50%);
  transition: opacity .25s ease, background .25s ease;
}
.rlk-faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.r26-acc-item.is-open .rlk-faq-ico { background: var(--r26-blue); }
.r26-acc-item.is-open .rlk-faq-ico::before { background: #fff; }
.r26-acc-item.is-open .rlk-faq-ico::after { opacity: 0; }
/* answer reveal (grid-rows; reduced-motion aware) — scoped to beat shared .r26-acc-a */
.rlk-faq .rlk-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.rlk-faq .r26-acc-item.is-open .rlk-faq-a { grid-template-rows: 1fr; }
.rlk-faq-a-inner { overflow: hidden; padding: 0 clamp(18px, 2vw, 28px); }
.r26-acc-item.is-open .rlk-faq-a-inner { padding-bottom: clamp(18px, 1.8vw, 24px); }
.rlk-faq-a-inner p { font-size: 15.5px; line-height: 1.7; color: var(--r26-body); margin: 0 0 12px; }
.rlk-faq-a-inner p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .rlk-faq .rlk-faq-a { transition: none; } }
/* suppress the shared [rocc_faq] ::after "+" so only our .rlk-faq-ico circle shows (no double icon) */
.rlk-faq .r26-acc-q::after { content: none; display: none; }

/* ──────── ROUND-3: hero showreel cover-crop + slightly larger media ──────── */
/* The showreel is 2.39:1, so Vimeo letterboxes it (bands top/bottom) in the 16:9
   frame. Scale the iframe up to COVER the frame so the bands are cropped off. */
.rlk-hero-media--video { overflow: hidden; aspect-ratio: 426 / 178; min-height: 0; }
.rlk-hero-media--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
/* make the video media a touch larger (wider column on desktop). */
@media (min-width: 821px) {
  .rlk-hero--split .rlk-hero-grid { grid-template-columns: 0.94fr 1.06fr; }
}
/* ──────── ROUND-4: tighten section spacing (sections move up) + re-add featured logo ──────── */
/* Pull the whole landing stack tighter — each section sits closer to the one above. Template-wide. */
.rocc-landing .r26-section { padding-block: clamp(38px, 4.5vw, 68px); }
/* Logo bar hugs the hero (less hero→logo gap). */
.rocc-landing .r26-section:has(.r26-logos-track) { padding-top: clamp(18px, 2.2vw, 32px); }
/* The two case-study (featured_film) blocks sit closer together. */
.rocc-landing .r26-section:has(.rlk-ff) { padding-block: clamp(26px, 3.2vw, 48px); }
/* Featured-film client logo chip: !important to beat the Elementor kit's img rule (0,1,1) that
   blew the chip up. Matches the portfolio tile's .rcf-tile-logo (40px white plate). */
.r26 .rlk-ff-logo { height: 40px !important; width: auto !important; max-width: 50%; }
/* ──────── ROUND-5: body / intro copy must NOT be blue (blue = headings + accents only) ──────── */
/* The shared .r26-lead renders intro/lead paragraphs in medium blue. On landing pages
   switch them to the normal body text colour. Keep the dark-band lead light (readable on navy). */
.rocc-landing .r26 .r26-lead { color: var(--r26-body); }
.rocc-landing .r26 .r26-section--dark .r26-lead { color: var(--r26-blue-light); }
/* ════════ ROUND-6: hero stacked · brand blue line · gallery polish · FAQ 2-col photo ════════ */

/* --- Hero STACKED: full-width media on top, copy in a 2-column foot below (template-wide) --- */
.rlk-hero--stacked .rlk-hero-media { width: 100%; margin: 0 0 clamp(28px, 3.5vw, 48px); }
.rlk-hero--stacked .rlk-hero-media:not(.rlk-hero-media--video) { aspect-ratio: 21 / 9; min-height: 0; }
.rlk-hero-foot { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
@media (min-width: 821px) {
  .rlk-hero-foot { grid-template-columns: 1.3fr 0.7fr; gap: clamp(40px, 5vw, 72px); }
  .rlk-hero-foot-aside { border-left: 1px solid var(--r26-hairline-soft); padding-left: clamp(28px, 3vw, 48px); }
}
.rlk-hero-foot-main .r26-kicker { margin-bottom: 14px; }
.rlk-hero-foot-main .rlk-hero-h1 { margin: 0; }
.rlk-hero-foot-main .r26-lead { margin-top: 16px; max-width: 660px; }
.rlk-hero-foot-aside .rlk-hero-bullets { margin-top: 0; }
.rlk-hero-foot-aside .rlk-hero-actions { margin-top: 24px; }
/* H1 a touch smaller in the stacked layout */
.rlk-hero--stacked .rlk-hero-h1 { font-size: clamp(32px, 4.4vw, 50px); }

/* --- Brand band: blue accent line on top (like the process cards) + a little space below --- */
.r26 .rlk-brandband .r26-container { position: relative; overflow: hidden; }
.r26 .rlk-brandband .r26-container::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--r26-blue); }
.r26 .r26-section.rlk-brandband { padding-bottom: clamp(24px, 3vw, 44px); }

/* --- Gallery split: a little more polish on the tiles --- */
.rlk-gallery-tile { box-shadow: 0 6px 18px rgba(20, 20, 18, .05); }
.rlk-gallery-tile:hover { box-shadow: 0 12px 30px rgba(20, 20, 18, .10); }

/* --- FAQ with optional photo beside the accordion (2-column; sticky photo on desktop) --- */
.rlk-faq--split { max-width: var(--r26-maxw); }
.rlk-faq--split .r26-head { text-align: left; }
.rlk-faq-split { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3.5vw, 56px); align-items: start; }
@media (min-width: 821px) { .rlk-faq-split { grid-template-columns: 1.4fr 0.85fr; } }
.rlk-faq--split .rlk-faq-list { margin: 0; }
.rlk-faq-photo { border-radius: var(--r26-radius-band); overflow: hidden; aspect-ratio: 4 / 5; background: var(--r26-blue-deep); }
.rlk-faq-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 821px) { .rlk-faq-photo { position: sticky; top: 124px; } } /* clear the 77px sticky header with breathing room */
@media (max-width: 820px) { .rlk-faq-photo { aspect-ratio: 16 / 10; order: -1; } }
/* ════════ ROUND-7: page width = portfolio (1500) · refined logo-wall lead ════════ */

/* --- Page width: widen the landing content frame 1140 -> 1500 to match the portfolio
       hub (.rcf__container--wide). Brand-band card keeps its own narrower cap (more
       specific rule); the FAQ accordion stays readable at 1140. --- */
.r26 .r26-container { max-width: var(--r26-maxw-wide); }
.r26 .r26-container.rlk-faq { max-width: var(--r26-maxw); }

/* --- Logo wall ("Unternehmen, die uns vertrauen"): smaller, more refined lead and
       less top space so the logos sit higher (landing pages only — shared lib untouched). --- */
.r26 .r26-logos { padding-top: clamp(28px, 3.4vw, 52px); }
.r26 .r26-logos-lead {
  font-weight: 600;
  font-size: clamp(15px, 1.55vw, 19px);
  letter-spacing: 0.005em;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
/* ════════════════════════════════════════════════════════════════════
   TEAM TEASER REDESIGN (Eric, 2026-06-22) — condense the team section on
   every lander: a photo COLLAGE + copy/CTA leading to the team page, in
   two columns (copy left · collage right). No names / roles / LinkedIn
   links on the landing page itself. Supersedes the old .rlk-team* card
   grid (those rules above are now inert — no markup emits them).
   ════════════════════════════════════════════════════════════════════ */
.rlk-team-teaser {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;          /* mobile-first: stacks */
  align-items: center;
  margin-top: 8px;
}
@media (min-width: 821px) {
  .rlk-team-teaser { grid-template-columns: 0.9fr 1.1fr; }  /* copy | collage */
}
.rlk-team-copy { min-width: 0; max-width: 460px; }
.rlk-team-copy .r26-kicker { margin-bottom: 14px; }
.rlk-team-copy .r26-h2 { margin: 0 0 16px; }
.rlk-team-copy .r26-lead { margin: 0; max-width: none; }
.rlk-team-more { margin-top: clamp(20px, 2.4vw, 28px); text-align: left; }

/* photo collage — tight montage of faces; 3 across, last row centered */
.rlk-teamc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.rlk-teamc-cell {
  flex: 0 0 calc((100% - 20px) / 3);   /* 3 per row (2 × 10px gap) */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r26-radius-card);
  background: #0c1020;
  box-shadow: 0 6px 18px rgba(20, 20, 18, .06);
}
.rlk-teamc-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;          /* keep faces in the square crop */
  display: block;
  transition: transform .5s ease;
}
.rlk-teamc-cell:hover img { transform: scale(1.05); }
@media (max-width: 460px) {
  .rlk-teamc { gap: 8px; }
  .rlk-teamc-cell { flex-basis: calc((100% - 16px) / 3); }
}

/* === POST-LAUNCH TWEAKS (2026-06-30) ============================================ */

/* Landing hero showreel: make the Vimeo background video COVER its wide
   (~2.39:1) navy container so the navy bg no longer peeks around the 16:9 video
   (it was showing as a blue edge on the sides/top of the film). */
.rlk-hero-media--video iframe {
  inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto; min-width: 100%; min-height: 100%; aspect-ratio: 16 / 9;
}

/* "We will ROCC you" brand band — flow inline with the page instead of a boxed
   surface card (drop the panel bg/border/shadow + the blue top bar). */
.r26 .rlk-brandband { background: transparent; }
.r26 .rlk-brandband .r26-container { background: transparent; border: 0; box-shadow: none; overflow: visible; padding: 0 clamp(20px, 4vw, 40px); }
.r26 .rlk-brandband .r26-container::before { content: none; display: none; }
.r26 .r26-section.rlk-brandband { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(20px, 3vw, 40px); }