/* ==========================================================================
   ARYOS GROUP — stylesheet
   Mobile-first. Breakpoints: 560px (large phone) · 768px (tablet) · 1024px (desktop)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Webfonts — self-hosted, subset
   Two files, same origin, 69 KB total. Loading these from Google cost 259 KB
   plus handshakes to two more origins, which on a phone over mobile data is
   the most expensive thing on the page. See media/fonts/README.txt for how to
   regenerate them if the copy gains new characters.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("media/fonts/inter-var-subset.woff2") format("woff2-variations"),
       url("media/fonts/inter-var-subset.woff2") format("woff2");
  font-weight: 400 600;          /* one variable file covers the whole range */
  font-style: normal;
  font-display: swap;            /* copy is readable immediately in fallback */
}

/* --------------------------------------------------------------------------
   1. Design tokens — official airport / travel
   Cool white and blue-grey surfaces, a clean sans for display (airport
   signage style), deep aviation blue for structure and a bright cyan accent.
   Hierarchy comes from type size and hairline rules, not from boxes,
   gradients or glows.
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — cool white and pale blue-grey, like an airport concourse */
  --paper:      #FFFFFF;
  --surface:    #F1F5FA;
  --surface-2:  #E4EBF4;
  --surface-3:  #CDD9E7;

  /* Text — deep navy-black ink, never pure #000 */
  --ink:        #0B1B33;
  --ink-70:     #33435E;
  --ink-50:     #5F7087;
  --on-dark:    #F4F8FC;
  --on-dark-70: #A9BBD1;

  /* Primary — official aviation blue scale for structure and brand */
  --blue:       #1663B0;
  --blue-700:   #0D4B8F;
  --blue-900:   #07294F;
  --navy:       #0A2A4F;
  --blue-300:   #8EC3EF;
  --blue-050:   #EAF3FC;
  --blue-line:  #C6DCF4;

  /* Accent — bright travel cyan, clear and confident */
  --cyan:       #0EA5C9;
  --cyan-dim:   #0A7EA6;
  --cyan-soft:  #CCEDF7;
  --teal:       #0C86A8;
  --teal-deep:  #0A5E7A;
  --cyan-glow:  rgba(14, 165, 201, 0.10);

  /* Sky accent — cyan carries the airport identity: kickers, index
     numerals, key figures and rules. A decoration, never a text voice. */
  --gold:       #0EA5C9;
  --gold-deep:  #0A7EA6;
  --gold-soft:  #CCEDF7;
  --gold-line:  rgba(14, 165, 201, 0.35);

  /* Lines */
  --line:       #D9E2EC;
  --line-soft:  #E8EEF5;
  --line-dark:  rgba(255, 255, 255, 0.14);

  /* Status (visa) */
  --st-review-bg:   #FBF3E2;  --st-review-fg:   #7A5410;  --st-review-line: #E7D3A8;
  --st-ok-bg:       #E6F1EA;  --st-ok-fg:       #1B5E3A;  --st-ok-line:     #BEDCC9;
  --st-action-bg:   #FBEBE6;  --st-action-fg:   #8A3418;  --st-action-line: #EFC9BB;
  --st-issued-bg:   #E0F7FA;  --st-issued-fg:   #00616D;  --st-issued-line: #9CF0FF;

  /* Type — a clean signage sans for everything, airport style. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-label: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.3125rem;
  --fs-h3:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-h2:   clamp(1.75rem, 1.35rem + 1.9vw, 2.5rem);
  --fs-h1:   clamp(2.375rem, 1.5rem + 4.2vw, 4rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3.5rem;
  --sp-10: 4.5rem;

  /* Shape + depth — soft radii and quiet elevation, controlled, never loud */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 9999px;
  --shadow-1: none;
  --shadow-2: 0 1px 2px rgba(12, 22, 38, 0.05), 0 16px 40px -18px rgba(12, 22, 38, 0.16);
  --shadow-3: 0 2px 4px rgba(12, 22, 38, 0.04), 0 30px 60px -24px rgba(12, 22, 38, 0.26);

  /* Movement materials */
  --grad-primary: linear-gradient(135deg, #0D4B8F 0%, #1663B0 55%, #0EA5C9 130%);
  --grad-dark:    linear-gradient(135deg, #07294F 0%, #0A2A4F 60%, #0A5E7A 130%);
  --grad-gold:    linear-gradient(120deg, #7FD8F2, #0EA5C9);
  --glass:        rgba(255, 255, 255, 0.72);
  --glass-line:   rgba(255, 255, 255, 0.55);
  --ring:         rgba(14, 165, 201, 0.20);

  /* Layout */
  --container: 1180px;
  --gutter: 1.25rem;
  --header-h: 60px;

  --t-fast: 140ms ease;
  --t-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Motion system */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);      /* decelerate — entrances */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* symmetrical — moves */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot — pops */
  --t-slow: 480ms var(--ease-out);
  --t-med:  320ms var(--ease-out);

  /* Elevation used by the interactive states */
  --shadow-3: 0 2px 5px rgba(12, 22, 38, 0.04), 0 30px 60px -24px rgba(12, 22, 38, 0.26);
  --shadow-blue: 0 14px 34px -12px rgba(12, 39, 66, 0.45);
}

@media (min-width: 768px) {
  :root { --header-h: 72px; --gutter: 2rem; }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.012em;
}

h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }

p { margin: 0; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-700); }

ul, ol { margin: 0; padding: 0; list-style: none; }

svg { width: 100%; height: 100%; }

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 0.1em 0.35em;
  white-space: nowrap;
}

::selection { background: var(--blue); color: #fff; }

/* Focus — visible on every interactive element */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}
.section--dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible { outline-color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 0.75rem 1rem; border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 720px; }

.section { padding-block: var(--sp-9); }
.section--tint { background: var(--surface); border-block: 1px solid var(--line-soft); }
.section--dark { background: var(--ink); color: var(--on-dark); }

@media (min-width: 768px) { .section { padding-block: var(--sp-10); } }
@media (min-width: 1024px) { .section { padding-block: 5.5rem; } }

.section__head { max-width: 62ch; margin-bottom: var(--sp-7); }
.section__title { font-size: var(--fs-h2); }
.section__lead {
  margin-top: var(--sp-3);
  color: var(--ink-70);
  font-size: var(--fs-md);
}

/* 404. The three routes out of a dead URL, side by side once there is room
   for them and stacked on a phone. */
.nf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.nf__actions .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .nf__actions .btn { flex: 0 0 auto; } }
.nf__home { margin-top: var(--sp-6); color: var(--ink-70); }
.section--dark .section__lead,
.section--dark p { color: var(--on-dark-70); }

.eyebrow {
  margin-bottom: var(--sp-3);
  color: var(--blue);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow--light { color: var(--blue-300); }

.note {
  margin-top: var(--sp-6);
  color: var(--ink-50);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   4. Image placeholders
   -------------------------------------------------------------------------- */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--surface) 0 10px,
      var(--surface-2) 10px 20px
    );
  border: 1px dashed var(--surface-3);
  border-radius: var(--r-md);
  text-align: center;
}
.ph__label {
  display: inline-block;
  max-width: 100%;
  padding: 0.4rem 0.7rem;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-70);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ph--job {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  border-inline: 0;
  border-top: 0;
  border-bottom: 1px dashed var(--surface-3);
}
.ph--employers { aspect-ratio: 4 / 3; background: #141C27; border-color: #2C3746; }
.ph--employers .ph__label {
  background: rgba(255, 255, 255, 0.06);
  border-color: #3A4655;
  color: var(--on-dark-70);
}

/* --------------------------------------------------------------------------
   5. Buttons + form controls
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 50px;
  padding: 0.8rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn small {
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0.82;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }

.btn--outline { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow-1); }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-70); }
.btn--ghost:hover { border-color: var(--ink-50); color: var(--ink); }

/* Secondary action sitting on the hero video — solid, so it stays readable
   whatever frame is behind it */
.btn--onDark { background: #fff; border-color: #fff; color: var(--blue); }
.btn--onDark:hover { background: var(--blue-050); border-color: var(--blue-050); color: var(--blue-700); }

.btn--sm { min-height: 40px; padding: 0.4rem 0.9rem; font-size: var(--fs-sm); }
.btn--lg { min-height: 62px; padding: 0.95rem 1.5rem; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }

.link-btn {
  display: inline-flex; align-items: center;
  min-height: 44px;
  background: none; border: 0; padding: 0.5rem 0;
  color: var(--blue); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--blue-700); }

/* Fields */
.field { display: block; }
.field + .field { margin-top: var(--sp-5); }

.field label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-50); opacity: 1; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-50); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(20, 80, 140, 0.18);
}

.field select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23414D5C' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 18px 18px;
}

.field__control { position: relative; }
.field__control .field__icon {
  position: absolute;
  left: 0.9rem; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  fill: none; stroke: var(--ink-50); stroke-width: 1.7;
  stroke-linecap: round; pointer-events: none;
}
.field__control input { padding-left: 2.7rem; }

.field__help { margin-top: var(--sp-2); color: var(--ink-50); font-size: var(--fs-sm); }
.field__error { margin-top: var(--sp-2); color: #B3261E; font-size: var(--fs-sm); font-weight: 600; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B3261E; }

.panel {
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
@media (min-width: 768px) { .panel { padding: var(--sp-7); } }

.form-status {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--st-ok-bg);
  border: 1px solid var(--st-ok-line);
  border-radius: var(--r-md);
  color: var(--st-ok-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--t-base), border-color var(--t-base);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 4px 16px rgba(16, 24, 34, 0.06); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
.logo__mark {
  width: 10px; height: 26px;
  background: var(--blue);
  border-radius: 1px;
  flex: none;
}
.logo__text { display: flex; flex-direction: column; line-height: 1; }

/* Morphing wordmark — the states sit on top of each other and are thresholded
   together, so ARYOS melts into GROUP and the two settle back into the lockup.
   script.js adds .morph; without it the plain lockup below still stands.
   The sizer is the lockup itself, which is what keeps the header from
   reflowing as the words swap. */
.morph {
  position: relative;
  display: inline-block;
  filter: url(#morph-threshold) blur(0.3px);
}
.morph__sizer { visibility: hidden; }
.morph__sizer,
.morph__text { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; }
.morph__text {
  position: absolute;
  inset: 0;
  justify-content: center;
  will-change: filter, opacity;
}
.morph-filters { position: fixed; width: 0; height: 0; pointer-events: none; }
.logo__name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.logo__sub {
  margin-top: 3px;
  color: var(--ink-50);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.26em;
}

/* Desktop nav */
.nav-desktop { display: none; }
.nav-desktop ul { display: flex; align-items: center; gap: var(--sp-6); }
.nav-desktop a {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  color: var(--ink-70);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-fast);
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.nav-desktop a:hover { color: var(--ink); }
.nav-desktop a:hover::after,
.nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }
.nav-desktop a[aria-current="page"] { color: var(--ink); }

.header__cta { display: none; }

/* Mobile toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.nav-toggle:hover { border-color: var(--ink-50); }
.nav-toggle__bars { display: block; width: 18px; }
.nav-toggle__bars i {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform var(--t-base), opacity var(--t-fast);
}
.nav-toggle__bars i + i { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile panel */
.mobile-nav {
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
  box-shadow: 0 12px 24px rgba(16, 24, 34, 0.08);
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));   /* vh ignores the address bar */
  overflow-y: auto;
  overscroll-behavior: contain;                 /* scrolling the menu must not scroll the page */
}
.mobile-nav[hidden] { display: none; }

.mobile-nav__list { padding: var(--sp-2) var(--gutter) 0; }
.mobile-nav__list li + li { border-top: 1px solid var(--line-soft); }
.mobile-nav__list a {
  display: block;
  padding: 1rem 0;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
}
.mobile-nav__list a:hover,
.mobile-nav__list a[aria-current="page"] { color: var(--blue); }

.mobile-nav__actions {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--gutter) var(--sp-6);
}

@media (min-width: 768px) {
  .nav-desktop { display: block; }
  .nav-toggle, .mobile-nav { display: none !important; }
  .logo__name { font-size: 1.1875rem; }
}
@media (min-width: 1024px) {
  .header__cta { display: inline-flex; margin-left: var(--sp-3); }
  .nav-desktop ul { gap: var(--sp-7); }
}

/* --------------------------------------------------------------------------
   7. Hero (background video)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;

  /* The hero pictures are 9:16, and on a phone the hero is shaped to match so
     as little of the photograph is cropped as possible.

     A floor, never a cap. `aspect-ratio: 9/16` was tried here and silently cut
     262px off the top of the hero — headline included — because the copy and
     the two buttons need more height than 9:16 gives at 390px wide. min-height
     lets the section grow instead of clipping. */
  min-height: 78vh;
  min-height: max(78dvh, calc(100vw * 16 / 9));
  padding-block: var(--sp-10) var(--sp-8);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--ink); }

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keeps white text legible over ANY frame of the footage — a flat wash for the
   bright frames, plus a stronger gradient where the copy actually sits. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;   /* above the video inside .hero__media, still behind .hero__inner */
  background:
    linear-gradient(to top, rgba(6, 14, 26, 0.90) 0%, rgba(6, 14, 26, 0.75) 40%, rgba(6, 14, 26, 0.42) 75%, rgba(6, 14, 26, 0.32) 100%),
    rgba(8, 16, 28, 0.28);
}

.hero__inner { position: relative; width: 100%; }

.hero__eyebrow {
  margin-bottom: var(--sp-3);
  color: var(--blue-300);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero__title {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero__text {
  max-width: 54ch;
  margin-top: var(--sp-4);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-md);
  line-height: 1.65;
}

.hero__actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-7); }

