:root { --ink:#111114; --panel:#1b1b20; --paper:#f7f4ed; --muted:#b7b4bd; --aqua:#32f2dc; --pink:#ff4f9b; --yellow:#ffe85c; --purple:#a789ff; --line:rgba(247,244,237,.18); --mono:"DM Mono",monospace; --sans:"Space Grotesk",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover { color:var(--aqua); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }
.skip-link { position:absolute; left:1rem; top:-4rem; background:var(--yellow); color:#111; padding:.5rem .8rem; z-index:2; font-weight:700; }
.skip-link:focus { top:1rem; }
.wrap { width:min(1120px, calc(100% - 3rem)); margin-inline:auto; }
.site-header { width:min(1260px, calc(100% - 3rem)); margin:0 auto; min-height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font:500 1.55rem var(--mono); letter-spacing:-.11em; text-decoration:none; } .brand span { color:var(--pink); }
.site-nav { display:flex; gap:1.65rem; font:500 .78rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.site-nav a { text-decoration:none; color:var(--muted); } .site-nav a:hover,.site-nav a.active { color:var(--paper); } .site-nav a.active::after { content:""; display:block; height:2px; margin-top:.3rem; background:var(--aqua); }
.menu-button { display:none; background:none; border:1px solid var(--line); color:var(--paper); padding:.45rem .7rem; font:500 .75rem var(--mono); text-transform:uppercase; }
.hero { padding:clamp(5rem,12vw,10rem) 0 6rem; max-width:1120px; } .eyebrow { margin:0 0 1rem; color:var(--aqua); font:500 .75rem var(--mono); text-transform:uppercase; letter-spacing:.1em; } .eyebrow span { display:inline-block; width:9px; height:9px; margin-right:.5rem; background:var(--pink); transform:rotate(45deg); }
h1,h2,h3,p { margin-top:0; } h1 { max-width:900px; margin-bottom:1.5rem; font-size:clamp(3.4rem,8.7vw,8rem); line-height:.91; letter-spacing:-.045em; } h1 em { color:var(--pink); font-style:normal; } h2 { font-size:clamp(2rem,4.2vw,4rem); line-height:1; letter-spacing:-.03em; } h3 { font-size:1.3rem; letter-spacing:-.02em; }
.title-reveal { opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.3,1); } .title-reveal.is-visible { opacity:1; transform:translateY(0); }
.hero-copy { max-width:660px; color:#d1ced6; font-size:clamp(1.08rem,2vw,1.38rem); }
.button-row { display:flex; align-items:center; gap:1.4rem; margin-top:2.3rem; } .button { display:inline-flex; align-items:center; gap:.8rem; padding:.8rem 1.1rem; border:1px solid transparent; font:500 .8rem var(--mono); text-decoration:none; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; } .button-primary { background:var(--aqua); color:#0f1113; } .button-primary:hover { background:var(--yellow); color:#0f1113; } .text-link { color:var(--paper); font:500 .83rem var(--mono); }
.signal-band { background:var(--pink); color:#111; } .signal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding:1.55rem 0; } .signal-grid p { display:grid; margin:0; border-left:2px solid #111; padding-left:1rem; } .signal-grid strong { font-size:1.05rem; letter-spacing:-.02em; } .signal-grid span { font:400 .71rem var(--mono); text-transform:uppercase; }
.section { padding:clamp(4rem,9vw,8rem) 0; } .section-heading { max-width:600px; margin-bottom:3rem; } .service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .service-grid article { background:var(--panel); padding:1.7rem; } .service-grid p:last-child { color:var(--muted); } .service-number,.card-label { color:var(--aqua); font:500 .75rem var(--mono); }
.statement { display:grid; grid-template-columns:1fr 3fr; gap:2rem; border-top:1px solid var(--line); } .statement-mark { color:var(--yellow); font-size:2.5rem; } .statement p:not(.eyebrow) { max-width:620px; color:var(--muted); font-size:1.13rem; }
.engagement-options { border-top:1px solid var(--line); } .engagement-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; border:1px solid var(--line); background:var(--line); } .engagement-grid article { padding:1.8rem; background:var(--panel); } .engagement-grid h3 { font-size:1.6rem; } .engagement-grid p:not(.card-label) { max-width:460px; color:var(--muted); } .engagement-grid .text-link { display:inline-block; margin-top:.5rem; }
.site-footer { display:flex; justify-content:space-between; padding:2rem 0 2.5rem; color:var(--muted); border-top:1px solid var(--line); font:400 .72rem var(--mono); text-transform:uppercase; letter-spacing:.06em; } .site-footer p { margin:0; } .site-footer div { display:flex; gap:1rem; }
.page { padding:clamp(4.5rem,10vw,8rem) 0 5rem; } .page h1 { max-width:950px; font-size:clamp(3rem,7vw,6.5rem); } .two-column { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,8vw,8rem); margin-top:3rem; } .lead { font-size:clamp(1.25rem,2.5vw,1.75rem); line-height:1.25; letter-spacing:-.035em; } .body-copy { color:var(--muted); font-size:1.06rem; }
.skills { margin-top:4rem; border-top:1px solid var(--line); } .skill-list { display:grid; grid-template-columns:repeat(2,1fr); gap:0; list-style:none; margin:0; padding:0; border-top:1px solid var(--line); } .skill-list li { padding:.8rem 0; border-bottom:1px solid var(--line); font-size:1.05rem; } .skill-list li:nth-child(odd) { padding-right:1rem; } .skill-list li:nth-child(even) { padding-left:1rem; border-left:1px solid var(--line); }
.callout { display:flex; justify-content:space-between; align-items:center; gap:2rem; margin-top:5rem; padding:2rem; background:var(--purple); color:#17131e; } .callout p { max-width:600px; margin:0; font-size:1.4rem; font-weight:600; line-height:1.18; letter-spacing:-.04em; } .callout .button-primary { background:#17131e; color:var(--paper); white-space:nowrap; }
.portfolio-lead { max-width:780px; } .project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin-top:4rem; } .project-tile { background:var(--panel); border:1px solid var(--line); } .project-image { display:block; position:relative; width:100%; aspect-ratio:16/10; padding:0; overflow:hidden; border:0; background:#292930; color:var(--paper); text-align:left; cursor:pointer; } .project-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .35s ease; } .project-image span { position:absolute; right:.75rem; bottom:.75rem; padding:.35rem .5rem; background:var(--ink); font:500 .66rem var(--mono); text-transform:uppercase; letter-spacing:.04em; opacity:0; transform:translateY(5px); transition:opacity .2s ease,transform .2s ease; } .project-image:hover img,.project-image:focus-visible img { transform:scale(1.04); } .project-image:hover span,.project-image:focus-visible span { opacity:1; transform:translateY(0); } .project-info { padding:1.25rem 1.35rem 1.4rem; } .project-info .card-label { margin-bottom:.65rem; } .project-info h2 { margin-bottom:1.2rem; font-size:clamp(1.5rem,3vw,2.4rem); } .project-role { margin-bottom:.55rem; color:var(--aqua); font:500 .75rem var(--mono); text-transform:uppercase; letter-spacing:.06em; } .project-summary { color:var(--muted); } .project-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 1.35rem; padding:0; list-style:none; } .project-tags li { padding:.2rem .45rem; border:1px solid var(--line); color:var(--paper); font:400 .68rem var(--mono); text-transform:uppercase; letter-spacing:.04em; } .project-details-link,.project-link { padding:0; border:0; background:none; color:var(--paper); font:500 .78rem var(--mono); text-align:left; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; } .project-details-link { display:block; margin-bottom:.9rem; } .project-details-link span,.project-link span { color:var(--aqua); } .project-tile-wide { grid-column:1 / -1; } .project-tile-wide .project-image { aspect-ratio:2.55/1; } .project-dialog { width:min(620px,calc(100% - 2rem)); padding:clamp(1.5rem,5vw,3rem); border:1px solid var(--aqua); background:var(--panel); color:var(--paper); } .project-dialog::backdrop { background:rgba(0,0,0,.78); } .project-dialog h2 { margin-bottom:1.35rem; font-size:clamp(2.2rem,5vw,4rem); } .project-dialog > p:not(.project-role) { max-width:550px; color:var(--muted); font-size:1.1rem; } .dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; } .dialog-close { width:2.3rem; height:2.3rem; padding:0; border:1px solid var(--line); background:none; color:var(--paper); font-size:1.7rem; line-height:1; cursor:pointer; } .project-dialog .button { margin-top:.3rem; } .note { max-width:780px; } .note h2 { margin-bottom:1rem; } .note > p:not(.eyebrow) { color:var(--muted); font-size:1.1rem; } .note .button { margin-top:1rem; }
.contact-page h1 { max-width:790px; } .contact-links { display:grid; gap:.75rem; margin-top:2rem; } .contact-links a { font:500 .85rem var(--mono); } .contact-form { display:grid; gap:1rem; padding:1.55rem; background:var(--panel); border:1px solid var(--line); } .contact-form > div { display:grid; gap:.45rem; } .contact-form label { font:500 .76rem var(--mono); text-transform:uppercase; letter-spacing:.06em; } .contact-form input,.contact-form textarea { width:100%; padding:.7rem .75rem; border:1px solid var(--line); border-radius:0; background:var(--ink); color:var(--paper); font:inherit; } .contact-form textarea { min-height:9rem; resize:vertical; } .contact-form .button { justify-self:start; } .form-note { margin:0; color:var(--muted); font-size:.8rem; } .honeypot { position:absolute; overflow:hidden; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; padding:0; border:0; }
.writing-lead,.resume-lead { max-width:800px; } .writing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:4rem; } .writing-card { display:flex; flex-direction:column; padding:1.5rem; border:1px solid var(--line); background:var(--panel); } .writing-card h2 { margin-bottom:1rem; font-size:clamp(1.65rem,3.1vw,2.5rem); } .writing-card p:not(.card-label) { color:var(--muted); } .writing-card .project-link { margin-top:auto; padding-top:1.2rem; } .resume-section { padding:clamp(4rem,8vw,6rem) 0; } .experience-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); } .experience-list li { display:grid; grid-template-columns:180px 1fr; gap:1.5rem; padding:1.5rem 0; border-bottom:1px solid var(--line); } .experience-list h3 { margin-bottom:.2rem; font-size:1.5rem; } .experience-date,.experience-company { font:500 .78rem var(--mono); text-transform:uppercase; letter-spacing:.06em; } .experience-date { color:var(--aqua); } .experience-company { color:var(--muted); } .experience-list p:last-child { max-width:650px; margin-bottom:0; } .skills-block { border-top:1px solid var(--line); }
.engagement-details { margin-top:4rem; border-top:1px solid var(--line); } .agency-list { border-top:1px solid var(--line); }
.landing-hero { max-width:960px; padding:clamp(5rem,12vw,9rem) 0 5rem; } .landing-hero h1 { max-width:900px; margin-bottom:1.5rem; font-size:clamp(3.3rem,7.8vw,7.1rem); } .landing-hero .lead { max-width:760px; margin-bottom:1rem; } .landing-intro { max-width:660px; margin:0; color:var(--muted); font-size:1.08rem; } .landing-section { padding:clamp(4rem,9vw,7rem) 0; } .landing-section > h2 { max-width:760px; margin-bottom:2.5rem; } .service-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); } .service-list li { display:grid; grid-template-columns:minmax(210px,.9fr) minmax(0,1.7fr); gap:2rem; padding:1.6rem 0; border-bottom:1px solid var(--line); } .service-list h3 { margin:0; font-size:1.45rem; } .service-list p { max-width:620px; margin:0; color:var(--muted); } .case-proof { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(2rem,7vw,7rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .case-proof h2 { margin:.45rem 0 0; } .case-proof > div:last-child > p:not(.project-role) { max-width:600px; margin-bottom:0; color:var(--muted); font-size:1.15rem; } .case-proof .project-tags { margin-bottom:1.3rem; } .landing-approach { border-bottom:1px solid var(--line); } .landing-approach .two-column { margin-top:0; } .faq-list { border-top:1px solid var(--line); } .faq-list details { border-bottom:1px solid var(--line); } .faq-list summary { padding:1.15rem 2rem 1.15rem 0; color:var(--paper); font-size:1.2rem; font-weight:600; cursor:pointer; } .faq-list summary::marker { color:var(--aqua); } .faq-list p { max-width:700px; margin:0 0 1.25rem; color:var(--muted); } .landing-contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); gap:clamp(2rem,7vw,6rem); align-items:start; padding-bottom:clamp(5rem,10vw,8rem); } .landing-contact h2 { margin-bottom:1rem; } .landing-contact .lead { max-width:580px; } .landing-contact .body-copy { max-width:560px; }
@media (max-width:950px) { .site-header { min-height:72px; position:relative; } .menu-button { display:block; } .site-nav { display:none; position:absolute; top:71px; left:0; right:0; z-index:3; flex-direction:column; gap:0; padding:.5rem 1rem 1rem; background:var(--panel); border:1px solid var(--line); } .site-nav.is-open { display:flex; } .site-nav a { padding:.6rem 0; } .site-nav a.active::after { display:none; } }
@media (max-width:700px) { .wrap,.site-header { width:min(100% - 2rem,1120px); } .site-header { min-height:72px; position:relative; } .menu-button { display:block; } .site-nav { display:none; position:absolute; top:71px; left:0; right:0; z-index:1; flex-direction:column; gap:0; padding:.5rem 1rem 1rem; background:var(--panel); border:1px solid var(--line); } .site-nav.is-open { display:flex; } .site-nav a { padding:.6rem 0; } .site-nav a.active::after { display:none; } .hero { padding-top:4rem; } h1 { font-size:clamp(3rem,14vw,5rem); } .button-row { align-items:flex-start; flex-direction:column; } .signal-grid,.service-grid,.project-grid,.writing-grid,.engagement-grid,.two-column,.landing-contact { grid-template-columns:1fr; } .signal-grid { gap:1rem; } .statement { grid-template-columns:1fr; gap:0; } .statement-mark { margin-bottom:1rem; } .skill-list { grid-template-columns:1fr; } .skill-list li:nth-child(even) { padding-left:0; border-left:0; } .project-tile-wide { grid-column:auto; } .project-tile-wide .project-image { aspect-ratio:16/10; } .experience-list li { grid-template-columns:1fr; gap:.25rem; } .callout { align-items:flex-start; flex-direction:column; } .site-footer { align-items:flex-start; flex-direction:column; gap:1rem; } .landing-hero { padding-top:4rem; } .landing-hero h1 { font-size:clamp(3rem,14vw,5rem); } .service-list li,.case-proof { grid-template-columns:1fr; gap:.7rem; } .landing-contact { gap:2.5rem; } }