@charset "UTF-8";

/* ============================================================
   Europa Akın Consulting - Turkey to Germany Workforce Placement
   Locked design system. Do not drift from these tokens.
   ============================================================ */

:root {
  /* The site is light only. Declaring it stops the browser rendering native
     controls — select, date input, scrollbar — in its dark palette when the
     operating system is dark, which is how a form ends up with white text in
     a white field on a page that never asked for a dark theme. */
  color-scheme: light;

  /* ── Corner radius ──────────────────────────────────────────
     Derived from .agents/awesome-design-md rather than invented. Five
     teardowns — Stripe, Linear, Intercom, Notion, and Wise one step up —
     independently land on the same scale AND the same assignments: 8 for
     buttons and inputs, 12 for cards, 16 for large panels. Each gives radius
     its own heading and calls it a brand signature.

     This file previously held sixteen values with no token: 9, 10, 11, 12 and
     14 all doing the work of one step at differences nobody can see, and the
     pill written both as 100px and as 999px. That is not a scale, it is
     accumulated decisions.

     50% is deliberately not on the scale — a circle is not a step. */
  --r-xs:   4px;    /* chips, status badges, hairline chrome */
  --r-sm:   6px;    /* inline tags */
  --r-md:   8px;    /* buttons, inputs */
  --r-lg:  12px;    /* cards — service, step, founder, feature */
  --r-xl:  16px;    /* large panels and figures */
  --r-pill: 999px;  /* pills and full-radius accents */

  /* ── Section rhythm ─────────────────────────────────────────
     Both Stripe and Linear name 96px as the canonical gap between sections.
     Ours reached 88px, which was close, and it had been written four ways —
     clamp(3rem,7vw,5.5rem), clamp(3rem,7vw,5rem), clamp(3rem,6vw,5rem) and
     clamp(3.25rem,7vw,5.5rem) — differing by amounts that read as drift
     rather than as intent. Two tokens: the standard band and the tighter one
     used where a section is an aside rather than a moment.

     Retuned 2026-09-11 to the competitor's measured rhythm, on the client's
     instruction. Their page was served locally and read from the computed
     styles rather than from their stylesheet: every section but three is
     100px top and bottom at 1440 and 56px at 375, the closing CTA takes 120,
     and every margin is zero — the spacing is all padding, as ours is.

     So the clamp lands on their two endpoints exactly: 3.5rem = 56px at the
     narrow end, 6.25rem = 100px at the wide one. Theirs steps at a
     breakpoint; ours travels, which is the same rhythm with nothing to
     notice in between. --band-sm is scaled by the same ratio and lands on
     80px, which is what their press band uses. */
  --band:    clamp(3.5rem, 7vw, 6.25rem);
  --band-sm: clamp(3rem, 5.6vw, 5rem);


  /* ---------------------------------------------------------------
     Light surface: warm white ground, navy chrome, blue line work.

     The token NAMES are unchanged on purpose. Roughly seventy rules
     across three stylesheets resolve against --void / --panel / --ink /
     --mute, so keeping the names turns the theme into a value swap
     instead of a rewrite: --void is still "the page ground" and --ink is
     still "text on the ground", they simply changed places.
     --------------------------------------------------------------- */
  /* ---------------------------------------------------------------
     Surface stack, inverted.

     It used to run white page / #F5F7FA card, which measures 1.07:1 between
     the two — effectively invisible, so cards read as faintly tinted
     rectangles rather than as raised surfaces. Worse, the card was DARKER
     than the page, which reads as sunken.

     Both reference competitors do the opposite and it is why their cards
     work: the card is the LIGHTEST thing on the page, sitting on a tinted
     ground, with a shadow doing the separation.
     --------------------------------------------------------------- */
  /* Deepened from #F6F8FB on 2026-08-27. At the old value the card measured
     1.03:1 against the ground — a difference that exists in the file and not on
     the screen, so cards floated instead of sitting on something. */
  --void:    #EDF1F7;   /* page ground — tinted, so white can sit on it */
  /* The light step of the section alternation. Apple's page grey rather than
     paper white, on the client's call — and it fixes something as well as
     looking softer: a white card on a white section measures 1.07:1, which is
     the invisible-card problem this file already records. #F5F5F7 against
     #FFFFFF is 1.06:1 the other way, so the CARD is now the lighter surface
     and reads as raised instead of as a faintly tinted rectangle. */
  --paper:   #F5F5F7;
  --panel:   #FFFFFF;   /* cards and raised surfaces — the lightest surface */
  --ink:     #0B1B2E;   /* headings — 16.8:1 on the ground */

  /* ---------------------------------------------------------------
     Body copy is neutral, not navy.

     Every text colour was previously mixed from --ink, so headings, body,
     secondary text and the accent all sat in one hue family. Contrast was
     never the problem (measured 16.2 / 7.7 / 5.4, all well past AA) — hue
     monotony was. Pulling body and secondary text to a neutral grey leaves
     blue meaning "link or accent" and nothing else.
     --------------------------------------------------------------- */
  --body:    #4B5563;   /* body copy — 7.0:1 on the ground */
  --mute:    #646E7C;   /* secondary text, labels — 4.9:1 on the ground */

  /* Chrome. Navy carries the brand; blue carries links and line work. */
  --navy:    #0B1B2E;
  --navy-lo: #17324F;

  /* The deep ground. Darker than --navy, and shared by the portal band and the
     fixed chrome above it, so the bar a visitor scrolls under and the section
     showing them the product are lit by the same light. */
  --navy-deep: #070B19;

  /* The chrome's fill: deep navy with a blue rise left of centre.
     Strictly horizontal — `to right`, not an angle. The utility strip and the
     masthead are two stacked full-width elements painting this separately, and
     a gradient with any vertical component would step at the seam between
     them. With no vertical component they are seamless by construction. */
  --bar-bg: linear-gradient(
    to right,
    var(--navy-deep) 0%,
    color-mix(in srgb, var(--blue) 32%, var(--navy-deep)) 26%,
    color-mix(in srgb, var(--blue) 17%, var(--navy-deep)) 56%,
    color-mix(in srgb, var(--blue) 6%, var(--navy-deep)) 82%,
    var(--navy-deep) 100%
  );
  --blue:    #1E5EFF;   /* 6.5:1 on white — THE action colour */
  /* The hero sets type on navy, where --blue lands at 3.39:1: legible at
     display size, but under AA for anything smaller and too close to the
     ground to feel deliberate. This is the same hue lifted for a dark bed. */
  --blue-on-dark: #6B98FF;
  /* The heading accent. Section titles split in half — plain, then this —
     the way the hero splits its own headline. Deliberately deeper than
     --blue: at heading size a link-bright blue reads as something you can
     click, and it sits closer to the navy chrome, so the two ends of the
     page belong to each other. Measured 7.10:1 on the ground. */
  --blue-deep: #184AC0;

  /* ---------------------------------------------------------------
     Audience coding, deepened for a light ground.

     The category is saturated with blue (BlueCard, the EU stars), so the
     two-sided coding is the one instantly distinguishing mark the brand
     owns and it is kept — but the original #0FBE8A / #C9A227 measure
     2.40:1 and 2.42:1 as text on white and cannot carry text here. These
     are the deepened variants: 5.84:1 and 6.38:1 respectively.
     --------------------------------------------------------------- */
  /* Status only. A completed step, an approved document, a passing check —
     never a button. A green button and a green tick in the same view make the
     reader stop and work out which green means what. */
  --emerald: #0E7A4F;   /* measured 5.36:1 white / 5.04:1 ground */

  /* ---------------------------------------------------------------
     Yellow is the action, 2026-08-28.

     Blue carried the buttons until now, in a category where every competitor
     is also blue — BlueCard, the EU stars, half the category's logos. A blue
     button on a blue-chrome site is the one element that has to be found
     instantly and was the hardest to find.

     Yellow NEVER carries text on a light ground: #FFC933 measures 1.5:1 on
     white. It is a BED for navy text, and nothing else. Where the yellow
     family has to be text — a link, a small label — use --amber-ink.
     --------------------------------------------------------------- */
  --cta:      #FFC933;   /* button bed. Navy on it measures 12.4:1 */
  --cta-lo:   #F0B71A;   /* pressed / hover */
  --amber-ink:#B45309;   /* the yellow family AS TEXT — 5.9:1 on white */

  /* The glow. A yellow button on a light ground has little to separate it
     from the page, so the shadow is tinted with the button's own hue rather
     than with black — it reads as the button emitting light instead of
     casting a shadow, which is what makes it the thing you look at. */
  --cta-glow:    0 8px 24px -10px color-mix(in srgb, var(--cta) 78%, transparent);
  --cta-glow-hi: 0 12px 34px -12px color-mix(in srgb, var(--cta) 92%, transparent);

  /* Kept as an alias: --gold was the employer-side coding before the CTA
     system took the hue. Anything still asking for it gets the real yellow. */
  --gold:    var(--cta);

  /* Emphasis, not action. Demoted 2026-08-27.
     It used to carry the buttons, which put four different colours on things
     that all did the same job. Now it marks: the "most common route" badge,
     a figure worth stopping on, a section rule. Dark navy sits on it at
     10.9:1, so it can still carry text. */
  --action:  #D9A521;
  --action-lo: #BC8D16;

  /* A tinted surface, for places that would otherwise be white on white:
     the stuck masthead, programme page heads, the sticky module rail. */
  --tint:    #EAF0F9;

  /* Card elevation. A white card on a tinted ground still needs a shadow to
     read as raised rather than as a colour change — this is what does the
     separation work now that the two surfaces are only a step apart. */
  --lift:     0 6px 20px -12px color-mix(in srgb, var(--navy) 26%, transparent);
  --lift-hi:  0 14px 32px -16px color-mix(in srgb, var(--navy) 32%, transparent);
  --edge:     1px solid color-mix(in srgb, var(--navy) 13%, transparent);

  /* --- Typography roles --- */
  /* Changed 2026-08-28. Space Grotesk reads as a technology product; this is
     a trust business, and the people reading it are deciding whether to hand
     us a passport. Lexend was drawn for reading ease and is the face this
     category's accessibility guidance keeps landing on. */
  /* -- Typography -------------------------------------------------
     One family carries the whole hierarchy, which is then built from size,
     weight and letter-spacing rather than from a change of face. That is the
     shape every teardown in .agents/awesome-design-md settles on. Intercom
     states it outright: the same family carries the entire hierarchy, and
     hierarchy is carried by size + weight + tracking, not by family change.
     Linear keeps Display and Text as two cuts of one family so that the
     family change is silent.

     Before this the site loaded three faces. Lexend set the headings and
     Source Sans 3 the body, two unrelated families splitting the hierarchy;
     JetBrains Mono had spread across 43 elements, taking every button, every
     section eyebrow, the form labels, the footer headings, the masthead
     doors, and the name and role of the founder. Monospace on a page with no
     code reads as a technical product template, which is the opposite of
     what a worried welder in Istanbul is being asked to trust. Vercel scopes
     mono precisely: it is for anything that wants to signal technical.
     Nothing on this site is.

     --font-ident is the single exception. A case reference and a courier
     tracking number are copied out by hand, so 0 and O have to differ. It
     resolves to the system mono and costs no web font. */
  --font-display: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono:    'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-ident:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Was a live variable the scrub lerped emerald -> gold across the film.
     The film is gone; it is now simply the accent colour, so every rule
     that referenced it keeps working and resolves to the brand blue. */
  --hud-accent: var(--blue);

  /* --- Rhythm --- */
  --gutter: clamp(1.25rem, 4vw, 5rem);
  --maxw: 1440px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Header metrics. Static pages offset the document by --header-h so
         content is never hidden behind the fixed bar. --- */
  /* The utility bar carries the persistent audience doors, so it is taller than
     a pure info strip would need to be. --header-h is derived, which is what
     lets that change propagate to the fixed-header offset by itself. */
  /* 28px, down from 40 on 2026-08-28. The strip carries two audience doors
     and a language switch — three small controls and no reading. Forty pixels
     of navy above the masthead was a band, not a strip, and it pushed the
     film down by that much on every page. */
  --util-h: 28px;
  --mast-h: 68px;
  --header-h: calc(var(--util-h) + var(--mast-h));

  /* Long-form measure. ~68 characters at the body size — the range where
     German compound nouns still break cleanly. */
  --measure: 68ch;
}


/* A bare <button> does not inherit the page font: browsers give form controls
   their own default, which is how four controls in the masthead were rendering
   in Arial. Their labels are visually hidden so nothing looked wrong, but any
   visible text inside one would have arrived in a face this site does not
   load. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
/* ── Touch behaviour ──────────────────────────────────────────
   The reader this site is written for is on a phone, so the two defaults
   below are worth overriding.

   touch-action: manipulation switches off the browser's wait for a possible
   double-tap-to-zoom, which is 300ms added to every tap on every control.
   Applied to controls rather than the document, so pinch-zoom on the page
   itself is untouched — zoom is an accessibility feature and the viewport
   meta deliberately does not disable it.

   The tap highlight is a translucent black flash by default, which on the
   yellow CTA reads as the button going muddy. Replaced with a tint of the
   page's own blue at low alpha. */
a,
button,
label,
summary,
[role='button'],
input[type='checkbox'],
input[type='radio'],
input[type='submit'] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--blue) 18%, transparent);
}

@media (max-width: 720px) {
  :root { --util-h: 26px; --mast-h: 60px; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  /* Lenis used to drive scrolling and native smooth-scroll would have fought
     it. The scrub is gone and Lenis with it, so anchors can scroll natively —
     the audience fork and the hero both point at #qualify. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure { margin: 0; }

::selection { background: color-mix(in srgb, var(--blue) 22%, transparent); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}

/* ============================================================
   MASTHEAD — utility bar + primary nav + mega panels
   ============================================================ */

/* Utility strip. Fixed above the masthead so both scroll as one unit. */
.util {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 71;
  height: var(--util-h);
  display: flex;
  align-items: center;
  /* One fill on every page, not just the film ones. The masthead below it
     takes the same on scroll, and a light strip sitting above a dark bar reads
     as two unrelated headers stacked. */
  background: var(--bar-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--void) 10%, transparent);
}
.util__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.util__inner::-webkit-scrollbar { display: none; }
.util__item { font-size: 0.6rem; white-space: nowrap; color: color-mix(in srgb, var(--void) 55%, transparent); }
.util__item--link { color: color-mix(in srgb, var(--void) 75%, transparent); }
.util__item--link:hover { color: var(--void); }

/* Dark on every page and in every state.
   It used to be white until the first scroll on all but the film pages, which
   put a white sheet directly under the always-dark utility strip — two
   unrelated headers stacked — and made the bar change colour under a visitor
   the moment they moved. One fill, and the type rules below are written once
   instead of three times. */
.masthead {
  position: fixed;
  top: var(--util-h); left: 0; right: 0;
  z-index: 70;
  background: var(--bar-bg);
  transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  border-bottom: 1px solid color-mix(in srgb, var(--void) 10%, transparent);
}
/* Once scrolled, the bar has to hold its own against arbitrary page content.
   A shadow rather than a darker fill — on a light ground, depth reads better
   than contrast. */
/* Navy once scrolled, on every page — the same colour as the strip above it, so
   the two read as one bar rather than as a white sheet sliding under a dark one.
   No backdrop-filter here: an opaque fill does not need one, and a filtered
   masthead becomes the containing block for the fixed mobile drawer inside it
   (that is what put a 37px gap above the menu). */
/* Scrolled, the bar only gains depth. The fill and the type are already right,
   so nothing about it has to be re-read the moment the page moves. */
.masthead.is-stuck {
  box-shadow: 0 1px 24px -6px rgba(0, 0, 0, 0.55);
  border-bottom-color: transparent;
}
.masthead .wordmark,
.masthead .nav__link,
.masthead .nav__caretbtn { color: var(--void); }
.masthead .wordmark i { color: var(--blue-on-dark); }
.masthead .nav__link:hover,
.masthead .nav__caretbtn:hover { color: var(--blue-on-dark); }
.masthead .nav__link[aria-current='page'] { color: var(--blue-on-dark); }
.masthead .langswitch { border-color: color-mix(in srgb, var(--void) 30%, transparent); }
.masthead .langswitch__other { color: color-mix(in srgb, var(--void) 70%, transparent); }
.masthead .langswitch__other:hover { color: var(--void); }
.masthead .navtoggle { border-color: color-mix(in srgb, var(--void) 30%, transparent); }
.masthead .navtoggle__box i { background: var(--void); }

.masthead__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: var(--mast-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}

/* Static pages scroll under a fixed header, so the document has to start below
   it. The cinematic homepage deliberately does not — the canvas runs full bleed
   and the masthead floats over it. */
.body--static { padding-top: var(--header-h); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  letter-spacing: 0.14em;
  color: var(--ink);
  white-space: nowrap;
  /* Never text-transform this: on a lang="tr" page uppercase maps i -> İ and
     silently rewrites the ASCII brand name. The source string is already caps. */
}
.wordmark i {
  font-style: normal;
  color: var(--hud-accent);
  transition: color 0.4s linear;
}

/* ---------- Primary nav ---------- */
.nav { margin-right: auto; }
.nav__ul {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Static on purpose: the mega panel resolves its containing block to the fixed
   masthead instead, so it spans the full bar rather than being centred on its
   own menu item — which pushed a 780px panel past the left viewport edge. */
.nav__li { position: static; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.nav__link:hover { color: var(--hud-accent); }
.nav__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs); }
.nav__link[aria-current='page'] { color: var(--hud-accent); }

/* Label and caret are separate controls: the label navigates, the caret opens
   the panel. Grouping them keeps them reading as one item. */
.nav__group { display: inline-flex; align-items: center; }
.nav__group .nav__link { padding-right: 0.2rem; }

.nav__caretbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.nav__caretbtn:hover { color: var(--hud-accent); }
.nav__caretbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs); }

.nav__caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s var(--ease-out);
  opacity: 0.7;
}
.nav__li.is-open .nav__caret { transform: rotate(225deg) translateY(-2px); }

/* ---------- Mega panel ---------- */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 80;
  padding-block: 1.9rem 2.1rem;
  background: color-mix(in srgb, var(--panel) 98%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 32px 70px -30px color-mix(in srgb, var(--navy) 45%, transparent);
}
.mega__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 1.5rem 2.5rem;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem 2.5rem;
  min-width: 0;
}
/* The promo rail carries the menu's own argument — the sentence that makes the
   links beside it worth a click. Navy panel so it reads as one block rather
   than as a fifth column of links. */
.mega--promo .mega__inner { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); }
.mega__promo {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--navy);
  color: var(--void);
  border-radius: var(--r-lg);
  align-self: start;
}
.mega__promo-eyebrow { color: color-mix(in srgb, var(--void) 62%, transparent); margin-bottom: 0.6rem; }
.mega__promo-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.mega__promo-body {
  font-size: 0.85rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--void) 78%, transparent);
  margin-bottom: 1.1rem;
}
/* Yellow, not white.
   This overrode .btn--primary to white back when the action colour was blue
   and white read as "the light thing on the navy card". Now that the action
   colour IS yellow the override left a white button sitting on the yellow glow
   the button itself casts — two different answers to "what does an action look
   like" inside one panel. */
.mega__promo .btn--primary { background: var(--cta); color: var(--navy); }
.mega__promo .btn--primary:hover { background: var(--cta-lo); }
@media (max-width: 1040px) {
  .mega--promo .mega__inner { grid-template-columns: 1fr; }
  .mega__promo { display: none; }
}

.megacol { min-width: 0; }
.megacol__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  padding-bottom: 0.7rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}

