/* ===========================
   Calvin-inspired Bright UI
   Compact & Polished
   =========================== */

:root{
  --bg: #f7fbff;
  --bg2:#ffffff;
  --text:#0b1220;
  --muted:#5b6b82;
  --muted2:#7b8aa0;

  --card:#ffffff;
  --border: rgba(15, 23, 42, 0.10);
  --shadow: 0 18px 50px rgba(2, 6, 23, 0.10);

  --primary:#2b6cff;
  --primary2:#00c2ff;
  --primaryDark:#1f55cc;

  --radius:18px;
  --maxw:1340px;
}

/* hide mobile menu by default */
.mobileMenu{
  display: none;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: 78px; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 450px at 10% 0%, rgba(43,108,255,0.14), transparent 60%),
    radial-gradient(900px 450px at 90% 0%, rgba(0,194,255,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  line-height:1.65;
}

a{ color:inherit; text-decoration:none; }
a:hover{ color: var(--primaryDark); }

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 18px 40px;
}

/* ===========================
   NAV
   =========================== */

.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.72);
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.navInner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:-0.02em;
}

.dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 0 0 6px rgba(43,108,255,0.12);
}

.navLinks{
  display:flex;
  gap: 14px;
}

.navLinks a{
  color: var(--muted);
  font-weight:700;
  font-size: 0.95rem;
  padding: 8px 10px;
  border-radius: 999px;
}

.navLinks a:hover{
  color: var(--text);
  background: rgba(43,108,255,0.08);
}

.navBtn{
  display:none;
  border: 1px solid rgba(15,23,42,0.12);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
}

/* mobile nav — full horizontal bar only when the section links fit */
@media (max-width: 1300px){
  .navLinks{ display:none; }
  .navBtn{ display:inline-flex; }

  .mobileMenu{
    display:none;
    border-top: 1px solid rgba(15,23,42,0.08);
    padding: 10px 18px 16px;
  }

  .mobileMenu.open{ display:block; }

  .mobileMenu a{
    display:block;
    padding: 10px;
    border-radius: 12px;
    color: var(--muted);
    font-weight: 700;
  }

  .mobileMenu a:hover{
    background: rgba(43,108,255,0.08);
    color: var(--text);
  }
}

/* ===========================
   HERO
   =========================== */

.hero{
  padding: 28px 0 16px;
}

.heroGrid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 920px){
  .heroGrid{ grid-template-columns: 1fr; }
}

.kicker{
  display:inline-block;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primaryDark);
  background: rgba(43,108,255,0.10);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(43,108,255,0.18);
}

h1{
  margin: 10px 0 8px;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.sub{
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 60ch;
}

.heroCard{
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}

.heroCard p{
  margin: 6px 0;
}



.heroTitleRow{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-top: 10px;
}

.heroTitleRow h1{
  margin: 0;
}

.avatar{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(15,23,42,0.12);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.16);
  background: #fff;
  flex: 0 0 auto;
}

@media (max-width: 520px){
  .heroTitleRow{
    align-items:flex-start;
    gap: 12px;
  }
  .avatar{
    width: 74px;
    height: 74px;
  }
}

/* ===========================
   BUTTONS & LINKS
   =========================== */

.ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid rgba(15,23,42,0.12);
  background: #fff;
}

.btnPrimary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #fff;
  border: none;
  box-shadow: 0 12px 30px rgba(43,108,255,0.22);
}

.btn:hover{
  transform: translateY(-1px);
}

.heroLinks{
  gap: 12px;
}

.heroLink{
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,23,42,0.12);
  box-shadow: var(--shadow);
  min-width: 160px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.heroLink:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(2,6,23,0.14);
}

.heroLinkTitle{
  font-weight: 900;
  letter-spacing: -0.01em;
}

.heroLinkMeta{
  font-size: 0.85rem;
  color: var(--muted);
}

/* ===========================
   PILLS
   =========================== */

.pills{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}

.pill{
  padding: 7px 11px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.08);
}

/* ---------- Badges ---------- */

.badgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: #2563eb;        /* primary blue */
  color: #ffffff;
  letter-spacing: 0.02em;
}

.badgeSoft {
  background: rgba(37, 99, 235, 0.12);
  color: #1e40af;
}


/* ===========================
   SECTIONS
   =========================== */

.section{
  padding: 22px 0 0;
}

.sectionHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom: 10px;
}

h2{
  margin:0;
  font-size: 1.35rem;
  letter-spacing:-0.02em;
}

.small{
  color: var(--muted2);
  font-size: 0.95rem;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 920px){
  .grid{ grid-template-columns: 1fr; }
}

.card{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.card--flat{
  box-shadow: none;
  border: 1px solid rgba(15,23,42,0.08);
}

.u-mt-8{ margin-top: 8px !important; }
.u-mt-10{ margin-top: 10px !important; }
.u-mt-12{ margin-top: 12px !important; }
.u-mt-14{ margin-top: 14px !important; }
.u-mt-16{ margin-top: 16px !important; }
.u-mt-18{ margin-top: 18px !important; }
.u-mt-section{ margin-top: 1.5rem !important; }
.u-heading-tight{ margin: 0 0 8px !important; }
.u-heading-flush{ margin-top: 0 !important; }
.u-font-medium{ font-weight: 500 !important; }
.u-media-full{
  width: 100% !important;
  border-radius: var(--radius) !important;
}


/* ===========================
   PROJECT MEDIA (thumbnails + hero)
   No cropping: use contain + letterbox
   =========================== */

.projMedia{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
  background: transparent;

  /* consistent frame without cropping */
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.projMedia img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* no crop */
  display: block;
  transform: scale(1);
  transition: transform 220ms ease;
  background: transparent;
}

.proj:hover .projMedia img{
  transform: scale(1.02);
}

/* Project page hero image (no cropping) */
.heroImg{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;   /* no crop */
  border-radius: var(--radius);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: var(--shadow);
  background: transparent;
  padding: 10px;
  margin-bottom: 12px;
}

.linkRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 6px 0 12px;
}

/* Optional image grid on project pages */
/* ---------- Project media layout ---------- */

.mediaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.mediaFigure {
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

/* CRITICAL FIX */
.mediaFigure img,
.mediaItem img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;   /* prevents cropping */
  border-radius: 10px;
}

/* Optional: visually cap height so tall images don’t dominate */
.mediaFigure img {
  max-height: 420px;
}

/* Caption styling */
.mediaCaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

/* Single-column media layout (used for wide figures) */
.mediaGridSingle {
  grid-template-columns: 1fr !important;
}


/* Optional: subtle emphasis for first words (Fig.-style feel) */
/* .mediaCaption::first-line{
  font-weight: 600;
  color: rgba(15,23,42,0.85);
} */


/* Project page: dominant hero media (GIF/video) */
.heroMedia{
  margin: 14px 0 12px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: var(--shadow);
  background: transparent;
}

.heroMedia img{
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
}

/* Project page: 2-up secondary media */
.mediaGrid2{
  grid-template-columns: 1fr 1fr;
}

