:root {
  --bg: #07080a;
  --text: #f5f3ee;
  --muted: #a8a7a1;
  --subtle: #72716c;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.2);
  --panel: rgba(13,15,17,.64);
  --panel-strong: rgba(10,12,14,.82);
  --accent: #d6ff68;
  --accent-soft: rgba(214,255,104,.14);
  --max: 1200px;
}

/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--accent);
  color: #10120b;
}


/* =========================================================
   BACKGROUND
========================================================= */

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -4;
  overflow: hidden;
  background: #07080a;
}

.bg-photo {
  position: absolute;
  inset: -2%;

  background-image: url("./assets/profile-bg.png");
  background-size: cover;
  background-position: center right;

  filter:
    brightness(.64)
    contrast(1.08)
    saturate(.88);

  transform:
    translate3d(
      var(--bg-x, 0),
      var(--bg-y, 0),
      0
    )
    scale(1.04);

  transition: transform .2s linear;

  will-change: transform;
}

.bg-vignette {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5,6,8,.99) 0%,
      rgba(5,6,8,.95) 30%,
      rgba(5,6,8,.66) 55%,
      rgba(5,6,8,.36) 76%,
      rgba(5,6,8,.62) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.38),
      rgba(0,0,0,.25) 35%,
      rgba(0,0,0,.78) 78%,
      #07080a 100%
    );
}

.bg-grid {
  position: absolute;
  inset: 0;

  opacity: .07;

  background-image:
    linear-gradient(
      rgba(255,255,255,.16) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.16) 1px,
      transparent 1px
    );

  background-size: 72px 72px;

  mask-image:
    linear-gradient(
      90deg,
      #000,
      transparent 72%
    );
}

.grain {
  position: absolute;
  inset: 0;

  opacity: .035;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.mouse-glow {
  position: fixed;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  pointer-events: none;

  z-index: -1;

  opacity: .28;

  background:
    radial-gradient(
      circle,
      rgba(214,255,104,.11),
      transparent 68%
    );

  transform: translate(-50%, -50%);

  left: 50%;
  top: 50%;
}

.progress {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;

  z-index: 50;

  background: transparent;
}

.progress span {
  display: block;

  height: 100%;
  width: 0;

  background: var(--accent);

  box-shadow:
    0 0 14px rgba(214,255,104,.4);
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 4.5vw;

  z-index: 20;

  border-bottom: 1px solid transparent;

  transition: .3s;
}

.nav.scrolled {
  background: rgba(7,8,10,.76);

  backdrop-filter: blur(20px);

  border-color: var(--line);
}

.brand {
  font-family: "Space Grotesk";
  font-weight: 700;

  font-size: 1.45rem;

  letter-spacing: -.08em;

  color: #fff;

  text-decoration: none;
}

.brand span {
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-links a,
.nav-cta {
  color: #c5c4be;

  text-decoration: none;

  font-size: .82rem;

  transition: .2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}

.nav-cta {
  border: 1px solid var(--line);

  padding: 9px 15px;

  border-radius: 999px;

  background: rgba(255,255,255,.025);
}

.nav-cta:hover {
  border-color: var(--line-strong);

  background: rgba(255,255,255,.06);
}

.nav-cta span {
  color: var(--accent);
}


/* =========================================================
   SECTION RAIL
========================================================= */

.section-rail {
  position: fixed;

  right: 23px;
  top: 50%;

  transform: translateY(-50%);

  z-index: 15;

  display: grid;
  gap: 8px;
}

.section-rail a {
  width: 31px;
  height: 24px;

  text-decoration: none;

  color: #5e5d58;

  font:
    600 .58rem
    "Space Grotesk";

  display: grid;
  place-items: center;

  border-right:
    1px solid rgba(255,255,255,.13);

  transition: .25s;
}

.section-rail a:hover,
.section-rail a.active {
  color: var(--accent);

  border-color: var(--accent);
}


/* =========================================================
   GENERAL
========================================================= */

.section {
  width: min(var(--max), 90vw);

  margin: auto;

  position: relative;
}


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

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 118px 0 110px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: 2%;
  top: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,217,154,.075), rgba(0,217,154,.025) 38%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(680px, 100%);
  max-width: 680px;
  padding-right: 250px;
}

.hero-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-bottom: 18px;
}

.hero-status-row .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 600 .61rem "Space Grotesk", sans-serif;
  letter-spacing: .14em;
}

.hero-status-row .location {
  color: #626a65;
  font: 500 .58rem "Space Grotesk", sans-serif;
  letter-spacing: .13em;
}

.eyebrow {
  font-size: .7rem;
  letter-spacing: .18em;
  color: #c2c0ba;
  font-weight: 700;
  margin: 0;
}

.location {
  font: 600 .65rem "Space Grotesk";
  letter-spacing: .14em;
  color: #76756f;
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--accent);
  margin-right: 9px;
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(214,255,104,.35), 0 0 15px var(--accent);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(214,255,104,0), 0 0 18px var(--accent);
  }
}

.hero-kicker {
  margin: 0 0 18px;
  color: #737c76;
  font: 600 .61rem "Space Grotesk", sans-serif;
  letter-spacing: .2em;
}

.hero h1,
.contact-section h2 {
  font-family: "Space Grotesk";
  font-size: clamp(3.8rem, 7.4vw, 7.2rem);
  line-height: .88;
  letter-spacing: -.078em;
  margin: 0 0 26px;
  font-weight: 600;
}

.hero h1 span,
.contact-section h2 span {
  color: var(--accent);
  text-shadow: 0 0 40px rgba(0,217,154,.08);
}

.hero-text {
  max-width: 640px;
  margin: 0;
  color: #9aa29d;
  font: 400 .94rem/1.75 "DM Sans", sans-serif;
}

.hero-actions,
.contact-actions {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 19px;
  font-weight: 700;
  font-size: .86rem;
  transition: .25s;
  min-height: 44px;
}

.button-primary {
  background: var(--accent);
  color: #10120b;
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 38px rgba(214,255,104,.16);
}

.button-ghost {
  border: 1px solid var(--line);
  color: #eee;
  background: rgba(255,255,255,.028);
}

.button-ghost:hover {
  background: rgba(255,255,255,.075);
  border-color: var(--line-strong);
}

.icon-button {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #d9d7d1;
  font: 700 .78rem "Space Grotesk";
  background: rgba(255,255,255,.025);
  transition: .25s;
}

.icon-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.hero-social-row {
  display: flex;
  align-items: center;
  gap: 12px 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero-social-row > span {
  margin-right: 4px;
  color: #666e69;
  font: 500 .58rem "Space Grotesk", sans-serif;
  letter-spacing: .12em;
}

.hero-social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  color: #d3d8d5;
  text-decoration: none;
  background: rgba(255,255,255,.018);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.hero-social-row a:hover {
  color: var(--accent);
  border-color: rgba(0,217,154,.42);
  background: rgba(0,217,154,.05);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0,217,154,.10);
}

.hero-social-row a img.social-logo,
.social-logo {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(78%) sepia(30%) saturate(900%) hue-rotate(115deg) brightness(95%) contrast(90%);
  transition: transform .25s ease, filter .25s ease;
}

.hero-social-row a:hover img.social-logo,
.social-logo:hover {
  transform: scale(1.12);
  filter: brightness(0) saturate(100%) invert(82%) sepia(50%) saturate(1200%) hue-rotate(115deg) brightness(105%) contrast(100%);
}

.hero-social-link.linkedin-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.linkedin-svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: currentColor;
}

.hero-social-link.linkedin-link:hover .linkedin-svg {
  transform: scale(1.08);
}

.hero-side-card {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 3;
  width: 286px;
  padding: 22px 22px 20px;
  border-radius: 15px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, rgba(7,15,11,.78), rgba(3,7,5,.64));
  border-color: rgba(0,217,154,.13);
  box-shadow: 0 25px 70px rgba(0,0,0,.30), 0 0 40px rgba(0,217,154,.025);
}

.hero-side-card .card-label {
  display: block;
  margin-bottom: 14px;
  font: 600 .56rem "Space Grotesk", sans-serif;
  letter-spacing: .16em;
  color: var(--accent);
}

.focus-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8ece9;
  font: 600 .84rem "Space Grotesk", sans-serif;
}

.focus-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(0,217,154,.75);
}

.hero-side-card p {
  margin: 13px 0 16px;
  color: #8d9690;
  font: 400 .69rem/1.7 "DM Sans", sans-serif;
}

.focus-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 17px;
}

.focus-stack span {
  padding: 5px 7px;
  border: 1px solid rgba(0,217,154,.12);
  border-radius: 5px;
  background: rgba(0,217,154,.025);
  color: #7f8983;
  font: 600 .48rem "Space Grotesk", sans-serif;
  letter-spacing: .08em;
}

.signal-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.signal-line > span {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  box-shadow: 0 0 8px rgba(0,217,154,.4);
}

.signal-line small {
  color: #5e6862;
  font: 500 .56rem "Space Grotesk", sans-serif;
}

.hero-stats {
  position: relative;
  width: min(100%, 700px);
  min-height: auto;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(7,11,9,.90), rgba(4,7,6,.78));
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025);
}

.hero-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
}

.hero-stat + .hero-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.10), transparent);
}

.stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--accent);
  font-size: 1.55rem;
  text-shadow: 0 0 18px rgba(0,217,154,.18);
}

.hero-stat strong {
  display: block;
  color: #eef2ef;
  font: 600 1.65rem "Space Grotesk", sans-serif;
  letter-spacing: -.04em;
}

.hero-stat span {
  display: block;
  margin-top: 4px;
  color: #68716b;
  font: 500 .58rem "DM Sans", sans-serif;
  line-height: 1.4;
}

.scroll-cue {
  position: absolute;
  left: 0;
  bottom: 59px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #555d58;
  text-decoration: none;
  font: 500 .56rem "Space Grotesk", sans-serif;
  letter-spacing: .12em;
  transition: color .2s ease;
}

.scroll-cue:hover {
  color: var(--accent);
}

.scroll-cue > span {
  display: block;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

@media (max-width: 1050px) {
  .hero {
    padding-top: 120px;
    padding-bottom: 80px;
  }

  .hero-copy {
    width: min(100%, 610px);
    max-width: 610px;
    padding-right: 240px;
  }

  .hero-side-card {
    right: 0;
    width: 220px;
    padding: 18px 18px 16px;
  }

  .hero-stats {
    width: min(100%, 620px);
  }

  .hero-stat {
    padding-left: 19px;
    padding-right: 19px;
  }

  .stat-icon {
    display: none;
  }
}

@media (max-width: 850px) {
  .hero {
    min-height: 100svh;
    display: block;
    padding-top: 135px;
    padding-bottom: 90px;
  }

  .hero::before {
    width: 430px;
    height: 430px;
    right: -180px;
    top: 18%;
  }

  .hero-copy {
    width: 100%;
    max-width: none;
    padding-right: 0;
  }

  .hero-status-row {
    gap: 8px 15px;
    margin-bottom: 18px;
  }

  .hero-status-row .location {
    font-size: .52rem;
  }

  .hero-kicker {
    font-size: .53rem;
    letter-spacing: .16em;
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(3.25rem, 15vw, 5rem);
    line-height: .88;
    margin-bottom: 22px;
  }

  .hero-text {
    max-width: 100%;
    margin-top: 0;
    font-size: .82rem;
    line-height: 1.7;
  }

  .hero-actions {
    margin-top: 24px;
  }

  .hero-actions .button {
    min-height: 44px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: .65rem;
  }

  .hero-social-row {
    margin-top: 22px;
  }

  .hero-social-row > span {
    font-size: .51rem;
  }

  .hero-side-card {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 32px;
    transform: none;
  }

  .hero-stats {
    position: relative;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: 26px;
    grid-template-columns: repeat(2, 1fr);
    transform: none;
  }

  .hero-stat {
    min-height: 73px;
    padding: 12px 13px;
    gap: 8px;
  }

  .hero-stat:nth-child(3)::before {
    display: block;
  }

  .hero-stat:nth-child(odd)::before {
    display: none;
  }

  .hero-stat:nth-child(n+3) {
    border-top: 1px solid rgba(255,255,255,.065);
  }

  .hero-stat strong {
    font-size: 1.15rem;
  }

  .hero-stat span {
    margin-top: 2px;
    font-size: .49rem;
  }

  .stat-icon {
    display: none;
  }

  .scroll-cue {
    display: none;
  }
}

@media (max-width: 420px) {
  .hero {
    padding-top: 126px;
    padding-bottom: 172px;
  }

  .hero h1 {
    font-size: 3.15rem;
  }

  .hero-text {
    font-size: .78rem;
  }

  .hero-actions {
    gap: 8px;
  }

  .hero-actions .button {
    padding-left: 13px;
    padding-right: 13px;
  }

  .hero-social-row {
    gap: 10px;
  }

  .hero-stat {
    min-height: 68px;
    padding: 10px 11px;
  }

  .hero-stat strong {
    font-size: 1.05rem;
  }
}


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

.content-section {
  padding: 145px 0;
}

.section-heading {
  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 54px;
}

.section-heading > span {
  font:
    600 .68rem
    "Space Grotesk";

  color: var(--accent);
}

.section-heading h2 {
  font:
    600 clamp(2.2rem,4vw,3.8rem)
    "Space Grotesk";

  letter-spacing: -.06em;

  margin: 0;
}

.section-heading i {
  height: 1px;

  background: var(--line);

  flex: 1;

  margin-left: 14px;
}


/* =========================================================
   ABOUT
========================================================= */

.about-grid {
  display: grid;

  grid-template-columns:
    1.1fr .9fr;

  gap: 75px;

  align-items: start;
}

.big-copy {
  font:
    500 clamp(2.2rem,4vw,4.2rem)
    "Space Grotesk";

  line-height: 1.03;

  letter-spacing: -.06em;

  margin: 0;
}

.big-copy em {
  color: var(--accent);

  font-style: normal;
}

.about-note {
  max-width: 620px;

  color: #989691;

  margin-top: 30px;
}

.glass {
  background: var(--panel);

  border:
    1px solid var(--line);

  backdrop-filter: blur(20px);

  box-shadow:
    0 25px 80px
    rgba(0,0,0,.2);
}

.about-card {
  padding: 29px;

  border-radius: 24px;

  color: #b5b3ad;
}

.profile-line {
  display: flex;

  gap: 13px;

  align-items: center;

  padding-bottom: 21px;

  border-bottom:
    1px solid var(--line);

  margin-bottom: 21px;
}

.profile-monogram {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 12px;

  display: grid;
  place-items: center;

  background: var(--accent);

  color: #10120b;

  font:
    700 .78rem
    "Space Grotesk";
}

.profile-line div {
  display: grid;
}

.profile-line strong {
  color: #f0eee8;

  font:
    600 .95rem
    "Space Grotesk";
}

.profile-line small {
  color: #7f7d77;

  font-size: .72rem;
}

.about-card > p {
  margin: 0;
}

.mini-meta-grid {
  margin-top: 26px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}

.mini-meta-grid div {
  padding: 15px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  display: grid;

  gap: 3px;
}

.mini-meta-grid span {
  font-size: .61rem;

  text-transform: uppercase;

  letter-spacing: .12em;

  color: #74726d;
}

.mini-meta-grid strong {
  font-size: .78rem;

  color: #dad8d1;

  font-weight: 600;
}


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

.experience-card {
  border-radius: 26px;

  padding: 34px;
}

.exp-top {
  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom:
    1px solid var(--line);

  padding-bottom: 28px;
}

.exp-company-wrap {
  display: flex;

  align-items: center;

  gap: 16px;
}

.company-mark {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  border:
    1px solid var(--line);

  border-radius: 15px;

  display: grid;
  place-items: center;

  font:
    700 1.3rem
    "Space Grotesk";

  color: var(--accent);

  background: var(--accent-soft);
}

.company {
  font-size: .67rem;

  letter-spacing: .18em;

  color: var(--accent);

  font-weight: 700;

  margin: 0;
}

.exp-top h3 {
  font:
    600 2.2rem
    "Space Grotesk";

  letter-spacing: -.05em;

  margin: 4px 0 0;
}

.exp-period {
  text-align: right;
}

.exp-period span {
  font:
    600 .58rem
    "Space Grotesk";

  letter-spacing: .13em;

  color: #77756f;
}

.exp-period p {
  color: #96948e;

  font-size: .8rem;

  margin: 3px 0 0;
}

.impact-strip {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-bottom:
    1px solid var(--line);
}

.impact-strip div {
  padding: 22px 18px;

  border-right:
    1px solid var(--line);

  display: grid;

  gap: 2px;
}

.impact-strip div:first-child {
  padding-left: 0;
}

.impact-strip div:last-child {
  border-right: 0;
}

.impact-strip strong {
  font:
    600 1.45rem
    "Space Grotesk";

  color: #eee;
}

.impact-strip span {
  font-size: .64rem;

  color: #77756f;
}

.exp-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;
}

