:root{
  --bg:        #ffffff;
  --ink:       #0a0a0a;
  --ink-2:     #171717;
  --mute:      #666666;
  --mute-2:    #8f8f8f;
  --mute-3:    #b3b3b3;
  --hair:      #eaeaea;
  --hair-2:    #f2f2f2;
  --tint:      #fafafa;
  --accent:    #0ea5e9;
  --accent-ink:#0284c7;

  --f-sans: "Geist", ui-sans-serif, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;

  --pad-x: clamp(20px, 4vw, 56px);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-sans);
  font-weight:400;
  font-size:15px;
  line-height:1.5;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01" on, "cv11" on;
  overflow-x:hidden;
}
::selection{background:var(--ink); color:#fff}

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

.wrap{padding-left:var(--pad-x); padding-right:var(--pad-x)}
.grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:24px;
}

/* ============== TOP RAIL ============== */
.rail{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--hair);
}
.rail-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.mark{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600;
  font-size:14px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.mark .sigil{
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:600;
  border:1px solid var(--ink);
  border-radius:3px;
}
.mark .slash{color:var(--mute-2); font-weight:400; margin:0 4px}
.mark .role{font-weight:400; color:var(--mute)}

.rail-nav{
  display:flex; gap:0;
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--mute);
  letter-spacing:0.01em;
}
.rail-nav a{
  padding:8px 14px;
  border-radius:6px;
  transition:background .15s ease, color .15s ease;
}
.rail-nav a:hover{background:var(--tint); color:var(--ink)}
.rail-nav a .n{color:var(--mute-3); margin-right:8px}

.rail-cta{
  display:flex; align-items:center; gap:14px;
}
.status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--mute);
  padding:6px 10px;
  border:1px solid var(--hair);
  border-radius:999px;
}
.status .dot{
  width:6px; height:6px; border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent)}
  70%{box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent)}
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:32px;
  padding:0 14px;
  font-family:var(--f-sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:-0.005em;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  border-radius:6px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{background:#222; border-color:#222}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--hair);
}
.btn-ghost:hover{border-color:var(--ink); background:transparent}

@media (max-width:880px){
  .rail-nav{display:none}
  .rail-cta .status{display:none}
}

/* ============== HERO ============== */
.hero{
  padding-top: clamp(100px, 14vh, 180px);
  padding-bottom: clamp(80px, 12vh, 160px);
}
.eyebrow{
  grid-column: 1 / -1;
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--mute);
  letter-spacing:0.01em;
  display:flex; gap:14px; align-items:baseline;
  margin-bottom: clamp(32px, 5vh, 56px);
}
.eyebrow .tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px;
  border:1px solid var(--hair);
  border-radius:999px;
  color:var(--ink-2);
}
.eyebrow .tag .pip{
  width:6px; height:6px; border-radius:999px;
  background:var(--accent);
}
.eyebrow .sep{color:var(--mute-3)}

h1.title{
  grid-column: 1 / span 11;
  font-weight:600;
  font-size: clamp(48px, 8.6vw, 144px);
  line-height:0.95;
  letter-spacing:-0.045em;
  color:var(--ink);
}
h1.title .accent{color:var(--accent)}

.sub{
  grid-column: 1 / span 7;
  margin-top: clamp(32px, 5vh, 56px);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height:1.45;
  letter-spacing:-0.015em;
  color:var(--mute);
  max-width: 44ch;
}
.sub b{color:var(--ink); font-weight:500}

.hero-cta{
  grid-column: 1 / -1;
  margin-top: clamp(36px, 6vh, 56px);
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.btn-lg{height:40px; padding:0 18px; font-size:14px; border-radius:8px}
.arrow{
  display:inline-block;
  transition:transform .15s ease;
}
.btn:hover .arrow{transform:translateX(2px)}

.hero-meta{
  grid-column: 1 / -1;
  margin-top: clamp(56px, 9vh, 88px);
  padding-top:20px;
  border-top:1px solid var(--hair);
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--mute);
}
.hero-meta dl div{display:flex; flex-direction:column; gap:6px}
.hero-meta dt{color:var(--mute-2); font-size:11px; letter-spacing:0.02em}
.hero-meta dd{
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:13px;
  letter-spacing:-0.005em;
}
.hero-meta .accent{color:var(--accent-ink)}
@media (max-width:760px){
  .hero-meta{grid-template-columns:repeat(2, minmax(0,1fr))}
}

