@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink: #152326; --muted: #607174; --paper: #f3f6f1; --line: #d5dfda; --lime: #d7f36b; --coral: #ff9b79; --blue: #9bd7ee; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, sans-serif; line-height: 1.6; }
a { color: inherit; }
.site-header { display: flex; justify-content: space-between; align-items: center; max-width: 1180px; margin: auto; padding: 28px 32px; }
.brand { font-size: 1.35rem; font-weight: 800; text-decoration: none; letter-spacing: -.08em; }.brand span { color: #dd6142; }
nav { display: flex; gap: 26px; font: 500 .8rem 'DM Mono', monospace; } nav a { text-decoration: none; } nav a:hover, nav a:focus-visible { color: #dd6142; }
main { max-width: 1180px; margin: auto; padding: 0 32px; }
.hero { min-height: 680px; display: flex; flex-direction: column; justify-content: center; padding: 88px 0; max-width: 860px; }
.eyebrow { margin: 0 0 20px; color: #dd6142; font: 500 .72rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; } h1 { max-width: 850px; margin-bottom: 28px; font-size: clamp(3.2rem, 8vw, 7.4rem); line-height: .97; letter-spacing: -.08em; } h2 { margin-bottom: 28px; font-size: clamp(2.3rem, 5vw, 4.7rem); line-height: 1; letter-spacing: -.07em; } h3 { margin-bottom: 12px; font-size: 1.45rem; line-height: 1.1; letter-spacing: -.04em; }
.hero-copy { max-width: 590px; color: var(--muted); font-size: 1.08rem; }.hero-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }.button { padding: 13px 18px; border: 1px solid var(--ink); border-radius: 999px; font-size: .88rem; font-weight: 700; text-decoration: none; }.button-primary { background: var(--ink); color: var(--paper); }.button-secondary:hover, .button-secondary:focus-visible { background: var(--lime); }
.section { padding: 110px 0; border-top: 1px solid var(--line); }.section-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; }.section-heading .eyebrow { padding-top: 10px; }.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.work-card { min-height: 350px; padding: 28px; display: flex; flex-direction: column; border-radius: 4px; }.work-card p:not(.card-number) { color: #405356; }.accent-lime { background: var(--lime); }.accent-coral { background: var(--coral); }.accent-blue { background: var(--blue); }.card-number { margin-bottom: auto; font: 500 .75rem 'DM Mono', monospace; }.card-tag { align-self: flex-start; margin-top: 25px; padding: 5px 9px; border: 1px solid currentColor; border-radius: 999px; font: .7rem 'DM Mono', monospace; }
.about { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; }.about-copy { max-width: 650px; font-size: clamp(1.4rem, 2.4vw, 2.15rem); line-height: 1.25; letter-spacing: -.04em; }.about-copy p:last-child { color: var(--muted); font-size: 1rem; line-height: 1.6; letter-spacing: 0; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }.process-step { padding: 0 24px; border-left: 1px solid var(--line); }.process-step:first-child { padding-left: 0; border-left: 0; }.process-step span, .timeline-meta { color: #dd6142; font: 500 .7rem 'DM Mono', monospace; }.process-step h3 { margin: 46px 0 10px; font-size: 1.25rem; letter-spacing: -.04em; }.process-step p { max-width: 210px; color: var(--muted); font-size: .86rem; }
.project-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }.project-visual { position: relative; min-height: 420px; overflow: hidden; background: var(--ink); color: var(--paper); }.project-grid-line { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(244,241,234,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(244,241,234,.35) 1px, transparent 1px); background-size: 42px 42px; transform: perspective(420px) rotateX(58deg) scale(1.5) translateY(34%); transform-origin: center bottom; }.project-logo { position: absolute; top: 27%; left: 13%; font-size: clamp(4rem, 9vw, 8rem); font-weight: 800; letter-spacing: -.12em; }.project-logo span { display: inline-block; margin-left: 16px; color: var(--coral); font-size: .55em; transform: translateY(-.7em); }.project-pulse { position: absolute; right: 15%; bottom: 17%; width: 72px; height: 72px; border: 1px solid var(--lime); border-radius: 50%; box-shadow: 0 0 0 14px rgba(217,239,114,.08), 0 0 0 28px rgba(217,239,114,.05); }.project-kicker { display: flex; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); color: var(--muted); font: 500 .68rem 'DM Mono', monospace; text-transform: uppercase; }.project-content h3 { margin: 45px 0 18px; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .95; letter-spacing: -.08em; }.project-content > p { max-width: 480px; color: var(--muted); font-size: 1rem; }.project-links { display: flex; gap: 24px; margin-top: 32px; }.project-links a { font-size: .85rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--ink); }.project-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 50px; }.project-tags span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: .65rem 'DM Mono', monospace; }
.timeline { border-top: 1px solid var(--ink); }.timeline-item { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; padding: 28px 0; border-bottom: 1px solid var(--line); }.timeline-meta { display: flex; flex-direction: column; gap: 5px; text-transform: uppercase; }.timeline-item h3 { margin: 0 0 9px; font-size: 1.5rem; letter-spacing: -.05em; }.timeline-item p { max-width: 650px; margin: 0; color: var(--muted); font-size: .9rem; }.role-note { display: block; margin-top: 14px; color: #dd6142; font-size: .78rem; font-weight: 700; }
.contact { padding-bottom: 130px; }.contact h2 { max-width: 700px; }.contact-link, .linkedin-link { display: block; width: fit-content; font-size: clamp(1.5rem, 3vw, 2.8rem); font-weight: 700; letter-spacing: -.05em; text-decoration: none; border-bottom: 2px solid var(--ink); }.linkedin-link { margin-top: 16px; color: var(--muted); font-size: 1rem; border-bottom-width: 1px; }
.phone-link { font-size: 1.15rem; }
footer { display: flex; justify-content: space-between; gap: 20px; max-width: 1180px; margin: auto; padding: 30px 32px; color: var(--muted); font: .7rem 'DM Mono', monospace; }
@media (max-width: 720px) { .site-header, main { padding-left: 20px; padding-right: 20px; }.hero { min-height: 600px; }.section-heading, .about { grid-template-columns: 1fr; gap: 0; }.work-grid { grid-template-columns: 1fr; }.work-card { min-height: 280px; }.process-grid { grid-template-columns: 1fr 1fr; gap: 35px 0; }.process-step { padding: 0 18px; }.process-step:nth-child(odd) { padding-left: 0; border-left: 0; }.process-step h3 { margin-top: 30px; }.project-feature { grid-template-columns: 1fr; gap: 34px; }.project-visual { min-height: 300px; }.project-content h3 { margin-top: 32px; }.project-tags { margin-top: 35px; }.timeline-item { grid-template-columns: 1fr; gap: 14px; } footer { flex-direction: column; padding-left: 20px; padding-right: 20px; } nav { gap: 13px; } }
.card-number { margin-bottom: 80px; }
@media (max-width: 720px) { .card-number { margin-bottom: 60px; } }