.megaitem {
  display: block;
  min-height: 44px;
  padding: 0.6rem 0.7rem;
  margin-inline: -0.7rem;
  border-radius: var(--r-md);
  transition: background 0.18s var(--ease-out);
}
.megaitem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
}
.megaitem:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.megaitem:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.megaitem[aria-current='page'] { background: color-mix(in srgb, var(--emerald) 10%, transparent); }

/* One stroke weight and one size across the set, so a column of them reads as
   a system rather than as a pile of separate marks. */
.megaitem__ico {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
  flex: none;
}
.megaitem__ico .ico { width: 17px; height: 17px; }
.megaitem[aria-current='page'] .megaitem__ico { background: color-mix(in srgb, var(--emerald) 16%, transparent); color: var(--emerald); }

.megaitem__text { min-width: 0; }
.megaitem__title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.megaitem__blurb {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--mute);
}
.megaitem:hover .megaitem__title { color: var(--hud-accent); }

/* ---------- Masthead end: language + CTA + burger ---------- */
.masthead__end {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.1rem);
  margin-left: auto;
}

/* Phones only — the utility strip carries the switcher everywhere else. */
.masthead__lang { display: none; }

/* On a phone the bar drops the CTA and takes the language switcher instead.
   The CTA was in three places at once on that screen: here, at the foot of the
   open drawer, and in the floating bar along the bottom. Two of those are
   always reachable, so the one in the bar was buying nothing and spending the
   only space a narrow masthead has.
   720px rather than the burger's 1024: between the two the floating bottom bar
   does not exist yet, and dropping the CTA there would leave a tablet with no
   action visible at all until it opened the menu. */
@media (max-width: 720px) {
  .masthead .mact--cta { display: none; }
  .masthead__lang { display: block; }
}

.langswitch {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: var(--r-pill);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.langswitch__current,
.langswitch__other {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 34px;
  padding: 0 0.55rem;
}
.langswitch__current { background: var(--hud-accent); color: var(--void); }
.langswitch__other { color: var(--mute); }
.langswitch__other:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.langswitch__other:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.btn--sm { padding: 0.6rem 1.05rem; font-size: 0.72rem; }
/* One line, always. "Kostenlose Ersteinschätzung" wrapped between 1025 and
   ~1230px and took the button to 69px inside a 68px bar, so it hung out of the
   masthead. The bar itself fits down to 860px measured, so nowrap is safe. */
.masthead__end .btn--sm { white-space: nowrap; }

.navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: var(--r-md);
  cursor: pointer;
}
.navtoggle__box { display: grid; gap: 4px; }
.navtoggle__box i {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
}
.nav-open .navtoggle__box i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-open .navtoggle__box i:nth-child(2) { opacity: 0; }
.nav-open .navtoggle__box i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Mobile drawer ---------- */
/* Desktop keeps the CTA in the masthead, so the drawer copy stays out of the
   way until the drawer exists.
   Two selectors deep on purpose: `.btn` sets `display: inline-flex` further
   down the file, and at equal specificity the later rule wins — which put a
   second copy of the CTA in the desktop nav bar. */
.nav .nav__cta { display: none; }

/* The two portal doors live in the masthead row on desktop, so their copy in
   the drawer stays out of the way until the drawer exists — same reason, and
   the same shape, as the CTA above. */
.navdoors { display: none; }

@media (max-width: 1024px) {
  .navtoggle { display: inline-flex; }
  .masthead__end .btn--sm { display: none; }
  .nav .nav__cta { display: inline-flex; margin-top: 1.5rem; width: 100%; justify-content: center; }

  /**
   * Anchored to the masthead, not to the viewport.
   *
   * This was `position: fixed; top: var(--header-h)`, which is correct only
   * while nothing above it creates a containing block. `.masthead.is-stuck`
   * carries a backdrop-filter, and a filtered ancestor becomes the containing
   * block for fixed descendants — so once the page was scrolled, `top: 98px`
   * started measuring from the masthead's own box instead of the viewport and
   * the drawer dropped to 136px, leaving a 37px strip of page content showing
   * between the header and the menu.
   *
   * Absolute positioning against the (fixed) masthead gives the same result
   * without depending on whether a filter happens to be applied.
   */
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem var(--gutter) 2.5rem;
    /* A light sheet, the same one the desktop mega panel drops onto the page —
       the drawer is that panel, laid out for a narrow screen, and it reads as
       one idea if it is the same colour in both.
       Opaque: at 98% the page headings behind it were still legible through
       the drawer, which read as a rendering fault rather than as depth.
       The type rules below are the price of it. The bar above is dark, so
       .masthead .nav__link is light — inside the drawer that was white on
       white and the menu opened empty. */
    background: var(--panel);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    box-shadow: 0 24px 40px -28px color-mix(in srgb, var(--navy) 60%, transparent);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out), visibility 0.24s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; }

  /* Freezes the page behind the open drawer. `position: fixed` rather than
     `overflow: hidden` because iOS Safari ignores the latter on body; nav.js
     stores and restores the scroll offset around it. */
  body.nav-open {
    position: fixed;
    left: 0; right: 0;
    width: 100%;
    overflow: hidden;
  }

  /* Both doors, side by side, above the list. Two equal columns rather than a
     stack: they are alternatives to each other, not two more menu items, and
     a row says that before the labels are read. */
  .navdoors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .navdoor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 46px;
    padding: 0 0.55rem;
    border-radius: var(--r-lg);
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    background: var(--panel);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
  }
  .navdoor:hover { border-color: var(--ink); }
  .navdoor .ico { flex: none; width: 16px; height: 16px; color: var(--mute); }
  /* The employer door keeps the accent it carries on the desktop row, so the
     two sides of the business stay told apart in the same way everywhere. */
  .navdoor--emp {
    border-color: color-mix(in srgb, var(--cta) 60%, transparent);
    background: color-mix(in srgb, var(--cta) 9%, transparent);
  }
  .navdoor--emp:hover { border-color: var(--cta); }
  .navdoor--emp .ico { color: var(--amber-ink); }

  /* Dark type, because the drawer is light and the bar it hangs from is not.
     Scoped .masthead .nav so it outranks the light .masthead .nav__link above
     rather than relying on being further down the file. */
  .masthead .nav .nav__link,
  .masthead .nav .nav__caretbtn { color: var(--ink); }
  .masthead .nav .nav__link:hover,
  .masthead .nav .nav__caretbtn:hover { color: var(--hud-accent); }
  .masthead .nav .nav__link[aria-current='page'] { color: var(--hud-accent); }

  .nav__ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__li { border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
  .nav__link { min-height: 52px; font-size: 1rem; }
  /* The caret needs a large, obviously separate tap area on touch, or the two
     controls become one ambiguous 52px row. */
  .nav__group { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .nav__group .nav__link { flex: 1; }
  .nav__caretbtn { width: 52px; min-height: 52px; border-left: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }

  /* In the drawer the panel is inline content, not an overlay. */
  .mega {
    position: static;
    padding: 0 0 1rem;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
  .mega__inner { grid-template-columns: 1fr; gap: 1.25rem; padding-inline: 0; max-width: none; }

  /* Nothing to restate for the panel itself: inline in the drawer it sits on
     the same light ground it gives itself as a desktop overlay, so the ink
     colours it is declared with are already right. */
}

section { position: relative; }

.panel-section {
  position: relative;
  z-index: 10;
  background: var(--void);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--hud-accent);
  transition: background 0.4s linear;
}

/* ============================================================
   HERO
   ============================================================ */
/* Was full-viewport because it sat over the scrub canvas and the film needed
   the height to start scrubbing into. With no canvas behind it, a 100svh
   panel of nothing but text just pushes the audience fork below the fold —
   which is the one thing the structure exists to prevent. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem);
}

.hero__inner { width: 100%; position: relative; z-index: 2; }

/* ---------- Film hero: full-bleed video, headline over it ----------
   One deliberately dark chapter at the top of a light site. The type inverts
   to cream here and nowhere else, which is why every rule below is scoped to
   .hero--film rather than changing a token. */
.hero--film {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* 68vh, down from 78 on 2026-08-28. The fork it was sized around is gone;
     what has to clear the fold now is the service tabs, because the question
     they answer — "is my situation here at all?" — is the one a visitor has
     before they will read anything else.

     The header offset is NOT added here any more. .body--film pays it once now
     that the masthead is opaque; paying it a second time here made the hero a
     full header taller than it measured. */
  min-height: 68vh;
  min-height: 68svh;
  padding-top: clamp(2rem, 6vh, 5rem);
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  background: var(--navy);
  overflow: hidden;
}
/* The film used to run underneath the masthead, which is why this cancelled
   the fixed-header offset. Now that the bar is opaque the video starts below
   it, so the offset comes back — otherwise the top of the footage sits behind
   a solid navy strip and is simply never seen. */
.body--film { padding-top: var(--header-h); }

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A directional scrim, not a flat wash. Weighted to the left where the text
   sits, so the headline clears 4.5:1 while the right half of the frame — the
   skyline and the bridge — stays legible as an image. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--navy) 88%, transparent) 0%,
      color-mix(in srgb, var(--navy) 72%, transparent) 38%,
      color-mix(in srgb, var(--navy) 28%, transparent) 72%,
      color-mix(in srgb, var(--navy) 12%, transparent) 100%),
    linear-gradient(to top,
      color-mix(in srgb, var(--navy) 55%, transparent) 0%,
      transparent 45%);
}

/* The film hero emits `.eyebrow--onfilm` but this rule was never written, so it
   fell through to `.eyebrow`'s muted grey and sat at 3.36:1 on the dark scrim —
   the employer hero's kicker was effectively invisible. */
.eyebrow--onfilm { color: color-mix(in srgb, var(--void) 82%, transparent); }
.eyebrow--onfilm::before { background: var(--action); }

.hero--film .hero__text { max-width: 46rem; }
.hero--film .hero__title { color: var(--void); font-size: clamp(2rem, 5.6vw, 5rem); max-width: 16ch; }
/* Token, not a hand-picked hex. #7FB2E8 was one of three different blues
   doing this job across the file; --blue-on-dark is the single value tuned for
   type on navy. */
