/* Founders Freedom: shared site styles (header, dropdowns, placeholder pages).
   Every page links this file and assets/site.js, which builds the header. */

@font-face {
  font-family: "Lemon Milk";
  src: url("/assets/fonts/LEMONMILK-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* THEME (Roy, Oct 2). WHITE is on ("let me see it white again"). The black
     Apple-style version is kept as html.theme-dark right below this block: to
     switch, put class="theme-dark" on <html> (build_site.py's HEAD) and rebuild. */
  --ink: #0a0a0a;
  --ink-soft: #5c5c5c;
  --ink-faint: #8a8a8a;
  --paper: #ffffff;
  --wash: #f5f5f4;
  --hairline: rgba(10, 10, 10, 0.08);

  /* The bar, the dropdown panel and the phone menu: white glass */
  --bar-bg: rgba(255, 255, 255, 0.86);
  --bar-line: rgba(0, 0, 0, 0.06);
  --bar-text: #1d1d1f;
  --logo-ink: #0a0a0a;
  --cta-bg: #0a0a0a;
  --cta-fg: #fff;
  --cta-hover-bg: #000;
  --menu-icon: #0a0a0a;
  --curtain: rgba(232, 232, 237, 0.4);
  --fly-text: #1d1d1f;
  --fly-tag-bg: #ececf0;
  --fly-tag-fg: #6e6e73;
  --fly-hover: var(--ff-3);

  /* Founders Freedom blue, sampled from the logo (deep blue to cyan) */
  --ff-1: #171fc7;
  --ff-2: #1c40cb;
  --ff-3: #2362d3;
  --ff-4: #2b86db;
  --ff-5: #37d4e5;

  --header-h: 76px; /* Roy, Oct 2: more room above and below the nav words (Public's is 58px) */
  --bar-h: 10px;
  --gutter: clamp(16px, 3vw, 40px);
  --content-w: 1200px;
  --mega-w: 1360px;

  /* Smooth ease-out for every hover: fast start, soft landing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sheet-ease: cubic-bezier(0.32, 0.72, 0, 1); /* iOS's sheet curve: quick start, long soft landing */

  /* The site font (Roy, Oct 2: "a nice, solid, beautiful font... an Apple feel"):
     Apple's own SF Pro on iPhone, iPad and Mac, and Inter (built to match it)
     everywhere else, so it looks the same on every device. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* The black Apple-style theme (Roy, Oct 2): a black page, the bar in Apple's
   #1D1D1F (measured on apple.com at 80%, here 86% so it reads as gray on black),
   white type, a white logo, and the same blue gradient hovers. Apple's own
   dark-mode text colors. On when <html class="theme-dark">. */
html.theme-dark {
  --ink: #f5f5f7;
  --ink-soft: #a1a1a6;
  --ink-faint: #86868b;
  --paper: #000000;
  --wash: #1d1d1f;
  --hairline: rgba(255, 255, 255, 0.1);
  /* The bar is pure black, matching the page, sitting or scrolling (Roy, Oct 2:
     "Just make the navigation bar black and match the background"). No gray,
     no line. The dropdown and phone panels use the same black. */
  --bar-bg: #000;
  --bar-line: transparent;
  --bar-text: #f5f5f7;
  --logo-ink: #fff;
  --cta-bg: #fff;
  --cta-fg: #000;
  --cta-hover-bg: #fff;
  --menu-icon: #fff;
  --curtain: rgba(0, 0, 0, 0.4);
  --fly-text: #e8e8ed;
  --fly-tag-bg: #2c2c2e;
  --fly-tag-fg: #a1a1a6;
  --fly-hover: var(--ff-5);
}
html.theme-dark .site-header .brand-mark g { fill: #fff; }
html.theme-dark .nav { background-color: var(--bar-bg); transition: none; } /* black at all times, no fade */
/* Solid black needs no blur, and iPhone Safari draws a thin light line at the
   edge of a blurred layer (Roy saw it between the bar and the phone menu) */
html.theme-dark .nav,
html.theme-dark .mobile-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* ================= Header ================= */

/* Built like public.com's bar (Roy, Oct 2): no background of its own, the blur
   comes from .nav-backdrop, and the pieces are fixed layers (brand bar, logo,
   menu, dropdown) so the menu can blend with the page (see "Blend" below).
   .site-header itself only holds the bar's space in the page flow. */
.site-header {
  height: calc(var(--bar-h) + var(--header-h));
}

/* Public.com's scroll blur, copied exactly (their .nav-backdrop rule): a fixed
   100px layer that blurs whatever scrolls under the bar at 15px, full strength
   for the top 40%, then fading to nothing. No tint, no line. */
.nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--bar-h) + var(--header-h) + 32px); /* bar + 32px of soft fade below it */
  z-index: 45;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  -webkit-mask: linear-gradient(#000 0, #000 40%, transparent 100%);
  mask: linear-gradient(#000 0, #000 40%, transparent 100%);
  pointer-events: none;
  /* One change from Public: it switches on only once the page scrolls (Roy:
     "whenever it scrolls down"), so at rest it can't smear the top of the
     headline on phones, where the headline starts inside these 100px. */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-backdrop.is-on { opacity: 1; }

/* The moving Founders Freedom bar (Crosby's red bar, in our blue) */
.brand-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  height: var(--bar-h);
  width: 100%;
  /* Starts and ends on the same blue so the loop has no seam */
  background: linear-gradient(90deg, var(--ff-1) 0%, var(--ff-3) 25%, var(--ff-5) 50%, var(--ff-3) 75%, var(--ff-1) 100%);
  background-size: 200% 100%;
  animation: bar-flow 6s linear infinite;
}

/* At 200% size, -200% moves exactly one gradient width: a seamless loop */
@keyframes bar-flow {
  from { background-position: 0% 0; }
  to   { background-position: -200% 0; }
}

/* Logo pinned left, menus pinned far right (Roy, Oct 2; the bar button is gone) */
.nav {
  position: fixed;
  top: var(--bar-h);
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 24px;
}

/* Column 1 stays empty: the logo sits there in its own layer. The last menu's
   chevron lines up with the page edge, the way the logo does on the left
   (-14px = the trigger's right padding). */
.nav-links { grid-column: 2; margin-right: -14px; }
.nav > .cta,
.nav > .menu-toggle { grid-column: 3; justify-self: end; }

/* The logo is its own fixed layer, never blended, so the blue flag stays blue */
.site-header > .brand {
  position: fixed;
  top: var(--bar-h);
  left: var(--gutter);
  z-index: 65;
  height: var(--header-h);
  transition: color 0.25s ease;
}

/* Logo lockup, built on the Cornell Group system: Lemon Milk Medium with a 14px
   cap height, the flag at 1.72x the cap height, a tight gap. text-box trims the
   wordmark to its capitals so flag and letters share one center line.
   Lemon Milk caps = 78.7% of the font size (measured). */
.brand {
  --logo-cap: 14px;
  --mark-scale: 1.71875; /* Cornell's 1.25, +10%, then +25% (Roy) */
  --logo-gap: 5px;
  display: inline-flex;
  align-items: center;
  gap: var(--logo-gap);
  color: var(--ink);
  flex-shrink: 0;
}

.brand-mark {
  height: calc(var(--logo-cap) * var(--mark-scale));
  width: auto;
  display: block;
  flex-shrink: 0;
}

.brand-word {
  display: block;
  font-family: "Lemon Milk", "Inter", sans-serif;
  font-weight: 500;
  font-size: calc(var(--logo-cap) / 0.787);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

/* Menu items: white text on a pill of the brand bar's moving gradient on hover
   and while open (the pill itself is drawn in the Blend block further down) */
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 14px 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.28s var(--ease-out), color 0.28s var(--ease-out);
}

.nav-trigger:hover,
.nav-trigger:focus-visible,
.nav-trigger[aria-expanded="true"],
.nav-trigger.is-current {
  background-color: var(--ink);
  color: #fff;
}

.chev {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.35s var(--ease-out), opacity 0.2s ease;
}

.nav-trigger:hover .chev,
.nav-trigger[aria-expanded="true"] .chev { opacity: 1; }
.nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Work With Us: a pill like Public.com's buttons. On hover a SMALL pop (Roy, Oct 2:
   "it can pop out a little bit, but just not as much"): 1px lift, 2% scale and a
   soft blue glow in place of the old 2px / 4% lift with its muddy gray shadow.
   In the bar the brand gradient fades in at the same time (see the Blend block). */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-color 0.3s ease, opacity 0.15s ease;
}

.cta:hover,
.cta:focus-visible {
  background: var(--cta-hover-bg);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px -8px rgba(35, 98, 211, 0.55);
}

/* Press: settles back down and dims for a moment */
.cta:active { opacity: 0.85; transform: none; transition-duration: 0.12s; }

.cta:focus-visible,
.nav-trigger:focus-visible,
.menu-toggle:focus-visible,
.mega a:focus-visible,
.m-trigger:focus-visible {
  outline: 2px solid var(--ff-3);
  outline-offset: 3px;
}

/* ================= Desktop dropdown: King Kong style =================
   Roy, Oct 2: make the choices "like King Kong does... bigger... on this black
   screen where it actually drops down and kind of takes over the screen", keep
   the hover that fills the word with the moving blue, "make it big on the
   left. Keep the Apple vibe... an image on the right-hand side that kind of
   represents what it is". The panel still drops from behind the bar (bar and
   panel are one black surface) and the page still blurs behind it (the
   curtain). Left: huge Anton caps, the hero headline's face. Right: the photo
   of the choice you point at, in a rounded card, with its one line under it.
   Apple's easing, cubic-bezier(0.4, 0, 0.6, 1). */

.mega {
  --apple-ease: cubic-bezier(0.4, 0, 0.6, 1);
  position: fixed;
  z-index: 55;
  top: var(--bar-h);
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  visibility: hidden;
  transition: height 0.32s var(--apple-ease) 0.06s, visibility 0s linear 0.38s;
}
.mega.is-open {
  height: var(--dd-h, 420px);
  visibility: visible;
  transition: height 0.32s var(--apple-ease), visibility 0s;
}

/* Apple's curtain: the page softly blurs behind an open dropdown */
.mega-curtain {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--curtain);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.6, 1) 0.08s, visibility 0s linear 0.4s;
}
.mega-curtain.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.6, 1) 0.08s, visibility 0s;
}

