:root { --ink:#141414; --paper:#f2efe8; --lime:#d9ff3f; --coral:#fe795c; --blue:#6ea4ff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; } .grain { position:fixed; inset:0; opacity:.075; pointer-events:none; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } a { color:inherit; text-decoration:none; } .site-header { display:flex; justify-content:space-between; align-items:center; padding:24px 4vw; position:absolute; width:100%; z-index:2; } .brand { font-size:1.65rem; font-weight:700; letter-spacing:-.1em; } .brand span { font-size:.45rem; vertical-align:top; margin-left:2px; } .nav { display:flex; gap:28px; font-size:.9rem; } .nav a { position:relative; } .nav a:after { content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0; background:currentColor; transition:width .25s; } .nav a:hover:after { width:100%; } .menu-toggle { display:none; border:0; background:transparent; font:inherit; }
.hero { min-height:100vh; padding:20vh 4vw 5vh; display:flex; flex-direction:column; justify-content:space-between; background:var(--lime); } .eyebrow,.index,.project-meta p,.contact-footer { font-family:"DM Mono",monospace; text-transform:uppercase; font-size:.7rem; letter-spacing:.04em; } .hero h1 { font-size:clamp(4rem,11.3vw,11.5rem); letter-spacing:-.09em; line-height:.79; margin:0; max-width:1100px; font-weight:700; } em { font-family:"Playfair Display",serif; font-weight:600; letter-spacing:-.08em; } .hero-footer { display:flex; align-items:end; justify-content:space-between; gap:20px; } .hero-footer p { max-width:330px; font-size:1.05rem; line-height:1.35; margin:0; } .round-link { width:65px; height:65px; border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; font-size:1.5rem; transition:transform .25s,background .25s; } .round-link:hover { transform:rotate(-40deg); background:var(--ink); color:var(--lime); }
.work-section { padding:9vw 4vw; } .section-heading { display:flex; justify-content:space-between; border-bottom:1px solid #b6b4ad; padding-bottom:15px; margin-bottom:35px; } .section-heading p { margin:0; } .projects { display:grid; grid-template-columns:repeat(2,1fr); gap:7vw 3vw; } .project-art { height:clamp(230px,34vw,510px); position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.2,1); } .project:hover .project-art { transform:scale(.98); } .project-meta { display:flex; justify-content:space-between; align-items:baseline; padding-top:12px; } .project-meta h2 { font-weight:500; font-size:1.35rem; letter-spacing:-.05em; margin:0; } .project-meta p { margin:0; color:#605f5a; }
.project-one .project-art { background:var(--coral); display:grid; place-items:center; } .project-one span { font:600 clamp(10rem,23vw,22rem)/.7 "Playfair Display"; color:#fff0db; position:relative; z-index:1; } .project-one i { width:52%; height:52%; background:var(--ink); border-radius:50%; position:absolute; right:8%; top:7%; } .project-one b { width:30%; height:30%; background:var(--lime); border-radius:50%; position:absolute; left:9%; bottom:9%; }
.project-two .project-art { background:var(--blue); display:grid; place-items:center; } .project-two span { font-size:clamp(2.7rem,7vw,7rem); font-weight:700; color:#fff; letter-spacing:-.1em; transform:rotate(-14deg); z-index:1; } .project-two i { position:absolute; width:140%; height:44%; background:var(--lime); transform:rotate(-16deg); top:30%; }
.project-three .project-art { background:#1e335f; display:grid; place-items:center; } .project-three span { z-index:1; color:#ffd4c5; font:600 clamp(10rem,22vw,21rem)/1 "Playfair Display"; } .project-three i { position:absolute; width:55%; height:55%; border:2px solid var(--lime); border-radius:50%; } .project-four .project-art { background:#e5d4c4; display:grid; place-items:center; } .project-four span { font-size:clamp(3rem,7vw,7.5rem); letter-spacing:.2em; color:#2e251f; z-index:2; } .project-four i { width:65%; aspect-ratio:1; border-radius:50%; background:var(--coral); position:absolute; } .project-four b { width:40%; aspect-ratio:1; border-radius:50%; background:var(--blue); position:absolute; transform:translate(70%,65%); }
.statement { background:var(--ink); color:var(--paper); padding:11vw 14vw 12vw 4vw; } .statement h2 { font-size:clamp(2.8rem,6.5vw,7rem); letter-spacing:-.075em; line-height:.93; font-weight:500; margin:12vw 0 7vw; max-width:950px; } .statement h2 em { color:var(--lime); } .statement-copy { font-size:clamp(1rem,1.5vw,1.35rem); max-width:490px; line-height:1.4; margin-left:auto; }.contact { padding:11vw 4vw 2.5vw; background:var(--coral); min-height:70vh; display:flex; flex-direction:column; justify-content:space-between; } .contact > a { font-size:clamp(2.8rem,7.4vw,8rem); letter-spacing:-.08em; line-height:.9; font-weight:500; margin:7vw 0 auto; } .contact > a span { font-size:.7em; display:inline-block; transition:transform .25s; } .contact > a:hover span { transform:translate(8px,-8px); } .contact-footer { display:flex; justify-content:space-between; padding-top:35px; }
@media (max-width:650px) { .site-header { padding:20px 5vw; } .nav { display:none; position:absolute; right:5vw; top:62px; padding:15px; background:var(--lime); flex-direction:column; gap:12px; } .nav.open { display:flex; } .menu-toggle { display:block; } .hero { padding:19vh 5vw 4vh; } .hero h1 { font-size:21vw; } .hero-footer p { max-width:245px; font-size:.92rem; } .round-link { width:52px; height:52px; } .work-section,.statement,.contact { padding-left:5vw; padding-right:5vw; } .projects { grid-template-columns:1fr; gap:12vw; } .project-art { height:83vw; } .project-meta h2 { font-size:1.2rem; } .statement { padding-top:20vw; padding-bottom:20vw; } .statement h2 { margin:18vw 0 14vw; } .contact { min-height:62vh; padding-top:20vw; } .contact-footer { gap:15px; flex-wrap:wrap; font-size:.6rem; } }

/* Backlogged Inc palette: black foundation, warm gold accents. */
:root { --ink:#f7f1e5; --paper:#0b0b0b; --lime:#c9a44c; --coral:#c9a44c; --blue:#1c1c1c; }
.hero { background:#0b0b0b; color:var(--ink); }
.round-link { border-color:var(--lime); color:var(--lime); }
.round-link:hover { background:var(--lime); color:#0b0b0b; }
.work-section { background:#0b0b0b; color:var(--ink); }
.section-heading { border-color:#4c4537; }
.project-meta p { color:#b4ab99; }
.project-one .project-art { background:#c9a44c; }
.project-one span { color:#0b0b0b; }
.project-one i { background:#1a1a1a; }
.project-one b { background:#f7f1e5; }
.project-two .project-art { background:#1a1a1a; }
.project-two span { color:#f7f1e5; }
.project-two i { background:#c9a44c; }
.project-three .project-art { background:#101010; }
.project-three span { color:#c9a44c; }
.project-three i { border-color:#c9a44c; }
.project-four .project-art { background:#d8ccb5; }
.project-four span { color:#111; }
.project-four i { background:#c9a44c; }
.project-four b { background:#262626; }
.statement { background:#171717; color:var(--ink); }
.statement h2 em { color:var(--lime); }
.contact { background:#c9a44c; color:#0b0b0b; }
.contact-content { margin:6vw 0 auto; }
.contact h2 { font-size:clamp(2.8rem,7.4vw,8rem); letter-spacing:-.08em; line-height:.9; font-weight:500; margin:0 0 3rem; }
.contact-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem 2rem; max-width:850px; }
.contact-form label { display:flex; flex-direction:column; gap:.65rem; font-family:"DM Mono",monospace; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; }
.contact-form label:last-of-type { grid-column:1 / -1; }
.contact-form input,.contact-form textarea { width:100%; border:0; border-bottom:1px solid #5a471d; border-radius:0; background:transparent; color:#0b0b0b; padding:.55rem 0; font:1rem "DM Sans",sans-serif; outline:none; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color:#0b0b0b; }
.contact-form button { justify-self:start; border:1px solid #0b0b0b; border-radius:999px; background:#0b0b0b; color:#f7f1e5; padding:.9rem 1.25rem; cursor:pointer; font:600 .85rem "DM Sans",sans-serif; transition:background .2s,color .2s; }
.contact-form button:hover { background:transparent; color:#0b0b0b; }
@media (max-width:650px) { .contact-form { grid-template-columns:1fr; } .contact-form label:last-of-type { grid-column:auto; } }
.brand { display:flex; align-items:center; gap:7px; letter-spacing:-.06em; }
.logo-mark { width:31px; height:31px; overflow:visible; }
.logo-mark path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.logo-b { stroke:currentColor; stroke-width:5.5; }
.logo-l { stroke:var(--lime); stroke-width:4.5; }
.brand .brand-name { font-size:1.45rem; font-weight:700; vertical-align:baseline; margin:0; }
.brand .brand-inc { font-size:.62rem; vertical-align:baseline; margin:0; letter-spacing:-.05em; }
.plans { padding:10vw 4vw; background:#c9a44c; color:#0b0b0b; }
.plans > .eyebrow { margin:0; }
.plan-content { display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; align-items:end; margin-top:10vw; }
.plan-content h2 { font-size:clamp(2.8rem,6.5vw,7rem); line-height:.93; letter-spacing:-.075em; font-weight:500; margin:0; max-width:750px; }
.plan-card { padding:1.75rem; background:#0b0b0b; color:#f7f1e5; }
.plan-card p { line-height:1.45; }
.plan-label { margin:0; font-family:"DM Mono",monospace; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:#c9a44c; }
.plan-price { font-size:2rem; letter-spacing:-.06em; margin:3rem 0 1rem; }
.plan-card a { display:inline-block; margin-top:1rem; color:#c9a44c; font-weight:600; }
.plan-card a span { display:inline-block; transition:transform .2s; }
.plan-card a:hover span { transform:translate(4px,-4px); }
@media (max-width:650px) { .plans { padding-left:5vw; padding-right:5vw; } .plan-content { grid-template-columns:1fr; gap:3rem; margin-top:18vw; } }
.team { padding:9vw 4vw; background:#0b0b0b; color:#f7f1e5; }
.team .section-heading { border-color:#4c4537; }
.team-member { display:grid; grid-template-columns:150px 1fr 1.25fr; gap:3rem; align-items:center; padding:2.5rem 0 0; }
.member-mark { width:110px; height:110px; display:grid; place-items:center; border-radius:50%; background:#c9a44c; color:#0b0b0b; font-size:2rem; font-weight:700; letter-spacing:-.08em; }
.team-member h2 { margin:0; font-size:clamp(2rem,3vw,3.5rem); letter-spacing:-.07em; font-weight:500; }
.team-member > div p { margin:.45rem 0 0; font-family:"DM Mono",monospace; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:#c9a44c; }
.member-copy { max-width:420px; margin:0; line-height:1.45; }
.careers { padding:10vw 4vw; background:#f7f1e5; color:#0b0b0b; }
.careers > .eyebrow { margin:0; }
.career-content { display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; align-items:end; margin-top:10vw; }
.career-content h2 { font-size:clamp(2.8rem,6.5vw,7rem); line-height:.93; letter-spacing:-.075em; font-weight:500; margin:0; max-width:750px; }
.career-card { padding:1.75rem; background:#0b0b0b; color:#f7f1e5; }
.career-card h3 { font-size:1.6rem; letter-spacing:-.05em; font-weight:500; margin:3rem 0 1rem; }
.career-card p { line-height:1.45; }
.career-card a { display:inline-block; margin-top:1rem; color:#c9a44c; font-weight:600; }
.career-card a span { display:inline-block; transition:transform .2s; }
.career-card a:hover span { transform:translate(4px,-4px); }
@media (max-width:650px) { .team,.careers { padding-left:5vw; padding-right:5vw; } .team-member,.career-content { grid-template-columns:1fr; gap:1.5rem; } .member-mark { width:84px; height:84px; } .career-content { margin-top:18vw; gap:3rem; } }
.payroll { padding:10vw 4vw; background:#171717; color:#f7f1e5; }
.payroll > .eyebrow { margin:0; color:#c9a44c; }
.payroll-content { display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; align-items:end; margin-top:10vw; }
.payroll h2 { font-size:clamp(2.8rem,6.5vw,7rem); line-height:.93; letter-spacing:-.075em; font-weight:500; margin:0 0 1.5rem; }
.payroll-content > div > p { max-width:400px; line-height:1.45; margin:0; color:#d1c8b8; }
.payroll-card { padding:1.75rem; background:#f7f1e5; color:#0b0b0b; }
.payroll-card p { line-height:1.45; }
.payroll-card .plan-label { color:#725713; }
.payroll-card a { display:inline-block; margin-top:1rem; color:#0b0b0b; font-weight:600; }
.payroll-card a span { display:inline-block; transition:transform .2s; }
.payroll-card a:hover span { transform:translate(4px,-4px); }
@media (max-width:650px) { .payroll { padding-left:5vw; padding-right:5vw; } .payroll-content { grid-template-columns:1fr; gap:3rem; margin-top:18vw; } }