.exp-grid > div {
  padding: 25px 25px 3px 0;

  display: grid;

  grid-template-columns:
    38px 1fr;

  gap: 12px;
}

.exp-grid > div:nth-child(odd) {
  border-right:
    1px solid var(--line);

  padding-right: 34px;
}

.exp-grid > div:nth-child(even) {
  padding-left: 34px;
}

.exp-grid p {
  margin: 0;

  color: #9f9d97;

  font-size: .88rem;
}

.exp-number {
  font:
    600 .7rem
    "Space Grotesk";

  color: #686761;
}


/* =========================================================
   PROJECTS
========================================================= */

.project-list {
  display: grid;

  gap: 14px;
}

.project-card {
  display: grid;

  grid-template-columns:
    55px 1fr 210px;

  gap: 22px;

  padding: 30px;

  border-radius: 23px;

  transition: .28s;

  overflow: hidden;

  position: relative;
}

.project-card::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      transparent 35%,
      rgba(214,255,104,.055),
      transparent 67%
    );

  transform:
    translateX(-100%);

  transition: .65s;
}

.project-card:hover {
  transform: translateY(-4px);

  border-color:
    rgba(214,255,104,.25);

  background:
    rgba(15,17,19,.74);
}

.project-card:hover::after {
  transform:
    translateX(100%);
}

.project-index {
  font:
    600 .69rem
    "Space Grotesk";

  color: #676660;
}

.project-head {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;
}

.project-type {
  font:
    600 .58rem
    "Space Grotesk";

  letter-spacing: .14em;

  color: var(--accent);

  margin: 0 0 4px;
}

.project-head h3 {
  font:
    600 1.65rem
    "Space Grotesk";

  margin: 0;

  letter-spacing: -.045em;
}

.project-arrow {
  color: var(--accent);

  font-size: 1.1rem;
}

.project-main > p:not(.project-type) {
  color: #9f9d97;

  font-size: .87rem;

  margin: 15px 0 19px;

  max-width: 690px;
}

.tags {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}

.tags span {
  font-size: .62rem;

  color: #b2b0aa;

  border:
    1px solid var(--line);

  border-radius: 999px;

  padding: 4px 8px;

  background:
    rgba(255,255,255,.018);
}

.project-impact {
  border-left:
    1px solid var(--line);

  padding-left: 23px;

  display: grid;

  align-content: center;

  gap: 12px;
}

.project-impact div {
  display: grid;

  grid-template-columns:
    65px 1fr;

  align-items: end;
}

.project-impact strong {
  font:
    600 1.28rem
    "Space Grotesk";

  color: #eae8e2;
}

.project-impact span {
  font-size: .62rem;

  color: #74726d;

  line-height: 1.2;

  padding-bottom: 2px;
}

.projects-footer {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 24px;

  padding: 0 5px;
}

.projects-footer p {
  color: #77756f;

  font-size: .75rem;
}

.projects-footer a {
  font-size: .78rem;

  text-decoration: none;

  color: #ddd;
}

.projects-footer a span {
  color: var(--accent);
}


/* =========================================================
   SKILLS
========================================================= */

.skills-marquee {
  overflow: hidden;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  margin-bottom: 28px;

  padding: 12px 0;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 8%,
      #000 92%,
      transparent
    );
}

.marquee-track {
  display: flex;

  gap: 25px;

  align-items: center;

  width: max-content;

  animation:
    marquee 26s linear infinite;
}

.marquee-track span {
  font:
    600 .68rem
    "Space Grotesk";

  letter-spacing: .12em;

  color: #797872;
}

.marquee-track i {
  font-style: normal;

  font-size: .42rem;

  color: var(--accent);
}

@keyframes marquee {
  to {
    transform:
      translateX(-50%);
  }
}

.skills-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 14px;
}

.skill-card{
  min-height:185px;
  border-radius:21px;
  padding:24px;
  position:relative;
  transition:.25s;
}

.skill-card:hover{
  transform:translateY(-3px);
  border-color:rgba(214,255,104,.22);
}

.skill-card>span{
  font:600 .66rem 'Space Grotesk';
  color:var(--accent);
}

.skill-card h3{
  font:600 1.18rem 'Space Grotesk';
  margin:25px 0 15px;
}

.skill-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.skill-tags span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#aaa8a1;
  font-size:.72rem;
  line-height:1.15;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.skill-tags span:hover{
  background:rgba(214,255,104,.07);
  border-color:rgba(214,255,104,.28);
  color:#e9f5c8;
  transform:translateY(-1px);
}

.certification-card ul{
  padding-left:17px;
  margin:0;
}

.certification-card li{
  color:#92908a;
  font-size:.76rem;
  margin:7px 0;
  line-height:1.45;
}


/* =========================================================
   BEYOND ENGINEERING
========================================================= */

.compact-section {
  padding-top: 85px;
}

.section-intro {
  max-width: 650px;

  color: #95938d;

  margin:
    -30px 0 36px;
}

.traits {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 12px;
}

.trait-card {
  border-radius: 20px;

  padding: 24px;

  min-height: 215px;

  transition: .25s;
}

.trait-card:hover {
  transform: translateY(-3px);

  border-color:
    rgba(214,255,104,.2);
}

.trait-no {
  font:
    600 .62rem
    "Space Grotesk";

  color: #696761;
}

.trait-card strong {
  display: block;

  font:
    600 1.35rem
    "Space Grotesk";

  margin-top: 48px;

  color: #f0eee8;
}

.trait-card h3 {
  font:
    600 .9rem
    "Space Grotesk";

  margin: 6px 0 4px;

  color: var(--accent);
}

.trait-card p {
  font-size: .75rem;

  color: #7e7c76;

  margin: 0;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {
  min-height: 92vh;

  padding:
    165px 0 30px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;
}

.contact-inner {
  max-width: 900px;
}

.contact-section h2 {
  font-size:
    clamp(
      2.2rem,
      4vw,
      3.8rem
    );

  margin-top: 0;
}

.contact-section > div > p:not(.eyebrow) {
  color: #9f9d97;

  max-width: 580px;
}

.email-display {
  display: inline-block;

  margin-top: 55px;

  color: #8a8882;

  text-decoration: none;

  font:
    500 clamp(1rem,2vw,1.35rem)
    "Space Grotesk";

  border-bottom:
    1px solid var(--line);

  padding-bottom: 4px;
}

.email-display:hover {
  color: var(--accent);
}

.contact-section footer {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 18px;

  padding-top: 24px;

  border-top:
    1px solid var(--line);

  color: #65635e;

  font-size: .68rem;
}

.contact-section footer a {
  text-decoration: none;

  color: #8f8d87;
}

.contact-section footer a:hover {
  color: var(--accent);
}


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

.reveal {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.2,.7,.2,1);
}

.reveal.visible {
  opacity: 1;

  transform: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1020px) {

  .hero-side-card {
    display: none;
  }

  .section-rail {
    display: none;
  }

  .project-card {
    grid-template-columns:
      45px 1fr;
  }

  .project-impact {
    grid-column: 2;

    border-left: 0;

    border-top:
      1px solid var(--line);

    padding:
      17px 0 0;

    grid-template-columns:
      repeat(3, 1fr);
  }

  .project-impact div {
    grid-template-columns:
      auto 1fr;
  }

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

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

}


/* =========================================================
   TABLET / LARGE MOBILE
========================================================= */

@media (max-width: 850px) {

  .nav {
    height: 68px;

    padding:
      0 5vw;
  }

  .nav-links {
    display: none;
  }

  .nav-cta {
    font-size: .73rem;

    padding:
      8px 13px;
  }

  .hero {
    padding-top: 115px;

    min-height: 100svh;

    align-items: flex-start;
  }

  .hero-copy {
    width: 100%;

    padding-top: 65px;
  }

  .hero h1 {
    font-size:
      clamp(
        3.4rem,
        13vw,
        5.6rem
      );

    max-width: 700px;
  }

  .bg-photo {
    background-position:
      66% center;

    filter:
      brightness(.5)
      contrast(1.08);
  }

  .bg-vignette {
    background:
      linear-gradient(
        90deg,
        rgba(5,6,8,.97),
        rgba(5,6,8,.72)
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,.28),
        rgba(0,0,0,.9)
      );
  }

  .bg-grid {
    opacity: .04;

    background-size:
      55px 55px;
  }

  .hero-text {
    max-width: 680px;
  }

  .hero-metrics {
    flex-wrap: wrap;

    width: 100%;

    max-width: 700px;
  }

  .hero-metrics div {
    width: 50%;

    margin: 0;

    padding:
      20px 18px 16px 0;

    border-right: 0;

    border-bottom:
      1px solid var(--line);
  }

  .hero-metrics div:nth-child(2n) {
    padding-left: 18px;
  }

  .hero-metrics div:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .about-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .impact-strip {
    grid-template-columns:
      1fr 1fr;
  }

  .impact-strip div:nth-child(2) {
    border-right: 0;
  }

  .impact-strip div:first-child {
    padding-left: 18px;
  }

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

  .exp-grid > div,
  .exp-grid > div:nth-child(even),
  .exp-grid > div:nth-child(odd) {
    border-right: 0;

    border-bottom:
      1px solid var(--line);

    padding:
      22px 0;
  }

  .exp-grid > div:last-child {
    border-bottom: 0;
  }

  .contact-section {
    min-height: 80vh;
  }

  .contact-section footer {
    flex-direction: column;

    align-items: flex-start;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

  html {
    scroll-padding-top: 76px;
  }

  .section {
    width: 91vw;
  }

  .content-section {
    padding:
      105px 0;
  }


  /* NAV */

  .nav {
    height: 64px;

    padding:
      0 4.5vw;

    background:
      rgba(7,8,10,.68);

    backdrop-filter:
      blur(18px);

    border-bottom:
      1px solid rgba(255,255,255,.06);
  }

  .brand {
    font-size:
      1.3rem;
  }

  .nav-cta {
    padding:
      7px 12px;

    font-size:
      .68rem;
  }


  /* HERO */

  .hero {
    min-height:
      100svh;

    padding:
      95px 0 70px;

    align-items:
      flex-start;
  }

  .hero-copy {
    padding-top:
      35px;
  }

  .hero-status-row {
    gap: 10px;

    align-items:
      flex-start;
  }

  .eyebrow {
    font-size:
      .58rem;

    line-height:
      1.5;
  }

  .status-dot {
    width: 6px;
    height: 6px;

    margin-right: 6px;
  }

  .location {
    font-size:
      .56rem;

    letter-spacing:
      .11em;

    padding-left:
      10px;
  }

  .hero-kicker {
    margin-top:
      32px;

    margin-bottom:
      9px;

    font-size:
      .62rem;

    letter-spacing:
      .16em;
  }

  .hero h1 {
  font-size:
    clamp(
      2.8rem,
      14vw,
      4.5rem
    );

  line-height:
    .92;

  letter-spacing:
    -.072em;

  margin-bottom:
    24px;

  max-width:
    100%;
}

  .hero-text {
    font-size:
      .9rem;

    line-height:
      1.65;

    max-width:
      100%;
  }


  /* HERO BUTTONS */

  .hero-actions {
    margin-top:
      25px;

    gap:
      8px;
  }

  .button {
    min-height:
      43px;

    padding:
      11px 14px;

    font-size:
      .73rem;

    gap:
      9px;
  }

  .icon-button {
    width:
      41px;

    height:
      41px;

    flex-basis:
      41px;

    font-size:
      .7rem;
  }


  /* HERO METRICS */

  .hero-metrics {
    margin-top:
      42px;

    width:
      100%;
  }

  .hero-metrics div {
    min-height:
      70px;

    padding:
      16px 12px 13px 0;
  }

  .hero-metrics div:nth-child(2n) {
    padding-left:
      12px;
  }

  .hero-metrics strong {
    font-size:
      1.25rem;
  }

  .hero-metrics span {
    font-size:
      .58rem;

    max-width:
      110px;
  }

  .scroll-cue {
    display:
      none;
  }


  /* BACKGROUND */

  .bg-photo {
  background-position:
    68% center;

  filter:
    brightness(.53)
    contrast(1.08)
    saturate(.84);

  transform:
    scale(1.025);
}

  .bg-vignette {
    background:
      linear-gradient(
        90deg,
        rgba(5,6,8,.985) 0%,
        rgba(5,6,8,.9) 38%,
        rgba(5,6,8,.58) 72%,
        rgba(5,6,8,.65) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,.22),
        rgba(0,0,0,.5) 50%,
        rgba(0,0,0,.92) 100%
      );
  }


  /* SECTION HEADINGS */

  .section-heading {
    gap:
      12px;

    margin-bottom:
      36px;
  }

  .section-heading > span {
    font-size:
      .6rem;
  }

  .section-heading h2 {
    font-size:
      clamp(
        2rem,
        10vw,
        2.8rem
      );
  }

  .section-heading i {
    display:
      none;
  }


  /* ABOUT */

  .about-grid {
    gap:
      28px;
  }

  .big-copy {
    font-size:
      clamp(
        2rem,
        10vw,
        3rem
      );

    line-height:
      1.02;
  }

  .about-note {
    margin-top:
      22px;

    font-size:
      .87rem;

    line-height:
      1.7;
  }

  .about-focus-list {
    margin-top:
      28px;
  }

  .about-card {
    padding:
      21px;

    border-radius:
      20px;
  }

  .profile-line {
    padding-bottom:
      17px;

    margin-bottom:
      17px;
  }

  .profile-monogram {
    width:
      39px;

    height:
      39px;

    flex-basis:
      39px;
  }

  .profile-line strong {
    font-size:
      .82rem;
  }

  .profile-line small {
    font-size:
      .66rem;
  }

  .about-card > p {
    font-size:
      .82rem;

    line-height:
      1.7;
  }

  .mini-meta-grid {
    grid-template-columns:
      1fr;

    margin-top:
      21px;
  }

  .mini-meta-grid div {
    padding:
      13px;
  }

  .mini-meta-grid strong {
    font-size:
      .74rem;
  }


  /* EXPERIENCE */

  .experience-card {
    padding:
      21px;

    border-radius:
      20px;
  }

  .exp-top {
    align-items:
      flex-start;

    padding-bottom:
      21px;
  }

  .company-mark {
    width:
      45px;

    height:
      45px;

    flex-basis:
      45px;

    border-radius:
      13px;
  }

  .exp-company-wrap {
    gap:
      12px;
  }

  .company {
    font-size:
      .58rem;
  }

  .exp-top h3 {
    font-size:
      1.55rem;
  }

  .exp-period {
    display:
      none;
  }

  .impact-strip {
    grid-template-columns:
      1fr 1fr;
  }

  .impact-strip div {
    padding:
      17px 10px;

    min-height:
      73px;
  }

  .impact-strip div:first-child {
    padding-left:
      0;
  }

  .impact-strip div:nth-child(2) {
    padding-left:
      10px;
  }

  .impact-strip div:nth-child(odd) {
    border-right:
      1px solid var(--line);
  }

  .impact-strip div:nth-child(even) {
    border-right:
      0;
  }

  .impact-strip div:nth-child(-n+2) {
    border-bottom:
      1px solid var(--line);
  }

  .impact-strip strong {
    font-size:
      1.2rem;
  }

  .impact-strip span {
    font-size:
      .57rem;
  }

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

  .exp-grid > div,
  .exp-grid > div:nth-child(even),
  .exp-grid > div:nth-child(odd) {
    padding:
      20px 0;
  }

  .exp-grid p {
    font-size:
      .8rem;

    line-height:
      1.65;
  }


  /* PROJECTS */

  .project-list {
    gap:
      12px;
  }

  .project-card {
    grid-template-columns:
      1fr;

    gap:
      0;

    padding:
      21px;

    border-radius:
      20px;
  }

  .project-index {
    display:
      none;
  }

  .project-head {
    gap:
      12px;
  }

  .project-type {
    font-size:
      .52rem;

    line-height:
      1.5;
  }

  .project-head h3 {
    font-size:
      1.3rem;

    line-height:
      1.2;
  }

  .project-arrow {
    font-size:
      .95rem;
  }

  .project-main > p:not(.project-type) {
    font-size:
      .8rem;

    line-height:
      1.65;

    margin:
      13px 0 16px;
  }

  .tags {
    gap:
      5px;
  }

  .tags span {
    font-size:
      .56rem;

    padding:
      4px 7px;
  }

  .project-impact {
    grid-column:
      1;

    margin-top:
      21px;

    padding:
      17px 0 0;

    border-left:
      0;

    border-top:
      1px solid var(--line);

    grid-template-columns:
      1fr;
  }

  .project-impact div {
    grid-template-columns:
      65px 1fr;
  }

  .project-impact strong {
    font-size:
      1.15rem;
  }

  .project-impact span {
    font-size:
      .59rem;
  }

  .projects-footer {
    align-items:
      flex-start;

    gap:
      8px;

    flex-direction:
      column;
  }

  .projects-footer p {
    margin:
      0;
  }


  /* SKILLS */

  .skills-marquee {
    margin-bottom:
      20px;
  }

  .marquee-track {
    gap:
      18px;

    animation-duration:
      32s;
  }

  .marquee-track span {
    font-size:
      .58rem;
  }

  .skills-grid {
    grid-template-columns:
      1fr;

    gap:
      10px;
  }

  .skill-card {
    min-height:
      auto;

    padding:
      21px;

    border-radius:
      19px;
  }

  .skill-card h3 {
    font-size:
      1.05rem;

    margin:
      20px 0 9px;
  }

  .skill-card p {
    font-size:
      .76rem;

    line-height:
      1.6;
  }

  .certification-card li {
    font-size:
      .72rem;

    line-height:
      1.5;
  }


  /* BEYOND */

  .compact-section {
    padding-top:
      55px;
  }

  .section-intro {
    margin:
      -18px 0 28px;

    font-size:
      .83rem;

    line-height:
      1.7;
  }

  .traits {
    grid-template-columns:
      1fr;

    gap:
      10px;
  }

  .trait-card {
    min-height:
      160px;

    padding:
      21px;

    border-radius:
      19px;
  }

  .trait-card strong {
    margin-top:
      28px;

    font-size:
      1.2rem;
  }

  .trait-card h3 {
    font-size:
      .84rem;
  }

  .trait-card p {
    font-size:
      .7rem;
  }


  /* CONTACT */

  .contact-section {
    min-height:
      80vh;

    padding:
      120px 0 25px;
  }

  .contact-section h2 {
    font-size:
      clamp(
        2.8rem,
        14vw,
        4.5rem
      );

    line-height:
      .94;
  }

  .contact-section > div > p:not(.eyebrow) {
    font-size:
      .84rem;

    line-height:
      1.7;
  }

  .contact-actions {
    gap:
      7px;
  }

  .email-display {
    font-size:
      .76rem;

    margin-top:
      40px;

    word-break:
      break-word;
  }

  .contact-section footer {
    font-size:
      .6rem;

    gap:
      7px;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

  .section {
    width:
      92vw;
  }

  .hero {
    padding-top:
      90px;
  }

  .hero-copy {
    padding-top:
      30px;
  }

  .hero-status-row {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

  .location {
    border-left:
      0;

    padding-left:
      0;
  }

  .hero h1 {
    font-size:
      2.85rem;
  }

  .hero-text {
    font-size:
      .84rem;
  }

  .hero-actions .button {
    padding:
      10px 12px;
  }

  .hero-metrics strong {
    font-size:
      1.12rem;
  }

  .hero-metrics span {
    font-size:
      .54rem;
  }

  .section-heading h2 {
    font-size:
      1.95rem;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }

  .reveal,
  .bg-photo,
  .project-card,
  .skill-card,
  .trait-card,
  .button,
  .icon-button {
    transition:
      none;
  }

  .marquee-track,
  .status-dot {
    animation:
      none;
  }
  .skill-card{
  min-height:auto;
  padding:21px;
}

.skill-card h3{
  margin-top:22px;
}

.skill-tags{
  gap:6px;
}

.skill-tags span{
  font-size:.68rem;
  padding:6px 9px;
}

}

.project-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  color:var(--accent);
  text-decoration:none;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.project-link:hover{
  transform:translate(2px,-2px);
  background:rgba(214,255,104,.08);
  border-color:rgba(214,255,104,.28);
}

.project-arrow-disabled{
  opacity:.28;
  cursor:default;
}

/* ================================
   BEYOND ENGINEERING
================================ */

.beyond-header{
  max-width:900px;
  margin:0 0 58px;
}

.beyond-kicker{
  margin:0 0 18px;
  color:var(--accent);
  font:600 .65rem 'Space Grotesk',sans-serif;
  letter-spacing:.18em;
}

.beyond-header h3{
  margin:0;
  max-width:850px;
  color:#f0eee8;
  font:600 clamp(2.5rem,5vw,5rem)/.98 'Space Grotesk',sans-serif;
  letter-spacing:-.055em;
}

.beyond-list{
  border-top:1px solid rgba(255,255,255,.08);
}

.beyond-item{
  display:grid;
  grid-template-columns:70px 1fr 280px 42px;
  align-items:center;
  gap:20px;
  min-height:118px;
  padding:18px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:
    background .25s ease,
    padding .25s ease,
    border-color .25s ease;
}

.beyond-item:hover{
  padding-left:18px;
  padding-right:18px;
  background:rgba(255,255,255,.018);
  border-color:rgba(214,255,104,.16);
}

.beyond-no{
  align-self:start;
  padding-top:5px;
  color:#5e5c57;
  font:600 .65rem 'Space Grotesk',sans-serif;
  letter-spacing:.08em;
}

.beyond-main{
  min-width:0;
}

.beyond-category{
  display:block;
  margin-bottom:7px;
  color:#66645f;
  font:600 .58rem 'Space Grotesk',sans-serif;
  letter-spacing:.16em;
}

.beyond-main h4{
  margin:0;
  color:#ebe9e2;
  font:600 clamp(1.25rem,2vw,1.7rem) 'Space Grotesk',sans-serif;
  letter-spacing:-.025em;
}

.beyond-result{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.beyond-result strong{
  color:#d9d7d0;
  font:600 .88rem 'Space Grotesk',sans-serif;
}

.beyond-result span{
  color:#686661;
  font-size:.7rem;
}

.beyond-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  color:var(--accent);
  font-size:.9rem;
  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.beyond-item:hover .beyond-arrow{
  transform:translate(3px,-3px);
  background:rgba(214,255,104,.07);
  border-color:rgba(214,255,104,.25);
}


/* TABLET */

@media(max-width:900px){

  .beyond-item{
    grid-template-columns:55px 1fr 220px 36px;
    gap:14px;
  }

}


/* MOBILE */

@media(max-width:560px){

  .beyond-header{
    margin-bottom:42px;
  }

  .beyond-header h3{
    font-size:2.45rem;
    line-height:1;
  }

  .beyond-intro{
    margin-top:20px;
    font-size:.82rem;
    line-height:1.7;
  }

  .beyond-item{
    grid-template-columns:34px 1fr 32px;
    gap:10px;
    min-height:105px;
    padding:16px 2px;
  }

  .beyond-item:hover{
    padding-left:8px;
    padding-right:8px;
  }

  .beyond-result{
    grid-column:2;
    margin-top:-4px;
  }

  .beyond-result strong{
    font-size:.76rem;
  }

  .beyond-result span{
    font-size:.64rem;
  }

  .beyond-arrow{
    grid-column:3;
    grid-row:1 / span 2;
  }

}

/* ================================
   CONTACT / HIRING
================================ */

.contact-section{
  display:block;
  min-height:0;
  padding:145px 0 55px;
}

.contact-wrap{
  width:100%;
}

.contact-content{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:90px;
  align-items:end;
  margin-top:45px;
}

.contact-copy{
  max-width:760px;
}

.contact-kicker{
  display:inline-block;
  margin-bottom:22px;
  color:var(--accent);
  font:600 .65rem 'Space Grotesk',sans-serif;
  letter-spacing:.18em;
}

.contact-copy h3{
  margin:0;
  color:#f0eee8;
  font:600 clamp(3.5rem,7vw,7rem)/.9 'Space Grotesk',sans-serif;
  letter-spacing:-.065em;
}

.contact-copy h3 em{
  color:var(--accent);
  font-style:normal;
}

.contact-copy p{
  max-width:620px;
  margin:32px 0 0;
  color:#85837d;
  font-size:.92rem;
  line-height:1.8;
}

.contact-copy p strong{
  color:#bdbbb4;
  font-weight:500;
}

.contact-status{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:28px;
  color:#85837d;
  font:500 .7rem 'Space Grotesk',sans-serif;
}

.status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(214,255,104,.55);
}


/* CONTACT ACTIONS */

.contact-primary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:88px;
  padding:20px 22px;
  border-radius:18px;
  color:#eee;
  text-decoration:none;
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.contact-primary:hover{
  transform:translateX(5px);
  border-color:rgba(214,255,104,.22);
  background:rgba(255,255,255,.035);
}

.contact-action-label{
  display:block;
  margin-bottom:7px;
  color:#66645f;
  font:600 .57rem 'Space Grotesk',sans-serif;
  letter-spacing:.16em;
}

.contact-primary strong{
  display:block;
  color:#e7e5de;
  font:500 .88rem 'Space Grotesk',sans-serif;
  word-break:break-word;
}

.contact-action-arrow{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  color:var(--accent);
  font-size:.9rem;
  transition:transform .25s ease;
}

.contact-primary:hover .contact-action-arrow{
  transform:translate(3px,-3px);
}


/* SECONDARY LINKS */

.contact-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:4px;
}

