:root {

  color-scheme: dark;

  --bg: #03070c;

  --bg-2: #07131c;

  --ink: #f7fbff;

  --ink-soft: #d9f4ff;

  --muted: #8da6b3;

  --muted-strong: #b9d4df;

  --line: rgba(216, 249, 255, 0.14);

  --line-strong: rgba(132, 255, 191, 0.34);

  --surface: rgba(5, 16, 24, 0.72);

  --surface-strong: rgba(8, 25, 35, 0.92);

  --surface-quiet: rgba(255, 255, 255, 0.045);

  --electric: #19a8ff;

  --electric-2: #50d8ff;

  --white-hot: #f9ffff;

  --neon: #8affc8;

  --neon-strong: #a8ff4f;

  --warning: #ffe66d;

  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);

  --radius: 8px;

  --header-height: 5.2rem;

  --font-display: "Aptos Display", "Bahnschrift SemiBold", "Segoe UI Variable Display", "Trebuchet MS", sans-serif;

  --font-body: "Aptos", "Segoe UI Variable Text", "Segoe UI", "Trebuchet MS", sans-serif;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  min-width: 320px;

  font-size: 16px;

  scroll-behavior: smooth;

  background: var(--bg);

}



body {

  min-width: 320px;

  min-height: 100vh;

  margin: 0;

  color: var(--ink);

  font-family: var(--font-body);

  background:

    linear-gradient(120deg, rgba(25, 168, 255, 0.12), transparent 34%),

    linear-gradient(240deg, rgba(138, 255, 200, 0.1), transparent 32%),

    linear-gradient(180deg, #02050a 0%, #06111a 48%, #020508 100%);

  overflow-x: hidden;

}



body::before {

  content: "";

  position: fixed;

  inset: 0;

  z-index: -3;

  pointer-events: none;

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

  background-size: 96px 96px;

  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);

}



body::after {

  content: "";

  position: fixed;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  background:

    linear-gradient(180deg, rgba(3, 7, 12, 0.08) 0%, rgba(3, 7, 12, 0.72) 72%, #03070c 100%),

    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px);

  opacity: 0.42;

}



::selection {

  color: #031018;

  background: var(--neon);

}



a {

  color: inherit;

  text-decoration: none;

}



img,

svg,

canvas {

  display: block;

  max-width: 100%;

}



button,

input,

textarea,

select {

  font: inherit;

}



p {

  margin: 0;

  color: var(--muted-strong);

  line-height: 1.72;

}



h1,

h2,

h3,

h4 {

  margin: 0;

  color: var(--ink);

  font-family: var(--font-display);

  line-height: 0.98;

  letter-spacing: 0;

  overflow-wrap: anywhere;

}



ul {

  margin: 0;

  padding: 0;

}



.container-shell {

  width: min(1180px, calc(100% - 2rem));

  margin-inline: auto;

}



.webgl-stage {

  position: fixed;

  inset: 0;

  z-index: 0;

  width: 100%;

  height: 100%;

  opacity: 0.92;

  mix-blend-mode: screen;

  pointer-events: none;

}



.atmosphere-layer {

  position: fixed;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(90deg, rgba(25, 168, 255, 0.08), transparent 36%, rgba(138, 255, 200, 0.08)),

    linear-gradient(180deg, transparent 0%, rgba(3, 7, 12, 0.58) 84%);

  mix-blend-mode: screen;

}



.site-header {

  position: sticky;

  top: 0;

  z-index: 60;

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

  background: rgba(3, 8, 13, 0.72);

  backdrop-filter: blur(20px);

}



.header-inner {

  position: relative;

  display: grid;

  grid-template-columns: minmax(210px, auto) minmax(0, 1fr);

  align-items: center;

  gap: 0.8rem;

  padding: 0.9rem 0;

}



.brand {

  display: inline-flex;

  align-items: center;

  min-width: fit-content;

  gap: 0.85rem;

}



