/* CEVO round 3 site styles. Reads only custom properties from kit/tokens.css.
   Hero template from round 2 variant A; grid and scale follow the measured Qoves hero (../brand2/QOVES-SYSTEM.md):
   1rem = 10px, fluid 1100–1440. Sections below the hero sit full width on the mist canvas; nothing here styles
   bare section/h2/p beyond resets, so inserted sections (decoded/) bring their own styles. */

@font-face {
  font-family: "Switzer";
  src: url(../fonts/Switzer-Variable.woff2?v=2a46d02291) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 10px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;   /* anchors land below the fixed bar */
}
@media (min-width: 1100px) and (max-width: 1440px) { html { font-size: max(8px, .694445vw); } }   /* 8px floor: 1.5rem labels stay >= 12px at 1100-1151 */
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-dark);
  font-family: "Switzer", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "kern";
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 370;
  letter-spacing: -.006em;
  word-spacing: .03em;   /* Switzer's space closes up under negative tracking */
}
a { color: inherit; text-decoration: none; }
p, h1 { margin: 0; }
img, video, svg { max-width: 100%; }
main { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 5px var(--focus-halo); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- nav ---------- */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  padding: 0 4rem;
  color: var(--ink);
}
.nav::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 14rem; z-index: -1;
  background: var(--nav-scrim); pointer-events: none;
}
.nav__inner {
  max-width: 136rem; margin: 0 auto;
  padding: 2.8rem 1.6rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 9.6rem;
}
.nav__logo { display: inline-flex; align-items: center; height: 4.4rem; justify-self: start; }
.nav__logo img { display: block; height: 3.8rem; width: auto; aspect-ratio: 155 / 64; margin-left: -.39rem; }   /* integrated C·EVO wordmark (155x64 box, ink 35 units tall): 21px letters, 92px wide at 1440; margin pulls the C ink to the column edge */
.nav__links { display: flex; gap: 3.2rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-size: max(12px, 1.4rem); line-height: 2rem; font-weight: 370; letter-spacing: 0;
  color: var(--ink); transition: color .3s;
}
.nav__links a:hover { color: var(--ink-3); }
.nav__logo .nav__logo-dark { display: none; }
.nav__actions { display: flex; align-items: center; gap: 3.2rem; justify-self: end; }
/* Sign in: a quiet text link left of the Start pill, same ink as the nav links (full ink: the hero field leaves no
   room for a dimmed one), smaller, no fill, no border; on phones it lives in the menu sheet and the footer */
.nav__signin {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: .005em; white-space: nowrap;
  color: var(--ink); text-decoration: none; text-underline-offset: .25em; text-decoration-thickness: 1px;
  text-shadow: 0 0 12px rgba(17,22,20,.42), 0 0 4px rgba(17,22,20,.3);   /* the link sits on the hero's light right side: keeps it >= 4.5:1 there */
}
.nav__signin:hover { text-decoration-line: underline; }
.nav__signin:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (min-width: 768px) { .nav__sheet-signin { display: none; } }   /* the header already shows it there */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 4rem; padding: 0 2.4rem; border-radius: 9999px;
  background: var(--btn); color: var(--btn-text);
  border: 1px solid var(--pill-border);
  font-size: max(12px, 1.4rem); line-height: 2rem; font-weight: 400; letter-spacing: 0;
  white-space: nowrap; transition: background-color .3s;
  position: relative;
}
.pill::after { content: ""; position: absolute; inset: -.8rem -.4rem; }   /* 48px hit area on the 32px phone pill */
.pill:hover { background: var(--btn-hover); }
.pill:active { background: var(--btn-pressed); }
.nav__menu {
  display: none; width: 4.4rem; height: 4.4rem; padding: 0; margin-right: -1.2rem;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  position: relative;
}
.nav__menu svg { position: absolute; left: 1rem; top: 1rem; width: 2.4rem; height: 2.4rem; transition: opacity .16s ease-out, transform .2s cubic-bezier(.2, 0, 0, 1); }   /* Iconoir menu / xmark, crossfaded */
.nav__menu-close { opacity: 0; transform: rotate(-45deg) scale(.8); }
.nav__menu[aria-expanded="true"] .nav__menu-open { opacity: 0; transform: rotate(45deg) scale(.8); }
.nav__menu[aria-expanded="true"] .nav__menu-close { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nav__menu svg { transition: none; } }