.mega-frame { position: relative; }

/* Every menu sits in the same spot under the bar; only the open one shows */
.mega-section {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s var(--apple-ease), visibility 0s linear 0.24s;
}
.mega-section.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.24s var(--apple-ease), visibility 0s;
}

.fly {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 64px;
  padding: 44px var(--gutter) 64px; /* the list lines up with the logo, the photo with the last menu */
  /* the photo card's width: 39% of the window (560px at 1440), 680px at most,
     smaller on short screens so the whole panel always fits under the bar */
  --mw: min(680px, 39vw, (100vh - var(--bar-h) - var(--header-h) - 190px) * 4 / 3);
}

/* The two columns fade in one after the other, like Apple's */
.fly-col {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.32s var(--apple-ease), transform 0.32s var(--apple-ease);
}
.mega-section.is-active .fly-col {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.08s + var(--i, 0) * 0.08s);
}

.fly-list { list-style: none; }

/* The choices (Roy, Oct 2: "make that font the Apple font and make the font
   match this section"): SF Pro Display semibold (Inter off Apple devices), one
   size in every menu, sized so five choices run exactly the photo's height
   (the gray menu label above them is gone, Roy, Oct 2): 5 rows of 1.1 x size
   + 8px = 0.75 x the photo width. The width cap keeps the longest choice,
   "Pools & Outdoor Living" plus its Soon tag (10.52 x the size + 70px in Inter,
   the wider of the two), inside the column. 62px at 1440 x 900 (the width cap),
   85px at 1920 x 1080. */
