/* =========================================================================
   Jobair CZ landing page
   Design tokens taken from live job-air.nl CSS (2026-08-13).
   Section skeleton follows the structure that works on runway.jobs.
   Font families are named so that ON job-air.nl the theme's own self-hosted
   Inter faces ("Inter-Black", "Inter-Regular") win, and standalone the
   Google Fonts copy of Inter fills in.
   ========================================================================= */
:root{
  --red:#ee1c25;
  --red-dark:#bf1e2e;
  --purple:#812a92;
  --purple-dark:#6f2d91;
  --ink:#282a2b;
  --ink-strong:#1c1c1c;
  --surface:#f5f4f4;
  --white:#fff;
  --grey-300:#c8c8c8;
  --grey-500:#9f9f9f;
  --grey-600:#767676;
  --card-radius:6px;
  --maxw:1140px;
  --gap:24px;
  --font-body:'Inter-Regular','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-med:'Inter-Medium','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-semi:'Inter-SemiBold','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-bold:'Inter-Bold','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-black:'Inter-Black','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

h1,h2,h3,h4{margin:0 0 .5em;font-family:var(--font-black);font-weight:900;line-height:1.1}
h2{font-size:clamp(26px,4.4vw,40px);text-transform:uppercase;color:#000;letter-spacing:-.01em}
h3{
  font-size:clamp(18px,2.2vw,21px);font-family:var(--font-bold);font-weight:700;
  text-transform:none;color:var(--ink-strong);text-wrap:balance;
}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,2vw,19px);color:var(--grey-600);max-width:62ch}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- buttons: square, exactly the site's own style ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-semi);font-weight:600;font-size:17px;
  padding:16px 28px;border:2px solid transparent;border-radius:0;
  cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;
  text-align:center;line-height:1.2;
}
.btn:hover{text-decoration:none}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn-purple{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn-purple:hover{background:var(--purple-dark);border-color:var(--purple-dark);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink-strong)}
.btn-lg{font-size:19px;padding:19px 34px}
.btn-block{width:100%}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid #ececec;
}
.site-header .inner{
  max-width:var(--maxw);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.site-header img{height:38px;width:auto}
.header-right{display:flex;align-items:center;gap:18px}
.header-tel{font-family:var(--font-semi);font-weight:600;color:var(--ink);white-space:nowrap}
.header-tel:hover{color:var(--red);text-decoration:none}
/* Language switch. Was a bordered <span> reading "CS" that looked exactly like
   a button and did nothing, which is why people tried to click it. Now two real
   states: the current language is inert text, the other is a link. */
.lang-switch{display:inline-flex;border:2px solid var(--ink-strong);flex:none}
.lang-switch span,.lang-switch a{
  font-family:var(--font-bold);font-weight:700;font-size:13px;letter-spacing:.06em;
  padding:3px 8px;text-decoration:none;line-height:1.5;
}
.lang-switch .on{background:var(--ink-strong);color:#fff}
.lang-switch a{color:var(--ink-strong)}
.lang-switch a:hover{background:rgba(28,28,28,.10);text-decoration:none}
.site-header .btn{padding:11px 20px;font-size:15px}
/* the switch stays at every width: most traffic is mobile, and a language
   control that only exists on desktop is not a working language control */
@media(max-width:720px){
  .header-tel{display:none}
  .site-header img{height:32px}
}

/* ---------- hero ---------- */
.hero{position:relative;background:#111;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.12) 35%,rgba(0,0,0,.55) 100%);
}
.hero-inner{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:72px 20px 56px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--red);color:#fff;
  font-family:var(--font-semi);font-weight:600;font-size:14px;
  letter-spacing:.02em;padding:8px 15px;margin-bottom:22px;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.hero h1{
  color:#fff;text-transform:uppercase;
  font-size:clamp(31px,6.1vw,56px);max-width:19ch;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 3px 22px rgba(0,0,0,.5);
}
.hero p.hero-sub{
  color:#fff;font-family:var(--font-med);font-weight:500;
  font-size:clamp(17px,2.2vw,21px);max-width:50ch;
  text-shadow:0 2px 12px rgba(0,0,0,.75);margin-bottom:30px;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:520px){
  .hero-cta .btn{width:100%}
  .hero-inner{padding:52px 20px 44px}
}

/* ---------- stat strip ---------- */
.stats{background:var(--ink-strong)}
.stats .grid{
  max-width:var(--maxw);margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:26px 18px;text-align:center;border-right:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;justify-content:flex-start;
}
.stat:last-child{border-right:0}
.stat .num{
  display:block;font-family:var(--font-black);font-weight:900;
  font-size:clamp(20px,2.7vw,29px);color:#fff;line-height:1.15;
  white-space:nowrap;
}
.stat .lbl{display:block;font-size:13.5px;color:#cfcfcf;margin-top:7px;line-height:1.35}
@media(max-width:860px){
  .stats .grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
}

/* ---------- generic section ---------- */
section{padding:clamp(48px,7vw,78px) 0}
.sec-white{background:#fff}
.sec-surface{background:var(--surface)}
.sec-head{margin-bottom:clamp(28px,4vw,44px)}

/* ---------- client logos ---------- */
.clients{background:#fff;padding:34px 0;border-bottom:1px solid #ececec}
.clients .kicker{
  text-align:center;font-family:var(--font-semi);font-weight:600;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-500);margin-bottom:22px;
}
.client-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(24px,5vw,54px);
}
/* shown in colour, same as the live site */
.client-row img{height:32px;width:auto;max-width:132px;object-fit:contain}
.client-row img.logo-wide{max-width:170px}
@media(max-width:520px){.client-row img{height:25px;max-width:104px}}

/* ---------- cards ---------- */
.cards{display:grid;gap:var(--gap);grid-template-columns:repeat(4,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{
  background:#fff;border:1px solid #e6e5e5;border-radius:var(--card-radius);
  padding:28px 24px;
}
.sec-white .card{background:var(--surface);border-color:#e6e5e5}
.card .ico{
  width:46px;height:46px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(238,28,37,.09);color:var(--red);border-radius:50%;
}
.card.alt .ico{background:rgba(129,42,146,.10);color:var(--purple)}
.card .ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card p{margin:0;font-size:15.5px;color:var(--grey-600)}

/* ---------- role cards ---------- */
.roles{display:grid;gap:var(--gap);grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.roles{grid-template-columns:1fr}}
.role{
  background:#fff;border:1px solid #e6e5e5;border-radius:var(--card-radius);
  padding:26px 24px;display:flex;flex-direction:column;
}
.role .role-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.role .ico{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  background:var(--ink-strong);color:#fff;border-radius:var(--card-radius);
}
.role .ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.role h3{margin:0}
.role p{font-size:15.5px;color:var(--grey-600);margin:0 0 18px}
.role .role-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}

/* ---------- role cards: photography instead of icons (2026-08-18) ----------
   Darryl's note off worktravel.jobs: photos rather than little icons, and he
   liked their faded-photo backgrounds. Taken here as a photo band carrying the
   role title, with the body text staying on white underneath so the salary chip
   never has to fight a photograph for contrast. Their pastel wash is replaced
   with our own purple and red, alternating per card, which is what keeps it
   reading as Jobair rather than as them. */
.role{padding:0;overflow:hidden}
.role-photo{position:relative;height:236px;overflow:hidden;background:var(--ink-strong)}
.role-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.88) contrast(1.03);
}
/* No object-position anywhere on purpose. All four role photos are PRE-CROPPED
   to 1400x792 from the campaign's 9:16 portrait frames, so each file already
   carries its own framing and the default centre crop is correct.

   This replaced a set of per-card focal-point percentages. Two reasons it is
   better: a percentage that frames correctly on a 535px-wide card drifts on a
   333px one, and shipping full 791x1400 portraits into a ~236px band sent about
   230K of pixels per card that were never displayed. Cropping the files cut the
   four from 746K to 516K.

   If a photo ever changes: RE-CROP THE FILE to 1400x792, do not reintroduce a
   focal percentage. The crops used are recorded in the git log. */

/* Two layers, doing two different jobs. The brand wash is kept light, because
   at the strength it started on it flattened the photograph into pink. The
   bottom scrim is separate and stronger, and exists only so the title stays
   readable. z-index matters: without it the ::after paints over the h3, since a
   generated box is painted after its element's children. */
.role-photo::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,20,20,0) 38%,rgba(20,20,20,.52) 74%,rgba(20,20,20,.88) 100%),
    linear-gradient(118deg,rgba(129,42,146,.42) 0%,rgba(129,42,146,.14) 52%,rgba(238,28,37,.16) 100%);
}
.role.tint-red .role-photo::after{
  background:
    linear-gradient(180deg,rgba(20,20,20,0) 38%,rgba(20,20,20,.52) 74%,rgba(20,20,20,.88) 100%),
    linear-gradient(118deg,rgba(238,28,37,.38) 0%,rgba(238,28,37,.13) 54%,rgba(129,42,146,.18) 100%);
}
.role-photo h3{
  position:absolute;z-index:2;left:22px;right:22px;bottom:16px;margin:0;color:#fff;
  font-size:clamp(19px,2.1vw,23px);text-shadow:0 2px 16px rgba(0,0,0,.60);
}
.role-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.role-body p{font-size:15.5px;color:var(--grey-600);margin:0 0 18px}

