/* ==========================================================================
   Zucker Institute for Innovation Commercialization, homepage refresh
   Staging build for client review. Palette and type taken from the live site.
   ========================================================================== */

:root {
  --navy: #0C2A46;
  --navy-mid: #153D61;
  --navy-deep: #071C30;
  --teal: #2E9FB6;
  --teal-ink: #1B7488;   /* AA on white: 5.38:1 */
  --teal-bright: #4FBBD0;
  --ink: #222222;
  --body: #3F4A55;
  --line: #DCE3EA;
  --white: #FFFFFF;
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 56px);
  --r: 2px;
  /* Card face for panels that sit on a navy band. Solid, not translucent, so
     the type stays legible, but stepped back from pure white: on navy-mid a
     #fff panel glares. Checked 2026-09-22: every text color used on this
     face clears WCAG 2.1 AA (teal-ink, the tightest, is 4.69:1). */
  --card: #EAF0F6;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Lato", "Roboto", Arial, sans-serif;
  color: var(--navy);
  line-height: 1.12;
  margin: 0 0 .6em;
  font-weight: 900;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.1em; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-ink); }
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--teal-bright);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: var(--r);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-teal { background: var(--teal-ink); color: #fff; }
.btn-teal:hover, .btn-teal:focus-visible { background: #14606f; }
.btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: #fff; color: var(--navy); }
.btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--navy); color: #fff; }

/* ---------- Header ------------------------------------------------------- */
/* The sticky unit is .site-top, not the header. On staging the preview legend
   is the header's next sibling inside that wrapper, so the two travel together
   and the bar can never end up underneath the header or half cut off. Without
   the legend the wrapper simply holds the header and behaves as before. */
.site-top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}
.site-header {
  position: relative;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
}
.brand img { width: clamp(168px, 18vw, 224px); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  font: 700 13px/1 "Lato", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  padding: 10px 4px;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a {
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  padding: 8px 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.nav-list a:hover,
.nav-list a[aria-current="page"] { color: var(--teal-ink); border-bottom-color: var(--teal); }

.has-sub { position: relative; }
.sub-toggle {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 6px;
  margin-left: 2px;
}
.sub-toggle::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg) translate(-2px, -2px);
}
.sub-list {
  position: absolute;
  left: -18px;
  top: calc(100% + 6px);
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 34px rgba(12, 42, 70, .13);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: none;
}
.sub-list a { display: block; padding: 9px 18px; border-bottom: 0; font-weight: 400; }
.has-sub:hover .sub-list,
.has-sub:focus-within .sub-list,
.sub-list.open { display: block; }

/* ---------- Hero --------------------------------------------------------- */
.hero {
  position: relative;
  /* Lisa (ZI), staging note 2026-09-30: the hero-to-hexagons transition
     "looks off". It was a white wedge cut off flat by the navy band below.
     The wedge is now the same navy as that band, so the photo's slanted edge
     runs straight into the hexagon section as one surface. */
  background: var(--navy-mid);
  overflow: hidden;
  isolation: isolate;
}
.hero-panel {
  position: relative;
  /* Burke (ZI), staging note 2026-10-05: "remove the dark blue angle". The
     panel used to be clipped on a slant (polygon 0 0, 100% 0, 82% 100%, 0 100%)
     with navy and the corner hexagon cluster showing in the wedge. The photo now
     runs the full width. hero-lab-2026-10.jpg is hero-lab.jpg with its white
     right margin cropped off (940 of 1044 px), so the flat navy right edge guard
     that used to hide that margin is gone too. */
  background:
    /* Same navy, same left to right direction, opened up so the lab photograph
       is legible. Measured against the photo's own luminance: the lightest
       point that can fall behind the headline composites to rgb(88,110,129),
       which is 5.3:1 for white type. See NOTES.md 2026-09-22. */
    linear-gradient(100deg,
      rgba(12,42,70,.90) 0%,
      rgba(12,42,70,.84) 30%,
      rgba(12,42,70,.76) 58%,
      rgba(12,42,70,.66) 70%,
      rgba(12,42,70,.32) 86%,
      rgba(12,42,70,.26) 100%),
    url("/assets/img/hero-lab-2026-10.jpg") 70% 40%/cover no-repeat;
  padding-block: clamp(64px, 9vw, 132px);
  min-height: clamp(300px, 34vw, 430px);
  display: flex;
  align-items: center;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.05rem, 4.5vw, 3.6rem);
  max-width: 26ch;
  margin: 0;
  text-wrap: balance;
}
.hero h1 .lede { display: block; }

/* ---------- Technology carousel ------------------------------------------ */
.tech {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(48px, 6vw, 84px);
  position: relative;
  overflow: hidden;
}
/* The hero's height lands on a fractional pixel, which let a hairline of the
   hero's white background show between it and this section. Overlap by 2px so
   Chrome's pixel snapping can't reopen it. */
.hero + .tech { margin-top: -2px; }
.tech .eyebrow {
  font: 700 13px/1 "Lato", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 14px;
}
.tech h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: .35em; }
.tech .tech-intro { color: rgba(255,255,255,.82); max-width: 62ch; }

.tech-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 30px;
}
.tech-controls { display: flex; gap: 10px; }
.tech-btn {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,.45);
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color .18s ease, border-color .18s ease;
}
.tech-btn:hover { background: var(--teal); border-color: var(--teal); }
.tech-btn svg { width: 16px; height: 16px; }

.tech-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.tech-viewport::-webkit-scrollbar { display: none; }
.tech-track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding-bottom: 4px;
}

