/* =========================================================
   BENGAL AI HUB — page/component extensions
   Listings, detail pages, forms, playground, admin (demo).
   ========================================================= */

/* ----- generic section rhythm ----- */
.section {
  padding: 100px 0;
  background: var(--void);
  position: relative;
}
.section.alt {
  background: var(--void-soft);
  border-top: 1px solid var(--panel-line);
  border-bottom: 1px solid var(--panel-line);
}
.section.tight {
  padding: 60px 0;
}

/* Section edge glow: every landing section, inner page hero, and regular
   content section gets the same orange top/bottom light. */
.landing-page > section,
.page-hero,
.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.landing-page > section::before,
.landing-page > section::after,
.page-hero::before,
.page-hero::after,
.section::before,
.section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(4.5rem, 8vw, 7.5rem);
  pointer-events: none;
  z-index: 1;
  opacity: 0.78;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
}
.landing-page > section::before,
.page-hero::before,
.section::before {
  top: 0;
  background-image:
    radial-gradient(72% 110% at 50% 0%, rgba(255, 122, 51, 0.4), rgba(255, 122, 51, 0.14) 36%, transparent 74%),
    linear-gradient(90deg, transparent 0%, rgba(255, 122, 51, 0.2) 14%, rgba(255, 179, 122, 0.72) 50%, rgba(255, 122, 51, 0.2) 86%, transparent 100%);
  background-size: 100% 100%, 100% 0.09375rem;
  background-position: center top, center top;
}
.landing-page > section::after,
.page-hero::after,
.section::after {
  bottom: 0;
  background-image:
    radial-gradient(72% 110% at 50% 100%, rgba(255, 122, 51, 0.4), rgba(255, 122, 51, 0.14) 36%, transparent 74%),
    linear-gradient(90deg, transparent 0%, rgba(255, 122, 51, 0.2) 14%, rgba(255, 179, 122, 0.72) 50%, rgba(255, 122, 51, 0.2) 86%, transparent 100%);
  background-size: 100% 100%, 100% 0.09375rem;
  background-position: center bottom, center bottom;
}
.landing-page > section > .wrap,
.landing-page > section > .hero-content,
.page-hero > .wrap,
.section > .wrap {
  position: relative;
  z-index: 2;
}

.section-head {
  margin-bottom: 48px;
  max-width: 640px;
}
/* "AI trends, tutorials & analysis" was wrapping onto two lines at the
   640px cap above — this section's heading needs the full row width to
   stay on one line, so it opts out of that constraint (its paragraph
   still reads fine at full width). */
#insights .section-head,
#case-studies-home .section-head,
#ai-for-bengal .section-head,
#ai-tools-models .section-head,
#ai-prompts .section-head,
#ai-articles .section-head,
#careers .section-head,
#testimonials-home .section-head {
  max-width: none;
}
#insights .section-head h2,
#case-studies-home .section-head h2,
#ai-for-bengal .section-head h2,
#ai-tools-models .section-head h2,
#ai-prompts .section-head h2,
#ai-articles .section-head h2,
#careers .section-head h2,
#testimonials-home .section-head h2 {
  white-space: nowrap;
}
@media (max-width: 700px) {
  #insights .section-head h2,
  #case-studies-home .section-head h2,
  #ai-for-bengal .section-head h2,
  #ai-tools-models .section-head h2,
  #ai-prompts .section-head h2,
  #ai-articles .section-head h2,
  #careers .section-head h2,
  #testimonials-home .section-head h2 {
    white-space: normal;
  }
}
.section-head h2 {
  font-size: clamp(46px, 5.5vw, 72px);
  font-weight: 800;
  color: #ffffff;
  margin-top: 12px;
  /* Same pulsing orange glow used on the other big section headings
     across the site (AI Capabilities, Built for your sector). */
  text-shadow:
    0 0 26px rgba(255, 122, 51, 0.45),
    0 0 60px rgba(255, 122, 51, 0.3),
    0 0 110px rgba(255, 122, 51, 0.18);
}
@keyframes sectionHeadGlow {
  0%, 100% {
    text-shadow:
      0 0 26px rgba(255, 122, 51, 0.45),
      0 0 60px rgba(255, 122, 51, 0.3),
      0 0 110px rgba(255, 122, 51, 0.18);
  }
  50% {
    text-shadow:
      0 0 38px rgba(255, 122, 51, 0.6),
      0 0 82px rgba(255, 122, 51, 0.42),
      0 0 140px rgba(255, 122, 51, 0.26);
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-head h2 {
    animation: none;
  }
}
.section-head p {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 800;
  color: var(--paper-dim);
  line-height: 1.7;
}

/* ----- filter bar ----- */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* ----- card grids ----- */
.grid {
  display: grid;
  /* Lets the .entity-card 3D tumble tilt below actually read as a tilt in
     depth instead of a flat skew. */
  perspective: 1200px;
  /* Used to be a 1px gap with the container's own background showing
     through as a hairline between cards — but a grid container always
     paints its full track area regardless of which cells hold a card, so
     any listing whose item count wasn't an exact multiple of its column
     count showed a bare "ghost" block in the leftover cell(s) of the last
     row. Plain spacing, no border/fill anywhere on the grid or its cards —
     each card's own background is the only thing that shows. */
  gap: 20px;
  background: transparent;
  border: none;
}
.grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) {
  .grid.cols-3,
  .grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

.entity-card {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  /* Visibly glowing even at rest (not just on hover) — orange by default,
     overridden per card below. */
  border: 1px solid rgba(255, 122, 51, 0.3);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 22px -8px rgba(255, 122, 51, 0.45);
  padding: 38px 34px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease;
  min-height: 100%;
}
a.entity-card {
  cursor: pointer;
}
@keyframes entityCardGlowPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 22px -8px rgba(255, 122, 51, 0.45); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 32px -6px rgba(255, 122, 51, 0.65); }
}
.grid > .entity-card:nth-child(3n+2) {
  border-color: rgba(110, 140, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 22px -8px rgba(110, 140, 255, 0.45);
}
.grid > .entity-card:nth-child(3n+3) {
  border-color: rgba(244, 114, 182, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 22px -8px rgba(244, 114, 182, 0.45);
}
@keyframes entityCardGlowPulseBlue {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 22px -8px rgba(110, 140, 255, 0.45); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 32px -6px rgba(110, 140, 255, 0.65); }
}
@keyframes entityCardGlowPulsePink {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 22px -8px rgba(244, 114, 182, 0.45); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 32px -6px rgba(244, 114, 182, 0.65); }
}
/* Colorful shimmering top edge, cycling accent colors per card — same
   language as the AI Capabilities cards. Always animating now, not just
   on hover. */
