:root {
  --orange: #ff5e00;
  --orange-hot: #ff7a18;
  --orange-face: #ff6814;
  --orange-side: #9f2e00;
  --orange-dark: #541500;
  --black: #050505;
  --studio: #020405;
  --steel: #101514;
  --ink: #111111;
  --paper: #f6efe7;
  --muted: #b4470b;
  --metal-highlight: rgba(255, 198, 132, 0.58);
  --transition-cutout-height: clamp(88px, 9.9vw, 184px);
  --hero-drift-x: 0px;
  --hero-drift-y: 0px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #020405;
  color: var(--black);
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.84" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.58"/%3E%3C/svg%3E');
}

.nav-rail {
  position: fixed;
  left: 22px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  align-items: stretch;
  min-height: 54px;
  color: var(--black);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22));
}

.brand-mark {
  --magnet-x: 0px;
  --magnet-y: 0px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin-right: -1px;
  border: 2px solid var(--black);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, var(--metal-highlight), transparent 23%),
    linear-gradient(145deg, #ff8a2f 0%, var(--orange) 42%, #b13400 100%);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 1.6rem;
  box-shadow:
    inset 0 2px 0 rgba(255, 224, 186, 0.45),
    inset -10px -12px 18px rgba(92, 20, 0, 0.48),
    0 18px 30px rgba(0, 0, 0, 0.42);
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition: transform 160ms ease, filter 160ms ease;
}

.nav-rail nav {
  display: flex;
  align-items: center;
  gap: 18px;
  align-self: flex-end;
  height: 44px;
  padding: 0 28px 0 42px;
  border: 2px solid var(--black);
  border-left: 0;
  border-radius: 0 0 8px 0;
  background:
    linear-gradient(180deg, rgba(255, 127, 34, 0.92), rgba(197, 55, 0, 0.92));
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 2px 0 rgba(255, 221, 174, 0.45),
    inset 0 -8px 12px rgba(98, 24, 0, 0.38),
    0 16px 28px rgba(0, 0, 0, 0.38);
}

.nav-rail a {
  position: relative;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 0.9rem;
}

.nav-rail nav a {
  transition: color 160ms ease, transform 160ms ease;
}

.nav-rail nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: #120500;
  transition: transform 180ms ease;
}

.nav-rail nav a:hover,
.nav-rail nav a.is-active {
  transform: translateY(-1px);
}

.nav-rail nav a.is-active::after {
  transform: scaleX(1);
}

.hero {
  aspect-ratio: 16 / 9;
  display: block;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #020405;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 55% 48%, transparent 0 54%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 24%, rgba(0, 0, 0, 0.18));
}

.hero-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #020405;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(2, 4, 5, 0.18), rgba(2, 4, 5, 0.2)),
    url("./assets/donald-hero-3d-studio.png") center / cover no-repeat;
  filter: saturate(0.95) contrast(1.04) brightness(0.68);
  transform:
    translate3d(calc(var(--hero-drift-x) * -0.32), calc(var(--hero-drift-y) * -0.32), 0)
    scale(1.04);
  transition: transform 180ms ease-out;
  will-change: transform;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.02) contrast(1.04) brightness(0.98);
  transform:
    translate3d(var(--hero-drift-x), var(--hero-drift-y), 0)
    scale(1.002);
  transition: transform 180ms ease-out;
  will-change: transform;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tech-marquees {
  position: relative;
  z-index: 2;
  --tech-marquee-row: 50px;
  --tech-marquee-logo: 23px;
  --tech-marquee-text: 14px;
  --tech-marquee-gap: 8px;
  --tech-marquee-chip-space: 20px;
  --tech-marquee-duration: 26s;
  font: 13px "Segoe UI", sans-serif;
}

.tech-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.tech-marquee-dark {
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  background: #000;
}

.tech-marquee-orange {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #fe5d00;
}

.tech-marquee-track {
  --marquee-offset: -50%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
  min-width: max-content;
  animation: tech-marquee-left var(--tech-marquee-duration) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.tech-marquee-track.is-marquee-ready {
  animation-play-state: running;
}

.tech-marquee-orange .tech-marquee-track {
  animation-name: tech-marquee-right;
}

.tech-marquee-segment {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-width: max-content;
  box-sizing: border-box;
  padding: 0;
}

.tech-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--tech-marquee-gap);
  height: var(--tech-marquee-row);
  margin: 0 var(--tech-marquee-chip-space);
  vertical-align: middle;
  transition: transform 160ms ease, filter 160ms ease;
}

.tech-chip img {
  width: auto;
  height: var(--tech-marquee-logo);
}

.tech-chip b {
  font-size: var(--tech-marquee-text);
  font-weight: 700;
  white-space: nowrap;
}

.tech-marquee-dark b {
  color: var(--orange);
}

.tech-marquee-orange b {
  color: #000;
}

@keyframes tech-marquee-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--marquee-offset), 0, 0);
  }
}

@keyframes tech-marquee-right {
  from {
    transform: translate3d(var(--marquee-offset), 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (hover: hover) {
  .tech-chip:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.38));
  }
}

.industrial-transition {
  display: none;
}

.industrial-transition img {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(156vw, 2280px);
  max-width: none;
  height: 174%;
  object-fit: cover;
  object-position: center 57%;
  transform: translate(-50%, -50%);
  filter: saturate(1.02) contrast(1.08) brightness(0.82);
  clip-path: polygon(
    0 9%,
    100% 9%,
    100% 62%,
    94% 62%,
    88% 100%,
    12% 100%,
    6% 62%,
    0 62%
  );
  filter:
    saturate(1.02)
    contrast(1.08)
    brightness(0.82)
    drop-shadow(0 28px 34px rgba(0, 0, 0, 0.72));
}

.industrial-transition::before,
.industrial-transition::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.industrial-transition::before {
  z-index: 2;
  background:
    linear-gradient(180deg, #020405 0%, rgba(2, 4, 5, 0.96) 24%, rgba(2, 4, 5, 0.66) 42%, transparent 62%);
}

.industrial-transition::after {
  z-index: 3;
  background:
    linear-gradient(90deg, #020405 0%, transparent 10%, transparent 90%, #020405 100%),
    linear-gradient(180deg, transparent 0%, transparent 58%, rgba(0, 0, 0, 0.36) 80%, transparent 100%);
}

.section {
  padding: clamp(230px, 22vw, 330px) 28px 110px;
}

.work-section,
.proof-section,
.contact-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(2, 4, 5, 0.08) 0%, rgba(2, 4, 5, 0.04) 34%, rgba(2, 4, 5, 0.22) 100%),
    url("./assets/section-studio-fill.png");
  background-size:
    100% 100%,
    cover;
  background-position:
    center,
    center bottom;
  background-repeat: no-repeat;
  background-color: #020405;
  color: var(--paper);
  overflow: clip;
}

.work-section::before,
.proof-section::before,
.contact-section::before,
.mode-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.14;
  background:
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(255, 94, 0, 0.035) 44px 45px),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(255, 255, 255, 0.02) 30px 31px);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent);
}

.work-section::after,
.proof-section::after,
.contact-section::after,
.mode-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 100%;
  height: var(--transition-cutout-height);
  min-width: 880px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("./assets/section-transition-cutout-fullmetal-topclean.png") center top / auto 100% no-repeat;
  filter:
    drop-shadow(0 7px 4px rgba(0, 0, 0, 0.86))
    drop-shadow(0 18px 13px rgba(0, 0, 0, 0.64))
    drop-shadow(0 38px 30px rgba(0, 0, 0, 0.34));
}

.section-head {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto 42px;
}

.section-intro {
  max-width: 820px;
  margin: 22px 0 0;
  color: rgba(246, 239, 231, 0.78);
  font-size: 1.18rem;
  line-height: 1.48;
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.62);
}

.contact-section > * {
  position: relative;
  z-index: 2;
}

.kicker,
.project-type {
  margin: 0 0 12px;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 0.95rem;
  color: var(--orange-hot);
}

.section h2,
.mode-copy h2,
.contact-section h2 {
  margin: 0;
  display: inline-block;
  position: relative;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 5.5rem;
  line-height: 0.88;
  color: #ff6814;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow:
    0 1px 0 rgba(255, 214, 174, 0.24),
    0 3px 0 rgba(62, 13, 0, 0.72),
    0 9px 14px rgba(0, 0, 0, 0.64);
}

.project-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1120px;
  margin: 0 auto;
}

.project-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  --spot-x: 50%;
  --spot-y: 34%;
  position: relative;
  z-index: 0;
  min-width: 0;
  aspect-ratio: 915 / 1233;
  isolation: isolate;
  transform-style: preserve-3d;
  border: 0;
  border-radius: 0;
  background-image: url("./assets/project-card-shell-cutout.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  color: var(--paper);
  box-shadow: none;
  filter:
    drop-shadow(0 9px 6px rgba(0, 0, 0, 0.74))
    drop-shadow(0 25px 22px rgba(0, 0, 0, 0.48));
  transform:
    perspective(900px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(var(--lift));
  transition: transform 180ms ease, filter 220ms ease;
  will-change: transform, filter;
  overflow: hidden;
}

.project-card > * {
  position: relative;
  z-index: 2;
}

.project-card::before,
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url("./assets/project-card-shell-cutout.png") center / 100% 100% no-repeat;
  mask: url("./assets/project-card-shell-cutout.png") center / 100% 100% no-repeat;
}

.project-card::before {
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 190, 122, 0.2), rgba(255, 94, 0, 0.08) 17%, transparent 35%),
    linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, 0.07) 50%, transparent 62%);
  mix-blend-mode: screen;
  transition: opacity 180ms ease;
}

.project-card::after {
  z-index: 3;
  inset: -18%;
  opacity: 0.68;
  background:
    linear-gradient(112deg, transparent 32%, rgba(255, 220, 178, 0.24) 44%, transparent 55%);
  transform: translateX(-125%);
  transition: transform 720ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.project-card:hover,
.project-card.is-tilting {
  --lift: -6px;
  filter:
    drop-shadow(0 11px 8px rgba(0, 0, 0, 0.78))
    drop-shadow(0 32px 30px rgba(0, 0, 0, 0.54));
}

.project-card:hover::before,
.project-card.is-tilting::before {
  opacity: 1;
}

.project-card:hover::after,
.project-card.is-tilting::after {
  transform: translateX(125%);
}

.project-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.25 / 1;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.project-media span {
  position: relative;
  z-index: 2;
  color: var(--orange-face);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 7rem;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 195, 134, 0.32),
    0 8px 12px rgba(0, 0, 0, 0.68);
}

.media-one {
  background: transparent;
}

.media-two {
  background: transparent;
}

.media-three {
  background: transparent;
}

.project-card h3,
.project-card p {
  margin-left: 36px;
  margin-right: 32px;
}

.project-card .project-type {
  margin-top: 12px;
  margin-bottom: 8px;
}

.project-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 1.72rem;
  color: var(--orange-face);
  text-shadow:
    0 1px 0 rgba(255, 190, 130, 0.28),
    0 7px 10px rgba(0, 0, 0, 0.62);
}

.project-card .project-copy {
  min-height: 0;
  margin-bottom: 24px;
  color: rgba(246, 239, 231, 0.78);
  font-size: 0.93rem;
  line-height: 1.28;
}

.mode-section {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 34px;
  align-items: stretch;
  padding: clamp(230px, 22vw, 330px) 28px 110px;
  border-top: 0;
  border-bottom: 0;
  background-image:
    linear-gradient(180deg, rgba(2, 4, 5, 0.08) 0%, rgba(2, 4, 5, 0.04) 34%, rgba(2, 4, 5, 0.22) 100%),
    url("./assets/section-studio-fill.png");
  background-size:
    100% 100%,
    cover;
  background-position:
    center,
    center bottom;
  background-repeat: no-repeat;
  background-color: #020405;
  color: var(--paper);
  overflow: clip;
}

.mode-copy,
.mode-metrics {
  position: relative;
  z-index: 2;
  max-width: 1120px;
}

.mode-copy {
  justify-self: end;
}

.mode-copy .kicker {
  color: var(--orange-hot);
}

.mode-copy p:last-child {
  max-width: 680px;
  font-size: 1.25rem;
  line-height: 1.5;
  color: rgba(246, 239, 231, 0.74);
}

.mode-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mode-metrics div {
  --tile-tilt-x: 0deg;
  --tile-tilt-y: 0deg;
  --tile-lift: 0px;
  --spot-x: 50%;
  --spot-y: 35%;
  position: relative;
  display: flex;
  min-height: 156px;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid rgba(255, 112, 28, 0.86);
  border-radius: 8px;
  padding: 18px;
  color: var(--orange);
  background:
    linear-gradient(145deg, rgba(255, 94, 0, 0.08), rgba(0, 0, 0, 0.34) 38%),
    linear-gradient(180deg, #151412, #050505);
  box-shadow:
    inset 0 1px 0 rgba(255, 189, 120, 0.32),
    0 8px 8px rgba(0, 0, 0, 0.62),
    0 24px 28px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 94, 0, 0.08);
  transform:
    perspective(760px)
    rotateX(var(--tile-tilt-x))
    rotateY(var(--tile-tilt-y))
    translateY(var(--tile-lift));
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  will-change: transform;
  overflow: hidden;
}

.mode-metrics div::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 135, 41, 0.22), transparent 36%);
  transition: opacity 180ms ease;
}

.mode-metrics div::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), transparent 28%);
  opacity: 0.45;
  pointer-events: none;
}

.mode-metrics div:hover,
.mode-metrics div.is-tilting {
  --tile-lift: -4px;
  border-color: rgba(255, 138, 47, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 160, 0.34),
    0 10px 10px rgba(0, 0, 0, 0.68),
    0 30px 32px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(255, 94, 0, 0.14);
}