.brand-mark {

  display: grid;

  place-items: center;

  width: 2.85rem;

  height: 2.85rem;

  border: 1px solid rgba(138, 255, 200, 0.42);

  border-radius: var(--radius);

  color: var(--white-hot);

  background:

    linear-gradient(135deg, rgba(25, 168, 255, 0.72), rgba(138, 255, 200, 0.28)),

    rgba(255, 255, 255, 0.04);

  box-shadow: 0 0 30px rgba(25, 168, 255, 0.22);

  font-family: var(--font-display);

  font-size: 1.2rem;

  font-weight: 800;

}



.brand-copy {

  display: grid;

  gap: 0.12rem;

}



.brand-copy strong {

  font-size: 1rem;

  color: var(--white-hot);

}



.brand-copy span {

  font-size: 0.82rem;

  color: var(--muted);

}



.menu-toggle {

  display: none;

  align-items: center;

  justify-content: center;

  gap: 0.28rem;

  flex-direction: column;

  flex: 0 0 auto;

  position: relative;

  z-index: 2;

  width: 2.65rem;

  height: 2.65rem;

  padding: 0;

  border: 1px solid rgba(80, 216, 255, 0.4);

  border-radius: var(--radius);

  color: var(--white-hot);

  background: rgba(25, 168, 255, 0.12);

  cursor: pointer;

}



.menu-toggle span {

  display: block;

  width: 1.1rem;

  height: 2px;

  border-radius: 999px;

  background: currentColor;

  transform-origin: center;

  transition: transform 180ms ease, opacity 180ms ease;

}



.menu-toggle[aria-expanded="true"] span:nth-child(1) {

  transform: translateY(0.39rem) rotate(45deg);

}



.menu-toggle[aria-expanded="true"] span:nth-child(2) {

  opacity: 0;

}



.menu-toggle[aria-expanded="true"] span:nth-child(3) {

  transform: translateY(-0.39rem) rotate(-45deg);

}



.site-nav {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 0.18rem;

  width: 100%;

  min-width: 0;

  overflow: visible;

}



.site-nav a {

  flex: 0 1 auto;

  min-height: 2.35rem;

  padding: 0.68rem 0.74rem;

  border: 1px solid transparent;

  border-radius: var(--radius);

  color: var(--muted);

  font-size: 0.84rem;

  font-weight: 700;

  line-height: 1;

  white-space: nowrap;

  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;

}



.site-nav a:hover,

.site-nav a.is-active {

  color: var(--white-hot);

  border-color: rgba(80, 216, 255, 0.34);

  background: rgba(25, 168, 255, 0.12);

  transform: translateY(-1px);

}



.experience-shell {

  position: relative;

  z-index: 2;

}



.experience-section {

  position: relative;

  scroll-margin-top: var(--header-height);

}



.chapter-section {

  padding: 7rem 0;

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

  background:

    linear-gradient(180deg, rgba(3, 7, 12, 0.28), rgba(3, 7, 12, 0.76)),

    linear-gradient(90deg, rgba(25, 168, 255, 0.07), transparent 38%, rgba(138, 255, 200, 0.055));

}



.hero {

  min-height: 88svh;

  overflow: clip;

}



.hero-media {

  position: absolute;

  inset: 0;

  z-index: -1;

}



.hero-media::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg, rgba(2, 5, 10, 0.96) 0%, rgba(2, 5, 10, 0.74) 42%, rgba(2, 5, 10, 0.2) 100%),

    linear-gradient(180deg, rgba(2, 5, 10, 0.28) 0%, rgba(2, 5, 10, 0.92) 100%);

}



.hero-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 58% center;

  filter: saturate(1.05) contrast(1.02);

  opacity: 0.34;

}



.hero::before {

  content: "";

  position: absolute;

  inset: 8rem 3vw 2rem auto;

  z-index: 1;

  width: min(42rem, 58vw);

  border: 1px solid rgba(80, 216, 255, 0.18);

  background:

    linear-gradient(90deg, transparent, rgba(80, 216, 255, 0.14), transparent),

    repeating-linear-gradient(115deg, rgba(138, 255, 200, 0.14) 0 1px, transparent 1px 18px);

  clip-path: polygon(9% 0, 100% 10%, 88% 82%, 42% 100%, 0 64%);

  opacity: 0.44;

  animation: cinematic-scan 9s ease-in-out infinite alternate;

  pointer-events: none;

}