/* ShiftOS page: photos-left + video-right side-by-side layout */
.shiftosMediaRow{
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 14px 0 12px;
}
.shiftosPhotos{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.shiftosPhotos figure{
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
}
.shiftosPhotos figure:nth-child(-n + 2){
  aspect-ratio: 760 / 500;
}
.shiftosPhotos figure:nth-child(3){
  aspect-ratio: 1672 / 941;
}
.shiftosPhotos img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.shiftosPhotos .mediaCaption{
  position: absolute;
  bottom: 8px;
  left: 8px;
  margin: 0;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3px 10px;
  border-radius: 20px;
}
/* Moonwalkers Dusk mystery placeholder */
.shiftosDuskPlaceholder{
  aspect-ratio: 4/3;
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%, rgba(139,26,74,0.35) 0%, transparent 70%),
    linear-gradient(160deg, #0e0009 0%, #1c0511 45%, #2a0918 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.shiftosDuskPlaceholder::before{
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(139,26,74,0.03) 3px,
    rgba(139,26,74,0.03) 4px
  );
  pointer-events: none;
}
.shiftosDuskShoe{
  width: 72%;
  max-width: 200px;
  filter: drop-shadow(0 0 14px rgba(139,26,74,0.5));
  animation: duskPulse 3s ease-in-out infinite;
}
@keyframes duskPulse{
  0%,100%{ filter: drop-shadow(0 0 10px rgba(139,26,74,0.35)); }
  50%{ filter: drop-shadow(0 0 22px rgba(139,26,74,0.7)); }
}
.shiftosDuskSoon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.shiftosVideo{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shiftosVideoItem{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: var(--shadow);
}
.shiftosVideo img,
.shiftosVideo video{
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 640px){
  .shiftosMediaRow{
    flex-direction: column;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .shiftosPhotos{
    flex-direction: column;
    gap: 8px;
    flex: none;
    width: 100%;
    min-width: 0;
  }
  .shiftosPhotos figure,
  .shiftosVideo,
  .shiftosVideoItem{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .shiftosPhotos img,
  .shiftosVideo img,
  .shiftosVideo video{
    max-width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .shiftosVideo img,
  .shiftosVideo video{
    height: auto;
  }
}

@media (max-width: 920px){
  .mediaGrid2{
    grid-template-columns: 1fr;
  }
}


@media (max-width: 920px){
  .mediaGrid{ grid-template-columns: 1fr; }
}

.mediaItem{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
  background: transparent;
}

.mediaItem img{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;   /* no crop */
  display: block;
  background: transparent;
  padding: 10px;
}

/* ===========================
   Lightbox (click-to-zoom figures)
   =========================== */

.lightboxTrigger{
  cursor: zoom-in;
}

.lightboxOverlay{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 24px;
}

.lightboxOverlay.open{
  display: flex;
}

.lightboxContent{
  position: relative;
  max-width: min(1100px, 94vw);
  max-height: 90vh;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  padding: 14px;
  overflow: hidden;
}

.lightboxImg{
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(90vh - 64px);
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}

.lightboxCaption{
  margin-top: 10px;
  color: rgba(255,255,255,0.92);
  font-size: 0.9rem;
  line-height: 1.35;
}

.lightboxClose{
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(15,23,42,0.35);
  color: #fff;
  font-size: 28px;
  line-height: 42px;
  cursor: pointer;
}

.lightboxClose:hover{
  background: rgba(15,23,42,0.55);
}

.noScroll{
  overflow: hidden;
}


/* ===========================
   PROJECT CARDS
   =========================== */

.proj{
  display:flex;
  flex-direction:column;
  gap: 8px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.proj:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(2,6,23,0.14);
}

.projTop{
  display:flex;
  justify-content:space-between;
  gap: 10px;
}

.projTitle{
  font-weight: 900;
  letter-spacing:-0.02em;
  margin:0;
}

.tag{
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(43,108,255,0.10);
  border: 1px solid rgba(43,108,255,0.20);
  color: var(--primaryDark);
}

/* Section head with award badge */
.sectionHeadAward{
  align-items: flex-start;
  gap: 12px;
}

.sectionHeadAward .headLeft{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0; /* prevents overflow issues */
}

.sectionHeadAward h2{
  margin: 0;
}

.releaseChip{
  display: inline-block;
  font-size: 0.68rem;
  color: var(--primary);
  background: rgba(43,108,255,0.06);
  border: 1px solid rgba(43,108,255,0.2);
  border-radius: 4px;
  padding: 1px 7px;
  margin-left: 4px;
  text-decoration: none;
}
.releaseChip:hover{ background: rgba(43,108,255,0.13); }

/* Project page titles use h1 for SEO but should look like h2 */
.sectionHead h1{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  font-style: normal;
  margin: 0;
}
@media (min-width: 821px){ .sectionHead h1{ font-size: 2rem; } }
.sectionHeadAward h1{ margin: 0; }

.awardBadge{
  display: inline-flex;
  align-items: center;
  width: fit-content;

  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;

  color: #7c2d12;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fed7aa;

  white-space: nowrap;
}


.projDesc{
  color: var(--muted);
  margin:0;
}

.projList{
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.projList li{ margin: 0.25rem 0; }

.patentsSection{
  padding-top: 18px;
}

.patentsSection .sectionHead{
  display: grid;
  justify-content: start;
  gap: 6px;
  margin-bottom: 12px;
}

.patentsSection .sectionHead .small{
  max-width: 760px;
  line-height: 1.5;
}

/* --- Patent Applications and Filings (All Projects page) --------------------
   Compact credibility card: one polished shell, a soft stat panel on the left,
   and a 2x2 domain grid plus link row on the right. */
.patentCard{
  padding: clamp(14px, 1.7vw, 18px);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(248,250,252,0.82));
  border-color: rgba(15,23,42,0.08);
  box-shadow: 0 12px 32px rgba(2,6,23,0.06);
  overflow: hidden;
}

.patentSummary{
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(14px, 1.8vw, 22px);
}

.patentStatPanel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 100%;
  padding: clamp(18px, 2vw, 24px);
  border-radius: calc(var(--home-radius) - 4px);
  background:
    linear-gradient(135deg, rgba(43,108,255,0.11), rgba(0,194,255,0.055));
}

.patentStat{
  display: flex;
  align-items: center;
  gap: 14px;
}

.patentStatNum{
  font-size: clamp(3.1rem, 5vw, 4.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  color: var(--primary);
}

.patentStatLabel{
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 800;
  color: var(--text);
  max-width: 16ch;
  line-height: 1.25;
}

.patentIntro{
  margin: 0;
  max-width: 28ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}

.patentMain{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 2px 0;
}

.patentDomains{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.patentDomain{
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.64);
}

.patentDomainName{
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--text);
}

.patentDomainDesc{
  font-size: 0.82rem;
  color: var(--muted2);
}

.patentDetails{
  margin: 0;
}

.patentToggle{
  display: block;
  cursor: pointer;
  list-style: none;
}

.patentToggle::-webkit-details-marker{ display: none; }

.patentToggleText{
  display: block;
  width: fit-content;
  margin-left: auto;
  color: var(--primaryDark);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.patentToggle:hover .patentToggleText{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.patentToggleArrow{
  display: inline-block;
  transition: transform 0.18s ease;
}

.patentDetails[open] .patentToggleArrow{
  transform: rotate(180deg);
}

.patentFullListBlock{
  margin-top: 10px;
  padding: 14px clamp(14px, 1.7vw, 18px);
  border-radius: 14px;
  border-top: 1px solid rgba(15,23,42,0.08);
  background: rgba(248,250,252,0.62);
}

.patentFullList{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.patentFullList li{
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--muted2);
  padding-left: 14px;
  border-left: 2px solid var(--border);
}

.patentFullTitle{
  color: var(--muted);
  font-weight: 600;
}

.patentFullCite{
  color: var(--muted2);
}

@media (max-width: 820px){
  .patentSummary{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .patentStatPanel{
    min-height: auto;
  }
}

@media (max-width: 520px){
  .patentsSection .sectionHead .small{
    font-size: 0.9rem;
  }

  .patentDomains{
    grid-template-columns: 1fr;
  }

  .patentToggleText{
    text-align: left;
    margin-left: 0;
  }
}

.affil{
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
}
.affil a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.affil a:hover{ color: var(--primary); }

/* ===========================
   EXPERIENCE
   =========================== */

.split{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}

@media (max-width: 920px){
  .split{ grid-template-columns: 1fr; }
}

/* ===========================
   FOOTER
   =========================== */

.footer{
  margin-top: 18px;
  color: var(--muted2);
  font-size: 0.95rem;
}

/* ===========================
   REVEAL ANIMATIONS
   =========================== */

.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.show{
  opacity: 1;
  transform: translateY(0);
}

/* ===========================
   NEWS
   =========================== */

.newsList{
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.newsList li{
  display:flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.7);
}

.newsDate{
  font-weight: 900;
  color: var(--primaryDark);
  min-width: 92px;
}

.newsText{
  color: var(--muted);
}

.newsText a{
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(43,108,255,0.18);
  background: rgba(43,108,255,0.08);
  color: var(--primaryDark);
  font-weight: 800;
  font-size: 0.88em;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}

.newsText a:hover{
  background: rgba(43,108,255,0.14);
  border-color: rgba(43,108,255,0.32);
  transform: translateY(-1px);
}

.newsFirstPaper{
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(217,119,6,0.12);
  color: #b45309;
  font-size: 0.78em;
  font-weight: 900;
  white-space: nowrap;
}

.newsHidden{
  display:none;
}



/* ===========================
   Language Toggle Button
   =========================== */
.langBtn{
  border: 1px solid rgba(15,23,42,0.16);
  background: rgba(255,255,255,0.75);
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1;
  min-width: 62px;
  text-align: center;
}
.langBtn:hover{
  transform: translateY(-1px);
}


/* ===========================
   HERO RIGHT COLUMN (Highlights + Impact)
   =========================== */
.heroRight{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.impactCard h2{
  margin: 0;
  font-size: 18px;
}

.impactHead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.impactCTA{
  font-weight: 900;
  font-size: 13px;
  color: rgba(11,18,32,0.72);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(15,23,42,0.10);
  transition: transform 160ms ease, background 160ms ease;
}

.impactCTA:hover{
  transform: translateY(-1px);
  background: rgba(43,108,255,0.10);
}

.impactList{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,18,32,0.72);
}

.impactList li{
  margin: 6px 0;
}

/* ===========================
   P1-3: Typography tokens
   =========================== */
:root{
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
}

body{ font-family: var(--font-sans); }

h1{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(44px, 5.2vw, 68px);
}
h1 .nameAccent{ font-style: italic; }

h2{ font-size: 1.6rem; letter-spacing: -0.02em; }
@media (min-width: 821px){ h2{ font-size: 2rem; } }

.section{ padding: 56px 0 0; }
.sectionHead{ margin-bottom: 20px; }

/* ===========================
   P0-2: Hero video
   =========================== */
.heroLeft{ display: flex; flex-direction: column; }

.heroLead{ font-size: 1.15rem; line-height: 1.55; max-width: 56ch; }
.heroLead a{ color: var(--primaryDark); border-bottom: 1.5px solid rgba(43,108,255,0.3); }
.heroLead a:hover{ border-bottom-color: var(--primary); }

.nameAccent{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.heroByline{
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px; color: var(--muted); font-size: 0.95rem;
}
.avatarSm{
  width: 36px; height: 36px; border-radius: 999px; object-fit: cover;
  border: 1px solid var(--border);
}

.heroVideo{
  margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow);
  background: #000;
  max-height: 420px;
}
.heroVideo video,
.heroVideo img{ width: 100%; display: block; }
.heroVideo figcaption{
  padding: 10px 14px; font-size: 0.88rem; color: var(--muted);
  background: rgba(255,255,255,0.7); border-top: 1px solid var(--border);
}
.heroVideo figcaption a{ color: var(--primaryDark); font-weight: 700; }

@media (max-width: 920px){
  .heroVideo video,
  .heroVideo img{ max-height: 58vh; object-fit: cover; width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .heroVideo video,
  .heroVideo img{ display: none; }
  .heroVideo::before{
    content: ""; display: block; aspect-ratio: 16/9;
    background: url('video/shiftos_demo_poster.jpg') center/cover;
  }
}

/* ===========================
   P0-3: Stat cards
   =========================== */
.statRow{ padding: 28px 0 8px; }
.statRowHead{ margin-bottom: 14px; }
.statRowTitle{ font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 3px; }
.statRowSub{ font-size: 0.8rem; color: var(--muted); margin: 0; line-height: 1.5; }
.statGrid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.statHero{ grid-column: span 3; padding: 16px 14px; }
.statSupport{ grid-column: span 2; padding: 8px 10px; }
.statChip{
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #92400e;
  background: rgba(161,98,7,0.07);
  border: 1px solid rgba(161,98,7,0.18);
  border-radius: 3px;
  padding: 1px 6px;
  margin-top: 5px;
}
.statBadge{
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 3px 0 5px;
}
.statSub{
  display: inline-block;
  font-size: 0.68rem;
  color: var(--muted);
  background: rgba(15,23,42,0.05);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  margin-top: 5px;
}
.statHero .statNum{ font-size: clamp(24px, 3vw, 44px); }
@media (max-width: 600px){
  .statGrid{ grid-template-columns: repeat(2, 1fr); }
  .statHero{ grid-column: span 1; }
  .statSupport{ grid-column: span 1; }
}

.stat{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  box-shadow: var(--shadow);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.stat:hover{ transform: translateY(-3px); box-shadow: 0 24px 60px rgba(2,6,23,0.12); }
a.stat{ display: block; color: inherit; text-decoration: none; }
.stat--featured{
  border-left: 3px solid var(--primary);
  background: rgba(43,108,255,0.06);
  padding-left: 9px;
}
.stat--award{
  border-left: 3px solid #f59e0b;
  background: rgba(245,158,11,0.04);
  padding-left: 9px;
}

.statNum{
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
}
.statText{ font-size: clamp(18px, 2vw, 30px); }
.statLabel{
  margin-top: 4px; color: var(--muted);
  font-size: 0.82rem; line-height: 1.4;
}

/* ===========================
   P1-1: News timeline tags
   =========================== */
.newsList li{
  display: grid;
  grid-template-columns: auto 92px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform 160ms ease, border-color 160ms ease;
}
.newsList li:hover{
  transform: translateX(2px);
  border-color: rgba(43,108,255,0.3);
}
@media (max-width: 640px){
  .newsList li{ grid-template-columns: auto 1fr; }
  .newsList li .newsDate{ grid-column: 1 / -1; order: -1; font-size: 0.85rem; }
}

.newsTag{
  font-size: 0.78rem; font-weight: 800; padding: 4px 10px;
  border-radius: 999px; white-space: nowrap;
}
.newsTag-launch{      background: rgba(43,108,255,0.12);  color: var(--primaryDark); }
.newsTag-publication{ background: rgba(124,58,237,0.12);  color: #6d28d9; }
.newsTag-award{       background: rgba(217,119,6,0.14);   color: #b45309; }
.newsTag-milestone{   background: rgba(15,118,110,0.12);  color: #0f766e; }

.newsControls{ margin-top: 14px; text-align: center; }
.newsToggle{ background: transparent; cursor: pointer; }

/* ===========================
   P1-2: Project filter chips
   =========================== */
.filterRow{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 16px;
}
.filterChip{
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: 0.9rem;
  color: var(--muted);
  background: rgba(15,23,42,0.04);
  border: 1px solid var(--border);
  transition: all 160ms ease;
}
.filterChip:hover{ color: var(--text); border-color: rgba(43,108,255,0.3); }
.filterChip.is-active{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px rgba(43,108,255,0.25);
}
.proj.is-hidden{ display: none; }

/* ===========================
   P2-1: Gait cycle widget
   =========================== */
.gaitWidget{ padding: 20px; }
.gaitInner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 640px){ .gaitInner{ grid-template-columns: 1fr; } }
.gaitWheel{ width: 100%; max-width: 340px; display: block; margin: 0 auto; }
.gaitPanel{ padding: 16px 0; }
.gaitPhaseName{
  margin: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}
.gaitPhaseDesc{
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0;
}

/* ===========================
   P3-2: Project outcome line + enhanced hover
   =========================== */
.projOutcome{
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primaryDark);
  margin: 0;
  letter-spacing: 0.01em;
}

.proj:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(2,6,23,0.16);
}

/* ===========================
   P3-1: Dark mode
   =========================== */
:root[data-theme="dark"]{
  --bg: #0b1220; --bg2: #0f172a;
  --text: #e7eefb; --muted: #94a3b8; --muted2: #64748b;
  --card: #111a2e; --border: rgba(255,255,255,0.10);
  --shadow: 0 18px 50px rgba(0,0,0,0.5);
}

:root[data-theme="dark"] body{
  background:
    radial-gradient(900px 450px at 10% 0%, rgba(43,108,255,0.08), transparent 60%),
    radial-gradient(900px 450px at 90% 0%, rgba(0,194,255,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}

:root[data-theme="dark"] .nav{
  background: rgba(11,18,32,0.85);
}

:root[data-theme="dark"] .stat{
  background: rgba(17,26,46,0.9);
}
:root[data-theme="dark"] .stat--featured{ background: rgba(43,108,255,0.12); }
:root[data-theme="dark"] .stat--award{ background: rgba(245,158,11,0.09); }

:root[data-theme="dark"] .heroVideo figcaption{
  background: rgba(17,26,46,0.85);
}

.themeBtn{
  border: 1px solid rgba(15,23,42,0.16);
  background: rgba(255,255,255,0.75);
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1;
  min-width: 62px;
  text-align: center;
  margin-left: auto;
}
.themeBtn:hover{ transform: translateY(-1px); }

/* ===========================
   Fix 1: Tighter nav — prevents wrapping at 1100–1440px
   =========================== */
.navLinks{ gap: 0; }
.navLinks a{
  font-size: 0.82rem;
  padding: 6px 7px;
  white-space: nowrap;
}

/* ===========================
   Fix 2: Dark mode — secondary buttons use translucent dark bg
   =========================== */
:root[data-theme="dark"] .btn{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  color: var(--text);
}
/* Keep primary button gradient unchanged */
:root[data-theme="dark"] .btnPrimary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #fff;
  border: none;
}
/* Keep filter chips and nav utility buttons styled correctly */
:root[data-theme="dark"] .filterChip{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: var(--muted);
}
:root[data-theme="dark"] .filterChip.is-active{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #fff;
  border-color: transparent;
}
:root[data-theme="dark"] .themeBtn,
:root[data-theme="dark"] .langBtn,
:root[data-theme="dark"] .navBtn{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: var(--text);
}

/* ===========================
   Fix 2: Dark mode — images with white backgrounds
   =========================== */
:root[data-theme="dark"] .projMedia,
:root[data-theme="dark"] .mediaFigure,
:root[data-theme="dark"] .mediaItem,
:root[data-theme="dark"] .heroMedia,
:root[data-theme="dark"] .shiftosPhotos figure,
:root[data-theme="dark"] .shiftosVideoItem,
:root[data-theme="dark"] .workCardMedia,
:root[data-theme="dark"] .selectedWorkGrid .workCardMedia{
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(77,143,255,0.10), transparent 62%),
    rgba(12,18,32,0.78);
  border-color: rgba(77,143,255,0.14);
}
:root[data-theme="dark"] .projMedia img,
:root[data-theme="dark"] .heroImg,
:root[data-theme="dark"] .mediaFigure img,
:root[data-theme="dark"] .mediaItem img,
:root[data-theme="dark"] .heroMedia img,
:root[data-theme="dark"] .shiftosPhotos img,
:root[data-theme="dark"] .shiftosVideo img,
:root[data-theme="dark"] .workCardMedia img{
  background: rgba(248,251,255,0.06);
  filter: brightness(0.78) contrast(0.98) saturate(0.92);
  opacity: 0.9;
  transition: filter 180ms ease, opacity 180ms ease;
}
/* Lighten back the projMedia hover image */
:root[data-theme="dark"] .proj:hover .projMedia img{
  filter: brightness(0.86) contrast(1.02) saturate(0.96);
  opacity: 1;
}

/* ===========================
   Fix 3: Dark mode — cards and borders
   =========================== */
:root[data-theme="dark"] .card{
  background: var(--card);
  border-color: var(--border);
}
:root[data-theme="dark"] .card--flat{
  border-color: rgba(255,255,255,0.10);
}
:root[data-theme="dark"] .heroCard{
  background: rgba(17,26,46,0.9);
}
:root[data-theme="dark"] .tag{
  background: rgba(43,108,255,0.18);
  border-color: rgba(43,108,255,0.3);
}
:root[data-theme="dark"] .newsTag-launch{
  background: rgba(43,108,255,0.18); color: #93b8ff;
}
:root[data-theme="dark"] .newsTag-publication{
  background: rgba(124,58,237,0.2); color: #c4b5fd;
}
:root[data-theme="dark"] .newsTag-award{
  background: rgba(217,119,6,0.2); color: #fcd34d;
}
:root[data-theme="dark"] .newsTag-milestone{
  background: rgba(15,118,110,0.2); color: #5eead4;
}

/* ===========================
   Fix 4: Dark mode — brighter accent palette for legibility on dark bg
   .nameAccent, .statNum, .dot use var(--primary/2) so they update automatically.
   =========================== */
:root[data-theme="dark"]{
  --primary: #4d8fff;
  --primary2: #00d4ff;
  --primaryDark: #93b8ff;
}
/* Kicker has hardcoded rgba colors — override for dark mode */
:root[data-theme="dark"] .kicker{
  background: rgba(77,143,255,0.14);
  border-color: rgba(77,143,255,0.25);
  color: #93b8ff;
}
/* .projOutcome and .newsDate use --primaryDark which is now #93b8ff — no override needed */

/* ===========================
   News grid: fixed column widths so dates/text align across all rows
   =========================== */
.newsList li{
  grid-template-columns: 120px 92px 1fr;
  align-items: start;
}
@media (max-width: 640px){
  .newsList li{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .newsList li .newsDate{
    grid-column: auto;
    order: 0;
    font-size: 0.9rem;
  }
  .newsTag{
    width: fit-content;
    min-width: 0;
  }
  .newsText{
    width: 100%;
    max-width: 100%;
    line-height: 1.55;
    word-break: normal;
    overflow-wrap: normal;
  }
}
/* Tag pill: uniform width so the fixed column fits every variant */
.newsTag{ min-width: 90px; text-align: center; display: inline-block; }

/* ===========================
   Typewriter role line below h1
   =========================== */
.heroRole{
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--muted);
  margin: 2px 0 14px;
  min-height: 1.6em;
}
.roleTyped{
  color: var(--primaryDark);
  font-weight: 800;
}
.roleCursor{
  color: var(--primary);
  font-weight: 300;
  margin-left: 1px;
  animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink{
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .roleCursor{ animation: none; } }

/* ===========================
   Contact grid with icon cards
   =========================== */
.contactGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}
@media (max-width: 600px){ .contactGrid{ grid-template-columns: 1fr; } }

.contactItem{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  text-decoration: none;
}
.contactItem:hover{
  transform: translateX(4px);
  border-color: rgba(43,108,255,0.35);
  box-shadow: 0 22px 55px rgba(2,6,23,0.12);
  color: inherit;
}
.contactIcon{
  width: 46px; height: 46px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  flex: 0 0 auto;
  letter-spacing: -0.03em;
}
.contactDetails{ display: flex; flex-direction: column; min-width: 0; }
.contactLabel{
  font-weight: 800;
  color: var(--text);
  font-size: 0.97rem;
  white-space: nowrap;
}
.contactUrl{
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===========================
   Dark mode: contact cards
   =========================== */
:root[data-theme="dark"] .contactItem:hover{
  border-color: rgba(77,143,255,0.4);
}

/* ===========================
   Step Engineering Section
   =========================== */

.stepEngIntro{
  max-width: 700px;
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
}

/* Control loop */
.controlLoop{
  margin-bottom: 1.75rem;
}

/* Glass pipeline card */
.seLoopPipeline{
  background: rgba(43,108,255,0.04);
  border: 1px solid rgba(43,108,255,0.14);
  border-radius: 16px;
  padding: 22px 20px 14px;
  position: relative;
}
:root[data-theme="dark"] .seLoopPipeline{
  background: rgba(77,143,255,0.05);
  border-color: rgba(77,143,255,0.16);
}

/* Nodes row */
.seLoopNodesRow{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}
/* Glowing connecting line */
.seLoopNodesRow::before{
  content:'';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, rgba(43,108,255,0.55), rgba(77,143,255,0.85), rgba(43,108,255,0.55));
  box-shadow: 0 0 8px rgba(77,143,255,0.3);
  z-index: 0;
  animation: seLinePulse 3s ease-in-out infinite;
}
@keyframes seLinePulse{
  0%,100%{ opacity:0.65; }
  50%{ opacity:1; box-shadow:0 0 14px rgba(77,143,255,0.55); }
}

/* Individual node */
.seLoopNodeWrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  z-index: 1;
  cursor: default;
  padding: 0 4px;
}
.seLoopNodeDot{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(43,108,255,0.35);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(77,143,255,0.6);
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
.seLoopNodeDot svg{
  width: 18px;
  height: 18px;
  opacity: 0;
  transition: opacity 0.2s;
}
:root[data-theme="dark"] .seLoopNodeDot{
  border-color: rgba(77,143,255,0.3);
}
.seLoopNodeWrap:hover .seLoopNodeDot{
  border-color: rgba(77,143,255,0.95);
  box-shadow: 0 0 18px rgba(77,143,255,0.45);
  transform: scale(1.12);
}
.seLoopNodeWrap:hover .seLoopNodeDot svg{
  opacity: 1;
}
.seLoopNodeName{
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.seLoopNodeSub{
  font-size: 0.6rem;
  color: var(--muted2);
  text-align: center;
  line-height: 1.35;
  max-width: 120px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
}
.seLoopNodeWrap:hover .seLoopNodeSub,
.seLoopNodeWrap.seActive .seLoopNodeSub{
  opacity: 1;
  transform: translateY(0);
}
.seLoopNodeWrap.seActive .seLoopNodeDot{
  border-color: rgba(77,143,255,0.7);
  box-shadow: 0 0 12px rgba(77,143,255,0.3);
}
.seLoopNodeWrap.seActive .seLoopNodeDot svg{
  opacity: 0.8;
}

/* Return feedback arrow */
.seLoopFeedback{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 20px;
}
.seLoopFbLine{
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(77,143,255,0.25), transparent);
  position: relative;
}
.seLoopFbLine::before{
  content: '◄';
  position: absolute;
  left: 0;
  top: -6px;
  font-size: 0.45rem;
  color: rgba(77,143,255,0.4);
}
.seLoopFbLineR{
  background: linear-gradient(90deg, transparent, rgba(77,143,255,0.25));
}
.seLoopFbLineR::before{ display: none; }
.seLoopFbLabel{
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(77,143,255,0.35);
  white-space: nowrap;
}

@media (max-width: 600px){
  .seLoopNodeName{ font-size: 0.68rem; white-space: normal; }
  .seLoopNodeSub{ display: none; }
  .seLoopNodesRow::before{ left: 16px; right: 16px; }
}

/* Phase timeline */
.stepTimeline{
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.stepTimeline::-webkit-scrollbar{ display: none; }

.sePhase{
  flex: 1 1 0;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  min-width: 90px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  color: inherit;
  font-family: inherit;
  text-align: center;
}
.sePhase:hover,
.sePhase:focus-visible{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(43,108,255,0.18);
  outline: none;
  position: relative;
  z-index: 1;
}
.sePhase[aria-selected="true"]{
  border-color: var(--primary);
  background: rgba(43,108,255,0.07);
}
:root[data-theme="dark"] .sePhase[aria-selected="true"]{
  background: rgba(77,143,255,0.12);
}
:root[data-theme="dark"] .sePhase:hover,
:root[data-theme="dark"] .sePhase:focus-visible{
  box-shadow: 0 0 0 3px rgba(77,143,255,0.22);
}
.sePhaseIcon{ font-size: 1.15rem; line-height: 1; font-variant-emoji: text; }
.sePhaseName{ font-size: 0.72rem; font-weight: 700; line-height: 1.2; }
.sePhasePct { font-size: 0.62rem; color: var(--muted2); }

.sePhaseConn{
  flex: 0 0 12px;
  height: 2px;
  background: var(--border);
}

/* Progress bar */
.timelineProgress{
  width: 100%;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.timelineProgressFill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  border-radius: 2px;
  transition: width 350ms ease;
}

/* Signal waveforms */
.signalWaves{
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 12px 16px 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.seSignalTrack{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.seSignalLbl{
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted2);
}
.seSignalSvg{
  width: 100%;
  height: 36px;
  display: block;
  overflow: visible;
}

/* Detail panel */
.stepDetail{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.stepDetail h4{
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin: 0 0 0.45rem;
}
.stepDetail p{
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
  color: var(--muted);
}

/* Fact cards */
.factGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 1rem;
}
.seFactCard{
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  cursor: default;
}
.seFactCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(2,6,23,0.12);
  border-color: rgba(43,108,255,0.35);
}
:root[data-theme="dark"] .seFactCard:hover{
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  border-color: rgba(77,143,255,0.4);
}
.seFactTag{
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--primary);
  margin-bottom: 0.4rem;
}
.seFactHook{
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.45rem;
  color: var(--text);
}
.seFactBody{
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0;
  color: var(--muted);
}

.stepRef{
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted2);
  margin-top: 0.5rem;
}
.stepRef a{ color: var(--primary); text-decoration: underline; }

/* Responsive */
@media (max-width: 680px){
  .stepDetail{ grid-template-columns: 1fr; gap: 1rem; padding: 1.2rem; }
  .signalWaves{ flex-direction: column; gap: 8px; }
  .factGrid{ grid-template-columns: 1fr; }
  .stepTimeline{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }
  .sePhase{
    min-width: 0;
    width: 100%;
  }
  .sePhaseConn{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .sePhase, .seFactCard, .timelineProgressFill{ transition: none; }
}

/* ===========================
   Telemetry panel (redesigned signal section)
   =========================== */
.seTelemetry{ margin-bottom: 1.5rem; }

.seTelemetryTitle{
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted2);
  margin-bottom: 8px;
}

.seTelemetryGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 720px){ .seTelemetryGrid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px){ .seTelemetryGrid{ grid-template-columns: 1fr; } }

.seSignalCard{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  min-width: 0;
}

.seCardHeader{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
}
.seCardName{
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seCardUnit{
  font-size: 0.58rem;
  color: var(--muted2);
  white-space: nowrap;
  flex-shrink: 0;
}

.seTraceSvg{
  width: 100%;
  height: 36px;
  display: block;
}

/* Phase highlight rect — CSS transition for smooth updates */
.seHighlightRect{
  transition: x 300ms ease, width 300ms ease, fill 300ms ease, opacity 200ms ease;
}

/* Trace path — subtle live-data pulse */
.seTracePath{
  animation: seTracePulse 2.4s ease-in-out infinite;
}
@keyframes seTracePulse{
  0%, 100%{ opacity: 0.65; }
  50%      { opacity: 1; }
}

/* State estimate bar */
.seStateBar{
  display: flex;
  gap: 3px;
  height: 26px;
  margin-top: 4px;
}
.seStateSeg{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  opacity: 0.25;
  transition: opacity 250ms ease;
  overflow: hidden;
}
.seStateSeg.active{ opacity: 1; }
.seStateSeg span{
  font-size: 0.5rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  padding: 0 2px;
  display: block;
  text-align: center;
}

/* Loop label */
.seLoopLabel{
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted2);
  margin-bottom: 10px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce){
  .seTracePath{ animation: none; opacity: 0.8; }
  .seHighlightRect{ transition: none; }
  .seStateSeg{ transition: none; }
}

/* ===========================
   2-plot signal row (Foot Pitch + vGRF side by side)
   =========================== */
.seTelemetry{ width: 100%; }

.seTelemetryStack{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.seTraceSvgLarge{
  height: 56px;
}

.seTelemetryCaption{
  font-size: 0.72rem;
  color: var(--muted2);
  font-style: italic;
  margin-top: 6px;
}

@media (max-width: 480px){
  .seTelemetryStack{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .seTraceSvgLarge .seTracePath{ animation: none; opacity: 0.8; }
}

/* ===========================
   About section text (no card box)
   =========================== */
.aboutText{
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  max-width: 720px;
}
.aboutText .projDesc{
  line-height: 1.72;
  font-size: 0.975rem;
}
.aboutText .projDesc:first-child{
  font-size: 1.05rem;
}

/* ===========================
   Press & Recognition badges (project pages)
   =========================== */
.pressSection{ margin: 1.5rem 0 1rem; }

.pressSectionTitle{
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted2);
  margin: 0 0 10px;
}

.pressIntro{
  max-width: 720px;
  margin: -2px 0 14px;
  color: var(--muted);
  line-height: 1.65;
}

.pressGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.pressBadge{
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.pressBadge:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

.pressTag{
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}
.pressHook{
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.pressSnippet{
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* ===========================
   Moonwalkers Generation Cards
   =========================== */
.mwGenRow{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 1rem 0 1.5rem;
}

.mwGenCard{
  border-top: 3px solid var(--gc);
  border-radius: 0 0 12px 12px;
  padding: 14px 16px 16px;
  background: var(--bg2);
  border-left: 1px solid rgba(15,23,42,0.07);
  border-right: 1px solid rgba(15,23,42,0.07);
  border-bottom: 1px solid rgba(15,23,42,0.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.16s, box-shadow 0.16s;
}

.mwGenCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}

.mwGenCard--future{
  opacity: 0.7;
}

.mwTone--blue{
  --gc: #2b6cff;
  --tn: #2b6cff;
  --ec: #2b6cff;
}

.mwTone--magenta{
  --gc: #8B1A4A;
  --tn: #8B1A4A;
  --ec: #8B1A4A;
}

.mwTone--green{
  --gc: #2D6A2D;
  --tn: #2D6A2D;
  --ec: #2D6A2D;
}

.mwGenName{
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gc);
  letter-spacing: -0.01em;
}

.mwGenYear{
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.mwGenPill{
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  width: fit-content;
}

.mwGenPill--live{
  background: rgba(22,163,74,0.12);
  color: #16a34a;
}

.mwGenPill--soon{
  background: rgba(139,26,74,0.10);
  color: #8B1A4A;
}

.mwGenPill--dev{
  background: rgba(15,23,42,0.07);
  color: var(--muted);
}

.mwGenDetail{
  font-size: 0.8rem;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.5;
}

:root[data-theme="dark"] .mwGenCard{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .mwGenCard:hover{
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
:root[data-theme="dark"] .mwGenPill--live{
  background: rgba(22,163,74,0.18);
  color: #4ade80;
}
:root[data-theme="dark"] .mwGenPill--soon{
  background: rgba(251,113,133,0.12);
  color: #fb7185;
}

@media (max-width: 580px){
  .mwGenRow{ grid-template-columns: 1fr 1fr; }
}

/* ===========================
   Moonwalkers Control Evolution
   =========================== */
.mwEvolution{
  margin-top: 1.5rem;
}

.mwEvolHeader{
  margin-bottom: 1.2rem;
}

.mwEvolTitle{
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

.mwEvolSubtitle{
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 560px;
  margin: 0;
}

/* Public ShiftOS release notes, homed in the evolution header (their natural
   version context) instead of floating in the hero aside. */
.mwEvolReleases{
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--muted2);
}

.mwEvolReleases a{
  font-weight: 700;
  color: var(--primaryDark);
  text-decoration: none;
}

.mwEvolReleases a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Top timeline strip */
.mwEvolTimeline{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
  margin-bottom: 1.2rem;
}

.mwEvolTimeline::before{
  content: '';
  position: absolute;
  top: 6px;
  left: calc((100% - 24px) / 6);
  right: calc((100% - 24px) / 6);
  height: 2px;
  background: var(--border);
}

.mwEvolTimeNode{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.mwEvolTimeDot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tn) 18%, transparent);
}

.mwEvolTimeTrack{
  display: none;
}

.mwEvolTimeYear{
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--tn);
  text-align: center;
  white-space: nowrap;
}

.mwEvolTimeName{
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

/* 3-column grid */
.mwEvolGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
}

/* Individual evolution card */
.mwEvolCard{
  border-left: 4px solid var(--ec);
  border-radius: 0 12px 12px 0;
  padding: 16px 16px 0;
  background: var(--bg2);
  border-top: 1px solid rgba(15,23,42,0.07);
  border-right: 1px solid rgba(15,23,42,0.07);
  border-bottom: 1px solid rgba(15,23,42,0.07);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mwEvolCard--future{
  opacity: 0.75;
}

/* In-development work: header stays legible, but the concrete focus items and
   outcome are veiled since they aren't publicly released yet. */
.mwEvolCard--future .mwEvolList,
.mwEvolCard--future .mwEvolResult{
  filter: blur(3.5px);
  user-select: none;
}

/* Card header */
.mwEvolCardHead{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.mwEvolCardNum{
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ec);
  background: color-mix(in srgb, var(--ec) 10%, transparent);
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}

.mwEvolCardTitle{
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.mwEvolCardSub{
  font-size: 0.84rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Section blocks */
.mwEvolSection{
  margin-bottom: 12px;
}

.mwEvolSectionLabel{
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.mwEvolFocus{
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

/* Built list with category pills */
.mwEvolList{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mwEvolList li{
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: baseline;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.35;
}

/* Category pills */
.mwEvolPill{
  display: block;
  width: 100%;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
}

.ep--perception   { background: rgba(124,58,237,0.10); color: #7c3aed; }
.ep--estimation   { background: rgba(37,99,235,0.10);  color: #2563eb; }
.ep--control      { background: rgba(8,145,178,0.10);  color: #0891b2; }
.ep--embedded     { background: rgba(217,119,6,0.12);  color: #d97706; }
.ep--safety       { background: rgba(22,163,74,0.10);  color: #16a34a; }
.ep--architecture { background: rgba(71,85,105,0.10);  color: #475569; }
.ep--adaptation   { background: rgba(219,39,119,0.10); color: #db2777; }
.ep--mode         { background: rgba(67,56,202,0.10);  color: #4338ca; }
.ep--framework    { background: rgba(8,145,178,0.10);  color: #0891b2; }
.ep--sensing      { background: rgba(124,58,237,0.10); color: #7c3aed; }
.ep--prediction   { background: rgba(37,99,235,0.10);  color: #2563eb; }
.ep--terrain      { background: rgba(146,64,14,0.10);  color: #92400e; }

/* Result bar */
.mwEvolResult{
  margin-top: auto;
  padding: 10px 0 14px;
  border-top: 1px solid rgba(15,23,42,0.07);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mwEvolResultLabel{
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ec);
}

.mwEvolResultText,
.mwEvolResult > :last-child{
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

/* Dark mode */
:root[data-theme="dark"] .mwEvolCard{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.09);
  border-left-color: var(--ec);
}
:root[data-theme="dark"] .mwEvolResult{
  border-top-color: rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .ep--perception   { background: rgba(124,58,237,0.18); }
:root[data-theme="dark"] .ep--estimation   { background: rgba(37,99,235,0.18);  }
:root[data-theme="dark"] .ep--control      { background: rgba(8,145,178,0.18);  }
:root[data-theme="dark"] .ep--embedded     { background: rgba(217,119,6,0.20);  }
:root[data-theme="dark"] .ep--safety       { background: rgba(22,163,74,0.18);  }
:root[data-theme="dark"] .ep--architecture { background: rgba(71,85,105,0.20);  }
:root[data-theme="dark"] .ep--adaptation   { background: rgba(219,39,119,0.18); }
:root[data-theme="dark"] .ep--mode         { background: rgba(67,56,202,0.18);  }
:root[data-theme="dark"] .ep--framework    { background: rgba(8,145,178,0.18);  }
:root[data-theme="dark"] .ep--sensing      { background: rgba(124,58,237,0.18); }
:root[data-theme="dark"] .ep--prediction   { background: rgba(37,99,235,0.18);  }
:root[data-theme="dark"] .ep--terrain      { background: rgba(146,64,14,0.20);  color: #b45309; }

@media (max-width: 720px){
  .mwEvolGrid{ grid-template-columns: 1fr; }
  .mwEvolTimeline{ display: none; }
}

/* =================================================================
   PREMIUM UI — texture, reveals, nav polish, timeline, micro-interactions
   (additive; all motion respects prefers-reduced-motion at the bottom)
   ================================================================= */

/* --- Smooth theme crossfade (dark/light) --- */
body,
.nav,
.card,
.stat,
.btn,
.tag,
.pill,
.tlCard{
  transition: background-color .38s ease, border-color .38s ease, color .38s ease, box-shadow .38s ease;
}

/* --- 8. Subtle technical-texture background (faint engineered grid) --- */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(43,108,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,108,255,0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 55%, transparent 100%);
}
:root[data-theme="dark"] body::before{
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
}

/* --- 6. Reveal direction + stagger variants (base .reveal already exists) --- */
.reveal{ transition-delay: var(--d, 0ms); will-change: opacity, transform; }
.reveal-up{ transform: translateY(26px); }
.reveal-left{ transform: translateY(8px) translateX(-30px); }
.reveal-right{ transform: translateY(8px) translateX(34px); }
.reveal-up.show,
.reveal-left.show,
.reveal-right.show{ transform: none; }

/* Experience: line-drawing accent that grows as the card reveals */
.expCard{ position: relative; overflow: hidden; }
.expCard::before{
  content:"";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .9s ease .15s;
}
.expCard.show::before{ transform: scaleY(1); }

/* --- 9. Premium nav --- */
.scrollProgress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  will-change: transform;
}
.nav{ transition: box-shadow .3s ease, background-color .3s ease; }
.nav.scrolled{
  box-shadow: 0 8px 30px rgba(2,6,23,0.10);
  background: rgba(255,255,255,0.82);
}
:root[data-theme="dark"] .nav.scrolled{ background: rgba(12,18,32,0.82); }

/* Animated sliding underline on nav links */
.navLinks a{ position: relative; }
.navLinks a::after{
  content:"";
  position: absolute;
  left: 10px; right: 10px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.navLinks a:hover::after{ transform: scaleX(1); }

/* Theme/lang controls styled as small system toggles */
.themeBtn,
.langBtn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.6);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.themeBtn:hover,
.langBtn:hover{
  color: var(--text);
  border-color: rgba(43,108,255,0.4);
  background: rgba(43,108,255,0.08);
}
.themeBtn:active,
.langBtn:active{ transform: scale(0.96); }
:root[data-theme="dark"] .themeBtn,
:root[data-theme="dark"] .langBtn{ background: rgba(255,255,255,0.06); }

/* --- 7. Research → product timeline --- */
.timelineWrap{ margin-top: 18px; }
.timelineTrack{
  position: relative;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 28px 4px 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  cursor: grab;
}
.timelineTrack.dragging{ cursor: grabbing; scroll-snap-type: none; }
.timelineTrack::-webkit-scrollbar{ height: 6px; }
.timelineTrack::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 999px; }
.timelineLine{
  position: absolute;
  top: 40px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  opacity: .5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s ease .1s;
}
.timelineWrap.show .timelineLine{ transform: scaleX(1); }

.tlNode{
  position: relative;
  flex: 0 0 230px;
  scroll-snap-align: start;
  padding-top: 26px;
}
.tlDot{
  position: absolute;
  top: 8px; left: 8px;
  width: 16px; height: 16px;
  background: var(--card);
  border: 3px solid var(--primary);
  box-shadow: 0 0 0 4px rgba(43,108,255,0.10);
  z-index: 1;
}
.tl-research .tlDot{ border-radius: 999px; }                 /* research = circle */
.tl-industry .tlDot{ border-radius: 3px; transform: rotate(45deg); border-color: var(--primary2); box-shadow: 0 0 0 4px rgba(0,194,255,0.12); } /* industry = diamond */
.tl-current .tlDot{ animation: tlPulse 2.2s ease-out infinite; }

@keyframes tlPulse{
  0%   { box-shadow: 0 0 0 0 rgba(0,194,255,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(0,194,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,194,255,0); }
}

.tlYear{ font-weight: 800; font-size: .9rem; color: var(--primaryDark); margin: 0 0 6px 2px; }
.tlCard{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tlNode:hover .tlCard{
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: rgba(43,108,255,0.35);
}
.tlKind{
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.tl-research .tlKind{ color: var(--primaryDark); background: rgba(43,108,255,0.10); }
.tl-industry .tlKind{ color: #0782a3; background: rgba(0,194,255,0.12); }
.tlTitle{ font-weight: 800; line-height: 1.3; }
.tlOrg{ color: var(--muted); font-size: .9rem; margin-top: 2px; }
.tlDetail{
  color: var(--muted2);
  font-size: .85rem;
  margin-top: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.tlNode:hover .tlDetail,
.tlNode:focus-within .tlDetail{ max-height: 120px; opacity: 1; margin-top: 8px; }
:root[data-theme="dark"] .tl-industry .tlKind{ color: #67e8f9; }

/* --- 10. Micro-interactions --- */
.proj{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.proj:hover{ transform: translateY(-6px) rotate(-0.4deg); box-shadow: var(--shadow); }
.btn{ transition: transform .18s ease, box-shadow .18s ease, background-color .2s ease, border-color .2s ease; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.tag, .pill{ transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease; }
.tag:hover, .pill:hover{ transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(43,108,255,0.12); }
.contactItem{ transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.contactItem:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }

@media (max-width: 820px){
  .tlNode{ flex-basis: 200px; }
  /* No hover on touch — show milestone detail by default */
  .tlDetail{ max-height: 160px; opacity: 1; margin-top: 8px; }
}

/* --- Respect reduced motion: disable all the above motion --- */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .expCard::before{ transform: scaleY(1); transition: none; }
  .timelineLine{ transform: scaleX(1); transition: none; }
  .tl-current .tlDot{ animation: none; }
  .scrollProgress{ display: none; }
  .proj:hover{ transform: none; }
  .btn:hover,
  .tag:hover,
  .pill:hover,
  .contactItem:hover,
  .tlNode:hover .tlCard{ transform: none; }
}

/* =================================================================
   REDESIGN v2 — cockpit hero, achievement tiles, case-study strips,
   gait centerpiece. Robotics-studio feel; motion guarded for reduced-motion.
   ================================================================= */

/* ---- 1. Split-screen hero + parallax background ---- */
.hero{ position: relative; overflow: hidden; padding-top: 36px; }
.heroBg{
  position: absolute;
  inset: -40px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 320px at 78% 18%, rgba(0,194,255,0.16), transparent 70%),
    radial-gradient(520px 320px at 12% 0%, rgba(43,108,255,0.14), transparent 70%),
    linear-gradient(rgba(43,108,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,108,255,0.06) 1px, transparent 1px);
  background-size: auto, auto, 38px 38px, 38px 38px;
  -webkit-mask-image: radial-gradient(130% 110% at 70% 10%, #000 50%, transparent 100%);
          mask-image: radial-gradient(130% 110% at 70% 10%, #000 50%, transparent 100%);
  transition: transform .2s ease-out;
}
.heroGrid{ position: relative; z-index: 1; }
.heroRight{ perspective: 1100px; }

/* ---- Cockpit instrument panel ---- */
.cockpit{
  --ink:#e7eefb; --ink2:#9fb2d0; --line:rgba(255,255,255,0.10);
  position: relative;
  border-radius: 18px;
  padding: 14px;
  color: var(--ink);
  background:
    linear-gradient(180deg, #0d1730, #0a1224) padding-box,
    linear-gradient(135deg, rgba(43,108,255,0.9), rgba(0,194,255,0.7) 45%, rgba(43,108,255,0.25)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 30px 70px rgba(2,6,23,0.30);
  transform-style: preserve-3d;
  transition: transform .15s ease-out, box-shadow .3s ease;
  will-change: transform;
}
.cockpitHead{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.cockpitLive{
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  color: #5ee9b5;
  background: rgba(46,204,150,0.12);
  border: 1px solid rgba(46,204,150,0.35);
  padding: 4px 8px; border-radius: 999px;
}
.cockpitLiveDot{ width: 7px; height: 7px; border-radius: 999px; background: #2ee59a; box-shadow: 0 0 0 0 rgba(46,229,154,0.6); animation: tlPulse 1.8s ease-out infinite; }
.cockpitTitle{
  font: 700 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink2);
}
.cockpitFeed{ position: relative; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.cockpitFeed video{ width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }
.cockpitScan{
  position: absolute; left: 0; right: 0; top: 0; height: 38%;
  background: linear-gradient(180deg, rgba(0,194,255,0.18), transparent);
  mix-blend-mode: screen; pointer-events: none;
  animation: cockpitScan 4.5s linear infinite;
}
@keyframes cockpitScan{ 0%{ transform: translateY(-40%);} 100%{ transform: translateY(280%);} }
.cockpitFeedCap{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 10px 7px;
  font-size: .76rem; color: #cfe0fb;
  background: linear-gradient(0deg, rgba(6,12,26,0.85), transparent);
}
.cockpitFeedCap a{ color: #6fd2ff; font-weight: 700; }
.cockpitWave{ color: #2ee59a; height: 34px; margin: 10px 2px 4px; opacity: .8; }
.cockpitWave svg{ width: 100%; height: 100%; display: block; }
.cockpitWave path{ stroke-dasharray: 600; animation: cockpitTrace 6s linear infinite; }
@keyframes cockpitTrace{ from{ stroke-dashoffset: 600; } to{ stroke-dashoffset: 0; } }

.cockpitReadout{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cockpitRow{ display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; background: rgba(8,14,28,0.6); }
.cockpitRow:last-child:nth-child(odd){ grid-column: span 2; }
.cockpitLabel{ font: 700 .62rem/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.cockpitValue{ font: 700 .98rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #eaf2ff; }
.cockpitValue.flip{ animation: cockpitFlip .35s ease; }
@keyframes cockpitFlip{ 0%{ opacity: 0; transform: translateY(-4px); } 100%{ opacity: 1; transform: none; } }
.cockpitCaption{ margin: 9px 2px 2px; font-size: .68rem; color: var(--ink2); }

@media (max-width: 920px){
  .heroRight{ perspective: none; }
  .cockpit{ transform: none !important; }
}
@media (prefers-reduced-motion: reduce){
  .cockpitScan, .cockpitWave path, .cockpitLiveDot{ animation: none; }
  .cockpitValue.flip{ animation: none; }
  .heroBg{ transition: none; }
}

/* ---- 2. Premium achievement tiles ---- */
.statRow .statGrid{ gap: 14px; }
.statTile{ position: relative; overflow: hidden; padding: 18px 16px; }
.statTile > *{ position: relative; z-index: 1; }
.statGhost{
  position: absolute; right: 10px; bottom: -14px; z-index: 0;
  font: 900 5.4rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.05em; color: var(--text); opacity: 0.05;
  pointer-events: none; user-select: none; white-space: nowrap;
}
.statTile .statNum{ letter-spacing: -0.02em; }
.statTile .statBadge{ font-weight: 800; letter-spacing: .03em; }
/* gradient border ring, revealed on hover */
.statTile::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2;
  background: linear-gradient(135deg, rgba(43,108,255,0.55), rgba(0,194,255,0.4) 40%, transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.statTile:hover{ transform: translateY(-6px); box-shadow: 0 30px 70px rgba(2,6,23,0.16); }
.statTile:hover::after{ opacity: 1; }
.stat--featured .statGhost{ color: var(--primary); opacity: 0.08; }
.stat--award .statGhost{ color: #f59e0b; opacity: 0.08; }
.statRowTitle{ letter-spacing: -0.01em; }
:root[data-theme="dark"] .statGhost{ opacity: 0.07; }
@media (prefers-reduced-motion: reduce){ .statTile:hover{ transform: none; } }

/* ---- 3. Featured projects as alternating case-study strips ---- */
.caseStudies{ display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.caseStudy{
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  box-shadow: 0 10px 30px rgba(2,6,23,0.05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.caseStudy:hover{ transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(43,108,255,0.30); }
.caseStudy:nth-child(even) .csVisual{ order: 2; }
.caseStudy:nth-child(even) .csText{ order: 1; }

.csVisual{
  position: relative;
  min-height: 250px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(0,194,255,0.10), transparent 60%),
    linear-gradient(135deg, rgba(43,108,255,0.07), rgba(0,194,255,0.04));
  border-right: 1px solid var(--border);
}
.caseStudy:nth-child(even) .csVisual{ border-right: 0; border-left: 1px solid var(--border); }
.csVisual img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.csIndex{
  position: absolute; top: 8px; right: 14px; z-index: 1;
  font: 900 2.4rem/1 ui-monospace, monospace; color: var(--primary); opacity: 0.16; letter-spacing: -0.04em;
}
.csTagFloat{
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--primaryDark); background: rgba(255,255,255,0.85);
  border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.csText{ display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px 26px; }
.csOutcome{ margin: 0; color: var(--primaryDark); font-weight: 800; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.csTitle{ margin: 0; font-size: clamp(18px, 2vw, 25px); line-height: 1.22; letter-spacing: -0.01em; }
.csDesc{ margin: 0; color: var(--muted); }
.csList{ margin: 4px 0 0; padding: 0 0 0 18px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.csList li{ font-size: .92rem; }
.csArrow{ margin-top: 8px; color: var(--primaryDark); font-weight: 800; transition: transform .22s ease; }
.caseStudy:hover .csArrow{ transform: translateX(5px); }

:root[data-theme="dark"] .csTagFloat{ background: rgba(12,18,32,0.7); }
:root[data-theme="dark"] .csVisual{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(0,194,255,0.12), transparent 60%),
    linear-gradient(135deg, rgba(43,108,255,0.12), rgba(0,194,255,0.05));
}

@media (max-width: 760px){
  .caseStudy{ grid-template-columns: 1fr; }
  .caseStudy .csVisual,
  .caseStudy:nth-child(even) .csVisual{ order: 0; border-right: 0; border-left: 0; border-bottom: 1px solid var(--border); min-height: 200px; }
  .caseStudy .csText,
  .caseStudy:nth-child(even) .csText{ order: 1; }
}
@media (prefers-reduced-motion: reduce){ .caseStudy:hover{ transform: none; } .caseStudy:hover .csArrow{ transform: none; } }

/* ---- 4. "Hidden Engineering in a Step" centerpiece ---- */
#step-engineering{
  background: linear-gradient(180deg, rgba(43,108,255,0.045), rgba(0,194,255,0.03));
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 26px 22px;
  box-shadow: 0 22px 60px rgba(2,6,23,0.06);
}
#step-engineering .sectionHead h2{ font-size: clamp(22px, 3.2vw, 34px); letter-spacing: -0.02em; }
.seCenter{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 16px; align-items: stretch; margin: 16px 0; }
.seStage{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.96), rgba(248,251,255,.84) 62%, rgba(239,246,255,.76)),
    var(--card);
  border: 1px solid var(--border); border-radius: 16px; padding: 10px; min-height: 320px;
  overflow: hidden;
  isolation: isolate;
}
.seGridBackground{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(43,108,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,108,255,0.055) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,.9), rgba(0,0,0,.58) 58%, rgba(0,0,0,.18));
}
.seStageLabel{ position: absolute; top: 14px; left: 16px; display: flex; flex-direction: column; gap: 2px; z-index: 4; }
.seStagePhase{ font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; }
.seStagePct{ font: 700 .72rem/1 ui-monospace, monospace; color: var(--primaryDark); letter-spacing: .06em; }
.seImageStack{
  position: absolute;
  inset: 28px 16px 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.sePhaseImage{
  position: absolute;
  width: min(92%, 520px);
  height: min(88%, 300px);
  object-fit: contain;
  opacity: 0;
  transform: translateY(5px) scale(.985);
  transition: opacity .22s ease, transform .22s ease;
  filter: drop-shadow(0 18px 28px rgba(15,23,42,.12));
  mix-blend-mode: multiply;
}
.sePhaseImage.seImageActive{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.seStageOverlay{
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.seOverlayArc{
  fill: none;
  stroke: var(--primary);
  stroke-width: 1;
  stroke-dasharray: 3 9;
  opacity: .12;
  vector-effect: non-scaling-stroke;
  transition: d .22s ease;
}
.seOverlayGround{
  stroke: var(--muted2);
  stroke-width: 1;
  stroke-dasharray: 6 8;
  opacity: .42;
  vector-effect: non-scaling-stroke;
}
.seOverlayContact{
  fill: var(--primary2);
  filter: blur(.35px);
  opacity: .44;
  transition: opacity .2s ease, cx .2s ease, rx .2s ease;
}
.seOverlayHalo{
  fill: rgba(77,143,255,.075);
  stroke: rgba(43,108,255,.34);
  stroke-width: 1;
  stroke-dasharray: 5 6;
  vector-effect: non-scaling-stroke;
  transition: cx .2s ease, cy .2s ease, rx .2s ease, ry .2s ease;
}
.seOverlayMarker{
  fill: var(--primary);
  stroke: rgba(255,255,255,.92);
  stroke-width: 1.8;
  opacity: .9;
  vector-effect: non-scaling-stroke;
  transition: cx .2s ease, cy .2s ease;
}
.seOverlayCallout{
  fill: none;
  stroke: rgba(43,108,255,.42);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.seOverlayDot{ fill: var(--primary); opacity: .68; transition: cx .2s ease, cy .2s ease; }
.seOverlayNote{ fill: var(--primaryDark); font: 800 9px/1 Inter, system-ui, sans-serif; letter-spacing: .055em; text-transform: uppercase; }
:root[data-theme="dark"] .seOverlayNote{ fill: #9fc2ff; }
:root[data-theme="dark"] #step-engineering{ background: transparent; }
:root[data-theme="dark"] .seStage{
  background:
    radial-gradient(circle at 50% 48%, rgba(15,23,42,.94), rgba(12,18,32,.86) 62%, rgba(7,12,24,.8)),
    rgba(255,255,255,0.02);
}
:root[data-theme="dark"] .seGridBackground{
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
}
@media (max-width: 820px){ .seCenter{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){
  .sePhaseImage,
  .seOverlayArc,
  .seOverlayContact,
  .seOverlayHalo,
  .seOverlayMarker,
  .seOverlayDot{ transition: none; }
}

/* =================================================================
   PERSONAL-FIRST HOMEPAGE
   Clean video hero, desktop section rail, compact credibility flow.
   ================================================================= */

.homeShell{
  width: min(1480px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 28px;
  padding: 0 24px 0 14px;
}

.homeMain.container{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 18px 40px;
}

.homeSectionNav{
  position: sticky;
  top: 66px;
  height: calc(100vh - 66px);
  align-self: start;
  padding: 34px 0 28px;
  color: var(--muted);
}

.homeSectionNavBrand{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: center;
  margin-bottom: 22px;
  font-size: .72rem;
  line-height: 1.35;
}

.homeSectionMark{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 10px 28px rgba(43,108,255,0.18);
}

.homeSectionNav nav{
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--border);
  padding-left: 8px;
}

.homeSectionNav a{
  position: relative;
  display: block;
  padding: 7px 10px 7px 15px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .79rem;
  font-weight: 750;
}

.homeSectionNav a::before{
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--border);
  border: 2px solid var(--bg2);
  transform: translateY(-50%);
}

.homeSectionNav a:hover,
.homeSectionNav a.active{
  color: var(--text);
  background: rgba(43,108,255,0.08);
}

.homeSectionNav a.active::before{
  background: var(--primary);
  box-shadow: 0 0 0 5px rgba(43,108,255,0.12);
}

.homeHero{
  min-height: min(820px, calc(100vh - 64px));
  display: grid;
  align-items: center;
  padding-top: 42px;
  padding-bottom: 30px;
}

.homeHeroGrid{
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .88fr);
  gap: 34px;
  align-items: center;
}

.homeHeroRole{
  margin: -2px 0 10px;
  color: var(--primaryDark);
  font-weight: 800;
}

.homeHeroTags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.homeHeroTags span,
.chip{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--primaryDark);
  background: rgba(43,108,255,0.08);
  border: 1px solid rgba(43,108,255,0.13);
  font-size: .76rem;
  font-weight: 800;
}

.homeVideoCard{
  max-height: none;
  border-radius: 22px;
  background: var(--card);
}

.homeVideoCard video{
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.homeVideoCard figcaption{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.82);
}

.snapshotGrid{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.snapshotGrid .statHero,
.snapshotGrid .statSupport{
  grid-column: auto;
  min-height: 138px;
}

.snapshotGrid .statTile{
  padding: 18px 16px;
}

.aboutPanel{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: stretch;
}

.aboutPanel .aboutText{
  margin: 0;
}

.aboutPortrait{
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.sectionIntro{
  margin: -8px 0 18px;
  color: var(--muted);
  max-width: 64ch;
}

.workGrid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.workCard{
  grid-column: span 6;
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  min-height: 286px;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(2,6,23,0.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.workCardLarge{
  grid-column: span 12;
  grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr);
}

.workCard:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(43,108,255,0.28);
}

.workCardMedia{
  position: relative;
  min-height: 220px;
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(0,194,255,0.08), transparent 60%),
    linear-gradient(135deg, rgba(43,108,255,0.06), rgba(0,194,255,0.03));
  border-right: 1px solid var(--border);
}

/* The card image is a link to the project page (fills the whole media area). */
.workCardMediaLink{
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
}

.workCardMedia img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
}

.workCardBody{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 22px;
}

.workCardBody h3{
  margin: 0;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.workCardBody p{
  margin: 0;
  color: var(--muted);
}

.workMeta{
  color: var(--primaryDark);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.workRole{
  font-size: .92rem;
}

.chipRow{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.publicationList{
  display: grid;
  gap: 12px;
}

.publicationItem{
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(2,6,23,0.04);
}

.publicationVenue{
  color: var(--primaryDark);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.publicationBody h3{
  margin: 0 0 6px;
  font-size: 1.04rem;
  line-height: 1.35;
}

.publicationBody p{
  margin: 0;
  color: var(--muted);
}

.publicationLinks{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.publicationLinks a{
  color: var(--primaryDark);
  font-weight: 850;
  font-size: .86rem;
}

.updatesCard{
  box-shadow: 0 8px 24px rgba(2,6,23,0.04);
}

.compactNewsList li{
  align-items: center;
}

.educationCard{
  box-shadow: 0 8px 24px rgba(2,6,23,0.04);
}

.educationList li{
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.educationList li:last-child{
  border-bottom: 0;
}

@media (max-width: 1160px){
  .homeShell{
    display: block;
    padding: 0 18px;
  }

  .homeSectionNav{
    display: none;
  }

  .snapshotGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .snapshotGrid .statTile:first-child{
    grid-column: span 2;
  }
}

@media (max-width: 920px){
  .homeHero{
    min-height: auto;
    padding-top: 34px;
  }

  .homeHeroGrid{
    grid-template-columns: 1fr;
  }

  .homeVideoCard{
    max-width: 640px;
  }

  .homeVideoCard video{
    aspect-ratio: 16 / 10;
  }

  .aboutPanel{
    grid-template-columns: 1fr;
  }

  .aboutPortrait{
    max-width: 260px;
    min-height: 260px;
  }

  .workCard,
  .workCardLarge{
    grid-column: span 12;
    grid-template-columns: 1fr;
  }

  .workCardMedia{
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 640px){
  .homeShell{
    padding: 0 14px;
  }

  .homeHero h1{
    font-size: clamp(42px, 16vw, 58px);
  }

  .snapshotGrid{
    grid-template-columns: 1fr;
  }

  .snapshotGrid .statTile:first-child{
    grid-column: auto;
  }

  .publicationItem{
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .compactNewsList li{
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

:root[data-theme="dark"] .homeVideoCard figcaption{
  background: rgba(17,26,46,0.86);
}

:root[data-theme="dark"] .workCardMedia{
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(0,194,255,0.12), transparent 60%),
    linear-gradient(135deg, rgba(43,108,255,0.11), rgba(0,194,255,0.05));
}

@media (prefers-reduced-motion: reduce){
  .workCard:hover{
    transform: none;
  }
}

/* =================================================================
   HOMEPAGE RHYTHM POLISH
   Shared card language + tighter portfolio density.
   ================================================================= */

.homeMain{
  --home-radius: 14px;
  --home-gap: 14px;
  --home-section-y: 48px;
  --home-card-shadow: 0 8px 24px rgba(2,6,23,0.045);
}

.homeMain > .section{
  padding: var(--home-section-y) 0 0;
}

.homeMain .sectionHead{
  margin-bottom: 14px;
  align-items: end;
  gap: 18px;
}

.homeMain .sectionHead h2{
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
}

.homeMain .small,
.sectionIntro,
.statRowSub{
  font-size: .9rem;
  line-height: 1.45;
}

.homeCard{
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--border);
  border-radius: var(--home-radius);
  box-shadow: var(--home-card-shadow);
}

.homeCard:hover{
  border-color: rgba(43,108,255,0.24);
  box-shadow: 0 12px 32px rgba(2,6,23,0.075);
}

.homeShell{
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  max-width: 1480px;
}

.homeSectionNav{
  top: 60px;
  height: auto;
  padding-top: 30px;
}

.homeSectionNavBrand,
.homeSectionMark{
  display: none;
}

.homeSectionNav nav{
  gap: 2px;
  padding-left: 7px;
}

.homeSectionNav a{
  padding: 6px 8px 6px 12px;
  font-size: .74rem;
  font-weight: 760;
  background: transparent;
}

.homeSectionNav a::before{
  left: -11px;
  width: 5px;
  height: 5px;
}

.homeSectionNav a.active{
  background: transparent;
  color: var(--primaryDark);
}

.homeSectionNav a.active::before{
  box-shadow: 0 0 0 4px rgba(43,108,255,0.10);
}

.homeHero{
  min-height: min(560px, calc(100vh - 64px));
  padding: 24px 0 16px;
}

.homeHeroGrid{
  gap: 28px;
}

.homeHero h1{
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: clamp(46px, 5vw, 66px);
}

.homeHeroRole{
  margin: 0 0 16px;
  font-size: 1.05rem;
  line-height: 1.45;
}

.homeHero .heroLead{
  margin-bottom: 0;
  font-size: 1.08rem;
  line-height: 1.5;
}

.homeHero .ctaRow{
  margin-top: 18px;
  gap: 9px;
}

.homeHeroTags{
  margin-top: 14px;
  gap: 7px;
}

.homeHeroTags span,
.chip{
  min-height: 25px;
  padding: 4px 8px;
  font-size: .72rem;
}

.homeVideoCard{
  border-radius: var(--home-radius);
  box-shadow: var(--home-card-shadow);
}

.homeVideoCard figcaption{
  min-height: 56px;
  align-items: center;
  padding: 9px 13px;
  font-size: .82rem;
  line-height: 1.35;
}

.snapshotGrid{
  gap: var(--home-gap);
}

.snapshotGrid .statTile{
  min-height: auto;
  padding: 14px;
  border-radius: var(--home-radius);
  box-shadow: var(--home-card-shadow);
  background: rgba(255,255,255,0.82);
  border-left: 1px solid var(--border);
}

.snapshotGrid .statTile::after,
.snapshotGrid .statGhost{
  display: none;
}

.snapshotGrid .statNum{
  font-size: clamp(1.1rem, 1.7vw, 1.55rem);
  line-height: 1.05;
}

.snapshotGrid .statBadge{
  margin: 4px 0 4px;
  font-size: .58rem;
}

.snapshotGrid .statLabel{
  margin-top: 3px;
  font-size: .8rem;
  line-height: 1.35;
}

.aboutPanel{
  grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr);
  gap: var(--home-gap);
}

.aboutPanel .aboutText{
  padding: 22px;
  border-radius: var(--home-radius);
}

.aboutText .projDesc{
  font-size: 1.02rem;
  line-height: 1.62;
}

.aboutText .projDesc + .projDesc{
  margin-top: 12px;
}

.focusGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--home-gap);
}

.focusCard{
  padding: 16px;
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--border);
  border-radius: var(--home-radius);
  box-shadow: var(--home-card-shadow);
}

.focusCard h3{
  margin: 0 0 6px;
  font-size: .96rem;
}

.focusCard p{
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}

.workGrid{
  gap: var(--home-gap);
}

.workCard{
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.workCardLarge{
  grid-column: span 12;
  display: grid;
  grid-template-columns: minmax(310px, .92fr) minmax(0, 1.08fr);
}

.workCardMedia{
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-right: 0;
  border-bottom: 1px solid var(--border);
}

.workCardLarge .workCardMedia{
  aspect-ratio: auto;
  border-right: 1px solid var(--border);
  border-bottom: 0;
}

.workCardBody{
  flex: 1;
  justify-content: flex-start;
  padding: 17px;
  gap: 8px;
}

.workCardLarge .workCardBody{
  justify-content: center;
  padding: 22px;
}

.workCardBody h3{
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}

.workSummary,
.workRole{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.workSummary{
  -webkit-line-clamp: 2;
}

.workRole{
  -webkit-line-clamp: 2;
  font-size: .86rem;
}

.chipRow{
  margin-top: auto;
}

.publicationList{
  gap: 9px;
}

.publicationItem{
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 15px;
  box-shadow: var(--home-card-shadow);
}

.publicationBody h3{
  margin-bottom: 3px;
  font-size: .98rem;
}

.publicationBody p{
  font-size: .88rem;
  line-height: 1.42;
}

.publicationLinks{
  margin-top: 7px;
}

.experienceTimeline{
  position: relative;
  display: grid;
  gap: 12px;
  padding-left: 18px;
}

.experienceTimeline::before{
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}

.timelineItem{
  position: relative;
}

.timelineDot{
  position: absolute;
  left: -17px;
  top: 19px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(43,108,255,0.10);
}

.timelineCard{
  padding: 16px 18px;
}

.timelineMeta{
  color: var(--primaryDark);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.timelineCard h3{
  margin: 3px 0 2px;
  font-size: 1.05rem;
}

.timelineRole{
  margin: 0 0 8px;
  color: var(--muted);
  font-weight: 750;
}

.timelineCard .projList li{
  margin: .18rem 0;
}

#step-engineering{
  padding: var(--home-section-y) 0 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.philosophyPanel{
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(43,108,255,0.055), rgba(0,194,255,0.035)),
    rgba(255,255,255,0.82);
}

.stepEngIntro{
  margin: 0 0 16px;
  max-width: 74ch;
  color: var(--muted);
  font-size: 1rem;
}

.philosophyGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--home-gap);
}

.philosophyStep{
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
}

.philosophyIndex{
  color: var(--primaryDark);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.philosophyStep h3{
  margin: 7px 0 5px;
  font-size: 1rem;
}

.philosophyStep p{
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}

.updatesCard{
  box-shadow: none;
}

.compactNewsList{
  gap: 8px;
}

.compactNewsList li{
  padding: 11px 13px;
  box-shadow: var(--home-card-shadow);
}

.educationGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--home-gap);
}

.educationCard{
  padding: 16px;
}

.educationCard p{
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}

.educationAwards{
  grid-column: span 1;
}

.educationAwards h3{
  margin: 0 0 8px;
  font-size: 1rem;
}

.educationAwards .projList{
  font-size: .86rem;
}

.contactPanel{
  padding: 20px;
}

.contactIntro{
  margin: 0 0 14px;
  color: var(--muted);
  max-width: 68ch;
}

.contactPanel .contactGrid{
  gap: var(--home-gap);
}

.contactPanel .contactItem{
  box-shadow: none;
  border-radius: 12px;
}

:root[data-theme="dark"] .homeCard,
:root[data-theme="dark"] .focusCard,
:root[data-theme="dark"] .philosophyStep{
  background: rgba(17,26,46,0.82);
}

:root[data-theme="dark"] .philosophyPanel{
  background:
    linear-gradient(135deg, rgba(43,108,255,0.12), rgba(0,194,255,0.06)),
    rgba(17,26,46,0.82);
}

@media (max-width: 1160px){
  .homeMain > .section{
    padding-top: 42px;
  }

  .educationGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px){
  .homeHero{
    padding-top: 26px;
  }

  .homeHeroGrid{
    gap: 20px;
  }

  .aboutPanel,
  .focusGrid{
    grid-template-columns: 1fr;
  }

  .workCard,
  .workCardLarge{
    grid-column: span 12;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .workCardMedia,
  .workCardLarge .workCardMedia{
    height: 100%;
    aspect-ratio: auto;
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }

  .philosophyGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .homeMain{
    --home-section-y: 34px;
    --home-gap: 10px;
  }

  .homeMain .sectionHead{
    display: block;
    margin-bottom: 12px;
  }

  .homeHero h1{
    margin-top: 7px;
    font-size: clamp(40px, 14vw, 54px);
  }

  .homeHeroRole,
  .homeHero .heroLead{
    font-size: 1rem;
  }

  .workCard,
  .workCardLarge{
    grid-template-columns: 1fr;
  }

  .workCardMedia,
  .workCardLarge .workCardMedia{
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .publicationItem{
    padding: 12px;
  }

  .experienceTimeline{
    padding-left: 14px;
  }

  .timelineDot{
    left: -15px;
  }

  .philosophyGrid,
  .educationGrid{
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   RESTORED ORIGINAL INTERACTIONS, COMPACTED
   Typewriter + full Step Engineering widget in the homepage card system.
   ================================================================= */

.homeHero{
  min-height: min(520px, calc(100vh - 64px));
  padding-top: 14px;
}

.homeHero .kicker{
  margin-bottom: 6px;
}

.homeHero h1{
  margin-top: 6px;
  margin-bottom: 4px;
}

.homeHeroRole{
  min-height: 1.55em;
  margin: 0 0 10px;
  line-height: 1.35;
}

.homeHeroRole .roleSlot{
  display: inline-flex;
  min-width: min(28ch, 72vw);
  align-items: baseline;
  vertical-align: bottom;
  white-space: nowrap;
}

.homeHero .heroLead{
  max-width: 58ch;
}

.homeHero .ctaRow{
  margin-top: 14px;
}

.homeHeroTags{
  margin-top: 11px;
}

.homeMain > #snapshot{
  padding-top: 30px;
}

.snapshotGrid .statTile{
  padding: 12px 13px;
}

.snapshotGrid .statNum{
  font-size: clamp(1rem, 1.4vw, 1.35rem);
}

.snapshotGrid .statBadge{
  letter-spacing: .06em;
}

.aboutPanel .aboutText{
  padding: 18px 20px;
}

.aboutText .projDesc:first-child{
  font-size: 1.06rem;
}

#step-engineering{
  padding-top: var(--home-section-y);
}

.stepEngineeringPanel{
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(43,108,255,0.045), rgba(0,194,255,0.03)),
    rgba(255,255,255,0.84);
}

#step-engineering .stepEngIntro{
  max-width: 76ch;
  margin: 0 0 14px;
  font-size: .96rem;
  line-height: 1.58;
}

#step-engineering .controlLoop{
  margin-bottom: 14px;
}

#step-engineering .seLoopLabel,
#step-engineering .seTelemetryTitle{
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primaryDark);
}

#step-engineering .seLoopPipeline{
  border-radius: var(--home-radius);
  padding: 13px 14px 8px;
  background: rgba(255,255,255,0.66);
  border-color: var(--border);
}

#step-engineering .seLoopNodeDot{
  width: 34px;
  height: 34px;
}

#step-engineering .seLoopNodeName{
  font-size: .82rem;
}

#step-engineering .seLoopNodeSub{
  font-size: .72rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#step-engineering .stepTimeline{
  gap: 7px;
  margin: 12px 0 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

#step-engineering .sePhase{
  flex: 0 0 auto;
  min-width: 118px;
  padding: 9px 10px;
  border-radius: 12px;
}

#step-engineering .timelineProgress{
  margin-bottom: 12px;
}

#step-engineering .seCenter{
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  margin: 10px 0;
}

#step-engineering .seStage{
  min-height: 205px;
  border-radius: var(--home-radius);
  box-shadow: var(--home-card-shadow);
}

#step-engineering .stepDetail{
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: var(--home-radius);
  box-shadow: var(--home-card-shadow);
}

#step-engineering .stepDetail h4{
  margin: 0 0 4px;
  color: var(--primaryDark);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#step-engineering .stepDetail p{
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: .88rem;
}

#step-engineering .signalWaves{
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

#step-engineering .seTelemetryStack{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#step-engineering .seTraceSvgLarge{
  height: 62px;
}

#step-engineering .seTelemetry{
  padding: 13px 14px;
}

#step-engineering .seSignalCard{
  border-radius: var(--home-radius);
  box-shadow: var(--home-card-shadow);
}

#step-engineering .factGrid{
  gap: 12px;
  margin-top: 12px;
}

#step-engineering .seFactCard{
  border-radius: var(--home-radius);
  box-shadow: var(--home-card-shadow);
  padding: 12px;
}

#step-engineering .seFactBody{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#step-engineering .stepRef{
  margin-top: 10px;
  font-size: .82rem;
}

.fallbackLoop{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.fallbackSignals{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fallbackSignal{
  padding: 14px;
  display: flex;
  justify-content: space-between;
}

.educationGrid{
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: start;
}

.educationCard{
  padding: 15px 17px;
}

.educationCard h3{
  margin: 0 0 8px;
  font-size: 1rem;
}

.educationCard .projList li{
  margin: .26rem 0;
}

:root[data-theme="dark"] .stepEngineeringPanel,
:root[data-theme="dark"] #step-engineering .seLoopPipeline{
  background:
    linear-gradient(135deg, rgba(43,108,255,0.12), rgba(0,194,255,0.055)),
    rgba(17,26,46,0.84);
}

@media (max-width: 920px){
  #step-engineering .seCenter{
    grid-template-columns: 1fr;
  }

  #step-engineering .seTelemetryStack,
  .educationGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .homeHero{
    padding-top: 18px;
  }

  .homeHeroRole .roleSlot{
    min-width: min(25ch, 74vw);
  }

  .homeMain > #snapshot{
    padding-top: 28px;
  }

  .stepEngineeringPanel{
    padding: 14px;
  }

  .fallbackLoop{
    grid-template-columns: 1fr;
  }

  #step-engineering .seLoopNodesRow{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  #step-engineering .seLoopNodesRow::before,
  #step-engineering .seLoopFeedback{
    display: none;
  }

  #step-engineering .sePhase{
    min-width: 108px;
  }
}

/* ===========================
   Homepage final spacing + step polish
   =========================== */

.homeShell{
  padding-top: 0;
}

.homeMain{
  gap: 0;
}

.homeMain > .section{
  padding-top: 44px;
}

.homeHero{
  min-height: auto;
  padding-top: 6px;
  padding-bottom: 12px;
  margin-bottom: 0;
}

.homeHeroGrid{
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
}

.homeHero .heroLead{
  max-width: 63ch;
}

.homeHeroTags{
  margin-top: 2px;
}

.homeHero + #snapshot,
.homeMain > #snapshot{
  padding-top: 18px;
}

#snapshot .sectionHead{
  margin-bottom: 14px;
}

.snapshotGrid{
  margin-top: 0;
  gap: 12px;
}

#education .sectionHead{
  margin-bottom: 14px;
}

.educationGrid{
  gap: 12px;
}

.educationCard{
  min-height: 0;
  padding: 14px 16px;
}

.educationCard .projList{
  gap: 6px;
}

#step-engineering{
  padding-top: 48px;
}

#step-engineering .sectionHead{
  align-items: end;
  gap: 16px;
  margin-bottom: 12px;
}

#step-engineering .sectionHead p{
  max-width: 28ch;
}

#step-engineering .stepEngineeringPanel{
  padding: 16px;
  overflow: hidden;
  border-radius: var(--home-radius);
  background:
    linear-gradient(135deg, rgba(43,108,255,0.055), rgba(0,194,255,0.032)),
    rgba(255,255,255,0.9);
}

#step-engineering .stepEngIntro{
  max-width: 82ch;
  margin: 0 0 12px;
  font-size: .95rem;
  line-height: 1.55;
}

#step-engineering .controlLoop{
  width: 100%;
  display: block;
  grid-template-columns: none;
  margin: 0 0 12px;
}

#step-engineering .seLoopPipeline{
  width: 100%;
  max-width: none;
  padding: 12px 14px;
  border-radius: var(--home-radius);
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--border);
  box-shadow: none;
}

#step-engineering .seLoopLabel{
  margin-bottom: 8px;
  text-align: left;
}

#step-engineering .seLoopNodesRow{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

#step-engineering .seLoopNodesRow::before,
#step-engineering .seLoopFeedback{
  display: none;
}

#step-engineering .seLoopNodeWrap{
  align-items: flex-start;
  min-height: 76px;
  padding: 10px 10px 10px 44px;
  border: 1px solid rgba(43,108,255,0.13);
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  text-align: left;
}

#step-engineering .seLoopNodeDot{
  position: absolute;
  left: 10px;
  top: 10px;
  width: 26px;
  height: 26px;
  transform: none;
}

#step-engineering .seLoopNodeDot svg{
  width: 14px;
  height: 14px;
  opacity: .78;
}

#step-engineering .seLoopNodeName{
  width: 100%;
  text-align: left;
  white-space: normal;
  font-size: .8rem;
}

#step-engineering .seLoopNodeSub{
  width: 100%;
  max-width: none;
  text-align: left;
  opacity: 1;
  transform: none;
  font-size: .7rem;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#step-engineering .stepTimeline{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 8px;
  padding-bottom: 0;
  overflow: visible;
}

#step-engineering .sePhaseConn{
  display: none;
}

#step-engineering .sePhase{
  min-width: 0;
  width: 100%;
  min-height: 74px;
  padding: 8px;
  justify-content: center;
  border-radius: 12px;
}

#step-engineering .sePhaseIcon{
  font-size: 1rem;
}

#step-engineering .sePhaseName{
  font-size: .7rem;
}

#step-engineering .sePhasePct{
  font-size: .61rem;
}

#step-engineering .timelineProgress{
  height: 4px;
  margin: 0 0 12px;
}

#step-engineering .seCenter{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  margin: 0;
}

#step-engineering .seVisualRow{
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(420px, 1.08fr);
  gap: 12px;
  align-items: stretch;
}

#step-engineering .seStage{
  min-height: 212px;
  padding: 12px;
  border-radius: var(--home-radius);
}

#step-engineering .seStageSvg{
  max-height: 165px;
}

