/* RSG Variable — Royal Schiphol Group house font (variable weight axis) */
@font-face{
  font-family:'RSG Variable';
  src:url('fonts/RSGVariable-roman.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'RSG Variable';
  src:url('fonts/RSGVariable-Italic.woff2') format('woff2');
  font-weight:100 900; font-style:italic; font-display:swap;
}
:root{ --navy:#0b1f63; --orange:#ff7700; --frame:#284245; --gold:#c4b66c; --font:'RSG Variable',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--font);color:#fff;background:var(--frame);overflow-x:hidden;}
body.is-loading{overflow:hidden;}
.preloader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:var(--frame);padding:24px;text-align:center;}
.preloader[hidden]{display:none;}
.preloader-logo{width:220px;max-width:70vw;height:auto;}
.preloader p{margin:0;max-width:360px;font-size:16px;line-height:1.5;}
.preloader progress{appearance:none;width:240px;max-width:80vw;height:4px;border:0;background:rgba(255,255,255,.2);color:var(--gold);}
.preloader progress::-webkit-progress-bar{background:rgba(255,255,255,.2);}
.preloader progress::-webkit-progress-value{background:var(--gold);}
.preloader progress::-moz-progress-bar{background:var(--gold);}
/* Stage: groups the WebGL canvas + foreground people so both can be windowed by one
   clip-path (an ancestor's clip-path clips fixed-position descendants too, unlike
   overflow:hidden, which doesn't). The frame margin is animated in render.js frame()
   (desktop and mobile use different FRAME_* constants there); the box itself never
   moves, so the clip stays centred. */
.stage{position:fixed;inset:0;z-index:1;will-change:clip-path;clip-path:inset(94px 16px 16px 16px round 20px);}
@media (min-width:701px) and (min-aspect-ratio:851/1000){
  .stage{clip-path:inset(130px 28px 28px 28px round 28px);}
}
#gl{position:fixed;inset:0;z-index:1;display:block;}
.hero{position:fixed;inset:0;z-index:5;pointer-events:none;}
/* Topbar */
.topbar{position:absolute;top:0;left:0;right:0;z-index:7;display:flex;align-items:center;justify-content:space-between;padding:24px 40px;will-change:opacity,transform;}
.brand{position:relative;z-index:1;display:flex;align-items:center;pointer-events:auto;text-decoration:none;transform:translateY(-6px);}
.brand-logo{height:66px;width:auto;display:block;}
.actions{position:relative;z-index:1;display:flex;align-items:center;gap:16px;pointer-events:auto;}
.btn-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:transparent;border:none;color:#fff;text-decoration:none;}
.btn-icon:hover{background:rgba(255,255,255,.12);}
.btn-icon .ic{width:24px;height:24px;display:block;}
/* Main nav (desktop) */
.nav-main{position:relative;z-index:1;display:flex;align-items:center;gap:4px;pointer-events:auto;}
/* Desktop ships the full nav + search icon; mobile gets its own icon row (search, login,
   menu toggle) plus the slide-in menu overlay below. */
.btn-icon-m{display:none;}
.btn-menu{display:none;}
.mobile-menu{display:none;}
@media (max-width:700px), (max-aspect-ratio:17/20){
  .nav-main,.btn-icon{display:none;}
  .btn-icon-m{display:grid;place-items:center;color:#fff;text-decoration:none;}
  .btn-icon-m .ic{width:18px;height:18px;display:block;}
  .btn-icon-m-profile{width:24px;height:24px;background:rgba(255,255,255,.18);border-radius:50%;}
  .btn-icon-m-profile .ic{width:16px;height:16px;}
  .btn-menu{
    display:flex;align-items:center;gap:8px;appearance:none;background:none;border:none;
    color:#fff;font:inherit;font-family:var(--font);font-size:14px;font-weight:600;
    padding:8px 4px;cursor:pointer;
  }
  .btn-menu .ic{width:14px;height:14px;display:block;}
  .btn-menu-ic-open{display:none;}
  body.menu-open .btn-menu-ic-closed{display:none;}
  body.menu-open .btn-menu-ic-open{display:block;}
}
.nav-link{appearance:none;background:none;border:none;font:inherit;font-family:var(--font);font-size:16px;font-weight:500;color:#fff;cursor:pointer;padding:10px 14px;text-decoration:none;display:inline-block;white-space:nowrap;}
.nav-link:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;}
.nav-link.active{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;}
/* Dropdown: a full-bleed panel anchored below the whole topbar (not the individual nav
   item), painted in the same colour as the exposed frame background so it reads as a
   seamless continuation of the header rather than a floating card (see reference). */
/* Revealed by clipping (grown from the header's bottom edge) rather than translated into
   place: the box itself never moves and never occupies pixels above top:100%, so it can't
   visually cross over the logo/nav row while animating — it can only emerge from under it. */
.dropdown{
  position:absolute;top:100%;left:0;right:0;z-index:-1;background:var(--frame);padding:36px 40px 48px;
  pointer-events:none;visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .24s cubic-bezier(.4,0,.2,1),visibility 0s linear .24s;
}
.dropdown.open{
  pointer-events:auto;visibility:visible;clip-path:inset(0 0 0% 0);
  transition:clip-path .3s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s;
}
/* Switching directly between two already-open dropdowns swaps instantly (see main.js) —
   this must win over both rules above regardless of class order, hence the extra .dropdown. */
.dropdown.dropdown.no-anim{transition:none;}
.dropdown-title{color:var(--gold);font-family:var(--font);font-size:16px;font-style:normal;font-weight:700;line-height:150%;margin-bottom:16px;}
.dropdown-grid{display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;grid-auto-columns:max-content;justify-content:start;column-gap:64px;row-gap:6px;}
.dropdown-grid a{color:#fff;text-decoration:none;font-size:16px;font-weight:500;padding:10px 0;line-height:1.3;white-space:nowrap;}
.dropdown-grid a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;}
/* Start lockup (right) */
.lockup{position:absolute;right:5vw;top:52%;transform:translateY(-50%);max-width:min(52vw,720px);text-align:left;text-shadow:0 1px 12px rgba(0,0,0,.22);will-change:transform,opacity;--alles:clamp(56px,9.7vw,150px);--indent:calc(var(--alles)*0.94);}
/* Design: "Wij doen" / indented "alles" with "behalve vliegen" stacked next to it, on the baseline */
.lockup .alles{display:flex;flex-direction:column;align-items:flex-start;margin:0;font-size:var(--alles);font-weight:800;letter-spacing:-.03em;line-height:.9;}
.lockup .alles-l2{display:flex;align-items:flex-end;margin-left:var(--indent);}
.lockup .alles-sub{font-size:.37em;font-weight:700;letter-spacing:-.02em;line-height:.92;margin:0 0 .12em .38em;}
/* Design: RSG Variable 400, 22px/30px, -4% tracking, #fff, block ~434px wide (1440 artboard). */
.lockup .lede{font-size:clamp(17px,1.53vw,22px);font-weight:400;line-height:1.364;letter-spacing:-.04em;margin:22px 0 0 var(--indent);max-width:434px;}
/* Round scroll button */
.scrolldown{position:fixed;left:50%;bottom:52px;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(34px);backdrop-filter:blur(34px);display:grid;place-items:center;cursor:pointer;pointer-events:auto;z-index:6;}
.scrolldown:hover{background:#f2f2f2;}
.scrolldown svg{width:20px;height:20px;stroke:#2670C7;fill:none;}   /* same blue as the card arrow (arrow-right.svg) */
.lockup-in{will-change:transform,opacity;}
/* Vertical job-domain list (left) — the dot marks progress; the active domain
   enlarges its dot and reveals its name (fading in from the left). */
.progress{position:fixed;left:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:18px;z-index:6;opacity:0;pointer-events:none;}
.pd-item{display:flex;align-items:center;gap:16px;pointer-events:auto;cursor:pointer;}
.pd-dot{width:24px;display:flex;justify-content:center;flex:none;}   /* fixed slot -> dots share one axis */
.pd{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 1px 3px rgba(0,0,0,.18);transition:width .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1),background .3s;flex:none;}
.pd-item.on .pd{width:22px;height:22px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.pd-label{white-space:nowrap;font-size:clamp(18px,1.6vw,26px);font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.2);opacity:0;transform:translateX(-14px);transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1);}
.pd-item.on .pd-label,.pd-item:hover .pd-label{opacity:1;transform:translateX(0);}   /* fade in from the left */
/* Foreground: people (key visual), in front of the plane, behind the text; fades out on scroll */
.people{position:fixed;left:30%;bottom:0;transform:translateX(-50%);height:min(68vh,720px);width:auto;max-width:78vw;object-fit:contain;object-position:bottom center;z-index:3;pointer-events:none;will-change:opacity,transform;}
#spacer{width:1px;visibility:hidden;}
/* ---- Mobile layout for the start ---- */
@media (max-width:700px), (max-aspect-ratio:17/20){
  .topbar{padding:14px 16px;gap:10px;}
  .brand{transform:translateY(-5px);} .brand-logo{height:40px;}
  .lockup{left:36px;right:36px;top:130px;transform:none;max-width:none;--alles:clamp(84px,24vw,168px);}
  .lockup .lede{margin-left:0;max-width:none;font-size:clamp(16px,4.4vw,21px);margin-top:26px;}
  .people{left:56%;width:auto;height:min(48vh,460px);max-height:none;max-width:118vw;bottom:-5vh;}   /* sunk a little: the legs crop off-frame so the faces clear the lede on short phones */
  .scrolldown{bottom:24px;}
  /* Progress moves to a horizontal bar at the top (rather than the vertical
     left-hand list) so labels never sit on top of the story photos scrolling
     past behind them. A soft gradient backs the bar for legibility regardless
     of what's behind it; the active label drops in below its own dot on an
     absolute position, so it doesn't reflow/re-centre the dot row. It only
     fades in once the topbar has fully faded out (see render.js), so the two
     never share the top of the screen. */
  .progress{
    left:0; right:0; bottom:auto; top:0; transform:none;
    flex-direction:row; justify-content:center; align-items:flex-start;
    width:100%; gap:22px;
    padding:calc(72px + env(safe-area-inset-top, 0px)) 16px 72px;   /* tall bottom: the tint runs on past the active label (it hangs below the dots) */
    background:linear-gradient(to bottom, rgba(11,31,99,.45), rgba(11,31,99,.3) 55%, rgba(11,31,99,0) 100%);
  }
  .pd-item{position:relative; flex-direction:column; gap:0; padding:4px 6px;
           transition:opacity .4s ease;}
  .pd-item.on .pd{width:18px;height:18px;}
  .pd-label{
    position:absolute; left:50%; top:100%; margin-top:10px;
    font-size:clamp(14px,3.6vw,17px);
    transform:translate(-50%,-6px);
  }
  .pd-item.on .pd-label{transform:translate(-50%,0);}
  .pd-item:hover .pd-label{opacity:0; transform:translate(-50%,-6px);}   /* no hover label: it
     would sit on top of the centred active one */
  .pd-item.on .pd-label,.pd-item.on:hover .pd-label{opacity:1; transform:translate(-50%,0);}
  /* The outer dots used to need their labels anchored inward to stay on screen. The row now
     slides the active dot to the centre, so its label is centred on the screen by definition
     and plain centring is correct for every item, first and last included. */

  /* ---- Mobile menu overlay: main list <-> submenu, sliding panes ----
     Sits below the (always-visible) topbar rather than fighting it on z-index; the topbar's
     own Menu button doubles as the close control (icon swaps to a cross via body.menu-open). */
  /* position:fixed (not just overflow:hidden) so the background can't be scrolled by touch
     drags on iOS Safari, which ignores overflow:hidden on body for touch scrolling. The
     scroll offset is preserved via body.top, set/restored in main.js. */
  body.menu-open{overflow:hidden;position:fixed;width:100%;}
  .mobile-menu{position:fixed;top:68px;left:0;right:0;bottom:0;z-index:40;background:var(--frame);display:none;overflow:hidden;pointer-events:auto;}
  body.menu-open .mobile-menu{display:block;}
  .mm-view{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 24px 32px;transform:translateX(0);transition:transform .32s cubic-bezier(.16,1,.3,1);}
  .mm-main{transform:translateX(0);}
  .mm-sub{transform:translateX(100%);}
  .mobile-menu.sub-open .mm-main{transform:translateX(-100%);}
  .mobile-menu.sub-open .mm-sub{transform:translateX(0);}
  .mm-row{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    appearance:none;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.12);
    color:#fff;font:inherit;font-family:var(--font);font-size:17px;font-weight:600;text-align:left;
    text-decoration:none;padding:18px 2px;cursor:pointer;
  }
  .mm-row:last-child{border-bottom:none;}
  .mm-chevron{font-size:22px;font-weight:400;opacity:.7;}
  /* Back control follows the design's lockup: the campaign arrow (mirrored) in a 24px
     tinted disc, with the label beside it -- not a bare chevron. */
  .mm-back{
    display:flex;align-items:center;gap:8px;appearance:none;background:none;border:none;
    color:#fff;font:inherit;font-family:var(--font);font-size:16px;font-weight:600;
    padding:0;margin:12px 0 22px;cursor:pointer;
  }
  .mm-back-ic{
    display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;
    background:rgba(255,255,255,.18);
  }
  .mm-back-ic svg{width:12px;height:11px;display:block;stroke:#fff;fill:none;}
  .mm-sub-divider{height:1px;background:rgba(255,255,255,.16);margin-bottom:20px;}
  .mm-sub-title{color:var(--gold);font-size:16px;font-weight:700;line-height:150%;margin-bottom:8px;}
  .mm-sub-list{display:flex;flex-direction:column;}
  .mm-sub-list a{color:#fff;text-decoration:none;font-size:16px;font-weight:500;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.12);}
  .mm-sub-list a:last-child{border-bottom:none;}
}
/* Portrait tablets share the mobile layout above (same breakpoint as IS_MOBILE in layout.js),
   but the phone sizes leave a huge heading and small people on a tall iPad screen: cap the
   column so the heading stays a key-visual size, and let the people fill the lower half. */
@media (min-width:701px) and (max-aspect-ratio:17/20){
  .topbar{padding:18px 28px;}
  .brand-logo{height:50px;}
  .lockup{left:8vw;right:auto;top:150px;width:min(620px,74vw);}
  .lockup .lede{font-size:clamp(18px,2.4vw,24px);max-width:520px;}
  .people{left:50%;height:58vh;max-width:none;bottom:-4vh;}
}