.hero::after {

  content: "";

  position: absolute;

  inset: auto 0 0;

  z-index: 1;

  height: 40%;

  background: linear-gradient(180deg, transparent, rgba(3, 7, 12, 0.9));

  pointer-events: none;

}



.hero-content {

  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);

  align-items: end;

  min-height: 88svh;

  gap: 2.5rem;

  padding: 6.8rem 0 4.5rem;

}



.hero-copy {

  display: grid;

  gap: 1.15rem;

  max-width: 56rem;

}



.hero-copy > * {

  animation: rise-in 760ms both;

}



.hero-copy > *:nth-child(2) {

  animation-delay: 90ms;

}



.hero-copy > *:nth-child(3) {

  animation-delay: 170ms;

}



.hero-copy > *:nth-child(4) {

  animation-delay: 240ms;

}



.hero-copy > *:nth-child(5) {

  animation-delay: 310ms;

}



.hero h1 {

  max-width: 17ch;

  font-size: 3.6rem;

  line-height: 1.02;

}



.hero-subheadline {

  max-width: 47rem;

  color: var(--ink-soft);

  font-size: 1.32rem;

  line-height: 1.48;

}



.hero-body {

  max-width: 46rem;

  font-size: 1.03rem;

}



.eyebrow,

.card-eyebrow,

.chapter-kicker,

.certification-code {

  display: inline-flex;

  align-items: center;

  gap: 0.58rem;

  color: var(--neon);

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0;

  line-height: 1.2;

  text-transform: uppercase;

}



.eyebrow::before,

.card-eyebrow::before {

  content: "";

  width: 2.5rem;

  height: 1px;

  background: linear-gradient(90deg, var(--neon), transparent);

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.85rem;

  padding-top: 0.35rem;

}



.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 10rem;

  min-height: 3.25rem;

  padding: 0.9rem 1.2rem;

  border: 1px solid transparent;

  border-radius: var(--radius);

  font-size: 0.96rem;

  font-weight: 800;

  line-height: 1.1;

  text-align: center;

  transition: transform 180ms ease, box-shadow 220ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;

}



.button:hover {

  transform: translateY(-2px);

}



.button-primary {

  color: #031018;

  background: linear-gradient(135deg, var(--white-hot), var(--neon));

  box-shadow: 0 16px 42px rgba(138, 255, 200, 0.22);

}



.button-secondary {

  color: var(--white-hot);

  border-color: rgba(80, 216, 255, 0.45);

  background: rgba(25, 168, 255, 0.12);

}



.badge-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.58rem;

  list-style: none;

  padding-top: 0.25rem;

}



.badge-row li {

  min-height: 2.35rem;

  padding: 0.62rem 0.78rem;

  border: 1px solid rgba(80, 216, 255, 0.24);

  border-radius: var(--radius);

  color: var(--ink-soft);

  background: rgba(255, 255, 255, 0.045);

  font-size: 0.88rem;

  font-weight: 800;

}



.hero-signals {

  display: grid;

  gap: 0.85rem;

}



.signal-card,

.metric-card,

.skill-card,

.leadership-card,

.project-card,

.product-card,

.certification-card,

.neural-panel,

.governance-panel {

  position: relative;

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

  border-radius: var(--radius);

  background:

    linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),

    var(--surface);

  box-shadow: var(--shadow);

  overflow: hidden;

}



.signal-card {

  min-height: 9.5rem;

  padding: 1.05rem;

  backdrop-filter: blur(16px);

}



.signal-line {

  display: block;

  width: 100%;

  height: 2px;

  margin-bottom: 1rem;

  background: linear-gradient(90deg, var(--electric), var(--neon), transparent);

}



.signal-card h2 {

  margin-bottom: 0.62rem;

  font-size: 1.18rem;

  line-height: 1.05;

}



.signal-card p {

  font-size: 0.93rem;

  line-height: 1.58;

}



.narrative-grid,

.leadership-grid {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);

  align-items: center;

  gap: 2rem;

}



.chapter-copy {

  display: grid;

  gap: 1.3rem;

}



.chapter-kicker {

  color: var(--electric-2);

}



