/* home/top.css: the announcement bar, the nav island, its glass dropdown and the phone sheet.
   Owned by the top agent. Written to be linked on every page unchanged: it needs no markup
   change (top.js adds the glass plate and the scrim) and it does not need home/base.css, so
   every base token is read with a fallback. With base.js on the page, the island and the
   Clinical panel get real refraction (2 elements, the top budget); everywhere else, frosted.

   THE IDEA
   The nav is one floating instrument: a pill of glass that holds the logo, the links and the
   one ask. It takes on the colour of what is under it, so it reads the same over the dark
   operating room photograph, the white pages and the navy chapters: dark glass over dark
   ground, light glass over light ground (top.js finds the ground under the island's centre
   line). At the top the announcement bar sits above it; once you start reading the bar
   leaves and the island rises into its place. Nothing loops, nothing pulses.

   SPECIFICITY
   global.css styles the nav with selectors up to (0,4,1) (.nav.on-dark .nav__links a:hover)
   and some !important rules in the phone menu. Every rule here starts with `:root .nav.nav`
   or `:root .mobile-nav.mobile-nav` (0,3,0) so it wins at equal or higher weight without
   touching global.css. States: .h-top-dark / .h-top-light (ground, set by top.js; before it
   runs global's .on-dark stands in), .h-top-open (a panel is open), html.h-top-away (the
   page has moved, the bar has left), html.h-top-js (top.js is running). */

:root {
  --h-top-ease: var(--h-ease, cubic-bezier(0.28, 0.11, 0.32, 1));
  --h-top-ease-out: var(--h-ease-out, cubic-bezier(0, 0, 0.5, 1));
  --h-top-ease-std: var(--h-ease-std, cubic-bezier(0.4, 0, 0.6, 1));
  --h-top-ease-sheet: var(--h-ease-sheet, cubic-bezier(0.32, 0.72, 0, 1));
  --h-top-spring: var(--h-spring, cubic-bezier(0.34, 1.3, 0.64, 1));
  --h-top-spring-dur: var(--h-spring-dur, 500ms);
  /* the island sits this far under the bar, or under the top edge once the bar has left */
  --h-top-y: var(--bar-h, 0px);
}
:root.h-top-away { --h-top-y: 0px; }

/* ══ ANNOUNCEMENT BAR ═══════════════════════════════════════════════════════
   A statement and a link. It is there from the first frame (no delayed drop that shoved
   the hero down 38px at 1.4s), it is exactly --bar-h tall, and it leaves when the page
   moves and comes back at the top. */
:root .site-bar.site-bar {
  height: 38px;
  gap: 1.1rem;
  padding: 0 3.25rem;
  background: var(--ink);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.5s var(--h-top-ease-sheet);
}
:root.h-top-away .site-bar.site-bar.visible { transform: translateY(-100%); }
:root .site-bar.site-bar .site-bar__text {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.74rem;
  letter-spacing: 0.01em;
}
:root .site-bar.site-bar .site-bar__text strong { color: #fff; letter-spacing: 0.05em; }
/* global.js wraps the line for a phone marquee; there is no marquee any more */
:root .site-bar.site-bar .site-bar__ticker { display: inline; padding-left: 0; animation: none; }

.site-bar__read {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 38px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--teal);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(50% + 0.62em);
  background-size: 0% 1px;
  transition: background-size 0.42s var(--h-top-ease), color 0.2s var(--h-top-ease-out);
}
.site-bar__read::after {
  content: '\2192';
  transition: translate var(--h-top-spring-dur) var(--h-top-spring);
}
@media (hover: hover) and (pointer: fine) {
  .site-bar__read:hover { color: #fff; background-size: calc(100% - 1.15em) 1px; }
  .site-bar__read:hover::after { translate: 3px 0; }
}
.site-bar__read:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

:root .site-bar.site-bar .site-bar__close {
  right: 0.6rem;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  transition: background-color 0.2s var(--h-top-ease-out), color 0.2s var(--h-top-ease-out), scale var(--h-top-spring-dur) var(--h-top-spring);
}
/* a 44px target round a 28px mark */
:root .site-bar.site-bar .site-bar__close::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  :root .site-bar.site-bar .site-bar__close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
}
:root .site-bar.site-bar .site-bar__close:active { scale: 0.9; transition-duration: 0.12s; }
:root .site-bar.site-bar .site-bar__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 640px) {
  :root .site-bar.site-bar { justify-content: flex-start; gap: 0.75rem; padding: 0 3rem 0 1rem; }
  :root .site-bar.site-bar .site-bar__text { flex: 0 1 auto; font-size: 0.74rem; }
  .h-top-bar-more { display: none; }
}