#step-engineering .stepDetail{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.72);
}

#step-engineering .stepDetail > div{
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(43,108,255,0.11);
}

#step-engineering .stepDetail p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

#step-engineering .signalWaves{
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
  align-self: stretch;
}

#step-engineering .fallbackSignals{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#step-engineering .fallbackSignal{
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--home-radius);
  background: rgba(255,255,255,0.72);
}

#step-engineering .seTelemetry{
  margin: 0;
  padding: 12px 14px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--home-radius);
  background: rgba(255,255,255,0.74);
  box-shadow: var(--home-card-shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#step-engineering .seTelemetryStack{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#step-engineering .seSignalCard{
  min-width: 0;
  padding: 10px 11px;
  border-radius: 12px;
  box-shadow: none;
}

#step-engineering .seTraceSvgLarge{
  height: 52px;
}

#step-engineering .factGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

#step-engineering .seFactCard{
  min-height: 0;
  padding: 11px;
  border-radius: 12px;
  box-shadow: none;
}

#step-engineering .seFactBody{
  -webkit-line-clamp: 2;
  line-height: 1.42;
}

#step-engineering .stepRef{
  margin: 9px 0 0;
}

:root[data-theme="dark"] #step-engineering .stepEngineeringPanel{
  background:
    linear-gradient(135deg, rgba(77,143,255,0.13), rgba(0,194,255,0.052)),
    rgba(17,26,46,0.9);
}

:root[data-theme="dark"] #step-engineering .seLoopPipeline,
:root[data-theme="dark"] #step-engineering .stepDetail,
:root[data-theme="dark"] #step-engineering .seTelemetry,
:root[data-theme="dark"] #step-engineering .fallbackSignal{
  background: rgba(12,18,32,0.76);
  border-color: rgba(77,143,255,0.14);
}

:root[data-theme="dark"] #step-engineering .seLoopNodeWrap,
:root[data-theme="dark"] #step-engineering .stepDetail > div{
  background: rgba(17,26,46,0.66);
  border-color: rgba(77,143,255,0.14);
}

@media (max-width: 980px){
  #step-engineering .seLoopNodesRow{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #step-engineering .stepTimeline{
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  #step-engineering .sePhase{
    flex: 0 0 116px;
  }

  #step-engineering .seCenter,
  .educationGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px){
  .homeMain > .section{
    padding-top: 34px;
  }

  .homeHero{
    padding-top: 10px;
    padding-bottom: 8px;
  }

  .homeHeroGrid{
    gap: 18px;
  }

  .homeHero + #snapshot,
  .homeMain > #snapshot{
    padding-top: 16px;
  }

  #step-engineering{
    padding-top: 36px;
  }

  #step-engineering .sectionHead{
    align-items: start;
  }

  #step-engineering .sectionHead p{
    max-width: none;
  }

  #step-engineering .stepEngineeringPanel{
    padding: 12px;
  }

  #step-engineering .seLoopNodesRow,
  #step-engineering .seVisualRow,
  #step-engineering .stepDetail,
  #step-engineering .seTelemetryStack,
  #step-engineering .fallbackSignals,
  #step-engineering .factGrid{
    grid-template-columns: 1fr;
  }

  #step-engineering .seLoopNodeWrap{
    min-height: 64px;
  }

  #step-engineering .seStage{
    min-height: 190px;
  }
}

/* ===========================
   Merged work + publications section
   =========================== */

.anchorAlias{
  position: relative;
  top: -86px;
  display: block;
  height: 0;
  overflow: hidden;
}

.selectedWorkGrid{
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
}

.selectedWorkGrid .selectedWorkCard{
  grid-column: span 6;
  display: grid;
  grid-template-columns: minmax(140px, .72fr) minmax(0, 1.28fr);
  min-height: 0;
  color: inherit;
}

.selectedWorkGrid .workCardLarge{
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.selectedWorkGrid .workCardMedia{
  min-height: 0;
  aspect-ratio: 4 / 3;
  background: #ffffff;
}

.selectedWorkGrid .workCardMedia img{
  padding: 14px;
}

.selectedWorkGrid .workCardLarge .workCardMedia{
  aspect-ratio: auto;
  min-height: 300px;
  border-right: 1px solid var(--border);
  border-bottom: 0;
}

:root[data-theme="dark"] .selectedWorkGrid .workCardMedia{
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(77,143,255,0.12), transparent 62%),
    rgba(12,18,32,0.72);
  border-color: rgba(77,143,255,0.14);
}

