/* =========================================================================
   Kamal Mehta — Portfolio
   Design: dark data/tech theme, cyan + violet accents, glassy cards.
   ========================================================================= */

:root {
  --bg: #0a0e17;
  --bg-alt: #0d1220;
  --surface: #121828;
  --surface-2: #182036;
  --border: #232c42;
  --text: #e8ecf5;
  --text-dim: #9aa5bd;
  --text-faint: #6b7690;
  --accent: #43d9d9;
  --accent-2: #7c8cff;
  --accent-warm: #ffb454;
  --accent-grad: linear-gradient(120deg, #43d9d9 0%, #7c8cff 100%);
  --success: #5ee6a0;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1180px;
  --font-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------- progress bar ---------------------------- */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent-grad);
  z-index: 1000;
  transition: width 0.1s ease-out;
}

/* ------------------------------- header -------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding: 18px 0;
  transition: all 0.3s ease;
  background: transparent;
}
.site-header.scrolled {
  padding: 12px 0;
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--text);
}
.logo .dot { color: var(--accent); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-links a {
  padding: 8px 16px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-dim);
  border-radius: 999px;
  transition: all 0.2s ease;
  /* "How I work" is the first multi-word nav label on this site. Without
     this it breaks after "How" the moment the bar gets tight, which turns
     one nav row into two and shoves the hero down the page. */
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links .nav-cta {
  background: var(--accent-grad);
  color: #06121a;
  font-weight: 700;
}
.nav-links .nav-cta:hover { filter: brightness(1.08); color: #06121a; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  z-index: 20;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.25s ease;
}

/* -------------------------------- hero ---------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 100px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(67, 217, 217, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 217, 217, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 100%);
}
.orbit {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
}
.orbit-1 {
  width: 520px; height: 520px;
  background: #43d9d9;
  top: -180px; right: -120px;
  animation: float1 16s ease-in-out infinite;
}
.orbit-2 {
  width: 420px; height: 420px;
  background: #7c8cff;
  bottom: -160px; left: -100px;
  animation: float2 18s ease-in-out infinite;
}
@keyframes float1 { 0%,100% { transform: translate(0,0);} 50% { transform: translate(-30px, 40px);} }
@keyframes float2 { 0%,100% { transform: translate(0,0);} 50% { transform: translate(30px, -30px);} }

.hero-inner { position: relative; z-index: 2; text-align: left; }
.eyebrow {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 14px;
}
.hero-name {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 800;
  background: linear-gradient(120deg, #ffffff 30%, #b9c2d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.hero-role {
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: 600;
  color: var(--accent);
  min-height: 1.6em;
  margin-bottom: 18px;
}
.hero-role .cursor { color: var(--text-dim); animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-tagline {
  max-width: 640px;
  font-size: 1.08rem;
  color: var(--text-dim);
  /* Tightened from 34px when the opener and availability pill were added.
     Three new blocks went into the hero; without clawing spacing back, the
     stats row falls below the fold on a 900px laptop screen. */
  margin-bottom: 26px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  /* Was 56px, back when the stats row came straight after. The availability
     pill now sits between them and carries its own 30px, so keeping 56 here
     would open a 120px hole in the middle of the hero. */
  margin-bottom: 26px;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 760px;
}
.stat-item {
  padding: 16px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.stat-value {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 800;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 2px;
}

.scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid var(--border);
  border-radius: 20px;
  z-index: 2;
}
.scroll-cue span {
  position: absolute;
  top: 6px; left: 50%;
  width: 5px; height: 8px;
  margin-left: -2.5px;
  background: var(--accent);
  border-radius: 3px;
  animation: scrollcue 1.6s ease infinite;
}
@keyframes scrollcue { 0% { opacity:1; top:6px;} 70% {opacity:0; top:20px;} 100% {opacity:0; top:6px;} }

/* ------------------------------- buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: all 0.22s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-grad);
  color: #06121a;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 30px -8px rgba(67,217,217,0.5); }
.btn-outline {
  border-color: var(--border);
  color: var(--text);
  background: rgba(255,255,255,0.02);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-ghost { color: var(--text-dim); }
.btn-ghost:hover { color: var(--accent); }

/* ------------------------------- sections -------------------------------- */
.section { padding: 110px 0; position: relative; }
.section-alt { background: var(--bg-alt); }
.section-kicker {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  max-width: 780px;
  margin-bottom: 18px;
}
.section-sub {
  color: var(--text-dim);
  max-width: 680px;
  font-size: 1.05rem;
  margin-bottom: 44px;
}