.mode-metrics div:hover::before,
.mode-metrics div.is-tilting::before {
  opacity: 1;
}

.mode-metrics span {
  position: relative;
  z-index: 2;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 1.1rem;
}

.mode-metrics strong {
  position: relative;
  z-index: 2;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 2.4rem;
  text-shadow:
    0 1px 0 rgba(255, 190, 130, 0.28),
    0 7px 10px rgba(0, 0, 0, 0.62);
}

.mode-metrics small {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 18ch;
  color: rgba(246, 239, 231, 0.72);
  font-size: 0.92rem;
  line-height: 1.25;
}

.contact-section {
  padding: clamp(230px, 22vw, 330px) max(28px, calc((100vw - 1180px) / 2)) 148px;
  max-width: none;
  margin: 0;
}

.contact-section h2 {
  max-width: 980px;
}

.contact-copy {
  max-width: 680px;
  margin: 26px 0 0;
  color: rgba(246, 239, 231, 0.76);
  font-size: 1.2rem;
  line-height: 1.48;
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.62);
}

.contact-button {
  --magnet-x: 0px;
  --magnet-y: 0px;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  min-height: 68px;
  margin-top: 28px;
  padding: 0 38px;
  border: 0;
  border-radius: 999px;
  background-image: url("./assets/button-shell.png");
  background-size: 100% 100%;
  background-position: center;
  color: var(--orange);
  color: #120500;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 1.25rem;
  box-shadow:
    inset 0 2px 0 rgba(255, 224, 188, 0.52),
    inset 0 -8px 16px rgba(84, 19, 0, 0.44),
    0 7px 6px rgba(0, 0, 0, 0.7),
    0 20px 22px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 183, 116, 0.26);
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition: transform 180ms ease, box-shadow 180ms ease;
  overflow: hidden;
}

.contact-button::before {
  content: "";
  position: absolute;
  inset: -44% -24%;
  z-index: 0;
  opacity: 0.82;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 36%, rgba(255, 235, 210, 0.34) 46%, transparent 56%);
  transform: translateX(-130%);
  transition: transform 720ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.contact-button:hover,
.contact-button:focus-visible {
  transform:
    translate3d(
      calc(var(--magnet-x) - 3px),
      calc(var(--magnet-y) - 3px),
      0
    );
  box-shadow:
    inset 0 2px 0 rgba(255, 224, 188, 0.52),
    inset 0 -8px 16px rgba(84, 19, 0, 0.44),
    0 9px 8px rgba(0, 0, 0, 0.72),
    0 26px 28px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(255, 183, 116, 0.32);
}

.contact-button:hover::before,
.contact-button:focus-visible::before {
  transform: translateX(130%);
}

.reveal {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(34px) scale(0.985);
  transition:
    opacity 720ms ease,
    filter 720ms ease,
    transform 720ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.project-card.reveal {
  filter:
    blur(2px)
    drop-shadow(0 9px 6px rgba(0, 0, 0, 0.74))
    drop-shadow(0 25px 22px rgba(0, 0, 0, 0.48));
  transform:
    perspective(900px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(calc(var(--lift) + 34px))
    scale(0.985);
}

.project-card.reveal.is-visible {
  filter:
    drop-shadow(0 9px 6px rgba(0, 0, 0, 0.74))
    drop-shadow(0 25px 22px rgba(0, 0, 0, 0.48));
  transform:
    perspective(900px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(var(--lift));
}

.project-card.reveal.is-visible:hover,
.project-card.reveal.is-visible.is-tilting {
  filter:
    drop-shadow(0 11px 8px rgba(0, 0, 0, 0.78))
    drop-shadow(0 32px 30px rgba(0, 0, 0, 0.54));
}

.project-card.reveal:nth-child(2) {
  transition-delay: 80ms;
}

.project-card.reveal:nth-child(3) {
  transition-delay: 160ms;
}

.reveal h2 {
  clip-path: inset(0 0 100% 0);
}

@media (max-width: 1100px) {
  .tech-marquees {
    --tech-marquee-row: 56px;
    --tech-marquee-logo: 25px;
    --tech-marquee-text: 15px;
    --tech-marquee-gap: 7px;
    --tech-marquee-chip-space: 16px;
  }

  .section h2,
  .mode-copy h2,
  .contact-section h2 {
    font-size: 4rem;
  }

  .mode-section {
    grid-template-columns: 1fr;
  }

  .mode-copy {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
  }
}

@media (max-width: 720px) {
  .tech-marquees {
    --tech-marquee-row: 42px;
    --tech-marquee-logo: 20px;
    --tech-marquee-text: 12px;
    --tech-marquee-gap: 6px;
    --tech-marquee-chip-space: 10px;
  }

  .hero-image {
    object-position: center 36%;
  }

  .nav-rail {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .brand-mark {
    width: 54px;
    height: 54px;
    font-size: 1.2rem;
  }

  .nav-rail nav {
    flex: 1;
    justify-content: space-around;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 18px;
  }

  .nav-rail a {
    font-size: 0.72rem;
  }

  .industrial-transition {
    height: 86px;
    margin-top: -22px;
    margin-bottom: -38px;
  }

  .industrial-transition img {
    width: 180vw;
    height: 176%;
    object-position: center 58%;
  }

  .industrial-transition::before {
    background:
      linear-gradient(180deg, #020405 0%, rgba(2, 4, 5, 0.96) 28%, rgba(2, 4, 5, 0.66) 48%, transparent 68%);
  }

  .project-media span {
    font-size: 5.4rem;
  }

  .project-card h3,
  .project-card p {
    margin-left: 34px;
    margin-right: 30px;
  }

  .project-card h3 {
    font-size: 1.48rem;
  }

  .section,
  .mode-section,
  .contact-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section h2,
  .mode-copy h2,
  .contact-section h2 {
    font-size: 2.7rem;
  }

  .project-grid {
    grid-template-columns: 1fr;
    max-width: 430px;
  }

  .mode-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .tech-marquees {
    --tech-marquee-row: 40px;
    --tech-marquee-logo: 19px;
    --tech-marquee-text: 12px;
    --tech-marquee-gap: 6px;
    --tech-marquee-chip-space: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: 1ms;
  }

  .tech-marquee-track {
    animation: none;
    transform: none;
  }
}

/* ---- Intro / positioning band ---- */
.intro-band {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(78px, 9vw, 138px) 28px clamp(44px, 5vw, 78px);
  color: var(--paper);
}

.intro-band .kicker {
  color: var(--orange-hot);
}

.intro-statement {
  max-width: 18ch;
  margin: 4px 0 0;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  line-height: 0.94;
  color: #ff6814;
  text-shadow:
    0 1px 0 rgba(255, 214, 174, 0.24),
    0 3px 0 rgba(62, 13, 0, 0.72),
    0 9px 14px rgba(0, 0, 0, 0.64);
}

.intro-sub {
  max-width: 720px;
  margin: 24px 0 0;
  color: rgba(246, 239, 231, 0.82);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
}

.intro-links,
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 30px;
}

.intro-links a,
.contact-links a {
  position: relative;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--orange-hot);
  padding-bottom: 6px;
}

.intro-links a::after,
.contact-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}

.intro-links a:hover::after,
.contact-links a:hover::after {
  transform: scaleX(1);
}

.contact-links {
  position: relative;
  z-index: 2;
}

/* ---- Proof / selected work grid ---- */
.proof-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}

.proof-item {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 196px;
  padding: 20px 20px 18px;
  border: 2px solid rgba(255, 112, 28, 0.5);
  border-radius: 10px;
  background:
    linear-gradient(150deg, rgba(255, 94, 0, 0.07), rgba(0, 0, 0, 0.36) 42%),
    linear-gradient(180deg, #151412, #050505);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgba(255, 189, 120, 0.22),
    0 10px 14px rgba(0, 0, 0, 0.5),
    0 24px 30px rgba(0, 0, 0, 0.42);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  will-change: transform;
}

.proof-item:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 138, 47, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 160, 0.3),
    0 14px 18px rgba(0, 0, 0, 0.6),
    0 32px 38px rgba(0, 0, 0, 0.5);
}

.proof-status {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #0a0500;
}

.status-live {
  background: #ff7a18;
  box-shadow: 0 0 14px rgba(255, 122, 24, 0.5);
}

.status-shipped {
  background: #ff5e00;
}

.status-progress {
  color: #ffb070;
  background: transparent;
  border: 1px solid rgba(255, 138, 47, 0.7);
}

.status-archived {
  color: rgba(246, 239, 231, 0.5);
  background: transparent;
  border: 1px solid rgba(246, 239, 231, 0.25);
}

.proof-label {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 1.18rem;
  line-height: 1.05;
  color: var(--orange-face);
  text-shadow:
    0 1px 0 rgba(255, 190, 130, 0.24),
    0 6px 9px rgba(0, 0, 0, 0.6);
}

.proof-copy {
  flex: 1;
  color: rgba(246, 239, 231, 0.76);
  font-size: 0.92rem;
  line-height: 1.36;
}

.proof-open {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--orange-hot);
  opacity: 0.85;
  transition: transform 180ms ease;
}

.proof-item:hover .proof-open {
  transform: translateX(4px);
}

.proof-grid .proof-item.reveal:nth-child(3n + 2) {
  transition-delay: 70ms;
}

.proof-grid .proof-item.reveal:nth-child(3n + 3) {
  transition-delay: 140ms;
}

@media (max-width: 1100px) {
  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .proof-grid {
    grid-template-columns: 1fr;
  }

  .intro-statement {
    max-width: none;
  }
}

/* ---- Featured project cards (image-free, in the metal frame) ---- */
.project-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 8%, 74px) 0;
}

.project-card .proof-status {
  margin: 0 0 16px 36px;
  align-self: flex-start;
}

.project-card h3 {
  text-shadow:
    0 1px 0 rgba(255, 190, 130, 0.28),
    0 3px 10px rgba(0, 0, 0, 0.82);
}

.project-card .project-copy {
  color: rgba(248, 244, 238, 0.95);
  font-size: 0.95rem;
  line-height: 1.42;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.85);
}

.project-card .proof-open {
  margin: 22px 0 0 36px;
  opacity: 0.9;
}

.project-card:hover .proof-open {
  transform: translateX(4px);
}

/* ---- Marquees serve as the transition INTO the STACK section ---- */
/* Drop the metal cutout divider on STACK; the marquees above it are the divider now. */
.mode-section::after {
  display: none;
}

.mode-section {
  padding-top: clamp(76px, 8vw, 132px);
}

/* ---- Intro stat row (only the stats that matter) ---- */
.intro-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4.5vw, 60px);
  margin-top: 34px;
}

.intro-stats > div {
  display: flex;
  flex-direction: column;
}

.intro-stats strong {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1;
  color: #ff6814;
  text-shadow:
    0 2px 0 rgba(62, 13, 0, 0.7),
    0 6px 12px rgba(0, 0, 0, 0.5);
}

.intro-stats span {
  margin-top: 7px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 239, 231, 0.62);
}

/* =====================================================================
   READABILITY PASS, one orange, no glow, readable small labels, aligned
   ===================================================================== */

/* 1) ONE orange for ALL orange text (= the card heading color). No lighter shades. */
:root {
  --orange-hot: #ff6814;  /* was #ff7a18, unified to the card color */
}

.mode-metrics div {
  color: #ff6814;          /* tile text was #ff5e00 (var(--orange)) */
}

.kicker,
.project-type,
.section h2,
.mode-copy h2,
.contact-section h2,
.project-card h3,
.project-card .project-type,
.mode-metrics span,
.mode-metrics strong,
.intro-statement,
.intro-stats strong,
.proof-label,
.proof-open,
.intro-links a,
.contact-links a {
  color: #ff6814;
}

/* 3) Small uppercase labels: lighter weight (Archivo, not Black) + tracking so they
      stay crisp at small sizes instead of clumping. */
.kicker,
.project-type,
.proof-status,
.proof-open,
.nav-rail a,
.intro-links a,
.contact-links a,
.mode-metrics span,
.intro-stats span {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* 4) ALIGNMENT, top-align card + tile content so rows line up across the grid. */
.project-card {
  justify-content: flex-start;
}

.mode-metrics div {
  justify-content: flex-start;
  gap: 10px;
}

/* 5) Card text was spilling onto the metal frame's right bevel, widen the safe inset. */
.project-card h3,
.project-card p {
  margin-left: 48px;
  margin-right: 52px;
}

.project-card .proof-status,
.project-card .proof-open {
  margin-left: 48px;
}

/* 6) Two-zone cards: ORANGE top group in the upper screen; WHITE bottom group pinned
   into the lower plate. The card art's metal seam sits at ~57%, pin white just below it. */
.project-card {
  justify-content: flex-start;
  padding: clamp(34px, 6.5%, 58px) 0 0;
}

.card-top,
.card-bottom {
  display: flex;
  flex-direction: column;
}

.card-bottom {
  position: absolute;
  left: 0;
  right: 0;
  top: 60%;
}

.project-card .project-copy {
  margin-top: 0;
  margin-bottom: 12px;
}

.project-card .proof-open {
  margin: 0 0 0 48px;
  color: rgba(246, 239, 231, 0.85);
}

/* =====================================================================
   PREMIUM VISUAL SYSTEM PASS
   ===================================================================== */

:root {
  --orange: #ff6814;
  --orange-hot: #ff7a2b;
  --ember: #cc4f16;
  --black: #030405;
  --studio: #060808;
  --steel: #131717;
  --paper: #f7efe7;
  --paper-soft: rgba(247, 239, 231, 0.78);
  --paper-faint: rgba(247, 239, 231, 0.56);
  --line: rgba(255, 126, 43, 0.22);
  --panel: rgba(12, 15, 15, 0.78);
  --panel-strong: rgba(7, 9, 9, 0.9);
  --shadow-deep: 0 34px 90px rgba(0, 0, 0, 0.58);
}

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

