/* ============================================================================
   Careers page — scoped to careers.html. Builds on home.css (Relaunch 2026
   layout system: pills, rounded image tiles, the striped ring mark) with the
   colours and font re-pointed to the Brand Guideline (see tokens below), and reuses its
   .hero, .pill, .btn, .tag, .fact, .arrow-btn, .center-head, nav + footer.
   Nothing here is global.
   ========================================================================== */

/* ---------- Brand tokens: ONLY colours from Brand Guideline V1.0 (Apr 2025) + Main/Support colours sheet.
   Overrides home.css's own values on this page; no other colours are used.
   Warm Violet / Blue Digital #320F99 · Blue Print #332D84 · Brand Green #10C167 · Slate Grey #2D2D2D
   Neutral Darkest #111111 · Neutral Dark #444444 · Neutral #666666 · Neutral lighter #CCCCCC
   Background Color #F3F3F3 · White #FFFFFF · Ronchi #EEB650 ---------- */
:root {
  --purple:    #320F99;
  --purple-2:  #332D84;
  --purple-dk: #332D84;
  --lilac:     #F3F3F3;
  --grey:      #F3F3F3;
  --ink:       #2D2D2D;
  --ink-2:     #444444;
  --muted:     #666666;
  --line:      #CCCCCC;
  --purple-mid: #9C8DD9;   /* soft purple: the former light-green accent slots (tech pictogram shade) */
  --gold:      #EEB650;   /* Ronchi: the warm contrast to the purple */
  --gold-lt:   #FBF0DA;
  --sans: "Rethink Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
/* Typography per guideline weights: Bold for headlines, Semi Bold for subheads/UI, Regular for body */
h1, h2 { font-weight: 700; }
h3, .btn, .pill, .tag, .nav-pill a, .footer h2 { font-weight: 600; }
.fact b { font-weight: 700; }
/* home.css literals that fall outside the palette, re-pointed for this page */
.cr-hero.hero { background: #111111; }
.cr-hero .hero-shade { background:
  linear-gradient(0deg, rgba(17,17,17,.78) 0%, rgba(17,17,17,.35) 45%, rgba(17,17,17,.25) 100%),
  linear-gradient(90deg, rgba(17,17,17,.45), rgba(17,17,17,0) 60%); }
.nav-pill, .nav-toggle { box-shadow: 0 10px 30px -18px rgba(17,17,17,.5); }


/* current page in the nav pill */
.nav-pill a[aria-current="page"] { background: var(--lilac); color: var(--purple); }

.cr-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* section rhythm (home.css .screen is sized for 16:9 slides; this page flows) */
.cr-sec { padding: clamp(56px, 7vw, 104px) 0; }

/* ---------- FLOW: sections hand over to each other instead of stacking as blocks.
   Grounds fade white ↔ Background Color #F3F3F3, the vision sheet slides over the hero,
   and the final section dissolves into the grey footer. ---------- */
.cr-vision { position: relative; z-index: 1; margin-top: -32px; border-radius: 32px 32px 0 0; background: #fff; overflow: clip;
  padding: clamp(64px, 7vw, 100px) 0 clamp(56px, 6vw, 88px); }
.cr-work  { background: var(--grey); padding-top: clamp(56px, 6vw, 88px); }
.cr-perks { position: relative; z-index: 1; margin-top: -40px; border-radius: 32px 32px 0 0; background: #fff;
  padding-top: clamp(72px, 8vw, 120px); box-shadow: 0 -24px 48px -32px rgba(17,17,17,.45); }
.cr-facts { padding-bottom: calc(clamp(56px, 7vw, 104px) + 40px); }

.cr-final { background: linear-gradient(180deg, #fff 0%, #fff 45%, var(--grey) 100%); padding-bottom: clamp(64px, 8vw, 120px); }

/* centred heads (home.css .center-head) */
.cr-center { max-width: 900px; margin-inline: auto; }
.cr-center .lead { margin-inline: auto; max-width: 58ch; }

/* grids: 4 / 3 columns → 2 on tablet → 1 on phones */
.cr-grid-4, .cr-grid-3 { display: grid; gap: 20px; }
.cr-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cr-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cr-grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }

/* card: light grey panel, CI radius */
.cr-card { display: flex; flex-direction: column; border-radius: var(--r); background: var(--grey); padding: clamp(24px, 2.2vw, 34px); }
.cr-card h3 { font-size: clamp(1.2rem, 1.5vw, 1.5rem); line-height: 1.15; margin-bottom: 14px; }
.cr-card p { color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.cr-card > p { margin-bottom: 26px; }
.cr-card > .tag { margin: auto 0 0; align-self: flex-start; }
/* values: white cards on the grey band, numbered colour codes as on the homepage, a line grows on hover */
.cr-value { position: relative; overflow: hidden; background: #fff; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.cr-value:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -30px rgba(50,15,153,.35); }
.cr-value::before { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 0; background: var(--purple-mid); transition: width .7s var(--ease); }
.cr-value:nth-child(2)::before { background: var(--gold); }
.cr-value:nth-child(3)::before { background: var(--purple); }
.cr-value:nth-child(4)::before { background: var(--lilac-2); }
.cr-value:hover::before { width: 100%; }
.cr-no { align-self: flex-start; margin-bottom: 18px; padding: 3px 12px; border-radius: 999px; font-weight: 600; font-size: .85rem; background: var(--purple-mid); color: var(--ink); }
.cr-value:nth-child(2) .cr-no { background: var(--gold); }
.cr-value:nth-child(3) .cr-no { background: var(--purple); color: #fff; }
.cr-value:nth-child(4) .cr-no { background: var(--lilac-2); color: var(--purple); }
.cr-work .cr-card { background: #fff; box-shadow: inset 0 0 0 1px rgba(45,45,45,.1); }

/* icon in a gold circle */
.cr-icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--purple); flex: 0 0 auto; }

/* ---------- 1 · HERO (home.css .hero / .hero-shade / .hero-copy / .hero-foot) ---------- */
.cr-hero .hero-stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  animation: push 7s linear both; }
.cr-hero .hero-foot { margin-top: 0; }
.cr-hero h1 { max-width: 17ch; text-wrap: balance; }

/* ---------- 2 · VISION — centred, compact padding, soft "A" mark behind ---------- */
.cr-vision .center-head { margin-bottom: 0; }
.cr-d-perks  { color: var(--lilac-2); opacity: .7; width: min(30vw, 460px); left: -10vw; top: 6%; transform: rotate(-18deg); }
.cr-perks { overflow: clip; }
.cr-hl { color: var(--purple); }
.cr-strong { font-weight: 600; color: var(--ink); margin-top: 22px; }
/* the vision's closing line: a little larger, kept on one line where it fits */
.cr-vision .cr-strong { font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: none; }
@media (min-width: 760px) { .cr-vision .cr-strong { white-space: nowrap; } }

/* ---------- 3 · CAROUSEL (left edge on the container, bleeds right) ---------- */
.cr-carousel { --cr-size: clamp(220px, 22vw, 360px); --cr-gap: 20px; margin-bottom: clamp(64px, 8vw, 120px); }
.cr-viewport { overflow: hidden; touch-action: pan-y; cursor: grab;
  margin-left: 0; }   /* full bleed: the photo strip runs edge to edge on every screen size */
.cr-viewport.is-dragging { cursor: grabbing; }
.cr-track { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--cr-gap); will-change: transform; }
.cr-slide { flex: 0 0 var(--cr-size); aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--grey); }
.cr-slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none;
  -webkit-user-drag: none; pointer-events: none; }
.cr-carousel-ctrl { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- 4 · WORK AT PLANET A FOODS ---------- */
.cr-split-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 96px); align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px); }
.cr-split-head h2 { margin-top: 26px; }
.cr-split-head .lead { margin: 0; }