/* ══ THE ISLAND ═════════════════════════════════════════════════════════════ */
:root .nav.nav {
  /* light ground (the default) */
  --h-top-fg: var(--ink);
  --h-top-fg-2: rgba(11, 15, 46, 0.76);   /* 5.9:1 even where the navy tile shows through */
  --h-top-plate: rgba(11, 15, 46, 0.065);
  --h-top-plate-2: rgba(11, 15, 46, 0.1);
  --h-top-tint: rgba(250, 250, 252, 0.78);
  --h-top-lq-tint: rgba(250, 250, 252, 0.74);
  --h-top-menu-tint: rgba(252, 252, 253, 0.88);
  --h-top-menu-lq-tint: rgba(252, 252, 253, 0.74);
  --h-top-rim: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.4);
  --h-top-edge: 0 0 0 0.5px rgba(11, 15, 46, 0.14);
  --h-top-shadow: 0 1px 2px rgba(11, 15, 46, 0.06), 0 14px 34px -14px rgba(11, 15, 46, 0.34);
  --h-top-hair: rgba(11, 15, 46, 0.09);
  --h-top-cta-bg: var(--ink);
  --h-top-cta-bg-2: var(--h-ink-2, #1A1F52);
  --h-top-cta-fg: #fff;
  --h-top-focus: var(--teal-2);
  --h-top-logo: none;
  --h-top-sheen: 0.5;
  --h-top-gap: 12px;
  --h-top-h: 60px;
  --h-mx: 50%;
  --h-my: 0%;

  position: fixed;
  top: var(--h-top-gap);
  left: 0;
  right: 0;
  width: min(1240px, calc(100% - 32px));
  height: var(--h-top-h);
  margin-inline: auto;
  padding: 0 8px 0 20px;
  column-gap: 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  translate: 0 var(--h-top-y);
  animation: none;
  transition: translate 0.6s var(--h-top-ease-sheet);
}
/* dark ground: the hero photograph, the quote, books, video, the AXON band, the footer */
:root .nav.nav.h-top-dark,
:root .nav.nav.on-dark:not(.h-top-light) {
  --h-top-fg: #fff;
  --h-top-fg-2: rgba(255, 255, 255, 0.78);
  --h-top-plate: rgba(255, 255, 255, 0.12);
  --h-top-plate-2: rgba(255, 255, 255, 0.18);
  --h-top-tint: rgba(11, 15, 46, 0.56);
  --h-top-lq-tint: rgba(11, 15, 46, 0.5);
  --h-top-menu-tint: rgba(11, 15, 46, 0.8);
  --h-top-menu-lq-tint: rgba(11, 15, 46, 0.66);
  --h-top-rim: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  --h-top-edge: 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  --h-top-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 16px 38px -14px rgba(0, 0, 0, 0.62);
  --h-top-hair: rgba(255, 255, 255, 0.12);
  --h-top-cta-bg: #fff;
  --h-top-cta-bg-2: var(--bg-2);
  --h-top-cta-fg: var(--ink);
  --h-top-focus: #fff;
  --h-top-logo: brightness(0) invert(1);
  --h-top-sheen: 0.2;
}
/* the old full width bar's states: transparent, the island is the plate now */
:root .nav.nav.scrolled,
:root .nav.nav.on-dark { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* The glass plate (top.js puts it in as the nav's first child). A sibling under the
   content, so the nav itself never becomes a backdrop root and the Clinical panel inside
   it can still see the page. */
:root .nav.nav > .h-top-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  --h-shine: 0;
  background-color: var(--h-top-tint);
  background-image: radial-gradient(140px circle at var(--h-mx) var(--h-my), rgb(255 255 255 / calc(var(--h-shine) * var(--h-top-sheen))), transparent 70%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--h-top-rim), var(--h-top-edge), var(--h-top-shadow);
  transition: background-color 0.5s var(--h-top-ease), box-shadow 0.5s var(--h-top-ease), --h-shine 0.32s var(--h-top-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :root .nav.nav:hover > .h-top-glass { --h-shine: 1; }
}
/* refraction (base.js sets html.h-refract and .h-lq only where it built the lens) */
:root.h-refract .nav.nav > .h-top-glass.h-lq {
  background-color: var(--h-top-lq-tint);
  -webkit-backdrop-filter: var(--h-lq-url) blur(5px) saturate(175%) brightness(1.04);
  backdrop-filter: var(--h-lq-url) blur(5px) saturate(175%) brightness(1.04);
}
/* the old cursor spotlight: the glass has its own light now */
:root .nav.nav .nav__spotlight { display: none; }

/* ── logo ── */
:root .nav.nav .nav__logo { position: relative; z-index: 2; border-radius: 12px; transition: opacity 0.25s var(--h-top-ease-out); }
:root .nav.nav .nav__logo-img-clip { height: 40px; }
:root .nav.nav .nav__logo-img { height: 96px; margin-top: -17px; filter: var(--h-top-logo); transition: filter 0.3s var(--h-top-ease-std); }
:root .nav.nav .nav__logo:focus-visible { outline: 2px solid var(--h-top-focus); outline-offset: 4px; }

/* ── links ── */
:root .nav.nav .nav__links { gap: 0; position: relative; z-index: 2; }
:root .nav.nav .nav__links > li { opacity: 1; animation: none; }
:root .nav.nav .nav__links > li > a {
  position: relative;
  z-index: 1;
  height: 40px;
  padding: 0 0.85rem;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--h-top-fg-2);
  transform: none;
  transition: color 0.3s var(--h-top-ease-out);
}
:root .nav.nav .nav__links > li > a::after,
:root .nav.nav .nav__links > li > a::before { display: none; }
:root .nav.nav .nav__links > li > a:hover,
:root .nav.nav .nav__links > li > a:focus-visible,
:root .nav.nav .nav__links > li > a.active,
:root .nav.nav .nav__dropdown.h-top-open > a { color: var(--h-top-fg); letter-spacing: 0.09em; }
:root .nav.nav .nav__links > li > a:focus-visible { outline: 2px solid var(--h-top-focus); outline-offset: -2px; }
:root .nav.nav .nav__links > li > a[aria-current="page"] { color: var(--h-top-fg); }

/* The plate under the link you point at (the old .nav__hover-blob, unused till now). Its
   two edges are separate lengths: travelling right the right edge leaves first and the
   left one follows, so it stretches on the way and settles on arrival, like a drop. */
@property --h-top-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --h-top-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
:root .nav.nav .nav__hover-blob {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  width: calc(var(--h-top-r) - var(--h-top-l));
  height: 34px;
  margin-top: -17px;
  translate: var(--h-top-l) 0;
  border-radius: 999px;
  background: var(--h-top-plate);
  opacity: 0;
  pointer-events: none;
  transition: --h-top-l 0.42s var(--h-top-ease-sheet), --h-top-r 0.42s var(--h-top-ease-sheet), opacity 0.24s var(--h-top-ease-std), background-color 0.5s var(--h-top-ease);
}
:root .nav.nav .nav__hover-blob.h-top-on { opacity: 1; }
:root .nav.nav .nav__hover-blob.h-top-to-r { transition: --h-top-l 0.5s var(--h-top-ease-sheet), --h-top-r 0.3s var(--h-top-ease-sheet), opacity 0.24s var(--h-top-ease-std), background-color 0.5s var(--h-top-ease); }
:root .nav.nav .nav__hover-blob.h-top-to-l { transition: --h-top-l 0.3s var(--h-top-ease-sheet), --h-top-r 0.5s var(--h-top-ease-sheet), opacity 0.24s var(--h-top-ease-std), background-color 0.5s var(--h-top-ease); }
:root .nav.nav .nav__hover-blob.h-top-jump { transition: opacity 0.24s var(--h-top-ease-std), background-color 0.5s var(--h-top-ease); }

/* ── the Clinical trigger and its panel ── */
:root .nav.nav .nav__dropdown::before { left: -1rem; right: -1rem; height: 22px; }
:root .nav.nav .nav__dropdown-arrow {
  font-size: 0.5rem;
  opacity: 0.6;
  transform: none;
  transition: rotate 0.32s var(--h-top-ease-std), opacity 0.2s var(--h-top-ease-out);
}
:root .nav.nav .nav__dropdown.h-top-open .nav__dropdown-arrow { rotate: 180deg; opacity: 1; }

:root .nav.nav .nav__dropdown-menu {
  --h-shine: 0;
  top: calc(100% + 20px);
  width: 600px;
  padding: 10px;
  border: 0;
  border-radius: 24px;
  color: var(--h-top-fg);
  background-color: var(--h-top-menu-tint);
  background-image: radial-gradient(160px circle at var(--h-mx, 50%) var(--h-my, 0%), rgb(255 255 255 / calc(var(--h-shine) * var(--h-top-sheen) * 0.6)), transparent 70%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--h-top-rim), var(--h-top-edge), 0 2px 6px rgba(11, 15, 46, 0.08), 0 30px 70px -24px rgba(11, 15, 46, 0.45);
  transform-origin: 50% 0;
}
:root.h-refract .nav.nav .nav__dropdown-menu.h-lq {
  background-color: var(--h-top-menu-lq-tint);
  -webkit-backdrop-filter: var(--h-lq-url) blur(6px) saturate(175%) brightness(1.04);
  backdrop-filter: var(--h-lq-url) blur(6px) saturate(175%) brightness(1.04);
}
:root .nav.nav .nav__dropdown-menu::before { display: none; }

/* open and close are top.js's (hover with intent, click, keyboard); global's :hover rule
   still runs when there is no script */
:root.h-top-js .nav.nav .nav__dropdown .nav__dropdown-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px) scale(0.97);
  transition: opacity 0.2s var(--h-top-ease-std), transform 0.24s var(--h-top-ease-std), visibility 0s linear 0.24s, background-color 0.5s var(--h-top-ease), --h-shine 0.32s var(--h-top-ease-out);
}
:root.h-top-js .nav.nav .nav__dropdown.h-top-open .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%);
  transition: opacity 0.26s var(--h-top-ease-std), transform 0.5s var(--h-top-ease-sheet), visibility 0s, background-color 0.5s var(--h-top-ease), --h-shine 0.32s var(--h-top-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :root .nav.nav .nav__dropdown-menu:hover { --h-shine: 1; }
}
/* items come in after the panel: 20ms apart, the featured row one group later */
:root .nav.nav .nav__dropdown-menu li { opacity: 1; transform: none; }
:root.h-top-js .nav.nav .nav__dropdown .nav__dropdown-menu li {
  opacity: 0;
  translate: 0 -4px;
  transition: opacity 0.14s var(--h-top-ease-std), translate 0.14s var(--h-top-ease-std);
}
:root.h-top-js .nav.nav .nav__dropdown.h-top-open .nav__dropdown-menu li {
  opacity: 1;
  translate: none;
  transition: opacity 0.3s var(--h-top-ease-std) calc(60ms + var(--h-top-i, 0) * 20ms), translate 0.32s var(--h-top-ease-std) calc(60ms + var(--h-top-i, 0) * 20ms);
}