.contact-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  color:#aaa8a1;
  text-decoration:none;
  font:500 .68rem 'Space Grotesk',sans-serif;
  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.contact-link:hover{
  color:var(--accent);
  border-color:rgba(214,255,104,.2);
  background:rgba(214,255,104,.025);
}

.contact-link span:last-child{
  color:#66645f;
  transition:transform .2s ease;
}

.contact-link:hover span:last-child{
  transform:translate(2px,-2px);
  color:var(--accent);
}


/* FOOTER */

.contact-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:85px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#575550;
  font:600 .56rem 'Space Grotesk',sans-serif;
  letter-spacing:.13em;
}


/* TABLET */

@media(max-width:900px){

  .contact-content{
    grid-template-columns:1fr;
    gap:50px;
  }

  .contact-copy h3{
    font-size:clamp(3.2rem,9vw,5rem);
  }

  .contact-actions{
    max-width:650px;
  }

}


/* MOBILE */

@media(max-width:560px){

  .contact-section{
    min-height:auto;
    padding-bottom:35px;
  }

  .contact-content{
    margin-top:35px;
    gap:38px;
  }

  .contact-copy h3{
    font-size:3.15rem;
    line-height:.92;
  }

  .contact-copy p{
    margin-top:24px;
    font-size:.82rem;
    line-height:1.75;
  }

  .contact-primary{
    min-height:80px;
    padding:17px;
  }

  .contact-primary strong{
    font-size:.76rem;
  }

  .contact-links{
    grid-template-columns:1fr;
  }

  .contact-link{
    padding:14px;
  }

  .contact-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:9px;
    margin-top:55px;
  }

}
/* =========================================================
   EMERALD AI — GLOBAL THEME
   Reference-inspired visual system
========================================================= */

:root{
  --bg:#030504;
  --bg-soft:#050806;

  --text:#f4f5f2;
  --muted:#a3aaa5;
  --subtle:#656d68;

  --line:rgba(255,255,255,.085);
  --line-soft:rgba(255,255,255,.055);

  --panel:rgba(8,13,11,.68);
  --panel-strong:rgba(5,9,7,.86);

  --accent:#00d99a;
  --accent-bright:#18f5b0;
  --accent-dark:#00a978;

  --accent-soft:rgba(0,217,154,.10);
  --accent-glow:rgba(0,217,154,.18);

  --cyan:#48e6d0;

  --max:1200px;
}


/* =========================================================
   BASE
========================================================= */

html{
  scroll-padding-top:105px;
}

body{
  background:
    radial-gradient(
      circle at 75% 15%,
      rgba(0,217,154,.035),
      transparent 28%
    ),
    radial-gradient(
      circle at 15% 65%,
      rgba(0,180,150,.025),
      transparent 30%
    ),
    var(--bg);

  color:var(--text);
}

::selection{
  background:var(--accent);
  color:#02100a;
}


/* =========================================================
   BACKGROUND
========================================================= */

.site-bg{
  background:#030504;
}

.bg-photo{
  filter:
    brightness(.52)
    contrast(1.12)
    saturate(.72);
}

.bg-vignette{
  background:
    linear-gradient(
      90deg,
      rgba(2,4,3,.99) 0%,
      rgba(2,4,3,.94) 25%,
      rgba(2,4,3,.72) 48%,
      rgba(2,4,3,.38) 72%,
      rgba(2,4,3,.58) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.32),
      rgba(0,0,0,.12) 40%,
      rgba(0,0,0,.84) 86%,
      #030504 100%
    );
}

.bg-grid{
  opacity:.055;

  background-image:
    linear-gradient(
      rgba(0,217,154,.18) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,217,154,.18) 1px,
      transparent 1px
    );

  background-size:72px 72px;
}

.grain{
  opacity:.025;
}

.mouse-glow{
  width:460px;
  height:460px;

  opacity:.24;

  background:
    radial-gradient(
      circle,
      rgba(0,217,154,.13),
      rgba(0,217,154,.035) 35%,
      transparent 70%
    );
}


/* =========================================================
   TOP PROGRESS
========================================================= */

.progress span{
  background:var(--accent);

  box-shadow:
    0 0 12px rgba(0,217,154,.6),
    0 0 30px rgba(0,217,154,.22);
}


/* =========================================================
   NAVBAR — DESKTOP
========================================================= */

.nav{
  position:fixed;

  top:12px;
  left:50%;
  right:auto;

  width:min(var(--max),90vw);
  height:70px;

  transform:translateX(-50%);

  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;

  padding:0 20px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;

  background:
    linear-gradient(
      120deg,
      rgba(7,12,10,.84),
      rgba(4,7,6,.70)
    );

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

  box-shadow:
    0 18px 60px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.025);

  z-index:100;
}

.nav::after{
  content:"";

  position:absolute;

  left:10%;
  right:10%;
  bottom:-1px;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,217,154,.16),
      transparent
    );

  pointer-events:none;
}


/* =========================================================
   BRAND
========================================================= */

.brand{
  display:flex;
  align-items:center;
  gap:11px;

  justify-self:start;

  text-decoration:none;

  white-space:nowrap;
}

.brand-mark{
  color:var(--accent);

  font:
    600 1.3rem/1
    'Space Grotesk',
    sans-serif;

  letter-spacing:-.09em;
}

.brand-name{
  color:#e7eae7;

  font:
    500 .76rem
    'DM Sans',
    sans-serif;

  letter-spacing:-.01em;
}


/* =========================================================
   DESKTOP NAV LINKS
========================================================= */

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:3px;
}

.nav-links a{
  position:relative;

  padding:10px 12px;

  color:#929a95;

  text-decoration:none;

  font:
    500 .69rem
    'DM Sans',
    sans-serif;

  transition:
    color .25s ease,
    background .25s ease;
}

.nav-links a::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:1px;

  width:0;
  height:2px;

  border-radius:5px;

  background:var(--accent);

  box-shadow:
    0 0 10px rgba(0,217,154,.45);

  transform:translateX(-50%);

  transition:width .25s ease;
}

.nav-links a:hover,
.nav-links a.active{
  color:#f0f3f0;
}

.nav-links a:hover::after,
.nav-links a.active::after{
  width:22px;
}


/* =========================================================
   CONNECT BUTTON
========================================================= */