.entity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #ff7a33, #ffb37a, #ff7a33);
  background-size: 300% 100%;
  opacity: 0.6;
  animation: entityCardShimmer 4s linear infinite;
  transition: opacity 0.3s ease;
}
.entity-card:hover::before {
  opacity: 1;
}
@keyframes entityCardShimmer {
  0% { background-position: -300% center; }
  100% { background-position: 300% center; }
}
.grid.cols-3 > .entity-card:nth-child(3n+1)::before,
.grid > .entity-card:nth-child(3n+1)::before { background: linear-gradient(90deg, #ff7a33, #ffb37a, #ff7a33); }
.grid.cols-3 > .entity-card:nth-child(3n+2)::before,
.grid > .entity-card:nth-child(3n+2)::before { background: linear-gradient(90deg, #6e8cff, #a3b6ff, #6e8cff); }
.grid.cols-3 > .entity-card:nth-child(3n+3)::before,
.grid > .entity-card:nth-child(3n+3)::before { background: linear-gradient(90deg, #f472b6, #ffa3d6, #f472b6); }
@media (prefers-reduced-motion: reduce) {
  .entity-card,
  .entity-card::before {
    animation: none;
  }
}

/* "Tumble" tilt on hover — a real 3D rotation (not just a flat lift),
   alternating tilt direction per card below so the row doesn't feel
   mechanical. */
.entity-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.entity-card:hover {
  background: linear-gradient(155deg, rgba(255, 122, 51, 0.07), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 122, 51, 0.4);
  transform: perspective(1200px) rotateX(-5deg) rotateY(4deg) translateY(-10px) scale(1.03);
  box-shadow:
    0 4px 16px -4px rgba(255, 122, 51, 0.3),
    0 30px 70px -20px rgba(255, 122, 51, 0.35),
    0 0 0 1px rgba(255, 122, 51, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.grid > .entity-card:nth-child(even):hover {
  transform: perspective(1200px) rotateX(-5deg) rotateY(-4deg) translateY(-10px) scale(1.03);
}
.grid > .entity-card:nth-child(3n+2):hover {
  background: linear-gradient(155deg, rgba(110, 140, 255, 0.07), rgba(255, 255, 255, 0.02));
  border-color: rgba(110, 140, 255, 0.4);
  box-shadow:
    0 4px 16px -4px rgba(110, 140, 255, 0.3),
    0 30px 70px -20px rgba(110, 140, 255, 0.35),
    0 0 0 1px rgba(110, 140, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.grid > .entity-card:nth-child(3n+3):hover {
  background: linear-gradient(155deg, rgba(244, 114, 182, 0.07), rgba(255, 255, 255, 0.02));
  border-color: rgba(244, 114, 182, 0.4);
  box-shadow:
    0 4px 16px -4px rgba(244, 114, 182, 0.3),
    0 30px 70px -20px rgba(244, 114, 182, 0.35),
    0 0 0 1px rgba(244, 114, 182, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .entity-card { transform: none; }
  .entity-card:hover { transform: none; }
  .entity-card:hover::before { animation: none; }
}
.entity-card .ec-media {
  margin: -38px -34px 6px;
  height: 190px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.entity-card .ec-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.entity-card:hover .ec-media img {
  transform: scale(1.06);
}
.entity-card .ec-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 15, 0) 40%, rgba(10, 11, 15, 0.9));
}
.entity-card .ec-media-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, rgba(255, 122, 51, 0.16), rgba(255, 122, 51, 0.03));
}
.entity-card .ec-media-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 122, 51, 0.35), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(110, 140, 255, 0.25), transparent 55%);
}
.entity-card .ec-media-fallback span {
  position: relative;
  z-index: 1;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 42px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 24px rgba(255, 122, 51, 0.6);
}
.grid > .entity-card:nth-child(3n+2) .ec-media-fallback {
  background: linear-gradient(155deg, rgba(110, 140, 255, 0.16), rgba(110, 140, 255, 0.03));
}
.grid > .entity-card:nth-child(3n+2) .ec-media-fallback::after {
  background:
    radial-gradient(circle at 30% 20%, rgba(110, 140, 255, 0.35), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(244, 114, 182, 0.25), transparent 55%);
}
.grid > .entity-card:nth-child(3n+2) .ec-media-fallback span {
  text-shadow: 0 0 24px rgba(110, 140, 255, 0.6);
}
.grid > .entity-card:nth-child(3n+3) .ec-media-fallback {
  background: linear-gradient(155deg, rgba(244, 114, 182, 0.16), rgba(244, 114, 182, 0.03));
}
.grid > .entity-card:nth-child(3n+3) .ec-media-fallback::after {
  background:
    radial-gradient(circle at 30% 20%, rgba(244, 114, 182, 0.35), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(255, 122, 51, 0.25), transparent 55%);
}
.grid > .entity-card:nth-child(3n+3) .ec-media-fallback span {
  text-shadow: 0 0 24px rgba(244, 114, 182, 0.6);
}
.entity-card .gl {
  position: absolute;
  top: -40%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    rgba(110, 140, 255, 0.35),
    transparent 70%
  );
  opacity: 0.12;
  filter: blur(4px);
  transition: opacity 0.3s;
  pointer-events: none;
}
.entity-card:hover .gl {
  opacity: 1;
}
.entity-card .ec-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5);
}
.entity-card .ec-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.entity-card .ec-icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, rgba(255, 122, 51, 0.2), rgba(255, 122, 51, 0.05));
}
.entity-card .ec-icon-fallback span {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
}
.grid > .entity-card:nth-child(3n+2) .ec-icon-fallback {
  background: linear-gradient(155deg, rgba(110, 140, 255, 0.2), rgba(110, 140, 255, 0.05));
}
.grid > .entity-card:nth-child(3n+3) .ec-icon-fallback {
  background: linear-gradient(155deg, rgba(244, 114, 182, 0.2), rgba(244, 114, 182, 0.05));
}
.entity-card .top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.entity-card .idx {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--circuit);
  letter-spacing: 0.08em;
}
.entity-card h3 {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 27px;
  line-height: 1.15;
  color: var(--paper);
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}
.entity-card p {
  font-size: 14.5px;
  color: var(--mute);
  line-height: 1.65;
  position: relative;
  z-index: 1;
  flex: 1;
}
.entity-card .meta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.entity-card .foot-link {
  margin-top: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ember);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.entity-card .foot-link .arrow {
  transition: transform 0.25s ease;
}
.entity-card:hover .foot-link .arrow {
  transform: translateX(5px);
}

/* status pills */
.pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid var(--panel-line);
  color: var(--mute);
  white-space: nowrap;
}
.pill.active {
  color: var(--good);
  border-color: var(--good);
  background: rgba(52, 211, 153, 0.08);
  box-shadow: 0 0 12px -3px rgba(52, 211, 153, 0.5);
}
.pill.soon {
  color: var(--warn);
  border-color: var(--warn);
  background: rgba(251, 191, 36, 0.08);
  box-shadow: 0 0 12px -3px rgba(251, 191, 36, 0.5);
}
.pill.dev {
  color: var(--circuit);
  border-color: var(--circuit);
  background: rgba(110, 140, 255, 0.08);
  box-shadow: 0 0 12px -3px rgba(110, 140, 255, 0.5);
}
.pill.archived {
  color: var(--mute);
  border-color: var(--panel-line);
}
.pill.ember {
  color: var(--ember);
  border-color: var(--ember);
  background: rgba(255, 122, 51, 0.08);
  box-shadow: 0 0 12px -3px rgba(255, 122, 51, 0.5);
}

/* ----- detail layout ----- */
.detail {
  padding: 100px 0 120px;
  background: var(--void);
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: start;
}
@media (max-width: 980px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}
/* Ratio variants for admin detail-grid layouts (dashboard, application/enquiry
   detail pages). These used to be set as an inline style="grid-template-columns"
   on the element, which — being inline — always outranked the media-query rule
   above regardless of specificity, so those pages never collapsed to one column
   on narrow screens. Using a class instead lets the same 980px breakpoint win. */
.detail-grid.ratio-14 {
  grid-template-columns: 1.4fr 1fr;
}
.detail-grid.ratio-11 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 980px) {
  .detail-grid.ratio-14,
  .detail-grid.ratio-11 {
    grid-template-columns: 1fr;
  }
}
.prose h2 {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 26px;
  color: var(--paper);
  margin: 44px 0 16px;
  letter-spacing: 0.01em;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--paper-dim);
  margin-bottom: 16px;
}
.prose ul {
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prose ul li {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--paper-dim);
  padding-left: 22px;
  position: relative;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--ember);
  transform: rotate(45deg);
}
.tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 20px;
}

.sidebar {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--panel-line);
  border: 1px solid var(--panel-line);
}
.sidebar .block {
  background: var(--panel);
  padding: 22px 22px;
}
.sidebar .block h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 12px;
}
.sidebar .kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px solid var(--panel-line);
}
.sidebar .kv:last-child {
  border-bottom: none;
}
.sidebar .kv .k {
  color: var(--mute);
}
.sidebar .kv .v {
  color: var(--paper);
  text-align: right;
}
.sidebar .cta-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* related grid */
.related-strip {
  display: flex;
  gap: 20px;
  background: transparent;
  border: none;
  overflow-x: auto;
  padding: 6px 6px 16px;
  margin-top: 4px;
  perspective: 1200px;
}
.related-strip .entity-card {
  min-width: 240px;
  /* Grow to fill the row when there are only 1-3 cards (the common case —
     "Related Solutions" only ever shows a handful) instead of leaving the
     container's own hairline-border background exposed as a visibly bare
     block after the last card. Never shrinks below 240px, so once there
     are enough cards to fill the row on their own, this has no effect and
     the row still scrolls horizontally exactly as before. */
  flex: 1 0 240px;
}
.related-strip .entity-card:nth-child(3n+2) {
  border-color: rgba(110, 140, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 22px -8px rgba(110, 140, 255, 0.45);
}
.related-strip .entity-card:nth-child(3n+3) {
  border-color: rgba(244, 114, 182, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 22px -8px rgba(244, 114, 182, 0.45);
}
.related-strip .entity-card:nth-child(3n+1)::before { background: linear-gradient(90deg, #ff7a33, #ffb37a, #ff7a33); }
.related-strip .entity-card:nth-child(3n+2)::before { background: linear-gradient(90deg, #6e8cff, #a3b6ff, #6e8cff); }
.related-strip .entity-card:nth-child(3n+3)::before { background: linear-gradient(90deg, #f472b6, #ffa3d6, #f472b6); }
.related-strip .entity-card:hover {
  transform: perspective(1200px) rotateX(-5deg) rotateY(4deg) translateY(-10px) scale(1.03);
}
.related-strip .entity-card:nth-child(even):hover {
  transform: perspective(1200px) rotateX(-5deg) rotateY(-4deg) translateY(-10px) scale(1.03);
}
.related-strip .entity-card:nth-child(3n+2):hover {
  background: linear-gradient(155deg, rgba(110, 140, 255, 0.07), rgba(255, 255, 255, 0.02));
  border-color: rgba(110, 140, 255, 0.4);
  box-shadow:
    0 4px 16px -4px rgba(110, 140, 255, 0.3),
    0 30px 70px -20px rgba(110, 140, 255, 0.35),
    0 0 0 1px rgba(110, 140, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.related-strip .entity-card:nth-child(3n+3):hover {
  background: linear-gradient(155deg, rgba(244, 114, 182, 0.07), rgba(255, 255, 255, 0.02));
  border-color: rgba(244, 114, 182, 0.4);
  box-shadow:
    0 4px 16px -4px rgba(244, 114, 182, 0.3),
    0 30px 70px -20px rgba(244, 114, 182, 0.35),
    0 0 0 1px rgba(244, 114, 182, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ----- faq accordion ----- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--panel-line);
  border: 1px solid var(--panel-line);
}
.faq-item {
  background: var(--void-soft);
}
.faq-q {
  width: 100%;
  text-align: left;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: transparent;
  border: none;
  color: var(--paper);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
}
.faq-q .plus {
  font-family: "JetBrains Mono", monospace;
  color: var(--ember);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.faq-item.open .faq-q .plus {
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 22px;
}
.faq-item.open .faq-a {
  /* .faq-item.open only ever set padding-bottom here — max-height stayed
     at the closed state's 0 with nothing to override it. Capped generously
     rather than measured exactly, same as every other answer on the page;
     any real answer text is far short of this. */
  max-height: 600px;
  padding-bottom: 28px;
}
.faq-a p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--paper-dim);
}

/* ----- timeline / workflow ----- */
.timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 30px;
}
.timeline .step {
  flex: 1;
  min-width: 160px;
  padding: 20px 22px 20px 0;
  position: relative;
}
.timeline .step::after {
  content: "";
  position: absolute;
  top: 26px;
  right: 0;
  width: 60%;
  height: 1px;
  background: var(--panel-line);
}
.timeline .step:last-child::after {
  display: none;
}
.timeline .step .num {
  font-family: "JetBrains Mono", monospace;
  color: var(--ember);
  font-size: 12px;
  border: 1px solid var(--ember);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.timeline .step h4 {
  font-size: 14px;
  color: var(--paper);
  margin-bottom: 6px;
}
.timeline .step p {
  font-size: 12.5px;
  color: var(--mute);
  line-height: 1.6;
}

/* ----- stat row ----- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--panel-line);
  border: 1px solid var(--panel-line);
  margin-top: 44px;
}
.stat-cell {
  background: var(--void-soft);
  padding: 24px 22px;
}
.stat-cell .num {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 40px;
  color: var(--ember);
  line-height: 1;
}
.stat-cell .lbl {
  margin-top: 8px;
  font-size: 12px;
  color: var(--mute);
}
@media (max-width: 760px) {
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ----- testimonial ----- */
.testi {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 122, 51, 0.22);
  border-radius: 14px;
  padding: 34px 30px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 24px -10px rgba(255, 122, 51, 0.4);
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.35s ease;
}
/* Large decorative quote mark glowing softly in the corner. */
.testi::before {
  content: '\201C';
  position: absolute;
  top: -6px;
  right: 18px;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 100px;
  line-height: 1;
  color: rgba(255, 122, 51, 0.14);
  pointer-events: none;
}
.testi:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 122, 51, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 50px -20px rgba(255, 122, 51, 0.45),
    0 0 36px -8px rgba(255, 122, 51, 0.5);
}
.grid.cols-2 > .testi:nth-child(even) {
  border-color: rgba(110, 140, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 24px -10px rgba(110, 140, 255, 0.4);
}
.grid.cols-2 > .testi:nth-child(even):hover {
  border-color: rgba(110, 140, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 50px -20px rgba(110, 140, 255, 0.45),
    0 0 36px -8px rgba(110, 140, 255, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .testi,
  .testi:hover {
    transform: none;
  }
}
.testi .quote {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.75;
  color: var(--paper-dim);
  font-style: italic;
}
.testi .who {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.testi .who .avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 122, 51, 0.18), rgba(255, 122, 51, 0.05));
  border: 1px solid rgba(255, 122, 51, 0.35);
  box-shadow: 0 0 14px -4px rgba(255, 122, 51, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--ember);
  overflow: hidden;
}
.testi .who .avatar.avatar-photo {
  padding: 0;
}
.testi .who .avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}
.grid.cols-2 > .testi:nth-child(even) .who .avatar {
  background: linear-gradient(135deg, rgba(110, 140, 255, 0.18), rgba(110, 140, 255, 0.05));
  border-color: rgba(110, 140, 255, 0.35);
  box-shadow: 0 0 14px -4px rgba(110, 140, 255, 0.5);
  color: #6e8cff;
}
.testi .who .name {
  font-size: 13.5px;
  color: var(--paper);
  font-weight: 600;
}
.testi .who .role {
  font-size: 12px;
  color: var(--mute);
}

/* =========================================================
   FORMS
   ========================================================= */
.form-shell {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 122, 51, 0.2);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 30px 70px -30px rgba(255, 122, 51, 0.3);
  padding: 44px;
  position: relative;
  overflow: hidden;
}
/* Colorful shimmering top edge, same language as the card grids
   elsewhere on the site. */
.form-shell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ff7a33, #6e8cff, #f472b6, #ff7a33);
  background-size: 300% 100%;
  opacity: 0.7;
  animation: formShellShimmer 5s linear infinite;
}
@keyframes formShellShimmer {
  0% { background-position: -300% center; }
  100% { background-position: 300% center; }
}
@media (prefers-reduced-motion: reduce) {
  .form-shell::before {
    animation: none;
  }
}
@media (max-width: 640px) {
  .form-shell {
    padding: 28px 22px;
  }
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid.single {
  grid-template-columns: 1fr;
}
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field.span-2 {
  grid-column: 1 / -1;
}
.field label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.field label .opt {
  text-transform: none;
  font-family: "Inter", sans-serif;
  letter-spacing: 0;
  color: var(--mute);
  opacity: 0.7;
}
.field input,
.field select,
.field textarea {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  color: var(--paper);
  padding: 13px 14px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
  width: 100%;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--mute);
}
/* The native <select> dropdown popup ignores the dark theme by default in
   most browsers (white background, near-invisible text) unless the
   <option> elements are given explicit colors. */
.field select option {
  background: #0c0d11;
  color: var(--paper);
}
.field select option:checked,
.field select option:hover {
  background: var(--ember);
  color: #0c0d11;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ember);
  background: rgba(255, 122, 51, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 122, 51, 0.18), 0 0 20px -6px rgba(255, 122, 51, 0.5);
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  border-color: var(--bad);
}
.field .err {
  font-size: 11.5px;
  color: var(--bad);
  display: none;
}
.field.invalid .err {
  display: block;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.check-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--ember);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.check-row label {
  font-size: 12.5px;
  color: var(--mute);
  line-height: 1.6;
}
.check-row a {
  color: var(--ember);
}
.form-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.form-note {
  font-size: 11.5px;
  color: var(--mute);
}
/* Current-file preview under a file input (x-field type="file") — shows
   the actual uploaded image (or a generic file icon for non-images) so an
   admin can see what's set without opening the file separately. */
.field-file-current {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  max-width: 100%;
}
.field-file-preview {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--panel-line);
  background: var(--void-soft);
  flex-shrink: 0;
}
.field-file-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--panel-line);
  background: var(--void-soft);
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.field-file-current .form-note {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.field-file-current .form-note a {
  color: var(--paper-dim);
  text-decoration: underline;
  text-decoration-color: var(--panel-line);
  text-underline-offset: 2px;
  word-break: break-word;
}
.field-file-current .form-note a:hover {
  color: var(--ember);
}
.form-success {
  display: none;
  border: 1px solid var(--good);
  background: rgba(95, 216, 143, 0.08);
  padding: 26px 28px;
  align-items: flex-start;
  gap: 14px;
}
.form-success.show {
  display: flex;
}
.form-success .ok-mark {
  width: 26px;
  height: 26px;
  border: 1px solid var(--good);
  color: var(--good);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
}
.form-success h4 {
  font-size: 15px;
  color: var(--paper);
  margin-bottom: 6px;
}
.form-success p {
  font-size: 13px;
  color: var(--paper-dim);
  line-height: 1.6;
}
form.hidden {
  display: none;
}

/* =========================================================
   PLAYGROUND DEMOS
   ========================================================= */
.demo-stage {
  background: var(--void-soft);
  border: 1px solid var(--panel-line);
  padding: 28px;
  margin-top: 26px;
}
.demo-stage .stage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.demo-stage .stage-head h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper);
}
.demo-drop {
  border: 1px dashed var(--panel-line);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.demo-drop:hover,
.demo-drop.drag {
  border-color: var(--ember);
  background: rgba(255, 122, 51, 0.04);
}
.demo-drop p {
  font-size: 13px;
  color: var(--mute);
  margin-top: 10px;
}
.demo-progress {
  height: 4px;
  background: var(--panel-line);
  margin-top: 18px;
  overflow: hidden;
  display: none;
}
.demo-progress.show {
  display: block;
}
.demo-progress .bar {
  height: 100%;
  width: 0%;
  background: var(--ember);
  transition: width 0.3s ease;
}
.demo-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.demo-steps .s {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  padding: 6px 10px;
  border: 1px solid var(--panel-line);
  color: var(--mute);
}
.demo-steps .s.active {
  color: var(--ember);
  border-color: var(--ember);
}
.demo-steps .s.done {
  color: var(--good);
  border-color: var(--good);
}
.demo-output {
  margin-top: 20px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  padding: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  color: var(--paper-dim);
  line-height: 1.7;
  white-space: pre-wrap;
  min-height: 60px;
}
.demo-output .k {
  color: var(--circuit);
}
.demo-output .v {
  color: var(--paper);
}
.demo-textarea {
  width: 100%;
  min-height: 120px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  color: var(--paper);
  padding: 14px;
  font-size: 13.5px;
  font-family: "Inter", sans-serif;
  resize: vertical;
}
.demo-select-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.demo-select-row select {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  color: var(--paper);
  padding: 10px 12px;
  font-size: 12.5px;
}
.demo-select-row select option {
  background: #0c0d11;
  color: var(--paper);
}
.sim-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ember);
  border: 1px solid var(--ember);
  padding: 5px 10px;
}
.sim-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ember);
  border-radius: 50%;
  animation: emberPulse 1.6s ease-in-out infinite;
}
.agent-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  max-height: 260px;
  overflow-y: auto;
}
.agent-line {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
}
.agent-line .who {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--circuit);
  flex-shrink: 0;
  width: 74px;
  padding-top: 2px;
}
.agent-line.agent .who {
  color: var(--ember);
}
.agent-line .msg {
  color: var(--paper-dim);
}

/* =========================================================
   ASSESSMENT / ROI CALCULATOR
   ========================================================= */
.assess-shell {
  background: var(--panel);
  border: 1px solid var(--panel-line);
}
.assess-progress-bar {
  height: 3px;
  background: var(--panel-line);
}
.assess-progress-bar .fill {
  height: 100%;
  background: var(--ember);
  width: 0%;
  transition: width 0.35s ease;
}
.assess-body {
  padding: 44px;
}
@media (max-width: 640px) {
  .assess-body {
    padding: 26px 20px;
  }
}
.assess-step {
  display: none;
}
.assess-step.active {
  display: block;
  animation: fadeUp 0.4s ease-out both;
}
.assess-step .q {
  font-size: 19px;
  color: var(--paper);
  margin-bottom: 22px;
  max-width: 46ch;
}
.assess-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assess-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--panel-line);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.assess-opt:hover {
  border-color: var(--paper-dim);
}
.assess-opt.selected {
  border-color: var(--ember);
  background: rgba(255, 122, 51, 0.08);
}
.assess-opt .radio {
  width: 16px;
  height: 16px;
  border: 1px solid var(--panel-line);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.assess-opt.selected .radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--ember);
  border-radius: 50%;
}
.assess-opt .txt {
  font-size: 14px;
  color: var(--paper-dim);
}
.assess-opt.selected .txt {
  color: var(--paper);
}
.assess-nav {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.assess-nav .step-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--mute);
}
.assess-result {
  display: none;
}
.assess-result.active {
  display: block;
  animation: fadeUp 0.5s ease-out both;
}
.score-ring-wrap {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}
.score-ring {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}
.score-ring svg circle {
  transition: stroke-dashoffset 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.score-num {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 44px;
  color: var(--paper);
}
.score-band {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ember);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 6px;
}
.result-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}
@media (max-width: 640px) {
  .result-cols {
    grid-template-columns: 1fr;
  }
}
.result-col h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 14px;
}
.result-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.result-col li {
  font-size: 13.5px;
  color: var(--paper-dim);
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}
.result-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  background: var(--ember);
  transform: rotate(45deg);
}

.roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 860px) {
  .roi-grid {
    grid-template-columns: 1fr;
  }
}
.roi-slider-row {
  margin-bottom: 26px;
}
.roi-slider-row .lbl-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--paper-dim);
}
.roi-slider-row .lbl-row .val {
  font-family: "JetBrains Mono", monospace;
  color: var(--ember);
}
.roi-slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--ember);
}
.roi-output {
  background: var(--void-soft);
  border: 1px solid var(--panel-line);
  padding: 30px;
}
.roi-output .big {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 42px;
  color: var(--ember);
  line-height: 1;
}
.roi-output .lbl {
  font-size: 12px;
  color: var(--mute);
  margin-top: 8px;
}
.roi-output .row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--panel-line);
  font-size: 13px;
}
.roi-output .row .v {
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
}

/* =========================================================
   TABLE (jobs, blog listing meta, etc.)
   ========================================================= */