:root .nav.nav .nav__mega-grid { gap: 2px; margin-bottom: 6px; }
:root .nav.nav .nav__dropdown-menu a {
  display: block;
  height: auto;
  padding: 12px 14px;
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--h-top-fg);
  transform: none;
  transition: background-color 0.24s var(--h-top-ease-out), color 0.24s var(--h-top-ease-out);
}
:root .nav.nav .nav__dropdown-menu a:hover,
:root .nav.nav .nav__dropdown-menu a:focus-visible { background-color: var(--h-top-plate); color: var(--h-top-fg); transform: none; }
:root .nav.nav .nav__dropdown-menu a:active { background-color: var(--h-top-plate-2); }
:root .nav.nav .nav__dropdown-menu a:focus-visible { outline: 2px solid var(--h-top-focus); outline-offset: -2px; }
/* the row of generic outline icons goes; the words carry the menu */
:root .nav.nav .nav__dropdown-menu .menu-icon { display: none; }
:root .nav.nav .nav__dropdown-menu .menu-item-title {
  display: block;
  margin: 0 0 3px;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--h-top-fg);
}
:root .nav.nav .nav__dropdown-menu .menu-item-desc {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--h-top-fg-2);
}
:root .nav.nav .nav__mega-divider { height: 1px; margin: 0 14px 6px; background: var(--h-top-hair); }