.nav-cta{
  display:flex;
  align-items:center;
  gap:12px;

  justify-self:end;

  padding:11px 16px;

  border:1px solid rgba(0,217,154,.48);
  border-radius:7px;

  background:rgba(0,217,154,.025);

  color:var(--accent);

  text-decoration:none;

  font:
    500 .67rem
    'DM Sans',
    sans-serif;

  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.nav-cta:hover{
  transform:translateY(-1px);

  background:rgba(0,217,154,.08);

  border-color:rgba(0,217,154,.75);

  box-shadow:
    0 8px 30px rgba(0,217,154,.08);
}

.nav-cta span{
  font-size:.9rem;
}


/* =========================================================
   MOBILE MENU — HIDDEN DESKTOP
========================================================= */

.mobile-nav-toggle{
  display:none;
}

.mobile-menu-button{
  display:none;
}

.mobile-nav-panel{
  display:none;
}


/* =========================================================
   GLOBAL GLASS
========================================================= */

.glass{
  background:
    linear-gradient(
      135deg,
      rgba(13,22,18,.72),
      rgba(5,10,8,.60)
    );

  border-color:rgba(255,255,255,.075);

  box-shadow:
    0 25px 80px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.glass:hover{
  border-color:rgba(0,217,154,.24);
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading{
  gap:15px;
}

.section-heading > span{
  color:var(--accent);

  /* Fixed number gutter so every section title starts on the
     same left edge (proportional figures made 01 narrower than 02). */
  min-width:2ch;
  font-variant-numeric:tabular-nums;
}

.section-heading h2{
  color:#edf0ed;
}

.section-heading i{
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.10),
      rgba(0,217,154,.16),
      transparent
    );
}


/* =========================================================
   ACCENT TEXT
========================================================= */

.eyebrow,
.project-type,
.card-label,
.contact-kicker,
.beyond-kicker{
  color:var(--accent);
}


/* =========================================================
   STATUS DOT
========================================================= */

.status-dot{
  background:var(--accent);

  box-shadow:
    0 0 14px rgba(0,217,154,.8);
}

@keyframes pulse{
  0%,100%{
    box-shadow:
      0 0 0 0 rgba(0,217,154,.28),
      0 0 14px rgba(0,217,154,.8);
  }

  50%{
    box-shadow:
      0 0 0 7px rgba(0,217,154,0),
      0 0 20px rgba(0,217,154,.9);
  }
}


/* =========================================================
   BUTTONS
========================================================= */

.button-primary{
  background:var(--accent);

  color:#03100b;

  box-shadow:
    0 8px 28px rgba(0,217,154,.12);
}

.button-primary:hover{
  background:var(--accent-bright);

  box-shadow:
    0 12px 38px rgba(0,217,154,.20);
}

.button-ghost{
  border-color:rgba(0,217,154,.35);

  color:var(--accent);

  background:rgba(0,217,154,.025);
}

.button-ghost:hover{
  background:rgba(0,217,154,.07);

  border-color:rgba(0,217,154,.60);
}


/* =========================================================
   SOCIAL ICON BUTTONS
========================================================= */

.icon-button{
  border-color:rgba(255,255,255,.10);

  background:rgba(255,255,255,.025);

  color:#d6dbd7;
}

.icon-button:hover{
  color:var(--accent);

  border-color:rgba(0,217,154,.55);

  background:rgba(0,217,154,.06);

  box-shadow:
    0 6px 22px rgba(0,217,154,.08);
}


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

.project-card{
  background:
    linear-gradient(
      135deg,
      rgba(10,17,14,.76),
      rgba(5,9,7,.65)
    );

  border-color:rgba(255,255,255,.075);

  border-radius:18px;
}

.project-card::after{
  background:
    linear-gradient(
      110deg,
      transparent 30%,
      rgba(0,217,154,.075),
      transparent 70%
    );
}

.project-card:hover{
  background:
    linear-gradient(
      135deg,
      rgba(11,22,17,.84),
      rgba(5,10,8,.72)
    );

  border-color:rgba(0,217,154,.30);

  box-shadow:
    0 22px 65px rgba(0,0,0,.25),
    0 0 35px rgba(0,217,154,.025);
}

.project-arrow{
  color:var(--accent);
}

.tags span{
  border-color:rgba(0,217,154,.13);

  background:rgba(0,217,154,.018);

  color:#aeb7b1;
}

.tags span:hover{
  border-color:rgba(0,217,154,.35);

  color:var(--accent);

  background:rgba(0,217,154,.05);
}


/* =========================================================
   SKILL CARDS
========================================================= */

.skill-card{
  background:
    linear-gradient(
      135deg,
      rgba(10,17,14,.72),
      rgba(5,9,7,.60)
    );

  border-radius:18px;
}

.skill-card:hover{
  border-color:rgba(0,217,154,.27);

  box-shadow:
    0 18px 55px rgba(0,0,0,.22),
    0 0 30px rgba(0,217,154,.025);
}

.skill-card > span{
  color:var(--accent);
}

.skill-tags span{
  border-color:rgba(0,217,154,.13) !important;

  background:rgba(0,217,154,.025) !important;
}

.skill-tags span:hover{
  color:var(--accent);

  border-color:rgba(0,217,154,.38) !important;

  background:rgba(0,217,154,.06) !important;
}


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

.experience-card{
  border-radius:20px;
}

.company-mark{
  border-color:rgba(0,217,154,.25);

  background:rgba(0,217,154,.07);

  color:var(--accent);

  box-shadow:
    inset 0 0 25px rgba(0,217,154,.025);
}

.company{
  color:var(--accent);
}

.impact-strip strong{
  color:#edf1ed;
}


/* =========================================================
   BEYOND
========================================================= */

.beyond-item:hover{
  background:rgba(0,217,154,.018);

  border-color:rgba(0,217,154,.18);
}

.beyond-category{
  color:#5d6862;
}

.beyond-result strong{
  color:#dce2de;
}

.beyond-arrow{
  color:var(--accent);
  border-color:rgba(0,217,154,.16);
}

.beyond-item:hover .beyond-arrow{
  background:rgba(0,217,154,.07);
  border-color:rgba(0,217,154,.35);

  box-shadow:
    0 0 20px rgba(0,217,154,.06);
}


/* =========================================================
   CONTACT
========================================================= */

.contact-copy h3 em{
  color:var(--accent);
}

.contact-primary:hover{
  border-color:rgba(0,217,154,.30);

  background:
    linear-gradient(
      135deg,
      rgba(0,217,154,.055),
      rgba(255,255,255,.018)
    );
}

.contact-action-arrow{
  color:var(--accent);

  border-color:rgba(0,217,154,.16);
}

.contact-primary:hover .contact-action-arrow{
  background:rgba(0,217,154,.07);
  border-color:rgba(0,217,154,.32);
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

@media(max-width:850px){

  .nav{
    top:10px;

    width:calc(100% - 24px);
    height:60px;

    padding:0 9px 0 16px;

    grid-template-columns:1fr auto;

    border-radius:13px;
  }

  .brand-name{
    display:block;

    font-size:.68rem;
  }

  .nav-links,
  .nav-cta{
    display:none;
  }


  /* HAMBURGER */

  .mobile-menu-button{
    position:relative;
    z-index:102;

    width:42px;
    height:42px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;

    border:1px solid rgba(0,217,154,.18);
    border-radius:9px;

    background:rgba(0,217,154,.025);

    cursor:pointer;

    transition:
      background .25s ease,
      border-color .25s ease;
  }

  .mobile-menu-button span{
    width:17px;
    height:1.5px;

    border-radius:5px;

    background:#dce3df;

    transition:
      transform .3s ease,
      opacity .3s ease;
  }


  /* PANEL */

  .mobile-nav-panel{
    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100dvh;

    display:flex;
    flex-direction:column;

    padding:
      91px
      22px
      20px;

    background:
      radial-gradient(
        circle at 85% 8%,
        rgba(0,217,154,.075),
        transparent 26%
      ),
      radial-gradient(
        circle at 10% 70%,
        rgba(0,160,130,.035),
        transparent 30%
      ),
      rgba(2,5,4,.98);

    backdrop-filter:blur(26px);
    -webkit-backdrop-filter:blur(26px);

    opacity:0;
    visibility:hidden;

    transform:translateY(-12px);

    pointer-events:none;

    transition:
      opacity .28s ease,
      transform .28s ease,
      visibility .28s ease;

    z-index:101;
  }

  .mobile-nav-panel::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
      linear-gradient(
        rgba(0,217,154,.035) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(0,217,154,.035) 1px,
        transparent 1px
      );

    background-size:54px 54px;

    mask-image:
      linear-gradient(
        to bottom,
        black,
        transparent 90%
      );

    pointer-events:none;
  }


  /* OPEN */

  .mobile-nav-toggle:checked ~ .mobile-nav-panel{
    opacity:1;
    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;
  }

  .mobile-nav-toggle:checked + .mobile-menu-button{
    background:rgba(0,217,154,.07);
    border-color:rgba(0,217,154,.38);
  }

  .mobile-nav-toggle:checked + .mobile-menu-button span:nth-child(1){
    transform:translateY(6.5px) rotate(45deg);
  }

  .mobile-nav-toggle:checked + .mobile-menu-button span:nth-child(2){
    opacity:0;
  }

  .mobile-nav-toggle:checked + .mobile-menu-button span:nth-child(3){
    transform:translateY(-6.5px) rotate(-45deg);
  }


  /* HEADER */

  .mobile-nav-header{
    position:relative;
    z-index:2;

    display:flex;
    justify-content:space-between;

    padding-bottom:14px;

    border-bottom:1px solid rgba(255,255,255,.08);

    color:#56605a;

    font:
      600 .57rem
      'Space Grotesk',
      sans-serif;

    letter-spacing:.16em;
  }

  .mobile-nav-header span:last-child{
    color:var(--accent);
  }


  /* LINKS */

  .mobile-nav-panel nav{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;

    margin-top:5px;
  }

  .mobile-nav-panel nav a{
    display:grid;
    grid-template-columns:35px 1fr 25px;
    align-items:center;

    min-height:58px;

    border-bottom:1px solid rgba(255,255,255,.065);

    text-decoration:none;

    transition:
      padding .2s ease,
      color .2s ease;
  }

  .mobile-nav-panel nav a:hover{
    padding-left:7px;
  }

  .mobile-nav-panel nav a span{
    color:#4f5953;

    font:
      600 .58rem
      'Space Grotesk',
      sans-serif;
  }

  .mobile-nav-panel nav a strong{
    color:#e0e6e2;

    font:
      500 1.08rem
      'Space Grotesk',
      sans-serif;
  }

  .mobile-nav-panel nav a i{
    color:var(--accent);

    font-style:normal;
    font-size:.9rem;

    text-align:right;
  }


  /* CONNECT */

  .mobile-connect{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:18px;
    padding:15px 17px;

    border:1px solid rgba(0,217,154,.45);
    border-radius:8px;

    background:rgba(0,217,154,.055);

    color:var(--accent);

    text-decoration:none;

    font:
      600 .63rem
      'Space Grotesk',
      sans-serif;

    letter-spacing:.13em;
  }

  .mobile-connect strong{
    font-size:1rem;
  }


  /* FOOTER */

  .mobile-nav-footer{
    position:relative;
    z-index:2;

    display:flex;
    justify-content:space-between;

    margin-top:auto;
    padding-top:17px;

    border-top:1px solid rgba(255,255,255,.06);

    color:#48514c;

    font:
      600 .5rem
      'Space Grotesk',
      sans-serif;

    letter-spacing:.11em;
  }

  .mobile-nav-footer span:last-child{
    color:#5b655f;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:560px){

  .brand-name{
    font-size:.64rem;
  }

  .brand-mark{
    font-size:1.18rem;
  }

  .mobile-nav-panel{
    padding-left:19px;
    padding-right:19px;
  }

  .mobile-nav-panel nav a{
    min-height:57px;
  }

  .mobile-nav-panel nav a strong{
    font-size:1.02rem;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .mobile-nav-panel,
  .mobile-menu-button span,
  .nav,
  .nav-links a,
  .nav-cta{
    transition:none;
  }

}

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

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 118px 0 110px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: 2%;
  top: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,217,154,.075), rgba(0,217,154,.025) 38%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(680px, 100%);
  max-width: 680px;
  padding-right: 250px;
}

.hero-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-bottom: 18px;
}

.hero-status-row .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 600 .61rem "Space Grotesk", sans-serif;
  letter-spacing: .14em;
}

.hero-status-row .location {
  color: #626a65;
  font: 500 .58rem "Space Grotesk", sans-serif;
  letter-spacing: .13em;
}

.eyebrow {
  font-size: .7rem;
  letter-spacing: .18em;
  color: #c2c0ba;
  font-weight: 700;
  margin: 0;
}

.location {
  font: 600 .65rem "Space Grotesk";
  letter-spacing: .14em;
  color: #76756f;
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--accent);
  margin-right: 9px;
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(214,255,104,.35), 0 0 15px var(--accent);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(214,255,104,0), 0 0 18px var(--accent);
  }
}

.hero-kicker {
  margin: 0 0 18px;
  color: #737c76;
  font: 600 .61rem "Space Grotesk", sans-serif;
  letter-spacing: .2em;
}

.hero h1,
.contact-section h2 {
  font-family: "Space Grotesk";
  font-size: clamp(3.8rem, 7.4vw, 7.2rem);
  line-height: .88;
  letter-spacing: -.078em;
  margin: 0 0 26px;
  font-weight: 600;
}

.hero h1 span,
.contact-section h2 span {
  color: var(--accent);
  text-shadow: 0 0 40px rgba(0,217,154,.08);
}

.hero-text {
  max-width: 640px;
  margin: 0;
  color: #9aa29d;
  font: 400 .94rem/1.75 "DM Sans", sans-serif;
}

.hero-actions,
.contact-actions {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 19px;
  font-weight: 700;
  font-size: .86rem;
  transition: .25s;
  min-height: 44px;
}

.button-primary {
  background: var(--accent);
  color: #10120b;
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 38px rgba(214,255,104,.16);
}

.button-ghost {
  border: 1px solid var(--line);
  color: #eee;
  background: rgba(255,255,255,.028);
}

.button-ghost:hover {
  background: rgba(255,255,255,.075);
  border-color: var(--line-strong);
}

.icon-button {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #d9d7d1;
  font: 700 .78rem "Space Grotesk";
  background: rgba(255,255,255,.025);
  transition: .25s;
}

.icon-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.hero-social-row {
  display: flex;
  align-items: center;
  gap: 12px 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero-social-row > span {
  margin-right: 4px;
  color: #666e69;
  font: 500 .58rem "Space Grotesk", sans-serif;
  letter-spacing: .12em;
}

.hero-social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  color: #d3d8d5;
  text-decoration: none;
  background: rgba(255,255,255,.018);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.hero-social-row a:hover {
  color: var(--accent);
  border-color: rgba(0,217,154,.42);
  background: rgba(0,217,154,.05);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0,217,154,.10);
}

.hero-social-row a img.social-logo,
.social-logo {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(78%) sepia(30%) saturate(900%) hue-rotate(115deg) brightness(95%) contrast(90%);
  transition: transform .25s ease, filter .25s ease;
}

.hero-social-row a:hover img.social-logo,
.social-logo:hover {
  transform: scale(1.12);
  filter: brightness(0) saturate(100%) invert(82%) sepia(50%) saturate(1200%) hue-rotate(115deg) brightness(105%) contrast(100%);
}

.hero-social-link.linkedin-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.linkedin-svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: currentColor;
}

.hero-social-link.linkedin-link:hover .linkedin-svg {
  transform: scale(1.08);
}

.hero-side-card {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 3;
  width: 286px;
  padding: 22px 22px 20px;
  border-radius: 15px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, rgba(7,15,11,.78), rgba(3,7,5,.64));
  border-color: rgba(0,217,154,.13);
  box-shadow: 0 25px 70px rgba(0,0,0,.30), 0 0 40px rgba(0,217,154,.025);
}

.hero-side-card .card-label {
  display: block;
  margin-bottom: 14px;
  font: 600 .56rem "Space Grotesk", sans-serif;
  letter-spacing: .16em;
  color: var(--accent);
}

.focus-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8ece9;
  font: 600 .84rem "Space Grotesk", sans-serif;
}

.focus-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(0,217,154,.75);
}

.hero-side-card p {
  margin: 13px 0 16px;
  color: #8d9690;
  font: 400 .69rem/1.7 "DM Sans", sans-serif;
}

.focus-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 17px;
}

.focus-stack span {
  padding: 5px 7px;
  border: 1px solid rgba(0,217,154,.12);
  border-radius: 5px;
  background: rgba(0,217,154,.025);
  color: #7f8983;
  font: 600 .48rem "Space Grotesk", sans-serif;
  letter-spacing: .08em;
}

.signal-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.signal-line > span {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  box-shadow: 0 0 8px rgba(0,217,154,.4);
}

.signal-line small {
  color: #5e6862;
  font: 500 .56rem "Space Grotesk", sans-serif;
}

.hero-stats {
  position: relative;
  width: min(100%, 700px);
  min-height: auto;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(7,11,9,.90), rgba(4,7,6,.78));
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025);
}

.hero-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
}

.hero-stat + .hero-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.10), transparent);
}

.stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--accent);
  font-size: 1.55rem;
  text-shadow: 0 0 18px rgba(0,217,154,.18);
}

.hero-stat strong {
  display: block;
  color: #eef2ef;
  font: 600 1.65rem "Space Grotesk", sans-serif;
  letter-spacing: -.04em;
}

.hero-stat span {
  display: block;
  margin-top: 4px;
  color: #68716b;
  font: 500 .58rem "DM Sans", sans-serif;
  line-height: 1.4;
}

.scroll-cue {
  position: absolute;
  left: 0;
  bottom: 59px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #555d58;
  text-decoration: none;
  font: 500 .56rem "Space Grotesk", sans-serif;
  letter-spacing: .12em;
  transition: color .2s ease;
}

.scroll-cue:hover {
  color: var(--accent);
}