/* -------------------------------- about ---------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
}
.about-text p { color: var(--text-dim); font-size: 1.05rem; }
.about-text strong { color: var(--text); }
.about-education { margin-top: 28px; display: grid; gap: 14px; }
.edu-item {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.edu-item h4 { font-size: 1rem; margin-bottom: 4px; }
.edu-item .edu-meta { font-size: 0.85rem; color: var(--text-faint); }
.highlight-card {
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.highlight-card h3 { font-size: 1.15rem; margin-bottom: 18px; }
.highlight-card ul { display: grid; gap: 14px; }
.highlight-card li {
  padding-left: 26px;
  position: relative;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.highlight-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--accent-grad);
}

/* ------------------------------ timeline --------------------------------- */
.timeline {
  position: relative;
  border-left: 2px solid var(--border);
  margin-left: 10px;
  padding-left: 40px;
  display: grid;
  gap: 42px;
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -49.5px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 3px solid var(--accent);
}
.timeline-item .t-period {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.timeline-item h3 { font-size: 1.25rem; margin: 6px 0 2px; }
.timeline-item .t-company { color: var(--text-dim); font-weight: 600; margin-bottom: 10px; }
.timeline-item .t-location { color: var(--text-faint); font-size: 0.85rem; font-weight: 400; }
.timeline-item p.t-summary { color: var(--text-dim); max-width: 700px; margin: 0; }

/* ------------------------------- projects --------------------------------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 28px;
}
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(67,217,217,0.4);
  box-shadow: var(--shadow);
}
.project-media {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
}
.project-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
/* Engineering figures, not photographs. `cover` crops to fill, which on a
   composed plate means cutting the sub-captions off the bottom edge — so these
   are contained whole on a white mount instead. White because the line work is
   drawn for white and stays unreadable on anything else, and inset slightly so
   the plate reads as deliberate rather than as a letterboxing accident. The
   hover zoom is dropped here too: scaling a contained figure pushes its own
   edges out of frame, which is the exact failure this rule exists to prevent. */
.project-media.is-figure {
  background: #fff;
  padding: 10px;
}
.project-media.is-figure img { object-fit: contain; }
.project-card:hover .project-media.is-figure img { transform: none; }
/* The full-bleed scrim exists to keep a white badge legible over a bright
   photo. Over a white figure it just dulls the plate to grey, and the badge —
   a dark disc with a cyan ring — is perfectly legible on white without it. */
.project-media.is-figure .play-badge { background: transparent; }
.project-card:hover .project-media img { transform: scale(1.06); }
.project-media .play-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,10,18,0.28);
}
.play-badge .play-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(10,14,23,0.7);
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--accent);
  backdrop-filter: blur(4px);
}
.media-gallery-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  height: 100%;
}
.media-gallery-strip img { height: 100%; object-fit: cover; }
.project-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.project-company {
  font-size: 0.78rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 8px;
}
.project-body h3 { font-size: 1.2rem; margin-bottom: 10px; }
.project-impact {
  font-size: 0.92rem;
  color: var(--accent);
  font-weight: 600;
  background: rgba(67,217,217,0.08);
  border: 1px solid rgba(67,217,217,0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.project-body p.project-desc { color: var(--text-dim); font-size: 0.94rem; flex: 1; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: 999px;
}

.more-projects { margin-top: 44px; text-align: center; }
.more-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  text-align: left;
}
.more-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
}
.more-item .project-company { margin-bottom: 6px; }
.more-item h4 { font-size: 1rem; margin-bottom: 8px; }
.more-item p { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 10px; }

/* --------------------------- focus-area filter ----------------------------- */
/* Chips sit between the section heading and the grid. They're generated from
   SITE_DATA.focusAreas, so this styling has to survive any number of them. */
.proj-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 18px;
  max-width: 900px;
}
/* On a phone eight chips wrap to seven rows and push the projects almost a
   full screen down — which defeats the point of a filter that's meant to get
   people INTO the work faster. Below 700px it becomes a single swipeable
   strip instead. */