/* ============== SECTIONS ============== */
.sect{
  padding-top: clamp(72px, 11vh, 128px);
  padding-bottom: clamp(72px, 11vh, 128px);
  border-top:1px solid var(--hair);
}
.sect-head{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:24px;
  margin-bottom: clamp(48px, 7vh, 80px);
}
.sect-tag{
  grid-column: 1 / span 3;
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--mute);
  display:flex; gap:10px; align-items:baseline;
}
.sect-tag .idx{color:var(--accent-ink); font-weight:500}
.sect-title{
  grid-column: 4 / -1;
  font-weight:600;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height:1.05;
  letter-spacing:-0.028em;
  color:var(--ink);
  max-width: 26ch;
}
.sect-title .mute{color:var(--mute-2); font-weight:500}
@media (max-width:820px){
  .sect-tag, .sect-title{grid-column:1/-1}
  .sect-tag{margin-bottom:14px}
}

/* ============== ABOUT ============== */
#about .body{
  grid-column: 4 / span 7;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height:1.55;
  letter-spacing:-0.012em;
  color:var(--mute);
  max-width: 56ch;
}
#about .body p + p{margin-top:1em}
#about .body b{color:var(--ink); font-weight:500}
#about .aside{
  grid-column: 1 / span 3;
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--mute);
  display:flex; flex-direction:column;
}
#about .aside div{
  padding:14px 0;
  border-top:1px solid var(--hair);
  display:flex; flex-direction:column; gap:4px;
}
#about .aside div:first-child{border-top:0; padding-top:0}
#about .aside dt{color:var(--mute-2); font-size:11px}
#about .aside dd{
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:13px;
  letter-spacing:-0.005em;
}
@media (max-width:820px){
  #about .body, #about .aside{grid-column:1/-1}
  #about .aside{margin-top:40px}
}

/* ============== EXPERTISE ============== */
.skills{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:24px;
  border-top:1px solid var(--hair);
}
.skill{
  display:grid;
  grid-template-columns: 36px 1fr 16px;
  align-items:center;
  gap:16px;
  padding:18px 4px;
  border-bottom:1px solid var(--hair);
  transition:padding-left .15s ease;
}
.skill:hover{padding-left:10px}
.skill:hover .skill-name{color:var(--accent-ink)}
.skill:hover .skill-arrow{color:var(--accent-ink); transform:translateX(2px)}
.skill-idx{
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--mute-2);
}
.skill-name{
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight:500;
  letter-spacing:-0.015em;
  color:var(--ink);
  transition:color .15s ease;
}
.skill-arrow{
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--mute-3);
  transition:color .15s ease, transform .15s ease;
  text-align:right;
}
@media (max-width:760px){
  .skills{grid-template-columns:1fr}
}

/* ============== WORK ============== */
.work{
  grid-column: 1 / -1;
  display:flex; flex-direction:column;
  gap: clamp(56px, 8vh, 96px);
}
.case{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:24px;
  row-gap:24px;
  align-items:start;
}
.case-frame{
  grid-column: 1 / span 7;
  grid-row: 1;
  position:relative;
  aspect-ratio: 16/10;
  border:1px solid var(--hair);
  border-radius:10px;
  background:var(--tint);
  overflow:hidden;
}
.case:nth-child(even) .case-frame{grid-column: 6 / -1; grid-row: 1}
.case:nth-child(even) .case-info{grid-column: 1 / span 4; grid-row: 1}
.case-info{
  grid-column: 9 / -1;
  grid-row: 1;
  display:flex; flex-direction:column; gap:14px;
  padding-top:4px;
}
.case-num{
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--mute);
  display:flex; gap:10px; align-items:baseline;
}
.case-num .n{color:var(--accent-ink); font-weight:500}
.case-title{
  font-weight:600;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height:1.1;
  letter-spacing:-0.025em;
  color:var(--ink);
}
.case-desc{
  font-size:15px;
  line-height:1.55;
  color:var(--mute);
  max-width:42ch;
}
.case-stack{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:4px;
}
.stack-chip{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--mute);
  padding:3px 8px;
  border:1px solid var(--hair);
  border-radius:4px;
  background:var(--bg);
}
.case-meta{
  margin-top:8px;
  padding-top:16px;
  border-top:1px solid var(--hair);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 20px;
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--mute);
}
.case-meta dt{color:var(--mute-2); margin-bottom:3px; font-size:10px; letter-spacing:0.02em}
.case-meta dd{
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:13px;
  letter-spacing:-0.005em;
}
.case-link{
  margin-top:10px;
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--accent-ink);
  display:inline-flex; gap:6px; align-items:center;
}
.case-link:hover{color:var(--ink)}