.scroll-cue > span {
  display: block;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

@media (max-width: 1050px) {
  .hero {
    padding-top: 120px;
    padding-bottom: 80px;
  }

  .hero-copy {
    width: min(100%, 610px);
    max-width: 610px;
    padding-right: 240px;
  }

  .hero-side-card {
    right: 0;
    width: 220px;
    padding: 18px 18px 16px;
  }

  .hero-stats {
    width: min(100%, 620px);
  }

  .hero-stat {
    padding-left: 19px;
    padding-right: 19px;
  }

  .stat-icon {
    display: none;
  }
}

@media (max-width: 850px) {
  .hero {
    min-height: 100svh;
    display: block;
    padding-top: 135px;
    padding-bottom: 90px;
  }

  .hero::before {
    width: 430px;
    height: 430px;
    right: -180px;
    top: 18%;
  }

  .hero-copy {
    width: 100%;
    max-width: none;
    padding-right: 0;
  }

  .hero-status-row {
    gap: 8px 15px;
    margin-bottom: 18px;
  }

  .hero-status-row .location {
    font-size: .52rem;
  }

  .hero-kicker {
    font-size: .53rem;
    letter-spacing: .16em;
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(3.25rem, 15vw, 5rem);
    line-height: .88;
    margin-bottom: 22px;
  }

  .hero-text {
    max-width: 100%;
    margin-top: 0;
    font-size: .82rem;
    line-height: 1.7;
  }

  .hero-actions {
    margin-top: 24px;
  }

  .hero-actions .button {
    min-height: 44px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: .65rem;
  }

  .hero-social-row {
    margin-top: 22px;
  }

  .hero-social-row > span {
    font-size: .51rem;
  }

  .hero-side-card {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 32px;
    transform: none;
  }

  .hero-stats {
    position: relative;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: 26px;
    grid-template-columns: repeat(2, 1fr);
    transform: none;
  }

  .hero-stat {
    min-height: 73px;
    padding: 12px 13px;
    gap: 8px;
  }

  .hero-stat:nth-child(3)::before {
    display: block;
  }

  .hero-stat:nth-child(odd)::before {
    display: none;
  }

  .hero-stat:nth-child(n+3) {
    border-top: 1px solid rgba(255,255,255,.065);
  }

  .hero-stat strong {
    font-size: 1.15rem;
  }

  .hero-stat span {
    margin-top: 2px;
    font-size: .49rem;
  }

  .stat-icon {
    display: none;
  }

  .scroll-cue {
    display: none;
  }
}

@media (max-width: 420px) {
  .hero {
    padding-top: 126px;
    padding-bottom: 172px;
  }

  .hero h1 {
    font-size: 3.15rem;
  }

  .hero-text {
    font-size: .78rem;
  }

  .hero-actions {
    gap: 8px;
  }

  .hero-actions .button {
    padding-left: 13px;
    padding-right: 13px;
  }

  .hero-social-row {
    gap: 10px;
  }

  .hero-stat {
    min-height: 68px;
    padding: 10px 11px;
  }

  .hero-stat strong {
    font-size: 1.05rem;
  }
}

/* =========================================================
   STEP 03 — ABOUT / PREMIUM CARD SYSTEM
========================================================= */


/* =========================================================
   ABOUT LAYOUT
========================================================= */

.about-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(420px,.9fr);

  gap:70px;

  align-items:stretch;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.about-lead{
  padding-top:5px;
}

.about-label{
  margin:0 0 18px;

  color:var(--accent);

  font:
    600 .59rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:.18em;
}

.big-copy{
  max-width:700px;

  margin:0;

  color:#eef1ee;

  font:
    500 clamp(2.25rem,4vw,4.3rem)/1.02
    'Space Grotesk',
    sans-serif;

  letter-spacing:-.055em;
}

.big-copy em{
  color:var(--accent);

  font-style:normal;

  text-shadow:
    0 0 30px rgba(0,217,154,.06);
}

.about-note{
  max-width:620px;

  margin:28px 0 0;

  color:#858e88;

  font:
    400 .86rem/1.8
    'DM Sans',
    sans-serif;
}


/* =========================================================
   FOCUS LIST
========================================================= */

.about-focus-list{
  margin-top:42px;

  border-top:1px solid rgba(255,255,255,.075);
}

.about-focus-item{
  position:relative;

  display:grid;

  grid-template-columns:40px 1fr 30px;

  align-items:center;

  gap:14px;

  min-height:75px;

  padding:9px 5px;

  border-bottom:1px solid rgba(255,255,255,.065);

  transition:
    padding .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.about-focus-item:hover{
  padding-left:13px;
  padding-right:13px;

  background:rgba(0,217,154,.018);

  border-color:rgba(0,217,154,.16);
}

.about-focus-item > span{
  align-self:start;

  padding-top:5px;

  color:#4f5953;

  font:
    600 .57rem
    'Space Grotesk',
    sans-serif;
}

.about-focus-item div{
  display:flex;
  flex-direction:column;

  gap:5px;
}

.about-focus-item strong{
  color:#dce2de;

  font:
    500 .82rem
    'Space Grotesk',
    sans-serif;
}

.about-focus-item small{
  color:#68736c;

  font:
    400 .63rem
    'DM Sans',
    sans-serif;
}

.about-focus-item i{
  display:flex;

  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;

  border:1px solid rgba(0,217,154,.13);

  border-radius:50%;

  color:var(--accent);

  font-style:normal;

  font-size:.75rem;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.about-focus-item:hover i{
  transform:translate(2px,-2px);

  background:rgba(0,217,154,.06);

  border-color:rgba(0,217,154,.30);
}


/* =========================================================
   ABOUT CARD
========================================================= */

.about-card{
  position:relative;

  min-height:500px;

  display:flex;
  flex-direction:column;

  justify-content:flex-start;

  padding:30px;

  overflow:hidden;

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(9,18,14,.78),
      rgba(3,7,5,.78)
    );

  border-color:rgba(255,255,255,.09);

  box-shadow:
    0 30px 90px rgba(0,0,0,.28);
}

.about-card::before{
  content:"";

  position:absolute;

  width:330px;
  height:330px;

  right:-100px;
  top:-100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(0,217,154,.13),
      rgba(0,217,154,.035) 38%,
      transparent 70%
    );

  filter:blur(8px);

  pointer-events:none;
}

.about-card::after{
  content:"";

  position:absolute;

  left:20%;
  right:20%;
  bottom:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,217,154,.28),
      transparent
    );

  pointer-events:none;
}


/* =========================================================
   ATMOSPHERIC GRID
========================================================= */

.about-card-grid{
  position:absolute;

  inset:0;

  opacity:.42;

  background-image:
    linear-gradient(
      rgba(0,217,154,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,217,154,.035) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  mask-image:
    radial-gradient(
      circle at 75% 25%,
      black,
      transparent 67%
    );

  pointer-events:none;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.profile-line{
  position:relative;

  z-index:2;

  display:flex;
  align-items:center;

  gap:14px;

  padding-bottom:25px;

  border-bottom:1px solid rgba(255,255,255,.07);
}

.profile-monogram{
  display:flex;

  align-items:center;
  justify-content:center;

  width:52px;
  height:52px;

  border:1px solid rgba(0,217,154,.32);

  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      rgba(0,217,154,.10),
      rgba(0,217,154,.025)
    );

  color:var(--accent);

  font:
    600 1rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:-.08em;

  box-shadow:
    0 0 30px rgba(0,217,154,.04);
}

.profile-line div{
  display:flex;
  flex-direction:column;

  gap:5px;
}

.profile-line strong{
  color:#e9eeeb;

  font:
    500 .86rem
    'Space Grotesk',
    sans-serif;
}

.profile-line small{
  color:#657069;

  font:
    500 .6rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:.08em;
}


/* =========================================================
   PROFILE DESCRIPTION
========================================================= */

.about-card-description{
  position:relative;

  z-index:2;

  margin-top:28px;
}

.about-card-description .card-label{
  display:block;

  margin-bottom:10px;

  color:var(--accent);

  font:
    600 .55rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:.16em;
}

.about-card-description p{
  max-width:520px;

  margin:0;

  color:#8d9791;

  font:
    400 .72rem/1.75
    'DM Sans',
    sans-serif;
}


/* =========================================================
   META GRID
========================================================= */

.mini-meta-grid{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:0;

  margin-top:28px;

  border-top:1px solid rgba(255,255,255,.065);
  border-left:1px solid rgba(255,255,255,.065);
}

.mini-meta-grid > div{
  min-height:92px;

  padding:15px;

  border-right:1px solid rgba(255,255,255,.065);
  border-bottom:1px solid rgba(255,255,255,.065);
}

.mini-meta-grid span{
  display:block;

  margin-bottom:8px;

  color:#59625d;

  font:
    600 .52rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:.10em;
}

.mini-meta-grid strong{
  display:block;

  color:#c5ccc7;

  font:
    500 .66rem/1.45
    'DM Sans',
    sans-serif;
}

.mini-meta-grid .meta-accent{
  color:var(--accent);

  font:
    600 1.05rem
    'Space Grotesk',
    sans-serif;
}


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

.about-card-footer{
  position:relative;

  z-index:2;

  display:flex;

  justify-content:space-between;

  margin-top:auto;
  padding-top:20px;

  color:#4e5952;

  font:
    600 .51rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:.12em;
}

.about-card-footer span:last-child{
  color:#626d66;
}


/* =========================================================
   CARD HOVER
========================================================= */

.about-card:hover{
  border-color:rgba(0,217,154,.22);

  box-shadow:
    0 35px 100px rgba(0,0,0,.32),
    0 0 45px rgba(0,217,154,.025);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px){

  .about-grid{
    grid-template-columns:1fr;

    gap:45px;
  }

  .about-card{
    min-height:auto;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:560px){

  .big-copy{
    font-size:2.35rem;
  }

  .about-note{
    font-size:.79rem;
    line-height:1.75;
  }

  .about-focus-list{
    margin-top:32px;
  }

  .about-focus-item{
    grid-template-columns:32px 1fr 28px;

    gap:10px;

    min-height:70px;
  }

  .about-focus-item strong{
    font-size:.76rem;
  }

  .about-focus-item small{
    font-size:.59rem;
  }

  .about-card{
    padding:20px;

    border-radius:15px;
  }

  .profile-monogram{
    width:46px;
    height:46px;
  }

  .profile-line strong{
    font-size:.78rem;
  }

  .about-card-description{
    margin-top:22px;
  }

  .about-card-description p{
    font-size:.67rem;
  }

  .mini-meta-grid{
    margin-top:22px;
  }

  .mini-meta-grid > div{
    min-height:82px;

    padding:12px;
  }

  .mini-meta-grid strong{
    font-size:.6rem;
  }

  .about-card-footer{
    margin-top:22px;

    flex-direction:column;

    gap:7px;
  }

}

/* =========================================================
   STEP 04 — EXPERIENCE + PROJECT SYSTEM
========================================================= */


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

.experience-card{
  position:relative;

  overflow:hidden;

  padding:30px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      rgba(8,16,12,.82),
      rgba(3,7,5,.72)
    );

  border-color:rgba(255,255,255,.085);

  box-shadow:
    0 30px 90px rgba(0,0,0,.26);
}

.experience-card::before{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-180px;
  top:-190px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(0,217,154,.09),
      transparent 68%
    );

  pointer-events:none;
}

.experience-card:hover{
  border-color:rgba(0,217,154,.24);

  box-shadow:
    0 35px 100px rgba(0,0,0,.32),
    0 0 50px rgba(0,217,154,.025);
}


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

.exp-top{
  position:relative;
  z-index:2;

  display:flex;

  justify-content:space-between;
  align-items:flex-start;

  padding-bottom:28px;

  border-bottom:1px solid rgba(255,255,255,.075);
}

.exp-company-wrap{
  display:flex;
  align-items:center;

  gap:15px;
}

.company-mark{
  width:50px;
  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;

  border:1px solid rgba(0,217,154,.28);

  background:
    linear-gradient(
      135deg,
      rgba(0,217,154,.09),
      rgba(0,217,154,.025)
    );

  color:var(--accent);

  font:
    600 1.05rem
    'Space Grotesk',
    sans-serif;
}

.company{
  margin:0 0 4px;

  color:var(--accent);

  font:
    600 .61rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:.16em;
}

.exp-top h3{
  margin:0;

  color:#e9eeeb;

  font:
    500 1.15rem
    'Space Grotesk',
    sans-serif;
}

.exp-period{
  text-align:right;
}

.exp-period span{
  color:#59635d;

  font:
    600 .55rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:.14em;
}

.exp-period p{
  margin:7px 0 0;

  color:#89928c;

  font:
    500 .64rem
    'DM Sans',
    sans-serif;
}


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

.exp-summary{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:.75fr 1.25fr;

  gap:60px;

  padding:28px 0;

  border-bottom:1px solid rgba(255,255,255,.065);
}

.exp-label{
  display:block;

  margin-bottom:8px;

  color:#525d56;

  font:
    600 .53rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:.14em;
}

.exp-summary p{
  max-width:540px;

  margin:0;

  color:#89938c;

  font:
    400 .72rem/1.7
    'DM Sans',
    sans-serif;
}


/* =========================================================
   IMPACT STRIP
========================================================= */

.impact-strip{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:repeat(4,1fr);

  margin:0;

  border-bottom:1px solid rgba(255,255,255,.065);
}

.impact-strip > div{
  min-height:108px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:15px 20px;

  border-right:1px solid rgba(255,255,255,.065);
}

.impact-strip > div:last-child{
  border-right:none;
}

.impact-strip strong{
  color:#edf2ee;

  font:
    600 1.5rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:-.04em;
}

.impact-strip span{
  margin-top:5px;

  color:#606a64;

  font:
    500 .57rem
    'DM Sans',
    sans-serif;

  line-height:1.4;
}


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

.exp-details{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:0 35px;

  padding:18px 0 5px;
}

.exp-detail{
  display:grid;

  grid-template-columns:32px 1fr;

  gap:9px;

  padding:14px 0;
}

.exp-detail > span{
  color:var(--accent);

  font:
    600 .54rem
    'Space Grotesk',
    sans-serif;
}

.exp-detail p{
  margin:0;

  color:#7e8881;

  font:
    400 .68rem/1.7
    'DM Sans',
    sans-serif;
}


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

.exp-footer{
  position:relative;
  z-index:2;

  display:flex;
  justify-content:space-between;

  margin-top:17px;
  padding-top:17px;

  border-top:1px solid rgba(255,255,255,.055);

  color:#4c5750;

  font:
    600 .5rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:.12em;
}


/* =========================================================
   PROJECT INTRO
========================================================= */

.project-intro{
  max-width:650px;

  margin-top:-25px;
}


/* =========================================================
   PROJECT GRID
========================================================= */

.projects-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:14px;

  margin-top:40px;
}


/* =========================================================
   PROJECT CARD
========================================================= */

.project-card{
  position:relative;

  display:flex;
  flex-direction:column;

  min-height:445px;

  overflow:hidden;

  padding:30px;

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(8,16,12,.80),
      rgba(3,7,5,.70)
    );

  border-color:rgba(255,255,255,.08);

  box-shadow:
    0 24px 75px rgba(0,0,0,.22);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.project-card::before{
  content:"";

  position:absolute;

  width:380px;
  height:380px;

  right:-190px;
  top:-190px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(0,217,154,.075),
      transparent 68%
    );

  opacity:.7;

  transition:
    transform .5s ease,
    opacity .3s ease;
}

.project-card:hover{
  transform:translateY(-5px);

  border-color:rgba(0,217,154,.25);

  background:
    linear-gradient(
      145deg,
      rgba(9,19,14,.88),
      rgba(3,7,5,.76)
    );

  box-shadow:
    0 32px 90px rgba(0,0,0,.34),
    0 0 45px rgba(0,217,154,.025);
}

.project-card:hover::before{
  transform:scale(1.15);

  opacity:1;
}


/* FEATURE PROJECT */

.project-feature{
  grid-column:1 / -1;

  min-height:390px;
}


/* =========================================================
   PROJECT TOP
========================================================= */

.project-top{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:42px 1fr 35px;

  align-items:center;

  gap:12px;

  padding-bottom:19px;

  border-bottom:1px solid rgba(255,255,255,.065);
}

.project-number{
  color:#505a54;

  font:
    600 .56rem
    'Space Grotesk',
    sans-serif;
}

.project-type{
  color:var(--accent);

  font:
    600 .55rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:.14em;
}