.hero--film .hero__title em { color: var(--blue-on-dark); }
.hero--film .hero__sub {
  color: color-mix(in srgb, var(--void) 88%, transparent);
  max-width: 52ch;
}

/* Nothing here any more. The film pages once needed their own copy of every
   masthead type rule, because their bar was dark before the first scroll while
   every other page's was white. The bar is dark everywhere now, so those rules
   ARE the general case and live with .masthead above — one place to change,
   and no pair to keep in step. */

@media (max-width: 900px) {
  /* Steps down again on a phone: the desktop value is now 68, so leaving
     this at 68 stopped being a reduction. A phone screen is taller than it is
     wide, so the same fraction is a great deal more video. */
  .hero--film { min-height: 56vh; min-height: 56svh; }
  .hero--film .hero__title { max-width: 18ch; }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(2.1rem, 7.4vw, 7rem);
  color: var(--ink);
  max-width: 18ch;
  margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
  text-wrap: balance;
}

/**
 * Plain lines now.
 *
 * These used to be a kinetic tracking-in: each line started at opacity 0 with
 * 0.44em letter-spacing and settled once main.js added `.is-ready`. main.js
 * went with the scrub, which would have left the headline permanently
 * invisible — and it was already invisible with JavaScript disabled, on the
 * one element of the page that most needed to render.
 *
 * The mask that made the effect possible (overflow: hidden plus padding to
 * clear Turkish İ/Ü and German umlauts above the caps and Ş/Ç cedillas below)
 * goes with it. Without a mask there is nothing to crop.
 */
.hero__title .line { display: block; letter-spacing: -0.025em; }

.hero__title em {
  font-style: normal;
  color: var(--blue);
}

.hero__sub {
  max-width: 54ch;
  margin: 1.6rem 0 2.2rem;
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  color: var(--body);
}

/* Sits under the button pair, not beside it: the three things it answers
   ("how long, what do I upload, am I committing to anything") are the reasons
   someone does NOT press the button, so they belong where the hand already is. */
.hero__micro {
  margin: 0.9rem 0 0;
  font-size: 0.83rem;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--void) 72%, transparent);
}
.hero:not(.hero--film) .hero__micro { color: var(--mute); }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  color: var(--void);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.btn::after {
  /* Unicode escape, not a literal arrow. A literal U+2192 renders as mojibake
     ("Æ'") whenever the stylesheet is served without an explicit charset,
     because its UTF-8 bytes get decoded as single-byte Latin-1. An escape is
     plain ASCII and survives any decoding. */
  content: '\2192';
  font-family: var(--font-body);
  transition: transform 0.4s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── Two button roles, and only two ─────────────────────────────
   Rebuilt 2026-08-27. Four colours used to mean "button" — navy, emerald,
   gold and amber — which meant a visitor had to learn the palette before
   knowing what to press. Now: filled blue is the action, outlined navy is
   everything else, and colour is free to mean something again.

   White label on --blue measures 4.62:1 — AA for normal text, which the
   navy-on-amber it replaces was only clearing because the label was large. */
/* The one action colour. Navy on yellow, never white on yellow. */
.btn--primary {
  background: var(--cta);
  color: var(--navy);
  box-shadow: var(--cta-glow);
}
.btn--primary:hover {
  background: var(--cta-lo);
  box-shadow: var(--cta-glow-hi);
}
/* On a navy bed the glow has nothing to separate itself from, and the button
   is already the brightest thing there. Drop it rather than double it. */
.hero .btn--primary,
.cta .btn--primary,
[class*="--dark"] .btn--primary { box-shadow: none; }

.btn--outline {
  background: transparent;
  border-color: color-mix(in srgb, var(--navy) 35%, transparent);
  color: var(--navy);
}
.btn--outline:hover { border-color: var(--navy); background: color-mix(in srgb, var(--navy) 6%, transparent); }

/* Aliases. Kept so a rule or template missed in the sweep renders a real
   button rather than an unstyled one; both resolve to the two roles above. */
.btn--emerald,
.btn--gold { background: var(--blue); color: #fff; }
.btn--emerald:hover,
.btn--gold:hover { background: color-mix(in srgb, var(--blue) 86%, black); }

/* Film-hero pair, for a dark ground: one solid cream, one outlined. Navy on
   navy would have vanished into the scrim. These live here rather than beside
   the hero rules because `.btn` sets `background: transparent` and, at equal
   specificity, whichever comes last wins. */
/* Alias. The masthead CTA is a primary action like any other, so it carries
   the same yellow; this rule only exists for markup still asking for the old
   class. */
.btn--action { background: var(--cta); color: var(--navy); }
.btn--action:hover { background: var(--cta-lo); }

/* The primary CTA on the film hero — the same yellow as every other primary
   action, so the first button a visitor sees teaches them what a button is
   here. Navy on --cta measures 12.4:1, and unlike the white-on-blue it
   replaced it does not depend on the scrim behind it staying dark.

   The glow is the button's own hue rather than a grey drop shadow: on a moving
   dark image a neutral shadow is invisible, while a coloured one reads as the
   button being lit rather than stuck on. Carried harder here than elsewhere,
   because the footage behind it is busy. */
.btn--film {
  background: var(--cta);
  color: var(--navy);
  box-shadow: 0 6px 22px -6px color-mix(in srgb, var(--cta) 55%, transparent);
}
.btn--film:hover {
  background: var(--cta-lo);
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--cta) 70%, transparent);
}
.btn--film:hover {
  background: color-mix(in srgb, var(--blue) 88%, white);
  box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--blue) 52%, transparent);
}
.btn--filmghost {
  background: color-mix(in srgb, var(--navy) 35%, transparent);
  border-color: color-mix(in srgb, var(--void) 60%, transparent);
  color: var(--void);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--filmghost:hover { border-color: var(--void); background: color-mix(in srgb, var(--navy) 60%, transparent); }

.btn--ghost {
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--ink); }

/* ============================================================
   JOURNEY — the three stages, formerly the scroll-scrubbed film
   ============================================================
   292 WebP frames on a canvas became an ordered list. The copy is unchanged;
   the log lines that used to be revealed one at a time by the scrub now render
   together, which is more useful than the reveal ever was. */
.journey { padding-block: var(--band); }

/* Centred, and capped at a width a person reads rather than scans. The heading
   used to carry the ruled top border every other section heading has; here the
   numbered rail underneath already says "a sequence starts", and two devices
   saying it at once is one too many. */
.journey__head {
  max-width: 56rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.journey__head .section-lead { margin-inline: auto; }

/* ── The numbered rail ───────────────────────────────────────
   Three dots on the same three-column grid as the cards, so each number sits
   over the card it belongs to. The line is drawn between the OUTER dots only —
   from one sixth to five sixths — because a line running the full width would
   promise a fourth step off each edge. */
.jrail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.jrail__line {
  position: absolute;
  left: 16.6667%;
  width: 66.6667%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: color-mix(in srgb, #fff 20%, transparent);
}
/* A ring in the ground colour, so the line appears to pass behind the dot
   rather than to stop short of it. */
.jrail__dot {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 0 0 5px var(--navy);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
}


/* A drop from each dot to the card it numbers.
   Without it the rail is three dots and a line hovering 36px above three
   cards, with nothing saying which number belongs to which — it reads as
   decoration laid over the section rather than as the spine the cards hang
   from. The drop is the cheapest possible statement of that relationship.

   It fades out downward instead of butting into the card's top edge: a line
   that stops dead draws a hard terminal the eye reads as a mistake, where a
   fade reads as the thread passing under the card.

   Hidden with the rail below 900px, where the cards stack and carry their own
   numbers. */
.jrail__dot::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: clamp(1.5rem, 3vw, 2.25rem);
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, #fff 20%, transparent),
    transparent 85%
  );
}

/* ── The three cards ─────────────────────────────────────── */

.journey__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
/* No border-top accent here any more: the CARD ELEVATION block near the foot of
   this file sets `border: var(--edge)` on .jstep among others, and being later
   in the file at equal specificity it had been quietly flattening the accent
   edge for as long as both rules existed. The step's colour is on the icon
   tile and the markers now, where it is actually visible. */
.jstep {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--panel);
  border-radius: var(--r-lg);
  /* The section sets a light body colour for its navy ground; the card is
     white, so it has to take the colour back or every heading inside it is
     near-white on white. */
  color: var(--body);
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}

/* Lift and grow, as in the reference.
   :focus-within as well as :hover — the cards hold no links today, but a card
   that only responds to a mouse is a card that stops existing for anyone
   moving through the page by keyboard the moment one does.
   The glow is mixed from the step's own accent rather than from the navy
   ground: a navy shadow on a navy section is invisible, so the card would have
   grown with nothing underneath it to say it had left the surface.
   z-index because the scaled card overlaps its neighbours' edges. */
.jstep:hover,
.jstep:focus-within {
  transform: translateY(-4px) scale(1.04);
  z-index: 1;
  border-color: var(--cta);
  box-shadow:
    0 20px 44px -20px color-mix(in srgb, var(--cta) 70%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cta) 45%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .jstep { transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
  .jstep:hover,
  .jstep:focus-within { transform: none; }
}

/* The step's own number, for the width at which the rail above is gone. */
.jstep__n {
  display: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}

/* One accent for all three, and it is the page's: --cta as a tint, and the
   glyph in --amber-ink because yellow as TYPE measures 1.5:1 on white and would
   have vanished inside a tile that looked perfectly correct. The same pair the
   founder band uses for its points, so the two sections read as one system
   rather than as two people's work. */
.jstep__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--cta) 16%, transparent);
  color: var(--amber-ink);
}
.jstep__ico svg { width: 22px; height: 22px; }