.tech-card {
  width: 286px;
  flex: 0 0 auto;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.tech-card:hover { border-color: var(--teal); background: rgba(46,159,182,.13); transform: translateY(-3px); }
.tech-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.tech-card .tech-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.tech-card .chip {
  font: 700 11px/1 "Lato", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-bright);
}
.tech-card h3 {
  color: #fff;
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 700;
  margin: 0;
}
.tech-card .tech-ref {
  margin-top: auto;
  font-size: 13px;
  color: rgba(255,255,255,.7);
  letter-spacing: .04em;
}
.tech-foot { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.tech-foot .note { font-size: 14px; color: rgba(255,255,255,.6); margin: 0; }

/* ---------- Hexagon cards (both homepage rows) ---------------------------- */
.actions,
.audiences {
  background: var(--navy-mid);
  position: relative;
  overflow: hidden;
}
.actions { padding-block: clamp(56px, 7vw, 100px) clamp(24px, 3vw, 44px); }
.audiences { padding-block: clamp(24px, 3vw, 44px) clamp(60px, 7.5vw, 108px); }
.audiences::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -120px;
  width: clamp(220px, 30vw, 430px);
  aspect-ratio: 1911 / 2844;
  background: url("/assets/img/hex.png") right center/contain no-repeat;
  opacity: .12;
  pointer-events: none;
}
.actions .wrap,
.audiences .wrap { position: relative; z-index: 1; }
/* same fractional-pixel seam as under the hero; overlap the two rows by 1px */
.actions + .audiences { margin-top: -1px; }

.hex-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 52px);
}
/* Launch 2026-11-02: two cards while Ecosystem is held back on the live site. */
.hex-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }

.hex-card {
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  position: relative;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hex-media {
  position: relative;
  width: min(calc(100% - 24px), 272px);
  aspect-ratio: 0.866;          /* a regular pointy-top hexagon */
  margin-bottom: 42px;   /* 26px plus the 16px edge below the photo */
}
/* The hexagon's 3D edge. Brianna (ZI), staging note 2026-09-28: make the
   teal a darker blue so it reads as a shadow, and even out the edge. It used
   to sit up and to the right (14px, -10px), which showed a different width on
   each side. Now it drops straight down: the two lower slanted edges show the
   same 8px band, so the photo reads as a raised tile. */
.hex-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0B2B49 0%, #06182A 100%);
  clip-path: var(--hex);
  transform: translateY(16px);
  transition: transform .25s ease;
}
.hex-media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: var(--hex);
  transition: transform .35s ease;
}
.hex-card h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 .55em;
}
.hex-link {
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color .18s ease, color .18s ease;
}
/* the title link covers the whole card, so the photo is clickable too */
.hex-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hex-arrow { display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -1px; color: var(--teal-bright); transition: transform .18s ease; }
.hex-link .nowrap { white-space: nowrap; }
.hex-card p { color: rgba(255,255,255,.86); margin: 0; max-width: 34ch; }

.hex-card:hover .hex-link,
.hex-link:focus-visible { border-bottom-color: var(--teal-bright); }
.hex-card:hover .hex-arrow { transform: translateX(4px); }
.hex-card:hover .hex-media::before { transform: translateY(20px); }
.hex-card:hover .hex-media img { transform: scale(1.03); }
.hex-link:focus-visible { outline: none; }
.hex-card:focus-within { outline: 3px solid var(--teal-bright); outline-offset: 10px; }
.hex-card:has(.hex-link:focus:not(:focus-visible)) { outline: none; }

/* ---------- Impact numbers ------------------------------------------------ */
.impact {
  background: var(--navy-deep);
  color: #fff;
  padding-block: clamp(48px, 6vw, 84px);
}
.impact h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.impact .section-head p { color: rgba(255,255,255,.82); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16);
}
.stat {
  background: var(--navy-deep);
  padding: 26px 22px;
}
.stat .num {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: var(--teal-bright);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.stat .label {
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.86);
  text-transform: uppercase;
  line-height: 1.4;
}
.impact-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
}
.impact-foot p { margin: 0; font-size: 14px; color: rgba(255,255,255,.62); }

/* ---------- Footer -------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.82);
  padding-block: clamp(44px, 5vw, 70px) 34px;
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr .9fr;
  gap: clamp(26px, 3vw, 48px);
  align-items: start;
}
.footer-brand img { width: 230px; }
.footer-brand .social {
  display: inline-flex;
  margin-top: 20px;
  color: #fff;
  padding: 4px;
}
.footer-brand .social:hover { color: var(--teal-bright); }
.footer-col h2 {
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-bright);
  border-bottom: 1px solid rgba(255,255,255,.28);
  padding-bottom: 10px;
  margin-bottom: 14px;
  font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a, .footer-legal a { color: #fff; text-decoration: none; }
.footer-col a:hover, .footer-legal a:hover { color: var(--teal-bright); text-decoration: underline; }
.footer-partners { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.footer-partners img { width: 168px; }
.footer-partners img[alt="FRD Accel"] { width: 132px; }

.footer-legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 14px;
  color: rgba(255,255,255,.66);
}
.footer-legal p { margin: 0 0 8px; max-width: 78ch; }
.footer-legal .legal-links a { color: var(--teal-bright); }
.footer-legal .credit { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.66); }
.footer-legal .credit a { color: inherit; text-decoration: underline; }

/* ---------- Interior pages ------------------------------------------------ */
.page-hero {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(52px, 6vw, 96px);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -70px;
  width: clamp(160px, 22vw, 300px);
  aspect-ratio: 1911 / 2844;
  background: url("/assets/img/hex.png") right top/contain no-repeat;
  opacity: .13;
  pointer-events: none;
}
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 20ch; }
.page-hero p { color: rgba(255,255,255,.85); max-width: 62ch; font-size: 1.06rem; margin: 0; }
.page-body { padding-block: clamp(46px, 5.6vw, 82px); }
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.placeholder {
  border-left: 4px solid var(--teal);
  background: #F3F7FA;
  padding: 18px 22px;
  margin: 26px 0;
  font-size: 15px;
}
.placeholder strong { color: var(--navy); }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: 34px;
}
.tile {
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  padding: 26px 24px 28px;
  background: #fff;
}
.tile h3 { font-size: 1.12rem; text-transform: uppercase; letter-spacing: .03em; }
.tile p { margin-bottom: 0; font-size: 15px; }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .tile-grid { grid-template-columns: 1fr; }
  .header-inner { flex-wrap: wrap; min-height: 74px; }
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    flex-basis: 100%;
    display: none;
    padding-bottom: 14px;
  }
  .primary-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-top: 1px solid var(--line); }
  .nav-list a { padding: 13px 2px; border-bottom: 0; }
  .has-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .has-sub > a { flex: 1; }
  .sub-toggle { padding: 12px; }
  .sub-list {
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--teal);
    margin: 0 0 10px 6px;
    flex-basis: 100%;
    padding: 0 0 0 12px;
  }
  .has-sub:hover .sub-list:not(.open),
  .has-sub:focus-within .sub-list:not(.open) { display: none; }
  .sub-list.open { display: block; }
  /* Below this width .hero h1 is max-width:100%, so white type can land
     anywhere across the panel and the overlay has to stay even. Lightest
     composited point behind type here is rgb(54,79,103) = 8.5:1 for white. */
  .hero-panel {
    background:
      linear-gradient(100deg,
        rgba(12,42,70,.90) 0%,
        rgba(12,42,70,.84) 55%,
        rgba(12,42,70,.78) 100%),
      url("/assets/img/hero-lab-2026-10.jpg") 70% 40%/cover no-repeat;
  }
  .hero h1 { max-width: 100%; }
  /* The header, the legend and the open nav panel all sit in one sticky unit.
     Cap it to the viewport and let it scroll internally so a long menu on a
     short screen stays reachable. Only below 900px, where .sub-list is static:
     above that the submenu is absolutely positioned and a scroll container
     here would clip it. */
  .site-top { max-height: 100dvh; overflow-y: auto; overflow-x: hidden; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .tech-card { width: 240px; }
  .audiences::after { opacity: .1; }
  .hex-grid, .hex-grid.is-2 { grid-template-columns: 1fr; gap: 52px; }
  .hex-media { width: min(72%, 240px); }
}

