:root{
  --navy:#0B0B23; --orange:#FF4436; --white:#FFFFFF; --paper:#F4F5F7; --line:#E0E2E9; --slate:#50546B; --slot:#E8EAEF;
  /* Manrope everywhere; Unbounded only for the home hero's headline (.hero h1) */
  --display:"Manrope",system-ui,sans-serif; --sans:"Manrope",system-ui,sans-serif;
  --hero-display:"Unbounded",system-ui,sans-serif;
  --gut:clamp(16px,4vw,56px);
  /* from button-design / cta-card */
  --navy-800:#2b2b50; --navy-600:#5e5e87; --navy-400:#9898b3; --navy-200:#dadae7; --navy-100:#efeff5;
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:72px;  /* navbar height; the home hero slides underneath it */
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--white);color:var(--navy);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}

html{scroll-padding-top:88px}

/* ---------- Navbar: full-width bar in the same raised material as the buttons
   (soft gradient, bright top edge, soft drop). It slides away while scrolling
   down and comes back on the first scroll up (nav.js toggles .is-hidden). The
   links sit in an inset track like the language toggle; the current page is
   the raised "thumb". ---------- */
/* At the very top the bar is transparent and sits on the page/hero; the raised
   surface (::before) fades in once the page scrolls under it. */
.top{position:sticky;top:0;z-index:20;transition:transform .4s var(--ease)}
.top::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  border-bottom:1px solid var(--navy-200);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,245,249,.92));
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(11,11,35,.04),0 12px 32px -18px rgba(11,11,35,.28);
  transition:opacity .3s var(--ease)}
.top.is-scrolled::before{opacity:1}
/* never transparent over the navy (navy-ripple.js sets html.navy-on) */
html.navy-on .top::before{opacity:1}
.top.is-hidden{transform:translateY(-100%)}
.top .bar{display:flex;align-items:center;gap:14px;height:var(--nav-h)}
.top .logo{display:flex;flex:none}
.top .logo img{height:38px;width:auto}
@media (max-width:640px){.top .logo img{height:32px}}

.nav{display:flex;gap:2px;margin:0 auto;padding:4px;border-radius:999px;
  background:linear-gradient(180deg,#ebebf2,#f4f4f8);box-shadow:inset 0 1px 3px rgba(11,11,35,.12)}
.nav a{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:14.5px;color:var(--slate);text-decoration:none;transition:color .2s var(--ease),background-color .2s var(--ease)}
.nav a:hover{color:var(--navy);background:rgba(255,255,255,.55)}
.nav a[aria-current="page"]{color:var(--navy);border-color:var(--navy-200);
  background:linear-gradient(180deg,#ffffff,#f7f7fa);box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(11,11,35,.12)}

.btn--circle{width:48px;padding:0}
.btn.btn--circle{padding:0}   /* .btn (declared later) would otherwise re-add its side padding */
.btn--circle.btn--sm{width:38px}
.btn--circle:hover .icon,.btn--circle:active .icon{transform:none}
.menu-toggle{width:44px;height:44px;flex:none}
.top .menu-toggle .icon{transition:transform .45s var(--ease);transform:none}
/* hamburger: three lines that fold into an X while the menu is open */
.menu-toggle .icon svg path{transform-box:view-box;transform-origin:12px 12px;transition:transform .4s var(--ease),opacity .2s var(--ease)}
.top .menu-toggle[aria-expanded="true"] .icon .l1{transform:rotate(45deg) translateY(5px)}
.top .menu-toggle[aria-expanded="true"] .icon .l2{opacity:0}
.top .menu-toggle[aria-expanded="true"] .icon .l3{transform:rotate(-45deg) translateY(-5px)}
.top .menu-toggle{display:none}  /* .top: must beat .btn{display:inline-flex}; shown ≤1024px, once nav.js has un-hidden it */

/* Dropdown (phones/tablets): overlays the page instead of pushing it down */
.top .wrap{position:relative}
.menu{position:absolute;top:calc(100% + 10px);left:var(--gut);right:var(--gut);padding:10px;border-radius:26px;border:1px solid var(--navy-200);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,245,249,.96));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 #fff,0 18px 40px -18px rgba(11,11,35,.32);
  display:grid;gap:10px;animation:menu-in .35s var(--ease)}
.menu[hidden]{display:none}
.menu nav{display:grid}
.menu nav a{padding:14px 16px;border-radius:16px;font-weight:600;font-size:17px;text-decoration:none}
.menu nav a:hover{background:var(--navy-100)}
.menu nav a[aria-current="page"]{color:var(--orange)}
.menu .btn{width:100%}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ---------- Buttons: tactile (button-design) ----------
   Soft gradient, raised at rest, lifts on hover, presses in on click.
   Each variant only swaps the seven tokens; the base does the rest. */
.btn{
  --top:#ffffff; --bottom:#f5f5f9; --fg:var(--navy); --edge:var(--navy-200);
  --shine:rgba(255,255,255,.9); --drop:rgba(11,11,35,.08); --press:rgba(11,11,35,.14);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--edge);
  background:linear-gradient(180deg,var(--top),var(--bottom));color:var(--fg);
  font:700 15px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 var(--shine),0 1px 2px var(--drop),0 2px 6px var(--drop);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03);
  box-shadow:inset 0 1px 0 var(--shine),0 2px 4px var(--drop),0 6px 14px var(--drop)}
.btn:active{transform:translateY(1px);filter:none;
  background:linear-gradient(180deg,var(--bottom),var(--top));
  box-shadow:inset 0 2px 4px var(--press),inset 0 1px 1px var(--press);transition-duration:.06s}
.btn--primary{--top:#ff5a4d;--bottom:#f53a2c;--fg:var(--white);--edge:#e23225;
  --shine:rgba(255,255,255,.28);--drop:rgba(245,58,44,.25);--press:rgba(120,20,12,.35)}
.btn--dark{--top:#22224a;--bottom:#0b0b23;--fg:var(--white);--edge:#0b0b23;
  --shine:rgba(255,255,255,.14);--drop:rgba(11,11,35,.22);--press:rgba(0,0,0,.5)}
.btn--secondary{/* base white tokens */}
.btn--sm{height:38px;padding:0 16px;font-size:14px;gap:8px}
.btn--lg{height:58px;padding:0 32px;font-size:17px;gap:12px}
.btn .icon{display:inline-flex;transition:transform .25s var(--ease)}
.btn .icon svg{width:18px;height:18px}
.btn:hover .icon{transform:translateX(3px)}
.btn:active .icon{transform:translateX(1px)}

/* ---------- Segmented toggle (button-design): inset track, raised thumb ----------
   Used for the language switch. The thumb only appears once the script has
   measured it (.is-ready); without JS the active option is simply the darker one. */