:root[data-theme="dark"] .selectedWorkGrid .workCardMedia img{
  background: rgba(248,251,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}

.selectedWorkGrid .workCardBody{
  justify-content: flex-start;
  padding: 16px;
  gap: 7px;
}

.selectedWorkGrid .workCardLarge .workCardBody{
  padding: 18px;
}

.selectedWorkGrid .workCardCompact .workCardBody{
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.selectedWorkGrid .workCard h3{
  margin: 0;
}

.selectedWorkGrid .workCard h3 a{
  color: var(--text);
  text-decoration: none;
}

.selectedWorkGrid .workCard h3 a:hover{
  color: var(--primaryDark);
}

.workPublication{
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--primaryDark);
  background: rgba(43,108,255,0.08);
  border: 1px solid rgba(43,108,255,0.14);
  font-size: .7rem;
  font-weight: 850;
  line-height: 1.25;
}

.selectedWorkGrid .workSummary{
  -webkit-line-clamp: 3;
  font-size: .88rem;
  line-height: 1.42;
}

.selectedWorkGrid .workCardCompact .workSummary,
.selectedWorkGrid .workCardCompact .workRole,
.selectedWorkGrid .workCardCompact .chipRow{
  margin: 0;
}

.selectedWorkGrid .workRole{
  font-size: .84rem;
  line-height: 1.38;
}

.workLinks{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.workLinks a{
  color: var(--primaryDark);
  font-size: .82rem;
  font-weight: 850;
}

.selectedWorkActions{
  gap: 10px;
  flex-wrap: wrap;
}

:root[data-theme="dark"] .workPublication{
  background: rgba(77,143,255,0.12);
  border-color: rgba(77,143,255,0.2);
}

@media (max-width: 980px){
  .selectedWorkGrid .selectedWorkCard,
  .selectedWorkGrid .workCardLarge,
  .selectedWorkGrid .workCardCompact{
    grid-column: span 12;
  }

  .selectedWorkGrid .workCardCompact .workCardBody{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .selectedWorkGrid .selectedWorkCard,
  .selectedWorkGrid .workCardLarge{
    grid-template-columns: 1fr;
  }

  .selectedWorkGrid .workCardMedia,
  .selectedWorkGrid .workCardLarge .workCardMedia{
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .selectedWorkGrid .workCardBody,
  .selectedWorkGrid .workCardLarge .workCardBody{
    padding: 14px;
  }
}

/* ===========================
   At a Glance editorial proof section
   =========================== */

.homeHero{
  padding-top: 2px;
  padding-bottom: 8px;
}

.homeHeroGrid{
  gap: clamp(18px, 3vw, 34px);
}

.homeHero .ctaRow{
  margin-top: 12px;
}

.homeHeroTags{
  margin-top: 8px;
}

.homeHero + #snapshot,
.homeMain > #snapshot{
  padding-top: 12px;
}

.atAGlance .sectionHead{
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(320px, .85fr);
  align-items: start;
  gap: 24px;
  margin-bottom: 12px;
}

.atAGlance .sectionHead h2{
  font-size: clamp(2.8rem, 5.7vw, 4.65rem);
  line-height: .95;
  letter-spacing: 0;
}

.atAGlance .statRowSub{
  max-width: 54ch;
  margin-top: 5px;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.55;
}

.glancePanel{
  padding: clamp(14px, 2vw, 20px);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(43,108,255,0.055), rgba(0,194,255,0.035)),
    rgba(255,255,255,0.84);
  box-shadow: 0 16px 46px rgba(2,6,23,0.065);
}

.glanceTop{
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr);
  gap: 14px;
  align-items: stretch;
}

.glanceLeadCard,
.miniStatCard,
.glanceProofCard{
  border: 1px solid rgba(43,108,255,0.13);
  border-radius: var(--home-radius);
  background: rgba(255,255,255,0.76);
}

.glanceLeadCard{
  padding: clamp(18px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.glanceLeadCard h3{
  max-width: 16ch;
  margin: 0;
  color: var(--text);
  font-size: clamp(1.72rem, 3vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.glanceLeadCard p{
  max-width: 62ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.glanceChipRow{
  margin-top: 16px;
}

.miniStatGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.miniStatCard{
  min-height: 112px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: none;
}

.miniStatValue{
  color: var(--primary);
  font-size: clamp(1.65rem, 2.7vw, 2.25rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: 0;
}

.miniStatCard p{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.35;
}

.glanceProofGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.glanceProofCard{
  min-height: 188px;
  padding: 20px;
  color: inherit;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  box-shadow: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.glanceProofCard:hover,
.glanceProofCard:focus-visible{
  color: inherit;
  border-color: rgba(43,108,255,0.28);
  box-shadow: 0 14px 30px rgba(2,6,23,0.075);
  transform: translateY(-2px);
  outline: none;
}

.glanceProofCard h3{
  margin: 0;
  color: var(--text);
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.glanceProof-deployment{
  background:
    linear-gradient(135deg, rgba(43,108,255,0.08), rgba(255,255,255,0.78) 58%),
    rgba(255,255,255,0.8);
}

.glanceProof-deployment h3{
  color: var(--text);
}

.glanceProofMeta{
  margin-top: 10px;
  color: var(--primary);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.glanceProofCard p{
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.45;
}

.glanceProofCard .chipRow{
  margin-top: auto;
  padding-top: 16px;
}

:root[data-theme="dark"] .glancePanel{
  background:
    linear-gradient(135deg, rgba(77,143,255,0.13), rgba(0,194,255,0.055)),
    rgba(17,26,46,0.86);
}

:root[data-theme="dark"] .glanceLeadCard,
:root[data-theme="dark"] .miniStatCard,
:root[data-theme="dark"] .glanceProofCard{
  background: rgba(17,26,46,0.74);
  border-color: rgba(77,143,255,0.18);
}

:root[data-theme="dark"] .glanceProof-deployment{
  background:
    linear-gradient(135deg, rgba(77,143,255,0.16), rgba(17,26,46,0.74) 58%),
    rgba(17,26,46,0.74);
}

@media (max-width: 980px){
  .atAGlance .sectionHead,
  .glanceTop,
  .glanceProofGrid{
    grid-template-columns: 1fr;
  }

  .glanceLeadCard h3{
    max-width: 22ch;
  }
}

@media (max-width: 640px){
  .homeHero{
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .homeHero + #snapshot,
  .homeMain > #snapshot{
    padding-top: 10px;
  }

  .atAGlance .sectionHead{
    gap: 8px;
  }

  .atAGlance .sectionHead h2{
    font-size: clamp(2.35rem, 13vw, 3.2rem);
  }

  .glancePanel{
    padding: 12px;
    border-radius: 16px;
  }

  .miniStatGrid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .miniStatCard,
  .glanceProofCard{
    min-height: 0;
    padding: 15px;
  }

  .glanceLeadCard{
    padding: 17px;
  }

  .glanceLeadCard p{
    margin-top: 12px;
  }
}

/* ===========================
   At a Glance integration pass
   =========================== */

.atAGlance{
  --glance-gap: 12px;
}

.atAGlance .sectionHead{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.atAGlance .sectionHead h2{
  font-size: clamp(1.45rem, 2.15vw, 1.95rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.atAGlance .statRowSub{
  max-width: 56ch;
  margin: 0;
  font-size: .94rem;
  line-height: 1.45;
}

.glancePanel{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.glanceTop{
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  gap: var(--glance-gap);
}

.glanceLeadCard,
.miniStatCard,
.glanceProofCard{
  border-color: var(--border);
  background: rgba(255,255,255,0.74);
  border-radius: 12px;
}

.glanceLeadCard{
  padding: 18px 20px;
  justify-content: center;
}

.glanceLeadCard h3{
  max-width: 24ch;
  font-size: clamp(1.15rem, 1.55vw, 1.42rem);
  line-height: 1.14;
}

.glanceLeadCard p{
  max-width: 64ch;
  margin-top: 11px;
  font-size: .92rem;
  line-height: 1.48;
}

.glanceChipRow{
  margin-top: 12px;
}

.glanceChipRow .chip,
.glanceProofCard .chip{
  min-height: 23px;
  padding: 3px 8px;
  font-size: .68rem;
  font-weight: 800;
}

.miniStatGrid{
  gap: var(--glance-gap);
}

.miniStatCard{
  min-height: 88px;
  padding: 13px 14px;
}

.miniStatValue{
  font-size: clamp(1.15rem, 1.55vw, 1.42rem);
}

.miniStatCard p{
  margin-top: 7px;
  font-size: .82rem;
  line-height: 1.32;
}

.glanceProofGrid{
  gap: var(--glance-gap);
  margin-top: var(--glance-gap);
}

.glanceProofCard{
  min-height: 148px;
  padding: 16px 17px;
}

.glanceProofCard:hover,
.glanceProofCard:focus-visible{
  box-shadow: 0 10px 24px rgba(2,6,23,0.065);
  transform: translateY(-1px);
}

.glanceProofCard h3{
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.12;
}

.glanceProof-deployment{
  background:
    linear-gradient(135deg, rgba(43,108,255,0.055), rgba(255,255,255,0.74) 62%),
    rgba(255,255,255,0.74);
}

.glanceProofMeta{
  margin-top: 8px;
  font-size: .66rem;
  letter-spacing: .075em;
}

.glanceProofCard p{
  margin-top: 9px;
  font-size: .84rem;
  line-height: 1.4;
}

.glanceProofCard .chipRow{
  padding-top: 12px;
}

:root[data-theme="dark"] .glancePanel{
  background: transparent;
}

:root[data-theme="dark"] .glanceLeadCard,
:root[data-theme="dark"] .miniStatCard,
:root[data-theme="dark"] .glanceProofCard{
  background: rgba(17,26,46,0.68);
  border-color: rgba(77,143,255,0.16);
}

:root[data-theme="dark"] .glanceProof-deployment{
  background:
    linear-gradient(135deg, rgba(77,143,255,0.12), rgba(17,26,46,0.68) 62%),
    rgba(17,26,46,0.68);
}

@media (max-width: 980px){
  .atAGlance .sectionHead{
    display: block;
  }

  .atAGlance .statRowSub{
    margin-top: 5px;
  }

  .glanceTop,
  .glanceProofGrid{
    grid-template-columns: 1fr;
  }

  .glanceLeadCard h3{
    max-width: 24ch;
  }
}

@media (max-width: 640px){
  .atAGlance .sectionHead h2{
    font-size: clamp(1.45rem, 7vw, 1.9rem);
  }

  .glancePanel{
    padding: 0;
  }

  .glanceLeadCard,
  .miniStatCard,
  .glanceProofCard{
    padding: 14px;
  }

  .glanceLeadCard h3{
    font-size: 1.18rem;
  }
}

/* Selected Highlights spacing */
.homeHero + #snapshot,
.homeMain > #snapshot{
  padding-top: 32px;
}

@media (max-width: 640px){
  .homeHero + #snapshot,
  .homeMain > #snapshot{
    padding-top: 16px;
  }
}

/* =================================================================
   Selected Highlights — four stat blocks in one full-width row
   ================================================================= */
.miniStatRow{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 820px){
  .miniStatRow{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px){
  .miniStatRow{
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   ABOUT — editorial statement + principles (matches home card scene)
   ================================================================= */
.homeMain .aboutPanel{
  display: block;
  padding: clamp(22px, 3vw, 40px);
  background: rgba(255,255,255,0.86);
}

.aboutStatement{
  position: relative;
}

.aboutStatementText{
  margin: 0;
  max-width: 40ch;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(24px, 3.1vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
}

.aboutStatementText em{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
}

.aboutDivider{
  height: 1px;
  margin: clamp(22px, 3vw, 36px) 0;
  background: linear-gradient(90deg, var(--border), transparent);
}

.homeMain .aboutBody{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 52px);
  align-items: start;
}

.homeMain .aboutPanel .aboutText{
  padding: 0;
  max-width: none;
  gap: 0.9em;
}

.aboutLead{
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--text);
}
.aboutLead strong{ font-weight: 800; }

.aboutPrinciples{
  list-style: none;
  margin: 0;
  padding: 0;
}

.aboutPrinciple{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.aboutPrinciple:first-child{ border-top: 0; padding-top: 0; }
.aboutPrinciple:last-child{ padding-bottom: 0; }

.aboutPrincipleNum{
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--primary);
  padding-top: 3px;
}

.aboutPrinciple h3{
  margin: 0 0 5px;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.aboutPrinciple p{
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}

:root[data-theme="dark"] .aboutPanel{
  background: rgba(17,26,46,0.82);
}

@media (max-width: 860px){
  .homeMain .aboutBody{ grid-template-columns: 1fr; gap: 26px; }
  .aboutStatementText{ max-width: none; }
}

/* =================================================================
   HERO — identity byline strip (avatar + role line)
   ================================================================= */
.heroBylineText{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  line-height: 1.4;
}
.heroBylineSep{
  color: var(--primary);
  font-weight: 700;
  opacity: .55;
}
.heroByline .avatarSm{
  box-shadow: 0 6px 16px rgba(2,6,23,0.14);
}

/* =================================================================
   CARD BLOCKS — two accent proof cards (deployment + award)
   ================================================================= */
.glanceProof-award{
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(255,255,255,0.74) 62%), rgba(255,255,255,0.74);
  border-color: rgba(245,158,11,0.24);
}
.glanceProof-award .glanceProofMeta{ color: #b45309; }

/* Dark theme tints */
:root[data-theme="dark"] .glanceProof-award{
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(17,26,46,0.68) 62%), rgba(17,26,46,0.68);
  border-color: rgba(245,158,11,0.28);
}
:root[data-theme="dark"] .glanceProof-award .glanceProofMeta{ color: #fbbf24; }

/* =================================================================
   Featured work — vertical cards (full-width media, roomier text)
   for the 2x2 grid below the Moonwalkers feature row.
   ================================================================= */
.selectedWorkGrid .selectedWorkCard:not(.workCardLarge){
  display: flex;
  flex-direction: column;
}
.selectedWorkGrid .selectedWorkCard:not(.workCardLarge) .workCardMedia{
  width: 100%;
  aspect-ratio: 16 / 10;
  border-right: 0;
  border-bottom: 1px solid var(--border);
}
.selectedWorkGrid .selectedWorkCard:not(.workCardLarge) .workCardMedia img{
  padding: 18px 20px;
}
.selectedWorkGrid .selectedWorkCard:not(.workCardLarge) .workCardBody{
  flex: 1;
  padding: 22px 24px 20px;
  gap: 12px;
}
.selectedWorkGrid .workCard h3{
  font-size: clamp(1.18rem, 1.7vw, 1.42rem);
  line-height: 1.18;
}
.selectedWorkGrid .workSummary,
.selectedWorkGrid .workRole{
  display: block;
  overflow: visible;
}
.selectedWorkGrid .workSummary{
  font-size: .94rem;
  line-height: 1.55;
}
.selectedWorkGrid .workRole{
  font-size: .88rem;
  line-height: 1.5;
}
.selectedWorkGrid .workCard .chipRow{
  margin-top: 2px;
  gap: 8px;
}
.selectedWorkGrid .workLinks{
  margin-top: 14px;
  gap: 14px;
}

/* =================================================================
   Side section nav — premium numbered index rail
   ================================================================= */
.homeShell{ padding-left: 18px; }

.homeSectionNav{
  top: 64px;
  padding-top: 42px;
}

.homeSectionNav nav{
  counter-reset: secnav;
  display: grid;
  gap: 1px;
  border-left: 0;
  padding-left: 0;
}

.homeSectionNav a{
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: baseline;
  gap: 9px;
  padding: 9px 10px 9px 14px;
  border-radius: 10px;
  color: var(--muted2);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  background: transparent;
  transition: color .18s ease, background .18s ease;
}

.homeSectionNav a::before{
  counter-increment: secnav;
  content: counter(secnav, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--muted2);
  opacity: .65;
  transition: color .18s ease, opacity .18s ease;
}

.homeSectionNav a::after{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.homeSectionNav a:hover{
  color: var(--text);
  background: rgba(43,108,255,0.06);
}

.homeSectionNav a:hover::before{
  color: var(--text);
  opacity: 1;
}

.homeSectionNav a.active{
  color: var(--primaryDark);
  background: rgba(43,108,255,0.08);
}

.homeSectionNav a.active::before{
  color: var(--primary);
  background: none;
  box-shadow: none;
  opacity: 1;
}

.homeSectionNav a.active::after{
  transform: translateY(-50%) scaleY(1);
}

:root[data-theme="dark"] .homeSectionNav a:hover,
:root[data-theme="dark"] .homeSectionNav a.active{
  background: rgba(77,143,255,0.12);
}

/* =================================================================
   Width alignment + whitespace polish after widening
   ================================================================= */
/* Experience: use the wider row — meta on the left, bullets fill the right. */
.experienceTimeline .timelineCard{
  display: grid;
  grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  column-gap: 32px;
  row-gap: 2px;
  align-items: start;
}
.experienceTimeline .timelineCard .timelineMeta{ grid-column: 1; grid-row: 1; }
.experienceTimeline .timelineCard h3{ grid-column: 1; grid-row: 2; }
.experienceTimeline .timelineCard .timelineRole{ grid-column: 1; grid-row: 3; }
.experienceTimeline .timelineCard .projList{
  grid-column: 2;
  grid-row: 1 / 4;
  margin: 0;
  align-self: center;
}

@media (max-width: 760px){
  .experienceTimeline .timelineCard{
    grid-template-columns: 1fr;
  }
  .experienceTimeline .timelineCard .timelineMeta,
  .experienceTimeline .timelineCard h3,
  .experienceTimeline .timelineCard .timelineRole,
  .experienceTimeline .timelineCard .projList{
    grid-column: 1;
    grid-row: auto;
  }
}

/* =================================================================
   Top nav — spread links across the wider bar
   ================================================================= */
.navInner{
  gap: clamp(10px, 1vw, 20px);
}
.brand{
  flex-shrink: 0;
  white-space: nowrap;
}
.themeBtn,
.langBtn,
.navBtn{
  flex-shrink: 0;
}
.navLinks{
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  gap: clamp(4px, 0.7vw, 14px);
}
.navLinks a{
  padding: 6px 8px;
  font-size: .87rem;
  white-space: nowrap;
}

/* =================================================================
   Nav — page-jump links (Home, All Projects) vs in-page section links
   ================================================================= */
.navLinks a.navLinkJump,
.mobileMenu a.navLinkJump{
  color: var(--primaryDark);
  font-weight: 850;
}
.navLinks a.navLinkJump:hover,
.mobileMenu a.navLinkJump:hover{
  color: var(--primary);
  background: rgba(43,108,255,0.10);
}
:root[data-theme="dark"] .navLinks a.navLinkJump,
:root[data-theme="dark"] .mobileMenu a.navLinkJump{
  color: #8fb6ff;
}
:root[data-theme="dark"] .navLinks a.navLinkJump:hover,
:root[data-theme="dark"] .mobileMenu a.navLinkJump:hover{
  color: #b9d1ff;
  background: rgba(77,143,255,0.16);
}

/* ===========================
   COVER INTRO — full-page seamless opening scene. The sticky scene fades to
   transparent at the bottom and the main page is pulled up underneath (no
   white gap). --p (0..1) is set on :root by site.js (initScrollCover).
   =========================== */
.coverTrack{
  position: relative;
  height: 116vh;            /* short scroll gate for the receding cover */
}

.coverSticky{
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;     /* re-enabled on interactive children */
  background:
    radial-gradient(circle at 18% 10%, rgba(43,108,255,0.11), transparent 30%),
    radial-gradient(circle at 85% 12%, rgba(0,194,255,0.10), transparent 32%),
    linear-gradient(180deg, rgba(248,251,255,0.96), rgba(248,251,255,0.9) 76%, rgba(248,251,255,0));
}

/* Faint grid texture that fades out toward the seam */
.coverSticky::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(43,108,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,108,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.70), rgba(0,0,0,0.18) 82%, transparent);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.70), rgba(0,0,0,0.18) 82%, transparent);
  pointer-events: none;
}

.coverScene{
  position: relative;
  width: min(1480px, calc(100% - 56px));
  height: 100vh;
  margin: 0 auto;
  padding: clamp(34px, 5vh, 64px) 0 clamp(48px, 8vh, 82px);
  display: grid;
  grid-template-columns: minmax(540px, 0.98fr) minmax(430px, 0.74fr);
  gap: clamp(36px, 4.5vw, 76px);
  align-items: start;
  transform-origin: 50% 12%;
  will-change: transform, opacity, filter;
  transform: translateY(calc(var(--p, 0) * -76px)) scale(calc(1 - var(--p, 0) * 0.06));
  opacity: calc(1 - var(--p, 0) * 0.92);
  filter: blur(calc(var(--p, 0) * 4px));
}

/* Left: full-page cover text, distributed like a title page */
.coverLeft{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  max-width: 820px;
  min-height: 0;
  pointer-events: auto;
}

.coverName{
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(56px, 6.2vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--text);
}

.coverName .nameAccent{
  font-style: italic;
  background: none;
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
}

.coverName .nameWordmark{
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.coverRole{
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.1vw, 34px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
  color: #56637a;
  min-height: 1.2em;
}
.coverRole .roleTyped{ color: var(--primaryDark); font-weight: 400; }
.coverRole .roleCursor{
  color: var(--primary);
  font-weight: 400;
  margin-left: 1px;
  animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0; } }

.coverLead{
  margin: 22px 0 0;
  max-width: 48ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: #4e596e;
  font-size: clamp(22px, 1.72vw, 29px);
  line-height: 1.24;
}
.coverLead a{ color: var(--primaryDark); border-bottom: 1.5px solid rgba(43,108,255,0.24); pointer-events: auto; }
.coverLead a:hover{ border-bottom-color: var(--primary); }

.coverCtas{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  pointer-events: auto;
}
.coverCtas .btn{ min-height: 50px; padding: 0 20px; }

.coverByline{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: clamp(.88rem, .9vw, 1rem);
  line-height: 1.35;
}
.coverByline .avatarSm{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(15,23,42,0.10);
  flex: none;
  box-shadow: 0 8px 20px rgba(2,6,23,0.10);
}
.coverBylineText{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  font-weight: 750;
  color: #596780;
}
.coverBylineSep{ color: var(--muted2); }

.coverKicker{
  position: relative;
  display: block;
  align-items: center;
  width: 100%;
  margin-top: 0;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid rgba(15,23,42,0.09);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #243554;
  font-size: clamp(1rem, 1.12vw, 1.2rem);
  font-weight: 850;
  line-height: 1.42;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  text-transform: none;
}

.coverKicker::before{
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
}

.coverInfoStack{
  width: min(100%, 540px);
  display: grid;
  gap: 20px;
  margin-top: 38px;
  padding: 22px 26px 24px;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(248,251,255,0.78));
  box-shadow:
    0 26px 72px rgba(2,6,23,0.10),
    0 1px 0 rgba(255,255,255,0.88) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Right: portrait-led visual anchor */
.coverRight{
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(8px, 2vh, 28px);
}

.coverVisual{
  width: min(100%, 560px);
  display: grid;
  justify-items: center;
  align-content: center;
}

.coverPortraitFrame{
  position: relative;
  width: clamp(278px, 26vw, 390px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: clamp(10px, 1vw, 14px);
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(236,244,255,0.88));
  box-shadow:
    0 28px 80px rgba(43,108,255,0.15),
    0 1px 0 rgba(255,255,255,0.92) inset;
  isolation: isolate;
}

.coverPortraitFrame::before{
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: inherit;
  border: 1px solid rgba(43,108,255,0.22);
  box-shadow:
    -16px -12px 0 rgba(43,108,255,0.055),
    18px 16px 0 rgba(245,158,11,0.07);
  z-index: -1;
}

.coverPortraitFrame::after{
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.78);
  pointer-events: none;
  z-index: 1;
}

.coverPortrait{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 34%;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  box-shadow:
    0 14px 34px rgba(2,6,23,0.10),
    0 0 0 1px rgba(255,255,255,0.80) inset;
}

.coverVideo{
  position: relative;
  margin: 18px 0 0;
  width: min(100%, 590px);
  border-radius: 22px;
  overflow: visible;
  border: 1px solid rgba(43,108,255,0.14);
  box-shadow:
    0 28px 74px rgba(43,108,255,0.12),
    0 18px 48px rgba(2,6,23,0.08);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(239,246,255,0.88));
  padding: 12px;
  pointer-events: auto;
}
.coverVideo::before{
  content: "";
  position: absolute;
  inset: 18px -10px -12px 22px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(43,108,255,0.12), rgba(0,194,255,0.08));
  z-index: -1;
}
.coverVideo video{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #071124;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 14px 34px rgba(2,6,23,0.12);
}
.coverVideo figcaption{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 10px 4px 0;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--muted);
  background: transparent;
  border-top: 0;
}
.coverVideo figcaption a{ color: var(--primaryDark); font-weight: 700; white-space: nowrap; }

/* Main page is pulled up under the fading cover — no white gap at the seam. */
.coverMain{
  position: relative;
  z-index: 5;
  margin-top: -40vh;
  padding-top: clamp(40px, 6vh, 88px);
  opacity: calc(0.05 + var(--p, 0) * 0.95);
  transform: translateY(calc((1 - var(--p, 0)) * 42px));
}

.coverMain::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(248,251,255,0), rgba(248,251,255,0.96) 52%, rgba(248,251,255,0));
  pointer-events: none;
  z-index: -1;
}

/* Dark theme overrides */
:root[data-theme="dark"] .coverSticky{
  background:
    radial-gradient(circle at 18% 10%, rgba(77,143,255,0.14), transparent 30%),
    radial-gradient(circle at 85% 12%, rgba(0,212,255,0.10), transparent 32%),
    linear-gradient(180deg, rgba(17,26,46,0.96), rgba(11,18,32,0.9) 76%, rgba(11,18,32,0));
}
:root[data-theme="dark"] .coverSticky::before{
  background:
    linear-gradient(rgba(120,160,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
:root[data-theme="dark"] .coverRole,
:root[data-theme="dark"] .coverLead{
  color: #c5d2ea;
}
:root[data-theme="dark"] .coverPortrait{
  border-color: rgba(255,255,255,0.12);
  background: rgba(17,26,46,0.88);
  box-shadow: 0 24px 72px rgba(0,0,0,0.34);
}
:root[data-theme="dark"] .coverPortraitFrame{
  border-color: rgba(255,255,255,0.12);
  background:
    linear-gradient(145deg, rgba(31,45,76,0.96), rgba(13,22,40,0.90));
  box-shadow:
    0 28px 80px rgba(0,0,0,0.34),
    0 1px 0 rgba(255,255,255,0.10) inset;
}
:root[data-theme="dark"] .coverPortraitFrame::before{
  border-color: rgba(143,182,255,0.24);
  box-shadow:
    -16px -12px 0 rgba(77,143,255,0.08),
    18px 16px 0 rgba(251,191,36,0.08);
}
:root[data-theme="dark"] .coverPortraitFrame::after{
  border-color: rgba(255,255,255,0.14);
}
:root[data-theme="dark"] .coverInfoStack{
  border-color: rgba(255,255,255,0.12);
  background:
    linear-gradient(135deg, rgba(24,36,62,0.86), rgba(13,22,40,0.72));
  box-shadow: 0 18px 48px rgba(0,0,0,0.24);
}
:root[data-theme="dark"] .coverBylineText{ color: #c5d2ea; }
:root[data-theme="dark"] .coverByline .avatarSm{
  border-color: rgba(255,255,255,0.12);
}
:root[data-theme="dark"] .coverKicker{
  border-top-color: rgba(255,255,255,0.10);
  color: #a7c4ff;
}
:root[data-theme="dark"] .coverVideo{
  border-color: rgba(143,182,255,0.16);
  background:
    linear-gradient(145deg, rgba(24,36,62,0.96), rgba(11,18,32,0.88));
  box-shadow:
    0 28px 74px rgba(0,0,0,0.30),
    0 16px 44px rgba(0,0,0,0.22);
}
:root[data-theme="dark"] .coverVideo::before{
  background:
    linear-gradient(135deg, rgba(77,143,255,0.14), rgba(0,212,255,0.08));
}
:root[data-theme="dark"] .coverVideo video{
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 26px rgba(0,0,0,0.26);
}
:root[data-theme="dark"] .coverVideo figcaption{ background: transparent; }
:root[data-theme="dark"] .coverMain::before{
  background: linear-gradient(180deg, rgba(11,18,32,0), rgba(11,18,32,0.96) 52%, rgba(11,18,32,0));
}

@media (max-width: 1020px){
  .coverScene{ grid-template-columns: minmax(0, 1fr); padding-top: 52px; gap: 24px; align-items: start; }
  .coverLeft{ min-height: auto; justify-content: flex-start; }
  .coverLead{ margin-top: 18px; max-width: 48ch; }
  .coverVideo{ width: min(100%, 540px); }
  .coverRight{ justify-content: start; align-items: start; padding-top: 0; }
  .coverVisual{
    width: min(100%, 620px);
    justify-items: start;
  }
  .coverPortraitFrame{ width: min(100%, 190px); }
  .coverInfoStack{
    width: min(100vw - 56px, 620px);
    margin-top: 24px;
  }
  .coverByline{
    justify-content: flex-start;
    border-radius: 24px;
    white-space: normal;
  }
  .coverBylineText{ flex-wrap: wrap; }
  .coverVideo figcaption{ min-height: 44px; }

  /* Single-column: the sticky-recede cover doesn't fit a stacked layout that
     is taller than the viewport. Turn it into a normal, statically-scrolling
     block so nothing fades/blurs/clips and section offsets stay accurate. */
  .coverTrack{ height: auto; }
  .coverSticky{ position: relative; height: auto; overflow: visible; pointer-events: auto; }
  .coverScene{ height: auto; transform: none !important; opacity: 1 !important; filter: none !important; }
  .coverMain{ transform: none !important; opacity: 1 !important; margin-top: 0; padding-top: clamp(28px, 5vh, 56px); }
  .coverMain::before{ display: none; }

  /* Mobile hero: a centered, photo-led profile composition instead of a lone
     portrait dropped after the text/video/CTAs. Keep grid items stretched
     (not justify-items:center) so a wide word can't push the column past the
     viewport; center the content inside each block instead. */
  .coverScene{ text-align: center; }
  .coverRight{ order: -1; width: 100%; padding-top: 0; justify-content: center; }
  .coverVisual{ width: 100%; justify-items: center; align-content: start; gap: 14px; }
  .coverPortraitFrame{ width: clamp(132px, 34vw, 172px); }
  .coverInfoStack{
    width: 100%;
    max-width: 560px;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    gap: 10px;
    justify-items: center;
    text-align: center;
  }
  .coverByline{ justify-content: center; min-height: 0; }
  .coverByline .avatarSm{ display: none; } /* redundant with the portrait above */
  .coverBylineText{ justify-content: center; text-align: center; }
  .coverKicker{ text-align: center; border-top: 0; padding-top: 8px; }
  .coverKicker::before{ margin-left: auto; margin-right: auto; }

  .coverLeft{ align-items: center; text-align: center; max-width: 640px; }
  .coverLead{ margin-left: auto; margin-right: auto; }
  .coverVideo{ margin-left: auto; margin-right: auto; }
  .coverCtas{ justify-content: center; }
}

@media (max-width: 640px){
  .coverScene{ width: calc(100% - 28px); padding: 48px 0 34px; gap: 20px; }
  .coverName{ font-size: clamp(42px, 12vw, 60px); }
  .coverRole{ font-size: clamp(21px, 6vw, 28px); }
  .coverLead{ max-width: 100%; font-size: clamp(20px, 5.6vw, 26px); }
  .coverVideo{ margin-top: 14px; padding: 8px; border-radius: 16px; }
  .coverVideo::before{ inset: 14px -6px -8px 14px; border-radius: 18px; }
  .coverVideo video{ border-radius: 10px; }
  .coverCtas .btn{ min-height: 44px; padding: 0 14px; }
  .coverVisual{ width: min(100%, 100vw - 28px); }
  .coverPortraitFrame{ width: min(46vw, 150px); padding: 6px; }
  .coverPortraitFrame::before{ inset: -8px; border-width: 2px; }
  .coverPortraitFrame::after{ inset: 6px; }
  .coverInfoStack{ margin-top: 12px; gap: 10px; padding: 0; }
  .coverByline{
    font-size: .86rem;
    gap: 8px;
    min-height: 0;
  }
  .coverKicker{ padding-top: 8px; font-size: .9rem; }
  .coverKicker::before{ width: 34px; height: 3px; margin-bottom: 10px; }
  .coverVideo figcaption{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .coverTrack{ height: auto; }
  .coverSticky{ position: relative; height: auto; min-height: 100vh; pointer-events: auto; }
  .coverScene{ transform: none !important; opacity: 1 !important; filter: none !important; }
  .coverMain{ transform: none !important; opacity: 1 !important; margin-top: 0; padding-top: 0; }
  .coverMain::before{ display: none; }
}

/* ===========================
   SELECTED HIGHLIGHTS (six compact proof cards)
   =========================== */
.highlightGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.highlightCard{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  min-height: 104px;
  justify-content: center;
}

a.highlightCard{
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}

a.highlightCard:hover{
  transform: translateY(-3px);
  border-color: rgba(43,108,255,0.28);
}

.highlightValue{
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--text);
}

.highlightLabel{
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 900px){
  .highlightGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px){
  .highlightGrid{ grid-template-columns: 1fr; }
}

/* =================================================================
   GAIT DASHBOARD — "The Hidden Engineering in a Step" (light + dark)
   Self-contained, theme-driven control-dashboard component.
   ================================================================= */
.gaitSection#step-engineering{
  background: none;
  border: 0;
  /* keep the normal section top spacing; the old id rule set 26px all round */
  padding: var(--home-section-y, 48px) 0 0;
  box-shadow: none;
}

.gaitDash{
  --gd-accent: #2b6cff;
  --gd-accent-2: #00b894;
  --gd-accent-3: #8b5cf6;
  --gd-panel: linear-gradient(180deg, rgba(247,250,255,0.96), rgba(238,245,255,0.92));
  --gd-card: rgba(255,255,255,0.82);
  --gd-card-2: rgba(255,255,255,0.66);
  --gd-border: rgba(37,99,235,0.16);
  --gd-border-strong: rgba(37,99,235,0.34);
  --gd-text: var(--text);
  --gd-muted: var(--muted);
  --gd-eyebrow: #5b6b82;
  --gd-glow: rgba(43,108,255,0.22);
  --gd-stage: radial-gradient(circle at 52% 46%, #ffffff, #f1f6ff 60%, #e7eeff);
  --gd-grid: rgba(43,108,255,0.07);
  --gd-pill: rgba(0,184,148,0.12);
  --gd-pill-text: #0a8f73;
  --gd-band: rgba(43,108,255,0.12);
  --gd-img-blend: multiply;
  --gd-img-filter: none;

  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2.6vw, 30px);
  background: var(--gd-panel);
  border: 1px solid var(--gd-border);
  border-radius: 22px;
  color: var(--gd-text);
  box-shadow: 0 24px 60px rgba(2,6,23,0.08);
}

:root[data-theme="dark"] .gaitDash{
  --gd-accent: #4d8fff;
  --gd-accent-2: #2dd4bf;
  --gd-accent-3: #a78bfa;
  --gd-panel: linear-gradient(180deg, #0a1426, #0a1020 55%, #070d1a);
  --gd-card: rgba(9,20,38,0.74);
  --gd-card-2: rgba(7,16,30,0.6);
  --gd-border: rgba(96,165,250,0.22);
  --gd-border-strong: rgba(96,165,250,0.46);
  --gd-eyebrow: #8aa0c4;
  --gd-glow: rgba(56,135,255,0.42);
  /* Dark cockpit stage. The anatomy renders have opaque white backgrounds, so
     `multiply` knocks the white out against the navy; a mid-blue centre keeps
     the leg legible and a brightness lift restores some colour. */
  --gd-stage: radial-gradient(circle at 50% 43%, #2c4c82, #172c52 50%, #0c1930 80%, #081124);
  --gd-grid: rgba(130,170,255,0.12);
  --gd-pill: rgba(45,212,191,0.16);
  --gd-pill-text: #5eead4;
  --gd-band: rgba(77,143,255,0.2);
  --gd-img-blend: multiply;
  --gd-img-filter: none;
  border-color: var(--gd-border);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(120,160,255,0.08);
}
:root[data-theme="dark"] .gaitDash::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 0%, rgba(56,135,255,0.12), transparent 70%),
    radial-gradient(50% 40% at 90% 6%, rgba(45,212,191,0.08), transparent 70%);
}
.gaitDash > *{ position: relative; z-index: 1; }

/* ---- header ---- */
.gdHeader{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: clamp(16px, 2.4vw, 24px);
}
.gdTitle{
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.gdTitleAccent{ color: var(--gd-accent); }
.gdHook{
  margin: 0;
  max-width: 60ch;
  color: var(--gd-muted);
  font-size: clamp(.92rem, 1.2vw, 1rem);
  line-height: 1.5;
}
.gdHook span{ display: block; }
.gdHook span:first-child{ color: var(--gd-text); font-weight: 600; }
.gdHelper{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 0;
  padding: 9px 14px;
  border: 1px solid var(--gd-border);
  border-radius: 999px;
  background: var(--gd-card);
  color: var(--gd-accent);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  max-width: 260px;
}
.gdHelperIcon svg{ width: 18px; height: 18px; display: block; }

.gdEyebrow{
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gd-eyebrow);
}

/* ---- gait cycle + timeline ---- */
.gdCycle{
  display: grid;
  grid-template-columns: minmax(130px, auto) 1fr;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  padding: clamp(14px, 1.8vw, 20px) clamp(12px, 1.8vw, 20px);
  background: var(--gd-card-2);
  border: 1px solid var(--gd-border);
  border-radius: 16px;
  margin-bottom: clamp(16px, 2.2vw, 22px);
}
.gdCycleLabel{ display: flex; flex-direction: column; gap: 4px; }
.gdCycleSub{ font-size: .78rem; color: var(--gd-muted); }

.gdTimeline{
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 96px;
}
.gdLine{
  position: absolute;
  top: 25px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 2px;
  background: var(--gd-border-strong);
  border-radius: 2px;
}
.gdLineFill{
  height: 100%;
  width: 60%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gd-accent), var(--gd-accent-2));
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.gdNode{
  position: relative;
  flex: 1 1 0;
  min-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gd-muted);
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.gdNodePct{
  font: 700 .72rem/1 ui-monospace, "SFMono-Regular", monospace;
  color: var(--gd-muted);
  transition: color .2s ease;
}
.gdNodeDot{
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gd-card);
  border: 2px solid var(--gd-border-strong);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.gdNodeName{
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  max-width: 11ch;
  transition: color .2s ease;
}
.gdNode:hover .gdNodeDot{ border-color: var(--gd-accent); transform: scale(1.12); }
.gdNode:hover .gdNodeName{ color: var(--gd-text); }
.gdNode:focus-visible{ outline: none; }
.gdNode:focus-visible .gdNodeDot{ box-shadow: 0 0 0 4px var(--gd-glow); }
.gdNode:focus-visible .gdNodeName{ color: var(--gd-accent); }

.gdNodeActive .gdNodePct{ color: var(--gd-accent); }
.gdNodeActive .gdNodeName{ color: var(--gd-accent); font-weight: 800; }
.gdNodeActive .gdNodeDot{
  background: var(--gd-accent);
  border-color: var(--gd-accent);
  box-shadow: 0 0 0 5px var(--gd-glow), 0 6px 16px rgba(43,108,255,0.4);
}
.gdNodeActive .gdNodeDot::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--gd-accent);
  animation: gdPulse 1.8s ease-out infinite;
}
@keyframes gdPulse{
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ---- main grid ---- */
.gdGrid{
  display: grid;
  grid-template-columns: 1.15fr 0.92fr 1.05fr;
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(16px, 2.2vw, 22px);
}
.gdPanel{
  display: flex;
  flex-direction: column;
  background: var(--gd-card);
  border: 1px solid var(--gd-border);
  border-radius: 16px;
  padding: clamp(14px, 1.6vw, 18px);
}
.gdPanelHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

/* ---- stage ---- */
.gdStage{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--gd-border);
  background: var(--gd-stage);
  min-height: 340px;
  isolation: isolate;
}
:root[data-theme="dark"] .gdStage{
  border-color: rgba(96,165,250,0.45);
  box-shadow: inset 0 0 0 1px rgba(120,160,255,0.12), 0 0 26px rgba(56,135,255,0.18);
}
.gdStageGrid{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--gd-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--gd-grid) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 52% 46%, rgba(0,0,0,.92), rgba(0,0,0,.5) 62%, rgba(0,0,0,.12));
}
.gdStageBadge{
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gdStagePhase{
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--gd-text);
}
.gdStageRange{ font: 700 .76rem/1 ui-monospace, monospace; color: var(--gd-accent); letter-spacing: .06em; }
.gdImageStack{
  position: absolute;
  inset: 18px 12px 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  transform: translateX(7%); /* clear the callout column on the left */
  pointer-events: none;
}
.gdImg{
  position: absolute;
  width: min(94%, 460px);
  height: min(90%, 320px);
  object-fit: contain;
  opacity: 0;
  transform: translateY(6px) scale(.985);
  transition: opacity .3s ease, transform .3s ease;
  mix-blend-mode: var(--gd-img-blend);
}
.gdImg.gdImgActive{ opacity: 1; transform: translateY(0) scale(1); }
.gdStageGlow{
  position: absolute;
  left: 56%;
  bottom: 8%;
  width: 46%;
  height: 70px;
  z-index: 2;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--gd-glow), transparent 70%);
  filter: blur(2px);
  transition: opacity .3s ease;
}
.gdStage.gdAir .gdStageGlow{ opacity: .35; }
.gdOverlay{
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  color: var(--gd-accent);
  pointer-events: none;
  overflow: visible;
}
.gdArrowFill{
  fill: url(#gdArrowGrad);
  filter: drop-shadow(0 0 6px var(--gd-glow)) drop-shadow(0 3px 5px rgba(2,6,23,0.34));
}
.gdArrowCore{
  fill: none;
  stroke: rgba(255,255,255,0.55);
  stroke-width: 0.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .5;
}
.gdArrowLine{ fill: none; stroke: none; } /* measurement-only centerline */
.gdProtractor{
  fill: none;
  stroke: var(--gd-accent);
  stroke-width: 1;
  stroke-dasharray: 1.4 2.8;
  vector-effect: non-scaling-stroke;
  opacity: .28;
}
.gdLeaderLine{
  stroke: var(--gd-accent);
  stroke-width: 1.2;
  stroke-dasharray: 1.4 1.9;
  vector-effect: non-scaling-stroke;
  opacity: .7;
}
.gdLeaderDot{ fill: var(--gd-accent); }
.gdLeaderDotEnd{ opacity: .7; }
.gdLeaderDotLeg{
  fill: #eaf3ff;
  stroke: var(--gd-accent);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px var(--gd-accent));
}
.gdLeaderHalo{
  fill: var(--gd-accent);
  opacity: .18;
}
.gdArrowTag{
  position: absolute;
  left: 78%;
  top: 30%;
  z-index: 4;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.gdArrowLabel{ font-size: .94rem; font-weight: 800; color: var(--gd-accent); letter-spacing: .03em; text-shadow: 0 1px 10px var(--gd-glow); }
.gdArrowSub{ font-size: .74rem; color: var(--gd-muted); }
.gdCallouts{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.gdCallout{
  position: absolute;
  left: 3%;
  width: 40%;               /* right edge at 43% — leaders start there */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 7px;
  background: var(--gd-card);
  border: 1px solid var(--gd-border);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(2,6,23,0.18);
  backdrop-filter: blur(6px);
}
.gdCallout0{ top: 31%; }
.gdCallout1{ top: 53%; }
.gdCallout2{ top: 73%; }
.gdCalloutIcon{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--gd-accent);
  background: linear-gradient(150deg, rgba(43,108,255,0.18), rgba(0,184,148,0.14));
  border: 1px solid var(--gd-border);
}
.gdCalloutIcon svg{ width: 17px; height: 17px; }
.gdCalloutText{ display: flex; flex-direction: column; min-width: 0; }
.gdCalloutText strong{ font-size: .8rem; font-weight: 700; line-height: 1.2; }
.gdCalloutText span{ font-size: .71rem; color: var(--gd-muted); line-height: 1.25; }

/* ---- controller's thinking ---- */
.gdThinkList{ display: flex; flex-direction: column; gap: 10px; }
.gdThink{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 15px;
  background: var(--gd-card-2);
  border: 1px solid var(--gd-border);
  border-radius: 13px;
}
.gdThinkIcon{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: var(--gd-tone, var(--gd-accent));
  background: var(--gd-card);
  background: color-mix(in srgb, var(--gd-tone, var(--gd-accent)) 15%, transparent);
  border: 1px solid var(--gd-border);
  border-color: color-mix(in srgb, var(--gd-tone, var(--gd-accent)) 32%, transparent);
}
.gdThinkIcon svg{ width: 19px; height: 19px; }
.gdThinkBody{ min-width: 0; }
.gdThinkTitle{ display: block; font-size: .9rem; font-weight: 700; color: var(--gd-tone, var(--gd-text)); }
.gdThinkText{ margin: 3px 0 0; font-size: .82rem; color: var(--gd-muted); line-height: 1.45; }
.gdThinkChevron{
  display: flex;
  justify-content: center;
  color: var(--gd-muted);
  opacity: .6;
  margin: -3px 0;
}
.gdThinkChevron svg{ width: 18px; height: 18px; }
.gdThinkPrimary{
  border-color: var(--gd-border-strong);
  background: linear-gradient(180deg, var(--gd-glow), transparent), var(--gd-card);
  box-shadow: 0 0 0 1px var(--gd-glow), 0 10px 24px rgba(43,108,255,0.14);
}
.gdThinkPrimary .gdThinkIcon{
  background: linear-gradient(140deg, var(--gd-accent), var(--gd-accent-2));
  border-color: transparent;
  color: #fff;
}

/* ---- live signals ---- */
.gdPill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gd-pill);
  color: var(--gd-pill-text);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.gdPillDot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px var(--gd-pill);
  animation: gdBlink 1.6s ease-in-out infinite;
}
@keyframes gdBlink{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }
.gdSignalList{ display: flex; flex-direction: column; gap: 12px; }
.gdSignal{
  background: var(--gd-card-2);
  border: 1px solid var(--gd-border);
  border-radius: 12px;
  padding: 10px 12px 8px;
}
.gdSignalHead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.gdSignalName{ font-size: .76rem; font-weight: 700; color: var(--gd-text); }
.gdSignalUnit{ font: 600 .68rem/1 ui-monospace, monospace; color: var(--gd-muted); }
.gdSignalPlot{ position: relative; }
.gdSignalSvg{ display: block; width: 100%; height: 52px; overflow: visible; }
.gdSignalBand{ fill: var(--gd-band); transition: x .35s ease, width .35s ease; }
.gdSignalTrace{ stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gdSignalMarker{
  position: absolute;
  left: -20px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left .35s ease, top .35s ease;
}
.gdSignalAxis{
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font: 600 .64rem/1 ui-monospace, monospace;
  color: var(--gd-muted);
}

/* ---- summary row ---- */
.gdSummary{
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: 16px;
}
.gdGlance{
  background: var(--gd-card);
  border: 1px solid var(--gd-border);
  border-radius: 16px;
  padding: clamp(14px, 1.6vw, 18px);
}
.gdGlanceGrid{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}
.gdGlanceCard{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 15px;
  background: var(--gd-card-2);
  border: 1px solid var(--gd-border);
  border-radius: 13px;
}
.gdGlanceSep{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gd-muted);
  opacity: .5;
}
.gdGlanceSep svg{ width: 18px; height: 18px; }
.gdGlanceIcon{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--gd-tone, var(--gd-accent));
  background: var(--gd-card);
  background: color-mix(in srgb, var(--gd-tone, var(--gd-accent)) 15%, transparent);
  border: 1px solid var(--gd-border);
  border-color: color-mix(in srgb, var(--gd-tone, var(--gd-accent)) 32%, transparent);
}
.gdGlanceIcon svg{ width: 18px; height: 18px; }
.gdGlanceTitle{ font-size: .86rem; font-weight: 700; color: var(--gd-tone, var(--gd-accent)); }
.gdGlanceText{ margin: 0; font-size: .8rem; color: var(--gd-muted); line-height: 1.45; }
.gdTakeaway{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 1.8vw, 20px);
  border-radius: 16px;
  border: 1px solid var(--gd-border-strong);
  background: linear-gradient(160deg, var(--gd-glow), transparent 70%), var(--gd-card);
  box-shadow: 0 0 0 1px var(--gd-glow), 0 14px 30px rgba(43,108,255,0.14);
}
.gdTakeawayLabel{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gd-accent);
}
.gdTakeawayIcon svg{ width: 18px; height: 18px; display: block; }
.gdTakeawayText{ margin: 0; font-size: .96rem; line-height: 1.55; font-weight: 500; }

/* ---- footer ---- */
.gdFoot{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--gd-border);
  font-size: .78rem;
  color: var(--gd-muted);
  line-height: 1.5;
}
.gdFoot a{ color: var(--gd-accent); font-weight: 700; white-space: nowrap; }

/* ---- content swap animation ---- */
.gdSwap{ animation: gdSwap .32s ease both; }
@keyframes gdSwap{ from{ opacity: .35; transform: translateY(4px); } to{ opacity: 1; transform: none; } }