@media (prefers-reduced-motion: reduce) {
  .tech-viewport { scroll-behavior: auto; scroll-snap-type: x mandatory; }
  .tech-card { scroll-snap-align: start; }
  * { transition-duration: .01ms !important; }
}

/* Visually hidden (kept for screen readers / heading order) */
.visually-hidden-heading {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Video facade (News) ------------------------------------------ */
.video-figure { margin: 26px 0 34px; }
.video-facade {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--navy);
  cursor: pointer;
  line-height: 0;
}
.video-facade img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 28, 48, .22);
  transition: background-color .18s ease;
}
.video-facade:hover::after { background: rgba(7, 28, 48, .05); }
.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--teal-ink);
  z-index: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.video-play::before {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.video-figure iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video-figure figcaption { padding-top: 16px; }
.video-figure figcaption h3 { font-size: 1.2rem; margin-bottom: .4em; }
.video-figure figcaption p { margin: 0; font-size: 15px; }

/* ==========================================================================
   For Inventors + Ecosystem (added 2026-09-22)
   Reuses the homepage palette, type scale, and hexagon motif.
   ========================================================================== */

/* Mobile browsers do not honor overflow-x:hidden for pinch panning. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Shared section furniture -------------------------------------------------- */
.eyebrow {
  font: 700 13px/1 "Lato", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin: 0 0 14px;
}
.support-system .eyebrow,
.stories .eyebrow,
.split-band .eyebrow { color: var(--teal-bright); }

.section-intro { max-width: 68ch; color: rgba(255,255,255,.84); }
.section-intro-light { color: var(--body); }

.page-hero-cta { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { font-size: 14px; color: rgba(255,255,255,.7); }

.placeholder-dark {
  background: rgba(255,255,255,.07);
  border-left-color: var(--teal-bright);
  color: rgba(255,255,255,.88);
}
.placeholder-dark strong,
.placeholder-dark em { color: #fff; }

.copy-todo {
  border-left: 3px dashed var(--teal);
  padding-left: 14px;
  color: #5A6672;
  font-style: italic;
}

.page-body-tint { background: #F3F7FA; }

/* Our Innovation Support System --------------------------------------------- */
.support-system {
  background: var(--navy-mid);
  color: #fff;
  padding-block: clamp(50px, 6.5vw, 92px);
  position: relative;
  overflow: hidden;
}
.support-system::after {
  content: "";
  position: absolute;
  right: -130px;
  top: -90px;
  width: clamp(200px, 26vw, 380px);
  aspect-ratio: 1911 / 2844;
  background: url("/assets/img/hex.png") right top/contain no-repeat;
  opacity: .1;
  pointer-events: none;
}
.support-system .wrap { position: relative; z-index: 1; }
.support-system h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }

.stage-flow {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}
.stage { position: relative; display: flex; grid-column: span 2; }
.stage-wide { grid-column: span 3; }
.stage-full { grid-column: 1 / -1; }
.stage-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 22px 22px 22px;
  background: var(--card);
  border: 1px solid #E1E9F0;
  border-top: 3px solid var(--teal);
  color: var(--navy);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .26s ease;
}
a.stage-inner:hover,
a.stage-inner:focus-visible { border-color: var(--teal); transform: translateY(-3px); }
a.stage-inner:hover .stage-arrow,
a.stage-inner:focus-visible .stage-arrow { transform: translateX(4px); }
a.stage-inner:hover .stage-hex,
a.stage-inner:focus-visible .stage-hex { transform: translateY(-2px); }

.stage-hex {
  width: 62px;
  height: 72px;
  background: var(--teal-ink);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid;
  place-items: center;
  transition: transform .2s ease;
}
.stage-num {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  color: #fff;
  line-height: 1;
}
.stage-step {
  font: 700 11px/1 "Lato", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.stage-inner h3 {
  color: var(--navy);
  font-size: 1.24rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0;
}
.stage-copy { margin: 0; color: var(--body); font-size: 15px; }
.stage .copy-todo { color: #5A6672; border-left-color: var(--teal); }
.stage-go {
  margin-top: auto;
  padding-top: 8px;
  font: 700 13px/1.3 "Lato", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal-ink);
  display: inline-flex;
  align-items: center;
}
.stage-go.is-pending {
  color: #55616D;
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 400;
  font-style: italic;
}
.stage-arrow {
  width: 14px;
  height: 14px;
  margin-left: 7px;
  transition: transform .18s ease;
}
/* sequence connector, drawn inside the grid gap only */
.stage::after {
  content: "";
  position: absolute;
  right: -17px;
  top: 56px;
  width: 11px;
  height: 11px;
  border-top: 3px solid var(--teal-bright);
  border-right: 3px solid var(--teal-bright);
  transform: rotate(45deg);
  pointer-events: none;
  display: none;
}
.stage-flow > .stage:nth-child(1)::after,
.stage-flow > .stage:nth-child(2)::after,
.stage-flow > .stage:nth-child(4)::after { display: block; }

/* Stage 6 branch ------------------------------------------------------------- */
.stage-fork .stage-inner { height: 100%; }
.fork {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 34px;
  width: 100%;
  min-width: 0;
}
.fork-paths {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.fork-paths::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--teal-bright);
}
.fork-label {
  margin: 0 0 14px;
  font: 700 11px/1.3 "Lato", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-bright);
}
.fork-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.fork-list > li { position: relative; display: flex; min-width: 0; }
.fork-list > li::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 32px;
  width: 19px;
  height: 3px;
  background: var(--teal-bright);
}
.branch-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid #E1E9F0;
  border-left: 3px solid var(--teal);
  color: var(--navy);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .26s ease;
}
a.branch-inner:hover,
a.branch-inner:focus-visible {
  border-color: var(--teal);
  border-left-color: var(--teal-ink);
  transform: translateY(-3px);
}
a.branch-inner:hover .stage-arrow,
a.branch-inner:focus-visible .stage-arrow { transform: translateX(4px); }
.branch-hex {
  flex: 0 0 auto;
  width: 22px;
  height: 26px;
  margin-top: 3px;
  background: var(--teal-ink);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.branch-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.branch-name {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 1.02rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .03em;
  overflow-wrap: break-word;
}
.branch-go {
  font: 700 12px/1.3 "Lato", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-ink);
  display: inline-flex;
  align-items: center;
}