/* The featured row: the label used to sit above the title in small capitals (an eyebrow).
   Now the title leads and the label is its line below, and the icon tile is a real
   photograph: Rod at the Mazor robot, the work the row is about. */
:root .nav.nav .nav__dropdown-menu .nav__mega-featured {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 8px 14px 8px 8px;
  border: 0;
  background: none;
}
:root .nav.nav .nav__dropdown-menu .nav__mega-featured:hover,
:root .nav.nav .nav__dropdown-menu .nav__mega-featured:focus-visible { background-color: var(--h-top-plate); }
:root .nav.nav .nav__mega-featured-icon {
  width: 96px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink) url("../../images/home/top/robotics-thumb.webp") center 30% / cover no-repeat;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 6px 14px -8px rgba(11, 15, 46, 0.5);
  transition: background-size 0.6s var(--h-top-ease), scale 0.5s var(--h-top-ease);
}
:root .nav.nav .nav__mega-featured-icon svg { display: none; }
@media (hover: hover) and (pointer: fine) {
  :root .nav.nav .nav__mega-featured:hover .nav__mega-featured-icon { scale: 1.03; }
}
:root .nav.nav .nav__mega-featured > span:last-child { display: flex; flex-direction: column-reverse; gap: 3px; }
:root .nav.nav .nav__mega-featured-title {
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--h-top-fg);
}
:root .nav.nav .nav__mega-featured-label {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--h-top-fg-2);
}

