/* ── atas.vc · quiet ────────────────────────────────────────────
   shared stylesheet for all pages under /quiet/.
   aesthetic: pure black, mint accent, mono corners, thin inter body.
   ─────────────────────────────────────────────────────────────── */

:root {
  --g:      #4ECD89;
  --g-2:    #6CE8A3;
  --g-soft: rgba(78,205,137,.55);
  --g-dim:  rgba(78,205,137,.28);
  --g-ink:  rgba(78,205,137,.08);

  --bg:     #000;
  --bg-2:   #02060a;

  --ink:    #fff;
  --ink-2:  rgba(255,255,255,.95);
  --ink-3:  rgba(255,255,255,.55);
  --ink-4:  rgba(255,255,255,.3);
  --ink-5:  rgba(255,255,255,.12);

  --line:   rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.18);
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { min-height:100%; }
body {
  background:var(--bg); color:var(--ink-2);
  font-family:'Inter',sans-serif; font-weight:200;
  position:relative;
  overflow-x:hidden;
}
/* kill the native cursor everywhere — our dot is the cursor */
html, body, *, *::before, *::after { cursor:none !important; }
a { color:inherit; text-decoration:none; }
em { font-style:normal; color:var(--g); }
button { font:inherit; color:inherit; background:none; border:none; }

/* Custom scrollbar — slim, mint-tinted, hidden track. Replaces
   the default chrome bar globally. Falls back to a thin native
   bar in Firefox via scrollbar-width. */
html { scrollbar-width:thin; scrollbar-color:rgba(78,205,137,.28) transparent; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:rgba(78,205,137,.22);
  border-radius:3px;
  transition:background .2s;
}
::-webkit-scrollbar-thumb:hover { background:rgba(78,205,137,.55); }
::-webkit-scrollbar-corner { background:transparent; }

/* ── type utilities ─────────────────────────────────────────── */
.mono { font-family:'JetBrains Mono',monospace; }
.serif { font-family:'Inter',sans-serif; font-weight:300; }

.eyebrow {
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--g);
}

.display-xl {
  font-family:'Inter',sans-serif; font-weight:500;
  font-size:clamp(26px, 3.6vw, 56px);
  line-height:.95; letter-spacing:-.025em;
  color:var(--ink); text-transform:uppercase;
}
.display-xl em { color:var(--g); }

.display-lg {
  font-family:'Inter',sans-serif; font-weight:200;
  font-size:clamp(26px, 4vw, 56px);
  line-height:1; letter-spacing:-.02em;
  color:var(--ink); text-transform:uppercase;
}
.display-lg em { color:var(--g); }

.display-md {
  font-family:'Inter',sans-serif; font-weight:200;
  font-size:clamp(20px, 2.8vw, 38px);
  line-height:1.05; letter-spacing:-.015em;
  color:var(--ink); text-transform:uppercase;
}

.lede {
  font-family:'Inter',sans-serif; font-weight:200;
  font-size:clamp(13px, 1vw, 17px);
  line-height:1.5;
  color:rgba(255,255,255,.6);
  max-width:580px;
}
/* ── canvas + cursor ────────────────────────────────────────── */
canvas.trail {
  position:fixed; inset:0; z-index:1; pointer-events:none;
}
.dot-cur {
  position:fixed; top:0; left:0; z-index:9999;
  width:4px; height:4px; border-radius:50%;
  background:var(--g); pointer-events:none;
  box-shadow:0 0 10px var(--g);
  transform:translate3d(-50%,-50%,0);
  transition:
    transform 80ms cubic-bezier(.22,1,.36,1),
    width .3s, height .3s, background .3s;
  will-change:transform;
}
body.hoverable .dot-cur {
  width:24px; height:24px;
  background:rgba(78,205,137,.3);
  box-shadow:0 0 20px var(--g);
}

/* ── top bar background — only on mobile (where the chrome would
   otherwise clash with scrolling content). On desktop the corners
   sit on transparent over a black page. */
.top-bar-bg { display:none; }
html.is-mobile .top-bar-bg {
  display:block;
  position:fixed; top:0; left:0; right:0;
  height:64px; z-index:35;
  background:rgba(2,6,10,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  pointer-events:none;
  transition:opacity .35s ease;
}
/* ── corners (fixed chrome on every page) ──────────────────── */
.corner {
  position:fixed; z-index:40;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.95);
}
.corner.tl { top:18px; left:24px; }
.corner.tr { top:14px; right:20px; text-align:right; }
.corner.bl { bottom:20px; left:24px; }
.corner.br { bottom:20px; right:24px; text-align:right; }

