/* Shared site chrome: colour tokens, skip link, header, mobile menu, footer, back to top button and the logo.
   Loaded on every page, before home.css (home page) or styles.css (every other page). */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: optional;
}

:root {
  --bg: #F4F8FA; --surface: #FFFFFF; --ink: #0E2233; --muted: #46606F; --line: #D3E2EA;
  --brand: #0369A1; --brand-deep: #064B73; --tint: #E3F0F6; --accent: #E8602C; --on-ink: #FFFFFF; --ink-fill: #0E2233;
  --shadow: 0 18px 40px -22px rgba(14, 34, 51, .45);
  --navy-band: #0B2A3F; --on-band: #EAF4F8; --band-muted: #A9C3D1; --hero-bg: #DDF1F5;
  --c-violet: #7C5CFC; --c-teal: #0FA3B1; --c-blue: #0369A1; --c-amber: #F2A900; --c-green: #2BA66A; --c-coral: #F2635A;
  --t-violet: #ECE7FF; --t-teal: #D8F3F5; --t-amber: #FFF0C7; --t-green: #DDF3E7; --t-coral: #FFE4E0;
  --d-teal: #0B7F8A; --d-amber: #8A5E00; --d-green: #1B7547; --d-coral: #B9372D;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --focus: var(--brand-deep);
  --six: linear-gradient(90deg, var(--c-violet), var(--c-teal), var(--c-blue), var(--c-amber), var(--c-green), var(--c-coral));
}

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink-fill); color: var(--on-ink); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; color: var(--on-ink); }

/* header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; gap: 16px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand:hover { color: var(--ink); }
.brand svg { flex: none; }
.brand span { white-space: nowrap; }
.brand small { display: block; font-family: var(--body); font-weight: 500; font-size: .7rem; color: var(--muted); letter-spacing: 0; margin-top: -4px; }
.brand .word { display: block; line-height: 1; }
.brand .word b { font-weight: 800; color: var(--brand); }
nav.main { display: flex; gap: 2px; margin-left: auto; }
nav.main a { white-space: nowrap; padding: 8px 12px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: .94rem; transition: background .2s, color .2s; }
nav.main a:hover { background: var(--tint); color: var(--ink); }
nav.main a[aria-current] { background: var(--tint); color: var(--ink); font-weight: 600; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.watch { white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .92rem; color: var(--ink); text-decoration: none; padding: 6px 15px 6px 6px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); transition: border-color .2s; }
.watch i { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.watch i svg { width: 12px; height: 12px; fill: #fff; margin-left: 2px; }
.watch:hover { border-color: var(--brand); color: var(--ink); }
.soon { display: inline-flex; align-items: center; gap: 9px; background: var(--ink-fill); color: var(--on-ink); font-weight: 600; font-size: .88rem; padding: 10px 16px; border-radius: 999px; line-height: 1.1; white-space: nowrap; text-decoration: none; }
.soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
a.soon:hover { color: var(--on-ink); filter: brightness(1.15); }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; place-items: center; padding: 0; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .x { display: none; }
.menu-btn[aria-expanded="true"] .bars { display: none; }
.menu-btn[aria-expanded="true"] .x { display: block; }
.route-progress { position: relative; height: 3px; }
.route-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--six); background-size: 100vw 100%; }
.route-progress b { position: absolute; top: -3px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-left: -4px; }
.mobile-menu { display: none; border-top: 1px solid var(--line); background: var(--bg); max-height: calc(100vh - 70px); overflow: auto; }
.mobile-menu.open { display: block; }
.mobile-menu .wrap { padding: 6px 0 22px; display: grid; }
.mobile-menu a.link { display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-weight: 600; font-size: 1.05rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-menu a.link small { font-weight: 500; color: var(--muted); font-size: .85rem; }
.mobile-menu .soon { margin-top: 18px; justify-content: center; padding: 14px 18px; font-size: .95rem; }
.mobile-menu .mail { margin-top: 12px; text-align: center; color: var(--muted); font-size: .92rem; }
@media (max-width: 1260px) { .head-actions .soon { display: none; } .brand small { display: none; } }
@media (max-width: 940px) { nav.main { display: none; } .menu-btn { display: grid; } .head-actions { margin-left: auto; } }
@media (max-width: 470px) { .watch .lbl { display: none; } .watch { padding: 6px; } }
/* Without JavaScript the menu button cannot work, so the menu is simply shown on small screens. */
@media (max-width: 940px) {
  html:not(.js) .mobile-menu { display: block; }
  html:not(.js) .menu-btn { display: none; }
}

/* logo: the route draws itself on page load */
.logo path.w { stroke-dasharray: 80; stroke-dashoffset: 0; animation: draw 1.1s .15s ease-out both; }
.logo .n { transform-box: fill-box; transform-origin: center; animation: pop .4s ease-out both; }
.logo .n1 { animation-delay: .2s; } .logo .n2 { animation-delay: .45s; } .logo .n3 { animation-delay: .7s; } .logo .n4 { animation-delay: .95s; } .logo .n5 { animation-delay: 1.15s; }
.logo.static path.w, .logo.static .n { animation: none; }
@keyframes draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* footer */
.site-footer { position: relative; background: var(--bg); padding: 38px 0 46px; color: var(--muted); font-size: .92rem; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--six); }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 24px 60px; justify-content: space-between; }
.site-footer p { margin: 6px 0 0; }
.site-footer .foot-about { max-width: 34ch; }
.site-footer .brand { margin-bottom: 4px; width: fit-content; }
.site-footer .brand .word { font-size: 1.25rem; }
.site-footer h2 { font: 600 .95rem/1.3 var(--body); letter-spacing: 0; color: var(--ink); margin: 0 0 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer .brand, .site-footer .brand:hover { color: var(--ink); text-decoration: none; }
.site-footer .pending-text { color: var(--muted); cursor: default; }
.site-footer .foot-legal { margin-top: 26px; font-size: .84rem; display: grid; gap: 4px; }
.site-footer .foot-legal p { margin: 0; }

/* back to top */
.totop { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ink-fill); color: var(--on-ink); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 25; padding: 0; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.totop.show { opacity: 1; pointer-events: auto; }
.totop svg { width: 22px; height: 22px; }
html:not(.js) .totop { display: none; }

@media (prefers-reduced-motion: reduce) {
  .logo path.w, .logo .n { animation: none; }
  .site-header a, .watch { transition: none; }
}