body {
  background:
    radial-gradient(circle at 78% 10%, rgba(255, 104, 20, 0.12), transparent 32rem),
    linear-gradient(180deg, #030405 0%, #060707 48%, #030405 100%);
  color: var(--paper);
  font-family: "Archivo", "Helvetica Neue", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 4, 5, 0.2), rgba(3, 4, 5, 0.92)),
    url("./assets/generated/hero-lab-v1.png") center top / cover no-repeat;
  opacity: 0.18;
}

.grain {
  opacity: 0.11;
  mix-blend-mode: soft-light;
  background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.84" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.58"/%3E%3C/svg%3E');
}

.nav-rail {
  top: max(18px, env(safe-area-inset-top));
  bottom: auto;
  left: 50%;
  min-height: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: var(--paper);
  background:
    linear-gradient(180deg, rgba(18, 21, 21, 0.78), rgba(7, 8, 8, 0.72)),
    rgba(3, 4, 5, 0.74);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.1);
  filter: none;
  transform: translateX(-50%);
}

.brand-mark {
  width: 42px;
  height: 42px;
  margin-right: 4px;
  border: 1px solid rgba(255, 104, 20, 0.5);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 214, 178, 0.48), transparent 28%),
    linear-gradient(145deg, #ff8b47 0%, #ff6814 42%, #6f1e07 100%);
  color: #090909;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 0.88rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 204, 0.45),
    0 10px 26px rgba(255, 104, 20, 0.16);
}

.nav-rail nav {
  align-self: center;
  height: 42px;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.nav-rail a {
  letter-spacing: 0;
}

.nav-rail nav a {
  display: grid;
  place-items: center;
  height: 42px;
  padding: 0 13px;
  border-radius: 999px;
  color: rgba(247, 239, 231, 0.66);
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
}

.nav-rail nav a::after {
  display: none;
}

.nav-rail nav a:hover,
.nav-rail nav a.is-active {
  color: var(--paper);
  background: rgba(255, 104, 20, 0.16);
  transform: none;
}

.hero {
  position: relative;
  display: flex;
  min-height: 92svh;
  aspect-ratio: auto;
  align-items: center;
  padding: 108px max(28px, calc((100vw - 1180px) / 2)) 96px;
  overflow: hidden;
  background: #020303;
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 104, 20, 0.52), transparent);
}

.hero::after {
  z-index: 2;
  background:
    radial-gradient(ellipse at 70% 55%, transparent 0 34%, rgba(3, 4, 5, 0.42) 66%, rgba(3, 4, 5, 0.9) 100%),
    linear-gradient(90deg, rgba(3, 4, 5, 0.94) 0%, rgba(3, 4, 5, 0.72) 38%, rgba(3, 4, 5, 0.16) 72%, rgba(3, 4, 5, 0.58) 100%),
    linear-gradient(180deg, rgba(3, 4, 5, 0.55), transparent 32%, rgba(3, 4, 5, 0.86));
}

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  background: #020303;
}

.hero-stage::before {
  inset: -2%;
  background:
    linear-gradient(180deg, rgba(3, 4, 5, 0.08), rgba(3, 4, 5, 0.36)),
    url("./assets/generated/hero-lab-v1.png") 63% center / cover no-repeat;
  filter: saturate(1.02) contrast(1.05) brightness(0.82);
  transform:
    translate3d(calc(var(--hero-drift-x) * -0.55), calc(var(--hero-drift-y) * -0.55), 0)
    scale(1.04);
}

.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 104, 20, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: radial-gradient(circle at 76% 48%, #000, transparent 52%);
  opacity: 0.42;
  transform: translate3d(calc(var(--hero-drift-x) * -0.2), calc(var(--hero-drift-y) * -0.2), 0);
}

.hero-content {
  position: relative;
  z-index: 4;
  max-width: 710px;
  color: var(--paper);
}

.hero .kicker,
.section .kicker,
.mode-copy .kicker,
.contact-section .kicker {
  margin-bottom: 14px;
  color: var(--orange-hot);
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: none;
}

.hero h1 {
  margin: 0;
  color: var(--paper);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 5.2rem;
  line-height: 0.92;
  letter-spacing: 0;
  text-shadow: 0 18px 54px rgba(0, 0, 0, 0.64);
}