.corner.tl a { display:inline-flex; align-items:center; gap:10px; }
.corner.tl b { color:#fff; font-weight:400; letter-spacing:.3em; }
.corner.tl .mark {
  display:inline-block; width:10px; height:10px;
  background:var(--g); box-shadow:0 0 8px var(--g);
}
.corner.tl .corner-mark {
  height:28px; width:auto; display:block;
  transition:opacity .25s;
}
.corner.tl a:hover .corner-mark { opacity:.7; }
.corner.tr em { color:var(--g); }

/* nav — lives in the tr corner on content pages */
.nav {
  display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
}
.nav a {
  color:rgba(255,255,255,.5);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.nav a:hover { color:var(--g); }
.nav a.active { color:var(--g); border-bottom-color:var(--g); }

.corner.tr { transition:opacity .35s ease; }

/* ── main stage ─────────────────────────────────────────────── */
main.stage {
  position:relative; z-index:5;
  min-height:100vh;
  display:flex; align-items:center;
  padding:clamp(56px, 7vh, 90px) clamp(24px, 6vw, 96px) clamp(36px, 5vh, 64px);
  transition:opacity .3s ease;
}
main.stage.fade-out { opacity:0; }
.stage-inner {
  width:100%; max-width:1280px; margin:0 auto;
}

/* ── generic card (shared across pages) ────────────────────── */
.q-card {
  position:relative;
  background:rgba(8,10,12,.62);
 
  border:1px solid var(--line);
  padding:clamp(22px, 2.4vw, 32px);
  transition:border-color .35s, background .35s, transform .35s cubic-bezier(.22,1,.36,1);
}
a.q-card:hover {
  border-color:var(--g-dim);
  background:rgba(12,16,20,.78);
  transform:translateY(-2px);
}
a.q-card:hover .arrow { color:var(--g); transform:translate(4px,-4px); }
.q-card .key {
  font-family:'JetBrains Mono',monospace;
  font-size:9px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--g);
}
.q-card .val {
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(13px, 1.4vw, 15px);
  color:#fff; line-height:1.5;
}
.q-card .arrow {
  position:absolute; top:18px; right:18px;
  font-family:'JetBrains Mono',monospace; font-size:14px;
  color:#666; transition:color .3s, transform .3s;
}

/* ── progress-style button (mint, primary CTA) ─────────────── */
.pill {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  padding:12px 20px;
  color:#000; background:var(--g);
  border:1px solid var(--g);
  transition:background .25s, color .25s, transform .25s;
}
.pill:hover { background:var(--g-2); transform:translateY(-1px); }
.pill.ghost {
  background:transparent; color:#fff; border-color:var(--line-2);
}
.pill.ghost:hover { background:var(--g); color:#000; border-color:var(--g); }

/* ── tiny status dot (used in TR nav / cards) ──────────────── */
.status-dot {
  display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:var(--g); box-shadow:0 0 8px var(--g);
  animation:breathe 2.2s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { opacity:.55; transform:scale(.9); }
  50%     { opacity:1;   transform:scale(1.15); }
}

/* ── hamburger + drawer (mobile nav) ──────────────────────────── */
.nav-burger {
  display:none;
  width:38px; height:38px;
  flex-direction:column; justify-content:center; align-items:center;
  gap:5px;
  background:transparent; border:none;
  padding:0; cursor:none; margin-left:auto;
}
.nav-burger span {
  display:block; width:22px; height:1px;
  background:rgba(255,255,255,.85); transition:transform .25s, opacity .25s;
}
.nav-burger span:nth-child(2) { width:14px; margin-left:8px; }
body.drawer-open .nav-burger span:nth-child(1) { transform:translateY(6px) rotate(45deg); width:22px; background:var(--g); }
body.drawer-open .nav-burger span:nth-child(2) { opacity:0; }
body.drawer-open .nav-burger span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); background:var(--g); }

/* full-screen drawer styled to match the site's editorial-mono aesthetic */
.nav-drawer {
  position:fixed; inset:0; z-index:60;
  background:#02060a;
  display:flex; flex-direction:column;
  padding:
    calc(64px + env(safe-area-inset-top))
    24px
    calc(28px + env(safe-area-inset-bottom));
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
.nav-drawer::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%, rgba(78,205,137,.06) 0%, transparent 60%);
}
body.drawer-open .nav-drawer { opacity:1; pointer-events:auto; }

.nav-drawer-close {
  position:absolute;
  top:calc(14px + env(safe-area-inset-top)); right:18px;
  width:44px; height:44px;
  font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:300;
  background:none; border:none; color:rgba(255,255,255,.6);
  cursor:none; line-height:1;
}
.nav-drawer-close:hover { color:var(--g); }