/* the page rests while a panel is open: a dim, no blur, so the glass still has something
   to bend */
:root.h-top-js .nav__page-overlay {
  top: 0;
  background: rgba(11, 15, 46, 0.16);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity 0.32s var(--h-top-ease-std);
}
:root.h-top-js .nav__page-overlay.active:not(.h-top-on) { opacity: 0; }
:root.h-top-js .nav__page-overlay.h-top-on { opacity: 1; }

/* ── right cluster: Substack, the share list, the one ask, the menu button ── */
:root .nav.nav .nav__logo { grid-column: 1; justify-self: start; }
:root .nav.nav .nav__right { grid-column: 3; position: relative; z-index: 2; gap: 4px; }
:root .nav.nav .nav__socials { gap: 2px; padding: 0 6px 0 0; border: 0; }
:root .nav.nav .nav__substack,
:root .nav.nav .nav__social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--h-top-fg-2);
  background: transparent;
  transform: none;
  transition: color 0.24s var(--h-top-ease-out), background-color 0.24s var(--h-top-ease-out), scale var(--h-top-spring-dur) var(--h-top-spring);
}
:root .nav.nav .nav__substack:hover,
:root .nav.nav .nav__substack:focus-visible { color: var(--sbstk-deep, #E4550C); background: var(--h-top-plate); transform: none; }
:root .nav.nav.h-top-dark .nav__substack:hover,
:root .nav.nav.h-top-dark .nav__substack:focus-visible { color: var(--sbstk, #FF6719); }
:root .nav.nav .nav__social-icon:hover,
:root .nav.nav .nav__social-drop.h-top-open .nav__social-icon { color: var(--h-top-fg); background: var(--h-top-plate); transform: none; }
:root .nav.nav .nav__substack:active,
:root .nav.nav .nav__social-icon:active { scale: 0.92; transition-duration: 0.12s; }
:root .nav.nav .nav__substack:focus-visible,
:root .nav.nav .nav__social-icon:focus-visible { outline: 2px solid var(--h-top-focus); outline-offset: 1px; }

/* the share list: a small frosted sheet under the island (frosted, the refraction budget
   is the island and the Clinical panel) */
:root .nav.nav .nav__social-drop::before { top: 100%; height: 22px; }
:root .nav.nav .nav__social-panel {
  top: calc(100% + 20px);
  right: -6px;
  min-width: 200px;
  padding: 8px;
  border: 0;
  border-radius: 22px;
  background: var(--h-top-menu-tint);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--h-top-rim), var(--h-top-edge), 0 2px 6px rgba(11, 15, 46, 0.08), 0 24px 56px -20px rgba(11, 15, 46, 0.45);
  transform-origin: 85% 0;
}
:root .nav.nav .nav__social-panel::before { display: none; }
:root.h-top-js .nav.nav .nav__social-drop .nav__social-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transition: opacity 0.2s var(--h-top-ease-std), transform 0.24s var(--h-top-ease-std), visibility 0s linear 0.24s, background-color 0.5s var(--h-top-ease);
}
:root.h-top-js .nav.nav .nav__social-drop.h-top-open .nav__social-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.26s var(--h-top-ease-std), transform 0.5s var(--h-top-ease-sheet), visibility 0s, background-color 0.5s var(--h-top-ease);
}
:root .nav.nav .nav__social-panel a {
  min-height: 44px;
  padding: 0 12px 0 8px;
  gap: 10px;
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--h-top-fg);
  opacity: 1;
  transform: none;
  transition: background-color 0.2s var(--h-top-ease-out);
}
:root.h-top-js .nav.nav .nav__social-drop .nav__social-panel a { opacity: 0; translate: 0 -4px; transition: opacity 0.14s var(--h-top-ease-std), translate 0.14s var(--h-top-ease-std), background-color 0.2s var(--h-top-ease-out); }
:root.h-top-js .nav.nav .nav__social-drop.h-top-open .nav__social-panel a {
  opacity: 1;
  translate: none;
  transition: opacity 0.3s var(--h-top-ease-std) calc(50ms + var(--h-top-i, 0) * 20ms), translate 0.32s var(--h-top-ease-std) calc(50ms + var(--h-top-i, 0) * 20ms), background-color 0.2s var(--h-top-ease-out);
}
:root .nav.nav .nav__social-panel a:hover,
:root .nav.nav .nav__social-panel a:focus-visible { background: var(--h-top-plate); color: var(--h-top-fg); }
:root .nav.nav .nav__social-panel a:focus-visible { outline: 2px solid var(--h-top-focus); outline-offset: -2px; }
:root .nav.nav .nav__social-panel .menu-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--h-top-plate);
  color: var(--h-top-fg-2);
}
:root .nav.nav .nav__social-panel a:hover .menu-icon { background: var(--h-top-plate-2); color: var(--h-top-fg); }