.jstep__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.jstep__body {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--body);
  margin-bottom: 1.1rem;
}
.jstep__logs {
  list-style: none;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--navy) 10%, transparent);
  display: grid;
  gap: 0.7rem;
}
/* Set in the body face, not the mono one. These are sentences about what gets
   done, and at 0.68rem monospace they read as log output — which is exactly
   the machine voice the copy pass was for. */
.jstep__logs li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--mute);
}
/* A ring with a dot inside it, rather than a bare dot: the ring gives the
   marker a size the eye can find down the left edge of a list of three. Same
   yellow pair as the tile above. */
.jstep__logs li::before {
  content: '';
  margin-top: 0.28em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cta) 22%, transparent);
  box-shadow: inset 0 0 0 5px var(--panel), inset 0 0 0 8px var(--amber-ink);
}


/* Three cards side by side, each carrying a rule above its list — so the eye
   reads three parallel lines and notices immediately when one is not.
   "Wir bauen den passenden Weg" wraps to two lines where the other two
   titles do not, which pushed card 3's body and its divider down by exactly
   one line: 142 / 142 / 178.

   Subgrid rather than a min-height on the title. A reserved two-line title
   guesses at the longest string and is wrong the moment a translation is
   longer; subgrid measures. The four rows are icon, title, body, list, and
   every card spans all four, so each track is as tall as the tallest card
   needs and the three cards line up by construction.

   Scoped above 900px because below it the cards stack into one column, where
   sharing row tracks would put all three in the same three rows. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .journey__list {
      grid-template-rows: auto auto auto 1fr;
      row-gap: 0;
    }
    .jstep {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
    }
    /* The children keep their own margins — those are the spacing, and with
       row-gap 0 the tracks size to them. The tile must not stretch to the
       column: it is a 48px square, not a banner. */
    .jstep__ico { justify-self: start; }
  }
}

@media (max-width: 900px) {
  .journey__list { grid-template-columns: 1fr; }
  /* A horizontal rail stops describing a vertical stack, so it goes and each
     card carries its own number. */
  .jrail { display: none; }
  .jstep__n { display: grid; margin-bottom: 0.9rem; }
  .jstep__ico { position: absolute; top: clamp(1.4rem, 3vw, 2rem); right: clamp(1.4rem, 3vw, 2rem); margin: 0; }
}

/* ============================================================
   FOUNDER — the team page
   ============================================================
   One person, and what they are answerable for. Portrait is a monogram until a
   real photograph exists; a stock face would be worse than none on a page whose
   entire argument is that you are dealing with a specific human. */
.founder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--navy) 10%, transparent);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-lg);
  max-width: 76ch;
}
.founder__portrait {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--gold) 12%, var(--void));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--amber-ink);
}
.founder__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
}
.founder__role { margin: 0.3rem 0 1.1rem; color: var(--amber-ink); font-size: 0.62rem; }
.founder__text p {
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--body);
}
.founder__text p:last-child { margin-bottom: 0; }
@media (max-width: 620px) { .founder { grid-template-columns: 1fr; } }

/* ============================================================
   STATS
   ============================================================ */
.stats {
  padding: clamp(4rem, 12vh, 9rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--mute) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--mute) 14%, transparent);
  background: var(--void);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.5rem;
}

.stat { border-top: 1px solid color-mix(in srgb, var(--mute) 20%, transparent); padding-top: 1.4rem; }

.stat__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
}
.stat__suffix { color: var(--stat-accent, var(--emerald)); }
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 0.9rem;
}

/* ============================================================
   DUAL CTA BAND — two genuinely separate paths
   ============================================================ */
.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 62vh;
  background: var(--void);
  position: relative;
  z-index: 10;
}

.path {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  transition: background 0.6s var(--ease-out);
}
.path + .path { border-left: 1px solid color-mix(in srgb, var(--mute) 16%, transparent); }

.path::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--path-accent);
  transform: scaleX(0.12);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.path:hover::before { transform: scaleX(1); }

/* Accent coding follows the film, not the other way round: the HUD lerps
   emerald -> gold across sourcing -> placement, so emerald belongs to the
   candidate side and gold to the employer side. These two were previously
   swapped, which quietly contradicted the one piece of colour semantics the
   design system actually carries. */
.path--employers { --path-accent: var(--gold); }
.path--candidates { --path-accent: var(--emerald); }

.path:hover {
  background: color-mix(in srgb, var(--path-accent) 7%, var(--void));
}

.path__audience {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--path-accent);
}
.path__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.0;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  margin: 1.1rem 0 1rem;
}
.path__body {
  color: var(--body);
  max-width: 38ch;
  font-size: 0.98rem;
}

/* The fork directly under the hero is an orientation device, not a closing
   call, so it is shorter and carries a rule above it. The closing instance at
   the foot of the page keeps the original full height. */
.paths:not(.paths--closing) {
  min-height: 0;
  border-top: 1px solid color-mix(in srgb, var(--mute) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--mute) 16%, transparent);
}
.paths:not(.paths--closing) .path { padding: clamp(2rem, 4vw, 3.2rem); }
.paths:not(.paths--closing) .path__title { font-size: clamp(1.4rem, 2.4vw, 2rem); }

@media (max-width: 860px) {
  .paths { grid-template-columns: 1fr; }
  .path + .path { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--mute) 16%, transparent); }
}

@media (max-width: 860px) {
  .team__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER — clip 4 closing loop
   ============================================================ */
.footer {
  position: relative;
  z-index: 10;
  background: var(--void);
  padding-top: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding: clamp(2.5rem, 6vh, 4rem) 0 1.5rem;
}
/* h2, not h4: these are the top-level headings inside the footer landmark,
   and following an h2 in main with an h4 skipped a level on all 60 pages.
   The size is unchanged — only the element is. */
.footer__col h4,
.footer__h {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 0.9rem;
  font-weight: 500;
}
.footer__col a, .footer__col p {
  display: block;
  color: var(--body);
  font-size: 0.9rem;
  margin-bottom: 0.45rem;
  transition: color 0.3s;
}
.footer__col a:hover { color: var(--emerald); }

.footer__legal {
  border-top: 1px solid color-mix(in srgb, var(--mute) 16%, transparent);
  padding: 1.5rem 0 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}
.footer__legal p {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--mute);
  max-width: 68ch;
  line-height: 1.7;
}

/* ============================================================
   RESPONSIVE — real breakpoints, lighter path on small screens
   ============================================================ */
@media (max-width: 860px) {
  .hud { right: auto; left: var(--gutter); bottom: 1.1rem; top: auto; transform: none; flex-direction: row; align-items: center; gap: 0.7rem; }
  .hud__label { display: none; }
  .hud__track { width: min(38vw, 180px); height: 2px; }
  .hud__fill { inset: 0 auto 0 0; width: calc(var(--hud-progress) * 100%); height: 100%; background: linear-gradient(to right, var(--emerald), var(--hud-accent)); }
  .hud__node { top: 50%; left: calc(var(--hud-progress) * 100%); }
  .hud__ticks { inset: -4px 0 auto 0; height: 10px; width: 100%; }
  .hud__tick { width: 1px; height: 10px; top: 0; }
  .hud__stage { font-size: 0.6rem; }

  .hero { align-items: flex-end; padding-bottom: 5.5rem; }
  .hero__ctas .btn { flex: 1 1 100%; justify-content: space-between; }
  .pillar { min-height: 88vh; }
  .pillar:nth-child(even) .pillar__inner { margin-left: 0; }
}