/* menu sheet (phone and portrait tablet): the nav links, under the nav row */
.nav__sheet {
  position: absolute; inset: 0 0 auto 0; z-index: -1;
  padding: 6.4rem 1.6rem 1.6rem;
  background: var(--sheet-bg, var(--ink-dark));
  opacity: 0; transform: translateY(-.8rem);
  transition: opacity .15s ease-out, transform .15s ease-out;
}
.nav__sheet.is-open { opacity: 1; transform: none; transition-duration: .22s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
.nav__sheet ul { list-style: none; margin: 0; padding: 0; }
.nav__sheet li + li { border-top: 1px solid var(--ink-line); }
.nav__sheet a {
  display: flex; align-items: center; min-height: 5.6rem;
  font-size: 2rem; line-height: 2.8rem; font-weight: 370; letter-spacing: -.012em; color: var(--ink);
}
.nav__sheet a:hover { color: var(--ink-3); }
/* while the sheet is open: the page behind is locked and dimmed; a tap on the scrim closes the menu (script below) */
html.is-menu-open { overflow: hidden; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 9;   /* under the header (z 10), over the page */
  background: rgba(17, 22, 20, .5);
  opacity: 0; transition: opacity .15s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.nav-scrim.is-open { opacity: 1; transition-duration: .22s; }
@media (prefers-reduced-motion: reduce) { .nav-scrim { transition: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 64rem;
  background-color: var(--hero-bg-narrow);
  color: var(--ink);
}
.hero__media {
  position: absolute; inset: 0; z-index: -3; overflow: hidden;
  /* the wall's top colour behind the frame's upper half, so a rounding gap at the top never shows a band; the lower
     half stays clear so the frame's faded bottom meets --hero-bg-narrow */
  background: linear-gradient(var(--wall-top), var(--wall-top)) top / 100% 50% no-repeat;
}
.hero__media video {
  position: absolute; left: 0; width: 100%;
  top: var(--media-narrow-top); height: var(--media-narrow-h);
  object-fit: cover; object-position: var(--media-pos);
  display: block;
  /* the frame ends above the strip on phones/tablets: a light wall fades its last fifth into --hero-bg-narrow */
  -webkit-mask-image: var(--media-narrow-mask);
          mask-image: var(--media-narrow-mask);
}
.hero__field, .hero__shade-top, .hero__shade-bottom { position: absolute; pointer-events: none; z-index: -2; }
.hero__field, .hero__shade-top { display: none; }
.hero__shade-bottom {
  inset: auto 0 0 0; height: 40.7rem;
  background: var(--shade-narrow-ramp);
}

.hero__content {
  position: relative; height: 100%;
  max-width: 136rem; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 3.2rem 1.6rem 2.4rem;
}
.eyebrow { font-size: max(12px, 1.4rem); line-height: 2rem; font-weight: 390; letter-spacing: 0; color: var(--ink); }
.headline {
  margin-top: .4rem;
  font-size: var(--headline-narrow-fs, 3.2rem); line-height: var(--headline-narrow-lh, 3.6rem); font-weight: 350;
  letter-spacing: -.02em; word-spacing: .02em;
  color: var(--ink);
}
.headline span { display: block; text-wrap: balance; }
.headline span + span { color: var(--ink-3); }
.sub {
  margin-top: .8rem; max-width: 42.6rem;
  font-size: max(12px, 1.4rem); line-height: 2rem; font-weight: 380; letter-spacing: -.006em;
  color: var(--ink-2); text-wrap: pretty;
}
.sub .nb { white-space: nowrap; }   /* keep hyphenated compounds whole ('2-layer', not '2-' / 'layer') */
.ctas { display: flex; gap: 1.6rem; margin-top: 2.8rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 4.8rem; padding: 0 2.4rem; border-radius: 9999px; border: 0;
  font: inherit; font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; letter-spacing: -.004em;
  white-space: nowrap; cursor: pointer; transition: background-color .3s;
}
.btn--primary { background: var(--btn); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-hover); }
.btn--primary:active { background: var(--btn-pressed); }
.btn--primary[aria-disabled="true"] { background: var(--btn-disabled); color: var(--btn-disabled-text); pointer-events: none; }
.btn--secondary { background: var(--btn2); color: var(--btn2-text); }
.btn--secondary:hover { background: var(--btn2-hover); }
.btn--secondary:active { background: var(--btn2-pressed); }
.btn--secondary[aria-disabled="true"] { background: var(--btn2-disabled); color: var(--btn2-disabled-text); pointer-events: none; }

/* three-point strip */
.strip { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.strip li { display: flex; flex-direction: column; gap: .2rem; white-space: nowrap; }
.strip li + li { border-left: 1px solid var(--ink-line); padding-left: 2rem; }
.strip b { font-weight: 370; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: -.006em; color: var(--ink); }
.strip small { font-size: max(12px, 1.4rem); line-height: 2rem; font-weight: 390; letter-spacing: 0; color: var(--ink-2); }
/* the generated-model label sits on the video itself, as a quiet pill (bottom right of the frame) */
.hero__label {
  position: absolute; right: 4rem; bottom: 4rem; z-index: 0;
  padding: .5rem 1.2rem; border-radius: 9999px;
  background: rgba(17, 22, 20, .42); box-shadow: inset 0 0 0 1px rgba(243, 245, 242, .16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--fs-small, 1.2rem); line-height: 1.6rem; font-weight: 400; letter-spacing: .005em; color: var(--ink-2);
  pointer-events: none;
}


/* ---------- phone ≤767 ---------- */
@media (max-width: 767px) {
  .nav { padding: 0; }
  .nav::before { height: 12rem; background: var(--nav-scrim-narrow); }   /* a deeper shade: the 83px-wide C·EVO wordmark and the menu sit on the light wall top */
  .nav__inner { padding: 1.2rem 1.6rem; min-height: 6.4rem; grid-template-columns: 1fr auto; }
  .nav__logo img { height: 3.4rem; margin-left: -.35rem; }   /* 18.6px letters, 83px wide on phones */
  .nav__links { display: none; }
  .nav__actions { gap: 1.2rem; }
  .nav__signin { display: none; }
  .pill { height: 3.2rem; padding: 0 1.6rem; font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; letter-spacing: .005em; }
  .nav__menu { display: block; }
  .hero { min-height: 60rem; }
  /* a slightly smaller, higher frame than the kit's narrow framing: the chin clears the copy block with room for the
     two shoulder callouts (js/hero-hud.js?v=9be79acfce) between them */
  .hero__media video { top: -12%; height: 86%; }
  /* the strip becomes a band at the bottom (three equal columns, title + a short line that may wrap to two lines); media and shade end above it */
  .hero__media, .hero__shade-bottom { bottom: 8.4rem; }
  .hero__content { padding-bottom: 13.2rem; }   /* the 8.4rem strip band + the generated-model label (system.css?v=662a3fd70c) with 12px either side */
  .ctas { margin-top: 2.4rem; }
  .ctas .btn { flex: 1; padding: 0 1.2rem; font-size: var(--btn-phone-fs); }
  .strip {
    position: absolute; left: 0; right: 0; bottom: 0; height: 8.4rem;
    background: var(--paper); border-top: 1px solid var(--paper-line);
    align-items: center; justify-content: center; gap: 1rem; padding: 0 1.2rem;
  }
  .strip li { gap: 0; flex: 1 1 0; min-width: 0; white-space: normal; }
  .strip li + li { border-left-color: var(--paper-line); padding-left: 1rem; }
  .strip b { font-size: 1.15rem; line-height: 1.5rem; font-weight: 400; letter-spacing: -.01em; color: var(--paper-ink, var(--ink-dark)); }
  .strip li { align-items: center; text-align: center; }
  .strip small { font-size: 1.05rem; line-height: 1.4rem; font-weight: 400; letter-spacing: 0; color: var(--paper-ink-age, var(--ink-dark-2)); }
}
@media (max-width: 374px) {
  .ctas { gap: 1.2rem; }
  .ctas .btn { padding: 0 .8rem; }
  .strip { gap: .8rem; padding: 0 .8rem; }
  .strip li + li { padding-left: .8rem; }
  .strip b { font-size: 1.08rem; }
}

@media (max-width: 767px) and (max-height: 700px) {
  /* short phones: the copy starts over the beard, so a soft dark band sits behind the eyebrow and the headline's first
     line (anchored to the headline, so it follows the copy block; eyebrow p5 contrast >= 4.5 in tools/check.mjs) */
  .hero .headline { position: relative; }
  .hero .headline::before {
    content: ""; position: absolute; z-index: -1; left: -1.6rem; right: -1.6rem; top: -8rem; height: 13rem;
    background: linear-gradient(180deg, rgba(17, 22, 20, 0), rgba(17, 22, 20, .34) 34%, rgba(17, 22, 20, .34) 70%, rgba(17, 22, 20, 0));
    pointer-events: none;
  }
}
@media (max-width: 767px) and (max-height: 760px) {
  .hero__media video { top: var(--media-short-top); height: var(--media-short-h); }
  /* the shorter frame starts its fade at ~278px on 375x667: end the wall fill under fully opaque video (255px) */
  .hero__media { background-size: 100% 45%; }
}

/* ---------- tablet 768–1099 (full-bleed) ---------- */
@media (min-width: 768px) {
  .nav__inner { padding: 2.8rem 0; }
  .hero__shade-bottom { height: var(--shade-tablet-h); }
  .hero__media video { top: var(--media-tablet-top); height: var(--media-tablet-h); }
  .hero__content { padding: 3.2rem 4rem 2.4rem; }
  .eyebrow { font-size: 1.6rem; line-height: 2.4rem; font-weight: 370; letter-spacing: -.006em; }
  .headline { margin-top: 4rem; font-size: 4rem; line-height: 4.8rem; font-weight: 340; letter-spacing: -.028em; word-spacing: .03em; }
  .sub { margin-top: 1.6rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 370; letter-spacing: -.006em; }
  .ctas { margin-top: 3.2rem; }
  .strip { margin-top: 3.2rem; padding: 3.2rem 0 0; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .strip { gap: 1.6rem; }
  .strip li + li { padding-left: 1.6rem; }
  .strip b { font-size: 1.45rem; line-height: 2rem; }
  .strip small { font-size: 1.25rem; line-height: 1.7rem; }
}

@media (min-width: 768px) and (max-width: 1099px) and (max-aspect-ratio: 5/4) {
  .nav::before { height: var(--nav-tablet-h); background: var(--nav-scrim-tablet, var(--nav-scrim)); }
  .nav__links { display: none; }   /* the links live in the menu sheet here, as on phones */
  .nav__sheet { padding: 9.6rem 4rem 2.4rem; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__menu { display: block; }
}

/* ---------- split layout: desktop ≥1100, and landscape tablets ≥900 ---------- */
@media (min-width: 1100px), (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .hero {
    background-color: var(--hero-bg); min-height: 64rem;
    /* the frame's bottom (the tee) dissolves over the last ~28% into the field + bottom shade, so it never meets the
       hero's edge as a cut; overrides the kit token, which ended the fade at the very last pixel */
    /* the field's right edge eases out over a longer tail (the kit's ended .08 -> 0 in the last 5%, a 2-level step) */
    --field-desk-mask: linear-gradient(90deg, #000 0%, #000 50%, rgba(0,0,0,.94) 57%, rgba(0,0,0,.8) 65%, rgba(0,0,0,.6) 73%, rgba(0,0,0,.4) 80%, rgba(0,0,0,.22) 87%, rgba(0,0,0,.1) 92.5%, rgba(0,0,0,.035) 96.5%, rgba(0,0,0,.008) 99%, transparent 100%);
    --media-bottom-mask-desk: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.86) 78%, rgba(0,0,0,.6) 84%, rgba(0,0,0,.32) 90%, rgba(0,0,0,.1) 95%, transparent 99%);
  }
  /* The wall darkens toward the text by a multiply fall-off on the media (hair stays opaque, never see-through).
     A wide horizontal alpha mask on .hero__media plus the overlapping eased .hero__field mask dissolves the sage
     field into the studio wall with zero vertical seam at any desktop width. */
  .hero__media {
    left: auto; width: 76%; background: var(--hero-bg);
    -webkit-mask-image: var(--media-mask-desk);
            mask-image: var(--media-mask-desk);
  }
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: var(--falloff-desk); mix-blend-mode: multiply; pointer-events: none;
    -webkit-mask-image: var(--media-bottom-mask-desk, linear-gradient(180deg, #000 0%, #000 84%, rgba(0,0,0,0.35) 95%, transparent 100%));
            mask-image: var(--media-bottom-mask-desk, linear-gradient(180deg, #000 0%, #000 84%, rgba(0,0,0,0.35) 95%, transparent 100%));
  }
  /* face centre at 65% of the width: clamp X offset to <= 0px so wide viewports never shift the video frame right of its container */
  .hero__media video {
    top: 0; height: 100%;
    -webkit-mask-image: var(--media-bottom-mask-desk, linear-gradient(180deg, #000 0%, #000 84%, rgba(0,0,0,0.35) 95%, transparent 100%));
            mask-image: var(--media-bottom-mask-desk, linear-gradient(180deg, #000 0%, #000 84%, rgba(0,0,0,0.35) 95%, transparent 100%));
    object-position: min(0px, calc(41vw - .75 * max(100svh, 84.8rem))) 50%;
  }
  .hero__field {
    display: block; inset: 0 auto 0 0;
    width: var(--field-desk-w, 42%);
    background: var(--field-desk-bg, var(--field));
    -webkit-mask-image: var(--field-desk-mask, none);
            mask-image: var(--field-desk-mask, none);
  }
  /* nav shade: one plain full-width linear gradient (no horizontal mask: with the field it drew a diagonal smudge) */
  .nav::before { height: var(--nav-scrim-h, 16rem); -webkit-mask-image: var(--nav-scrim-mask, none); mask-image: var(--nav-scrim-mask, none); }
  .nav__sheet { display: none; }
  .hero__shade-top { display: block; inset: 0 0 auto 0; height: var(--shade-top-h, 50%); background: var(--shade-top-bg, linear-gradient(180deg, var(--shade-top) 31.44%, transparent)); }
  .hero__shade-bottom {
    height: 34rem;
    background:
      linear-gradient(180deg, transparent 0%, rgba(17, 22, 20, 0.08) 58%, rgba(17, 22, 20, 0.22) 100%),
      linear-gradient(180deg, transparent, var(--shade-bottom-1) 68.56%),
      linear-gradient(180deg, transparent, var(--shade-bottom-2));
  }
  .hero__content { justify-content: flex-start; padding: 19.8rem 2.8rem 10rem; }
  .strip { margin-top: auto; padding: 0; }
  .btn--secondary { background: var(--btn2-field); }
  .btn--secondary:hover { background: var(--btn2-field-hover); }
  .btn--secondary:active { background: var(--btn2-field-pressed); }
}
@media (min-width: 900px) and (max-width: 1099px) and (min-aspect-ratio: 5/4) {
  .hero__media { width: 64%; -webkit-mask-image: var(--media-mask-tablet, linear-gradient(90deg, transparent, rgba(0,0,0,.18) 3%, rgba(0,0,0,.5) 6.5%, rgba(0,0,0,.82) 10%, #000 13.5%)); mask-image: var(--media-mask-tablet, linear-gradient(90deg, transparent, rgba(0,0,0,.18) 3%, rgba(0,0,0,.5) 6.5%, rgba(0,0,0,.82) 10%, #000 13.5%)); }
  .hero__media video { object-position: 50% 50%; }
  .hero__field { width: var(--field-tablet-w, 36%); background: var(--field-tablet-bg, var(--field-desk-bg, var(--field))); -webkit-mask-image: none; mask-image: none; }
  .hero__shade-bottom { height: 44%; background: var(--shade-split-tablet, linear-gradient(180deg, transparent, color-mix(in srgb, var(--shade-narrow) 22%, transparent) 26%, color-mix(in srgb, var(--shade-narrow) 62%, transparent) 50%, color-mix(in srgb, var(--shade-narrow) 90%, transparent) 70%, var(--shade-narrow) 84%)); }
  .hero__media::after { background: var(--falloff-tablet); }
  .hero__content { padding: 14rem 4rem 4.8rem; }
  .headline { font-size: var(--headline-split-fs, 4rem); line-height: var(--headline-split-lh, 4.8rem); }
  .sub { max-width: 38rem; }
}
@media (min-width: 1100px) {
  .hero { min-height: 84.8rem; }
  .nav__inner { padding: 2.8rem 1.6rem; }   /* wordmark at x=56, 12px left of the text column, as Qoves */
  .headline {
    max-width: 56rem;
    font-size: var(--headline-desk-fs, 5.2rem); line-height: var(--headline-desk-lh, 6rem); font-weight: 320;
    letter-spacing: -.035em; word-spacing: .04em;
  }
  .sub { margin-top: 2.4rem; max-width: 46rem; }
  .ctas { margin-top: 4rem; }
  /* tall screens (1920x1080, 2560x1440): the copy block moves down with the extra height, so it stays one unit with
     the strip instead of leaving a 500px hole above it; at 900px tall and below this is the Qoves 198px top */
  .hero__content { padding-top: max(19.8rem, calc(100svh - 760px)); }
}
@media (min-width: 1441px) {
  /* fixed 10px rem: the text column sits further right relative to the media, so the fall-off starts later */
  .hero__media::after { background: var(--falloff-wide); }
}

/* ---------- fixed bar: the header returns once the hero has scrolled away (class set by the inline script) ---------- */
@keyframes nav-bar-in { from { opacity: 0; transform: translateY(-.8rem); } to { opacity: 1; transform: none; } }
.nav.is-stuck {
  position: fixed; inset: 16px 40px auto 40px; height: 64px; padding: 0;
  border-radius: 9999px; background: rgba(243, 245, 242, .82); box-shadow: inset 0 0 0 1px var(--cloud); color: var(--ink-dark);   /* mist pill, as the phone bar */
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  animation: nav-bar-in .2s cubic-bezier(.2, 0, 0, 1) both;
}
.nav.is-stuck.is-leaving { opacity: 0; transform: translateY(-.8rem); transition: opacity .15s ease-out, transform .15s ease-out; animation: none; }
.nav.is-stuck::before { display: none; }
.nav.is-stuck .nav__inner { max-width: none; min-height: 64px; padding: 0 12px 0 28px; }
.nav.is-stuck .nav__logo img { height: 3.4rem; }
.nav.is-stuck .nav__logo .nav__logo-light { display: none; }
.nav.is-stuck .nav__logo .nav__logo-dark { display: block; }
.nav.is-stuck .nav__links a { color: var(--ink-dark); }
.nav.is-stuck .nav__links a:hover { color: var(--ink-dark-2); }
.nav.is-stuck .nav__signin { color: var(--ink-dark); text-shadow: none; }
.nav.is-stuck .nav__menu { color: var(--ink-dark); }
.nav.is-stuck .pill { background: var(--pine); color: var(--mist); border-color: var(--pine); }
.nav.is-stuck .pill:hover { background: #1D3B2F; }
.nav.is-stuck .pill:active { background: #17302A; }
.nav.is-stuck .nav__inner :focus-visible { outline-color: var(--focus-dark); box-shadow: none; }
.nav.is-stuck .nav__sheet { inset: calc(100% + .8rem) 0 auto 0; z-index: 0; padding: .8rem 2.4rem; border-radius: 2.4rem; }
@media (max-width: 767px) {
  .nav.is-stuck { inset: 0 0 auto 0; height: 56px; border-radius: 0; background: var(--mist); box-shadow: inset 0 -1px 0 var(--paper-line); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink-dark); }
  .nav.is-stuck .nav__inner { min-height: 56px; padding: 0 16px; }
  .nav.is-stuck .nav__logo img { height: 3.4rem; }
  .nav.is-stuck .nav__logo .nav__logo-light { display: none; }
  .nav.is-stuck .nav__logo .nav__logo-dark { display: block; }
  .nav.is-stuck .nav__menu { color: var(--ink-dark); }
  .nav.is-stuck .pill { background: var(--pine); color: var(--mist); border-color: var(--pine); }
  .nav.is-stuck .nav__sheet { inset: 100% 0 auto 0; padding: 0 1.6rem .8rem; border-radius: 0; background: var(--mist); box-shadow: 0 1px 0 var(--paper-line); }
  .nav.is-stuck .nav__sheet li + li { border-top-color: var(--paper-line); }
  .nav.is-stuck .nav__sheet a { color: var(--ink-dark); }
}
@media (prefers-reduced-motion: reduce) {
  .nav.is-stuck { animation: none; }
  .nav.is-stuck.is-leaving { transition: none; }
}