.chapter-kicker span:first-child {

  display: inline-grid;

  place-items: center;

  width: 2.7rem;

  height: 2.1rem;

  border: 1px solid rgba(80, 216, 255, 0.32);

  border-radius: var(--radius);

  color: var(--neon);

  background: rgba(255, 255, 255, 0.055);

}



.chapter-copy h2,

.section-header h2 {

  max-width: 25ch;

  font-size: 2.2rem;

  line-height: 1.08;

}



.narrative-prose {

  display: grid;

  max-width: 47rem;

  gap: 1rem;

}



.narrative-prose p {

  font-size: 1.05rem;

}



.neural-panel,

.governance-panel {

  display: grid;

  gap: 1rem;

  padding: 1.25rem;

  min-height: 26rem;

  align-content: end;

}



.neural-core {

  position: absolute;

  inset: 1rem;

  opacity: 0.86;

  pointer-events: none;

}



.neural-core::before,

.neural-core::after,

.neural-core span {

  content: "";

  position: absolute;

  border: 1px solid rgba(80, 216, 255, 0.42);

  transform: skewY(-9deg);

}



.neural-core::before {

  inset: 12% 8% 28% 18%;

  background: linear-gradient(135deg, rgba(25, 168, 255, 0.14), transparent 54%, rgba(138, 255, 200, 0.1));

}



.neural-core::after {

  inset: 34% 20% 12% 6%;

  border-color: rgba(138, 255, 200, 0.38);

}



.neural-core span:nth-child(1) {

  inset: 10% 52% 18% 20%;

}



.neural-core span:nth-child(2) {

  inset: 20% 14% 42% 34%;

  border-color: rgba(249, 255, 255, 0.3);

}



.neural-core span:nth-child(3) {

  inset: 50% 18% 20% 44%;

  border-color: rgba(168, 255, 79, 0.34);

}



.neural-panel > :not(.neural-core),

.governance-panel > * {

  position: relative;

  z-index: 1;

}



.neural-panel h3,

.governance-panel h3 {

  max-width: 18ch;

  font-size: 1.65rem;

  line-height: 1.05;

}



.feature-list {

  display: grid;

  gap: 0.75rem;

  list-style: none;

}



.feature-list li {

  position: relative;

  padding-left: 1.05rem;

  color: var(--muted-strong);

  line-height: 1.55;

}



.feature-list li::before {

  content: "";

  position: absolute;

  top: 0.7rem;

  left: 0;

  width: 0.38rem;

  height: 0.38rem;

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

  background: var(--electric);

  transform: rotate(45deg);

}



.section-header {

  display: grid;

  gap: 1rem;

  max-width: 64rem;

  margin-bottom: 2rem;

}



.section-header p {

  max-width: 52rem;

  font-size: 1.06rem;

}



.cinematic-header h2 {

  max-width: 28ch;

}



.metrics-grid,

.skills-grid,

.project-grid,

.product-grid,

.certification-grid {

  display: grid;

  gap: 0.9rem;

}



.metrics-grid {

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

}



.metric-card {

  min-height: 14.5rem;

  padding: 1.15rem;

  display: grid;

  align-content: space-between;

  gap: 0.8rem;

}



.metric-value {

  display: block;

  color: var(--white-hot);

  font-family: var(--font-display);

  font-size: 3.05rem;

  font-weight: 900;

  line-height: 0.95;

}



.metric-card h3 {

  font-size: 1.08rem;

  line-height: 1.08;

}



.metric-card p {

  font-size: 0.95rem;

  line-height: 1.56;

}



.skills-layout {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr);

  gap: 0.9rem;

  align-items: stretch;

}



