/* ---------- nav ----------
   Clear over the hero, as the V5 web mock draws it. Past the hero it's glass (Xavi, 1 Oct 2026): the page behind the bar blurred
   under a white veil, a Fathom one over the dark bands, with the silk floating in it (nav.js). The veils are the lightest that keep
   the nav at 4.5:1 or more down the whole page. nav.js's tuning hook can set them, and the blur, through --veil-l, --veil-d, --blur.
   Outside the book, by Xavi's call (brand/design-system.md §16): a veil is a brand colour at a percentage, and the blur a filter
   on what's behind. */
.nav{--blur:24px;--veil-l:.52;--veil-d:.62;position:fixed;inset:0 0 auto;z-index:40;color:var(--white);border-bottom:1px solid transparent;transition:color .3s}
.nav .row{position:relative;z-index:1;max-width:var(--max);margin-inline:auto;padding-inline:var(--m);height:var(--nav);display:flex;align-items:center;gap:32px}
.nav .logo{flex:none;display:block;height:32px}
.nav .logo img{height:32px;width:auto}
.nav .logo .dk{display:none}
.nav ul{display:flex;gap:28px;margin-left:auto;font-size:clamp(15px,.99vw,19px)}
.nav ul a{text-decoration:none}
/* hover: two corner brackets frame the link, top left and bottom right (Xavi's pick, 1 Oct 2026, adapted from a reference he
   found): 1 px hairlines, 8 px long, that grow out of the corners while settling 4 px inward. Coastal Grey over the hero and the
   dark bands, Deep Teal on the light glass. The padding gives them room; the equal negative margin keeps the row where it was */
.nav{--corner:var(--grey)}.nav.solid{--corner:var(--deep)}.nav.solid.over-dark{--corner:var(--grey)}
.nav ul a{position:relative;display:inline-block;padding:6px 10px;margin:-6px -10px}
.nav ul a::before,.nav ul a::after{content:"";position:absolute;width:0;height:0;border:0 solid transparent;
  transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1),border-color .25s ease}
.nav ul a::after{left:0;top:0;border-top-width:1px;border-left-width:1px;transform:translate(-4px,-4px)}
.nav ul a::before{right:0;bottom:0;border-bottom-width:1px;border-right-width:1px;transform:translate(4px,4px)}
.nav ul a:hover::before,.nav ul a:hover::after,.nav ul a:focus-visible::before,.nav ul a:focus-visible::after{width:8px;height:8px;transform:none;border-color:var(--corner)}
@media (prefers-reduced-motion:reduce){.nav ul a::before,.nav ul a::after{transition:none}}
.nav .btn{font-size:clamp(15px,.99vw,19px);padding:clamp(12px,.833vw,16px) clamp(20px,1.25vw,24px)}
.nav .menu-btn{display:none}
/* "Get started" waits for the end of the hero, which has its own (Xavi, 2 Oct 2026): over the hero it's folded away; as the bar
   turns to glass it grows in from the right, pushing the links over, and fades in */
.nav .cta{overflow:hidden;white-space:nowrap;max-width:240px;visibility:visible;
  transition:max-width .55s cubic-bezier(.2,.7,.2,1),padding .55s cubic-bezier(.2,.7,.2,1),margin .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1),
    opacity .35s ease .15s,visibility 0s,background-color .25s,border-color .25s,color .25s}
.nav:not(.solid) .cta{max-width:0;padding-left:0;padding-right:0;margin-left:-32px;opacity:0;transform:translateX(12px);border-color:transparent;visibility:hidden;
  transition:max-width .45s cubic-bezier(.4,0,.2,1),padding .45s cubic-bezier(.4,0,.2,1),margin .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1),
    opacity .2s ease,visibility 0s .45s,background-color .25s,border-color .2s,color .25s}
