:root {
  color-scheme: dark;
  --night: #101612;
  --night-soft: #161f19;
  --ink: #f0f1e8;
  --muted: #a3ad9f;
  --line: rgb(220 230 211 / 17%);
  --lime: #d8ff70;
  --orange: #ff9974;
  --practice-a: #d8ff70;
  --practice-b: #b9e66b;
  --practice-c: #a4ce5e;
  --practice-ink: #20291a;
  --practice-copy: #394731;
  --practice-muted: #52623d;
  --practice-line: rgb(58 73 43 / 25%);
  --practice-ring: rgb(42 61 28 / 14%);
  --practice-ring-soft: rgb(42 61 28 / 4%);
  --display: "Bricolage Grotesque", "Arial Rounded MT Bold", sans-serif;
  --body: "Instrument Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; background: var(--night); }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: radial-gradient(ellipse at 80% 18%, #1b2920 0, transparent 43%), var(--night); color: var(--ink); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
body[data-palette="ember"] { --lime: #ff9b74; --orange: #ffd07d; --practice-a: #ffb17c; --practice-b: #f39771; --practice-c: #d87961; --practice-ink: #331e19; --practice-copy: #52392e; --practice-muted: #704c3c; --practice-line: rgb(79 46 37 / 25%); --practice-ring: rgb(91 42 27 / 14%); --practice-ring-soft: rgb(91 42 27 / 4%); background: radial-gradient(ellipse at 80% 18%, #2b211c 0, transparent 43%), #111513; }
body[data-palette="glacier"] { --lime: #86dcf4; --orange: #a6a9ff; --practice-a: #b2ecf0; --practice-b: #8bd2e5; --practice-c: #6bb8d9; --practice-ink: #17323c; --practice-copy: #365765; --practice-muted: #466b79; --practice-line: rgb(35 67 81 / 25%); --practice-ring: rgb(29 81 105 / 14%); --practice-ring-soft: rgb(29 81 105 / 4%); background: radial-gradient(ellipse at 80% 18%, #1a2730 0, transparent 43%), #10161b; }
body::before { position: fixed; z-index: 0; inset: 0; pointer-events: none; content: ""; opacity: .21; background-image: linear-gradient(rgb(218 236 201 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(218 236 201 / 7%) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
body::after { position: fixed; z-index: 0; inset: 0; pointer-events: none; content: ""; background: radial-gradient(ellipse at center, transparent 37%, rgb(4 8 6 / 38%) 100%); }
a { color: inherit; }
::selection { background: var(--lime); color: #132015; }

.world-canvas { position: fixed; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.has-world .world-canvas { opacity: .92; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; transform: translateY(-160%); padding: 12px 16px; background: var(--lime); color: #132015; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.site-header, main, .site-footer { position: relative; z-index: 1; }
.site-header { position: sticky; top: 0; height: 76px; max-width: 1440px; padding: 0 7.05%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: rgb(13 19 15 / 72%); backdrop-filter: blur(15px); }
.site-header::after { position: absolute; bottom: -1px; left: 0; width: var(--scroll-progress, 0%); height: 1px; background: var(--lime); box-shadow: 0 0 12px rgb(216 255 112 / 56%); content: ""; transition: width .08s linear; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.wordmark-mark, .footer-mark { display: inline-grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgb(216 255 112 / 42%); border-radius: 50%; background: linear-gradient(145deg, #27352a, #111713 70%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 5px 17px rgb(0 0 0 / 25%); color: var(--ink); font: 700 18px/1 var(--display); letter-spacing: -1.4px; transform: translateZ(16px); }
.wordmark-mark span, .footer-mark span { color: var(--lime); }
.wordmark-name, .main-nav a, .eyebrow, .hero-footnote, .section-label, .practice-aside, .practice-bottom, .art-topline, .art-caption, .scroll-cue, .experience-date, .row-index, .experience-tag, .contact-kicker, .back-to-top, .copyright { font-family: var(--mono); }
.wordmark-name { font-size: 9px; letter-spacing: .12em; }
.main-nav { display: flex; gap: clamp(24px, 4vw, 58px); align-items: center; }
.main-nav a { color: #c1cbbd; font-size: 9px; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; transition: color .2s ease, transform .2s ease; }
.main-nav a:hover, .text-link:hover { color: var(--lime); }
.main-nav a:hover { transform: translateY(-2px); }
.main-nav .nav-contact { padding: 10px 14px; border: 1px solid rgb(216 255 112 / 42%); border-radius: 2px; background: linear-gradient(120deg, rgb(216 255 112 / 11%), rgb(216 255 112 / 2%)); }
.nav-contact span { margin-left: 7px; color: var(--lime); font-size: 13px; }
.section-wrap { width: min(100% - 14.1%, 1236px); margin-inline: auto; }

.hero { min-height: min(795px, calc(100svh - 76px)); min-height: max(680px, calc(100svh - 76px)); padding-top: 76px; padding-bottom: 94px; position: relative; display: grid; grid-template-columns: 1.03fr .97fr; gap: clamp(34px, 7vw, 104px); align-items: center; isolation: isolate; }
.hero-copy { position: relative; z-index: 1; padding: 7px 0 22px; transform: perspective(1000px) translateZ(16px); }
.eyebrow { margin: 0 0 29px; display: flex; align-items: center; gap: 10px; color: #bac6b6; font-size: 9px; letter-spacing: .1em; }
.status-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgb(216 255 112 / 12%), 0 0 17px rgb(216 255 112 / 63%); }
.eyebrow-divider { color: #798875; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); }
.hero h1 { margin: 0 0 26px -5px; font-size: clamp(72px, 8.2vw, 120px); font-weight: 600; line-height: .82; letter-spacing: -.08em; text-shadow: 0 16px 50px rgb(0 0 0 / 34%); }
.hero h1 span { color: var(--lime); }
.hero-intro { max-width: 420px; margin: 0 0 27px; color: #c2cbc0; font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 17px; border: 1px solid rgb(216 255 112 / 44%); border-radius: 2px; text-decoration: none; font-size: 12px; font-weight: 650; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-3px) translateZ(7px); box-shadow: 0 10px 22px rgb(0 0 0 / 24%); }
.button-dark { background: linear-gradient(145deg, #29362a, #18221a); color: var(--ink); }
.button-dark:hover { background: #344431; }
.button span { color: var(--lime); font-size: 17px; }
.text-link { color: #d6dfd1; font-size: 12px; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s ease; }
.text-link span { padding-left: 5px; color: var(--lime); }
.hero-footnote { margin: 42px 0 0; color: #a1ad9f; font-size: 8px; letter-spacing: .045em; }
.tiny-cross { margin-right: 8px; color: var(--orange); font-size: 13px; }
.palette-picker { min-height: 28px; margin-top: 22px; display: flex; align-items: center; gap: 9px; }
.palette-picker-label, .palette-current { color: #94a18e; font: 7px/1 var(--mono); letter-spacing: .12em; }
.palette-picker-label { margin-right: 3px; }
.palette-current { min-width: 40px; margin-left: 2px; color: #bdc9b7; letter-spacing: .04em; }
.palette-swatch { width: 17px; height: 17px; padding: 2px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.palette-swatch span { width: 11px; height: 11px; display: block; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 11px color-mix(in srgb, var(--swatch) 45%, transparent); }
.palette-swatch[data-palette="lichen"] { --swatch: #d8ff70; }
.palette-swatch[data-palette="ember"] { --swatch: #ff9b74; }
.palette-swatch[data-palette="glacier"] { --swatch: #86dcf4; }
.palette-swatch[aria-pressed="true"] { border-color: var(--swatch); transform: scale(1.12); }
.palette-swatch:hover { transform: scale(1.14); }
.palette-swatch:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.hero-art { position: relative; width: 100%; max-width: 500px; justify-self: end; padding: 15px 15px 13px; overflow: hidden; border: 1px solid rgb(233 244 223 / 24%); background: linear-gradient(145deg, rgb(39 51 42 / 64%), rgb(16 22 18 / 55%)); color: #e8eddd; box-shadow: 14px 15px 0 rgb(0 0 0 / 24%), 0 30px 75px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 7%); transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateZ(21px); transform-style: preserve-3d; }
.hero-art::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: 1px solid rgb(216 255 112 / 9%); transform: translateZ(18px); }
.art-topline, .art-caption { display: flex; justify-content: space-between; align-items: center; font-size: 8px; letter-spacing: .09em; }
.art-topline { height: 24px; padding: 0 2px 9px; color: #c6d1c0; }
.viewport-stage { position: relative; width: 100%; aspect-ratio: 500 / 448; overflow: hidden; border: 1px solid rgb(222 239 204 / 14%); background: radial-gradient(ellipse at 68% 42%, rgb(188 223 119 / 12%), transparent 42%), linear-gradient(140deg, rgb(11 17 13 / 14%), rgb(7 12 9 / 26%)); transform: translateZ(12px); }
.viewport-stage::after { position: absolute; z-index: 2; inset: 13px; pointer-events: none; content: ""; border: 1px solid rgb(216 255 112 / 9%); }
.viewport-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: .46; }
.has-world .viewport-art { opacity: .13; }
.scene-3d { position: absolute; inset: 0; pointer-events: none; }
.art-caption { padding: 11px 2px 0; color: #b0bda9; }
.scroll-cue { position: absolute; left: 0; bottom: 22px; display: flex; gap: 12px; align-items: center; color: #98a496; font-size: 8px; letter-spacing: .1em; }
.scroll-line { height: 27px; width: 1px; background: linear-gradient(var(--lime), transparent); }

.experience { padding-top: 105px; padding-bottom: 112px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; margin-bottom: 49px; }
.section-label { margin: 5px 0 0; color: #b8c5b5; font-size: 8px; letter-spacing: .15em; }
.section-label > span { color: var(--lime); margin-right: 14px; }
.section-heading h2 { margin: 0 0 14px; font-size: clamp(45px, 5.4vw, 73px); line-height: .95; letter-spacing: -.065em; font-weight: 560; text-shadow: 0 12px 38px rgb(0 0 0 / 28%); }
.section-note { margin: 0; color: var(--muted); font-size: 14px; }
.experience-list { margin-left: 34%; border-top: 1px solid rgb(221 233 211 / 21%); perspective: 1100px; }
.experience-row, .past-group { display: grid; grid-template-columns: 160px 1fr 25px; gap: 27px; border-bottom: 1px solid rgb(221 233 211 / 21%); }
.experience-row { position: relative; background: linear-gradient(105deg, rgb(223 240 209 / 6%), rgb(223 240 209 / 1%) 60%, transparent); transform: rotateY(-1deg); transform-origin: left center; transition: background .25s ease, transform .25s ease; }
.experience-row:hover { background: linear-gradient(105deg, rgb(223 240 209 / 11%), rgb(223 240 209 / 3%) 60%, transparent); transform: rotateY(0) translateZ(10px); }
.experience-date { padding-top: 28px; color: #b0bcac; font-size: 8px; letter-spacing: .07em; white-space: nowrap; }
.experience-date .status-dot { margin-right: 9px; vertical-align: 1px; width: 6px; height: 6px; }
.experience-details { padding: 24px 0 26px; }
.experience-title-line, .past-role-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.experience-title-line h3, .past-role-heading h3 { margin: 0; font-size: 24px; font-weight: 550; letter-spacing: -.045em; }
.row-index { flex: 0 0 auto; color: #a0ad9e; font-size: 8px; letter-spacing: .07em; }
.role-name { margin: 8px 0 9px; color: #d8e1d2; font-size: 13px; font-weight: 600; }
.experience-description { margin: 0; color: #adb8aa; font-size: 12px; line-height: 1.65; }
.experience-description em { color: var(--lime); font-style: normal; }
.experience-tag { display: inline-block; margin-top: 15px; padding: 6px 8px; border: 1px solid rgb(216 255 112 / 28%); background: rgb(216 255 112 / 7%); color: #d9eea4; font-size: 7px; letter-spacing: .09em; }
.row-arrow { padding-top: 26px; color: var(--lime); font-size: 19px; }
.past-group { grid-template-columns: 160px 1fr 25px; }
.past-date { padding-top: 27px; }
.past-roles { grid-column: 2 / 3; padding: 0; }
.past-role { padding: 23px 0; border-bottom: 1px solid rgb(221 233 211 / 14%); }
.past-role:last-of-type { border-bottom: 0; padding-bottom: 10px; }
.past-role-heading h3 { font-size: 22px; }
.past-note { margin: 11px 0 26px; color: #98a395; font-size: 10px; font-style: italic; }

.practice { position: relative; padding: 27px 36px 22px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--practice-a) 65%, white); background: linear-gradient(132deg, color-mix(in srgb, var(--practice-a) 84%, transparent), color-mix(in srgb, var(--practice-b) 82%, transparent) 60%, color-mix(in srgb, var(--practice-c) 82%, transparent)); color: var(--practice-ink); box-shadow: 17px 19px 0 rgb(0 0 0 / 22%), 0 36px 75px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(255 255 255 / 55%); transform: perspective(1200px) rotateX(1deg) rotateY(-1deg); transform-style: preserve-3d; }
.practice::before { position: absolute; z-index: 0; width: 510px; height: 510px; top: -290px; right: -155px; content: ""; border: 1px solid var(--practice-ring); border-radius: 50%; box-shadow: 0 0 0 35px var(--practice-ring-soft), 0 0 0 74px var(--practice-ring-soft), 0 0 0 115px var(--practice-ring-soft); pointer-events: none; }
.practice > * { position: relative; z-index: 1; }
.practice-topline { display: flex; justify-content: space-between; align-items: center; }
.practice .section-label { color: var(--practice-copy); }
.practice .section-label > span { color: var(--practice-muted); }
.practice-aside, .practice-bottom { color: var(--practice-muted); font-size: 8px; letter-spacing: .1em; }
.practice-layout { padding: 47px 8% 53px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center; }
.practice-layout h2 { margin: 0; font-size: clamp(50px, 6vw, 83px); font-weight: 560; line-height: .89; letter-spacing: -.075em; text-shadow: 0 4px 0 rgb(40 58 25 / 7%); transform: translateZ(20px); }
.practice-layout h2 span { color: var(--practice-muted); }
.practice-copy { max-width: 360px; color: var(--practice-copy); font-size: 13px; line-height: 1.7; }
.practice-copy p { margin-bottom: 16px; }
.practice-copy strong { color: var(--practice-ink); font-weight: 700; }
.practice-copy strong.pipeline-highlight { padding: 0 .12em; background: linear-gradient(transparent 57%, color-mix(in srgb, var(--practice-a) 62%, transparent) 57%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.skill-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.skill-list span { padding: 7px 9px; border: 1px solid var(--practice-line); border-radius: 2px; background: rgb(246 255 222 / 23%); color: var(--practice-copy); font-size: 9px; box-shadow: 0 3px 9px rgb(59 82 34 / 6%); }
.skill-list .skill-feature { border-color: transparent; background: var(--practice-ink); color: var(--practice-a); font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.practice-bottom { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--practice-line); }
.practice-bottom span span { color: var(--practice-muted); font-size: 12px; }

.contact { margin-top: 106px; margin-bottom: 96px; padding: 34px 40px 47px; border: 1px solid rgb(231 241 223 / 19%); background: linear-gradient(135deg, rgb(27 37 30 / 72%), rgb(17 24 19 / 57%)); box-shadow: 15px 17px 0 rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 5%); transform: perspective(1400px) rotateY(1deg) rotateX(-.5deg); transform-style: preserve-3d; }
.contact-content { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: end; padding-top: 39px; }
.contact-kicker { margin: 0 0 21px; color: #bdc9b7; font-size: 8px; letter-spacing: .12em; }
.contact h2 { margin: 0; font-size: clamp(58px, 7.2vw, 96px); font-weight: 560; line-height: .86; letter-spacing: -.08em; }
.contact h2 span { color: var(--lime); }
.contact-details { padding-bottom: 7px; }
.contact-email, .contact-phone { display: block; width: fit-content; text-decoration: none; }
.contact-email { color: #f0f2e9; font-size: clamp(15px, 1.65vw, 21px); font-weight: 600; letter-spacing: -.025em; text-decoration: underline; text-decoration-color: rgb(216 255 112 / 47%); text-underline-offset: 6px; }
.contact-email span { color: var(--lime); margin-left: 4px; }
.contact-phone { margin-top: 13px; color: #b7c2b3; font-size: 13px; }
.contact-details > p { max-width: 365px; margin: 28px 0 0; color: #a9b4a5; font-size: 11px; line-height: 1.7; }
.site-footer { width: min(100% - 14.1%, 1236px); min-height: 77px; margin: 0 auto; display: grid; grid-template-columns: 40px 1fr auto auto; gap: 20px; align-items: center; border-top: 1px solid var(--line); }
.footer-mark { width: 30px; height: 30px; font-size: 15px; text-decoration: none; }
.site-footer p { margin: 0; color: #bac5b5; font-size: 10px; }
.site-footer p span { padding: 0 5px; color: #8a9986; }
.back-to-top, .copyright { color: #aab6a6; font-size: 7px; letter-spacing: .09em; text-decoration: none; }
.back-to-top { margin-right: 25px; }
.back-to-top:hover { color: var(--lime); }

@media (min-width: 1441px) { .site-header { padding-inline: 102px; } }
@media (max-width: 900px) {
  .section-wrap, .site-footer { width: min(100% - 10%, 720px); }
  .site-header { padding-inline: 5%; }
  .hero { min-height: 0; padding-top: 70px; padding-bottom: 83px; gap: 35px; grid-template-columns: 1fr .86fr; }
  .hero h1 { font-size: clamp(64px, 9vw, 92px); }
  .hero-intro { font-size: 14px; }
  .hero-art { padding: 10px; }
  .scroll-cue { bottom: 19px; }
  .experience-list { margin-left: 23%; }
  .experience-row, .past-group { grid-template-columns: 128px 1fr 18px; gap: 16px; }
  .practice-layout { padding-inline: 4%; gap: 30px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 75px; }
  .site-header { height: 66px; padding-inline: 5%; }
  .wordmark { gap: 8px; }
  .wordmark-mark { width: 32px; height: 32px; font-size: 16px; }
  .wordmark-name { max-width: 124px; font-size: 7px; line-height: 1.5; }
  .main-nav { gap: 13px; }
  .main-nav a { font-size: 7px; }
  .main-nav .nav-contact { padding: 8px 8px; }
  .section-wrap, .site-footer { width: 90%; }
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 54px; padding-bottom: 78px; }
  .hero-copy { padding-bottom: 0; }
  .eyebrow { margin-bottom: 22px; font-size: 7px; }
  .hero h1 { font-size: clamp(74px, 17.5vw, 105px); }
  .hero-intro { max-width: 430px; font-size: 14px; }
  .hero-footnote { margin-top: 27px; font-size: 7px; }
  .hero-art { width: 92%; max-width: 430px; justify-self: center; transform: perspective(1000px) rotateY(-2deg) rotateX(1deg); }
  .scroll-cue { bottom: 20px; }
  .experience { padding-top: 72px; padding-bottom: 77px; }
  .section-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 35px; }
  .section-heading h2 { font-size: 53px; }
  .experience-list { margin-left: 0; }
  .experience-row, .past-group { grid-template-columns: 1fr 18px; gap: 0 10px; }
  .experience-date { grid-column: 1 / -1; padding-top: 21px; }
  .experience-details { padding: 12px 0 20px; }
  .experience-title-line h3, .past-role-heading h3 { font-size: 21px; }
  .row-arrow { padding-top: 12px; }
  .past-date { padding-top: 22px; }
  .past-roles { grid-column: 1 / 2; }
  .practice { width: 100%; padding: 24px 5% 20px; transform: none; box-shadow: 0 13px 0 rgb(0 0 0 / 22%), 0 30px 65px rgb(0 0 0 / 19%); }
  .practice-layout { grid-template-columns: 1fr; gap: 27px; padding: 40px 0; }
  .practice-layout h2 { font-size: clamp(55px, 13vw, 74px); }
  .practice-copy { max-width: 460px; }
  .practice-bottom { gap: 12px; font-size: 6px; }
  .practice-bottom span:last-child { text-align: right; }
  .contact { margin-top: 76px; margin-bottom: 72px; padding: 27px 22px 34px; transform: none; }
  .contact-content { grid-template-columns: 1fr; gap: 34px; padding-top: 30px; }
  .contact h2 { font-size: clamp(61px, 14vw, 84px); }
  .contact-email { font-size: 16px; }
  .site-footer { min-height: 72px; grid-template-columns: 32px 1fr auto; gap: 9px; }
  .site-footer p { max-width: 170px; font-size: 8px; line-height: 1.5; }
  .back-to-top { margin: 0; font-size: 6px; }
  .copyright { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .world-canvas { transition: none; }
}