/* ════════════════════════════════════════════════════════════════════
   codefather.dev — landing
   Tokens from design-concept/design-kit.png §02 §03 §06 §07.

   Pixel fidelity: the layout is authored against a 1586px design frame
   (the width of design-concept/screen1.png) with 1rem = 10px at that
   width. Every length is in rem, so the whole page scales as one piece
   and matches the mock-up proportionally at any desktop width.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* §02 Colour palette */
  --bg: #05080d;
  --surface: #0b1320;
  --card: #111827;
  --orange: #ff8a1f;
  --orange-2: #ffa53a;
  --text: #f4f7fb;
  --muted: #aab4c3;
  --blue: #57a8ff;

  /* §06 Stroke — 1px rgba(255,255,255,.08) */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --line-3: rgba(255, 255, 255, 0.42);
  --dim: #7f8b9c;

  --up: #4ade80;
  --dn: #f87171;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Dot matrix measured off screen3.png: 6px pitch at its 1225px render,
     i.e. 7.8px in the 1586 frame, dots ~+8 luminance over the ground. */
  --dots: radial-gradient(rgba(186, 212, 242, .06) 1px, transparent 1.5px);
  --dot-pitch: .78rem;
}

/* 1rem = 10px at the 1586px design width; clamped so the page neither
   collapses below ~1190px nor keeps growing past ~2000px. */
html {
  font-size: clamp(7.5px, 0.63052vw, 12.6px);
  scroll-behavior: smooth;
  scroll-padding-top: 12rem;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-synthesis-weight: none;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: rgba(255, 138, 31, 0.32); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 2rem; top: 2rem; z-index: 200;
  padding: 1rem 1.6rem; border-radius: .8rem;
  background: var(--orange); color: #10141c;
}

.wrap { width: 89.91%; max-width: 142.6rem; margin-inline: auto; }

.i-arr { width: 2rem; height: 2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Shared type ────────────────────────────────────────────────── */

/* §03 Section Heading */
.h2 {
  font-size: 6.4rem;
  line-height: 6.7rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.h2 em { font-style: normal; color: var(--orange); }
.h2 .muted { color: #9aa6b5; font-weight: 500; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 3rem;
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c3ccd6;
}
.eyebrow i { width: 4rem; height: .4rem; flex: none; background: var(--orange); }

/* Buttons — design-kit §04 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  height: 6rem;
  padding: 0 2.8rem;
  border: 1px solid transparent;
  border-radius: .9rem;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn--primary {
  background: var(--orange);
  color: #14181f;
  box-shadow: 0 1.4rem 4rem -1.8rem rgba(255, 138, 31, 0.95);
}
.btn--primary:hover { background: var(--orange-2); transform: translateY(-2px); }
.btn--primary:active { background: #d9701a; transform: none; }
.btn--ghost { border-color: var(--line-3); color: var(--text); }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .05); }
.btn--outline {
  height: 6rem;
  border-color: var(--line-3);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn--outline:hover { border-color: var(--orange); color: var(--orange); }

.round {
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: #c3ccd6;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.round svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.round:hover { border-color: var(--orange); color: var(--orange); }

/* Handwritten accent — design-kit §01.
   The mock-ups letter these by hand, so both lines are lifted straight out of
   the reference PNGs (`gen-scripts` in the README) rather than approximated
   with a webfont: screen2.png for About, screen7.png for Contact. */
.script-img { position: absolute; z-index: 3; pointer-events: none; }
.script-img--contact { left: 81.02%; top: 34.2rem; width: 27.5rem; }
.script-img--about { right: 1rem; top: 21rem; width: 34.5rem; }

/* Dotted world map — recoloured from a single generated SVG mask */
.map {
  -webkit-mask: url("/static/site/assets/landing/world-map.svg?v=b01a8b9266") center / 100% 100% no-repeat;
  mask: url("/static/site/assets/landing/world-map.svg?v=b01a8b9266") center / 100% 100% no-repeat;
  background-color: rgba(178, 190, 205, 0.2);
}
.pin {
  position: absolute;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: #ffb057;
  box-shadow: 0 0 1.4rem .4rem rgba(255, 138, 31, .85), 0 0 4.4rem 1.6rem rgba(255, 138, 31, .3);
}
.pin--lg { width: 1.3rem; height: 1.3rem; }

/* ── Header ─────────────────────────────────────────────────────────
   screen1.png: content centred on y=70 (band 60..76), brand cap band
   60..76 → 21px, nav 17px, CTA box 1344..1512 × 40..100 → 169×61. */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: 14rem;
  display: flex;
  align-items: center;
  transition: height .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 8, 13, .72), rgba(5, 8, 13, .28) 62%, transparent);
  pointer-events: none;
  transition: opacity .28s var(--ease);
}
.hdr.is-stuck {
  height: 8.4rem;
  background: rgba(5, 8, 13, .9);
  backdrop-filter: blur(1.4rem);
  border-bottom-color: var(--line);
}
.hdr.is-stuck::before { opacity: 0; }

.hdr__in {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 89.91%;
  max-width: 142.6rem;
  margin-inline: auto;
}

.brand {
  font-size: 2.1rem;
  line-height: 2.4rem;
  font-weight: 500;
  letter-spacing: normal;
  color: #eef2f6;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 4.7rem; margin-right: 3.9rem; }
.nav a {
  font-size: 1.7rem;
  line-height: 2.4rem;
  color: #cbd3dc;
  transition: color .2s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a.is-active { color: var(--orange); }

.hdr__cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 16.9rem;
  height: 6.1rem;
  border: 1px solid var(--line-3);
  border-radius: 1rem;
  font-size: 1.7rem;
  white-space: nowrap;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.hdr__cta:hover { border-color: var(--orange); color: var(--orange); }
.hdr__cta .i-arr { width: 1.9rem; height: 1.9rem; }

.burger { display: none; }

/* ── 1. Hero ────────────────────────────────────────────────────────
   Every offset below is measured off design-concept/screen1.png
   (1586x992). Box positions are back-computed from Inter's metrics
   (cap 0.7273em, ascender 0.9688em, descender 0.2415em) so the glyphs —
   not the line boxes — land where the mock-up puts them. */
/* Exactly one screen tall, whatever the monitor: the copy is centred rather
   than pinned to a fixed top offset, so it lifts and settles with the viewport
   instead of pushing the buttons below the fold. At the 1586x992 design size
   the centring lands the kicker within a pixel of the mock-up's y=165.5. */
.hero {
  /* Hero-local unit. It equals 1rem — the page-wide design scale — until the
     copy would no longer clear the fixed header on a short screen, and then
     tracks the viewport height instead. 67.2u is the copy's own height, from
     the kicker's line box to the bottom of the buttons. */
  --u: min(1rem, calc((100svh - 13.5rem) / 67.2));
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: start;
  /* 16.55rem reproduces the mock-up's y=165.5; on a taller screen the copy
     centres instead, on a shorter one it stays clear of the header. */
  padding: max(12.4rem, calc((100svh - 67.2 * var(--u)) * .517)) 0 0;
  overflow: hidden;
  isolation: isolate;
}

.hero__art { position: absolute; inset: 0; z-index: -1; }

/* Default: the retouched scene, portrait already composited. */
.hero__flat,
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 69% 50%;
}

/* Layered by default: the room and the portrait are separate plates, so the
   portrait can be a sharp studio shot and the two can drift at different rates
   under the pointer. body[data-hero="flat"] falls back to the composited plate. */
.hero__flat { display: none; }
body[data-hero="flat"] .hero__flat { display: block; }
body[data-hero="flat"] .hero__bg,
body[data-hero="flat"] .hero__person { display: none; }

/* Aligned to screen1.png by matching the head: hair top y=145, chin y=545,
   head centre x=1165 in the 1586x992 frame. */
.hero__person {
  position: absolute;
  left: calc(50% + 1 * var(--u));      /* design x=803 on the 1586 stage */
  top: calc(3.8 * var(--u));
  width: calc(72.2 * var(--u));
  height: auto;
}

/* Faint dotted world behind the headline (screen1, left half) */
.hero__map {
  position: absolute;
  left: calc(50% - 31.1 * var(--u));   /* design x=482 */
  top: calc(13.9 * var(--u));
  width: calc(77 * var(--u));
  height: calc(43.5 * var(--u));
  opacity: 1;
  /* Fades out before the portrait: in screen1.png the dots stop at the
     silhouette rather than running across the face. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 61%, transparent 69%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 61%, transparent 69%);
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(150, 172, 190, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 172, 190, .045) 1px, transparent 1px);
  background-size: calc(3.4 * var(--u)) calc(3.4 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 55%, transparent 76%);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 55%, transparent 76%);
}

.hero__dots {
  position: absolute;
  inset: -6% -4%;
  width: 108%;
  height: 112%;
  object-fit: cover;
  opacity: .16;
  mix-blend-mode: screen;
}

/* Left scrim keeps the headline readable over the photograph */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(5, 8, 13, .9) 16%, rgba(5, 8, 13, .5) 30%, rgba(5, 8, 13, .1) 43%, transparent 52%),
    linear-gradient(0deg, var(--bg) 0%, rgba(5, 8, 13, .3) 10%, transparent 26%),
    linear-gradient(180deg, rgba(5, 8, 13, .45) 0%, transparent 16%);
}

.hero__in { position: relative; }
.hero__copy { max-width: calc(96 * var(--u)); }