/* Resource cards ------------------------------------------------------------ */
.res-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: 28px;
}
.res-card {
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  background: #fff;
  padding: 26px 24px 8px;
}
.res-card h3 { font-size: 1.14rem; text-transform: uppercase; letter-spacing: .03em; }
.res-card p { font-size: 15.5px; }

/* Licensing band ------------------------------------------------------------ */
.split-band {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(46px, 5.6vw, 82px);
  position: relative;
  overflow: hidden;
}
.split-band h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.split-band p { color: rgba(255,255,255,.86); max-width: 70ch; }

/* Royalty schedule ---------------------------------------------------------- */
.royalty-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(22px, 3vw, 48px);
  align-items: start;
}
.royalty-copy p { font-size: 16px; }
.royalty-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.royalty-table caption {
  text-align: left;
  font: 700 12px/1 "Lato", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-ink);
  padding-bottom: 10px;
}
.royalty-table th,
.royalty-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
.royalty-table thead th {
  background: #F3F7FA;
  color: var(--navy);
  font-family: "Lato", sans-serif;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--teal);
}

/* Success stories ----------------------------------------------------------- */
.stories {
  background: var(--navy-deep);
  color: #fff;
  padding-block: clamp(50px, 6.5vw, 92px);
}
.stories h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  margin-top: 30px;
}
.story {
  margin: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  padding: 0 0 22px;
  display: flex;
  flex-direction: column;
}
.story-photo {
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,.08);
  border-bottom: 1px dashed rgba(255,255,255,.35);
  display: grid;
  place-items: center;
}
.story-photo span {
  font: 700 12px/1 "Lato", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.story blockquote { margin: 0; padding: 22px 22px 0; }
.story blockquote p { font-size: 15px; color: rgba(255,255,255,.88); margin: 0; }
.story figcaption {
  margin-top: auto;
  padding: 16px 22px 0;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--teal-bright);
}

/* FAQ accordion ------------------------------------------------------------- */
.faq { margin-top: 26px; border-top: 1px solid var(--line); max-width: 92ch; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 18px 46px 18px 0;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.35;
  color: var(--navy);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before,
.faq-item > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  background: var(--teal-ink);
  transition: transform .26s ease, opacity .26s ease;
}
.faq-item > summary::after { right: 10px; width: 18px; height: 2px; margin-top: -1px; }
.faq-item > summary::before { right: 18px; width: 2px; height: 18px; margin-top: -9px; }
.faq-item[open] > summary::before { transform: rotate(90deg); opacity: 0; }
.faq-item > summary:hover { color: var(--teal-ink); }
.faq-item > summary:hover::before,
.faq-item > summary:hover::after { background: var(--teal); }
.faq-body { padding: 0 46px 20px 0; }
.faq-body p { margin: 0; font-size: 16px; }

/* Closing CTA --------------------------------------------------------------- */
.closing-cta {
  background: var(--navy-mid);
  color: #fff;
  padding-block: clamp(46px, 5.6vw, 80px);
  text-align: center;
}
.closing-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.closing-cta p { color: rgba(255,255,255,.86); max-width: 66ch; margin-inline: auto; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 24px; }

