:root { --black: #080808; --white: #fff; --gray: #707070; --line: #d7d7d7; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 72px; } body { margin: 0; background: var(--white); color: var(--black); font-family: Arial, Helvetica, sans-serif; line-height: 1.5; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { color: inherit; font: inherit; }
.header { align-items: center; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); display: flex; height: 72px; justify-content: space-between; padding: 0 5vw; position: sticky; top: 0; z-index: 10; }.logo { font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }.nav { display: flex; gap: 38px; }.nav a, .menu { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }.menu { background: none; border: 0; display: none; padding: 0; }
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 72px); }.hero-copy { align-content: center; display: grid; padding: 8vw 7vw 8vw 5vw; }.label { color: var(--gray); font-size: 10px; font-weight: 700; letter-spacing: .14em; margin: 0; text-transform: uppercase; }.hero h1 { font-size: clamp(48px, 6.2vw, 94px); font-weight: 500; letter-spacing: -.055em; line-height: .98; margin: 70px 0 48px; white-space: pre-line; }.intro { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; margin: 0 0 40px; max-width: 560px; }.link { border-bottom: 1px solid var(--black); font-size: 11px; font-weight: 700; letter-spacing: .08em; padding-bottom: 4px; text-transform: uppercase; width: max-content; }.hero-image { filter: grayscale(1); height: 100%; object-fit: cover; object-position: 58% center; width: 100%; }
.section { border-top: 1px solid var(--line); padding: 120px 5vw; }.section-title { display: grid; gap: 35px; grid-template-columns: 1fr 2fr; margin-bottom: 90px; }.section-title h2 { font-size: clamp(42px, 5vw, 76px); font-weight: 500; letter-spacing: -.05em; line-height: 1; margin: 0; }.service-list { border-top: 1px solid var(--black); }.service { align-items: start; border-bottom: 1px solid var(--line); display: grid; gap: 30px; grid-template-columns: 60px 1fr 1fr; padding: 32px 0; }.service span, .project-index { color: var(--gray); font-size: 10px; font-weight: 700; letter-spacing: .1em; }.service h3 { font-size: clamp(21px, 2vw, 30px); font-weight: 500; letter-spacing: -.025em; margin: 0; }.service p { color: #333; font-size: 14px; line-height: 1.7; margin: 0; max-width: 520px; }
.category-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: -42px 0 55px; }.category-filter button { background: transparent; border: 1px solid var(--line); cursor: pointer; font-size: 11px; letter-spacing: .08em; padding: 9px 13px; text-transform: uppercase; }.category-filter button.active, .category-filter button:hover { background: var(--black); border-color: var(--black); color: var(--white); }.projects { display: grid; gap: 120px; }.project { display: grid; gap: 5vw; grid-template-columns: 1.3fr 1fr; }.project:nth-child(even) { grid-template-columns: 1fr 1.3fr; }.project:nth-child(even) > img { grid-column: 2; grid-row: 1; }.project:nth-child(even) .project-copy { grid-column: 1; grid-row: 1; }.project > img { filter: grayscale(1); height: 620px; object-fit: cover; width: 100%; }.project-copy { align-content: center; display: grid; }.project-copy h3 { font-size: clamp(34px, 3.8vw, 58px); font-weight: 500; letter-spacing: -.045em; line-height: 1; margin: 24px 0 38px; }.project-copy > p { color: #333; font-size: 15px; line-height: 1.75; margin: 0 0 50px; max-width: 560px; } dl { border-top: 1px solid var(--black); margin: 0; } dl div { border-bottom: 1px solid var(--line); display: grid; font-size: 10px; gap: 20px; grid-template-columns: 90px 1fr; letter-spacing: .06em; padding: 13px 0; text-transform: uppercase; } dt { color: var(--gray); } dd { margin: 0; }
.media-gallery { display: grid; gap: 14px; margin-top: 28px; }.media-gallery figure { margin: 0; }.media-gallery img, .media-gallery video { display: block; height: auto; max-width: 100%; width: 100%; }.media-gallery figcaption { color: var(--gray); font-size: 12px; margin-top: 6px; }
.about { display: grid; grid-template-columns: 1fr 2fr; }.about .section-title { display: block; margin: 0; }.about .section-title h2 { margin-top: 35px; }.about-content { display: grid; gap: 45px; grid-template-columns: 1fr 1fr; }.about-content img { filter: grayscale(1); height: 520px; object-fit: cover; width: 100%; }.about-content p { align-self: end; font-size: clamp(20px, 2vw, 29px); letter-spacing: -.02em; line-height: 1.5; margin: 0; }.footer { background: var(--black); color: var(--white); padding: 110px 5vw 45px; }.footer .label { color: #aaa; }.footer h2 { font-size: clamp(48px, 7vw, 106px); font-weight: 500; letter-spacing: -.06em; line-height: 1; margin: 40px 0 85px; }.footer-email { border-bottom: 1px solid #666; display: block; font-size: clamp(19px, 2.7vw, 40px); padding-bottom: 18px; }.footer-bottom { align-items: end; border-top: 1px solid #333; display: grid; font-size: 10px; gap: 40px; grid-template-columns: 1fr 1fr; letter-spacing: .08em; margin-top: 90px; padding-top: 28px; text-transform: uppercase; }.footer-bottom p { margin: 0; }.footer-bottom span { color: #888; }.footer-bottom p > span:first-child { color: var(--white); }.footer-credit { color: #aaa; display: inline-block; font-size: 18px; margin-top: 8px; text-transform: none; }.footer-credit:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }.socials { display: flex; gap: 28px; justify-self: end; }
@media (max-width: 850px) { .header { padding: 0 20px; }.menu { display: block; }.nav { background: var(--white); border-bottom: 1px solid var(--line); display: none; flex-direction: column; gap: 0; left: 0; padding: 20px; position: absolute; right: 0; top: 72px; }.nav.open { display: flex; }.nav a { border-bottom: 1px solid var(--line); padding: 15px 0; }.hero { grid-template-columns: 1fr; }.hero-copy { min-height: 72vh; padding: 80px 20px; }.hero h1 { margin: 55px 0 38px; }.hero-image { height: 68vh; }.section { padding: 90px 20px; }.section-title { grid-template-columns: 1fr; margin-bottom: 65px; }.service { grid-template-columns: 45px 1fr; }.service p { grid-column: 2; }.project, .project:nth-child(even) { gap: 40px; grid-template-columns: 1fr; }.project:nth-child(even) > img, .project:nth-child(even) .project-copy { grid-column: 1; }.project:nth-child(even) > img { grid-row: 1; }.project:nth-child(even) .project-copy { grid-row: 2; }.project > img { height: auto; }.about { grid-template-columns: 1fr; }.about .section-title { margin-bottom: 65px; }.about-content { grid-template-columns: 1fr; }.about-content img { height: auto; }.footer { padding: 90px 20px 35px; } }
@media (max-width: 560px) { .projects { gap: 90px; }.about-content p { font-size: 20px; }.footer-bottom { align-items: start; grid-template-columns: 1fr; }.socials { flex-direction: column; gap: 12px; justify-self: start; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }