/* ALTHOM — palette, header and the aircraft hero.
   Everything below the hero lives in sections.css.

   CI colour as defined in the vector brand logo (Logo + Claim2.pdf): the red
   is the spot colour C15 M100 Y90 K10, the grey is K80, converted for screen
   to #BE1622 and #575756 (2026-10-06). The earlier #D02824 / #595B61 had been
   read off a rendering and ran too light. The
   canvas is tinted toward the film's grade, never pure white, so the hero
   and the first white section meet without a seam.

   HERO RULE, and it is the one that decides the whole build: the first
   viewport has to be finished before anybody scrolls. The earlier version
   opened on a bare photograph with three invisible captions waiting for a
   wheel event, which meant the design did not start until the visitor did
   something. Now the first caption is already in, the instrument frame is
   already drawn, and scrolling refines a composition rather than creating
   one. */

:root{
  --ci-red:#BE1622;
  --ci-grey:#575756;

  --paper:#F4F3F0;
  --paper-2:#FBFAF8;
  --paper-3:#EDECE7;
  --ink:#191C1D;
  --ink-2:#565B5B;
  --ink-3:#676C6B;   /* 4.8:1 on --paper; was #969B9A (2.6:1) */
  --rule:#BEBEBE;            /* CI grey K25 (Corporate Design Manual, QM 452) */

  --edge:clamp(20px, 4.2vw, 76px);
  --sans:"Helvetica Neue", Inter, ui-sans-serif, Arial, sans-serif;
  --mono:ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; color:var(--ink); font-family:var(--sans); background:var(--paper);
  -webkit-font-smoothing:antialiased}
img,video{max-width:100%; display:block}
a{color:inherit}
h1{margin:0; font-weight:600; letter-spacing:-.032em}
/* German and Greek compounds are longer than any English word: let headings
   hyphenate there instead of pushing the page wider than a phone. */
:is(h1,h2,h3,h4,.lead-label,dt):is(:lang(de),:lang(el)){overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto}
p{margin:0}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--ci-red);
  color:#fff; padding:12px 18px; font-size:13px}
.skip:focus{left:0}

/* ---------------- header ---------------- */
:root{--head:96px}
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:40; height:var(--head);
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--edge);
  transition:background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-head.stuck{background:rgba(244,243,240,.9); backdrop-filter:blur(10px);
  border-bottom-color:var(--rule)}
.brand{display:block; line-height:0}
.brand img{height:64px; width:auto}
.site-nav{display:flex; gap:clamp(16px,2.2vw,32px); margin-left:auto}
/* LinkedIn, the one outside channel. Kept when the nav collapses. */
.head-social{display:grid; place-items:center; width:36px; height:36px;
  margin-left:clamp(18px,2.2vw,34px); border:1px solid var(--rule); color:var(--ink-2);
  background:rgba(248,247,244,.78);
  transition:color .2s, border-color .2s}
.head-social:hover, .head-social:focus-visible{color:var(--ci-red); border-color:var(--ci-red)}
.site-nav a{color:var(--ink-2); text-decoration:none; font-size:12.5px;
  letter-spacing:.11em; text-transform:uppercase; transition:color .2s}
.site-nav a:hover, .site-nav a:focus-visible{color:var(--ci-red)}
.lang{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-3)}
.lang b{color:var(--ink); font-weight:500}
.lang a{text-decoration:none}
.lang-soon{opacity:.55}

/* ================================ HERO ================================
   The runway supplies the scroll distance and the stage pins inside it.
   440vh, not the 560vh this started at: three captions and a settle need
   about four screens of travel, and every screen beyond that is a visitor
   scrolling through a photograph wondering when the website begins. */
.hero-runway{height:440vh; position:relative}
.hero-stage{
  position:sticky; top:0; height:100svh; overflow:hidden; background:var(--paper-3);
}
.hero-poster, #hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* The poster sits above the video in source order, so it must be told to
   step aside once the film is ready. Otherwise the video plays underneath
   a still image and looks like nothing is happening at all. */
#hero-video{opacity:0; transition:opacity .6s ease; z-index:1}
.hero-poster{z-index:2; transition:opacity .6s ease}
.hero.is-live #hero-video{opacity:1}
.hero.is-live .hero-poster{opacity:0}
.hero.is-still #hero-video{display:none}

/* Legibility system. The film is bright, so the scrim is a light wash and
   the type is graphite. Contrast was checked against the brightest and the
   busiest frames, not an average one.
   Above the film (z-index 1) and the poster (2), below the words. Without
   an explicit order these sit under both and the legibility system
   silently stops working. */
