:root { --ink:#0e1822; --paper:#f4f0e8; --cloud:#fbfaf7; --line:#c8c2b7; --muted:#5a6670; --copper:#b6784c; --dark:#14222e; --cream:#f3eee5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cloud); color:var(--ink); font-family:"Instrument Sans",Arial,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-underline-offset:3px; }
button { font:inherit; }
.skip-link { position:absolute; left:-999px; top:auto; }.skip-link:focus { left:1rem; top:1rem; z-index:10; background:#fff; padding:.75rem 1rem; }
.site-header { display:flex; justify-content:space-between; align-items:center; padding:1.35rem max(4vw,1.5rem); border-bottom:1px solid var(--line); background:var(--cloud); }
.wordmark { font-weight:700; text-decoration:none; letter-spacing:-.03em; }.site-header nav { display:flex; gap:.7rem; align-items:center; font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; }.site-header nav a { text-decoration:none; }.site-header nav a:hover,.text-link:hover,.career-email:hover { color:var(--copper); }
.hero { min-height:670px; padding:clamp(4rem,9vw,8.5rem) max(4vw,1.5rem) 2.5rem; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr); grid-template-rows:1fr auto; gap:2.5rem 6vw; background:var(--paper); }.hero-copy { max-width:840px; }.eyebrow,.section-label { margin:0 0:1rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }.copper { color:var(--copper); }.hero h1,.section-heading h2,.hiring-section h2,.contact-section h2 { max-width:820px; margin:0; font-family:"Barlow Condensed",Arial,sans-serif; font-size:clamp(3.65rem,8vw,7.5rem); line-height:.88; font-weight:600; letter-spacing:-.035em; text-transform:uppercase; }.hero-intro { max-width:620px; font-size:clamp(1.05rem,1.7vw,1.35rem); margin:2rem 0; color:#26333d; }.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:3rem; padding:.8rem 1.1rem; border:1px solid var(--ink); text-decoration:none; font-weight:700; font-size:.9rem; }.button-primary { background:var(--ink); color:#fff; }.button-primary:hover { background:var(--copper); border-color:var(--copper); }.text-link { font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.2rem; }.hero-notes { margin-top:3.5rem; max-width:680px; display:grid; gap:.8rem; font-size:.88rem; color:#3f4c55; }.hero-notes p { margin:0; display:flex; align-items:flex-start; gap:.6rem; }.note-rule { display:inline-block; width:1.5rem; height:1px; background:var(--copper); margin-top:.7rem; flex:0 0 auto; }.scope { align-self:start; border-top:2px solid var(--ink); padding-top:.8rem; }.scope-item { display:grid; grid-template-columns:2.2rem 1fr auto; gap:.5rem; padding:1rem 0; border-bottom:1px solid var(--line); text-decoration:none; align-items:center; }.scope-item span,.work-index-number { color:var(--copper); font-size:.78rem; font-weight:700; }.scope-item strong { font-size:1rem; }.scope-item small { color:var(--muted); }.selected-work-line { grid-column:1/-1; display:flex; gap:1.5rem; border-top:1px solid var(--line); padding-top:1rem; font-size:.8rem; }.selected-work-line > span { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }.selected-work-line div { display:flex; flex-wrap:wrap; gap:.65rem; }.selected-work-line a { text-decoration:none; font-weight:700; }.selected-work-line i { color:var(--copper); font-style:normal; }
.light-section,.dark-section,.hiring-section,.contact-section { padding:clamp(4.5rem,8vw,7rem) max(4vw,1.5rem); }.section-heading { max-width:690px; margin-bottom:3.5rem; }.section-heading h2,.hiring-section h2,.contact-section h2 { font-size:clamp(2.85rem,5.6vw,5.25rem); }.section-heading p:not(.section-label) { color:var(--muted); margin:.95rem 0 0; font-size:1.05rem; }.work-browser { display:grid; grid-template-columns:minmax(250px,.62fr) minmax(0,1.25fr); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }.work-index { border-right:1px solid var(--line); }.work-index button { appearance:none; width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); text-align:left; display:flex; padding:1.35rem 1rem; color:var(--ink); cursor:pointer; align-items:center; }.work-index button:last-child { border-bottom:0; }.work-index button[aria-selected="true"] { background:var(--paper); border-left:3px solid var(--copper); padding-left:calc(1rem - 3px); }.work-index-logo { width:100%; height:2.9rem; display:flex; align-items:center; justify-content:flex-start; overflow:visible; }.work-index-logo img { max-width:12rem; max-height:100%; object-fit:contain; object-position:left center; }.work-index-copy { display:grid; gap:.16rem; }.work-index-copy small { color:var(--muted); }.work-index button[aria-selected="true"] small { color:#cbd4d8; }.work-detail { padding:clamp(1.6rem,4vw,3.5rem); }.work-detail-top { display:flex; justify-content:space-between; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }.project-brand { height:4.4rem; display:flex; align-items:center; margin:1.5rem 0 .8rem; }.work-logo { display:block; max-width:15rem; max-height:4.4rem; object-fit:contain; object-position:left center; }.work-logo-meridian { max-width:17rem; }.work-logo-natural-close { max-width:15rem; }.work-logo-authentic-mess { max-width:15rem; }.work-logo-chaos { max-width:12rem; }.work-detail h3 { font-family:"Barlow Condensed"; font-size:clamp(2.4rem,4vw,4rem); text-transform:uppercase; line-height:.9; margin:0; }.work-summary { max-width:600px; font-size:1.13rem; }.proof-list,.service-detail dl { margin:2rem 0; display:grid; gap:1.1rem; }.proof-list div,.service-detail dl div { display:grid; grid-template-columns:9rem 1fr; gap:1rem; border-top:1px solid var(--line); padding-top:.8rem; }.proof-list dt,.service-detail dt { font-size:.7rem; text-transform:uppercase; font-weight:700; letter-spacing:.1em; }.proof-list dd,.service-detail dd { margin:0; }.dark-link { font-size:.93rem; }
.dark-section { background:var(--dark); color:#f8f4ed; }.dark-section .section-heading p:not(.section-label) { color:#c7d0d4; }.service-layout { display:grid; grid-template-columns:minmax(230px,.62fr) minmax(0,1.25fr); border-top:1px solid #6a7780; border-bottom:1px solid #6a7780; }.service-nav { border-right:1px solid #6a7780; }.service-nav button { width:100%; display:flex; gap:.9rem; padding:1.15rem .9rem; color:#dfe6e6; background:none; border:0; border-bottom:1px solid #53616c; cursor:pointer; text-align:left; }.service-nav button[aria-selected="true"] { background:#f8f4ed; color:var(--ink); }.service-nav span,.service-number { color:var(--copper); font-weight:700; }.service-detail { padding:clamp(1.6rem,4vw,3.5rem); }.service-detail h3 { margin:.5rem 0 0; font-family:"Barlow Condensed"; text-transform:uppercase; font-size:clamp(2rem,3.4vw,3.2rem); line-height:.93; }.service-detail dl div { border-color:#53616c; }.light-link { color:#fff; }.method { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:3.8rem; }.method > div { border-top:1px solid #6a7780; padding-top:1rem; }.method span { color:var(--copper); display:block; font-size:.75rem; margin-bottom:1rem; }.method strong { font-size:1.05rem; }.method p { color:#c7d0d4; font-size:.92rem; margin:.5rem 0; }
.about-section { background:var(--cloud); }.compact-heading { margin-bottom:2.2rem; }.about-copy { max-width:730px; display:grid; gap:1rem; font-size:1.12rem; }.about-copy p { margin:0; }.fit-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:3.5rem; }.fit-grid > div { border-top:1px solid var(--ink); padding-top:1rem; }.fit-grid ul { margin:0; padding-left:1.1rem; }.fit-grid li { margin:.45rem 0; }.hiring-section { background:var(--paper); display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:end; }.hiring-section p:not(.section-label) { font-size:1.14rem; max-width:630px; margin:1rem 0 0; }.resume-links { display:grid; gap:.7rem; }.resume-links a { border:1px solid var(--ink); padding:1rem; text-decoration:none; font-weight:700; display:flex; justify-content:space-between; }.resume-links a:hover { background:var(--ink); color:#fff; }.resume-links .linkedin-link { border-color:transparent; padding-left:0; padding-right:0; }
.contact-section { background:var(--ink); color:#fff; display:grid; grid-template-columns:.8fr 1.2fr; gap:5vw; }.contact-intro h2 { font-size:clamp(2.8rem,5vw,4.5rem); }.contact-intro > p:not(.section-label) { color:#cad2d5; max-width:410px; }.copy-email { background:none; border:0; padding:0; color:#fff; font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }.brief-builder { display:grid; gap:1.3rem; }.brief-builder fieldset { border:0; padding:0; margin:0; }.brief-builder legend { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#c8d1d3; margin-bottom:.7rem; }.choice-row { display:flex; flex-wrap:wrap; gap:.5rem; }.choice-row button { padding:.55rem .7rem; background:transparent; color:#fff; border:1px solid #687780; cursor:pointer; }.choice-row button.is-selected,.choice-row button:hover { background:#f6f1e8; color:var(--ink); border-color:#f6f1e8; }.brief-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.6rem; }.brief-summary div { border-top:1px solid #687780; padding-top:.65rem; }.brief-summary span { display:block; color:#c8d1d3; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; }.brief-summary strong { font-size:.9rem; }.email-button { justify-self:start; margin-top:.3rem; }.career-email { color:#fff; font-weight:700; font-size:.9rem; }.career-email:hover { color:#d7a67f; }
footer { background:#0a1118; color:#d7dfe1; padding:2rem max(4vw,1.5rem); display:grid; grid-template-columns:1fr auto; gap:1rem; font-size:.84rem; } footer div { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; } footer strong { color:#fff; } footer a { color:#fff; } footer p { margin:0; grid-column:1/-1; color:#85939a; font-size:.75rem; }
@media (max-width:760px) { .site-header { gap:1.5rem; align-items:flex-start; }.site-header nav { flex-wrap:wrap; justify-content:flex-end; line-height:1.6; }.hero { min-height:auto; grid-template-columns:1fr; padding-top:4.5rem; }.scope { max-width:none; }.selected-work-line { display:block; }.selected-work-line div { margin-top:.75rem; }.work-browser,.service-layout,.hiring-section,.contact-section { grid-template-columns:1fr; }.work-index,.service-nav { border-right:0; border-bottom:1px solid var(--line); }.service-nav { border-color:#6a7780; }.work-index { display:grid; grid-template-columns:1fr 1fr; }.work-index button:nth-last-child(-n+2) { border-bottom:0; }.work-index button:nth-child(odd) { border-right:1px solid var(--line); }.service-nav { display:grid; grid-template-columns:1fr 1fr 1fr; }.service-nav button { font-size:.86rem; }.proof-list div,.service-detail dl div { grid-template-columns:1fr; gap:.35rem; }.method,.fit-grid,.brief-summary { grid-template-columns:1fr; }.method { gap:1rem; }.hiring-section { align-items:start; }.contact-section { gap:3rem; } footer { grid-template-columns:1fr; } }