/* Pause control — required because the video plays on its own */
.hero__toggle {
  position: absolute;
  right: var(--gutter);
  top: var(--sp-5);          /* top-right: never collides with the CTAs */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 12px;
  background: rgba(8, 16, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r-md);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.hero__toggle:hover { background: rgba(8, 16, 28, 0.8); border-color: #fff; }
.hero__toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero__toggle .ic-play,
.hero__toggle[data-state="paused"] .ic-pause { display: none; }
.hero__toggle[data-state="paused"] .ic-play { display: block; fill: currentColor; stroke: none; }

@media (min-width: 560px) {
  .hero__actions { grid-auto-flow: column; justify-content: start; gap: var(--sp-4); }
}
@media (min-width: 768px) {
  /* Past phone width, 9:16 stops being a hero and becomes a tower — at 768px
     it is already 1365px tall, at 1270px it would be 2258px. The banner shape
     comes back here and the picture returns to being cropped by object-fit. */
  .hero { min-height: 82vh; min-height: 82dvh; padding-block: 6rem var(--sp-10); }
  .hero__title { max-width: 18ch; }
  .hero__text { font-size: var(--fs-lg); }
}
@media (min-width: 1024px) {
  .hero { min-height: min(88vh, 760px); min-height: min(88dvh, 760px); }
  .hero__inner { max-width: var(--container); }
  .hero__scrim {
    background:
      linear-gradient(to right, rgba(8, 16, 28, 0.92) 0%, rgba(8, 16, 28, 0.75) 48%, rgba(8, 16, 28, 0.3) 100%);
  }
}
/* --------------------------------------------------------------------------
   7b. Split-flap departure board — airport status panel in the hero
   -------------------------------------------------------------------------- */
.board {
  margin-top: var(--sp-7);
  max-width: 640px;
  background: rgba(7, 15, 28, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px -24px rgba(2, 8, 18, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.board__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: linear-gradient(90deg, rgba(14, 165, 201, 0.16), rgba(255, 255, 255, 0.04));
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.board__brand {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
}
.board__title {
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan);
}
[dir="rtl"] .board__title { margin-left: 0; margin-right: auto; }
.board__clock {
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

.board__rows { padding: var(--sp-2) 0; }

.board__row {
  display: grid;
  grid-template-columns: 4.75rem 1fr 7.75rem 8rem;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-5);
  border-left: 3px solid transparent;
  transition: background-color var(--t-base), border-color var(--t-base), opacity var(--t-base);
}
.board__row.is-idle { opacity: 0.62; }
.board__row.is-on {
  background: linear-gradient(90deg, rgba(14, 165, 201, 0.14), rgba(14, 165, 201, 0.02));
  border-left-color: var(--cyan);
  opacity: 1;
}
[dir="rtl"] .board__row { border-left: 0; border-right: 3px solid transparent; }
[dir="rtl"] .board__row.is-on { border-right-color: var(--cyan); }

.board__row--head {
  padding-block: 0 var(--sp-1);
  border-left: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}
[dir="rtl"] .board__row--head { border-right: 0; }

.board__ref {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
}
.board__dest {
  display: grid;
  gap: 2px;
  justify-items: start;
  font-weight: 700;
}
.flap { display: inline-block; perspective: 420px; }
.flap__inner {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 18px rgba(14, 165, 201, 0.55);
}
.flap.is-flipping .flap__inner {
  animation: fx-flap-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fx-flap-in {
  from { transform: rotateX(-94deg); opacity: 0.15; }
  to   { transform: rotateX(0); opacity: 1; }
}
.board__city {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-300);
}
.board__visa {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
}
.board__status {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--t-base);
}
.board__row.is-on .board__status { color: var(--cyan); }

@media (max-width: 559px) {
  .board { max-width: none; }
  .board__row { grid-template-columns: 4.25rem 1fr 6.5rem; }
  .board__row--head { display: none; }
  .board__visa { display: none; }
  .board__row:nth-child(n+5) { display: none; }
  .flap__inner { font-size: 0.82rem; }
}
@media (min-width: 768px) {
  .board { margin-top: var(--sp-8); }
}

/* --------------------------------------------------------------------------
   8. Check-in journey — five counters, application to first day

   Backlit departure-board tickets: each step is a card with an airport-code
   header, a progress rail that fills one fifth further at every counter, a
   five-block boarding meter and a barcode + gate row. The progress lives on
   the tickets themselves — there is no connector drawn between them.

   The step number lives on the markup as data-step, and every progress cue
   (rail fill, marker position, lit blocks) is derived from it in CSS, so the
   five cards stay in step with each other without a line of JavaScript.
   -------------------------------------------------------------------------- */
#journey {
  /* Brighter than brand cyan on purpose: on this near-black panel the
     accents read as backlit signage rather than flat teal. */
  --j-cyan:  #3EC2F0;
  --j-line:  rgba(62, 194, 240, 0.34);
  --j-dim:   rgba(148, 180, 210, 0.28);
}
.journey {
  display: grid;
  gap: var(--sp-4);
  position: relative;
  z-index: 1;
}
.journey__step { position: relative; }
.journey__step[data-step="1"] { --step: 1; }
.journey__step[data-step="2"] { --step: 2; }
.journey__step[data-step="3"] { --step: 3; }
.journey__step[data-step="4"] { --step: 4; }
.journey__step[data-step="5"] { --step: 5; }
.journey__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background:
    linear-gradient(180deg, rgba(19, 48, 82, 0.55), rgba(6, 20, 38, 0.75));
  border: 1px solid var(--j-line);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 34px rgba(62, 194, 240, 0.07),
    0 0 24px -8px rgba(62, 194, 240, 0.4);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
/* Backlight pooled behind the header, the way a lit sign washes downward */
.journey__card::before {
  content: "";
  position: absolute;
  inset: -40% 8% auto;
  height: 80%;
  background: radial-gradient(closest-side, rgba(62, 194, 240, 0.16), transparent 70%);
  pointer-events: none;
}
.journey__step:hover .journey__card {
  border-color: rgba(62, 194, 240, 0.6);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 34px rgba(62, 194, 240, 0.12),
    0 0 34px -6px rgba(62, 194, 240, 0.55);
}
/* Ticket header: airport code left, step icon right.
   Everything inside the card is positioned so it stays above the backlight. */
.ticket__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.ticket__code {
  font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--j-cyan);
  text-shadow: 0 0 22px rgba(62, 194, 240, 0.45);
}
.ticket__head .journey__icon { margin-bottom: 0; }
.journey__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  padding: 10px;
  background: rgba(62, 194, 240, 0.08);
  border: 1px solid rgba(62, 194, 240, 0.4);
  border-radius: 12px;
  color: var(--j-cyan);
  box-shadow: inset 0 0 14px rgba(62, 194, 240, 0.14), 0 0 14px -4px rgba(62, 194, 240, 0.45);
  transition: transform 280ms var(--ease-spring), background-color var(--t-base), box-shadow var(--t-base);
}
.journey__icon svg {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.journey__step:hover .journey__icon {
  transform: translateY(-2px) rotate(-5deg);
  background: rgba(62, 194, 240, 0.16);
  box-shadow: inset 0 0 14px rgba(62, 194, 240, 0.24), 0 0 20px -2px rgba(62, 194, 240, 0.6);
}
.journey__card h3 {
  position: relative;
  color: #fff;
  font-size: var(--fs-lg);
  line-height: 1.25;
}
.journey__card p {
  position: relative;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-6);
  color: rgba(196, 214, 233, 0.76);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* Progress rail — one fifth further along at every counter. The marker sits
   at the head of the fill; on the arrival ticket it becomes a check. */
.ticket__rail {
  position: relative;
  display: block;
  height: 2px;
  margin-top: auto;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}
/* Step five ends in a 26px check instead of a dot, so its rail stops short
   by the extra radius — that lands the check on the same right edge as the
   end dots on the other four tickets. */
.journey__step--arrive .ticket__rail { margin-inline-end: 12px; }
.ticket__rail::before {         /* origin dot, always lit */
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 11px; height: 11px;
  margin-inline-start: -1px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--j-cyan);
  box-shadow: 0 0 12px rgba(62, 194, 240, 0.75);
}
.ticket__rail-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: calc(var(--step) / 5 * 100%);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--j-cyan), #7BD8FF);
  box-shadow: 0 0 10px rgba(62, 194, 240, 0.55);
}
[dir="rtl"] .ticket__rail-fill { background: linear-gradient(270deg, var(--j-cyan), #7BD8FF); }
.ticket__rail-now {             /* marker at the head of the fill */
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--step) / 5 * 100%);
  width: 13px; height: 13px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #8EE0FF;
  box-shadow: 0 0 16px rgba(123, 216, 255, 0.85);
}
[dir="rtl"] .ticket__rail-now { transform: translate(50%, -50%); }
.ticket__rail-end {             /* the counters still ahead */
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  width: 11px; height: 11px;
  margin-inline-end: -1px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--j-dim);
}
/* Arrival: the marker lands on the end of the rail as a stamped check */
.journey__step--arrive .ticket__rail-end { display: none; }
.journey__step--arrive .ticket__rail-now {
  width: 26px; height: 26px;
  background: rgba(6, 20, 38, 0.9);
  border: 2px solid var(--j-cyan);
  box-shadow: 0 0 18px rgba(62, 194, 240, 0.6);
}
.journey__step--arrive .ticket__rail-now::before {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--j-cyan);
  font-size: 0.8rem;
  font-weight: 800;
}

/* Boarding meter — one block lit per counter cleared */
.ticket__segs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin-top: var(--sp-5);
}
.ticket__segs i {
  height: 28px;
  border-radius: 7px;
  background: rgba(122, 165, 205, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.journey__step[data-step="1"] .ticket__segs i:nth-child(-n + 1),
.journey__step[data-step="2"] .ticket__segs i:nth-child(-n + 2),
.journey__step[data-step="3"] .ticket__segs i:nth-child(-n + 3),
.journey__step[data-step="4"] .ticket__segs i:nth-child(-n + 4),
.journey__step[data-step="5"] .ticket__segs i:nth-child(-n + 5) {
  background: linear-gradient(180deg, #6FD3FF, #1E9FD8);
  border-color: transparent;
  box-shadow: 0 0 14px rgba(62, 194, 240, 0.5);
}

/* Ticket foot: barcode strip + gate number, pinned to the bottom edge */
.ticket__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.ticket__barcode {
  flex: 0 1 46%;
  height: 26px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(214, 240, 252, 0.85) 0 2px, transparent 2px 4px,
    rgba(214, 240, 252, 0.85) 4px 5px, transparent 5px 8px,
    rgba(214, 240, 252, 0.85) 8px 9px, transparent 9px 12px
  );
  opacity: 0.85;
}
[dir="rtl"] .ticket__barcode {
  background-image: repeating-linear-gradient(
    270deg,
    rgba(214, 240, 252, 0.85) 0 2px, transparent 2px 4px,
    rgba(214, 240, 252, 0.85) 4px 5px, transparent 5px 8px,
    rgba(214, 240, 252, 0.85) 8px 9px, transparent 9px 12px
  );
}
.ticket__gate {
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(62, 194, 240, 0.55);
  border-radius: var(--r-sm);
  color: #A6DFF7;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 560px) {
  .journey { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .journey {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-4);
  }

  /*** Arrival gate: the last ticket lights up ***/
  .journey__step--arrive .journey__card {
    border-color: rgba(62, 194, 240, 0.62);
    background:
      linear-gradient(180deg, rgba(30, 74, 116, 0.6), rgba(6, 20, 38, 0.78));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 36px rgba(62, 194, 240, 0.12),
      0 0 34px -6px rgba(62, 194, 240, 0.5);
  }
}

/* Section backdrop: near-black navy so the tickets read as backlit signage,
   with a soft cyan runway-glow behind the stepper */
#journey {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #0A2340 0%, #041020 55%, #020A14 100%);
}
.journey__glow {
  position: absolute;
  top: -45%;
  left: 50%;
  width: min(920px, 96%);
  height: 160%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(62, 194, 240, 0.16), transparent 72%);
  pointer-events: none;
}
#journey .section__head { position: relative; z-index: 1; }

/* Boarding pulse next to the eyebrow */
#journey .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; }
.eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(14, 165, 201, 0.55);
  animation: eyebrow-ping 2s var(--ease-out) infinite;
}
@keyframes eyebrow-ping {
  0%   { box-shadow: 0 0 0 0 rgba(14, 165, 201, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(14, 165, 201, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 201, 0); }
}

/* --------------------------------------------------------------------------
   8b. Dotted world map — sampled land, one pin per hiring country

   Port of the MagicUI <DottedMap> component; script.js builds the SVG. The
   dots take their colour from `color` on the stage, the way the component's
   `dotColor: currentColor` default does.
   -------------------------------------------------------------------------- */
.dotmap { margin-bottom: var(--sp-8); }
.dotmap__stage { position: relative; color: #A9C7E2; }
.dotmap__svg { display: block; width: 100%; height: auto; overflow: visible; }

.dotmap__marker { cursor: pointer; }
.dotmap__hit { fill: transparent; }

/* On a touch screen the European pins are about three pixels apart, so no
   forgiving radius can tell Belgium from the Netherlands — it would just send
   people to the wrong country. Tapping still raises the label, but the country
   grid underneath is what navigates, with full-size targets. */
@media (pointer: coarse) {
  .dotmap__marker { pointer-events: none; cursor: default; }
}
.dotmap__pin {
  fill: var(--cyan);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--t-base);
}
.dotmap__ping { fill: none; stroke: var(--cyan); stroke-width: 0.4; }
.dotmap__marker.is-hot .dotmap__pin { transform: scale(1.7); }
.dotmap__marker--origin .dotmap__pin { fill: var(--blue); }
.dotmap__marker--origin .dotmap__ping { stroke: var(--blue); }

/* Label sits above the pin it belongs to; the pin coordinates arrive as
   percentages of the SVG box, which is exactly what the stage is. */
.dotmap__tip {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-2);
}
.dotmap__tip[hidden] { display: none; }

.dotmap__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
  color: var(--ink-70);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dotmap__legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.dotmap__legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.dotmap__legend-item--origin .dotmap__legend-dot { background: var(--blue); }