@media (max-width: 700px) {
  .proj-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 18px 8px;
    margin-inline: -18px; /* let the strip bleed to the screen edge so it reads as scrollable */
    max-width: none;
  }
  .proj-filter::-webkit-scrollbar { display: none; }
  .fchip { flex: 0 0 auto; scroll-snap-align: start; }
}
.fchip {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.fchip:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.fchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fchip-n {
  font-size: 0.7rem;
  color: var(--text-faint);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.fchip.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.fchip.active .fchip-n { color: var(--accent); background: rgba(10, 14, 23, 0.75); }

.proj-count {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.88rem;
  margin: 0 0 22px;
  min-height: 1.2em; /* reserve the row so filtering doesn't jog the grid */
}
/* On first load there's no filter and therefore no message — don't leave a
   band of empty space above the grid waiting for one. */
.proj-count:empty { min-height: 0; margin-bottom: 0; }
.proj-count strong { color: var(--text); font-weight: 600; }
.fclear {
  font: inherit;
  font-size: 0.8rem;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fclear:hover { color: var(--text); }

/* Filtered-out cards leave the layout entirely rather than fading in place, so
   the grid closes up and there's no half-visible row of rejects to scroll past. */
.filtered-out { display: none !important; }

/* ------------------------- clickable card affordance ------------------------ */
.project-card.is-openable, .more-item.is-openable { cursor: pointer; }
.project-card.is-openable:focus-visible,
.more-item.is-openable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.more-item.is-openable:hover { border-color: var(--accent); }
.project-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}
.project-open span { transition: transform 0.2s ease; }
.project-card:hover .project-open span { transform: translateX(4px); }

/* ---------------------------- live skill chips ----------------------------- */
/* A chip only looks clickable when it actually leads to a project. */
.tag-live {
  font-family: inherit;
  line-height: 1.45; /* buttons don't inherit the span's line box */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.tag-live:hover { color: var(--text); border-color: var(--accent); background: var(--surface); }
.tag-live:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tag-n {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(67, 217, 217, 0.12);
  border-radius: 999px;
  padding: 1px 6px;
}

/* ----------------------------- certificates -------------------------------- */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
  align-items: start;
}
.cert-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cert-card:hover { border-color: rgba(67,217,217,0.4); transform: translateY(-3px); }

/* variant: no certificate file yet — compact icon + text row */
.cert-card.no-image {
  flex-direction: row;
  gap: 14px;
  align-items: flex-start;
  padding: 20px;
}
.cert-badge {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--accent-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: #06121a;
  font-weight: 800;
  font-family: var(--font-head);
}
.cert-info h4 { font-size: 0.95rem; margin-bottom: 4px; line-height: 1.35; }
.cert-info .cert-issuer { color: var(--text-faint); font-size: 0.82rem; }

/* variant: real certificate image — clickable thumbnail + info block */
.cert-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
}
.cert-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.35s ease;
}
.cert-card:hover .cert-thumb img { transform: scale(1.05); }
.cert-thumb .cert-zoom-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 10, 18, 0.45));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cert-card:hover .cert-zoom-hint { opacity: 1; }
.cert-zoom-hint span {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(10, 14, 23, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 0.85rem;
}
.cert-card .cert-info-block { padding: 16px 18px; }
.cert-card .cert-info-block h4 { font-size: 0.95rem; margin-bottom: 4px; line-height: 1.35; }
.cert-card .cert-info-block .cert-issuer { color: var(--text-faint); font-size: 0.82rem; }
.cert-note {
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  font-size: 0.85rem;
}

/* -------------------------------- skills ---------------------------------- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.skill-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 22px;
}
.skill-group h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 14px;
}
.skill-group .tag-row { margin-top: 0; }

/* -------------------------------- contact ---------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
}
.contact-cards {
  display: grid;
  gap: 14px;
  align-content: start;
}
.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}
.contact-card:hover { border-color: var(--accent); transform: translateX(4px); }
.contact-icon { font-size: 1.4rem; }
.contact-label { font-size: 0.78rem; color: var(--text-faint); display: block; }
.contact-value { font-weight: 600; display: block; word-break: break-word; }

.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display: grid;
  gap: 18px;
}
.form-row { display: grid; gap: 8px; }
.form-row label { font-size: 0.85rem; color: var(--text-dim); font-weight: 600; }
.form-row input, .form-row textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-note { font-size: 0.85rem; color: var(--text-faint); min-height: 1.2em; }

/* -------------------------------- footer ---------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
  background: var(--bg-alt);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text-faint);
  font-size: 0.85rem;
}
.footer-links { display: flex; gap: 20px; }
.footer-links a:hover { color: var(--accent); }

/* -------------------------------- modal ---------------------------------- */
.modal {
  position: fixed; inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.modal:not([hidden]) { display: flex; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6,10,18,0.85);
  backdrop-filter: blur(6px);
}
.modal-content {
  position: relative;
  max-width: 900px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  z-index: 1;
}
.modal-close {
  position: fixed;
  top: 24px; right: max(20px, calc(50vw - 470px));
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  z-index: 5;
}
.modal-close:hover { border-color: var(--accent); color: var(--accent); }
.modal-content img { border-radius: var(--radius-sm); margin-bottom: 14px; width: 100%; }
.modal-content .modal-caption { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 20px; }
.modal-video-frame { position: relative; padding-top: 56.25%; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 14px; background:#000;}
.modal-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-content h3 { margin-bottom: 18px; }
.video-pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; color: var(--text-dim); padding: 40px 20px;
}

/* ------------------------------ case study --------------------------------- */
/* The panel that opens from a project card. Sized wider than the plain image
   modal because it's read, not glanced at, and reading needs a line length
   that doesn't run to the edge of a desktop screen. */
.modal-content-cs { max-width: 820px; padding: 34px 38px 30px; }
.modal-content-cs:focus { outline: none; }

.cs-kicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.cs-title { font-size: 1.55rem; line-height: 1.25; margin-bottom: 20px; }

.cs-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.cs-metric {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.cs-metric-v {
  display: block;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.15;
  margin-bottom: 4px;
}
.cs-metric-l { display: block; font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }

.cs-block { margin-bottom: 28px; }
.cs-block h4 {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.cs-block p { color: var(--text-dim); line-height: 1.72; }

/* Numbered because the order is the point — this is a sequence of decisions,
   not a bag of bullet points. */
.cs-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.cs-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 40px;
  margin-bottom: 15px;
  color: var(--text-dim);
  line-height: 1.7;
}
.cs-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(67, 217, 217, 0.1);
  border: 1px solid rgba(67, 217, 217, 0.32);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
}
.cs-summary { color: var(--text-faint); font-size: 0.92rem; line-height: 1.7; margin: -12px 0 28px; }

.cs-note {
  border-left: 3px solid var(--accent-warm);
  background: rgba(255, 180, 84, 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  margin-bottom: 28px;
}
.cs-note-tag {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 7px;
}
.cs-note p { color: var(--text-dim); font-size: 0.93rem; line-height: 1.65; }

.cs-figure { margin: 0 0 18px; }
/* These are engineering diagrams drawn on white, and they have to stay on white
   to stay readable — inverting or dimming them would wreck the line work. So
   they get an explicit white mount instead: padded, rounded, and matching the
   panel's own corner radius, which reads as a deliberate plate rather than a
   screenshot someone forgot to clean up. */
.cs-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.cs-figure figcaption { margin-top: 10px; }
.cs-rule { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }

.cs-links { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.cs-link { color: var(--accent); font-size: 0.88rem; font-weight: 600; }

.cs-foot {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cs-nav { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 320px; }
.cs-navbtn {
  font: inherit;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text);
  max-width: 240px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.cs-navbtn:hover { border-color: var(--accent); transform: translateY(-1px); }
.cs-navbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-navbtn-next { text-align: right; }
.cs-navdir { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 3px; }
.cs-navtitle { display: block; font-size: 0.82rem; color: var(--text-dim); line-height: 1.35; }
.cs-cta { flex: 0 0 auto; }

@media (max-width: 640px) {
  .modal-content-cs { padding: 26px 20px 24px; }
  .cs-title { font-size: 1.25rem; }
  .cs-metrics { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .cs-navbtn { max-width: none; flex: 1 1 100%; }
  .cs-navbtn-next { text-align: left; }
  .cs-cta { width: 100%; text-align: center; }
}

/* ----------------------------- hero opener ---------------------------------
   The three-sentence statement that sits directly under the role heading.

   Each sentence is its own <span> and each span is display:block, so the
   stanza reads as three separate facts rather than one long claim. That is
   the entire point of the block — run them together into a paragraph and the
   register changes from "here is what happened" to "here is what I want you
   to think about me".

   It is the brightest text in the hero after the name, and the tagline
   underneath it is deliberately dimmer and smaller. Hierarchy: name, then
   the number, then the context for the number.                              */
.hero-opener {
  max-width: 660px;
  margin-bottom: 16px;
  padding-left: 18px;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
  /* A hairline that fades out downward — marks this as the statement without
     turning it into a pull-quote with a big glowing bar. */
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--accent) 0%, rgba(67, 217, 217, 0) 100%) 1;
}
.hero-opener span { display: block; }
.hero-opener span + span { margin-top: 2px; }

/* -------------------------- availability pill ------------------------------
   Stated, never explained. A pill this small cannot carry a narrative even if
   someone tried to put one in it, which is rather the point.                */
.hero-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  padding: 6px 14px 6px 12px;
  border: 1px solid rgba(94, 230, 160, 0.28);
  background: rgba(94, 230, 160, 0.07);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--success);
}
.hero-availability::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(94, 230, 160, 0.16);
  flex: 0 0 auto;
}