.hero-sub {
  max-width: 620px;
  margin: 24px 0 0;
  color: var(--paper-soft);
  font-size: 1.18rem;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.hero-actions a,
.contact-button {
  display: inline-grid;
  min-height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 104, 20, 0.28);
  border-radius: 999px;
  padding: 0 18px;
  color: var(--paper);
  background:
    linear-gradient(180deg, rgba(255, 104, 20, 0.18), rgba(255, 104, 20, 0.05)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 34px rgba(0, 0, 0, 0.28);
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.hero-actions a:first-child,
.contact-button {
  border-color: rgba(255, 104, 20, 0.62);
  color: #100807;
  background: linear-gradient(180deg, #ff8a42, #ff6814 54%, #b83d10);
}

.hero-actions a:hover,
.contact-button:hover,
.contact-button:focus-visible {
  border-color: rgba(255, 158, 98, 0.82);
  transform: translateY(-2px);
}

.intro-band {
  max-width: none;
  margin: 0;
  padding: 24px max(28px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(90deg, rgba(255, 104, 20, 0.08), transparent 30%, rgba(255, 104, 20, 0.06)),
    rgba(3, 4, 5, 0.96);
}

.intro-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
}

.intro-stats > div {
  min-height: 88px;
  justify-content: center;
  border-left: 1px solid rgba(255, 104, 20, 0.28);
  padding: 0 0 0 18px;
}

.intro-stats strong {
  color: var(--paper);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
}

.intro-stats span {
  max-width: 18ch;
  margin-top: 8px;
  color: var(--paper-faint);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.section,
.mode-section,
.contact-section {
  padding: 112px max(28px, calc((100vw - 1180px) / 2));
}

.work-section,
.proof-section,
.contact-section,
.mode-section {
  background-image:
    radial-gradient(circle at 12% 4%, rgba(255, 104, 20, 0.12), transparent 30rem),
    linear-gradient(180deg, rgba(4, 5, 5, 0.86), rgba(4, 5, 5, 0.92)),
    url("./assets/generated/material-panel-v1.png");
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
}

.work-section::before,
.proof-section::before,
.contact-section::before,
.mode-section::before {
  opacity: 0.18;
  background:
    linear-gradient(90deg, rgba(255, 104, 20, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 92px 92px;
}

.work-section::after,
.proof-section::after,
.contact-section::after,
.mode-section::after {
  display: none;
}

.section-head,
.project-grid,
.proof-grid {
  max-width: 1180px;
}

.section-head {
  margin-bottom: 34px;
}

.section h2,
.mode-copy h2,
.contact-section h2 {
  display: block;
  max-width: 980px;
  color: var(--paper);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 4.25rem;
  line-height: 0.94;
  letter-spacing: 0;
  text-shadow: 0 20px 50px rgba(0, 0, 0, 0.56);
}

.section-intro,
.mode-copy p:last-child,
.contact-copy {
  max-width: 760px;
  color: var(--paper-soft);
  font-size: 1.08rem;
  line-height: 1.58;
  text-shadow: none;
}

.project-grid {
  gap: 18px;
}

.project-card {
  min-height: 470px;
  aspect-ratio: auto;
  justify-content: space-between;
  border: 1px solid rgba(255, 104, 20, 0.22);
  border-radius: 8px;
  padding: 24px;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 104, 20, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(12, 15, 15, 0.68), rgba(4, 5, 5, 0.92)),
    url("./assets/generated/material-panel-v1.png") center / cover no-repeat;
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    var(--shadow-deep);
  filter: none;
}

.project-card::before {
  inset: 0;
  border-radius: inherit;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 22%),
    linear-gradient(90deg, rgba(255, 104, 20, 0.18), transparent 32%, transparent 68%, rgba(255, 104, 20, 0.12));
  mix-blend-mode: screen;
  mask: none;
  -webkit-mask: none;
}

.project-card::after {
  inset: 0;
  border-radius: inherit;
  opacity: 0.34;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 238, 220, 0.3) 48%, transparent 58%);
  mask: none;
  -webkit-mask: none;
}

.project-card:hover,
.project-card.is-tilting {
  --lift: -5px;
  border-color: rgba(255, 104, 20, 0.48);
  filter: none;
}

.project-card h3,
.project-card p,
.project-card .proof-status,
.project-card .proof-open {
  margin-left: 0;
  margin-right: 0;
}

.card-top,
.card-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.card-bottom {
  position: static;
  margin-top: 24px;
}

.project-card .proof-status {
  margin-bottom: 22px;
}

.project-card .project-type {
  margin-top: 0;
  color: var(--orange-hot);
}

.project-card h3 {
  max-width: 12ch;
  margin-bottom: 0;
  color: var(--paper);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
}

.project-card .project-copy {
  margin: 0;
  color: var(--paper-soft);
  font-size: 1rem;
  line-height: 1.48;
  text-shadow: none;
}

.project-card .proof-open {
  margin: 18px 0 0;
  color: var(--orange-hot);
}

.proof-status {
  border-radius: 999px;
  padding: 5px 10px;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
}

.status-shipped,
.status-live {
  background: var(--orange);
}

.toolchain-strip {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px max(28px, calc((100vw - 1180px) / 2));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(3, 4, 5, 0.94);
}

.toolchain-strip span {
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 104, 20, 0.18);
  border-radius: 999px;
  padding: 0 14px;
  color: rgba(247, 239, 231, 0.76);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.86rem;
  font-weight: 800;
}

.mode-section {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 42px;
  padding-top: 112px;
}

.mode-copy {
  justify-self: start;
}

.mode-metrics {
  gap: 14px;
}

.mode-metrics div,
.proof-item {
  border: 1px solid rgba(255, 104, 20, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(14, 16, 16, 0.82), rgba(5, 6, 6, 0.92)),
    rgba(255, 255, 255, 0.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 54px rgba(0, 0, 0, 0.42);
}

.mode-metrics strong,
.proof-label {
  color: var(--paper);
  font-size: 1.68rem;
  line-height: 1.04;
  letter-spacing: 0;
  text-shadow: none;
}

.mode-metrics span,
.proof-open,
.intro-links a,
.contact-links a {
  color: var(--orange-hot);
  letter-spacing: 0;
  text-shadow: none;
}

.mode-metrics small,
.proof-copy {
  color: var(--paper-soft);
  font-size: 0.96rem;
  line-height: 1.45;
}

.proof-grid {
  gap: 14px;
}

.proof-item {
  min-height: 212px;
  padding: 20px;
}

.proof-item:hover,
.mode-metrics div:hover,
.mode-metrics div.is-tilting {
  border-color: rgba(255, 104, 20, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 30px 70px rgba(0, 0, 0, 0.5);
}

.contact-button {
  min-height: 54px;
  margin-top: 28px;
  background-image: linear-gradient(180deg, #ff8a42, #ff6814 54%, #b83d10);
  color: #100807;
  font-size: 0.9rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 204, 0.35),
    0 18px 44px rgba(255, 104, 20, 0.16),
    0 22px 70px rgba(0, 0, 0, 0.42);
}

.contact-button::before {
  opacity: 0.42;
}

.kicker,
.project-type,
.proof-status,
.proof-open,
.nav-rail a,
.intro-links a,
.contact-links a,
.mode-metrics span,
.intro-stats span {
  letter-spacing: 0;
}

.reveal {
  filter: blur(1px);
  transform: translateY(22px);
}

.reveal.is-visible {
  filter: blur(0);
}

@media (max-width: 1100px) {
  .hero h1 {
    font-size: 4.3rem;
  }

  .section h2,
  .mode-copy h2,
  .contact-section h2 {
    font-size: 3.55rem;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 88svh;
  }

  .project-card {
    min-height: 390px;
  }
}

@media (max-width: 720px) {
  .nav-rail {
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
    left: 10px;
    transform: none;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .nav-rail nav {
    flex: 1;
    height: 40px;
    justify-content: space-between;
    gap: 2px;
  }

  .nav-rail nav a {
    height: 40px;
    padding: 0 8px;
    font-size: 0.7rem;
  }

  .hero {
    min-height: 94svh;
    align-items: flex-end;
    padding: 96px 18px 64px;
  }

  .hero-stage::before {
    background-position: 68% center;
    filter: saturate(1.02) contrast(1.05) brightness(0.7);
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(3, 4, 5, 0.18), rgba(3, 4, 5, 0.54) 42%, rgba(3, 4, 5, 0.96) 100%),
      linear-gradient(90deg, rgba(3, 4, 5, 0.84), rgba(3, 4, 5, 0.4));
  }

  .hero h1 {
    font-size: 3rem;
    line-height: 0.96;
  }

  .hero-sub {
    font-size: 1.02rem;
  }

  .hero-actions a {
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.76rem;
  }

  .intro-band,
  .section,
  .mode-section,
  .contact-section,
  .toolchain-strip {
    padding-left: 18px;
    padding-right: 18px;
  }

  .intro-stats {
    grid-template-columns: 1fr;
  }

  .intro-stats > div {
    min-height: 70px;
  }

  .section,
  .mode-section,
  .contact-section {
    padding-top: 82px;
    padding-bottom: 82px;
  }

  .section h2,
  .mode-copy h2,
  .contact-section h2 {
    font-size: 2.55rem;
    line-height: 0.98;
  }

  .project-card {
    min-height: 360px;
  }

  .project-card h3 {
    max-width: none;
    font-size: 1.82rem;
  }

  .mode-section {
    grid-template-columns: 1fr;
  }
}

/* Visual QA pass 1 corrections */
.work-section,
.proof-section,
.contact-section,
.mode-section {
  background-image:
    radial-gradient(circle at 14% 6%, rgba(255, 104, 20, 0.1), transparent 28rem),
    linear-gradient(180deg, rgba(4, 5, 5, 0.94), rgba(4, 5, 5, 0.98)),
    url("./assets/generated/material-panel-v1.png");
}

.section,
.mode-section,
.contact-section {
  padding-top: 124px;
  padding-bottom: 124px;
}

.project-card {
  min-height: 400px;
  justify-content: flex-start;
  gap: 34px;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 104, 20, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(12, 15, 15, 0.9), rgba(4, 5, 5, 0.96)),
    url("./assets/generated/material-panel-v1.png") center / cover no-repeat;
}

.card-bottom {
  margin-top: 0;
}

.project-card .proof-status {
  margin-bottom: 20px;
}

.project-card h3 {
  font-size: 1.86rem;
}

.project-card .project-copy {
  max-width: 28rem;
}

@media (max-width: 900px) {
  .project-card {
    min-height: 360px;
  }
}

@media (max-width: 720px) {
  .section,
  .mode-section,
  .contact-section {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .project-card {
    min-height: auto;
    gap: 28px;
  }
}

/* =====================================================================
   AWARD SWING, cinematic command system
   ===================================================================== */

:root {
  --v3-black: #020303;
  --v3-ink: #080a0a;
  --v3-panel: rgba(7, 9, 9, 0.72);
  --v3-paper: #fff5eb;
  --v3-muted: rgba(255, 245, 235, 0.68);
  --v3-faint: rgba(255, 245, 235, 0.42);
  --v3-orange: #ff6a18;
  --v3-orange-hot: #ff8f4a;
  --v3-line: rgba(255, 106, 24, 0.26);
  --v3-glass: rgba(255, 255, 255, 0.07);
  --v3-shadow: 0 44px 110px rgba(0, 0, 0, 0.72);
}

body {
  background:
    radial-gradient(circle at 74% 8%, rgba(255, 106, 24, 0.13), transparent 34rem),
    linear-gradient(180deg, #020303 0%, #060606 44%, #020303 100%);
  color: var(--v3-paper);
  font-synthesis: none;
}

body::before {
  background:
    linear-gradient(180deg, rgba(2, 3, 3, 0.18), rgba(2, 3, 3, 0.94)),
    url("./assets/generated/hero-command-core-v2.png") center top / cover no-repeat;
  opacity: 0.16;
}

.nav-rail {
  top: max(18px, env(safe-area-inset-top));
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(20, 23, 23, 0.7), rgba(5, 6, 6, 0.76)),
    rgba(2, 3, 3, 0.62);
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-rail nav a {
  color: rgba(255, 245, 235, 0.68);
}

.nav-rail nav a:hover,
.nav-rail nav a.is-active {
  color: #fff7ef;
  background: rgba(255, 106, 24, 0.18);
}

.hero {
  min-height: 100svh;
  align-items: center;
  padding:
    clamp(102px, 10vh, 142px)
    max(26px, calc((100vw - 1240px) / 2))
    clamp(88px, 11vh, 132px);
}

.hero::after {
  z-index: 3;
  background:
    radial-gradient(circle at var(--hero-spot-x, 68%) var(--hero-spot-y, 54%), rgba(255, 106, 24, 0.13), transparent 22rem),
    linear-gradient(90deg, rgba(2, 3, 3, 0.98) 0%, rgba(2, 3, 3, 0.84) 28%, rgba(2, 3, 3, 0.24) 62%, rgba(2, 3, 3, 0.72) 100%),
    linear-gradient(180deg, rgba(2, 3, 3, 0.66), rgba(2, 3, 3, 0.1) 42%, rgba(2, 3, 3, 0.96));
}

.hero-stage {
  background: #020303;
}

.hero-stage::before {
  background:
    linear-gradient(180deg, rgba(2, 3, 3, 0.04), rgba(2, 3, 3, 0.3)),
    url("./assets/generated/hero-command-core-v2.png") 64% center / cover no-repeat;
  filter: saturate(1.08) contrast(1.08) brightness(0.74);
  transform:
    translate3d(calc(var(--hero-drift-x) * -0.65), calc(var(--hero-drift-y) * -0.65), 0)
    scale(1.045);
}

.hero-content {
  max-width: 780px;
  transform: translateY(-2vh);
}

.hero .kicker {
  color: var(--v3-orange-hot);
  font-size: clamp(0.78rem, 1vw, 0.95rem);
}

.hero h1 {
  max-width: 8.6ch;
  color: var(--v3-paper);
  font-size: clamp(4.3rem, 8.5vw, 8.6rem);
  line-height: 0.79;
  text-wrap: balance;
  letter-spacing: -0.015em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 90px rgba(0, 0, 0, 0.9);
}

.hero-sub {
  max-width: 650px;
  color: rgba(255, 245, 235, 0.76);
  font-size: clamp(1.05rem, 1.55vw, 1.32rem);
  line-height: 1.48;
}

.hero-actions {
  gap: 12px;
  margin-top: 34px;
}

.hero-actions a,
.contact-button {
  min-height: 52px;
  border-color: rgba(255, 106, 24, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 106, 24, 0.16), rgba(255, 106, 24, 0.055)),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 22px 48px rgba(0, 0, 0, 0.35);
}

.hero-actions a:first-child,
.contact-button {
  color: #120706;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 236, 218, 0.44), transparent 26%),
    linear-gradient(180deg, #ff9655, #ff6a18 52%, #a9310a);
}

.hero-telemetry {
  position: absolute;
  right: max(28px, calc((100vw - 1240px) / 2));
  bottom: clamp(34px, 6vh, 72px);
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  gap: 1px;
  width: min(520px, calc(100vw - 56px));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(4, 5, 5, 0.54);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(14px) saturate(1.1);
}

.hero-telemetry div {
  padding: 15px 16px 14px;
  background: rgba(2, 3, 3, 0.38);
}

.hero-telemetry span,
.hero-telemetry strong {
  display: block;
}

.hero-telemetry span {
  color: var(--v3-paper);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 1.35rem;
  line-height: 1;
}

.hero-telemetry strong {
  margin-top: 7px;
  color: rgba(255, 245, 235, 0.58);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.intro-band {
  display: none;
}

.section,
.mode-section,
.contact-section {
  padding:
    clamp(104px, 10vw, 156px)
    max(26px, calc((100vw - 1240px) / 2));
}

.work-section,
.proof-section,
.contact-section,
.mode-section {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 106, 24, 0.11), transparent 30rem),
    linear-gradient(180deg, rgba(2, 3, 3, 0.94), rgba(2, 3, 3, 0.99)),
    #020303;
}

.section h2,
.mode-copy h2,
.contact-section h2 {
  max-width: 1040px;
  color: var(--v3-paper);
  font-size: clamp(3.1rem, 6.2vw, 7rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
}

.section-intro,
.mode-copy p:last-child,
.contact-copy {
  color: rgba(255, 245, 235, 0.72);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.56;
}

.project-grid {
  gap: 18px;
  max-width: 1240px;
}

.project-card {
  min-height: 620px;
  display: flex;
  justify-content: flex-end;
  gap: 0;
  padding: 24px;
  border: 1px solid rgba(255, 106, 24, 0.2);
  border-radius: 10px;
  background: #050606;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 36px 92px rgba(0, 0, 0, 0.54);
  overflow: hidden;
}

.project-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}

.project-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  filter: saturate(1.04) contrast(1.08) brightness(0.78);
  transform:
    translate3d(calc(var(--spot-x, 50%) * -0.025 + 1.25%), calc(var(--spot-y, 50%) * -0.018 + 0.9%), 0)
    scale(1.08);
  transition: transform 520ms cubic-bezier(0.18, 0.72, 0.2, 1), filter 260ms ease;
}

.project-card::before {
  z-index: 1;
  opacity: 1;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 106, 24, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(2, 3, 3, 0.14), rgba(2, 3, 3, 0.4) 34%, rgba(2, 3, 3, 0.94) 72%),
    linear-gradient(90deg, rgba(2, 3, 3, 0.72), transparent 60%);
  mix-blend-mode: normal;
}

.project-card::after {
  z-index: 2;
  inset: 0;
  opacity: 0.48;
  background:
    linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 48%, transparent 58%);
  transform: translateX(-120%);
  transition: transform 900ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.project-card:hover .project-visual img,
.project-card.is-tilting .project-visual img {
  filter: saturate(1.08) contrast(1.12) brightness(0.88);
  transform:
    translate3d(calc(var(--spot-x, 50%) * -0.035 + 1.75%), calc(var(--spot-y, 50%) * -0.024 + 1.2%), 0)
    scale(1.12);
}

.project-card:hover::after,
.project-card.is-tilting::after {
  transform: translateX(120%);
}

.card-top,
.card-bottom {
  z-index: 3;
}

.card-top {
  margin-bottom: auto;
}

.card-bottom {
  width: 100%;
  margin-top: 38px;
}

.project-card .proof-status {
  margin-bottom: 16px;
}

.project-card .project-type {
  margin-bottom: 10px;
  color: var(--v3-orange-hot);
}

.project-card h3 {
  max-width: 11ch;
  color: var(--v3-paper);
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: 0.94;
  text-shadow: 0 22px 54px rgba(0, 0, 0, 0.72);
}

.project-card .project-copy {
  max-width: 30rem;
  color: rgba(255, 245, 235, 0.78);
  font-size: 1rem;
  line-height: 1.47;
}

.project-card .proof-open {
  color: var(--v3-orange-hot);
}

.toolchain-strip {
  justify-content: center;
  background:
    linear-gradient(90deg, transparent, rgba(255, 106, 24, 0.06), transparent),
    rgba(2, 3, 3, 0.96);
}

.mode-metrics div,
.proof-item {
  border-color: rgba(255, 106, 24, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(4, 5, 5, 0.78);
  backdrop-filter: blur(10px);
}

.mode-section {
  min-height: 88svh;
  align-items: center;
}

.mode-metrics div {
  min-height: 202px;
  padding: 22px;
}

.proof-section {
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 106, 24, 0.11), transparent 30rem),
    linear-gradient(180deg, rgba(2, 3, 3, 0.98), rgba(2, 3, 3, 0.96)),
    url("./assets/generated/hero-command-core-v2.png") center top / cover no-repeat;
  background-attachment: fixed;
}

.proof-grid {
  counter-reset: proof;
  gap: 12px;
}

.proof-item {
  counter-increment: proof;
  position: relative;
  min-height: 224px;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 106, 24, 0.1), transparent 14rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    rgba(3, 4, 4, 0.84);
}

.proof-item::before {
  content: counter(proof, decimal-leading-zero);
  position: absolute;
  right: 18px;
  top: 15px;
  color: rgba(255, 245, 235, 0.09);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 4.2rem;
  line-height: 1;
  pointer-events: none;
}

.proof-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 106, 24, 0.82), transparent 74%);
  transform: scaleX(0.28);
  transform-origin: left center;
  transition: transform 240ms ease;
}

.proof-item:hover::after {
  transform: scaleX(1);
}

.proof-label,
.proof-copy,
.proof-open,
.proof-status {
  position: relative;
  z-index: 1;
}

.contact-section {
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 74% 44%, rgba(255, 106, 24, 0.16), transparent 26rem),
    linear-gradient(90deg, rgba(2, 3, 3, 0.98), rgba(2, 3, 3, 0.78) 54%, rgba(2, 3, 3, 0.95)),
    url("./assets/generated/hero-command-core-v2.png") 70% center / cover no-repeat;
}

.contact-section h2 {
  max-width: 10ch;
}

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

.contact-section .contact-button {
  align-self: flex-start;
  width: auto;
  min-width: min(420px, 100%);
  padding-inline: 34px;
}

@media (max-width: 1100px) {
  .hero h1 {
    font-size: clamp(3.7rem, 9.4vw, 6.2rem);
  }

  .hero-telemetry {
    left: max(26px, calc((100vw - 1240px) / 2));
    right: auto;
  }

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

  .project-card {
    min-height: 560px;
  }
}

@media (max-width: 720px) {
  .hero {
    min-height: 100svh;
    padding: 92px 18px 122px;
  }

  .hero-stage::before {
    background-position: 70% center;
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(2, 3, 3, 0.1), rgba(2, 3, 3, 0.58) 38%, rgba(2, 3, 3, 0.98) 100%),
      linear-gradient(90deg, rgba(2, 3, 3, 0.9), rgba(2, 3, 3, 0.44));
  }

  .hero-content {
    transform: none;
  }

  .hero h1 {
    max-width: 8ch;
    font-size: clamp(3.45rem, 15vw, 4.45rem);
    line-height: 0.82;
  }

  .hero-sub {
    font-size: 1rem;
  }

  .hero-telemetry {
    right: 18px;
    bottom: 16px;
    left: 18px;
    width: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-telemetry div {
    padding: 12px 10px;
  }

  .hero-telemetry span {
    font-size: 1rem;
  }

  .hero-telemetry strong {
    font-size: 0.62rem;
  }

  .section,
  .mode-section,
  .contact-section {
    padding: 88px 18px;
  }

  .section h2,
  .mode-copy h2,
  .contact-section h2 {
    font-size: clamp(2.75rem, 14vw, 4.1rem);
  }

  .project-card {
    min-height: 560px;
    padding: 20px;
  }

  .project-card h3 {
    font-size: 2.35rem;
  }

  .project-card .project-copy {
    font-size: 0.96rem;
  }

  .mode-section {
    min-height: auto;
  }

  .mode-metrics div {
    min-height: 170px;
  }

  .proof-section {
    background-attachment: scroll;
  }

  .proof-item::before {
    font-size: 3.1rem;
  }

  .contact-section {
    min-height: 82svh;
  }

  .contact-section h2 {
    max-width: 9ch;
  }

  .contact-section .contact-button {
    width: 100%;
    min-width: 0;
  }
}