.dotmap__legend-item--dest .dotmap__legend-dot { background: var(--cyan); }
.dotmap__legend-arrow { color: var(--cyan); font-size: 1rem; }
[dir="rtl"] .dotmap__legend-arrow { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   8c. Boarding-pass strip on job cards
   -------------------------------------------------------------------------- */
.job__pass {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-3) 0;
  border-top: 2px dashed var(--surface-3);
}
.job__pass-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.job__pass-cell small {
  color: var(--ink-50);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.job__pass-cell b {
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job__pass-cell + .job__pass-cell {
  padding-inline-start: var(--sp-4);
  border-inline-start: 1px dashed var(--line);
}
.job__pass-cell--route { flex: 1; }
.job__pass-barcode {
  flex: none;
  align-self: stretch;
  width: 64px;
  min-height: 30px;
  background-image: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px,
    var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 12px, transparent 12px 14px,
    var(--ink) 14px 15px, transparent 15px 22px,
    var(--ink) 22px 25px, transparent 25px 28px);
  opacity: 0.75;
}
@media (max-width: 419px) {
  .job__pass-barcode { display: none; }
}

/* --------------------------------------------------------------------------
   9. Trust
   -------------------------------------------------------------------------- */
.trust { display: grid; gap: var(--sp-4); }

.trust__item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.trust__icon {
  flex: none;
  width: 34px; height: 34px;
  padding: 6px;
  background: var(--blue-050);
  border-radius: var(--r-sm);
  color: var(--blue);
}
.trust__icon svg {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.trust__item h3 { font-size: var(--fs-h3); }
.trust__item p { margin-top: var(--sp-2); color: var(--ink-70); font-size: var(--fs-sm); }

@media (min-width: 560px) { .trust { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .trust { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
  .trust__item { flex-direction: column; gap: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   9b. About us + founder
   -------------------------------------------------------------------------- */
.about { display: grid; gap: var(--sp-7); }

.about__lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink);
}
.about__content > p + p {
  margin-top: var(--sp-4);
  color: var(--ink-70);
  font-size: var(--fs-md);
  line-height: 1.7;
}

/* Three headline figures under the company copy */
.about__stats {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.about__stats li { display: flex; flex-direction: column; gap: 2px; }
.about__stat-n {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--blue);
  letter-spacing: -0.02em;
}
.about__stat-l {
  color: var(--ink-50);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

@media (min-width: 560px) {
  .about__stats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
@media (min-width: 900px) {
  .about { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-9); align-items: start; }
}

/* --- Founder card --- */
.founder {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.founder:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }

.founder__figure { position: relative; margin: 0; }
.founder__figure picture { display: block; }
.founder__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
  background: var(--surface-2);
  transition: transform 720ms var(--ease-out);
  /* The source is square and the frame is square, so the browser is doing a
     straight downscale — ask for the best resampling it has. */
  image-rendering: auto;
  -webkit-backface-visibility: hidden;   /* stops the hover scale from blurring it */
  backface-visibility: hidden;
}
.founder:hover .founder__photo { transform: scale(1.03); }

/* Gradient keeps the badge readable over any part of the photograph */
.founder__figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(6, 14, 26, 0.72), transparent);
  pointer-events: none;
}
.founder__badge {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-4);
  z-index: 1;
  padding: 0.35rem 0.7rem;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--r-sm);
  color: var(--blue-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.founder__body { padding: var(--sp-5); }
@media (min-width: 768px) { .founder__body { padding: var(--sp-6); } }

.founder__name {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.founder__role {
  margin-top: 2px;
  color: var(--blue);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.founder__facts {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.founder__facts dt {
  color: var(--ink-50);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.founder__facts dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 600; }
@media (min-width: 420px) {
  .founder__facts { grid-template-columns: 1fr 1fr; }
}

.founder__bio {
  color: var(--ink-70);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.founder__quote {
  position: relative;
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  background: var(--blue-050);
  border: 1px solid var(--blue-line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
}
.founder__quote p {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-style: italic;
  line-height: 1.55;
}
/* --- Social links --- */
.socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin: var(--sp-5) 0;
}

.social {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-70);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast),
              background-color var(--t-fast), transform 240ms var(--ease-spring),
              box-shadow 240ms var(--ease-out);
}
.social svg {
  flex: none;
  width: 18px; height: 18px;
  fill: currentColor;
  stroke: none;
  transition: transform 300ms var(--ease-spring);
}
/* Instagram is drawn as outlines rather than a solid glyph */
.social--instagram svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.social--instagram svg circle:last-of-type { fill: currentColor; stroke: none; }

.social:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  background: var(--surface);
}
.social:hover svg { transform: scale(1.14); }
.social:active { transform: translateY(0) scale(0.97); }

/* Brand colours only on hover, so the row stays calm at rest */
.social--tiktok:hover    { color: #111; border-color: #111; }
.social--telegram:hover  { color: #229ED9; border-color: #229ED9; }
.social--instagram:hover { color: #C13584; border-color: #C13584; }
.social--facebook:hover  { color: #1877F2; border-color: #1877F2; }

/* Waiting for a URL — visibly present but not clickable */
.social.is-todo {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

@media (min-width: 420px) and (max-width: 899px) {
  .socials { grid-template-columns: repeat(4, 1fr); }
  .social { justify-content: center; padding: 0.5rem 0.4rem; }
  .social span { display: none; }
  .social svg { width: 20px; height: 20px; }
}

.founder__quote::before {
  content: "\201C";
  position: absolute;
  left: 0.5rem; top: 0.15rem;
  color: var(--blue-300);
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   10. Countries
   -------------------------------------------------------------------------- */
.countries { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.country {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 72px;
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
a.country:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
/* Non-interactive variant (sector list on the employers page) */
.country--static { cursor: default; background: var(--paper); }
.country__name { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.country__meta { color: var(--ink-50); font-size: var(--fs-sm); }

@media (min-width: 560px) { .countries { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .countries { grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); } }

/* Region blocks — Europe / North America */
.regions { display: grid; gap: var(--sp-8); }

.region__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.region__title {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.region__count { color: var(--ink-50); font-size: var(--fs-sm); }

/* The rule under each region heading draws itself as the block reveals. */
.region__head { position: relative; }
.region__head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 720ms var(--ease-out) 140ms;
}
.region.is-in .region__head::after { transform: scaleX(1); }

/* Countries with nothing open right now read as an invitation, not a dead end. */
.country__meta { transition: color var(--t-fast); }

/* --------------------------------------------------------------------------
   11. Job filters
   -------------------------------------------------------------------------- */
.filters {
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.filters__row { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }

.filters__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}
.filters__count { color: var(--ink-70); font-size: var(--fs-sm); font-weight: 600; }

@media (min-width: 768px) {
  .filters { padding: var(--sp-6); }
  .filters__row { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   12. Job cards
   -------------------------------------------------------------------------- */
.jobs { display: grid; gap: var(--sp-5); }

.job {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.job:hover { border-color: var(--surface-3); box-shadow: var(--shadow-2); }

.job__media { position: relative; }

/* Real photo uploaded through the Telegram bot */
.job__media--photo {
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  overflow: hidden;
}
.job__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: ar-fade-in 420ms var(--ease-out) both;
}

/* If the file 404s the card keeps its shape and shows the striped placeholder
   instead of a broken-image icon. */
.job__media--photo.is-broken {
  background:
    repeating-linear-gradient(-45deg, var(--surface) 0 10px, var(--surface-2) 10px 20px);
  border-bottom: 1px dashed var(--surface-3);
}
.job__media--photo.is-broken img { display: none; }

.job__flag {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  padding: 0.3rem 0.55rem;
  background: var(--ink);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-5);
}

.job__title { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }

.job__location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-2);
  color: var(--ink-70);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.job__location svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: var(--ink-50); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Key facts — salary + hours stay high in the card */
.job__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.job__facts dt {
  color: var(--ink-50);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.job__facts dd {
  margin: 3px 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}
.job__facts .job__salary { color: var(--blue); font-size: var(--fs-md); }

.job__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-4); }
.tag {
  padding: 0.25rem 0.55rem;
  background: var(--blue-050);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-sm);
  color: var(--blue-700);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.tag--muted {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink-70);
  font-weight: 500;
}

.job__desc {
  margin-top: var(--sp-4);
  color: var(--ink-70);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.job__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-5);
}
.job__actions .btn { flex: 1; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  flex: none;
  padding: 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-50);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.icon-btn svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.icon-btn:hover { border-color: var(--blue); color: var(--blue); }
.icon-btn[aria-pressed="true"] { background: var(--blue-050); border-color: var(--blue); color: var(--blue); }
.icon-btn[aria-pressed="true"] svg { fill: currentColor; }

.job__ref {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  color: var(--ink-50);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

.jobs__empty {
  padding: var(--sp-8) var(--sp-5);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  color: var(--ink-70);
  text-align: center;
}

@media (min-width: 720px) {
  .jobs { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .jobs { gap: var(--sp-6); }
  .job__body { padding: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   13. Visa status
   -------------------------------------------------------------------------- */
.visa-form .btn { margin-top: var(--sp-5); }
.visa-form input { font-size: 1.125rem; letter-spacing: 0.06em; }

.visa-result {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-soft);
}
.visa-result[hidden] { display: none; }

.status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  justify-content: space-between;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.45rem 0.8rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.status-pill::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status-pill[data-code="review"]  { background: var(--st-review-bg); border-color: var(--st-review-line); color: var(--st-review-fg); }
.status-pill[data-code="approved"]{ background: var(--st-ok-bg);     border-color: var(--st-ok-line);     color: var(--st-ok-fg); }
.status-pill[data-code="action"]  { background: var(--st-action-bg); border-color: var(--st-action-line); color: var(--st-action-fg); }
.status-pill[data-code="issued"]  { background: var(--st-issued-bg); border-color: var(--st-issued-line); color: var(--st-issued-fg); }
.status-pill[data-code="none"]    { background: var(--surface-2);       border-color: var(--line);           color: var(--ink-70); }

.status-updated { color: var(--ink-50); font-size: var(--fs-sm); }

.status-loading {
  padding: var(--sp-5) 0;
  color: var(--ink-50);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}

.status-meta {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.status-meta dt {
  color: var(--ink-50);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-meta dd { margin: 3px 0 0; font-size: var(--fs-sm); font-weight: 600; }

.status-note {
  margin-top: var(--sp-5);
  color: var(--ink-70);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.status-docs { margin-top: var(--sp-4); }
.status-docs li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--ink);
  font-size: var(--fs-sm);
}
.status-docs li + li { margin-top: var(--sp-2); }
.status-docs li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--st-action-fg);
  border-radius: 1px;
}

/* Progress track */
.status-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-6);
}
.status-steps li {
  padding-top: var(--sp-3);
  border-top: 3px solid var(--surface-3);
  color: var(--ink-50);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
}
.status-steps li.is-done { border-top-color: var(--blue); color: var(--ink); }
.status-steps .step-n { display: block; color: var(--ink-50); font-weight: 700; }
.status-steps li.is-done .step-n { color: var(--blue); }

.visa-result .btn { margin-top: var(--sp-6); }

@media (min-width: 560px) {
  .status-meta { grid-template-columns: 1fr 1fr; }
  .status-steps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
}

/* --------------------------------------------------------------------------
   14. Employers
   -------------------------------------------------------------------------- */
.employers { display: grid; gap: var(--sp-7); }
.employers__content .section__title { color: var(--on-dark); }
.employers__content > p { margin-top: var(--sp-4); font-size: var(--fs-md); }

.employers__list { margin: var(--sp-5) 0 var(--sp-6); }
.employers__list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--on-dark-70);
  font-size: var(--fs-sm);
}
.employers__list li + li { margin-top: var(--sp-3); }
.employers__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 2px;
  background: var(--blue-300);
}

@media (min-width: 900px) {
  .employers { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--sp-9); }
}

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact { display: grid; gap: var(--sp-6); }

.contact__details {
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.contact__details li { padding-block: var(--sp-4); }
.contact__details li + li { border-top: 1px solid var(--line-soft); }
.contact__label {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-50);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* thumb-friendly tap target */
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.contact__link:hover { color: var(--blue); }
.contact__text { color: var(--ink-70); font-size: var(--fs-sm); }

@media (min-width: 900px) {
  .contact { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-7); align-items: start; }
}

/* --------------------------------------------------------------------------
   15b. Legal pages
   -------------------------------------------------------------------------- */
.legal__meta {
  margin-bottom: var(--sp-6);
  color: var(--ink-50);
  font-size: var(--fs-sm);
}

.legal__toc { margin-bottom: var(--sp-8); }
.legal__toc h2 {
  margin-bottom: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.legal__toc ol {
  display: grid;
  gap: var(--sp-2);
  counter-reset: toc;
}
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: inline-block;
  padding: 2px 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--t-fast), transform 240ms var(--ease-out);
}
.legal__toc li::before {
  content: counter(toc) ".";
  display: inline-block;
  width: 1.6rem;
  color: var(--ink-50);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.legal__toc a:hover { color: var(--blue); transform: translateX(2px); }
@media (min-width: 560px) { .legal__toc ol { grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-5); } }

.legal > section + section {
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line-soft);
}
.legal h2 {
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.legal p { color: var(--ink-70); font-size: var(--fs-md); line-height: 1.75; }
.legal p + p { margin-top: var(--sp-4); }
.legal ul {
  margin: var(--sp-4) 0;
  display: grid;
  gap: var(--sp-3);
}
.legal ul li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-70);
  font-size: var(--fs-md);
  line-height: 1.7;
}
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 7px; height: 7px;
  background: var(--blue-300);
  border-radius: 2px;
}
.legal strong { color: var(--ink); font-weight: 650; }

.legal__callout {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
  color: var(--ink) !important;
  font-size: var(--fs-sm) !important;
}
.legal__callout--strong {
  background: var(--st-ok-bg);
  border-color: var(--st-ok-line);
  border-left-color: var(--st-ok-fg);
  color: var(--st-ok-fg) !important;
  font-weight: 600;
}

.legal__contact {
  margin: var(--sp-5) 0;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  display: grid;
  gap: var(--sp-3);
}
.legal__contact li { padding-left: 0; font-size: var(--fs-sm); }
.legal__contact li::before { display: none; }
.legal__contact strong {
  display: block;
  color: var(--ink-50);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--on-dark-70);
  font-size: var(--fs-sm);
}
.footer__grid {
  display: grid;
  gap: var(--sp-7);
  padding-block: var(--sp-8);
}
.footer__brand p { margin-top: var(--sp-4); max-width: 46ch; line-height: 1.65; }
.logo--footer { color: var(--on-dark); margin-right: 0; }
.logo--footer .logo__sub { color: var(--on-dark-70); }

.footer__title {
  margin-bottom: var(--sp-4);
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer__col li + li { margin-top: var(--sp-3); }
.footer__col a {
  color: var(--on-dark-70);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line-dark);
  color: #7C8896;
  font-size: var(--fs-xs);
}

@media (min-width: 700px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--sp-8); }
}
@media (min-width: 1024px) {
  .footer__grid { padding-block: var(--sp-9); }
}

/* --------------------------------------------------------------------------
   17. Multi-page components
   -------------------------------------------------------------------------- */

/* Inner-page header band */
.page-head {
  padding-block: var(--sp-6) var(--sp-8);
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
.page-head__inner { max-width: 62ch; }
.page-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);
  letter-spacing: -0.018em;
}
@media (min-width: 768px) { .page-head { padding-block: var(--sp-7) var(--sp-9); } }

/* Breadcrumbs */
.crumbs { margin-bottom: var(--sp-6); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.crumbs li { color: var(--ink-50); font-size: var(--fs-sm); }
.crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--surface-3);
}
.crumbs a { color: var(--ink-70); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Section head with an action on the right */
.section__head--row { max-width: none; }
@media (min-width: 720px) {
  .section__head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
  }
  .section__head--row > div { max-width: 62ch; }
}
.section__head--row .btn { margin-top: var(--sp-5); }
@media (min-width: 720px) { .section__head--row .btn { margin-top: 0; flex: none; } }

/* Homepage shortlist */
@media (min-width: 1024px) { .jobs--featured { grid-template-columns: repeat(3, 1fr); } }

/* Dark teaser band */
.teaser { display: grid; gap: var(--sp-6); }
.teaser .section__title { color: var(--on-dark); }
.teaser p { margin-top: var(--sp-4); max-width: 58ch; }
.teaser .btn { justify-self: start; }
@media (min-width: 900px) {
  .teaser { grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-8); }
  .teaser .btn { justify-self: end; }
}

/* Centered narrow blocks */
.center { text-align: center; }
.center .section__head, .center .page-head__inner { margin-inline: auto; }
.center .section__lead { margin-inline: auto; max-width: 52ch; }

.home-contact__actions {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
@media (min-width: 560px) {
  .home-contact__actions {
    grid-auto-flow: column;
    justify-content: center;
    gap: var(--sp-4);
  }
}

/* Numbered process steps */
.steps { display: grid; gap: var(--sp-5); counter-reset: step; }
.step {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--line);
}
.step__n {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--blue);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.step h3 { font-size: var(--fs-h3); }
.step p { margin-top: var(--sp-2); color: var(--ink-70); font-size: var(--fs-sm); }