/* ---------- 5 · KEY FACTS (home.css .fact for number + label) ---------- */
.cr-facts { position: relative; overflow: clip; isolation: isolate; color: #fff;
  /* softer violet: gentle gradient Warm Violet -> Blue Print with a faint sky glow */
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(220,214,243,.16) 0%, rgba(220,214,243,0) 60%),
    radial-gradient(50% 70% at 5% 100%, rgba(156,141,217,.16) 0%, rgba(156,141,217,0) 60%),
    linear-gradient(160deg, #320F99 0%, #332D84 100%); }
.cr-d-facts { color: #fff; opacity: .06; width: min(36vw, 560px); right: -8vw; top: -18%; transform: rotate(14deg); }
.cr-facts .lead { color: rgba(255,255,255,.82); }
.cr-fact { align-items: flex-start; text-align: left; color: var(--ink); border-radius: 14px;
  background: #fff; box-shadow: 0 20px 44px -28px rgba(17,17,17,.45); transition: transform .5s var(--ease), background .4s ease; }
.cr-fact:hover { transform: translateY(-4px); background: #fff; }
.cr-fact .cr-icon { background: var(--gold); color: var(--purple); }
.cr-fact:nth-child(even) .cr-icon { background: var(--purple-mid); }
.cr-fact .fact { margin: 24px 0 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(50,15,153,.12); width: 100%; }
.cr-fact .fact b { font-size: clamp(2.6rem, 4vw, 4rem); color: var(--purple); font-weight: 600; }
.cr-fact .fact span { color: var(--ink-2); font-weight: 600; }
.cr-fact p { margin: 0; color: var(--ink-2); }

/* ---------- segmented switch (perks location + hiring process) ---------- */
.cr-seg-wrap { display: flex; justify-content: center; margin-bottom: clamp(28px, 4vw, 48px); }
.cr-seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--grey); }
.cr-seg [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 22px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer;
  font-weight: 500; font-size: .98rem; line-height: 1; transition: background .3s ease, color .3s ease; }
.cr-seg [role="tab"]:hover { color: var(--purple); }
.cr-seg [role="tab"][aria-selected="true"] { background: var(--purple); color: #fff; }
.cr-seg [role="tab"] .cr-ico { width: 18px; height: 18px; }

/* ---------- 6 · PERKS — office intro, then the perks ---------- */
.cr-office { margin-bottom: clamp(28px, 3.5vw, 44px); text-align: center; }
.cr-office-site { max-width: 640px; margin-inline: auto; }
.cr-office-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--purple); font-weight: 600; font-size: .92rem; }
.cr-office-kicker .cr-ico { width: 18px; height: 18px; }
.cr-office-site h3 { margin: 12px 0 10px; font-size: clamp(1.4rem, 2vw, 1.9rem); }
.cr-office-site > p:not([class]) { color: var(--ink-2); max-width: 56ch; margin-inline: auto; }
.cr-perk { flex-direction: row; align-items: flex-start; gap: 18px; padding: clamp(20px, 1.8vw, 26px); }
.cr-perk .cr-icon { width: 46px; height: 46px; background: var(--gold); }
.cr-perk:nth-child(even) .cr-icon { background: var(--purple-mid); }
.cr-perk .cr-icon .cr-ico { width: 21px; height: 21px; }
.cr-perk h3 { font-size: clamp(1.05rem, 1.25vw, 1.22rem); margin: 2px 0 6px; }
.cr-perk p { font-size: .94rem; }
.cr-perk p { margin: 0; }

.cr-banner-wrap { position: relative; margin-top: 20px; }
.cr-banner { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r); background: var(--purple-dk);
  margin-top: 20px; min-height: clamp(340px, 36vw, 520px); display: flex; align-items: flex-end; color: #fff; }
.cr-banner img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cr-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(50,15,153,.86) 0%, rgba(50,15,153,.5) 36%, rgba(50,15,153,0) 70%),
              linear-gradient(0deg, rgba(17,17,17,.45) 0%, rgba(17,17,17,0) 45%); }