/* Responsive ----------------------------------------------------------------- */
@media (max-width: 1000px) {
  .royalty-layout { grid-template-columns: 1fr; }
  .res-grid { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .story-photo { aspect-ratio: 21 / 9; }
}

@media (max-width: 900px) {
  .stage-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage,
  .stage-wide { grid-column: span 1; }
  .stage-full,
  .stage-flow > .stage:nth-child(5) { grid-column: 1 / -1; }
  .stage-flow > .stage:nth-child(1)::after,
  .stage-flow > .stage:nth-child(2)::after,
  .stage-flow > .stage:nth-child(4)::after { display: none; }
  .fork { grid-template-columns: 1fr; gap: 22px; }
  .fork-paths { padding-top: 6px; }
  .fork-paths::before { left: 26px; top: -22px; bottom: auto; height: 22px; }
  .fork-list > li::before { display: none; }
}

@media (max-width: 640px) {
  .stage-flow { grid-template-columns: 1fr; gap: 18px; }
  .stage,
  .stage-wide,
  .stage-full { grid-column: 1 / -1; }
  .stage-inner { padding: 20px 18px; }
  .faq-item > summary { padding-right: 38px; font-size: 1rem; }
  .royalty-table { font-size: 14px; }
  .royalty-table th,
  .royalty-table td { padding: 10px 8px; }
  .placeholder { overflow-wrap: break-word; }
  .faq-body { padding-right: 0; }
  .cta-row .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  a.stage-inner:hover,
  a.stage-inner:focus-visible,
  a.branch-inner:hover,
  a.branch-inner:focus-visible { transform: none; }
}

/* ---------- Staging: which pages are built --------------------------------
   Applied only on *.webpro360.dev by the header partial, so nothing has to be
   stripped at launch. An item un-marks itself once its index.php exists.        */
.nav-list a.is-unbuilt {
  color: #8C99A6;
  text-decoration: line-through;
  text-decoration-color: rgba(140, 153, 166, .75);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 400;
}
.nav-list a.is-unbuilt:hover,
.nav-list a.is-unbuilt:focus-visible {
  color: var(--body);
  text-decoration-color: var(--body);
  border-bottom-color: transparent;
}
.sub-list a.is-unbuilt { font-weight: 400; }

/* Sits inside .site-top, immediately under the header, so the sticky bar is
   header + legend as one unit. It is never overlapped by the header and page
   content never scrolls over it. */
.staging-legend {
  position: relative;
  z-index: 1;
  background: #F4F7F9;
  border-bottom: 1px solid var(--line);
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}
.staging-legend .wrap { padding-top: 9px; padding-bottom: 9px; }
.staging-legend s {
  color: #8C99A6;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
@media (max-width: 640px) {
  .staging-legend { font-size: 12px; }
}


/* ---------- Dropdown hover bridge ------------------------------------------
   .sub-list opens 6px below the nav item, and that 6px band belonged to
   neither element, so the submenu closed as the cursor crossed it on the way
   down. This fills the gap with a transparent strip that is part of the
   submenu, so the hover survives the trip without changing the spacing.
   Switched off below 900px, where the submenu is static and opens on tap.   */
.sub-list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}
@media (max-width: 900px) {
  .sub-list::before { content: none; }
}


/* ==========================================================================
   Brand motifs + motion pass (added 2026-09-22)

   Two things the client's own site does that this build was not doing: a low
   contrast hexagon lattice behind the navy bands, and a two parallelogram
   diagonal slash at the bottom right of a hero. Both are rebuilt here in CSS
   and inline SVG, so there is no new image file to ship or cache.

   Every motion effect below is additive. Nothing on either page depends on
   JavaScript to be readable, and everything stands down under
   prefers-reduced-motion.
   ========================================================================== */

/* ---------- Hexagon motif on the navy bands -------------------------------
   2026-09-22 fix. This was a full bleed repeating lattice painted on every
   navy surface. Because each section painted its own tile origin, the pattern
   restarted at every section boundary and at the header seam, so the hexagons
   visibly cut where two bands met.

   The client's own site does not tile anything. It places ONE contained
   decorative hexagon cluster inside a navy band, anchored to a corner. That is
   what is built here: a single fixed pixel sized, non repeating motif per band,
   anchored to one corner and clipped by that band's own overflow. One motif per
   band means there is no second origin for it to misalign with, and nothing
   crosses a section boundary.

   .actions and .audiences are two stacked navy-mid bands that read as one, so
   the pair carries a single motif, on .audiences. .page-hero and
   .support-system already carried their own contained motif and keep it. */
.actions,
.audiences,
.page-hero,
.support-system,
.split-band,
.stories,
.closing-cta,
.ecosystem-grid { position: relative; overflow: hidden; }

.split-band::before,
.stories::before,
.closing-cta::before,
.ecosystem-grid::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 446px;              /* the mark's own 1911 x 2844 ratio */
  background: url("/assets/img/hex.png") center/contain no-repeat;
  opacity: .1;
  pointer-events: none;
  z-index: 0;
}
.split-band::before     { left: -92px;   bottom: -168px; }
.stories::before        { left: -92px;   top: -142px; }
.closing-cta::before    { right: -78px;  bottom: -176px; }
.ecosystem-grid::before { right: -84px;  top: -120px; }

@media (max-width: 640px) {
  .split-band::before,
  .stories::before,
  .closing-cta::before,
  .ecosystem-grid::before { width: 190px; height: 283px; }
  .split-band::before     { left: -64px;  bottom: -110px; }
  .stories::before        { left: -64px;  top: -94px; }
  .closing-cta::before    { right: -54px; bottom: -116px; }
  .ecosystem-grid::before { right: -60px; top: -80px; }
}

.page-hero .wrap,
.split-band .wrap,
.stories .wrap,
.closing-cta .wrap,
.ecosystem-grid .wrap { position: relative; z-index: 1; }

/* ---------- Diagonal slash: two parallelograms, deep navy + light blue ---- */
.zi-slash {
  position: absolute;
  right: -4%;
  bottom: -34px;
  width: clamp(230px, 36vw, 560px);
  height: clamp(96px, 12vw, 172px);
  transform: skewX(-22deg);
  background: linear-gradient(90deg,
      var(--navy-deep) 0 43%,
      transparent 43% 51%,
      var(--teal-bright) 51% 100%);
  pointer-events: none;
  z-index: 0;
}
.zi-slash-soft { opacity: .5; }

@media (max-width: 640px) {
  .zi-slash { right: -12%; bottom: -26px; height: 74px; }
}

/* ---------- Scroll reveal: fade and slide in, staggered -------------------- */
[data-reveal],
[data-reveal-group] > * {
  transition: opacity .62s ease, transform .62s cubic-bezier(.22,.61,.36,1);
}
html.zi-anim [data-reveal]:not(.is-in),
html.zi-anim [data-reveal-group]:not(.is-in) > * {
  opacity: 0;
  transform: translateY(22px);
}
html.zi-anim [data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0ms; }
html.zi-anim [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 80ms; }
html.zi-anim [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 160ms; }
html.zi-anim [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 240ms; }
html.zi-anim [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 320ms; }
html.zi-anim [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 400ms; }
html.zi-anim [data-reveal-group].is-in > *:nth-child(7) { transition-delay: 480ms; }
html.zi-anim [data-reveal-group].is-in > *:nth-child(n+8) { transition-delay: 540ms; }

/* ---------- Smooth anchor scrolling --------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Clears the sticky header plus the staging legend. */
[id] { scroll-margin-top: 138px; }

/* ---------- Hover lift and glow ------------------------------------------- */
/* Lift and glow, retuned for the light cards on a navy band: a deep navy drop
   shadow reads as depth, and the light blue halo reads against the navy rather
   than against the card. */
