header{height:65px;left:0;opacity:0;padding:0 24px;position:fixed;top:0;width:100%;z-index:20}@media (max-width:991px){header{height:58px;padding:0 8px}}header .header{align-content:center;align-items:center;display:flex;height:100%;justify-content:space-between;width:100%}header .header .vr{align-items:center;background:#fff;border:2px solid #fff;border-radius:50%;cursor:pointer;display:none;height:47px;justify-content:center;width:47px}@media (max-width:767px){header .header .vr{display:block}}header .header .menu-switch{cursor:pointer;display:none;height:44px;position:relative;width:44px;z-index:2;-webkit-tap-highlight-color:transparent}header .header .menu-switch .line{background-color:#000;border-radius:2px;height:2px;left:calc(50% - 11px);position:absolute;top:calc(50% - 1px);transition:transform .2s ease,opacity .15s ease;width:22px}header .header .menu-switch .line:first-child{transform:translateY(-7px)}header .header .menu-switch .line:nth-child(3){transform:translateY(7px)}header .header .menu-switch .el{font-family:IBM Plex Mono;font-size:12px;position:absolute}header .header .menu-switch .el-1{left:0;top:0}header .header .menu-switch .el-2{right:0;top:0}header .header .menu-switch .el-3{bottom:0;left:0}header .header .menu-switch .el-4{bottom:0;right:0}@media (max-width:991px){header .header .menu-switch{display:block}}header .header .menu-switch.active .line:first-child{transform:rotate(45deg)}header .header .menu-switch.active .line:nth-child(2){opacity:0}header .header .menu-switch.active .line:nth-child(3){transform:rotate(-45deg)}header .header .mobile-menu{background-image:url(../images/footerPatern.png),linear-gradient(180deg,#fff,#fff);background-repeat:repeat;background-size:30%;display:none;flex-direction:column;height:100vh;justify-content:space-between;left:0;opacity:0;padding:144px 0 24px;pointer-events:none;position:absolute;top:0;width:100%}@media (max-width:991px){header .header .mobile-menu{display:flex}header .header .mobile-menu a{display:block!important}}header .header .mobile-menu .top a{font-size:48px;letter-spacing:var(--track-display);margin-bottom:32px!important}header .header .mobile-menu .bottom a,header .header .mobile-menu .top a{color:#000;font-family:DrukMedium;font-style:normal;font-weight:500;line-height:110%;text-align:center;text-transform:uppercase}header .header .mobile-menu .bottom a{font-size:38px;letter-spacing:var(--track-display)}header .header .mobile-menu .bottom a:last-child{margin-top:48px}header .header .header-logo{position:relative;z-index:2}@media (max-width:767px){header .header .header-logo img{height:55px;transform:translateY(5px)}}header .header .right-menu{align-items:center;display:flex;justify-content:space-between;padding:0}@media (max-width:767px){header .header .right-menu{padding:0}}header .header .right-menu a{color:#000;display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;font-family:IBM Plex Mono;font-size:14px;font-style:normal;font-weight:500;letter-spacing:var(--track-label);line-height:1.1;text-transform:uppercase}@media (max-width:991px){header .header .right-menu a{display:none}}header .header .right-menu a span{display:inline-block;margin:0 2px}header .header .right-menu a:hover span{text-decoration:underline;text-underline-offset:4px}header .header .right-menu{display:flex;align-items:center;gap:16px}header .header .right-menu a{margin:0!important}html{background:linear-gradient(0deg,#b4cbf5,#f7faff),linear-gradient(0deg,#96bbff,#edf4ff),linear-gradient(0deg,#b4cbf5,#fff 111.72%);background-attachment:fixed}

/* ==========================================================================
   Accessibility, theming and responsive additions (readable CSS; the
   minified rules above are the compiled originals).
   ========================================================================== */

/* Skip link: added to the start of <body> by the default layout
   (nuxt-router-utils.js, addSkipLink). Off-screen until focused. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10001; /* above the page transition (200) and the site loader (9999) */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-on-dark);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: var(--track-label);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
  transition: transform 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* The skip target is a focusable container, not a control: no ring around
   the whole page when the skip link moves focus to it. */