.cr-banner-copy { padding: clamp(26px, 4vw, 52px); max-width: 52ch; }
.cr-banner h3 { margin-bottom: 10px; }
.cr-banner p { color: rgba(255,255,255,.9); }

/* ---------- 7 · HOW TO JOIN — soft sky-tinted ground, progress track, raised detail card ---------- */
.cr-join { position: relative; overflow: clip;
  background: radial-gradient(70% 60% at 50% 0%, rgba(220,214,243,.7) 0%, rgba(220,214,243,0) 70%), var(--grey); }
.cr-d-join { color: var(--lilac-2); opacity: .8; width: min(30vw, 440px); left: -9vw; bottom: -12%; transform: rotate(-16deg); }
.cr-join .cr-seg { background: #fff; box-shadow: 0 10px 30px -20px rgba(50,15,153,.35); }
.cr-steps { --steps: 5; --active: 0; list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(var(--steps), 1fr); row-gap: clamp(32px, 4vw, 48px); }
/* track + violet progress that fills up to the active step */
.cr-steps::before, .cr-steps::after { content: ""; position: absolute; top: 31px; height: 4px; border-radius: 999px;
  left: calc(50% / var(--steps)); }
.cr-steps::before { right: calc(50% / var(--steps)); background: rgba(50,15,153,.12); }
.cr-steps::after { width: calc((100% - 100% / var(--steps)) * var(--active) / (var(--steps) - 1)); background: linear-gradient(90deg, var(--purple-mid), var(--purple));
  transition: width .6s var(--ease); }
.cr-step { display: contents; }
.cr-step-btn { grid-row: 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 6px; border: 0; background: none; cursor: pointer; color: var(--muted); }
.cr-step-icon { width: 66px; height: 66px; border-radius: 50%; background: #fff; color: var(--purple);
  box-shadow: 0 10px 24px -14px rgba(50,15,153,.45); display: flex; align-items: center; justify-content: center;
  transition: background .35s ease, box-shadow .35s ease, color .35s ease, transform .35s var(--ease); }
.cr-step-label { display: grid; gap: 2px; font-size: .98rem; font-weight: 600; line-height: 1.3; text-align: center; color: var(--ink-2); transition: color .3s ease; }
.cr-step-label small { font-size: .75rem; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.cr-step-btn:hover .cr-step-icon { transform: translateY(-3px); }
.cr-step-btn.is-done .cr-step-icon { background: var(--purple-mid); color: var(--ink); }
.cr-step-btn[aria-current="step"] .cr-step-icon { background: var(--purple); color: #fff; transform: scale(1.06);
  box-shadow: 0 0 0 8px rgba(50,15,153,.12), 0 14px 30px -12px rgba(50,15,153,.6); }
.cr-step-btn[aria-current="step"] .cr-step-label { color: var(--purple); }
.cr-step-btn[aria-current="step"] .cr-step-label small { color: var(--purple); }

.cr-step-panel { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 64px);
  background: #fff; border-radius: 18px; padding: clamp(28px, 4vw, 56px); box-shadow: 0 30px 60px -40px rgba(50,15,153,.45); border-top: 4px solid var(--purple); }
.cr-step-panel[hidden] { display: none; }
.cr-step-no { font-size: .82rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--purple); }
.cr-step-main h3 { margin: 14px 0 16px; font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.cr-step-main .tag { margin-bottom: 18px; }
.cr-step-main p:last-child { color: var(--ink-2); }
.cr-step-side { display: flex; flex-direction: column; gap: 24px; }
.cr-tip { background: var(--gold-lt); border-radius: 14px; padding: 22px 24px; border-left: 4px solid var(--gold); }
.cr-tip-label { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); margin-bottom: 8px; }
.cr-tip p:last-child { color: var(--ink); }
.cr-step-nav { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.cr-step-nav .btn-text { border: 0; background: none; cursor: pointer; padding: 12px 0; }
.cr-step-nav .btn-text:hover span { transform: translateX(-3px); }
.cr-step-nav .btn-text[disabled] { opacity: .35; cursor: not-allowed; }
.cr-step-nav .btn-text[disabled] span { transform: none; }

/* ---------- 8 · FINAL CTA — brand purple panel with the ring mark ---------- */
.cr-cta { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r); background: var(--purple); color: #fff;
  min-height: clamp(480px, 46vw, 680px); display: flex; align-items: center; }
.cr-cta-rings { position: absolute; z-index: -1; left: -14%; bottom: -60%; width: min(70vw, 900px); opacity: .1; filter: brightness(0) invert(1); pointer-events: none; }
.cr-cta-media { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; overflow: hidden;
  box-shadow: -2px 0 0 var(--purple); /* hides a sub-pixel seam while the panel scales */ }
.cr-cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 75%; }
.cr-cta-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--purple) 0%, rgba(50,15,153,.55) 12%, rgba(50,15,153,.12) 32%, rgba(50,15,153,0) 50%); }
.cr-cta-copy { position: relative; width: 42%; padding: clamp(32px, 5vw, 80px); }
/* kununu employer rating, bottom-left of the Join us panel */
.cr-kununu { display: block; width: 150px; margin-top: clamp(28px, 3.5vw, 44px); border-radius: 10px; box-shadow: 0 12px 28px -16px rgba(17,17,17,.6);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cr-kununu img { display: block; width: 100%; height: auto; }
.cr-kununu:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -16px rgba(17,17,17,.7); }
.cr-kununu:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.cr-cta h2 { margin: 26px 0 18px; max-width: 16ch; }
.cr-cta p { color: rgba(255,255,255,.88); max-width: 46ch; margin-bottom: 30px; }