/* its hover inverts: navy on the white glass, white over the dark glass */
.nav.solid.over-dark .btn.line:hover,.menu .btn.line:hover{background:var(--white);border-color:var(--white);color:var(--fathom)}
/* the glass, and the smoke over it, under the bar's content */
.nav .glass,.nav .smoke{position:absolute;left:0;top:0;width:100%;height:calc(100% + 1px);pointer-events:none}
.nav .glass{-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:background-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s}
.nav .smoke{display:block;opacity:0;transition:opacity .3s}
.nav.solid{color:var(--fathom)}
.nav.solid .glass{background:rgb(255 255 255 / var(--veil-l));-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.nav.solid .smoke{opacity:1}
.nav.solid .logo .lt{display:none}
.nav.solid .logo .dk{display:block}
/* over the dark bands past the hero (figures, stack, closing): Fathom glass and white ink */
.nav.solid.over-dark{color:var(--white)}
.nav.solid.over-dark .glass{background:rgb(12 39 60 / var(--veil-d))}
.nav.solid.over-dark .logo .lt{display:block}
.nav.solid.over-dark .logo .dk{display:none}
.nav.over-dark :focus-visible{outline-color:var(--white)}
/* less transparency asked for: the solid bars instead */
@media (prefers-reduced-transparency:reduce){
  .nav.solid .glass{background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.solid.over-dark .glass{background:var(--fathom)}
  .nav .smoke{display:none}
}
@media (max-width:760px){.nav ul,.nav .cta{display:none}.nav .menu-btn{display:inline-flex;margin-left:auto}}   /* three links fit, with air, down to here (2 Oct 2026; it was 1180 with five) */
/* The phone's menu.
   It arrives (Xavi, 5 Oct 2026): its navy ground comes down from the bar like a blind, and the rows rise into place one
   after another, the foot last. Leaving is quicker: the words go, then the ground lifts. nav.js adds .in once the dialog is
   open and takes it off to close; with reduced motion it opens and closes at once.
   What's in it (Xavi, 6 Oct 2026: "a bit boring", then, of three mocked directions, "go with B but with the Silk effect"):
   - the ground is the site's moving silk (data-silk on the dialog; base/silkband.js draws it, the figures band's);
   - each link is a row: its name, a line under it, and a picture of where it leads, which comes in from the right a beat
     after its row;
   - the foot holds Get started across the column, then the email and LinkedIn. It sits at the bottom of the screen; on a
     screen too short for it all, the menu's content scrolls and the silk stays put.
   What scrolls is .menu-in, the content's own box, never the dialog (Xavi, 6 Oct 2026: on his phone the careers page's
   menu had "a very long weird scroll"). The dialog scrolled then, with the silk's canvas fixed inside it so it would stay
   put. Safari counts a fixed child as part of what its scroller can scroll to, and the canvas moves with every scroll, so
   the scroll never ended. Now the canvas sits in a box that doesn't scroll. The page behind holds still too
   (html.menu-open, set by nav.js), so a drag on the menu can't reach it. */
.menu{position:fixed;inset:0;border:0;margin:0;padding:0;width:100%;max-width:none;height:100%;max-height:none;background:var(--fathom);color:var(--white);
  overflow:hidden;
  clip-path:inset(0 0 100% 0);transition:clip-path .3s cubic-bezier(.4,0,.2,1) .08s}
.menu-in{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.menu.in .menu-in{overflow:hidden auto;overscroll-behavior:contain}   /* only once it's fully open: nothing to scroll while it arrives or leaves */
html.menu-open{overflow:hidden}
.menu.in{clip-path:inset(0);transition:clip-path .5s cubic-bezier(.2,.7,.2,1)}
.menu::backdrop{background:none}
.menu:focus,.menu:focus-visible{outline:none}             /* it takes the first focus itself (nav.js): nothing to show for that */
.menu :focus-visible{outline-color:var(--white)}          /* a keyboard's ring, white on this ground */
.menu nav>*,.menu-foot{opacity:0;transform:translateY(14px);transition:opacity .15s ease,transform 0s linear .2s}
.menu.in nav>*,.menu.in .menu-foot{opacity:1;transform:none;transition:opacity .5s ease var(--d,0s),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.menu nav>:nth-child(1){--d:.12s}.menu nav>:nth-child(2){--d:.18s}.menu nav>:nth-child(3){--d:.24s}.menu-foot{--d:.34s}
.menu nav img{opacity:0;transform:translateX(16px);transition:opacity .15s ease,transform 0s linear .2s}
.menu.in nav img{opacity:1;transform:none;transition:opacity .5s ease calc(var(--d,0s) + .1s),transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .1s)}
@media (prefers-reduced-motion:reduce){.menu,.menu.in,.menu nav>*,.menu.in nav>*,.menu-foot,.menu.in .menu-foot,.menu nav img,.menu.in nav img{transition:none}}
.menu .row,.menu nav,.menu-foot{flex:none;width:100%;box-sizing:border-box;max-width:var(--max);margin-inline:auto;padding-inline:var(--m)}
.menu .row{height:var(--nav);display:flex;align-items:center;justify-content:space-between}
.menu .row .logo{display:block;line-height:0}                /* the lockup is a link home here too (Xavi, 6 Oct 2026) */
.menu .row img{height:32px;width:auto}
.menu nav{padding-top:4px}
.menu nav a{display:grid;grid-template-columns:minmax(0,1fr) clamp(116px,26vw,200px);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--slate);color:inherit;text-decoration:none}
.menu nav .t{font-size:clamp(28px,7.7vw,40px);line-height:1.1;letter-spacing:-.01em}
.menu nav small{display:block;margin-top:8px;font-size:14px;line-height:1.3;letter-spacing:0;color:var(--grey)}
.menu nav img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
/* Get started keeps its button: the hero's white pill, across the column at the foot, not a fourth row of the list */
.menu-foot{margin-top:auto;padding-top:32px;padding-bottom:28px}
.menu-foot .btn{display:flex;justify-content:center;font-size:18px;padding:18px 28px}
.menu-meta{display:flex;justify-content:space-between;gap:16px;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--slate);font-size:14px;color:var(--grey)}
.menu-meta a{color:inherit;text-decoration:none}