/* the one ask: a pill that answers a press, and nothing that loops */
:root .nav.nav .nav__cta {
  height: 44px;
  padding: 0 1.15rem 0 1.3rem;
  gap: 0.5rem;
  border-radius: 999px;
  background: var(--h-top-cta-bg);
  color: var(--h-top-cta-fg);
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(11, 15, 46, 0.2), 0 8px 20px -10px rgba(11, 15, 46, 0.55);
  animation: none;
  transform: none;
  /* the pill inverts when the ground changes: fast, so its label is never grey on grey */
  transition: background-color 0.2s var(--h-top-ease-std), color 0.2s var(--h-top-ease-std), box-shadow 0.32s var(--h-top-ease-out), scale var(--h-top-spring-dur) var(--h-top-spring);
}
:root .nav.nav .nav__cta::before { display: none; }
:root .nav.nav .nav__cta::after { font-size: 0.85rem; transition: translate var(--h-top-spring-dur) var(--h-top-spring); transform: none; }
@media (hover: hover) and (pointer: fine) {
  :root .nav.nav .nav__cta:hover { background: var(--h-top-cta-bg-2); letter-spacing: 0.09em; transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 5px rgba(11, 15, 46, 0.2), 0 14px 30px -12px rgba(11, 15, 46, 0.6); }
  :root .nav.nav .nav__cta:hover::after { translate: 3px 0; transform: none; }
}
:root .nav.nav .nav__cta:active { scale: 0.97; transform: none; transition-duration: 0.12s; }
:root .nav.nav .nav__cta:focus-visible { outline: 2px solid var(--h-top-focus); outline-offset: 3px; }

/* the menu button: two lines that become a cross */
:root .nav.nav .nav__burger {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.24s var(--h-top-ease-out), scale var(--h-top-spring-dur) var(--h-top-spring);
}
:root .nav.nav .nav__burger span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.75px;
  border-radius: 2px;
  background: var(--h-top-fg);
  transition: transform 0.42s var(--h-top-ease-sheet), background-color 0.5s var(--h-top-ease), opacity 0.2s;
}
:root .nav.nav .nav__burger span:nth-child(1) { transform: translateY(-3.5px); }
:root .nav.nav .nav__burger span:nth-child(2) { opacity: 0; }
:root .nav.nav .nav__burger span:nth-child(3) { transform: translateY(3.5px); }
:root .nav.nav .nav__burger.open span:nth-child(1) { transform: rotate(45deg); }
:root .nav.nav .nav__burger.open span:nth-child(3) { transform: rotate(-45deg); }
:root .nav.nav .nav__burger:hover { background: var(--h-top-plate); }
:root .nav.nav .nav__burger:active { scale: 0.92; transition-duration: 0.12s; }
:root .nav.nav .nav__burger:focus-visible { outline: 2px solid var(--h-top-focus); outline-offset: 1px; }

/* reading progress: a hairline inside the island's lower edge, no glowing dot */
:root .nav.nav .nav__progress-wrap { left: 30px; right: 30px; bottom: 0; height: 1.5px; border-radius: 2px; overflow: hidden; }
:root .nav.nav .nav__progress-fill { background: var(--teal); opacity: 0.85; }
:root .nav.nav .nav__progress-fill::after { display: none; }

/* ── widths: the full island needs about 1200px; below that the links move into the
   sheet (the old bar crushed the logo under the links at 1024 and 1180) ── */
@media (max-width: 1339px) {
  :root .nav.nav .nav__links > li > a { padding: 0 0.6rem; }
}
@media (max-width: 1199px) {
  :root .nav.nav .nav__links { display: none; }
  :root .nav.nav .nav__burger { display: flex; }
}
@media (max-width: 900px) {
  :root .nav.nav {
    --h-top-gap: 10px;
    --h-top-h: 56px;
    width: calc(100% - 24px);
    padding: 0 6px 0 18px;
  }
  :root .nav.nav .nav__progress-wrap { left: 28px; right: 28px; }
}

/* ══ THE PHONE SHEET ════════════════════════════════════════════════════════
   An iOS sheet from the bottom edge, in the menu's own dark ground: a grabber, the six
   main pages as big rows, the four others as a quieter pair of rows, then the socials.
   Drag it down, press Escape, tap the dimmed page or the cross to close. top.js locks the
   page under it, keeps focus inside it and gives focus back to the menu button. */