/* ---------- focus + motion ---------- */
.cr-seg [role="tab"]:focus-visible, .cr-step-btn:focus-visible, .cr-step-nav :focus-visible,
.arrow-btn:focus-visible, .btn:focus-visible, .nav-pill a:focus-visible {
  outline: 2px solid var(--purple); outline-offset: 3px; }
.cr-hero .btn:focus-visible, .cr-cta .btn:focus-visible { outline-color: #fff; }
.cr-tabpanel:focus-visible { outline: 2px solid var(--purple); outline-offset: 6px; border-radius: var(--r); }
.cr-tabpanel:not([hidden]), .cr-step-panel:not([hidden]) { animation: crFade .45s var(--ease); }
@keyframes crFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .cr-tabpanel:not([hidden]), .cr-step-panel:not([hidden]), .cr-hero .hero-stage img { animation: none; }
  .cr-step-icon, .cr-step-label, .cr-seg [role="tab"] { transition: none; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
  .cr-grid-4, .cr-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .cr-split-head { grid-template-columns: 1fr; align-items: start; }
  .cr-step-panel { grid-template-columns: 1fr; }
  .cr-cta { display: block; min-height: 0; }
  .cr-cta-media { position: relative; width: 100%; aspect-ratio: 4 / 3; }
  .cr-cta-media::after { background: linear-gradient(0deg, var(--purple) 0%, rgba(50,15,153,0) 35%); }
  .cr-cta-copy { width: auto; padding-top: 8px; }
    .cr-cta-rings { left: auto; right: -40%; bottom: -30%; width: 120vw; }
}
@media (max-width: 640px) {
  .cr-vision, .cr-perks { margin-top: -24px; border-radius: 24px 24px 0 0; }
  .cr-grid-4, .cr-grid-3, .cr-grid-2 { grid-template-columns: 1fr; }
  .cr-hero .hero-actions, .cr-hero .btn, .cr-cta .btn { width: 100%; }
  .cr-carousel { --cr-size: 70vw; --cr-gap: 14px; }
  .cr-banner { min-height: 400px; }
  .cr-banner::after { background: linear-gradient(0deg, rgba(50,15,153,.9) 0%, rgba(50,15,153,.5) 45%, rgba(50,15,153,0) 75%); }
  .cr-seg [role="tab"] { padding: 10px 16px; }

  /* stepper → vertical accordion */
  .cr-steps { display: block; }
  .cr-steps::before { top: 38px; bottom: 38px; left: 31px; right: auto; width: 4px; height: auto; }
  .cr-steps::after { display: none; }
  .cr-step-label { display: flex; gap: 8px; align-items: baseline; }
  .cr-step { display: block; position: relative; padding: 6px 0; }
  .cr-step-btn { width: 100%; flex-direction: row; gap: 16px; padding: 0; text-align: left; }
  .cr-step-btn::after { content: ""; width: 8px; height: 8px; margin: 0 6px 0 auto; border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease); }
  .cr-step-btn[aria-expanded="true"]::after { transform: rotate(-135deg); }
  .cr-step-label { text-align: left; font-size: 1.02rem; }
  .cr-step-panel { position: relative; z-index: 1; margin: 12px 0 10px; padding: 24px 22px; gap: 20px; }
  .cr-step-nav { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
  .cr-step-nav .btn { width: 100%; }
  .cr-step-nav .btn-text { justify-content: center; }
}

/* intern-specific note above the 2-step process */
.cr-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto clamp(28px, 3.5vw, 44px);
  color: var(--ink-2); text-align: center; }