@media (max-width: 520px) {
  .hero__title { font-size: clamp(1.9rem, 10vw, 3rem); }
  .pillar__card { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* ============================================================
   REDUCED MOTION — static poster, no kinetic tracking-in
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__title .line > span {
    letter-spacing: -0.015em;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn:hover { transform: none; }
  .loader { display: none; }
}

/* ============================================================
   AUDIENCE DOORS — persistent fork, every route
   ============================================================
   Folded into the utility bar rather than given a third fixed row: a separate
   band would cost every page another ~40px of reading surface, and on a phone
   the hero needs that more than the fork does. --header-h is derived from
   --util-h, so the taller bar propagates without touching anything else. */
.util__inner { justify-content: space-between; }

.util__facts {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.doors {
  display: flex;
  align-items: stretch;
  height: var(--util-h);
  margin-left: calc(var(--gutter) * -0.35);
}

.door {
  display: inline-flex;
  align-items: center;
  padding-inline: clamp(0.6rem, 1.8vw, 1.05rem);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  /* On the navy strip. */
  color: color-mix(in srgb, var(--void) 72%, transparent);
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
              background 0.2s var(--ease-out);
}
.door::before {
  content: '';
  width: 6px; height: 6px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--door-accent);
  opacity: 0.5;
  transition: opacity 0.2s var(--ease-out);
}
/* Audience coding. The employer side keeps the action hue; the individual side
   takes the brand blue that already carries the hero's second line.

   It was --emerald until 2026-08-28, which is documented three hundred lines
   above as STATUS ONLY — a completed step, an approved document. Spending it
   on an audience label meant green meant two things on the same page. */
.door--gold { --door-accent: var(--gold); }
.door--emerald { --door-accent: var(--blue-on-dark); }

.door:hover,
.door[aria-current] {
  color: var(--void);
  border-bottom-color: var(--door-accent);
  background: color-mix(in srgb, var(--door-accent) 22%, transparent);
}
.door:hover::before,
.door[aria-current]::before { opacity: 1; }
.door:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* The client portal is an action, not a fact — it reads as a link. */
.util__item--portal {
  color: var(--void);
  border: 1px solid color-mix(in srgb, var(--void) 32%, transparent);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  transition: background-color 0.15s, border-color 0.15s;
}
.util__item--portal:hover {
  background: color-mix(in srgb, var(--void) 14%, transparent);
  border-color: color-mix(in srgb, var(--void) 55%, transparent);
}

/* The doors outrank the location chips when space runs out. */
@media (max-width: 680px) {
  /* The office and the phone number are reference material and can wait for a
     wider screen. The portal cannot: a signed-up client arriving on a phone —
     which is most of them — would otherwise have no way in at all. So the
     facts row collapses to that one item rather than disappearing. */
  .util__facts { gap: 0; }
  .util__facts > :not(.util__item--portal) { display: none; }
  .doors { margin-left: 0; }
}

/* ============================================================
   SHARED SECTION HEADING
   ============================================================ */
/* ---------- German compounds ----------
   "Fachkräfteeinwanderung" is one unbreakable 356px word in a 320px column at
   375px, and it pushed the programme page 16px wide. The documents warn that
   German headlines run long; this is that, at the narrowest breakpoint.

   `hyphens: auto` does the real work — the shell sets lang on <html>, so the
   browser hyphenates German with its own dictionary. `overflow-wrap` is the
   safety net for anything with no hyphenation point at all (a URL, a Turkish
   compound where no dictionary ships). */
.hero__title,
.page__title,
.section-title,
.qcard__q,
.jstep__title,
.hcard__title,
.scard__title,
.hubgroup__title,
.founder__name,
.qopt__label,
.qopt__title {
  hyphens: auto;
  overflow-wrap: break-word;
}

.section-title {
  /* Negative tracking on display sizes, scaled to the size.

     With one family doing every job, size and weight alone leave the large
     headings looking loose: a face set for body copy carries body spacing up
     into 38 and 80 pixels, where it reads as gaps rather than as a word. The
     teardowns are unanimous that this is where display type is made — Stripe
     tracks display tiers to -1.4px, Vercel to -2.4px at 48px, and both scale
     the amount with the size rather than setting one value everywhere.

     Applied here on the shared heading class, which had none at all, while
     the hero and the assessment band already carried their own. */
  letter-spacing: -0.02em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.08;
  margin-bottom: 1rem;
  text-wrap: balance;
}

/* Carries the eyebrow's accent rule without the eyebrow.
   Sections that had a mono kicker AND a paragraph pretending to be a heading
   now have one real h2 doing both jobs — fewer elements, correct outline. */
.section-title--ruled { padding-top: 1.25rem; position: relative; }
.section-title--ruled::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 2px;
  background: var(--hud-accent);
}

/* ============================================================
   TRUST BAR — only devices we actually control
   ============================================================
   No accreditation badge, no partner logo strip, no German address, because
   there is none of any of those. Deliberately unaccented: none of these four
   facts belongs to one side of the business, so spending emerald or gold here
   would be decoration. */
/* Three cards, not four labels. The question carries display weight because it
   is the thing the reader recognises — they arrived holding it. */
/* The ground splits and the cards sit across the seam.
   ------------------------------------------------------------
   Chosen 2026-08-10 over eight alternatives, four of which added
   texture — a grid, a bloom, a duotone photograph, grain.

   None of those was the fix. Measured across the homepage, every
   section after the hero sat between 22px and 42px of heading on
   a single ground: a 1.9x type ratio, which is what "flat"
   actually was. Texture decorates that; it does not solve it.

   This does two things instead. The hard navy edge gives the page
   its second dark beat, so the eye finally has a rhythm to hold
   on to. And the cards straddle the boundary, which means the
   depth comes from geometry rather than from an effect — they
   read as objects in front of the band rather than panels
   printed on it. Cards stay white for exactly that reason, and
   the shadow is what sells the position.

   58% puts the seam below the cards' midpoint, so they overhang
   into the light rather than balancing on it. */
/* The seam, and why it is a variable rather than a number.
   ------------------------------------------------------------
   The 58% stop was tuned for ONE row of cards: it puts the join below the
   cards' midpoint so they overhang into the light. The moment the grid wrapped
   to two rows the same 58% landed in the middle of the second row, and half
   the cards were cut across by the colour change — which reads as a broken
   page, not as a design.

   A percentage cannot know how many rows there are, so the row count is made
   explicit below instead of left to auto-fit, and each layout sets its own
   stop. One row: 58%. Two rows: navy has to clear the whole first row before
   overhanging the second, which lands near 79%. One column: the overhang stops
   meaning anything when a single card is the row, so the band is simply navy
   all the way and the cards sit on it. */
.answers {
  --seam: 58%;
  background: linear-gradient(180deg, var(--navy) 0 var(--seam), var(--void) var(--seam) 100%);
}
.answers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: var(--band);
}
.qcard {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--navy) 10%, transparent);
  border-radius: var(--r-lg);
  /* The deeper shadow is NOT set here. The shared card block further down
     this file sets `border` and `box-shadow` at the same specificity and
     later, so anything declared here loses. It lives in `.answers .qcard`
     below it instead. */
}

/* The mark.
   A 40px tile rather than a bare glyph: at 20px an outline icon floating in
   white reads as a stray mark, and the tile gives it a shape the eye files
   as "this card's subject". Amber because it is the yellow family AS TYPE
   (--cta measures 1.5:1 and cannot carry a stroke), and because the eyebrows
   on this page already use it, so it is not a new colour. */
.qcard__ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  margin-bottom: 1rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--amber-ink) 11%, transparent);
  color: var(--amber-ink);
}
.qcard__ico svg { width: 20px; height: 20px; display: block; }

.qcard__q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.2;
  margin-bottom: 0.55rem;
  text-wrap: balance;
}
.qcard__a {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--body);
}

/* The pin that puts this at the foot of the card is NOT here. pages.css sets
   the `margin` shorthand on .qcard__more at the same specificity and loads
   later, so a `margin-top: auto` written here loses — measured 9.6px. It is
   one declaration in pages.css instead of two rules fighting. */
.qcard__more { padding-top: 0.4rem; }

/* Row count, made explicit — see the seam note above. Written as two rising
   floors rather than one band: a compound `(min-width) and (max-width)` query
   reads as a min-width declaration to check-fit, which then sees a 720px floor
   in a 360px viewport. Cascading floors say the same thing and stay legible to
   the tool that has to police them. */
@media (max-width: 719px) {
  .answers__grid { grid-template-columns: 1fr; }
  .answers { --seam: 100%; }
}
@media (min-width: 720px) {
  .answers__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .answers { --seam: 79%; }
}
@media (min-width: 1100px) {
  .answers__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .answers { --seam: 58%; }
}

/* ============================================================
   FEE MODEL — two lines, because it genuinely is two lines
   ============================================================
   Here the accent is doing real work: gold marks the employer-commissioned
   model, emerald the individually-commissioned one, so the colour answers
   "which of these am I" before the text does. */
.fees { padding-block: var(--band); }
.fees__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.fee {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-top: 3px solid var(--fee-accent);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2.1rem);
}
.fee--gold { --fee-accent: var(--gold); }
.fee--emerald { --fee-accent: var(--emerald); }
.fee__tag { color: var(--fee-accent); font-size: 0.64rem; }
.fee__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  margin: 0.7rem 0 0.8rem;
}
.fee__body {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--body);
}
.fees__never {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-left: 1.15rem;
  border-left: 2px solid var(--mute);
}
.fees__never-title { color: var(--ink); margin-bottom: 0.6rem; }
.fees__never-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--body);
  font-size: 0.9rem;
}
.fees__never-list li { margin-bottom: 0.35rem; }
.fees__never-list li::marker { color: var(--mute); }
@media (max-width: 780px) { .fees__grid { grid-template-columns: 1fr; } }

/* ============================================================
   PARTNER SCHOOL — a differentiator held to one side
   ============================================================
   Placed low and framed as an option, never a prerequisite: not every role
   requires German, and a language-led frame is simply wrong for a visitor
   whose job has no language requirement. Co-branded in the partner's orange. */
.school { padding-block: var(--band-sm); }
.school__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--panel);
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: var(--r-xl);
}
.school__mark { width: 72px; height: 72px; object-fit: contain; }
.school__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  margin-bottom: 0.7rem;
}
.school__body {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 62ch;
}
.school__cta { white-space: nowrap; }
@media (max-width: 860px) {
  .school__inner { grid-template-columns: 1fr; justify-items: start; }
  /* nowrap keeps the button on one line beside the text at desktop, but at
     360px the German label ("Mehr zur Sprachvorbereitung") is wider than the
     card and pushed the page 6px sideways. Once stacked there is nothing to
     sit beside, so it may wrap. */
  .school__cta { white-space: normal; text-align: left; }
}

/* ============================================================
   SELF-QUALIFICATION — the candidate-side magnet
   ============================================================
   Native <details> sharing a `name`, so exclusivity comes from the browser and
   the whole device works with JavaScript disabled. It collects nothing: it
   converts by letting a visitor pass a check rather than ask for help, and a
   contact field in front of the answer would collapse that. */
.qualify { padding-block: var(--band); }
.qualify__sentence {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
/* The blank is the interactive promise of the whole section — it should read as
   the thing you are about to fill in, not as disabled grey. */
.qualify__blank {
  color: var(--amber-ink);
  border-bottom: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  padding-bottom: 0.1em;
}
.qualify__list {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.qopt {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.qopt[open] { border-color: color-mix(in srgb, var(--emerald) 40%, transparent); }
.qopt__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.95rem, 2vw, 1.25rem) clamp(1.1rem, 2.5vw, 1.6rem);
  cursor: pointer;
  list-style: none;
}
.qopt__summary::-webkit-details-marker { display: none; }
.qopt__summary:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.qopt__summary:focus-visible { outline: 2px solid var(--emerald); outline-offset: -2px; }
.qopt__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
}
.qopt__chev {
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--mute);
  border-bottom: 2px solid var(--mute);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.qopt[open] .qopt__chev { transform: rotate(-135deg); border-color: var(--emerald); }

/* Tinted, so the route cards inside it can be the lightest thing here.
   It used to be white with GREY cards on top — the card darker than its
   own container, which is the exact inversion the surface stack exists to
   prevent, and it is why this panel read as muddy. */
.qopt__panel {
  padding: 0 clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.2rem, 2.5vw, 1.7rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  background: var(--tint);
}
.qopt__eyebrow { color: var(--emerald); margin: 1.1rem 0 0.5rem; }
.qopt__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  margin-bottom: 0.5rem;
}
.qopt__lead {
  color: var(--body);
  font-size: 0.93rem;
  max-width: var(--measure);
  margin-bottom: 1.2rem;
}

