/* Compact glass navigation; the character intro resolves into the same Arimo text. */
html{--header-height:calc(78px + env(safe-area-inset-top,0px));scroll-padding-top:calc(var(--header-height) + 16px)}
.h-header,.h-hero{--hero-gutter:clamp(24px,4.45vw,96px);--hero-white:#0d274c;--hero-paper:#f8fafc;--hero-muted:#52647d;color:var(--hero-white);font-family:Arimo,Arial,sans-serif}
.h-header{position:fixed;inset:0 0 auto;z-index:40;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:60px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--hero-gutter) 14px;background:#f8fafcf5;border-bottom:1px solid #0d274c12}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.h-header{background:#f8fafccb;-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%)}}
.h-brand{display:block;flex:none;width:max-content;line-height:1;font:600 2.75rem/1 Arimo,Arial,sans-serif;letter-spacing:0}
.h-brand img{display:block;width:100%;height:auto;filter:brightness(0) invert(1)}
.h-nav{display:contents;font-size:.9375rem}
.h-nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:36px}
.h-nav a{padding:10px 0;text-underline-offset:6px;text-decoration-thickness:1px}
.h-nav a:hover{text-decoration:underline}
.h-nav .h-nav-contact{display:flex;align-items:center;gap:32px;border:1px solid #0d274c55;border-radius:999px;padding:11px 20px;margin-left:0;transition:background .2s,border-color .2s}
.h-nav .h-nav-contact:hover{background:#0d274c08;border-color:#0d274c;text-decoration:none}
.h-header svg,.h-hero svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.h-header :focus-visible,.h-hero :focus-visible{outline-color:#38bdf8;outline-offset:7px}
.h-hero{position:relative;isolation:isolate;background:var(--hero-paper);min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:max(140px,17svh,calc(var(--header-height,112px) + 28px)) var(--hero-gutter) 30px;overflow:clip}
.h-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none}
.h-composition{display:flex;flex-direction:column;align-items:flex-start;gap:26px;margin:0 0 42px}
.h-title{font-family:Arimo,Arial,sans-serif;font-size:clamp(6rem,min(12.55vw,20svh),15.5rem);font-weight:600;line-height:1.04;letter-spacing:-.045em;word-spacing:0;margin-left:0}
.h-title>span{display:block;white-space:nowrap}
.h-title>span+span{margin-left:.58em}
.h-intro{max-width:540px;padding:0}
.h-intro>p{font-size:1.0625rem;line-height:1.65;letter-spacing:-.015em;color:var(--hero-white)}
.h-cta{display:inline-flex;justify-content:space-between;align-items:center;gap:26px;background:transparent;color:#0d274c;border:1px solid #0d274c66;border-radius:999px;padding:11px 18px;min-height:44px;font-size:.875rem;line-height:1.4;margin-top:18px;transition:background .2s}
.h-cta:hover{background:#0d274c08}
.h-cta svg{transition:transform .2s}
.h-cta:hover svg{transform:translateX(3px)}
.h-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--hero-muted);font-size:.875rem}
.h-foot>p{line-height:1.5}
.h-discover{display:flex;align-items:center;gap:30px;min-height:44px}
.h-discover:hover{color:var(--hero-white)}
.h-discover svg{width:18px;height:18px}
@media(min-width:1900px){.h-hero{padding-bottom:42px}}
@media(max-width:1100px){
 .h-header{gap:36px}.h-nav-links{gap:24px}.h-nav .h-nav-contact{gap:22px}
 .h-composition{gap:24px}
 .h-title{font-size:min(12vw,20svh)}.h-intro>p{font-size:1rem}
 .h-cta{gap:20px;padding-inline:18px;font-size:.875rem}
}
@media(max-width:760px){
 html{--header-height:calc(110px + env(safe-area-inset-top,0px))}
 .h-header{display:flex;flex-wrap:wrap;padding-block:calc(12px + env(safe-area-inset-top,0px)) 8px;gap:6px 24px;align-items:center}.h-brand{width:max-content;font-size:2.3rem}
 .h-nav{font-size:.875rem}.h-nav-links{order:3;flex-basis:100%;gap:12px 28px;justify-content:flex-start}
 .h-nav .h-nav-contact{margin-left:auto;gap:24px;padding:9px 17px}
 .h-nav-links>a{padding:0;min-height:36px;display:flex;align-items:center}
 .h-hero{padding-top:max(174px,7rem,calc(var(--header-height,112px) + 2rem));padding-bottom:24px}
 .h-composition{gap:26px;margin-bottom:48px}
 .h-title{font-size:clamp(3rem,17.7vw,8.4rem)}
 .h-title>span{white-space:normal}
 .h-title>span+span{margin-left:.38em}
 .h-intro{max-width:440px}
 .h-intro>p{font-size:1rem;line-height:1.65}
 .h-cta{margin-top:18px;font-size:.875rem;padding:11px 18px;gap:26px}
 .h-foot{align-items:flex-end;font-size:.8125rem;gap:20px}
 .h-foot>p{max-width:160px;line-height:1.6}
 .h-discover{gap:16px}.h-discover>span{max-width:105px;line-height:1.6}
}
@media(max-width:390px){
 .h-header,.h-hero{--hero-gutter:20px}
 .h-brand{width:max-content;font-size:2.1rem}.h-nav{font-size:.8125rem}.h-header{column-gap:18px}
 .h-hero{padding-top:max(168px,7rem,calc(var(--header-height,112px) + 2rem))}.h-title{font-size:clamp(3rem,17.4vw,4.5rem)}
 .h-composition{gap:24px;margin-bottom:42px}
 .h-foot{flex-wrap:wrap;align-items:center;gap:16px}.h-foot>p{max-width:none}
 .h-discover{margin-left:auto}.h-discover>span{max-width:none}
}
@media(prefers-reduced-motion:reduce){.h-hero *,.h-header *{transition:none!important}}

.character-type{position:relative;max-width:100%;width:fit-content}
.h-brand .character-type{display:block}
.character-type>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.character-type.character-ready{color:transparent}
.h-brand .character-type.character-morph{transition:color 680ms cubic-bezier(.4,0,.2,1)}
.h-brand .character-morph>canvas{transition:opacity 680ms cubic-bezier(.4,0,.2,1)}
.h-brand .character-type.character-solid{color:var(--hero-white)}
.h-brand .character-solid>canvas{opacity:0}
html.flow-intro-open .h-brand{opacity:0}
@media(forced-colors:active){.h-header{background:Canvas;border-color:CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none}.character-type.character-ready,.h-brand .character-type.character-solid{color:CanvasText}.character-type>canvas{display:none}}
/* Mobile: fold the navigation row away while scrolling down (header-compact.js).
   clip-path keeps the header's layout size, so measurements elsewhere stay stable. */
@media(max-width:760px){
 .h-header{clip-path:inset(-12px -12px -12px -12px);transition:clip-path .3s cubic-bezier(.4,0,.2,1)}
 .h-header.is-compact{clip-path:inset(-12px -12px var(--h-compact-clip,0px) -12px)}
 .h-header::after{content:"";position:absolute;left:0;right:0;top:calc(100% - var(--h-compact-clip,0px) - 1px);height:1px;background:#0d274c12;opacity:0;transition:opacity .3s;pointer-events:none}
 .h-header.is-compact::after{opacity:1}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.h-header,.h-header::after{transition:none}}
/* Brand wave under the wordmark: favicon wave with the Elbschwung gradient.
   brand-wave.js moves it as a travelling wave; the intro forms it from characters. */
.h-brand{position:relative}
.h-header .h-brand-wave{position:absolute;left:0;top:calc(100% - 2px);width:100%;height:auto;overflow:visible;pointer-events:none;fill:none;stroke:none;stroke-width:0}
.h-brand-wave .h-wave-line{fill:none;stroke:url(#h-wave-gradient);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.h-brand-wave .h-wave-dot{fill:#38BDF8;transform-box:fill-box;transform-origin:center}
.h-brand-wave .h-wave-halo{fill:#38BDF8;opacity:0;transform-box:fill-box;transform-origin:center}
.h-brand-wave.is-pending .h-wave-line{stroke-dashoffset:1}
.h-brand-wave.is-pending .h-wave-dot{opacity:0;transform:scale(.2)}
.h-brand-wave.is-drawn .h-wave-line{animation:h-wave-draw 1.1s cubic-bezier(.65,0,.35,1) both}
.h-brand-wave.is-drawn .h-wave-dot{animation:h-wave-dot .45s cubic-bezier(.34,1.56,.64,1) .95s both}
.h-brand-wave.is-drawn .h-wave-halo{animation:h-wave-halo 2.6s ease-in-out 1.4s infinite}
.h-brand-wave.is-formed .h-wave-halo{animation:h-wave-halo 2.6s ease-in-out .4s infinite}
@keyframes h-wave-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes h-wave-dot{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes h-wave-halo{0%,100%{opacity:0;transform:scale(.55)}50%{opacity:.3;transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){
 .h-brand-wave .h-wave-line,.h-brand-wave.is-pending .h-wave-line{stroke-dashoffset:0;animation:none!important}
 .h-brand-wave .h-wave-dot,.h-brand-wave.is-pending .h-wave-dot{opacity:1;transform:none;animation:none!important}
 .h-brand-wave .h-wave-halo{display:none}
}
@media(forced-colors:active){.h-brand-wave .h-wave-line{stroke:CanvasText}.h-brand-wave .h-wave-dot{fill:CanvasText}.h-brand-wave .h-wave-halo{display:none}}