/* ------------------------------ how I work ---------------------------------
   A band, not a section: no .section padding, no .section-alt background,
   hairline rules top and bottom. Four lines does not deserve the same visual
   weight as Experience or Projects, and giving it that weight would make it
   the loudest thing on the page — the wrong note for this content.          */
.howiwork {
  padding: 68px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.howiwork-title {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 800;
  /* Wide enough that the heading holds one line on a desktop screen. Broken
     across two lines it reads as a statement of belief; on one line it reads
     as an observation, which is the register this band is going for. */
  max-width: 760px;
  margin-bottom: 30px;
}
.hiw-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 44px;
  max-width: 980px;
}
.hiw-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
/* The number is a marker, not a shout — dimmed accent, sized to sit optically
   level with the first line of text rather than the top of the box. */
.hiw-num {
  flex: 0 0 auto;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  opacity: 0.65;
  padding-top: 3px;
  min-width: 22px;
}
.hiw-item p {
  color: var(--text-dim);
  font-size: 0.97rem;
  line-height: 1.68;
  margin: 0;
}

/* ------------------------- "more achievements" card ------------------------
   Two lines of text now, doing different jobs: `.more-impact` is the number a
   scanner is looking for, `.more-summary` is what actually happened for the
   person deciding whether to phone-screen him. They must not look alike, or
   the eye treats the second as a repeat of the first and skips it.

   The impact line borrows the featured card's accent chip so the two grids
   read as one system, just at different sizes.                              */