:root .mobile-nav.mobile-nav {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 610;
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 8px;
  align-content: start;
  justify-content: stretch;
  padding: 50px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 28px 28px 0 0;
  color: #fff;
  background: rgba(11, 15, 46, 0.97);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 -24px 60px -24px rgba(0, 0, 0, 0.55);
  transform: none;
  translate: 0 calc(100% + 32px);
  visibility: hidden;
  transition: translate 0.5s var(--h-top-ease-sheet), visibility 0s linear 0.5s;
  counter-reset: none;
}
:root .mobile-nav.mobile-nav.open {
  translate: 0 var(--h-top-dy, 0px);
  visibility: visible;
  transition: translate 0.5s var(--h-top-ease-sheet), visibility 0s;
}
:root .mobile-nav.mobile-nav.h-top-drag { transition: none; }
:root .mobile-nav.mobile-nav:focus { outline: none; }
/* the grabber replaces the old grid texture; the glow blob, the scan line, the numbers
   and the giant background word all go */
:root .mobile-nav.mobile-nav::before {
  content: '';
  position: absolute;
  inset: 8px auto auto 50%;
  width: 38px;
  height: 5px;
  margin-left: -19px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.32);
  background-image: none;
}
:root .mobile-nav.mobile-nav::after,
:root .mobile-nav.mobile-nav .mobile-nav__scan,
:root .mobile-nav.mobile-nav .mobile-nav__bg-text { display: none; }

:root .mobile-nav.mobile-nav .mobile-nav__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s var(--h-top-ease-out), scale var(--h-top-spring-dur) var(--h-top-spring);
}
:root .mobile-nav.mobile-nav .mobile-nav__close::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
:root .mobile-nav.mobile-nav .mobile-nav__close:hover { background: rgba(255, 255, 255, 0.2); border-color: transparent; }
:root .mobile-nav.mobile-nav .mobile-nav__close:active { scale: 0.9; transition-duration: 0.12s; }
:root .mobile-nav.mobile-nav .mobile-nav__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* the six main pages */
:root .mobile-nav.mobile-nav > a {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0 6px 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.94);
  text-decoration: none;
  filter: none;
  transform: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.18s var(--h-top-ease-std), translate 0.18s var(--h-top-ease-std), color 0.2s var(--h-top-ease-out), background-color 0.2s var(--h-top-ease-out);
}
:root .mobile-nav.mobile-nav.open > a {
  opacity: 1;
  translate: none;
  transform: none;
  transition: opacity 0.4s var(--h-top-ease) calc(90ms + var(--h-top-i, 0) * 28ms), translate 0.55s var(--h-top-ease-sheet) calc(90ms + var(--h-top-i, 0) * 28ms), color 0.2s var(--h-top-ease-out), background-color 0.2s var(--h-top-ease-out);
}
:root .mobile-nav.mobile-nav > a::before { content: none; display: none; }
:root .mobile-nav.mobile-nav > a::after {
  content: '\2192';
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transform: none;
  transition: translate var(--h-top-spring-dur) var(--h-top-spring), color 0.2s var(--h-top-ease-out);
}
:root .mobile-nav.mobile-nav > a:hover,
:root .mobile-nav.mobile-nav > a:active { color: #fff; }
/* a press answers under the finger: the row takes a faint plate */
:root .mobile-nav.mobile-nav > a:active { background-color: rgba(255, 255, 255, 0.06); border-radius: 12px; transition-duration: 0.08s; }
:root .mobile-nav.mobile-nav > a:active::after,
:root .mobile-nav.mobile-nav > a:hover::after { translate: 4px 0; color: var(--teal); opacity: 1; transform: none; }
:root .mobile-nav.mobile-nav > a.active,
:root .mobile-nav.mobile-nav > a[aria-current="page"] { color: var(--teal); }
:root .mobile-nav.mobile-nav > a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 10px; }
:root .mobile-nav.mobile-nav > a:last-of-type { border-bottom: 0; }

/* the four other pages: a quieter pair of rows, still 48px to tap */
:root .mobile-nav.mobile-nav > a:nth-of-type(n+7) {
  grid-column: auto;
  min-height: 48px;
  margin-top: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.86);
}
:root .mobile-nav.mobile-nav > a:nth-of-type(7),
:root .mobile-nav.mobile-nav > a:nth-of-type(8) { margin-top: 18px; }
:root .mobile-nav.mobile-nav > a:nth-of-type(n+7)::after { font-size: 0.85rem; }
:root .mobile-nav.mobile-nav > a:nth-of-type(n+7):active { background: rgba(255, 255, 255, 0.13); }