/* =====================================================================
   STILL PHOTO REALISM PASS - no motion layer, no dark cover-up
   ===================================================================== */

:root {
  --still-ink: #101111;
  --still-muted: rgba(16, 17, 17, 0.76);
  --still-line: rgba(16, 17, 17, 0.12);
  --still-page: #f0f2ef;
  --still-paper: #ffffff;
  --still-orange: #f05a14;
  --still-orange-dark: #9d2b08;
}

*,
*::before,
*::after {
  animation: none;
  scroll-behavior: auto;
  transition: none;
  backdrop-filter: none;
  filter: none;
  letter-spacing: 0;
  will-change: auto;
}

html {
  scroll-behavior: auto;
  background: var(--still-page);
}

body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(240, 242, 239, 0.94)),
    var(--still-page);
  color: var(--still-ink);
}

body::before,
.industrial-transition {
  display: none;
}

.grain {
  opacity: 0.035;
  mix-blend-mode: multiply;
}

.reveal,
.project-card.reveal,
.reveal.is-visible,
.project-card.reveal.is-visible,
.reveal h2,
.reveal.is-visible h2 {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: none;
}

/* Tasteful scroll reveal, only engaged when main.js adds `reveal-on`
   (motion is welcome + IntersectionObserver present). Higher specificity than
   the force-visible fallback above, so content stays visible for no-JS and
   reduced-motion users and can never get stranded hidden. */
html.reveal-on .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(1px);
}

html.reveal-on .project-card.reveal:not(.is-visible) {
  transform: translateY(34px) scale(0.985);
}

html.reveal-on .reveal:not(.is-visible) h2 {
  clip-path: inset(0 0 100% 0);
}