@media (min-width: 560px) { .steps { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Status legend (visa page) */
.status-legend { display: grid; gap: var(--sp-5); }
.status-legend > div {
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.status-legend dd { margin: var(--sp-3) 0 0; color: var(--ink-70); font-size: var(--fs-sm); }
@media (min-width: 768px) { .status-legend { grid-template-columns: 1fr 1fr; } }

/* "You are applying for…" bar above the contact form */
.apply-note {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: var(--blue-050);
  border: 1px solid var(--blue-line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.apply-note[hidden] { display: none; }

/* --------------------------------------------------------------------------
   17b. Reviews
   -------------------------------------------------------------------------- */
.reviews {
  display: grid;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.review > article {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.review > article:hover { border-color: var(--surface-3); box-shadow: var(--shadow-2); }

.review__stars { display: flex; gap: 2px; margin: 0 0 var(--sp-4); font-size: 1rem; line-height: 1; }
.review__star { color: var(--surface-3); }
.review__star.is-on { color: #E8A33D; }

/* The quote sets its own direction, so an Arabic or Kurdish review reads
   correctly even while the rest of the page is left-to-right. */
.review__text {
  flex: 1;
  margin: 0 0 var(--sp-5);
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.65;
}
.review__text[dir="rtl"] { text-align: right; }

.review__by { display: flex; align-items: center; gap: var(--sp-3); }

.review__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--blue-050);
  color: var(--blue);
  font-size: var(--fs-md);
  font-weight: 700;
}

.review__who { display: flex; flex-direction: column; min-width: 0; }
.review__name { font-weight: 650; color: var(--ink); }
.review__meta { color: var(--ink-50); font-size: var(--fs-sm); }

.review__date {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  color: var(--ink-50);
  font-size: var(--fs-xs);
}

@media (min-width: 700px)  { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .reviews { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

/* --------------------------------------------------------------------------
   17c. Review invitation — shown after an application is sent
   -------------------------------------------------------------------------- */
.rinvite {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  text-align: start;
}
.rinvite h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.rinvite__lead { margin: 0 0 var(--sp-4); color: var(--ink-50); font-size: var(--fs-sm); }

.rinvite__stars { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.rinvite__star {
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--surface-3);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast);
}
.rinvite__star:hover { transform: scale(1.08); }
.rinvite__star.is-on { color: #E8A33D; }

.rinvite__text {
  width: 100%;
  min-height: 84px;
  padding: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-base);   /* 16px keeps iOS from zooming the page */
  resize: vertical;
}
.rinvite__text:focus { outline: 2px solid var(--blue); outline-offset: 2px; }

.rinvite__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  color: var(--ink-70);
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
}
.rinvite__consent input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--blue); }

.rinvite__status { margin-top: var(--sp-3); color: #A6371E; font-size: var(--fs-sm); font-weight: 600; }
.rinvite__status.is-ok { color: var(--blue); }
.rinvite__status[hidden] { display: none; }

.rinvite__thanks {
  margin: 0;
  padding: var(--sp-4);
  background: var(--blue-050);
  border-radius: var(--r-md);
  color: var(--blue);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}

/* ==========================================================================
   18. MOTION LIBRARY — keyframes
   ========================================================================== */
@keyframes ar-fade-up   { from { opacity: 0; transform: translate3d(0, 24px, 0); }  to { opacity: 1; transform: none; } }
@keyframes ar-fade-down { from { opacity: 0; transform: translate3d(0, -18px, 0); } to { opacity: 1; transform: none; } }
@keyframes ar-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ar-fade-left { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes ar-fade-right{ from { opacity: 0; transform: translate3d(28px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes ar-pop       { 0% { opacity: 0; transform: scale(0.88); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ar-shimmer   { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes ar-spin      { to { transform: rotate(360deg); } }
@keyframes ar-shake     { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); }
                          30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
@keyframes ar-ping      { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes ar-grow-x    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ar-float     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ar-sheen     { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } }
@keyframes ar-ripple    { to { transform: scale(2.6); opacity: 0; } }
@keyframes ar-toast-in  { from { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes ar-toast-out { to { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.97); } }
@keyframes ar-caret     { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes ar-bar       { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

/* --------------------------------------------------------------------------
   18.1 Scroll reveal
   Elements marked [data-reveal] start hidden and animate in once they enter
   the viewport. JS adds .is-in. If JS never runs, .no-js-safe keeps them
   visible — see the inline fallback at the bottom of this section.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="up"]    { transform: translate3d(0, 28px, 0); }
[data-reveal="down"]  { transform: translate3d(0, -22px, 0); }
[data-reveal="left"]  { transform: translate3d(-34px, 0, 0); }
[data-reveal="right"] { transform: translate3d(34px, 0, 0); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Once the entrance is finished we stop promoting the layer. */
[data-reveal].is-settled { will-change: auto; transition: none; }

/* JS is absent → nothing should stay invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   18.2 Page-load choreography
   -------------------------------------------------------------------------- */
.site-header { animation: ar-fade-down 520ms var(--ease-out) both; }

.hero__eyebrow { animation: ar-fade-up 700ms var(--ease-out) 120ms both; }
.hero__title   { animation: ar-fade-up 760ms var(--ease-out) 220ms both; }
.hero__text    { animation: ar-fade-up 760ms var(--ease-out) 340ms both; }
.hero__actions { animation: ar-fade-up 760ms var(--ease-out) 460ms both; }
.hero__toggle  { animation: ar-fade-in 600ms var(--ease-out) 900ms both; }

/* Slow ambient zoom on the footage keeps the hero alive even on a still frame */
.hero__video { animation: ar-hero-drift 26s var(--ease-in-out) infinite alternate; }
@keyframes ar-hero-drift { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Inner pages get a softer version of the same idea */
.page-head__title { animation: ar-fade-up 640ms var(--ease-out) 80ms both; }
.page-head .eyebrow { animation: ar-fade-up 560ms var(--ease-out) 40ms both; }
.page-head .section__lead { animation: ar-fade-up 680ms var(--ease-out) 180ms both; }
.crumbs { animation: ar-fade-in 500ms var(--ease-out) both; }

/* --------------------------------------------------------------------------
   18.3 Scroll progress bar (top of the header)
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 130;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue) 0%, #2E7DC4 55%, var(--blue-300) 100%);
  box-shadow: 0 0 10px rgba(20, 80, 140, 0.45);
}

/* --------------------------------------------------------------------------
   18.4 Buttons — lift, sheen, ripple
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    box-shadow 260ms var(--ease-out),
    transform 260ms var(--ease-spring);
}

/* Light sweep across the button on hover */
.btn::before {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 45%;
  height: 220%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.btn:hover::before { opacity: 1; animation: ar-sheen 720ms var(--ease-out); }
.btn--outline::before,
.btn--ghost::before { background: linear-gradient(90deg, transparent, rgba(20, 80, 140, 0.10), transparent); }

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 90ms; }

.btn--primary:hover { box-shadow: var(--shadow-blue); }
.btn--outline:hover,
.btn--ghost:hover   { box-shadow: var(--shadow-2); }
.btn--onDark:hover  { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28); }

/* Click ripple — the span is injected by script.js */
.ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
  animation: ar-ripple 620ms var(--ease-out) forwards;
}
.btn--outline .ripple,
.btn--ghost .ripple,
.btn--onDark .ripple { background: rgba(20, 80, 140, 0.22); }

/* Busy state for any button awaiting a response */
.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: ar-spin 640ms linear infinite;
}
.btn--outline.is-busy::after,
.btn--ghost.is-busy::after { color: var(--blue); }

.link-btn { transition: color var(--t-fast), transform var(--t-fast); }
.link-btn:hover { transform: translateX(2px); }

.icon-btn {
  transition:
    border-color var(--t-fast), color var(--t-fast),
    background-color var(--t-fast),
    transform 240ms var(--ease-spring), box-shadow 240ms var(--ease-out);
}
.icon-btn:hover { transform: translateY(-2px) scale(1.06); box-shadow: var(--shadow-1); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { transition: transform 260ms var(--ease-spring); }
.icon-btn[aria-pressed="true"] svg { animation: ar-pop 320ms var(--ease-spring); }

/* --------------------------------------------------------------------------
   18.5 Navigation
   -------------------------------------------------------------------------- */
.site-header {
  transition:
    box-shadow var(--t-base),
    border-color var(--t-base),
    background-color var(--t-base),
    backdrop-filter var(--t-base);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}

.logo { transition: transform 300ms var(--ease-spring); }
.logo:hover { transform: translateY(-1px); }
.logo__mark { transition: transform 320ms var(--ease-spring), background-color var(--t-fast); }
.logo:hover .logo__mark { transform: scaleY(1.18); background: var(--blue-700); }

.nav-desktop a::after { transition: transform 300ms var(--ease-out); }
.nav-desktop a:hover { transform: translateY(-1px); }

/* Mobile panel slides and its links cascade in */
.mobile-nav {
  overflow: hidden;
  animation: ar-nav-open 320ms var(--ease-out) both;
}
@keyframes ar-nav-open {
  from { opacity: 0; transform: translateY(-10px); max-height: 0; }
  to   { opacity: 1; transform: none; max-height: 100vh; }
}
.mobile-nav.is-closing { animation: ar-nav-close 220ms var(--ease-in-out) both; }
@keyframes ar-nav-close {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px); }
}
.mobile-nav__list li,
.mobile-nav__actions .btn { animation: ar-fade-left 380ms var(--ease-out) both; }
.mobile-nav__list li:nth-child(1) { animation-delay: 60ms; }
.mobile-nav__list li:nth-child(2) { animation-delay: 105ms; }
.mobile-nav__list li:nth-child(3) { animation-delay: 150ms; }
.mobile-nav__list li:nth-child(4) { animation-delay: 195ms; }
.mobile-nav__list li:nth-child(5) { animation-delay: 240ms; }
.mobile-nav__actions .btn:nth-child(1) { animation-delay: 285ms; }
.mobile-nav__actions .btn:nth-child(2) { animation-delay: 330ms; }

.mobile-nav__list a {
  position: relative;
  transition: color var(--t-fast), padding-left var(--t-base);
}
.mobile-nav__list a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--blue);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height 260ms var(--ease-out);
}
.mobile-nav__list a:hover,
.mobile-nav__list a[aria-current="page"] { padding-left: 0.85rem; }
.mobile-nav__list a:hover::before,
.mobile-nav__list a[aria-current="page"]::before { height: 22px; }

.nav-toggle { transition: border-color var(--t-fast), background-color var(--t-fast), transform 220ms var(--ease-spring); }
.nav-toggle:active { transform: scale(0.94); }

/* --------------------------------------------------------------------------
   18.6 Cards — trust, country, job
   -------------------------------------------------------------------------- */
.trust__item {
  transition:
    transform 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out),
    border-color 320ms var(--ease-out);
}
.trust__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--blue-line);
}
.trust__icon {
  transition: transform 380ms var(--ease-spring), background-color var(--t-base), color var(--t-base);
}
.trust__item:hover .trust__icon {
  transform: rotate(-6deg) scale(1.12);
  background: var(--blue);
  color: #fff;
}

.country { position: relative; overflow: hidden; }
.country::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 340ms var(--ease-out);
}
a.country:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
a.country:hover::after { transform: scaleX(1); }
.country__name { transition: color var(--t-fast), transform 280ms var(--ease-out); }
a.country:hover .country__name { color: var(--blue); transform: translateX(3px); }

.job {
  transition:
    transform 340ms var(--ease-out),
    box-shadow 340ms var(--ease-out),
    border-color 340ms var(--ease-out);
}
.job:hover { transform: translateY(-5px); box-shadow: var(--shadow-3); border-color: var(--blue-line); }
.job__media { overflow: hidden; }
.job__media > *:not(.job__flag) { transition: transform 620ms var(--ease-out); }
.job:hover .job__media > *:not(.job__flag) { transform: scale(1.05); }
.job__flag { transition: transform 300ms var(--ease-spring), background-color var(--t-base); }
.job:hover .job__flag { transform: translateY(-2px); background: var(--blue); }
.job__title { transition: color var(--t-base); }
.job:hover .job__title { color: var(--blue-700); }
.job__facts { transition: background-color var(--t-base), border-color var(--t-base); }
.job:hover .job__facts { background: var(--blue-050); border-color: var(--blue-line); }

.tag { transition: transform 240ms var(--ease-spring), background-color var(--t-fast), border-color var(--t-fast); }
.tag:hover { transform: translateY(-2px); }

/* Cards being added/removed by the filters */
.job.is-entering { animation: ar-fade-up 460ms var(--ease-out) both; animation-delay: var(--stagger, 0ms); }
.jobs.is-swapping { opacity: 0.35; transform: translateY(6px); }
.jobs { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }

/* --------------------------------------------------------------------------
   18.7 Skeleton loaders
   -------------------------------------------------------------------------- */
.skeleton {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  color: transparent !important;
  user-select: none;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  background-size: 420px 100%;
  animation: ar-shimmer 1.25s linear infinite;
}

.job-skeleton {
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.job-skeleton__media { height: 150px; border-radius: var(--r-md); }
.job-skeleton__line { height: 12px; margin-top: var(--sp-4); border-radius: 99px; }
.job-skeleton__line--lg { height: 20px; width: 72%; }
.job-skeleton__line--sm { width: 45%; }
.job-skeleton__block { height: 62px; margin-top: var(--sp-4); border-radius: var(--r-md); }

/* --------------------------------------------------------------------------
   18.8 Forms
   -------------------------------------------------------------------------- */
.field input,
.field select,
.field textarea {
  transition:
    border-color var(--t-fast),
    box-shadow 260ms var(--ease-out),
    background-color var(--t-fast),
    transform 200ms var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: 0 0 0 4px rgba(20, 80, 140, 0.16);
  transform: translateY(-1px);
}
.field select { transition: border-color var(--t-fast), box-shadow 260ms var(--ease-out), background-position 200ms var(--ease-out); }
.field select:focus { background-position: right 0.7rem center; }

.field label { transition: color var(--t-fast); }
.field:focus-within label { color: var(--blue); }

.field__error { animation: ar-fade-down 260ms var(--ease-out) both; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { animation: ar-shake 480ms var(--ease-in-out); }

.form-status { animation: ar-pop 420ms var(--ease-spring) both; }

.filters { transition: box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out); }
.filters:focus-within { box-shadow: var(--shadow-2); border-color: var(--blue-line); }
.filters__count { transition: color var(--t-fast); }
.filters__count.is-updating { animation: ar-pop 300ms var(--ease-spring); }

/* Live-count chip for the country cards */
.country__meta.is-counting { animation: ar-fade-in 400ms var(--ease-out) both; }

/* --------------------------------------------------------------------------
   18.9 Visa status
   -------------------------------------------------------------------------- */
.visa-result:not([hidden]) { animation: ar-fade-up 460ms var(--ease-out) both; }

.status-pill { animation: ar-pop 420ms var(--ease-spring) both; }
.status-pill::before { position: relative; }

/* Live "in progress" pulse on the two waiting states */
.status-pill[data-code="review"]::before,
.status-pill[data-code="action"]::before { animation: ar-caret 1.6s var(--ease-in-out) infinite; }
.status-pill[data-code="review"]::after,
.status-pill[data-code="action"]::after {
  content: "";
  position: absolute;
  left: 0.8rem; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: currentColor;
  animation: ar-ping 2s var(--ease-out) infinite;
  pointer-events: none;
}

.status-meta > div { animation: ar-fade-up 420ms var(--ease-out) both; }
.status-meta > div:nth-child(1) { animation-delay: 60ms; }
.status-meta > div:nth-child(2) { animation-delay: 110ms; }
.status-meta > div:nth-child(3) { animation-delay: 160ms; }
.status-meta > div:nth-child(4) { animation-delay: 210ms; }
.status-meta > div:nth-child(5) { animation-delay: 260ms; }
.status-meta > div:nth-child(6) { animation-delay: 310ms; }

/* Progress track: each completed segment draws itself left-to-right in turn */
.status-steps li { position: relative; border-top-color: var(--surface-3); }
.status-steps li::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -3px;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.status-steps li.is-done { border-top-color: var(--surface-3); }
.status-steps li.is-done::before {
  animation: ar-grow-x 520ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 190ms + 260ms);
}
.status-steps li.is-current .step-n::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--blue);
  animation: ar-caret 1.4s var(--ease-in-out) infinite;
}
.status-steps li { animation: ar-fade-up 400ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }

.status-docs li { animation: ar-fade-left 380ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }

.status-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.status-loading::before {
  content: "";
  width: 16px; height: 16px;
  border: 2px solid var(--blue-300);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: ar-spin 620ms linear infinite;
}

/* Indeterminate bar under the panel while a lookup runs */
.panel.is-loading { position: relative; overflow: hidden; }
.panel.is-loading::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 25%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  animation: ar-bar 1.1s var(--ease-in-out) infinite;
}

.status-legend > div {
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.status-legend > div:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--blue-line); }

/* Copy-to-clipboard on the reference number */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--blue-050);
  border: 1px solid var(--blue-line);
  border-radius: 99px;
  color: var(--blue-700);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: transform 220ms var(--ease-spring), background-color var(--t-fast);
}
.copy-btn:hover { transform: translateY(-1px); background: var(--blue-line); }
.copy-btn:active { transform: scale(0.94); }
.copy-btn.is-copied { background: var(--st-ok-bg); border-color: var(--st-ok-line); color: var(--st-ok-fg); }

/* --------------------------------------------------------------------------
   18.10 Process steps + employers
   -------------------------------------------------------------------------- */
.step {
  position: relative;
  transition: transform 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.step::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 520ms var(--ease-out);
}
.step.is-in::before { transform: scaleX(1); transition-delay: var(--reveal-delay, 0ms); }
.step:hover { transform: translateY(-3px); }
.step__n { transition: transform 300ms var(--ease-spring), letter-spacing var(--t-base); }
.step:hover .step__n { transform: translateX(2px); letter-spacing: 0.14em; }

.employers__list li { transition: transform 260ms var(--ease-out), color var(--t-fast); }
.employers__list li:hover { transform: translateX(4px); color: var(--on-dark); }
.employers__list li::before { transition: width 260ms var(--ease-out), background-color var(--t-fast); }
.employers__list li:hover::before { width: 16px; background: #fff; }

.teaser .btn { animation: ar-float 4.5s var(--ease-in-out) infinite; }
.teaser .btn:hover { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   18.11 Contact
   -------------------------------------------------------------------------- */
.contact__details li { transition: background-color var(--t-base), padding-left var(--t-base); border-radius: var(--r-sm); }
.contact__details li:hover { background: var(--surface); padding-left: var(--sp-3); }
.contact__link { transition: color var(--t-fast), transform 260ms var(--ease-out); }
.contact__link:hover { transform: translateX(3px); }

.apply-note:not([hidden]) { animation: ar-fade-down 420ms var(--ease-out) both; }

/* --------------------------------------------------------------------------
   18.12 Footer
   -------------------------------------------------------------------------- */
.footer__col a { display: inline-block; transition: color var(--t-fast), transform 240ms var(--ease-out); }
.footer__col a:hover { transform: translateX(4px); }
.logo--footer .logo__mark { animation: ar-float 5s var(--ease-in-out) infinite; }

/* --------------------------------------------------------------------------
   18.13 Toasts
   -------------------------------------------------------------------------- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  z-index: 160;
  display: grid;
  gap: var(--sp-2);
  width: min(420px, calc(100vw - 2 * var(--gutter)));
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.8rem 1rem;
  background: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 30px rgba(16, 24, 34, 0.28);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  pointer-events: auto;
  animation: ar-toast-in 340ms var(--ease-spring) both;
}
.toast.is-out { animation: ar-toast-out 240ms var(--ease-in-out) both; }
.toast__dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue-300);
}
.toast--ok  .toast__dot { background: #4ADE80; }
.toast--warn .toast__dot { background: #FBBF24; }

/* --------------------------------------------------------------------------
   18.14 Back to top
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-2);
  color: var(--blue);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.85);
  transition:
    opacity 280ms var(--ease-out),
    transform 320ms var(--ease-spring),
    visibility 280ms,
    background-color var(--t-fast),
    color var(--t-fast);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--blue); color: #fff; transform: translateY(-3px); }
.to-top:active { transform: scale(0.92); }
.to-top svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Keep the toast stack clear of the button on small screens */
@media (max-width: 559px) {
  .toasts { width: calc(100vw - 2 * var(--gutter) - 58px); left: var(--gutter); transform: none; }
}

/* --------------------------------------------------------------------------
   18.15 Section headings — animated rule
   -------------------------------------------------------------------------- */
.section__head .section__title { position: relative; }
.eyebrow { position: relative; display: inline-block; }
.eyebrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 620ms var(--ease-out) 160ms;
}
.is-in .eyebrow::after,
.page-head .eyebrow::after,
.hero .eyebrow::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   18.16 Apply wizard
   -------------------------------------------------------------------------- */
body.is-locked { overflow: hidden; }

.apply {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.apply[hidden] { display: none; }

.apply__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 28, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: ar-fade-in 260ms var(--ease-out) both;
}

.apply__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: 100dvh;
  height: 100dvh;
  background: var(--paper);
  animation: ar-sheet-up 380ms var(--ease-out) both;
}
@keyframes ar-sheet-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 700px) {
  .apply { align-items: center; padding: var(--sp-6); }
  .apply__panel {
    height: auto;
    max-height: min(92vh, 860px);
  max-height: min(92dvh, 860px);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 70px rgba(8, 16, 28, 0.4);
  }
}

/* --- Header --- */
.apply__head {
  flex: none;
  padding: var(--sp-4) var(--sp-5) 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}
.apply__head-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.apply__job {
  flex: 1;
  color: var(--ink-70);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.apply__job strong { color: var(--ink); }

.apply__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  margin: -6px -8px 0 0;
  padding: 9px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--ink-50);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), transform 220ms var(--ease-spring);
}
.apply__close:hover { background: var(--surface); color: var(--ink); }
.apply__close:active { transform: scale(0.9); }
.apply__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.apply__progress {
  height: 4px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}