.more-impact {
  font-size: 0.84rem;
  color: var(--accent);
  font-weight: 600;
  background: rgba(67, 217, 217, 0.07);
  border: 1px solid rgba(67, 217, 217, 0.18);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
  line-height: 1.45;
}
.more-summary {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.62;
  margin-bottom: 0;
}
.more-item .tag-row { margin-top: 12px; }
.more-item .project-open { margin-top: 12px; font-size: 0.78rem; }
.more-item.is-openable:hover .project-open span { transform: translateX(4px); }

/* ------------------------------ reveal anim --------------------------------
   Content is visible by default (safe for no-JS, crawlers, slow devices).
   The hidden-then-fade-in effect only activates once js-anim is present on
   <html>, which main.js/inline script only adds when IntersectionObserver
   is confirmed available and about to be wired up. */
.reveal { opacity: 1; transform: none; }
html.js-anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
html.js-anim .reveal.in-view { opacity: 1; transform: translateY(0); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* The hamburger doesn't take over until 760px, so between 761 and 980 the
   full seven-link bar has to fit on one row. Adding "How I work" was what
   pushed it over on a tablet; tightening the pill padding buys back the
   ~60px needed without dropping a link or shrinking the type to unreadable. */
@media (max-width: 980px) and (min-width: 761px) {
  .nav-links { gap: 2px; }
  .nav-links a { padding: 8px 11px; font-size: 0.88rem; }
}

@media (max-width: 980px) {
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  /* Two columns of How I work needs ~440px per column before the lines start
     breaking mid-thought. Below that it reads better as one column. */
  .hiw-list { grid-template-columns: 1fr; gap: 20px; max-width: 640px; }
}

@media (max-width: 760px) {
  .section { padding: 76px 0; }
  .howiwork { padding: 52px 0; }
  .howiwork-title { margin-bottom: 24px; }
  .hero-opener { padding-left: 14px; margin-bottom: 18px; }
  .hero-availability { margin-bottom: 34px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--bg-alt);
    border-left: 1px solid var(--border);
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 40px 30px;
    gap: 6px;
    transition: right 0.3s ease;
  }
  .nav-links.open { right: 0; }
  .nav-links a { display: block; text-align: center; padding: 14px; font-size: 1.05rem; }
  .hero { padding-top: 120px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .timeline { padding-left: 28px; margin-left: 4px; }
  .timeline-item::before { left: -37.5px; }
  .media-gallery-strip { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
  .media-gallery-strip img:nth-child(n+4) { display: none; }
  .modal-close { right: 20px; top: 16px; }
  .modal-content { padding: 20px; max-height: 90vh; }
}

@media (max-width: 480px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 1.4rem; }
  .container { padding: 0 18px; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .orbit, .scroll-cue span { animation: none; }
}