.scrim{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    linear-gradient(90deg, rgba(244,243,240,.95) 0%, rgba(244,243,240,.76) 32%, rgba(244,243,240,0) 64%),
    linear-gradient(0deg, rgba(244,243,240,.78) 0%, rgba(244,243,240,0) 36%),
    /* The right edge carries the progress rail, and the middle of the film
       is the inside of a gear bay: dark, busy, and the one place the rail
       has to stay readable. Measured against that frame, not against the
       bright hangar the film opens on. */
    linear-gradient(270deg, rgba(244,243,240,.8) 0%, rgba(244,243,240,.42) 7%, rgba(244,243,240,0) 19%),
    /* The header floats over the film until the page scrolls, and the top of
       this frame is almost white. Without a wash here the navigation simply
       disappeared into the image. */
    linear-gradient(180deg, rgba(244,243,240,.84) 0%, rgba(244,243,240,.3) 9%, rgba(244,243,240,0) 17%);
}

/* ---------------- the instrument frame ----------------
   Four registration corners and a hairline inset. This is the entire cost
   of making the first viewport read as an engineering instrument rather
   than as a stock photograph with text on it: eight pseudo-elements and no
   script at all. It is drawn before the film has even been fetched. */
.frame{position:absolute; z-index:3; pointer-events:none;
  inset:clamp(88px,9vh,104px) var(--edge) clamp(74px,8vh,92px)}
.frame::before, .frame::after{content:""; position:absolute; width:clamp(18px,1.8vw,26px);
  height:clamp(18px,1.8vw,26px); border-color:var(--ci-red); border-style:solid}
.frame::before{left:0; top:0; border-width:1px 0 0 1px}
.frame::after{right:0; bottom:0; border-width:0 1px 1px 0}
.frame i{position:absolute; width:clamp(18px,1.8vw,26px); height:clamp(18px,1.8vw,26px);
  border-color:rgba(86,86,85,.45); border-style:solid}
.frame i:first-child{right:0; top:0; border-width:1px 1px 0 0}
.frame i:last-child{left:0; bottom:0; border-width:0 0 1px 1px}

.beats{position:absolute; inset:0; pointer-events:none; z-index:4}
/* --rise is written by scrub.js and composed into the centring transform
   here, so the animation cannot overwrite the layout. */
.beat{
  position:absolute; left:var(--edge); top:50%;
  transform:translateY(calc(-50% + var(--rise, 0px)));
  max-width:min(640px, 50vw); opacity:0;
}
.beat b{
  display:block; font-family:var(--mono); font-weight:400;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ci-red); margin-bottom:18px;
}
/* The numeral is set apart from the word so the three beats read as a
   sequence at a glance, which is what tells the visitor there is more
   below without a single word of instruction. */
.beat b i{font-style:normal; color:var(--ci-grey); margin-right:12px}
.beat span{
  display:block; font-size:clamp(30px, 3.9vw, 58px); line-height:1.06;
  letter-spacing:-.034em; font-weight:600; color:var(--ink);
  text-shadow:0 2px 24px rgba(244,243,240,.9), 0 0 10px rgba(244,243,240,.8);
}
.beat em{display:block; margin-top:20px; font-style:normal;
  font-size:clamp(14px,1.1vw,16.5px); line-height:1.6; color:var(--ink-2);
  max-width:40ch; text-shadow:0 1px 14px rgba(244,243,240,.9)}

/* The measure has to fit the longest line of the headline. At 58vw the
   first line broke in two, the block grew to 444px, ran past the bottom of
   the viewport and buried the buttons under the strip below it. Measured,
   not guessed: the h1 was 204px tall and overlapped by 154px. */
.settle{
  position:absolute; left:var(--edge); right:var(--edge); top:50%;
  transform:translateY(calc(-50% + var(--rise, 0px)));
  max-width:min(920px, 70vw); opacity:0; z-index:5;
}
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em;
  color:var(--ci-red); margin:0 0 24px}
.settle h1{
  font-size:clamp(38px, 5vw, 80px); line-height:.98; letter-spacing:-.045em;
  margin:0 0 24px;
  text-shadow:0 2px 30px rgba(244,243,240,.92), 0 0 12px rgba(244,243,240,.85);
}
.settle h1 em{font-style:normal; color:var(--ci-grey)}
.settle h1 b{font-weight:600; color:var(--ci-red)}
.settle .lede{
  font-size:clamp(15px, 1.2vw, 18px); line-height:1.56; color:var(--ink-2);
  max-width:46ch; margin:0 0 32px;
  text-shadow:0 1px 16px rgba(244,243,240,.9);
}
/* A laptop at 1440×800 leaves roughly 700px of stage. The block has to
   shrink with the height as well as with the width, or the buttons drop
   below the fold on exactly the machines most visitors use. */