.apply__progress-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue) 0%, #2E7DC4 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 460ms var(--ease-out);
}
.apply__count {
  padding: var(--sp-2) 0 var(--sp-3);
  color: var(--ink-50);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --- Body --- */
.apply__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-6) var(--sp-5);
}
@media (min-width: 700px) { .apply__body { padding: var(--sp-7) var(--sp-6); } }

.apply__panel.is-fwd  .astep { animation: ar-fade-left-in 320ms var(--ease-out) both; }
.apply__panel.is-back .astep { animation: ar-fade-right-in 320ms var(--ease-out) both; }
@keyframes ar-fade-left-in  { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes ar-fade-right-in { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

.astep.is-invalid { animation: ar-shake 460ms var(--ease-in-out); }

.astep__q {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.astep__help {
  margin-top: var(--sp-3);
  color: var(--ink-70);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.astep__note {
  margin-top: var(--sp-4);
  color: var(--ink-50);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.astep__error {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--st-action-bg);
  border: 1px solid var(--st-action-line);
  border-radius: var(--r-md);
  color: var(--st-action-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  animation: ar-fade-down 240ms var(--ease-out) both;
}
.astep__error[hidden] { display: none; }

.astep__input {
  width: 100%;
  min-height: 56px;
  margin-top: var(--sp-5);
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-md);
  transition: border-color var(--t-fast), box-shadow 260ms var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.astep__input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(20, 80, 140, 0.16);
}
.astep__input--area { min-height: 140px; resize: vertical; line-height: 1.6; }
.astep__input--other { margin-top: var(--sp-3); min-height: 50px; font-size: var(--fs-base); }
.astep__input--other[hidden] { display: none; }

/* --- Choices --- */
.achoices { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.achoices--wrap { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.achoice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 58px;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast),
              transform 220ms var(--ease-spring), box-shadow var(--t-fast);
}
.achoice:hover { border-color: var(--blue-300); background: var(--blue-050); }
.achoice:active { transform: scale(0.99); }
.achoice.is-on {
  border-color: var(--blue);
  background: var(--blue-050);
  box-shadow: 0 0 0 1px var(--blue);
  font-weight: 600;
}
.achoice__dot {
  flex: none;
  width: 20px; height: 20px;
  border: 2px solid var(--surface-3);
  border-radius: 50%;
  transition: border-color var(--t-fast), box-shadow 240ms var(--ease-spring);
}
.achoice.is-on .achoice__dot {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 4px var(--blue);
}

.atag {
  padding: 0.6rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast),
              color var(--t-fast), transform 220ms var(--ease-spring);
}
.atag:hover { border-color: var(--blue-300); }
.atag:active { transform: scale(0.94); }
.atag.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* --- Consent gate --- */
.aterms { margin-top: var(--sp-5); display: grid; gap: var(--sp-4); }

.aterms__point {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--blue-line);
  animation: ar-fade-up 420ms var(--ease-out) both;
}
.aterms__point:nth-child(1) { animation-delay: 40ms; }
.aterms__point:nth-child(2) { animation-delay: 90ms; }
.aterms__point:nth-child(3) { animation-delay: 140ms; }
.aterms__point:nth-child(4) { animation-delay: 190ms; }
.aterms__point:nth-child(5) { animation-delay: 240ms; }

.aterms__point strong {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
}
.aterms__point span {
  display: block;
  margin-top: 3px;
  color: var(--ink-70);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.aterms__link {
  margin-top: var(--sp-5);
  color: var(--ink-70);
  font-size: var(--fs-sm);
}

/* The agreement itself — deliberately the loudest element on the screen. */
.aagree {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-base), background-color var(--t-base), box-shadow var(--t-base);
}
.aagree:hover { border-color: var(--blue-300); }
.aagree.is-on {
  background: var(--blue-050);
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}
.aagree input { position: absolute; opacity: 0; width: 0; height: 0; }

.aagree__box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  margin-top: 1px;
  background: var(--paper);
  border: 2px solid var(--surface-3);
  border-radius: 5px;
  color: #fff;
  transition: background-color var(--t-fast), border-color var(--t-fast),
              transform 240ms var(--ease-spring);
}
.aagree__box svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 260ms var(--ease-out);
}
.aagree.is-on .aagree__box {
  background: var(--blue);
  border-color: var(--blue);
  transform: scale(1.06);
}
.aagree.is-on .aagree__box svg { stroke-dashoffset: 0; }
.aagree input:focus-visible + .aagree__box { outline: 2px solid var(--blue); outline-offset: 2px; }

.aagree__text { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink); }

/* Continue is dead until the box is ticked */
.btn.is-disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- KYC photo guide ---
   The two artwork cards already carry their own headings, ticks and captions,
   so the page adds nothing around them beyond a frame. Stacked on a narrow
   phone where side-by-side would make the faces too small to read. */
.aguide {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (min-width: 560px) {
  .aguide { grid-template-columns: 1fr 1fr; align-items: start; }
}

.aguide__item {
  display: block;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  animation: ar-fade-up 460ms var(--ease-out) both;
}
.aguide__item:nth-child(2) { animation-delay: 90ms; }
.aguide__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Photo capture --- */
.ashot { margin-top: var(--sp-5); }

.ashot__preview { display: none; }
.ashot.has-photo .ashot__preview {
  display: block;
  margin-bottom: var(--sp-3);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  animation: ar-pop 340ms var(--ease-spring) both;
}
.ashot__preview img { width: 100%; height: auto; display: block; max-height: 46vh; max-height: 46dvh; object-fit: contain; background: var(--surface-2); }

.ashot__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-6) var(--sp-4);
  background: var(--surface);
  border: 2px dashed var(--surface-3);
  border-radius: var(--r-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-base), background-color var(--t-base), transform 220ms var(--ease-out);
}
.ashot__drop:hover { border-color: var(--blue-300); background: var(--blue-050); }
.ashot__drop:active { transform: scale(0.995); }
.ashot.has-photo .ashot__drop { padding: var(--sp-4); border-style: solid; border-color: var(--line); }

.ashot__icon { width: 40px; height: 40px; color: var(--blue); }
.ashot__icon svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ashot.has-photo .ashot__icon { width: 26px; height: 26px; }

.ashot__label { color: var(--ink); font-size: var(--fs-md); font-weight: 600; }
.ashot__hint { color: var(--ink-50); font-size: var(--fs-xs); }

.ashot.is-working .ashot__drop { pointer-events: none; opacity: 0.6; }
.ashot.is-working .ashot__icon { animation: ar-spin 900ms linear infinite; }

/* --- Review --- */
.areview__job {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--blue-050);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.areview__job span { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--fs-xs); }

.areview {
  margin-top: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.areview__row {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
}
.areview__row + .areview__row { border-top: 1px solid var(--line-soft); }
.areview__row:nth-child(odd) { background: var(--surface); }
.areview__row dt {
  color: var(--ink-50);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.areview__row dd { margin: 0; font-size: var(--fs-sm); line-height: 1.55; word-break: break-word; }

@media (min-width: 560px) {
  .areview__row { grid-template-columns: 150px 1fr; gap: var(--sp-4); align-items: baseline; }
}

.areview__shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.areview__shot { margin: 0; }
.areview__shot img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.areview__shot figcaption {
  margin-top: 4px;
  color: var(--ink-50);
  font-size: var(--fs-xs);
  text-align: center;
}

/* --- Success --- */
.adone { text-align: center; padding: var(--sp-6) 0; }
.adone h3 {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
}
.adone p { margin-top: var(--sp-3); color: var(--ink-70); font-size: var(--fs-md); line-height: 1.65; }
.adone__next { color: var(--ink-50) !important; font-size: var(--fs-sm) !important; }
.adone__actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }

.adone__tick { display: inline-block; width: 76px; height: 76px; color: var(--st-ok-fg); }
.adone__tick svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.adone__tick circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: ar-draw 520ms var(--ease-out) forwards;
  opacity: 0.35;
}
.adone__tick path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: ar-draw 380ms var(--ease-out) 380ms forwards;
}
@keyframes ar-draw { to { stroke-dashoffset: 0; } }

/* --- Footer --- */
/* Upload meter — sits directly above the wizard's footer while the
   application is on the wire, and is hidden the rest of the time. */
.aprog {
  flex: none;
  padding: var(--sp-3) var(--sp-5) 0;
}
.aprog[hidden] { display: none; }
.aprog__bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.aprog__bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
  transition: width 240ms var(--ease-out);
}
.aprog__label {
  margin-top: var(--sp-2);
  color: var(--ink-70);
  font-size: var(--fs-xs);
}
@media (prefers-reduced-motion: reduce) {
  .aprog__bar span { transition: none; }
}

.apply__foot {
  flex: none;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
}
.apply__back { flex: none; min-width: 96px; }
.apply__back[hidden] { display: none; }
.apply__next { flex: 1; }
.apply__next[hidden] { display: none; }

/* --------------------------------------------------------------------------
   19. Motion preferences — everything above degrades to plain, instant UI
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .btn:hover, .job:hover, .trust__item:hover, a.country:hover,
  .step:hover, .icon-btn:hover, .to-top:hover { transform: none !important; }
  .hero__video { animation: none !important; }
  /* The tick must still finish drawing, or the success screen looks empty. */
  .adone__tick circle, .adone__tick path { stroke-dashoffset: 0 !important; }
}

/* ==========================================================================
   19b. DOCUMENTARY THEME LAYER

   Structure comes from hairline rules and type scale, not from cards, boxes,
   gradients or glows. Photography is the only decoration the system allows —
   where a photograph is missing, the slot holds a flat tonal block rather
   than a striped placeholder, so an unfilled page still looks deliberate.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */
body { background: var(--surface); font-size: var(--fs-base); line-height: 1.7; }

/* Scroll-reveal elements start life translated sideways, which widened the
   document by a few pixels and put a horizontal scrollbar on phones. `clip`
   rather than `hidden` — it trims the overhang without turning the root into
   a scroll container, so the sticky header keeps working. */
html { overflow-x: clip; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.018em;
}
/* 500 rather than 600: it is the same colour on the page at these sizes, and
   it saves shipping a whole extra weight of the serif to every phone. */
h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

a { color: var(--teal); text-decoration-color: var(--surface-3); text-underline-offset: 4px; }
a:hover { color: var(--teal-deep); text-decoration-color: currentColor; }
::selection { background: var(--cyan-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}

.skip-link { background: var(--ink); border-radius: var(--r-sm); }

/* Tonal bands, no borders — the tone change is the boundary */
.section--tint { background: var(--surface-2); border-block: 0; }

/* Flat navy. No aura, no radial gradient. */
.section--dark {
  position: relative;
  background: var(--blue-900);
  color: var(--on-dark);
  border-block: 0;
}
.section--dark::before { content: none; }
.section--dark p { color: rgba(244, 241, 236, 0.78); }

/* The eyebrow is a tracked small-caps label sitting above a rule, which is
   the editorial way of doing what the underlined cyan chip was doing. */
.eyebrow {
  display: block;
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 2px solid var(--ink);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.eyebrow--light { border-top-color: var(--cyan-soft); color: var(--cyan-soft); }
.eyebrow::after { content: none; }
.center .eyebrow { display: inline-block; }

.section__head { max-width: 34ch; }
.section__head--row { max-width: none; }
.section__title { color: var(--ink); }
.section__lead {
  max-width: 58ch;
  color: var(--ink-70);
  font-size: var(--fs-md);
  line-height: 1.7;
}
.note { color: var(--ink-50); font-size: var(--fs-sm); }

/* --- Buttons ------------------------------------------------------------- */
/* Flat fills and hairline outlines. The gradient, the sheen sweep and the
   click ripple were three separate tells; all three are switched off. */
.btn {
  border-radius: var(--r-sm);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  min-height: 52px;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn::before { content: none; }
.btn:hover { transform: none; }
.btn:active { transform: none; }
.ripple { display: none; }

.btn--primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: none;
}
.btn--primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; box-shadow: none; }

.btn--outline {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); box-shadow: none; }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-70);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); box-shadow: none; }

.btn--onDark { background: var(--surface); border-color: var(--surface); color: var(--ink); }
.btn--onDark:hover { background: #fff; border-color: #fff; color: var(--ink); box-shadow: none; }

.btn--sm { min-height: 40px; font-size: var(--fs-xs); }
.btn--lg { min-height: 56px; font-size: var(--fs-base); }

.section--dark .btn--outline,
.site-footer .btn--outline { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.section--dark .btn--outline:hover,
.site-footer .btn--outline:hover { background: #fff; border-color: #fff; color: var(--ink); }

.link-btn { font-family: var(--font-label); color: var(--teal); }
.link-btn:hover { color: var(--teal-deep); transform: none; }

/* --- Form controls ------------------------------------------------------- */
.field label {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
}

/* background-color, not the shorthand — the select keeps its chevron image */
.field input,
.field select,
.field textarea {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--surface-3); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  background-color: var(--paper);
  border-color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B3261E; box-shadow: inset 0 0 0 1px #B3261E; }
.field:focus-within label { color: var(--teal); }

.field__control .field__icon { stroke: var(--ink-50); }
.field__help { color: var(--ink-50); font-size: var(--fs-sm); }
.field__error { font-family: var(--font-label); font-weight: 600; }

/* Panels are paper with a hairline, never floating */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
}
.form-status { border-radius: var(--r-sm); }

/* --- Header -------------------------------------------------------------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header.is-stuck {
  background: rgba(246, 244, 240, 0.94);
  box-shadow: none;
  border-bottom-color: var(--surface-3);
}

.logo__mark { width: 4px; height: 30px; border-radius: 0; background: var(--teal); }
.logo:hover .logo__mark { background: var(--ink); transform: none; }
.logo__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.logo__sub {
  font-family: var(--font-label);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--ink-50);
}

/* Back control — icon only on small phones where header room is tight, icon
   plus label from 560px up. */
.back-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 38px;
  padding: 0.35rem 0.45rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-70);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.back-btn[hidden] { display: none; }
.back-btn svg {
  flex: none;
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.back-btn { min-height: 44px; }
.back-btn:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.back-btn:active { transform: none; }
.back-btn__label { display: none; }

@media (min-width: 560px) {
  .back-btn { padding: 0.35rem 0.7rem 0.35rem 0.5rem; }
  .back-btn__label { display: inline; }
}

/* --- Language picker ----------------------------------------------------- */
.lang-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  margin-inline-start: auto;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.lang-btn:hover { border-color: var(--ink); }
.lang-btn svg {
  flex: none;
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
}

.langpick { position: fixed; inset: 0; z-index: 200; }
.langpick__scrim {
  position: absolute; inset: 0;
  background: rgba(22, 19, 15, 0.5);
  animation: ar-fade-in 200ms var(--ease-out) both;
}
.langpick__panel {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  max-height: 86vh;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 2px solid var(--ink);
  animation: ar-slide-up 280ms var(--ease-out) both;
}
@media (min-width: 700px) {
  .langpick__panel {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 3rem));
    max-height: 78vh;
    max-height: 78dvh;
    border: 1px solid var(--ink);
    animation: ar-fade-in 200ms var(--ease-out) both;
  }
}

.langpick__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--gutter) var(--sp-2);
}
.langpick__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--ink);
}
.langpick__close {
  flex: none;
  width: 44px; height: 44px;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}
.langpick__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.langpick__note {
  padding: 0 var(--gutter) var(--sp-4);
  color: var(--ink-50);
  font-size: var(--fs-sm);
}

.langpick__list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.langpick__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) var(--gutter);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.langpick__item:hover { background: var(--surface-2); }
.langpick__item.is-on { background: var(--ink); color: var(--surface); }
.langpick__own {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
}
.langpick__alt { color: var(--ink-50); font-size: var(--fs-sm); }
.langpick__item.is-on .langpick__alt { color: rgba(246, 244, 240, 0.7); }
/* Marks the languages whose interface text is written, not just detected. */
.langpick__tick { margin-inline-start: auto; color: var(--teal); font-size: var(--fs-sm); }
.langpick__item.is-on .langpick__tick { color: var(--cyan-soft); }

@keyframes ar-slide-up { from { transform: translateY(100%); } to { transform: none; } }

/* --- Right-to-left ------------------------------------------------------- */
/* Latin-script data inside RTL text gets reordered by the bidi algorithm:
   "+964 750 000 0000" was rendering as "0000 000 750 964+", which is worse
   than useless on a page whose main action is "call us". Isolating these runs
   keeps them in their own direction without affecting the sentence around
   them. Applies in both directions so nothing regresses in English. */
/* Scoped to the elements whose text IS the number or address — not to a whole
   card that happens to be wrapped in a tel: link, which would flip its layout. */
a[href^="tel:"]:not(.qcontact__card),
a[href^="mailto:"]:not(.qcontact__card),
.qcontact__value,
.contact__link,
.job__ref,
.job__salary,
.status-meta dd,
code,
time,
.visa-form input {
  direction: ltr;
  unicode-bidi: isolate;
}
/* …but keep them sitting on the correct edge of an RTL line. */
[dir="rtl"] .qcontact__value,
[dir="rtl"] .contact__link,
[dir="rtl"] .job__ref { text-align: right; }