.project-link{
  display:flex;

  align-items:center;
  justify-content:center;

  width:32px;
  height:32px;

  border:1px solid rgba(0,217,154,.17);

  border-radius:50%;

  color:var(--accent);

  text-decoration:none;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.project-link:hover{
  transform:translate(3px,-3px);

  background:rgba(0,217,154,.07);

  border-color:rgba(0,217,154,.42);
}


/* =========================================================
   PROJECT BODY
========================================================= */

.project-body{
  position:relative;
  z-index:2;

  padding-top:30px;
}

.project-body h3{
  margin:0;

  color:#edf1ee;

  font:
    600 clamp(1.55rem,3vw,2.45rem)
    'Space Grotesk',
    sans-serif;

  letter-spacing:-.045em;
}

.project-card:not(.project-feature) .project-body h3{
  font-size:1.5rem;
}

.project-body p{
  max-width:760px;

  margin:13px 0 0;

  color:#858f89;

  font:
    400 .74rem/1.75
    'DM Sans',
    sans-serif;
}


/* =========================================================
   TAGS
========================================================= */

.project-card .tags{
  display:flex;
  flex-wrap:wrap;

  gap:6px;

  margin-top:21px;
}

.project-card .tags span{
  padding:6px 8px;

  border:1px solid rgba(0,217,154,.11);

  border-radius:5px;

  background:rgba(0,217,154,.018);

  color:#8c9690;

  font:
    500 .54rem
    'Space Grotesk',
    sans-serif;
}


/* =========================================================
   PROJECT METRICS
========================================================= */

.project-metrics{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  margin-top:auto;
  padding-top:27px;
}

.project-metrics > div{
  padding:0 18px;

  border-left:1px solid rgba(255,255,255,.065);
}

.project-metrics > div:first-child{
  padding-left:0;

  border-left:none;
}

.project-metrics strong{
  display:block;

  color:#e7ece9;

  font:
    600 1.25rem
    'Space Grotesk',
    sans-serif;
}

.project-metrics span{
  display:block;

  margin-top:4px;

  color:#5e6862;

  font:
    500 .52rem
    'DM Sans',
    sans-serif;

  line-height:1.4;
}


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

.project-footer{
  position:relative;
  z-index:2;

  display:flex;

  justify-content:space-between;
  align-items:center;

  margin-top:25px;
  padding-top:16px;

  border-top:1px solid rgba(255,255,255,.055);

  color:#4f5a53;

  font:
    600 .49rem
    'Space Grotesk',
    sans-serif;

  letter-spacing:.10em;
}

.project-footer span:last-child{
  color:#66716a;
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media(max-width:900px){

  .exp-summary{
    gap:30px;
  }

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

  .project-feature{
    grid-column:auto;
  }

}


@media(max-width:560px){

  .experience-card{
    padding:20px;
  }

  .exp-top{
    flex-direction:column;

    gap:20px;
  }

  .exp-period{
    text-align:left;
  }

  .exp-summary{
    grid-template-columns:1fr;

    gap:22px;

    padding:22px 0;
  }

  .impact-strip{
    grid-template-columns:1fr 1fr;
  }

  .impact-strip > div{
    min-height:85px;

    padding:13px;
  }

  .impact-strip > div:nth-child(2){
    border-right:none;
  }

  .impact-strip > div:nth-child(n+3){
    border-top:1px solid rgba(255,255,255,.065);
  }

  .impact-strip strong{
    font-size:1.2rem;
  }

  .impact-strip span{
    font-size:.5rem;
  }

  .exp-details{
    grid-template-columns:1fr;
  }

  .exp-footer{
    flex-direction:column;

    gap:8px;
  }


  .project-intro{
    margin-top:-20px;
  }

  .projects-grid{
    margin-top:30px;

    gap:11px;
  }

  .project-card,
  .project-feature{
    min-height:410px;

    padding:20px;

    border-radius:15px;
  }

  .project-top{
    grid-template-columns:34px 1fr 32px;

    gap:8px;
  }

  .project-type{
    font-size:.49rem;
  }

  .project-body{
    padding-top:23px;
  }

  .project-body h3,
  .project-card:not(.project-feature) .project-body h3{
    font-size:1.45rem;
  }

  .project-body p{
    font-size:.68rem;
  }

  .project-metrics{
    padding-top:22px;
  }

  .project-metrics > div{
    padding:0 10px;
  }

  .project-metrics strong{
    font-size:1.05rem;
  }

  .project-metrics span{
    font-size:.47rem;
  }

  .project-footer{
    flex-direction:column;

    align-items:flex-start;

    gap:7px;
  }

}

/* =====================================================
   SKILLS — EMERALD AI GLASS SYSTEM
====================================================== */

.skills-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  margin:8px 0 42px;
  padding:16px 0;
  border-top:1px solid rgba(0,217,154,.10);
  border-bottom:1px solid rgba(0,217,154,.10);
  background:rgba(0,217,154,.015);
}

.skills-marquee::before,
.skills-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:100px;
  z-index:2;
  pointer-events:none;
}

.skills-marquee::before{
  left:0;
  background:linear-gradient(
    90deg,
    var(--bg),
    transparent
  );
}

.skills-marquee::after{
  right:0;
  background:linear-gradient(
    270deg,
    var(--bg),
    transparent
  );
}

.skills-marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:28px;
  animation:skillsMarquee 28s linear infinite;
  white-space:nowrap;
}

.skills-marquee-track span{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.18em;
  color:rgba(255,255,255,.52);
}

.skills-marquee-track b{
  color:var(--accent);
  font-size:.7rem;
  opacity:.8;
}

@keyframes skillsMarquee{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}


/* =====================================================
   SKILL GRID
====================================================== */

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


/* =====================================================
   SKILL CARD
====================================================== */

.skill-card{
  position:relative;
  min-height:330px;
  padding:30px;
  overflow:hidden;
  isolation:isolate;

  border:1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.skill-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(0,217,154,.12),
      transparent 35%
    );
  opacity:.6;
}

.skill-card::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-80px;
  bottom:-80px;

  border-radius:50%;
  background:rgba(0,217,154,.08);
  filter:blur(35px);
  z-index:-1;
}

.skill-card:hover{
  transform:translateY(-6px);
  border-color:rgba(0,217,154,.30);
  background:
    linear-gradient(
      145deg,
      rgba(0,217,154,.065),
      rgba(255,255,255,.02)
    );

  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    0 0 35px rgba(0,217,154,.055);
}


/* =====================================================
   CARD HEADER
====================================================== */

.skill-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:36px;
}

.skill-number{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  color:rgba(255,255,255,.28);
}

.skill-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:40px;
  height:40px;

  border:1px solid rgba(0,217,154,.22);
  border-radius:12px;

  color:var(--accent);
  background:rgba(0,217,154,.055);

  font-size:1rem;

  box-shadow:
    inset 0 0 18px rgba(0,217,154,.035);
}


/* =====================================================
   CARD HEADING
====================================================== */

.skill-card-heading{
  margin-bottom:16px;
}

.skill-card-heading span{
  display:block;
  margin-bottom:7px;

  font-family:var(--mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.16em;

  color:var(--accent);
  opacity:.72;
}

.skill-card-heading h3{
  margin:0;

  font-size:clamp(1.35rem,2vw,1.75rem);
  font-weight:650;
  letter-spacing:-.035em;

  color:#f5fffb;
}

.skill-card > p{
  max-width:520px;
  margin:0 0 24px;

  font-size:.9rem;
  line-height:1.7;

  color:rgba(255,255,255,.48);
}


/* =====================================================
   SKILL TAGS
====================================================== */

.skill-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
}

.skill-tags span{
  display:inline-flex;
  align-items:center;

  min-height:31px;
  padding:6px 11px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;

  background:rgba(255,255,255,.025);

  color:rgba(255,255,255,.66);

  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.02em;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    transform .2s ease;
}

.skill-tags span:hover{
  color:var(--accent);
  border-color:rgba(0,217,154,.30);
  background:rgba(0,217,154,.06);
  transform:translateY(-2px);
}


/* =====================================================
   CERTIFICATIONS CARD
====================================================== */

.skill-card-certifications{
  min-height:330px;
}

.certification-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.certification-item{
  display:grid;
  grid-template-columns:28px 1fr 20px;
  align-items:center;
  gap:10px;

  padding:12px 0;

  border-bottom:1px solid rgba(255,255,255,.055);
}

.certification-item:last-child{
  border-bottom:none;
}

.certification-item > span{
  font-family:var(--mono);
  font-size:.6rem;
  color:rgba(255,255,255,.24);
}

.certification-item div{
  min-width:0;
}

.certification-item strong{
  display:block;

  margin-bottom:3px;

  font-size:.77rem;
  font-weight:650;

  color:rgba(255,255,255,.82);
}

.certification-item small{
  display:block;

  font-size:.68rem;
  line-height:1.4;

  color:rgba(255,255,255,.38);
}

.certification-item i{
  font-style:normal;
  color:var(--accent);
  opacity:.55;
  transition:
    transform .2s ease,
    opacity .2s ease;
}

.certification-item:hover i{
  opacity:1;
  transform:translate(2px,-2px);
}


/* =====================================================
   SKILLS SECTION ATMOSPHERE
====================================================== */

#skills{
  position:relative;
}

#skills::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  left:-260px;
  top:180px;

  border-radius:50%;

  background:rgba(0,217,154,.035);
  filter:blur(80px);

  pointer-events:none;
}


/* =====================================================
   RESPONSIVE — TABLET
====================================================== */

@media (max-width:900px){

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

  .skill-card{
    min-height:300px;
  }

}


/* =====================================================
   RESPONSIVE — MOBILE
====================================================== */

@media (max-width:640px){

  .skills-marquee{
    margin:0 0 28px;
    padding:13px 0;
  }

  .skills-marquee-track{
    gap:20px;
    animation-duration:22s;
  }

  .skills-marquee-track span{
    font-size:.58rem;
  }

  .skills-grid{
    gap:13px;
  }

  .skill-card{
    min-height:auto;
    padding:21px;
    border-radius:18px;
  }

  .skill-card-top{
    margin-bottom:27px;
  }

  .skill-icon{
    width:36px;
    height:36px;
    border-radius:10px;
  }

  .skill-card-heading h3{
    font-size:1.3rem;
  }

  .skill-card > p{
    font-size:.82rem;
    line-height:1.65;
    margin-bottom:20px;
  }

  .skill-tags{
    gap:7px;
  }

  .skill-tags span{
    min-height:29px;
    padding:5px 9px;
    font-size:.59rem;
  }

  .certification-item{
    grid-template-columns:25px 1fr 18px;
    gap:8px;
  }

  .certification-item strong{
    font-size:.72rem;
  }

  .certification-item small{
    font-size:.63rem;
  }

}

/* =====================================================
   BEYOND ENGINEERING — EMERALD ACHIEVEMENTS
====================================================== */

.beyond-section{
  position:relative;
  overflow:hidden;
}

.beyond-section::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-300px;
  top:180px;
  border-radius:50%;
  background:rgba(0,217,154,.045);
  filter:blur(100px);
  pointer-events:none;
}


/* =====================================================
   INTRO
====================================================== */

.beyond-intro{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:end;
  margin-bottom:42px;
}

.beyond-intro h3{
  max-width:720px;
  margin:0;

  font-size:clamp(2.2rem,5vw,4.5rem);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:650;
  color:#f4fffb;
}

.beyond-intro h3 span{
  display:block;
  color:rgba(255,255,255,.30);
}

.beyond-intro > p{
  max-width:470px;
  margin:0;

  font-size:.9rem;
  line-height:1.8;
  color:rgba(255,255,255,.45);
}


/* =====================================================
   ACHIEVEMENT GRID
====================================================== */

.beyond-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  grid-template-rows:auto auto;
  gap:18px;
}


/* =====================================================
   ACHIEVEMENT CARD
====================================================== */

.beyond-card{
  position:relative;
  min-height:360px;
  padding:30px;
  overflow:hidden;
  isolation:isolate;

  border:1px solid rgba(255,255,255,.07);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.beyond-card:hover{
  transform:translateY(-6px);

  border-color:rgba(0,217,154,.28);

  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    0 0 40px rgba(0,217,154,.045);
}

.beyond-card::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-120px;
  top:-120px;

  border-radius:50%;

  background:rgba(0,217,154,.07);
  filter:blur(45px);

  z-index:-1;
}

.beyond-featured{
  grid-row:span 2;
  min-height:738px;
}

.beyond-wide{
  grid-column:2;
}


/* =====================================================
   CARD TOP
====================================================== */

.beyond-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  position:relative;
  z-index:3;
}

.beyond-number{
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.16em;
  color:rgba(255,255,255,.25);
}

.beyond-symbol{
  display:flex;
  align-items:center;
  justify-content:center;

  width:40px;
  height:40px;

  border:1px solid rgba(0,217,154,.22);
  border-radius:12px;

  color:var(--accent);
  background:rgba(0,217,154,.045);

  font-size:.95rem;
}


/* =====================================================
   CARD CONTENT
====================================================== */

.beyond-content{
  position:relative;
  z-index:2;
}

.beyond-card:not(.beyond-featured) .beyond-content{
  margin-top:74px;
}

.beyond-category{
  display:block;
  margin-bottom:13px;

  font-family:var(--mono);
  font-size:.61rem;
  font-weight:700;
  letter-spacing:.17em;

  color:var(--accent);
  opacity:.72;
}

.beyond-content h3{
  margin:0 0 17px;

  font-size:clamp(1.6rem,3vw,2.45rem);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:650;

  color:#f2fffa;
}

.beyond-content p{
  max-width:470px;
  margin:0;

  font-size:.82rem;
  line-height:1.75;

  color:rgba(255,255,255,.43);
}


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

.beyond-footer{
  position:absolute;
  left:26px;
  right:26px;
  bottom:25px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding-top:16px;

  border-top:1px solid rgba(255,255,255,.055);

  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.15em;

  color:rgba(255,255,255,.28);
}

.beyond-footer span:last-child{
  color:var(--accent);
  font-size:.8rem;
  opacity:.7;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

.beyond-card:hover .beyond-footer span:last-child{
  transform:translate(3px,-3px);
  opacity:1;
}


/* =====================================================
   RUBIK'S CUBE VISUAL
====================================================== */

.cube-visual{
  position:absolute;

  width:230px;
  height:230px;

  right:45px;
  top:110px;

  transform:rotate(-12deg);

  opacity:.92;
  transition:
    transform .5s ease,
    opacity .35s ease;
}

.beyond-featured:hover .cube-visual{
  transform:
    rotate(-8deg)
    translateY(-7px)
    scale(1.04);
  opacity:1;
}

.cube-face{
  position:absolute;

  width:125px;
  height:125px;

  border:1px solid rgba(0,217,154,.35);

  background:
    linear-gradient(
      135deg,
      rgba(0,217,154,.12),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 0 30px rgba(0,217,154,.035),
    0 0 25px rgba(0,217,154,.025);
}

.cube-face::before,
.cube-face::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      transparent 32%,
      rgba(0,217,154,.20) 33%,
      rgba(0,217,154,.20) 34%,
      transparent 35%,
      transparent 65%,
      rgba(0,217,154,.20) 66%,
      rgba(0,217,154,.20) 67%,
      transparent 68%
    );
}

.cube-face::after{
  background:
    linear-gradient(
      0deg,
      transparent 32%,
      rgba(0,217,154,.20) 33%,
      rgba(0,217,154,.20) 34%,
      transparent 35%,
      transparent 65%,
      rgba(0,217,154,.20) 66%,
      rgba(0,217,154,.20) 67%,
      transparent 68%
    );
}

.cube-face-one{
  left:15px;
  top:55px;
  transform:skewY(28deg);
}

.cube-face-two{
  left:105px;
  top:15px;
  transform:skewY(-28deg);
}

.cube-face-three{
  left:105px;
  top:140px;
  transform:skewY(28deg);
}


/* =====================================================
   FEATURED CARD TEXT POSITION
====================================================== */

.beyond-featured .beyond-content{
  position:absolute;
  left:26px;
  bottom:82px;
  max-width:430px;
}

.beyond-featured .beyond-content h3{
  font-size:clamp(2rem,4vw,3.4rem);
}


/* =====================================================
   BOTTOM LINE
====================================================== */

.beyond-bottom-line{
  display:flex;
  align-items:center;
  gap:18px;

  margin-top:28px;

  font-family:var(--mono);
  font-size:.57rem;
  letter-spacing:.16em;

  color:rgba(255,255,255,.22);
}

.beyond-line{
  flex:1;
  height:1px;

  background:rgba(255,255,255,.07);
}

.beyond-line span{
  display:block;
  width:26%;
  height:100%;

  background:var(--accent);
  opacity:.5;

  box-shadow:0 0 12px rgba(0,217,154,.45);
}


/* =====================================================
   TABLET
====================================================== */

