/* Fonts: Google Fonts first, with the same files kept in fonts/ as a fallback if Google
   cannot be reached. The rules are the ones Google serves for the Latin subset. */
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/questrial/v19/QdVUSTchPBm7nuUeVf70viFluW44JQ.woff2') format('woff2'),
       url('fonts/questrial-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2') format('woff2'),
       url('fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #262262;
  --teal: #02A09C;
  --teal-bright: #2fd0c9;
  --ink: #1c1c28;
  --muted: #5a5a6e;
  --bg: #ffffff;
  --bg-soft: #f5f6fa;
  --line: #e4e6ef;
  --container: 1040px;
  --gutter: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
}

img { max-width: 100%; }

.wordmark, h1, h2, h3, .nav a, .btn {
  font-family: 'Questrial', 'Century Gothic', 'Futura', sans-serif;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============ Header ============ */
header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
}
.wordmark {
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--teal);            /* 'anemos' in teal on light pages; dark pages restyle it below */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
/* The flex layout drops the space between the words, so the second word carries it as a margin. */
.wordmark span { margin-left: 0.45em; color: var(--navy); }
.logo-symbol { height: 34px; width: auto; display: block; margin-right: 12px; }
.logo-symbol-footer { height: 30px; }

/* Desktop nav (default) */
.nav { display: flex; }
.nav a + a { margin-left: 28px; }
.nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 4px 0;
}
.nav a:hover, .nav a.active { color: var(--teal); }

