:root { --ink:#11130f; --paper:#f2f1e9; --white:#fffef8; --acid:#dfff00; --coral:#ff6542; --line:rgba(17,19,15,.2); --line-dark:rgba(255,255,255,.18); --font:"Manrope",system-ui,sans-serif; --mono:"DM Mono",ui-monospace,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--paper); font-family:var(--font); font-size:1rem; line-height:1.55; }
a { color:inherit; }
.skip-link { position:fixed; top:.75rem; left:.75rem; z-index:100; padding:.7rem 1rem; background:var(--acid); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:absolute; z-index:10; top:0; left:0; right:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; max-width:1500px; margin:auto; padding:1.25rem 4vw; color:var(--white); }
.brand { justify-self:start; display:flex; align-items:center; gap:.75rem; text-decoration:none; font-weight:700; }
.brand-mark { display:grid; place-items:center; width:2.2rem; height:2.2rem; border:1px solid var(--line-dark); border-radius:50%; color:var(--acid); font:.72rem var(--mono); }
nav { display:flex; gap:2rem; }
nav a,.header-cta { text-decoration:none; font-size:.86rem; }
nav a:hover,.header-cta:hover { color:var(--acid); }
.header-tools { justify-self:end; display:flex; align-items:center; gap:.85rem; }
.header-cta { padding-bottom:.2rem; border-bottom:1px solid currentColor; }
.lang-switch { min-width:2.35rem; padding:.42rem .55rem; border:1px solid var(--line-dark); border-radius:99px; color:var(--white); background:transparent; font:500 .68rem var(--mono); cursor:pointer; }
.lang-switch:hover { color:var(--acid); border-color:var(--acid); }
.hero { position:relative; min-height:100vh; min-height:100svh; height:auto; padding:9rem 7vw 4.5rem; display:flex; flex-direction:column; justify-content:center; overflow:hidden; color:var(--white); background:var(--ink); }
.hero::after { content:""; position:absolute; right:-12vw; bottom:-24vw; width:60vw; height:60vw; border:1px solid rgba(223,255,0,.2); border-radius:50%; box-shadow:0 0 0 8vw rgba(223,255,0,.025),0 0 0 16vw rgba(223,255,0,.018); }
.eyebrow,.pending-label,.profile-label { font:.72rem var(--mono); letter-spacing:.08em; }
.eyebrow { position:relative; z-index:1; color:#a8b0a4; }
h1,h2,h3,p { margin-top:0; }
h1 { position:relative; z-index:1; max-width:1150px; margin:1rem 0 2.5rem; font-size:clamp(3.4rem,7.3vw,7.6rem); line-height:.92; letter-spacing:-.075em; }
h1 em { color:var(--acid); font-style:normal; font-weight:500; }
.hero-bottom { position:relative; z-index:1; display:block; }
.hero-bottom p { max-width:520px; margin:0; color:#b8c0b4; font-size:clamp(1rem,1.4vw,1.2rem); }
.hero-services { display:none; }
.button { display:inline-flex; justify-content:center; min-width:190px; margin-top:1.75rem; padding:.85rem 1rem; color:var(--ink); background:var(--acid); text-decoration:none; font-weight:700; font-size:.86rem; transition:transform .2s ease; }
.button:hover { transform:translateY(-3px); }
.section { padding:7rem 5vw; }
.section-head { max-width:1400px; margin:0 auto 3rem; display:grid; grid-template-columns:1fr auto; align-items:end; gap:1.5rem; }
.section-head h2 { margin:0; font-size:clamp(2.5rem,4.5vw,5rem); line-height:1; letter-spacing:-.06em; }
.section-head p { margin:0; color:#667062; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; max-width:1400px; margin:auto; }
.project { min-width:0; }
.project-featured { grid-column:1/-1; }
.project-preview,.pending-preview { position:relative; display:block; min-height:360px; overflow:hidden; background:#21130f; }
.project-featured .project-preview { min-height:560px; }
.project-forma .project-preview { width:100%; min-width:0; aspect-ratio:16/9; }
.project-forma .project-preview img { position:absolute; inset:0; height:100%; min-height:0; object-position:center; }
.project-preview img { display:block; width:100%; height:100%; min-height:inherit; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.project-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.42)); }
.project-preview:hover img { transform:scale(1.025); }
.live-badge { position:absolute; z-index:2; top:1.25rem; left:1.25rem; display:flex; align-items:center; gap:.45rem; padding:.45rem .65rem; color:var(--white); background:rgba(17,19,15,.75); backdrop-filter:blur(10px); font:.7rem var(--mono); }
.live-badge i { width:.45rem; height:.45rem; border-radius:50%; background:var(--acid); }
.demo-button { justify-self:start; margin-top:1rem; padding:.75rem 1rem; color:var(--ink); background:var(--acid); font-family:var(--font); font-size:.8rem; font-weight:800; box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .2s ease,background .2s ease; }
.project-preview:hover .demo-button { transform:translateY(-3px); background:var(--white); }
.preview-title { position:absolute; z-index:2; left:2rem; bottom:2.4rem; display:grid; color:var(--white); }
.preview-title small { margin-bottom:.45rem; font:.7rem var(--mono); letter-spacing:.08em; }
.preview-title strong { font-family:Georgia,serif; font-size:clamp(2.7rem,5vw,5rem); font-weight:400; letter-spacing:-.055em; }
.project-info { display:grid; grid-template-columns:minmax(180px,.7fr) 1fr auto; gap:1.5rem; align-items:baseline; padding:1.4rem 0 2.2rem; }
.project-info h3 { margin:0; font-size:1.3rem; letter-spacing:-.035em; }
.project-info p { margin:0; color:#687164; font-size:.9rem; }
.pending-preview { padding:2rem; display:flex; flex-direction:column; justify-content:space-between; }
.pending-preview::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:44px 44px; }
.pending-preview>* { position:relative; z-index:1; }
.pending-preview strong { align-self:center; font-size:clamp(3rem,6vw,6rem); line-height:.82; letter-spacing:-.07em; }
.pending-label { color:rgba(255,255,255,.65); }
.pending-bar { color:#ffe5d7; background:var(--coral); }
.pending-next { color:var(--ink); background:var(--acid); }
.pending-next::before { background-image:linear-gradient(rgba(17,19,15,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(17,19,15,.11) 1px,transparent 1px); }
.muted-link { color:#81887e; font:.75rem var(--mono); white-space:nowrap; }
.services { color:var(--white); background:var(--ink); }
.services .section-head p { color:#939c90; }
.service-list { max-width:1400px; margin:auto; border-top:1px solid var(--line-dark); }
.service-list article { display:grid; grid-template-columns:.7fr 1fr; gap:1.5rem; padding:1.8rem 0; border-bottom:1px solid var(--line-dark); align-items:baseline; }
.service-list h3 { margin:0; font-size:1.35rem; }
.service-list p { margin:0; color:#9da69a; }
.profile { display:grid; grid-template-columns:1fr 1fr; gap:8vw; background:var(--paper); }
.profile-label { color:#727b6f; }
.profile-intro h2 { margin-top:1.2rem; font-size:clamp(2.6rem,4.6vw,5rem); line-height:.98; letter-spacing:-.065em; }
.profile-intro>p { max-width:650px; color:#5f685c; font-size:1.08rem; }
.career-panel { align-self:end; padding:2rem; border:1px solid var(--line); background:rgba(255,255,255,.28); }
.career-label { margin-bottom:2rem; color:#727b6f; font:.7rem var(--mono); letter-spacing:.08em; }
.career-path { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:0; padding:0; list-style:none; }
.career-path::before { content:""; position:absolute; top:.34rem; left:.35rem; right:calc(33.33% - .35rem); height:1px; background:var(--line); }
.career-path li { position:relative; display:grid; gap:1rem; }
.career-dot { position:relative; z-index:1; width:.7rem; height:.7rem; border:2px solid var(--paper); border-radius:50%; background:var(--coral); box-shadow:0 0 0 1px var(--coral); }
.career-path div { display:grid; gap:.35rem; }
.career-path strong { font-size:1rem; }
.career-path small { color:#727b6f; font-size:.72rem; line-height:1.55; }
.other-work { display:grid; grid-template-columns:120px 1fr; gap:1rem; margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--line); }
.other-work strong { font-size:.9rem; }
.other-work p { margin:0; color:#687164; font-size:.9rem; }
.profile-links { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2rem; }
.profile-links a { font:.8rem var(--mono); text-underline-offset:.35rem; }
.contact { min-height:600px; padding:6rem 5vw 2rem; display:flex; flex-direction:column; color:var(--white); background:var(--coral); }
.contact>p { font:.72rem var(--mono); letter-spacing:.08em; }
.contact h2 { margin:auto 0 2rem; font-size:clamp(4.5rem,12vw,12rem); line-height:.8; letter-spacing:-.085em; }
.contact-details { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
.email-address { font-size:clamp(1rem,2vw,1.5rem); font-weight:500; user-select:all; }
.copy-email { padding:.7rem .9rem; border:1px solid currentColor; color:var(--white); background:transparent; font:600 .78rem var(--font); cursor:pointer; }
.copy-email:hover { color:var(--ink); background:var(--white); }
footer { display:flex; justify-content:space-between; margin-top:5rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.35); font:.7rem var(--mono); }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; }
.reveal.is-visible { opacity:1; transform:translateY(0); }
:focus-visible { outline:2px solid var(--acid); outline-offset:4px; }
@media (max-width:850px) {
  .site-header { grid-template-columns:1fr auto; grid-template-rows:auto auto; row-gap:.8rem; padding:1rem 1.25rem; background:linear-gradient(180deg,rgba(17,19,15,.98),rgba(17,19,15,.88)); }
  nav { grid-column:1/-1; grid-row:2; display:flex; justify-content:space-between; gap:1rem; padding-top:.7rem; border-top:1px solid var(--line-dark); }
  nav a { font-size:.75rem; }
  .hero { padding-right:1.25rem; padding-bottom:4rem; padding-left:1.25rem; }
  h1 { font-size:clamp(3.4rem,15vw,6rem); }
  .hero-bottom { display:block; }
  .section { padding:5rem 1.25rem; }
  .section-head { grid-template-columns:1fr; gap:1rem; } .section-head p { grid-column:auto; }
  .project-grid { grid-template-columns:1fr; } .project-featured { grid-column:auto; }
  .project-featured .project-preview { min-height:430px; }
  .project-info { grid-template-columns:1fr auto; } .project-info p { grid-column:1/-1; grid-row:2; } .muted-link { grid-column:2; grid-row:1; }
  .profile { grid-template-columns:1fr; gap:3rem; }
  .contact { min-height:0; padding:4.5rem 1.25rem 1.5rem; }
  .contact h2 { margin:3.5rem 0 2rem; }
  .contact footer { margin-top:4rem; }
}
@media (min-width:600px) and (max-width:1100px) {
  .hero { height:100vh; height:100svh; justify-content:flex-start; padding:clamp(10rem,22svh,17rem) clamp(2rem,7vw,5rem) 2rem; }
  .hero::after { right:-16vw; bottom:-22vw; width:76vw; height:76vw; }
  h1 { font-size:clamp(4.75rem,9.4vw,6.5rem); }
  .hero-bottom { display:block; }
  .hero-bottom p { max-width:560px; font-size:clamp(1rem,1.7vw,1.1rem); }
  .hero-bottom .button { min-width:180px; margin-top:1.5rem; }
  .hero-services { position:absolute; z-index:1; right:clamp(2rem,7vw,5rem); bottom:clamp(1.25rem,2.5svh,2.25rem); left:clamp(2rem,7vw,5rem); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
  .hero-services span { padding:clamp(.8rem,1.5vw,1rem) .5rem; text-align:center; font:500 clamp(.68rem,1.15vw,.75rem) var(--mono); letter-spacing:.025em; }
  .hero-services span+span { border-left:1px solid var(--line-dark); }
}
@media (max-width:520px) {
  .brand>span:last-child { display:none; } .header-cta { font-size:.75rem; } .header-tools { gap:.6rem; } .button { width:100%; }
  .hero { justify-content:flex-start; padding-top:clamp(8.25rem,17svh,10rem); padding-bottom:1.5rem; }
  .hero-services { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; margin-top:auto; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
  .hero-services span { padding:.9rem .35rem; text-align:center; font:500 .68rem var(--mono); letter-spacing:.025em; }
  .hero-services span+span { border-left:1px solid var(--line-dark); }
  h1 { font-size:clamp(2.5rem,12.5vw,4rem); line-height:.95; letter-spacing:-.07em; }
  .eyebrow { font-size:.62rem; letter-spacing:.06em; }
  .section-head h2 { font-size:clamp(2.15rem,11vw,3.2rem); }
  .profile-intro h2 { font-size:clamp(2.25rem,11.5vw,3.4rem); }
  .contact h2 { font-size:clamp(3.25rem,17vw,5rem); }
  .project-preview,.pending-preview,.project-featured .project-preview { min-height:330px; }
  .preview-title { left:1.25rem; bottom:1.5rem; } .pending-preview { padding:1.25rem; } .pending-preview strong { font-size:3.5rem; }
  .service-list article { grid-template-columns:1fr; gap:.4rem; }
  .career-path { grid-template-columns:1fr; gap:1.5rem; }
  .career-path::before { top:.35rem; bottom:.35rem; left:.35rem; right:auto; width:1px; height:auto; }
  .career-path li { grid-template-columns:1.2rem 1fr; gap:.75rem; }
  .other-work { grid-template-columns:1fr; gap:.4rem; }
  .contact-details { align-items:flex-start; flex-direction:column; }
  .email-address { word-break:break-all; }
  .copy-email { justify-self:start; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }