/* =========================================================
   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);
  animation: sectionHeadGlow 4s ease-in-out infinite;
}
@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;
  animation: entityCardGlowPulse 3.5s ease-in-out infinite;
  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);
  animation-name: entityCardGlowPulseBlue;
  animation-delay: 0.6s;
}
.grid > .entity-card:nth-child(3n+3) {
  border-color: rgba(244, 114, 182, 0.3);
  animation-name: entityCardGlowPulsePink;
  animation-delay: 1.2s;
}
@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);
  animation-name: entityCardGlowPulseBlue;
  animation-delay: 0.6s;
}
.related-strip .entity-card:nth-child(3n+3) {
  border-color: rgba(244, 114, 182, 0.3);
  animation-name: entityCardGlowPulsePink;
  animation-delay: 1.2s;
}
.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);
}
.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 {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}
@media (max-width: 860px) {
  .admin-shell {
    /* Sidebar becomes a fixed off-canvas drawer below (out of flow), so the
       single remaining grid track is the content column. */
    grid-template-columns: 1fr;
  }
}
.admin-side {
  background: var(--void-soft);
  border-right: 1px solid var(--panel-line);
  padding: 26px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.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;
  /* 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: 100%;
  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: 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 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.admin-gate-box {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  padding: 40px 36px;
  text-align: center;
}
.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;
}
.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;
}
.search-modal-input {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--panel-line);
  color: var(--paper);
  font-family: "Inter", sans-serif;
  font-size: 20px;
  padding: 4px 40px 16px 0;
}
.search-modal-input::placeholder {
  color: var(--mute);
}
.search-modal-input:focus {
  outline: none;
  border-bottom-color: var(--ember);
}
.search-modal-results {
  margin-top: 20px;
  max-height: 50vh;
  overflow-y: auto;
}
.search-modal-hint,
.search-modal-empty {
  font-size: 13px;
  color: var(--mute);
  padding: 10px 2px;
}
.search-modal-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--panel-line);
}
.search-modal-result:hover,
.search-modal-result:focus {
  background: var(--void-soft);
}
.search-modal-result .pill {
  flex-shrink: 0;
}
.search-modal-result .title {
  font-size: 14px;
  color: var(--paper-dim);
}
.search-modal-viewall {
  display: block;
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ember);
}
.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;
}