a.stage-inner:hover,
a.stage-inner:focus-visible,
a.branch-inner:hover,
a.branch-inner:focus-visible {
  box-shadow: 0 16px 34px rgba(7,28,48,.38), 0 0 0 1px rgba(46,159,182,.55), 0 0 28px rgba(79,187,208,.45);
}
.res-card, .tile {
  transition: transform .22s ease, box-shadow .26s ease, border-color .22s ease;
}
.res-card:hover, .tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(12, 42, 70, .14);
  border-color: var(--teal);
}

/* ---------- Self drawing connectors on the seven stage sequence ----------- */
.stage-flow { --draw: 1; }
html.zi-anim .stage-flow:not(.is-in) { --draw: 0; }

.stage::after {
  transform: rotate(45deg) scale(var(--draw, 1));
  transition: transform .4s ease .35s;
}
.fork-paths::before {
  transform: scaleY(var(--draw, 1));
  transform-origin: top;
  transition: transform .75s ease .2s;
}
.fork-list > li::before {
  transform: scaleX(var(--draw, 1));
  transform-origin: left;
  transition: transform .45s ease .8s;
}

/* ==========================================================================
   Ecosystem grid
   Slide 3 of the client's deck LISTS the ten organizations to include. It does
   not rank them and it does not nest them, and the colored bands behind several
   of the names are only the background of the pasted images. So this is a flat
   grid of ten equal tiles, in the order the slide reads them. There is no
   hierarchy here, no connectors, and nothing that marks one tile out from the
   other nine.
   ========================================================================== */
.ecosystem-grid {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(48px, 6.5vw, 96px);
}

.eco-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
  align-items: stretch;
}
.eco-grid > li { display: flex; min-width: 0; }

/* A tile ------------------------------------------------------------------- */
.eco-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 16px 18px 18px;
  background: #fff;
  border: 1px solid #E1E9F0;
  border-top: 3px solid var(--teal);
  color: var(--navy);
  text-decoration: none;
  transition: transform .22s ease, box-shadow .28s ease, border-color .22s ease;
}
/* the brand's diagonal, one corner at a time */
.eco-tile::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  background: var(--teal);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: .5;
  transform-origin: 100% 100%;
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
a.eco-tile:hover,
a.eco-tile:focus-visible {
  transform: translateY(-5px);
  border-color: var(--teal);
  box-shadow: 0 18px 38px rgba(0,0,0,.34), 0 0 0 1px rgba(46,159,182,.45), 0 0 30px rgba(79,187,208,.28);
}
a.eco-tile:hover::after,
a.eco-tile:focus-visible::after { opacity: 1; transform: scale(1.22); }
a.eco-tile:hover .stage-arrow { transform: translateX(4px); }

.eco-tile.is-soon { background: #EDF2F7; border-top-color: #9FB3C4; }

.eco-logo { display: flex; align-items: center; width: 100%; min-height: 54px; }
.eco-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(42px, 4.6vw, 54px);
  object-fit: contain;
}

.eco-logo-mark {
  width: 56px;
  height: 64px;
  min-height: 0;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--teal);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid;
  place-items: center;
}
.is-soon .eco-logo-mark { background: #9FB3C4; }
.eco-mark { font: 900 1.3rem/1 "Lato", sans-serif; color: #fff; letter-spacing: .02em; }
.eco-logo-mark.is-long .eco-mark { font-size: .74rem; letter-spacing: 0; }

.eco-name {
  font: 900 1.02rem/1.3 "Lato", sans-serif;
  color: var(--navy);
  overflow-wrap: break-word;
  min-width: 0;
}
.eco-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #43505C;
  overflow-wrap: break-word;
  min-width: 0;
}
.eco-go {
  margin-top: auto;
  padding-top: 6px;
  font: 700 12px/1.3 "Lato", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-ink);
  display: inline-flex;
  align-items: center;
}
.eco-go.is-pending {
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 400;
  font-style: italic;
  color: #55616D;
}
/* tiles with no destination say so on hover, per the client's request; on a
   touch screen there is no hover, so it is simply always visible there */
.eco-soon { opacity: 0; transition: opacity .22s ease; }
.eco-tile.is-soon:hover .eco-soon { opacity: 1; }
@media (hover: none) { .eco-soon { opacity: 1; } }

/* ==========================================================================
   Success stories: the client's quote carousel, in their skewed white card
   with a light blue attribution strip. Without JavaScript the three quotes
   stay in the grid and all of them are readable.
   ========================================================================== */
