:root {
  --ink: #171717;
  --blue: #0d59d7;
  --blue-mid: #7ba7d4;
  --blue-pale: #d9eaf2;
  --blue-wash: #edf5f7;
  --paper: #fff;
  --white: #fff;
  --muted: #606a72;
  --rule: #b8b8b8;
  --rule-light: #d7dfe2;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font-display: Manrope, Arial, sans-serif;
  --font-ui: Manrope, Arial, sans-serif;
}
html[data-font="switzer"] { --font-display: Switzer, Arial, sans-serif; --font-ui: Switzer, Arial, sans-serif; }
html[data-font="plex"] { --font-display: "IBM Plex Sans", Arial, sans-serif; --font-ui: "IBM Plex Sans", Arial, sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: var(--blue); color: var(--white); }

/* Marketing navigation changes pages immediately, without a document fade. */
@view-transition { navigation: none; }

.nav {
  align-items: center;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  display: grid;
  column-gap: 80px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  height: 90px;
  margin: 14px 20px 0;
  padding: 0 24px;
  position: relative;
  z-index: 10;
}
.wordmark {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-ui);
  font-size: 32px;
  font-weight: 700;
  gap: 12px;
  justify-self: start;
  letter-spacing: -.06em;
  line-height: .9;
}
.wordmark-y { display: inline-block; transform: skewX(-8deg); transform-origin: 50% 78%; }
.paper-boat { display: block; height: 26px; position: relative; width: 36px; }
.paper-boat > span { position: absolute; }
.paper-boat__left { background: var(--ink); clip-path: polygon(0 100%, 52% 0, 100% 100%); height: 15px; left: 1px; top: 0; width: 19px; }
.paper-boat__right { background: var(--ink); clip-path: polygon(0 100%, 0 0, 100% 100%); height: 15px; left: 20px; opacity: .62; top: 0; width: 15px; }
.paper-boat__fold { background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); height: 9px; left: 11px; opacity: .28; top: 11px; width: 17px; }
.paper-boat__hull { background: var(--ink); clip-path: polygon(0 0, 100% 0, 78% 100%, 23% 100%); height: 11px; left: 1px; top: 15px; width: 34px; }
.nav-links { align-items: center; display: flex; gap: 44px; justify-self: start; }
.nav-links a { font-size: 18px; font-weight: 400; transition: text-shadow 180ms ease; }
.nav-links a:hover { color: var(--ink); text-shadow: .2px 0 var(--ink); }
.nav-actions { align-items: center; display: flex; gap: 20px; justify-self: end; }
.language-menu { position: relative; }
.language-menu--mobile { display: none; }
.language-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  gap: 10px;
  height: 48px;
  justify-content: center;
  padding: 0 4px;
}
.language-trigger,
.language-option { font-family: var(--font-ui); }
.language-trigger svg { stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.language-trigger__globe { height: 25px; stroke-width: 1.65; width: 25px; }
.language-trigger__chevron { height: 18px; stroke-width: 2.2; transition: transform 180ms var(--ease); width: 18px; }
.language-trigger[aria-expanded="true"] .language-trigger__chevron { transform: rotate(180deg); }
.language-popover {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(23, 23, 23, .14);
  display: none;
  gap: 1px;
  min-width: 220px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 11px);
  z-index: 20;
}
.language-popover[data-open="true"] { display: grid; }
.language-option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  gap: 10px;
  justify-content: flex-start;
  min-height: 44px;
  padding: 0 9px;
  text-align: left;
  width: 100%;
}
.language-option:hover { background: rgba(23, 29, 33, .05); }
.language-popover .language-option:focus-visible {
  background: var(--white);
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}
.language-option__code {
  align-items: center;
  border-right: 1px solid var(--rule-light);
  display: flex;
  flex: 0 0 32px;
  font-size: 11px;
  font-weight: 700;
  height: 24px;
}
.language-option__name { flex: 1; font-weight: 500; }
.auth-cta {
  align-items: center;
  border: 1px solid var(--ink);
  border-radius: 6px;
  display: inline-flex;
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
  height: 48px;
  justify-content: center;
  padding: 0 20px;
  transition: border-radius 300ms ease;
}
.auth-cta:hover { border-radius: 32px; }
.auth-cta svg { fill: currentColor; height: 21px; width: 21px; }
.button {
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 6px;
  color: var(--white);
  display: inline-flex;
  font-size: 16px;
  font-weight: 500;
  gap: 12px;
  height: 48px;
  justify-content: center;
  padding: 0 24px;
  transition: border-radius 300ms ease;
}
.button:hover { border-radius: 32px; }
.button svg { height: 16px; width: 16px; }
.menu-button { background: transparent; border: 0; display: none; padding: 8px; }
.mobile-menu {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  display: none;
  left: -1px;
  padding: 8px;
  position: absolute;
  right: -1px;
  top: 98px;
}
.mobile-menu[data-open="true"] { display: grid; }
.mobile-menu a { border-bottom: 1px solid var(--rule-light); color: var(--ink); font-size: 15px; padding: 14px 12px; }
.mobile-menu a:last-child { border: 0; font-weight: 600; }

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