.fly-main { container-type: inline-size; }
.fly-big {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Every row is a fifth of the photo's height (0.15 x its width), so five
     choices always end at the photo's bottom edge, even when the width cap
     makes the words smaller. The rows touch: no dead gaps, so the dimming
     never flickers. */
  padding: max(4px, (var(--mw) * 0.15 - 1.1em) / 2) 0;
  font-family: var(--font-display);
  font-size: min((var(--mw) * 0.75 - 40px) / 5.5, (100cqi - 70px) / 10.52);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--fly-text);
  transition: opacity 0.35s var(--apple-ease);
}

/* On hover the word fills with the brand bar's moving gradient (kept, Roy:
   "I love how it changes colors") and the other choices step back */
.fly-t {
  background-image: linear-gradient(90deg, var(--ff-1) 0%, var(--ff-3) 25%, var(--ff-5) 50%, var(--ff-3) 75%, var(--ff-1) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--fly-text);
  animation: bar-flow 6s linear infinite;
  transition: color 0.32s var(--apple-ease);
}
.fly-big:hover .fly-t,
.fly-big:focus-visible .fly-t { color: transparent; }
.fly-list:has(.fly-big:hover) .fly-big:not(:hover),
.fly-list:has(.fly-big:focus-visible) .fly-big:not(:focus-visible) { opacity: 0.3; }