.dtable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px -30px rgba(255, 122, 51, 0.25);
}
.dtable th,
.dtable td {
  padding: 16px 18px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--panel-line);
}
.dtable th {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  background: rgba(255, 255, 255, 0.02);
}
.dtable tr:last-child td {
  border-bottom: none;
}
.dtable tr.link {
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.dtable tr.link:hover {
  background: rgba(255, 122, 51, 0.06);
  box-shadow: inset 3px 0 0 var(--ember);
}
.dtable .empty-row td {
  text-align: center;
  color: var(--mute);
  padding: 40px 16px;
}

/* =========================================================
   ADMIN (client-side leads demo)
   ========================================================= */
body.admin-body {
  background: var(--void);
}
.admin-shell {
  min-height: 100vh;
}
.admin-side {
  background: var(--void-soft);
  border-right: 1px solid var(--panel-line);
  padding: 26px 20px;
  /* Fixed (not sticky) so the sidebar is pinned to the viewport regardless
     of how tall the page around it gets — .admin-main scrolls the window
     on its own and the sidebar never moves with it. */
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  overflow-y: auto;
  z-index: 50;
}
.admin-side .logo {
  margin-bottom: 30px;
  padding: 0 6px;
}
/* Mobile topbar (burger + logo) — hidden on desktop, shown only under the
   860px breakpoint where the sidebar switches to an off-canvas drawer. */
.admin-topbar-mobile {
  display: none;
}
.admin-burger-btn {
  width: 38px;
  height: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--panel-line);
  cursor: pointer;
}
.admin-burger-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--paper-dim);
}
.admin-backdrop {
  display: none;
}
@media (max-width: 860px) {
  .admin-topbar-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: var(--void-soft);
    border-bottom: 1px solid var(--panel-line);
    position: sticky;
    top: 0;
    z-index: 45;
  }
  .admin-topbar-mobile .logo {
    margin-bottom: 0;
  }
  /* Off-canvas drawer: fixed panel that slides in from the left instead of
     pushing/stacking above the page content (which used to dump the entire
     nav list above every page on mobile). */
  .admin-side {
    position: fixed;
    top: 0;
    left: 0;
    width: 270px;
    max-width: 84vw;
    height: 100vh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .admin-side.is-open {
    transform: translateX(0);
  }
  .admin-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(4, 5, 8, 0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 55;
  }
  .admin-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}
.admin-nav-group {
  margin-bottom: 22px;
}
.admin-nav-group h5 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 0 10px;
  margin-bottom: 8px;
}
.admin-nav-group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  font-size: 13.5px;
  color: var(--paper-dim);
  border-left: 2px solid transparent;
}
.admin-nav-group a:hover {
  color: var(--paper);
  background: var(--panel);
}
.admin-nav-group a.active {
  color: var(--paper);
  border-left-color: var(--ember);
  background: var(--panel);
}
.admin-nav-group a .count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--mute);
}
.admin-main {
  padding: 40px 44px;
  /* Sidebar is position:fixed (taken out of flow) and doesn't reserve any
     space of its own, so this margin is what actually keeps content clear
     of it on desktop. */
  margin-left: 250px;
  /* Fill whatever's left of the viewport next to the sidebar — no fixed cap,
     so tables/cards stretch to use the full window at any aspect ratio
     instead of stranding a blank margin on wide screens. A generous ceiling
     still kicks in on ultra-wide monitors so lines of text don't get silly. */
  width: auto;
  max-width: 1900px;
  /* Grid items default to min-width:auto, which stops them shrinking below
     their content's intrinsic width — a wide table would otherwise force
     this whole column (and the sidebar with it) to overflow horizontally
     instead of just scrolling its own content. */
  min-width: 0;
  overflow-x: auto;
}
@media (max-width: 860px) {
  .admin-main {
    /* Sidebar is an off-canvas drawer below this breakpoint (see the
       860px query further down), so content runs full-width. */
    margin-left: 0;
  }
}
@media (max-width: 640px) {
  .admin-main {
    padding: 26px 18px;
  }
}
.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34px;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-topbar h1 {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 28px;
  color: var(--paper);
}
.admin-gate {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
}
/* Floating glow orbs behind the login card — soft blurred circles that
   drift, breathe (scale up/down) and pulse in brightness, each on its own
   timing so they never move in lockstep. Purely decorative (aria-hidden),
   sized with clamp() so they scale down on narrow viewports instead of
   overflowing or dominating the screen. */
