/* ─────────────────────────────────────────────────────────────
   Hyveminds — chrome and section shell
   Nav, dropdowns, footer, section rhythm, responsive.
   From product/_shared.css (59-95, 132-138, 187-201, 203-225,
   248-250, 267-292, 300-313) and index.html (97-135, 207-221),
   de-duplicated.

   Where the two disagree the product-page value wins, because
   there is now one server-rendered nav and footer for all 24 pages:
     - nav.primary gap  20px (_shared) not 28px (index.html)
     - nav.primary colour is two-tier: ink on paper, white inside
       the dark masthead, rather than index.html's hardcoded white.
   The footer rules below are the *resolved* result of _shared.css's
   light footer plus the "richer footer" block that overrode it.
   ───────────────────────────────────────────────────────────── */

/* ─── masthead ─── */

header.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid #FFFFFF1F;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand-mark { width: 28px; height: 28px; color: var(--ink); }

/*
 * The mark is a black outline disc on transparency, so it is sized here
 * and inverted on the dark surfaces rather than shipping two files.
 * `contain`, not `cover`: the ring runs to the edge of its canvas and
 * `cover` shaves it. The explicit height with `width:auto` off is what
 * stops an unsized 1024px source rendering at 1024px.
 */
.brand-logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.brand-sep {
  width: 1px;
  height: 17px;
  background: var(--rule-2);
  display: inline-block;
  flex-shrink: 0;
}

.brand-name,
.brand-word {
  font-family: var(--label);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.005em;
  color: var(--ink);
}

nav.primary {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

nav.primary a { position: relative; padding: 6px 0; }
nav.primary a:hover,
nav.primary a.current { color: var(--ink); }

nav.primary a.current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--p);
}

.nav-cta { display: flex; gap: 10px; align-items: center; }

.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
  font-family: var(--sans);
  letter-spacing: 0;
  white-space: nowrap;
}

.nav-back:hover { color: var(--ink); }