.skills-grid {

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.skill-card {

  min-height: 14rem;

  padding: 1.1rem;

  display: grid;

  align-content: start;

  gap: 1rem;

}



.skill-card h3 {

  font-size: 1.22rem;

}



.chip-list,

.tag-list {

  display: flex;

  flex-wrap: wrap;

  align-content: flex-start;

  align-items: flex-start;

  gap: 0.5rem;

  list-style: none;

}



.chip-list li,

.tag-list li {

  display: inline-flex;

  align-items: center;

  min-height: 2.28rem;

  padding: 0.52rem 0.65rem;

  border: 1px solid rgba(138, 255, 200, 0.2);

  border-radius: var(--radius);

  color: var(--ink-soft);

  background: rgba(138, 255, 200, 0.065);

  font-size: 0.82rem;

  font-weight: 750;

  line-height: 1.18;

}



.leadership-grid {

  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

}



.leadership-list {

  display: grid;

  gap: 0.75rem;

}



.leadership-card {

  display: grid;

  grid-template-columns: 3.4rem minmax(0, 1fr);

  align-items: center;

  gap: 0.9rem;

  min-height: 6.2rem;

  padding: 0.95rem 1rem;

}



.leadership-card span {

  display: inline-grid;

  place-items: center;

  width: 2.8rem;

  height: 2.8rem;

  border: 1px solid rgba(80, 216, 255, 0.32);

  border-radius: var(--radius);

  color: var(--neon);

  font-weight: 900;

}



.leadership-card p {

  font-size: 0.96rem;

  line-height: 1.55;

}



.project-grid,

.product-grid {

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.certification-grid {

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

}



.project-card,

.product-card,

.certification-card {

  min-height: 19rem;

  padding: 1.1rem;

  display: grid;

  align-content: start;

  gap: 0.9rem;

}



.product-card {

  min-height: 20rem;

}



.certification-card {

  min-height: 15rem;

}



.card-glow {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(135deg, rgba(25, 168, 255, 0.18), transparent 42%),

    linear-gradient(315deg, rgba(138, 255, 200, 0.12), transparent 46%);

  opacity: 0;

  transition: opacity 220ms ease;

}



.project-card:hover .card-glow,

.product-card:hover .card-glow,

.certification-card:hover .card-glow {

  opacity: 1;

}



.card-topline {

  position: relative;

  z-index: 1;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 0.8rem;

}



.card-chip,

.certification-code {

  display: inline-flex;

  align-items: center;

  min-height: 2.1rem;

  padding: 0.48rem 0.62rem;

  border: 1px solid rgba(138, 255, 200, 0.35);

  border-radius: var(--radius);

  color: #031018;

  background: linear-gradient(135deg, var(--white-hot), var(--neon));

  font-size: 0.78rem;

  font-weight: 900;

  line-height: 1;

  text-transform: uppercase;

}



.card-sector {

  color: var(--muted);

  font-size: 0.84rem;

  font-weight: 800;

  line-height: 1.25;

  text-align: right;

}



.card-summary,

.card-focus,

.project-card .tag-list,

.product-card .tag-list,

.certification-card h3,

.certification-card p,

.product-card h3 {

  position: relative;

  z-index: 1;

}



.card-summary {

  color: var(--muted-strong);

}



.card-focus {

  color: var(--ink-soft);

  font-weight: 750;

}



.product-card h3,

.certification-card h3 {

  font-size: 1.35rem;

  line-height: 1.08;

}



.certification-card-featured {

  border-color: rgba(138, 255, 200, 0.48);

  background:

    linear-gradient(135deg, rgba(25, 168, 255, 0.22), rgba(138, 255, 200, 0.09)),

    var(--surface-strong);

}



.site-footer {

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

  background: rgba(3, 7, 12, 0.82);

}



.footer-inner {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 1rem;

  flex-wrap: wrap;

  padding: 2rem 0;

}



.footer-inner p {

  color: var(--muted);

  font-size: 0.92rem;

}



.has-js .js-reveal {

  opacity: 0;

  transform: translateY(26px) scale(0.985);

  transition: opacity 720ms ease, transform 720ms ease;

}



.has-js .js-reveal.is-visible {

  opacity: 1;

  transform: translateY(0) scale(1);

}



@keyframes rise-in {

  from {

    opacity: 0;

    transform: translateY(18px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes cinematic-scan {

  from {

    opacity: 0.26;

    transform: translate3d(0, 0, 0) skewY(-4deg);

  }



  to {

    opacity: 0.56;

    transform: translate3d(-2rem, 1rem, 0) skewY(-8deg);

  }

}



@media (max-width: 1120px) {

  .hero-content,

  .narrative-grid,

  .leadership-grid,

  .skills-layout {

    grid-template-columns: 1fr;

  }



  .hero-content {

    align-items: end;

  }



  .hero h1 {

    font-size: 3.05rem;

  }



  .chapter-copy h2,

  .section-header h2 {

    font-size: 2.05rem;

  }



  .hero-signals {

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

  }



  .neural-panel,

  .governance-panel {

    min-height: 20rem;

  }

}



@media (max-width: 900px) {

  :root {

    --header-height: 4.35rem;

  }



  .header-inner {

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 0.7rem;

  }



  .menu-toggle {

    display: inline-flex;

  }



  .site-nav {

    position: absolute;

    top: calc(100% + 0.65rem);

    right: 0;

    left: 0;

    display: grid;

    grid-template-columns: 1fr;

    gap: 0.35rem;

    padding: 0.6rem;

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

    border-radius: var(--radius);

    background: rgba(3, 12, 18, 0.96);

    box-shadow: var(--shadow);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-0.45rem);

    pointer-events: none;

    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;

  }



  .site-header.is-menu-open .site-nav {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;

  }



  .site-nav a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 2.7rem;

    padding: 0.82rem 0.9rem;

    border-color: rgba(80, 216, 255, 0.16);

    background: rgba(255, 255, 255, 0.035);

    font-size: 0.9rem;

  }



  .chapter-section {

    padding: 5.25rem 0;

  }



  .hero-content {

    gap: 1.5rem;

    padding-top: 5.5rem;

    padding-bottom: 3.2rem;

  }



  .hero-signals,

  .metrics-grid,

  .skills-grid,

  .project-grid,

  .product-grid,

  .certification-grid {

    grid-template-columns: 1fr;

  }



  .metric-card,

  .skill-card,

  .project-card,

  .product-card,

  .certification-card {

    min-height: auto;

  }

}



@media (max-width: 720px) {

  :root {

    --header-height: 4.35rem;

  }



  .container-shell {

    width: min(100% - 2rem, 1180px);

  }



  .header-inner {

    padding: 0.72rem 0;

  }



  .brand-mark {

    width: 2.45rem;

    height: 2.45rem;

  }



  .brand-copy strong {

    font-size: 0.94rem;

  }



  .brand-copy span {

    font-size: 0.76rem;

  }



  .hero {

    min-height: auto;

  }



  .hero-content {

    min-height: 78svh;

  }



  .hero h1 {

    max-width: 16ch;

    font-size: 2.35rem;

  }



  .hero-subheadline {

    font-size: 1.08rem;

  }



  .hero-body,

  .narrative-prose p,

  .section-header p {

    font-size: 0.98rem;

  }



  .hero-media::after {

    background:

      linear-gradient(90deg, rgba(2, 5, 10, 0.92) 0%, rgba(2, 5, 10, 0.78) 100%),

      linear-gradient(180deg, rgba(2, 5, 10, 0.18) 0%, rgba(2, 5, 10, 0.94) 100%);

  }



  .hero-actions {

    display: grid;

  }



  .button {

    width: 100%;

  }



  .chapter-copy h2,

  .section-header h2 {

    max-width: 100%;

    font-size: 1.7rem;

  }



  .metric-value {

    font-size: 2.55rem;

  }



  .leadership-card {

    grid-template-columns: 2.8rem minmax(0, 1fr);

    gap: 0.7rem;

  }



  .card-topline {

    display: grid;

  }



  .card-sector {

    text-align: left;

  }

}



@media (max-width: 420px) {

  .brand-copy span {

    display: none;

  }



  .hero h1 {

    font-size: 2rem;

  }



  .chapter-copy h2,

  .section-header h2 {

    font-size: 1.48rem;

  }



  .badge-row li,

  .chip-list li,

  .tag-list li {

    font-size: 0.78rem;

  }



  .signal-card,

  .metric-card,

  .skill-card,

  .leadership-card,

  .project-card,

  .product-card,

  .certification-card,

  .neural-panel,

  .governance-panel {

    padding: 0.9rem;

  }

}



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

  html {

    scroll-behavior: auto;

  }



  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }



  .webgl-stage {

    display: none;

  }

}