.cr-note .cr-ico { color: var(--purple); width: 22px; height: 22px; }
.cr-note b { color: var(--ink); font-weight: 600; }

/* ---------- SCROLL MOTION — ties sections together as you move through the page ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* hero photo drifts down and away as the vision sheet slides over it */
    .cr-hero .hero-stage { animation: crHeroAway linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes crHeroAway { to { transform: translateY(16%) scale(1.04); } }
    /* photos move inside their frames */
    .cr-banner img, .cr-cta-media img { animation: crParallax linear both; animation-timeline: view(); }
    @keyframes crParallax { from { transform: translateY(-7%) scale(1.16); } to { transform: translateY(7%) scale(1.16); } }
    /* the closing panel opens up as it comes into view */
    .cr-cta { animation: crOpen linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes crOpen { from { transform: scale(.92); border-radius: 32px; } to { transform: none; } }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the perks sheet rises a little faster than the page as it covers the violet */
    .cr-perks { animation: crSheet linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes crSheet { from { transform: translateY(60px); } to { transform: none; } }
  }
}

/* homepage-style colour offset behind the celebration banner */
.cr-tabpanel .cr-banner { box-shadow: 18px 18px 0 0 var(--lilac-2); margin-right: 18px; }
#cr-panel-pilsen .cr-banner { box-shadow: 18px 18px 0 0 var(--purple-mid); }
@media (max-width: 640px) { .cr-tabpanel .cr-banner { box-shadow: 10px 10px 0 0 var(--lilac-2); margin-right: 10px; } #cr-panel-pilsen .cr-banner { box-shadow: 10px 10px 0 0 var(--purple-mid); } }

/* ---------- STORY MOTION — the page unfolds as you read: headlines rise in word by word,
   the vision paragraph reads itself from grey to ink, photos wipe in, perks open up, cards
   follow each other in. Words are wrapped by careers.js (.sw > i). Nothing is pinned; every
   reveal finishes before mid-screen. Static with reduced motion / without scroll timelines. ---------- */
.sw { display: inline-block; }
.sw > i { display: inline-block; font-style: normal; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
  /* hero headline rises in word by word on load */
  .cr-hero h1 .sw { overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: top; }
  .cr-hero h1 .sw > i { animation: dUp .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
  @keyframes dUp { from { transform: translateY(110%); } to { transform: none; } }

  /* section headlines rise in word by word as they scroll into view */
  /* (played once when the headline is in view, not tied to the scroll position, so words are never left half-shown) */
  .cr-sec h2 .sw { overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: top; }
  .cr-sec h2 .sw > i { transform: translateY(110%); transition: transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 55ms); }
  .cr-sec h2.is-in .sw > i { transform: none; }

  /* the vision paragraph reads itself: words turn from grey to ink as you scroll */
  .cr-vision .lead .sw > i, .cr-vision .cr-strong .sw > i { color: #CCCCCC; animation: dInk linear both; animation-timeline: view(); }
  @keyframes dInk { to { color: var(--ink); } }

  /* photos wipe up into their frames */
  .cr-slide { animation: dWipe linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  @keyframes dWipe { from { clip-path: inset(100% 0 0 0 round 8px); } to { clip-path: inset(0 0 0 0 round 8px); } }
  .cr-cta-media { animation: dWipe linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  /* celebration photo opens from the top edge downwards, so there is never an empty gap above it */
  .cr-banner { animation: dDrop linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes dDrop { from { clip-path: inset(0 0 100% 0 round 8px); } to { clip-path: inset(0 -40px -40px 0 round 8px); } }

  /* perks open up from a narrow strip (kept from B) */
  .cr-perks { animation: dDoor linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; }
  @keyframes dDoor { from { clip-path: inset(0 36% 0 36% round 32px); } to { clip-path: inset(0 0 0 0 round 32px 32px 0 0); } }

  /* cards follow each other in */
  .cr-value, .cr-fact, .cr-perk, .cr-step-btn {
    animation: dCard linear both; animation-timeline: view(); animation-range: entry calc(var(--n, 0) * 6%) cover calc(28% + var(--n, 0) * 6%); }
  .cr-fact { animation-range: entry 0% cover 28%; }   /* key facts arrive together */
  @keyframes dCard { from { transform: translateY(50px); opacity: .25; } to { transform: none; opacity: 1; } }

  }
}

/* =====================================================================
   Careers feedback (Oct 2026)
   ===================================================================== */
/* no single words left alone: balanced headings and subtitles, pretty body text */
.careers h1, .careers h2, .careers h3, .careers .cr-strong, .cr-perks .lead, .cr-join .lead { text-wrap: balance; }
/* longer intro paragraphs: "pretty" keeps the last line from holding a single word (balance stops working beyond ~6 lines) */
.careers p, .careers .lead { text-wrap: pretty; }
.cr-perks .lead, .cr-join .lead { text-wrap: balance; }

/* 2 · vision: wider paragraph so its last word never sits alone */
.cr-vision .lead { max-width: 68ch; }

/* 3 · photo carousel: new photos come as <picture> (WebP + JPG fallback) */
.cr-slide picture { display: block; width: 100%; height: 100%; }

/* 4 · values: four equal, coloured boxes, ordered light to dark (white, lilac, soft purple, purple); title only, description revealed in place (no layout shift) */
.cr-values .cr-value { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: clamp(24px, 2.2vw, 34px);
  background: var(--purple-mid); color: var(--ink); box-shadow: none; }
.cr-values .cr-value:nth-child(1) { background: #fff; box-shadow: inset 0 0 0 1px rgba(50,15,153,.14); }
.cr-values .cr-value:nth-child(2) { background: var(--lilac-2); color: var(--purple); }
.cr-values .cr-value:nth-child(3) { background: var(--purple-mid); color: var(--ink); }
.cr-values .cr-value:nth-child(4) { background: var(--purple); color: #fff; }
.cr-values .cr-value::before { display: none; }
.cr-value-title { margin: 0 0 16px; font-size: clamp(1.5rem, 1.875vw, 1.875rem); line-height: 1.12; }
/* the button holds the "Value" label + name; the whole box reacts to a tap (assets/careers.js) */
.cr-values .cr-value { cursor: pointer; }
.cr-value-btn { all: unset; display: block; cursor: pointer; font: inherit; color: inherit; }
.cr-value-label { display: block; margin-bottom: 4px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
.cr-value-name { display: block; text-wrap: balance; }
.cr-value:has(.cr-value-btn:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.cr-values .cr-value:nth-child(4):has(.cr-value-btn:focus-visible) { outline-color: var(--purple); }
/* closed: label + name sit larger in the middle of the box (offsets measured by careers.js);
   open: they shrink back to the top and the description appears below */
.cr-value-title { width: fit-content; max-width: 100%; transform-origin: center; text-align: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.cr-value.is-centred:not(.is-open) .cr-value-title { text-align: center;
  transform: translate(var(--cx, 0px), var(--cy, 0px)) scale(var(--cs, 1)); }
/* the description always takes its space, so revealing it moves nothing */
.cr-value-body { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.cr-value-body p { color: inherit; font-size: .98rem; line-height: 1.55; margin: 0; }
.cr-value-head { font-weight: 600; margin-bottom: 6px !important; }
.cr-value.is-open .cr-value-body { opacity: 1; transform: none; }
/* without JavaScript, hover and keyboard focus still reveal it */
@media (hover: hover) {
  .cr-value:hover .cr-value-body, .cr-value:has(.cr-value-btn:focus-visible) .cr-value-body { opacity: 1; transform: none; }
}
/* small "+" in the corner says there is more; turns into "−" when open */
.cr-value-hint { position: absolute; right: clamp(18px, 1.8vw, 26px); bottom: clamp(16px, 1.6vw, 24px); width: 14px; height: 14px; opacity: .7; transition: opacity .25s ease; }
.cr-value-hint::before, .cr-value-hint::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease; }
.cr-value-hint::after { transform: rotate(90deg); }
.cr-value.is-open .cr-value-hint::after { transform: rotate(0deg); }
@media (hover: hover) { .cr-value:hover .cr-value-hint::after, .cr-value:has(.cr-value-btn:focus-visible) .cr-value-hint::after { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .cr-value-body, .cr-value-title, .cr-value-hint, .cr-value-hint::before, .cr-value-hint::after { transition: none; } }

/* 5 · what we offer: photo text + purple fade on the right */
.cr-banner { justify-content: flex-end; }
.cr-banner::after {
  background: linear-gradient(270deg, rgba(50,15,153,.88) 0%, rgba(50,15,153,.55) 38%, rgba(50,15,153,0) 72%),
              linear-gradient(0deg, rgba(17,17,17,.45) 0%, rgba(17,17,17,0) 45%); }
.cr-perks .lead { text-wrap: balance; }
@media (max-width: 640px) {
  .cr-banner::after { background: linear-gradient(0deg, rgba(50,15,153,.9) 0%, rgba(50,15,153,.5) 45%, rgba(50,15,153,0) 75%); }
}
@media (min-width: 1000px) {
  .cr-perks .lead { max-width: none; }        /* subtitle on one line on desktop */
}
/* stacked again: centred site intro, 2×2 perks (a little roomier), team photo below */
.cr-offer .cr-grid-2 { gap: 22px; }
.cr-offer .cr-perk { gap: 20px; padding: clamp(24px, 2.1vw, 32px); }
.cr-offer .cr-perk .cr-icon { width: 52px; height: 52px; flex: none; }
.cr-offer .cr-perk .cr-icon .cr-ico { width: 23px; height: 23px; }
.cr-offer .cr-perk h3 { font-size: clamp(1.12rem, 1.4vw, 1.35rem); }
.cr-offer .cr-perk p { font-size: 1rem; line-height: 1.55; }
.cr-offer .cr-banner { margin-top: 28px; }


/* the second sentence of the vision heading balances on its own (it follows a line break) */
.cr-vision h2 .cr-hl { display: inline-block; text-wrap: balance; }

/* hero: "Learn more" text link beside the main button (as on the homepage and mission page) */
.cr-hero .hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cr-vision:focus { outline: none; }
@media (max-width: 640px) { .cr-hero .hero-actions .btn-text { width: auto; } }

/* What we offer: tighter, calmer overview; no frame behind the photos */
.cr-perks { padding-top: clamp(56px, 6vw, 88px); }
.cr-perks .center-head { margin-bottom: 20px; }
.cr-perks .center-head h2 { margin-top: 14px; }
.cr-perks .center-head .lead { margin-top: 10px; }
.cr-perks .cr-seg-wrap { margin-bottom: 26px; }
.cr-offer .cr-office { margin-bottom: 18px; }
.cr-offer .cr-office-site h3 { margin: 6px 0 6px; }
.cr-offer .cr-grid-2 { gap: 14px; }
.cr-offer .cr-perk { padding: clamp(16px, 1.5vw, 22px) clamp(20px, 2vw, 28px); gap: 16px; }
.cr-offer .cr-perk .cr-icon { width: 44px; height: 44px; }
.cr-offer .cr-perk h3 { margin: 0 0 4px; }
.cr-offer .cr-banner { margin-top: 18px; }
.cr-tabpanel .cr-banner, #cr-panel-pilsen .cr-banner { box-shadow: none; margin-right: 0; }

/* Join us: a quiet line, then kununu and the LinkedIn logo side by side */
.cr-dayline { margin: 28px 0 12px !important; color: rgba(255,255,255,.88); font-weight: 500; }
.cr-social { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cr-social .cr-kununu { margin-top: 0; }
.cr-li { --linkedin: #0A66C2;   /* LinkedIn brand blue: a third-party logo keeps its own color, like the kununu badge */
  display: inline-flex; align-items: center; justify-content: center; width: 69px; height: 69px; border-radius: 10px; background: #fff; color: var(--linkedin);
  box-shadow: 0 12px 28px -16px rgba(17,17,17,.6); transition: transform .3s ease, box-shadow .3s ease; }
.cr-li svg { width: 34px; height: 34px; }
.cr-li:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -16px rgba(17,17,17,.7); }
.cr-li:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .cr-li { transition: none; } }

/* Benefits: like the values, only the title shows; hover, keyboard focus or a tap lifts it and reveals the text.
   The text keeps its space (no jumping); careers.js measures how far the title sits lower while closed. */
.cr-offer .cr-office-site h3 { margin-top: 0; }
.cr-perk[data-perk] { align-items: center; cursor: pointer; }
.cr-perk-btn { all: unset; cursor: pointer; font: inherit; color: inherit; text-wrap: balance; }
.cr-perk-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cr-perk[data-perk] { position: relative; }
.cr-perk[data-perk]:has(.cr-perk-btn:focus-visible) { outline: 3px solid var(--purple); outline-offset: 3px; }
.cr-perk-txt h3 { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.cr-perk-txt p { transition: opacity .25s ease, transform .3s ease; }
.cr-perk.is-ready:not(.is-open) .cr-perk-txt h3 { transform: translateY(var(--perk-dy, 0px)); }
.cr-perk.is-ready:not(.is-open) .cr-perk-txt p { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .cr-perk-txt h3, .cr-perk-txt p { transition: none; } }

/* location sentence (Munich / Pilsen) on one line on desktop to save height */
@media (min-width: 1100px) {
  .cr-offer .cr-office-site > p:not([class]) { max-width: none; white-space: nowrap; }
}

/* Benefits, final: compact cards. Closed, icon + title sit together in the middle of the card; on hover / focus / tap
   they slide to the left and lift, and the text appears under the title. A "+" in the corner invites to open. */
.cr-offer .cr-perk[data-perk] { position: relative; overflow: hidden; align-items: center; min-height: 112px; border-radius: 12px; background: #F6F5FA;
  padding: 18px 48px 18px clamp(20px, 2vw, 28px); transition: background .3s ease, box-shadow .3s ease; }
.cr-offer .cr-perk[data-perk]:hover, .cr-offer .cr-perk[data-perk].is-open { background: #EFECF8; box-shadow: 0 18px 40px -30px rgba(50,15,153,.45); }
.cr-offer .cr-perk[data-perk] .cr-icon, .cr-offer .cr-perk[data-perk] .cr-perk-txt h3 { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.cr-perk.is-ready:not(.is-open) .cr-icon { transform: translateX(var(--perk-dx, 0px)); }
.cr-perk.is-ready:not(.is-open) .cr-perk-txt h3 { transform: translate(var(--perk-dx, 0px), var(--perk-dy, 0px)); }
.cr-perk-hint { position: absolute; right: 18px; bottom: 16px; width: 14px; height: 14px; color: var(--purple); opacity: .6; transition: opacity .25s ease; }
.cr-perk-hint::before, .cr-perk-hint::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease; }
.cr-perk-hint::after { transform: rotate(90deg); }
.cr-perk.is-open .cr-perk-hint { opacity: 1; }
.cr-perk.is-open .cr-perk-hint::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .cr-offer .cr-perk[data-perk], .cr-offer .cr-perk[data-perk] .cr-icon, .cr-offer .cr-perk[data-perk] .cr-perk-txt h3, .cr-perk-hint, .cr-perk-hint::before, .cr-perk-hint::after { transition: none; } }