/* Most of the layout already uses logical properties. These are the places
   that were still hard-coded to the left edge. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero__eyebrow { text-align: right; }
[dir="rtl"] .founder__quote { border-left: 0; border-right: 4px solid var(--cyan-dim); padding: var(--sp-2) var(--sp-5) var(--sp-2) 0; }
[dir="rtl"] .legal__callout { border-left: 0; border-right: 2px solid var(--ink); padding-left: 0; padding-right: var(--sp-5); }
[dir="rtl"] .apply-note { border-left: 0; border-right: 2px solid var(--teal); padding: var(--sp-2) var(--sp-4) var(--sp-2) 0; }
[dir="rtl"] .job__flag { left: auto; right: 0; }
[dir="rtl"] .to-top,
[dir="rtl"] .hero__toggle { right: auto; left: var(--gutter); }
[dir="rtl"] .back-btn svg { transform: scaleX(-1); }
[dir="rtl"] .field__control .field__icon { left: auto; right: 0.9rem; }
[dir="rtl"] .field__control input { padding-left: 0.9rem; padding-right: 2.7rem; }
[dir="rtl"] .mobile-nav__list a::before { left: auto; right: 0; }
[dir="rtl"] .mobile-nav__list a:hover,
[dir="rtl"] .mobile-nav__list a[aria-current="page"] { padding-left: 0; padding-right: 0.85rem; }

.nav-desktop a {
  font-family: var(--font-label);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-70);
}
.nav-desktop a::after { background: var(--ink); height: 1px; }
.nav-desktop a:hover { transform: none; color: var(--ink); }
.nav-desktop a[aria-current="page"] { color: var(--ink); }

.nav-toggle {
  border-radius: var(--r-sm);
  border-color: var(--line);
  color: var(--ink);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-toggle:hover { background: transparent; border-color: var(--ink); }
.nav-toggle__bars i { background: var(--ink); }

.mobile-nav { background: var(--surface); border-top-color: var(--line); box-shadow: none; }
.mobile-nav__list li + li { border-top-color: var(--line-soft); }
.mobile-nav__list a {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  border-radius: 0;
}
.mobile-nav__list a::before { background: var(--teal); }
.mobile-nav__list a:hover,
.mobile-nav__list a[aria-current="page"] { color: var(--teal); }

.scroll-progress__bar { background: var(--teal); box-shadow: none; }

/* --- Hero ---------------------------------------------------------------- */
.hero { background: var(--ink); }
.hero__media { background: var(--ink); }

/* The still is the base layer and the only layer on a phone. The clip, when
   one is loaded at all, fades in on top once it can paint a frame. */
.hero__still,
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slideshow layers stack on the still in DOM order, so a later slide always
   paints above an earlier one.

   Only ever ONE layer animates. The incoming slide fades in on top of a fully
   opaque picture below it — never a cross-fade where both are half
   transparent, which let the layers underneath show through and washed the
   image out in the middle of every transition. script.js drops the covered
   layers to zero afterwards, with the transition suppressed so it is
   invisible.

   A symmetric ease reads smoother than a decelerate curve for opacity: the
   fade starts and ends gently instead of lurching away from the first frame. */
.hero__slide {
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.45, 0, 0.55, 1);
  will-change: opacity;
  /* Own compositing layer, so the fade never repaints the text above it. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero__slide.is-on { opacity: 1; }
/* Set by script.js while re-stacking, so hidden layers snap without animating. */
.hero__slide.is-instant { transition: none; }

/* A cross-fade is motion. Anyone who asked their OS for less of it gets the
   first frame and nothing more — enforced in script.js too, this is belt and
   braces for the transition itself. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}
.hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.hero__video.is-ready { opacity: 1; }
.hero__toggle[hidden] { display: none; }
.hero__scrim {
  background: linear-gradient(to top,
    rgba(12, 10, 8, 0.92) 0%,
    rgba(12, 10, 8, 0.74) 45%,
    rgba(12, 10, 8, 0.38) 78%,
    rgba(12, 10, 8, 0.30) 100%);
}
.hero__eyebrow {
  display: inline-block;
  padding-top: var(--sp-3);
  border-top: 2px solid rgba(255, 255, 255, 0.55);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #fff;
}
.hero__title {
  max-width: 14ch;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.hero__text { max-width: 46ch; color: rgba(255, 255, 255, 0.84); font-size: var(--fs-md); }
.hero__toggle {
  border-radius: var(--r-sm);
  background: rgba(12, 10, 8, 0.5);
  border-color: rgba(255, 255, 255, 0.45);
}
.hero__toggle:hover { background: rgba(12, 10, 8, 0.85); border-color: #fff; }

/* The departure board flips its flaps in 3D; reduced motion swaps text
   instantly (script.js skips the letter roll) so only the animation dies. */
@media (prefers-reduced-motion: reduce) {
  .board__row { transition: none; }
  .flap.is-flipping .flap__inner { animation: none; }
}

@media (min-width: 1024px) {
  .hero__scrim {
    background: linear-gradient(to right,
      rgba(12, 10, 8, 0.92) 0%,
      rgba(12, 10, 8, 0.72) 46%,
      rgba(12, 10, 8, 0.26) 100%);
  }
}

/* --- Trust: rule-topped columns, not cards ------------------------------- */
.trust__item {
  display: block;
  padding: var(--sp-4) 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
}
.trust__item:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.trust__icon {
  display: block;
  width: 26px; height: 26px;
  margin-bottom: var(--sp-4);
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--teal);
}
.trust__item:hover .trust__icon { transform: none; background: transparent; color: var(--teal); }
.trust__item h3 { font-size: var(--fs-h3); color: var(--ink); }
.trust__item p { margin-top: var(--sp-3); color: var(--ink-70); font-size: var(--fs-sm); line-height: 1.65; }

/* --- About + figures ----------------------------------------------------- */
.about__lead {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.about__content > p + p { color: var(--ink-70); font-size: var(--fs-base); line-height: 1.75; }

/* Figures on a rule, the way a report sets them — not three floating tiles */
.about__stats {
  gap: 0;
  margin-top: var(--sp-8);
  padding-top: 0;
  border-top: 2px solid var(--ink);
}
.about__stats li {
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
}
.about__stats li:hover { transform: none; box-shadow: none; }
.about__stat-n {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.about__stat-l {
  max-width: 22ch;
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
}
@media (min-width: 560px) {
  .about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .about__stats li { border-bottom: 0; }
}

/* --- Founder ------------------------------------------------------------- */
.founder {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.founder:hover { box-shadow: none; transform: none; }
.founder__figure { margin-top: var(--sp-5); }
.founder__photo { aspect-ratio: 4 / 5; border-radius: 0; }
.founder:hover .founder__photo { transform: none; }
.founder__figure::after { content: none; }
.founder__badge {
  position: static;
  display: block;
  margin-top: var(--sp-3);
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ink-50);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
}
.founder__body { padding: var(--sp-6) 0 0; }
.founder__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.founder__role {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* Facts as a ruled list, the way a profile box is set in print */
.founder__facts {
  display: grid;
  grid-template-columns: none;
  gap: 0;
  margin: var(--sp-5) 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
}
.founder__facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.founder__facts dt {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-50);
}
.founder__facts dd { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }

.founder__bio { color: var(--ink-70); font-size: var(--fs-base); line-height: 1.75; }

/* A real pull quote: serif, large, hung on a rule */
.founder__quote {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) 0 0;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
}
.founder__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.founder__quote::before { content: none; }

.social { border-radius: var(--r-sm); font-family: var(--font-label); font-weight: 500; }
.social:hover { background: transparent; border-color: var(--ink); transform: none; box-shadow: none; }

/* --- Countries: a ruled index, not a grid of tiles ----------------------- */
.regions { gap: var(--sp-9); }
.region__head { border-bottom: 2px solid var(--ink); padding-bottom: var(--sp-3); }
.region__head::after { content: none; }
.region__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  text-transform: none;
  color: var(--ink);
}
.region__count {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* A ruled index wants the full column width — two narrow columns squeezed the
   name and the count into each other on a phone. */
.countries { grid-template-columns: 1fr; gap: 0; }
.country {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 62px;
  padding: var(--sp-4) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  overflow: visible;
}
.country::after { content: none; }
a.country:hover {
  transform: none;
  box-shadow: none;
  border-bottom-color: var(--ink);
  background: transparent;
}
.country__row { display: flex; align-items: baseline; gap: 0.7rem; flex: 1 1 auto; }
/* Platforms that draw regional-indicator flags show the flag; Windows falls
   back to the country code, which reads as a deliberate index mark either way */
.country__flag {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 2.1rem;
  height: auto;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--ink-50);
}
.country__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
a.country:hover .country__name { color: var(--teal); transform: none; }
.country__meta {
  flex: none;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-50);
  text-align: right;
}
a.country:hover .country__meta { background: transparent; color: var(--teal); }
@media (min-width: 560px) { .countries { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); } }
@media (min-width: 900px) { .countries { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-9); } }

/* --- Job filters --------------------------------------------------------- */
.filters {
  padding: var(--sp-6) 0;
  margin-bottom: var(--sp-7);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.filters:focus-within { box-shadow: none; border-color: var(--ink); }
.filters__foot { border-top-color: var(--line); }
.filters__count { font-family: var(--font-label); font-weight: 600; color: var(--ink); }

/* --- Job cards ----------------------------------------------------------- */
.job {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
  transition: border-color var(--t-base);
}
.job:hover { border-color: var(--ink); transform: none; box-shadow: none; }
.job:hover .job__media > *:not(.job__flag) { transform: none; }

/* Country reads as a caption over the image, the way a photo credit does */
.job__flag {
  top: auto;
  bottom: 0; left: 0;
  padding: 0.4rem 0.7rem;
  background: rgba(12, 10, 8, 0.78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.job:hover .job__flag { transform: none; background: rgba(12, 10, 8, 0.9); }

.job__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.job:hover .job__title { color: var(--ink); }
.job__location { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--ink-50); }
.job__location svg { stroke: var(--ink-50); }

/* The salary is the number people came for — it gets its own line on a phone
   rather than being squeezed into a half-width column and wrapping. */
.job__facts {
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
@media (min-width: 420px) { .job__facts { grid-template-columns: 1fr 1fr; } }
.job:hover .job__facts { background: transparent; border-color: var(--line); }
.job__facts dt {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-50);
}
.job__facts dd { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.job__facts .job__salary {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Tags are set as tracked small caps with air between them rather than as
   chips. No dot separators: they wrap, and a separator that starts a line
   reads as a bullet. */
.tag {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--ink-50);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.tag:hover { transform: none; }
.job__tags { gap: 0.4rem 1.1rem; }
.tag--muted { background: transparent; color: var(--ink-50); font-weight: 500; }

.job__desc { color: var(--ink-70); font-size: var(--fs-sm); line-height: 1.7; }

.icon-btn {
  width: 52px; height: 52px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-50);
}
.icon-btn:hover { border-color: var(--ink); background: transparent; color: var(--ink); transform: none; box-shadow: none; }
.icon-btn:active { transform: none; }
.icon-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.job__ref {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--ink-50);
  border-top-color: var(--line);
}
.jobs__empty { border-radius: var(--r-md); border-color: var(--line); }

/* --- Photo slots --------------------------------------------------------- */
/* A missing photograph holds a flat tonal block with a quiet caption. The old
   diagonal-stripe placeholder announced "unfinished" on every single card. */
.ph {
  background: var(--blue-900);
  border: 0;
  border-radius: 0;
}
.ph__label {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.34);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
}
.ph--employers { background: var(--blue-900); border: 0; }
.job__media--photo.is-broken {
  background: var(--blue-900);
  border-bottom: 0;
}

/* --- Visa status --------------------------------------------------------- */
.visa-form input { font-family: var(--font-label); letter-spacing: 0.14em; font-weight: 500; }
.status-pill {
  border-radius: var(--r-sm);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.status-pill::before { animation: none !important; }
.status-updated,
.status-loading { font-family: var(--font-label); font-size: var(--fs-sm); color: var(--ink-50); }

.status-meta {
  padding: var(--sp-5) 0;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.status-meta dt {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-50);
}
.status-meta dd { font-size: var(--fs-sm); font-weight: 500; }

.status-steps li {
  border-top-width: 2px;
  border-top-color: var(--surface-3);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.status-steps li::before { background: var(--teal); height: 2px; top: -2px; }
.status-steps li.is-done { border-top-color: var(--surface-3); color: var(--ink); }
.status-steps li.is-done .step-n { color: var(--teal); }
.status-steps li.is-current .step-n::after { background: var(--teal); animation: none; }

.status-legend > div {
  padding: var(--sp-5) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
}
.status-legend > div:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.status-docs li::before { background: var(--teal); border-radius: 50%; }

.copy-btn { font-family: var(--font-label); border-radius: var(--r-sm); }
.copy-btn:hover { background: var(--surface-2); transform: none; }

/* --- Employers + process ------------------------------------------------- */
.employers__list li { color: rgba(244, 241, 236, 0.78); }
.employers__list li::before { background: var(--cyan-soft); height: 1px; top: 0.8em; }

.steps { gap: var(--sp-6); }
.step { border-top: 2px solid var(--ink); padding-top: var(--sp-4); }
.step__n {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-50);
}
.step h3 { font-size: var(--fs-h3); color: var(--ink); }
.step p { color: var(--ink-70); font-size: var(--fs-sm); line-height: 1.65; }

.teaser .section__title { color: #fff; }

/* --- Contact ------------------------------------------------------------- */
.qcontact { display: grid; gap: 0; margin-bottom: var(--sp-8); border-top: 2px solid var(--ink); }
@media (min-width: 720px) { .qcontact { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); } }

.qcontact__card {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-decoration: none;
}
.qcontact__card:hover { transform: none; box-shadow: none; border-bottom-color: var(--ink); }
.qcontact__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--teal);
}
.qcontact__icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.qcontact__card:hover .qcontact__icon { background: transparent; color: var(--teal); }
.qcontact__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.qcontact__value { display: block; margin-top: 2px; color: var(--ink-70); font-size: var(--fs-base); }
.qcontact__hint {
  display: inline-block;
  margin-top: var(--sp-3);
  color: var(--teal);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.qcontact__card:hover .qcontact__hint { transform: none; }

.contact__details {
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
}
.contact__details li + li { border-top-color: var(--line); }
.contact__label {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-50);
}
.contact__link {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  text-decoration-color: var(--surface-3);
  text-decoration-thickness: 1px;
}
.contact__link:hover { color: var(--teal); text-decoration-color: currentColor; }
.contact__text { color: var(--ink-70); font-size: var(--fs-sm); }

/* --- Legal --------------------------------------------------------------- */
.legal h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  color: var(--ink);
}
.legal p { font-size: var(--fs-base); line-height: 1.8; }
.legal ul li::before { background: var(--surface-3); border-radius: 50%; }
.legal__toc {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--ink);
}
.legal__toc h2 {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-50);
}
.legal__toc a:hover { color: var(--teal); }
.legal__callout {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--ink);
  border-radius: 0;
  padding-left: var(--sp-5);
}
.legal__contact {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: var(--sp-5) 0 0;
}
.legal__contact strong {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-50);
}

.apply-note {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--teal);
  border-radius: 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
}

