@charset "UTF-8";
:root {
  --bg:#071715;
  --bg-2:#0b211e;
  --panel:#102824;
  --panel-2:#132f2b;
  --ink:#f1f5f0;
  --muted:#afc3bc;
  --muted-2:#77938a;
  --teal:#77e2cd;
  --teal-dark:#1c9988;
  --coral:#ff7e72;
  --line:rgba(200,235,222,.14);
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:Inter,"Aptos",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --max:1220px;
  --pad:clamp(22px,5.7vw,86px)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:94px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
::selection {
  background:var(--teal);
  color:var(--bg)
}
.skip-link {
  position:absolute;
  top:-100px;
  left:16px;
  z-index:100;
  background:var(--teal);
  color:var(--bg);
  padding:10px 16px
}
.skip-link:focus {
  top:12px
}
.section-shell {
  width:min(100%,var(--max));
  margin-inline:auto;
  padding-inline:var(--pad)
}
.section-pad {
  padding-block:112px
}
.site-header {
  position:sticky;
  z-index:20;
  top:0;
  background:rgba(7,23,21,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}
.nav-wrap {
  width:min(100%,var(--max));
  height:76px;
  margin:auto;
  padding-inline:var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px
}
.brand-mark {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  position:relative;
  border:1px solid var(--teal);
  color:var(--teal);
  font-weight:800;
  font-size:19px;
  line-height:1;
  transform:rotate(45deg);
  border-radius:7px
}
.brand-mark span {
  transform:rotate(-45deg)
}
.brand-name {
  font-size:14px;
  font-weight:800;
  letter-spacing:.16em
}
.brand-period {
  color:var(--teal)
}
.primary-nav {
  display:flex;
  align-items:center;
  gap:31px
}
.primary-nav>a {
  color:var(--muted);
  font-size:12px;
  letter-spacing:.04em;
  transition:color .2s ease
}
.primary-nav>a:hover,.primary-nav>a.active {
  color:var(--teal)
}
.primary-nav .nav-contact {
  border:1px solid rgba(119,226,205,.48);
  border-radius:999px;
  color:var(--ink);
  padding:9px 15px
}
.nav-contact span {
  color:var(--teal);
  margin-left:5px
}
.menu-toggle {
  display:none
}
.hero {
  min-height:660px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:24px;
  position:relative;
  padding-top:70px;
  padding-bottom:95px
}
.hero:before {
  content:"";
  position:absolute;
  inset:0 calc(var(--pad)*.65);
  background-image:linear-gradient(rgba(119,226,205,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(119,226,205,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 75%,transparent 100%);
  pointer-events:none
}
.hero-copy {
  position:relative;
  z-index:2;
  padding-block:20px
}
.eyebrow,.hero-kicker,.section-label,.mini-label,.case-topline,.role-tag,.visual-label,.scroll-cue,.metric-note,.timeline-year,.back-top {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--teal);
  margin:0 0 21px
}
.status-dot {
  width:8px;
  height:8px;
  background:var(--teal);
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(119,226,205,.11)
}
.hero-kicker {
  color:var(--muted-2);
  font-size:9px;
  margin:0 0 17px
}
.hero-kicker span {
  color:var(--teal);
  padding:0 4px
}
.hero h1 {
  font-size:clamp(52px,7vw,86px);
  letter-spacing:-.07em;
  line-height:.98;
  margin:0;
  max-width:700px;
  font-weight:740
}
.hero h1 em,.section-title em,.contact-inner h2 em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  color:var(--teal);
  letter-spacing:-.06em
}
.hero-intro {
  max-width:510px;
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
  margin:25px 0 26px
}
.hero-actions,.contact-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  min-height:48px;
  padding:0 19px;
  border-radius:4px;
  font-weight:650;
  font-size:12px;
  letter-spacing:.025em;
  transition:transform .2s ease,background .2s ease,border-color .2s ease
}
.button:hover {
  transform:translateY(-3px)
}
.button-primary {
  background:var(--teal);
  color:#08201c;
  border:1px solid var(--teal)
}
.button-primary:hover {
  background:#a2f1e2
}
.button-quiet {
  border:1px solid var(--line);
  color:var(--ink)
}
.button-quiet span {
  color:var(--teal)
}
.hero-proof {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:45px;
  max-width:540px
}
.proof-item {
  display:flex;
  flex-direction:column;
  gap:0
}
.proof-item strong {
  font-size:24px;
  line-height:1.1;
  letter-spacing:-.05em
}
.proof-item strong span {
  color:var(--teal);
  font-size:.7em
}
.proof-item>span {
  font-size:9px;
  color:var(--muted-2);
  line-height:1.4;
  margin-top:5px;
  max-width:106px
}
.proof-divider {
  width:1px;
  height:35px;
  background:var(--line)
}
.metric-note {
  font-size:8px;
  color:var(--muted-2);
  letter-spacing:.01em;
  text-transform:none;
  margin-top:12px
}
.hero-visual {
  height:500px;
  position:relative;
  display:grid;
  place-items:center
}
.portrait-frame {
  position:relative;
  z-index:2;
  width:min(350px,75%);
  height:440px;
  overflow:hidden;
  border:1px solid rgba(119,226,205,.55);
  border-radius:180px 180px 8px 8px;
  background:#287f88;
  box-shadow:0 35px 90px rgba(0,0,0,.38),0 0 60px rgba(50,193,173,.13)
}
.portrait {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  display:block;
  filter:saturate(.95)
}
.portrait-frame:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(4,20,18,.72) 100%)
}
.portrait-caption {
  position:absolute;
  z-index:1;
  left:21px;
  right:21px;
  bottom:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.12em
}
.portrait-caption span:first-child {
  font-size:12px;
  font-weight:bold;
  letter-spacing:.2em
}
.brand-card {
  position:absolute;
  z-index:4;
  left:2%;
  bottom:25px;
  width:116px;
  height:158px;
  padding:5px;
  background:#1e686f;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 38px rgba(0,0,0,.35);
  transform:rotate(-8deg)
}
.brand-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.visual-stamp {
  position:absolute;
  z-index:5;
  right:2%;
  top:60px;
  width:88px;
  height:88px;
  border:1px solid var(--teal);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  background:var(--bg);
  color:var(--teal);
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.09em;
  transform:rotate(9deg)
}
.visual-stamp b {
  font-family:var(--sans);
  font-size:20px;
  line-height:1
}
.hero-orbit {
  position:absolute;
  border:1px solid rgba(119,226,205,.18);
  border-radius:50%;
  pointer-events:none
}
.orbit-one {
  width:440px;
  height:440px;
  transform:scaleX(1.1) rotate(-28deg)
}
.orbit-two {
  width:510px;
  height:270px;
  transform:rotate(38deg)
}
.scroll-cue {
  position:absolute;
  bottom:25px;
  left:var(--pad);
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--muted-2);
  font-size:8px
}
.scroll-line {
  height:35px;
  width:1px;
  background:linear-gradient(var(--teal),transparent)
}
.ticker {
  overflow:hidden;
  border-block:1px solid var(--line);
  background:var(--teal);
  color:#08201c
}
.ticker-track {
  min-width:max-content;
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:30px;
  padding:12px 0;
  font-family:var(--mono);
  font-size:10px;
  font-weight:bold;
  letter-spacing:.16em;
  animation:marquee 35s linear infinite
}
.ticker-track i {
  font-style:normal;
  font-size:15px;
  color:#14695c
}
@keyframes marquee {
  to {
    transform:translateX(-12%)
  }
}
.section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted-2);
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  font-size:9px
}
.section-label span:first-child {
  color:var(--teal)
}
.about-layout {
  display:grid;
  grid-template-columns:1fr .82fr;
  gap:clamp(40px,10vw,150px);
  align-items:start;
  padding-top:53px
}
.section-title {
  font-size:clamp(42px,5.2vw,67px);
  line-height:1.05;
  letter-spacing:-.065em;
  margin:0;
  font-weight:670
}
.about-text {
  max-width:510px
}
.about-text p {
  color:var(--muted);
  margin:0 0 15px;
  font-size:13px
}
.about-text p.lead {
  font-size:18px;
  color:var(--ink);
  line-height:1.55;
  margin-bottom:18px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:13px;
  margin-top:13px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(119,226,205,.45);
  font-size:12px;
  font-weight:650;
  color:var(--teal)
}
.text-link span {
  transition:transform .2s ease
}
.text-link:hover span {
  transform:translate(3px,-3px)
}
.about-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:72px
}
.about-strip>div {
  padding:23px 24px;
  background:var(--bg)
}
.strip-index {
  font-family:var(--mono);
  font-size:10px;
  color:var(--teal);
  display:block;
  margin-bottom:15px
}
.about-strip strong {
  font-size:14px
}
.about-strip p {
  color:var(--muted-2);
  font-size:11px;
  margin:5px 0 0
}
.work-section {
  background:#0a1c19
}
.work-section .section-shell,.case-section .section-shell,.skills-section .section-shell {
  max-width:var(--max)
}
.section-heading-row {
  display:flex;
  align-items:end;
  justify-content:space-between;
  padding-top:50px;
  margin-bottom:47px
}
.section-side-note {
  max-width:320px;
  margin:0 0 5px;
  color:var(--muted-2);
  font-size:12px
}
.timeline {
  max-width:1000px;
  margin-left:auto
}
.timeline-item {
  display:grid;
  grid-template-columns:105px 26px 1fr;
  gap:21px;
  position:relative;
  padding-bottom:30px
}
.timeline-item:before {
  content:"";
  position:absolute;
  left:137px;
  top:12px;
  bottom:-5px;
  width:1px;
  background:linear-gradient(var(--teal-dark),rgba(119,226,205,.12))
}
.timeline-item:last-child:before {
  display:none
}
.timeline-year {
  padding-top:4px;
  text-align:right;
  color:var(--teal);
  font-size:10px;
  line-height:1.5
}
.timeline-year span {
  display:block;
  color:var(--muted-2);
  font-size:8px
}
.timeline-marker {
  width:9px;
  height:9px;
  border:2px solid var(--teal);
  border-radius:50%;
  background:var(--bg);
  margin:7px auto 0;
  position:relative;
  z-index:1;
  box-shadow:0 0 0 4px rgba(119,226,205,.08)
}
.timeline-current .timeline-marker {
  background:var(--teal)
}
.timeline-content {
  padding-bottom:17px;
  border-bottom:1px solid var(--line)
}
.timeline-item:last-child .timeline-content {
  border-bottom:0
}
.role-heading {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.role-brand {
  display:inline-flex;
  align-items:center;
  gap:9px
}
.role-brand img {
  width:24px;
  height:24px;
  object-fit:contain
}
.role-brand img[src*="whitebit"] {
  filter:brightness(0) invert(1)
}
.role-brand img[src*="bybit"] {
  width:42px;
  height:18px
}
.role-heading h3 {
  font-size:19px;
  margin:0;
  letter-spacing:-.02em
}
.role-tag {
  color:var(--teal);
  font-size:8px;
  border:1px solid rgba(119,226,205,.23);
  padding:3px 7px;
  border-radius:2px
}
.role-title {
  color:var(--muted);
  font-size:12px;
  margin:2px 0 5px
}
.timeline-content>p:last-child {
  font-size:12px;
  color:var(--muted-2);
  margin:0;
  max-width:710px
}
.case-section {
  background:#071715
}
.filter-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 24px
}
.filter-button {
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  padding:8px 12px;
  border-radius:99px;
  font-size:10px;
  cursor:pointer;
  transition:all .2s ease
}
.filter-button:hover,.filter-button.is-active {
  border-color:var(--teal);
  color:var(--teal);
  background:rgba(119,226,205,.08)
}
.filter-button span {
  font-family:var(--mono);
  font-size:8px;
  margin-left:4px
}
.case-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.case-card {
  background:#0c211d;
  border:1px solid var(--line);
  transition:transform .3s ease,border-color .3s ease;
  overflow:hidden
}
.case-card:hover {
  transform:translateY(-5px);
  border-color:rgba(119,226,205,.48)
}
.case-card[hidden] {
  display:none
}
.case-featured {
  grid-row:span 2
}
.case-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted-2);
  font-size:8px;
  padding:15px 18px 0
}
.case-arrow {
  color:var(--teal);
  font-size:18px
}
.case-visual {
  height:220px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b332e
}
.case-featured .case-visual {
  height:270px
}
.whitebit-visual {
  background:radial-gradient(circle at 50% 35%,#1d756a 0%,#104840 35%,#0a2522 100%)
}
.case-orbit {
  position:absolute;
  width:240px;
  height:240px;
  border:1px solid rgba(130,243,215,.35);
  border-radius:50%;
  box-shadow:0 0 60px rgba(119,226,205,.18),inset 0 0 60px rgba(119,226,205,.1)
}
.case-orbit:before,.case-orbit:after {
  content:"";
  position:absolute;
  inset:20px;
  border:1px dashed rgba(130,243,215,.35);
  border-radius:50%;
  transform:rotate(50deg) scaleX(.7)
}
.case-orbit:after {
  transform:rotate(-50deg) scaleX(.7)
}
.visual-monogram {
  position:relative;
  z-index:1;
  font-size:81px;
  font-weight:850;
  letter-spacing:-.12em;
  color:#effff8;
  text-shadow:0 0 32px rgba(119,226,205,.8)
}
.visual-monogram span {
  color:var(--coral)
}
.visual-label {
  position:absolute;
  bottom:16px;
  left:18px;
  color:rgba(224,255,245,.65);
  font-size:8px
}
.visual-stat {
  position:absolute;
  right:18px;
  top:16px;
  color:var(--teal);
  font-family:var(--mono);
  font-size:15px
}
.visual-stat span {
  font-size:10px
}
.case-logo {
  position:relative;
  z-index:1;
  display:block;
  object-fit:contain
}
.whitebit-logo {
  width:min(255px,62%);
  filter:brightness(0) invert(1) drop-shadow(0 0 22px rgba(119,226,205,.4))
}
.wallet-visual {
  background:radial-gradient(ellipse at 50% 48%,#15534b 0,#0d302b 42%,#091d1b 100%)
}
.wallet-ring {
  position:absolute;
  border:1px solid rgba(119,226,205,.33);
  border-radius:50%;
  width:182px;
  height:182px
}
.ring-a {
  transform:rotate(34deg) scaleX(.55)
}
.ring-b {
  transform:rotate(-34deg) scaleX(.55)
}
.wallet-glyph {
  width:84px;
  height:84px;
  display:grid;
  place-items:center;
  border-radius:22px;
  border:1px solid var(--teal);
  font-size:47px;
  font-weight:800;
  color:var(--teal);
  transform:rotate(45deg);
  box-shadow:0 0 35px rgba(119,226,205,.15)
}
.wallet-glyph:after {
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(119,226,205,.4);
  border-radius:14px
}
.wallet-glyph {
  line-height:1
}
.bybit-visual {
  background:radial-gradient(circle at 48% 38%,#3c5660 0,#1b3338 38%,#0b211f 100%)
}
.bybit-logo {
  width:min(155px,54%);
  filter:drop-shadow(0 0 24px rgba(119,226,205,.3))
}
.bybit-glyph {
  position:relative;
  z-index:1;
  font-size:82px;
  font-weight:850;
  letter-spacing:-.16em;
  color:#edfef7;
  text-shadow:0 0 28px rgba(119,226,205,.55)
}
.bybit-glyph span {
  color:var(--teal);
  font-size:.72em;
  letter-spacing:-.22em
}
.signals-visual {
  background:linear-gradient(135deg,#112e29,#091b19)
}
.signal-node {
  position:absolute;
  z-index:2;
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#102f2a;
  border:1px solid var(--teal);
  color:var(--teal);
  font-family:var(--mono);
  font-size:15px;
  box-shadow:0 0 26px rgba(119,226,205,.13)
}
.node-one {
  left:17%;
  top:22%
}
.node-two {
  left:45%;
  top:43%;
  border-color:var(--coral);
  color:var(--coral)
}
.node-three {
  right:13%;
  top:18%
}
.signal-line {
  height:1px;
  position:absolute;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  transform-origin:left center;
  opacity:.65
}
.line-one {
  width:38%;
  left:29%;
  top:45%;
  transform:rotate(20deg)
}
.line-two {
  width:37%;
  left:53%;
  top:49%;
  transform:rotate(-26deg)
}
.line-three {
  width:40%;
  left:22%;
  top:42%;
  transform:rotate(47deg);
  opacity:.35
}
.case-copy {
  padding:19px 20px 22px
}
.case-tags {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.case-tags span {
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.07em;
  color:var(--teal);
  border:1px solid rgba(119,226,205,.18);
  padding:4px 6px
}
.case-copy h3 {
  font-size:24px;
  margin:14px 0 0;
  letter-spacing:-.045em
}
.case-lead {
  font-family:Georgia,serif;
  font-size:17px;
  color:var(--teal);
  margin:1px 0 9px
}
.case-copy>p:not(.case-lead):not(.case-footnote) {
  font-size:11px;
  color:var(--muted-2);
  margin:0 0 15px;
  line-height:1.75
}
.case-result {
  display:flex;
  gap:10px;
  align-items:center;
  padding-top:13px;
  border-top:1px solid var(--line)
}
.case-result strong {
  font-family:var(--mono);
  font-size:22px;
  color:var(--teal)
}
.case-result span {
  max-width:150px;
  font-size:9px;
  color:var(--muted)
}
.result-text strong {
  font-size:14px
}
.signal-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:7px
}
.signal-list li {
  font-size:10px;
  color:var(--muted)
}
.signal-list li span {
  color:var(--teal);
  font-family:var(--mono);
  font-weight:bold;
  margin-right:6px
}
.case-copy p.case-footnote {
  font-size:8px;
  line-height:1.6;
  color:var(--muted-2);
  border-top:1px solid var(--line);
  padding-top:10px;
  margin:12px 0 0
}
.skills-section {
  background:#0a1c19
}
.skills-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(40px,10vw,145px);
  align-items:center;
  padding-top:52px
}
.skills-intro {
  max-width:360px;
  font-size:13px;
  color:var(--muted);
  margin:20px 0
}
.skill-cloud {
  display:flex;
  align-content:center;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
.skill-pill {
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--muted);
  font-size:11px;
  transition:all .2s ease
}
.skill-pill:hover {
  border-color:var(--teal);
  color:var(--teal);
  transform:translateY(-2px)
}
.skill-pill.skill-highlight {
  color:var(--teal);
  border-color:rgba(119,226,205,.42);
  background:rgba(119,226,205,.06)
}
.learning-row {
  display:grid;
  grid-template-columns:55px 1fr 1.15fr;
  gap:22px;
  align-items:center;
  margin-top:74px;
  padding-top:26px;
  border-top:1px solid var(--line)
}
.learning-symbol {
  width:45px;
  height:45px;
  border:1px solid var(--teal);
  color:var(--teal);
  display:grid;
  place-items:center;
  font-size:21px;
  transform:rotate(45deg)
}
.learning-symbol::first-letter {
  transform:rotate(-45deg)
}
.mini-label {
  color:var(--teal);
  font-size:8px
}
.learning-row p {
  margin:4px 0 0;
  color:var(--muted-2);
  font-size:10px
}
.language-block p {
  line-height:1.8
}
.language-block p b {
  color:var(--ink);
  font-weight:600
}
.language-block p span {
  color:var(--teal);
  padding-inline:4px
}
.contact-section {
  position:relative;
  overflow:hidden;
  background:#0b2722
}
.contact-glow {
  position:absolute;
  width:800px;
  height:500px;
  border-radius:50%;
  top:-250px;
  left:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(47,173,151,.14),transparent 70%);
  pointer-events:none
}
.contact-inner {
  position:relative
}
.contact-inner .section-label {
  margin-bottom:60px
}
.contact-inner .eyebrow {
  margin-bottom:22px
}
.contact-inner h2 {
  font-size:clamp(47px,7vw,84px);
  line-height:1.03;
  letter-spacing:-.07em;
  margin:0;
  max-width:850px
}
.contact-intro {
  color:var(--muted);
  max-width:550px;
  font-size:14px;
  margin:25px 0
}
.button-outline {
  border:1px solid rgba(119,226,205,.5);
  color:var(--teal)
}
.button-outline:hover {
  background:rgba(119,226,205,.08)
}
.contact-links {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--line)
}
.contact-links a {
  font-size:10px;
  color:var(--muted-2);
  transition:color .2s
}
.contact-links a:hover {
  color:var(--teal)
}
.site-footer {
  background:#05110f;
  border-top:1px solid var(--line)
}
.footer-inner {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding-block:25px
}
.footer-brand .brand-mark {
  width:26px;
  height:26px;
  font-size:15px
}
.footer-brand .brand-name {
  font-size:11px
}
.footer-inner p {
  font-size:10px;
  color:var(--muted-2);
  margin:0
}
.back-top {
  font-size:8px;
  color:var(--teal)
}
.footer-inner small {
  grid-column:1/-1;
  font-family:var(--mono);
  color:#5e7970;
  font-size:8px;
  letter-spacing:.06em;
  margin-top:9px
}
.menu-open {
  overflow:hidden
}
@media(min-width:1300px) {
  .hero {
    min-height:730px
  }
  .hero-visual {
    height:580px
  }
  .portrait-frame {
    height:500px;
    width:375px
  }
  .brand-card {
    left:3%;
    bottom:38px
  }
}
@media(max-width:900px) {
  .primary-nav {
    gap:17px
  }
  .primary-nav>a {
    font-size:11px
  }
  .hero {
    grid-template-columns:1.08fr .92fr;
    min-height:610px;
    gap:5px
  }
  .hero h1 {
    font-size:clamp(49px,7.7vw,72px)
  }
  .hero-visual {
    height:435px
  }
  .portrait-frame {
    height:380px;
    width:min(300px,82%)
  }
  .brand-card {
    width:91px;
    height:125px
  }
  .visual-stamp {
    width:75px;
    height:75px;
    right:-2%
  }
  .hero-proof {
    gap:12px
  }
  .about-layout {
    gap:50px
  }
  .case-grid {
    gap:12px
  }
  .case-visual {
    height:190px
  }
  .case-featured .case-visual {
    height:225px
  }
  .skills-layout {
    gap:54px
  }
  .timeline-item {
    grid-template-columns:82px 26px 1fr;
    gap:16px
  }
  .timeline-item:before {
    left:111px
  }
}
@media(max-width:680px) {
  html {
    scroll-padding-top:76px
  }
  .section-pad {
    padding-block:75px
  }
  .nav-wrap {
    height:66px
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    gap:6px;
    justify-content:center;
    align-items:center;
    width:42px;
    height:42px;
    background:transparent;
    border:1px solid var(--line);
    border-radius:3px;
    cursor:pointer
  }
  .menu-toggle span {
    height:1px;
    width:17px;
    background:var(--teal);
    transition:transform .2s ease
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .primary-nav {
    position:absolute;
    top:65px;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px var(--pad) 20px;
    background:rgba(7,23,21,.98);
    border-bottom:1px solid var(--line);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .2s,transform .2s,visibility .2s
  }
  .primary-nav.is-open {
    opacity:1;
    visibility:visible;
    transform:translateY(0)
  }
  .primary-nav>a {
    padding:13px 0;
    border-bottom:1px solid var(--line);
    font-size:13px
  }
  .primary-nav .nav-contact {
    align-self:flex-start;
    margin-top:12px;
    padding:10px 15px;
    border:1px solid rgba(119,226,205,.45)
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:58px;
    padding-bottom:73px;
    gap:8px
  }
  .hero-copy {
    padding:0
  }
  .hero h1 {
    font-size:clamp(51px,13vw,76px)
  }
  .hero-kicker {
    font-size:8px
  }
  .hero-intro {
    font-size:14px;
    margin:19px 0 21px;
    max-width:450px
  }
  .hero-actions {
    gap:8px
  }
  .button {
    min-height:45px;
    padding-inline:14px;
    font-size:11px;
    gap:10px
  }
  .hero-proof {
    margin-top:31px;
    gap:13px
  }
  .proof-item strong {
    font-size:21px
  }
  .proof-item>span {
    font-size:8px
  }
  .proof-divider {
    height:29px
  }
  .metric-note {
    font-size:7px
  }
  .hero-visual {
    height:370px;
    margin-top:19px
  }
  .portrait-frame {
    height:330px;
    width:min(270px,70%);
    border-radius:145px 145px 5px 5px
  }
  .brand-card {
    left:5%;
    bottom:28px;
    width:76px;
    height:105px
  }
  .visual-stamp {
    right:5%;
    top:18px;
    width:68px;
    height:68px;
    font-size:7px
  }
  .orbit-one {
    width:330px;
    height:330px
  }
  .orbit-two {
    width:370px;
    height:205px
  }
  .scroll-cue {
    bottom:14px
  }
  .ticker-track {
    gap:19px;
    font-size:9px
  }
  .about-layout {
    grid-template-columns:1fr;
    gap:26px;
    padding-top:38px
  }
  .section-title {
    font-size:clamp(42px,11vw,60px)
  }
  .about-text p.lead {
    font-size:16px
  }
  .about-text p {
    font-size:12px
  }
  .about-strip {
    grid-template-columns:1fr;
    margin-top:42px
  }
  .about-strip>div {
    padding:17px 18px;
    display:grid;
    grid-template-columns:28px 1fr;
    align-items:start
  }
  .strip-index {
    grid-row:span 2;
    margin:1px 0 0
  }
  .about-strip p {
    margin-top:1px
  }
  .section-label {
    font-size:8px;
    gap:12px
  }
  .section-label span:last-child {
    text-align:right
  }
  .section-heading-row {
    display:block;
    padding-top:38px;
    margin-bottom:30px
  }
  .section-side-note {
    margin-top:18px;
    font-size:11px;
    max-width:430px
  }
  .timeline {
    margin-top:10px
  }
  .timeline-item {
    grid-template-columns:55px 19px 1fr;
    gap:12px;
    padding-bottom:24px
  }
  .timeline-item:before {
    left:75px
  }
  .timeline-year {
    font-size:8px
  }
  .timeline-year span {
    font-size:7px
  }
  .timeline-marker {
    width:8px;
    height:8px
  }
  .role-heading h3 {
    font-size:16px
  }
  .role-tag {
    font-size:7px
  }
  .role-title {
    font-size:10px
  }
  .timeline-content>p:last-child {
    font-size:10px
  }
  .case-grid {
    grid-template-columns:1fr
  }
  .case-featured {
    grid-row:auto
  }
  .case-visual,.case-featured .case-visual {
    height:205px
  }
  .case-copy {
    padding:17px
  }
  .case-copy h3 {
    font-size:22px
  }
  .filter-row {
    gap:6px
  }
  .filter-button {
    font-size:9px;
    padding:7px 10px
  }
  .skills-layout {
    grid-template-columns:1fr;
    gap:32px;
    padding-top:39px
  }
  .skills-intro {
    font-size:12px
  }
  .skill-cloud {
    gap:7px
  }
  .skill-pill {
    font-size:10px;
    padding:9px 10px
  }
  .learning-row {
    grid-template-columns:40px 1fr;
    gap:16px;
    margin-top:47px;
    padding-top:21px
  }
  .learning-symbol {
    width:35px;
    height:35px;
    font-size:18px
  }
  .learning-row p {
    font-size:10px
  }
  .language-block {
    grid-column:2
  }
  .contact-inner .section-label {
    margin-bottom:45px
  }
  .contact-inner h2 {
    font-size:clamp(47px,12vw,70px)
  }
  .contact-intro {
    font-size:12px
  }
  .contact-links {
    gap:12px 18px;
    flex-direction:column
  }
  .footer-inner {
    grid-template-columns:auto 1fr;
    gap:10px
  }
  .footer-inner p {
    grid-column:1/-1;
    order:3
  }
  .back-top {
    justify-self:end
  }
  .footer-inner small {
    order:4
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}