:root .mobile-nav.mobile-nav .mobile-nav__footer {
  grid-column: 1 / -1;
  position: static;
  margin-top: 22px;
  padding-top: 0;
  opacity: 0;
  transition: opacity 0.18s var(--h-top-ease-std);
}
:root .mobile-nav.mobile-nav.open .mobile-nav__footer { opacity: 1; transition: opacity 0.5s var(--h-top-ease) 0.4s; }
:root .mobile-nav.mobile-nav .mobile-nav__tagline {
  display: block;
  margin: 0 0 12px 4px;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.66);
}
:root .mobile-nav.mobile-nav .mobile-nav__social-row { flex-wrap: wrap; gap: 6px; }
:root .mobile-nav.mobile-nav .mobile-nav__social-row a {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  opacity: 1 !important;
  transition: background-color 0.2s, color 0.2s !important;
  transition-delay: 0s !important;
}
:root .mobile-nav.mobile-nav .mobile-nav__social-row a svg { width: 16px; height: 16px; }
:root .mobile-nav.mobile-nav .mobile-nav__social-row a:hover,
:root .mobile-nav.mobile-nav .mobile-nav__social-row a:active { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; }
:root .mobile-nav.mobile-nav .mobile-nav__social-row a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* wider than a phone (the links are in the sheet up to 1199px): a centred card */
@media (min-width: 600px) {
  :root .mobile-nav.mobile-nav {
    bottom: 16px;
    width: min(540px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 28px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 80px -24px rgba(0, 0, 0, 0.6);
  }
}

/* the dimmed page under the sheet; tap it to close */
.h-top-scrim {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(11, 15, 46, 0.46);
  opacity: 0;
  visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.42s var(--h-top-ease-std), visibility 0s linear 0.42s;
}
.h-top-scrim.h-top-on { opacity: var(--h-top-scrim, 1); visibility: visible; transition: opacity 0.42s var(--h-top-ease), visibility 0s; }
.h-top-scrim.h-top-drag { transition: none; }
/* the page holds still under the sheet, and keeps its width (no scrollbar jump) */
:root.h-top-lock { overflow: hidden; }
:root.h-top-lock.h-top-gutter { scrollbar-gutter: stable; }   /* only where a classic scrollbar was there */

/* the first frame: no transitions while top.js settles the ground and the bar */
:root.h-top-init .nav,
:root.h-top-init .nav *,
:root.h-top-init .site-bar,
:root.h-top-init .mobile-nav { transition: none !important; }

/* ══ ACCESS ═════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root .nav.nav,
  :root .nav.nav *,
  :root .site-bar.site-bar,
  :root .site-bar.site-bar *,
  :root .mobile-nav.mobile-nav,
  :root .mobile-nav.mobile-nav *,
  .h-top-scrim,
  .nav__page-overlay { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .site-bar__read:hover::after,
  :root .mobile-nav.mobile-nav > a:hover::after { translate: none; }
}
/* less transparency or more contrast: solid surfaces, same colours */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root .nav.nav { --h-top-tint: rgba(255, 255, 255, 0.97); --h-top-menu-tint: #fff; }
  :root .nav.nav.h-top-dark,
  :root .nav.nav.on-dark:not(.h-top-light) { --h-top-tint: rgba(11, 15, 46, 0.96); --h-top-menu-tint: var(--ink); }
  :root .nav.nav > .h-top-glass,
  :root.h-refract .nav.nav > .h-top-glass.h-lq,
  :root .nav.nav .nav__dropdown-menu,
  :root.h-refract .nav.nav .nav__dropdown-menu.h-lq,
  :root .nav.nav .nav__social-panel {
    background-color: var(--h-top-tint);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root .nav.nav .nav__dropdown-menu,
  :root.h-refract .nav.nav .nav__dropdown-menu.h-lq,
  :root .nav.nav .nav__social-panel { background-color: var(--h-top-menu-tint); }
  :root .mobile-nav.mobile-nav { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* no blur support: Apple's own near solid value */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root .nav.nav { --h-top-tint: rgba(250, 250, 252, 0.94); --h-top-menu-tint: #fff; }
  :root .nav.nav.h-top-dark,
  :root .nav.nav.on-dark:not(.h-top-light) { --h-top-tint: rgba(11, 15, 46, 0.94); --h-top-menu-tint: var(--ink); }
  :root .mobile-nav.mobile-nav { background: var(--ink); }
}
@media (forced-colors: active) {
  :root .nav.nav > .h-top-glass,
  :root .nav.nav .nav__dropdown-menu,
  :root .nav.nav .nav__social-panel,
  :root .mobile-nav.mobile-nav { border: 1px solid CanvasText; }
  :root .nav.nav .nav__hover-blob { display: none; }
}
@media print {
  :root .nav.nav, .site-bar, .mobile-nav, .h-top-scrim { display: none !important; }
}