@media (max-width:900px){

  .beyond-intro{
    grid-template-columns:1fr;
    gap:24px;
  }

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

  .beyond-featured{
    grid-column:1 / -1;
    grid-row:auto;
    min-height:500px;
  }

  .beyond-wide{
    grid-column:1 / -1;
  }

  .cube-visual{
    right:80px;
    top:75px;
  }

  .beyond-featured .beyond-content{
    bottom:60px;
  }

}


/* =====================================================
   MOBILE
====================================================== */

@media (max-width:640px){

  .beyond-intro{
    gap:20px;
    margin-bottom:28px;
  }

  .beyond-intro h3{
    font-size:2.15rem;
    line-height:1;
  }

  .beyond-intro > p{
    font-size:.8rem;
    line-height:1.7;
  }

  .beyond-grid{
    grid-template-columns:1fr;
    gap:13px;
  }

  .beyond-card,
  .beyond-featured{
    grid-column:auto;
    grid-row:auto;
    min-height:390px;
    padding:21px;
    border-radius:18px;
  }

  .beyond-featured{
    min-height:500px;
  }

  .beyond-card:not(.beyond-featured) .beyond-content{
    margin-top:68px;
  }

  .beyond-content h3{
    font-size:1.7rem;
  }

  .beyond-content p{
    font-size:.76rem;
    line-height:1.7;
  }

  .beyond-featured .beyond-content{
    left:21px;
    right:21px;
    bottom:67px;
  }

  .beyond-featured .beyond-content h3{
    font-size:2.2rem;
  }

  .cube-visual{
    width:170px;
    height:170px;
    right:5px;
    top:82px;
    transform:rotate(-12deg) scale(.78);
    transform-origin:center;
  }

  .beyond-featured:hover .cube-visual{
    transform:rotate(-8deg) scale(.82);
  }

  .cube-face{
    width:95px;
    height:95px;
  }

  .cube-face-one{
    left:12px;
    top:42px;
  }

  .cube-face-two{
    left:80px;
    top:12px;
  }

  .cube-face-three{
    left:80px;
    top:105px;
  }

  .beyond-footer{
    left:21px;
    right:21px;
    bottom:21px;
  }

  .beyond-bottom-line{
    gap:10px;
    font-size:.48rem;
  }

  .beyond-bottom-line > span:last-child{
    display:none;
  }

}

/* =====================================================
   CONTACT — HIRING CTA
====================================================== */

.contact-section{
  position:relative;
  overflow:hidden;
}

.contact-section::before{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  left:-360px;
  bottom:-300px;
  border-radius:50%;
  background:rgba(0,217,154,.045);
  filter:blur(110px);
  pointer-events:none;
}

.contact-section::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-250px;
  top:160px;
  border-radius:50%;
  background:rgba(0,217,154,.035);
  filter:blur(100px);
  pointer-events:none;
}


/* =====================================================
   CONTACT SHELL
====================================================== */

.contact-shell{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:center;

  padding:48px 0 90px;
}


/* =====================================================
   CONTACT MAIN
====================================================== */

.contact-main h3{
  max-width:760px;
  margin:0 0 26px;

  font-size:clamp(3rem,6.5vw,6.4rem);
  line-height:.91;
  letter-spacing:-.065em;
  font-weight:650;

  color:#f3fffb;
}

.contact-main h3 span{
  display:block;
  color:var(--accent);
  text-shadow:
    0 0 35px rgba(0,217,154,.13);
}

.contact-intro{
  max-width:560px;
  margin:0 0 30px;

  font-size:.94rem;
  line-height:1.8;

  color:rgba(255,255,255,.45);
}


/* =====================================================
   CONTACT STATUS
====================================================== */

.contact-status{
  display:flex;
  align-items:center;
  gap:13px;

  width:max-content;
  max-width:100%;

  margin-bottom:30px;
  padding:11px 15px;

  border:1px solid rgba(0,217,154,.13);
  border-radius:12px;

  background:rgba(0,217,154,.035);
}

.contact-status .status-dot{
  flex:none;
}

.contact-status strong{
  display:block;

  margin-bottom:3px;

  font-size:.73rem;
  font-weight:650;

  color:rgba(255,255,255,.78);
}

.contact-status small{
  display:block;

  font-family:var(--mono);
  font-size:.57rem;
  letter-spacing:.04em;

  color:rgba(255,255,255,.34);
}


/* =====================================================
   CONTACT ACTIONS
====================================================== */

.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:11px;
}


/* =====================================================
   CONTACT CARD
====================================================== */

.contact-card{
  position:relative;
  overflow:hidden;
  padding:30px;

  border:1px solid rgba(255,255,255,.075);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  box-shadow:
    0 25px 80px rgba(0,0,0,.25);
}

.contact-card-glow{
  position:absolute;

  width:260px;
  height:260px;

  right:-130px;
  top:-130px;

  border-radius:50%;

  background:rgba(0,217,154,.10);
  filter:blur(45px);

  pointer-events:none;
}

.contact-card-top{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding-bottom:20px;

  border-bottom:1px solid rgba(255,255,255,.055);
}

.contact-signal{
  font-family:var(--mono);
  font-size:.55rem;
  letter-spacing:.13em;
  color:var(--accent);
  opacity:.72;
}


/* =====================================================
   CONTACT DETAILS
====================================================== */

.contact-details{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;

  padding:8px 0;
}

.contact-detail{
  display:grid;
  grid-template-columns:42px 1fr 20px;
  align-items:center;
  gap:13px;

  padding:18px 4px;

  color:inherit;
  text-decoration:none;

  border-bottom:1px solid rgba(255,255,255,.05);

  transition:
    padding .25s ease,
    background .25s ease;
}

.contact-detail:last-child{
  border-bottom:none;
}

.contact-detail:hover{
  padding-left:9px;
  padding-right:0;
}

.contact-detail-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:38px;
  height:38px;

  border:1px solid rgba(0,217,154,.16);
  border-radius:11px;

  background:rgba(0,217,154,.035);

  color:var(--accent);

  font-family:var(--mono);
  font-size:.66rem;
  font-weight:700;
}

.contact-detail div{
  min-width:0;
}

.contact-detail small{
  display:block;

  margin-bottom:5px;

  font-family:var(--mono);
  font-size:.54rem;
  letter-spacing:.15em;

  color:rgba(255,255,255,.27);
}

.contact-detail strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:.78rem;
  font-weight:550;

  color:rgba(255,255,255,.73);

  transition:color .2s ease;
}

.contact-detail:hover strong{
  color:#f0fff9;
}

.contact-arrow{
  color:var(--accent);
  font-size:.78rem;
  opacity:.42;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

.contact-detail:hover .contact-arrow{
  opacity:1;
  transform:translate(3px,-3px);
}


/* =====================================================
   CONTACT CARD FOOTER
====================================================== */

.contact-card-footer{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  gap:12px;

  padding-top:18px;

  font-family:var(--mono);
  font-size:.53rem;
  letter-spacing:.13em;

  color:rgba(255,255,255,.24);
}

.contact-footer-line{
  flex:1;
  height:1px;
  background:rgba(255,255,255,.07);
}

.contact-footer-line span{
  display:block;

  width:34%;
  height:100%;

  background:var(--accent);
  opacity:.5;

  box-shadow:0 0 12px rgba(0,217,154,.4);
}


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

.portfolio-footer{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1.2fr 1fr auto;
  align-items:center;
  gap:30px;

  padding-top:24px;
  padding-bottom:30px;

  border-top:1px solid rgba(255,255,255,.07);
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.footer-brand .brand-mark{
  display:flex;
  align-items:center;
  justify-content:center;

  width:38px;
  height:38px;

  border:1px solid rgba(0,217,154,.22);
  border-radius:11px;

  background:rgba(0,217,154,.04);

  color:var(--accent);

  font-family:var(--mono);
  font-size:.7rem;
  font-weight:800;
}

.footer-brand strong{
  display:block;

  margin-bottom:3px;

  font-size:.7rem;
  font-weight:650;

  color:rgba(255,255,255,.72);
}

.footer-brand small{
  display:block;

  font-size:.57rem;

  color:rgba(255,255,255,.28);
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:22px;
}

.footer-links a{
  color:rgba(255,255,255,.32);
  text-decoration:none;

  font-family:var(--mono);
  font-size:.55rem;
  letter-spacing:.08em;

  transition:
    color .2s ease,
    transform .2s ease;
}

.footer-links a:hover{
  color:var(--accent);
  transform:translateY(-2px);
}

.footer-copy{
  font-family:var(--mono);
  font-size:.52rem;
  letter-spacing:.05em;
  color:rgba(255,255,255,.20);
  white-space:nowrap;
}


/* =====================================================
   RESPONSIVE — TABLET
====================================================== */

@media (max-width:900px){

  .contact-shell{
    grid-template-columns:1fr;
    gap:42px;
  }

  .contact-main h3{
    font-size:clamp(3rem,10vw,5rem);
  }

  .contact-card{
    max-width:680px;
  }

  .portfolio-footer{
    grid-template-columns:1fr 1fr;
  }

  .footer-links{
    justify-content:flex-end;
  }

  .footer-copy{
    grid-column:1 / -1;
  }

}


/* =====================================================
   RESPONSIVE — MOBILE
====================================================== */

@media (max-width:640px){

  .contact-shell{
    gap:32px;
    padding:30px 0 60px;
  }

  .contact-main h3{
    margin-bottom:20px;

    font-size:clamp(2.8rem,15vw,4.2rem);
    line-height:.94;
  }

  .contact-intro{
    font-size:.8rem;
    line-height:1.7;
    margin-bottom:23px;
  }

  .contact-status{
    width:100%;
    padding:10px 12px;
  }

  .contact-status strong{
    font-size:.67rem;
  }

  .contact-status small{
    font-size:.52rem;
  }

  .contact-actions{
    width:100%;
  }

  .contact-actions .button{
    flex:1;
    justify-content:center;
  }

  .contact-card{
    padding:20px;
    border-radius:18px;
  }

  .contact-card-top{
    padding-bottom:16px;
  }

  .contact-detail{
    grid-template-columns:38px 1fr 18px;
    gap:10px;
    padding:15px 2px;
  }

  .contact-detail-icon{
    width:34px;
    height:34px;
    border-radius:9px;
  }

  .contact-detail strong{
    font-size:.67rem;
  }

  .contact-card-footer{
    font-size:.46rem;
  }

  .portfolio-footer{
    grid-template-columns:1fr;
    gap:20px;
    padding-top:22px;
    padding-bottom:25px;
  }

  .footer-links{
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:14px 20px;
  }

  .footer-copy{
    grid-column:auto;
  }

}





/* =====================================================
   SOCIAL + BRAND LOGOS
====================================================== */

.social-logo{
  display:flex !important;
  align-items:center;
  justify-content:center;

  width:34px !important;
  height:34px !important;

  border:1px solid rgba(255,255,255,.075) !important;
  border-radius:50% !important;

  background:rgba(255,255,255,.018);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.social-logo img{
  width:15px;
  height:15px;

  display:block;

  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(30%)
    saturate(900%)
    hue-rotate(115deg)
    brightness(95%)
    contrast(90%);

  transition:
    transform .25s ease,
    filter .25s ease;
}

.social-logo:hover{
  transform:translateY(-3px);

  border-color:rgba(0,217,154,.32) !important;
  background:rgba(0,217,154,.055);

  box-shadow:
    0 0 22px rgba(0,217,154,.08);
}

.social-logo:hover img{
  transform:scale(1.12);

  filter:
    brightness(0)
    saturate(100%)
    invert(80%)
    sepia(50%)
    saturate(1200%)
    hue-rotate(115deg)
    brightness(105%)
    contrast(100%);
}


/* =====================================================
   CONTACT BRAND ICONS
====================================================== */

.brand-contact-icon{
  overflow:hidden;
}

.brand-contact-icon img{
  width:17px;
  height:17px;

  display:block;

  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(30%)
    saturate(900%)
    hue-rotate(115deg)
    brightness(95%)
    contrast(90%);

  transition:
    transform .2s ease,
    filter .2s ease;
}

.contact-detail:hover .brand-contact-icon img{
  transform:scale(1.1);

  filter:
    brightness(0)
    saturate(100%)
    invert(82%)
    sepia(50%)
    saturate(1200%)
    hue-rotate(115deg)
    brightness(105%)
    contrast(100%);
}

.email-logo{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:700;
  color:var(--accent);
}

/* =====================================================
   NOKIA COMPANY LOGO
====================================================== */

.company-mark.company-logo{
  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.company-mark.company-logo img{
  width:28px;
  height:28px;

  display:block;
  object-fit:contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(30%)
    saturate(900%)
    hue-rotate(115deg)
    brightness(95%)
    contrast(90%);

  transition:
    transform .25s ease,
    filter .25s ease;
}

.exp-company-wrap:hover .company-mark.company-logo img{
  transform:scale(1.1);

  filter:
    brightness(0)
    saturate(100%)
    invert(82%)
    sepia(50%)
    saturate(1200%)
    hue-rotate(115deg)
    brightness(105%)
    contrast(100%);
}

@media (max-width:640px){

  .company-mark.company-logo img{
    width:22px;
    height:22px;
  }

}

/* Nokia logo inside existing company mark */
/* =====================================================
   NOKIA — PREMIUM COMPANY BADGE
====================================================== */

/* The existing company-mark becomes a larger glass badge */
.company-mark{
  position:relative;

  width:78px !important;
  height:78px !important;

  display:flex !important;
  align-items:center;
  justify-content:center;

  flex:0 0 78px;

  border:1px solid rgba(0,217,154,.38) !important;
  border-radius:18px !important;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(0,217,154,.12),
      rgba(0,217,154,.025) 60%,
      rgba(0,0,0,.20)
    ) !important;

  box-shadow:
    inset 0 0 25px rgba(0,217,154,.045),
    0 0 0 1px rgba(0,217,154,.035),
    0 0 28px rgba(0,217,154,.08);

  overflow:hidden;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


/* Inner border */
.company-mark::before{
  content:"";

  position:absolute;
  inset:5px;

  border:1px solid rgba(0,217,154,.10);
  border-radius:13px;

  pointer-events:none;
}


/* Subtle diagonal shine */
.company-mark::after{
  content:"";

  position:absolute;

  width:90px;
  height:1px;

  left:-105px;
  top:50%;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
  );

  transform:rotate(-35deg);

  opacity:0;

  transition:
    left .6s ease,
    opacity .3s ease;
}


/* Nokia logo */
.company-mark img{
  position:relative;
  z-index:2;

  width:58px !important;
  height:58px !important;

  display:block;

  object-fit:contain;

  transform:scale(1);

  /* Nokia cyan/emerald visual treatment */
  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(55%)
    saturate(1800%)
    hue-rotate(120deg)
    brightness(105%)
    contrast(105%)
    drop-shadow(
      0 0 8px rgba(0,217,154,.35)
    );

  transition:
    transform .3s ease,
    filter .3s ease;
}


/* Hover */
.exp-company-wrap:hover .company-mark{
  transform:translateY(-3px);

  border-color:rgba(0,217,154,.62) !important;

  box-shadow:
    inset 0 0 30px rgba(0,217,154,.075),
    0 0 0 1px rgba(0,217,154,.08),
    0 0 38px rgba(0,217,154,.16);
}

.exp-company-wrap:hover .company-mark img{
  transform:scale(1.08);

  filter:
    brightness(0)
    saturate(100%)
    invert(82%)
    sepia(60%)
    saturate(2000%)
    hue-rotate(120deg)
    brightness(110%)
    contrast(110%)
    drop-shadow(
      0 0 13px rgba(0,217,154,.55)
    );
}

.exp-company-wrap:hover .company-mark::after{
  left:105px;
  opacity:1;
}


/* =====================================================
   MOBILE
====================================================== */

@media (max-width:640px){

  .company-mark{
    width:62px !important;
    height:62px !important;

    flex:0 0 62px;

    border-radius:15px !important;
  }

  .company-mark::before{
    inset:4px;
    border-radius:11px;
  }

  .company-mark img{
    width:46px !important;
    height:46px !important;
  }

}

/* =====================================================
   PROJECT TECHNOLOGY LOGOS
====================================================== */

.project-tech-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  align-items:center;
}

.project-tech-tags .tech-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;

  min-height:34px;
  padding:7px 12px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;

  background:rgba(255,255,255,.025);

  color:rgba(255,255,255,.62);

  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.01em;

  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.project-tech-tags .tech-tag-logo img{
  width:15px;
  height:15px;

  display:block;
  object-fit:contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(30%)
    saturate(900%)
    hue-rotate(115deg)
    brightness(95%)
    contrast(90%);

  opacity:.82;

  transition:
    transform .22s ease,
    opacity .22s ease,
    filter .22s ease;
}

.project-tech-tags .tech-tag:hover{
  color:#effff9;

  border-color:rgba(0,217,154,.32);

  background:rgba(0,217,154,.055);

  transform:translateY(-2px);

  box-shadow:
    0 5px 18px rgba(0,217,154,.055);
}

.project-tech-tags .tech-tag-logo:hover img{
  transform:scale(1.12);

  opacity:1;

  filter:
    brightness(0)
    saturate(100%)
    invert(82%)
    sepia(50%)
    saturate(1200%)
    hue-rotate(115deg)
    brightness(105%)
    contrast(100%);
}


/* =====================================================
   MOBILE
====================================================== */

@media (max-width:640px){

  .project-tech-tags{
    gap:7px;
  }

  .project-tech-tags .tech-tag{
    min-height:30px;
    padding:6px 9px;

    gap:6px;

    font-size:.56rem;
  }

  .project-tech-tags .tech-tag-logo img{
    width:13px;
    height:13px;
  }

}

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

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 118px 0 110px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: 2%;
  top: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,217,154,.075), rgba(0,217,154,.025) 38%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(680px, 100%);
  max-width: 680px;
  padding-right: 250px;
}

