@font-face { font-family: "Sora"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(assets/fonts/sora-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/space-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* EctoSpace · ectospace.com
   Deep-field blue for the vastness, one coral accent, liquid glass on chrome,
   solid panels under anything you read. Apple system font (SF Pro) everywhere, no web fonts.
   The "Design system v4" block at the end of this file is the single source of truth for look and feel,
   and every page (home, About Me, SCT, Privacy) shares it. */

:root {
  --accent: #FF6B4A;
  --void: #081230;
  --horizon: #0B1640;
  --nebula: #2B4FC0;
  --text: #F4F2EC;
  --soft: #DCE2F5;
  --muted: #B4BCD8;
  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--void); color: var(--text); font: 400 1.0625rem/1.6 var(--font); -webkit-font-smoothing: antialiased; }
body * { font-family: inherit; }
h1, h2, h3, .name-line { font-family: var(--font-display); }
button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.logo-round {
  border-radius: 50% !important;
  clip-path: circle(50%);
  -webkit-clip-path: circle(50%);
  background: transparent !important;
  object-fit: cover;
  overflow: hidden;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; }
p { margin: 0; }

/* ---------- Shared pieces ---------- */
.glass {
  position: relative;
  background: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 45%, rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.08), 0 24px 70px rgba(3,5,28,.5);
}
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 15% 0%, rgba(255,255,255,.22), transparent 55%); }
.solid { background: rgba(9,16,44,.86); border: 1px solid rgba(255,255,255,.12); }
.pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 0; text-decoration: none; font-weight: 600; font-size: 16px; cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.pill:hover { transform: translateY(-2px); }
.pill-light { background: var(--text); color: var(--horizon); }
.pill-light:hover { background: #fff; color: var(--horizon); }
.pill-glass { color: var(--text); }
.pill-glass:hover { color: #fff; }
.tile { transition: transform .35s ease, border-color .35s ease; }
.tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.go { color: var(--accent); font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ---------- Portal ---------- */
.portal {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 45%, #14245E 0%, var(--void) 70%);
  display: flex; align-items: center; justify-content: center;
}
.portal.gone { display: none; }
html:not(.js) .portal { display: none; }
.p-stars, .stars {
  position: absolute; inset: -10%; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 78% 14%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 42% 8%,#ffd9cc 50%,transparent 51%),radial-gradient(1px 1px at 88% 52%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 71%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 64% 88%,#cfd8ff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 8% 42%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 94% 81%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 35% 40%,#ffd9cc 50%,transparent 51%),radial-gradient(1px 1px at 70% 32%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 55% 62%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 28% 86%,#cfd8ff 50%,transparent 51%);
}
.p-stars { animation: twinkle 5s ease-in-out infinite alternate; }
.stars { position: absolute; inset: 0; opacity: .5; }
@keyframes twinkle { from { opacity: .5; } to { opacity: .9; } }
.p-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 56px; }
.well { position: relative; width: 260px; height: 260px; border-radius: 50%; overflow: hidden; }
@keyframes breath { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
.ballbtn { position: absolute; inset: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; animation: float 6s ease-in-out infinite; }
.ballbtn:focus-visible { outline-offset: 12px; border-radius: 50%; }
.ballbtn img, .ballbtn .logo-round { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; clip-path: circle(50%); -webkit-clip-path: circle(50%); background: transparent; filter: drop-shadow(0 30px 70px rgba(43,79,192,.6)); transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hole { position: absolute; inset: 0; border-radius: 50%; opacity: 0; pointer-events: none; }
.disk {
  position: absolute; inset: -14%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--accent) 12%, #FFD0BF 18%, rgba(194,69,46,.2) 32%, transparent 45%, var(--accent) 62%, #FFD0BF 68%, rgba(194,69,46,.15) 82%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 38%, #000 58%, transparent 71%);
  mask: radial-gradient(circle, transparent 36%, #000 38%, #000 58%, transparent 71%);
  filter: blur(3px); animation: whirl .9s linear infinite;
}
@keyframes whirl { to { transform: rotate(360deg); } }
.core { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, #000 62%, #0b0702 72%, transparent 78%); box-shadow: 0 0 40px 10px rgba(0,0,0,.9); }
.lens { position: absolute; inset: 16%; border-radius: 50%; border: 2px solid rgba(255,208,191,.85); filter: blur(1.5px); }
.word { font-weight: 700; font-size: 34px; letter-spacing: .32em; transition: opacity .5s ease, letter-spacing .9s ease, filter .5s ease, transform .9s ease; }
.skip { position: absolute; right: 28px; bottom: 24px; background: none; border: 0; color: #C9D0EA; font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.skip:hover { color: #fff; }


/* site appears out of the hole */
.js .site { opacity: 0; }
/* backwards, not both: a held transform/filter on .site would trap the fixed nav and make it scroll away */
.site.emerge { opacity: 1; animation: emerge 1.1s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes emerge { from { opacity: 0; transform: scale(1.06); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }
.rise { opacity: 0; }
.site.emerge .rise { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .35s; }
.site.emerge .r2 { animation-delay: .47s; } .site.emerge .r3 { animation-delay: .59s; } .site.emerge .r4 { animation-delay: .71s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
html:not(.js) .rise { opacity: 1; }

/* ---------- Site ---------- */
.site { position: relative; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,-40px) scale(1.12); } }
.wrap { position: relative; max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.section { padding-top: 60px; padding-bottom: 110px; }
.section h2 { font-size: clamp(40px, 5vw, 64px); }
.sub { margin: 12px 0 40px; max-width: 62ch; font-size: 18px; line-height: 1.6; color: var(--muted); }
.body { margin-top: 18px; max-width: 50ch; font-size: 19px; line-height: 1.6; color: var(--soft); }
.muted { color: var(--muted); font-size: 17px; }
.two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }

.topnav {
  position: fixed; left: 50%; top: 16px; z-index: 50;
  display: flex; justify-content: center;
  width: min(1100px, 94vw); transform: translateX(-50%);
  animation: header-fade-in .4s ease-out both;
}
@keyframes header-fade-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.navbar { display: flex; align-items: center; gap: 18px; padding: 8px 8px 8px 16px; border-radius: 999px; width: 100%; }
.brand, .brand-link {
  display: inline-flex; align-items: center; gap: 0;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  text-decoration: none; color: var(--text); font-family: var(--font-display);
  font-weight: 700; font-size: 17px; letter-spacing: -.01em;
  min-height: 44px; border-radius: 999px;
}
.brand:hover, .brand-link:hover { color: #fff; }
.brand-ball { width: 36px; height: 36px; flex-shrink: 0; }
.brand-long {
  display: block; height: 36px; width: auto; max-width: 140px; opacity: 1;
  object-fit: contain; object-position: left center; margin: 0;
  pointer-events: none;
}
.navlinks { display: flex; gap: 14px; margin-left: 12px; }
.navlink { color: #C9D0EA; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: -.01em; padding: 12px 6px; position: relative; }
.navlink:hover, .navlink.on { color: #fff; }
.navlink.on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--accent); }
.nav-social { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; text-decoration: none;
  color: var(--horizon); background: var(--text);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.icon-btn:hover { transform: translateY(-2px); background: #fff; color: var(--horizon); }
.icon-btn svg { display: block; }

.hero { padding-top: 140px; padding-bottom: 140px; }
.hero h1 { font-size: clamp(52px, 6.4vw, 96px); line-height: .92; letter-spacing: -.04em; }
.hero-ecto {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px; align-items: center;
}
.hero-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-logo-btn {
  display: grid; place-items: center; padding: 0; border: 0; background: transparent;
  cursor: pointer; min-height: 44px; border-radius: 50%; position: relative;
}
.hero-logo-btn::after {
  content: ""; position: absolute; inset: -70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(70,110,235,.26) 0%, rgba(43,79,192,.12) 32%, rgba(43,79,192,.04) 52%, transparent 70%);
  opacity: .7; pointer-events: none; animation: breath 5s ease-in-out infinite;
}
.hero-ball {
  position: relative; z-index: 1;
  width: min(240px, 56vw); height: auto; aspect-ratio: 1;
  filter: drop-shadow(0 24px 60px rgba(43,79,192,.4));
  transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease;
  animation: float 6s ease-in-out infinite;
  clip-path: none; -webkit-clip-path: none; border-radius: 0 !important;
}
.hero-logo-btn:hover .hero-ball { transform: scale(1.04); filter: drop-shadow(0 36px 80px rgba(90,130,255,.7)); }
.hero-logo-btn:focus-visible { outline: 2px solid rgba(220,230,255,.75); outline-offset: 12px; }
.mark-word {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: .22em; text-transform: uppercase; color: #C9D0EA;
}
.page-about .site { opacity: 1; }
.manifesto .cta { margin-top: 28px; }
@media (max-width: 900px) {
  .hero-ecto { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; }
  .hero-ecto .cta { justify-content: center; }
  .hero-ecto .lede { margin-left: auto; margin-right: auto; }
}
.role { margin-top: 28px; font-weight: 500; font-size: 24px; color: var(--soft); }
.lede { margin-top: 18px; max-width: 54ch; font-size: 19px; line-height: 1.6; color: var(--muted); }
.creds { margin-top: 40px; font-size: 15px; color: #9AA3C2; }
.portrait { position: relative; justify-self: center; width: min(100%, 420px); }
.frame { padding: 14px; border-radius: 36px; }
.frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: 26px; }
.mini-ball { position: absolute; width: 110px; left: -46px; bottom: 40px; border-radius: 50%; clip-path: circle(50%); filter: drop-shadow(0 18px 40px rgba(110,140,255,.45)); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 20px; }
.span2 { grid-column: span 2; } .row2 { grid-row: span 2; }
.sct { border-radius: 32px; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.sct h3 { font-size: 34px; }
.sct > p { font-size: 17px; line-height: 1.6; color: var(--soft); max-width: 52ch; }
.sct .cta { margin-top: auto; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 150px; }
.bar { flex: 1; border-radius: 4px; background: linear-gradient(180deg, var(--accent), var(--nebula)); transform-origin: bottom; animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.86); } }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.facts .solid { border-radius: 18px; padding: 16px; }
.facts strong { display: block; font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--accent); overflow-wrap: break-word; hyphens: manual; }
.facts span { display: block; font-size: 14px; color: #C9D0EA; margin-top: 4px; }
.proj { border-radius: 32px; padding: 30px; display: flex; gap: 26px; align-items: center; text-decoration: none; color: var(--text); }
.proj:hover { color: var(--text); }
.proj img { width: 104px; height: 140px; object-fit: contain; flex-shrink: 0; }
.proj div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.proj h3 { font-size: 28px; }
.proj p { font-size: 16px; line-height: 1.55; color: #C9D0EA; }

.shot { padding: 14px; border-radius: 34px; }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; }

.music { border-radius: 34px; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.artist { color: #C9D0EA; font-weight: 500; margin-bottom: 10px; }
.player iframe { display: block; width: 100%; border: 0; border-radius: 16px; }

.article { border-radius: 28px; padding: 28px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 10px; }
.article:hover { color: var(--text); }
.a-title { font-weight: 700; font-size: 24px; letter-spacing: -.01em; }
.a-sum { font-size: 16px; line-height: 1.55; color: #C9D0EA; }

.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 14px; grid-auto-flow: dense; }
.tile-img { padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; background: var(--horizon); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .5s ease; }
.tile-img:hover img { transform: scale(1.03); }
.tile-img.tall { grid-row: span 2; }
.tile-img.wide { grid-column: span 2; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.chip { border-radius: 999px; padding: 12px 20px; font-size: 15px; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
.lightbox::backdrop { background: rgba(4, 8, 24, .9); }
.lightbox img { max-width: 94vw; max-height: 84vh; border-radius: 12px; }
.lightbox form { text-align: right; margin-bottom: 8px; }
.lb-close { background: var(--horizon); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 10px 16px; cursor: pointer; font-weight: 600; min-height: 44px; }

.about { border-radius: 36px; padding: clamp(28px, 5vw, 64px); }
.about-text { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; max-width: 64ch; font-size: 19px; line-height: 1.65; color: var(--soft); }

/* ---------- Quality ---------- */
/* ---------- QA Vision · Epic purple liquid glass ---------- */
.qa-vision {
  position: relative;
  padding: 80px 0 120px;
  margin: 20px 0 40px;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(168, 85, 247, 0.35), transparent 55%),
    radial-gradient(700px 480px at 95% 20%, rgba(124, 58, 237, 0.28), transparent 50%),
    radial-gradient(800px 520px at 50% 100%, rgba(192, 132, 252, 0.18), transparent 55%),
    linear-gradient(180deg, #1a0b2e 0%, #12081f 45%, #0b0618 100%);
  border-block: 1px solid rgba(216, 180, 254, 0.22);
}
.qa-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 14%, rgba(233,213,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 42% 72%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 58%, rgba(216,180,254,.6) 50%, transparent 51%);
  opacity: .55;
}
.qa-inner { position: relative; z-index: 1; }
.qa-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px; color: #e9d5ff; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; font-size: 12px;
}
.qa-kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #c084fc; box-shadow: 0 0 16px #c084fc;
}
.qa-title { color: #f5f3ff; }
.qa-title .ico { color: #e9d5ff; }
.qa-lede {
  margin: 14px 0 36px; max-width: 58ch; font-size: 20px; line-height: 1.6; color: #ddd6fe;
}
.qa-glass {
  position: relative;
  border-radius: 28px; padding: clamp(22px, 3vw, 36px);
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(168,85,247,.08) 40%, rgba(255,255,255,.05));
  border: 1px solid rgba(233, 213, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 24px 70px rgba(40, 10, 70, .45);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  overflow: hidden;
}
.qa-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 12% 0%, rgba(255,255,255,.2), transparent 55%);
}
.qa-glass h3 {
  position: relative; margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 30px); color: #faf5ff;
}
.qa-glass p, .qa-list, .qa-steps { position: relative; color: #e9e0ff; font-size: 17px; line-height: 1.65; max-width: 62ch; }
.qa-glass p + p { margin-top: 12px; }
.qa-hero-card, .qa-split, .qa-swarm-card {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center;
  margin-bottom: 22px;
}
.qa-split.reverse { grid-template-columns: 0.95fr 1.05fr; }
.qa-split.reverse .qa-copy { order: 1; }
.qa-split.reverse .qa-figure { order: 2; }
.qa-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px;
}
.qa-figure { margin: 0; position: relative; }
.qa-figure img {
  width: 100%; height: auto; aspect-ratio: 14 / 9; object-fit: cover; object-position: center;
  border-radius: 20px; border: 1px solid rgba(233,213,255,.25);
  box-shadow: 0 18px 50px rgba(20, 0, 40, .4);
}
.qa-figure figcaption {
  margin-top: 10px; font-size: 14px; color: #c4b5fd; line-height: 1.45;
}
.qa-list, .qa-steps { margin: 10px 0 0; padding-left: 1.15em; }
.qa-list li + li, .qa-steps li + li { margin-top: 10px; }
.qa-list strong, .qa-steps strong { color: #f5f3ff; }
.qa-note {
  margin-top: 18px !important; padding: 12px 14px; border-radius: 14px;
  background: rgba(168, 85, 247, 0.18); border: 1px solid rgba(216, 180, 254, 0.35);
  color: #f3e8ff !important; font-weight: 600;
}
.qa-swarm-card { grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 900px) {
  .qa-hero-card, .qa-split, .qa-split.reverse, .qa-swarm-card, .qa-grid {
    grid-template-columns: 1fr;
  }
  .qa-split.reverse .qa-copy, .qa-split.reverse .qa-figure { order: unset; }
}
@media (prefers-reduced-motion: reduce) {
  .qa-vision { background-attachment: scroll; }
}

.word-keep { display: inline-block; white-space: nowrap; }
.name-line { display: block; }
.page-about .hero h1 { line-height: 1.02; }

.tl { list-style: none; padding: 0; margin: 56px 0 0; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; }
.tl::before { content: ""; position: absolute; left: 9px; right: 0; top: 8px; height: 2px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 15%, transparent)); }
.tl li { position: relative; padding-top: 34px; display: flex; flex-direction: column; }
.tl .dot { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); }
.tl b { font-size: 22px; color: var(--accent); }
.tl strong { margin-top: 6px; font-size: 16px; }
.tl li > span:last-child { margin-top: 2px; font-size: 15px; color: #C9D0EA; }

.foot { display: flex; align-items: center; gap: 12px; padding-top: 24px; padding-bottom: 48px; color: var(--muted); font-size: 15px; }
.foot img { width: 26px; height: 26px; border-radius: 50%; clip-path: circle(50%); }
.foot a { color: var(--muted); }
.foot a:first-of-type { margin-left: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .two, .music { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl::before { display: none; }
  .hero { padding-top: 72px; padding-bottom: 90px; }
  .portrait { justify-self: start; width: min(80%, 340px); }
}
@media (max-width: 560px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: span 1; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .proj { flex-direction: column; align-items: flex-start; }
  .well { width: 200px; height: 200px; }
  .word { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .js .site { opacity: 1; }
}

/* ---------- Section icons ---------- */
.sec { display: flex; align-items: center; gap: 18px; }
.ico { flex-shrink: 0; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: var(--accent);
  background: linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px rgba(3,5,28,.4); }
.kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; color: var(--muted); font-weight: 600; font-size: 18px; }
.kicker .ico { width: 48px; height: 48px; border-radius: 16px; }

/* ---------- Acting: courses and screen experience ---------- */
.courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.course { border-radius: 28px; padding: 28px; display: flex; gap: 20px; align-items: flex-start; }
.badge { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--horizon); background: var(--text); overflow: hidden; }
.badge-logo { padding: 0; background: #fff; }
.badge-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.course h3 { font-size: 24px; }
.cs { margin-top: 4px; color: var(--muted); font-size: 15px; }
.course ul { margin: 14px 0 0; padding-left: 18px; columns: 2; column-gap: 24px; color: var(--soft); font-size: 15px; line-height: 1.5; }
.course li { margin: 0 0 6px; break-inside: avoid; }
.course li::marker { color: var(--accent); }
.seen { margin-top: 44px; text-align: center; }
.seen-label { color: var(--muted); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.seen-sub { color: var(--muted); opacity: .7; font-size: 13px; margin: 4px 0 0; }
.seen-row { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 48px; }
.title-card { color: #E9E6DD; opacity: .85; line-height: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.title-card small { font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.tc1 { font-weight: 800; font-size: 30px; letter-spacing: .2em; text-transform: uppercase; }
.tc2 { font-family: Georgia, "Times New Roman", serif !important; font-size: 34px; letter-spacing: .02em; }
.tc2 small { font-family: var(--font) !important; }
.tc3 { font-weight: 300; font-size: 32px; letter-spacing: .32em; text-transform: uppercase; }
.seen-note { margin-top: 14px; color: #8E97B8; font-size: 14px; }

/* ---------- About: things done ---------- */
.done-h { margin-top: 44px; font-size: 22px; }
.done { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.done li { position: relative; padding-left: 26px; color: var(--soft); font-size: 17px; line-height: 1.5; }
.done li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); }

@media (max-width: 900px) {
  .courses, .done { grid-template-columns: minmax(0, 1fr); }
  .course ul { columns: 1; }
  .ico { width: 46px; height: 46px; border-radius: 14px; }
  .sec { gap: 14px; }
}
.course-link { color: var(--text); text-decoration: none; }
.course-link:hover { color: var(--accent); text-decoration: underline; }
.logo-tile { height: 120px; width: 120px; border-radius: 18px; overflow: hidden; background: #050a1c; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 40px rgba(3,5,28,.45); }
.logo-tile.wide { width: 260px; }
.logo-tile img { width: 100%; height: 100%; object-fit: cover; }
.logo-tile.wide img { object-fit: contain; }
@media (max-width: 560px) { .logo-tile { height: 96px; width: 96px; } .logo-tile.wide { width: 208px; } }

/* =========================================================
   Portal v2: still glass, turning universe, black hole
   ========================================================= */
.ball-spin { position: absolute; inset: 0; display: block; border-radius: 50%; will-change: transform; }
.universe {
  position: absolute; left: 21.5%; top: 21%; width: 53%; height: 53%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #1b2678 0%, #0b1144 52%, #050822 100%);
  -webkit-mask: radial-gradient(circle, #000 62%, transparent 74%); mask: radial-gradient(circle, #000 62%, transparent 74%);
}
.galaxy {
  position: absolute; inset: -25%; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.55) 0 3%, transparent 14%),
    conic-gradient(from 0deg, transparent 0 6%, rgba(169,139,255,.65) 11%, transparent 21%, rgba(95,224,208,.5) 36%, transparent 47%, rgba(169,139,255,.55) 61%, transparent 71%, rgba(95,224,208,.45) 86%, transparent 96%);
  filter: blur(5px);
  -webkit-mask: radial-gradient(circle, #000 20%, rgba(0,0,0,.65) 45%, transparent 70%); mask: radial-gradient(circle, #000 20%, rgba(0,0,0,.65) 45%, transparent 70%);
  animation: galaxy 26s linear infinite;
}
@keyframes galaxy { to { transform: rotate(360deg); } }
.ustars {
  position: absolute; inset: 0; animation: galaxy 60s linear infinite reverse;
  background-image: radial-gradient(1px 1px at 20% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70% 22%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 62% 70%,#d9e2ff 50%,transparent 51%),radial-gradient(1px 1px at 32% 76%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 84% 52%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 46% 12%,#fff 50%,transparent 51%);
}
.ucore { position: absolute; left: 50%; top: 50%; width: 18%; height: 18%; margin: -9% 0 0 -9%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.85), rgba(169,139,255,.25) 50%, transparent 70%); filter: blur(2px); }
.particles { position: absolute; inset: 0; pointer-events: none; }
.pt { position: absolute; width: 0; height: 0; }
.pd { position: absolute; left: 0; top: 0; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); opacity: .55; }
.pd.warm { background: #FFD0BF; box-shadow: 0 0 8px var(--accent); }
.word span { display: inline-block; will-change: transform; animation: glint 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * 120ms); }
@keyframes glint { 0%, 70%, 100% { color: var(--text); text-shadow: none; } 80% { color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 80%, transparent); } }

/* =========================================================
   Hand-drawn icons
   ========================================================= */
.ico { width: 64px; height: 64px; border-radius: 20px; transform: rotate(-3deg); }
.kicker .ico { width: 56px; height: 56px; }
.ico svg { overflow: hidden; }
.ico .blob { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.ico .d { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: url(#sketch); }
.ico .fill { fill: currentColor; filter: url(#sketch); }
.ico .dash { stroke-dasharray: 3 5; }
.ico.armed .d:not(.dash) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ico.armed .fill { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.ico.drawn .d:not(.dash) { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
.ico.drawn .fill { opacity: 1; transform: none; transition: opacity .4s ease 1s, transform .5s cubic-bezier(.3,1.6,.5,1) 1s; }
.sec:hover .ico svg, .kicker:hover .ico svg { animation: wiggle .7s ease-in-out; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }

/* =========================================================
   Text and element motion
   ========================================================= */
.hero h1 .ch { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(6deg); filter: blur(10px); }
.site.emerge .hero h1 .ch { animation: chIn .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.25s + var(--i) * 38ms); }
@keyframes chIn { to { opacity: 1; transform: none; filter: none; } }
.sec .w { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(6px); }
.sec.in .w { opacity: 1; transform: none; filter: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease; transition-delay: calc(var(--i) * 90ms + .15s); }
.rv { opacity: 0; translate: 0 34px; }
.rv.in { opacity: 1; translate: 0 0; transition: opacity .9s ease, translate .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.tilt { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .35s ease; }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 60%); }
.tilt:hover::after { opacity: 1; }
.tilt.tracking { transition: transform .08s linear, border-color .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .hero h1 .ch, .sec .w, .rv, .ico.armed .d, .ico.armed .fill { opacity: 1 !important; transform: none !important; filter: none !important; translate: none !important; stroke-dashoffset: 0 !important; }
}

/* =========================================================
   Portal v3: canvas black hole, shattering glass, word reveal
   ========================================================= */
.p-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
.p-center { z-index: 2; }
.skip { z-index: 5; }
.glow {
  position: absolute; inset: -70px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(110,140,255,.38), rgba(160,120,255,.14) 45%, transparent 70%);
  filter: blur(12px); animation: breath 4s ease-in-out infinite; transition: opacity .5s ease, transform .5s ease;
}
.well:hover .glow { opacity: 1; transform: scale(1.12); }
.ball-tilt { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.ballbtn img { transition: filter .5s ease; }
.ballbtn:hover img { transform: none; filter: drop-shadow(0 30px 90px rgba(120,150,255,.6)); }
.uhole {
  position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; margin: -19% 0 0 -19%; border-radius: 50%; transform: scale(0);
  background: radial-gradient(circle, #000 54%, #160705 61%, rgba(255,107,74,.95) 67%, rgba(255,214,196,.75) 71%, rgba(255,107,74,.25) 77%, transparent 84%);
  box-shadow: 0 0 30px rgba(255,107,74,.45);
}
.word {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%);
  margin: 0; white-space: nowrap; pointer-events: none; opacity: 0;
  font-size: clamp(54px, 10vw, 132px); font-weight: 700; letter-spacing: -.035em; line-height: 1; color: #fff;
  text-shadow: 0 0 30px rgba(255,150,120,.45), 0 0 90px rgba(90,120,255,.45);
  transition: none;
}
.word .lt { display: inline-block; animation: none; will-change: transform, opacity, filter; }
.portal.leaving { pointer-events: none; }

/* =========================================================
   Site FX: cursor light, button shine, magnetic pull, parallax
   ========================================================= */
.spot {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(520px circle at var(--x, 50%) var(--y, 50%), rgba(120,150,255,.10), rgba(255,107,74,.04) 40%, transparent 65%);
}
.site.lit .spot { opacity: 1; }
main, .foot { position: relative; z-index: 1; }
.topnav { position: fixed; z-index: 50; }
.site > main { padding-top: var(--nav-h, 60px); }
.pill { position: relative; overflow: hidden; isolation: isolate; }
.pill::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); opacity: 0;
}
.pill:hover::after { animation: sheen .9s ease forwards; }
@keyframes sheen { from { left: -60%; opacity: 1; } to { left: 120%; opacity: 1; } }
.mag { transition: translate .35s cubic-bezier(.2,.7,.2,1); }
.mag.pulling { transition: translate .08s linear; }
.orb { transition: none; }
.frame img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.portrait:hover .frame img { transform: scale(1.03); }
.navbar { transition: background .4s ease, box-shadow .4s ease; }
.topnav.scrolled .navbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 18px 50px rgba(3,5,28,.65); }
@media (prefers-reduced-motion: reduce) { .spot, .pill::after { display: none; } }
.ballbtn:focus-visible { outline: 2px solid rgba(220,230,255,.7); outline-offset: 14px; }
.ballbtn:focus:not(:focus-visible) { outline: none; }


/* ---------- EctoLedger-style reveal helpers ---------- */
.manifesto, .hero-ecto .hero-copy { animation: fade-up .72s cubic-bezier(.22,1,.36,1) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.word, .mark-word, .brand-long { font-family: var(--font-display); }


:root { --nav-h: 60px; }
.sec-words { min-width: 0; }

/* ---------- Legal page (privacy) ---------- */
.legal { border-radius: 32px; padding: clamp(26px, 5vw, 56px); margin-top: 72px; margin-bottom: 60px; }
.legal h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.02; }
.legal .updated { margin-top: 14px; color: var(--muted); font-size: 16px; max-width: 64ch; }
.legal h2 { margin-top: 36px; font-size: 22px; }
.legal p, .legal li { margin-top: 10px; color: var(--soft); font-size: 17px; line-height: 1.65; max-width: 68ch; }
.legal ul { margin: 6px 0 0; padding-left: 20px; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--accent); }
.legal a:hover { color: #fff; }

/* ---------- Last visual pass: small-screen fixes ---------- */
h1, h2, h3 { text-wrap: balance; }
.foot { flex-wrap: wrap; row-gap: 10px; }
.foot img { flex-shrink: 0; }
@media (max-width: 900px) {
  .hero-ecto .kicker { justify-content: center; }
}
@media (max-width: 560px) {
  .foot { column-gap: 10px; }
  .foot > span { flex: 1 1 calc(100% - 40px); }
  .foot a:first-of-type { margin-left: 36px; }
  .foot a { white-space: nowrap; }
  .mini-ball { width: 84px; left: -18px; bottom: 28px; }
}


/* =========================================================
   Design system v4: slim, calm, liquid glass, Apple type
   One layer, all pages. Edit tokens here, not per page.
   ========================================================= */
:root {
  --r-lg: 28px; --r-md: 20px; --r-sm: 14px;
  --hair: rgba(255,255,255,.14);
  --ease: cubic-bezier(.2,.7,.2,1);
  --sp-section: 88px;
}
body { font-weight: 400; letter-spacing: -.003em; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.022em; line-height: 1.08; }
h3 { letter-spacing: -.014em; }
strong, b { font-weight: 600; }

/* glass: thinner edge, softer shadow, brighter top highlight */
.glass {
  background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.04) 48%, rgba(255,255,255,.07));
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.05), 0 18px 50px rgba(3,5,28,.38);
}
.glass::before { background: radial-gradient(120% 55% at 14% 0%, rgba(255,255,255,.16), transparent 55%); }
.solid { background: rgba(9,16,44,.8); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* rhythm */
.section { padding-top: 40px; padding-bottom: var(--sp-section); }
.section h2, .sec { font-size: clamp(30px, 3.6vw, 44px); }
.sec { gap: 16px; }
.sub { margin: 10px 0 32px; font-size: 17px; }
.body { font-size: 18px; }
.lede { font-size: 18px; }
.hero { padding-top: 132px; padding-bottom: 96px; }
.hero h1 { font-size: clamp(44px, 5.6vw, 80px); line-height: .98; letter-spacing: -.035em; font-weight: 700; }
.mark-word { font-weight: 600; font-size: 12px; letter-spacing: .28em; }
.kicker { font-weight: 600; font-size: 16px; }
.cta { margin-top: 28px; gap: 12px; }
.role { font-size: 21px; font-weight: 500; }

/* controls */
.pill { min-height: 44px; padding: 0 20px; font-size: 15px; font-weight: 500; letter-spacing: -.005em; }
.pill-glass { border-color: var(--hair); }
.navlink { font-weight: 500; font-size: 14.5px; color: #CBD2EC; }
.navlink.on { color: #fff; }
.navlink.on::after { height: 2px; bottom: 7px; }
.navbar { padding: 6px 6px 6px 18px; gap: 10px; }
.navlinks { gap: 8px; }
.icon-btn { width: 40px; height: 40px; background: rgba(255,255,255,.1); color: var(--text); border: 1px solid var(--hair); }
.icon-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.go { font-weight: 500; font-size: 15px; }
.go::after { content: " \2192"; display: inline-block; transition: transform .3s var(--ease); }
a:hover .go::after, .go:hover::after { transform: translateX(3px); }

/* surfaces: fewer radii, one scale */
.about, .legal { border-radius: var(--r-lg); }
.sct, .proj, .music, .course, .article { border-radius: var(--r-lg); }
.shot { border-radius: var(--r-lg); padding: 10px; }
.shot img { border-radius: 20px; }
.sct { padding: 32px; }
.sct h3 { font-size: 30px; }
.proj { padding: 26px; }
.proj h3 { font-size: 24px; }
.tile:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.28); }
.facts strong { font-weight: 600; font-size: 20px; }
.facts .solid { border-radius: var(--r-sm); }
.a-title { font-weight: 600; font-size: 22px; }
.course h3 { font-size: 21px; }
.tile-img { border-radius: var(--r-sm); }

/* icons: quiet line marks, no wobble */
.ico { width: 48px; height: 48px; border-radius: 15px; transform: none; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); border-color: var(--hair); }
.ico svg { width: 30px; height: 30px; }
.kicker .ico { width: 44px; height: 44px; }
.ico .d { stroke-width: 2; filter: none; }
.ico .fill { filter: none; }
.ico .blob { fill: color-mix(in srgb, var(--accent) 12%, transparent); }

/* quiet the background */
.orb { filter: blur(120px); }
.stars { opacity: .4; }

/* QA section keeps its purple identity but uses the same type, radii and hairlines */
.qa-vision { padding: 72px 0 96px; }
.qa-title { font-size: clamp(30px, 3.6vw, 44px); }
.qa-glass { border-radius: var(--r-lg); border-color: rgba(233,213,255,.22); }
.qa-glass h3 { font-weight: 600; }
.qa-kicker { font-weight: 600; letter-spacing: .12em; }

/* page header block for inner pages (SCT, Privacy) */
.page-head { padding-top: 120px; padding-bottom: 8px; }
.page-head h1 { margin-top: 14px; font-size: clamp(36px, 5vw, 60px); max-width: 18ch; font-weight: 700; letter-spacing: -.03em; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.eyebrow { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* in-page jump bar: tells people what is on a long page */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jump a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #CBD2EC; text-decoration: none; border: 1px solid var(--hair); background: rgba(255,255,255,.05); transition: background .25s ease, color .25s ease; }
.jump a:hover, .jump a.on { background: rgba(255,255,255,.14); color: #fff; }

/* footer: one layout everywhere */
.foot { border-top: 1px solid var(--hair); margin-top: 24px; padding-top: 28px; font-size: 14px; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 900px) {
  :root { --sp-section: 64px; }
  .hero { padding-top: 64px; padding-bottom: 64px; }
  .page-head { padding-top: 40px; }
}

/* =========================================================
   Nav v6: one compact pill bar, hamburger menu on phones
   ========================================================= */
.nav-cta, .nav-toggle, .nav-menu { display: none; }
.navlink.on { color: #fff; }
.nav-toggle {
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--hair); border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.1); color: var(--text); position: relative; flex-shrink: 0;
}
.nt-bars, .nt-bars::before, .nt-bars::after { display: block; position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease), opacity .2s ease; }
.nt-bars { top: 50%; margin-top: -1px; }
.nt-bars::before, .nt-bars::after { content: ""; margin-left: -9px; left: 0; }
.nt-bars::before { top: -6px; }
.nt-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nt-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nt-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nt-bars::after { top: 0; transform: rotate(-45deg); }
.nav-toggle:hover { background: rgba(255,255,255,.2); }

@media (min-width: 641px) and (max-width: 760px) {
  .navbar { gap: 6px; padding-left: 14px; }
  .navlinks { margin-left: 4px; gap: 2px; }
  .navlink { font-size: 13.5px; padding: 12px 5px; }
}

@media (max-width: 640px) {
  :root { --nav-h: 66px; }
  html { scroll-padding-top: 78px; }
  .topnav { top: 8px; width: min(1100px, calc(100vw - 16px)); }
  .navbar { flex-wrap: nowrap; gap: 8px; padding: 6px 6px 6px 14px; height: 56px; max-height: 60px; }
  .navlinks, .nav-social { display: none; }
  .brand-link { margin-right: auto; min-width: 0; }
  .brand-long { max-width: 128px; height: 32px; }
  .nav-cta { display: inline-flex; min-height: 44px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
  .nav-toggle { display: block; }
  .nav-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 8px; border-radius: 24px;
    flex-direction: column; gap: 2px; z-index: 60;
    background: linear-gradient(150deg, rgba(30,42,98,.985), rgba(10,16,44,.99));
    animation: menu-in .22s var(--ease) both;
  }
  .nav-menu:not([hidden]) { display: flex; }
  .nav-menu a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 16px; color: #E4E9FA; text-decoration: none; font-weight: 500; font-size: 16px; position: relative; z-index: 1; }
  .nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(255,255,255,.1); color: #fff; }
  .nav-menu a[aria-current] { color: #fff; background: rgba(255,255,255,.08); }
  .nav-menu a[aria-current]::after { content: ""; position: absolute; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .nm-sep { display: block; height: 1px; margin: 6px 12px; background: var(--hair); position: relative; z-index: 1; }
  .hero, .hero-center { padding-top: 20px; padding-bottom: 56px; }
  .qa-page { padding-top: 24px; }
  .legal { margin-top: 28px; }
  .nf { padding-top: 40px; }
}
@media (max-width: 360px) {
  .brand-long { max-width: 108px; height: 28px; }
  .nav-cta { padding: 0 12px; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-menu { animation: none !important; } }


/* SCT: green-tinted glass nav, darker once the page scrolls (same behaviour as the main site) */
.navbar.glass { background: linear-gradient(150deg, rgba(14,58,48,.72), rgba(4,22,18,.86)); }
.topnav.scrolled .navbar.glass { background: linear-gradient(150deg, rgba(14,58,48,.92), rgba(4,22,18,.94)); }
.nav-menu.glass { background: linear-gradient(150deg, rgb(14,50,42), rgb(4,22,18)); }
@media (max-width: 640px) {
  .nav-menu.glass { background: linear-gradient(150deg, rgb(14,50,42), rgb(4,22,18)); }
  .page-head { padding-top: 24px; }
  .jump { position: static !important; margin-top: 18px; }
  html { scroll-padding-top: 78px !important; }
}
/* =========================================================
   Final polish: type weights, balance, small screens
   ========================================================= */
.fact strong, .step b, .verdict em { font-weight: 600; }
.eyebrow, h1, h2, h3, .sub, .lede { text-wrap: balance; }
.panel ul + p, .panel ul + h3 { margin-top: 18px; }
.panel ul { margin-bottom: 4px; }
.eyebrow, .tag { letter-spacing: .2em; }
@media (max-width: 560px) {
  .foot { padding-bottom: 20px; row-gap: 0; }
  .foot > span { flex: 1 1 calc(100% - 40px); margin-bottom: 4px; }
  .foot a, .foot a:first-of-type { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; padding-right: 14px; }
}