/* Choices that aren't ready yet (Roy, Oct 2): shown grayed out, not clickable,
   no hover. They replaced the "Soon" tags. */
.fly-big.is-off { opacity: 0.3; pointer-events: none; cursor: default; }

.fly-tag {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--fly-tag-bg);
  color: var(--fly-tag-fg);
}

/* The photo card (width --mw, set on .fly). The photos cross-fade and settle
   from a slight zoom. */
.fly-media { width: var(--mw); }

.fly-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: #111113;
}
.fly-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.fly-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.45s var(--apple-ease), transform 0.9s var(--ease-out);
}
.fly-img.is-on { opacity: 1; transform: none; }

/* The choice's one line, under the photo */
.fly-cap {
  display: grid;
  min-height: 2.9em; /* always room for two lines, so every menu drops to the same height */
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #a1a1a6;
}
/* the old line leaves fast, then the new one rises in, so they never overlap */
.fly-cap > span {
  grid-area: 1 / 1;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s var(--apple-ease), transform 0.15s var(--apple-ease);
}
.fly-cap > span.is-on {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s var(--apple-ease) 0.12s, transform 0.35s var(--apple-ease) 0.12s;
}

/* Shared with the phone menu (.m-item) */
.mega-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.mega-icon svg { width: 18px; height: 18px; }

.tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--wash);
  color: var(--ink-faint);
}

/* ================= Mobile menu ================= */

/* The phone bar's Work With Us (Roy, Oct 2): white, with the brand bar's
   moving blue gradient running through the words, stretched from just past
   the flag mark to the right edge. Hidden on desktop; on the phone it shows
   once the blue hero has scrolled away (see "Phone bar"). The flag is 29px
   wide at the default logo size, and the button starts 22px after it so the
   flag has room to breathe (Roy, Oct 2). Heavy 800 words (Roy: "way more
   bold"); build_site.py loads Inter 800 for phones without SF Pro. */