.admin-gate-orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.admin-gate-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.5;
  will-change: transform, opacity;
}
.admin-gate-orb.orb-1 {
  width: clamp(180px, 30vw, 380px);
  height: clamp(180px, 30vw, 380px);
  top: -8%;
  left: -8%;
  background: radial-gradient(circle, var(--a-purple, #667eea), transparent 70%);
  animation: admin-orb-drift-1 16s ease-in-out infinite;
}
.admin-gate-orb.orb-2 {
  width: clamp(160px, 26vw, 340px);
  height: clamp(160px, 26vw, 340px);
  bottom: -10%;
  right: -6%;
  background: radial-gradient(circle, var(--a-pink, #f472b6), transparent 70%);
  animation: admin-orb-drift-2 19s ease-in-out infinite;
  animation-delay: -4s;
}
.admin-gate-orb.orb-3 {
  width: clamp(120px, 20vw, 260px);
  height: clamp(120px, 20vw, 260px);
  top: 55%;
  left: 6%;
  background: radial-gradient(circle, var(--a-blue, #4facfe), transparent 70%);
  animation: admin-orb-drift-3 14s ease-in-out infinite;
  animation-delay: -8s;
}
.admin-gate-orb.orb-4 {
  width: clamp(100px, 16vw, 220px);
  height: clamp(100px, 16vw, 220px);
  top: 8%;
  right: 12%;
  background: radial-gradient(circle, var(--a-deep-purple, #764ba2), transparent 70%);
  animation: admin-orb-drift-4 21s ease-in-out infinite;
  animation-delay: -12s;
}
@keyframes admin-orb-drift-1 {
  0%, 100% {
    transform: translate(0, 0) scale(0.85);
    opacity: 0.35;
  }
  50% {
    transform: translate(6vw, 5vh) scale(1.25);
    opacity: 0.6;
  }
}
@keyframes admin-orb-drift-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1.1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-5vw, -6vh) scale(0.8);
    opacity: 0.65;
  }
}
@keyframes admin-orb-drift-3 {
  0%, 100% {
    transform: translate(0, 0) scale(0.9);
    opacity: 0.3;
  }
  50% {
    transform: translate(4vw, -4vh) scale(1.3);
    opacity: 0.55;
  }
}
@keyframes admin-orb-drift-4 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-4vw, 5vh) scale(0.7);
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-gate-orb {
    animation: none;
  }
}
/* Floating tech-equipment icons (monitor, keyboard, mouse, chip, server,
   code) scattered around the card — each drifts on its own slow loop and
   fades in/out through the motion so nothing suddenly pops at a hard
   viewport edge. Positioned in em/% around the card rather than pinned to
   exact pixels so they stay roughly in place across viewport sizes. */
.admin-gate-icons {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.admin-gate-float {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--a-light-purple, #a78bfa);
  filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.55));
  will-change: transform, opacity;
}
.admin-gate-float.float-1 {
  top: 14%;
  left: 12%;
  font-size: clamp(34px, 4.6vw, 54px);
  animation: admin-float-a 12s ease-in-out infinite;
}
.admin-gate-float.float-2 {
  top: 22%;
  right: 10%;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--a-pink, #f472b6);
  filter: drop-shadow(0 0 10px rgba(244, 114, 182, 0.55));
  animation: admin-float-b 15s ease-in-out infinite;
  animation-delay: -3s;
}
.admin-gate-float.float-3 {
  bottom: 20%;
  left: 8%;
  font-size: clamp(26px, 3.6vw, 38px);
  color: var(--a-blue, #4facfe);
  filter: drop-shadow(0 0 10px rgba(79, 172, 254, 0.55));
  animation: admin-float-c 13s ease-in-out infinite;
  animation-delay: -6s;
}
.admin-gate-float.float-4 {
  bottom: 14%;
  right: 14%;
  font-size: clamp(30px, 4.4vw, 48px);
  animation: admin-float-a 17s ease-in-out infinite;
  animation-delay: -9s;
}
.admin-gate-float.float-5 {
  top: 50%;
  left: 4%;
  font-size: clamp(26px, 3.6vw, 36px);
  color: var(--a-green, #34d399);
  filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.5));
  animation: admin-float-b 18s ease-in-out infinite;
  animation-delay: -11s;
}
.admin-gate-float.float-6 {
  top: 8%;
  right: 30%;
  font-size: clamp(22px, 3.2vw, 32px);
  color: var(--a-blue, #4facfe);
  filter: drop-shadow(0 0 10px rgba(79, 172, 254, 0.5));
  animation: admin-float-c 14s ease-in-out infinite;
  animation-delay: -4s;
}
@keyframes admin-float-a {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.35;
  }
  50% {
    transform: translate(3vw, -4vh) rotate(8deg);
    opacity: 0.85;
  }
}
@keyframes admin-float-b {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translate(-3.5vw, 3vh) rotate(-10deg);
    opacity: 0.8;
  }
}
@keyframes admin-float-c {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(0.9);
    opacity: 0.3;
  }
  50% {
    transform: translate(2.5vw, 4vh) rotate(6deg) scale(1.15);
    opacity: 0.75;
  }
}
@media (max-width: 640px) {
  /* Too crowded next to the card at phone widths — the orbs alone still
     carry the animated background there. */
  .admin-gate-icons {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-gate-float {
    animation: none;
  }
}
.admin-gate-home {
  position: fixed;
  top: 26px;
  left: 26px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  padding: 11px 20px 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.55);
  background: linear-gradient(
    120deg,
    rgba(102, 126, 234, 0.22),
    rgba(244, 114, 182, 0.12)
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 18px 1px rgba(102, 126, 234, 0.45),
    0 0 34px 4px rgba(167, 139, 250, 0.2);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.admin-gate-home i {
  font-size: 11px;
  transition: transform 0.2s ease;
}
@keyframes admin-gate-home-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.04) inset,
      0 0 18px 1px rgba(102, 126, 234, 0.45),
      0 0 34px 4px rgba(167, 139, 250, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 0 26px 3px rgba(244, 114, 182, 0.55),
      0 0 48px 10px rgba(102, 126, 234, 0.35);
  }
}
.admin-gate-home:hover {
  border-color: rgba(244, 114, 182, 0.8);
  background: linear-gradient(
    120deg,
    rgba(102, 126, 234, 0.35),
    rgba(244, 114, 182, 0.22)
  );
  transform: translateY(-2px);
}
.admin-gate-home:hover i {
  transform: translateX(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .admin-gate-home {
    animation: none;
  }
}
@media (max-width: 560px) {
  .admin-gate-home {
    top: 16px;
    left: 16px;
    font-size: 10.5px;
    padding: 9px 16px 9px 13px;
  }
}
/* Premium animated card: soft entrance, a slowly rotating conic-gradient
   ring behind it standing in for a glowing border (a real animated
   gradient border isn't possible with a plain CSS border), and an
   ambient ::before halo. All layered under the box's own z-index so its
   content stays crisp on top. */
.admin-gate-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--a-bg-soft, var(--panel));
  border: 1px solid var(--a-line, var(--panel-line));
  border-radius: var(--a-radius, 18px);
  padding: 44px 36px 40px;
  text-align: center;
  z-index: 1;
  box-shadow: var(--a-glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.35));
  animation: admin-gate-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.admin-gate-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--gate-angle, 0deg),
    var(--a-purple, #667eea),
    var(--a-pink, #f472b6),
    var(--a-blue, #4facfe),
    var(--a-purple, #667eea)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  z-index: -1;
  animation: admin-gate-spin 6s linear infinite;
}
@keyframes admin-gate-spin {
  to {
    --gate-angle: 360deg;
  }
}
@property --gate-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes admin-gate-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-gate-box {
    animation: none;
  }
  .admin-gate-box::before {
    animation: none;
  }
}
.admin-gate-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--a-purple, #667eea), var(--a-pink, #f472b6));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 26px 2px rgba(102, 126, 234, 0.45);
  animation: admin-gate-icon-pulse 3.2s ease-in-out infinite;
}
@keyframes admin-gate-icon-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 22px 2px rgba(102, 126, 234, 0.4);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 34px 6px rgba(244, 114, 182, 0.5);
  }
}
.admin-gate-box .logo {
  justify-content: center;
  margin-bottom: 22px;
}
.admin-gate-box p {
  font-size: 13px;
  color: var(--mute);
  margin-bottom: 24px;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .admin-gate {
    /* Extra top padding clears the fixed "Back to homepage" pill on short
       viewports so it never sits on top of the card. */
    padding: 90px 16px 32px;
  }
  .admin-gate-box {
    padding: 34px 22px 30px;
  }
  .admin-gate-icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
    margin-bottom: 14px;
  }
  .admin-gate-box .logo {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .admin-gate-box p {
    font-size: 12px;
    margin-bottom: 20px;
  }
}
.kv-badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--mute);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 5, 8, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
.modal-backdrop.show {
  display: flex;
}
.modal-box {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  max-width: 620px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 34px;
}
.modal-box .close-x {
  float: right;
  cursor: pointer;
  color: var(--mute);
  font-family: "JetBrains Mono", monospace;
  border: 1px solid var(--panel-line);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box .close-x:hover {
  color: var(--paper);
  border-color: var(--paper-dim);
}
/* ----- search overlay (header search icon → live AJAX results) ----- */
.search-modal .modal-box {
  max-width: 640px;
  align-self: flex-start;
  margin-top: 12vh;
  position: relative;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 122, 51, 0.14), rgba(255, 122, 51, 0) 40%),
    var(--panel);
  border: 1px solid rgba(255, 122, 51, 0.28);
  border-radius: 18px;
  box-shadow:
    0 24px 70px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 0 40px -14px rgba(255, 122, 51, 0.35);
  overflow: hidden;
  animation: search-modal-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes search-modal-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.search-modal .modal-box .close-x {
  position: absolute;
  top: 18px;
  right: 20px;
  float: none;
  border: none;
  color: var(--mute);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  z-index: 2;
}
.search-modal .modal-box .close-x:hover {
  color: var(--ember);
  background: rgba(255, 122, 51, 0.12);
}
.search-modal-input-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 60px 22px 28px;
  border-bottom: 1px solid var(--panel-line);
}
.search-modal-input-row svg {
  flex-shrink: 0;
  color: var(--ember);
  opacity: 0.9;
}
.search-modal-input {
  width: 100%;
  background: none;
  border: none;
  color: var(--paper);
  font-family: "Inter", sans-serif;
  font-size: 19px;
  font-weight: 500;
  padding: 4px 0;
  letter-spacing: -0.01em;
}
.search-modal-input::placeholder {
  color: var(--mute);
  font-weight: 400;
}
.search-modal-input:focus {
  outline: none;
}
.search-modal-results {
  padding: 10px 16px 20px;
  max-height: 54vh;
  overflow-y: auto;
}
.search-modal-hint,
.search-modal-empty {
  font-size: 13px;
  color: var(--mute);
  padding: 22px 14px;
  text-align: center;
}
.search-modal-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}
.search-modal-result + .search-modal-result {
  margin-top: 2px;
}
.search-modal-result:hover,
.search-modal-result:focus {
  background: linear-gradient(120deg, rgba(255, 122, 51, 0.12), rgba(255, 122, 51, 0.02));
  border-color: rgba(255, 122, 51, 0.25);
  transform: translateX(2px);
}
.search-modal-result .pill {
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--panel-line);
  color: var(--mute);
  background: var(--void-soft);
}
.search-modal-result .pill.ember {
  color: #ffd8b8;
  border-color: rgba(255, 122, 51, 0.4);
  background: rgba(255, 122, 51, 0.1);
}
.search-modal-result .title {
  font-size: 14.5px;
  color: var(--paper-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-modal-result:hover .title,
.search-modal-result:focus .title {
  color: var(--paper);
}
.search-modal-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 4px 2px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 122, 51, 0.35);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ember);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.search-modal-viewall:hover {
  background: rgba(255, 122, 51, 0.08);
  border-color: rgba(255, 122, 51, 0.6);
}
.select-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.select-row select {
  background: var(--void-soft);
  border: 1px solid var(--panel-line);
  color: var(--paper);
  padding: 10px 12px;
  font-size: 12.5px;
}
.select-row select option {
  background: #0c0d11;
  color: var(--paper);
}
textarea.note-box {
  width: 100%;
  background: var(--void-soft);
  border: 1px solid var(--panel-line);
  color: var(--paper);
  padding: 12px;
  font-size: 13px;
  min-height: 80px;
  margin-top: 10px;
}