@media (max-height: 780px) and (min-width: 901px){
  .settle h1{font-size:clamp(34px, 4.2vw, 62px); margin-bottom:20px}
  .settle .lede{margin-bottom:24px}
  .eyebrow{margin-bottom:18px}
  .beat span{font-size:clamp(28px,3.4vw,48px)}
}

/* ---------------- the progress rail ----------------
   Three stops on a vertical line at the right edge, with a red segment
   that grows as the film advances. It does the work three separate things
   used to do badly: it says the hero scrolls, it says how far it goes, and
   it names the three disciplines before the page has said anything. */
.hero-rail{
  position:absolute; z-index:5; right:var(--edge); top:50%; transform:translateY(-50%);
  margin:0; padding:0; list-style:none;
  display:grid; gap:clamp(30px,6vh,64px); justify-items:end;
}
.hero-rail::before{
  content:""; position:absolute; right:-1px; top:6px; bottom:6px; width:1px;
  background:rgba(86,86,85,.28);
}
/* Scaled rather than sized, so the growth is a compositor transform and
   the rail costs nothing while the film is being scrubbed. */
.hero-rail::after{
  content:""; position:absolute; right:-1px; top:6px; bottom:6px; width:1px;
  background:var(--ci-red); transform-origin:50% 0;
  transform:scaleY(var(--p, 0));
}
.hero-rail li{
  display:flex; align-items:center; gap:13px; padding-right:19px; position:relative;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ci-grey); transition:color .45s ease;
  text-shadow:0 1px 10px rgba(244,243,240,.9), 0 0 6px rgba(244,243,240,.8);
}
.hero-rail li::after{
  content:""; position:absolute; right:-3.5px; top:50%; margin-top:-3.5px;
  width:7px; height:7px; border-radius:50%; background:var(--paper);
  border:1px solid rgba(86,86,85,.4); transition:background .45s ease, border-color .45s ease;
}
.hero-rail li.on{color:var(--ink)}
.hero-rail li.on::after{background:var(--ci-red); border-color:var(--ci-red)}
.hero-rail b{font-weight:400; color:var(--ci-red)}

/* ---------------- the standing strip ----------------
   Bottom left, present from the first frame: what the company is certified
   to and where it works. Credibility belongs in the first viewport, not in
   section eleven. It steps aside for the settle block, which needs the
   full height on a short screen. */
.hero-strip{
  position:absolute; z-index:5; left:var(--edge); bottom:clamp(26px,3.4vh,38px); margin:0;
  display:flex; flex-wrap:wrap; gap:8px clamp(16px,2.2vw,30px);
  font-family:var(--mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3); text-shadow:0 1px 10px rgba(244,243,240,.92);
}
.hero-strip b{color:var(--ci-grey); font-weight:400}

.hero-hint{ z-index:6;
  position:absolute; right:var(--edge); bottom:clamp(26px,3.4vh,38px); margin:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:10px;
}
.hero-hint::after{content:""; width:1px; height:26px; background:var(--ci-red);
  transform-origin:50% 0; animation:hint 2.4s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scaleY(.2)} 50%{transform:scaleY(1)}}