/* dark masthead overrides */
.site-nav .brand-logo-img { filter: invert(1); }
.site-nav .brand-name,
.site-nav .brand-word { color: #fff; }
.site-nav .brand-sep { background: #FFFFFF33; }
.site-nav nav.primary { color: #FFFFFFCC; }
.site-nav nav.primary a:hover,
.site-nav nav.primary a.current { color: #fff; }
.site-nav .nav-back { color: #FFFFFF99; }
.site-nav .nav-back:hover { color: #fff; }
.site-nav .btn-ghost { border-color: #FFFFFF3D; color: #fff; }
.site-nav .btn-ghost:hover { border-color: #fff; background: #FFFFFF14; }
.site-nav .btn-primary { background: #fff; color: var(--ink); box-shadow: none; }
.site-nav .btn-primary:hover { background: #FFFFFFE0; filter: none; }
.site-nav :focus-visible { outline-color: #fff; }

/* ─── nav dropdowns ─── */

.nav-dd { position: relative; }

.nav-dd-t {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
}

.nav-dd-t svg { transition: transform .18s; opacity: .6; }
.nav-dd.open .nav-dd-t svg { transform: rotate(180deg); }

.nav-dd-m {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  min-width: 236px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 14px 40px -12px rgba(27, 27, 31, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  z-index: 60;

  /* _shared.css used `transition: all .16s ease`, which animated
     `visibility` too. Discrete properties flip at the midpoint of a
     transition, so for ~80ms after opening, the panel was still
     `visibility: hidden` — and a hidden element cannot take focus, so
     the keyboard path silently left focus on the trigger. Only the
     two continuous properties are transitioned; visibility flips at
     once. */
  transition: opacity .16s ease, transform .16s ease;
}

.nav-dd.open .nav-dd-m {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dd-m a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.nav-dd-m a:hover { background: var(--paper-2); color: var(--ink); }
.nav-dd-m a.current { color: var(--p); font-weight: 500; }

.nav-dd-m a i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-dd-m a span { flex: 1; }

.nav-dd-m a em {
  font-family: var(--label);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--ink-3);
  border: 1px solid var(--rule-2);
  border-radius: 99px;
  padding: 1px 6px;
}

.site-nav .nav-dd-m { background: var(--ink); border-color: #FFFFFF26; }
.site-nav .nav-dd-m a { color: #FFFFFFCC; }
.site-nav .nav-dd-m a:hover { background: #FFFFFF14; color: #fff; }
.site-nav .nav-dd-m a.current { color: #fff; font-weight: 500; }
.site-nav .nav-dd-m a em { color: #FFFFFF99; border-color: #FFFFFF33; }

/* ─── accent dots in the products dropdown ───
   Keyed by page slug so PHP never carries a hex. The values are the
   per-product tokens in tokens.css, which stay the single source for
   those eight colours. */

.dot { background: var(--p); }
.dot-simchoices { background: var(--p-sim); }
.dot-strategyspaces { background: var(--p-strategy); }
.dot-quanti { background: var(--p-quanti); }
.dot-quali { background: var(--p-quali); }
.dot-lexis { background: var(--p-lexis); }
.dot-huddlegoals { background: var(--p-huddle); }
.dot-hyvemaps { background: var(--p-maps); }
.dot-phonos { background: var(--p-phonos); }

/* ─── hamburger ───
   Only ever shown below the nav breakpoint, and only when JS is
   available to operate the drawer it controls. Without JS the stacked
   fallback at the bottom of this file takes over instead. */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border-radius: 8px;
  border: 1px solid #FFFFFF3D;
  color: #fff;
}

.nav-toggle:hover { background: #FFFFFF14; }

.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 16px;
}

.nav-toggle-bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}

/* ─── mobile drawer ─── */

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
}

.nav-drawer[hidden] { display: none; }

.nav-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(27, 27, 31, .55);
  backdrop-filter: blur(2px);
}

.nav-drawer-panel {
  position: relative;
  margin-left: auto;
  width: min(400px, 88vw);
  height: 100%;
  overflow-y: auto;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 24px 24px;
}

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.nav-drawer-head .brand-name { color: #fff; font-size: 19px; }
.nav-drawer-head .brand-logo-img { width: 22px; height: 22px; filter: invert(1); }
.nav-drawer-head .brand-sep { height: 17px; background: rgba(255, 255, 255, .3); }

.nav-drawer-close {
  width: 40px;
  height: 40px;
  margin-right: -8px;
  font-size: 24px;
  line-height: 1;
  color: rgba(255, 255, 255, .7);
  border-radius: 8px;
}

.nav-drawer-close:hover { color: #fff; background: #FFFFFF14; }

.nav-drawer-nav { display: flex; flex-direction: column; }

.nav-drawer-group { border-bottom: 1px solid rgba(255, 255, 255, .12); }

.nav-drawer-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  list-style: none;
}

.nav-drawer-group > summary::-webkit-details-marker { display: none; }

.nav-drawer-group > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
  opacity: .6;
}

.nav-drawer-group[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.nav-drawer-links { display: flex; flex-direction: column; padding-bottom: 10px; }

.nav-drawer-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .78);
}

.nav-drawer-links a:hover,
.nav-drawer-links a.current { color: #fff; }

.nav-drawer-links a i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-drawer-links a span { flex: 1; }

.nav-drawer-links a em {
  font-family: var(--label);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 99px;
  padding: 1px 6px;
}

.nav-drawer-flat { padding: 6px 0 0; }

.nav-drawer-flat a {
  padding: 15px 0;
  font-size: 15px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.nav-drawer-cta { margin-top: 24px; }
.nav-drawer-cta .btn { width: 100%; justify-content: center; }

body.drawer-open { overflow: hidden; }

/* ─── section shell ─── */

section.section {
  padding: 72px 0;
  border-top: 1px solid var(--rule);
}

.section-head {
  display: grid;
  grid-template-columns: 1.25fr 1.4fr;
  gap: 48px;
  margin-bottom: 56px;
  align-items: end;
}

.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-wrap: balance;
}

.section-head h2 em { color: var(--p); font-style: italic; }

.section-head .lede {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 56ch;
  line-height: 1.55;
  text-wrap: pretty;
}

.section-head .num {
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--p);
  text-transform: none;
  display: block;
  margin-bottom: 14px;
  font-weight: 500;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--p);
  width: fit-content;
}

/* ─── footer ─── */

footer.site-foot {
  border-top: none;
  padding: 0;
  background: var(--ink);
  color: #fff;
  margin-top: 0;
}

footer.site-foot .foot-photo { position: relative; height: 200px; overflow: hidden; }

footer.site-foot .foot-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

footer.site-foot .foot-photo .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 27, 31, .35), var(--ink));
}

footer.site-foot .foot-photo .line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 1;
}

footer.site-foot .foot-photo .line .wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

footer.site-foot .foot-photo h4 {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 34ch;
  font-weight: 400;
}

/* The source element is <div class="wrap foot-inner">, and _shared.css
   set `padding: 56px 0 40px` here — a shorthand that also zeroed the
   horizontal padding .wrap had just set, so the prototype's footer
   content sits flush against the viewport edge on every screen. Setting
   only the two axes it means to set keeps the gutter. */
footer.site-foot .foot-inner { padding-top: 56px; padding-bottom: 40px; }

.foot-grid {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 88px;
  align-items: start;
}

.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.foot-brand .brand-name { font-size: 30px; color: #fff; }
.foot-brand .brand-logo-img { width: 32px; height: 32px; filter: invert(1); }
.foot-brand .brand-sep { height: 24px; background: rgba(255, 255, 255, .3); }

.foot-blurb {
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 38ch;
  color: rgba(255, 255, 255, .68);
}

.foot-locations { margin-top: 14px; }

.foot-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  font-size: 13px;
}

.foot-cols h5 {
  font-family: var(--label);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 14px;
  font-weight: 500;
  color: var(--p);
}

.foot-cols ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.foot-cols a { color: rgba(255, 255, 255, .8); }
.foot-cols a:hover { color: #fff; }
.foot-cols a.current { color: var(--p); }

.foot-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-family: var(--label);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, .55);
}

footer.site-foot .foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

footer.site-foot .foot-cta:hover { background: rgba(255, 255, 255, .88); }
footer.site-foot :focus-visible { outline-color: #fff; }

/* ─── responsive ─── */

@media (max-width: 1080px) {
  .caps { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
}

/* Above the drawer breakpoint the drawer never exists, whatever state
   JS left it in. */
@media (min-width: 981px) {
  .nav-drawer { display: none; }
}

@media (max-width: 980px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; }

  /* CLAUDE.md §2.3 defect 1: the prototype hid nav.primary here and
     shipped nothing in its place. It is still hidden — but only where
     the hamburger and drawer can replace it. */
  .js nav.primary { display: none; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav-cta .btn-primary { display: none; }
  .js .nav-cta .nav-back { display: none; }
  .js .nav-cta .nav-alt { display: none; }

  /*
   * No-JS fallback. A hamburger that opens a JS drawer is dead markup
   * without JS, so instead the masthead stops being sticky, wraps, and
   * lays the whole nav out as a stacked list with both dropdown panels
   * permanently open. Every link stays reachable; the group triggers
   * become inert labels because there is nothing to toggle.
   */
  .no-js header.site-nav { position: static; }
  .no-js .nav-drawer { display: none; }

  .no-js .nav-inner {
    flex-wrap: wrap;
    height: auto;
    row-gap: 14px;
    padding-top: 12px;
    padding-bottom: 16px;
  }

  .no-js nav.primary {
    display: flex;
    flex-basis: 100%;
    order: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .no-js .nav-dd { width: 100%; }

  .no-js .nav-dd-t {
    pointer-events: none;
    padding-top: 14px;
    font-family: var(--label);
    font-size: 12.5px;
    letter-spacing: 0.01em;
    color: #FFFFFF80;
  }

  .no-js .nav-dd-t svg { display: none; }

  .no-js .nav-dd-m,
  .no-js .site-nav .nav-dd-m {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .no-js .nav-dd-m a { padding-left: 0; padding-right: 0; }
}

@media (max-width: 720px) {
  .section-head { gap: 18px; }
  .foot-grid { grid-template-columns: 1fr; gap: 40px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .foot-bottom { flex-direction: column; gap: 8px; }
  footer.site-foot .foot-photo { height: 170px; }
  footer.site-foot .foot-photo .line .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
}