.bar-cta {
  display: none;
  position: fixed;
  top: calc(var(--bar-h) + (var(--header-h) - 42px) / 2);
  left: calc(var(--gutter) + 29px + 22px);
  right: var(--gutter);
  z-index: 65;
  height: 42px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.bar-cta span {
  background-image: linear-gradient(90deg, var(--ff-1) 0%, var(--ff-3) 25%, var(--ff-5) 50%, var(--ff-3) 75%, var(--ff-1) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bar-flow 6s linear infinite;
}
/* the arrow, like the hero's button, inside the same gradient (Roy, Oct 2:
   bigger words plus the arrow so the button doesn't feel empty) */
.bar-cta span::after { content: "\2192"; margin-left: 8px; }
.bar-cta:active { opacity: 0.85; }
.bar-cta:focus-visible { outline: 2px solid var(--ff-4); outline-offset: 3px; }

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.menu-toggle span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out);
}
.menu-toggle span:nth-child(1) { top: 15px; }
.menu-toggle span:nth-child(2) { top: 23px; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* The phone menu, in the desktop dropdown's style (Roy, Oct 2: "bring the
   style, not perfectly, but style over to mobile where it fits mobile well").
   One black surface with the bar that takes over the screen, no lines, big
   SF Pro semibold sections. The open section's name fills with the moving
   blue (the desktop hover) and the others step back. Each choice is a big
   title with its one line under it and its photo on the right, the desktop's
   photo card in small. Unready choices are grayed out. */
.mobile-panel {
  display: none;
  position: fixed;
  z-index: 59; /* just under the bar, which overlaps its top 1px: no seam on iPhone (Roy, Oct 2) */
  left: 0;
  right: 0;
  top: calc(var(--bar-h) + var(--header-h) - 1px);
  bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 11px var(--gutter) 36px;
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* the moving gradient that fills words on tap, shared by the section names
   and the choices (the same one as the desktop dropdown's hover) */
.m-label,
.m-item .t,
.m-cta span {
  background-image: linear-gradient(90deg, var(--ff-1) 0%, var(--ff-3) 25%, var(--ff-5) 50%, var(--ff-3) 75%, var(--ff-1) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: bar-flow 6s linear infinite;
}

.m-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: left;
  color: var(--fly-text);
  cursor: pointer;
  transition: opacity 0.35s var(--ease-out);
}
.m-label { color: var(--fly-text); transition: color 0.32s ease; }
.m-trigger[aria-expanded="true"] .m-label,
.m-trigger:active .m-label { color: transparent; }
.m-trigger .chev { width: 16px; height: 16px; opacity: 0.5; transition: transform 0.4s var(--ease-out), opacity 0.2s ease; }
.m-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); opacity: 1; }
/* while one section is open, the other section names step back */
.mobile-panel:has(.m-section.is-open) .m-section:not(.is-open) .m-trigger { opacity: 0.35; }

/* Accordion: animates open with the 0fr -> 1fr grid trick */
.m-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.m-section.is-open .m-body { grid-template-rows: 1fr; }
.m-body > div { overflow: hidden; }

.m-list { list-style: none; padding: 2px 0 16px; }

.m-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  column-gap: 16px;
  align-items: center;
  padding: 11px 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.45s var(--ease-out);
}
.m-section.is-open .m-item { opacity: 1; transform: none; }
.m-section.is-open .m-list > li:nth-child(2) .m-item { transition-delay: 0.04s; }
.m-section.is-open .m-list > li:nth-child(3) .m-item { transition-delay: 0.08s; }
.m-section.is-open .m-list > li:nth-child(4) .m-item { transition-delay: 0.12s; }
.m-section.is-open .m-list > li:nth-child(5) .m-item { transition-delay: 0.16s; }
.m-section.is-open .m-item.is-off { opacity: 0.4; } /* grayed out, not a link */

.m-item .t {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fly-text);
  transition: color 0.3s ease;
}
.m-item:active .t { color: transparent; }
@media (hover: hover) { .m-item:hover .t { color: transparent; } }
.m-item.is-off .t { color: var(--fly-text); }
.m-item .d {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #a1a1a6;
}