.segmented{position:relative;display:inline-flex;padding:4px;border-radius:999px;
  background:linear-gradient(180deg,#ebebf2,#f4f4f8);box-shadow:inset 0 1px 3px rgba(11,11,35,.12)}
.segmented .thumb{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;opacity:0;
  background:linear-gradient(180deg,#ffffff,#f7f7fa);border:1px solid var(--navy-200);
  box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(11,11,35,.12)}
.segmented.is-ready .thumb{opacity:1;transition:transform .45s var(--ease),width .45s var(--ease)}
.segmented button{position:relative;z-index:1;height:30px;padding:0 12px;border:0;border-radius:999px;
  background:none;cursor:pointer;font:700 13px/1 var(--sans);color:var(--slate);transition:color .3s var(--ease)}
.segmented button[aria-pressed="true"]{color:var(--navy)}
.segmented button:focus-visible{outline-offset:2px}

.slot{position:relative;overflow:hidden;background:var(--slot);aspect-ratio:var(--ar,16/9);border-radius:24px;
  background-image:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(11,11,35,.035) 22px 44px)}
.slot img{width:100%;height:100%;object-fit:cover}
.slot figcaption{position:absolute;left:18px;bottom:16px;right:18px;display:flex;gap:10px;align-items:center;font:600 12px/1.4 var(--sans);color:var(--slate)}
.slot figcaption b{flex:none;color:var(--white);background:var(--orange);border-radius:6px;padding:4px 8px;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
.slot.has-img figcaption{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}

.eyebrow{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
h1{font:700 clamp(40px,6vw,92px)/1.02 var(--display);letter-spacing:-.035em;max-width:15ch;margin:20px 0 0}
h1 em{font-style:normal;color:var(--orange)}
h2{font:700 clamp(30px,3.5vw,50px)/1.08 var(--display);letter-spacing:-.03em;margin-top:14px;max-width:18ch}
h3{font:700 21px/1.2 var(--display);letter-spacing:-.02em}
.intro{color:var(--slate);max-width:36em}

/* ---------- Home hero: centred copy, photo rising from the bottom edge ----------
   Badge, two-line headline, one-line subtitle, two buttons, all centred; the
   full-bleed photo fills the lower part and dissolves upward into the page. */
/* hero-tap.js drives the arms while the hero holds (see .hero__pin):
   --pl / --pr = how far the card arm / validator arm has come (0 → 1),
   --rl / --rr = a small swing around each shoulder (degrees, 0 at both ends). */
.hero{position:relative;overflow:hidden;overflow:clip;margin-top:calc(-1 * var(--nav-h));display:flex;flex-direction:column;padding-bottom:clamp(8px,2vh,24px);
  --pl:1;--pr:1;--rl:0;--rr:0;             /* no-JS / reduced motion: finished tap */
  --w1:min(54vw,980px);                    /* left image width (1524×780) */
  --w2:calc(var(--w1) * .9094);            /* right image width (1386×780), same scale */
  --off:10vw;                              /* how far each arm starts beyond the edge */
  /* horizontal distance between card centre (87.0 % of left image) and the
     validator's tap symbol (24.5 % of right image) at p = 0 */
  --gap:calc(100vw + 2 * var(--off) - .8698 * var(--w1) - .7551 * var(--w2));
  --lift:calc(var(--w1) * .0285)}          /* half the height difference card ↔ tap symbol */
/* Brief hold for the tap: hero-tap.js sets --hold (extra scroll room, the
   ::after spacer) and --pin-top (so the pin sticks once the arms are fully on
   screen). While the pin sticks, the page seems to pause and the hands move
   together; then it scrolls on. overflow:clip (not hidden) keeps the hero from
   becoming a scroll container, which would stop the sticky pin. Without JS
   both are 0 and nothing sticks. */
.hero__pin{position:sticky;top:var(--pin-top,0px);flex:1 1 auto;display:flex;flex-direction:column}
.hero::after{content:'';flex:none;height:var(--hold,0px)}
.hero__copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:calc(var(--nav-h) + clamp(40px,8vh,104px))}
.hero h1{max-width:none;margin-top:0;font-family:var(--hero-display);font-size:clamp(36px,5.2vw,78px);line-height:1.04;
  filter:drop-shadow(0 1px 1px rgba(11,11,35,.10)) drop-shadow(0 3px 7px rgba(11,11,35,.10))}
/* Tactile, like the buttons: the letters are filled with a faint top-lit
   gradient (a touch lighter where the letters start, the site navy from
   mid-height down) and get the buttons' soft two-step drop (on the h1).
   The fill sits on an inline span with box-decoration-break:clone: an inline
   background covers each line's full glyph height, so the gradient restarts
   per line and never cuts off letter tops or descenders (the tight 1.04 line
   height lets glyphs overflow the h1's own box). drop-shadow() follows the
   letter shapes; text-shadow would paint over the fill. */
.hero h1 .plastic,.hero h1 em{color:transparent;-webkit-background-clip:text;background-clip:text;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero h1 .plastic{background-image:linear-gradient(180deg,#2a2a58 22%,#0b0b23 58%);transition:color .5s var(--ease)}
.hero h1 em{background-image:linear-gradient(180deg,#ff6e62 22%,#f53a2c 64%)}
.hero .lede{margin-top:20px;max-width:52em;text-wrap:balance;color:var(--slate);font-size:clamp(16px,1.3vw,19px)}
.hero .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}

.hero__badge{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;
  border:1px solid var(--navy-200);background:linear-gradient(180deg,#ffffff,#f5f5f9);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,11,35,.06),0 2px 6px rgba(11,11,35,.05);
  font-size:13px;font-weight:600;color:var(--navy);text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.hero__badge:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(11,11,35,.06),0 6px 14px rgba(11,11,35,.08)}
.hero__badge-tag{padding:4px 10px;border-radius:999px;background:linear-gradient(180deg,#22224a,#0b0b23);color:var(--white);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.hero__badge-arrow{transition:transform .25s var(--ease)}
.hero__badge-short{display:none}
.hero__badge:hover .hero__badge-arrow{transform:translateX(3px)}

/* tall enough for the arms (image height ≈ .51 × width, plus the lift) below their offset */
.hero__media{position:relative;flex:1 1 auto;--arm-top:clamp(48px,10vh,120px);min-height:calc(var(--w1) * .54 + var(--arm-top))}

/* ---------- Arms ---------- */
.arm{position:absolute;top:var(--arm-top);will-change:transform;
  /* soft drop shadow on the wrapper, not the img: the img carries the fade mask,
     which would clip the shadow into a hard box at the image edge */
  filter:drop-shadow(0 14px 18px rgba(11,11,35,.16)) drop-shadow(0 3px 5px rgba(11,11,35,.10))}
.arm img{display:block;width:100%;height:auto}
/* The card arm covers a bit more of the distance (56 %) than the arm offering
   the validator (44 %). Each turns around its shoulder (the outer edge), so the
   swing lifts the hand in an arc instead of sliding it in a straight line. */
.arm--left{left:calc(-1 * var(--off));width:var(--w1);z-index:2;transform-origin:0 50%;
  transform:translate(calc(var(--pl) * var(--gap) * .56),calc(var(--pl) * var(--lift))) rotate(calc(var(--rl) * 1deg))}
.arm--right{right:calc(-1 * var(--off));width:var(--w2);transform-origin:100% 50%;
  transform:translate(calc(var(--pr) * var(--gap) * -.44),calc(var(--pr) * var(--lift) * -1)) rotate(calc(var(--rr) * 1deg))}
/* the tap itself: the card presses in, the hand holding the terminal gives a little.
   The nudge moves the whole arm (so the orange screen overlay goes along) and uses
   the separate translate property, which adds to the scroll-driven transform. */
.hero.is-tapped .arm--left{animation:tap-press .55s var(--ease)}
.hero.is-tapped .arm--right{animation:tap-give .55s var(--ease)}
@keyframes tap-press{35%{translate:6px 2px}}
@keyframes tap-give{35%{translate:4px 3px}}
/* re-tap before each new message (hero-screen.js adds .is-retap): the card lifts
   off a little and taps again, the other hand gives, the check redraws and glows */
.hero.is-retap .arm--left{animation:retap-press .6s var(--ease)}
.hero.is-retap .arm--right{animation:retap-give .6s var(--ease)}
.hero.is-retap .val-screen{animation:retap-glow 1.1s var(--ease) .3s}
.hero.is-retap .val-screen svg{animation:retap-check .4s var(--ease) .3s both}
@keyframes retap-press{30%{translate:-9px -5px}58%{translate:5px 2px}}
@keyframes retap-give{58%{translate:4px 3px}}
@keyframes retap-glow{from{box-shadow:var(--shade),0 0 0 0 rgba(255,68,54,.5),0 0 16px rgba(255,68,54,.35)}to{box-shadow:var(--shade),0 0 0 18px rgba(255,68,54,0),0 0 16px rgba(255,68,54,.35)}}
@keyframes retap-check{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
/* the sleeves dissolve toward the outer edge, so the image edge never shows */
.arm--left img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%);mask-image:linear-gradient(to right,transparent 0,#000 24%)}
.arm--right img{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 24%);mask-image:linear-gradient(to left,transparent 0,#000 24%)}
/* tap feedback over the validator's real screen */
/* The screen is lit from inside rather than painted on: an orange backlight at
   ~93 % (the real display shows through faintly), a darker recessed rim, edges
   that fall off like a real panel, a soft glass reflection top left, faint LCD
   rows, glowing content and a little light spilling onto the bezel. */
.val-screen{position:absolute;left:17.1%;top:8.3%;width:13.6%;height:15.4%;border-radius:4%/6%;
  display:grid;place-items:center;opacity:0;transform:scale(.96);
  --shade:inset 0 0 0 1px rgba(40,6,2,.3),inset 0 2px 5px rgba(40,6,2,.38),inset 0 -1px 0 rgba(255,255,255,.14);
  background:
    linear-gradient(155deg,rgba(255,255,255,.26) 0 16%,rgba(255,255,255,0) 40%),
    radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(60,8,4,.3) 100%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#ff6356,#e9392b);
  box-shadow:var(--shade),0 0 0 0 rgba(255,68,54,0),0 0 16px rgba(255,68,54,0);
  transition:opacity .25s var(--ease),transform .3s var(--ease),box-shadow .4s var(--ease)}
/* what the tap just paid for; hero-screen.js cycles the text (bus, shop, charger, parking) */
.val-screen{container-type:inline-size;align-content:center;gap:6%}
.val-msg{font:700 12cqw/1 var(--sans);letter-spacing:-.01em;color:var(--white);white-space:nowrap;text-shadow:0 0 6px rgba(255,255,255,.5);opacity:0;transition:opacity .3s var(--ease) .25s}
.hero.is-tapped .val-msg{opacity:1}
.hero.is-tapped .val-msg.is-out{opacity:0;transition-delay:0s;transition-duration:.15s}
@container (max-width:70px){.val-msg{display:none}}
.val-screen svg{width:60%;height:auto;fill:none;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,255,255,.55));stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .35s var(--ease) .12s}
.hero.is-tapped .val-screen{opacity:.93;transform:none;animation:tap-glow 1.1s var(--ease) .05s;
  box-shadow:var(--shade),0 0 0 0 rgba(255,68,54,0),0 0 16px rgba(255,68,54,.35)}
.hero.is-tapped .val-screen svg{stroke-dashoffset:0}
@container (min-width:71px){.val-screen svg{width:42%}}

/* ---------- Left arm variants (hero[data-arm], set per visit inline) ----------
   All three sit in the card arm's frame (same anchors, same motion); the phone
   and watch images are sized/offset in card units (width and top as % of the
   card image width). The phone is held against the terminal in front of it;
   the watch goes behind the terminal (z-index 0), its fist tucked away. */
.arm--left .v-phone,.arm--left .v-watch{display:none}
.hero[data-arm="phone"] .arm--left .v-card,.hero[data-arm="watch"] .arm--left .v-card{display:none}
.hero[data-arm="phone"] .arm--left .v-phone{display:block;width:83.53%;margin-top:-1.969%}
.hero[data-arm="watch"] .arm--left .v-watch{display:block;width:106.955%;margin-top:2.231%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
.hero[data-arm="watch"] .arm--left{z-index:0}
@keyframes tap-glow{from{box-shadow:var(--shade),0 0 0 0 rgba(255,68,54,.5),0 0 16px rgba(255,68,54,.35)}to{box-shadow:var(--shade),0 0 0 18px rgba(255,68,54,0),0 0 16px rgba(255,68,54,.35)}}
@media (max-width:640px){.hero{--w1:94vw;--off:44vw}}

/* ---------- Navy zone: tap → the page floods navy ----------
   .navy-layer sits behind hero, statement and services (z-index -1 inside the
   isolated zone). navy-ripple.js sizes it (--navy-h, down to the middle of the
   first service card) and grows it as a circle from the validator screen until
   it covers the whole layer, oval end included. Text blocks in the zone turn
   light as the circle reaches them (.on-navy). Without JS the layer stays hidden and only the
   statement band is navy. */
.navy-zone{position:relative;isolation:isolate}
.navy-layer{position:absolute;top:0;left:0;right:0;height:var(--navy-h,0);z-index:-1;pointer-events:none;display:none;
  background:var(--navy);clip-path:circle(0 at 50% 0);
  /* the navy ends in one continuous oval arc: the ellipse is wider than the
     page (rx 60 %), so it meets the sides at an angle instead of turning vertical */
  --oval:clamp(90px,16vw,280px);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--oval) + 1px) no-repeat,
    radial-gradient(ellipse 60% 100% at 50% 0,#000 99.4%,transparent 100%) bottom/100% var(--oval) no-repeat;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--oval) + 1px) no-repeat,
    radial-gradient(ellipse 60% 100% at 50% 0,#000 99.4%,transparent 100%) bottom/100% var(--oval) no-repeat}
.navy-zone.has-navy .navy-layer{display:block}
/* the page's column lines, continued faintly on the navy */
.navy-layer::before{content:'';position:absolute;inset:0;box-sizing:border-box;width:min(1280px,100%);margin:0 auto;padding:0 var(--gut);
  background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(270deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:25% 100%,100% 100%;background-repeat:repeat-x,no-repeat;background-origin:content-box;background-clip:content-box}
.hero h1,.hero .lede,#services h2,#services h2 .mute,#services .intro{transition:color .5s var(--ease)}
/* .on-navy is set per block by navy-ripple.js the moment the circle reaches it */
.hero__copy.on-navy h1 .plastic,#services .head.on-navy h2{color:var(--white)}
.hero__copy.on-navy .lede,#services .head.on-navy .intro{color:#C5C7DC}
#services .head.on-navy h2 .mute{color:#8E90B4}
@media (max-width:640px){.navy-layer::before{background-size:50% 100%,100% 100%}}

/* ---------- Statement: the company goal, letter by letter ----------
   statement.js splits the text into letters (.ch) and sets each one's opacity
   from the scroll position (faint → lit, like mobilitylab.ch). The whole text
   only shows once the navy is in (.is-lit). Generous space above and below,
   as on the reference. Without JS the text is simply shown. */
.statement{position:relative;background:var(--navy);color:var(--white);padding:clamp(120px,22vw,320px) 0}
.navy-zone.has-navy .statement{background:none}
.statement__text{font:300 clamp(24px,3.5vw,52px)/1.16 var(--sans);letter-spacing:-.03em;max-width:34ch;margin:0;text-align:left;text-wrap:balance}
.statement__text em{font-style:normal;color:var(--orange)}
.statement.is-armed .ch{opacity:.15}
.statement.is-armed .statement__text{opacity:0;transition:opacity .6s var(--ease)}
.statement.is-armed.is-lit .statement__text{opacity:1}
/* ---------- Blur-in reveal (reveal.js) ----------
   Same rise-out-of-a-blur as the statement, for other sections: words rise a
   little, blocks (cards) a bit further. Delay = item index × --step. */
[data-reveal].is-armed .rv{opacity:0;filter:blur(10px);transform:translateY(.45em) scale(.94)}
[data-reveal].is-armed .rv:not(.rv--block){display:inline-block}
[data-reveal].is-armed .rv--block{transform:translateY(28px) scale(.98)}
[data-reveal].is-in .rv{opacity:1;filter:none;transform:none;
  transition:opacity .6s var(--ease),filter .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i) * var(--step,45ms))}

section.band{padding:clamp(80px,9vw,136px) 0}
.head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}




/* team (home, #team; classes expert-*): white band, a row of compact cards
   like a leadership page: the whole portrait (4:5, uncropped) on top, name
   and role on a light panel below. Hover darkens the panel and zooms the photo
   a touch; a click opens the profile dialog (experts.js). */
.expert-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.expert__card{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:0;border:0;border-radius:18px;overflow:hidden;
  background:var(--paper);color:var(--navy);font:inherit;text-align:left;cursor:pointer;transition:background .25s var(--ease)}
.expert__card:hover{background:#E8EAEF}
.expert__card:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.expert__photo{position:relative;flex:none;display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(180deg,#22224a,var(--navy))}
.expert__photo > span[aria-hidden]{font:700 clamp(24px,2.4vw,34px)/1 var(--display);letter-spacing:-.03em;color:rgba(255,255,255,.9)}
.expert__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .6s var(--ease)}
.expert__card:hover .expert__photo img{transform:scale(1.04)}
.expert__text{display:grid;align-content:start;gap:4px;padding:14px 16px 16px}
.expert__name{font-size:16px;font-weight:700;line-height:1.25}
.expert__role{font-size:13px;font-weight:500;line-height:1.4;color:var(--slate)}

/* profile dialog: a light header (portrait | role, name, LinkedIn | close) over the bio */
.expert-dialog{margin:auto;width:min(680px,calc(100vw - 32px));max-height:min(86vh,780px);padding:0;border:1px solid var(--navy-200);border-radius:24px;
  overflow:hidden;background:var(--white);color:var(--navy);box-shadow:0 24px 64px -12px rgba(11,11,35,.35)}
.expert-dialog[open]{display:flex;flex-direction:column}
.expert-dialog::backdrop{background:rgba(11,11,35,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.expert-dialog__head{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;
  padding:20px;background:var(--paper);border-bottom:1px solid var(--line)}
.expert-dialog__photo{width:128px;aspect-ratio:4/5;border-radius:14px}
.expert-dialog__photo > span[aria-hidden]{font-size:30px}
.expert-dialog__role{margin:0 0 6px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.expert-dialog h3{font-size:26px;line-height:1.15}
.expert-dialog__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.expert-dialog__links[hidden]{display:none}
.expert-dialog__links .icon svg{width:16px;height:16px}
.expert-dialog__links .btn:hover .icon{transform:none}
.expert-dialog__close{align-self:start;flex:none}
.expert-dialog__close.btn--circle{padding:0}
.expert-dialog__close svg{width:18px;height:18px}
.expert-dialog__body{overflow:auto;padding:22px 28px 28px;display:grid;gap:14px}
.expert-dialog__body p{margin:0;max-width:62ch;color:var(--slate);font-size:15px;line-height:1.7}
.expert-dialog__body .expert__lead{color:var(--navy);font-size:17px;font-weight:600;line-height:1.55}
@media (max-width:1100px){.expert-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (max-width:640px){.expert-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.expert__text{padding:12px 12px 14px}.expert__name{font-size:15px}.expert__role{font-size:12.5px}
  .expert-dialog__head{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:16px}.expert-dialog__close{position:absolute;top:12px;right:12px}
  .expert-dialog__head{position:relative;padding-right:60px}
  .expert-dialog__photo{width:84px}.expert-dialog h3{font-size:20px}.expert-dialog__body{padding:18px 20px 22px}}

.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.proj{display:flex;flex-direction:column;gap:14px}
.proj .slot{--ar:4/3}
.tag{align-self:flex-start;font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--orange);border:1.5px solid var(--orange);border-radius:999px;padding:4px 10px;margin-top:8px}
.proj blockquote{color:var(--slate);font-size:15.5px}
.proj figcaption{font-size:13.5px;font-weight:600}
.clients{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--slate);font-weight:600;font-size:15px}

/* ---------- CTA card (cta-card): raised bars drifting diagonally on a canvas,
   lit red from the bottom-right corner. Pressing the button blows them away;
   fresh bars sweep back in a few seconds later. The card's own background is
   only the no-JS fallback — the canvas paints over it. */
.cta-card{position:relative;isolation:isolate;overflow:hidden;min-height:280px;
  display:flex;align-items:center;justify-content:space-between;gap:32px 56px;
  padding:clamp(40px,5vw,64px);border-radius:28px;background:#f6f6f9;border:1px solid var(--navy-200);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,11,35,.04),0 20px 50px -20px rgba(11,11,35,.14)}
.cta-card canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.cta-card h2{margin:0;max-width:22ch;text-wrap:balance}
.cta-card .side{flex:none;display:grid;justify-items:end;gap:20px}

/* ---------- Footer: tall and navy. Intro + two contact buttons, then every
   major destination in columns, then a bottom row, and the wordmark running off
   the bottom edge so the page ends on the brand, not on a thin strip. ---------- */
.site-footer{position:relative;overflow:hidden;background:var(--navy);color:#C5C7DC;
  padding-top:clamp(72px,9vw,120px);font-size:15px}
/* :not(.btn) — otherwise this outranks .btn{color:var(--fg)} and greys the button text */
.site-footer a:not(.btn){color:inherit;text-decoration:none}
/* On-dark button variant (button-design: ".dark .btn--outline") */
.site-footer .btn--outline{--top:#1c1c3d;--bottom:#121230;--fg:var(--white);--edge:rgba(255,255,255,.18);
  --shine:rgba(255,255,255,.08);--drop:rgba(0,0,0,.35);--press:rgba(0,0,0,.55)}
.site-footer .btn--outline .icon svg{width:18px;height:18px}

/* Structure after mobilitylab.ch: on the left the logo, address, contact and
   LinkedIn; on the right two link columns (pages, services) with the contact
   button below; every block headed by a small "//" label. */
.footer-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px 64px;padding-bottom:clamp(56px,7vw,96px)}
.footer-info{display:grid;gap:28px;align-content:start;justify-items:start}
.footer-logo{display:block;margin-bottom:8px}
.footer-logo img{height:52px;width:auto}
.footer-label{display:flex;align-items:center;gap:10px;margin:0 0 12px;max-width:none;font:500 14px/1.4 var(--sans);letter-spacing:0;color:var(--white)}
.footer-label::before{content:'//';font-weight:700;letter-spacing:-.06em;color:var(--orange)}
.footer-info address,.footer-info p{margin:0;font-style:normal;color:#9A9CB8;line-height:1.6}
.footer-info p a:hover{color:var(--white)}
.footer-social .btn .icon svg{width:16px;height:16px}
.footer-links{display:grid;grid-template-columns:repeat(2,minmax(150px,230px));gap:40px 56px;align-content:start}
.footer-links .footer-label{margin-bottom:24px}
.footer-links ul{list-style:none;display:grid;gap:14px}
.footer-links ul a{color:var(--white);font-weight:500;font-size:16px;line-height:1.4;transition:color .2s var(--ease)}
.footer-links ul a:hover,.footer-bottom a:not(.btn):hover{color:var(--white);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--orange)}
.footer-links ul a[aria-current="page"],.footer-bottom a[aria-current="page"]{color:var(--orange)}
.footer-links .footer-cta{grid-column:1/-1;justify-self:start}

.footer-bottom{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;padding:22px 0;
  border-top:1px solid #23244A;color:#9A9CB8;font-size:14px}
.footer-bottom .sep{margin:0 6px;color:var(--orange);font-weight:700;letter-spacing:-.06em}
.footer-bottom span+a{margin-left:auto}
@media (max-width:860px){.footer-main{grid-template-columns:1fr}}
@media (max-width:420px){.footer-links{grid-template-columns:1fr 1fr;gap:36px 24px}}

.footer-mark{margin:0 0 -.45em;padding:clamp(28px,4vw,56px) 0 0;text-align:center;white-space:nowrap;user-select:none;
  font:800 8.9vw/1.1 var(--display);letter-spacing:-.05em;
  text-indent:0;  /* optical centring: shifts the line by half this, measured on the rendered letters */
  /* Plastic, like the buttons: glyphs filled with a faint top-lit gradient plus a
     thin bright top edge. drop-shadow() follows the letter shapes; text-shadow
     would paint over the gradient fill. */
  color:transparent;
  /* origin content-box: the gradient maps onto the text line, not the padding */
  background:linear-gradient(180deg,#34356e 7%,#24255a 33%,#1a1b45 67%,#131436 97%) content-box no-repeat;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.12))}

@media (max-width:1024px){
  .top .nav{display:none}
  .top .menu-toggle:not([hidden]){display:inline-flex}
  .top .lang{margin-left:auto}
  .hero .row,.head{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cta-card{flex-direction:column;align-items:flex-start;min-height:0;padding:40px 28px}
  .cta-card .side{justify-items:start;width:100%}
  .cta-card .btn{width:100%}
}
@media (max-width:640px){
  .top .book,.top .lang{display:none}
  .top .menu-toggle{margin-left:auto}
  :root{--nav-h:64px}
  .footer-links .footer-cta{justify-self:stretch}
  .footer-mark{font-size:8.6vw}
  .hero__copy{padding-top:calc(var(--nav-h) + 36px)}
  .hero__badge{font-size:12.5px;white-space:nowrap}
  .hero__badge-long{display:none}
  .hero__badge-short{display:inline}
  .hero .actions{flex-direction:column;align-items:stretch;width:100%}
  .hero__media{--arm-top:40px}
}
@media (prefers-reduced-motion:reduce){
  .btn,.btn .icon,.segmented .thumb,.segmented button,.menu-toggle .icon,.top{transition-duration:.01ms!important}
  .menu{animation:none}
}

/* ==========================================================================
   Sub-pages (projects, events, imprint)
   ========================================================================== */
.page-hero{padding:clamp(48px,6vw,96px) 0 clamp(40px,5vw,64px)}
.page-hero .intro{margin-top:20px;font-size:clamp(17px,1.35vw,19px)}

.more{margin-top:32px}

/* Project cards */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.case{background:var(--paper);border-radius:24px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.case .tag{margin-top:0}
.case blockquote{color:var(--slate);font-size:16px}
.case .who{display:flex;gap:14px;align-items:center;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.case .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--white);flex:none}
.case .who b{display:block;font-size:15px}
.case .who span{display:block;font-size:13.5px;color:var(--slate);line-height:1.4}

/* Events */
.event{display:grid;grid-template-columns:minmax(220px,5fr) 7fr;gap:clamp(24px,4vw,56px);align-items:center;
  background:var(--paper);border-radius:28px;padding:clamp(24px,4vw,48px)}
.event .mark{background:var(--white);border-radius:20px;aspect-ratio:4/3;display:grid;place-items:center;padding:12%}
.event .mark img{width:100%;height:auto}
.event .when{font-weight:700;color:var(--orange);font-size:15px;letter-spacing:.02em}
.event h3{font-size:clamp(24px,2.3vw,32px);margin-top:8px}
.event p{color:var(--slate);margin-top:12px;max-width:34em}
.event .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.event .facts span{font-size:13px;font-weight:600;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:6px 12px}
.event .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Imprint */
.legal{max-width:760px;display:grid;gap:28px}
.legal h2{font-size:18px;font-family:var(--sans);letter-spacing:0;margin:0 0 6px;max-width:none}
.legal p{color:var(--slate)}
.legal a{color:var(--navy)}

@media (max-width:1024px){
  .cases{grid-template-columns:1fr}
  .event{grid-template-columns:1fr}
  .event .mark{max-width:360px}
}
@media (max-width:640px){
}

/* ==========================================================================
   Contact page: info column + Cal.com calendar in a raised card
   ========================================================================== */
/* Two columns: on the left Eric's profile and the direct
   contact details; the calendar card
   on the right. Below 1024 px the info runs as a row above the calendar again,
   so Cal.com keeps enough width for month + time slots. */
.booking{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.booking-info{display:grid;gap:22px}
.host{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:12px;border-radius:20px;background:var(--paper)}
.host-photo{display:block;width:84px;height:84px;overflow:hidden;border-radius:16px;background:var(--navy)}
.host-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.3);transform-origin:50% 28%}
.host b{display:block;font-size:17px;line-height:1.3}
.host span span{display:block;margin-top:2px;color:var(--slate);font-size:14px;line-height:1.45}
.booking-direct{display:grid;gap:4px;padding:4px 8px 0;font-size:15px}
.booking-direct h2{margin:0 0 8px;max-width:none;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.booking-direct a{font-weight:700;text-decoration:none}
.booking-direct a:hover{color:var(--orange)}
.booking-direct span{color:var(--slate)}

.booking-card{position:relative;min-height:660px;padding:10px;border-radius:28px;background:var(--white);
  border:1px solid var(--navy-200);overflow:hidden;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,11,35,.04),0 24px 60px -24px rgba(11,11,35,.18)}
.booking-embed{position:relative;z-index:1;width:100%;min-height:640px;border-radius:20px;overflow:hidden}
.booking-fallback{margin-top:14px;font-size:14px;color:var(--slate)}
.booking-fallback a{font-weight:700;color:var(--navy)}

/* Skeleton: sits above the embed and fades out once Cal is ready */
.booking-skeleton{position:absolute;inset:10px;z-index:2;display:grid;grid-template-columns:1.6fr 1fr;gap:32px;padding:32px;
  border-radius:20px;background:var(--white);transition:opacity .45s var(--ease),visibility 0s linear .45s}
.booking-card.is-ready .booking-skeleton{opacity:0;visibility:hidden}
.booking-card.is-ready,.booking-card.is-ready .booking-embed{min-height:0}  /* shrink to Cal's real height */
.sk-line,.sk-grid i,.sk-slot{display:block;border-radius:10px;background:linear-gradient(90deg,var(--navy-100) 0%,#f7f7fa 50%,var(--navy-100) 100%);
  background-size:200% 100%;animation:sk-shine 1.4s ease-in-out infinite}
.sk-line{height:14px;margin-bottom:24px}.w40{width:40%}.w60{width:60%}
.sk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.sk-grid i{aspect-ratio:1;border-radius:12px}
.sk-times{display:grid;align-content:start;gap:10px}
.sk-slot{height:46px;border-radius:999px}
@keyframes sk-shine{to{background-position:-200% 0}}

@media (max-width:1024px){
  .booking{grid-template-columns:1fr;gap:28px}
  .booking-info{grid-template-columns:1fr 1fr;align-items:center}
}
@media (max-width:640px){
  .booking-info{grid-template-columns:1fr}
  .booking-card{padding:6px;border-radius:22px}
  .booking-skeleton{grid-template-columns:1fr;inset:6px;padding:20px}
  .sk-times{display:none}
}
@media (prefers-reduced-motion:reduce){.sk-line,.sk-grid i,.sk-slot{animation:none}}

/* ==========================================================================
   Learnings from mobilitylab.ch / igel.ua / kortrijkxpo.com
   ========================================================================== */

/* Faint vertical column lines behind the page (MobilityLab). Four columns on the
   content width; coloured sections and cards simply cover them. */
:root{--grid:#EEF0F4}
body::before{content:'';position:fixed;top:0;bottom:0;left:0;right:0;z-index:-1;pointer-events:none;
  width:min(1280px,100%);margin:0 auto;padding:0 var(--gut);
  background-image:linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(270deg,var(--grid) 1px,transparent 1px);
  background-size:25% 100%,100% 100%;background-repeat:repeat-x,no-repeat;
  background-origin:content-box;background-clip:content-box}
@media (max-width:640px){body::before{background-size:50% 100%,100% 100%}}

/* Two-tone headlines (MobilityLab): the second half of a heading steps back */
h2 .mute{color:var(--navy-400)}


/* ---------- Event listing (Kortrijk Xpo): big red date, then meta ---------- */
.event .date-big{display:block;font:700 clamp(40px,5vw,72px)/1 var(--display);letter-spacing:-.04em;color:var(--orange)}
.event .date-big small{display:block;margin-top:8px;font:700 15px/1 var(--sans);letter-spacing:0;color:var(--navy)}
.event .meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:14px;font-weight:600;color:var(--slate)}
.event .meta span{display:inline-flex;align-items:center;gap:6px}
.event .meta span::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--orange)}
.event .mark{position:relative}
.event .mark .tag{position:absolute;left:14px;top:14px;margin:0;background:var(--white)}
/* The featured summit on navy, lit from the top like the dark button */
.event--navy{background:linear-gradient(180deg,#16163b,var(--navy) 45%);color:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.event--navy p{color:#C5C7DC}
.event--navy .date-big small{color:var(--white)}
.event--navy .meta{color:#C5C7DC}

/* Section headings stand on their own (no preheadings), so no gap above them */
.head h2{margin-top:0}
.page-hero h1{margin-top:0}

/* ---------- Services bento (home) ----------
   What we do for every client (tall card left, its picture fading into the card),
   two client types as text cards top right, and Transit & EV charging as the
   wide card below them (picture left, fading to the right).
   Each card ends in a round arrow link. Up to 1024 px the cards stack: the
   tall one goes full width (picture left), the two small ones sit side by
   side, then the wide one; on phones the full-width cards put the picture on top. */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"tall a b" "tall wide wide";gap:20px}
.bento > :nth-child(1){grid-area:tall}
.bento > :nth-child(2){grid-area:a}
.bento > :nth-child(3){grid-area:b}
.bento > :nth-child(4){grid-area:wide}
.tile__list{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.tile__list li{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
.tile__list b{font-size:15px;color:var(--navy)}
.tile__list span{font-size:14px;line-height:1.5;color:var(--slate)}
.tile{display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:var(--paper)}
.tile__media{background:var(--white);display:grid;place-items:center;padding:clamp(16px,2vw,28px)}
.tile__media svg{width:100%;height:auto;max-width:440px}
/* a photo instead of a drawing: fills the picture area edge to edge (same fades) */
.tile__media--photo{position:relative;display:block;min-height:240px;padding:0!important;background:var(--white)}
.tile__media--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 32%}
.tile--tall .tile__media--photo img{object-position:50% 22%}
@media (min-width:1025px){.tile--tall .tile__media--photo{min-height:clamp(260px,24vw,360px)}}   /* the picture gets about half the tall card */
.tile--tall .tile__media{flex:1 1 auto;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);mask-image:linear-gradient(to bottom,#000 62%,transparent);padding-bottom:18%}
.tile--wide{flex-direction:row}
.tile--wide .tile__media{flex:1 1 50%;-webkit-mask-image:linear-gradient(to right,#000 60%,transparent);mask-image:linear-gradient(to right,#000 60%,transparent);padding-right:14%}
.tile--wide .tile__body{flex:1 1 50%}
.tile__body{display:flex;flex-direction:column;gap:12px;flex:1;padding:clamp(20px,2vw,30px)}
.tile--tall .tile__body{flex:0 0 auto}
.tile h3{font-size:clamp(20px,1.75vw,26px);line-height:1.15}
.tile p{color:var(--slate);font-size:15px;line-height:1.6;max-width:34em}
.tile__foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:auto;padding-top:16px}
/* Link button: the site's tactile secondary button. Round with just the arrow at
   rest; hovering the card (or focusing the button) grows it into "Learn more →". */
.tile__go{flex:none;min-width:38px;padding:0;gap:0;border-radius:999px;
  transition:padding .45s var(--ease),gap .45s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease)}
.tile__go .icon svg{width:16px;height:16px}
.tile__go-label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .45s var(--ease),opacity .3s var(--ease)}
.tile:hover .tile__go,.tile__go:focus-visible{padding:0 14px 0 18px;gap:8px}
.tile:hover .tile__go-label,.tile__go:focus-visible .tile__go-label{max-width:7em;opacity:1}

/* Hover depth: photos lean in a touch; text cards have a faint dot field from the
   top-right corner that grows the same slow way. */
.tile__media--photo img{transition:transform 1.2s var(--ease)}
.tile:hover .tile__media--photo img{transform:scale(1.04)}
.tile:not(.tile--tall):not(.tile--wide){position:relative;isolation:isolate}
.tile:not(.tile--tall):not(.tile--wide)::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.7;
  background-image:radial-gradient(circle,rgba(11,11,35,.13) 1px,transparent 1.5px);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(110% 90% at 100% 0,#000,transparent 62%);mask-image:radial-gradient(110% 90% at 100% 0,#000,transparent 62%);
  transform-origin:100% 0;transition:transform 1.2s var(--ease),opacity .6s var(--ease)}
.tile:not(.tile--tall):not(.tile--wide):hover::before{transform:scale(1.08);opacity:1}
@media (prefers-reduced-motion:reduce){.tile:hover .tile__media--photo img,.tile:hover::before{transform:none}}
@media (max-width:1024px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"tall tall" "a b" "wide wide"}
  .tile--tall{flex-direction:row}
  .tile--tall .tile__media{flex:1 1 50%;-webkit-mask-image:linear-gradient(to right,#000 60%,transparent);mask-image:linear-gradient(to right,#000 60%,transparent);
    padding:clamp(16px,2vw,28px) 14% clamp(16px,2vw,28px) clamp(16px,2vw,28px)}
  .tile--tall .tile__body{flex:1 1 50%}
}
@media (max-width:640px){
  .bento{gap:12px}
  .tile--tall,.tile--wide{flex-direction:column}
  .tile--tall .tile__media,.tile--wide .tile__media{flex:0 0 auto;padding:16px 16px 16%;
    -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);mask-image:linear-gradient(to bottom,#000 62%,transparent)}
  .tile__body{padding:18px 16px 16px;gap:8px}
  .tile h3{font-size:18px}
  .tile p{font-size:14px;line-height:1.5}
  .tile:not(.tile--tall):not(.tile--wide) h3{font-size:16px;overflow-wrap:anywhere}
  .tile__media--photo{aspect-ratio:4/3;min-height:0}
}

/* ---------- References: black-and-white map (references.js) ----------
   Generated vector map: light-grey sea, white neighbours, Germany and Austria
   outlined in black with thin federal-state lines, a few cities. Each client's
   service area is a soft radial gradient (no outline), clipped to its state or
   country; an orange copy (.refmap__hot) fades in when it is active. Hovering
   an area or a logo on the left eases the map into a slight zoom towards the
   area and slides a card (.refpop) in with the companies there. */
.refs__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:start}
.refs__side h2{margin-top:0}
.refs__intro{margin:16px 0 0;color:var(--slate);max-width:34em}
.reflogos{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.reflogo{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white);cursor:pointer;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s var(--ease),border-color .3s var(--ease),opacity .35s var(--ease)}
.reflogo img{display:block;width:100%;height:auto;aspect-ratio:2/1}
.reflogo:hover,.reflogo.is-on{transform:translateY(-3px);border-color:var(--navy-200);box-shadow:0 14px 28px -14px rgba(11,11,35,.3)}
.reflogos.has-active .reflogo:not(.is-on){opacity:.4}
.reflogo:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.refmap{position:relative;margin:0;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#EDEEF1;
  box-shadow:0 24px 60px -30px rgba(11,11,35,.3)}
/* the zoom scales the whole map element (composited, smooth), anchored on the active area */
.refmap__svg{display:block;width:100%;height:auto;transform-origin:0 0;transition:transform .85s cubic-bezier(.22,1,.36,1)}
.refmap__sea{fill:#EDEEF1}
.refmap__nb{fill:#FAFAFB;stroke:#C4C6CE;stroke-width:.8;stroke-linejoin:round}
.refmap__land{fill:var(--white)}
.refmap__states{fill:none;stroke:#BDBFC9;stroke-width:.7;stroke-linejoin:round}
.refmap__border{fill:none;stroke:#0B0B23;stroke-width:1.5;stroke-linejoin:round}
.refmap__nb,#land-de,#land-at,.refmap__states path{vector-effect:non-scaling-stroke}
.refmap__cities circle{fill:#6B6E82}
.refmap__cities text{font:600 12.5px var(--sans);fill:#6B6E82;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.refmap__area{fill:url(#rg-area);pointer-events:none;transition:opacity .5s var(--ease)}
.refmap__area.is-wide{fill:none}
.refmap__hot{fill:url(#rg-hot);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.refmap__hot.is-wide{fill:rgba(255,68,54,.1)}
.refmap__hot.is-on{opacity:1}
.refmap.has-active .refmap__area:not(.is-on){opacity:.3}
.refmap__hit{fill:transparent;cursor:pointer}
.refmap__pin{pointer-events:none}
.refmap__pin .dot{fill:#0B0B23;stroke:#fff;stroke-width:1.5;transition:fill .3s var(--ease)}
.refmap__pin .ring{fill:none;stroke:var(--orange);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.refmap__pin.is-on .dot{fill:var(--orange)}
.refmap__pin.is-on .ring{animation:pin-ring 2s cubic-bezier(.22,1,.36,1) infinite}
@keyframes pin-ring{from{opacity:.8;transform:scale(.35)}to{opacity:0;transform:scale(1.5)}}
.refmap__credit{position:absolute;right:14px;bottom:10px;font-size:11px;color:#8A8DA0}

@property --px{syntax:"<length>";inherits:false;initial-value:0px}
@property --py{syntax:"<length>";inherits:false;initial-value:0px}
.refpop{position:absolute;z-index:3;left:0;top:0;width:min(290px,calc(100% - 24px));padding:14px 16px 12px;border-radius:18px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(11,11,35,.1);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 22px 44px -18px rgba(11,11,35,.4);
  pointer-events:none;opacity:0;visibility:hidden;--lift:6px;--s:.94;
  transform:translate(calc(var(--px) - 50%),calc(var(--py) - 100% - var(--lift))) scale(var(--s));transform-origin:50% 100%;
  transition:opacity .3s var(--ease),--px .7s cubic-bezier(.22,1,.36,1),--py .7s cubic-bezier(.22,1,.36,1),--lift .5s cubic-bezier(.22,1,.36,1),--s .5s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
@property --lift{syntax:"<length>";inherits:false;initial-value:6px}
@property --s{syntax:"<number>";inherits:false;initial-value:.94}
.refpop.is-open{opacity:1;visibility:visible;--lift:20px;--s:1;transition-delay:0s}
.refpop.is-below{transform-origin:50% 0;transform:translate(calc(var(--px) - 50%),calc(var(--py) + var(--lift))) scale(var(--s))}
.refpop.is-fresh > *{animation:refpop-in .35s var(--ease)}
@keyframes refpop-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.refpop__title{margin:0 0 10px;font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.refpop ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.refpop li{display:flex;align-items:center;gap:12px}
.refpop__logo{flex:none;width:64px;aspect-ratio:2/1;overflow:hidden;border-radius:8px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.refpop__logo img{display:block;width:100%;height:100%;object-fit:contain}
.refpop strong{display:block;font-size:14.5px;line-height:1.3}
.refpop em{display:inline-block;margin-top:3px;padding:2px 8px;border-radius:999px;background:var(--navy-100);font-style:normal;font-size:11px;font-weight:700;color:var(--navy)}
@media (max-width:1024px){
  .refs__grid{grid-template-columns:1fr}
  .refmap{max-width:640px;width:100%;justify-self:center;order:-1}
  .reflogos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){.reflogos{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
/* info panel on the left: the active logos glide to the top (references.js,
   FLIP), the panel slides over the rest of the grid */
.reflogos-wrap{position:relative;transition:min-height .5s cubic-bezier(.22,1,.36,1)}
.reflogos li{position:relative;transition:opacity .35s ease}
.reflogos.has-panel li:not(.is-top){opacity:0;pointer-events:none}
.refinfo{position:absolute;left:0;right:0;top:var(--top,0);z-index:2;display:flex;flex-direction:column;padding:20px 20px 18px;border:1px solid var(--line);
  border-radius:20px;background:var(--white);box-shadow:0 24px 48px -24px rgba(11,11,35,.35);
  opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .55s cubic-bezier(.22,1,.36,1),top .55s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s}
.refinfo.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.refinfo__close{position:absolute;top:12px;right:12px}
.refinfo__close.btn--circle{padding:0}
.refinfo__close svg{width:16px;height:16px}
.refinfo__body.is-fresh > *{animation:refpop-in .4s var(--ease)}
.refinfo__eyebrow{margin:0 44px 6px 0;font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.refinfo h3{margin:0 44px 0 0;font-size:19px;line-height:1.25}
.refinfo__tag{display:inline-block;margin:10px 0 0;padding:3px 10px;border-radius:999px;background:var(--navy-100);font-size:12px;font-weight:700;color:var(--navy)}
.refinfo__text{margin:12px 0 0;color:var(--slate);font-size:15px;line-height:1.6}
.refinfo__photo{margin:16px 0 0;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:var(--paper)}
.refinfo__photo img{display:block;width:100%;height:100%;object-fit:cover}
.refinfo__ph{display:grid;place-items:center;width:100%;height:100%;color:#B9BBC6}
.refinfo__ph svg{width:36px;height:36px}
.refinfo__link{align-self:flex-start;margin-top:14px;font-weight:700;font-size:14px;color:var(--navy);text-decoration:none}
.refinfo__link:hover{color:var(--orange)}
@media (prefers-reduced-motion:reduce){.refmap__svg,.refpop,.refinfo{transition:none}.refmap__pin.is-on .ring{animation:none}}
/* ---------- Client logo marquee (home, marquee.js) ----------
   An endless row of logo tiles (white / light grey), fading out at both edges.
   Hover or keyboard focus frosts the whole strip and brings up the button;
   touch screens (no hover) show the button below the row instead. Without JS
   or with reduced motion the row doesn't move and can be scrolled sideways. */
.marquee{position:relative;margin-inline:calc(-1 * var(--gut))}
.marquee__viewport{overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee__viewport::-webkit-scrollbar{display:none}
.marquee__track{display:flex;width:max-content}
.marquee__list{display:flex;gap:12px;margin:0;padding:8px 12px 8px 0;list-style:none}
.marquee__list li{display:grid;place-items:center;flex:none;width:clamp(150px,13vw,184px);aspect-ratio:5/3;border-radius:16px;
  background:var(--white);border:1px solid var(--line)}
.marquee__list li:nth-child(even){background:var(--paper);border-color:var(--paper)}
.marquee__list img{display:block;width:88%;height:auto}
.marquee.is-looping .marquee__viewport{overflow:hidden}
.marquee.is-looping .marquee__track{animation:marquee var(--marquee-duration,60s) linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee__veil{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(7px) saturate(1.1);backdrop-filter:blur(7px) saturate(1.1);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  transition:opacity .45s var(--ease)}
.marquee__cta{position:absolute;inset:0;z-index:2;display:grid;place-items:center;margin:0;pointer-events:none;
  opacity:0;transform:translateY(8px) scale(.97);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.marquee__cta .btn{pointer-events:auto}
.marquee:hover .marquee__veil,.marquee:focus-within .marquee__veil{opacity:1}
.marquee:hover .marquee__cta,.marquee:focus-within .marquee__cta{opacity:1;transform:none}
@media (hover:none){
  .marquee:hover .marquee__veil{opacity:0}
  .marquee__cta{position:static;opacity:1;transform:none;margin-top:28px;pointer-events:auto}
}

/* ---------- Event calendar (events page, events-calendar.js) ----------
   Built from the site's parts: key figures between hairlines, an inset search
   field like the segmented track, tactile chips (pressed in when
   active), a paper card holding white day tiles, and a rounded dialog.
   Each event carries its region colour (--rc) as a small left edge. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ek-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ek-stats div{display:flex;flex-direction:column-reverse;gap:8px;padding:22px 20px 22px 0}
.ek-stats div + div{padding-left:24px;border-left:1px solid var(--line)}
.ek-stats dd{margin:0;font:700 clamp(28px,3.2vw,46px)/1 var(--display);letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums}
.ek-stats dt{font-size:14px;font-weight:600;color:var(--slate)}

.ek-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.ek-search{flex:1 1 260px;max-width:420px;display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:999px;cursor:text;
  background:linear-gradient(180deg,#ebebf2,#f4f4f8);box-shadow:inset 0 1px 3px rgba(11,11,35,.12);color:var(--slate);transition:box-shadow .2s var(--ease)}
.ek-search:focus-within{box-shadow:inset 0 1px 3px rgba(11,11,35,.12),0 0 0 2px var(--orange)}
.ek-search svg{flex:none;width:18px;height:18px}
.ek-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font:500 15px var(--sans);color:var(--navy)}
.ek-search input::placeholder{color:var(--navy-400)}
.ek-toolbar .segmented button{height:34px;padding:0 14px}
.ek-toolbar .segmented[hidden]{display:none}
.ek-count{margin-left:auto;font-size:14px;font-weight:600;color:var(--slate)}
.ek-filters-toggle{display:none}

.ek-layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.ek-filters{display:grid;gap:26px;padding:2px 2px 8px}
.ek-filters fieldset{margin:0;padding:0;border:0}
.ek-filters legend{margin-bottom:10px;font:700 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--navy-400)}
.ek-chips{display:flex;flex-wrap:wrap;gap:6px}
.ek-chip{position:relative;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:999px;cursor:pointer;user-select:none;
  border:1px solid var(--navy-200);background:linear-gradient(180deg,#ffffff,#f5f5f9);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,11,35,.05);font:600 13px/1 var(--sans);color:var(--navy);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),opacity .2s var(--ease)}
.ek-chip:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(11,11,35,.06),0 4px 10px rgba(11,11,35,.06)}
.ek-chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.ek-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--rc)}
.ek-chip .n{font-size:12px;color:var(--navy-400)}
.ek-chip:has(input:checked),.ek-chip:has(input:checked):hover{transform:translateY(1px);border-color:var(--navy-200);
  background:linear-gradient(180deg,#e4e4ed,#f0f0f5);box-shadow:inset 0 2px 4px rgba(11,11,35,.16),inset 0 1px 1px rgba(11,11,35,.12)}
.ek-chip:has(input:checked) .n{color:var(--slate)}
.ek-chip:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.ek-chip.is-zero{opacity:.45}
.ek-clear{justify-self:start;padding:0;border:0;background:none;cursor:pointer;font:700 14px var(--sans);color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.ek-clear[hidden]{display:none}

/* .btn sets padding after .btn--circle resets it, so round buttons here reset it again */
.ek .btn--circle,.ek-day .btn--circle{padding:0;flex:none}
.ek .btn--circle svg,.ek-day .btn--circle svg{flex:none;width:18px;height:18px}
.ek-cal{padding:clamp(10px,1.5vw,18px);border-radius:24px;background:var(--paper)}
.ek-cal[hidden],.ek-list[hidden]{display:none}
.ek-cal-head{display:flex;align-items:center;gap:12px;padding:4px 4px 16px}
.ek-cal-head .btn--circle{width:40px;height:40px}
.ek-cal-nav{display:flex;gap:8px;flex:none}
.ek-cal-head h3{min-width:0;font-size:clamp(18px,1.7vw,23px)}
.ek-today{margin-left:auto}
.ek-weekdays,.ek-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ek-weekdays{padding-bottom:8px}
.ek-weekdays span{padding-left:10px;font:700 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--navy-400)}
.ek-d{display:flex;flex-direction:column;gap:4px;min-width:0;min-height:112px;padding:8px;border:1px solid transparent;border-radius:14px;
  background:var(--white);font:inherit;color:inherit;text-align:left}
button.ek-d{cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
button.ek-d:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(11,11,35,.05),0 8px 18px rgba(11,11,35,.08)}
.ek-d.is-out{background:rgba(255,255,255,.45);opacity:.5}
.ek-d.is-past{opacity:.5}
.ek-d.is-today{border-color:var(--orange)}
.ek-d .num{padding:2px 2px 4px;font:600 13px/1 var(--sans);color:var(--slate)}
.ek-d.is-today .num{color:var(--orange);font-weight:800}
.ek-ev{display:block;overflow:hidden;padding:4px 6px;border-left:3px solid var(--rc);border-radius:6px;
  background:color-mix(in srgb,var(--rc) 10%,#fff);font:600 12px/1.25 var(--sans);color:var(--navy);white-space:nowrap;text-overflow:ellipsis}
.ek-more{padding:1px 6px;font:700 12px var(--sans);color:var(--slate)}
.ek-empty{display:grid;justify-items:center;gap:6px;margin-top:16px;padding:32px 16px;text-align:center;color:var(--slate)}
.ek-empty[hidden]{display:none}
.ek-empty strong{color:var(--navy)}
.ek-empty .btn{margin-top:10px}

.ek-group{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:22px 0 12px;border-bottom:1px solid var(--line);
  font-size:clamp(20px,2vw,26px)}
.ek-group span{font:600 14px var(--sans);color:var(--slate)}
/* month pager: each page is named by its month; the current one is pressed in */
.ek-pager{display:flex;align-items:center;gap:10px}
.ek-pager[hidden]{display:none}
.ek-pager--bottom{margin-top:24px}
.ek-pager .btn--circle[disabled]{opacity:.35;pointer-events:none}
.ek-pages{flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.ek-pages .gap{padding:0 2px;font-weight:700;color:var(--navy-400)}
.ek-page{display:grid;justify-items:center;gap:3px;min-width:54px;padding:8px 10px 7px;border:1px solid var(--navy-200);border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#ffffff,#f5f5f9);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,11,35,.05);color:var(--navy);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.ek-page:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(11,11,35,.06),0 4px 10px rgba(11,11,35,.06)}
.ek-page b{font:700 14px/1 var(--display);letter-spacing:-.02em}
.ek-page small{min-height:11px;font:600 11px/1 var(--sans);color:var(--navy-400)}
.ek-page[aria-current="page"],.ek-page[aria-current="page"]:hover{transform:translateY(1px);
  background:linear-gradient(180deg,#e4e4ed,#f0f0f5);box-shadow:inset 0 2px 4px rgba(11,11,35,.16),inset 0 1px 1px rgba(11,11,35,.12)}
.ek-page[aria-current="page"] b{color:var(--orange)}
.ek-row{display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:20px;align-items:center;padding:16px 0 16px 14px;border-bottom:1px solid var(--line);
  box-shadow:inset 3px 0 0 var(--rc)}
.ek-row .date{font:700 15px/1.25 var(--display);letter-spacing:-.02em;color:var(--navy)}
.ek-row .date small{display:block;margin-top:3px;font:600 12px var(--sans);letter-spacing:0;color:var(--navy-400)}
.ek-row .name{font-weight:700;font-size:16.5px;line-height:1.35;color:var(--navy);text-decoration:none}
.ek-row a.name:hover{color:var(--orange)}
.ek-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--slate)}
.ek-pill{padding:3px 8px;border-radius:999px;background:var(--navy-100);font:700 11px var(--sans);letter-spacing:.04em;color:var(--navy)}
.ek-row .go svg{width:16px;height:16px}

.ek-day,.ek-go{margin:auto}
.ek-day{width:min(560px,calc(100vw - 32px));max-height:min(80vh,720px);padding:0;border:1px solid var(--navy-200);border-radius:24px;
  background:var(--white);color:var(--navy);box-shadow:0 24px 64px -12px rgba(11,11,35,.35)}
.ek-day[open]{display:flex;flex-direction:column}
.ek-day::backdrop,.ek-go::backdrop{background:rgba(11,11,35,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ek-day-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 12px 24px}
.ek-day-head h3{font-size:22px}
.ek-day-list{display:grid;gap:6px;margin:0;padding:0 14px 16px;overflow:auto;list-style:none}
.ek-day-list a,.ek-day-list li > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;
  border-radius:14px;background:var(--paper);box-shadow:inset 3px 0 0 var(--rc);color:var(--navy);text-decoration:none;transition:background-color .2s var(--ease)}
.ek-day-list a:hover{background:var(--navy-100)}
.ek-day-main strong{display:block;font-size:15.5px;line-height:1.35}
.ek-day-list .go{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--white);border:1px solid var(--navy-200)}
.ek-day-list .go svg{width:14px;height:14px}
.ek-go{width:min(420px,calc(100vw - 32px));padding:32px 28px 28px;border:1px solid var(--navy-200);border-radius:24px;text-align:center;
  background:var(--white);color:var(--navy);box-shadow:0 24px 64px -12px rgba(11,11,35,.35)}
.ek-go-ring{position:relative;width:64px;height:64px;margin:0 auto 18px}
.ek-go-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ek-go-ring circle{fill:none;stroke-width:4}
.ek-go-ring .track{stroke:var(--navy-100)}
.ek-go-ring .bar{stroke:var(--orange);stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:0}
.ek-go[open] .ek-go-ring .bar{animation:ek-go 3s linear forwards}
@keyframes ek-go{to{stroke-dashoffset:176}}
.ek-go-ring span{position:absolute;inset:0;display:grid;place-items:center;font:700 22px var(--display);color:var(--navy)}
.ek-go h3{font-size:20px}
.ek-go-name{margin-top:10px;font-weight:700;font-size:16px;line-height:1.4}
.ek-go-host{margin-top:6px;font-size:14px;color:var(--slate);overflow-wrap:anywhere}
.ek-go-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}

@media (max-width:1024px){
  .ek-layout{grid-template-columns:1fr}
  .ek-filters-toggle{display:inline-flex}
  .ek-filters{display:none}
  .ek.filters-open .ek-filters{display:grid}
}
@media (max-width:760px){
  .ek-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ek-stats div:nth-child(3){padding-left:0;border-left:0}
  .ek-stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .ek-search{flex-basis:100%;max-width:none}
  .ek-count{flex-basis:100%;margin-left:0}
  .ek-weekdays,.ek-days{gap:3px}
  .ek-weekdays span{padding-left:0;text-align:center;font-size:10px;letter-spacing:.02em}
  .ek-d{min-height:58px;padding:5px 4px;gap:3px;border-radius:10px}
  .ek-d .num{padding:0 0 2px;font-size:12px;text-align:center}
  /* event names do not fit on a phone: each event becomes a colour bar */
  .ek-ev{height:5px;padding:0;border:0;border-radius:3px;background:var(--rc);font-size:0}
  .ek-more{padding:0;font-size:10px;text-align:center}
  .ek-more .word{display:none}
  .ek-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px}
  .ek-pager{gap:4px}
  .ek-pages{gap:3px;flex-wrap:nowrap}
  .ek-pages .gap{padding:0}
  .ek-page{min-width:38px;padding:7px 4px 6px;border-radius:12px}
  .ek-page b{font-size:13px}
  .ek-page small{font-size:10px}
  .ek-row .date{grid-column:1 / -1}
  .ek-row .date small{display:inline;margin-left:6px}
}

/* ---------- Card rows as carousels once they would stack (carousel.js) ----------
   [data-carousel] is a normal grid on large screens. Up to 1024 px, where the
   grids would drop to fewer columns and wrap, it becomes a swipeable row:
   full-bleed to the screen edges, cards snap to the text edge, the next one
   peeks in. With JS the row sits in .carousel with round arrows on the left
   and right edge (hidden when there is nothing more that way), every card that
   isn't fully on screen is frosted (.is-peek; tapping it scrolls it in), and a
   counter sits below. */
.carousel-nav,.carousel-arrow{display:none}
@media (max-width:1024px){
  [data-carousel][data-carousel]{display:flex;gap:12px;overflow-x:auto;   /* doubled: beats any card grid declared later */
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none}
  [data-carousel]::-webkit-scrollbar{display:none}
  [data-carousel] > *{position:relative;flex:0 0 min(86%,380px);scroll-snap-align:start}
  .cases[data-carousel]{align-items:flex-start}     /* testimonials differ a lot in length */

  /* the wrapper takes over the full bleed, so the arrows can sit at the screen edges */
  .carousel{position:relative;margin-inline:calc(-1 * var(--gut))}
  .carousel > [data-carousel][data-carousel]{margin-inline:0}
  .carousel-arrow{position:absolute;top:calc(var(--arrow-y,50%) - 22px);z-index:3;display:inline-flex;width:44px;height:44px;
    transition:opacity .25s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
  .carousel-arrow--prev{left:max(6px,calc(var(--gut) - 22px))}
  .carousel-arrow--next{right:max(6px,calc(var(--gut) - 22px))}
  .carousel-arrow[disabled]{opacity:0;pointer-events:none}

  /* frosted glass over cards that are cut off at the edge */
  [data-carousel] > *::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;
    background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(7px) saturate(1.1);backdrop-filter:blur(7px) saturate(1.1);
    transition:opacity .35s var(--ease)}
  [data-carousel] > .is-peek::after{opacity:1;pointer-events:auto;cursor:pointer}

  .carousel-nav{display:flex;justify-content:center;margin-top:16px}
  .carousel-count{font-size:14px;font-weight:600;color:var(--slate);font-variant-numeric:tabular-nums}
}

/* ---------- Two languages (lang.js) ----------
   Every text is in the markup twice; only the one matching <html lang> shows.
   Switching fades the content out and back in. The mobile menu has its own
   language toggle, because the header one is hidden on phones. */
html[lang="de"] [lang="en"],html[lang="en"] [lang="de"]{display:none!important}
main,.site-footer{transition:opacity .16s ease}
html.lang-switching main,html.lang-switching .site-footer{opacity:0}
.menu .lang--menu{display:none}
@media (max-width:640px){.top .menu .lang--menu{display:inline-flex;margin:12px 0 2px 6px}}

/* ---------- Bento cards: the whole card is the link ----------
   The arrow link's ::after stretches over the card, so a click anywhere opens
   it (one link per card, no nested links); keyboard focus outlines the card. */
.tile{position:relative}
.tile .tile__go{position:static}
.tile .tile__go::after{content:'';position:absolute;inset:0;z-index:2;border-radius:24px}
.tile:has(.tile__go:focus-visible){outline:2px solid var(--orange);outline-offset:3px}
.tile .tile__go:focus-visible{outline:none}