#smooth-content[tabindex="-1"]:focus {
  outline: none;
}

/* Header colours as tokens (tokens.css). */
header .header .right-menu a,
header .header .mobile-menu .top a,
header .header .mobile-menu .bottom a,
header .header .menu-switch .el {
  color: var(--ink);
}

header .header .menu-switch .line {
  background-color: var(--line-strong);
}

/* (@supports: a var() declaration with unsupported color-mix() would
   otherwise compute to no background at all.) */
@supports (color: color-mix(in srgb, red 30%, transparent)) {
  header .header .mobile-menu {
    background-image: url(../images/footerPatern.png),
      linear-gradient(180deg, var(--surface), var(--surface) 79%);
  }
}

/* Menu button: now keyboard-operable (role="button"); make it a full tap target. */
header .header .menu-switch {
  cursor: pointer;
}

header .header .menu-switch:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
/* Small laptops (992-1100px; below that the menu button takes over): keep
   the nav links plus the logo on one row. Tighten the spacing, never the text size. */
@media (min-width: 992px) and (max-width: 1100px) {
  header .header .right-menu {
    gap: 4px;
  }

  header .header .right-menu a {
    padding: 8px 8px;
  }
}

/* Never let the logo be squeezed; if the links still don't fit (e.g. text
   zoomed to 200%), they wrap onto a second row instead of overflowing. */
header .header .header-logo {
  flex-shrink: 0;
}

header .header .right-menu {
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

/* Mobile menu (phones and tablets, up to 991px): fill the dynamic viewport
   and scroll rather than cut off links on short (landscape) screens or with
   enlarged text. */
@media (max-width: 991px) {
  header .header .mobile-menu {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  header .header .mobile-menu .bottom a {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 991px) and (max-height: 600px) {
  header .header .mobile-menu {
    padding-top: 88px;
  }

  header .header .mobile-menu .top a {
    font-size: 34px;
    margin-bottom: 16px !important;
  }

  header .header .mobile-menu .bottom a {
    font-size: 28px;
  }

  header .header .mobile-menu .bottom a:last-child {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  header .header .menu-switch .line,
  header .header .right-menu a span {
    transition: none;
  }
}

/* Fixed header clears the notch / rounded corners (no-op unless the page
   opts into viewport-fit=cover, where env() becomes non-zero). */
header {
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

@media (max-width: 991px) {
  header {
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }
}

/* Header items over a dark surface (.on-dark is set per item from
   nuxt-router-utils.js by sampling what sits behind it): white logo, links
   and menu icon. Not while the phone menu is open (it has a light
   background of its own). */
html:not(:has(header .menu-switch.active)) header .header .header-logo.on-dark img {
  filter: invert(1);
}
html:not(:has(header .menu-switch.active)) header .header .right-menu a.on-dark {
  color: #fff;
}
html:not(:has(header .menu-switch.active)) header .header .menu-switch.on-dark .line {
  background-color: #fff;
}
header .header .header-logo img,
header .header .right-menu > a {
  transition: filter 0.2s ease, color 0.2s ease;
}
/* Keep the burger -> cross animation (transform/opacity) as well. */
header .header .menu-switch .line {
  transition: transform 0.2s ease, opacity 0.15s ease, background-color 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  header .header .header-logo img,
  header .header .right-menu > a,
  header .header .menu-switch .line {
    transition: none;
  }
}

/* Light header background whenever page content sits behind the header
   (html.header-over-content, set from nuxt-router-utils.js): same sky tone
   as the phone header on inner pages, fading in. Drawn as a ::before layer
   so it can fade (gradients can't transition). */
header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--sky-top) 78%,
    transparent
  );
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sky-top) 97%, transparent) 78%,
    color-mix(in srgb, var(--sky-top) 0%, transparent)
  );
  opacity: 0;
  transition: opacity 0.25s ease;
}
html.header-over-content header::before {
  opacity: 1;
}
/* The open phone menu brings its own background. */
html:has(header .menu-switch.active) header::before {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  header::before {
    transition: none;
  }
}