/* Kicker — cap band 171..180, rule 80..205, text starts x=225 */
.kicker {
  display: flex;
  align-items: center;
  margin-bottom: calc(4.34 * var(--u));
  font-size: calc(1.25 * var(--u));
  line-height: calc(2 * var(--u));
  font-weight: 500;
  letter-spacing: .376em;
  text-transform: uppercase;
  color: #d5dce4;
}
.kicker i { width: calc(12.5 * var(--u)); height: 1px; flex: none; margin-right: calc(2 * var(--u)); background: #59656f; }
.kicker b { width: calc(.35 * var(--u)); height: calc(.35 * var(--u)); margin: 0 calc(2.4 * var(--u)); border-radius: 50%; background: var(--orange); font-size: 0; }

/* §03 Display / Hero — cap 67px → 92px, cap tops at y=238 and y=324 */
.hero__name {
  margin-bottom: calc(1.18 * var(--u));
  font-size: calc(9.2 * var(--u));
  line-height: calc(8.6 * var(--u));
  font-weight: 800;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.hero__name span { display: block; }
.hero__name .accent { color: var(--orange); }

/* Role — ascender tops at y=422 / y=483 */
.hero__role {
  margin-bottom: calc(3.42 * var(--u));
  font-size: calc(5.5 * var(--u));
  line-height: calc(6.1 * var(--u));
  font-weight: 500;
  letter-spacing: .02em;
  color: #f2f5f8;
}

/* Stack — band 574..597, total width 798px */
.hero__stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: calc(5.81 * var(--u));
  font-size: calc(2.3 * var(--u));
  line-height: calc(2.8 * var(--u));
  letter-spacing: -.012em;
  color: #d6dce4;
}
.hero__stack b { width: calc(.6 * var(--u)); height: calc(.6 * var(--u)); margin: 0 calc(3 * var(--u)); border-radius: 50%; background: var(--orange); font-size: 0; }

/* Capabilities — icons 48px tall, row top y=655, labels start x=161 */
.caps { display: flex; justify-content: space-between; width: calc(77.9 * var(--u)); margin-bottom: calc(6.5 * var(--u)); }
.caps li { display: flex; align-items: center; gap: calc(3.2 * var(--u)); }
.caps svg {
  width: calc(4.8 * var(--u));
  height: calc(4.8 * var(--u));
  flex: none;
  fill: none;
  stroke: #e8edf3;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.caps span { font-size: calc(1.6 * var(--u)); line-height: calc(2.3 * var(--u)); color: #e2e8ef; }

/* Buttons — primary 228x69 at x=80, secondary 229 wide, 28px gap */
.hero__btns { display: flex; gap: calc(2.8 * var(--u)); }
.hero__btns .btn {
  width: calc(22.8 * var(--u));
  height: calc(6.9 * var(--u));
  padding: 0 calc(2.8 * var(--u));
  gap: calc(1.2 * var(--u));
  border-radius: calc(.9 * var(--u));
  font-size: calc(1.9 * var(--u));
}
.hero__btns .btn--ghost { width: calc(22.9 * var(--u)); }
.hero__btns .i-arr { width: calc(2 * var(--u)); height: calc(2 * var(--u)); }

/* Right rail — hairline at x=1355, quote at 1385/392, dash 45x4 at 538,
   motto cap top 627. Positioned off the hero, not the text column: the
   longest quote line overruns the content grid in the mock-up. */
.hero__rail {
  position: absolute;
  left: calc(50% + 56.2 * var(--u));   /* design x=1355 */
  top: auto;
  bottom: calc(1.4 * var(--u));
  width: calc(19 * var(--u));
  padding: calc(8.35 * var(--u)) 0 0 calc(3 * var(--u));
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.hero__quote { font-size: calc(2.2 * var(--u)); line-height: calc(3.3 * var(--u)); color: #dde3ea; }
.hero__quote::after {
  content: "";
  display: block;
  width: calc(4.5 * var(--u));
  height: calc(.4 * var(--u));
  margin-top: calc(2.25 * var(--u));
  background: var(--orange);
}
.hero__motto {
  margin-top: calc(7.63 * var(--u));
  font-size: calc(1.65 * var(--u));
  line-height: calc(2.93 * var(--u));
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #cfd7df;
}

/* ── Sections ───────────────────────────────────────────────────── */
.sect { position: relative; padding: 10rem 0; overflow: hidden; }
.sect__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
  margin: 2.6rem 0 5.6rem;
}

/* ── 2. About ───────────────────────────────────────────────────── */
.about {
  position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: start;
  min-height: 89.3rem;
  background: var(--dots) 0 0 / var(--dot-pitch) var(--dot-pitch),
              linear-gradient(180deg, #05080d, #070b12);
  overflow: hidden;
}

.about__globe { position: relative; align-self: stretch; }
.about__globe img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.about__globe::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 84%, #070b12 100%),
    linear-gradient(0deg, #070b12 0%, transparent 10%),
    linear-gradient(180deg, #05080d 0%, transparent 9%);
}

.about__copy { padding: 14.29rem 5.1rem 0 5.4rem; }
.about__copy .h2 {
  margin: 4.26rem 0 0;
  font-size: 5.9rem;
  line-height: 6.15rem;
}
.about__lead {
  max-width: 68rem;
  margin-top: 2.76rem;
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: #b6c0cc;
}

.stats { display: flex; margin-top: 4.97rem; }
.stats > div {
  padding: 0 3.4rem;
  /* the mock-up's stat rules read brighter than the generic hairline */
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.stats > div:first-child { padding-left: 0; border-left: 0; }
.stats > div:last-child { padding-right: 0; }
.stats dt {
  margin-bottom: .96rem;
  white-space: nowrap;
  font-size: 3.1rem;
  line-height: 3.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--orange);
}
.stats dd { font-size: 2.1rem; line-height: 2.65rem; color: #b6c0cc; }

/* ── 3. Expertise ───────────────────────────────────────────────── */
.expertise {
  background: var(--dots) 0 0 / var(--dot-pitch) var(--dot-pitch),
              linear-gradient(180deg, #070b12, #05080d 55%);
}
.expertise .wrap { position: relative; }

/* screen3: the button sits on the eyebrow row, the pull-quote pair below it */
.expertise__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
}
.expertise .h2 { font-size: 6.4rem; line-height: 7.2rem; }
.expertise .sect__head { align-items: flex-start; margin: 3.4rem 0 5.2rem; }
.expertise__aside { display: flex; gap: 3.4rem; margin: 1.4rem 0 0 auto; flex: none; }
.expertise__quote { width: 15rem; font-size: 2.1rem; line-height: 3.2rem; color: #b6c0cc; }
.expertise__quote::after {
  content: "";
  display: block;
  width: 4.2rem;
  height: .4rem;
  margin-top: 1.6rem;
  background: var(--orange);
}
.expertise__values {
  padding-left: 3.4rem;
  border-left: 1px solid var(--line-2);
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #b6c0cc;
}
.expertise .btn--outline { flex: none; width: 21.6rem; height: 6rem; }

.skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
.skill {
  padding: 3.4rem 3.4rem 3.8rem;
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  background: linear-gradient(150deg, #121b28, #0c131d);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.skill:hover {
  border-color: rgba(255, 138, 31, .42);
  transform: translateY(-4px);
  box-shadow: 0 3rem 6rem -3.4rem rgba(0, 0, 0, .9);
}
.skill header {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  align-items: center;
  gap: 1.8rem;
  margin-bottom: 3rem;
}
.skill__ico { width: 6rem; height: 6rem; }
.skill h3 { font-size: 2.6rem; line-height: 3.2rem; font-weight: 600; letter-spacing: -0.025em; }
.skill header p { margin-top: .6rem; font-size: 1.9rem; line-height: 2.4rem; color: #a8b3c0; }
.skill__arr { color: #7f8b9c; transition: color .2s var(--ease), transform .2s var(--ease); }
.skill:hover .skill__arr { color: var(--orange); transform: translateX(3px); }

.skill ul { display: grid; gap: 1.4rem; }
.skill li {
  position: relative;
  padding-left: 2.8rem;
  font-size: 1.95rem;
  line-height: 2.6rem;
  color: #bcc6d2;
}
.skill li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .9rem;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--orange);
}


/* ── 4. Selected work ───────────────────────────────────────────── */
.work {
  padding-top: 4.6rem;
  background: var(--dots) 0 0 / var(--dot-pitch) var(--dot-pitch), var(--bg);
}
.work__map {
  position: absolute;
  right: -3rem;
  top: -9rem;
  width: 97rem;
  height: 54.8rem;
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 20%, #000 40%, transparent 56%);
  mask-image: linear-gradient(180deg, transparent 8%, #000 20%, #000 40%, transparent 56%);
}
.work .wrap { position: relative; }
.work .sect__head { margin: 3.3rem 0 0; }
.work .h2 { font-size: 6.7rem; line-height: 6.5rem; }
.work .h2 .muted { font-size: 4.2rem; }
.work__nav { display: flex; gap: 1.4rem; flex: none; margin-top: 1rem; }

.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.proj {
  display: flex;
  flex-direction: column;
  padding: 2rem 2rem 2.6rem;
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  background: linear-gradient(150deg, #0e1621, #090e16);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.proj:hover {
  border-color: rgba(255, 138, 31, .4);
  transform: translateY(-5px);
  box-shadow: 0 3.4rem 7rem -4rem rgba(0, 0, 0, .95);
}
.proj h3 {
  margin: 2.6rem 0 1.4rem;
  font-size: 3.6rem;
  line-height: 4.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.proj > p {
  flex: 1;
  margin-bottom: 2.4rem;
  font-size: 2.05rem;
  line-height: 2.8rem;
  color: #b0bbc8;
}
.tags { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.8rem; }
.tags li {
  padding: .9rem 1.6rem;
  border: 1px solid var(--line-2);
  border-radius: .7rem;
  font-size: 1.7rem;
  line-height: 2.2rem;
  color: #c3ccd6;
}
.proj__link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.95rem;
  font-weight: 600;
  color: var(--orange);
  transition: gap .2s var(--ease);
}
.proj__link:hover { gap: 1.6rem; }

/* ── Project mock-ups ───────────────────────────────────────────────
   Built as markup rather than screenshots so they stay crisp at any DPI.
   Proportions follow screen5.png: 321px tall inside a card, ~10px type. */
.mock {
  position: relative;
  height: 32.1rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1rem;
  background: #080d15;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.4rem;
  color: #9aa6b5;
}
.mock__top {
  display: flex;
  align-items: center;
  gap: .8rem;
  height: 3.8rem;
  padding: 0 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mock__top b { font-size: 1.3rem; font-weight: 600; color: #e6ecf3; letter-spacing: -.01em; }
.mock__logo { width: 1.9rem; height: 1.9rem; flex: none; }
.mock__top nav { display: flex; gap: 1rem; margin-left: 1rem; }
.mock__top nav i { font-style: normal; font-size: 1rem; color: #7f8b9c; }
.mock__top nav i.on { color: #e6ecf3; border-bottom: 1.5px solid var(--orange); padding-bottom: .4rem; }
.mock__state {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  font-size: 1rem;
  color: var(--up);
}
.mock__state::before { content: ""; width: .65rem; height: .65rem; border-radius: 50%; background: var(--up); }

/* Shared node / chip vocabulary */
.node {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .5rem;
  background: rgba(255, 255, 255, .03);
  font-size: .95rem;
  color: #ccd5df;
}
.node svg { width: 1.35rem; height: 1.35rem; flex: none; color: #7fa6cf; }
.node > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip {
  padding: .5rem .7rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .5rem;
  font-size: 1rem;
  color: #b6c0cc;
  white-space: nowrap;
}
.mock__col { position: relative; z-index: 1; display: grid; gap: .6rem; align-content: start; }
.mock__col > i { font-style: normal; font-size: 1rem; color: #7f8b9c; margin-bottom: .2rem; }

/* ── tacticstrade.ai dashboard ─────────────────────────────────────
   Rebuilt from the product's own design in
   ~/Documents/projects/tacticstrade.ai/design/1screen.png — the gold
   (#f1bd08) and the mint green (#3deb87) are sampled off that file, not
   guessed, so the card reads as the product rather than as a generic
   terminal. */
.mock--trade { --gold: #f1bd08; --mint: #3deb87; }
.mock--trade .ts {
  display: grid;
  grid-template-columns: 9.7rem minmax(0, 1fr);
  gap: .9rem;
  padding: .9rem 1rem;
  height: calc(100% - 3.8rem);
}
.ts__nav { display: grid; gap: .12rem; align-content: start; min-width: 0; }
.ts__nav-i {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .46rem .55rem;
  border-radius: .45rem;
  font-size: .95rem;
  color: #98a2ae;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts__nav-i svg { width: 1.25rem; height: 1.25rem; flex: none; }
.ts__nav-i.is-on { color: var(--gold); background: rgba(241, 189, 8, .09); }

.ts__right { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .7rem; min-width: 0; }
.ts__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: .7rem .8rem .5rem;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: .6rem;
  background: rgba(255, 255, 255, .012);
}
.ts__head { display: flex; align-items: center; gap: .6rem; }
.ts__head b { font-size: 1.15rem; font-weight: 600; color: #eef2f7; }
.ts__sel {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
  padding: .22rem .45rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .4rem;
  font-size: .85rem;
  color: #b6c0cc;
  white-space: nowrap;
}
.ts__sel svg { width: .95rem; height: .95rem; flex: none; }

.ts__sub { display: flex; align-items: flex-end; gap: .6rem; margin-top: .35rem; }
.ts__ret i { display: block; font-style: normal; font-size: .85rem; color: #7f8b9c; }
.ts__ret b { display: block; font-size: 1.5rem; font-weight: 700; color: var(--mint); letter-spacing: -.02em; }
.ts__tf { display: flex; gap: .25rem; margin-left: auto; }
.ts__tf i {
  font-style: normal;
  padding: .16rem .34rem;
  border: 1px solid transparent;
  border-radius: .34rem;
  font-size: .82rem;
  color: #7f8b9c;
}
.ts__tf i.is-on { border-color: rgba(241, 189, 8, .55); color: var(--gold); }

/* The plot is its own stacking context so the end-of-series dot can sit on
   top of the chart without the chart's own overflow clipping its glow. */
.ts__plot { position: relative; flex: 1; min-height: 0; margin-top: .3rem; padding-left: 2.4rem; }
.ts__chart { width: 100%; height: 100%; display: block; }
.ts__y {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: .78rem;
  line-height: 1;
  color: #59646f;
}
.ts__y i { font-style: normal; transform: translateY(-.35em); }
.ts__pin {
  position: absolute;
  right: -.2rem;
  top: 11.05%;                      /* the curve ends at y=13.7 of 124 */
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 .5rem .12rem rgba(241, 189, 8, .85);
}
.ts__x {
  display: flex;
  justify-content: space-between;
  margin: .3rem 0 0 2.4rem;
  font-size: .78rem;
  color: #59646f;
}
.ts__x i { font-style: normal; }

.ts__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.ts__kpis span {
  padding: .45rem .45rem;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: .5rem;
  background: rgba(255, 255, 255, .022);
  min-width: 0;
}
.ts__kpis i {
  display: block;
  font-style: normal;
  /* .78rem puts "Max Drawdown" at 54.9px in a 55px cell — the ellipsis fires on
     sub-pixel rounding. .72rem leaves ~4px of margin. */
  font-size: .72rem;
  color: #7f8b9c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts__kpis b { display: block; margin-top: .1rem; font-size: 1.2rem; font-weight: 600; color: #eef2f7; }

.up { color: var(--up); } .dn { color: var(--dn); }

/* ── Integration layer / data platform ────────────────────────────── */
.mock--bus .mock__bus,
.mock--data .mock__data {
  display: grid;
  gap: .7rem;
  padding: 1.1rem;
  height: calc(100% - 3.8rem);
  align-items: center;
}
.mock--bus .mock__bus { grid-template-columns: 1fr 1.05fr 1fr; }
.mock--data .mock__data { grid-template-columns: .82fr 2.05fr .82fr; height: calc(100% - 9.6rem); align-items: start; }
.mock--data .node { font-size: .9rem; padding: .58rem .5rem; gap: .45rem; }
.mock--data .node svg { width: 1.25rem; height: 1.25rem; }

.mock__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mock__wires .w { fill: none; stroke: #46596c; stroke-width: .45; }
.mock__wires .w--hot { stroke: #b06a2c; }
.mock__wires .wd circle { fill: #6d8399; }

.mock__center { position: relative; z-index: 1; display: grid; gap: .5rem; justify-items: center; }
.mock__ops { display: flex; gap: .5rem; }
.mock__core {
  display: grid;
  justify-items: center;
  gap: .2rem;
  width: 84%;
  padding: .9rem .7rem;
  margin: .3rem 0;
  border: 1px solid rgba(87, 168, 255, .5);
  border-radius: .7rem;
  background: rgba(87, 168, 255, .07);
}
.mock__core svg { width: 1.8rem; height: 1.8rem; margin-bottom: .2rem; }
.mock__core b { font-size: 1.25rem; font-weight: 600; color: #dbe7f5; }
.mock__core i { font-style: normal; font-size: .95rem; color: #8fa4bb; }

.mock__pipe { display: flex; align-items: flex-start; justify-content: center; gap: .4rem; padding-top: 2.2rem; }
.mock__pipe .arw { color: var(--orange); font-size: 1.5rem; line-height: 1; flex: none; margin-top: 3.6rem; }
.stage { display: grid; gap: .4rem; justify-items: center; min-width: 0; }
.stage i { font-style: normal; font-size: .9rem; line-height: 1.2rem; color: #7f8b9c; white-space: nowrap; }
.tile {
  display: grid;
  justify-items: center;
  gap: .45rem;
  padding: 1.1rem .5rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .55rem;
  background: rgba(255, 255, 255, .03);
  width: 100%;
}
.tile svg { width: 2.2rem; height: 2.2rem; }
.tile em { font-style: normal; font-size: .9rem; color: #ccd5df; white-space: nowrap; }

.mock__obs {
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 4.6rem;
  border: 1px dashed rgba(255, 255, 255, .15);
  border-radius: .6rem;
  font-size: 1rem;
  color: #8994a3;
}
.mock__obs svg { width: 2.2rem; height: 1.1rem; flex: none; }

/* ── 5. Experience ──────────────────────────────────────────────── */
.exp {
  background: var(--dots) 0 0 / var(--dot-pitch) var(--dot-pitch),
              linear-gradient(180deg, #05080d, #070d16);
}
.exp__map {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 90rem;
  height: 51rem;
  opacity: 1;
}
.exp { padding: 14.3rem 0 10rem; }
.exp .wrap { position: relative; }
.exp .h2 { margin-top: 2.9rem; font-size: 7.6rem; line-height: 7.7rem; letter-spacing: -.024em; }
.exp__sub {
  margin: 1.4rem 0 2.7rem;
  font-size: 3.04rem;
  line-height: 4rem;
  font-weight: 400;
  color: #9aa6b5;
}

.tl { position: relative; }
.tl::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.4rem;
  bottom: 4rem;
  width: 1px;
  background: rgba(255, 255, 255, .18);
}
.tl__row {
  display: grid;
  grid-template-columns: 6.9rem 28rem 52.1rem 1fr;
  align-items: start;
  padding: 2.26rem 0;
  border-bottom: 1px solid var(--line);
}
.tl__row:last-child { border-bottom: 0; }
.tl__dot {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .9rem;
  border-radius: 50%;
  background: #9aa6b5;
  box-shadow: 0 0 0 .5rem #05080d;
}
.tl__row.is-now .tl__dot {
  background: var(--orange);
  box-shadow: 0 0 0 .5rem #05080d, 0 0 2rem .4rem rgba(255, 138, 31, .6);
}
.tl__date { font-size: 2.4rem; line-height: 3.2rem; color: #cdd5df; white-space: nowrap; }
.tl__date b { font-weight: 400; color: #7f8b9c; padding: 0 .4rem; }
.tl__role b { display: block; font-size: 2.55rem; line-height: 3.2rem; font-weight: 600; letter-spacing: -.02em; color: #eef2f7; }
.tl__role i { display: block; margin-top: .8rem; font-style: normal; font-size: 2.2rem; line-height: 2.8rem; color: #8994a3; }
.tl__desc { font-size: 2.05rem; line-height: 3.2rem; color: #b0bbc8; }

/* ── 6. Contact ─────────────────────────────────────────────────── */
.contact {
  padding: 10.77rem 0 8.06rem;
  background: var(--dots) 0 0 / var(--dot-pitch) var(--dot-pitch), var(--bg);
}
.contact__in {
  display: grid;
  grid-template-columns: 56% 44%;
  align-items: start;
  gap: 4rem;
}
.contact__art { align-self: center; }
.contact__copy .h2 { margin: 4.2rem 0 0; font-size: 6.4rem; line-height: 6.92rem; }
.contact__lead {
  max-width: 76rem;
  margin: 2.61rem 0 5.4rem;
  font-size: 2.75rem;
  line-height: 3.99rem;
  color: #b0bbc8;
}
.contact__btns { display: flex; gap: 3rem; }
.contact__btns .btn { width: 24.8rem; height: 7rem; }

.contact__art { position: relative; height: 46rem; }
.contact__map {
  position: absolute;
  inset: -2rem -2rem 2rem 0;
  width: 100%;
  height: auto;
  opacity: .9;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  background: var(--dots) 0 0 / var(--dot-pitch) var(--dot-pitch), var(--bg);
}
.foot__in {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 4rem;
  padding: 5.4rem 0 4rem;
}
.foot__brand .brand { display: inline-block; margin-bottom: 1.2rem; }
.foot__brand p { font-size: 2rem; line-height: 2.8rem; color: #8994a3; }
.foot__soc { display: flex; align-items: center; gap: 5.4rem; }
.foot__soc a {
  display: inline-flex;
  align-items: center;
  gap: 1.3rem;
  font-size: 2.1rem;
  color: #dfe5ec;
  transition: color .2s var(--ease);
}
.foot__soc a:hover { color: var(--orange); }
.foot__soc svg { width: 2.6rem; height: 2.6rem; flex: none; }
.round--top { justify-self: end; }

/* ── Motion ─────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Parallax layers — offsets set from script.js */
.hero__bg, .hero__dots, .hero__map {
  will-change: transform;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1190px) {
  html { font-size: 8.4px; }
  .wrap, .hdr__in { width: auto; max-width: none; margin-inline: 4rem; }

  .hero__rail { display: none; }
  .hero__in { grid-template-columns: 1fr; }
  .caps { width: auto; gap: 3.2rem 4.8rem; flex-wrap: wrap; justify-content: flex-start; }

  .about { grid-template-columns: 1fr; min-height: 0; }
  .about__globe { height: 46rem; }
  .about__globe::after { background: linear-gradient(0deg, #070b12 6%, transparent 40%); }
  .about__copy { padding: 6rem 4rem 8rem; }

  .skills, .projects { grid-template-columns: repeat(2, 1fr); }
  .expertise__aside { display: none; }

  .contact__in { grid-template-columns: 1fr; }
  .contact__art { height: 38rem; }
}

@media (max-width: 900px) {
  html { font-size: 9px; }
  .hdr { height: 9rem; }
  .hdr.is-stuck { height: 7.4rem; }

  .nav {
    position: fixed;
    inset: 9rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 4rem 3rem;
    background: rgba(5, 8, 13, .97);
    backdrop-filter: blur(1.4rem);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 1.6rem 0; font-size: 2rem; border-bottom: 1px solid var(--line); }

  .hdr__cta { display: none; }
  .burger {
    display: grid;
    place-content: center;
    gap: .5rem;
    justify-self: end;
    width: 4.8rem;
    height: 4.8rem;
    border: 1px solid var(--line-2);
    border-radius: .8rem;
  }
  .burger span { display: block; width: 2rem; height: 1.6px; background: var(--text); transition: transform .25s var(--ease), opacity .25s var(--ease); }
  body.nav-open .burger span:nth-child(1) { transform: translateY(.65rem) rotate(45deg); }
  body.nav-open .burger span:nth-child(2) { opacity: 0; }
  body.nav-open .burger span:nth-child(3) { transform: translateY(-.65rem) rotate(-45deg); }

  .hero {
    min-height: 0;
    padding: 13rem 0 6rem;
    text-align: left;
  }
  .hero__person { left: auto; right: -22%; top: 4%; width: 86%; max-width: none; opacity: .42; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(5, 8, 13, .55) 0%, rgba(5, 8, 13, .88) 30%, rgba(5, 8, 13, .96) 55%, var(--bg) 80%),
      linear-gradient(90deg, var(--bg) 0%, transparent 80%);
  }
  .hero__map, .hero__grid { display: none; }
  .hero { padding-top: 12rem; }
  .hero__name { font-size: 6.4rem; line-height: 6.2rem; letter-spacing: -.03em; }
  .hero__role { font-size: 3.4rem; line-height: 4.2rem; }
  .hero__stack { font-size: 1.9rem; }
  .hero__stack b { margin: 0 1.6rem; }
  .kicker { font-size: 1.15rem; letter-spacing: .24em; }
  .kicker i { width: 5rem; margin-right: 1.4rem; }
  .kicker b { margin: 0 1.6rem; }
  .brand { font-size: 1.7rem; letter-spacing: .28em; }
  .caps { gap: 3rem 4rem; }
  .hero__btns { flex-wrap: wrap; gap: 1.6rem; }

  .sect { padding: 8rem 0; }
  /* Per-section heading sizes are set with two-class selectors, so the
     narrow-viewport override has to match that specificity. */
  .h2,
  .about__copy .h2,
  .expertise .h2,
  .work .h2,
  .exp .h2,
  .contact__copy .h2 { font-size: 4.6rem; line-height: 5.4rem; }
  .work .h2 .muted { font-size: 3.2rem; }
  .exp__sub { font-size: 2.4rem; line-height: 3.4rem; }
  .about__lead { font-size: 2rem; line-height: 3rem; }
  .contact__lead { font-size: 2.1rem; line-height: 3.2rem; }
  .stats dt { font-size: 2.6rem; }
  .stats dd { font-size: 1.8rem; line-height: 2.4rem; }
  .proj h3 { font-size: 3.6rem; line-height: 4.2rem; }
  .tl__role b { font-size: 2.2rem; line-height: 2.8rem; }
  .tl__date { font-size: 2rem; }
  .tl__desc { font-size: 1.8rem; line-height: 2.8rem; }
  .sect__head { flex-direction: column; }
  .skills, .projects { grid-template-columns: 1fr; }

  .stats { flex-wrap: wrap; gap: 3rem 0; }
  .stats > div { width: 50%; }
  .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }


  .tl__row { grid-template-columns: 1.6rem 1fr; gap: 1.4rem 2rem; }
  .tl__date { grid-column: 2; }
  .tl__role, .tl__desc { grid-column: 2; }

  .foot__in { grid-template-columns: 1fr; gap: 3rem; }
  .round--top { justify-self: start; }

  .work__map, .exp__map { opacity: .35; }
}

@media (max-width: 760px) {
  /* The in-card product mock-ups have an intrinsic minimum width; below this
     breakpoint they must shrink rather than widen the page. */
  .proj, .projects, .mock, .mock__bus, .mock__data,
  .ts, .ts__nav, .ts__right, .ts__panel, .ts__kpis, .mock__col, .mock__center,
  .mock__pipe, .stage, .node, .chip { min-width: 0; }
  .mock__top { overflow: hidden; }
  .mock__top nav { display: none; }
  .mock--trade .ts { grid-template-columns: 8.2rem minmax(0, 1fr); }
  .ts__nav-i span { display: none; }

  .expertise__top { flex-wrap: wrap; gap: 2.4rem; }
  .expertise .btn--outline { width: auto; padding: 0 2rem; }

  .hero__btns .btn,
  .contact__btns .btn { width: auto; min-width: 0; padding: 0 2.2rem; }
  .hero__btns,
  .contact__btns { flex-wrap: wrap; gap: 1.6rem; }
  .contact__copy, .contact__in > * { min-width: 0; }
  .tags li { font-size: 1.5rem; }

  .foot__in > * { min-width: 0; }
  .foot__soc { flex-wrap: wrap; gap: 1.8rem 3rem; }
}

@media (max-width: 560px) {
  .brand { font-size: 1.7rem; }
  .hdr__in { gap: 1.6rem; }
  .hero__name { font-size: 5rem; line-height: 5rem; }
  .hero__role { font-size: 2.9rem; line-height: 3.6rem; }
  .hero__stack { font-size: 1.7rem; }
  .hero__stack b { margin: 0 1.2rem; }
  .kicker i { display: none; }
  .caps { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem 2rem; }
  .caps li { gap: 1.6rem; }
  .caps svg { width: 4rem; height: 4rem; }
  .caps span { font-size: 1.5rem; line-height: 2rem; }
  .hero__person { right: -32%; top: 2%; width: 104%; opacity: .3; }

  .h2,
  .about__copy .h2,
  .expertise .h2,
  .work .h2,
  .exp .h2,
  .contact__copy .h2 { font-size: 3.8rem; line-height: 4.4rem; }
  .work .h2 .muted { font-size: 2.8rem; }
  .proj h3 { font-size: 3rem; line-height: 3.6rem; }
  .stats > div { padding: 0 1.8rem; }
  .stats > div:first-child { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}