.btn{
  display:inline-flex; align-items:center; gap:11px; min-height:50px; padding:0 26px;
  background:var(--ci-red); color:#fff; text-decoration:none; border:0; cursor:pointer;
  font-family:inherit; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  transition:background .2s, transform .2s;
}
.btn:hover{background:#9C111B; transform:translateY(-1px)}
.btn.ghost{background:rgba(244,243,240,.86); color:var(--ink); border:1px solid var(--rule)}
.btn.ghost:hover{border-color:var(--ci-red); color:var(--ci-red)}
.actions{display:flex; gap:12px; flex-wrap:wrap}

/* ---------------- hero on a narrow screen ----------------
   The film does not play here; the composed still carries the hero and the
   captions stack under it as ordinary type. */
@media (max-width: 900px){
  :root{--head:74px}
  .brand img{height:48px}
  .head-social{margin-left:auto}
  .site-nav{display:none}
  .hero-runway{height:auto}
  .hero-stage{position:static; height:auto; min-height:auto}
  .hero-poster{position:static; height:56svh; object-fit:cover}
  .scrim, .frame, .hero-rail{display:none}
  .beats{position:static; padding:34px var(--edge) 0}
  .beat{position:static; transform:none; opacity:1; max-width:none; margin-bottom:30px}
  .beat span{font-size:clamp(22px,6.4vw,30px); text-shadow:none}
  .beat em{text-shadow:none}
  .settle{position:static; transform:none !important; opacity:1 !important; max-width:none;
    padding:8px var(--edge) 34px}
  .settle h1, .settle .lede{text-shadow:none}
  .settle h1{font-size:clamp(38px,11vw,58px)}
  .hero-hint{display:none}
  .hero-strip{position:static; padding:0 var(--edge) 48px; text-shadow:none}
}

@media (prefers-reduced-motion: reduce){
  /* Hand over instantly rather than cross-fading. A suppressed transition
     can otherwise strand the poster on top of a perfectly good video. */
  #hero-video, .hero-poster{transition:none}
  .btn, .site-nav a{transition:none}
  .hero-hint::after{animation:none; transform:scaleY(1)}
}

/* ---------------- menu on phones ----------------
   Below 900px the navigation folds away and the button opens it as a full
   panel under the header: large links, one per line, the page behind it
   locked. The open state is a hidden checkbox (#menu-toggle) that the
   button, a <label>, ticks, so it works with scripting switched off, as in
   a phone's preview of an HTML attachment. The script only adds comfort:
   closing on a link or Escape, and the scroll lock. */
.menu-toggle{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.menu-btn{display:none}
@media (max-width: 900px){
  .head-social{margin-left:auto}
  .menu-btn{display:grid; place-content:center; gap:6px; width:44px; height:44px; margin-left:10px;
    border:1px solid var(--rule); background:rgba(248,247,244,.78); cursor:pointer; padding:0;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation}
  .menu-btn i{display:block; width:18px; height:1.5px; background:var(--ink);
    transition:transform .3s cubic-bezier(.2,.75,.25,1)}
  .menu-toggle:checked ~ .menu-btn i:first-child{transform:translateY(3.75px) rotate(45deg)}
  .menu-toggle:checked ~ .menu-btn i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

  html.menu-open{overflow:hidden}
  /* backdrop-filter makes the header the containing block for fixed
     children, which clipped the panel to the header height. */
  .site-head:has(.menu-toggle:checked), html.menu-open .site-head{background:var(--paper);
    border-bottom-color:var(--rule); -webkit-backdrop-filter:none; backdrop-filter:none}
  .menu-toggle:checked ~ .site-nav{
    display:flex; flex-direction:column; gap:0; margin:0;
    position:fixed; left:0; right:0; top:var(--head); bottom:0; z-index:39;
    padding:clamp(18px,4vh,36px) var(--edge) 40px; background:var(--paper); overflow-y:auto;
    animation:menuIn .3s cubic-bezier(.2,.75,.25,1)}
  .menu-toggle:checked ~ .site-nav a{font-size:clamp(24px,7vw,34px); letter-spacing:-.03em;
    text-transform:none; color:var(--ink); padding:14px 0; border-bottom:1px solid var(--rule)}
  .menu-toggle:checked ~ .site-nav a:hover{color:var(--ci-red)}
  /* The cookie card would otherwise sit over the lower half of the menu. */
  html:has(.menu-toggle:checked) .consent, html.menu-open .consent{display:none}
}
@keyframes menuIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .menu-btn i{transition:none}
  .menu-toggle:checked ~ .site-nav{animation:none}
}

/* ---------------- language switcher ----------------
   The last group of the navigation: EN · DE · EL, the current one marked
   with aria-current and the red rule. Each link carries lang and hreflang
   and points at the same page in the other language. */
.nav-lang{display:inline-flex; align-items:center; gap:2px; margin-left:clamp(6px,1vw,16px);
  padding-left:clamp(12px,1.4vw,20px); border-left:1px solid var(--rule)}
.site-nav .nav-lang a{font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  padding:6px 6px; color:var(--ink-3); text-decoration:none; border-bottom:1px solid transparent}
.site-nav .nav-lang a:hover, .site-nav .nav-lang a:focus-visible{color:var(--ci-red)}
.site-nav .nav-lang a[aria-current="true"]{color:var(--ink); border-bottom-color:var(--ci-red)}
.site-nav a:focus-visible, .menu-btn:focus-visible, .head-social:focus-visible{
  outline:2px solid var(--ci-red); outline-offset:3px}
@media (max-width: 900px){
  .menu-toggle:checked ~ .site-nav .nav-lang{display:flex; gap:10px; margin:26px 0 0; padding:0; border:0}
  .menu-toggle:checked ~ .site-nav .nav-lang a{display:grid; place-items:center; min-width:52px; min-height:46px;
    padding:0 12px; font-size:13px; letter-spacing:.14em; text-transform:none;
    border:1px solid var(--rule); color:var(--ink-2)}
  .menu-toggle:checked ~ .site-nav .nav-lang a[aria-current="true"]{border-color:var(--ci-red); color:var(--ink)}
}