.mandate-chip {
  align-items: center;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(9, 22, 44, .22);
  color: var(--ink);
  display: flex;
  gap: 11px;
  padding: 13px 18px;
}
.mandate-chip i { background: #219b6d; border-radius: 50%; flex-shrink: 0; height: 8px; width: 8px; }
.mandate-chip strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; }
.mandate-chip span { color: var(--muted); font-size: 13.5px; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

@media (max-width: 1040px) {
  .nav { column-gap: 0; grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
}
@media (max-width: 700px) {
  .nav {
    column-gap: 8px;
    height: 72px;
    margin: 10px;
    padding: 0 15px;
  }
  .wordmark {
    font-size: 26px;
    gap: 8px;
    min-height: 44px;
    min-width: 0;
    white-space: nowrap;
  }
  .paper-boat {
    flex: 0 0 auto;
    transform: scale(.82);
    transform-origin: left center;
    width: 30px;
  }
  .nav-actions { gap: 8px; }
  .nav-actions .language-menu, .nav-actions .button { display: none; }
  .auth-cta { height: 44px; padding: 0 14px; white-space: nowrap; }
  .menu-button {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
  }
  .mobile-menu { top: 80px; }
  .language-menu--mobile { border-bottom: 1px solid var(--rule-light); display: block; }
  .language-menu--mobile .language-trigger {
    gap: 10px;
    justify-content: flex-start;
    padding: 0 12px;
    width: 100%;
  }
  .language-menu--mobile .language-trigger__globe { height: 20px; width: 20px; }
  .language-menu--mobile .language-trigger__chevron { height: 16px; margin-left: auto; width: 16px; }
  .language-menu--mobile .language-popover {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0 8px 8px 38px;
    position: static;
  }
  .footer-links a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

@media (max-width: 360px) {
  .nav { padding: 0 12px; }
  .wordmark { font-size: 24px; gap: 6px; }
  .paper-boat { transform: scale(.76); width: 27px; }
  .auth-cta { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Footer wordmark: transparent letters with the sea showing through — the
   untouched full-resolution photo, positioned on open water away from the
   vessel. One background across the whole word, riding with cursor and scroll.
   No filter and no transform here — they break the shared background. */
.footer-wordmark {
  color: transparent;
  cursor: crosshair;
}
/* The clip lives on .footer-word: WebKit ignores text inside positioned
   descendants when clipping, so clipping the positioned element itself is the
   only form both engines render. */
.footer-wordmark .footer-word {
  background-image: linear-gradient(rgba(228, 238, 244, .38), rgba(203, 217, 227, .26)), url("/prototypes/hero/img/hero-plain.webp");
  background-clip: text;
  -webkit-background-clip: text;
  background-position: center, calc(50% + var(--wave-x, 0px)) calc(40% + var(--wave-y, 0px) + var(--sea-drift, 0px));
  background-repeat: no-repeat;
  background-size: cover, 110% auto;
  color: transparent;
  margin-bottom: -.24em;
  margin-right: -.5em;
  padding-bottom: .24em;
  padding-right: .5em;
  transition: background-position 180ms ease-out;
}
.site-footer .footer-wordmark {
  margin-bottom: -.24em;
  padding-bottom: .24em;
}
.footer-wordmark span { background: none; color: inherit; display: inline; filter: none; }
.footer-wordmark .footer-y { font-style: oblique 8deg; transform: none; }

/* The footer is its own full page — exactly one viewport, never more: black
   page with the glass wordmark centered and the legal row at the base. */
footer.site-footer {
  display: flex;
  flex-direction: column;
  height: 100svh;
  overflow: hidden;
  padding: 40px 32px 26px;
}
footer.site-footer .footer-wordmark { font-size: min(24vw, 42svh); margin: auto 0; }
footer.site-footer .footer-row { margin-top: 0; }

/* The paper boat crowns the s of the footer wordmark: same frosted glass, tilted 45 degrees left.
   The tilt lives in the clip-path geometry. */
.footer-word { position: relative; }
.footer-wordmark .footer-crown {
  aspect-ratio: 1.172;
  background-image: linear-gradient(rgba(228, 238, 244, .38), rgba(203, 217, 227, .26)), url("/prototypes/hero/img/hero-plain.webp");
  background-position: center, calc(50% + var(--wave-x, 0px)) calc(40% + var(--wave-y, 0px) + var(--sea-drift, 0px));
  background-repeat: no-repeat;
  background-size: cover, 1100% auto;
  clip-path: polygon(11.7% 91.4%, 0.0% 24.5%, 55.3% 40.3%, 20.9% 0.0%, 89.7% 0.0%, 100.0% 47.0%, 54.8% 100.0%);
  display: block;
  height: auto;
  left: -.15em;
  pointer-events: none;
  position: absolute;
  top: .11em;
  width: .34em;
}

/* Quiet proof line, signed under the wordmark's right edge. */
.footer-wordmark .footer-sig {
  bottom: .05em;
  color: rgba(237, 245, 247, .58);
  display: block;
  font-family: Manrope, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  left: calc(100% - .46em);
  letter-spacing: 0;
  line-height: 1;
  position: absolute;
  text-align: left;
  white-space: nowrap;
}

/* Below ~1600px the signature no longer fits between the wordmark's right
   edge and the viewport edge (the footer clips it), so it tucks under the
   wordmark's right edge. Stays absolute so the wordmark's flex centering is
   untouched; the right offset cancels the word's .5em overhang padding
   minus the y's oblique overhang (.36 × the wordmark font, clamp'd like the
   font itself) so the line ends flush with the y's tip. */
@media (max-width: 1620px) {
  .footer-wordmark .footer-sig {
    bottom: auto;
    left: auto;
    right: calc(clamp(110px, 23vw, 330px) * .36);
    top: 100%;
  }
}
/* Phones keep the same absolute tuck: a static block here would split the
   wordmark's inline, and Chrome's background-clip: text then drops the y's
   oblique overhang, chopping the glyph at its layout box. */
@media (max-width: 700px) {
  .footer-wordmark .footer-sig { font-size: 12px; }
}
@media (max-width: 360px) {
  .footer-wordmark .footer-sig {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

@media (max-width: 800px) {
  html .ocean-scroll { background-image: url("/prototypes/hero/img/hero-water-mobile.webp"); }
  .footer-wordmark .footer-word, .footer-wordmark .footer-crown { background-image: linear-gradient(rgba(228,238,244,.38),rgba(203,217,227,.26)), url("/prototypes/hero/img/hero-plain-mobile.webp"); }
}