.ph{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      var(--hair) 0 1px,
      transparent 1px 80px
    ),
    repeating-linear-gradient(
      0deg,
      var(--hair) 0 1px,
      transparent 1px 80px
    ),
    var(--tint);
}
.ph-label{
  position:absolute; left:14px; top:12px;
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--mute);
}
.ph-corner{
  position:absolute; right:14px; bottom:12px;
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--mute-2);
}

@media (max-width:880px){
  .case-frame, .case-info,
  .case:nth-child(even) .case-frame, .case:nth-child(even) .case-info{
    grid-column:1/-1;
    grid-row:auto;
  }
}

/* ============== APPROACH ============== */
.approach{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:1px solid var(--hair);
}
.step{
  padding:32px 24px 32px 0;
  border-bottom:1px solid var(--hair);
  display:flex; flex-direction:column; gap:14px;
  position:relative;
}
.step:not(:nth-child(3n)){
  padding-right:24px;
  border-right:1px solid var(--hair);
}
.step:nth-child(n+4){padding-top:32px}
.step-idx{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--accent-ink);
  letter-spacing:0.02em;
}
.step-h{
  font-weight:600;
  font-size:18px;
  line-height:1.25;
  letter-spacing:-0.02em;
  color:var(--ink);
  max-width:22ch;
}
.step-p{
  font-size:14px;
  line-height:1.55;
  color:var(--mute);
  max-width:34ch;
}
@media (max-width:880px){
  .approach{grid-template-columns:repeat(2, minmax(0,1fr))}
  .step:not(:nth-child(3n)){border-right:none}
  .step:nth-child(odd){border-right:1px solid var(--hair) !important}
}
@media (max-width:560px){
  .approach{grid-template-columns:1fr}
  .step, .step:nth-child(odd){border-right:none !important}
}

/* ============== CONTACT ============== */
#contact{
  padding-top: clamp(100px, 16vh, 180px);
  padding-bottom: clamp(72px, 11vh, 120px);
  border-top:1px solid var(--hair);
}
.cta-line{
  grid-column: 1 / -1;
  font-weight:600;
  font-size: clamp(40px, 7vw, 112px);
  line-height:0.98;
  letter-spacing:-0.035em;
  color:var(--ink);
  max-width:18ch;
}
.cta-line .accent{color:var(--accent)}
.cta-line .mute{color:var(--mute-2)}
.cta-row{
  grid-column: 1 / -1;
  margin-top: clamp(40px, 6vh, 64px);
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}
.cta-channels{
  grid-column: 1 / -1;
  margin-top: clamp(48px, 7vh, 72px);
  padding-top:20px;
  border-top:1px solid var(--hair);
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
  font-family:var(--f-mono);
  font-size:12px;
}
.cta-channels a{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 0;
}
.cta-channels a dt{color:var(--mute-2); font-size:11px}
.cta-channels a dd{
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:-0.01em;
  display:inline-flex; align-items:center; gap:6px;
}
.cta-channels a:hover dd{color:var(--accent-ink)}
.ext-arrow{color:var(--mute-3)}
@media (max-width:760px){
  .cta-channels{grid-template-columns:repeat(2, minmax(0,1fr))}
}

/* ============== FOOTER ============== */
footer{
  border-top:1px solid var(--hair);
  padding-top:24px; padding-bottom:24px;
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--mute);
}
.foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.foot b{color:var(--ink); font-weight:500}
.foot .ver{color:var(--mute-2)}
.foot .accent-dot{
  display:inline-block; width:6px; height:6px; border-radius:999px;
  background:var(--accent); vertical-align:middle; margin-right:6px;
}

/* ============== REVEAL ============== */
.reveal{opacity:0; transform:translateY(8px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

.tab{font-variant-numeric:tabular-nums}