/* ---- responsive ---- */
@media (max-width: 1040px){
  .gdGrid{ grid-template-columns: 1fr; }
  .gdStage{ min-height: 320px; }
  .gdThinkList{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .gdThinkChevron{ grid-column: 1 / -1; }
}
@media (max-width: 860px){
  .gdSummary{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .gdHeader{ flex-direction: column; gap: 14px; }
  .gdHelper{ max-width: none; }
  .gdCycle{ grid-template-columns: 1fr; gap: 12px; }
  .gdTimeline{ overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .gdNode{ flex: 0 0 88px; }
  .gdLine{ left: 44px; right: 44px; }
  .gdThinkList{ grid-template-columns: 1fr; }
  .gdGlanceGrid{ grid-template-columns: 1fr; }
  .gdGlanceSep{ display: none; }
}
@media (max-width: 460px){
  .gdStage{ min-height: 290px; }
  .gdCallout{ max-width: 150px; padding: 6px 9px; }
  .gdCalloutDot{ width: 22px; height: 22px; }
  .gdArrowTag{ right: 8%; }
}

@media (prefers-reduced-motion: reduce){
  .gdLineFill, .gdImg, .gdSignalBand, .gdSignalMarker{ transition: none; }
  .gdNodeActive .gdNodeDot::after, .gdPillDot{ animation: none; }
  .gdSwap{ animation: none; }
}

/* --- Gait dashboard cockpit pass: match the dark instrument-panel reference --- */
.gaitDash{
  --gd-accent: #2f8cff;
  --gd-accent-2: #12d6b0;
  --gd-accent-3: #8b5cf6;
  --gd-panel: linear-gradient(180deg, #08182a 0%, #071321 48%, #07101c 100%);
  --gd-card: rgba(7,18,31,0.72);
  --gd-card-2: rgba(8,22,37,0.78);
  --gd-border: rgba(126,170,219,0.24);
  --gd-border-strong: rgba(64,155,255,0.58);
  --gd-text: #f1f7ff;
  --gd-muted: #b9c7da;
  --gd-eyebrow: #b9d4f5;
  --gd-glow: rgba(47,140,255,0.42);
  --gd-stage: radial-gradient(circle at 53% 44%, #143057 0%, #0b213b 50%, #071626 100%);
  --gd-grid: rgba(90,154,228,0.12);
  --gd-pill: rgba(18,214,176,0.12);
  --gd-pill-text: #dffdf8;
  --gd-band: rgba(47,140,255,0.24);
  --gd-img-blend: screen;
  --gd-img-filter: none;

  overflow: visible;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--text);
}

:root[data-theme="dark"] .gaitDash{
  box-shadow: none;
}

:root[data-theme="dark"] .gaitDash::before{
  display: none;
}

.gdHeader{
  align-items: center;
  margin-bottom: 16px;
}

.gdTitle{
  margin: 0 0 8px;
  color: #07111f;
  font-size: clamp(2.15rem, 4.2vw, 3.25rem);
  font-weight: 900;
  line-height: 1.02;
}

:root[data-theme="dark"] .gdTitle{
  color: var(--text);
}

.gdTitleAccent{
  color: #114ea4;
}

.gdHook{
  max-width: 78ch;
  color: #566984;
  font-size: clamp(1rem, 1.35vw, 1.17rem);
  line-height: 1.4;
}

:root[data-theme="dark"] .gdHook{
  color: var(--muted);
}

.gdHook span:first-child{
  color: inherit;
  font-weight: 500;
}

.gdHelper{
  max-width: 245px;
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #0647bf;
  font-size: .95rem;
  font-weight: 700;
}

.gdHelperIcon svg{
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

.gdCockpit{
  position: relative;
  overflow: hidden;
  padding: 18px 18px 20px;
  color: var(--gd-text);
  background:
    radial-gradient(55% 32% at 67% 9%, rgba(45,142,255,0.22), transparent 70%),
    radial-gradient(42% 30% at 14% 50%, rgba(18,214,176,0.08), transparent 72%),
    var(--gd-panel);
  border: 1px solid rgba(120,160,205,0.3);
  border-radius: 18px;
  box-shadow: 0 24px 46px rgba(2,8,23,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

.gdCockpit::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(92,150,216,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,150,216,0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.35));
}

.gdCockpit > *{
  position: relative;
  z-index: 1;
}

.gdEyebrow{
  color: var(--gd-eyebrow);
  font-size: .76rem;
  letter-spacing: .08em;
}

.gdCycle{
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  margin: 0;
  padding: 0 20px 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.gdCycleSub{
  color: var(--gd-text);
  font-size: .82rem;
}

.gdTimeline{
  min-height: 88px;
}

.gdLine{
  top: 33px;
  height: 4px;
  background: rgba(137,165,198,0.25);
}

.gdLineFill{
  background: linear-gradient(90deg, rgba(137,186,255,0.22), #2f8cff 78%, #9fe8ff);
  box-shadow: 0 0 14px rgba(47,140,255,.8);
}

.gdNode{
  color: rgba(232,242,255,0.86);
}

.gdNodePct{
  color: var(--gd-text);
  font: 800 .9rem/1 Inter, system-ui, sans-serif;
}

.gdNodeDot{
  width: 19px;
  height: 19px;
  background: #0b1b2e;
  border-color: #8298b5;
  box-shadow: inset 0 0 0 3px #0b1b2e;
}

.gdNodeName{
  max-width: 12ch;
  color: var(--gd-text);
  font-size: .9rem;
  font-weight: 500;
}

.gdNodeActive .gdNodePct,
.gdNodeActive .gdNodeName{
  color: #42a0ff;
}

.gdNodeActive .gdNodeDot{
  background: #2f8cff;
  border-color: #e9f5ff;
  box-shadow: 0 0 0 5px rgba(47,140,255,.4), 0 0 24px rgba(47,140,255,.9);
}

.gdGrid{
  grid-template-columns: minmax(500px, 1.18fr) minmax(300px, .8fr) minmax(400px, 1.02fr);
  gap: 0;
  margin: 0 0 18px;
  overflow: hidden;
  background: rgba(4,13,23,0.42);
  border: 1px solid var(--gd-border);
  border-radius: 16px;
}

.gdStage,
.gdPanel{
  border: 0;
  border-radius: 0;
}

.gdStage{
  min-height: 500px;
  background: transparent;
  border-right: 1px solid var(--gd-border);
}

.gdThinkingPanel{
  border-right: 1px solid var(--gd-border);
}

.gdPanel{
  background: transparent;
  padding: 24px 22px 14px;
}

.gdPanelHead{
  margin-bottom: 18px;
}

.gdStageGrid{
  background-size: 25px 25px;
  mask-image: radial-gradient(circle at 54% 52%, rgba(0,0,0,.95), rgba(0,0,0,.55) 64%, rgba(0,0,0,.08));
}

.gdStageBadge{
  top: 28px;
  left: 26px;
}

.gdStagePhase{
  color: var(--gd-text);
  font-size: 1.34rem;
}

.gdStageRange{
  color: #2f8cff;
  font: 800 .95rem/1.1 Inter, system-ui, sans-serif;
  letter-spacing: 0;
}

.gdImageStack{
  inset: 0 0 0;
  transform: translateX(9%);
}

.gdImg{
  width: min(92%, 580px);
  height: min(100%, 500px);
  mix-blend-mode: var(--gd-img-blend);
}

.gdStageGlow{
  left: 58%;
  bottom: 14%;
  width: 44%;
  height: 84px;
  opacity: .82;
}

.gdArrowLabel{
  color: #3b9cff;
  font-size: 1rem;
}

.gdArrowSub{
  color: var(--gd-text);
  font-size: .82rem;
}

.gdCallout{
  left: 3.5%;
  width: 38.5%;
  padding: 10px 12px;
  background: rgba(11,25,42,0.86);
  border-color: rgba(128,169,213,0.28);
  border-radius: 10px;
  box-shadow: 0 14px 24px rgba(0,0,0,0.2);
}

.gdCalloutIcon{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(47,140,255,0.12);
  border-color: rgba(92,166,255,0.25);
}

.gdCalloutText strong{
  color: var(--gd-text);
  font-size: .84rem;
}

.gdCalloutText span{
  color: var(--gd-muted);
  font-size: .78rem;
}

.gdThinkList{
  gap: 12px;
}

.gdThink{
  min-height: 70px;
  padding: 12px 15px;
  background: rgba(12,27,44,0.72);
  border-color: rgba(141,179,220,0.25);
  border-radius: 10px;
}

.gdThinkIcon{
  width: 38px;
  height: 38px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gd-tone) 24%, transparent), rgba(255,255,255,0.02));
  border: 0;
}

.gdThinkIcon svg{
  width: 25px;
  height: 25px;
}

.gdThinkTitle{
  color: var(--gd-tone, var(--gd-text));
  font-size: 1rem;
}

.gdThinkText{
  color: #d1d8e5;
  font-size: .88rem;
  line-height: 1.35;
}

.gdThinkPrimary{
  background: linear-gradient(160deg, rgba(47,140,255,0.22), rgba(10,25,43,0.86));
  border-color: rgba(47,140,255,0.78);
  box-shadow: inset 0 0 0 1px rgba(47,140,255,0.18), 0 0 22px rgba(47,140,255,0.14);
}

.gdThinkPrimary .gdThinkIcon{
  color: #4da2ff;
  background: transparent;
}

.gdPill{
  padding: 7px 14px;
  background: rgba(8,28,44,0.7);
  border: 1px solid rgba(100,151,203,0.2);
  color: #dceaff;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.gdPillDot{
  color: #12d6b0;
}

.gdSignal{
  background: rgba(4,15,27,0.68);
  border-color: rgba(116,158,205,0.25);
  border-radius: 10px;
}

.gdSignalName{
  color: var(--gd-text);
  font-size: .83rem;
}

.gdSignalUnit{
  color: var(--gd-muted);
}

.gdSignalSvg{
  height: 58px;
}

.gdSignalAxis{
  color: var(--gd-muted);
  font-size: .78rem;
}

.gdSummary{
  grid-template-columns: minmax(0, 2.25fr) minmax(300px, 1fr);
  gap: 18px;
  margin: 0;
}

.gdGlance{
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.gdGlance > .gdEyebrow{
  margin-left: 4px;
}

.gdGlanceGrid{
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0;
  margin-top: 10px;
  overflow: hidden;
  background: rgba(8,22,37,0.58);
  border: 1px solid rgba(126,170,219,0.22);
  border-radius: 11px;
}

.gdGlanceCard{
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 12px;
  padding: 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.gdGlanceIcon{
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gd-tone, var(--gd-accent)) 18%, transparent);
  border-color: transparent;
}

.gdGlanceIcon svg{
  width: 28px;
  height: 28px;
}

.gdGlanceTitle{
  align-self: end;
  font-size: .98rem;
}

.gdGlanceText{
  color: #d0d8e5;
  font-size: .9rem;
  line-height: 1.35;
}

.gdGlanceSep{
  width: 1px;
  color: rgba(179,205,235,0.6);
  background: rgba(126,170,219,0.16);
}

.gdGlanceSep svg{
  width: 24px;
  height: 24px;
  transform: translateX(-11px);
}

.gdTakeaway{
  min-height: 152px;
  padding: 24px;
  justify-content: center;
  background:
    radial-gradient(70% 90% at 10% 0%, rgba(47,140,255,0.46), transparent 72%),
    linear-gradient(135deg, #082d68 0%, #061c3c 62%, #071525 100%);
  border-color: rgba(47,140,255,0.88);
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 12px 28px rgba(0,0,0,0.22);
}

.gdTakeawayLabel{
  color: #cfe2ff;
  font-size: .88rem;
  letter-spacing: .06em;
}

.gdTakeawayIcon{
  color: #ffc35a;
}

.gdTakeawayIcon svg{
  width: 28px;
  height: 28px;
}

.gdTakeawayText{
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.42;
}

.gdFoot{
  margin: 16px 10px 0;
  padding: 0;
  border: 0;
  color: #64748b;
  font-size: .92rem;
}

.gdFoot a{
  margin-left: auto;
  color: #0647bf;
  font-size: .93rem;
}

@media (max-width: 1180px){
  .gdGrid{
    grid-template-columns: minmax(0, 1fr);
  }
  .gdStage,
  .gdThinkingPanel{
    border-right: 0;
    border-bottom: 1px solid var(--gd-border);
  }
  .gdStage{
    min-height: 430px;
  }
  .gdThinkList{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .gdThinkChevron{
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px){
  .gdHeader{
    align-items: flex-start;
  }
  .gdCockpit{
    padding: 14px;
    border-radius: 16px;
  }
  .gdCycle{
    grid-template-columns: 1fr;
    padding: 0 6px 16px;
  }
  .gdTimeline{
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
  }
  .gdNode{
    flex: 0 0 94px;
  }
  .gdSummary{
    grid-template-columns: 1fr;
  }
  .gdGlanceGrid{
    grid-template-columns: 1fr;
  }
  .gdGlanceSep{
    display: none;
  }
}

@media (max-width: 560px){
  .gdTitle{
    font-size: clamp(2rem, 11vw, 2.7rem);
  }
  .gdStage{
    min-height: 380px;
  }
  .gdImageStack{
    transform: translateX(16%);
  }
  .gdImg{
    width: 92%;
    height: 92%;
  }
  .gdCallout{
    left: 4%;
    width: 42%;
    padding: 8px;
  }
  .gdCalloutIcon{
    width: 30px;
    height: 30px;
  }
  .gdThinkList{
    grid-template-columns: 1fr;
  }
  .gdGlanceCard{
    grid-template-columns: 50px minmax(0, 1fr);
    padding: 15px;
  }
  .gdTakeaway{
    padding: 20px;
  }
}

/* --- Final gait theme + typography fit pass (light and dark parity) --- */
.gaitDash{
  --gd-accent: #2f7bff;
  --gd-accent-2: #00b894;
  --gd-accent-3: #8b5cf6;
  --gd-panel: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
  --gd-card: rgba(255,255,255,.78);
  --gd-card-2: rgba(247,250,255,.72);
  --gd-border: rgba(20,64,122,.14);
  --gd-border-strong: rgba(47,123,255,.42);
  --gd-text: #07111f;
  --gd-muted: #5d6f8a;
  --gd-eyebrow: #234d83;
  --gd-glow: rgba(47,123,255,.22);
  --gd-stage: linear-gradient(135deg, rgba(255,255,255,.96), rgba(242,247,255,.92));
  --gd-grid: rgba(47,123,255,.08);
  --gd-pill: rgba(0,184,148,.1);
  --gd-pill-text: #087e68;
  --gd-band: rgba(47,123,255,.11);
  --gd-img-blend: normal;
  --gd-img-filter: none;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] .gaitDash{
  --gd-panel: linear-gradient(180deg, #08182a 0%, #071321 48%, #07101c 100%);
  --gd-card: rgba(7,18,31,.72);
  --gd-card-2: rgba(8,22,37,.78);
  --gd-border: rgba(126,170,219,.24);
  --gd-border-strong: rgba(64,155,255,.58);
  --gd-text: #f1f7ff;
  --gd-muted: #b9c7da;
  --gd-eyebrow: #b9d4f5;
  --gd-glow: rgba(47,140,255,.42);
  --gd-stage: radial-gradient(circle at 53% 44%, #143057 0%, #0b213b 50%, #071626 100%);
  --gd-grid: rgba(90,154,228,.12);
  --gd-pill: rgba(18,214,176,.12);
  --gd-pill-text: #dffdf8;
  --gd-band: rgba(47,140,255,.24);
  --gd-img-blend: normal;
  --gd-img-filter: none;
}

.gdTitle{
  color: #07111f;
  font-size: clamp(1.8rem, 2.55vw, 2.55rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.08;
}

:root[data-theme="dark"] .gdTitle{
  color: #f8fbff;
}

.gdTitleAccent,
:root[data-theme="dark"] .gdTitleAccent{
  color: #0b54b8;
}

:root[data-theme="dark"] .gdTitleAccent{
  color: #3c93ff;
}

.gdHook{
  color: #536784;
  font-size: clamp(.88rem, 1vw, 1.02rem);
  line-height: 1.45;
}

.gdHelper{
  color: #0647bf;
  font-size: .82rem;
  line-height: 1.28;
}

.gdHelperIcon svg{
  width: 26px;
  height: 26px;
}

.gdCockpit{
  background:
    radial-gradient(60% 34% at 66% 9%, rgba(47,123,255,.13), transparent 72%),
    radial-gradient(42% 30% at 15% 54%, rgba(0,184,148,.06), transparent 74%),
    var(--gd-panel);
  border-color: rgba(20,64,122,.14);
  box-shadow: 0 20px 48px rgba(15,35,70,.12), inset 0 1px 0 rgba(255,255,255,.75);
}

:root[data-theme="dark"] .gdCockpit{
  background:
    radial-gradient(55% 32% at 67% 9%, rgba(45,142,255,.22), transparent 70%),
    radial-gradient(42% 30% at 14% 50%, rgba(18,214,176,.08), transparent 72%),
    var(--gd-panel);
  border-color: rgba(120,160,205,.3);
  box-shadow: 0 24px 46px rgba(2,8,23,.28), inset 0 1px 0 rgba(255,255,255,.04);
}

.gdCockpit::before{
  background-image:
    linear-gradient(rgba(47,123,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,123,255,.035) 1px, transparent 1px);
}

:root[data-theme="dark"] .gdCockpit::before{
  background-image:
    linear-gradient(rgba(92,150,216,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,150,216,.055) 1px, transparent 1px);
}

.gdEyebrow{
  color: var(--gd-eyebrow);
  font-size: .68rem;
  letter-spacing: .08em;
}

.gdCycle{
  grid-template-columns: 150px minmax(0,1fr);
  gap: 24px;
  padding: 0 16px 10px;
}

.gdTimeline{
  display: grid;
  grid-template-columns: repeat(6, minmax(84px, 1fr));
  min-height: 82px;
  align-items: start;
}

.gdLine{
  top: 24px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 3px;
  background: rgba(87,106,132,.2);
}

:root[data-theme="dark"] .gdLine{
  background: rgba(137,165,198,.25);
}

.gdLineFill{
  background: linear-gradient(90deg, rgba(47,123,255,.18), #2f7bff 74%, #8fdcff);
  box-shadow: 0 0 12px rgba(47,123,255,.42);
}

.gdNode{
  min-width: 0;
  gap: 4px;
  color: var(--gd-muted);
}

.gdNodePct{
  color: var(--gd-text);
  font-size: .8rem;
  font-weight: 780;
}

.gdNodeDot{
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: rgba(255,255,255,.48);
  border: 2px solid rgba(72,95,124,.55);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gd-card) 74%, transparent);
}

:root[data-theme="dark"] .gdNodeDot{
  background: #0b1b2e;
  border-color: #8298b5;
  box-shadow: inset 0 0 0 3px #0b1b2e;
}

.gdNodeIcon{
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  opacity: .94;
}

.gdNodeIcon svg{
  width: 14px;
  height: 14px;
}

.gdNodeAction{
  display: grid;
  place-items: center;
  width: 18px;
  height: 11px;
  color: var(--gd-muted);
  opacity: .9;
  margin-top: -1px;
}

.gdNodeAction svg{
  width: 13px;
  height: 13px;
}

.gdNodeActive .gdNodeAction{
  color: var(--gd-accent);
  opacity: 1;
}

.gdNodeName{
  color: var(--gd-text);
  font-size: .76rem;
  font-weight: 560;
  line-height: 1.15;
}

.gdNodeActive .gdNodeDot{
  position: relative;
  background: rgba(255,255,255,.92);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(47,123,255,.32), 0 0 18px rgba(47,123,255,.65);
}

.gdNodeActive .gdNodeDot::before{
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--gd-accent);
}

:root[data-theme="dark"] .gdNodeActive .gdNodeDot{
  background: rgba(232,242,255,.92);
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(47,123,255,.38), 0 0 22px rgba(47,123,255,.78);
}

.gdGrid{
  background: rgba(255,255,255,.42);
  border-color: rgba(20,64,122,.14);
}

:root[data-theme="dark"] .gdGrid{
  background: rgba(4,13,23,.42);
  border-color: var(--gd-border);
}

.gdStage{
  min-height: 430px;
  background: var(--gd-stage);
}

.gdStageDepth{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 54% 48%, rgba(47,123,255,.16), transparent 33%),
    radial-gradient(circle at 48% 82%, rgba(56,189,248,.16), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,248,255,.88));
}

:root[data-theme="dark"] .gdStageDepth{
  background:
    radial-gradient(circle at 55% 52%, rgba(59,130,246,.22), transparent 34%),
    radial-gradient(circle at 45% 82%, rgba(14,165,233,.2), transparent 28%),
    linear-gradient(135deg, rgba(8,18,36,.98), rgba(5,12,24,.95));
}

.gdStageGrid{
  z-index: 1;
  inset: auto -16% -15%;
  height: 54%;
  background-image:
    linear-gradient(rgba(47,123,255,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,123,255,.11) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: .48;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,.24) 74%, transparent);
}

:root[data-theme="dark"] .gdStageGrid{
  background-image:
    linear-gradient(rgba(96,165,250,.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.17) 1px, transparent 1px);
  opacity: .56;
}

.gdStageArcs{
  position: absolute;
  z-index: 2;
  left: 17%;
  top: 11%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(47,123,255,.24);
  pointer-events: none;
  mask-image: conic-gradient(from 205deg, transparent 0 16deg, #000 16deg 248deg, transparent 248deg 360deg);
}

.gdStageArcs::before,
.gdStageArcs::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 10%;
  border: 1px solid rgba(47,123,255,.12);
}

.gdStageArcs::after{
  inset: 20%;
  border-style: dashed;
}

:root[data-theme="dark"] .gdStageArcs{
  border-color: rgba(96,165,250,.36);
}

.gdStageBadge{
  z-index: 8;
  top: 24px;
  left: 24px;
}

.gdStagePhase{
  font-size: 1.08rem;
  letter-spacing: 0;
}

.gdStageRange{
  font-size: .86rem;
}

.gdImageStack{
  z-index: 4;
  inset: -8% 0 1%;
  transform: translateX(13%);
}

.gdImg{
  width: min(112%, 670px);
  height: min(124%, 590px);
  transform: translateY(2px) rotate(-1.5deg) scale(.99);
  transform-origin: 48% 88%;
}

.gdImg.gdImgActive{
  transform: translateY(0) rotate(-1.5deg) scale(1);
}

.gdOverlay{
  z-index: 6;
}

.gdArrowFill{
  opacity: .72;
  filter: drop-shadow(0 0 7px rgba(47,123,255,.55));
}

.gdArrowCore{
  stroke-width: .62;
  opacity: .46;
}

.gdArrowTag{
  z-index: 7;
}

.gdArrowLabel{
  font-size: .8rem;
  letter-spacing: .06em;
}

.gdArrowSub{
  color: var(--gd-muted);
  font-size: .74rem;
}

.gdCallouts{
  z-index: 9;
}

.gdCallout{
  width: 35%;
  min-height: 48px;
  padding: 8px 10px;
  gap: 8px;
  background: rgba(255,255,255,.76);
  border-color: rgba(47,123,255,.2);
  border-radius: 9px;
  box-shadow: 0 10px 22px rgba(25,55,95,.12);
  backdrop-filter: blur(9px);
}

:root[data-theme="dark"] .gdCallout{
  background: rgba(8,18,36,.72);
  border-color: rgba(96,165,250,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}

.gdCalloutIcon{
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.gdCalloutIcon svg{
  width: 16px;
  height: 16px;
}

.gdCalloutText strong{
  color: var(--gd-text);
  font-size: .72rem;
  line-height: 1.15;
}

.gdCalloutText span{
  color: var(--gd-muted);
  font-size: .68rem;
  line-height: 1.18;
}

.gdLeaderLine{
  opacity: .62;
}

.gdThink,
.gdSignal,
.gdGlanceGrid{
  background: rgba(255,255,255,.7);
  border-color: rgba(20,64,122,.13);
}

:root[data-theme="dark"] .gdThink,
:root[data-theme="dark"] .gdSignal,
:root[data-theme="dark"] .gdGlanceGrid{
  background: rgba(4,15,27,.68);
  border-color: rgba(116,158,205,.25);
}

.gdThink{
  min-height: 62px;
  padding: 10px 12px;
  gap: 10px;
}

.gdThinkIcon{
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.gdThinkIcon svg{
  width: 22px;
  height: 22px;
}

.gdThinkTitle{
  font-size: .78rem;
}

.gdThinkText{
  color: var(--gd-muted);
  font-size: .72rem;
  line-height: 1.35;
}

.gdPanel{
  padding: 18px 18px 14px;
}

.gdPanelHead{
  margin-bottom: 12px;
}

.gdPill{
  padding: 5px 10px;
  background: rgba(255,255,255,.66);
  color: #235f79;
  font-size: .68rem;
}

:root[data-theme="dark"] .gdPill{
  background: rgba(8,28,44,.7);
  color: #dceaff;
}

.gdSignal{
  padding: 8px 10px 7px;
}

.gdSignalName{
  font-size: .72rem;
}

.gdSignalUnit{
  font-size: .62rem;
}

.gdSignalSvg{
  height: 52px;
}

.gdSignalAxis{
  font-size: .67rem;
}

.gdGlanceCard{
  grid-template-columns: 44px minmax(0,1fr);
  padding: 14px;
}

.gdGlanceIcon{
  width: 36px;
  height: 36px;
}

.gdGlanceIcon svg{
  width: 22px;
  height: 22px;
}

.gdGlanceTitle{
  font-size: .76rem;
}

.gdGlanceText{
  color: var(--gd-muted);
  font-size: .68rem;
  line-height: 1.38;
}

.gdTakeaway{
  min-height: 126px;
  padding: 18px;
  background:
    radial-gradient(70% 90% at 10% 0%, rgba(47,123,255,.16), transparent 72%),
    linear-gradient(135deg, rgba(242,247,255,.98), rgba(232,241,255,.9));
  border-color: rgba(47,123,255,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.56), 0 12px 26px rgba(15,45,95,.1);
}

:root[data-theme="dark"] .gdTakeaway{
  background:
    radial-gradient(70% 90% at 10% 0%, rgba(47,140,255,.46), transparent 72%),
    linear-gradient(135deg, #082d68 0%, #061c3c 62%, #071525 100%);
  border-color: rgba(47,140,255,.88);
}

.gdTakeawayLabel{
  color: #0f4fae;
  font-size: .72rem;
}

:root[data-theme="dark"] .gdTakeawayLabel{
  color: #cfe2ff;
}

.gdTakeawayIcon svg{
  width: 20px;
  height: 20px;
}

.gdTakeawayText{
  color: var(--gd-text);
  font-size: .86rem;
}

:root[data-theme="dark"] .gdTakeawayText{
  color: #fff;
}

.gdFoot{
  font-size: .82rem;
}

@media (max-width: 1180px){
  .gdStage{
    min-height: 420px;
  }
}

@media (max-width: 820px){
  .gdTimeline{
    display: flex;
  }
  .gdNode{
    flex: 0 0 92px;
  }
}

@media (max-width: 560px){
  .gdTitle{
    font-size: clamp(1.8rem, 9vw, 2.4rem);
  }
  .gdStage{
    min-height: 360px;
  }
  .gdImageStack{
    transform: translateX(22%);
  }
  .gdCallout{
    width: 43%;
    padding: 7px;
  }
  .gdCalloutText strong{
    font-size: .66rem;
  }
  .gdCalloutText span{
    font-size: .62rem;
  }
}

/* Keep the Hidden Engineering title aligned with the site's section heading scale. */
.gaitDash .gdTitle{
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

@media (max-width: 560px){
  .gaitDash .gdTitle{
    font-size: clamp(1.55rem, 7.2vw, 2rem);
  }
}

/* Final Hidden Engineering cockpit pass: embedded control viewport in both themes. */
.gaitSection#step-engineering{
  background:
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

:root[data-theme="dark"] .gaitSection#step-engineering{
  background:
    linear-gradient(180deg, #081425 0%, #020a14 100%);
}

.gaitDash{
  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.gaitDash .gdCockpit{
  background:
    radial-gradient(60% 34% at 66% 9%, rgba(47,123,255,.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,255,.98));
}

:root[data-theme="dark"] .gaitDash .gdCockpit{
  background:
    radial-gradient(55% 32% at 67% 9%, rgba(45,142,255,.22), transparent 70%),
    linear-gradient(180deg, rgba(4,16,31,.98), rgba(2,9,19,.99));
}

.gaitDash .gdCockpit::before{
  opacity: .16;
}

:root[data-theme="dark"] .gaitDash .gdCockpit::before{
  opacity: .22;
}

.gaitDash .gdGrid{
  background:
    radial-gradient(circle at 17% 20%, rgba(47,123,255,.08), transparent 27%),
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(244,248,255,.82));
}

:root[data-theme="dark"] .gaitDash .gdGrid{
  background:
    radial-gradient(circle at 18% 16%, rgba(47,123,255,.18), transparent 32%),
    linear-gradient(180deg, rgba(5,15,29,.72), rgba(2,10,21,.92));
}

.gaitDash .gdStage{
  min-height: 462px;
  overflow: hidden;
  color: #eef6ff;
  background:
    radial-gradient(circle at 55% 50%, rgba(31,99,255,.28), transparent 34%),
    radial-gradient(circle at 51% 86%, rgba(56,189,248,.3), transparent 25%),
    linear-gradient(145deg, #07182b 0%, #03101f 55%, #020914 100%);
  border-color: rgba(96,165,250,.32);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 -42px 90px rgba(0,0,0,.44),
    0 22px 48px rgba(6,22,45,.22);
}

.gaitDash .gdStage::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,9,20,.82), transparent 34%, transparent 76%, rgba(2,9,20,.28)),
    radial-gradient(circle at 58% 45%, transparent 0 26%, rgba(2,9,20,.2) 56%, rgba(2,9,20,.54) 100%);
}

.gaitDash .gdStageDepth{
  background:
    radial-gradient(circle at 53% 48%, rgba(42,118,255,.38), transparent 29%),
    radial-gradient(circle at 51% 83%, rgba(56,189,248,.34), transparent 23%),
    linear-gradient(145deg, rgba(10,32,58,.98), rgba(2,10,22,.98));
}

.gaitDash .gdStageGrid{
  z-index: 1;
  inset: auto -18% -17%;
  height: 58%;
  background-image:
    linear-gradient(rgba(59,130,246,.19) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.19) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .66;
  transform: perspective(520px) rotateX(63deg);
  mask-image: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.2) 77%, transparent);
}

.gaitDash .gdStageArcs{
  z-index: 2;
  left: 14%;
  top: 10%;
  width: 70%;
  border-color: rgba(79,154,255,.36);
  filter: drop-shadow(0 0 12px rgba(47,123,255,.24));
}

.gaitDash .gdStageArcs::before,
.gaitDash .gdStageArcs::after{
  border-color: rgba(79,154,255,.18);
}

.gaitDash .gdStageBadge{
  z-index: 10;
  color: #f8fbff;
}

.gaitDash .gdStagePhase{
  font-size: .98rem;
  font-weight: 850;
  color: #f8fbff;
  text-shadow: 0 2px 14px rgba(0,0,0,.48);
}

.gaitDash .gdStageRange{
  font-size: .78rem;
  color: #53a3ff;
}

.gaitDash .gdImageStack{
  z-index: 5;
  inset: -23% -5% -2%;
  transform: translateX(14%);
}

.gaitDash .gdImg{
  width: min(132%, 760px);
  height: min(145%, 700px);
  object-fit: contain;
  object-position: 50% 70%;
  transform: translateY(2px) rotate(-2.4deg) scale(1.04);
  transform-origin: 50% 88%;
}

.gaitDash .gdImg.gdImgActive{
  opacity: 1;
  transform: translateY(0) rotate(-2.4deg) scale(1.08);
}

.gaitDash .gdStageGlow{
  z-index: 4;
  opacity: .78;
  background:
    radial-gradient(circle at 54% 46%, rgba(78,163,255,.38), transparent 18%),
    radial-gradient(circle at 53% 84%, rgba(56,189,248,.56), transparent 23%);
  mix-blend-mode: screen;
}

.gaitDash .gdFootGlow{
  position: absolute;
  z-index: 6;
  left: var(--gd-contact-x, 62%);
  top: var(--gd-contact-y, 84%);
  right: auto;
  bottom: auto;
  width: var(--gd-contact-w, 34%);
  height: var(--gd-contact-h, 50px);
  opacity: var(--gd-contact-opacity, .86);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(56,189,248,.74), rgba(47,123,255,.24) 42%, transparent 70%);
  filter: blur(.2px) drop-shadow(0 0 20px rgba(56,189,248,.62));
  pointer-events: none;
}

.gaitDash .gdFootGlow::before,
.gaitDash .gdFootGlow::after,
.gaitDash .gdFootGlow span,
.gaitDash .gdFootGlow i{
  content: "";
  position: absolute;
  border-radius: 50%;
}

.gaitDash .gdFootGlow::before{
  inset: 9px 22px;
  border: 1px solid rgba(125,211,252,.76);
  box-shadow: 0 0 18px rgba(56,189,248,.44);
}

.gaitDash .gdFootGlow::after{
  inset: 15px 38px;
  border: 1px solid rgba(59,130,246,.62);
}

.gaitDash .gdFootGlow span{
  width: 5px;
  height: 5px;
  left: 27%;
  top: 44%;
  background: #9ff5ff;
  box-shadow:
    34px -10px 0 rgba(56,189,248,.82),
    66px 3px 0 rgba(47,123,255,.66),
    96px -9px 0 rgba(125,211,252,.58);
}

.gaitDash .gdFootGlow i{
  inset: 20px 52px;
  background: rgba(255,255,255,.78);
  filter: blur(8px);
}

:root:not([data-theme="dark"]) .gaitDash .gdFootGlow{
  background:
    radial-gradient(ellipse at center, rgba(56,189,248,.58), rgba(47,123,255,.2) 43%, transparent 70%);
  filter: blur(.2px) drop-shadow(0 0 15px rgba(47,123,255,.36));
}

.gaitDash .gdOverlay{
  z-index: 8;
}

.gaitDash .gdArrowFill,
.gaitDash .gdArrowCore{
  display: none;
}

.gaitDash .gdArrowGlow,
.gaitDash .gdArrowMain{
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gaitDash .gdArrowGlow{
  stroke: rgba(56,189,248,.36);
  stroke-width: 10;
  filter: blur(4px);
}

.gaitDash .gdArrowMain{
  stroke: url(#gdArrowGrad);
  stroke-width: 3.8;
  marker-end: url(#gdArrowHead);
  filter: drop-shadow(0 0 8px rgba(56,189,248,.7));
}

.gaitDash .gdArrowTag{
  z-index: 11;
  width: max-content;
  min-width: 116px;
  max-width: 150px;
  color: #d9efff;
  text-shadow: 0 2px 16px rgba(0,0,0,.62);
}

.gaitDash .gdArrowLabel{
  font-size: .76rem;
  color: #58b4ff;
}

.gaitDash .gdArrowSub{
  font-size: .68rem;
  color: rgba(226,242,255,.8);
}

.gaitDash .gdCallouts{
  z-index: 12;
}

.gaitDash .gdCallout{
  width: 34%;
  min-height: 46px;
  padding: 8px 9px;
  background: rgba(4,17,34,.74);
  border-color: rgba(96,165,250,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 34px rgba(0,0,0,.34);
  color: #eef6ff;
}

.gaitDash .gdCalloutIcon{
  width: 27px;
  height: 27px;
  color: #53a3ff;
  background: rgba(20,84,155,.38);
  border-color: rgba(125,211,252,.22);
}

.gaitDash .gdCalloutText strong{
  font-size: .68rem;
  color: #f8fbff;
}

.gaitDash .gdCalloutText span{
  font-size: .62rem;
  color: rgba(226,242,255,.74);
}

.gaitDash .gdLeaderLine{
  stroke: rgba(96,165,250,.56);
  stroke-dasharray: 3 4;
  opacity: .86;
}

.gaitDash .gdLeaderDot,
.gaitDash .gdLeaderHalo{
  fill: #60a5fa;
  filter: drop-shadow(0 0 8px rgba(96,165,250,.72));
}

.gaitDash .gdPanel,
.gaitDash .gdThink,
.gaitDash .gdSignal,
.gaitDash .gdGlanceGrid{
  border-color: rgba(20,64,122,.14);
}

.gaitDash .gdThink{
  min-height: 58px;
  padding: 9px 11px;
}

.gaitDash .gdThinkText,
.gaitDash .gdGlanceText{
  font-size: .68rem;
}

.gaitDash .gdSignal{
  background:
    radial-gradient(circle at 55% 42%, rgba(47,123,255,.1), transparent 45%),
    rgba(255,255,255,.78);
}

:root[data-theme="dark"] .gaitDash .gdSignal{
  background:
    radial-gradient(circle at 58% 45%, rgba(47,123,255,.16), transparent 48%),
    rgba(3,13,26,.72);
}

.gaitDash .gdSignalPlot{
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(rgba(47,123,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,123,255,.1) 1px, transparent 1px),
    linear-gradient(180deg, rgba(9,27,53,.07), rgba(255,255,255,.08));
  background-size: 100% 50%, 25% 100%, 100% 100%;
}

:root[data-theme="dark"] .gaitDash .gdSignalPlot{
  background:
    linear-gradient(rgba(96,165,250,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.14) 1px, transparent 1px),
    linear-gradient(180deg, rgba(10,32,58,.58), rgba(2,10,22,.62));
  background-size: 100% 50%, 25% 100%, 100% 100%;
}

.gaitDash .gdSignalBand{
  fill: rgba(47,123,255,.16);
  filter: drop-shadow(0 0 8px rgba(47,123,255,.38));
}

:root[data-theme="dark"] .gaitDash .gdSignalBand{
  fill: rgba(47,123,255,.28);
}

.gaitDash .gdSignalTrace{
  stroke-width: 2.2;
  filter: drop-shadow(0 0 3px currentColor);
}

.gaitDash .gdSignalMarker{
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
}

.gaitDash .gdSignalNoContact .gdSignalTrace{
  opacity: .28;
  stroke-dasharray: 4 4;
}

.gaitDash .gdSignalNoContact .gdSignalBand{
  fill: rgba(148,163,184,.1);
  filter: none;
}

.gaitDash .gdSignalNoContact .gdSignalUnit{
  color: #64748b;
}

.gaitDash .gdNodeAction{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15px;
  margin-top: 2px;
  color: #64748b;
  opacity: .9;
}

.gaitDash .gdNodeAction svg{
  width: 13px;
  height: 13px;
  stroke-width: 1.9;
}

.gaitDash .gdNodeActive .gdNodeAction{
  color: var(--gd-accent);
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(47,123,255,.38));
}

:root[data-theme="dark"] .gaitDash .gdNodeAction{
  color: #9fb1c8;
}

:root[data-theme="dark"] .gaitDash .gdNodeActive .gdNodeAction{
  color: #5fa8ff;
}

.gaitDash .gdTakeaway{
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(47,123,255,.42), transparent 66%),
    linear-gradient(135deg, #eaf3ff 0%, #dbeafe 50%, #f8fbff 100%);
  border-color: rgba(47,123,255,.42);
}

:root[data-theme="dark"] .gaitDash .gdTakeaway{
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(47,140,255,.58), transparent 66%),
    linear-gradient(135deg, #082f6e 0%, #061d3f 58%, #041426 100%);
}

.gaitDash .gdTakeawayText{
  font-size: .86rem;
  line-height: 1.48;
}

@media (max-width: 1180px){
  .gaitDash .gdStage{
    min-height: 430px;
  }
}

@media (max-width: 820px){
  .gaitDash .gdStage{
    min-height: 420px;
  }
  .gaitDash .gdImageStack{
    inset: -19% -10% -1%;
    transform: translateX(18%);
  }
}

@media (max-width: 560px){
  .gaitDash .gdStage{
    min-height: 372px;
  }
  .gaitDash .gdImageStack{
    inset: -12% -20% -2%;
    transform: translateX(28%);
  }
  .gaitDash .gdImg{
    width: min(150%, 620px);
    height: min(128%, 560px);
  }
  .gaitDash .gdCallout{
    width: 44%;
    min-height: 43px;
    padding: 7px;
  }
}

/* Light-mode stage correction: bright technical viewport, not the dark cockpit scene. */
:root:not([data-theme="dark"]) .gaitDash .gdStage{
  color: #0f172a;
  background:
    radial-gradient(circle at 59% 50%, rgba(70,148,255,.2), transparent 31%),
    radial-gradient(circle at 61% 86%, rgba(56,189,248,.24), transparent 22%),
    linear-gradient(145deg, #ffffff 0%, #f4f8ff 54%, #eaf2fb 100%);
  border-color: rgba(31,87,150,.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.78),
    inset 0 -32px 70px rgba(47,123,255,.09),
    0 16px 34px rgba(22,50,86,.12);
}

:root:not([data-theme="dark"]) .gaitDash .gdStage::after{
  background:
    linear-gradient(90deg, rgba(255,255,255,.92), transparent 26%, transparent 75%, rgba(255,255,255,.5)),
    radial-gradient(circle at 58% 43%, transparent 0 32%, rgba(47,123,255,.05) 64%, rgba(15,55,105,.08) 100%);
}

:root:not([data-theme="dark"]) .gaitDash .gdStageDepth{
  background:
    radial-gradient(circle at 57% 48%, rgba(67,135,255,.22), transparent 29%),
    radial-gradient(circle at 62% 84%, rgba(56,189,248,.28), transparent 22%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(236,244,255,.96));
}

:root:not([data-theme="dark"]) .gaitDash .gdStageGrid{
  background-image:
    linear-gradient(rgba(47,123,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,123,255,.13) 1px, transparent 1px);
  opacity: .42;
}

:root:not([data-theme="dark"]) .gaitDash .gdStageArcs{
  border-color: rgba(47,123,255,.22);
  filter: drop-shadow(0 0 10px rgba(47,123,255,.12));
}

:root:not([data-theme="dark"]) .gaitDash .gdStageArcs::before,
:root:not([data-theme="dark"]) .gaitDash .gdStageArcs::after{
  border-color: rgba(47,123,255,.12);
}

:root:not([data-theme="dark"]) .gaitDash .gdStagePhase{
  color: #0f172a;
  text-shadow: none;
}

:root:not([data-theme="dark"]) .gaitDash .gdStageGlow{
  opacity: .58;
  background:
    radial-gradient(circle at 59% 47%, rgba(47,123,255,.18), transparent 20%),
    radial-gradient(circle at 62% 85%, rgba(56,189,248,.42), transparent 22%);
}

:root:not([data-theme="dark"]) .gaitDash .gdArrowTag{
  color: #244061;
  text-shadow: none;
}

:root:not([data-theme="dark"]) .gaitDash .gdArrowSub{
  color: #405a78;
}

:root:not([data-theme="dark"]) .gaitDash .gdCallout{
  background: rgba(255,255,255,.78);
  border-color: rgba(47,123,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 24px rgba(35,75,130,.12);
  color: #0f172a;
}

:root:not([data-theme="dark"]) .gaitDash .gdCalloutIcon{
  background: rgba(219,234,254,.86);
  border-color: rgba(47,123,255,.16);
}

:root:not([data-theme="dark"]) .gaitDash .gdCalloutText strong{
  color: #0f172a;
}

:root:not([data-theme="dark"]) .gaitDash .gdCalloutText span{
  color: #4d6381;
}

:root:not([data-theme="dark"]) .gaitDash .gdLeaderLine{
  stroke: rgba(47,123,255,.42);
}

.gaitDash .gdStage[data-phase="0"] .gdImageStack,
.gaitDash .gdStage[data-phase="1"] .gdImageStack,
.gaitDash .gdStage[data-phase="2"] .gdImageStack,
.gaitDash .gdStage[data-phase="5"] .gdImageStack{
  transform: translateX(18%);
}

.gaitDash .gdStage[data-phase="4"] .gdImageStack{
  transform: translateX(22%);
}

.gaitDash .gdThinkIcon svg,
.gaitDash .gdGlanceIcon svg{
  width: 22px;
  height: 22px;
}

.gaitDash .gdLeaderDot,
.gaitDash .gdLeaderHalo{
  display: none;
}

.gaitDash .gdLeaderLine{
  opacity: .38;
  stroke-width: 1;
  stroke-dasharray: 2 5;
}

/* Final density pass: reference-like compact cockpit proportions. */
.gaitDash{
  padding: clamp(12px, 1.35vw, 18px);
}

.gaitDash .gdHeader{
  margin-bottom: 10px;
}

.gaitDash .gdHook{
  line-height: 1.34;
}

.gaitDash .gdCockpit{
  padding: 12px;
  border-radius: 13px;
}

.gaitDash .gdCycle{
  min-height: 82px;
  margin-bottom: 10px;
  padding: 8px 18px 6px;
}

.gaitDash .gdTimeline{
  min-height: 58px;
}

.gaitDash .gdLine{
  top: 24px;
}

.gaitDash .gdNodePct{
  font-size: .76rem;
}

.gaitDash .gdNodeDot{
  width: 16px;
  height: 16px;
}

.gaitDash .gdNodeName{
  font-size: .72rem;
}

.gaitDash .gdNodeAction svg{
  width: 10px;
  height: 10px;
}

.gaitDash .gdGrid{
  grid-template-columns: minmax(500px, 1.28fr) minmax(250px, .68fr) minmax(380px, .96fr);
  margin-bottom: 9px;
}

.gaitDash .gdStage{
  min-height: 378px;
}

.gaitDash .gdPanel{
  padding: 14px 14px 10px;
}

.gaitDash .gdPanelHead{
  margin-bottom: 8px;
}

.gaitDash .gdThinkList{
  gap: 8px;
}

.gaitDash .gdThink{
  min-height: 55px;
  padding: 8px 10px;
  gap: 8px;
}

.gaitDash .gdThinkIcon{
  width: 28px;
  height: 28px;
}

.gaitDash .gdThinkIcon svg{
  width: 20px;
  height: 20px;
}

.gaitDash .gdThinkTitle{
  font-size: .74rem;
}

.gaitDash .gdThinkText{
  font-size: .65rem;
  line-height: 1.24;
}

.gaitDash .gdSignalList{
  gap: 8px;
}

.gaitDash .gdSignal{
  padding: 7px 9px 5px;
}

.gaitDash .gdSignalPlot,
.gaitDash .gdSignalSvg{
  height: 54px;
}

.gaitDash .gdSignalAxis{
  padding-top: 2px;
}

.gaitDash .gdCallout{
  width: 31%;
  min-height: 38px;
  padding: 6px 8px;
}

.gaitDash .gdCalloutIcon{
  width: 24px;
  height: 24px;
}

.gaitDash .gdCalloutText strong{
  font-size: .62rem;
}

.gaitDash .gdCalloutText span{
  font-size: .58rem;
}

.gaitDash .gdArrowTag{
  min-width: 96px;
  max-width: 124px;
  padding: 2px 5px;
  transform: translate(-50%, -50%);
}

.gaitDash .gdArrowTag[data-anchor="right"]{
  transform: translate(-100%, -50%);
}

.gaitDash .gdArrowTag[data-anchor="left"]{
  transform: translate(0, -50%);
}

.gaitDash .gdArrowTag[data-anchor="above"]{
  transform: translate(-50%, -100%);
}

.gaitDash .gdArrowLabel{
  font-size: .66rem;
}

.gaitDash .gdArrowSub{
  font-size: .58rem;
}

.gaitDash .gdSummary{
  grid-template-columns: minmax(0, 2.28fr) minmax(270px, .82fr);
  gap: 9px;
}

.gaitDash .gdGlance{
  gap: 5px;
}

.gaitDash .gdGlanceGrid{
  min-height: 74px;
}

.gaitDash .gdGlanceCard{
  grid-template-columns: 34px minmax(0,1fr);
  padding: 8px 10px;
  gap: 7px;
}

.gaitDash .gdGlanceIcon{
  width: 30px;
  height: 30px;
}

.gaitDash .gdGlanceIcon svg{
  width: 19px;
  height: 19px;
}

.gaitDash .gdGlanceTitle{
  font-size: .68rem;
}

.gaitDash .gdGlanceText{
  font-size: .6rem;
  line-height: 1.26;
}

.gaitDash .gdTakeaway{
  min-height: 94px;
  padding: 12px 14px;
}

.gaitDash .gdTakeawayLabel{
  margin-bottom: 6px;
  font-size: .64rem;
}

.gaitDash .gdTakeawayText{
  font-size: .78rem;
  line-height: 1.36;
}

.gaitDash .gdFoot{
  margin-top: 8px;
  font-size: .72rem;
}

@media (max-width: 1180px){
  .gaitDash .gdGrid{
    grid-template-columns: minmax(0, 1fr);
  }
  .gaitDash .gdStage{
    min-height: 380px;
  }
}

@media (max-width: 560px){
  .gaitDash .gdStage{
    min-height: 340px;
  }
  .gaitDash .gdTimeline{
    min-height: 74px;
  }
  .gaitDash .gdSignalPlot,
  .gaitDash .gdSignalSvg{
    height: 54px;
  }
}

@media (min-width: 1181px){
  .gaitDash .gdImageStack{
    inset: -32% -8% -4%;
    transform: translateX(13%);
  }

  .gaitDash .gdImg{
    width: min(142%, 820px);
    height: min(166%, 760px);
  }

  .gaitDash .gdStage[data-phase="0"] .gdImageStack,
  .gaitDash .gdStage[data-phase="1"] .gdImageStack,
  .gaitDash .gdStage[data-phase="2"] .gdImageStack,
  .gaitDash .gdStage[data-phase="5"] .gdImageStack{
    transform: translateX(16%);
  }

  .gaitDash .gdStage[data-phase="4"] .gdImageStack{
    transform: translateX(20%);
  }
}

/* Readability pass: keep the compact layout, but match the site's text scale. */
.gaitDash .gdHook{
  font-size: .9rem;
}

.gaitDash .gdHelper{
  font-size: .82rem;
}

.gaitDash .gdEyebrow{
  font-size: .7rem;
}

.gaitDash .gdCycleSub{
  font-size: .8rem;
}

.gaitDash .gdNodePct{
  font-size: .8rem;
}

.gaitDash .gdNodeName{
  font-size: .76rem;
}

.gaitDash .gdStagePhase{
  font-size: 1.08rem;
}

.gaitDash .gdStageRange{
  font-size: .82rem;
}

.gaitDash .gdCalloutText strong{
  font-size: .68rem;
}

.gaitDash .gdCalloutText span{
  font-size: .63rem;
}

.gaitDash .gdArrowLabel{
  font-size: .7rem;
}

.gaitDash .gdArrowSub{
  font-size: .62rem;
}

.gaitDash .gdThinkTitle{
  font-size: .8rem;
}

.gaitDash .gdThinkText{
  font-size: .7rem;
}

.gaitDash .gdSignalName{
  font-size: .72rem;
}

.gaitDash .gdSignalUnit{
  font-size: .62rem;
}

.gaitDash .gdSignalAxis{
  font-size: .66rem;
}

.gaitDash .gdGlanceTitle{
  font-size: .72rem;
}

.gaitDash .gdGlanceText{
  font-size: .66rem;
}

.gaitDash .gdTakeawayLabel{
  font-size: .68rem;
}

.gaitDash .gdTakeawayText{
  font-size: .84rem;
}

.gaitDash .gdFoot{
  font-size: .76rem;
}

/* Balanced fill pass: use the full cockpit height with readable site-scale text. */
.gaitDash .gdGrid{
  grid-template-columns: minmax(470px, 1.24fr) minmax(270px, .78fr) minmax(360px, .98fr);
}

.gaitDash .gdStage,
.gaitDash .gdThinkingPanel,
.gaitDash .gdSignalsPanel{
  min-height: 430px;
}

.gaitDash .gdThinkingPanel{
  display: flex;
  flex-direction: column;
}

.gaitDash .gdThinkList{
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
}

.gaitDash .gdThink{
  flex: 1 1 0;
  min-height: 74px;
  align-items: center;
  padding: 11px 13px;
  gap: 12px;
}

.gaitDash .gdThinkChevron{
  flex: 0 0 12px;
  margin: -4px 0;
}

.gaitDash .gdThinkIcon{
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.gaitDash .gdThinkIcon svg{
  width: 25px;
  height: 25px;
}

.gaitDash .gdThinkTitle{
  font-size: .92rem;
  line-height: 1.18;
}

.gaitDash .gdThinkText{
  margin-top: 4px;
  font-size: .8rem;
  line-height: 1.34;
}

.gaitDash .gdSignalsPanel{
  display: flex;
  flex-direction: column;
}

.gaitDash .gdSignalList{
  flex: 1 1 auto;
  gap: 11px;
}

.gaitDash .gdSignal{
  flex: 1 1 0;
  padding: 9px 11px 7px;
}

.gaitDash .gdSignalName{
  font-size: .82rem;
}

.gaitDash .gdSignalUnit{
  font-size: .68rem;
}

.gaitDash .gdSignalPlot,
.gaitDash .gdSignalSvg{
  height: 68px;
}

.gaitDash .gdSignalAxis{
  font-size: .7rem;
}

.gaitDash .gdCalloutText strong{
  font-size: .72rem;
}

.gaitDash .gdCalloutText span{
  font-size: .66rem;
}

.gaitDash .gdGlanceText{
  font-size: .7rem;
  line-height: 1.34;
}

.gaitDash .gdTakeawayText{
  font-size: .9rem;
  line-height: 1.42;
}

@media (max-width: 1180px){
  .gaitDash .gdStage,
  .gaitDash .gdThinkingPanel,
  .gaitDash .gdSignalsPanel{
    min-height: auto;
  }
  .gaitDash .gdStage{
    min-height: 390px;
  }
  .gaitDash .gdThink{
    flex: none;
  }
  .gaitDash .gdSignalList{
    flex: none;
  }
  .gaitDash .gdSignal{
    flex: none;
  }
}

@media (max-width: 560px){
  .gaitDash .gdStage{
    min-height: 340px;
  }
  .gaitDash .gdThink{
    min-height: 68px;
  }
  .gaitDash .gdSignalPlot,
  .gaitDash .gdSignalSvg{
    height: 56px;
  }
}

/* Final typography lift: readable dashboard text without changing site width. */
.gaitDash .gdHook{
  font-size: .96rem;
}

.gaitDash .gdHelper{
  font-size: .88rem;
}

.gaitDash .gdEyebrow{
  font-size: .76rem;
}

.gaitDash .gdCycleSub{
  font-size: .86rem;
}

.gaitDash .gdNodePct{
  font-size: .86rem;
}

.gaitDash .gdNodeName{
  font-size: .82rem;
}

.gaitDash .gdCalloutText strong{
  font-size: .78rem;
}

.gaitDash .gdCalloutText span{
  font-size: .72rem;
}

.gaitDash .gdArrowLabel{
  font-size: .76rem;
}

.gaitDash .gdArrowSub{
  font-size: .68rem;
}

.gaitDash .gdThinkTitle{
  font-size: .98rem;
}

.gaitDash .gdThinkText{
  font-size: .86rem;
  line-height: 1.36;
}

.gaitDash .gdSignalName{
  font-size: .86rem;
}

.gaitDash .gdSignalUnit{
  font-size: .72rem;
}

.gaitDash .gdSignalAxis{
  font-size: .74rem;
}

.gaitDash .gdGlanceTitle{
  font-size: .78rem;
}

.gaitDash .gdGlanceText{
  font-size: .76rem;
  line-height: 1.34;
}

.gaitDash .gdTakeawayLabel{
  font-size: .74rem;
}

.gaitDash .gdTakeawayText{
  font-size: .98rem;
  line-height: 1.42;
}

.gaitDash .gdFoot{
  font-size: .82rem;
}

.gaitDash .gdArrowTag{
  min-width: 104px;
  max-width: 132px;
  padding: 3px 5px;
  border-radius: 7px;
  background: rgba(248,251,255,.66);
  border: 1px solid rgba(47,123,255,.13);
  backdrop-filter: blur(6px);
}

:root[data-theme="dark"] .gaitDash .gdArrowTag{
  background: rgba(3,13,26,.48);
  border-color: rgba(96,165,250,.18);
}

.gaitDash .gdArrowLabel{
  font-size: .7rem;
}

.gaitDash .gdArrowSub{
  font-size: .62rem;
}

.gaitDash .gdCallout{
  width: 32%;
}

.gaitDash .gdLeaderLine{
  stroke-dasharray: 2 4;
}

/* Compact dashboard layout pass: closer to the reference density. */
.gaitDash{
  padding: clamp(14px, 1.55vw, 22px);
}

.gaitDash .gdHeader{
  margin-bottom: 12px;
}

.gaitDash .gdTitle{
  margin-bottom: 6px;
}

.gaitDash .gdHook{
  font-size: .86rem;
  line-height: 1.42;
}

.gaitDash .gdHelper{
  margin-top: 0;
  max-width: 230px;
  font-size: .78rem;
  line-height: 1.24;
}

.gaitDash .gdHelperIcon svg{
  width: 25px;
  height: 25px;
}

.gaitDash .gdCockpit{
  padding: 14px;
  border-radius: 14px;
}

.gaitDash .gdCycle{
  grid-template-columns: 150px minmax(0,1fr);
  gap: 18px;
  padding: 10px 18px 8px;
  margin-bottom: 12px;
  border: 1px solid rgba(37,99,235,.14);
  border-radius: 12px;
}

:root[data-theme="dark"] .gaitDash .gdCycle{
  border-color: rgba(96,165,250,.22);
}

.gaitDash .gdCycleSub{
  font-size: .76rem;
}

.gaitDash .gdTimeline{
  min-height: 66px;
  align-items: start;
}

.gaitDash .gdLine{
  top: 27px;
}

.gaitDash .gdNodePct{
  font-size: .8rem;
}

.gaitDash .gdNodeDot{
  width: 17px;
  height: 17px;
}

.gaitDash .gdNodeAction{
  height: 12px;
  margin-top: 0;
}

.gaitDash .gdNodeAction svg{
  width: 11px;
  height: 11px;
}

.gaitDash .gdNodeName{
  font-size: .76rem;
  line-height: 1.12;
}

.gaitDash .gdGrid{
  grid-template-columns: minmax(510px, 1.28fr) minmax(265px, .72fr) minmax(390px, .94fr);
  margin-bottom: 12px;
  border-radius: 12px;
}

.gaitDash .gdStage{
  min-height: 392px;
}

.gaitDash .gdPanel{
  padding: 16px 16px 12px;
}

.gaitDash .gdPanelHead{
  margin-bottom: 10px;
}

.gaitDash .gdEyebrow{
  font-size: .66rem;
}

.gaitDash .gdStageBadge{
  top: 20px;
  left: 20px;
}

.gaitDash .gdStagePhase{
  font-size: 1.02rem;
}

.gaitDash .gdStageRange{
  font-size: .78rem;
}

.gaitDash .gdImageStack{
  inset: -28% -5% -1%;
}

.gaitDash .gdImg{
  width: min(128%, 700px);
  height: min(148%, 650px);
}

.gaitDash .gdCallout{
  width: 35%;
  min-height: 40px;
  padding: 7px 9px;
  gap: 7px;
}

.gaitDash .gdCalloutIcon{
  width: 25px;
  height: 25px;
}

.gaitDash .gdCalloutIcon svg{
  width: 14px;
  height: 14px;
}

.gaitDash .gdCalloutText strong{
  font-size: .64rem;
}

.gaitDash .gdCalloutText span{
  font-size: .6rem;
}

.gaitDash .gdThinkList{
  gap: 9px;
}

.gaitDash .gdThink{
  min-height: 58px;
  padding: 9px 11px;
  gap: 9px;
}

.gaitDash .gdThinkIcon{
  width: 30px;
  height: 30px;
}

.gaitDash .gdThinkIcon svg{
  width: 20px;
  height: 20px;
}

.gaitDash .gdThinkTitle{
  font-size: .78rem;
}

.gaitDash .gdThinkText{
  font-size: .68rem;
  line-height: 1.28;
}

.gaitDash .gdSignalsPanel{
  display: flex;
  flex-direction: column;
}

.gaitDash .gdSignalList{
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
}

.gaitDash .gdSignal{
  flex: 1 1 0;
  min-height: 0;
  padding: 8px 9px 6px;
}

.gaitDash .gdSignalHead{
  margin-bottom: 4px;
}

.gaitDash .gdSignalName{
  font-size: .67rem;
}

.gaitDash .gdSignalUnit{
  font-size: .58rem;
}

.gaitDash .gdSignalPlot{
  height: 58px;
}

.gaitDash .gdSignalSvg{
  height: 58px;
}

.gaitDash .gdSignalAxis{
  padding-top: 3px;
  font-size: .62rem;
}

.gaitDash .gdSummary{
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, .95fr);
  gap: 12px;
}

.gaitDash .gdGlance{
  gap: 7px;
}

.gaitDash .gdGlance > .gdEyebrow{
  margin-left: 4px;
}

.gaitDash .gdGlanceGrid{
  min-height: 86px;
  border-radius: 10px;
}

.gaitDash .gdGlanceCard{
  grid-template-columns: 40px minmax(0,1fr);
  padding: 10px 12px;
  gap: 8px;
}

.gaitDash .gdGlanceIcon{
  width: 34px;
  height: 34px;
}

.gaitDash .gdGlanceIcon svg{
  width: 20px;
  height: 20px;
}

.gaitDash .gdGlanceTitle{
  font-size: .72rem;
}

.gaitDash .gdGlanceText{
  font-size: .64rem;
  line-height: 1.32;
}

.gaitDash .gdTakeaway{
  min-height: 102px;
  padding: 14px 16px;
  border-radius: 10px;
}

.gaitDash .gdTakeawayLabel{
  font-size: .68rem;
  margin-bottom: 8px;
}

.gaitDash .gdTakeawayText{
  font-size: .82rem;
  line-height: 1.42;
}

.gaitDash .gdFoot{
  margin-top: 10px;
  font-size: .76rem;
}

@media (max-width: 1180px){
  .gaitDash .gdGrid{
    grid-template-columns: minmax(0, 1fr);
  }
  .gaitDash .gdStage{
    min-height: 390px;
  }
  .gaitDash .gdSignalsPanel,
  .gaitDash .gdThinkingPanel{
    min-height: auto;
  }
  .gaitDash .gdSignalsPanel{
    display: block;
  }
  .gaitDash .gdSignalList{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
  }
  .gaitDash .gdSignal{
    flex: none;
    min-height: 118px;
  }
  .gaitDash .gdSignalPlot,
  .gaitDash .gdSignalSvg{
    height: 62px;
  }
}

@media (max-width: 560px){
  .gaitDash .gdCockpit{
    padding: 12px;
  }
  .gaitDash .gdCycle{
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .gaitDash .gdTimeline{
    min-height: 76px;
  }
  .gaitDash .gdStage{
    min-height: 350px;
  }
  .gaitDash .gdSignalList{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .gaitDash .gdSignal{
    min-height: 94px;
  }
  .gaitDash .gdSignalPlot,
  .gaitDash .gdSignalSvg{
    height: 54px;
  }
  .gaitDash .gdSummary{
    grid-template-columns: 1fr;
  }
}

.gaitDash .gdCallout{
  width: 32%;
}

.gaitDash .gdArrowTag{
  min-width: 104px;
  max-width: 132px;
  padding: 3px 5px;
  border-radius: 7px;
  background: rgba(248,251,255,.66);
  border: 1px solid rgba(47,123,255,.13);
  backdrop-filter: blur(6px);
}

:root[data-theme="dark"] .gaitDash .gdArrowTag{
  background: rgba(3,13,26,.48);
  border-color: rgba(96,165,250,.18);
}

.gaitDash .gdArrowLabel{
  font-size: .7rem;
}

.gaitDash .gdArrowSub{
  font-size: .62rem;
}

.gaitDash .gdStage[data-phase="0"] .gdImageStack,
.gaitDash .gdStage[data-phase="1"] .gdImageStack,
.gaitDash .gdStage[data-phase="2"] .gdImageStack,
.gaitDash .gdStage[data-phase="5"] .gdImageStack{
  transform: translateX(18%);
}

.gaitDash .gdStage[data-phase="4"] .gdImageStack{
  transform: translateX(22%);
}

.gaitDash .gdSignalGuideLine{
  stroke: rgba(69,91,125,.12);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

:root[data-theme="dark"] .gaitDash .gdSignalGuideLine{
  stroke: rgba(180,210,255,.12);
}

.gaitDash .gdSignalGridLine{
  stroke: rgba(47,123,255,.14);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

:root[data-theme="dark"] .gaitDash .gdSignalGridLine{
  stroke: rgba(96,165,250,.18);
}

.gaitDash .gdSignalBand{
  fill: rgba(47,123,255,.13) !important;
  filter: drop-shadow(0 0 9px rgba(47,123,255,.18)) !important;
}

:root[data-theme="dark"] .gaitDash .gdSignalBand{
  fill: rgba(47,123,255,.23) !important;
}

.gaitDash .gdSignalGlow{
  stroke-width: 5.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .16;
  filter: blur(.7px);
  vector-effect: non-scaling-stroke;
}

.gaitDash .gdSignalTrace{
  stroke-width: 2.35 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none !important;
}

.gaitDash .gdSignalNoContact .gdSignalGlow{
  opacity: .05 !important;
}

.gaitDash .gdSignalNoContact .gdSignalTrace{
  opacity: .24 !important;
}

.gaitDash .gdSignalMarker{
  width: 10px !important;
  height: 10px !important;
  border: 2px solid #fff !important;
  transform: translate(-50%, -50%) !important;
}

/* True final type scale for the gait dashboard. Keep this at EOF. */
.gaitDash .gdHook{ font-size: 1rem !important; }
.gaitDash .gdHelper{ font-size: .92rem !important; }
.gaitDash .gdEyebrow{ font-size: .8rem !important; }
.gaitDash .gdCycleSub{ font-size: .9rem !important; white-space: nowrap !important; }
.gaitDash .gdNodePct{ font-size: .9rem !important; }
.gaitDash .gdNodeName{ font-size: .86rem !important; }
.gaitDash .gdNodeAction{
  width: 36px !important;
  height: 25px !important;
  margin-top: 1px !important;
  color: #253f60 !important;
  border: 1px solid rgba(80,116,162,.18);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(231,239,252,.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 10px rgba(37,99,235,.08);
}
.gaitDash .gdNodeAction svg{
  width: 25px !important;
  height: 20px !important;
  overflow: visible;
}
.gaitDash .gdNodeActive .gdNodeAction{
  color: var(--gd-accent) !important;
  border-color: rgba(47,123,255,.42);
  background:
    radial-gradient(circle at 50% 20%, rgba(111,179,255,.34), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(219,235,255,.86));
  box-shadow: 0 0 0 3px rgba(47,123,255,.12), 0 8px 18px rgba(47,123,255,.22);
}
:root[data-theme="dark"] .gaitDash .gdNodeAction{
  color: #d3e3f7 !important;
  border-color: rgba(145,177,220,.22);
  background:
    linear-gradient(180deg, rgba(26,43,68,.84), rgba(8,20,38,.72));
  box-shadow: inset 0 1px 0 rgba(180,210,255,.12), 0 4px 12px rgba(0,0,0,.24);
}
:root[data-theme="dark"] .gaitDash .gdNodeActive .gdNodeAction{
  color: #6db6ff !important;
  border-color: rgba(96,165,250,.52);
  background:
    radial-gradient(circle at 50% 20%, rgba(76,154,255,.36), transparent 60%),
    linear-gradient(180deg, rgba(20,50,86,.9), rgba(7,20,40,.86));
  box-shadow: 0 0 0 3px rgba(47,123,255,.18), 0 0 18px rgba(47,123,255,.36);
}
.gaitDash .gdStagePhase{ font-size: 1.18rem !important; }
.gaitDash .gdStageRange{ font-size: .9rem !important; }
.gaitDash .gdCalloutText strong{ font-size: .84rem !important; }
.gaitDash .gdCalloutText span{ font-size: .76rem !important; }
.gaitDash .gdArrowLabel{ font-size: .78rem !important; }
.gaitDash .gdArrowSub{ font-size: .7rem !important; }
.gaitDash .gdThinkTitle{ font-size: 1.04rem !important; }
.gaitDash .gdThinkText{ font-size: .98rem !important; line-height: 1.34 !important; }
.gaitDash .gdSignalName{ font-size: .94rem !important; }
.gaitDash .gdSignalUnit{ font-size: .78rem !important; }
.gaitDash .gdSignalAxis{ font-size: .8rem !important; }
.gaitDash .gdGlanceTitle{ font-size: .88rem !important; }
.gaitDash .gdGlanceText{ font-size: .88rem !important; line-height: 1.32 !important; }
.gaitDash .gdTakeawayLabel{ font-size: .82rem !important; }
.gaitDash .gdTakeawayText{ font-size: 1.04rem !important; line-height: 1.42 !important; }
.gaitDash .gdFoot{ font-size: .88rem !important; }

@media (max-width: 560px){
  .gaitDash .gdCallout{
    width: min(44%, 148px) !important;
    grid-template-columns: 24px minmax(0,1fr) !important;
    padding: 6px 7px !important;
  }

  .gaitDash .gdCalloutIcon{
    width: 24px !important;
    height: 24px !important;
  }

  .gaitDash .gdNodeAction{
    width: 30px !important;
    height: 21px !important;
  }

  .gaitDash .gdNodeAction svg{
    width: 21px !important;
    height: 17px !important;
  }
}

/* --- Hidden Engineering: dedicated mobile layout (keep at EOF) ------------
   Below 640px the cockpit reflows: the six-phase timeline becomes a 3x2 grid
   (nothing hidden behind a horizontal scroll), the stage gives the anatomy the
   full viewport, and the three sensor callouts move into a strip under the
   stage instead of crowding on top of the leg. The strip markup is injected by
   step-engineering.js and mirrors the stage chips. */
.gdCalloutStrip{ display: none; }

/* Reserve two name lines on timeline nodes: the bold active state can rewrap
   a long name ("Next Heel Strike") and change the timeline's height, which
   would shift the page on every autoplay tick. */
.gaitDash .gdNodeName{ min-height: 2.4em; }

/* Tablets (641-820px): the label column + 92px flex nodes overflow and hide
   phases behind a horizontal scroll. Stack the label and show all six phases
   as an even 6-column grid instead. */
@media (min-width: 641px) and (max-width: 820px){
  .gaitDash .gdCycle{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 16px 10px;
  }
  .gaitDash .gdCycleLabel{
    flex-direction: row;
    align-items: baseline;
    column-gap: 12px;
  }
  .gaitDash .gdTimeline{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
  .gaitDash .gdNode{
    flex: none;
    min-width: 0;
  }
}

@media (max-width: 640px){
  .gaitDash .gdCockpit{
    padding: 10px 10px 12px;
  }

  /* Gait-cycle timeline: 3x2 grid of tappable phase chips */
  .gaitDash .gdCycle{
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    margin-bottom: 10px;
    padding: 12px 10px 10px;
  }
  .gaitDash .gdCycleLabel{
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 10px;
    flex-wrap: wrap;
  }
  .gaitDash .gdCycleSub{
    font-size: .78rem !important;
  }
  .gaitDash .gdTimeline{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    min-height: 0;
    overflow: visible;
    padding-bottom: 0;
  }
  .gaitDash .gdLine{ display: none; }
  .gaitDash .gdNode{
    flex: none;
    min-width: 0;
    gap: 4px;
    padding: 9px 4px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
  }
  .gaitDash .gdNodeActive{
    background: rgba(47,123,255,.08);
    border-color: rgba(47,123,255,.32);
    box-shadow: 0 6px 16px rgba(47,123,255,.14);
  }
  :root[data-theme="dark"] .gaitDash .gdNodeActive{
    background: rgba(47,140,255,.12);
    border-color: rgba(96,165,250,.42);
    box-shadow: 0 0 18px rgba(47,140,255,.22);
  }
  .gaitDash .gdNodePct{ font-size: .78rem !important; }
  .gaitDash .gdNodeName{
    font-size: .7rem !important;
    line-height: 1.16;
    max-width: none;
  }

  /* Stage: anatomy gets the full viewport — overlay chips and leaders move out */
  .gaitDash .gdStage{
    min-height: 330px;
  }
  .gaitDash .gdCallouts,
  .gaitDash .gdLeaders,
  .gaitDash .gdProtractor{
    display: none;
  }
  .gaitDash .gdStageBadge{
    top: 14px;
    left: 14px;
  }
  .gaitDash .gdStagePhase{ font-size: 1rem !important; }
  .gaitDash .gdStageRange{ font-size: .8rem !important; }
  .gaitDash .gdArrowTag{
    min-width: 92px;
    max-width: 118px;
  }
  .gaitDash .gdArrowLabel{ font-size: .68rem !important; }
  .gaitDash .gdArrowSub{ font-size: .6rem !important; }

  /* Propulsion arrow: the <marker>-based arrowhead (gdArrowMain) balloons in
     Safari, which sizes markers by strokeWidth in the stretched overlay space
     and ignores non-scaling-stroke. Swap to the JS-computed filled "ribbon"
     arrow (a plain <path fill>) — its size is fixed geometry, so it renders
     identically across browsers. */
  .gaitDash .gdArrowGlow,
  .gaitDash .gdArrowMain{
    display: none;
  }
  .gaitDash .gdArrowFill{
    display: block;
    fill: url(#gdArrowGrad);
    opacity: .9;
    filter: drop-shadow(0 0 6px rgba(56,189,248,.5));
  }
  .gaitDash .gdArrowCore{
    display: block;
  }

  /* Sensor callout strip below the stage */
  .gaitDash .gdCalloutStrip{
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--gd-border);
  }
  .gaitDash .gdCalloutStrip .gdCallout{
    position: static;
    display: flex;
    align-items: center;
    width: auto !important;
    /* release the max-width:150px cap from the legacy <=460px overlay rules,
       which otherwise pins these full-width strip rows to a narrow 150px */
    max-width: none !important;
    min-height: 0;
    transform: none;
    gap: 10px;
    padding: 9px 12px !important;
    border-radius: 11px;
    box-shadow: none;
    backdrop-filter: none;
  }
  .gaitDash .gdCalloutStrip .gdCalloutIcon{
    width: 30px !important;
    height: 30px !important;
  }
  .gaitDash .gdCalloutStrip .gdCalloutIcon svg{
    width: 17px;
    height: 17px;
  }
}

/* Hidden Engineering vector leg clarity: keep the traced SVG anatomy sharp.
   Glow and contact softness live on separate layers behind the leg. */
.gaitDash{
  --gd-img-filter: none !important;
}

.gaitDash .gdImageStack{
  z-index: 5;
}

.gaitDash .gdImg{
  display: block;
  object-fit: contain;
  object-position: 50% 70%;
  image-rendering: auto;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 0;
  transition: opacity 180ms ease, transform 220ms ease;
}

.gaitDash .gdImg.gdImgActive{
  opacity: 1;
}

.gaitDash .gdStageGlow,
.gaitDash .gdFootGlow{
  z-index: 4;
}

.gaitDash .gdFootGlow{
  background:
    radial-gradient(ellipse at center, rgba(56,189,248,.40), rgba(47,123,255,.14) 44%, transparent 72%) !important;
  filter: blur(9px) !important;
}

.gaitDash .gdFootGlow::before,
.gaitDash .gdFootGlow::after,
.gaitDash .gdFootGlow span,
.gaitDash .gdFootGlow i{
  display: none !important;
}

.gaitDash .gdStage.gdAir .gdFootGlow{
  opacity: 0 !important;
}

/* =========================================================================
   Projects listing — premium card grid
   Distinct, elevated tiles (vs. the faint homepage separation) with card
   highlights. Scoped to .projectsListGrid so the homepage grid is untouched.
   ========================================================================= */
.projectsListGrid{
  gap: 24px;
}

.projectsListGrid .selectedWorkCard{
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(2,6,23,0.04), 0 16px 36px rgba(2,6,23,0.09);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}

.projectsListGrid .selectedWorkCard:hover{
  transform: translateY(-6px);
  border-color: rgba(43,108,255,0.32);
  box-shadow: 0 2px 6px rgba(2,6,23,0.06), 0 30px 60px rgba(2,6,23,0.17);
}

/* Media: clean white panel that matches the (white-background) cover images
   so the framed image blends into the panel instead of sitting as a rectangle
   on a tinted wash. Photos simply get a neutral matte. Gentle hover zoom. */
.projectsListGrid .workCardMedia{
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.projectsListGrid .workCardMedia img{
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.projectsListGrid .selectedWorkCard:hover .workCardMedia img{
  transform: scale(1.035);
}

/* Per-card highlights — the "what makes this project notable" lines. */
.workHighlights{
  list-style: none;
  margin: 3px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.workHighlights li{
  position: relative;
  padding-left: 17px;
  font-size: .82rem;
  line-height: 1.42;
  color: var(--muted);
}

.workHighlights li::before{
  content: "";
  position: absolute;
  left: 1px;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(135deg, #2b6cff, #00c2ff);
  transform: rotate(45deg);
}

:root[data-theme="dark"] .projectsListGrid .selectedWorkCard{
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 20px 44px rgba(0,0,0,0.5);
}

:root[data-theme="dark"] .projectsListGrid .selectedWorkCard:hover{
  border-color: rgba(77,143,255,0.42);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 34px 66px rgba(0,0,0,0.6);
}

@media (max-width: 640px){
  .projectsListGrid{ gap: 16px; }
}

/* =========================================================================
   Project detail pages — premium shell (scoped to .detailMain so the
   homepage and listing are untouched). Upgrades the hero header, the main
   card surface, media framing, section headings, split panels, skill
   tokens, and rules. ShiftOS keeps its bespoke inner sections but inherits
   this shell.
   ========================================================================= */

/* Tighten the reading column so content doesn't sprawl across the full 1340px
   container. ShiftOS opts out (.detailWide) to keep its 3-column sections wide. */
.detailMain > .section{
  max-width: 960px;
  margin-inline: auto;
}

.detailMain.detailWide > .section{
  max-width: none;
}

/* Hero header: category becomes an eyebrow tag; title larger; hairline below. */
.detailMain > .section > .sectionHead,
.detailMain .section > .sectionHead{
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.detailMain .sectionHeadAward{
  align-items: flex-start;
}

.detailMain .sectionHead h1{
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.detailMain .sectionHead .small{
  flex: none;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--primaryDark);
  background: rgba(43,108,255,0.08);
  border: 1px solid rgba(43,108,255,0.16);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}

/* Main content surface */
.detailMain .card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(2,6,23,0.04), 0 20px 50px rgba(2,6,23,0.08);
  padding: clamp(20px, 3vw, 34px);
}

:root[data-theme="dark"] .detailMain .card{
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 24px 54px rgba(0,0,0,0.5);
}

/* Narrative fills the (now tighter) column instead of hanging narrow-left. */
.detailMain .card > .projDesc,
.detailMain .card > p.projDesc{
  max-width: none;
  line-height: 1.72;
  font-size: 1.005rem;
}

.detailMain .projList li{ line-height: 1.55; }

/* Section headings inside the narrative get a small gradient accent bar.
   Scoped to the u-heading-* classes, which never appear on ShiftOS titles. */
.detailMain h3.u-heading-tight,
.detailMain h3.u-heading-flush{
  position: relative;
  padding-left: 14px;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

.detailMain h3.u-heading-tight::before,
.detailMain h3.u-heading-flush::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2b6cff, #00c2ff);
}

/* Premium hairline rules between narrative sections */
.detailMain .card hr{
  border: 0;
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
}

/* Media: unify the two figure components (.mediaItem / .mediaFigure) into one
   consistent framed treatment. Figures size to their natural aspect (no forced
   16:9 letterbox) and align to the top so a 2-up row stays tight. */
.detailMain .mediaGrid{
  align-items: start;
  gap: 18px;
}

.detailMain .mediaItem,
.detailMain .mediaFigure{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  padding: 12px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(0,194,255,0.05), transparent 60%),
    linear-gradient(135deg, rgba(43,108,255,0.04), rgba(0,194,255,0.02));
  box-shadow: 0 8px 22px rgba(2,6,23,0.05);
}

.detailMain .mediaItem img,
.detailMain .mediaFigure img{
  aspect-ratio: auto;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  padding: 0;
  border-radius: 10px;
}

.detailMain .mediaCaption{
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  padding: 10px 4px 2px;
}

/* Split panels become filled premium cards */
.detailMain .split{
  gap: 18px;
}

.detailMain .card--flat{
  background: rgba(15,23,42,0.025);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: none;
  padding: 18px 20px;
}

:root[data-theme="dark"] .detailMain .card--flat{
  background: rgba(255,255,255,0.03);
}

/* Skill tokens: refined outline chips (consistent, premium, not heavy) */
.detailMain .pills{
  gap: 8px;
}

.detailMain .pills .pill{
  color: var(--primaryDark);
  background: rgba(43,108,255,0.06);
  border: 1px solid rgba(43,108,255,0.16);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  transition: background .2s ease, border-color .2s ease;
}

.detailMain .pills .pill:hover{
  background: rgba(43,108,255,0.12);
  border-color: rgba(43,108,255,0.3);
}

/* Footer nav breathing room */
.detailMain .affil{ margin-top: 16px; }

/* =========================================================================
   Project detail — "Case Study" layout (Option C)
   Two-column hero (thesis left, figure right) + four summary cards +
   technical-stack chips. Reusable across projects via .caseStudy.
   ========================================================================= */
.detailMain > .section.projCase{
  max-width: 1320px;
  margin-inline: auto;
  padding: 56px 32px 64px;
}

/* --- Hero: one unified case-study panel (title/thesis/chips/buttons + figure) --- */
.csHero{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  column-gap: 52px;
  row-gap: 14px;
  align-items: start;
  padding: clamp(44px, 5vw, 68px);
  border-radius: 28px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(37,99,235,0.12);
  box-shadow: 0 24px 70px rgba(15,23,42,0.08);
}

:root[data-theme="dark"] .csHero{
  background: rgba(18,27,48,0.55);
  border-color: rgba(77,143,255,0.14);
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}

.csBadge{
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--primaryDark);
  background: rgba(43,108,255,0.08);
  border: 1px solid rgba(43,108,255,0.18);
  border-radius: 999px;
  padding: 6px 13px;
}

/* Case-study chips (metadata + technical stack) — a touch larger than the
   default site chip so they read clearly at this scale. */
.projCase .chip{
  font-size: 0.82rem;
  min-height: 30px;
  padding: 6px 12px;
}

.csTitle{
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: clamp(2.35rem, 3.3vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 620px;
  text-wrap: balance;
}

.csThesis{
  margin: 22px 0 0;
  max-width: 620px;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--muted);
}

.csChips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.csActions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* Secondary related-work link (keeps the hero to two confident buttons) */
.csRelated{
  margin-top: 16px;
  font-size: 0.95rem;
  color: var(--muted);
}

.csRelated a{
  font-weight: 700;
  color: var(--primaryDark);
  text-decoration: none;
}

.csRelated a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.csActions .btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.csBtnIcon{
  display: inline-flex;
  align-items: center;
}

/* --- Hero media card ---
   Single-row grid: the media sits in column 2, top-aligned, and is nudged
   down by a controlled offset so its top lands around the lower half of the
   title / thesis line instead of being vertically centred (which, on tall
   long-title pages, left a large blank band above the video). */
.csFigure{
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: clamp(88px, 8vw, 140px) 0 0;
}

.csHeadline{
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

/* === Title-top hero variant =============================================
   For long-title research pages: the title (with its badge) spans the full
   hero width, then the thesis/award/chips/actions and the media sit in a
   two-column body row underneath. This stops a long title from squeezing the
   media column and removes the blank band above the video, giving a more
   editorial, balanced hero. Opt in per page via `.csHero--titleTop`. */
.csHero--titleTop{
  display: block;
  padding: clamp(48px, 5vw, 72px);
}

.csHero--titleTop .csHeader{
  max-width: none;
}

.csHero--titleTop .csBadge{
  margin-bottom: 22px;
}

.csHero--titleTop .csTitle{
  margin: 0;
  max-width: none;
  font-size: clamp(2.6rem, 4.1vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  /* Fill each line to the full hero width before wrapping (not balanced,
     which would keep the title artificially narrow). */
  text-wrap: normal;
}

.csHero--titleTop .csBody{
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(40px, 4.5vw, 72px);
  align-items: start;
  margin-top: clamp(32px, 4vw, 52px);
}

/* In this variant the copy column is a plain body column, not a grid cell of
   the outer hero — reset the base grid placement/offsets. */
.csHero--titleTop .csHeadline{
  grid-column: auto;
  grid-row: auto;
  align-self: start;
  max-width: 680px;
}

.csHero--titleTop .csThesis{
  margin-top: 0;
}

.csHero--titleTop .csFigure{
  grid-column: auto;
  grid-row: auto;
  align-self: start;
  margin: 0;
}

.csFigureMedia{
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(37,99,235,0.14);
  background: var(--card);
  padding: 18px;
  box-shadow: 0 20px 50px rgba(15,23,42,0.12);
  transition: transform .3s ease, box-shadow .3s ease;
}

.csFigureMedia img,
.csFigureMedia video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.projectHeroVideo{
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #020617;
}

.projectMediaSpotlight{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 26px;
  padding: 12px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(37,99,235,0.13);
  box-shadow:
    0 24px 70px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.70);
}

.projectMediaBackdrop{
  display: none;
}

.projectMediaSpotlight .projectHeroVideo{
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 18px;
  background: #020617;
  box-shadow: 0 10px 24px rgba(15,23,42,0.12);
}

.projectMediaCaption{
  margin-top: 10px;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

.projectDemoHighlights{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.projectDemoHighlights span{
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(37,99,235,0.06);
  border: 1px solid rgba(37,99,235,0.10);
  color: #3157b7;
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.2;
}

:root[data-theme="dark"] .projectMediaSpotlight{
  background: rgba(22,32,54,0.62);
  border-color: rgba(77,143,255,0.14);
  box-shadow: 0 1px 2px rgba(0,0,0,0.32), 0 18px 40px rgba(0,0,0,0.42);
}

:root[data-theme="dark"] .projectMediaBackdrop{
  opacity: 0.22;
}

:root[data-theme="dark"] .projectDemoHighlights span{
  background: rgba(77,143,255,0.12);
  border-color: rgba(77,143,255,0.22);
}

/* --- Inline award pill ---------------------------------------------------
   Compact, premium recognition that lives INSIDE the hero copy column
   (after the thesis, before the chips). Deliberately not a card, so the
   right-hand media column stays media-only and the video is never pushed
   down. Used only for award-winning projects; the hero collapses cleanly
   when it is absent. */
.projectAwardInline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin-top: 24px;
  padding: 9px 13px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(245,158,11,0.10),
    rgba(37,99,235,0.06)
  );
  border: 1px solid rgba(245,158,11,0.24);
  font-weight: 750;
}

.projectAwardInline .projectAwardKicker{
  flex: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b45309;
  white-space: nowrap;
}

.projectAwardInline .projectAwardKicker::after{
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-left: 10px;
  vertical-align: -2px;
  background: rgba(180,83,9,0.32);
}

.projectAwardInline .projectAwardText{
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.3;
  color: #111827;
}

:root[data-theme="dark"] .projectAwardInline{
  background: linear-gradient(
    135deg,
    rgba(120,53,15,0.30),
    rgba(37,99,235,0.10)
  );
  border-color: rgba(245,158,11,0.28);
}

:root[data-theme="dark"] .projectAwardInline .projectAwardKicker{
  color: #fbbf24;
}

:root[data-theme="dark"] .projectAwardInline .projectAwardKicker::after{
  background: rgba(251,191,36,0.34);
}

:root[data-theme="dark"] .projectAwardInline .projectAwardText{
  color: #f1f5f9;
}

/* Optional: award-flavored chip (alternative treatment, kept in the blue
   pill system, only for the one award-winning project). */
.projectChipAward{
  background: linear-gradient(
    135deg,
    rgba(245,158,11,0.12),
    rgba(59,130,246,0.08)
  );
  border-color: rgba(245,158,11,0.28);
  color: #92400e;
}

:root[data-theme="dark"] .projectChipAward{
  background: linear-gradient(
    135deg,
    rgba(120,53,15,0.28),
    rgba(59,130,246,0.12)
  );
  border-color: rgba(245,158,11,0.30);
  color: #fbbf24;
}

.projectMediaGallery{
  margin-top: 40px;
}

.projectMediaGallery .sectionLabel{
  margin: 0 0 16px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--muted2);
}

.projectMediaGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.projectMediaItem{
  margin: 0;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(37,99,235,0.13);
  box-shadow: 0 18px 48px rgba(15,23,42,0.06);
}

.projectMediaItem--award{
  border-color: rgba(217,119,6,0.34);
  box-shadow: 0 22px 54px rgba(217,119,6,0.12);
}

:root[data-theme="dark"] .projectMediaItem{
  background: rgba(22,32,54,0.72);
  border-color: rgba(77,143,255,0.14);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 16px 34px rgba(0,0,0,0.5);
}

:root[data-theme="dark"] .projectMediaItem--award{
  border-color: rgba(245,158,11,0.32);
}

.projectMediaItem img,
.projectMediaItem video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.projectMediaItem figcaption{
  margin-top: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 760px){
  .projectMediaGrid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   ShiftOS / Moonwalkers project page
   Industry-flavored variant of the project case-study layout.
   ========================================================================= */
.shiftCase{
  --shift-blue: #2b6cff;
  --shift-cyan: #00c2ff;
  --shift-magenta: #8B1A4A;
  --shift-green: #2D6A2D;
}

.shiftCase .csHero--titleTop .csTitle{
  max-width: none;
  font-size: clamp(2.65rem, 4.35vw, 4.2rem);
  line-height: 1.03;
}

.shiftCase .csHero--titleTop .csBody{
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: start;
}

.shiftCase .csHero--titleTop .csHeadline{
  max-width: 590px;
}

.shiftHeroAside{
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 14px);
}

.shiftHeroAside .csFigure{
  margin: 0;
}

/* Full-width tag/release-note footer under the two-column hero body */
.csHeroFooter{
  margin-top: clamp(20px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  align-items: start;
}

.csHeroFooter .csChips{
  grid-column: 1 / -1;
  margin-top: 0;
}

.csHeroFooter .csRelated{
  grid-column: 2;
  justify-self: end;
  margin-top: 2px;
  text-align: right;
  white-space: nowrap;
}

/* Keep the video frame clean. Caption sits outside the frame. */
.shiftHeroVideoWrap{
  position: relative;
}

.shiftHeroVideoWrap .projectHeroVideo{
  min-height: 320px;
}

.shiftHeroVideoMeta{
  position: static;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 0 4px;
  color: var(--muted);
  text-shadow: none;
}

.shiftHeroVideoMeta strong{
  font-size: 0.82rem;
  color: var(--text);
}

.shiftHeroVideoMeta span{
  font-size: 0.82rem;
  color: var(--muted2);
}

.shiftShowcase{
  margin-top: 36px;
}

.shiftShowcaseGrid{
  display: grid;
  grid-template-columns: 0.9fr 1.25fr 0.9fr;
  gap: 24px;
  align-items: stretch;
}

.shiftShowcaseStack{
  display: grid;
  gap: 14px;
}

.shiftMediaTile{
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 12px 32px rgba(15,23,42,0.07);
}

.shiftMediaTile img,
.shiftMediaTile video{
  width: 100%;
  height: 100%;
  min-height: 170px;
  display: block;
  object-fit: cover;
}

.shiftMediaTile--product img{
  object-fit: contain;
  padding: 18px;
  background: #fff;
}

.shiftMediaTile--feature{
  min-height: 410px;
}

.shiftMediaTile--blur img{
  filter: blur(8px);
  transform: scale(1.04);
}

.shiftMediaLabel{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: grid;
  gap: 2px;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  border-radius: 10px;
  color: #fff;
  background: rgba(15,23,42,0.54);
  backdrop-filter: blur(8px);
}

.shiftMediaLabel strong{
  font-size: 0.78rem;
  line-height: 1.2;
}

.shiftMediaLabel span{
  font-size: 0.7rem;
  line-height: 1.3;
  color: rgba(255,255,255,0.86);
}

.shiftSoonPill{
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15,23,42,0.58);
  padding: 5px 10px;
  border-radius: 999px;
}

.shiftPressGrid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.shiftPressGrid .pressBadge{
  min-height: 160px;
  border-radius: 14px;
  padding: 18px 20px;
}

.shiftYearPill{
  margin-top: auto;
  width: fit-content;
  color: var(--primaryDark);
  background: rgba(43,108,255,0.07);
  border: 1px solid rgba(43,108,255,0.16);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 800;
}

.shiftGenImage{
  margin-top: auto;
  width: 90%;
  max-height: 82px;
  object-fit: contain;
  align-self: center;
}

.shiftosGenerationCards .mwGenCard{
  min-height: 260px;
}

.shiftosGenerationCards .mwGenCard--future .shiftGenImage,
.shiftosGenerationCards .mwTone--magenta .shiftGenImage{
  filter: blur(7px);
  transform: scale(1.04);
}

.shiftEvolutionPanel{
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.62);
}

:root[data-theme="dark"] .shiftMediaTile,
:root[data-theme="dark"] .shiftEvolutionPanel{
  background: rgba(22,32,54,0.72);
  border-color: rgba(77,143,255,0.14);
}

@media (max-width: 1050px){
  .shiftShowcaseGrid{
    grid-template-columns: 1fr;
  }

  .shiftMediaTile--feature{
    min-height: 320px;
  }

  .shiftPressGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Add this part here */
  .csHeroFooter{
    display: block;
    margin-top: 20px;
  }

  .csHeroFooter .csRelated{
    margin-top: 14px;
    text-align: left;
    white-space: normal;
  }

  .shiftHeroVideoMeta{
    display: grid;
    gap: 2px;
  }
}

@media (max-width: 640px){
  .shiftPressGrid,
  .mwGenRow{
    grid-template-columns: 1fr;
  }
  .shiftHeroVideoWrap .projectHeroVideo{
    min-height: 220px;
  }
}

.csFigure:hover .csFigureMedia{
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(2,6,23,0.05), 0 30px 64px rgba(2,6,23,0.16);
}

.csCaption{
  margin-top: 12px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --- Four summary cards --- */
.csCards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.csCard{
  position: relative;
  min-height: 190px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(37,99,235,0.13);
  border-radius: 20px;
  padding: 26px 28px;
  box-shadow: 0 16px 42px rgba(15,23,42,0.06);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

:root[data-theme="dark"] .csCard{
  background: rgba(22,32,54,0.72);
  border-color: rgba(77,143,255,0.14);
}

.csCard::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.csCard:hover{
  transform: translateY(-3px);
  border-color: rgba(43,108,255,0.28);
  box-shadow: 0 2px 6px rgba(2,6,23,0.05), 0 20px 40px rgba(2,6,23,0.10);
}

.csCardHead{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.csCardIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  color: var(--primaryDark);
  background: rgba(43,108,255,0.09);
  border: 1px solid rgba(43,108,255,0.16);
}

.csCardIcon svg{ width: 19px; height: 19px; }

.csCardTitle{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.csCardList{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.csCardList li{
  position: relative;
  padding-left: 16px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--muted);
}

.csCardList li::before{
  content: "";
  position: absolute;
  left: 1px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(135deg, #2b6cff, #00c2ff);
  transform: rotate(45deg);
}

.csCardText{
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--muted);
}

/* --- Technical stack --- */
.csStack{
  margin-top: 38px;
}

.csStackLabel{
  margin: 0 0 14px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--muted2);
}

.csStackChips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.projCase .affil{ margin-top: clamp(18px, 2.4vw, 28px); font-size: 0.86rem; }

/* --- Responsive --- */
@media (max-width: 1050px){
  .csHero{
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 32px;
  }
  .csHero .csFigure{
    grid-column: 1;
    grid-row: auto;
    order: 2;
    margin-top: 0;
  }
  .csHero--titleTop{ padding: 32px; }
  .csHero--titleTop .csBody{
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 26px;
  }
  .csCards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px){
  .detailMain > .section.projCase{ padding: 34px 18px 44px; }
  .csHero{ padding: 22px; border-radius: 22px; }
  .csHero--titleTop{ padding: 22px; }
  .csCards{ grid-template-columns: 1fr; }
  .csTitle{ font-size: clamp(2rem, 8vw, 2.5rem); }
  .csHero--titleTop .csTitle{ font-size: clamp(2.1rem, 8.5vw, 2.9rem); }
}

/* --- Dark mode --- */
:root[data-theme="dark"] .csFigureMedia{
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 24px 54px rgba(0,0,0,0.55);
}

:root[data-theme="dark"] .csCard{
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 16px 34px rgba(0,0,0,0.5);
}

:root[data-theme="dark"] .csCard:hover{
  border-color: rgba(77,143,255,0.4);
}

/* =========================================================================
   Project case-study modules — editorial refinement
   Fewer boxes, fewer pills, stronger type hierarchy, more open whitespace.
   Card treatment is reserved for Key Results + Related Projects; everything
   else is an open section, a soft tint panel, or a thin-line roadmap.
   ========================================================================= */
.projCase .pmSection{
  margin-top: clamp(38px, 4.5vw, 60px);
}

.pmEyebrow{
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--muted2);
  margin: 0 0 20px;
}

/* Compact "Related IP" callout on project detail pages — credible, quiet
   professional evidence, not a marketing banner. */
.pmCallout{
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  max-width: 760px;
}

.pmCallout .pmEyebrow{
  margin: 0 0 8px;
}

.pmCallout p{
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.pmCallout strong{
  color: var(--text);
  font-weight: 700;
}

.pmSubhead{
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 12px;
}

/* --- At a Glance: open section, role | facts split by a hairline rule --- */
.pmSnapshot{
  border-top: 1px solid var(--border);
  padding-top: clamp(26px, 3vw, 38px);
}

.pmSnapshotGrid{
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.pmSnapshotFacts{
  border-left: 1px solid var(--border);
  padding-left: clamp(28px, 4vw, 56px);
}

.pmSnapshotRoleText{
  margin: 0;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
}

.pmRoleTags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* Quiet neutral chips — not blue pills */
.pmRoleTags span{
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(15,23,42,0.05);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
}

.pmSnapshotFacts{
  display: flex;
  flex-direction: column;
}

.pmFact{
  padding: 15px 0;
  border-top: 1px solid var(--border);
}

.pmFact:first-child{
  padding-top: 0;
  border-top: 0;
}

.pmFactLabel{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 800;
  color: var(--muted2);
  margin-bottom: 7px;
}

.pmFact p{
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text);
}

/* Emphasize evidence with type weight/color, not a box */
.pmFactEvidence p{
  font-weight: 700;
  color: var(--primaryDark);
}

/* Mini roadmap integrated at the bottom of Case Snapshot */
.pmSnapRoadmap{
  margin-top: clamp(26px, 3.2vw, 40px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--border);
}

.pmMiniLabel{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 800;
  color: var(--muted2);
}

/* Technical Story: the intro "How it works" flow, then the body's summary
   cards attach directly beneath it as one continuous section. */
.projCase .pmStory{ margin-bottom: 0; }
.projCase .pmStory .pmSubhead{ margin: 4px 0 12px; }

.pmProcess{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.pmProcessStep{
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.pmProcessSep{
  color: var(--muted2);
  font-weight: 700;
}

.pmProcessSep::before{ content: "→"; }

/* --- Key Results (kept as cards, premium & minimal) --- */
.pmResultsGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

.pmResultCard{
  margin: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(15,23,42,0.05);
}

.pmResultKey{
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
}

.pmResultDesc{
  margin-top: 11px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--muted2);
}

.pmResultProof{
  background: linear-gradient(135deg, rgba(43,108,255,0.06), transparent 70%), var(--card);
  border-color: rgba(37,99,235,0.18);
}

.pmResultProof .pmResultKey,
.pmResultProof .pmResultDesc{ color: var(--primaryDark); }

/* --- Where This Fits: thin-line roadmap, not pills --- */
.pmTimeline{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 34px 0 0;
  display: flex;
}

/* Full-width track between the first and last node centers (each node is one
   sixth of the row, so its centre sits at 1/12 in from each edge). */
.pmTimeline::before{
  content: "";
  position: absolute;
  top: 7px;
  left: 8.3333%;
  right: 8.3333%;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
}

/* Filled progress from the first node up to the active one. */
.pmTimeline::after{
  content: "";
  position: absolute;
  top: 7px;
  left: 8.3333%;
  width: calc(83.3333% * var(--pm-progress, 0) / 100);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), #38bdf8);
}

.pmNode{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  z-index: 1;
}

.pmNodeDot{
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--card);
  border: 2px solid var(--muted2);
  box-sizing: border-box;
  z-index: 2;
}

.pmNodeNum{
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--muted2);
  font-variant-numeric: tabular-nums;
}

.pmNodeLabel{
  display: block;
  margin-top: 3px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
}

.pmNode.isDone .pmNodeDot{ border-color: var(--primary); }

.pmNode.isActive .pmNodeDot{
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 5px rgba(43,108,255,0.15);
}

.pmNode.isActive .pmNodeNum{ color: var(--primaryDark); }
.pmNode.isActive .pmNodeLabel{ color: var(--text); font-weight: 800; }

/* --- Why It Matters: open editorial statement, no card --- */
.pmWhy{
  border-left: 3px solid var(--primary);
  padding-left: clamp(20px, 2.6vw, 30px);
}

.pmWhyText{
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1.16rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
}

/* --- Related Projects: compact cards --- */
.pmRelatedGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(12px, 1.6vw, 16px);
}

.pmRelatedCard{
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.pmRelatedCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(15,23,42,0.10);
}

.pmRelatedArc{
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 800;
  color: var(--muted2);
}

.pmRelatedName{
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
}

.pmRelatedReason{
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
}

/* --- Dark mode --- */
:root[data-theme="dark"] .pmSnapshot{
  background: linear-gradient(135deg, rgba(77,143,255,0.10), rgba(0,194,255,0.03));
}

:root[data-theme="dark"] .pmRoleTags span{
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}

:root[data-theme="dark"] .pmResultCard,
:root[data-theme="dark"] .pmRelatedCard{
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 16px 34px rgba(0,0,0,0.42);
}

:root[data-theme="dark"] .pmResultProof{
  background: linear-gradient(135deg, rgba(77,143,255,0.12), transparent 70%), var(--card);
  border-color: rgba(77,143,255,0.24);
}

:root[data-theme="dark"] .pmNodeDot{ background: var(--card); }

/* --- Responsive --- */
@media (max-width: 820px){
  .pmSnapshotGrid{ grid-template-columns: 1fr; gap: clamp(24px, 5vw, 34px); }
  .pmSnapshotFacts{
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: clamp(20px, 4vw, 28px);
  }
}

@media (max-width: 640px){
  .pmTimeline{ flex-direction: column; padding: 2px 0 0 22px; }
  .pmTimeline::before{
    top: 8px;
    bottom: 8px;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .pmTimeline::after{
    top: 8px;
    left: 6px;
    width: 2px;
    height: calc((100% - 16px) * var(--pm-progress, 0) / 100);
  }
  .pmNode{ text-align: left; padding: 5px 0 16px; }
  .pmNodeDot{ top: 7px; left: -22px; transform: none; }
  .pmNodeNum{ display: inline; }
  .pmNodeLabel{ display: inline; margin: 0 0 0 8px; }
}

/* =========================================================================
   All Projects page — editorial arc header + themed groups
   ========================================================================= */
.projArcIntro{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin: clamp(6px, 1.4vw, 14px) 0 clamp(40px, 5vw, 64px);
  padding-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--border);
}

.projArcEyebrow{
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--primaryDark);
  margin-bottom: 14px;
}

.projArcTitle{
  margin: 0;
  max-width: 16ch;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--text);
}

.projArcText{
  margin: 18px 0 0;
  max-width: 48ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted);
}

.projArcTimeline{
  list-style: none;
  margin: 0;
  padding: 0;
}

.projArcNode{
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0 11px 28px;
}

.projArcNode::before{
  content: "";
  position: absolute;
  left: 3px;
  top: 17px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--card);
  border: 2px solid rgba(43,108,255,0.5);
  box-sizing: border-box;
  z-index: 2;
}

.projArcNode:not(:last-child)::after{
  content: "";
  position: absolute;
  left: 7.5px;
  top: 24px;
  bottom: -4px;
  width: 2px;
  background: rgba(43,108,255,0.18);
  z-index: 1;
}

.projArcNum{
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--primaryDark);
  font-variant-numeric: tabular-nums;
}

.projArcNodeLabel{
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.projGroup{
  margin-top: clamp(52px, 7vw, 88px);
}

.projGroupHead{
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

.projGroupHead h2{
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.projGroupHead p{
  margin: 7px 0 0;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted2);
}

/* =========================================================================
   All Projects — sticky section navigator (premium pill rail)
   A direct child of <main>, so it stays pinned across every group + Patents.
   Scroll-spied by initProjSectionNav in site.js.
   ========================================================================= */
.projSectionNav{
  position: sticky;
  top: 66px;
  z-index: 40;
  display: flex;
  justify-content: center;
  margin: clamp(2px, 1vw, 10px) 0 clamp(30px, 4vw, 48px);
  /* Full-width sticky band, but only the pill track is interactive so it never
     blocks clicks on content scrolling beneath its transparent margins. */
  pointer-events: none;
}

.projSectionNavTrack{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-x: auto;
  scrollbar-width: none;
}

.projSectionNavTrack::-webkit-scrollbar{ display: none; }

.projSectionNavItem{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.projSectionNavItem:hover{
  color: var(--text);
  background: rgba(43, 108, 255, 0.07);
}

/* Dot collapses to zero width on inactive items (no gray dots) and only the
   active tab reveals a small white dot — animated so nothing jumps. */
.projSectionNavDot{
  width: 0;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  opacity: 0;
  transition: width .2s ease, margin .2s ease, opacity .2s ease;
}

.projSectionNavItem.is-active{
  color: #fff;
  font-weight: 700;
  /* Slightly tighter than inactive tabs so the active pill stays trim. */
  padding: 8px 14px;
  background: linear-gradient(135deg, #5b8def, #2f6be6);
  box-shadow: 0 6px 16px rgba(47, 107, 230, 0.24);
}

.projSectionNavItem.is-active .projSectionNavDot{
  width: 6px;
  margin-right: 7px;
  opacity: 1;
}

/* The nav already provides the gap above the first group. */
.projGroups > .projGroup:first-child{ margin-top: 0; }

/* Native anchor-jump fallback lands sections clear of the sticky header + nav. */
.projGroup[id],
#patents{ scroll-margin-top: 132px; }

:root[data-theme="dark"] .projSectionNavTrack{
  background: rgba(17, 26, 46, 0.72);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
}

:root[data-theme="dark"] .projSectionNavItem:hover{
  background: rgba(77, 143, 255, 0.14);
}

@media (max-width: 720px){
  .projSectionNav{
    justify-content: flex-start;
    /* Bleed to the screen edges so the pill row can scroll edge-to-edge. */
    margin-inline: -18px;
    padding-inline: 18px;
  }
  .projSectionNavTrack{ width: 100%; }
  .projSectionNavItem{ padding: 7px 12px; font-size: 0.82rem; }
  .projSectionNavItem.is-active{ padding: 7px 11px; }
}

:root[data-theme="dark"] .projArcNode::before{ background: var(--card); }

@media (max-width: 820px){
  .projArcIntro{ grid-template-columns: 1fr; gap: clamp(24px, 6vw, 34px); }
  .projArcTitle{ max-width: none; }
}

/* =========================================================================
   Soften existing detail sections (hero / summary cards / stack / media)
   — reserve borders + blue for accents, let type + space carry hierarchy.
   ========================================================================= */
.projCase .csHero{
  border-color: var(--border);
  box-shadow: 0 22px 60px rgba(15,23,42,0.06);
}

.projCase .projectMediaSpotlight,
.projCase .csFigureMedia{
  border-color: var(--border);
}

/* Quieter chips across the detail page (hero badges + technical stack) */
.projCase .chip{
  background: rgba(15,23,42,0.05);
  border-color: transparent;
  color: var(--muted);
  font-weight: 650;
}

.projCase .projectDemoHighlights span{
  background: rgba(15,23,42,0.045);
  border-color: transparent;
  color: var(--muted);
  font-weight: 600;
}

:root[data-theme="dark"] .projCase .chip,
:root[data-theme="dark"] .projCase .projectDemoHighlights span{
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}

/* Technical Story: the 4 summary cards become left-accent editorial blocks
   in a 2x2 grid, not full bordered boxes. */
/* Summary cards belong to the Technical Story section injected just above,
   so pull them up tight rather than reading as a separate module. */
.projCase .csCards{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.8vw, 36px);
  margin-top: clamp(22px, 2.6vw, 30px);
}

.projCase .csCard{
  min-height: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 0 4px 22px;
  overflow: visible;
}

.projCase .csCard::before{
  left: 0;
  right: auto;
  top: 4px;
  bottom: 4px;
  width: 3px;
  height: auto;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(43,108,255,0.55), rgba(56,189,248,0.35));
}

.projCase .csCard:hover{
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

/* Icon becomes a quiet inline glyph, not a filled blue tile */
.projCase .csCardIcon{
  width: 22px;
  height: 22px;
  background: transparent;
  border-color: transparent;
  color: var(--muted2);
}

.projCase .csCardIcon svg{ width: 18px; height: 18px; }

.projCase .csCardTitle{ font-size: 1.14rem; }

/* Media + stack rhythm */
.projCase .projectMediaGallery{ margin-top: clamp(38px, 4.5vw, 60px); }
.projCase .csStack{ margin-top: clamp(34px, 4vw, 52px); }

.projCase .projectMediaItem{
  border-color: var(--border);
  box-shadow: 0 12px 32px rgba(15,23,42,0.05);
}

.projCase .projectMediaItem figcaption{
  color: var(--muted2);
  font-size: 0.85rem;
}

@media (max-width: 640px){
  .projCase .csCards{ grid-template-columns: 1fr; gap: 24px; }
}

/* =========================================================================
   Project detail layout v3 - reference-inspired case-study page
   Hero card, snapshot card, build strip, results/media pair, richer related.
   ========================================================================= */
.detailMain > .section.projCase{
  max-width: 1420px;
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  column-gap: clamp(24px, 3vw, 34px);
  row-gap: 0;
}

.detailMain > .section.projCase > *{
  grid-column: 1 / -1;
}

.projCase .csHero{
  border-radius: 24px;
  background:
    radial-gradient(1100px 420px at 82% 8%, rgba(43,108,255,0.06), transparent 54%),
    rgba(255,255,255,0.86);
  border: 1px solid rgba(148,163,184,0.34);
  box-shadow: 0 22px 54px rgba(15,23,42,0.10);
}

:root[data-theme="dark"] .projCase .csHero{
  background:
    radial-gradient(1100px 420px at 82% 8%, rgba(77,143,255,0.14), transparent 54%),
    rgba(18,27,48,0.72);
  border-color: rgba(148,163,184,0.20);
}

.projCase .csHero--titleTop{
  display: block;
  padding: clamp(42px, 5vw, 66px);
}

.projCase .csHero--titleTop .csHeader{
  max-width: none;
}

.projCase .csHero--titleTop .csBody{
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(30px, 3.6vw, 48px);
}

.projCase .csHero--titleTop .csHeadline{
  max-width: 680px;
}

.projCase .csHero--titleTop .csFigure{
  align-self: start;
  margin: 0;
}

.projCase .csHero--titleTop .csTitle{
  max-width: none;
  font-size: clamp(2.55rem, 4.05vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: normal;
}

.projCase .csThesis{
  color: #64748b;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
}

.projCase .projectMediaSpotlight,
.projCase .csFigureMedia{
  border-radius: 24px;
  padding: 12px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(148,163,184,0.34);
  box-shadow: 0 18px 44px rgba(15,23,42,0.10);
}

.projCase .projectMediaSpotlight .projectHeroVideo{
  border-radius: 16px;
}

.projCase .projectMediaCaption{
  text-align: left;
  margin-top: 12px;
}

.projCase .csActions .btn{
  min-height: 46px;
  padding-inline: 22px;
}

/* Snapshot card */
.projCase .pmSnapshot{
  border-top: 0;
  padding-top: 0;
}

.pmSnapshotCard{
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(148,163,184,0.36);
  border-radius: 22px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 16px 42px rgba(15,23,42,0.06);
}

:root[data-theme="dark"] .pmSnapshotCard{
  background: rgba(18,27,48,0.72);
  border-color: rgba(148,163,184,0.22);
}

.pmSnapshotLead{
  max-width: 76ch;
  margin: -8px 0 clamp(22px, 2.6vw, 30px);
  color: #64748b;
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  line-height: 1.65;
  font-weight: 500;
}

:root[data-theme="dark"] .pmSnapshotLead{
  color: #94a3b8;
}

.pmSnapshotGrid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  align-items: stretch;
}

/* Each fact is a self-contained tinted card: an icon + label header row over
   body text, tinted by kind (role = blue, challenge = amber, approach = green). */
.pmSnapshotItem{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 14px 16px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(148,163,184,0.06);
}

/* Let the wrapper's label + body flow into the card grid. */
.pmSnapshotItem > div{
  display: contents;
}

.pmSnapshotItem .pmIcon{
  grid-column: 1;
  grid-row: 1;
}

.pmSnapshotItem .pmSubhead,
.pmSnapshotItem .pmFactLabel{
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pmSnapshotItem .pmSnapshotRoleText,
.pmSnapshotItem .pmFact p{
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}

/* Role — blue */
.pmSnapshotItem.pmSnapshotRole{
  background: rgba(43,108,255,0.05);
  border-color: rgba(43,108,255,0.16);
}

.pmSnapshotItem.pmSnapshotRole .pmSubhead{ color: var(--primaryDark); }

/* Challenge — amber */
.pmSnapshotItem:has(.pmIcon--problem){
  background: rgba(245,158,11,0.07);
  border-color: rgba(245,158,11,0.22);
}

.pmSnapshotItem:has(.pmIcon--problem) .pmFactLabel{ color: var(--text); }

/* Approach — green */
.pmSnapshotItem:has(.pmIcon--contribution){
  background: rgba(22,163,74,0.06);
  border-color: rgba(22,163,74,0.20);
}

.pmSnapshotItem:has(.pmIcon--contribution) .pmFactLabel{ color: #15803d; }

/* Icon badges — base blue outline, tinted per kind. */
.pmIcon{
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(43,108,255,0.06);
  border: 2px solid rgba(43,108,255,0.82);
}

.pmIcon svg{
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pmIcon--problem{
  color: #f59e0b;
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.85);
}

.pmIcon--contribution{
  color: #16a34a;
  background: rgba(22,163,74,0.08);
  border-color: rgba(22,163,74,0.80);
}

.pmIcon--evidence{
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.pmSnapshotFacts{
  border-left: 0;
  padding-left: 0;
}

.pmFact{
  padding: 0;
  border-top: 0;
}

/* Evidence — a filled pill bar spanning the card width, badge · label | proof. */
.pmEvidenceRow{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(16px, 2vw, 24px);
  padding: clamp(13px, 1.5vw, 17px) clamp(16px, 1.8vw, 22px);
  border-radius: 14px;
  background: rgba(43,108,255,0.05);
  border: 1px solid rgba(43,108,255,0.14);
}

.pmEvidenceRow .pmFact{
  display: flex;
  align-items: center;
  gap: 18px;
}

.pmEvidenceRow .pmFactLabel{
  margin: 0;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pmEvidenceRow .pmFactEvidence p{
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid rgba(148,163,184,0.55);
  color: var(--primaryDark);
  font-size: 0.98rem;
  font-weight: 800;
}

.pmSnapshotNote{
  margin-top: clamp(14px, 1.6vw, 18px);
}

/* Snapshot dark-mode tints */
:root[data-theme="dark"] .pmSnapshotItem{ background: rgba(148,163,184,0.08); }

:root[data-theme="dark"] .pmSnapshotItem.pmSnapshotRole{
  background: rgba(77,143,255,0.10);
  border-color: rgba(77,143,255,0.24);
}

:root[data-theme="dark"] .pmSnapshotItem.pmSnapshotRole .pmSubhead{ color: #93b4ff; }

:root[data-theme="dark"] .pmSnapshotItem:has(.pmIcon--problem){
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.26);
}

:root[data-theme="dark"] .pmSnapshotItem:has(.pmIcon--contribution){
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.24);
}

:root[data-theme="dark"] .pmSnapshotItem:has(.pmIcon--contribution) .pmFactLabel{ color: #4ade80; }

:root[data-theme="dark"] .pmEvidenceRow{
  background: rgba(77,143,255,0.10);
  border-color: rgba(77,143,255,0.22);
}

:root[data-theme="dark"] .pmEvidenceRow .pmFactEvidence p{ color: #93b4ff; }

.pmSnapshotNote .affil{
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.5;
}

.pmSnapshotNote .affil::before{
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(43,108,255,0.09);
  vertical-align: 1px;
}

.pmSnapshotNote .affil a{
  color: var(--primaryDark);
  font-weight: 800;
}

:root[data-theme="dark"] .pmSnapshotNote .affil{
  color: var(--muted);
}

.projCase .pmContext{
  margin-top: clamp(18px, 2vw, 26px);
}

.pmContextNote{
  width: fit-content;
  max-width: 860px;
  padding: 13px 16px 13px 18px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(43,108,255,0.08), rgba(56,189,248,0.05)),
    rgba(255,255,255,0.78);
  border: 1px solid rgba(43,108,255,0.18);
  box-shadow: 0 10px 28px rgba(15,23,42,0.05);
}

.pmContextNote .affil{
  margin: 0;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.55;
}

.pmContextNote .affil::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 5px rgba(43,108,255,0.10);
  vertical-align: 1px;
}

.pmContextNote .affil a{
  color: var(--primaryDark);
  font-weight: 800;
}

:root[data-theme="dark"] .pmContextNote{
  background:
    linear-gradient(135deg, rgba(77,143,255,0.14), rgba(56,189,248,0.06)),
    rgba(18,27,48,0.72);
  border-color: rgba(77,143,255,0.24);
}

:root[data-theme="dark"] .pmContextNote .affil{
  color: var(--muted);
}

/* Core Mechanism — linear step strip (workflow / pipeline / protocol): ordered
   step cards connected by arrows. Flex so 3–5 steps share one row equally;
   stacks vertically (arrows rotate down) on narrow screens. */
.projCase .pmFlow{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(20px, 2.2vw, 30px);
}

.projCase .pmFlowStep{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(14px, 1.5vw, 18px);
  border-radius: 16px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(148,163,184,0.26);
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
}

.projCase .pmFlowStep:not(:last-child)::after{
  content: "\2192";
  position: absolute;
  top: 50%;
  right: calc(clamp(20px, 2.2vw, 30px) / -2);
  transform: translate(50%, -50%);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}

.projCase .pmFlowNum{
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(43,108,255,0.10);
  color: var(--primaryDark);
  font-size: 0.8rem;
  font-weight: 800;
}

.projCase .pmFlowTitle{
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.projCase .pmFlowLine{
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

:root[data-theme="dark"] .projCase .pmFlowStep{
  background: rgba(18,27,48,0.72);
  border-color: rgba(148,163,184,0.20);
}

/* Loop mechanism (e.g. safety reflex): same strip, plus a "repeats" caption. */
.projCase .pmFlowNote{
  margin: 14px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primaryDark);
}

@media (max-width: 860px){
  .projCase .pmFlow{
    flex-direction: column;
    gap: clamp(22px, 5vw, 30px);
  }
  .projCase .pmFlowStep:not(:last-child)::after{
    top: auto;
    right: 50%;
    bottom: calc(clamp(22px, 5vw, 30px) / -2);
    transform: translate(50%, 50%) rotate(90deg);
  }
}

/* Core Mechanism — comparison panel: proposed (accented) vs. baseline (muted),
   split by a small "vs" divider. Stacks on narrow screens. */
.projCase .pmCompareGrid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: stretch;
}

.projCase .pmCompareCol{
  padding: clamp(16px, 1.9vw, 22px);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(43,108,255,0.06), transparent 70%),
    rgba(255,255,255,0.95);
  border: 1px solid rgba(37,99,235,0.22);
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
}

.projCase .pmCompareCol--alt{
  background: rgba(148,163,184,0.06);
  border-color: rgba(148,163,184,0.26);
}

.projCase .pmCompareName{
  margin-bottom: 10px;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.projCase .pmCompareCol--alt .pmCompareName{ color: var(--muted); }

.projCase .pmCompareList{
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.projCase .pmCompareList li{
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

.projCase .pmCompareVs{
  align-self: center;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted2);
}

:root[data-theme="dark"] .projCase .pmCompareCol{
  background:
    linear-gradient(135deg, rgba(77,143,255,0.12), transparent 70%),
    rgba(18,27,48,0.72);
  border-color: rgba(77,143,255,0.24);
}

:root[data-theme="dark"] .projCase .pmCompareCol--alt{
  background: rgba(30,41,59,0.55);
  border-color: rgba(148,163,184,0.20);
}

@media (max-width: 720px){
  .projCase .pmCompareGrid{ grid-template-columns: minmax(0, 1fr); }
  .projCase .pmCompareVs{ justify-self: center; }
}

/* Evidence — the single standalone proof section (mechanism pages). Prominent
   icon+text cards; larger than the Technical Stack chips below. */
.projCase .pmEvidence .pmResultsGrid{
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

.projCase .pmEvidence .pmResultCard{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(16px, 1.9vw, 22px);
  border-radius: 16px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(148,163,184,0.26);
  box-shadow: 0 8px 22px rgba(15,23,42,0.05);
}

:root[data-theme="dark"] .projCase .pmEvidence .pmResultCard{
  background: rgba(18,27,48,0.72);
  border-color: rgba(148,163,184,0.20);
}

/* Approach Breakdown — the "Method / Validation / Outcome" summary cards
   stacked vertically inside the top panel's left cell: a rounded-square icon
   badge + title header row over blue-dot bullets, parted by hairlines. */
.projCase .pmCell--approach .csCards{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  grid-template-columns: none;
}

.projCase .pmCell--approach .csCard{
  display: block;
  min-height: 0;
  padding: clamp(14px, 1.6vw, 18px) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(148,163,184,0.22);
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

.projCase .pmCell--approach .csCard:hover{
  transform: none;
  box-shadow: none;
}

.projCase .pmCell--approach .csCard:first-child{
  border-top: 0;
  padding-top: 0;
}

.projCase .pmCell--approach .csCard:last-child{
  padding-bottom: 0;
}

.projCase .pmCell--approach .csCard::before{
  content: none;
  display: none;
}

.projCase .pmCell--approach .csCardHead{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.projCase .pmCell--approach .csCardIcon{
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  background: rgba(43,108,255,0.08);
  color: var(--primary);
}

.projCase .pmCell--approach .csCardIcon svg{
  width: 22px;
  height: 22px;
}

.projCase .pmCell--approach .csCardTitle{
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.projCase .pmCell--approach .csCardList{
  margin: 0;
  padding-left: 58px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.projCase .pmCell--approach .csCardList li{
  position: relative;
  padding-left: 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

.projCase .pmCell--approach .csCardList li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--primary);
}

.projCase .pmCell--approach .csCardList li:nth-child(n+3){
  display: none;
}

:root[data-theme="dark"] .projCase .pmCell--approach .csCard{
  border-top-color: rgba(148,163,184,0.16);
}

/* Full-width panels with no Evidence column (no-media projects) lay the
   Approach cards out 3-across so they fill the width instead of leaving the
   right half empty. */
.projCase .pmPanel--solo .pmCell--approach .csCards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.projCase .pmPanel--solo .pmCell--approach .csCard,
.projCase .pmPanel--solo .pmCell--approach .csCard:first-child{
  padding: 0;
  border-top: 0;
}

/* Chapter titles (big, left bar): How It Works · Why This Project Matters. */
.projCase .pmTechnical > .pmEyebrow,
.projCase .pmSnapshotCard > .pmEyebrow{
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  padding-left: 16px;
  border-left: 4px solid var(--primary);
  color: var(--text);
  font-size: clamp(1.24rem, 1.8vw, 1.62rem);
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -0.018em;
  text-transform: none;
}

/* Cell (column) headings — medium, dark, no chapter bar. */
.projCase .pmBuildHead,
.projCase .pmTechnical .sectionLabel,
.projCase .pmTechnical .pmResults > .pmEyebrow,
.projCase .pmTechnical .csStackLabel{
  margin: 0 0 clamp(15px, 1.8vw, 20px);
  padding-left: 0;
  border-left: 0;
  color: var(--text);
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -0.014em;
  text-transform: none;
}

/* ==========================================================================
   How It Works — TWO side-by-side case-study panels:
     Panel 1 (top):    Approach Breakdown  |  Evidence & Validation
     Panel 2 (bottom): Outcomes            |  Technical Methods
   pmTechnical is a transparent wrapper; each panel is its own light card.
   ========================================================================== */
.projCase .pmTechnical{
  grid-column: 1 / -1;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.projCase .pmTechGrid{
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}

.projCase .pmPanel{
  display: grid;
  gap: clamp(24px, 3.4vw, 46px);
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148,163,184,0.28);
  box-shadow: 0 14px 38px rgba(15,23,42,0.05);
}

.projCase .pmPanel--top{
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

/* Bottom panel: Technical Methods on the LEFT, Outcomes on the RIGHT. */
.projCase .pmPanel--bottom{
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.projCase .pmPanel--bottom:has(.pmCell--methods) .pmCell--methods{
  grid-column: 1;
  grid-row: 1;
}

.projCase .pmPanel--bottom:has(.pmCell--methods) .pmCell--outcomes{
  grid-column: 2;
  grid-row: 1;
}

.projCase .pmPanel--solo,
.projCase .pmPanel--flow{
  grid-template-columns: minmax(0, 1fr);
}

:root[data-theme="dark"] .projCase .pmPanel{
  background: rgba(18,27,48,0.72);
  border-color: rgba(148,163,184,0.20);
}

/* A subtle column rule separates the two cells (carried by the right cell). */
.projCase .pmPanel--top .pmCell--evidence,
.projCase .pmPanel--bottom:has(.pmCell--methods) .pmCell--outcomes{
  padding-left: clamp(24px, 3.4vw, 46px);
  border-left: 1px solid rgba(148,163,184,0.24);
}

:root[data-theme="dark"] .projCase .pmPanel--top .pmCell--evidence,
:root[data-theme="dark"] .projCase .pmPanel--bottom:has(.pmCell--methods) .pmCell--outcomes{
  border-left-color: rgba(148,163,184,0.16);
}

/* Vertical variant (projects with an award/media image in Outcomes): the
   bottom panel stacks in one column so the image gets full width. */
.projCase .pmPanel--bottom.pmPanel--stack{
  grid-template-columns: minmax(0, 1fr);
}

.projCase .pmPanel--bottom.pmPanel--stack .pmCell--methods,
.projCase .pmPanel--bottom.pmPanel--stack .pmCell--outcomes{
  grid-column: auto;
  grid-row: auto;
  padding-left: 0;
  border-left: 0;
}

.projCase .pmPanel--bottom.pmPanel--stack .pmCell--methods{
  padding-top: clamp(22px, 2.8vw, 32px);
  border-top: 1px solid rgba(148,163,184,0.24);
}

:root[data-theme="dark"] .projCase .pmPanel--bottom.pmPanel--stack .pmCell--methods{
  border-top-color: rgba(148,163,184,0.16);
}

/* De-card the verbatim body sections now that the panels carry the framing. */
.projCase .pmTechnical .projectMediaGallery,
.projCase .pmTechnical .shiftShowcase,
.projCase .pmTechnical .pmResults,
.projCase .pmTechnical .csStack{
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Outcomes — proof tiles with a badge icon; flow to fit the Outcomes cell. */
.projCase .pmTechnical .pmResultsGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
}

.projCase .pmTechnical .pmResultCard{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 0;
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(148,163,184,0.26);
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
}

.projCase .pmResultIcon{
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(43,108,255,0.08);
  color: var(--primary);
}

.projCase .pmResultIcon svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.projCase .pmResultBody{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.projCase .pmResultKey{
  font-size: 0.9rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.projCase .pmResultDesc{
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted2);
}

.projCase .pmResultProof{
  background:
    linear-gradient(135deg, rgba(43,108,255,0.09), transparent 72%),
    rgba(255,255,255,0.95);
  border-color: rgba(37,99,235,0.22);
}

.projCase .pmResultProof .pmResultDesc{ color: var(--primaryDark); }

/* Optional award/media image surfaced above the Outcomes tiles. */
.projCase .pmOutcomeMedia{
  margin: 0 0 clamp(14px, 1.8vw, 20px);
}

.projCase .pmOutcomeMedia img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.22);
}

.projCase .pmOutcomeMedia figcaption{
  margin-top: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

/* When Outcomes carries a media image, sit the proof tiles in a vertical
   column to the RIGHT of the image (rather than a full-width image with tiles
   stacked below it), so the image stays a reasonable size. */
.projCase .pmResults:has(.pmOutcomeMedia){
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: clamp(22px, 2.6vw, 34px);
  align-items: start;
}

.projCase .pmResults:has(.pmOutcomeMedia) > .pmEyebrow{
  grid-column: 1 / -1;
}

.projCase .pmResults:has(.pmOutcomeMedia) .pmOutcomeMedia{
  grid-column: 1;
  margin: 0;
}

.projCase .pmResults:has(.pmOutcomeMedia) .pmResultsGrid{
  grid-column: 2;
  grid-template-columns: 1fr;
  align-content: start;
}

:root[data-theme="dark"] .projCase .pmTechnical .pmResultCard{
  background: rgba(15,23,42,0.5);
  border-color: rgba(148,163,184,0.18);
}

:root[data-theme="dark"] .projCase .pmResultProof{
  background:
    linear-gradient(135deg, rgba(77,143,255,0.16), transparent 72%),
    rgba(15,23,42,0.5);
  border-color: rgba(77,143,255,0.26);
}

:root[data-theme="dark"] .projCase .pmResultIcon{
  background: rgba(77,143,255,0.14);
  color: #93b4ff;
}

/* Media grid + tiles inside the panel */
.projCase .projectMediaGrid{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

/* Evidence figures stacked vertically (projects whose figures balance the tall
   Approach column better as a single column). */
.projCase .pmCell--evStack .projectMediaGrid{
  grid-template-columns: 1fr;
}

.projCase .projectMediaItem{
  padding: 0;
  border-radius: 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.projCase .projectMediaItem img,
.projCase .projectMediaItem video{
  border-radius: 12px;
}

.projectFigure--fullWidth,
.projectFigure--panoramic{
  grid-column: 1 / -1;
}

.projectFigureFrame{
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.projectFigureFrame img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

:root[data-theme="dark"] .csFigureMedia img,
:root[data-theme="dark"] .projCase .pmOutcomeMedia img,
:root[data-theme="dark"] .projCase .projectMediaItem img{
  filter: brightness(0.78) contrast(0.98) saturate(0.92);
  opacity: 0.9;
  transition: filter 180ms ease, opacity 180ms ease;
}

:root[data-theme="dark"] .projectFigureFrame{
  background: #fff;
  border-color: rgba(148,163,184,0.22);
  filter: brightness(0.78) contrast(0.98) saturate(0.92);
  opacity: 0.9;
  transition: filter 180ms ease, opacity 180ms ease;
}

:root[data-theme="dark"] .projectFigureFrame img{
  filter: none;
  opacity: 1;
}

:root[data-theme="dark"] .projCase .projectMediaItem .projectFigureFrame img{
  filter: none;
  opacity: 1;
}

:root[data-theme="dark"] .csFigure:hover .csFigureMedia img,
:root[data-theme="dark"] .projCase .projectMediaItem:hover img{
  filter: brightness(0.86) contrast(1.02) saturate(0.96);
  opacity: 1;
}

:root[data-theme="dark"] .projCase .projectMediaItem:hover .projectFigureFrame{
  filter: brightness(0.86) contrast(1.02) saturate(0.96);
  opacity: 1;
}

:root[data-theme="dark"] .projCase .projectMediaItem:hover .projectFigureFrame img{
  filter: none;
  opacity: 1;
}

.projectFigure--wide .projectFigureFrame{
  aspect-ratio: 16 / 9;
}

.projectFigure--square .projectFigureFrame{
  aspect-ratio: 1 / 1;
}

.projectFigure--tall .projectFigureFrame{
  aspect-ratio: 4 / 5;
}

.projectFigure--fullWidth .projectFigureFrame{
  aspect-ratio: 21 / 9;
}

.projectFigure--panoramic .projectFigureFrame{
  aspect-ratio: 5 / 1;
}

.projectFigureSource{
  display: inline;
  margin-left: 0.35em;
  font-size: 0.72em;
  line-height: 1.45;
  color: color-mix(in srgb, var(--muted2) 78%, transparent);
  font-weight: 500;
}

.projectMediaGallery[aria-labelledby^="tbme2024-media"] .projectMediaGrid{
  grid-template-columns: 1fr;
  gap: 28px;
}

.projectMediaGallery[aria-labelledby^="tbme2024-media"] .projectFigure{
  grid-column: 1 / -1;
  --tbme-figure-width: 1100px;
}

.projectMediaGallery[aria-labelledby^="tbme2024-media"] .projectFigure:nth-of-type(1){
  --tbme-figure-width: 960px;
}

.projectMediaGallery[aria-labelledby^="tbme2024-media"] .projectFigure:nth-of-type(2){
  --tbme-figure-width: 1040px;
}

.projectMediaGallery[aria-labelledby^="tbme2024-media"] .projectFigure:nth-of-type(3){
  --tbme-figure-width: 1180px;
}

.projectMediaGallery[aria-labelledby^="tbme2024-media"] .projectFigureFrame{
  aspect-ratio: auto;
  max-width: min(100%, var(--tbme-figure-width));
  margin-inline: auto;
}

.projectMediaGallery[aria-labelledby^="tbme2024-media"] .projectFigureFrame img{
  width: 100%;
  height: auto;
  max-height: none;
}

.projectMediaGallery[aria-labelledby^="tbme2024-media"] .projectFigure figcaption{
  max-width: min(100%, var(--tbme-figure-width));
  margin-inline: auto;
}

.projCase .csStackLabel{
  position: static;
}

.projCase .csStackLabel::before{
  content: none;
}

.projCase .csStackChips{
  gap: 10px 12px;
}

.projCase .csStackChips .chip{
  position: relative;
  min-height: 34px;
  padding: 7px 12px 7px 28px;
  color: #1e40af;
  background: rgba(239,246,255,0.82);
  border: 1px solid rgba(59,130,246,0.24);
  box-shadow: none;
}

.projCase .csStackChips .chip::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--primary);
  box-shadow: none;
}

:root[data-theme="dark"] .projCase .csStackChips .chip{
  color: #bfdbfe;
  background: rgba(77,143,255,0.12);
  border-color: rgba(77,143,255,0.24);
}

/* Why and related */
.projCase .pmWhy{
  padding: clamp(26px, 3vw, 34px);
  border: 1px solid rgba(148,163,184,0.34);
  border-left: 0;
  border-radius: 22px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 12px 34px rgba(15,23,42,0.05);
}

.projCase .pmWhyText{
  position: relative;
  max-width: none;
  padding-left: 32px;
}

.projCase .pmWhyText::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 4px;
  border-radius: 99px;
  background: var(--primary);
}

.pmRelatedAll{
  float: right;
  margin-top: -44px;
  color: var(--primary);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.pmRelatedAll:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pmRelatedGrid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pmRelatedCard{
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 14px;
  padding: 10px;
  min-height: 136px;
}

.pmRelatedThumb{
  overflow: hidden;
  border-radius: 12px;
  background: rgba(15,23,42,0.05);
}

.pmRelatedThumb img{
  width: 100%;
  height: 100%;
  min-height: 116px;
  display: block;
  object-fit: cover;
}

.pmRelatedBody{
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px 2px 4px 0;
}

.pmRelatedCta{
  margin-top: auto;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
}

.projCase .pmRelated{
  grid-column: 1 / -1;
  margin-top: clamp(30px, 3.5vw, 46px);
  padding-top: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid rgba(148,163,184,0.34);
}

.projCase .pmRelated > .pmEyebrow{
  margin-bottom: 16px;
  padding-left: 0;
  border-left: 0;
  color: #64748b;
  font-size: 0.95rem;
  letter-spacing: 0;
  font-weight: 800;
}

.projCase .pmRelatedAll{
  margin-top: -38px;
}

.projCase .pmRelatedGrid{
  gap: 12px;
}

.projCase .pmRelatedCard{
  background: rgba(255,255,255,0.58);
  border-color: rgba(148,163,184,0.26);
  box-shadow: none;
}

.projCase .pmRelatedCard:hover{
  box-shadow: 0 12px 26px rgba(15,23,42,0.07);
}

:root[data-theme="dark"] .projCase .pmRelated{
  border-top-color: rgba(148,163,184,0.20);
}

:root[data-theme="dark"] .projCase .pmRelated > .pmEyebrow{
  color: #94a3b8;
}

:root[data-theme="dark"] .projCase .pmRelatedCard{
  background: rgba(15,23,42,0.34);
  border-color: rgba(148,163,184,0.18);
}

@media (max-width: 1050px){
  .detailMain > .section.projCase{
    display: block;
  }

  .projCase .csHero--titleTop{
    display: block;
  }

  .projCase .csHero--titleTop .csBody{
    display: block;
  }

  .projCase .csHero--titleTop .csTitle{
    max-width: none;
  }

  .projCase .csHero--titleTop .csFigure{
    margin-top: 28px;
  }

  .pmSnapshotGrid,
  .pmRelatedGrid,
  .projCase .pmPanel--top,
  .projCase .pmPanel--bottom,
  .projCase .pmPanel--solo .pmCell--approach .csCards,
  .projCase .pmResults:has(.pmOutcomeMedia){
    grid-template-columns: 1fr;
  }

  /* Match the desktop :has() specificity so these actually override it. */
  .projCase .pmPanel--bottom:has(.pmCell--methods) .pmCell--methods,
  .projCase .pmPanel--bottom:has(.pmCell--methods) .pmCell--outcomes{
    grid-column: auto;
    grid-row: auto;
  }

  .projCase .pmResults:has(.pmOutcomeMedia) .pmResultsGrid{
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .projCase .pmResults:has(.pmOutcomeMedia) .pmOutcomeMedia{
    margin-bottom: clamp(14px, 3vw, 20px);
  }

  /* Clear every desktop column rule, then the visually-second cell (Methods,
     below Outcomes in reading order) gets a top divider. */
  .projCase .pmPanel--top .pmCell--evidence,
  .projCase .pmPanel--bottom:has(.pmCell--methods) .pmCell--outcomes,
  .projCase .pmPanel--bottom:has(.pmCell--methods) .pmCell--methods{
    padding-left: 0;
    border-left: 0;
  }

  .projCase .pmPanel--top .pmCell--evidence,
  .projCase .pmPanel--bottom .pmCell--methods{
    padding-top: clamp(22px, 4vw, 30px);
    border-top: 1px solid rgba(148,163,184,0.24);
  }

  :root[data-theme="dark"] .projCase .pmPanel--top .pmCell--evidence,
  :root[data-theme="dark"] .projCase .pmPanel--bottom .pmCell--methods{
    border-top-color: rgba(148,163,184,0.16);
  }
}

@media (max-width: 640px){
  .pmSnapshotCard,
  .projCase .pmPanel,
  .projCase .pmWhy{
    padding: 20px;
    border-radius: 18px;
  }

  .projCase .csHero--titleTop{
    padding: 22px;
  }

  .pmEvidenceRow,
  .pmEvidenceRow .pmFact{
    align-items: flex-start;
  }

  .pmEvidenceRow{
    flex-direction: column;
    gap: 12px;
  }

  .pmEvidenceRow .pmFact{
    display: block;
  }

  .pmRelatedAll{
    float: none;
    display: inline-block;
    margin: -8px 0 16px;
  }

  .pmRelatedCard{
    grid-template-columns: 112px minmax(0, 1fr);
  }
}

/* =========================================================================
   ShiftOS case study — unified editorial hierarchy
   One numbered chapter system (01–05) replaces the mixed legacy headings
   (pmEyebrow / sectionLabel / pressSectionTitle / mwEvolTitle). Legacy class
   names remain in the markup for compatibility; inside .shiftCase they are
   visually normalized to exactly four roles:
     1. chapter kicker   (.shiftSecKicker)     "02 · Field Evidence"
     2. chapter title    (.shiftSecTitle)      "Moonwalkers in Use"
     3. subsection title (.shiftSubhead map)   "Outcomes" · "Public Recognition"
     4. card label       (small caps, muted)   "My Role" · "Core Idea" · pills
   Placed at the end of the sheet so equal-specificity module rules lose the
   source-order tie inside .shiftCase.
   ========================================================================= */

/* --- Chapter header system --- */
.shiftCase .shiftSecHead{
  margin: 0 0 clamp(18px, 2.4vw, 26px);
}

.shiftCase .shiftSecKicker{
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.shiftCase .shiftSecTitle{
  margin: 0;
  font-size: clamp(1.3rem, 1.9vw, 1.66rem);
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.018em;
  color: var(--text);
}

/* --- Chapter rhythm: one consistent gap between top-level sections --- */
.shiftCase .pmSection,
.shiftCase .shiftSection{
  margin-top: clamp(44px, 5vw, 68px);
}

/* The snapshot card carries the chapter framing itself — no extra hairline. */
.shiftCase .pmSnapshot{
  border-top: 0;
  padding-top: 0;
}

/* --- Chapter panels: 02–04 reuse the module-panel card recipe --- */
.shiftCase .shiftPanel{
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148,163,184,0.28);
  box-shadow: 0 14px 38px rgba(15,23,42,0.05);
}

:root[data-theme="dark"] .shiftCase .shiftPanel{
  background: rgba(18,27,48,0.72);
  border-color: rgba(148,163,184,0.20);
}

/* Panels carry the framing: neutralize the inner evolution panel box and the
   legacy showcase offset so content sits directly in the chapter card. */
.shiftCase .shiftPanel .shiftEvolutionPanel{
  padding: 0;
  border: 0;
  background: none;
}

:root[data-theme="dark"] .shiftCase .shiftPanel .shiftEvolutionPanel{
  background: none;
}

.shiftCase .shiftShowcase{
  margin-top: 0;
}

/* --- Subsections inside Field Evidence (Outcomes · Public Recognition) --- */
.shiftCase .shiftPanel .pmSection{
  margin-top: clamp(26px, 3vw, 38px);
}

.shiftCase .pressSection{
  margin-top: clamp(26px, 3vw, 38px);
}

.shiftCase .pressSectionTitle,
.shiftCase .pmResults > .pmEyebrow{
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--text);
}

/* --- Control Roadmap header: subtitle + release notes tuck under the title --- */
.shiftCase .mwEvolHeader{
  margin-bottom: 1.4rem;
}

.shiftCase .mwEvolHeader .shiftSecHead{
  margin-bottom: 12px;
}

/* --- Card labels: one compact technical recipe everywhere --- */
.shiftCase .pmSnapshotItem .pmSubhead{
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
}

.shiftCase .pmFactLabel{
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.shiftCase .mwEvolSectionLabel,
.shiftCase .mwEvolResultLabel{
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

/* Calm, consistent body text inside the snapshot card. */
.shiftCase .pmSnapshotRoleText{
  font-size: 0.97rem;
}

/* --- Research Foundations (05): align the "View all" link with the title --- */
.shiftCase .pmRelated .pmRelatedAll{
  margin-top: -52px;
}

@media (max-width: 700px){
  .shiftCase .pmRelated .pmRelatedAll{
    float: none;
    display: inline-block;
    margin: -8px 0 16px;
  }
}