/* ---------- track record numbers (2026-08-18) ----------
   The worktravel.jobs numbers idea, which Darryl wanted, without their bubbles
   or pastel gradient. Square ink rules, Inter Black numerals alternating in our
   purple and red, label underneath. */
.record{background:var(--surface)}
.record .grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,3vw,40px);margin-top:38px;
}
@media(max-width:860px){.record .grid{grid-template-columns:repeat(2,1fr);row-gap:34px}}
@media(max-width:430px){.record .grid{grid-template-columns:1fr}}
.rec{border-top:3px solid var(--ink-strong);padding-top:16px}
.rec .n{
  display:block;font-family:var(--font-black);font-weight:900;line-height:1;
  font-size:clamp(32px,4.4vw,52px);letter-spacing:-.022em;color:var(--purple);
}
.rec:nth-child(2n) .n{color:var(--red)}
.rec .t{display:block;margin-top:12px;font-size:15px;line-height:1.45;max-width:24ch}
/* Draft marker. Deliberately loud: three of these four numbers are unverified
   placeholders and must not reach a candidate. Deleting data-draft on the
   section hides every one of them at once, so do that only once the real
   figures are in. */
.record[data-draft] .rec .n{opacity:.55}
.rec .todo{display:none}
.record[data-draft] .rec .todo{
  display:inline-block;margin-top:10px;font-family:var(--font-semi);font-weight:600;
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;padding:4px 9px;
  background:#fff6d6;border:1px solid #e8d48a;color:#6b5310;
}
.record[data-draft] .rec.confirmed .n{opacity:1}
.chip{
  display:inline-block;font-family:var(--font-semi);font-weight:600;font-size:13px;
  padding:6px 12px;border-radius:100px;background:var(--surface);
  color:var(--ink);border:1px solid #e2e1e1;
}
.chip-red{background:rgba(238,28,37,.08);color:var(--red-dark);border-color:rgba(238,28,37,.22)}
.note-inline{
  margin-top:24px;padding:18px 20px;background:var(--surface);
  border-left:4px solid var(--purple);font-size:15.5px;
}
.sec-surface .note-inline{background:#fff}
.note-inline strong{font-family:var(--font-bold);font-weight:700}

/* ---------- split (housing) ---------- */
.split{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1.05fr 1fr;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
/* Square on purpose. The apron frame's four subjects, the aircraft with its
   tail, the jet bridge, the tug and the two walking crew, sit inside a bounding
   box that is very nearly square, so any 3:2 or 16:9 letterbox loses either the
   tail fin or the walkers' feet. The box matches the crop instead of fighting
   it, which is also why object-position is no longer needed. */
.split img{
  border-radius:var(--card-radius);width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;
}
/* stays square on phones too: a 4:3 box would crop the square back down and
   lose the walkers' feet, which is the whole reason for the square crop */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:0 0 14px 36px;font-size:16.5px}
.ticks li::before{
  content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;
  background:var(--red);
}
.ticks li::after{
  content:"";position:absolute;left:6.5px;top:9px;width:9px;height:5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}

/* ---------- requirements ---------- */
.req-box{
  background:var(--ink-strong);color:#fff;border-radius:var(--card-radius);
  padding:clamp(28px,4vw,44px);
}
.req-box h2{color:#fff}
.req-box .lead{color:#c9c9c9}
.req-grid{display:grid;gap:var(--gap);grid-template-columns:1fr 1fr;margin-top:8px}
@media(max-width:760px){.req-grid{grid-template-columns:1fr}}
.req-list{list-style:none;margin:0;padding:0}
.req-list li{
  position:relative;padding:13px 0 13px 34px;
  border-bottom:1px solid rgba(255,255,255,.13);font-size:16.5px;
}
.req-list li:last-child{border-bottom:0}
.req-list li::before{
  content:"";position:absolute;left:0;top:19px;width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.16);
}
.req-list li::after{
  content:"";position:absolute;left:5px;top:24.5px;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}
.req-list small{display:block;color:#a5a5a5;font-size:13.5px;margin-top:3px}
.req-why{
  background:rgba(255,255,255,.06);border-radius:var(--card-radius);
  padding:24px;font-size:15.5px;color:#dcdcdc;align-self:start;
}
.req-why h3{color:#fff;font-size:17px}
.req-why p:last-child{margin-bottom:0}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;padding:0 0 26px 60px}
.timeline li:last-child{padding-bottom:0}
.timeline .step-n{
  position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  background:var(--red);color:#fff;display:grid;place-items:center;
  font-family:var(--font-black);font-weight:900;font-size:16px;
}
.timeline li:nth-child(even) .step-n{background:var(--purple)}
.timeline h3{margin:8px 0 5px;font-size:18px}
.timeline p{margin:0;font-size:15.5px;color:var(--grey-600)}
.timeline-2col{columns:2;column-gap:56px}
@media(max-width:860px){
  /* single column: the connector line reads correctly, so draw it */
  .timeline-2col{columns:1}
  .timeline::before{
    content:"";position:absolute;left:19px;top:14px;bottom:26px;width:2px;background:#e2e1e1;
  }
  .timeline .step-n{z-index:1}
}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto}
.faq details{
  background:#fff;border:1px solid #e6e5e5;border-radius:var(--card-radius);
  margin-bottom:12px;
}
.sec-white .faq details{background:var(--surface)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 56px 19px 22px;position:relative;
  font-family:var(--font-semi);font-weight:600;font-size:17px;color:var(--ink-strong);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:24px;top:26px;width:11px;height:11px;
  border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
  transform:rotate(45deg);transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:29px}
.faq .faq-body{padding:0 22px 20px;font-size:16px;color:var(--grey-600)}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- form ---------- */
.form-shell{
  background:#fff;border-radius:var(--card-radius);border:1px solid #e6e5e5;
  padding:clamp(24px,4vw,44px);max-width:760px;margin:0 auto;
}
.form-row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{
  display:block;font-family:var(--font-semi);font-weight:600;font-size:14.5px;
  margin-bottom:6px;color:var(--ink-strong);
}
.field .req-star{color:var(--red)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select{
  width:100%;padding:14px 15px;font-family:var(--font-body);font-size:16px;
  color:var(--ink);background:#fff;border:1.5px solid var(--grey-300);border-radius:0;
}
.field input:focus,.field select:focus,.field input[type=file]:focus{
  outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(129,42,146,.13);
}
.field input[type=file]{
  width:100%;padding:12px;font-size:14.5px;background:var(--surface);
  border:1.5px dashed var(--grey-300);border-radius:0;
}
.field .hint{font-size:13px;color:var(--grey-600);margin-top:5px}
fieldset.gates{
  border:1.5px solid #e6e5e5;border-radius:var(--card-radius);
  padding:20px 22px;margin:4px 0 22px;background:var(--surface);
}
fieldset.gates legend{
  font-family:var(--font-bold);font-weight:700;font-size:15px;padding:0 8px;
  color:var(--ink-strong);
}
.gates .gate-intro{font-size:14.5px;color:var(--grey-600);margin:0 0 14px}
.check{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;font-size:15.5px}
.check:last-child{margin-bottom:0}
.check input[type=checkbox]{
  flex:none;width:21px;height:21px;margin:1px 0 0;accent-color:var(--red);cursor:pointer;
}
.check label{cursor:pointer;line-height:1.45}
.check .sub{display:block;font-size:13px;color:var(--grey-600);margin-top:2px}
.form-alert{
  display:none;padding:15px 18px;margin-bottom:20px;font-size:15px;
  border-left:4px solid var(--red);background:rgba(238,28,37,.07);
}
.form-alert.show{display:block}
.form-note{font-size:13px;color:var(--grey-600);margin:16px 0 0;text-align:center}
.preview-banner{
  display:none;background:#fff6d6;border:1px solid #e8d48a;border-radius:var(--card-radius);
  padding:14px 18px;font-size:14.5px;margin-bottom:22px;color:#6b5310;
}
.preview-banner.show{display:block}
/* honeypot: off-screen rather than display:none, which some bots skip */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
button[disabled]{opacity:.6;cursor:progress}

/* ---------- cookie / pixel consent ---------- */
/* The Meta pixel is a tracking cookie, so on our own domain it may only fire
   after consent. job-air.nl has its own banner; this page does not sit on
   job-air.nl, so it carries its own. */
.consent{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--ink-strong);color:#e9e9e9;padding:16px 20px;
  box-shadow:0 -6px 24px rgba(0,0,0,.22);font-size:14.5px;line-height:1.5;
}
.consent.show{display:block}
.consent .inner{
  max-width:var(--maxw);margin:0 auto;display:flex;gap:18px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.consent p{margin:0;max-width:70ch}
.consent a{color:#fff;text-decoration:underline}
.consent .acts{display:flex;gap:10px;flex:none}
.consent button{
  font-family:var(--font-semi);font-size:14px;padding:10px 18px;
  border:1.5px solid #fff;background:transparent;color:#fff;cursor:pointer;
}
.consent button.primary{background:var(--red);border-color:var(--red)}
.consent button.primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.consent button:hover{background:#fff;color:var(--ink-strong)}
.consent button.primary:hover{color:#fff}
@media(max-width:760px){
  .consent .inner{flex-direction:column;align-items:flex-start}
  .consent .acts{width:100%}
  .consent button{flex:1}
}
/* Two stacked bars eat a third of a phone screen, so the sticky CTA stands
   down while the consent banner is up. It comes back the moment the visitor
   answers, and the hero's own buttons are still there in the meantime. */
body.consent-open .mobile-cta{display:none}

/* ---------- final CTA ---------- */
.cta-band{
  background:linear-gradient(100deg,var(--purple) 0%,var(--purple-dark) 45%,var(--red) 130%);
  color:#fff;text-align:center;
}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.92);max-width:56ch;margin-left:auto;margin-right:auto}

/* ---------- testimonials (2026-08-19) ----------
   Real quotes from named Czech colleagues, gathered by the Czech reviewer and
   approved by them for use. Attribution is name plus role, which is what makes
   a testimonial checkable.

   NO PHOTOGRAPHS. The five asked not to have their faces shown, so each card
   carries a monogram instead. A photorealistic portrait next to a real person's
   name would tell the reader it is them, which is the one thing they declined.
   See the note in the section markup before changing this. */
.quotes{background:#fff}
/* Swipeable, on Lili's note to match the carousel on job-air.nl.

   Built on CSS scroll-snap rather than a carousel library: real momentum
   swiping on touch for free, keyboard scrolling for free, works with no JS at
   all, and nothing to keep patched. The arrows and dots below are progressive
   enhancement layered on top by app.js. */
.quote-carousel{position:relative;margin-top:38px}
.quote-track{
  display:flex;gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;   /* no scroll-behavior here: app.js asks for smooth per call */
  scrollbar-width:none;-ms-overflow-style:none;
  padding:2px 2px 6px;margin:-2px -2px -6px;   /* room for focus rings */
}
.quote-track::-webkit-scrollbar{display:none}
.quote-track > .quote{
  scroll-snap-align:start;
  flex:0 0 calc((100% - 2 * var(--gap)) / 3);
}
@media(max-width:1000px){
  .quote-track > .quote{flex-basis:calc((100% - var(--gap)) / 2)}
}
@media(max-width:660px){
  .quote-track > .quote{flex-basis:86%}
}

/* Arrows sit outside the content column, so they never cover a card. Hidden
   where there is no room for them and swiping is the natural gesture anyway. */
.q-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;display:grid;place-items:center;
  background:#fff;border:1px solid #dcdbdb;border-radius:50%;cursor:pointer;
  color:var(--ink-strong);transition:background .15s,border-color .15s,opacity .15s;
}
.q-arrow:hover{background:var(--ink-strong);border-color:var(--ink-strong);color:#fff}
.q-arrow:disabled{opacity:.3;cursor:default}
.q-arrow:disabled:hover{background:#fff;border-color:#dcdbdb;color:var(--ink-strong)}
.q-arrow.prev{left:-58px}
.q-arrow.next{right:-58px}
.q-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1280px){.q-arrow{display:none}}

.q-dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
.q-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:#cfcfcf;border:0;transition:background .15s,transform .15s;
}
.q-dots button[aria-current="true"]{background:var(--red);transform:scale(1.35)}
.q-dots button:focus-visible,.q-arrow:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* No JS: the track still scrolls and swipes, so hide the empty controls. */
.q-dots:empty{display:none}
.quote{
  /* margin:0 is load-bearing: these cards are <figure>, and the browser default
     of margin:1em 40px added 80px between every card. That widened the track by
     ~480px, threw the scroll-snap positions off so the carousel rested at 42px
     instead of 0, and made the arrow step arithmetic disagree with reality. */
  margin:0;
  background:var(--surface);border:1px solid #e6e5e5;border-radius:var(--card-radius);
  padding:26px 24px;display:flex;flex-direction:column;
}
.quote blockquote{
  margin:0 0 22px;font-size:15.5px;line-height:1.6;color:var(--ink);
}
.quote blockquote::before{
  content:"";display:block;width:34px;height:3px;background:var(--red);margin-bottom:16px;
}
.quote figcaption{margin-top:auto;display:flex;align-items:center;gap:13px}
.avatar{
  flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;
  background:var(--surface);
}
/* .mono is the fallback if anyone later withdraws their photo: swap that one
   card's <img class="avatar"> back to a <span class="mono">XX</span> and it
   still looks deliberate rather than broken. */
.mono{
  flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-bold);font-weight:700;font-size:16px;letter-spacing:.02em;
  background:var(--purple);color:#fff;
}
.quote:nth-child(2n) .mono{background:var(--red)}
.quote:nth-child(3n) .mono{background:var(--ink-strong)}
.quote .who{display:block;font-family:var(--font-semi);font-weight:600;font-size:15.5px}
.quote .quote-role{display:block;font-size:13.5px;color:var(--grey-600);margin-top:2px}
/* NB: .role is already the job-role card class further up this file, which is
   why this one is .quote-role. Reusing .role here inherited a white card
   background and a 1px border onto the caption. */
.quotes .disclosure{
  margin:26px auto 0;max-width:70ch;text-align:center;font-size:13.5px;color:var(--grey-600);
}

/* ---------- footer ---------- */
.site-footer{background:var(--ink-strong);color:#b9b9b9;padding:44px 0 34px;font-size:14.5px}
.site-footer .cols{display:grid;gap:32px;grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:760px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-family:var(--font-bold);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.site-footer a{color:#d6d6d6}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
/* social icons: inline SVG so nothing loads from a third party, on a page whose
   only external script is consent-gated */
.social-head{
  font-family:var(--font-semi);font-weight:600;color:#fff;font-size:13px;
  text-transform:uppercase;letter-spacing:.05em;margin:22px 0 10px;
}
.social{display:flex;gap:10px}
.social a{
  width:38px;height:38px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(255,255,255,.26);border-radius:50%;
  color:#d6d6d6;transition:background .15s,color .15s,border-color .15s;
}
.social a:hover{background:#fff;border-color:#fff;color:var(--ink-strong)}
.social a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.social svg{width:18px;height:18px;fill:currentColor;display:block}

.site-footer .legal{
  margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:13px;color:#8d8d8d;
}
.footer-logo{background:#fff;display:inline-block;padding:10px 14px;border-radius:4px;margin-bottom:16px}
.footer-logo img{height:34px}

/* sticky mobile CTA */
.mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 14px;background:rgba(255,255,255,.97);border-top:1px solid #e2e1e1;
}
@media(max-width:640px){.mobile-cta{display:block}body{padding-bottom:74px}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}