@font-face {
  font-family: Oxanium;
  src: url('assets/oxanium.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #04080f;
  --panel: #0a1422;
  --panel-hover: #0d1c2d;
  --fg: #edf8ff;
  --muted: #a4b6ce;
  --line: #25384d;
  --blue: #5ee9ff;
  --bright: #adf7ff;
  --violet: #9a8eff;
  --tech: Oxanium, 'Space Grotesk', sans-serif;
}

body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 88% 8%, #2c246312, transparent 30%),
    radial-gradient(ellipse at 0% 45%, #005f7a0d, transparent 35%),
    var(--bg);
}

.ambient-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: .78;
}

.site-header {
  background: #040a13e6;
  border-bottom-color: #5ee9ff30;
  box-shadow: 0 1px 35px #051721;
}

.site-header::after {
  content: '';
  position: absolute;
  left: 4%;
  bottom: -1px;
  height: 1px;
  width: 20%;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  box-shadow: 0 0 10px #5ee9ff80;
}

.brand {
  font-family: var(--tech);
  letter-spacing: .13em;
}

.brand-symbol {
  color: #02101b;
  background: linear-gradient(145deg, #c2ffff, #4bddff);
  clip-path: polygon(0 0, 76% 0, 100% 24%, 100% 100%, 24% 100%, 0 76%);
}

.brand-symbol span {font-family: var(--display);}

.desktop-nav {gap: 30px;}
.desktop-nav a {position: relative;}
.desktop-nav a::after {
  content: '';
  position: absolute;
  height: 2px;
  left: 0;
  right: 100%;
  bottom: 6px;
  background: var(--blue);
  box-shadow: 0 0 10px #5ee9ff99;
  transition: right .25s ease;
}
.desktop-nav a:hover::after,
.desktop-nav a[aria-current]::after {right: 0;}
.nav-resume {border-color: #5ee9ff55; background: #18314333;}
.nav-resume:hover {box-shadow: inset 0 0 20px #5ee9ff09, 0 0 22px #5ee9ff13;}

.hero {
  grid-template-columns: 1.02fr 1fr;
  gap: 20px 32px;
  padding-top: 72px;
}
.hero-grid {
  inset: -40px -56px 0;
  background-size: 58px 58px;
  background-image: linear-gradient(#5bdfff0a 1px, transparent 1px), linear-gradient(90deg, #5bdfff0a 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at 65% 35%, #000, transparent 75%);
}
.hero-light {
  position: absolute;
  top: -10%;
  right: -3%;
  width: 72%;
  height: 90%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse, #035d6e28 0%, #0a244c13 40%, transparent 70%);
}
.hero-copy {position: relative; z-index: 3; padding-top: 18px; min-width: 0;}
.hero .eyebrow {font-size: .75rem; letter-spacing: .16em; color: #8deeff;}
.small-rule {box-shadow: 0 0 13px var(--blue);}

h1 {
  font-family: var(--tech);
  font-size: clamp(4.5rem, 6.7vw, 6.45rem);
  line-height: 1.01;
  font-weight: 700;
  letter-spacing: -.055em;
  margin-bottom: 26px;
  text-shadow: 0 0 40px #82d7ff16;
}
.name-first {
  background: linear-gradient(110deg, #fff 15%, #ccf4ff 65%, #8fddff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.name-outline {
  color: #5ee9ff04;
  -webkit-text-stroke: 1px #64e6ff;
  text-shadow: 0 0 27px #21caff2c;
}
.name-period {text-shadow: 0 0 20px #2ddaff8a;}
.hero-statement {font-size: 1.22rem;}
.hero-description {max-width: 445px;}

.button-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #81f0ff, #4edaff);
  color: #00121e;
  border-color: #c2fbff80;
  box-shadow: 0 0 27px #25c9ff16;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.button-primary::before {
  content: '';
  position: absolute;
  inset: -50% auto -50% -70%;
  width: 45%;
  background: linear-gradient(90deg, transparent, #fff5, transparent);
  transform: skewX(-25deg);
  transition: left .55s ease;
  pointer-events: none;
}
.button-primary:hover::before {left: 125%;}
.button-primary:hover {background: #a3f3ff; box-shadow: 0 0 30px #24c7ff2a;}
.button-primary:focus-visible {outline-offset: -5px; outline-color: #00121e;}
.button-text:hover {color: var(--blue); background: #5ee9ff08;}

.hero-visual {
  --light-x: 50%;
  --light-y: 30%;
  align-self: start;
  margin-top: 0;
  padding: 0 21px;
  position: relative;
  background: radial-gradient(ellipse at var(--light-x) var(--light-y), #07395438, transparent 70%), linear-gradient(150deg, #0b17217a, #080e1966 70%);
  border: 1px solid #4dcbf13b;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.hero-visual::before,
.hero-visual::after {
  content: '';
  position: absolute;
  width: 58px;
  height: 3px;
  z-index: 5;
  pointer-events: none;
}
.hero-visual::before {top: 0; left: 0; background: var(--blue); box-shadow: 0 0 20px var(--blue);}
.hero-visual::after {bottom: 0; right: 0; background: var(--violet); box-shadow: 0 0 20px var(--violet);}
.visual-topline {
  padding-block: 20px 17px;
  border-top: 0;
  border-bottom: 1px solid #4dcbf125;
  color: #bceeff;
  font-size: .75rem;
  letter-spacing: .055em;
  gap: 10px;
}
.visual-index {color: #a49cff; display: inline; font-size: .75rem;}
.cad-stage {
  aspect-ratio: .87;
  overflow: hidden;
  perspective: 900px;
  background: radial-gradient(ellipse at 45% 48%, #0b617228, transparent 60%);
}
.hero-hologram {
  position: absolute;
  width: 76%;
  left: 12%;
  top: 3%;
  aspect-ratio: 3 / 4;
  z-index: 3;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 5px #19ddff55) drop-shadow(0 0 24px #058bdd33);
  animation: hologram-drift 9s ease-in-out infinite;
}
.hero-object {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  mix-blend-mode: normal;
  animation: none;
  z-index: auto;
}
.hero-cad {
  position: absolute;
  width: 258.6667%;
  height: auto;
  max-width: none;
  left: -83.3333%;
  top: -12.5%;
  object-fit: unset;
  animation: none;
  filter: invert(1) sepia(1) saturate(2.6) hue-rotate(132deg) brightness(1.12);
}
.stage-floor {
  position: absolute;
  width: 145%;
  height: 48%;
  left: -22.5%;
  bottom: -4%;
  background-image: linear-gradient(#4cddff25 1px, transparent 1px), linear-gradient(90deg, #4cddff25 1px, transparent 1px);
  background-size: 28px 28px;
  transform: rotateX(65deg);
  transform-origin: center bottom;
  mask-image: radial-gradient(ellipse, #000, transparent 68%);
  z-index: 0;
}
.stage-orbit {
  z-index: 1;
  border-color: #55dfff38;
  width: 89%;
  top: 10%;
  left: 5.5%;
  background: none;
  box-shadow: inset 0 0 25px #07c9ff05, 0 0 30px #07c9ff05;
}
.orbit-one {transform: rotate(-32deg) rotateY(54deg);}
.orbit-two {width: 73%; left: 13.5%; top: 20%; border-color: #8d81ff45; transform: rotate(32deg) rotateY(53deg);}
.orbit-three {width: 88%; left: 6%; top: auto; bottom: 5%; transform: rotateX(73deg); border-style: dashed; border-color: #63e7ff5c;}
.stage-orbit::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  width: 23px;
  height: 3px;
  background: #8aedff;
  box-shadow: 0 0 16px #29d5ff;
}
.orbit-two::after {background: var(--violet); box-shadow: 0 0 16px #9a8eff;}
.stage-ruler {
  position: absolute;
  top: 15%;
  height: 61%;
  width: 9px;
  background: repeating-linear-gradient(0deg, #6bdfff66 0 1px, transparent 1px 15px);
  opacity: .55;
}
.ruler-left {left: 1%; border-left: 1px solid #58b7d12e;}
.ruler-right {right: 1%; border-right: 1px solid #58b7d12e;}
.stage-cross {color: #6edfff; font-size: 1.1rem; text-shadow: 0 0 10px #5ee9ff6b; z-index: 5;}
.cross-tl,.cross-tr {top: 3%;}
.cross-bl,.cross-br {bottom: 5%;}
.stage-scan {
  position: absolute;
  top: 10%;
  left: 8%;
  right: 8%;
  height: 10%;
  z-index: 4;
  pointer-events: none;
  border-bottom: 1px solid #67f5ff80;
  background: linear-gradient(transparent, #48dcff0a 70%, #48dcff24);
  filter: drop-shadow(0 3px 5px #2fdeff25);
  animation: drawing-scan 8s ease-in-out infinite;
}
.stage-label {
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #c8faff;
  letter-spacing: .15em;
  font-size: .75rem;
  gap: 10px;
  z-index: 6;
  background: #07101bd9;
  padding: 5px 12px;
}
.label-line {background: var(--blue); width: 22px; box-shadow: 0 0 10px var(--blue);}
.visual-bottomline {border-color: #4dcbf12e; padding-block: 13px 16px; gap: 8px 16px;}
.visual-bottomline>span {font-size: .75rem; color: #8fa8c5;}
.visual-open {
  border: 0;
  background: transparent;
  font-size: .875rem;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #e6faff;
}
.visual-open:hover {color: var(--blue);}
.visual-open>span {color: var(--blue); font-size: 1.15rem;}

.hero-facts {
  margin-top: 25px;
  position: relative;
  border-color: #5ee9ff34;
  background: linear-gradient(90deg, #11324930, transparent 50%, #4f3c810e);
  padding: 29px 22px;
}
.hero-facts::before {
  content: '';
  position: absolute;
  top: -1px;
  right: 0;
  width: 80px;
  height: 2px;
  background: #8af1ff;
  box-shadow: 0 0 15px #5ee9ff65;
}
.hero-facts>div+div {border-color: #5ee9ff25;}
.hero-facts strong {color: #dceefa;}
.hero-facts .gpa-value {font-family: var(--tech); color: var(--blue); text-shadow: 0 0 16px #5ee9ff35;}
.fact-label {color: #92adc8;}

.eyebrow {color: var(--blue);}
.section-heading h2,
.experience-intro h2,
.contact-grid h2 {font-family: var(--tech); font-weight: 700; letter-spacing: -.045em;}
.section-number {border-color: #5ee9ff48; color: var(--blue); background: #5ee9ff0a; padding: 2px 8px;}
.muted-heading {color: #8b9cbb;}
.project-card {
  --light-x: 50%;
  --light-y: 0%;
  background: radial-gradient(ellipse at var(--light-x) var(--light-y), #24b6dc0e, transparent 60%), linear-gradient(130deg, #0b1928f0, #080e1bec);
  border-color: #35536a9c;
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px));
}
.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 27px;
  width: 60px;
  height: 2px;
  background: var(--blue);
  box-shadow: 0 0 20px #5ee9ff73;
}
.project-card:hover,
.project-card:focus-within {border-color: #66e9ff9c; background: radial-gradient(ellipse at var(--light-x) var(--light-y), #24b6dc16, transparent 68%), #0a1726;}
.project-top {color: #a3c9dc;}
.project-number {color: #8f9fbe;}
.project-stat {border-bottom-style: dashed; border-bottom-color: #5ee9ff29;}
.project-stat strong {font-family: var(--tech); text-shadow: 0 0 30px #36d4ff15;}
.project-gripper .project-stat strong {color: #b0a6ff; text-shadow: 0 0 30px #9a8eff25;}
.project-gripper::before {background: var(--violet); box-shadow: 0 0 20px #9a8eff73;}
.project-role {color: #99b9d0;}
.project-content h3,.compact-project-body h3 {letter-spacing: -.03em;}
.tags span {border-color: #415668; color: #c4d9e9; background: #b8e6ff03;}
.project-link {border-color: #5ee9ff29; background: #1532471a;}
.project-link:focus-visible {outline-offset: -6px;}

.design-section {
  position: relative;
  background: linear-gradient(120deg, #071724bf, #080f20b3 70%);
  border-color: #44bdd32b;
}
.design-tile {background: #07121f; border-color: #335469;}
.design-tile:hover {box-shadow: 0 0 25px #42e6ff14;}
.design-tile:focus-visible {outline-offset: -5px;}
.design-image {background: #050c14;}
.design-image img {filter: invert(1) sepia(.65) saturate(1.8) hue-rotate(145deg); mix-blend-mode: screen;}
.design-caption {border-color: #335469; background: #13243850; color: #b8e6f1;}
.gallery-dialog>img {filter: none; mix-blend-mode: normal;}

.timeline {border-color: #5ee9ff40;}
.timeline-node {box-shadow: 0 0 14px #5ee9ff60; background: #153349;}
.timeline-item h3 {color: #e3f5ff;}
.about-section {background: linear-gradient(140deg, #10162bc4, #071522b8); border-color: #5864964a;}
.education-block {background: linear-gradient(110deg, #1233447d, #131c3255); box-shadow: inset 0 0 35px #5ee9ff04;}
.toolbox {background: #071423ba; border-color: #4a799263; position: relative;}
.toolbox::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -1px;
  width: 24px;
  height: 24px;
  border-top: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
}
.toolbox-title {border-color: #4a799263; background: #16425922;}
.skill-group+.skill-group {border-color: #4a79923d;}
.recognition {border-color: #7584be40;}
.contact-section {position: relative;}
.contact-section::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 20% 60%, #15537824, transparent 60%);
  pointer-events: none;
}
.contact-grid h2>span {color: #6eefff; text-shadow: 0 0 45px #30bce021;}
.email-link,.phone-link {border-color: #5ee9ff37;}
.site-footer {border-color: #5ee9ff2b;}
dialog {background: #071421; border-color: #5ee9ff69; box-shadow: 0 30px 150px #000d, 0 0 45px #39ddff14;}
.dialog-topbar {background: #081725; border-color: #5ee9ff36;}
.dialog-close {background: #10273b; border-color: #5ee9ff57;}
.dialog-note {background: #5ee9ff09;}

@keyframes hologram-drift {
  0%,100% {transform: translateY(0) rotate(-2deg);}
  50% {transform: translateY(-9px) rotate(1deg);}
}
@keyframes drawing-scan {
  0%,100% {top: 9%; opacity: .1;}
  15%,80% {opacity: .8;}
  90% {top: 82%; opacity: .15;}
}

@media(min-width:1500px) {
  .hero {padding-top: 85px;}
  .hero-visual {margin-top: 0;}
}
@media(max-width:1100px) {
  .hero {gap: 20px 24px; padding-top: 52px;}
  h1 {font-size: 6.6vw;}
  .hero-copy {padding-top: 10px;}
  .hero-visual {margin-top: 10px; padding-inline: 15px;}
  .hero .eyebrow {letter-spacing: .07em;}
  .visual-topline {letter-spacing: .015em; font-size: .75rem;}
  .visual-index {font-size: .75rem;}
  .visual-bottomline>span {display: none;}
  .hero-facts {padding-inline: 18px;}
}
@media(max-width:800px) {
  .hero {grid-template-columns: 1fr 1fr; gap: 18px;}
  h1 {font-size: 7.8vw;}
  .hero-visual {align-self: center; margin-top: 0; padding-inline: 12px;}
  .hero-hologram {width: 78%; left: 11%; top: 4%;}
  .hero-object {width: 100%; height: 100%;}
  .cad-stage {aspect-ratio: .8;}
  .visual-topline {display: block; padding-block: 15px 13px;}
  .visual-topline>span {display: block;}
  .visual-index {margin-top: 5px; color: #a49cff;}
  .stage-label {left: 50%; bottom: 3%; gap: 6px; letter-spacing: .07em; font-size: .75rem;}
  .stage-label .label-line {width: 12px;}
  .hero-facts {gap: 24px 15px;}
  .hero-facts>div:nth-child(3) {border-left: 0;}
  .section-heading h2,.experience-intro h2 {font-size: 2.3rem;}
}
@media(max-width:600px) {
  .hero {grid-template-columns: 1fr; padding-top: 32px; gap: 0;}
  .hero-copy {padding-top: 0;}
  .hero .eyebrow {font-size: .75rem; letter-spacing: .07em;}
  h1 {font-size: clamp(3.8rem, 14vw, 5.4rem); line-height: 1.02; letter-spacing: -.055em;}
  .hero-statement {font-size: 1.18rem;}
  .hero-visual {width: 100%; max-width: 470px; margin-top: 37px; padding-inline: 17px;}
  .visual-topline {display: flex; flex-wrap: wrap; padding-block: 17px 14px; gap: 8px 14px;}
  .visual-topline>span {display: inline;}
  .visual-index {margin: 0; font-size: .75rem;}
  .cad-stage {aspect-ratio: .84;}
  .hero-hologram {width: 78%; left: 11%; top: 4%;}
  .hero-object {width: 100%; height: 100%;}
  .stage-label {bottom: 3%; left: 50%; font-size: .75rem; letter-spacing: .1em;}
  .stage-label .label-line {width: 18px;}
  .visual-bottomline {padding-block: 10px 12px;}
  .visual-open {font-size: .875rem;}
  .hero-facts {margin-top: 28px; padding: 25px 14px; gap: 24px 9px;}
  .hero-facts>div:nth-child(2n) {padding-left: 13px;}
  .hero-facts strong {font-size: .9rem;}
  .fact-label {font-size: .75rem; letter-spacing: .025em;}
  .section-heading h2,.experience-intro h2 {font-size: 2.25rem;}
  .contact-grid h2 {font-size: 3.1rem;}
  .ambient-field {opacity: .48;}
}
@media(prefers-reduced-motion:reduce) {
  .hero-hologram,.stage-scan {animation: none;}
  .stage-scan {top: 43%; opacity: .28;}
  .button-primary::before,.desktop-nav a::after {transition: none;}
}

/* Mechanical portfolio: evidence first, with an interactive drawing display. */
body {
  background:
    radial-gradient(ellipse at 93% 4%, #173a8924, transparent 25%),
    radial-gradient(ellipse at 1% 30%, #08395820, transparent 25%),
    radial-gradient(ellipse at 95% 68%, #2d1d5824, transparent 25%),
    #030710;
}
.ambient-field {opacity: .9;}
.hero {grid-template-columns: 1fr 1.1fr; gap: 26px 42px; padding-top: 44px;}
.hero-copy {padding-top: 17px;}
.hero-light {width: 82%; right: -6%; top: -12%; background: radial-gradient(ellipse, #00658b33, #17377514 43%, transparent 68%);}
.hero-grid {background-size: 48px 48px; opacity: .9;}
.hero-beam {position: absolute; height: 1px; pointer-events: none; z-index: -1; background: linear-gradient(90deg, transparent, #31bfff80, transparent); transform-origin: right; box-shadow: 0 0 22px #00aaff55;}
.beam-one {top: 10%; right: -1%; width: 69%; transform: rotate(-31deg);}
.beam-two {top: 56%; right: -1%; width: 47%; transform: rotate(22deg); background: linear-gradient(90deg, transparent, #8d82ff66, transparent);}
.availability {display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; margin-bottom: 23px; background: linear-gradient(100deg, #1540548c, #12244255); border: 1px solid #72e9ff47; border-radius: 2px; color: #c8f7ff; font: .75rem/1.6 var(--mono); letter-spacing: .065em;}
.availability-mark {font-size: 1.05rem; color: var(--blue); line-height: 1;}
.hero .eyebrow {font-size: .75rem; letter-spacing: .055em; margin-bottom: 18px; color: #9bb4cf;}
h1 {font-size: clamp(4.25rem, 6.05vw, 6rem); line-height: 1.02; margin-bottom: 23px; letter-spacing: -.055em;}
.name-outline {-webkit-text-stroke-color: #85e9ff; text-shadow: 0 0 45px #2b9fff26;}
.hero-statement {font-size: 1.26rem; margin-bottom: 11px; letter-spacing: -.025em;}
.hero-statement strong {color: #e6f6ff; font-weight: 500;}
.hero-description {max-width: 490px; margin-bottom: 19px; font-size: 1rem; line-height: 1.8;}
.candidate-meta {display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; margin: 0 0 20px; color: #c3d2e4; font-size: .875rem;}
.candidate-meta>span {display: inline-flex; align-items: center; gap: 8px;}
.candidate-meta>span+span {margin-left: 15px; padding-left: 15px; border-left: 1px solid #42617b;}
.candidate-meta strong {font-family: var(--tech); font-weight: 700; font-size: 1.25rem; color: var(--blue);}
.hero-skill-line {display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 23px;}
.hero-skill-line span {font-size: .875rem; padding: 3px 9px; color: #afcbe0; background: #1532492b; border: 1px solid #31516b;}
.hero-actions {gap: 8px;}
.hero-actions .button {font-size: .875rem; padding-inline: 15px; gap: 14px; min-height: 49px;}
.hero-actions .button-text {padding-inline: 8px;}
.hero-email {margin-top: 18px; display: inline-flex; align-items: center; gap: 13px; color: #9fbad5; font-size: .875rem; padding: 3px 0; overflow-wrap: anywhere;}
.hero-email>span {color: var(--blue);}
.hero-email:hover {color: #e5faff;}

.hero-visual {margin-top: 0; padding-inline: 20px; background: radial-gradient(ellipse at var(--light-x) var(--light-y), #04627740, transparent 62%), linear-gradient(155deg, #10263e80, #06101dda 65%, #191c3666); border-color: #54daff66; box-shadow: inset 0 0 60px #1361870c;}
.hero-visual::before {width: 105px; height: 2px;}
.hero-visual::after {width: 95px; height: 2px;}
.visual-topline {padding-block: 17px 15px; letter-spacing: .075em;}
.mechanism-tabs {display: grid; grid-template-columns: 1fr 1.2fr; gap: 6px; padding: 12px 0; border-bottom: 1px solid #4dcbf125;}
.mechanism-tab {display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border: 1px solid transparent; background: #14263a4d; color: #91abc7; font-size: .875rem; line-height: 1.4; padding: 8px;}
.mechanism-tab>span {font: .75rem var(--mono); opacity: .8;}
.mechanism-tab[aria-selected="true"] {color: #d6fbff; border-color: #61eaff65; background: linear-gradient(115deg, #17607866, #1636493d); box-shadow: inset 0 -1px 0 #5ee9ff;}
.mechanism-tab:hover {color: #fff; background-color: #15516a55;}
.mechanism-tab:focus-visible {outline-offset: -4px;}
#mechanism-panel:focus-visible {outline: 1px solid var(--blue); outline-offset: 2px;}
.cad-stage {aspect-ratio: 1.12; background: radial-gradient(ellipse at 47% 51%, #087b912d, transparent 55%); perspective: 1000px;}
.hero-hologram {width: 62%; left: 19%; top: 2%; aspect-ratio: 3/4; transform-style: preserve-3d; filter: drop-shadow(0 0 6px #20d4ff4d) drop-shadow(0 0 38px #066bff48); animation: engineering-hologram 9s ease-in-out infinite;}
.hero-object {width: 100%; height: 100%; aspect-ratio: 3/4;}
.hero-cad {width: 258.6667%; left: -83.3333%; top: -12.5%; height: auto; max-width: none; filter: invert(1) sepia(1) saturate(3.5) hue-rotate(134deg) brightness(1.18);}
[data-mechanism="prong"] .hero-hologram {width: 78%; left: 11%; top: 1.5%; aspect-ratio: 685/735;}
[data-mechanism="prong"] .hero-object {aspect-ratio: 685/735;}
[data-mechanism="prong"] .hero-cad {width: 226.1314%; left: -70.073%; top: -14.2857%;}
.stage-floor {width: 150%; left: -25%; height: 58%; bottom: -4%; background-size: 24px 24px; background-image: linear-gradient(#5bdfff38 1px, transparent 1px), linear-gradient(90deg, #5bdfff38 1px, transparent 1px); transform: rotateX(67deg);}
.stage-orbit {border-color: #57cfff52;}
.orbit-one {width: 91%; left: 4.5%; top: 3%; transform: rotate(-39deg) rotateY(61deg);}
.orbit-two {width: 84%; left: 8%; top: 10%; transform: rotate(38deg) rotateY(65deg); border-color: #897dff66;}
.orbit-three {width: 92%; left: 4%; bottom: -15%; border-color: #7fe6ff72; transform: rotateX(74deg);}
.orbital-track {position: absolute; width: 80%; left: 10%; top: 10%; aspect-ratio: 1; border: 1px dashed #8fbdf624; border-radius: 50%; animation: orbital-rotation 38s linear infinite; z-index: 1;}
.orbital-track>span {position: absolute; left: 50%; top: -2px; height: 3px; width: 24px; background: #a0f0ff; box-shadow: 0 0 14px #33bfff; border-radius: 3px;}
.hologram-base {position: absolute; left: 21%; right: 21%; bottom: 4%; height: 10%; border-radius: 50%; background: radial-gradient(ellipse, #45dfff24, #408eff12 50%, transparent 72%); border: 1px solid #2bb4db2b; box-shadow: 0 -16px 70px #1cafff1f;}
.stage-scan {left: 10%; right: 10%; height: 15%; background: linear-gradient(transparent, #3dcdff08 45%, #66efff26); border-bottom-color: #82edff99; animation: drawing-scan 9s ease-in-out infinite;}
.stage-ruler {height: 70%; top: 10%;}
.stage-label {bottom: 10px; left: 11px; transform: none; letter-spacing: .09em; font-size: .75rem; padding: 6px 8px; background: #06101ccc; border: 1px solid #4babce3b;}
.stage-label .label-line {width: 15px;}
.cross-tl,.cross-tr {top: 2%;}
.cross-bl,.cross-br {bottom: 3%;}
.mechanism-description {font: .75rem/1.8 var(--mono); color: #a2c2d6; text-align: center; margin: 0; padding: 10px 4px 14px; letter-spacing: .015em;}
.visual-bottomline {padding-block: 8px 12px; gap: 4px 12px;}
.visual-open {font-size: .875rem; gap: 10px;}
.motion-toggle {font-size: .75rem; background: transparent; color: #a4b5cd; border: 1px solid #52688266; min-height: 34px; padding: 5px 10px; white-space: nowrap;}
.motion-toggle:hover:not(:disabled) {color: var(--blue); border-color: #5ee9ff80;}
.motion-toggle:disabled {opacity: .75;}
.motion-paused *, .motion-paused *::before, .motion-paused *::after,
.page-inactive *, .page-inactive *::before, .page-inactive *::after {animation-play-state: paused !important;}
.motion-paused .hero-hologram {transform: none;}

.evidence-band {grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 15px; padding: 26px 0; background: linear-gradient(110deg, #0d31432e, transparent 50%, #25274b26); border-color: #58ceff50;}
.evidence-band>div {gap: 12px; padding-inline: 24px 10px;}
.evidence-band>div+div {padding-left: 24px; border-left: 1px solid #4b9ac239;}
.evidence-band strong {display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font: 700 2.15rem/1.1 var(--tech); color: #b7f4ff; letter-spacing: -.04em;}
.evidence-band strong>span {font: 400 .875rem/1.5 var(--display); color: #c2d3e7; margin: 0; letter-spacing: 0;}
.evidence-band .fact-label {font-size: .75rem; line-height: 1.6; letter-spacing: .025em; color: #8eabc7;}
.projects-section {padding-top: 85px;}
.section-intro {color: #aebfd3;}
.project-card {border-color: #4e799f66; box-shadow: 0 0 0 1px #06101a;}
.project-card:hover,.project-card:focus-within {box-shadow: inset 0 0 55px #0b7fa714;}
.project-top {padding-block: 21px; color: #abd4e8;}
.project-drawing {padding: 0; position: relative; display: block; width: 100%; aspect-ratio: 1.76; overflow: hidden; border: 0; border-top: 1px solid #36546a7a; border-bottom: 1px solid #36546a7a; background: radial-gradient(ellipse at 50% 55%, #0c385263, #06101be8 80%);}
.project-drawing::before {content: ''; position: absolute; inset: 0; background-image: linear-gradient(#2ba2d20a 1px, transparent 1px),linear-gradient(90deg,#2ba2d20a 1px,transparent 1px); background-size: 28px 28px; pointer-events: none;}
.project-drawing img {width: 100%; height: calc(100% - 31px); object-fit: contain; padding: 12px 17px 4px; mix-blend-mode: screen; filter: invert(1) sepia(.9) saturate(2) hue-rotate(143deg); transition: transform .4s ease;}
.project-drawing:hover img {transform: scale(1.035);}
.project-drawing:focus-visible {outline-offset: -6px;}
.drawing-caption {position: absolute; left: 18px; right: 18px; bottom: 10px; display: flex; justify-content: space-between; gap: 14px; font: .75rem/1.5 var(--mono); color: #8fc9dd; letter-spacing: .015em;}
.drawing-caption>span {color: var(--blue);}
.project-content {padding-top: 25px;}
.project-content h3 {font-size: 1.9rem;}
.project-content>p:not(.project-role) {margin-bottom: 20px;}
.project-evidence {margin: 0 0 24px; border-top: 1px solid #38618252;}
.project-evidence>div {padding: 17px 0 0;}
.project-evidence dt {font: .75rem/1.7 var(--mono); letter-spacing: .045em; color: #84dff2; margin-bottom: 6px;}
.project-evidence dd {font: 400 1rem/1.75 var(--display); color: #c1cfdf; margin: 0;}
.project-gripper .project-evidence dt {color: #b6adff;}
.compact-project-body .result-highlight {display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: #b4e3f2; border-left: 2px solid #78e4fa90; background: #18526720; padding: 12px 15px;}
.result-highlight>span {color: var(--blue); flex-shrink: 0;}
.project-link {min-height: 56px;}
.project-content .tags span,.compact-project-body .tags span {font-size: .875rem;}
.design-section {background: radial-gradient(ellipse at 12% 20%, #09547422, transparent 55%), linear-gradient(110deg, #071624dc, #11182bc9);}
.design-tile {transition: border-color .25s, transform .25s, box-shadow .25s;}
.design-tile:hover {transform: translateY(-3px); border-color: #81e9ff; box-shadow: 0 9px 35px #00adff12;}
.toolbox {box-shadow: inset 0 0 65px #0d83ab0a;}
.contact-actions .button {box-shadow: 0 0 35px #29d4ff17;}
.mobile-dock {display: none;}

@keyframes engineering-hologram {
  0%,100% {transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(0);}
  50% {transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-8px);}
}
@keyframes orbital-rotation {to {transform: rotate(360deg);}}

@media(min-width:1500px) {.hero {padding-top: 62px;}}
@media(max-width:1100px) {
  .hero {grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 38px;}
  h1 {font-size: 6.5vw;}
  .hero-visual {margin-top: 14px; padding-inline: 13px;}
  .hero .eyebrow {letter-spacing: .025em;}
  .availability {font-size: .75rem; letter-spacing: .025em;}
  .hero-description {font-size: .95rem;}
  .candidate-meta {gap: 10px 12px;}
  .candidate-meta>span+span {margin-left: 0; padding-left: 12px;}
  .candidate-meta>span:last-child {padding-left: 0; border: 0;}
  .mechanism-tab {font-size: .875rem; gap: 7px;}
  .mechanism-tab>span {display: none;}
  .visual-topline {letter-spacing: .025em;}
  .visual-bottomline {gap: 5px 9px;}
  .visual-open {font-size: .875rem;}
  .evidence-band {padding-block: 25px;}
  .evidence-band>div,.evidence-band>div+div {padding-left: 16px;}
  .evidence-band strong {font-size: 1.8rem;}
  .drawing-caption {font-size: .75rem; letter-spacing: 0; left: 13px; right: 13px;}
  .project-drawing {aspect-ratio: 1.5;}
}
@media(max-width:800px) {
  .hero {gap: 20px;}
  .hero-copy {padding-top: 0;}
  h1 {font-size: 7.7vw;}
  .hero-visual {align-self: center; margin-top: 0; padding-inline: 12px;}
  .availability {margin-bottom: 17px; padding: 6px 8px; gap: 6px;}
  .availability-mark {display: none;}
  .hero .eyebrow {font-size: .75rem; line-height: 1.8;}
  .visual-topline {display: flex; gap: 6px; padding-block: 13px;}
  .visual-index {margin: 0;}
  .mechanism-tabs {gap: 4px; padding-block: 8px;}
  .mechanism-tab {font-size: .875rem; padding: 6px; min-height: 52px;}
  .cad-stage {aspect-ratio: .86;}
  .hero-hologram {width: 76%; left: 12%; top: 3%;}
  [data-mechanism="prong"] .hero-hologram {width: 87%; left: 6.5%; top: 9%;}
  .stage-label {left: 5px; bottom: 3px; font-size: .75rem; letter-spacing: 0; padding: 5px 6px;}
  .stage-label .label-line {display: none;}
  .mechanism-description {font-size: .75rem; line-height: 1.7; padding-block: 8px;}
  .hero-actions .button {font-size: .875rem; padding-inline: 11px;}
  .hero-email {font-size: .875rem;}
  .evidence-band {grid-template-columns: 1fr 1fr; gap: 22px 8px; padding: 24px 4px;}
  .evidence-band>div:nth-child(3) {padding-left: 16px;}
  .evidence-band>div:nth-child(2n) {padding-left: 16px;}
  .evidence-band>div {gap: 9px;}
  .project-content h3 {font-size: 1.65rem;}
  .project-evidence dd {font-size: .95rem;}
  .drawing-caption {font-size: .75rem;}
  .project-drawing {aspect-ratio: 1.2;}
}
@media(max-width:600px) {
  body {padding-bottom: calc(65px + env(safe-area-inset-bottom));}
  .hero {grid-template-columns: 1fr; gap: 0; padding-top: 27px;}
  .hero-copy {padding: 0;}
  .hero .eyebrow {font-size: .75rem; margin-bottom: 16px; max-width: 350px; letter-spacing: .045em;}
  .availability {margin-bottom: 19px; padding: 7px 10px; font-size: .75rem; letter-spacing: .04em;}
  .availability-mark {display: inline;}
  h1 {font-size: clamp(3.8rem, 14vw, 5.4rem); line-height: 1.02; margin-bottom: 23px;}
  .hero-statement {font-size: 1.22rem;}
  .hero-description {font-size: 1rem; line-height: 1.75; margin-bottom: 18px;}
  .candidate-meta {font-size: .875rem; gap: 9px 11px; margin-bottom: 18px;}
  .candidate-meta>span+span {padding-left: 11px;}
  .candidate-meta>span:last-child {padding-left: 0;}
  .hero-skill-line {gap: 6px; margin-bottom: 20px;}
  .hero-skill-line span {font-size: .875rem; padding: 3px 8px;}
  .hero-actions {gap: 10px;}
  .hero-actions .button {font-size: .875rem; padding-inline: 14px;}
  .hero-actions .button-text {padding-inline: 5px;}
  .hero-email {margin-top: 13px; font-size: .875rem;}
  .hero-visual {margin-top: 31px; padding-inline: 14px; max-width: 500px;}
  .visual-topline {padding-block: 16px 13px; font-size: .75rem; gap: 7px 14px;}
  .visual-index {font-size: .75rem;}
  .mechanism-tabs {gap: 6px; padding-block: 10px;}
  .mechanism-tab {min-height: 46px; font-size: .875rem; padding-inline: 7px;}
  .cad-stage {aspect-ratio: .95;}
  .hero-hologram {width: 68%; left: 16%; top: 3%;}
  [data-mechanism="prong"] .hero-hologram {width: 86%; left: 7%; top: 4%;}
  .stage-label {left: 6px; bottom: 7px; font-size: .75rem; padding: 5px 7px; letter-spacing: .04em;}
  .hero-object {width: 100%; height: 100%;}
  .mechanism-description {padding-block: 8px 12px; font-size: .75rem;}
  .visual-bottomline {display: flex; justify-content: space-between; padding-block: 9px 13px; gap: 6px;}
  .visual-open {font-size: .875rem; gap: 8px;}
  .motion-toggle {font-size: .75rem; padding-inline: 7px;}
  .evidence-band {margin-top: 28px; padding: 23px 2px; gap: 24px 5px;}
  .evidence-band>div,.evidence-band>div+div {padding-inline: 12px 6px;}
  .evidence-band>div:nth-child(3),.evidence-band>div:nth-child(2n) {padding-left: 12px;}
  .evidence-band strong {font-size: 1.85rem; gap: 7px;}
  .evidence-band strong>span {font-size: .875rem;}
  .evidence-band .fact-label {font-size: .75rem; letter-spacing: .02em;}
  .projects-section {padding-top: 62px;}
  .project-drawing {aspect-ratio: 1.65;}
  .project-drawing img {padding-inline: 10px;}
  .drawing-caption {font-size: .75rem; left: 13px; right: 13px; gap: 8px;}
  .project-content h3 {font-size: 1.85rem;}
  .project-evidence dd {font-size: 1rem;}
  .project-evidence dt {font-size: .75rem;}
  .project-link {min-height: 55px; font-size: .875rem;}
  .compact-project-body .result-highlight {font-size: .95rem;}
  .mobile-dock {display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: center; gap: 6px; position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; padding: 9px 15px calc(9px + env(safe-area-inset-bottom)); min-height: 63px; background: #040b16ed; backdrop-filter: blur(20px); border-top: 1px solid #61d7ff66; box-shadow: 0 -8px 30px #00111b66;}
  .mobile-dock a {display: flex; align-items: center; justify-content: center; min-height: 42px; font-size: .875rem; gap: 10px; color: #c4d8ef;}
  .mobile-dock .dock-resume {background: #153c5066; border: 1px solid #63dcf95e; color: #b9f5ff;}
  .mobile-dock a:focus-visible {outline-offset: -3px;}
  .ambient-field {opacity: .48;}
}
@media(prefers-reduced-motion:reduce) {
  .hero-hologram,.stage-scan,.orbital-track {animation: none;}
  .stage-scan {top: 43%; opacity: .2;}
  .design-tile:hover,.project-drawing:hover img {transform: none;}
  .hero-hologram {transform: none;}
}