.nav-rail {
  top: max(18px, env(safe-area-inset-top));
  bottom: auto;
  left: max(18px, calc((100vw - 1240px) / 2));
  right: auto;
  min-height: 48px;
  max-width: calc(100vw - 36px);
  color: var(--still-ink);
  filter: none;
  border: 1px solid rgba(16, 17, 17, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 44px rgba(16, 17, 17, 0.12);
  overflow: hidden;
  transform: none;
}

.brand-mark {
  width: 54px;
  height: 54px;
  margin-right: 0;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background:
    linear-gradient(145deg, #ff8d47, var(--still-orange) 52%, var(--still-orange-dark));
  box-shadow: none;
  transform: none;
}

.nav-rail nav {
  min-width: 0;
  align-self: center;
  height: 54px;
  gap: 7px;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.nav-rail nav a {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 78px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  color: rgba(16, 17, 17, 0.56);
  font-size: 0.76rem;
  line-height: 1;
  transform: none;
}

.nav-rail nav a::after {
  display: none;
}

.nav-rail nav a:hover,
.nav-rail nav a.is-active {
  color: var(--still-ink);
  background: rgba(240, 90, 20, 0.12);
  transform: none;
}

.hero {
  min-height: 100svh;
  aspect-ratio: auto;
  display: grid;
  align-items: center;
  padding:
    112px
    max(28px, calc((100vw - 1240px) / 2))
    88px;
  color: var(--still-ink);
  background: #ecefeb;
}

.hero-stage {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: #ecefeb;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/generated/hero-avatar-pose-c-v1.jpg") 74% center / cover no-repeat;
  filter: none;
  transform: none;
}

.hero-stage::after {
  display: none;
}

.hero::after {
  display: none;
}

.hero-brand {
  position: absolute;
  z-index: 5;
  top: clamp(28px, 5vh, 54px);
  left: max(18px, calc((100vw - 1240px) / 2));
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-size: clamp(0.82rem, 0.9vw, 0.98rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(16, 17, 17, 0.8);
  text-transform: uppercase;
}

.hero-content {
  position: relative;
  z-index: 5;
  max-width: 700px;
  margin-top: -120px;
  transform: none;
}

.hero .kicker,
.section .kicker,
.mode-copy .kicker,
.contact-section .kicker {
  color: var(--still-orange);
  font-size: 0.82rem;
  text-shadow: none;
}

.hero h1 {
  max-width: 15ch;
  color: var(--still-ink);
  font-size: 6.8rem;
  line-height: 0.86;
  text-shadow: 0 2px 24px rgba(240, 242, 239, 0.34);
  text-wrap: nowrap;
}

.hero-sub {
  max-width: 610px;
  color: rgba(16, 17, 17, 0.82);
  font-size: 1.22rem;
  line-height: 1.48;
  text-shadow: 0 1px 14px rgba(240, 242, 239, 0.32);
}

.hero-actions {
  gap: 10px;
  margin-top: 22px;
}

.hero-actions a,
.contact-button {
  min-height: 48px;
  border: 1px solid rgba(16, 17, 17, 0.16);
  border-radius: 999px;
  color: var(--still-ink);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(16, 17, 17, 0.1);
  transform: none;
}

.hero-actions a:first-child,
.contact-button {
  color: #ffffff;
  background:
    linear-gradient(145deg, #ff8840, var(--still-orange) 48%, var(--still-orange-dark));
  border-color: rgba(240, 90, 20, 0.32);
}

.hero-telemetry {
  left: max(28px, calc((100vw - 1240px) / 2));
  right: auto;
  bottom: 34px;
  z-index: 5;
  width: min(500px, calc(100vw - 56px));
  border: 1px solid rgba(16, 17, 17, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 48px rgba(16, 17, 17, 0.14);
  backdrop-filter: none;
}

.hero-telemetry div {
  background: rgba(255, 255, 255, 0.54);
}

.hero-telemetry span {
  color: var(--still-ink);
  text-shadow: none;
}

.hero-telemetry strong {
  color: rgba(16, 17, 17, 0.54);
}

.intro-band {
  display: none;
}

.section,
.mode-section,
.contact-section {
  padding: 112px max(28px, calc((100vw - 1240px) / 2));
}

.work-section,
.mode-section,
.proof-section {
  background:
    linear-gradient(180deg, #f7f8f5, var(--still-page));
  color: var(--still-ink);
}

.work-section::before,
.mode-section::before,
.proof-section::before,
.contact-section::before,
.work-section::after,
.mode-section::after,
.proof-section::after,
.contact-section::after {
  display: none;
}

.section-head,
.project-grid,
.proof-grid {
  max-width: 1240px;
}

.section h2,
.mode-copy h2,
.contact-section h2 {
  max-width: 920px;
  color: var(--still-ink);
  font-size: 5.8rem;
  line-height: 0.86;
  text-shadow: none;
}

.section-intro,
.mode-copy p:last-child,
.contact-copy {
  max-width: 740px;
  color: var(--still-muted);
  font-size: 1.08rem;
  line-height: 1.58;
  text-shadow: none;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.project-card {
  min-height: 680px;
  height: auto;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--still-line);
  border-radius: 10px;
  background: var(--still-paper);
  color: var(--still-ink);
  box-shadow: 0 28px 72px rgba(16, 17, 17, 0.12);
  overflow: hidden;
  transform: none;
}

.project-card::before,
.project-card::after {
  display: none;
}

.project-card:hover,
.project-card.is-tilting,
.project-card.reveal.is-visible:hover,
.project-card.reveal.is-visible.is-tilting {
  transform: none;
  filter: none;
}

.project-visual {
  position: relative;
  inset: auto;
  z-index: 0;
  width: 100%;
  height: 320px;
  margin: 0;
  background: #dfe3df;
}

.project-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: none;
}

.project-card:hover .project-visual img,
.project-card.is-tilting .project-visual img {
  filter: none;
  transform: none;
}

.project-visual-contained {
  background: #f4eee4;
}

.project-visual-contained img {
  object-fit: contain;
  box-sizing: border-box;
  padding: clamp(10px, 1.4vw, 20px);
}

.card-top,
.card-bottom {
  position: static;
  z-index: auto;
  margin: 0;
  padding: 24px 24px 0;
}

.card-bottom {
  width: auto;
  margin-top: auto;
  padding: 10px 24px 24px;
  inset: auto;
}

.project-card .proof-status {
  margin-bottom: 18px;
}

.project-card .project-type {
  margin-bottom: 10px;
  color: var(--still-orange);
}

.project-card h3 {
  max-width: 12ch;
  color: var(--still-ink);
  font-size: 2.32rem;
  line-height: 0.96;
  text-shadow: none;
}

.project-card .project-copy {
  max-width: none;
  color: var(--still-muted);
  font-size: 1rem;
  line-height: 1.48;
  text-shadow: none;
}

.project-card .proof-open {
  color: var(--still-orange);
}

.toolchain-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: 0;
  padding: 24px max(28px, calc((100vw - 1240px) / 2));
  overflow: visible;
  background: #101111;
  color: #ffffff;
}

.toolchain-strip span {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.mode-section {
  min-height: auto;
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: 42px;
  align-items: start;
}

.mode-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mode-metrics div,
.proof-item {
  border: 1px solid var(--still-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--still-ink);
  box-shadow: 0 18px 52px rgba(16, 17, 17, 0.08);
  backdrop-filter: none;
  transform: none;
}

.mode-metrics div {
  min-height: 178px;
  padding: 22px;
}

.mode-metrics span {
  color: var(--still-orange);
}

.mode-metrics strong,
.proof-label {
  color: var(--still-ink);
  text-shadow: none;
}

.mode-metrics small,
.proof-copy {
  color: var(--still-muted);
  text-shadow: none;
}

.proof-section {
  background:
    linear-gradient(180deg, var(--still-page), #f7f8f5);
  background-attachment: scroll;
}

.proof-grid {
  counter-reset: proof;
  gap: 12px;
}

.proof-item {
  min-height: 210px;
  overflow: hidden;
}

.proof-item::before {
  color: rgba(16, 17, 17, 0.06);
  text-shadow: none;
}

.proof-item::after {
  opacity: 1;
  transform: none;
  background: linear-gradient(90deg, var(--still-orange), transparent 78%);
}

.proof-item:hover,
.proof-item:hover::after {
  transform: none;
}

.proof-item:not(a) {
  cursor: default;
}

.proof-item:not(a) .proof-open,
.proof-item:not(a):hover .proof-open {
  color: var(--still-muted);
  opacity: 0.72;
  transform: none;
}

.proof-status {
  border-color: rgba(16, 17, 17, 0.16);
  color: var(--still-ink);
  background: rgba(16, 17, 17, 0.06);
}

.status-shipped,
.status-live {
  color: #ffffff;
  border-color: rgba(240, 90, 20, 0.28);
  background: var(--still-orange);
}

.contact-section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--still-ink);
  background: url("./assets/generated/contact-avatar-pose-g-v1.jpg") 68% center / cover no-repeat;
}

.contact-section h2 {
  max-width: 9ch;
  line-height: 1.04;
  padding-bottom: 0.14em;
  text-shadow: 0 2px 24px rgba(240, 242, 239, 0.34);
}

.contact-copy {
  color: rgba(16, 17, 17, 0.86);
  text-shadow: 0 1px 14px rgba(240, 242, 239, 0.28);
}

.contact-section .contact-button {
  align-self: flex-start;
  width: auto;
  min-width: min(420px, 100%);
  padding-inline: 34px;
}

@media (max-width: 1100px) {
  .hero h1 {
    font-size: 5.2rem;
  }

  .hero-telemetry {
    left: max(28px, calc((100vw - 1240px) / 2));
    right: auto;
  }

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

  .project-card {
    grid-template-rows: 360px auto 1fr;
  }

  .project-visual {
    height: 360px;
  }

  .mode-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .hero-stage::before {
    background:
      url("./assets/generated/hero-avatar-pose-c-v1-mobile.jpg") right center / auto 100% no-repeat;
  }

  .hero-sub {
    max-width: 420px;
  }
}

@media (max-width: 720px) {
  .nav-rail {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    width: calc(100vw - 20px);
    max-width: none;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .nav-rail nav {
    flex: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: calc(100vw - 72px);
    height: 44px;
    gap: 0;
    padding: 0 6px 0 4px;
    justify-content: stretch;
  }

  .nav-rail nav a {
    min-width: 0;
    min-height: 32px;
    padding: 0 2px;
    font-size: 0.5rem;
    white-space: nowrap;
  }

  .hero {
    min-height: 100svh;
    padding: 98px 18px 96px;
    align-items: start;
  }

  .hero-stage::before {
    background: #d9d5cd url("./assets/generated/hero-avatar-pose-c-v1-mobile.jpg") right center / auto 94% no-repeat;
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(240, 242, 239, 0.1), rgba(240, 242, 239, 0.03) 58%, rgba(240, 242, 239, 0.3));
  }

  .hero-content {
    margin-top: 0;
  }

  .hero h1 {
    max-width: 6.9ch;
    font-size: 2.82rem;
    line-height: 0.9;
  }

  .hero-sub {
    max-width: 190px;
    color: rgba(16, 17, 17, 0.9);
    font-size: 1rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 280px;
  }

  .hero-actions a {
    min-height: 42px;
    justify-content: center;
    padding-inline: 10px;
    font-size: 0.68rem;
  }

  .hero-actions a:first-child {
    grid-column: 1 / -1;
  }

  .hero-telemetry {
    right: 18px;
    bottom: 16px;
    left: 18px;
    width: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-telemetry div {
    padding: 12px 9px;
  }

  .hero-telemetry span {
    font-size: 0.92rem;
  }

  .hero-telemetry strong {
    font-size: 0.58rem;
  }

  .section,
  .mode-section,
  .contact-section {
    padding: 76px 18px;
  }

  .section h2,
  .mode-copy h2,
  .contact-section h2 {
    font-size: 3.1rem;
    line-height: 0.9;
  }

  .project-card {
    grid-template-rows: 240px auto 1fr;
  }

  .project-visual {
    height: 240px;
  }

  .project-card h3 {
    font-size: 2rem;
  }

  .mode-metrics,
  .proof-grid {
    grid-template-columns: 1fr;
  }

  .toolchain-strip {
    justify-content: flex-start;
    padding: 18px;
  }

  .contact-section {
    min-height: 82svh;
    background: url("./assets/generated/contact-avatar-pose-g-v1-mobile.jpg") 0% center / cover no-repeat;
  }

  .contact-section h2 {
    max-width: 8ch;
    font-size: 1.86rem;
  }

  .contact-copy {
    max-width: 190px;
    color: rgba(16, 17, 17, 0.9);
  }
}

/* Keep the still-photo pass static while allowing the stack marquees to move. */
.tech-marquee-track {
  animation: tech-marquee-left var(--tech-marquee-duration) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.tech-marquee-track.is-marquee-ready {
  animation-play-state: running;
}

.tech-marquee-orange .tech-marquee-track {
  animation-name: tech-marquee-right;
}

@media (prefers-reduced-motion: reduce) {
  .tech-marquee-track {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* Keep navigation subordinate to the hero and work imagery. */
.nav-rail {
  top: max(14px, env(safe-area-inset-top));
  left: max(18px, calc((100vw - 1240px) / 2));
  right: auto;
  width: auto;
  min-height: 40px;
  max-width: calc(100vw - 36px);
  padding: 4px;
  border-color: rgba(16, 17, 17, 0.1);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px rgba(16, 17, 17, 0.09);
}

.brand-mark {
  width: 38px;
  height: 38px;
  font-size: 0.78rem;
}

.nav-rail nav {
  height: 38px;
  gap: 4px;
  padding: 0 6px 0 4px;
}

.nav-rail nav a {
  min-width: 62px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.64rem;
  color: rgba(16, 17, 17, 0.5);
}

.nav-rail nav a:hover,
.nav-rail nav a.is-active {
  color: var(--still-ink);
  background: rgba(240, 90, 20, 0.09);
}

#work,
#mode,
#proof,
#contact {
  scroll-margin-top: 84px;
}

@media (max-width: 720px) {
  .nav-rail {
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    right: auto;
    width: auto;
    max-width: calc(100vw - 18px);
    transform: translateX(-50%);
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 0.7rem;
  }

  .nav-rail nav {
    display: flex;
    width: auto;
    height: 34px;
    gap: 2px;
    padding: 0 5px 0 3px;
  }

  .nav-rail nav a {
    min-width: 52px;
    min-height: 28px;
    padding: 0 5px;
    font-size: 0.54rem;
  }

  #work,
  #mode,
  #proof,
  #contact {
    scroll-margin-top: 66px;
  }
}

/* Final hero copy fit: outcome first, proof visible in the opening viewport. */
html {
  scroll-padding-top: 0;
}

.hero h1 {
  max-width: 10.8ch;
  font-size: clamp(4.72rem, 6.4vw, 6.2rem);
  line-height: 1.06;
  padding-bottom: 0.14em;
}

.hero-sub {
  max-width: 640px;
  margin-top: 20px;
  font-size: clamp(1.02rem, 1.28vw, 1.14rem);
  line-height: 1.44;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 610px;
  margin-top: 18px;
}

.hero-trust > span {
  color: rgba(16, 17, 17, 0.58);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-trust a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(16, 17, 17, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 32px rgba(16, 17, 17, 0.08);
}

.hero-trust img {
  display: block;
  max-width: 112px;
  max-height: 20px;
  object-fit: contain;
}

.project-visual-contained {
  background: radial-gradient(circle at 50% 45%, #ffffff, #eeeae2 62%, #dad8d1);
}

.project-visual-contained > img {
  object-fit: contain;
  padding: clamp(14px, 2vw, 26px);
}

.project-logo {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(16, 17, 17, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(16, 17, 17, 0.12);
}

.project-logo img {
  width: auto;
  max-width: 112px;
  height: auto;
  max-height: 19px;
  padding: 0;
  object-fit: contain;
  transform: none;
}

.project-logo-wordmark img {
  max-width: 124px;
  max-height: 24px;
}

.project-logo-dark {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(16, 17, 17, 0.13);
}

.project-card {
  min-height: 628px;
}

.card-bottom {
  margin-top: auto;
  padding-top: 14px;
}

.project-card h3 {
  max-width: 14ch;
}

.project-card .project-copy {
  font-size: 0.96rem;
  line-height: 1.46;
}

.project-card:not(a) {
  cursor: default;
}

.project-card:not(a) .proof-open,
.project-card:not(a):hover .proof-open {
  color: var(--still-muted);
  opacity: 0.72;
  transform: none;
}

@media (max-width: 720px) {
  .hero,
  .hero-stage {
    background: #d5d1c8;
  }

  .hero-stage::before {
    background: #d5d1c8 url("./assets/generated/hero-avatar-pose-c-v1-mobile.jpg") calc(100% + 80px) center / auto 100% no-repeat;
  }

  .hero-content {
    max-width: 200px;
  }

  .hero h1 {
    max-width: 8.1ch;
    font-size: clamp(2.18rem, 10vw, 2.6rem);
    line-height: 1.08;
  }

  .hero-sub {
    max-width: 174px;
    margin-top: 18px;
    font-size: 0.8rem;
    line-height: 1.32;
  }

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

  .card-bottom {
    padding-top: 12px;
  }
}

/* Final hero identity pass: keep identity in the hero and move proof below it. */
.nav-rail {
  display: none;
}

.hero-telemetry {
  display: none;
}

.intro-band.social-proof-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 42px);
  max-width: none;
  margin: 0;
  padding: 24px max(28px, calc((100vw - 1240px) / 2));
  border-top: 1px solid rgba(16, 17, 17, 0.08);
  border-bottom: 1px solid rgba(16, 17, 17, 0.08);
  background: #f3f4f0;
  color: var(--still-ink);
}

.social-proof-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.2vw, 46px);
  width: min(100%, 1240px);
}

.social-proof-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--still-ink);
  text-decoration: none;
  transition: opacity 160ms ease;
}

.social-proof-logo:hover {
  opacity: 0.68;
}

.social-proof-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 112px;
  max-height: 24px;
  object-fit: contain;
}

.social-proof-logo-wordmark img {
  max-width: 126px;
  max-height: 29px;
}

.social-proof-logo-dbhavery {
  min-width: 0;
}

.social-proof-logo-dbhavery img {
  max-width: 142px;
  max-height: 27px;
}

.social-proof-platform img {
  width: auto;
  height: 23px;
  max-width: 90px;
  opacity: 0.82;
}

@media (max-width: 900px) {
  .intro-band.social-proof-band {
    align-items: center;
    padding: 24px;
  }

  .social-proof-logos {
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .hero {
    min-height: 100svh;
    align-items: flex-start;
    padding: 96px 18px 46px;
    overflow: hidden;
  }

  .hero-stage::before {
    background:
      url("./assets/generated/hero-avatar-pose-c-v1-mobile.jpg") calc(100% + 90px) center / auto 100% no-repeat;
  }

  .hero-content {
    max-width: 238px;
    margin-top: 0;
  }

  .hero h1 {
    max-width: 8.4ch;
    font-size: clamp(2.45rem, 11vw, 3rem);
    line-height: 1.08;
  }

  .hero-sub {
    max-width: 214px;
    font-size: 0.81rem;
    line-height: 1.34;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 250px;
    margin-top: 28px;
  }

  .hero-actions a {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    font-size: 0.74rem;
  }

  .hero-actions a:first-child {
    flex-basis: 100%;
  }

  .social-proof-logo {
    min-width: 0;
  }

  .social-proof-logo img {
    max-width: 96px;
    max-height: 22px;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .hero-sub {
    max-width: 420px;
  }
}

/* Portfolio hierarchy: descriptive project labels first, repo names tertiary. */
.work-section .section-head,
.proof-section .section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr);
  gap: clamp(28px, 5vw, 78px);
  align-items: end;
  max-width: 1240px;
}

.work-section .section-head .kicker,
.proof-section .section-head .kicker {
  grid-column: 1 / -1;
  margin-bottom: -16px;
}

.work-section .section-head h2,
.proof-section .section-head h2 {
  max-width: 11ch;
  font-size: clamp(3.8rem, 5.4vw, 5.35rem);
  line-height: 0.96;
  padding-bottom: 0.18em;
}

.work-section .section-intro,
.proof-section .section-intro {
  max-width: 48ch;
  margin: 0 0 8px;
  padding-left: 24px;
  border-left: 3px solid rgba(240, 90, 20, 0.42);
}

.project-visual-document img {
  object-position: left top;
}

.project-card h3 {
  max-width: 17ch;
  font-size: clamp(2rem, 2.2vw, 2.5rem);
  line-height: 1.1;
  padding-bottom: 0.1em;
}

.project-card .project-copy {
  font-size: 0.98rem;
}

.project-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.project-evidence li {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(16, 17, 17, 0.12);
  border-radius: 999px;
  background: rgba(16, 17, 17, 0.035);
  color: rgba(16, 17, 17, 0.7);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.project-reference {
  display: block;
  margin-top: 10px;
  color: rgba(16, 17, 17, 0.48);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-card .project-reference {
  margin-top: 12px;
}

.supporting-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

.supporting-grid .proof-item {
  min-height: 260px;
  padding: 22px 18px 18px;
}

.supporting-grid .proof-item::before {
  font-size: 3.4rem;
}

.supporting-grid .proof-label {
  font-size: 1.02rem;
  line-height: 1.05;
}

.supporting-grid .proof-copy {
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.42;
}

.supporting-grid .proof-open {
  margin-top: auto;
}

.build-index {
  max-width: 1240px;
  margin: 34px auto 0;
  padding: 28px;
  border: 1px solid var(--still-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 52px rgba(16, 17, 17, 0.07);
}

.build-index-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.build-index-head .kicker,
.build-index-head p {
  margin: 0;
}

.build-index-head p:not(.kicker) {
  max-width: 44ch;
  color: var(--still-muted);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.38;
}

.build-index ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.build-index li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  min-height: 50px;
  padding: 13px 0;
  border-top: 1px solid rgba(16, 17, 17, 0.1);
}

.build-index li:nth-child(odd) {
  padding-right: 24px;
}

.build-index li:nth-child(even) {
  padding-left: 24px;
  border-left: 1px solid rgba(16, 17, 17, 0.1);
}

.build-index li > a,
.build-index li > span:first-child {
  color: var(--still-ink);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
}

.build-index li > a:hover {
  color: var(--still-orange);
}

.build-index li > span:last-child {
  flex: 0 0 auto;
  color: rgba(16, 17, 17, 0.48);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .supporting-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .work-section .section-head,
  .proof-section .section-head {
    display: block;
  }

  .work-section .section-head .kicker,
  .proof-section .section-head .kicker {
    margin-bottom: 12px;
  }

  .work-section .section-head h2,
  .proof-section .section-head h2 {
    max-width: 100%;
    font-size: clamp(2.65rem, 12.4vw, 3.8rem);
    line-height: 1.05;
    padding-bottom: 0.12em;
  }

  .work-section .section-intro,
  .proof-section .section-intro {
    margin-top: 22px;
    padding-left: 16px;
  }

  .supporting-grid,
  .build-index ul {
    grid-template-columns: 1fr;
  }

  .build-index {
    padding: 22px 18px;
  }

  .build-index-head {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }

  .build-index li:nth-child(odd),
  .build-index li:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
    border-left: 0;
  }
}

/* Executive proof pass: organize capabilities and replace stock-like card art. */
.hero h1 {
  max-width: 11.4ch;
}

.capability-section {
  padding: 94px max(28px, calc((100vw - 1240px) / 2));
  background:
    linear-gradient(180deg, #f3f4f0 0%, #fbfbf8 46%, var(--still-page) 100%);
  color: var(--still-ink);
  border-bottom: 1px solid rgba(16, 17, 17, 0.08);
}

.capability-head {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.68fr);
  align-items: end;
  gap: clamp(28px, 5vw, 78px);
  max-width: 1240px;
  margin: 0 auto 34px;
}

.capability-head .kicker {
  grid-column: 1 / -1;
  margin: 0 0 -14px;
  color: var(--still-orange);
}

.capability-head h2 {
  margin: 0;
  max-width: 11ch;
  color: var(--still-ink);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(3.6rem, 5.2vw, 5.2rem);
  line-height: 0.98;
  padding-bottom: 0.18em;
}

.capability-head p:not(.kicker) {
  max-width: 54ch;
  margin: 0 0 8px;
  padding-left: 24px;
  border-left: 3px solid rgba(240, 90, 20, 0.42);
  color: var(--still-muted);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.56;
}

.capability-scroll {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 2px 0 0;
  overflow: visible;
}

.capability-scroll::-webkit-scrollbar {
  height: 10px;
}

.capability-scroll::-webkit-scrollbar-track {
  background: rgba(16, 17, 17, 0.06);
  border-radius: 999px;
}

.capability-scroll::-webkit-scrollbar-thumb {
  background: rgba(16, 17, 17, 0.26);
  border-radius: 999px;
}

.capability-card {
  position: relative;
  min-height: 268px;
  padding: 22px;
  border: 1px solid var(--still-line);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(249, 248, 243, 0.92)),
    #ffffff;
  box-shadow: 0 18px 52px rgba(16, 17, 17, 0.08);
  scroll-snap-align: start;
}

.capability-card::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--still-orange), transparent);
  opacity: 0.72;
}