.nav-drawer-eyebrow {
  position:absolute;
  top:calc(22px + env(safe-area-inset-top)); left:24px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--g);
}

.nav-drawer-list {
  display:flex; flex-direction:column;
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:14px;
}
.nav-drawer-list a {
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:baseline;
  gap:14px;
  padding:18px 4px;
  font-family:'Inter',sans-serif; font-weight:300;
  font-size:clamp(22px, 5.6vw, 32px);
  line-height:1; letter-spacing:-.01em; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-transform:uppercase;
}
.nav-drawer-list a .no {
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.28em;
  color:var(--g);
}
.nav-drawer-list a .nm { color:#fff; }
.nav-drawer-list a::after {
  content:'→';
  font-family:'JetBrains Mono',monospace;
  font-size:14px; color:rgba(255,255,255,.35);
  transition:color .2s, transform .2s;
}
.nav-drawer-list a:hover::after,
.nav-drawer-list a:active::after { color:var(--g); transform:translateX(4px); }

.nav-drawer-foot {
  margin-top:auto;
  position:relative; z-index:2;
  display:flex; justify-content:space-between; gap:12px;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
  padding-top:20px; border-top:1px solid rgba(255,255,255,.06);
}

/* ── touch / coarse-pointer: kill the custom cursor + trail ──── */
@media (pointer: coarse) {
  html, body, *, *::before, *::after { cursor:auto !important; }
  .dot-cur, canvas.trail { display:none !important; }
  .nav-burger, .nav-drawer-close { cursor:pointer !important; }
}

/* ── responsive ─────────────────────────────────────────────── */
/* converted from @media to html.is-mobile */

  html.is-mobile .team-grid { grid-template-columns:1fr !important; }
  html.is-mobile .portrait { max-width:none; aspect-ratio:4/5; }


/* converted from @media to html.is-mobile */

  html.is-mobile /* hide the inline nav links, html.is-mobile show hamburger */
  .corner.tr .nav { display:none; }
  html.is-mobile .nav-burger { display:flex; }

  html.is-mobile /* tighter fixed chrome — black bar covers them, logo
     and burger vertically centered against the 60px bar */
  .top-bar-bg { height:60px; }
  html.is-mobile .corner.tl { top:calc(18px + env(safe-area-inset-top)); left:18px; }
  html.is-mobile .corner.tr { top:calc(11px + env(safe-area-inset-top)); right:14px; }
  html.is-mobile .corner.tl .corner-mark { height:24px; }
  html.is-mobile .corner.tl b { font-size:10px; letter-spacing:.26em; }

  html.is-mobile /* hide bottom strip on mobile — too noisy */
  .corner.bl, html.is-mobile .corner.br { display:none; }

  html.is-mobile /* safe-area stage padding — tighter for mobile so each view fits */
  main.stage {
    padding:
      calc(70px + env(safe-area-inset-top))
      16px
      calc(20px + env(safe-area-inset-bottom));
    min-height:100vh; min-height:100dvh;
    align-items:flex-start;
  }
  html.is-mobile .stage-inner { max-width:none; }

  html.is-mobile /* each view tries to fit within one viewport (no scroll on most pages) */
  .view.in {
    display:flex; flex-direction:column;
    width:100%;
    min-height: calc(100dvh - 110px);
  }
  html.is-mobile .view.in > .stage-inner { width:100%; }

  html.is-mobile /* typography: downscale hero sizes */
  .display-xl { font-size:clamp(32px, 8.4vw, 48px) !important; line-height:.96; }
  html.is-mobile .display-lg { font-size:clamp(26px, 7vw, 40px) !important; line-height:1; }
  html.is-mobile .eyebrow    { font-size:9px; letter-spacing:.22em; margin-bottom:6px !important; }
  html.is-mobile .tagline    { font-size:13px; line-height:1.4; }
  html.is-mobile .lede       { font-size:13px; line-height:1.5; }

/* converted from @media to html.is-mobile */

  html.is-mobile /* ── team: 3-card swipe carousel ─────────────────────────────
     Card 1 (portrait): face + name. Fits viewport, html.is-mobile no scroll.
     Card 2 (bio):      Education, html.is-mobile Experience, html.is-mobile Angel Investments.
     Card 3 (touch):    Based, html.is-mobile Off-duty, html.is-mobile LinkedIn + Get in touch. */
  .view[data-view="team"] .stage-inner {
    max-width:none; padding:0;
    display:flex; flex-direction:column;
  }
  html.is-mobile .team-grid {
    display:flex !important;
    flex-direction:row !important;
    grid-template-columns:none !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin:0 -16px !important;
    padding:0 0 4px !important;
    gap:12px !important;
    scrollbar-width:none;
    align-items:stretch !important;
  }
  html.is-mobile .team-grid::-webkit-scrollbar { display:none; }
  html.is-mobile .team-grid > .t-card {
    /* peek ~8% of the next card so multi-card affordance is obvious */
    flex:0 0 88% !important;
    width:88% !important;
    min-width:88% !important;
    max-width:none !important;
    scroll-snap-align:center;
    margin:0;
    box-sizing:border-box;
    height: calc(100dvh - 220px);
    max-height: calc(100dvh - 220px);
    overflow:hidden;
  }
  html.is-mobile .team-grid > .t-card:first-child { margin-left:16px; }
  html.is-mobile .team-grid > .t-card:last-child  { margin-right:16px; }

  html.is-mobile /* card 1: portrait — full image, html.is-mobile face centered */
  .team-grid > .portrait.t-card {
    aspect-ratio:auto;
    padding:0;
    border:1px solid var(--line);
  }
  html.is-mobile .portrait .img { background-position:center 30%; }
  html.is-mobile .portrait .label-blk {
    padding:16px 18px;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,.85));
    display:flex !important; flex-direction:column !important;
    align-items:flex-start !important; justify-content:flex-end !important;
    gap:4px !important;
  }
  html.is-mobile .portrait .lb-eyebrow {
    font-family:'JetBrains Mono',monospace;
    font-size:9.5px; letter-spacing:.28em; color:var(--g);
    text-transform:uppercase; margin-bottom:6px;
  }
  html.is-mobile .portrait .lb-name {
    font-family:'Inter',sans-serif; font-weight:300;
    font-size:clamp(26px, 7vw, 38px); line-height:1;
    letter-spacing:-.012em; color:#fff; margin-bottom:6px;
  }
  html.is-mobile .portrait .lb-name em { color:var(--g); font-style:normal; font-weight:400; }
  html.is-mobile .portrait .lb-role {
    font-size:10px; letter-spacing:.26em; color:rgba(255,255,255,.85);
  }

  html.is-mobile /* cards 2 & 3: padded scrollable bordered boxes */
  .t-card-bio, html.is-mobile .t-card-touch {
    display:flex; flex-direction:column;
    gap:12px;
    padding:18px;
    border:1px solid var(--line);
    background:#080a0b;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  html.is-mobile .team-hero { margin-bottom:0; }
  html.is-mobile .team-hero .eyebrow { margin-bottom:6px !important; font-size:9.5px; letter-spacing:.28em; }
  html.is-mobile .team-hero .display-xl, html.is-mobile .team-hero .t-card-title {
    font-family:'Inter',sans-serif; font-weight:300;
    margin-bottom:6px;
    font-size:clamp(24px, 6.5vw, 34px) !important;
    line-height:1.05;
  }
  html.is-mobile .team-hero .t-card-title em { color:var(--g); font-style:normal; font-weight:400; }
  html.is-mobile .team-hero .tagline { font-size:12.5px; line-height:1.4; margin-bottom:0; }

  html.is-mobile .t-card-touch .bio-actions { margin-top:auto; padding-top:14px; }

  html.is-mobile /* bio-data — slim rows */
  .bio-data .row { grid-template-columns:84px 1fr !important; gap:10px; padding:7px 0 !important; }
  html.is-mobile .bio-data dt { font-size:8.5px; letter-spacing:.22em; margin-bottom:0; padding-top:2px; }
  html.is-mobile .bio-data dd { font-size:12.5px; line-height:1.4; }
  html.is-mobile .bio-link { font-size:12.5px; }

  html.is-mobile /* angels grid */
  .angels { grid-template-columns:repeat(2, 1fr) !important; gap:0 12px !important; }
  html.is-mobile .angels a, html.is-mobile .angels .noext {
    font-size:11.5px !important; padding:0 !important;
    line-height:1.7 !important;
  }
  html.is-mobile .angels a .ext { margin-left:2px; font-size:.8em !important; }

  html.is-mobile .bio-list-grid { grid-template-columns:repeat(2, 1fr) !important; gap:2px 12px !important; }
  html.is-mobile .bio-list a { font-size:12.5px; padding:1px 0; }
  html.is-mobile .bio-list { gap:2px !important; }

  html.is-mobile /* pills — two-per-row grid, so LinkedIn / X / TikTok /
     Full contact stack cleanly without squishing. */
  .bio-actions {
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    margin-top:auto; padding-top:8px;
  }
  html.is-mobile .pill {
    min-width:0;
    padding:11px 10px; min-height:42px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:10.5px !important;
    white-space:nowrap;
  }

  html.is-mobile /* slim segmented track — slicker than dots; each cell is
     a thin rule, the active cell extends and glows mint. */
  .team-dots {
    display:flex; justify-content:center; align-items:center;
    gap:6px;
    margin-top:12px;
  }
  html.is-mobile .team-dot {
    width:22px; height:2px; border-radius:2px;
    background:rgba(255,255,255,.14);
    transition:width .45s cubic-bezier(.22,1,.36,1),
               background .35s ease,
               box-shadow .35s ease;
  }
  html.is-mobile .team-dot.on {
    width:44px;
    background:var(--g);
    box-shadow:0 0 10px rgba(78,205,137,.55);
  }
  html.is-mobile .team-hint {
    display:flex; justify-content:center; align-items:center; gap:14px;
    font-family:'JetBrains Mono',monospace;
    font-size:10px; letter-spacing:.32em; text-transform:uppercase;
    color:var(--g);
    margin-top:8px;
    animation:swipeHint 2.4s ease-in-out infinite;
  }
  html.is-mobile .team-hint::before { content:'⟵'; color:rgba(78,205,137,.7); }
  html.is-mobile .team-hint::after  { content:'⟶'; color:rgba(78,205,137,.7); }
  html.is-mobile .team-hint, html.is-mobile .team-dots, html.is-mobile .team-counter { display:flex; }
  html.is-mobile .team-counter {
    justify-content:center;
    font-family:'JetBrains Mono',monospace;
    font-size:10px; letter-spacing:.32em; text-transform:uppercase;
    color:rgba(255,255,255,.5);
    margin-top:4px;
    font-variant-numeric:tabular-nums;
  }
  html.is-mobile .team-dot {
    width:8px; height:8px;
  }

  html.is-mobile /* ── portfolio mobile layout: stacked creed + swipeable cards ── */
  .p-creed { gap:6px !important; margin-bottom:14px; }
  html.is-mobile .p-creed li {
    flex-direction:column !important; align-items:flex-start !important;
    gap:2px !important;
    padding:8px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  html.is-mobile .p-creed li:last-child { border-bottom:none; }
  html.is-mobile .p-creed .tag {
    font-family:'JetBrains Mono',monospace !important;
    font-size:9px !important; letter-spacing:.24em;
    color:var(--g);
  }
  html.is-mobile .p-creed .line {
    font-size:clamp(18px, 5.6vw, 26px) !important;
    line-height:1.1;
  }

  html.is-mobile /* swipeable card carousel — peek the next card so it's clear there's more */
  .p-cards {
    display:flex !important;
    grid-template-columns:none !important;
    gap:12px !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin:0 -16px !important;
    padding:6px 0 4px !important;
    scrollbar-width:none;
  }
  html.is-mobile .p-cards::-webkit-scrollbar { display:none; }
  html.is-mobile .pc {
    flex:0 0 88% !important;
    width:88% !important;
    min-width:88% !important;
    max-width:none !important;
    scroll-snap-align:center;
    padding:22px 20px !important;
    margin:0;
    box-sizing:border-box;
  }
  html.is-mobile .pc:first-child { margin-left:16px; }
  html.is-mobile .pc:last-child  { margin-right:16px; }

  html.is-mobile /* swipe hint: arrows + dot pagination */
  .p-cards-hint {
    display:flex; justify-content:center; align-items:center; gap:14px;
    font-family:'JetBrains Mono',monospace;
    font-size:10px; letter-spacing:.32em; text-transform:uppercase;
    color:var(--g);
    margin-top:6px;
    animation:swipeHint 2.4s ease-in-out infinite;
  }
  html.is-mobile .p-cards-hint::before { content:'⟵'; color:rgba(78,205,137,.7); }
  html.is-mobile .p-cards-hint::after  { content:'⟶'; color:rgba(78,205,137,.7); }
  html.is-mobile .p-cards-hint, html.is-mobile .p-dots, html.is-mobile .p-counter { display:flex; }
  html.is-mobile .p-counter {
    justify-content:center;
    font-family:'JetBrains Mono',monospace;
    font-size:10px; letter-spacing:.32em; text-transform:uppercase;
    color:rgba(255,255,255,.5);
    margin-top:4px;
    font-variant-numeric:tabular-nums;
  }
  @keyframes swipeHint {
    0%, 100% { transform:translateX(0); opacity:.7; }
    html.is-mobile 50%      { transform:translateX(6px); opacity:1; }
  }
  html.is-mobile .p-dots {
    display:flex; justify-content:center; align-items:center;
    gap:6px;
    margin-top:12px;
  }
  html.is-mobile .p-dot {
    width:22px; height:2px; border-radius:2px;
    background:rgba(255,255,255,.14);
    transition:width .45s cubic-bezier(.22,1,.36,1),
               background .35s ease,
               box-shadow .35s ease;
  }
  html.is-mobile .p-dot.on {
    width:44px;
    background:var(--g);
    box-shadow:0 0 10px rgba(78,205,137,.55);
  }

  html.is-mobile /* thesis: hero up top, html.is-mobile four expandable one-liner pillars below */
  .view[data-view="thesis"] .stage-inner { display:flex; flex-direction:column; gap:10px; }
  html.is-mobile .t-grid { grid-template-columns:1fr !important; gap:10px !important; }
  html.is-mobile .t-head { margin-bottom:4px; }
  html.is-mobile .t-title-pre { font-size:13px !important; }
  html.is-mobile .t-title-main { font-size:clamp(26px, 7.2vw, 38px) !important; line-height:1; }
  html.is-mobile .t-head .lede { font-size:12px; line-height:1.35; max-width:none; }
  html.is-mobile .t-pillars { border-top:1px solid var(--line); }
  html.is-mobile .t-pillars .pillar {
    grid-template-columns:38px 1fr 22px !important;
    gap:14px !important;
    padding:18px 6px !important;
    align-items:center !important;
    min-height:64px;
  }
  html.is-mobile .pillar .p-num { font-size:18px !important; color:rgba(78,205,137,.6); }
  html.is-mobile .pillar .p-title {
    font-size:15px !important; line-height:1.2;
    margin-bottom:0 !important;
    color:#fff; text-transform:uppercase;
    font-family:'Inter',sans-serif; font-weight:300;
    letter-spacing:.005em;
  }
  html.is-mobile .pillar .p-body { font-size:12px !important; line-height:1.4; color:rgba(255,255,255,.55); }
  html.is-mobile .pillar .p-arrow {
    font-size:20px !important; color:rgba(255,255,255,.35);
    transition:transform .25s, color .25s;
  }
  html.is-mobile .pillar[aria-expanded="true"] .p-num { color:var(--g); }
  html.is-mobile .pillar[aria-expanded="true"] .p-title { color:var(--g); }

  html.is-mobile /* contact: 2x2 grid + compact cards so all four fit one viewport */
  .view[data-view="contact"] .stage-inner { display:flex; flex-direction:column; gap:10px; }
  html.is-mobile .c-head h1 { margin-bottom:4px; }
  html.is-mobile .c-head .lede { font-size:12px; line-height:1.35; }
  html.is-mobile .c-cards  { grid-template-columns:1fr 1fr !important; gap:8px !important; margin-top:6px; }
  html.is-mobile .c-card  {
    padding:12px 14px !important;
    min-height:0 !important;
    display:flex; flex-direction:column; gap:4px;
  }
  html.is-mobile .c-card .k { margin-bottom:0 !important; font-size:8.5px; letter-spacing:.24em; }
  html.is-mobile .c-card a, html.is-mobile .c-card p { font-size:12.5px; line-height:1.3; }
  html.is-mobile .c-card.c-card-wide { grid-column:1 / -1; }  html.is-mobile /* office spans both cols */
  .socials { display:flex; flex-wrap:wrap; gap:4px 12px !important; }
  html.is-mobile .socials a { font-size:11.5px; padding:1px 0; }

  html.is-mobile /* form inputs fit-for-touch */
  input, html.is-mobile textarea, html.is-mobile select {
    font-size:16px !important;
    min-height:48px;
  }
  html.is-mobile textarea { min-height:120px; }


/* desktop defaults: every carousel chrome element is mobile-only */
.p-cards-hint, .p-dots, .p-counter,
.team-hint, .team-dots, .team-counter { display:none; }

/* ── desktop team layout: portrait spans 2 rows, bio top-right, touch bot ── */
html.is-desktop .team-grid {
  display:grid !important;
  grid-template-columns: minmax(320px, 0.85fr) 1fr !important;
  grid-template-rows: auto 1fr !important;
  grid-template-areas:
    "portrait bio"
    "portrait touch" !important;
  column-gap:clamp(24px, 3.5vw, 56px) !important;
  row-gap:0 !important;
  align-items:start !important;
  overflow:visible !important;
}
html.is-desktop .team-grid > .portrait { grid-area: portrait; }
html.is-desktop .team-grid > .t-card-bio { grid-area: bio; }
html.is-desktop .team-grid > .t-card-touch { grid-area: touch; }

/* hide mobile-specific portrait overlay text on desktop — keep only the role */
html.is-desktop .portrait .lb-eyebrow,
html.is-desktop .portrait .lb-name { display:none; }

/* mobile-card heroes are noise on desktop (PROFILE 02 OF 03, etc.) */
html.is-desktop .t-card-bio .team-hero .eyebrow .m-only,
html.is-desktop .t-card-touch .team-hero { display:none; }
html.is-desktop .t-card-bio .team-hero .eyebrow .d-only { display:inline; }
.d-only { display:none; }
html.is-mobile .d-only { display:none; }
html.is-mobile .m-only { display:inline; }
.m-only { display:inline; }

/* On desktop, card 3 (Based + Off-duty + pills) lives in the
   bottom-right of the team grid via grid-area: touch. Hide its
   carousel-only hero and tighten the inner spacing so it reads as
   a continuation of the bio column above it. */
html.is-desktop .t-card-touch > .team-hero { display:none !important; }
html.is-desktop .t-card-touch {
  display:flex; flex-direction:column;
  gap:clamp(8px, 1vh, 14px);
  padding-top:0;
}
/* desktop only: separate Angel investments (last row of bio card) from
   Based (first row of touch card). Mirrors the dashed rules already used
   between other rows in the bio column. */
html.is-desktop .t-card-bio .bio-data .row:last-child {
  border-bottom:1px dashed var(--line);
}
html.is-desktop .t-card-touch .bio-actions {
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:clamp(10px, 1.4vh, 18px);
}

/* desktop: restore the original display-xl styling on the team title */
html.is-desktop .t-card-bio .t-card-title {
  font-family:'Inter',sans-serif; font-weight:500;
  font-size:clamp(26px, 3.6vw, 56px);
  line-height:.95; letter-spacing:-.025em;
  color:#fff; text-transform:uppercase;
  margin-bottom:clamp(8px, 1vh, 14px);
}
html.is-desktop .t-card-bio .t-card-title em { color:var(--g); font-style:normal; font-weight:500; }

/* ── desktop / mobile split ──────────────────────────────────
   Each version of the home view lives in the DOM as its own block;
   the device class on <html> reveals exactly one. */
html.is-mobile  .h-desktop { display:none !important; }
html.is-desktop .h-mobile  { display:none !important; }

/* ── desktop home: full editorial three-line statement ──────── */
.h-desktop {
  display:flex; flex-direction:column; justify-content:center;
  width:100%; min-height: calc(100dvh - 180px);
  gap:clamp(28px, 4vh, 48px);
  padding:0 clamp(8px, 2vw, 32px);
}
.h-d-eyebrow {
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(10px, .9vw, 12.5px);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--g);
}
.h-d-stack {
  display:flex; flex-direction:column;
  gap:clamp(2px, .5vh, 8px);
  border-top:1px solid var(--line);
  padding-top:clamp(20px, 3vh, 40px);
}
.h-d-line {
  display:grid;
  grid-template-columns: clamp(40px, 4vw, 64px) 1fr;
  align-items:baseline;
  gap:clamp(20px, 2.5vw, 36px);
  padding:clamp(8px, 1.6vh, 20px) 0;
  border-bottom:1px solid var(--line);
  transition:background .35s ease, padding-left .35s cubic-bezier(.22,1,.36,1);
}
.h-d-line:hover { background:rgba(78,205,137,.025); padding-left:14px; }
.h-d-num {
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(11px, .9vw, 14px);
  letter-spacing:.28em;
  color:rgba(78,205,137,.55);
}
.h-d-text {
  font-family:'Inter',sans-serif; font-weight:200;
  font-size:clamp(48px, 7.2vw, 112px);
  line-height:.96; letter-spacing:-.025em;
  color:#fff;
}
.h-d-text em { color:var(--g); font-style:normal; font-weight:300; }
.h-d-foot {
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px, 3vw, 40px); flex-wrap:wrap;
  margin-top:clamp(12px, 2vh, 28px);
}
.h-d-meta {
  display:flex; align-items:center; gap:clamp(6px, 1vw, 14px); flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(9px, .75vw, 11px);
  letter-spacing:.32em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.h-d-cta {
  display:inline-flex; align-items:center; gap:14px;
  padding:clamp(12px, 1.4vh, 16px) clamp(18px, 2vw, 28px);
  border:1px solid rgba(78,205,137,.4);
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(10px, .85vw, 12.5px);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--g); background:rgba(78,205,137,.04);
  transition:background .25s, border-color .25s, color .25s;
}
.h-d-cta:hover { background:var(--g); color:#000; border-color:var(--g); }
.h-d-cta span { transition:transform .25s; }
.h-d-cta:hover span { transform:translateX(4px); }

/* ── mobile home: black mirror with tilt-reactive shimmer ──── */
.h-mobile {
  position:relative;
  width:100%;
  min-height: calc(100dvh - 100px);
  margin: -16px -16px 0;
  width: calc(100% + 32px);
  background:#000;
  overflow:hidden;
}
.h-mirror {
  --tx: 0;
  --ty: 0;
  cursor:none;
  touch-action:none;          /* drag-to-shimmer; don't scroll/zoom */
  -webkit-tap-highlight-color:transparent;
}
.h-mirror::before {
  content:'';
  position:absolute; inset:0;
  background:
    /* primary mint highlight — large soft glow that follows the tilt */
    radial-gradient(
      ellipse 70% 55% at calc(50% + var(--tx) * 35%) calc(50% + var(--ty) * 35%),
      rgba(78,205,137,.22) 0%,
      rgba(78,205,137,.08) 22%,
      transparent 55%
    ),
    /* secondary cooler highlight, opposite drift, slightly smaller */
    radial-gradient(
      ellipse 50% 40% at calc(50% - var(--tx) * 22%) calc(50% - var(--ty) * 22%),
      rgba(170,255,210,.10) 0%,
      transparent 50%
    ),
    /* a faint third sheen for depth */
    radial-gradient(
      ellipse 30% 25% at calc(50% + var(--tx) * 60%) calc(60% + var(--ty) * 25%),
      rgba(255,255,255,.05) 0%,
      transparent 60%
    );
  transition:background .12s linear;
  pointer-events:none;
}
.h-mirror::after {
  /* very subtle vignette so the edges fall off into pure black */
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center,
    transparent 40%,
    rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.h-mirror-prompt {
  position:absolute;
  bottom:calc(28px + env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(255,255,255,.32);
  pointer-events:none; z-index:2;
  transition:opacity .8s ease;
  animation:hMirrorBreathe 3.6s ease-in-out infinite;
  white-space:nowrap;
}
.h-mirror-prompt.faded { opacity:0; animation:none; }
@keyframes hMirrorBreathe {
  0%, 100% { opacity:.32; }
  50%      { opacity:.65; }
}
.hmp-default { display:inline; }
.h-stage {
  position:relative;
  display:flex; flex-direction:column;
  align-items:stretch; justify-content:center;
  width:100%;
  min-height: calc(100dvh - 160px);
  overflow:hidden;
  cursor:none;
}
.h-eyebrow {
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(10px, .85vw, 12px);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--g);
  position:relative; z-index:2;
}
.h-real-line {
  font-family:'Inter',sans-serif; font-weight:200;
  font-size:clamp(48px, 9vw, 140px);
  line-height:1; letter-spacing:-.025em;
  color:#fff; margin:0;
  position:relative; z-index:2;
  white-space:nowrap;
}
.h-cycle {
  display:inline-grid;
  grid-template-areas:"stack";
  vertical-align:baseline;
  text-align:left;
  min-width:6.5ch;
}
.h-word {
  grid-area:stack;
  color:var(--g);
  font-style:normal;
  opacity:0;
  filter:blur(8px);
  transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),
             transform .6s cubic-bezier(.22,1,.36,1),
             filter .6s ease;
}
.h-word.on {
  opacity:1; filter:blur(0);
  transform:translateY(0);
}
.h-prompt {
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
  pointer-events:none; z-index:2;
  transition:opacity .8s ease;
  animation:hPromptBreathe 3.2s ease-in-out infinite;
}
.h-prompt.faded { opacity:0; }
@keyframes hPromptBreathe {
  0%, 100% { opacity:.4; }
  50%      { opacity:.75; }
}
.h-prompt-tap, .h-prompt-swipe { display:none; }
@media (pointer:coarse) { .h-prompt-tap { display:inline; } }
@media (pointer:fine)   { .h-prompt-swipe { display:inline; } }

/* the pulse — a soft green ring that ripples from the tap point */
.h-pulse {
  position:absolute;
  width:14px; height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(78,205,137,.55) 0%, rgba(78,205,137,.2) 40%, transparent 70%);
  pointer-events:none; z-index:1;
  animation:hPulse 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes hPulse {
  0%   { transform:scale(.4); opacity:.95; }
  60%  { opacity:.5; }
  100% { transform:scale(40); opacity:0; }
}

/* mobile-specific: tighter stack so the rotating line owns the screen */
/* converted from @media to html.is-mobile */

  html.is-mobile .h-stage {
    gap:24px;
    min-height: calc(100dvh - 140px);
  }
  html.is-mobile .h-eyebrow {
    font-size:9.5px; letter-spacing:.26em;
    max-width:90vw; line-height:1.4;
  }
  html.is-mobile .h-real-line {
    font-size:clamp(40px, 13vw, 72px);
    letter-spacing:-.02em;
  }