/* ----- misc content pages ----- */
.legal-body {
  max-width: 760px;
}
.legal-body h2 {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--paper);
  margin: 40px 0 14px;
}
.legal-body h2:first-child {
  margin-top: 0;
}
.legal-body p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--paper-dim);
  margin-bottom: 14px;
}
.legal-body ul {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-body ul li {
  font-size: 14px;
  color: var(--paper-dim);
  padding-left: 20px;
  position: relative;
  line-height: 1.7;
}
.legal-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--ember);
}

.people-card {
  background: var(--panel);
  padding: 24px;
  text-align: left;
}
.people-card .photo {
  width: 100%;
  aspect-ratio: 1;
  background: var(--void-soft);
  border: 1px solid var(--panel-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 40px;
  color: var(--panel-line);
  margin-bottom: 16px;
  overflow: hidden;
}
.people-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.people-card h3 {
  font-size: 16px;
  color: var(--paper);
}
.people-card .role {
  font-size: 12px;
  color: var(--ember);
  font-family: "JetBrains Mono", monospace;
  margin-top: 4px;
}
.people-card .department {
  font-size: 11.5px;
  color: var(--mute);
  margin-top: 2px;
}
.people-card .expertise-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.people-card .expertise-tag {
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  color: var(--paper-dim);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  padding: 3px 9px;
}
.people-card .people-socials {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.people-card .people-socials a {
  color: var(--mute);
  transition: color 0.2s ease;
}
.people-card .people-socials a:hover {
  color: var(--ember);
}
.people-card p {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--mute);
  line-height: 1.6;
}
/* Team section on the homepage specifically (#team-home) — the shared
   .grid.cols-4 rule drops to a single column at 640px, which is right
   for most 4-column content but left this particular grid showing one
   card per row full-width on phones. Two-up instead, with everything on
   the card shrunk to match, so it doesn't just look like the desktop
   card stretched thin. */
@media (max-width: 640px) {
  #team-home .grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  #team-home .people-card {
    padding: 12px;
  }
  #team-home .people-card .photo {
    font-size: 24px;
    margin-bottom: 10px;
  }
  #team-home .people-card h3 {
    font-size: 13px;
  }
  #team-home .people-card .role {
    font-size: 10px;
    margin-top: 2px;
  }
}

.partner-logo {
  background: var(--panel);
  padding: 30px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--paper-dim);
  text-align: center;
  transition: color 0.2s;
}
.partner-logo:hover {
  color: var(--ember);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
}
.pagination button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--panel-line);
  background: transparent;
  color: var(--paper-dim);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.pagination button.active {
  border-color: var(--ember);
  color: var(--ember);
}
.pagination button:hover:not(.active) {
  border-color: var(--paper-dim);
  color: var(--paper);
}

.search-box {
  position: relative;
  max-width: 420px;
}
.search-box input {
  width: 100%;
  background: var(--void-soft);
  border: 1px solid var(--panel-line);
  color: var(--paper);
  padding: 13px 16px;
  font-size: 13.5px;
}
.search-box input:focus {
  outline: none;
  border-color: var(--ember);
}

.not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 20px 60px;
}
.not-found .code {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(80px, 14vw, 180px);
  color: var(--panel-line);
  line-height: 1;
}