.qroutes { display: grid; gap: 0.75rem; }
.qroute {
  background: var(--panel);
  border: var(--edge);
  border-left: 3px solid var(--q-accent);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 2.2vw, 1.35rem);
  box-shadow: var(--lift);
}
/* The accent answers the fee question at a glance, which is the one thing this
   audience is most afraid of and the reason the module exists. */
.qroute--employer { --q-accent: var(--gold); }
.qroute--you { --q-accent: var(--emerald); }
.qroute--either { --q-accent: var(--mute); }

.qroute__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
}
.qroute__title a:hover { color: var(--q-accent); }
.qroute__when {
  font-size: 0.88rem;
  color: var(--body);
  margin-bottom: 0.85rem;
}
.qroute__dl { margin: 0 0 0.9rem; display: grid; gap: 0.55rem; }
/* 0.72rem and --body, not 0.6rem and --mute. At 9.6px, uppercase, mono and
   at the lowest text contrast on the page, these labels were the single
   hardest thing here to read — small AND faint compounds. */
.qroute__dl dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 0.25rem;
}
.qroute__dl dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--body);
}
.qroute__pays { color: var(--q-accent) !important; }
.qroute__link {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--q-accent);
}
.qroute__link::after { content: '\00a0\2192'; }
.qroute__link:hover { text-decoration: underline; }

.qualify__caveat {
  font-size: 0.85rem;
  color: var(--mute);
  max-width: var(--measure);
  border-left: 2px solid color-mix(in srgb, var(--mute) 35%, transparent);
  padding-left: 1rem;
}

/* ============================================================
   HUB TEASER
   ============================================================ */
.hubteaser { padding-block: var(--band); }
.hubteaser__more { margin-top: 1.75rem; }

/* ============================================================
   CLOSE — a named person, not a form
   ============================================================
   In this category trust attaches to a human rather than to a company name, so
   the last thing on the page is the person who actually answers. The portrait
   is a monogram until real photographs exist; a stock face would be worse than
   none. The telephone row appears by itself once BRAND.phone is real. */
.close {
  padding-block: var(--band);
  border-top: 1px solid color-mix(in srgb, var(--mute) 16%, transparent);
}
.close__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.close__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.close__body {
  max-width: var(--measure);
  color: var(--body);
  margin-bottom: 1.75rem;
}
.close__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.close__person {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}
.close__portrait {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 12%, var(--void));
  border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--blue);
}
/* The photograph, when there is one. The file is already cropped square to
   head-and-shoulders, so cover has nothing to crop and object-position has
   nothing to correct — both are here only to guarantee the circle stays a
   circle if a differently-shaped file is ever dropped in. */
.close__portrait--photo {
  object-fit: cover;
  object-position: center;
  background: var(--tint);
  border-color: color-mix(in srgb, var(--navy) 14%, transparent);
}
.close__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.close__role { margin-top: 0.2rem; font-size: 0.6rem; }
.close__mail {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mute);
  word-break: break-all;
}
.close__mail:hover { color: var(--ink); }
@media (max-width: 860px) { .close__inner { grid-template-columns: 1fr; } }

/* Utility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   CARD ELEVATION
   ============================================================
   Applied in one place rather than rule by rule. The surface stack changed
   underneath every card at once (tinted ground, white card), and the shadow is
   what turns "slightly different fill" into "raised object" — measured, the two
   grounds are only about 1.1:1 apart, so fill alone was never going to do it.

   Kept to the card families that sit directly on the page ground. Nested
   surfaces (route cards inside an open accordion, the facts rail inside an
   article) deliberately stay flat, or the page turns into stacked drop shadows. */
.qcard,
.jstep,
.scard,
.hcard,
.rcard,
.qopt,
.estat,
.ereality,
.fee,
.founder,
.close__person,
.school__inner {
  border: var(--edge);
  box-shadow: var(--lift);
}

/* Trap 1, for the fourth time — and this one had already cost something.
   ------------------------------------------------------------
   The block directly above sets `border` and `box-shadow` on `.qcard`
   among others. Both are shorthands at the same specificity as `.qcard`
   and later in the file, so they win. The 3px blue top rule written in
   `.qcard` had therefore never rendered: it measured 1px of navy at 13%.

   These two are scoped to `.answers .qcard` — 0,2,0 against 0,1,0 — so
   they win on specificity rather than on position, and cannot be undone
   by the next rule someone appends to the end of this file.

   The shadow is deeper and darker than --lift because the card hangs
   over navy for most of its height, where the shared shadow vanishes.
   It is what sells the card as an object in front of the band.

   The 3px blue top rule that used to be here is gone. Twenty lines below,
   `.qcard { border-top: var(--edge); }` was written to remove it, with the
   right reason — every card had the same rule, so it marked nothing — but at
   0,1,0 against this rule's 0,2,0 it never took effect, and the bar had been
   on the page ever since. The icons carry the marking now, and they differ
   per card, which is what the removed rule was reaching for. */
.answers .qcard {
  box-shadow: 0 18px 44px -18px rgb(0 0 0 / 0.55);
}

/* The accent bar stays where it carries meaning — the journey stages, the fee
   models, the owner-coded stat cards — and comes off the question cards, where
   every card had the same blue rule and so it marked nothing. This is now the
   only rule saying so; the 0,2,0 one that used to defeat it is gone. */
.qcard { border-top: var(--edge); }

.scard:hover,
.hcard:hover,
.rcard:hover { box-shadow: var(--lift-hi); }

/* Raised above its own ground rather than tinted: the mega panel sits over
   page content, so it needs the strongest separation on the site. */
.mega { box-shadow: 0 28px 60px -28px color-mix(in srgb, var(--navy) 50%, transparent); }

/* ============================================================
   WHATSAPP — floating contact button
   ============================================================
   Rendered only when BRAND.whatsapp holds a real number, so this block is
   inert until one arrives. 56px square: the 44px minimum tap target with
   enough margin that a thumb does not have to aim.

   Bottom-right, above the safe-area inset so it clears the iOS home bar. */
.wa {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.6rem);
  bottom: calc(clamp(0.9rem, 3vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #0B1B2E;
  box-shadow: 0 8px 24px -8px rgba(11, 27, 46, 0.45);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(11, 27, 46, 0.55);
}
.wa:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Dark navy on WhatsApp green measures 8.9:1 — the mark stays legible, and
   the brand green is recognisable enough that nobody has to read a label. */

.footer__address { margin: 0.35rem 0 0; font-size: 0.86rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .wa, .wa:hover { transition: none; transform: none; }
}

/* ============================================================
   MOBILE ACTION BAR
   ============================================================
   Phone only, and only once the hero has scrolled past — before that the
   hero's own CTA is on screen and this would cover content to repeat
   something already visible.

   Rendered with the `hidden` attribute, so with JavaScript off it never
   appears at all. Everything it holds is reachable from the page itself. */
.mbar { display: none; }

@media (max-width: 720px) {
  .mbar {
    display: flex;
    gap: 0.5rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    /* No plate. It was a near-white bar with a rule along its top, which put a
       second horizontal edge across the bottom of every page and made the
       WhatsApp bubble — which floats with no plate at all — look like it
       belonged to something else. The two controls float, and their own
       shadows are what lift them off whatever is scrolling underneath. */
    background: transparent;
    border-top: 0;
    pointer-events: none;

    /* Off-screen until site.js adds .is-up. Translate rather than display,
       so the transition has something to animate. */
    transform: translateY(110%);
    transition: transform 0.28s var(--ease-out);
  }
  .mbar.is-up { transform: none; }

  /* `hidden` is what keeps it out of the accessibility tree before the script
     runs; the attribute is removed at the same moment .is-up is added. */
  .mbar[hidden] { display: none; }

  .mbar__cta {
    flex: 1;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    border-radius: var(--r-lg);
    /* Yellow, like every other primary action on the site. It was blue, from
       before yellow became the action colour, so the one button a phone user
       sees at all times was the only one not in the action colour.
       Navy on it, never white — the bed measures 12.4:1 for navy. */
    background: var(--cta);
    color: var(--navy);
    box-shadow: var(--cta-glow-hi);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    pointer-events: auto;
  }
  .mbar__cta:active { background: var(--cta-lo); }

  .mbar__wa {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--r-lg);
    background: #25D366;
    color: #0B1B2E;
    box-shadow: 0 8px 22px -8px rgba(37, 211, 102, 0.75);
    pointer-events: auto;
  }

  .mbar__cta:focus-visible,
  .mbar__wa:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

  /* The floating WhatsApp button would sit on top of the bar. With the bar up
     it steps aside, because the bar already carries the same action. */
  .mbar.is-up ~ .wa,
  body:has(.mbar.is-up) .wa { display: none; }

  /* The bar covers the last strip of the page, so the footer gets clearance
     equal to its height. */
  body:has(.mbar.is-up) .footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .mbar { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   The employer door in the utility bar — added 2026-08-28
   ══════════════════════════════════════════════════════════════ */


/* The panel drops onto the light page below a dark bar, so it takes the page's
   surface rather than the bar's — it belongs to what you are about to do, not
   to the strip you opened it from. */
/* Fixed, not absolute.
   .util__inner carries overflow-x:auto so the utility row can scroll on a
   narrow screen — and a container that is not overflow:visible on ONE axis
   computes to auto on BOTH, which clipped this panel to the height of a 28px
   bar. Fixed positioning leaves that clipping context entirely. It is anchored
   to the utility bar's own right edge, which is the page gutter or the
   max-width inner's edge, whichever is further in. */
.udrop {
  position: fixed;
  width: 240px;
  top: calc(var(--util-h) + 6px);
  right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  /* Above the masthead (70), which is fixed and would otherwise cover a panel
     that drops out of the bar sitting above it. */
  z-index: 80;

  /* Closed by default in CSS rather than with a hidden attribute, so the panel
     opens on hover and on keyboard focus with no JavaScript at all. The script
     adds click-toggling on top; it is not what makes the door work. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out), visibility 0.16s;
  padding: 18px 16px 16px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--navy) 8%, transparent);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--navy) 16%, transparent);
  display: grid;
  gap: 4px;
  text-align: left;
}
/* Three ways in, and the third is the one that matters on a phone: hover for
   a mouse, focus-within for a keyboard, and the class the script sets on tap. */
.mact-door:hover .udrop,
.mact-door:focus-within .udrop,
.mact-door.is-open .udrop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .udrop { transition: none; transform: none; }
}

.udrop__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 8%, transparent);
}
/* A tinted tile rather than a bare glyph: it says which of the two doors you
   opened without repeating the label underneath it. */