/* the photo, the desktop's card in small: 4:3, rounded, a hairline ring */
.m-thumb {
  display: block;
  width: 84px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  object-fit: cover;
  background: #111113;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.m-item.is-off .m-thumb { filter: grayscale(1); }

/* Work With Us at the bottom: the phone bar's button (white, the moving blue
   in the words, an arrow), full width */
.mobile-panel > .m-cta {
  display: flex;
  width: 100%;
  height: 56px;
  margin-top: 26px;
  border-radius: 14px;
  background: var(--cta-bg);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mobile-panel > .m-cta:hover,
.mobile-panel > .m-cta:focus-visible { transform: none; box-shadow: none; background: var(--cta-bg); }
.m-cta span { color: transparent; }
.m-cta span::after { content: "\2192"; margin-left: 8px; }

/* ================= The bar =================
   Roy, Oct 2: a glass bar (white now; Apple's gray in the dark theme) with the
   hover pills in the brand bar's moving blue gradient ("that blue changing
   color, I love that"). Colors come from the theme variables at the top. This
   replaced Public's mix-blend trick: with its own background, the bar no longer
   needs to invert against the page. */
/* At the top of the page the bar has no color of its own, so it blends into
   the page (black on black, white on white). Once you scroll, or while a
   dropdown or the phone menu is open, the glass bar fades in (Roy, Oct 2:
   "I want it to look black... then when you scroll down, the banner can pop up"). */
.nav {
  background-color: transparent;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 transparent;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-scrolled .nav,
.site-header.mega-open .nav,
.site-header.menu-open .nav {
  background-color: var(--bar-bg);
  box-shadow: inset 0 -1px 0 var(--bar-line);
}
.nav .nav-trigger { color: var(--bar-text); }
.nav .nav-trigger:hover,
.nav .nav-trigger:focus-visible,
.nav .nav-trigger[aria-expanded="true"],
.nav .nav-trigger.is-current { background-color: transparent; color: #fff; }
.nav > .cta { background: var(--cta-bg); color: var(--cta-fg); }
.nav > .cta:hover,
.nav > .cta:focus-visible { background: var(--cta-bg); color: #fff; box-shadow: 0 8px 20px -8px rgba(55, 130, 230, 0.6); }
.nav :focus-visible { outline-color: var(--ff-4); }
.nav .menu-toggle span { background: var(--menu-icon); }

/* The logo: blue flag and black words on white; all white in the dark theme */
.site-header > .brand { color: var(--logo-ink); }

/* Hover pill = the brand bar's moving gradient. A ::before layer, so it fades
   in. The menu pills use background-attachment: fixed with the bar's exact size
   and motion, so each pill shows the slice of gradient right above it, moving
   in step with the bar. (Work With Us lifts on hover, which breaks fixed
   backgrounds, so its gradient flows inside its own pill.) */
.nav { --g1: var(--ff-1); --g3: var(--ff-3); --g5: var(--ff-5); }

.nav .nav-trigger,
.nav > .cta { position: relative; z-index: 0; }

.nav .nav-trigger::before,
.nav > .cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(90deg, var(--g1) 0%, var(--g3) 25%, var(--g5) 50%, var(--g3) 75%, var(--g1) 100%);
  background-size: 200% 100%;
  animation: bar-flow 6s linear infinite;
  opacity: 0;
  transition: opacity 0.28s var(--ease-out);
  pointer-events: none;
}
.nav .nav-trigger::before { background-attachment: fixed; }
.nav > .cta::before { transition-duration: 0.4s; } /* a slower, softer fade on the main button */

.nav .nav-trigger:hover::before,
.nav .nav-trigger:focus-visible::before,
.nav .nav-trigger[aria-expanded="true"]::before,
.nav .nav-trigger.is-current::before,
.nav > .cta:hover::before,
.nav > .cta:focus-visible::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nav .nav-trigger::before,
  .nav > .cta::before { animation-duration: 20s; }
}

@media (max-width: 1100px) {
  .nav > .menu-toggle { grid-column: 2; }
}

/* Inner pages (Roy, Oct 8): logo and menus meet in the middle as one group.
   site.js measures both and sets --brand-x / --links-x; the home page never
   gets .nav-centered. Desktop only: at 1100px and under the menu button takes
   over as before. */
@media (min-width: 1101px) {
  .site-header.nav-centered > .brand { left: var(--brand-x, var(--gutter)); }
  .site-header.nav-centered .nav-links {
    grid-column: auto; /* a set grid column would make --links-x count from that column, not the bar */
    position: absolute;
    top: 50%;
    left: var(--links-x, auto);
    right: auto;
    margin: 0;
    transform: translateY(-50%);
  }
}

/* ================= Breakpoints ================= */

@media (max-width: 1100px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .nav > .cta { display: none; }
  .mega, .mega-curtain { display: none; }
  .menu-open .mobile-panel { display: block; }
  /* the logo sits in the middle of the bar on phones (Roy, Oct 2) */
  .site-header > .brand { left: 50%; transform: translateX(-50%) scale(1); }

  /* Phone bar (Roy, Oct 2: "as smooth as possible"). Once the blue hero has
     scrolled fully under the bar (site.src.js adds .is-past-hero), the logo
     slides from the middle to the left edge and its words fade away so only the
     flag mark stays, the menu button fades out, and a white Work With Us button
     with the moving blue gradient in its words fills the rest of the bar
     ("make it wider... all we should see is the F logo"). Only transform and
     opacity move, so it stays smooth while the page scrolls. */
  .site-header > .brand {
    transition: transform 0.6s var(--sheet-ease), color 0.25s ease;
  }
  .site-header.is-past-hero:not(.menu-open) > .brand {
    transform: translateX(calc(var(--gutter) - 50vw)) scale(1);
  }
  .site-header > .brand .brand-word { transition: opacity 0.35s ease 0.15s; }
  .site-header.is-past-hero:not(.menu-open) > .brand .brand-word {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .nav .menu-toggle { transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s, visibility 0s; }
  .site-header.is-past-hero:not(.menu-open) .menu-toggle {
    opacity: 0;
    transform: scale(0.85);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .site-header > .bar-cta {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateX(16px);
    transition: opacity 0.2s ease, transform 0.6s var(--sheet-ease), visibility 0s linear 0.2s;
  }
  .site-header.is-past-hero:not(.menu-open) > .bar-cta {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.4s ease 0.1s, transform 0.6s var(--sheet-ease) 0.05s, visibility 0s;
  }
}

@media (max-width: 360px) {
  .brand { --logo-cap: 12px; }
  .bar-cta { left: calc(var(--gutter) + 25px + 20px); } /* the flag is 25px wide at this logo size */
}

@media (prefers-reduced-motion: reduce) {
  .brand-bar { animation-duration: 20s; }
  .fly-t, .bar-cta span, .m-label, .m-item .t, .m-cta span { animation: none; }
  .cta, .nav-trigger, .mega, .mega-curtain, .mega-section, .fly-col, .fly-big, .fly-img, .fly-cap > span, .m-body, .m-item,
  .site-header > .brand, .brand-word, .bar-cta, .menu-toggle { transition: none !important; }
  .cta:hover { transform: none; }
}

/* ================= Placeholder pages ================= */

.page-hero {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: clamp(64px, 12vw, 140px) var(--gutter) 120px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.crumbs a:hover { color: var(--ink); }

.page-hero h1 {
  margin-top: 18px;
  max-width: 900px;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.page-hero p {
  margin-top: 20px;
  max-width: 560px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--ink-soft);
}

.soon {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.soon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ff-1), var(--ff-5));
  box-shadow: 0 0 0 4px rgba(35, 98, 211, 0.12);
}

.home-blank { min-height: 160vh; }

/* Phone: a little more breathing room in the bar, but not so much it eats the screen */
@media (max-width: 767px) {
  :root { --header-h: 66px; }
}