/* Site navigation. Shared by every page, including the home page, whose own
   design system stays inline in index.html. Only the bar's contents live here. */
.nav{display:flex;align-items:center;gap:30px;flex:1}
/* Titles sit across the top beside the logo, the way SpaceX sets them. */
.nav-links{margin-left:44px;margin-right:auto}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a{white-space:nowrap;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft,#55504a);
  padding:6px 0;border-bottom:1px solid transparent;transition:color 260ms var(--ease),border-color 260ms var(--ease)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink,#171512);border-bottom-color:var(--accent,#3f8f8c)}
.nav-links a[aria-current="page"]{color:var(--ink,#171512);border-bottom-color:var(--bronze,#a08a5c)}
/* Registering is still possible, it just no longer leads. */
.nav-reg{white-space:nowrap;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-pressed,#2b6765);
  border:1px solid rgba(63,143,140,.45);border-radius:99px;padding:8px 14px;transition:background-color 260ms var(--ease),color 260ms var(--ease)}
.nav-reg:hover,.nav-reg:focus-visible{background:var(--accent,#3f8f8c);color:#fff}

/* The Frontir burger: the symbol cut at the waist. Two lines, no ring, 40px box. */
.nav-burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;place-content:center;color:var(--ink,#171512)}
/* Filled, so each half tapers to a point at its ends like the mark (Ollie, 6 Nov 2026) */
.nav-burger svg{width:32px;height:19px;fill:currentColor;stroke:none;transition:opacity 200ms}
.nav-burger:hover svg,.nav-burger[aria-expanded="true"] svg{opacity:1}

/* Dark pages (Onti) */
.on-dark .nav-links a{color:rgba(244,241,234,.62)}
.on-dark .nav-links a:hover,.on-dark .nav-links a:focus-visible,.on-dark .nav-links a[aria-current="page"]{color:#f4f1ea}
.on-dark .nav-reg{color:#a9cac8;border-color:rgba(169,202,200,.4)}
.on-dark .nav-burger{color:#f4f1ea}
.on-dark .nav-burger svg{width:32px;height:19px}
/* light on black: the hair-thin tips fade in the smoothing and read as blunt, so
   a fine edge in the same colour, mitred so the points stay sharp */
.on-dark .nav-burger svg path{stroke:currentColor;stroke-width:.35;stroke-linejoin:miter;stroke-miterlimit:40}
.topbar.on-dark::before{background:rgba(10,10,10,.86);border-bottom-color:rgba(244,241,234,.08)}

@media(max-width:680px){
  /* Phones: the titles go behind the burger (Ollie, 6 Nov 2026). The sheet
     opens the way the symbol does: it parts from the middle of the screen, up
     and down, while the two halves of the burger mark move apart. Slow and
     even (Ollie: smoother and slower), then the titles ease in. */
  .topbar .tb-in{flex-wrap:nowrap}
  .nav{flex:0 0 auto;margin-left:auto}
  .nav-reg{display:none!important}
  .nav-burger{display:grid;position:relative;z-index:3;margin-right:-8px}
  .topbar .hd-home,.topbar .home{position:relative;z-index:3}
  .nav-burger svg{overflow:visible}
  .nav-burger svg path{transition:transform 900ms var(--ease,cubic-bezier(.22,1,.36,1))}
  .nav.open .nav-burger svg path:first-child{transform:translateY(-2.4px)}
  .nav.open .nav-burger svg path:last-child{transform:translateY(2.4px)}
  .nav-links{position:fixed;inset:0;z-index:1;margin:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;
    padding:96px 32px 48px;background:#efeae2;visibility:hidden;clip-path:inset(50% 0 50% 0);
    transition:clip-path 700ms cubic-bezier(.65,0,.35,1),visibility 0s linear 700ms}
  .nav.open .nav-links{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path 1100ms cubic-bezier(.65,0,.35,1),visibility 0s}
  .nav-links > li{width:100%;opacity:0;transform:translateY(10px);transition:opacity 260ms,transform 260ms}
  .nav.open .nav-links > li{opacity:1;transform:none;transition:opacity 700ms var(--ease) calc(620ms + var(--i,0)*90ms),transform 700ms var(--ease) calc(620ms + var(--i,0)*90ms)}
  .nav-links > li:nth-child(1){--i:0}.nav-links > li:nth-child(2){--i:1}.nav-links > li:nth-child(3){--i:2}.nav-links > li:nth-child(4){--i:3}.nav-links > li:nth-child(5){--i:4}
  .nav-links > li > a,.nav-links .dd-btn{display:block;width:100%;font-size:17px;letter-spacing:.12em;line-height:1.3;padding:18px 0;color:var(--ink,#171512);border:0;text-align:left}
  .nav-links > li > a[aria-current="page"]{color:var(--accent-pressed,#2b6765)}
  /* Company: its three pages listed under it, no dropdown inside the sheet */
  .nav-links .dd-btn{pointer-events:none}
  .nav-links .dd-btn svg{display:none}
  .nav-links .dd{position:static;visibility:visible;transform:none;background:none;box-shadow:none;padding:0 0 6px 0;min-width:0;border-radius:0}
  .nav-links .dd a{font-size:11px;letter-spacing:.14em;padding:10px 0;color:var(--ink-soft,#55504a)}
  .nav-links .dd a:hover{background:none}
  .nav-reg-m{margin-top:28px}
  .nav-links > li.nav-reg-m > a{display:inline-flex;width:auto;font-size:11px;letter-spacing:.14em;color:#fff;background:var(--accent,#3f8f8c);border-radius:14px;padding:15px 26px}
  .on-dark .nav-links{background:#0b0b0b}
  .on-dark .nav-links > li > a,.on-dark .nav-links .dd-btn{color:#f4f1ea}
  .on-dark .nav-links .dd a{color:rgba(244,241,234,.62)}
  /* no box round Company's pages inside the sheet, on dark pages either (Ollie) */
  .nav .nav-links .dd,.on-dark .nav .nav-links .dd{background:none;box-shadow:none;border-radius:0}
  .on-dark .nav-links .dd a:hover{background:none;color:#f4f1ea}
  html.nav-lock,html.nav-lock body{overflow:hidden}
  /* the footer's page links repeat the menu, so phones drop them (Ollie, 6 Nov 2026);
     the legal links and email stay */
  .footer .f-nav{display:none!important}
}
@media(max-width:680px) and (prefers-reduced-motion:reduce){
  .nav-links,.nav.open .nav-links,.nav-links > li,.nav.open .nav-links > li,.nav-burger svg path{transition:none!important}
}
@media(min-width:681px){.nav-reg-m{display:none}}
@media(prefers-reduced-motion:reduce){.nav-links{transition:none}}
@media(max-width:900px) and (min-width:681px){.nav-links{gap:22px;margin-left:30px}.nav-reg{padding:7px 11px}}

/* Links and the Company button are the same kind of box, so they share a
   baseline; an inline link and a flex button otherwise sit 3px apart. */
.nav-links > li > a{display:inline-flex;align-items:center;line-height:16px}
.dd-btn{line-height:16px}

/* Company dropdown. Opens on hover or focus with a pointer, and on press
   everywhere, so it works by touch and keyboard as well. */
.has-dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;font-family:var(--font,'Michroma',monospace);
  white-space:nowrap;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft,#55504a);padding:6px 0;border-bottom:1px solid transparent;transition:color 260ms var(--ease)}
.dd-btn svg{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms}
.dd-btn:hover,.dd-btn:focus-visible,.has-dd.open .dd-btn{color:var(--ink,#171512)}
.dd-btn.is-current{color:var(--ink,#171512);border-bottom-color:var(--bronze,#a08a5c)}
.has-dd.open .dd-btn svg{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 12px);left:-18px;min-width:190px;list-style:none;background:#f4f1ea;border-radius:14px;padding:8px;
  box-shadow:0 24px 60px rgba(23,21,18,.18),0 0 0 1px rgba(23,21,18,.06);visibility:hidden;transform:translateY(-4px);transition:transform 180ms var(--ease);z-index:70}
.dd::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.has-dd.open .dd{visibility:visible;transform:none}
@media(hover:hover){.has-dd:hover .dd{visibility:visible;transform:none}.has-dd:hover .dd-btn svg{transform:rotate(180deg)}}
.dd a{display:block;padding:11px 12px;border-radius:9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink,#171512);border:0!important}
.dd a:hover,.dd a:focus-visible{background:rgba(63,143,140,.1);color:var(--accent-pressed,#2b6765)}
.on-dark .dd-btn{color:rgba(244,241,234,.62)}
.on-dark .dd-btn:hover,.on-dark .dd-btn.is-current,.on-dark .has-dd.open .dd-btn{color:#f4f1ea}
.on-dark .dd{background:#161514;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(244,241,234,.08)}
.on-dark .dd a{color:#f4f1ea}
.on-dark .dd a:hover{background:rgba(79,168,164,.14);color:#a9cac8}

/* the trade mark after FRONTIR and Onti */
.tm{font-size:.55em;vertical-align:super;line-height:0;letter-spacing:0;margin-left:.05em}