/* Hamburger button (hidden on desktop): a round bubble whose bars spring into a cross. */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(38, 34, 98, 0.08);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease;
}
.menu-toggle:hover { transform: scale(1.08); }
.menu-toggle:active { transform: scale(0.92); }
.menu-toggle.open {
  background: rgba(2, 160, 156, 0.18);
  transform: rotate(90deg) scale(1.06);
}
.menu-toggle span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 3px;
  background: var(--navy);
  border-radius: 3px;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, width 0.3s ease;
}
.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 20.5px; width: 14px; }
.menu-toggle span:nth-child(3) { top: 27px; }
.menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile / tablet nav: hamburger + dropdown panel */
@media (max-width: 1180px) {
  .menu-toggle { display: block; }
  /* The panel drops in with a little spring, and the links slide in one after another. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 4px 0 10px;
    overflow: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 100%);    /* never taller than the room under the header */
    max-height: calc(100dvh - 100%);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(28, 28, 40, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.96);
    transform-origin: calc(100% - 42px) 0;   /* the burger's spot: the panel grows down and out from it */
    transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .nav.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1), visibility 0s;
  }
  .nav a {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav.open a { opacity: 1; transform: none; }
  .nav.open a:nth-child(1) { transition-delay: 40ms; }
  .nav.open a:nth-child(2) { transition-delay: 90ms; }
  .nav.open a:nth-child(3) { transition-delay: 140ms; }
  .nav.open a:nth-child(4) { transition-delay: 190ms; }
  .nav.open a:nth-child(5) { transition-delay: 240ms; }
  .nav.open a:nth-child(6) { transition-delay: 290ms; }
  .nav.open a:nth-child(7) { transition-delay: 340ms; }
  .nav a + a { margin-left: 0; }
  .nav a {
    padding: 15px var(--gutter);
    font-size: 16px;
    border-top: 1px solid var(--line);
  }
  .nav a.active {
    color: var(--teal);
    box-shadow: inset 3px 0 0 var(--teal);
  }
}

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  margin-top: 30px;
  background: var(--teal);
  color: #fff;
  text-decoration: none;
  padding: 13px 30px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  font-size: 15px;
  border: none;
  cursor: pointer;
}
.btn:hover { background: #028f8b; }
.btn-ghost { background: var(--teal); }
.btn-ghost:hover { background: #028f8b; }

/* ============ Sections ============ */
section { padding: 48px 0; padding: clamp(48px, 8vw, 84px) 0; }
section.alt { background: var(--bg-soft); }
.kicker {
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  margin-bottom: 10px;
}
h2, .page-title {
  font-size: 23px;
  font-size: clamp(23px, 3vw, 32px);
  color: var(--navy);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.lede { max-width: 65ch; color: var(--muted); font-size: 15px; font-size: clamp(15px, 1.8vw, 17px); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  padding: clamp(20px, 3vw, 28px);
}
.card h3 { color: var(--navy); font-size: 19px; margin-bottom: 10px; letter-spacing: 0.03em; }
.card p { color: var(--muted); font-size: 15px; }
.card .dot {
  width: 34px; height: 4px;
  background: var(--teal);
  border-radius: 2px;
  margin-bottom: 16px;
}

/* ============ Contact ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 40px;
}
/* Wide screens: details on the left, form on the right, whatever their order in the markup.
   Both sit on white panels so they stay readable over the mark behind the page. */
.contact-details { grid-column: 1; grid-row: 1; }
.contact-form { grid-column: 2; grid-row: 1; }
.contact-form, .contact-details {
  padding: 28px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.contact-block h3 {
  color: var(--navy);
  font-size: 17px;
  letter-spacing: 0.04em;
  margin: 26px 0 6px;
}
.contact-block h3:first-child { margin-top: 0; }
.contact-block p { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.contact-block a { color: var(--teal); text-decoration: none; }
.note {
  font-size: 13px;
  color: var(--muted);
  background: var(--bg-soft);
  border-left: 3px solid var(--teal);
  padding: 10px 14px;
  border-radius: 0 4px 4px 0;
  margin-top: 8px;
}

form label {
  display: block;
  font-size: 14px;
  color: var(--ink);
  margin: 16px 0 6px;
  font-weight: 500;
}
form input, form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px; /* prevents iPhone zoom-on-focus */
  background: var(--bg);
}
form input:focus, form textarea:focus {
  outline: none;
  border-color: var(--teal);
}
form .btn { width: auto; }
.form-status { margin-top: 14px; font-size: 15px; color: var(--muted); min-height: 1.5em; }
.form-status.is-error { color: #b4232c; }
.form-status:empty { display: none; }

/* ============ Footer ============ */
footer {
  background: var(--navy);
  color: #b9bcd6;
  padding: 40px 0;
  font-size: 13.5px;
}
footer .wordmark { color: #fff; font-size: 18px; }
footer .wordmark span { color: var(--teal-bright); }
footer .legal { margin-top: 14px; line-height: 1.9; overflow-wrap: anywhere; }
footer a { color: var(--teal-bright); text-decoration: none; }

/* clamp() and min() only arrived in 2020. Wherever one is used, the same property is
   declared just before it with a fixed value that browsers back to 2018 can use. */

/* ============ Wind text ============
   wind.js wraps each word in .w and marks other blocks .rv, each with its own
   --d delay. While a block is .wind-armed they wait upwind, arrive when it
   turns .is-active, and are carried off downwind when it turns .is-past. */
.w { display: inline-block; }
.wind-armed .w,
.wind-armed .rv {
  opacity: 0;
  transform: translate3d(-28px, 10px, 0) skewX(-14deg);
  filter: blur(6px);
  transition:
    opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.16, 0.84, 0.3, 1),
    filter 0.7s ease;
  transition-delay: var(--d, 0ms);
}
.wind-armed.is-active .w,
.wind-armed.is-active .rv {
  opacity: 1;
  transform: none;
  filter: none;
}
.wind-armed.is-past .w,
.wind-armed.is-past .rv {
  transform: translate3d(40px, -12px, 0) skewX(-10deg);
}
.wind-armed:not(.is-active) .w,
.wind-armed:not(.is-active) .rv {
  transition-duration: 0.4s;
  transition-delay: calc(var(--d, 0ms) * 0.3);
}

/* ============ Wind wipe ============
   Bands of wind that sweep in from the left to cover the screen, then on out to
   the right to uncover it. wind.js uses them to change page and to jump along
   the run; WIPE_MS there must cover the longest delay plus the travel time. */
.wind-wipe {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}
.wind-wipe i {
  flex: 1;
  width: 135%;
  margin-bottom: -1px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #141242 0%, #1b1a5c 70%, #02a09c 93%, #7ff0ea 100%);
  transform: translateX(-101%);
  transition: transform 0.56s cubic-bezier(0.7, 0, 0.2, 1);
}
.wind-wipe i:nth-child(2) { transition-delay: 110ms; }
.wind-wipe i:nth-child(3) { transition-delay: 40ms; }
.wind-wipe i:nth-child(4) { transition-delay: 180ms; }
.wind-wipe i:nth-child(5) { transition-delay: 80ms; }
.wind-wipe i:nth-child(6) { transition-delay: 150ms; }
.wind-wipe i:nth-child(7) { transition-delay: 20ms; }
.wind-wipe.is-covering i { transform: translateX(0); }
.wind-wipe.is-clearing i { transform: translateX(101%); }
.wind-wipe.is-still i { transition: none; }

/* Arriving through a wipe: the script in <head> sets this before first paint, and
   wind.js swaps it for the bands. It lifts by itself if wind.js never runs. */
html.wind-arriving::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background: #141242;
  animation: arrive-failsafe 0.3s 2.5s forwards;
}
@keyframes arrive-failsafe {
  to { opacity: 0; visibility: hidden; }
}

/* ============ Home: the wind run ============
   Without .is-live (no JavaScript, reduced motion, or a very short window)
   the panels are ordinary stacked sections. With it, the stage pins to the
   viewport and the scroll distance of .journey drives the run in wind.js. */
body.home { background: #141242; }
body.home header {
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(20, 18, 66, 0.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.home header .wordmark { color: #fff; }
body.home header .wordmark span { color: var(--teal-bright); }
body.home .nav a { color: #dfe2f5; }
body.home .nav a:hover, body.home .nav a.active { color: var(--teal-bright); }
body.home .menu-toggle { background: rgba(255, 255, 255, 0.1); }
body.home .menu-toggle.open { background: rgba(47, 208, 201, 0.22); }
body.home .menu-toggle span { background: #fff; }
body.home footer { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.journey {
  position: relative;
  color: #fff;
  background: linear-gradient(180deg, #141242 0%, #262262 55%, #173b63 100%);
}
.journey-stage { position: relative; }
.journey-panels { padding-top: 68px; }
.journey-canvas, .journey-dots, .scroll-cue { display: none; }

.panel { scroll-margin-top: 72px; }
.panel h2 {
  color: #fff;
  font-size: 26px;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.2;
}
.panel .lede { color: #cfd2e6; }
.panel .kicker { color: var(--teal-bright); }
.panel-hero h1 {
  font-size: 26px;
  font-size: clamp(26px, 4.5vw, 48px);
  line-height: 1.22;
  letter-spacing: 0.02em;
  max-width: 22ch;
}
.panel-hero h1 em { color: var(--teal-bright); font-style: normal; }
.panel .lede em { color: #fff; font-style: normal; }
.panel .btn + .btn { margin-left: 12px; }
.panel-hero p {
  margin-top: 20px;
  max-width: 60ch;
  font-size: 15px;
  font-size: clamp(15px, 2vw, 18px);
  color: #cfd2e6;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6px;
  list-style: none;
}
.chips li {
  font-family: 'Questrial', 'Century Gothic', 'Futura', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #e6e8f7;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  margin: 0 10px 10px 0;
}
/* On the live run wind.js moves the icons out of their panel and onto the course as
   blocks, placing each <li> every frame; --tile is their size. */
.socials.is-course {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 2;
}
.socials.is-course li {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 50% 100%;
  opacity: 0;
  will-change: transform, opacity;
}
.socials.is-course .social {
  width: var(--tile);
  height: var(--tile);
  margin: 0;
  border-width: 2px;
  border-radius: calc(var(--tile) * 0.28);
  background: rgba(20, 18, 66, 0.9);
}
.socials.is-course .social svg { width: 48%; height: 48%; }

/* One screen for the stage plus 9.2 of scrolling; wind.js lengthens this on large screens. */
/* Social icons: buttons for now, links once each has somewhere to go. */
.socials {
  display: flex;
  flex-wrap: wrap;
  margin-top: 22px;
  list-style: none;
}
.social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 12px 12px 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  background: rgba(20, 18, 66, 0.55);
  border: 1.5px solid var(--teal-bright);
  border-radius: 16px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.social svg { width: 26px; height: 26px; fill: currentColor; }
.social:hover, .social:focus {
  color: #141242;
  background: var(--teal-bright);
  transform: translateY(-3px);
}
.is-wide .social { width: 40px; height: 40px; border-radius: 12px; margin: 0 8px 8px 0; }
.is-wide .social svg { width: 19px; height: 19px; }
.is-wide .socials { margin-top: 10px; }

/* The team */
.team {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  list-style: none;
}
.team li {
  display: flex;
  align-items: flex-start;
  width: 318px;
  max-width: 100%;
  margin: 0 12px 8px 0;
}
.team-badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: 14px;
  font-family: 'Questrial', 'Century Gothic', 'Futura', sans-serif;
  font-size: 22px;
  color: var(--teal-bright);
  border: 1.5px solid var(--teal-bright);
  border-radius: 50%;
  background: rgba(20, 18, 66, 0.4);
}
.team-text { display: flex; flex-direction: column; }
.team-name {
  font-family: 'Questrial', 'Century Gothic', 'Futura', sans-serif;
  font-size: 19px;
  letter-spacing: 0.03em;
  color: #fff;
}
.team-role { margin-top: 2px; font-size: 14px; color: var(--teal-bright); }
.team-bio { margin-top: 2px; font-size: 14px; color: #cfd2e6; }
.is-wide .team li { width: auto; margin: 0 0 6px; }
.is-wide .team-badge { width: 30px; height: 30px; font-size: 15px; margin-right: 10px; }
.is-wide .team-name { font-size: 14px; }
.is-wide .team-role, .is-wide .team-bio { font-size: 11px; }

/* One screen for the stage plus the scrolling distance; wind.js sets the real height (SCREENS, SLOW). */
.journey.is-live { height: 4260vh; height: 4260lvh; }
.is-live .journey-stage {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}
.is-live .journey-canvas {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.is-live .journey-panels {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 0;
  z-index: 2;
  pointer-events: none;
}
.is-live .panel {
  position: absolute;
  top: 92px;
  top: clamp(92px, 15vh, 160px);
  left: var(--gutter);
  right: calc(var(--gutter) + 28px);
  max-width: 660px;
  padding: 0;
  pointer-events: none;
}
.is-live .panel-hero { max-width: 760px; }
.is-live .panel-hero h1 { max-width: 26ch; }
.is-live .panel.is-active { pointer-events: auto; }
/* Laid out for the run before wind.js has armed the panels: keep them out of sight until it has. */
.journey.is-live .panel:not(.wind-armed) { visibility: hidden; }

.is-live .scroll-cue {
  display: flex;
  align-items: center;
  margin-top: 26px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #aab0d8;
}
.scroll-cue .cue-bar {
  position: relative;
  width: 44px;
  height: 2px;
  margin-right: 12px;
  flex: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.scroll-cue .cue-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--teal-bright);
  animation: cue-gust 1.8s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
/* The hero cue: a mouse with its wheel rolling for pointer devices, a finger swiping up for touch. */
.cue-mouse, .cue-swipe {
  position: relative;
  flex: none;
  width: 20px;
  height: 32px;
  margin-right: 14px;
}
.cue-mouse {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 10px;
}
.cue-mouse i {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--teal-bright);
  animation: cue-wheel 1.6s ease-in-out infinite;
}
@keyframes cue-wheel {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(11px); opacity: 0; }
}
.cue-swipe { display: none; }
.cue-swipe i {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 0 4px rgba(47, 208, 201, 0.22);
  animation: cue-swipe 1.5s ease-in-out infinite;
}
.cue-swipe b {
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  margin-left: -5px;
  border-top: 2px solid rgba(255, 255, 255, 0.6);
  border-left: 2px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg);
}
@keyframes cue-swipe {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(-18px); opacity: 0; }
}
.cue-text-touch { display: none; }
@media (hover: none) {
  .cue-mouse, .cue-text-mouse { display: none; }
  .cue-swipe { display: block; }
  .cue-text-touch { display: inline; }
}
@keyframes cue-gust {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.is-live .journey-dots {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  right: 4px;
  right: clamp(4px, 2vw, 28px);
  padding: 8px 10px;             /* a 44px-wide column to press and drag */
  transform: translateY(-50%);
  z-index: 3;
  touch-action: none;            /* dragging the column scrubs the run, not the page */
  user-select: none;
  -webkit-user-select: none;
}
/* The track behind the dots, shown while dragging. */
.journey-dots::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.journey-dots.is-scrubbing::before { opacity: 1; }
.journey-dots.is-scrubbing, .journey-dots.is-scrubbing button { cursor: grabbing; }
.journey-dots button {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.journey-dots button::before {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  bottom: 9px;
  left: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  transition: transform 0.3s ease, background 0.3s ease;
}
.journey-dots button + button { margin-top: 4px; }
.journey-dots button:hover::before { background: #fff; }
.journey-dots button.is-current::before {
  background: var(--teal-bright);
  transform: scale(1.7);
}
.journey-dots button:focus-visible { outline: 2px solid var(--teal-bright); border-radius: 50%; }
.journey-dots span {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 6px;
  padding: 4px 10px;
  font-family: 'Questrial', 'Century Gothic', 'Futura', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #fff;
  background: rgba(20, 18, 66, 0.8);
  border-radius: 4px;
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.journey-dots button:hover span {
  opacity: 1;
  transform: translate(0, -50%);
}
/* Kept apart from the rule above: a selector an older browser does not know voids its whole rule. */
.journey-dots button:focus-visible span {
  opacity: 1;
  transform: translate(0, -50%);
}

@media (max-width: 1180px) {
  body.home .nav {
    background: #141242;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  body.home .nav a { border-top-color: rgba(255, 255, 255, 0.08); }
  body.home .nav a.active { color: var(--teal-bright); box-shadow: inset 3px 0 0 var(--teal-bright); }
}
@media (max-width: 640px) {
  .team li { width: 100%; margin-right: 0; }
  .team-badge { width: 40px; height: 40px; font-size: 18px; margin-right: 12px; }
  .team-name { font-size: 17px; }
  .team-role, .team-bio { font-size: 13px; }
  .social { width: 48px; height: 48px; border-radius: 14px; margin: 0 8px 8px 0; }
  .social svg { width: 23px; height: 23px; }
  .is-live .panel { top: 84px; top: clamp(84px, 12vh, 120px); }
}
/* Short windows: tighten the copy so it stays clear of the runner. */
@media (max-height: 820px) {
  .is-live .panel { top: 84px; top: clamp(84px, 12vh, 100px); }
  .is-live .panel-hero h1 { font-size: 26px; font-size: clamp(26px, min(4.5vw, 6vh), 48px); }
  .is-live .panel-hero p { margin-top: 14px; font-size: 15px; font-size: clamp(15px, 2.4vh, 18px); }
  .is-live .panel .btn { margin-top: 22px; }
  .is-live .panel h2 { font-size: 24px; font-size: clamp(24px, min(3.6vw, 5.4vh), 42px); margin-bottom: 12px; }
}
@media (max-height: 700px) {
  .is-live .scroll-cue { display: none; }
  .is-live .panel .lede { font-size: 14px; line-height: 1.55; }
}

/* A phone on its side: the copy takes the left of the stage over a dark scrim and the
   run happens on the right. wind.js sets .is-wide when the stage is under 560px tall. */
.is-wide .journey-stage::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 64%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 13, 50, 0.9) 0%, rgba(14, 13, 50, 0.82) 68%, rgba(14, 13, 50, 0) 100%);
}
.is-wide .panel { top: 60px; max-width: 46%; }
.is-wide .panel-hero h1 { font-size: 22px; }
.is-wide .panel h2 { font-size: 20px; margin-bottom: 8px; }
.is-wide .panel-hero p, .is-wide .panel .lede { font-size: 13px; line-height: 1.5; margin-top: 8px; }
.is-wide .panel .kicker { font-size: 11px; margin-bottom: 4px; }
.is-wide .panel .btn { margin-top: 12px; padding: 9px 20px; font-size: 14px; display: inline-block; }
.is-wide .chips li { font-size: 12px; padding: 4px 12px; margin: 0 6px 6px 0; }
.is-wide .scroll-cue { display: none; }
.is-live .panel { transform-origin: 0 0; }
.is-live .chips { margin-top: 2px; }
.is-live .team + .btn { margin-top: 8px; }
.is-live .chips li { margin-bottom: 8px; }

/* A phone on its side: the menu's seven links in two columns, so they fit without scrolling. */
@media (max-width: 1180px) and (max-height: 480px) {
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav a { width: 50%; padding: 10px var(--gutter); }
}
@media (max-height: 480px) {
  .header-inner { padding: 8px var(--gutter); }
  /* Short screens: smaller, tighter dots, and the column starts below the fixed header. */
  .is-live .journey-dots { top: calc(50% + 30px); padding: 6px 10px; }
  .journey-dots::before { top: 16px; bottom: 16px; }
  .journey-dots button { width: 20px; height: 20px; }
  .journey-dots button + button { margin-top: 2px; }
  .journey-dots button::before { top: 7px; right: 7px; bottom: 7px; left: 7px; }

}
/* The narrowest phones, down to 300px. */
@media (max-width: 360px) {
  .is-live .panel { top: 84px; right: calc(var(--gutter) + 20px); }
  .is-live .panel-hero h1 { font-size: 23px; }
  .is-live .panel-hero p, .is-live .panel .lede { font-size: 14px; line-height: 1.5; }
  .is-live .panel h2 { font-size: 22px; }
  .is-live .panel .btn { margin-top: 18px; }
  .journey-dots button { width: 20px; height: 20px; }
  .journey-dots button::before { top: 7px; right: 7px; bottom: 7px; left: 7px; }
  .chips li { font-size: 13px; padding: 5px 12px; }
  /* Founders: name and role only, on the narrowest phones. */
  .team li { margin-bottom: 6px; }
  .team-badge { width: 34px; height: 34px; font-size: 16px; margin-right: 10px; }
  .team-name { font-size: 16px; }
  .team-role { font-size: 13px; }
  .team-bio { display: none; }
  .social { width: 44px; height: 44px; border-radius: 13px; margin: 0 8px 8px 0; }
  .social svg { width: 21px; height: 21px; }
}
/* ============ Projects: the building site ============ */
.site-page {
  position: relative;
  min-height: 100vh;
  min-height: 100lvh;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #141242 0%, #262262 55%, #1b3a66 100%);
}
.site-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.site-copy {
  position: relative;
  max-width: 760px;
  padding-top: 92px;
  padding-top: clamp(92px, 15vh, 160px);
  padding-bottom: 300px;
  padding-bottom: clamp(280px, 52vh, 680px);
}
.site-copy h1 { max-width: 24ch; margin-top: 4px; }

/* ============ About page ============ */
.about-page { color: #fff; }
.about-intro {
  padding-top: 120px;
  padding-top: clamp(116px, 16vh, 170px);
  padding-bottom: 20px;
}
.about-intro h1 {
  font-size: 32px;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  max-width: 20ch;
  margin-top: 4px;
}
.about-intro h1 em { color: var(--teal-bright); font-style: normal; }
.about-intro .lede, .about-block .lede { color: #cfd2e6; }
.about-intro .kicker, .about-block .kicker { color: var(--teal-bright); }
.about-block h2 { color: #fff; }
.about-block.alt-dark { background: rgba(255, 255, 255, 0.04); }
.about-grid { margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 900px) { .about-grid { grid-template-columns: repeat(2, 1fr); } }
.card-dark {
  background: rgba(20, 18, 66, 0.45);
  border-color: rgba(255, 255, 255, 0.14);
}
.card-dark h3 { color: #fff; }
.card-dark p { color: #cfd2e6; }
.founders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 32px;
}
.founder {
  padding: 28px;
  background: rgba(20, 18, 66, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}
.founder-badge { width: 60px; height: 60px; font-size: 26px; margin: 0 0 18px; }
.founder h3 { color: #fff; font-size: 22px; letter-spacing: 0.03em; }
.founder-role { margin-top: 4px; color: var(--teal-bright); font-size: 15px; }
.founder p { margin-top: 14px; color: #cfd2e6; font-size: 15px; }
.chips-dark { margin-top: 22px; }
.about-block .btn { margin-top: 32px; }

/* ============ Contact: the mark behind the page, as on the business card ============ */
.contact-main { position: relative; overflow: hidden; }
.contact-main > section { position: relative; z-index: 1; }
.contact-mark {
  position: absolute;
  right: -4vw;
  top: 24px;
  height: 115%;
  max-height: 1180px;
  width: auto;
  max-width: none;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 899px) {
  .contact-mark { right: -40vw; top: 300px; width: 140vw; height: auto; max-height: none; }
  .contact-form, .contact-details { padding: 20px; }
}

/* ============ 404: a hoop with nothing on the other side ============ */
.notfound {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-top: clamp(116px, 16vh, 170px);
}
.notfound .container { position: relative; }
.notfound-code {
  display: flex;
  align-items: center;
  font-family: 'Questrial', 'Century Gothic', 'Futura', sans-serif;
  font-size: 120px;
  font-size: clamp(96px, 22vw, 200px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 18px;
}
/* The zero is one of the run's hoops, with nothing beyond it. */
.notfound-hoop {
  position: relative;
  display: inline-block;
  width: 0.42em;
  height: 1em;
  margin: 0 0.08em;
  border: 0.045em solid var(--teal-bright);
  border-radius: 50%;
  box-shadow: 0 0 0.12em rgba(47, 208, 201, 0.55), inset 0 0 0.12em rgba(47, 208, 201, 0.35);
  animation: hoop-pulse 3s ease-in-out infinite;
}
@keyframes hoop-pulse {
  0%, 100% { box-shadow: 0 0 0.12em rgba(47, 208, 201, 0.55), inset 0 0 0.12em rgba(47, 208, 201, 0.35); }
  50% { box-shadow: 0 0 0.3em rgba(47, 208, 201, 0.9), inset 0 0 0.2em rgba(47, 208, 201, 0.55); }
}
.notfound h1 {
  font-size: 30px;
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  max-width: 20ch;
  color: #fff;
}
.notfound .lede { color: #e4e6f5; font-size: 17px; font-size: clamp(16px, 1.9vw, 19px); max-width: 52ch; }
.notfound .kicker { color: var(--teal-bright); }
.notfound .btn + .btn { margin-left: 12px; }
@media (max-width: 480px) {
  .notfound .btn + .btn { margin-left: 0; }
}

/* ============ Contact: wind behind the heading ============ */
.page-intro { position: relative; }
.page-intro .container { position: relative; }
.wind-ambient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 180px;
  height: clamp(180px, 26vw, 260px);
  opacity: 0.5;
  pointer-events: none;
}

/* ==================================================
   Breakpoints — device coverage
   ==================================================
   ≤360      Samsung Galaxy Fold (folded cover screen ~344px)
   361–480   Small phones (iPhone SE/mini, iPhone Duo folded ~466px)
   481–640   Standard phones (iPhone 15/16/17, Android)
   641–899   Foldables unfolded (Galaxy Fold ~673px, iPhone Duo ~890px)
             + tablets PORTRAIT (iPad 768/820/834px)
   900–1180  Tablets LANDSCAPE (iPad 1024/1112/1180px)
   1181–1439 Laptop / small desktop
   1440–1799 Standard desktop
   ≥1800     Large desktop (1440p / 4K)
   ================================================== */

/* --- Galaxy Fold cover screen (≤360px) --- */
@media (max-width: 360px) {
  :root { --gutter: 14px; }
  body { font-size: 15px; }
  .wordmark { font-size: 15px; letter-spacing: 0.04em; }
  .logo-symbol { height: 24px; margin-right: 7px; }
  .btn { padding: 12px 22px; }
  .card { padding: 18px; }
}

/* --- Small phones + iPhone Duo folded (361–480px) --- */
@media (min-width: 361px) and (max-width: 480px) {
  :root { --gutter: 16px; }
  .wordmark { font-size: 17px; }
  .logo-symbol { height: 26px; margin-right: 8px; }
  .btn { padding: 12px 24px; }
}

/* --- Standard phones (481–640px) --- */
@media (min-width: 481px) and (max-width: 640px) {
  .wordmark { font-size: 19px; }
  .logo-symbol { height: 30px; margin-right: 10px; }
}

/* --- Phones & portrait tablets: stack contact page --- */
@media (max-width: 899px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-details, .contact-form { grid-column: auto; grid-row: auto; }
}

/* --- Foldables unfolded + tablets portrait (641–899px) --- */
@media (min-width: 641px) and (max-width: 899px) {
  :root { --container: 680px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .grid .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* --- Tablets landscape (900–1180px) --- */
@media (min-width: 900px) and (max-width: 1180px) {
  :root { --container: 880px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .contact-grid { gap: 40px; }
}

/* --- Phone held sideways (short landscape screens) --- */
@media (max-height: 480px) and (orientation: landscape) {
  section { padding: 40px 0; }
}

/* --- Laptop / small desktop (1181–1439px) --- */
@media (min-width: 1181px) and (max-width: 1439px) {
  :root { --container: 1040px; }
}

/* --- Standard desktop (1440–1799px) --- */
@media (min-width: 1440px) and (max-width: 1799px) {
  :root { --container: 1160px; }
}

/* --- Large desktop (≥1800px): 1440p / 4K --- */
@media (min-width: 1800px) {
  :root { --container: 1280px; }
  body { font-size: 17px; }
  .panel-hero h1 { font-size: 54px; }
  .card h3 { font-size: 20px; }
  .card p, .contact-block p { font-size: 16px; }
}

/* These two come last so that they win over the large-desktop rule above. */
/* 1440p and 4K at native scale. */
@media (min-width: 2400px) {
  :root { --container: 1560px; }
  body { font-size: 20px; }
  .wordmark { font-size: 28px; }
  .logo-symbol { height: 44px; }
  .nav a { font-size: 19px; }
  .panel-hero h1 { font-size: 72px; }
  .panel h2 { font-size: 56px; }
  .panel-hero p, .panel .lede { font-size: 23px; }
  .panel .kicker { font-size: 16px; }
  .btn { font-size: 19px; padding: 16px 38px; }
  .is-live .panel { top: 190px; max-width: 900px; }
  .is-live .panel-hero, .site-copy { max-width: 1040px; }
  .chips li { font-size: 18px; }
  .is-live .scroll-cue { font-size: 16px; }
  .page-title, .about-block h2 { font-size: 40px; }
  .lede, .about-intro .lede { font-size: 22px; }
  .kicker { font-size: 15px; }
  .contact-block h3 { font-size: 22px; }
  .contact-block p, form label, form input, form textarea, .card p, .founder p, .founder-role { font-size: 19px; }
  .card h3, .founder h3 { font-size: 24px; }
  .about-intro h1, .notfound h1 { font-size: 60px; }
  .contact-form, .contact-details { padding: 36px; }
  .team li { width: 380px; }
  .team-badge { width: 62px; height: 62px; font-size: 28px; }
  .team-name { font-size: 24px; }
  .team-role, .team-bio { font-size: 17px; }
  .social { width: 76px; height: 76px; border-radius: 22px; margin: 0 18px 18px 0; }
  .social svg { width: 36px; height: 36px; }
  footer { font-size: 16px; }
}
/* 4K at native scale. */
@media (min-width: 3200px) {
  :root { --container: 2100px; --gutter: 40px; }
  body { font-size: 28px; }
  .wordmark { font-size: 40px; }
  .logo-symbol { height: 62px; margin-right: 20px; }
  .header-inner { padding: 26px var(--gutter); }
  .nav a { font-size: 26px; }
  .nav a + a { margin-left: 44px; }
  .panel-hero h1 { font-size: 104px; }
  .panel h2 { font-size: 80px; margin-bottom: 28px; }
  .panel-hero p, .panel .lede { font-size: 32px; }
  .panel .kicker { font-size: 22px; margin-bottom: 18px; }
  .btn { font-size: 26px; padding: 22px 52px; margin-top: 44px; }
  .is-live .panel { top: 270px; max-width: 1300px; }
  .is-live .panel-hero, .site-copy { max-width: 1500px; }
  .chips li { font-size: 25px; padding: 12px 28px; }
  .is-live .scroll-cue { font-size: 22px; }
  .page-title, .about-block h2 { font-size: 56px; margin-bottom: 28px; }
  .lede, .about-intro .lede { font-size: 32px; max-width: 60ch; }
  .kicker { font-size: 22px; margin-bottom: 18px; }
  .contact-block h3 { font-size: 30px; margin: 40px 0 10px; }
  .contact-block p, form label, form input, form textarea, .card p, .founder p, .founder-role { font-size: 26px; }
  form input, form textarea { padding: 18px; }
  form label { margin: 26px 0 10px; }
  .card h3, .founder h3 { font-size: 34px; }
  .card { padding: 40px; }
  .about-intro h1, .notfound h1 { font-size: 84px; }
  .contact-form, .contact-details { padding: 52px; border-radius: 18px; }
  .contact-grid { gap: 80px; margin-top: 64px; }
  .contact-mark { height: 118%; max-height: 2200px; }
  .founders { gap: 48px; }
  .founder { padding: 44px; }
  .team li { width: 520px; margin-right: 48px; }
  .team-badge { width: 84px; height: 84px; font-size: 38px; margin-right: 24px; }
  .team-name { font-size: 32px; }
  .team-role, .team-bio { font-size: 23px; }
  .social { width: 104px; height: 104px; border-radius: 28px; border-width: 3px; margin: 0 24px 24px 0; }
  .social svg { width: 48px; height: 48px; }
  footer { font-size: 22px; }
  footer .wordmark { font-size: 30px; }
}