.hero-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-bottom: 18px;
}

.hero-status-row .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 600 .61rem "Space Grotesk", sans-serif;
  letter-spacing: .14em;
}

.hero-status-row .location {
  color: #626a65;
  font: 500 .58rem "Space Grotesk", sans-serif;
  letter-spacing: .13em;
}

.eyebrow {
  font-size: .7rem;
  letter-spacing: .18em;
  color: #c2c0ba;
  font-weight: 700;
  margin: 0;
}

.location {
  font: 600 .65rem "Space Grotesk";
  letter-spacing: .14em;
  color: #76756f;
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--accent);
  margin-right: 9px;
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(214,255,104,.35), 0 0 15px var(--accent);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(214,255,104,0), 0 0 18px var(--accent);
  }
}

.hero-kicker {
  margin: 0 0 18px;
  color: #737c76;
  font: 600 .61rem "Space Grotesk", sans-serif;
  letter-spacing: .2em;
}

.hero h1,
.contact-section h2 {
  font-family: "Space Grotesk";
  font-size: clamp(3.8rem, 7.4vw, 7.2rem);
  line-height: .88;
  letter-spacing: -.078em;
  margin: 0 0 26px;
  font-weight: 600;
}

.hero h1 span,
.contact-section h2 span {
  color: var(--accent);
  text-shadow: 0 0 40px rgba(0,217,154,.08);
}

.hero-text {
  max-width: 640px;
  margin: 0;
  color: #9aa29d;
  font: 400 .94rem/1.75 "DM Sans", sans-serif;
}

.hero-actions,
.contact-actions {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 19px;
  font-weight: 700;
  font-size: .86rem;
  transition: .25s;
  min-height: 44px;
}

.button-primary {
  background: var(--accent);
  color: #10120b;
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 38px rgba(214,255,104,.16);
}

.button-ghost {
  border: 1px solid var(--line);
  color: #eee;
  background: rgba(255,255,255,.028);
}

.button-ghost:hover {
  background: rgba(255,255,255,.075);
  border-color: var(--line-strong);
}

.icon-button {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #d9d7d1;
  font: 700 .78rem "Space Grotesk";
  background: rgba(255,255,255,.025);
  transition: .25s;
}

.icon-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.hero-social-row {
  display: flex;
  align-items: center;
  gap: 12px 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero-social-row > span {
  margin-right: 4px;
  color: #666e69;
  font: 500 .58rem "Space Grotesk", sans-serif;
  letter-spacing: .12em;
}

.hero-social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  color: #d3d8d5;
  text-decoration: none;
  background: rgba(255,255,255,.018);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.hero-social-row a:hover {
  color: var(--accent);
  border-color: rgba(0,217,154,.42);
  background: rgba(0,217,154,.05);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0,217,154,.10);
}

.hero-social-row a img.social-logo,
.social-logo {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(78%) sepia(30%) saturate(900%) hue-rotate(115deg) brightness(95%) contrast(90%);
  transition: transform .25s ease, filter .25s ease;
}

.hero-social-row a:hover img.social-logo,
.social-logo:hover {
  transform: scale(1.12);
  filter: brightness(0) saturate(100%) invert(82%) sepia(50%) saturate(1200%) hue-rotate(115deg) brightness(105%) contrast(100%);
}

.hero-social-link.linkedin-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.linkedin-svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: currentColor;
}

.hero-social-link.linkedin-link:hover .linkedin-svg {
  transform: scale(1.08);
}

.hero-side-card {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 3;
  width: 286px;
  padding: 22px 22px 20px;
  border-radius: 15px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, rgba(7,15,11,.78), rgba(3,7,5,.64));
  border-color: rgba(0,217,154,.13);
  box-shadow: 0 25px 70px rgba(0,0,0,.30), 0 0 40px rgba(0,217,154,.025);
}

.hero-side-card .card-label {
  display: block;
  margin-bottom: 14px;
  font: 600 .56rem "Space Grotesk", sans-serif;
  letter-spacing: .16em;
  color: var(--accent);
}

.focus-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8ece9;
  font: 600 .84rem "Space Grotesk", sans-serif;
}

.focus-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(0,217,154,.75);
}

.hero-side-card p {
  margin: 13px 0 16px;
  color: #8d9690;
  font: 400 .69rem/1.7 "DM Sans", sans-serif;
}

.focus-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 17px;
}

.focus-stack span {
  padding: 5px 7px;
  border: 1px solid rgba(0,217,154,.12);
  border-radius: 5px;
  background: rgba(0,217,154,.025);
  color: #7f8983;
  font: 600 .48rem "Space Grotesk", sans-serif;
  letter-spacing: .08em;
}

.signal-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.signal-line > span {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  box-shadow: 0 0 8px rgba(0,217,154,.4);
}

.signal-line small {
  color: #5e6862;
  font: 500 .56rem "Space Grotesk", sans-serif;
}

.hero-stats {
  position: relative;
  width: min(100%, 700px);
  min-height: auto;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(7,11,9,.90), rgba(4,7,6,.78));
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025);
}

.hero-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
}

.hero-stat + .hero-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.10), transparent);
}

.stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--accent);
  font-size: 1.55rem;
  text-shadow: 0 0 18px rgba(0,217,154,.18);
}

.hero-stat strong {
  display: block;
  color: #eef2ef;
  font: 600 1.65rem "Space Grotesk", sans-serif;
  letter-spacing: -.04em;
}

.hero-stat span {
  display: block;
  margin-top: 4px;
  color: #68716b;
  font: 500 .58rem "DM Sans", sans-serif;
  line-height: 1.4;
}

.scroll-cue {
  position: absolute;
  left: 0;
  bottom: 59px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #555d58;
  text-decoration: none;
  font: 500 .56rem "Space Grotesk", sans-serif;
  letter-spacing: .12em;
  transition: color .2s ease;
}

.scroll-cue:hover {
  color: var(--accent);
}

.scroll-cue > span {
  display: block;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

@media (max-width: 1050px) {
  .hero {
    padding-top: 120px;
    padding-bottom: 80px;
  }

  .hero-copy {
    width: min(100%, 610px);
    max-width: 610px;
    padding-right: 240px;
  }

  .hero-side-card {
    right: 0;
    width: 220px;
    padding: 18px 18px 16px;
  }

  .hero-stats {
    width: min(100%, 620px);
  }

  .hero-stat {
    padding-left: 19px;
    padding-right: 19px;
  }

  .stat-icon {
    display: none;
  }
}

@media (max-width: 850px) {
  .hero {
    min-height: 100svh;
    display: block;
    padding-top: 135px;
    padding-bottom: 90px;
  }

  .hero::before {
    width: 430px;
    height: 430px;
    right: -180px;
    top: 18%;
  }

  .hero-copy {
    width: 100%;
    max-width: none;
    padding-right: 0;
  }

  .hero-status-row {
    gap: 8px 15px;
    margin-bottom: 18px;
  }

  .hero-status-row .location {
    font-size: .52rem;
  }

  .hero-kicker {
    font-size: .53rem;
    letter-spacing: .16em;
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(3.25rem, 15vw, 5rem);
    line-height: .88;
    margin-bottom: 22px;
  }

  .hero-text {
    max-width: 100%;
    margin-top: 0;
    font-size: .82rem;
    line-height: 1.7;
  }

  .hero-actions {
    margin-top: 24px;
  }

  .hero-actions .button {
    min-height: 44px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: .65rem;
  }

  .hero-social-row {
    margin-top: 22px;
  }

  .hero-social-row > span {
    font-size: .51rem;
  }

  .hero-side-card {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 32px;
    transform: none;
  }

  .hero-stats {
    position: relative;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: 26px;
    grid-template-columns: repeat(2, 1fr);
    transform: none;
  }

  .hero-stat {
    min-height: 73px;
    padding: 12px 13px;
    gap: 8px;
  }

  .hero-stat:nth-child(3)::before {
    display: block;
  }

  .hero-stat:nth-child(odd)::before {
    display: none;
  }

  .hero-stat:nth-child(n+3) {
    border-top: 1px solid rgba(255,255,255,.065);
  }

  .hero-stat strong {
    font-size: 1.15rem;
  }

  .hero-stat span {
    margin-top: 2px;
    font-size: .49rem;
  }

  .stat-icon {
    display: none;
  }

  .scroll-cue {
    display: none;
  }
}

@media (max-width: 420px) {
  .hero {
    padding-top: 126px;
    padding-bottom: 172px;
  }

  .hero h1 {
    font-size: 3.15rem;
  }

  .hero-text {
    font-size: .78rem;
  }

  .hero-actions {
    gap: 8px;
  }

  .hero-actions .button {
    padding-left: 13px;
    padding-right: 13px;
  }

  .hero-social-row {
    gap: 10px;
  }

  .hero-stat {
    min-height: 68px;
    padding: 10px 11px;
  }

  .hero-stat strong {
    font-size: 1.05rem;
  }
}

/* =========================================================
   FINAL VISUAL POLISH — EMERALD AI GLASS
   ========================================================= */

:root{
  --emerald-glow: rgba(214,255,104,.16);
  --emerald-soft: rgba(214,255,104,.07);
  --glass-bg: rgba(255,255,255,.025);
  --glass-border: rgba(255,255,255,.085);
}

/* ---------- GLASS CARDS ---------- */

.about-card,
.experience-card,
.project-card,
.skill-card,
.beyond-card,
.contact-card,
.hero-side-card,
.hero-stats{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    ) !important;

  border-color:var(--glass-border) !important;

  box-shadow:
    0 18px 50px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* ---------- CARD HOVER ---------- */

.project-card,
.skill-card,
.beyond-card,
.experience-card{
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease !important;
}

.project-card:hover,
.skill-card:hover,
.beyond-card:hover,
.experience-card:hover{
  transform:translateY(-4px);

  border-color:rgba(214,255,104,.20) !important;

  background:
    linear-gradient(
      145deg,
      rgba(214,255,104,.045),
      rgba(255,255,255,.012)
    ) !important;

  box-shadow:
    0 22px 60px rgba(0,0,0,.30),
    0 0 28px rgba(214,255,104,.045),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* ---------- PRIMARY BUTTON ---------- */

.hero-actions a:first-child{
  box-shadow:
    0 0 0 1px rgba(214,255,104,.12),
    0 8px 30px rgba(214,255,104,.08) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease !important;
}

.hero-actions a:first-child:hover{
  transform:translateY(-2px);

  box-shadow:
    0 0 0 1px rgba(214,255,104,.25),
    0 10px 38px rgba(214,255,104,.15) !important;
}

/* ---------- SECONDARY BUTTON ---------- */

.hero-actions a:not(:first-child){
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease !important;
}

.hero-actions a:not(:first-child):hover{
  transform:translateY(-2px);
  border-color:rgba(214,255,104,.22) !important;
  background:rgba(214,255,104,.045) !important;
}

/* ---------- TECH / SKILL PILLS ---------- */

.project-tags span,
.skill-tags span,
.skill-pill{
  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease !important;
}

.project-tags span:hover,
.skill-tags span:hover,
.skill-pill:hover{
  border-color:rgba(214,255,104,.24) !important;
  background:rgba(214,255,104,.055) !important;
  transform:translateY(-1px);
}

/* ---------- SECTION HEADINGS ---------- */

.section-kicker,
.section-label{
  color:var(--accent) !important;
}

/* ---------- SUBTLE EMERALD DIVIDERS ---------- */

.section-title::after{
  background:linear-gradient(
    90deg,
    var(--accent),
    transparent
  ) !important;
}

/* ---------- MOBILE POLISH ---------- */

@media (max-width:1020px){

  .project-card:hover,
  .skill-card:hover,
  .beyond-card:hover,
  .experience-card:hover{
    transform:none;
  }

  .hero-actions a:hover{
    transform:none;
  }

}

@media (max-width:640px){

  .hero-side-card,
  .hero-stats{
    box-shadow:
      0 14px 40px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

}

/* ---------- FOCUSED UI / ACCESSIBILITY POLISH ---------- */

.section-rail {
  opacity: .58;
  transition: opacity .2s ease;
}

.section-rail:hover,
.section-rail:focus-within {
  opacity: 1;
}

.hero-social-row .hero-phone-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border-color: rgba(0,217,154,.24);
  background: rgba(0,217,154,.035);
  color: var(--accent);
}

.hero-phone-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-feature .project-top {
  grid-template-columns: 42px minmax(0, 1fr) auto 35px;
}

.project-live-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(0,217,154,.55);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 5px 20px rgba(0,217,154,.16);
  color: #06120d;
  font: 700 .59rem "Space Grotesk", sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.project-live-link:hover {
  transform: translateY(-2px);
  background: #44edbd;
  box-shadow: 0 8px 26px rgba(0,217,154,.25);
}

.project-live-link:focus-visible {
  outline-color: #d6ffe9;
}

.hero-social-row .hero-phone-link:hover {
  color: var(--accent);
  border-color: rgba(0,217,154,.48);
  background: rgba(0,217,154,.08);
}

.project-feature .project-heading > .project-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
}

.project-feature .project-copy h3 {
  grid-column: 1;
  grid-row: 1;
}

.project-feature .project-copy > p {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.project-architecture {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 94px;
  margin-top: 2px;
  padding: 12px;
  border: 1px solid rgba(0,217,154,.12);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,217,154,.045), rgba(255,255,255,.012));
}

.project-architecture div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 7px;
}

.project-architecture small,
.project-story small {
  display: block;
  color: #859189;
  font: 600 .48rem "Space Grotesk", sans-serif;
  letter-spacing: .1em;
}

.project-architecture strong {
  display: block;
  color: #e0e8e3;
  font: 600 .66rem/1.3 "Space Grotesk", sans-serif;
}

.project-architecture > span {
  color: var(--accent);
  font-size: .78rem;
}

.project-story {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.project-story > div {
  min-width: 0;
}

.project-story p {
  margin: 6px 0 0;
  color: #a0aaa3;
  font: 400 .63rem/1.55 "DM Sans", sans-serif;
}

.project-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.project-footer .project-actions a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  color: #a2ada5;
  font: 600 .56rem "Space Grotesk", sans-serif;
  letter-spacing: .06em;
  text-decoration: none;
  transition: color .2s ease;
}

.project-footer .project-actions a:hover {
  color: var(--accent);
}

.project-metrics span,
.project-footer,
.project-footer span:last-child,
.exp-label,
.contact-detail small {
  color: #929d95;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.mobile-nav-toggle:focus-visible + .mobile-menu-button {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .project-feature .project-heading > .project-copy {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-feature .project-copy h3,
  .project-feature .project-copy > p,
  .project-architecture,
  .project-story {
    grid-column: 1;
    grid-row: auto;
  }

  .project-architecture {
    margin-top: 20px;
  }
}

@media (max-width: 560px) {
  .mobile-nav-panel nav a {
    min-height: 48px;
  }

  .hero-social-row .hero-phone-link {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }

  .project-feature .project-top {
    grid-template-columns: 28px minmax(0, 1fr) auto 32px;
    gap: 6px;
  }

  .project-feature .project-top .project-type {
    font-size: .46rem;
    letter-spacing: .08em;
    line-height: 1.4;
  }

  .project-live-link {
    min-height: 34px;
    padding: 0 10px;
    font-size: .53rem;
  }

  .project-architecture {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .project-architecture > span {
    justify-self: center;
    transform: rotate(90deg);
  }

  .project-story {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }

  .project-story > div {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
  }

  .project-story p {
    margin-top: 0;
  }

  .project-actions {
    justify-content: flex-start;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (min-width: 851px) {
  .hero-copy {
    position: static;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 350px;
  }
}

@media (min-width: 851px) and (max-width: 1050px) {
  .hero-copy {
    padding-right: 280px;
  }
}