.udrop__tile {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-lg);
  background: var(--tint);
  display: grid;
  place-items: center;
  color: var(--navy);
}
.udrop__tile .ico { width: 22px; height: 22px; }
.udrop__head {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 2px;
}
.udrop__note {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mute);
  margin: 0;
}
.udrop__item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--body);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.udrop__item:hover { background: var(--tint); color: var(--ink); }
/* "Üye Ol" is the action of the two; it carries a hairline of the action
   colour rather than the full yellow bed, which at this size would shout
   louder than the masthead CTA it sits beside. */
.udrop__item--go {
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--cta);
}
.udrop__item--go:hover { background: color-mix(in srgb, var(--cta) 16%, transparent); }

/* The candidate door's second item is the pre-assessment form — the one thing
   the whole site is built to reach. So it is the masthead CTA, not a hairline
   quoting it. The note above --go argued a full yellow bed here would shout
   louder than the CTA beside it; that held while the two were competing for
   the same glance, and the client's call is that this IS that CTA, arriving
   one layer down where the reader has just said which door they are at.
   Client instruction, 2026-09-01.

   The employer door keeps the hairline on purpose: its action is "talk to
   us", which is a different weight of ask than a form somebody completes on
   the spot. */
.udrop__item--cta {
  margin-top: 5px;
  text-align: center;
  background: var(--cta);
  color: var(--navy);
  border-radius: var(--r-lg);
  box-shadow: var(--cta-glow);
}
.udrop__item--cta:hover {
  background: var(--cta-lo);
  color: var(--navy);
  box-shadow: var(--cta-glow-hi);
}

/* On a phone the utility bar is already down to one item. The door drops to
   full width under the bar so it is not a 230px card hanging off the edge. */
@media (max-width: 560px) {
  .udrop { right: auto; left: 0; min-width: min(280px, calc(100vw - 32px)); }
}

/* ══════════════════════════════════════════════════════════════
   The masthead action row — 2026-08-28

   Three controls, one size. They were previously split across two bars at
   two scales, which is why the group read as accidental: a 0.6rem mono pill
   sitting beside a full button says the two are unrelated, and here they are
   the opposite — they are the three ways into the same building.
   ══════════════════════════════════════════════════════════════ */

/* Sizing measured off the competitor's own masthead on 2026-08-28, because
   "make them smaller" is a judgement nobody wins by guessing at: 33px tall
   sign-ins, a 31px CTA, 5px between them. Only the geometry was taken — not
   their colour system (four button roles where we deliberately keep two) and
   not their CTA's infinite pulse animation, which has no reduced-motion
   fallback and would run forever on a page nobody asked to animate. */
.mactions { display: flex; align-items: center; gap: 5px; }

/* One box model for all three. Height is fixed rather than derived from
   padding so the outlined pair and the filled CTA cannot drift apart when
   their labels differ in length or language. */
.mact {
  height: 33px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.2s, color 0.15s;
}
.mact .ico { width: 14px; height: 14px; flex: none; }

/* The two sign-ins. Outlined, quiet, and identical to each other — a returning
   visitor is looking for their own door, not for the loudest thing on screen. */
.mact--quiet {
  color: var(--navy);
  border-color: color-mix(in srgb, var(--navy) 22%, transparent);
  background: color-mix(in srgb, var(--navy) 3%, transparent);
}
.mact--quiet:hover {
  border-color: color-mix(in srgb, var(--navy) 45%, transparent);
  background: color-mix(in srgb, var(--navy) 7%, transparent);
}
.mact--quiet .ico { color: var(--mute); }

/* The employer door reads as the employer's: its icon carries the action hue
   so the two quiet pills are distinguishable at a glance without either of
   them competing with the CTA. */
.mact-door { position: relative; display: inline-flex; }
/* The employer door is marked by its EDGE, not by its icon.
   Colouring the icon put a second saturated thing in a row that already has
   one, and the eye had to decide which of the two was the action. Moving the
   mark to the border keeps the door distinguishable while leaving exactly one
   filled yellow object in the masthead — the button that starts something.

   On a light ground the yellow is deepened toward the amber text token: a
   #FFC933 hairline on white is barely a line. On the navy bar it stays the
   bright hue, where it has the ground to carry it. */
.mact-door:not(.mact-door--cand) .mact--drop {
  border-color: color-mix(in srgb, var(--cta) 62%, var(--amber-ink));
  background: color-mix(in srgb, var(--cta) 13%, transparent);
}
.mact-door:not(.mact-door--cand) .mact--drop:hover {
  border-color: var(--amber-ink);
  background: color-mix(in srgb, var(--cta) 22%, transparent);
}
.mact__caret { transition: transform 0.18s var(--ease-out); opacity: 0.65; }
.mact-door:hover .mact__caret,
.mact-door.is-open .mact__caret { opacity: 1; }
.mact-door.is-open .mact__caret { transform: rotate(180deg); }
.mact-door:not(.mact-door--cand).is-open .mact--drop {
  border-color: var(--amber-ink);
  background: color-mix(in srgb, var(--cta) 22%, transparent);
}

/* The one action. Navy on yellow, never white on yellow, plus the glow that
   separates it from a light page. */
.mact--cta {
  height: 31px;
  padding: 0 13px;
  gap: 5px;
  border-radius: var(--r-lg);
  font-size: 12px;
  font-weight: 700;
  background: var(--cta);
  color: var(--navy);
  box-shadow: var(--cta-glow);
}
.mact--cta .ico { width: 15px; height: 15px; }
.mact--cta:hover { background: var(--cta-lo); box-shadow: var(--cta-glow-hi); }
.mact--cta .ico { color: var(--navy); }

/* The panel now hangs off the masthead rather than the utility strip, so it
   anchors to its own trigger again. */
.mact-door .udrop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
}
/* The candidate door is not at the end of the row, so its panel centres on its
   own trigger instead of hugging an edge it does not touch. */
.mact-door--cand .udrop { right: auto; left: 50%; transform: translateX(-50%) translateY(-6px); }
.mact-door--cand:hover .udrop,
.mact-door--cand:focus-within .udrop,
.mact-door--cand.is-open .udrop { transform: translateX(-50%); }

/* Below the burger breakpoint the drawer carries these, so the row collapses
   to the CTA alone — a returning user reaches the portal from the menu. */
@media (max-width: 1024px) {
  .mactions { display: none; }
}
@media (max-width: 560px) {
  .mact--cta { padding: 0 13px; font-size: 0.8rem; }
}

/* The action row on the bar. Light type, because the bar is dark in every
   state — without it the outlined pills keep their navy label and vanish into
   the bar while their icons stay visible, which reads as an icon with a hole
   where its label was. */
.masthead .mact--quiet {
  color: var(--void);
  border-color: color-mix(in srgb, var(--void) 28%, transparent);
  background: color-mix(in srgb, var(--void) 6%, transparent);
}
.masthead .mact--quiet:hover {
  border-color: color-mix(in srgb, var(--void) 55%, transparent);
  background: color-mix(in srgb, var(--void) 12%, transparent);
}
.masthead .mact--quiet .ico {
  color: color-mix(in srgb, var(--void) 72%, transparent);
}
.masthead .mact-door:not(.mact-door--cand) .mact--drop {
  border-color: color-mix(in srgb, var(--cta) 55%, transparent);
  background: color-mix(in srgb, var(--cta) 10%, transparent);
}
.masthead .mact-door:not(.mact-door--cand) .mact--drop:hover,
.masthead .mact-door:not(.mact-door--cand).is-open .mact--drop {
  border-color: color-mix(in srgb, var(--cta) 85%, transparent);
  background: color-mix(in srgb, var(--cta) 18%, transparent);
}


/* German runs long — "Kostenlose Vorprüfung" beside "Arbeitgeber-Login" is a
   good deal more row than their Turkish equivalents. The competitor hit the
   same wall and solved it the same way; measured off their :lang(de) rules. */
html:lang(de) .mact { padding: 0 11px; font-size: 11.5px; gap: 5px; }
html:lang(de) .mact--cta { padding: 0 12px; font-size: 11.5px; gap: 5px; }

/* ── The language switch, now in the utility strip ─────────── */

/* It was built for the light masthead and moved onto the navy strip on
   2026-08-28, where its ink-mixed border and --mute label were very nearly
   invisible. It also has to fit a 28px bar, so the 34px pill shrinks. */
.util .langswitch {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--void) 24%, transparent);
  font-size: 0.6rem;
}
.util .langswitch__current,
.util .langswitch__other {
  min-width: 30px;
  min-height: 20px;
  padding: 0 0.4rem;
}
.util .langswitch__current { background: var(--blue-on-dark); color: var(--navy); }
.util .langswitch__other { color: color-mix(in srgb, var(--void) 62%, transparent); }
.util .langswitch__other:hover {
  color: var(--void);
  background: color-mix(in srgb, var(--void) 14%, transparent);
}
.util .langswitch__other:focus-visible { outline: 2px solid var(--void); outline-offset: -2px; }

/* The doors sit left, the switch right, with the empty facts row between them
   collapsed — it holds nothing now. */
.util__facts { margin-left: auto; }