/* --- Page head ----------------------------------------------------------- */
.page-head {
  padding-block: var(--sp-6) var(--sp-9);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.page-head::after { content: none; }
.page-head__inner { max-width: 22ch; }
.page-head__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.page-head .section__lead { max-width: 54ch; margin-top: var(--sp-5); }
.section--dark .section__title,
.section--dark h2,
.section--dark h3 { color: #fff; }

.crumbs { font-family: var(--font-label); font-size: var(--fs-xs); }
.crumbs li { letter-spacing: 0.06em; }
.crumbs a:hover { color: var(--teal); }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--blue-900); color: var(--on-dark-70); }
.site-footer::before { content: none; }
.logo--footer .logo__name { color: #fff; }
.logo--footer .logo__sub { color: rgba(255, 255, 255, 0.5); }
.logo--footer .logo__mark { background: var(--cyan-soft); }
.footer__title {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
}
.footer__col a { color: var(--on-dark-70); }
.footer__col a:hover { color: #fff; text-decoration-color: #fff; }
.footer__bottom {
  border-top-color: var(--line-dark);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}

/* --- Touch targets ------------------------------------------------------- */
/* Most visitors arrive on a phone, so anything tappable clears 44px. Footer
   and legal links were sitting at 24px — readable, but a thumb-width miss. */
.footer__col li + li { margin-top: 0; }
.footer__col a,
.footer__col li {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.legal__toc a { min-height: 44px; }
.note a { display: inline-block; padding-block: 0.6rem; }
.social { min-height: 46px; }
.logo { min-height: 44px; }

/* Grey flash on tap is a browser default that reads as a rendering glitch on
   a design this flat; the :active states already give feedback. */
a, button, .country, .job, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* The jobs page renders 30 cards. Letting the browser skip layout and paint
   for the ones far off-screen is most of a frame's work on a cheap phone.
   The intrinsic size keeps the scrollbar honest so the page does not jump. */
.jobs .job {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

@media (min-width: 700px) {
  /* Back to a compact list once there is a pointer rather than a thumb. */
  .footer__col a,
  .footer__col li { min-height: 34px; }
}

/* Thumbs, not cursors: the whole link row becomes a comfortable target */
@media (max-width: 719px) {
  .footer__col a,
  .footer__col li {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

.to-top {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
}
.to-top:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: none; }

.toast { border-radius: var(--r-sm); font-family: var(--font-label); }
.toast--ok .toast__dot { background: var(--cyan); }

/* Apply wizard — flat selection states, no tinted fills */
.achoice { border-radius: var(--r-sm); }
.achoice:hover { border-color: var(--ink); background: transparent; }
.achoice.is-on { border-color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
.achoice.is-on .achoice__dot { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--ink); }

.atag { border-radius: var(--r-sm); font-family: var(--font-label); font-weight: 500; }
.atag:hover { border-color: var(--ink); background: transparent; }
.atag.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.aagree:hover { border-color: var(--ink); }
.aagree.is-on { background: transparent; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.aagree.is-on .aagree__box { background: var(--ink); border-color: var(--ink); }
.aagree input:focus-visible + .aagree__box { outline-color: var(--teal); }

.astep__input:focus { border-bottom-color: var(--teal); }

/* Date of birth — the platform picker, with the derived age echoed under it */
.astep__input--date {
  font-family: var(--font-label);
  font-size: var(--fs-base);
  min-height: 56px;
}
[data-aderived]:empty { display: none; }
[data-aderived] {
  margin-top: var(--sp-3);
  font-family: var(--font-label);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--teal);
}

/* Single-choice steps are a closed <select>, so the platform draws its own
   picker: the wheel on iOS, the dialog on Android, the OS menu on desktop.
   Nothing here may set a height or a size, or it becomes an inline list box
   and the native picker never opens. */
.astep__input--search { margin-bottom: var(--sp-2); }
.astep__input--select {
  font-size: var(--fs-base);       /* 16px — anything smaller zooms iOS in */
}
.astep__input--select option { color: var(--ink); }
.astep__input--select option:disabled { color: var(--surface-3); }

/* Languages: the platform's multi-picker. This one is an open list by design
   — that is how a multiple select is drawn — so it keeps a height. */
.astep__input--multi {
  min-height: 260px;
  padding: 0;
  background-image: none;
  font-size: var(--fs-base);
}
.astep__input--multi option { padding: 0.7rem 0.9rem; color: var(--ink); }
.astep__input--multi option:disabled { color: var(--surface-3); padding: 0.2rem 0.9rem; }
.astep__input--multi option:checked {
  background: var(--ink);
  color: var(--surface);
}

/* Phone: the dialling code and the number on one row. The code sizes itself
   to its content so a long country name does not squeeze the number out. */
.aphone { display: flex; gap: var(--sp-2); align-items: stretch; }
.aphone__cc {
  flex: 0 1 auto;
  min-width: 7.5rem;
  max-width: 45%;
  font-size: var(--fs-base);
}
.aphone__num { flex: 1 1 auto; min-width: 0; font-size: var(--fs-base); }
.ashot__drop:hover { border-color: var(--ink); background: transparent; }
.ashot__icon { color: var(--ink-50); }

.apply__panel { border-radius: var(--r-md) var(--r-md) 0 0; }
.apply__progress { background: var(--surface-2); border-radius: 0; }
.apply__progress-bar { background: var(--teal); }
.apply__count,
.apply__job { font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: 0.06em; }
.apply__close { border-radius: var(--r-sm); }

/* --------------------------------------------------------------------------
   19d. MODERN EXECUTIVE TECH LAYER
   A complete retheme over the documentary base: midnight navy, champagne
   accents, glass materials and soft depth, executed for today's premium
   corporate web while keeping the formal, verifiable recruitment voice.
   -------------------------------------------------------------------------- */

/* --- Roots -------------------------------------------------------------- */
body {
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--cyan); color: #fff; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--r-sm); }

/* --- Rhythm ------------------------------------------------------------- */
.section { padding-block: clamp(4.5rem, 9vw, 7.75rem); }
.section--tint {
  background: var(--surface);
  border: 0;
}
.section--dark {
  background:
    radial-gradient(130% 150% at 85% -12%, rgba(14, 165, 201, 0.34) 0%, rgba(14, 165, 201, 0) 55%),
    var(--grad-dark);
  border: 0;
}

/* --- Section heads ------------------------------------------------------ */
.section__head { max-width: 40ch; margin-bottom: var(--sp-8); }
.section__title {
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  letter-spacing: -0.026em;
  line-height: 1.02;
}
.section__lead { color: var(--ink-70); line-height: 1.75; max-width: 58ch; }

/* Kicker — champagne dash + tracked label on a hairline base */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0;
  border: 0;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 1px;
  background: var(--grad-gold);
  border-radius: 1px;
}
.eyebrow--light { color: var(--cyan-soft); }
.eyebrow--light::before { background: var(--grad-gold); }
.center .eyebrow { display: inline-flex; }

/* --- Glass helper ------------------------------------------------------- */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass {
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
}

/* --- Header ------------------------------------------------------------- */
.site-header {
  background: rgba(251, 251, 249, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(221, 224, 225, 0.7);
  transition: box-shadow var(--t-base), border-color var(--t-base), background-color var(--t-base);
}
.site-header.is-stuck {
  background: rgba(251, 251, 249, 0.9);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 8px 30px -18px rgba(12, 22, 38, 0.28);
}

.logo__mark {
  width: 4px;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(var(--gold-soft), var(--gold));
}
.logo:hover .logo__mark { background: var(--grad-gold); transform: none; }
.logo__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.logo__sub {
  color: var(--ink-50);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
}

.nav-desktop ul { gap: clamp(1.5rem, 2.6vw, 2.4rem); }
.nav-desktop a {
  font-family: var(--font-label);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-70);
}
.nav-desktop a::after {
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold);
}
.nav-desktop a:hover { color: var(--ink); transform: none; }
.nav-desktop a[aria-current="page"] { color: var(--blue-700); font-weight: 600; }

.header__cta { border-radius: var(--r-sm); }

.nav-toggle,
.lang-btn {
  border-radius: var(--r-sm);
  border-color: var(--line);
  color: var(--ink);
  font-family: var(--font-label);
}
.nav-toggle:hover, .lang-btn:hover { border-color: var(--blue-300); background: transparent; }
.nav-toggle__bars i { background: var(--ink); }

.mobile-nav {
  background: rgba(251, 251, 249, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 24px 50px -30px rgba(12, 22, 38, 0.4);
}
.mobile-nav__list a {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--ink);
}
.mobile-nav__list a::before { background: var(--grad-gold); }
.mobile-nav__list a:hover,
.mobile-nav__list a[aria-current="page"] { color: var(--blue-700); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  position: relative;
  overflow: visible;
  border-radius: var(--r-sm);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  min-height: 54px;
  transition:
    background-color var(--t-fast),
    background-image var(--t-base),
    border-color var(--t-fast),
    color var(--t-fast),
    box-shadow 300ms var(--ease-out),
    transform 300ms var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn::before { content: none; }
.ripple { display: none; }

.btn--primary {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 28px -14px rgba(12, 39, 66, 0.6);
}
.btn--primary:hover {
  background-image: linear-gradient(135deg, #0D4B8F 0%, #1663B0 55%, #0EA5C9 130%);
  color: #fff;
  box-shadow: 0 18px 40px -16px rgba(12, 39, 66, 0.7);
}

.btn--outline {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(12, 22, 38, 0.04);
}
.btn--outline:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--paper);
  box-shadow: var(--shadow-2);
}

.btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-70); }
.btn--ghost:hover { border-color: var(--blue-300); color: var(--ink); }

.btn--onDark {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--onDark:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.6);
}

.btn--sm { min-height: 42px; font-size: 0.75rem; }
.btn--lg { min-height: 58px; font-size: 0.875rem; }

/* Champagne primary inside the navy fields (hero, dark teaser, footer) */
.hero .btn--primary,
.section--dark .btn--primary,
.site-footer .btn--primary {
  background: var(--grad-gold);
  color: var(--blue-900);
  box-shadow: 0 14px 32px -14px rgba(12, 22, 38, 0.5);
}
.hero .btn--primary:hover,
.section--dark .btn--primary:hover,
.site-footer .btn--primary:hover {
  background: linear-gradient(120deg, #F0DBA6, #C29A55);
  color: var(--blue-900);
  box-shadow: 0 20px 44px -16px rgba(12, 22, 38, 0.6);
}

.section--dark .btn--outline,
.site-footer .btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.section--dark .btn--outline:hover,
.site-footer .btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

/* --- Forms -------------------------------------------------------------- */
.field label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.field input,
.field select,
.field textarea {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast), box-shadow 260ms var(--ease-out), background-color var(--t-fast);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--surface-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--ring);
  background-color: var(--paper);
}
.field select:focus { background-position: right 0.7rem center; }
.field__control .field__icon { stroke: var(--ink-50); }
.field:focus-within label { color: var(--teal); }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

/* Jobs page — the filter board becomes a floating white control panel */
.filters {
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.filters:focus-within { box-shadow: var(--shadow-2); border-color: var(--blue-line); }
.filters__foot { border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); }
.filters__count { font-family: var(--font-label); font-weight: 600; color: var(--ink); }
@media (min-width: 768px) { .filters { padding: var(--sp-7); } }

/* --- Hero --------------------------------------------------------------- */
.hero { background: var(--blue-900); }
.hero__media { background: var(--blue-900); }

/* Light tech grid over the footage — masked so it fades toward the corners */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 45%, #000 0%, transparent 100%);
  mask-image: radial-gradient(75% 75% at 50% 45%, #000 0%, transparent 100%);
  pointer-events: none;
}
.hero__video { z-index: 1; }
.hero__still,
.hero__slide { z-index: 0; }

.hero__scrim {
  z-index: 3;
  background:
    linear-gradient(to top,
      rgba(5, 11, 20, 0.96) 0%,
      rgba(5, 11, 20, 0.80) 42%,
      rgba(5, 11, 20, 0.34) 76%,
      rgba(5, 11, 20, 0.26) 100%),
    radial-gradient(60% 42% at 82% 6%, rgba(23, 147, 159, 0.30) 0%, rgba(23, 147, 159, 0) 60%);
}
@media (min-width: 1024px) {
  .hero__scrim {
    background:
      linear-gradient(to right,
        rgba(5, 11, 20, 0.96) 0%,
        rgba(5, 11, 20, 0.80) 44%,
        rgba(5, 11, 20, 0.30) 82%,
        rgba(5, 11, 20, 0.18) 100%);
  }
}

.hero__inner { position: relative; z-index: 4; }

/* Eyebrow chip */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.hero__eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 0 5px rgba(223, 198, 145, 0.12), 0 0 14px rgba(223, 198, 145, 0.7);
}

.hero__title {
  max-width: 15ch;
  font-size: clamp(2.9rem, 1.8rem + 4.6vw, 5.25rem);
  line-height: 0.99;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(5, 11, 20, 0.35);
}
.hero__text {
  max-width: 50ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-md);
  line-height: 1.7;
}
.hero__actions { margin-top: var(--sp-7); }

/* Quick-facts strip */
.hero__foot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 660px;
}
.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.hero__facts li { display: flex; flex-direction: column; gap: 3px; }
.hero__facts li + li {
  padding-inline-start: var(--sp-4);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__facts strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: lining-nums tabular-nums;
}
.hero__facts span {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 559px) {
  .hero__facts { gap: var(--sp-3); }
  .hero__facts li + li { padding-inline-start: var(--sp-3); }
}

/* Scroll cue */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--sp-7) + 2px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t-fast);
}
.hero__scroll:hover { color: #fff; }
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.22);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--gold-soft), transparent);
  transform: translateY(-100%);
  animation: ar-scrollcue 2.2s var(--ease-in-out) infinite;
}
@keyframes ar-scrollcue { to { transform: translateY(100%); } }
.hero__scroll-text { writing-mode: vertical-rl; text-orientation: mixed; }
@media (max-width: 1023px) { .hero__scroll { display: none; } }
[dir="rtl"] .hero__scroll { right: auto; left: var(--gutter); }

/* --- Trust cards -------------------------------------------------------- */
.trust {
  display: grid;
  gap: var(--sp-5);
  counter-reset: trust;
}
.trust__item {
  position: relative;
  display: flex;
  flex-direction: column;
  counter-increment: trust;
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(12, 22, 38, 0.04);
  transition: transform 340ms var(--ease-out), box-shadow 340ms var(--ease-out),
              border-color 340ms var(--ease-out);
}
.trust__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: var(--blue-line);
}
.trust__item::before {
  content: "0" counter(trust);
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}
.trust__icon {
  flex: none;
  width: 46px;
  height: 46px;
  padding: 11px;
  margin-bottom: var(--sp-5);
  border-radius: 13px;
  background: linear-gradient(135deg, #0A2A4F, #0EA5C9);
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(10, 27, 49, 0.55);
  transition: transform 360ms var(--ease-spring), box-shadow var(--t-base);
}
.trust__icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trust__item:hover .trust__icon {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 34px -12px rgba(10, 27, 49, 0.65);
}
.trust__item h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; color: var(--ink); }
.trust__item p { margin-top: var(--sp-2); color: var(--ink-70); font-size: var(--fs-sm); line-height: 1.7; }

/* --- About + founder ---------------------------------------------------- */
.about__lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.about__content > p + p { color: var(--ink-70); font-size: var(--fs-base); line-height: 1.8; }

.about__stats {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.about__stats li { display: flex; flex-direction: column; gap: 4px; }
.about__stat-n {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.2rem + 3vw, 4.25rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: lining-nums tabular-nums;
}
.about__stat-l {
  color: var(--ink-50);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
@media (min-width: 560px) { .about__stats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

/* Founder — a portrait card, not a rule-bound box */
.founder {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  transition: transform 360ms var(--ease-out), box-shadow 360ms var(--ease-out);
}
.founder:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.founder__figure { margin: 0; position: relative; }
.founder__photo { aspect-ratio: 4 / 5; border-radius: 0; }
.founder:hover .founder__photo { transform: scale(1.02); }
.founder__figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, rgba(6, 19, 34, 0.7), transparent);
  border-radius: 0;
  pointer-events: none;
}
.founder__badge {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-4);
  padding: 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  color: var(--blue-700);
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.founder__body { padding: var(--sp-6); }
.founder__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.018em;
}
.founder__role {
  margin-top: 2px;
  color: var(--gold-deep);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.founder__facts {
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.founder__facts > div { display: block; border: 0; padding: 0; }
.founder__facts > div + div { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.founder__facts dt {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.founder__facts dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.founder__quote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--blue-050);
  border: 1px solid var(--blue-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
}
.founder__quote p {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}
.founder__quote::before { content: none; }

.social {
  border-radius: var(--r-sm);
  border-color: var(--line);
  background: var(--paper);
  font-family: var(--font-label);
}
.social:hover { border-color: var(--blue); color: var(--blue); background: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow-1); }

/* --- Countries ---------------------------------------------------------- */
.regions { gap: var(--sp-9); }
.region__head {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.region__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.region__count {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.region__head::after { content: none; }

.countries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.country {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(12, 22, 38, 0.04);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
a.country:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--blue-line);
  background: var(--paper);
}
.country::after { content: none; overflow: visible; }
.country__row { flex: 1 1 auto; display: flex; align-items: baseline; gap: 0.7rem; }
.country__flag {
  color: var(--ink-70);
  min-width: 2rem;
  font-family: var(--font-label);
  font-size: var(--fs-sm);
  font-weight: 600;
}
/* Same drawn flags as the job badges, on a light ground: the hairline goes
   dark here so a white-edged flag keeps its shape against the page. */
.country__flag-img {
  display: block;
  width: 1.5rem;
  height: 1rem;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(12, 22, 38, 0.18);
}
.country__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
a.country:hover .country__name { color: var(--blue-700); transform: none; }
.country__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  background: transparent;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-50);
  text-align: right;
}
.country__meta::after {
  content: "→";
  color: var(--gold);
  font-weight: 600;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 240ms var(--ease-out), transform 260ms var(--ease-out);
}
a.country:hover .country__meta { color: var(--ink); }
a.country:hover .country__meta::after { opacity: 1; transform: none; }
[dir="rtl"] .country__meta::after { transform: scaleX(-1) translateX(-4px); }
[dir="rtl"] a.country:hover .country__meta::after { transform: scaleX(-1) translateX(0); }
[dir="rtl"] .country__meta { text-align: left; }
@media (min-width: 900px) { .countries { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }

/* --- Job cards ---------------------------------------------------------- */
.jobs { gap: var(--sp-5); }
.job {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(12, 22, 38, 0.04);
  overflow: hidden;
  transition: transform 360ms var(--ease-out), box-shadow 360ms var(--ease-out),
              border-color 360ms var(--ease-out);
}
.job:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-3);
  border-color: var(--blue-line);
}
.job__media { overflow: hidden; }
.job:hover .job__media > *:not(.job__flag) { transform: scale(1.045); }

