/* ============================================================
   Page shell: masthead, hero, partner band, marquees.
   Loaded after home.css so it wins on equal specificity.
   Nothing here touches the grids -- those keep their existing
   rules so every renderer output still looks the same.
   ============================================================ */

:root{--ink:#071b14;--ink2:#0a241b;--ink3:#12352a;--line:#1d4133;--line2:#3a5546;
      --paper:#f3f0e7;--dim:#8fa3b5;--dim2:#6f8494;--gold:#f4b547;}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);
     font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{color:inherit}
.ticker{background:#04120c;border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:9px 0}
.ticker span{display:inline-block;font-size:12px;color:var(--dim);animation:slide 42s linear infinite}
@keyframes slide{from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
.ticker b{color:var(--gold);font-weight:600}
.tile:hover{border-color:var(--gold)}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--dim2);font-size:12px}
.nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:42px;height:42px;border-radius:50%;border:2px solid var(--gold);flex:0 0 auto;
      display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:19px}
.navlinks{display:flex;gap:19px;flex-wrap:wrap;flex:1;justify-content:center}
.navlinks a{font-size:13.5px;color:var(--dim);text-decoration:none}
.navlinks a:hover,.navlinks a.on{color:var(--paper)}
.guide{background:var(--gold);color:#071420;border-radius:8px;padding:9px 16px;font-size:12px;
       font-weight:700;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.hero{padding:64px 0 56px;background:linear-gradient(160deg,#0b2233 0%,#08281f 55%,var(--ink) 100%)}
.herogrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:44px;align-items:center}
.heroeye{margin:0 0 20px;font-size:11.5px;letter-spacing:.2em;color:var(--gold)}
.heroeye::before{content:"";display:inline-block;width:26px;height:1px;background:var(--gold);
                 vertical-align:middle;margin-right:12px}
.hero h2{margin:0;font-size:clamp(44px,7vw,86px);line-height:.94;font-weight:800;letter-spacing:-.02em}
.hero h2 em{font-style:normal;color:var(--gold)}
.herocopy{margin:26px 0 0;font-size:15.5px;color:var(--dim);max-width:56ch;line-height:1.75}
.herocopy b{color:var(--paper)}
.herobtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.regcard{background:rgba(10,36,27,.78);border:1px solid var(--line2);border-radius:16px;padding:26px}
.regcard h3{margin:0 0 20px;text-align:center;font-size:19px;letter-spacing:.04em}
.regstats{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;text-align:center}
.regstats .n{font-size:27px;font-weight:700;line-height:1.1}
.regstats .l{font-size:12.5px;color:var(--dim);margin-top:3px}
.partner{display:block;text-decoration:none;border:1px solid var(--gold);border-radius:14px;
         padding:26px 30px;margin:0 0 8px;position:relative;overflow:hidden;
         background:radial-gradient(circle at 88% 50%,rgba(244,181,71,.14),transparent 62%),var(--ink2)}
.partner:hover{border-color:#ffd47e}
.partner .pbg{position:absolute;right:-16px;top:50%;transform:translateY(-50%);width:190px;height:190px;
              opacity:.13;pointer-events:none}
.partner .pbg svg{width:100%;height:100%}
.partner p{margin:0;font-size:14.5px;color:var(--dim);line-height:1.7;max-width:70ch;position:relative}
.partner b{color:var(--gold)}
.partner .go{color:var(--gold);white-space:nowrap}
@media(max-width:860px){.herogrid{grid-template-columns:1fr}
.navlinks{justify-content:flex-start}
}
.logowall{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;margin:0 0 20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logotrack{display:flex;gap:14px;width:max-content;animation:lscroll 58s linear infinite}
.logowall.is-paused .logotrack{animation-play-state:paused}
@keyframes lscroll{from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
.logochip{width:60px;height:60px;border-radius:14px;background:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.logochip img{width:44px;height:44px;object-fit:contain}
.rail{overflow:hidden;margin:0 0 20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.railtrack{display:flex;gap:16px;width:max-content;animation:rscroll 46s linear infinite}
.rail.is-paused .railtrack{animation-play-state:paused}
.rail.rev .railtrack{animation-direction:reverse}
@keyframes rscroll{from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
.railface{width:72px;text-align:center;flex:0 0 auto}
.railface img,.railface .ph{width:56px;height:56px;border-radius:50%;object-fit:cover;
  background:var(--ink3);color:var(--gold);font-weight:700;display:flex;
  align-items:center;justify-content:center;margin:0 auto 5px}
.railface span{font-size:10px;color:var(--dim2);display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.marqhint{font-size:10.5px;color:var(--dim2);opacity:.7;margin:-10px 0 18px}
.ticker,.logowall,.rail{cursor:pointer}
.ticker.is-paused span{animation-play-state:paused}
@media(max-width:760px){
  .wrap{padding:0 16px}
.navlinks{order:3;width:100%;justify-content:flex-start;gap:14px;overflow-x:auto;padding-bottom:4px}
.navlinks a{white-space:nowrap}
.guide{margin-left:auto;font-size:11px;padding:8px 12px}
.hero{padding:36px 0 32px}
.hero h2{font-size:clamp(36px,12vw,52px)}
.herogrid{gap:24px}
.regstats .n{font-size:22px}
.pillrow::-webkit-scrollbar{display:none}
.partner{padding:20px 18px}
.partner .pbg{width:130px;right:-30px;opacity:.09}
}

/* ---- Masthead ---------------------------------------------------- */
.site-top{position:sticky;top:0;z-index:60;padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(7,27,20,.94);backdrop-filter:blur(8px)}
.site-top .nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand .mark{width:42px;height:42px;flex:0 0 auto}
.brand-name{display:block;font-size:19px;font-weight:800;letter-spacing:.03em}
.brand-sub{display:block;font-size:9.5px;letter-spacing:.12em;color:var(--paper-dim)}
.navlinks{display:flex;gap:19px;flex-wrap:wrap;flex:1;justify-content:center}
.navlinks a{font-size:13.5px;color:var(--paper-dim);text-decoration:none}
.navlinks a:hover,.navlinks a.on{color:var(--paper)}
.guide{background:var(--gold);color:#071420;border-radius:8px;padding:9px 16px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.guide:hover{background:#ffd47e}

/* ---- Hero -------------------------------------------------------- */
.hero-band{padding:64px 0 56px;
  background:linear-gradient(160deg,#0b2233 0%,#08281f 55%,transparent 100%)}
.herogrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:44px;align-items:center}
.heroeye{margin:0 0 20px;font-size:11.5px;letter-spacing:.2em;color:var(--gold)}
.heroeye::before{content:"";display:inline-block;width:26px;height:1px;
  background:var(--gold);vertical-align:middle;margin-right:12px}
.hero-title{margin:0;font-size:clamp(44px,7vw,86px);line-height:.94;
  font-weight:800;letter-spacing:-.02em}
.hero-title em{font-style:normal;color:var(--gold)}
.herocopy{margin:26px 0 0;font-size:15.5px;color:var(--paper-dim);
  max-width:56ch;line-height:1.75}
.herobtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.regcard{background:rgba(10,36,27,.78);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:26px}
.regcard-title{margin:0 0 20px;text-align:center;font-size:19px;letter-spacing:.04em}
.regstats{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;text-align:center}
.regstats .n{font-size:27px;font-weight:700;line-height:1.1}
.regstats .l{font-size:12.5px;color:var(--paper-dim);margin-top:3px}

/* ---- Contactipedia band ------------------------------------------ */
.partner-wrap{padding-top:28px}
.partner{display:block;text-decoration:none;border:1px solid var(--gold);
  border-radius:14px;padding:26px 30px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 88% 50%,rgba(244,181,71,.14),transparent 62%),
             rgba(10,36,27,.72)}
.partner:hover{border-color:#ffd47e}
.partner .pbg{position:absolute;right:-16px;top:50%;transform:translateY(-50%);
  width:190px;height:190px;opacity:.13;pointer-events:none}
.partner .pbg svg{width:100%;height:100%}
.partner p{margin:0;font-size:14.5px;color:var(--paper-dim);line-height:1.7;
  max-width:70ch;position:relative}
.partner b{color:var(--gold)}
.partner .go{color:var(--gold);white-space:nowrap}

@media(max-width:860px){
  .herogrid{grid-template-columns:1fr;gap:26px}
  .navlinks{justify-content:flex-start;order:3;width:100%;overflow-x:auto;
    gap:14px;padding-bottom:4px;scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{white-space:nowrap}
  .guide{margin-left:auto;font-size:11px;padding:8px 12px}
  .site-top{position:sticky;top:0}
  .hero-band{padding:34px 0 30px}
  .hero-title{font-size:clamp(36px,12vw,54px)}
  .regcard{padding:20px}
  .regstats .n{font-size:22px}
  .partner{padding:20px 18px}
  .partner .pbg{width:130px;right:-30px;opacity:.09}
}

/* ---- Frozen chrome ------------------------------------------------
   The masthead was already sticky, but the jump pills were not, so they
   scrolled away and the current-section highlight went with them. Both
   now freeze, pills sitting directly under the masthead. */

.pills-band {
  position: sticky;
  top: 68px;
  z-index: 55;
  padding: 12px 0;
  background: rgba(7, 27, 20, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The ticker is a band in its own right, not a transparent strip. */
.ticker-bar {
  background: #04120c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 9px 0;
}

/* Anchors must clear both frozen bars, or a jump lands under them. */
.sec-rule { scroll-margin-top: 140px; }

@media (max-width: 860px) {
  .pills-band {
    top: 0;
    padding: 10px 0;
  }
  .sec-rule { scroll-margin-top: 72px; }
}


/* ---- Palette -------------------------------------------------------
   The mockup's darker, less saturated ground. The site previously used a
   green felt (--ink: #022818) with a lit gradient over it; that read as a
   card table rather than a registry. To go back, delete this block --
   nothing else depends on it. */

body.page-home {
  --ink: #071b14;
  --felt-edge: #071b14;
  --felt-deep: #0a241b;
  --felt-mid: #12352a;
  --felt-bright: #1d4133;
  background: #071b14;
}

body.page-home::before { opacity: .35; }

/* The band is the frozen element; the pills stay centred inside it. */
.pills-band {
  position: sticky;
  top: 68px;
  z-index: 55;
  padding: 12px 0;
  background: rgba(7, 27, 20, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#home-section-jump-pills { position: static; background: none; padding: 0; border: 0; }

/* ---- Palette ------------------------------------------------------
   Matching the mockup: a darker, less saturated green than the felt
   theme. Revert by deleting this block -- home.css still holds the
   original values. */
body.page-home {
  --ink: #071b14;
  --ink-2: #0a241b;
  --felt-edge: #071b14;
  --felt-deep: #0d2a1f;
  background: #071b14;
}

body.page-home::before { opacity: .35; }

@media (max-width: 860px) {
  /* The masthead stays frozen on phones too, so the pills band sits
     beneath it rather than at the top of the viewport. */
  .site-top { position: sticky; top: 0; }
  .pills-band { top: 58px; padding: 9px 0; }
  .sec-rule { scroll-margin-top: 118px; }
}

/* ---- Rails and logo wall scroll on their own ---------------------- */
.section-visual-rail.is-marquee,
.logo-wall.is-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.is-marquee .marquee-inner {
  display: flex;
  width: max-content;
  animation: wwb-marquee 52s linear infinite;
}

.logo-wall.is-marquee .marquee-inner { animation-duration: 64s; }

.is-marquee:nth-of-type(even) .marquee-inner { animation-direction: reverse; }

.is-marquee.is-paused .marquee-inner,
.is-marquee:hover .marquee-inner { animation-play-state: paused; }

@keyframes wwb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .is-marquee .marquee-inner { animation: none; }
  .section-visual-rail.is-marquee,
  .logo-wall.is-marquee { overflow-x: auto; }
}

/* ---- Current section in the frozen pills --------------------------
   home.css styles .section-jump-pill after styles.css, so the highlight
   set there never showed: the class was applied but computed to a
   transparent background. Defined here, loaded last, so it wins. */

.pills-band .section-jump-pill.is-current,
#home-section-jump-pills .section-jump-pill.is-current,
a.section-jump-pill.is-current {
  background: var(--gold, #f4b547);
  border-color: var(--gold, #f4b547);
  color: #071420;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(244, 181, 71, 0.35);
}

.pills-band .section-jump-pill.is-current .pill-ico,
a.section-jump-pill.is-current .pill-ico { color: #071420; }


/* ---- Why the masthead would not stay frozen on a phone -------------
   styles.css and home.css both set `html, body { overflow-x: hidden }`.
   An overflow value other than visible on an ancestor silently turns off
   position: sticky in mobile browsers -- the element just scrolls away
   with no warning. Clip does the same job (stops sideways scrolling)
   without breaking sticky descendants.                                */

html, body {
  overflow-x: clip;
  overflow-y: visible;
}

/* Older engines that do not know `clip` keep the old behaviour rather
   than losing the horizontal guard entirely. */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
  .site-top { position: fixed; left: 0; right: 0; top: 0; }
  body.page-home { padding-top: 72px; }
}

.site-top { position: sticky; top: 0; z-index: 60; }


/* ---- Pill icons -----------------------------------------------------
   The glyphs are inline SVG now, not characters, so they need a box rather
   than a font-size. Drawn at 14px on a 16 grid; currentColor carries the
   gold, and the dark-on-gold rule above it still applies because the stroke
   inherits.                                                              */

.section-jump-pill .pill-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  font-size: 0;            /* kills the descender gap the old glyph needed */
  vertical-align: -2px;
  opacity: 0.92;
  flex: 0 0 auto;
}

.section-jump-pill .pill-ico svg { display: block; width: 14px; height: 14px; }
.section-jump-pill:hover .pill-ico { opacity: 1; }
.section-jump-pill.is-current .pill-ico { opacity: 1; }


/* ---- Which section am I on -----------------------------------------
   On a phone the pill strip is wider than the screen, so the gold pill is
   often scrolled out of sight. This names the current section in words
   directly under the pills, where it cannot scroll away. Desktop has room
   to show the gold pill itself, so it is hidden there.                  */

.section-readout { display: none; }

@media (max-width: 860px) {
  .section-readout {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(244, 181, 71, 0.22);
    color: var(--gold, #f4b547);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    min-height: 15px;
  }

  .section-readout-ico {
    display: inline-flex;
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
  }

  .section-readout-ico svg { display: block; width: 13px; height: 13px; }

  .section-readout-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* The current pill reads harder on a small screen, where it competes with
   everything either side of it. */
@media (max-width: 860px) {
  .pills-band .section-jump-pill.is-current,
  a.section-jump-pill.is-current {
    box-shadow: 0 0 0 2px rgba(244, 181, 71, 0.3), 0 2px 10px rgba(244, 181, 71, 0.25);
  }
}

/* ---- The pill strip on a phone -------------------------------------
   It wrapped onto four rows -- 254px of an 844px screen, all of it stuck to
   the top. One swipeable line instead, with the current section named
   underneath it.

   styles.css sets this with `body.page-home .home-section-jump` and home.css
   repeats it, so a plain `.pills-band .division-pills` lost the cascade even
   from the last stylesheet. The body class is carried here to outrank both.
   The "All sections" button still unwraps the full grid.                 */

@media (max-width: 860px) {
  body.page-home .pills-band .home-section-jump,
  body .pills-band .home-section-jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    /* Snap was pulling the strip back to the nearest pill edge, which
       overrode the position the scroll-spy had just set and left the
       current pill clipped by about 55px. */
    scroll-snap-type: none;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 0 0 2px;
  }

  body .pills-band .home-section-jump::-webkit-scrollbar { display: none; }

  body .pills-band .home-section-jump .section-jump-pill { flex: 0 0 auto; }

  /* the toggle still opens the full grid */
  body.page-home .home-section-nav.is-open .pills-band .home-section-jump,
  body .pills-band.is-open .home-section-jump {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
  }
}


/* ---- Why the pills were invisible on a phone -----------------------
   .site-top wraps brand + 8 nav links + the CTA, which on a 390px screen
   stacked to 308px -- 36% of the viewport. .pills-band sticks at top:58px
   and sits at z-index 55 against the masthead's 60, so the pill strip was
   parked UNDERNEATH the masthead and never visible while scrolling.

   Two halves: the masthead is put on one line here, and section-format.js
   measures whatever height it ends up with and feeds it back as
   --sticky-top, so the band always lands just below it.                 */

:root { --sticky-top: 68px; }

.pills-band { top: var(--sticky-top); }
.sec-rule { scroll-margin-top: calc(var(--sticky-top) + 72px); }

@media (max-width: 860px) {
  .site-top { padding: 9px 0; }

  .site-top .nav {
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
  }

  .site-top .brand { flex: 0 0 auto; }
  .site-top .brand .mark { width: 30px; height: 30px; }
  .site-top .brand-name { font-size: 15px; }
  .site-top .brand-sub { display: none; }

  /* the links keep their own line and swipe sideways, rather than
     stacking the masthead four rows deep */
  .site-top .navlinks {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    gap: 14px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .site-top .navlinks::-webkit-scrollbar { display: none; }
  .site-top .navlinks a { white-space: nowrap; font-size: 12.5px; }

  .site-top .guide {
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 10px;
  }
}