.capability-card h3 {
  margin: 0 0 12px;
  max-width: 12ch;
  color: var(--still-ink);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 1.56rem;
  line-height: 1.04;
}

.capability-card p {
  margin: 0;
  color: var(--still-muted);
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.44;
}

.capability-card small {
  display: block;
  margin-top: 18px;
  color: rgba(16, 17, 17, 0.52);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.3;
  text-transform: uppercase;
}

.project-card {
  min-height: 690px;
}

.project-visual-panel {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 316px;
  padding: 18px;
  border-bottom: 1px solid rgba(16, 17, 17, 0.1);
  background:
    radial-gradient(circle at 18% 20%, rgba(240, 90, 20, 0.18), transparent 26%),
    radial-gradient(circle at 74% 70%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(135deg, #111514 0%, #202724 100%);
  color: #f8f4ee;
  overflow: hidden;
}

.project-visual-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.16;
}

.project-visual-panel::after {
  content: "";
  position: absolute;
  left: -22%;
  right: -22%;
  top: -48%;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateY(0) rotate(-10deg);
  opacity: 0;
  transition: opacity 180ms ease, transform 420ms ease;
}

.project-card:hover .project-visual-panel::after,
.project-card:focus-within .project-visual-panel::after {
  opacity: 1;
  transform: translateY(420px) rotate(-10deg);
}

.visual-bar,
.visual-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  color: rgba(255, 245, 236, 0.74);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visual-bar span:last-child,
.visual-footer span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(255, 245, 236, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.architecture-map {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 1px solid rgba(255, 245, 236, 0.16);
  border-radius: 10px;
  background: rgba(3, 7, 7, 0.38);
}

.arch-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 78px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 245, 236, 0.22);
  border-radius: 999px;
  background: rgba(255, 245, 236, 0.11);
  color: #fff7ef;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.node-app { left: 4%; top: 42%; }
.node-router { left: 34%; top: 42%; background: rgba(240, 90, 20, 0.9); }
.node-cache { left: 30%; top: 12%; }
.node-tools { right: 6%; top: 12%; }
.node-rag { left: 30%; bottom: 12%; }
.node-models { right: 6%; bottom: 12%; }

.arch-line {
  position: absolute;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 245, 236, 0.16), rgba(240, 90, 20, 0.9));
  transform-origin: left center;
}

.line-a { left: 25%; top: 50%; width: 12%; }
.line-b { left: 45%; top: 32%; width: 32%; transform: rotate(-18deg); }
.line-c { left: 45%; top: 66%; width: 32%; transform: rotate(18deg); }
.line-d { left: 43%; top: 42%; width: 18%; transform: rotate(-34deg); }
.line-e { left: 43%; top: 59%; width: 18%; transform: rotate(34deg); }