/* The badge holds a flag and nothing else, so it is sized round the drawing
   rather than round a word: even padding on all four sides, and no inherited
   letter-spacing to hang an invisible gap off the right edge. */
.job__flag {
  display: grid;
  place-items: center;
  top: var(--sp-3);
  left: var(--sp-3);
  bottom: auto;
  padding: 0.3rem;
  background: rgba(10, 20, 32, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0;
}
/* Inset hairline, not a border: a flag with a white stripe at its edge
   (Finland, Poland) otherwise dissolves into the badge behind it. */
.job__flag-img {
  display: block;
  width: 1.55rem;
  height: calc(1.55rem * 2 / 3);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.job:hover .job__flag { background: rgba(10, 20, 32, 0.72); transform: none; }
[dir="rtl"] .job__flag { left: auto; right: var(--sp-3); }

.job__body { padding: var(--sp-5); }
.job__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.job:hover .job__title { color: var(--ink); }
.job__location { color: var(--ink-50); font-size: var(--fs-sm); }
.job__location svg { stroke: var(--ink-50); }

.job__facts {
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.job:hover .job__facts { background: var(--surface); border-color: var(--line-soft); }
.job__facts dt {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.job__facts dd { margin: 3px 0 0; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.job__facts .job__salary {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--teal-deep);
}

.tag {
  padding: 0.3rem 0.75rem;
  background: var(--blue-050);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-pill);
  color: var(--blue-700);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}
.tag:hover { transform: translateY(-2px); }
.tag--muted { background: var(--surface); border-color: var(--line); color: var(--ink-50); font-weight: 500; }

.job__desc { color: var(--ink-70); font-size: var(--fs-sm); line-height: 1.7; }
.icon-btn {
  width: 52px; height: 52px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-50);
}
.icon-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--paper); box-shadow: var(--shadow-1); }
.icon-btn[aria-pressed="true"] { background: var(--blue-050); border-color: var(--blue); color: var(--blue); }
.job__ref { color: var(--ink-50); font-size: var(--fs-xs); }

.jobs__empty {
  padding: var(--sp-9) var(--sp-5);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  color: var(--ink-70);
  text-align: center;
}

/* --- Visa status -------------------------------------------------------- */
.visa-form input {
  font-family: var(--font-label);
  letter-spacing: 0.1em;
  font-weight: 600;
}
.status-pill {
  border-radius: var(--r-pill);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-meta {
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.status-meta dt {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.status-steps li {
  border-top-width: 3px;
  border-top-color: var(--surface-3);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.status-steps li.is-done { border-top-color: var(--teal); }
.status-steps li.is-done .step-n { color: var(--teal); }
.copy-btn { border-radius: var(--r-pill); font-family: var(--font-label); }
.status-legend > div {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.status-legend > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--blue-line); }

/* --- Employers / process ------------------------------------------------ */
.employers__list li::before { background: var(--gold-soft); height: 2px; top: auto; width: 14px; }
.steps { gap: var(--sp-6); }
.step {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.step::before {
  height: 2px;
  background: var(--grad-gold);
  top: -1px;
}
.step:hover { transform: translateY(-3px); box-shadow: none; }
.step__n {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--gold-deep);
}
.step h3 { font-size: var(--fs-h3); color: var(--ink); }
.step p { color: var(--ink-70); font-size: var(--fs-sm); line-height: 1.7; }

/* --- Contact ------------------------------------------------------------ */
.qcontact { gap: var(--sp-4); }
.qcontact__card {
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.qcontact__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--blue-line); }
.qcontact__icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 11px;
  background: var(--blue-050);
  color: var(--teal);
}
.qcontact__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--ink);
}
.qcontact__value { color: var(--ink-70); }
.qcontact__hint { color: var(--teal); font-family: var(--font-label); font-weight: 600; }
.contact__details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
}
.contact__details li { padding-block: var(--sp-4); }
.contact__label { font-family: var(--font-label); letter-spacing: 0.12em; color: var(--ink-50); }
.contact__link {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  text-decoration-color: var(--blue-line);
  text-underline-offset: 5px;
}
.contact__link:hover { color: var(--teal); text-decoration-color: currentColor; }

.apply-note {
  background: var(--blue-050);
  border: 1px solid var(--blue-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  color: var(--ink);
}

/* --- Legal -------------------------------------------------------------- */
.legal__callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  color: var(--ink) !important;
}
.legal__contact {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.legal__toc {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* --- Page head ---------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: var(--sp-7) var(--sp-9);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(23, 147, 159, 0.08) 0%, rgba(23, 147, 159, 0) 55%),
    var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
.page-head__inner { max-width: 34ch; }
.page-head__title {
  font-size: clamp(2.6rem, 1.7rem + 3.9vw, 4.5rem);
  letter-spacing: -0.028em;
  line-height: 1.0;
  color: var(--ink);
}
.page-head .eyebrow { color: var(--blue-700); }
.page-head .section__lead { max-width: 56ch; color: var(--ink-70); }
/* hairline that pulls the header band into the rest of the page */
.page-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(14, 165, 201, 0) 65%);
}

.crumbs ol { gap: 0.6rem; }
.crumbs li { font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: 0.05em; color: var(--ink-50); }
.crumbs a {
  color: var(--ink-70);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
}
.crumbs a:hover { border-color: var(--blue); color: var(--blue); background: var(--paper); }
.crumbs li + li::before { content: "·"; margin-right: 0.4rem; color: var(--surface-3); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --- Dark teaser / section décor ---------------------------------------- */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(14, 165, 201, 0) 65%);
}
.teaser .section__title { color: #fff; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 12% -10%, rgba(14, 165, 201, 0.24) 0%, rgba(14, 165, 201, 0) 50%),
    var(--grad-dark);
  color: var(--on-dark-70);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(14, 165, 201, 0) 70%);
  z-index: 1;
}
.site-footer::after {
  content: "ARYOS";
  position: absolute;
  right: -2%;
  bottom: -22%;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(6rem, 20vw, 16rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  user-select: none;
}
.footer__grid { padding-block: var(--sp-9); position: relative; z-index: 1; }
.footer__bottom { position: relative; z-index: 1; border-top-color: rgba(255, 255, 255, 0.12); font-family: var(--font-label); letter-spacing: 0.03em; }
.footer__title { font-family: var(--font-label); letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.6); }
.footer__col a { color: var(--on-dark-70); }
.footer__col a:hover { color: #fff; text-decoration-color: var(--gold-soft); text-underline-offset: 4px; }
.logo--footer .logo__name { color: #fff; }
.logo--footer .logo__sub { color: rgba(255, 255, 255, 0.5); }
.logo--footer .logo__mark { background: var(--grad-gold); width: 5px; height: 32px; }

/* --- Floating controls -------------------------------------------------- */
.scroll-progress__bar {
  background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%);
  box-shadow: 0 0 12px rgba(14, 165, 201, 0.5);
}
.to-top {
  width: 50px;
  height: 50px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(251, 251, 249, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--blue-700);
  box-shadow: var(--shadow-2);
}
.to-top:hover { background: var(--grad-primary); color: #fff; transform: translateY(-3px); }
.toast {
  border-radius: var(--r-md);
  background: rgba(12, 22, 38, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-3);
}
.toast--ok .toast__dot { background: #4ADE80; }

/* --- Apply wizard ------------------------------------------------------- */
.apply__scrim { background: rgba(6, 19, 34, 0.6); }
.apply__panel {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--paper);
}
.apply__progress { background: var(--surface-2); border-radius: var(--r-pill); }
.apply__progress-bar { background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%); }
.achoice { border-radius: var(--r-sm); }
.achoice:hover { border-color: var(--blue-300); background: var(--blue-050); }
.achoice.is-on { border-color: var(--teal); background: var(--paper); box-shadow: 0 0 0 2px var(--teal); font-weight: 600; }
.achoice.is-on .achoice__dot { border-color: var(--teal); box-shadow: inset 0 0 0 4px var(--teal); }
.atag.is-on { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: var(--shadow-blue); }
.aagree.is-on { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.aagree.is-on .aagree__box { background: var(--teal); border-color: var(--teal); }
.astep__input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px var(--ring); }
.ashot__drop { border-color: var(--surface-3); }
.ashot__drop:hover { border-color: var(--teal); background: var(--blue-050); }
.apply__count, .apply__job { font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--ink-50); }

/* --------------------------------------------------------------------------
   19e. THE SIGNATURE FINISH

   The last dress: a living, editorial finish applied on top of 19d. Static
   on paper, restless on screen — grain, a lamp that answers the cursor,
   cards that lean toward the light, a ticker that never stops. Every piece
   folds away for reduced motion, printer, and touch.
   -------------------------------------------------------------------------- */

/* --- Film grain, the whole screen ---------------------------------------- */
.fx-grain {
  position: fixed;
  inset: -100%;
  z-index: 80;
  width: 300%;
  height: 300%;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fx-grain-shift 900ms steps(6) infinite;
}

@keyframes fx-grain-shift {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-6%, -4%, 0); }
  40%  { transform: translate3d(4%, 6%, 0); }
  60%  { transform: translate3d(-4%, 3%, 0); }
  80%  { transform: translate3d(6%, -5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --- The lamp: a soft glow that follows the pointer ----------------------- */
.fx-spot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(223, 198, 145, 0.16) 0%,
    rgba(23, 147, 159, 0.10) 32%,
    rgba(12, 22, 38, 0) 68%
  );
  mix-blend-mode: soft-light;
  transition: opacity 500ms var(--ease-out);
  will-change: transform;
}
.fx-spot.is-on { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .fx-spot { display: none; }
  /* No grey flash when a thumb taps a link, and no double-tap zoom to
     dismiss — the 300 ms tap delay dies with it. */
  * { -webkit-tap-highlight-color: transparent; }
  a, button, input, select, textarea { touch-action: manipulation; }
}

/* --- Cards lean toward the light ------------------------------------------ */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out),
              border-color 340ms var(--ease-out);
  will-change: transform;
}
[data-tilt].is-tilting { transition: transform 60ms linear; }
[data-tilt] > .job__body,
[data-tilt] > .trust__body,
[data-tilt] > .country__body,
[data-tilt] > * { transform: translateZ(0); }

/* Little extra lift so the tilt feels dimensional */
[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--tilt-x, 50%) var(--tilt-y, 30%),
              rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
[data-tilt]:hover::after { opacity: 1; }
.job[data-tilt]::after { border-radius: var(--r-lg); }
.country[data-tilt]::after { border-radius: var(--r-md); }

/* --- Magnetic primary CTAs ------------------------------------------------ */
.btn--magnetic {
  transition: transform 280ms var(--ease-out), background-color var(--t-base),
              box-shadow 280ms var(--ease-out), color var(--t-base), border-color var(--t-base);
  will-change: transform;
}

/* --- Hero facts count in --------------------------------------------------- */
.hero__facts strong {
  display: inline-block;
}
.hero__facts strong.is-counted { animation: fx-count-ping 380ms var(--ease-out) both; }
@keyframes fx-count-ping {
  0%   { transform: scale(0.86); }
  100% { transform: scale(1); }
}

/* --- Editorial sector ticker ----------------------------------------------- */
.ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--paper);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: fx-ticker 42s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track > span {
  flex: none;
  display: inline-flex;
  align-items: center;      /* was baseline — an SVG flag has no baseline */
  gap: 0.7rem;              /* holds ✦ · flag · label together as one unit */
  padding-inline: 2.25rem;
  padding-block: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.7vw, 1.25rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-70);
  white-space: nowrap;
}
.ticker__track > span::before {
  content: "✦";
  font-style: normal;
  font-size: 0.6em;
  color: var(--gold);
  transform: translateY(-0.4em);
}
/* Flags in the ticker. The hairline is inset rather than a border so a white
   stripe against a white page still has an edge. */
.ticker__flag {
  width: 1.7em;
  height: calc(1.7em * 2 / 3);
  flex: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(12, 22, 38, 0.18);
}

@keyframes fx-ticker {
  to { transform: translateX(-50%); }
}

/* --- Registration marks: designer corners on the big plates ----------------- */
.section--tint::before,
.section--tint::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  width: 14px;
  height: 14px;
  border-top: 1.5px solid var(--gold-line);
  border-left: 1.5px solid var(--gold-line);
  opacity: 0.6;
}
.section--tint::after {
  left: auto;
  right: 0.4rem;
  border-top: 1.5px solid var(--gold-line);
  border-right: 1.5px solid var(--gold-line);
  border-left: 0;
}
.section--tint { position: relative; }
.hero__inner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 42px;
  border-right: 1.5px solid rgba(223, 198, 145, 0.35);
  border-bottom: 1.5px solid rgba(223, 198, 145, 0.35);
  pointer-events: none;
}

/* --- Big-slate numbers behind section heads -------------------------------- */
.section__head > .section__head-kicker::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1.5px;
  margin-inline-start: 0.9rem;
  margin-bottom: 0.28em;
  background: linear-gradient(90deg, var(--gold), transparent);
  vertical-align: middle;
}

/* --- Selection + scrollbar, brushed to match -------------------------------- */
::selection { background: rgba(14, 165, 201, 0.28); color: var(--ink); }
html {
  scrollbar-color: var(--surface-3) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--surface-3), var(--blue-300));
  border: 2px solid var(--surface);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); }

/* --- Header glass deepens as you read --------------------------------------- */
body.is-scrolled .site-header,
body.is-scrolled .navpanel {
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

/* --- Footer wordmark gains a slow gold chase light --------------------------- */
.site-footer::after {
  background: linear-gradient(100deg, rgba(255,255,255,0.02) 40%, rgba(223,198,145,0.16) 50%, rgba(255,255,255,0.02) 60%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fx-chase 9s linear infinite;
}
@keyframes fx-chase {
  to { background-position: -300% 0; }
}

/* --- Reduced motion: everything decorative stands still ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-grain { display: none; }
  .fx-spot { display: none; }
  .ticker__track { animation: none; }
  .site-footer::after { animation: none; color: rgba(255, 255, 255, 0.04); background: none; -webkit-background-clip: border-box; background-clip: border-box; }
  [data-tilt] { transform: none !important; }
  [data-tilt]::after { display: none; }
  .hero__facts strong.is-counted { animation: none; }
}

/* --- Prism ------------------------------------------------------------------- */
@media print {
  .fx-grain, .fx-spot, .ticker, .btn--magnetic, [data-magnetic] { display: none !important; }
}

/* --- Print stays clean -------------------------------------------------- */
@media print {
  body { color: #000; background: #fff; }
  .hero__media::after { content: none; }
}

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .hero__toggle, .job__actions, .filters,
  .to-top, .toasts, .scroll-progress { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  body { color: #000; background: #fff; }
}

/* --------------------------------------------------------------------------
   21. Visa status — passport stamp in the lookup result
   The legend keeps its pills; the result head shows a rubber stamp, rotated
   and double-bordered like a real passport entry. Ink colours reuse the
   existing status palette.
   -------------------------------------------------------------------------- */
.visa-result .status-pill {
  position: relative;
  padding: 0.45rem 1.15rem 0.55rem;
  border: 3px double currentColor;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  box-shadow: none;
}
.visa-result .status-pill::before { display: none; }
.visa-result .status-pill::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.4;
}
.visa-result .status-pill[data-code="review"]   { color: var(--st-review-fg); }
.visa-result .status-pill[data-code="approved"] { color: var(--st-ok-fg); }
.visa-result .status-pill[data-code="action"]   { color: var(--st-action-fg); }
.visa-result .status-pill[data-code="issued"]   { color: var(--st-issued-fg); }
.visa-result .status-pill[data-code="none"]     { color: var(--ink-50); }

/* --------------------------------------------------------------------------
   22. Dotted map + journey under reduced motion
   The pulse rings are never built by script.js when motion is reduced, so the
   map is just dots and pins; the journey counters stand still.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dotmap__pin { transition: none; }
  .eyebrow__dot { animation: none; box-shadow: 0 0 0 4px rgba(14, 165, 201, 0.2); }
  .journey__step { transform: none !important; }
}