/* ---------- the menu's "more" button: Knowledge and About on desktop ----------
   Guy, 2026-10-26: on desktop, Knowledge and About move into a hamburger
   menu. Above 860px the bar shows What we build, How we work and the call to
   action, then a three-line button that opens a small panel holding the two
   links. Under 860px nothing changes: the phone drawer lists all four links
   and the button is hidden. The panel opens on click or tap only, never on
   hover, and closes on Escape, on a click outside it, or when a link in it is
   followed (nav.js). Without the script there is no button: both links sit in
   the bar as they did before. */
.fv-site .nav-more{ position:relative; display:flex; align-items:center; }
.fv-site .nav-more-btn{ position:relative; width:44px; height:44px; background:transparent; border:0; border-radius:999px; cursor:pointer;
  transition:background var(--dur-hover) ease; }
.fv-site .nav-more-btn span{ position:absolute; left:13px; right:13px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .22s var(--ease-out-expo), opacity var(--dur-hover) ease; }
.fv-site .nav-more-btn span:nth-child(1){ top:15px; } .fv-site .nav-more-btn span:nth-child(2){ top:21px; } .fv-site .nav-more-btn span:nth-child(3){ top:27px; }
.fv-site .nav-more.open .nav-more-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.fv-site .nav-more.open .nav-more-btn span:nth-child(2){ opacity:0; }
.fv-site .nav-more.open .nav-more-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
/* the button takes the bar's text colour, so it switches with the links */
.fv-site .site-nav .nav-more-btn{ color:#eaeaea; }
.fv-site .site-nav .nav-more-btn:hover{ color:#fff; background:rgba(255,255,255,.08); }
.fv-site .site-nav.nav-light:not(.open) .nav-more-btn{ color:#111; }
.fv-site .site-nav.nav-light:not(.open) .nav-more-btn:hover{ color:#000; background:rgba(0,0,0,.06); }
.fv-site .site-nav.nav-over-photo:not(.open) .nav-more-btn{ color:var(--white); }
.fv-site .nav-more-btn:focus-visible{ outline:3px solid var(--white); outline-offset:2px; }
.fv-site .site-nav.nav-light:not(.open) .nav-more-btn:focus-visible{ outline-color:var(--red-deep); }
/* the button is marked like a link when the page is one of its two */
.fv-site .nav-more-btn.active::after{ content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px; background:var(--red); border-radius:2px; }

/* the panel: a solid card in the bar's own colour, so its words read on any page */
.fv-site .nav-more-list{ position:absolute; top:calc(100% + 10px); right:0; min-width:200px; display:flex; flex-direction:column; gap:var(--space-1);
  padding:var(--space-2); background:#0d0d0d; border:1px solid var(--line-dark); border-radius:16px; box-shadow:0 30px 60px -20px rgba(0,0,0,.8); }
.fv-site .nav-more-list .nav-link{ display:flex; padding:var(--space-3) var(--space-4); border-radius:10px; color:#eaeaea; font-size:.95rem; }
.fv-site .nav-more-list .nav-link:hover{ color:#fff; background:rgba(255,255,255,.08); }
.fv-site .nav-more-list .nav-link.active{ color:#fff; }
.fv-site .nav-more-list .nav-link.active::after{ left:var(--space-4); right:auto; width:24px; bottom:6px; }
.fv-site .nav-more-list .nav-link:focus-visible{ outline:3px solid var(--white); outline-offset:-3px; }
.fv-site .site-nav.nav-light .nav-more-list{ background:var(--white); border-color:var(--line); box-shadow:0 30px 60px -30px rgba(0,0,0,.25); }
.fv-site .site-nav.nav-light .nav-more-list .nav-link{ color:#111; }
.fv-site .site-nav.nav-light .nav-more-list .nav-link:hover{ color:#000; background:rgba(0,0,0,.06); }
.fv-site .site-nav.nav-light .nav-more-list .nav-link:focus-visible{ outline-color:var(--red-deep); }
/* without the script: no button, and the two links sit in the bar as before */
@media (min-width:861px){
  .fv-site .nav-more:not(.js) .nav-more-btn{ display:none; }
  .fv-site .nav-more:not(.js) .nav-more-list{ position:static; flex-direction:row; align-items:center; gap:var(--space-2); min-width:0; padding:0; background:none; border:0; box-shadow:none; }
  .fv-site .nav-more:not(.js) .nav-more-list .nav-link{ padding:var(--space-2) var(--space-4); border-radius:0; font-size:.86rem; }
}
/* with the script: closed until the button opens it, fading in .18s on the brand ease, 8px of travel */
.fv-site .nav-more.js .nav-more-list{ opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--dur-hover) var(--ease-out-expo), transform var(--dur-hover) var(--ease-out-expo), visibility 0s linear var(--dur-hover); }
.fv-site .nav-more.js.open .nav-more-list{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }

/* phones: the button goes, and the two links sit in the drawer as before */
@media (max-width:860px){
  .fv-site .nav-more{ display:contents; }
  .fv-site .nav-more-btn{ display:none; }
  .fv-site .nav-more-list, .fv-site .nav-more.js .nav-more-list{ display:contents; position:static; opacity:1; visibility:visible; transform:none; transition:none; }
  .fv-site .nav-more-list .nav-link,
  .fv-site .site-nav.nav-light .nav-more-list .nav-link{ font-size:1.3rem; padding:var(--space-4) var(--space-2); border-radius:0; color:inherit; background:transparent; }
  .fv-site .site-nav:not(.nav-light) .nav-more-list .nav-link{ color:#eaeaea; }
  .fv-site .site-nav.nav-light .nav-more-list .nav-link{ color:#333; }
  .fv-site .nav-more-list .nav-link.active::after{ display:none; }
}
/* ---------- each word reads on what is behind it (Guy, 2026-10-26) ----------
   nav.js marks each word in the bar `on-light` (dark words) or `on-dark`
   (white words) from what sits behind that word: a photograph's own pixels,
   a section's colour, and the glass bar once the page scrolls. These rules
   come after every other colour rule for the bar, including the white words
   over a photo hero, so the measured colour always wins. The open phone
   menu keeps its own colours. */
.fv-site .site-nav:not(.open) .nav-logo.on-light span{ color:#0a0a0a; }
.fv-site .site-nav:not(.open) .nav-logo.on-dark span{ color:var(--white); }
.fv-site .site-nav:not(.open) .nav-menu > .nav-link.on-light,
.fv-site .site-nav:not(.open) .nav-menu > .nav-link.on-light:hover,
.fv-site .site-nav:not(.open) .nav-more-btn.on-light,
.fv-site .site-nav:not(.open) .nav-more-btn.on-light:hover{ color:#111; }
.fv-site .site-nav:not(.open) .nav-menu > .nav-link.on-dark,
.fv-site .site-nav:not(.open) .nav-menu > .nav-link.on-dark:hover,
.fv-site .site-nav:not(.open) .nav-more-btn.on-dark,
.fv-site .site-nav:not(.open) .nav-more-btn.on-dark:hover{ color:var(--white); }
.fv-site .site-nav:not(.open) .nav-menu > .nav-link.on-light:hover,
.fv-site .site-nav:not(.open) .nav-more-btn.on-light:hover{ background:rgba(0,0,0,.06); }
.fv-site .site-nav:not(.open) .nav-menu > .nav-link.on-dark:hover,
.fv-site .site-nav:not(.open) .nav-more-btn.on-dark:hover{ background:rgba(255,255,255,.08); }
.fv-site .site-nav:not(.open) .nav-toggle.on-light span{ background:#0a0a0a; }
.fv-site .site-nav:not(.open) .nav-toggle.on-dark span{ background:var(--white); }
.fv-site .site-nav:not(.open) .nav-more-btn.on-light:focus-visible,
.fv-site .site-nav:not(.open) .nav-toggle.on-light:focus-visible,
.fv-site .site-nav:not(.open) .nav-menu > .nav-link.on-light:focus-visible{ outline:3px solid var(--red-deep); outline-offset:2px; }
.fv-site .site-nav:not(.open) .nav-more-btn.on-dark:focus-visible,
.fv-site .site-nav:not(.open) .nav-toggle.on-dark:focus-visible,
.fv-site .site-nav:not(.open) .nav-menu > .nav-link.on-dark:focus-visible{ outline:3px solid var(--white); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .fv-site .nav-more-btn span, .fv-site .nav-more.js .nav-more-list{ transition:none; }
  .fv-site .nav-more.js .nav-more-list{ transform:none; }
}