.visual-evals {
  background:
    radial-gradient(circle at 78% 28%, rgba(240, 90, 20, 0.14), transparent 26%),
    radial-gradient(circle at 18% 88%, rgba(16, 17, 17, 0.08), transparent 28%),
    linear-gradient(135deg, #fbfaf7 0%, #eee9df 100%);
  color: var(--still-ink);
}

.visual-evals .visual-bar,
.visual-evals .visual-footer {
  color: rgba(16, 17, 17, 0.68);
}

.visual-evals .visual-bar span:last-child,
.visual-evals .visual-footer span {
  border-color: rgba(16, 17, 17, 0.12);
  background: rgba(255, 255, 255, 0.7);
}

.eval-scoreboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.eval-scoreboard div {
  min-height: 74px;
  padding: 12px;
  border: 1px solid rgba(16, 17, 17, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
}

.eval-scoreboard strong {
  display: block;
  color: var(--still-ink);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 1.18rem;
  line-height: 1;
  text-transform: uppercase;
}

.eval-scoreboard small {
  display: block;
  margin-top: 7px;
  color: rgba(16, 17, 17, 0.58);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.12;
  text-transform: uppercase;
}

.eval-table,
.control-sheet {
  display: grid;
  gap: 6px;
}

.eval-table {
  grid-template-columns: 1fr auto;
  padding: 10px;
  border: 1px solid rgba(16, 17, 17, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(16, 17, 17, 0.72);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.eval-table b,
.control-sheet b {
  color: #13824f;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.eval-table .warn,
.control-sheet div:nth-child(2) b {
  color: var(--still-orange-dark);
}

.visual-compliance {
  background:
    radial-gradient(circle at 26% 18%, rgba(240, 90, 20, 0.14), transparent 24%),
    radial-gradient(circle at 88% 74%, rgba(16, 17, 17, 0.08), transparent 30%),
    linear-gradient(135deg, #ede7dc 0%, #fbfaf7 100%);
  color: var(--still-ink);
}

.visual-compliance .visual-bar,
.visual-compliance .visual-footer {
  color: rgba(16, 17, 17, 0.66);
}

.visual-compliance .visual-bar span:last-child,
.visual-compliance .visual-footer span {
  border-color: rgba(16, 17, 17, 0.12);
  background: rgba(255, 255, 255, 0.72);
}

.control-sheet {
  flex: 1;
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.control-sheet div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-content: center;
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid rgba(16, 17, 17, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
}

.control-sheet span {
  color: var(--still-ink);
  font-size: 0.72rem;
  font-weight: 900;
}

.control-sheet small {
  grid-column: 1 / -1;
  color: rgba(16, 17, 17, 0.58);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.project-card .project-copy {
  color: rgba(16, 17, 17, 0.78);
}

.mode-copy {
  max-width: 570px;
}

.mode-copy h2 {
  max-width: 10ch;
  font-size: clamp(3.35rem, 4.6vw, 4.55rem);
  line-height: 1;
  padding-bottom: 0.18em;
}

.mode-metrics div {
  min-height: 190px;
}

.mode-metrics small {
  color: rgba(16, 17, 17, 0.74);
}

@media (max-width: 1180px) {
  .capability-head {
    display: block;
  }

  .capability-head .kicker {
    margin-bottom: 12px;
  }

  .capability-head p:not(.kicker) {
    margin-top: 24px;
  }

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

@media (max-width: 720px) {
  .capability-section {
    padding: 72px 18px;
  }

  .capability-head {
    margin-bottom: 26px;
  }

  .capability-head h2 {
    max-width: 100%;
    font-size: clamp(2.55rem, 12vw, 3.55rem);
    line-height: 1.04;
  }

  .capability-head p:not(.kicker) {
    padding-left: 16px;
    font-size: 0.94rem;
  }

  .capability-scroll {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(252px, 82vw);
    padding-bottom: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 17, 17, 0.26) transparent;
    mask-image: none;
  }

  .project-visual-panel {
    height: 270px;
    padding: 14px;
  }

  .mode-copy h2 {
    max-width: 8.5ch;
    font-size: clamp(2.65rem, 11vw, 3.25rem);
  }

  .visual-bar,
  .visual-footer {
    font-size: 0.56rem;
  }

  .arch-node {
    min-width: 64px;
    min-height: 30px;
    padding-inline: 7px;
    font-size: 0.54rem;
  }

  .eval-scoreboard strong {
    font-size: 1.28rem;
  }

  .eval-scoreboard small,
  .eval-table,
  .control-sheet small {
    font-size: 0.52rem;
  }

  .control-sheet span {
    font-size: 0.6rem;
  }
}

/* ============================================================
   Proof artifacts: real screenshots + measured proof chips.
   Replaces the earlier CSS-mock project panels on the flagship
   cards with actual screenshots of the shipped work.
   ============================================================ */
.project-visual-shot {
  height: 150px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(16, 17, 17, 0.16);
  background: #0c0e0d;
  overflow: hidden;
}

.project-visual-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform: none;
}

.project-card:hover .project-visual-shot img,
.project-card.is-tilting .project-visual-shot img {
  filter: none;
  transform: none;
}

/* One measured, factual proof chip per flagship card.
   The card body renders on a light paper shell, so the chip uses
   dark ink with a warm orange accent for the measured number. */
.project-card .proof-chip {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 13px;
  border: 1px solid rgba(16, 17, 17, 0.16);
  border-radius: 999px;
  background: #ffffff;
  color: rgba(16, 17, 17, 0.66);
  font-family: "Archivo", "Arial", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.project-card .proof-chip b {
  color: var(--still-orange);
  font-weight: 900;
}

/* Single consistent left edge for every line inside the flagship cards.
   The dark-era base rule indented h3/copy an extra 36px; zero it so the
   badge, type, title, evidence chips, proof chip, copy, and reference all
   align to the 24px card padding. */
.project-card h3,
.project-card .project-copy {
  margin-left: 0;
  margin-right: 0;
}

/* Section labels that keep social proof and stack logos honest. */
.social-proof-note {
  margin: 0 0 14px;
  font-family: "Archivo", "Arial", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(30, 22, 16, 0.5);
  text-align: center;
}

.tech-marquee-kicker {
  margin: 0 0 18px;
  font-family: "Archivo", "Arial", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(30, 22, 16, 0.46);
  text-align: center;
}

/* --- Supporting-card thumbnails ---------------------------------------
   Compact top banner on each supporting card. Deliberately shorter/quieter
   than the flagship trio's large screenshots so the two-tier hierarchy
   ("breadth without burying the signal") is preserved. */
.supporting-grid .proof-visual {
  margin: -22px -18px 14px;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid var(--still-line, rgba(16, 17, 17, 0.12));
  overflow: hidden;
  background: #0d0f10;
  position: relative;
  z-index: 1;
}

.supporting-grid .proof-visual img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.96);
  transition: filter 200ms ease, transform 300ms ease;
}

.supporting-grid .proof-item:hover .proof-visual img {
  filter: saturate(1.02) brightness(1.02);
  transform: none;
}

/* Publication proof pass: put the citable research and the public systems
   proof directly after the hero, then keep the taxonomy secondary. */
.proof-strip-band {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 14px;
  padding-block: 18px !important;
}

.proof-strip-card {
  display: flex;
  min-height: 108px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid rgba(16, 17, 17, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--still-ink);
  box-shadow: 0 14px 34px rgba(16, 17, 17, 0.06);
}

.proof-strip-card:hover {
  border-color: rgba(240, 90, 20, 0.34);
}

.proof-strip-card span {
  color: var(--still-orange);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.proof-strip-card strong {
  color: var(--still-ink);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(1.06rem, 1.5vw, 1.44rem);
  line-height: 1.02;
}

.proof-strip-card small {
  color: rgba(16, 17, 17, 0.58);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.proof-strip-primary {
  border-color: rgba(240, 90, 20, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 122, 24, 0.12), rgba(255, 255, 255, 0.84) 42%),
    rgba(255, 255, 255, 0.78);
}

.proof-strip-sites .social-proof-logos {
  justify-content: flex-start;
  gap: 18px;
}

.proof-strip-sites .social-proof-logo img {
  max-width: 104px;
}

.proof-strip-sites .social-proof-logo-wordmark img {
  max-width: 118px;
}

.proof-strip-sites .social-proof-logo-dbhavery img {
  max-width: 132px;
}

.proof-item-research {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px 24px;
  min-height: 0 !important;
}

.supporting-grid .proof-item-research .proof-visual {
  grid-row: 1 / span 5;
  margin: -22px 0 -18px -18px;
  border-radius: 8px 0 0 8px;
  border-right: 1px solid var(--still-line, rgba(16, 17, 17, 0.12));
  border-bottom: 0;
}

.supporting-grid .proof-item-research .proof-visual img {
  height: 252px;
  object-position: center;
}

.proof-item-research .proof-label {
  max-width: 34ch;
  font-size: clamp(1.32rem, 2vw, 2rem);
}

.proof-item-research .proof-status {
  align-self: start;
  justify-self: start;
}

.proof-item-research .proof-copy {
  max-width: 70ch;
  margin-top: 0;
  font-size: 0.96rem;
}

@media (min-width: 821px) {
  .capability-section {
    padding-top: 72px;
  }
}

@media (max-width: 900px) {
  .proof-strip-band {
    grid-template-columns: 1fr;
    padding: 18px !important;
  }

  .proof-strip-card {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .proof-item-research {
    grid-template-columns: 1fr;
  }

  .supporting-grid .proof-item-research .proof-visual {
    grid-row: auto;
    margin: -22px -18px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--still-line, rgba(16, 17, 17, 0.12));
    border-radius: 8px 8px 0 0;
  }

  .supporting-grid .proof-item-research .proof-visual img {
    height: 168px;
  }
}

@media (max-width: 720px) {
  .hero {
    min-height: 92svh;
    padding-top: 70px;
    padding-bottom: 32px;
  }

  .hero-content {
    max-width: 276px;
  }

  .hero h1 {
    max-width: 9.1ch;
    font-size: clamp(2.35rem, 10.4vw, 2.86rem);
  }

  .hero-sub {
    max-width: 248px;
    font-size: 0.82rem;
  }

  .hero-actions {
    max-width: 268px;
    margin-top: 20px;
  }

  .hero-actions a {
    min-height: 40px;
    font-size: 0.68rem;
  }

  .hero-actions a:nth-child(2) {
    flex-basis: 100%;
  }

  .capability-section {
    padding-top: 58px;
  }

  .capability-scroll {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }

  .capability-card {
    min-height: 0;
    margin-bottom: 12px;
  }

  .capability-card:nth-child(n + 4) {
    display: none;
  }

  .work-section .section-head h2,
  .proof-section .section-head h2 {
    font-size: clamp(2.42rem, 10.8vw, 3.28rem);
  }

  .work-section .section-intro,
  .proof-section .section-intro {
    font-size: 1rem;
    line-height: 1.52;
  }

}

/* --- Screen-adaptable ≤920px: STACK hero + Say Hello (photo band on top,
   text below on the light bg) so text never overlaps the figure. Keeps the
   'no white gradient' rule and full legibility on tablet/phone. --- */
@media (max-width: 1000px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding: 0 0 46px;
    background: #ecefeb;
  }
  .hero-stage {
    position: relative;
    inset: auto;
    z-index: 1;
    height: 46svh;
    min-height: 318px;
  }
  .hero-stage::before {
    position: absolute;
    inset: 0;
    background: url("./assets/generated/hero-avatar-pose-c-v1.jpg") center 15% / cover no-repeat !important;
    filter: none !important;
    transform: none !important;
  }
  .hero-stage::after { display: none; }
  .hero-brand {
    position: relative;
    inset: auto;
    z-index: 4;
    margin: 0;
    padding: 22px 22px 0;
  }
  .hero-content {
    position: relative;
    z-index: 4;
    max-width: 100%;
    margin: 0;
    padding: 12px 22px 0;
  }

  .contact-section {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    min-height: auto;
    padding: 0 0 44px;
    background: #efeee8 !important;
    color: var(--still-ink);
  }
  .contact-section::before {
    content: "";
    display: block;
    position: relative;
    inset: auto;
    z-index: 1;
    height: 44svh;
    min-height: 300px;
    opacity: 1;
    background: url("./assets/generated/contact-avatar-pose-g-v1.jpg") center 12% / cover no-repeat !important;
    background-size: cover !important;
  }
  .contact-section > * {
    position: relative;
    z-index: 2;
    padding-left: 22px;
    padding-right: 22px;
  }
  .contact-section .kicker { margin-top: 26px; }
  .contact-section .contact-copy { max-width: min(640px, calc(100vw - 44px)); }
  .contact-section .contact-button { align-self: stretch; }
}

/* ============================================================
   Intro proof strip (rebuilt): published paper + tools worked
   across + shipped sites. De-boxed (no cards) per direction.
   ============================================================ */
.intro-band.proof-band {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1fr);
  gap: 22px clamp(28px, 4vw, 80px);
  align-items: center;
}

.proof-lead {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--still-ink);
}

.proof-lead span {
  color: var(--still-orange);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.proof-lead strong {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(1.14rem, 1.6vw, 1.5rem);
  line-height: 1.04;
}

.proof-lead small {
  color: rgba(16, 17, 17, 0.56);
  font-size: 0.76rem;
  font-weight: 700;
}

.proof-lead:hover strong {
  color: var(--still-orange);
}

/* Works across + Shipped & live stacked in the right column. */
.proof-band .proof-group {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
}

.proof-group-label {
  color: rgba(16, 17, 17, 0.5);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Logos-only partner wall (no text labels). */
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
}

.partner-logo {
  display: inline-flex;
  align-items: center;
}

.partner-logo b {
  display: none;
}

.partner-logo img {
  width: auto;
  height: 23px;
  opacity: 0.82;
  transition: opacity 160ms ease;
}

.partner-logo:hover img {
  opacity: 1;
}

.partner-more {
  display: inline-flex;
  align-items: center;
  color: rgba(16, 17, 17, 0.44);
  font-size: 0.8rem;
  font-weight: 800;
  font-style: italic;
  white-space: nowrap;
}

.proof-group .social-proof-logos {
  width: auto;
  justify-content: flex-start;
  align-items: center;
  gap: 28px;
}

@media (max-width: 900px) {
  .intro-band.proof-band {
    grid-template-columns: 1fr;
  }

  .proof-lead,
  .proof-band .proof-group {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Grounding footer below the contact section (black). */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px max(28px, calc((100vw - 1240px) / 2));
  background: #050505;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}

.site-footer-name {
  margin: 0;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}

.site-footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.site-footer-links a:hover {
  color: var(--still-orange, #ff5e00);
}

.site-footer-meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.74rem;
  font-weight: 600;
}

/* Operating Profile tiles: gentle hover (drop the dark-era orange border,
   heavy 0 30px 70px shadow, and radial glow that read as too strong). */
.mode-metrics div:hover,
.mode-metrics div.is-tilting {
  border-color: rgba(240, 90, 20, 0.32);
  box-shadow: 0 22px 58px rgba(16, 17, 17, 0.12);
}

.mode-metrics div:hover::before,
.mode-metrics div.is-tilting::before {
  opacity: 0;
}

/* =====================================================================
   HOVER PARITY PASS, every card hovers like the flagship project cards:
   orange border highlight only (plus the existing arrow nudge on cards
   with an OPEN/TRY arrow). No shadow lifts, no image brightening. */

.supporting-grid .proof-item:hover {
  border-color: rgba(255, 104, 20, 0.48);
  box-shadow: 0 18px 52px rgba(16, 17, 17, 0.08);
}

.supporting-grid .proof-item:hover .proof-visual img {
  filter: saturate(0.96);
}

.capability-card {
  transition: border-color 0.2s;
}

.capability-card:hover {
  border-color: rgba(255, 104, 20, 0.48);
}

.mode-metrics div:hover,
.mode-metrics div.is-tilting {
  border-color: rgba(255, 104, 20, 0.48);
  box-shadow: 0 18px 52px rgba(16, 17, 17, 0.08);
}

/* Hero title line: bigger orange so the title carries against the tan
   backdrop (Don, 2026-07-04). */
.hero .kicker {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Bigger name wordmark (Don, 2026-07-04). */
.hero-brand {
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
}

/* Credentials section (2026-07-04). Still-theme, matches the proof-section
   language: white tiles, hairline borders, orange-border-only hover. */
.cred-section {
  background: linear-gradient(180deg, #f7f8f5, var(--still-page));
  color: var(--still-ink);
}

.cred-section .section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr);
  gap: clamp(28px, 5vw, 78px);
  align-items: end;
  max-width: 1240px;
}

.cred-section .section-head h2 {
  max-width: 11ch;
  font-size: clamp(3.8rem, 5.4vw, 5.35rem);
  line-height: 0.96;
  padding-bottom: 0.18em;
}

.cred-section .section-intro {
  max-width: 48ch;
  margin: 0 0 8px;
  padding-left: 24px;
  border-left: 3px solid rgba(240, 90, 20, 0.42);
}

.cred-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 1240px;
  margin: 0 auto;
}

.cred-tile {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--still-line);
  border-radius: 10px;
  padding: 22px;
  color: var(--still-ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 52px rgba(16, 17, 17, 0.08);
  transition: border-color 0.2s;
}

.cred-tile:hover {
  border-color: rgba(255, 104, 20, 0.48);
}

.cred-tile strong {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  line-height: 1;
  color: var(--still-ink);
}

.cred-tile small {
  display: block;
  color: rgba(16, 17, 17, 0.74);
  font-size: 0.95rem;
  line-height: 1.45;
}

.cred-verify {
  margin-top: auto;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 0.85rem;
  color: var(--still-orange);
}

.cred-degree {
  max-width: 1240px;
  margin: 26px auto 0;
  color: var(--still-muted);
  font-size: 1.02rem;
}

@media (max-width: 900px) {
  .cred-section .section-head {
    display: block;
  }

  .cred-section .section-intro {
    margin-top: 20px;
  }
}

@media (max-width: 720px) {
  .cred-section .section-head h2 {
    font-size: clamp(2.4rem, 10.5vw, 3.8rem);
  }

  .cred-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cred-tile strong {
    font-size: 1.6rem;
  }
}

/* Mobile hero caption (Don, 2026-07-09): on the stacked mobile layout the
   portrait banner crops the figure to the right, leaving the left ~70% of the
   studio wall empty. Lift the name + role into that open space and drop the
   now-redundant copies below the image. Desktop is unaffected. */
.hero-caption {
  display: none;
}

@media (max-width: 1000px) {
  .hero {
    position: relative;
  }

  .hero-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    right: 0;
    height: 46svh;
    min-height: 318px;
    /* Extra bottom padding lifts the vertically-centred name/title upward. */
    padding: 0 22px clamp(44px, 12vh, 92px);
    pointer-events: none;
  }

  .hero-caption-name {
    margin: 0;
    max-width: 63%;
    font-family: "Archivo Black", "Arial Black", sans-serif;
    font-weight: 900;
    font-size: clamp(1.7rem, 8.4vw, 2.7rem);
    line-height: 0.96;
    letter-spacing: 0.01em;
    color: var(--still-ink);
    text-transform: uppercase;
    text-shadow: 0 2px 20px rgba(240, 242, 239, 0.4);
  }

  .hero-caption-role {
    margin: 12px 0 0;
    max-width: 63%;
    font-family: "Archivo Black", "Arial Black", sans-serif;
    font-weight: 800;
    font-size: clamp(0.72rem, 3.4vw, 0.98rem);
    line-height: 1.15;
    letter-spacing: 0.08em;
    color: var(--still-orange);
    text-transform: uppercase;
  }

  /* The name + role now live in the banner; hide the copies below the image. */
  .hero > .hero-brand {
    display: none;
  }

  .hero-content > .kicker {
    display: none;
  }
}

/* Sticky "Available for roles" CTA (Don, 2026-07-09): a single persistent
   email pill that fades in once the hero scrolls out and auto-hides while the
   contact section is on screen, so it never covers content. */
.sticky-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 50;
  padding: 13px 24px;
  border: 1px solid rgba(240, 90, 20, 0.32);
  border-radius: 999px;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #ffffff;
  background: linear-gradient(145deg, #ff8840, var(--still-orange) 48%, var(--still-orange-dark));
  box-shadow: 0 14px 36px rgba(16, 17, 17, 0.3);
  opacity: 0;
  transform: translate(-50%, 26px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.sticky-cta::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: sticky-cta-pulse 2.4s ease-out infinite;
}

@keyframes sticky-cta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.sticky-cta.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: opacity 0.28s ease; transform: translate(-50%, 0); }
  .sticky-cta::before { animation: none; }
}

/* Contact banner caption (Don, 2026-07-09): mirror the hero. On the stacked
   mobile layout the contact portrait crops the figure to the right, leaving the
   left side of the studio wall empty. Lift the "Available for senior AI roles"
   heading into that space, raised toward the top and sized to fit clear of the
   figure. Copy + email button + links still flow below the image. */
@media (max-width: 1000px) {
  .contact-section {
    position: relative;
  }

  .contact-section h2 {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: min(64%, 340px);
    height: 44svh;
    min-height: 300px;
    margin: 0;
    padding: clamp(30px, 8vh, 62px) 0 0 22px;
    max-width: none;
    font-size: clamp(1.85rem, 8.6vw, 2.9rem);
    line-height: 0.98;
    pointer-events: none;
  }
}

/* Contact form (Don, 2026-07-09): replaces the single mailto button. Posts to a
   keyless Formsubmit endpoint (one-time email confirmation, no API key). */
.contact-form {
  width: 100%;
  max-width: 620px;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-section .contact-form {
  align-self: stretch;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field > span {
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(16, 17, 17, 0.66);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(16, 17, 17, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--still-ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 108px;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: rgba(240, 90, 20, 0.6);
  box-shadow: 0 0 0 3px rgba(240, 90, 20, 0.16);
}

.form-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

/* Status message sits to the left; the send button anchors to the bottom-right
   of the form, under the message field (Don, 2026-07-09). The button is first in
   the DOM, so order:-1 pulls the status ahead of it and margin-right:auto pushes
   the button to the far right. */
.form-foot .form-status {
  order: -1;
  margin-right: auto;
}

.contact-section .contact-form .form-submit {
  align-self: auto;
  width: auto;
  min-width: 0;
  padding-inline: 34px;
  cursor: pointer;
}

.form-submit[disabled] {
  opacity: 0.62;
  cursor: default;
}

.form-status {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(16, 17, 17, 0.7);
}

.form-status.is-ok {
  color: #1c7a3b;
}

.form-status.is-error {
  color: #b3261e;
}

@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Desktop overlay: drop the hero button row below the studio wall/floor line,
   and relieve the text-vs-figure crowding at the narrow end of the overlay
   range (Don, 2026-07-09). */
@media (min-width: 1001px) {
  .hero-actions {
    margin-top: clamp(48px, 16vh, 156px);
  }
}

@media (min-width: 1001px) and (max-width: 1200px) {
  .hero-content {
    max-width: 52%;
  }

  .hero-sub {
    max-width: 38ch;
  }

  .hero h1 {
    font-size: clamp(3.9rem, 7.1vw, 5.5rem);
  }

  .contact-section h2 {
    max-width: 7.5ch;
  }

  .contact-copy {
    max-width: 40ch;
  }

  .contact-form {
    max-width: 52%;
  }
}

/* "White instead of black" contrast try (Don, 2026-07-09): text sitting ON the
   studio photo goes white with a soft dark shadow for legibility. Text on the
   light-grey panels (mobile stacked headline/copy) stays dark so it never
   disappears. */
.hero-caption-name {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 22px rgba(0, 0, 0, 0.3);
}

.contact-section h2 {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 22px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1001px) {
  .hero-brand,
  .hero h1,
  .hero-sub {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 22px rgba(0, 0, 0, 0.28);
  }

  .contact-copy {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.26), 0 2px 18px rgba(0, 0, 0, 0.26);
  }
}

/* Desktop contact: tighten so heading + copy + full form + links fit within the
   viewport (the send button was falling below the fold), kept clear of the
   figure on the right (Don, 2026-07-09). */
@media (min-width: 1001px) {
  .contact-section h2 {
    font-size: clamp(2.8rem, 4.4vw, 4.1rem);
    line-height: 1.0;
    max-width: 13ch;
    margin-bottom: 6px;
  }

  .contact-copy {
    margin-bottom: 12px;
    max-width: 46ch;
  }

  .contact-section .contact-form {
    max-width: 560px;
  }

  .contact-section .contact-links {
    margin-top: 20px;
  }
}