.story {
  background: var(--card);
  border: 0;
  padding: 0;
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}
.story blockquote { padding: 26px 36px 22px; }
.story blockquote p { color: #3A4653; font-size: 15.5px; }
.story figcaption {
  margin-top: auto;
  padding: 15px 36px;
  background: #BFE3EC;
  color: var(--navy);
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.stories.is-slider .story-grid {
  display: flex;
  grid-template-columns: none;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.stories.is-slider .story-grid::-webkit-scrollbar { display: none; }
.stories.is-slider .story { flex: 0 0 100%; scroll-snap-align: start; }

.story-controls { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.story-controls[hidden] { display: none; }
.story-btn {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,.45);
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color .18s ease, border-color .18s ease;
}
.story-btn:hover { background: var(--teal); border-color: var(--teal); }
.story-btn svg { width: 16px; height: 16px; }
.story-count {
  margin: 0;
  font: 700 14px/1 "Lato", sans-serif;
  letter-spacing: .14em;
  color: rgba(255,255,255,.82);
}

/* ---------- FAQ rows ------------------------------------------------------ */
.faq-item > summary { transition: color .18s ease, background-color .18s ease; }
.faq-item > summary:hover { background: #F3F7FA; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] > .faq-body { animation: zi-faq .3s ease both; }
}
@keyframes zi-faq {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Ecosystem grid responsive: 5 columns, then 4, then 2, then 1. Every tile
   keeps the same size and weight at every width.
   ========================================================================== */
@media (max-width: 1159px) {
  .eco-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .eco-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .story blockquote { padding: 22px 28px 18px; }
  .story figcaption { padding: 14px 28px; }
  .story { clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
  .eco-tile { padding: 14px 15px 16px; }
}

/* ==========================================================================
   Reduced motion: everything above stands down. Nothing here is required to
   read the page, so all of it simply stops moving.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .stories.is-slider .story-grid { scroll-behavior: auto; }
  a.eco-tile:hover,
  a.eco-tile:focus-visible,
  .res-card:hover,
  .tile:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   2026-09-24 client round (Burke Mishoe's 2026-09-23 notes)
   1. For Inventors: the seven stages as one open path, no card boxes, no
      "Stage N" labels; each stage's resources live under that stage.
   2. Ecosystem: the client's own layered graphic, every organization a live
      area of it with a hover popover.
   3. The diagonal slash is gone from the page heroes (one color).
   ========================================================================== */

/* ---------- For Inventors: the path -------------------------------------- */
.path { padding-block: clamp(46px, 5.6vw, 82px); background: #fff; }
.path .eyebrow { color: var(--teal-ink); }
.path-list {
  --hex-w: 62px;
  --hex-h: 72px;
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  max-width: 84ch;
}
.path-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--hex-w) minmax(0, 1fr);
  column-gap: clamp(18px, 2.6vw, 30px);
  padding-bottom: clamp(30px, 3.6vw, 46px);
}
/* the line that joins the hexagons, drawn only between them */
.path-step::before {
  content: "";
  position: absolute;
  left: calc(var(--hex-w) / 2 - 1.5px);
  top: var(--hex-h);
  bottom: 0;
  width: 3px;
  background: linear-gradient(var(--teal-bright), var(--teal));
  opacity: .7;
}
.path-step:last-child { padding-bottom: 0; }
.path-step:last-child::before { display: none; }
.path-hex {
  width: var(--hex-w);
  height: var(--hex-h);
  background: var(--teal-ink);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid;
  place-items: center;
  font: 900 1.55rem/1 "Lato", sans-serif;
  color: #fff;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
a.path-hex:hover,
a.path-hex:focus-visible { background: var(--navy); transform: translateY(-2px); }
.path-body { min-width: 0; padding-top: 6px; }
/* Title above its line of copy on every stage, at every width. Side by side
   it wrapped under some titles and not others (Lisa, staging note 2026-09-30). */
.path-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.path-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.15;
}
.path-head h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.path-head h3 a:hover,
.path-head h3 a:focus-visible { color: var(--teal-ink); border-bottom-color: var(--teal); }
.path-copy { margin: 0; color: var(--body); font-size: 1.02rem; max-width: 62ch; }
.path-links {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.path-links a {
  display: inline-flex;
  align-items: center;
  font: 700 13px/1.3 "Lato", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.path-links a:hover,
.path-links a:focus-visible { color: var(--navy); border-bottom-color: var(--teal); }
.path-links a:hover .stage-arrow { transform: translateX(4px); }

/* expandable resource under a stage: a thin rule and a plus, like the FAQs */
.path-more { margin-top: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 72ch; }
.path-more + .path-more { margin-top: 0; border-top: 0; }
.path-more > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 13px 42px 13px 0;
  font: 700 .98rem/1.35 "Lato", sans-serif;
  color: var(--navy);
  transition: color .18s ease;
}
.path-more > summary::-webkit-details-marker { display: none; }
.path-more > summary::before,
.path-more > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  background: var(--teal-ink);
  transition: transform .26s ease, opacity .26s ease, background-color .18s ease;
}
.path-more > summary::after { right: 8px; width: 16px; height: 2px; margin-top: -1px; }
.path-more > summary::before { right: 15px; width: 2px; height: 16px; margin-top: -8px; }
.path-more[open] > summary::before { transform: rotate(90deg); opacity: 0; }
.path-more > summary:hover { color: var(--teal-ink); }
.path-more > summary:hover::before,
.path-more > summary:hover::after { background: var(--teal); }
.path-more-body { padding: 2px 0 18px; }
.path-more-body p { margin: 0 0 12px; font-size: 15.5px; color: var(--body); }
.path-more-body p:last-child { margin-bottom: 0; }
.path-more-body .royalty-table { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .path-more[open] > .path-more-body { animation: zi-faq .3s ease both; }
}

/* the two routes out of Commercialize */
.path-branches {
  list-style: none;
  margin: 22px 0 0;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--teal-bright);
  display: grid;
  gap: 22px;
}
.path-branch {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
}
.path-branch::before {
  /* stub from the trunk to the branch hexagon */
  content: "";
  position: absolute;
  left: -25px;
  top: 14px;
  width: 22px;
  height: 3px;
  background: var(--teal-bright);
}
.path-branch .branch-hex {
  width: 26px;
  height: 30px;
  margin-top: 1px;
  background: var(--teal);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.path-branch-body { min-width: 0; }
.path-branch h4 {
  margin: 0;
  font-size: 1.06rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.25;
}
.path-branch h4 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.path-branch h4 a:hover,
.path-branch h4 a:focus-visible { color: var(--teal-ink); border-bottom-color: var(--teal); }
.path-branch .path-more { margin-top: 8px; }

@media (max-width: 640px) {
  .path-list { --hex-w: 46px; --hex-h: 54px; }
  .path-hex { font-size: 1.2rem; }
  .path-head { flex-direction: column; gap: 4px; }
  .path-head h3 { font-size: 1.22rem; }
  .path-copy { font-size: .98rem; }
  .path-branches { padding-left: 16px; }
  .path-branch::before { left: -19px; width: 16px; }
  .path-more > summary { padding-right: 34px; }
}

/* ---------- Ecosystem: the layered graphic ------------------------------- */
.ecosystem-grid { background: #fff; }
.eco-stack {
  display: grid;
  gap: 14px;
  max-width: 1010px;
  margin: 0 auto;
}
.eco-band {
  display: flex;
  align-items: stretch;
}
.eco-band-mint { background: #B6ECD3; }
.eco-band-blue { background: #0546A4; }
.eco-band-sky  { background: #DFE8F5; }
.eco-band-gray { background: #CDCDD1; }
.eco-cell {
  text-decoration: none;
  /* the crop width sets the share of the band, so the layout matches the slide */
  flex: var(--w) 1 0;
  min-width: 0;
  position: relative;
  display: block;
  line-height: 0;
  outline: 0;
  transition: transform .2s ease, filter .2s ease;
}
.eco-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.eco-cell:hover,
.eco-cell:focus-visible { transform: translateY(-3px); z-index: 2; filter: drop-shadow(0 10px 18px rgba(7, 28, 48, .28)); }
a.eco-cell:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 2px; }
.eco-cell.is-soon { cursor: default; }
.eco-cell.is-soon:hover img,
.eco-cell.is-soon:focus-visible img { opacity: .82; }

.eco-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translate(-50%, 6px);
  width: max-content;
  max-width: min(300px, 80vw);
  padding: 12px 14px 11px;
  background: var(--navy);
  color: #fff;
  font: 400 14px/1.45 "Roboto", sans-serif;
  text-align: left;
  border-top: 3px solid var(--teal-bright);
  box-shadow: 0 12px 28px rgba(7, 28, 48, .28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 5;
}
.eco-pop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top-color: var(--navy);
}
.eco-pop-desc { display: block; margin-bottom: 6px; }
.eco-pop-go {
  display: inline-flex;
  align-items: center;
  font: 700 12px/1 "Lato", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-bright);
}
.eco-pop-go .stage-arrow { width: 12px; height: 12px; margin-left: 6px; }
.eco-pop-go.is-soon { color: #C9D6E2; font-style: italic; text-transform: none; letter-spacing: .02em; font-weight: 400; font-size: 13px; }
.eco-cell:hover .eco-pop,
.eco-cell:focus-visible .eco-pop,
.eco-cell:focus .eco-pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
/* the popover of a cell at the edge of the band stays inside the page */
.eco-band .eco-cell:first-child .eco-pop { left: 0; transform: translate(0, 6px); }
.eco-band .eco-cell:first-child:hover .eco-pop,
.eco-band .eco-cell:first-child:focus-visible .eco-pop { transform: translate(0, 0); }
.eco-band .eco-cell:first-child .eco-pop::after { left: 28px; }
.eco-band .eco-cell:last-child .eco-pop { left: auto; right: 0; transform: translate(0, 6px); }
.eco-band .eco-cell:last-child:hover .eco-pop,
.eco-band .eco-cell:last-child:focus-visible .eco-pop { transform: translate(0, 0); }
.eco-band .eco-cell:last-child .eco-pop::after { left: auto; right: 28px; margin-left: 0; }

/* touch screens have no hover: the band stacks and each description sits
   under its organization, always visible */
@media (hover: none), (max-width: 640px) {
  .eco-band { flex-direction: column; }
  .eco-cell { flex: none; }
  .eco-cell img { width: auto; max-width: 100%; height: auto; max-height: 150px; margin: 0 auto; object-fit: contain; }
  .eco-pop,
  .eco-band .eco-cell:first-child .eco-pop,
  .eco-band .eco-cell:last-child .eco-pop {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    width: auto;
    max-width: none;
    display: block;
    box-shadow: none;
    border-top: 0;
    background: rgba(12, 42, 70, .92);
    padding: 10px 14px 12px;
    pointer-events: auto;
  }
  .eco-pop::after { display: none; }
  .eco-cell:hover,
  .eco-cell:focus-visible { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .path-hex, .eco-cell, .eco-pop { transition: none; }
  .eco-cell:hover, .eco-cell:focus-visible { transform: none; }
}

/* ---------- Resources is a menu label, not a page (Burke, 2026-09-30) ------ */
.sub-toggle.nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 0;
  font: 700 15px/1.5 "Lato", sans-serif;
  color: var(--navy);
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.sub-toggle.nav-parent::after { transform: rotate(45deg) translate(-2px, -2px); flex: none; }
.sub-toggle.nav-parent:hover,
.sub-toggle.nav-parent.is-current { color: var(--teal-ink); border-bottom-color: var(--teal); }
@media (max-width: 900px) {
  .sub-toggle.nav-parent { flex: 1; justify-content: space-between; padding: 13px 2px; border-bottom: 0; text-align: left; }
}

/* ---------- Text link calls to action (2026-09-30) -------------------------
   Lisa (ZI), staging notes: no more rectangle buttons. The call to action is
   the words themselves, set like the homepage hexagon titles: uppercase Lato,
   a teal chevron, and an underline that draws in on hover. */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 clamp(1.08rem, 1.55vw, 1.3rem)/1.25 "Lato", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding-bottom: 5px;
  background: linear-gradient(var(--teal), var(--teal)) 0 100% / 0 2px no-repeat;
  transition: background-size .25s ease, color .18s ease;
}
.link-cta:hover,
.link-cta:focus-visible { background-size: 100% 2px; color: var(--teal-ink); }
.link-cta-arrow { width: 16px; height: 16px; flex: none; color: var(--teal-ink); transition: transform .18s ease; }
.link-cta:hover .link-cta-arrow,
.link-cta:focus-visible .link-cta-arrow { transform: translateX(4px); }
.link-cta.on-dark { color: #fff; }
.link-cta.on-dark:hover,
.link-cta.on-dark:focus-visible { color: #fff; background-image: linear-gradient(var(--teal-bright), var(--teal-bright)); }
.link-cta.on-dark .link-cta-arrow { color: var(--teal-bright); }
.link-row { display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: center; }

/* hexagon photo that is itself the call to action, in an interior hero */
.zp-hex-cta { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.zp-hex-cta .zp-hex-media { margin-bottom: 34px; }
.zp-hex-cta-title { margin: 0; }
.zp-hex-cta-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.zp-hex-cta-note { margin: 8px 0 0; font-size: 14px; color: rgba(255,255,255,.72); }
.zp-hex-cta:hover .zp-hex-cta-link { background-size: 100% 2px; }
.zp-hex-cta:hover .link-cta-arrow { transform: translateX(4px); }

/* Hero bottom edge blends into the hexagon band instead of stopping on a
   line, and the corner hexagon cluster sits back on the navy (2026-09-30). */
.hero-panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: calc(38% + 2px);
  background: linear-gradient(to bottom, rgba(21,61,97,0) 0%, var(--navy-mid) 100%);
  pointer-events: none;
}
.hero-panel > .wrap { position: relative; z-index: 1; }