@font-face { font-family: "Forum"; src: url("fonts/forum.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url("fonts/plexmono-400.woff2") format("woff2"); font-display: swap; }

:root {
  --antracit: #3B3834; --calc: #F0F1EE; --grafit: #6F6B64; --foc: #AF2B1E; --urban: #2E5E6E;
  --line: #D9DAD5; --white: #FFFFFF;
  --title: "Forum", Georgia, serif; --text: "Plex", Arial, sans-serif; --mono: "PlexMono", Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body { font-family: var(--text); color: var(--antracit); background: var(--calc); font-size: 17px; line-height: 1.6;
       -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--title); font-weight: 400; line-height: 1.08; letter-spacing: .005em; }
h2 { font-size: clamp(34px, 4.4vw, 52px); }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--grafit); }
.lead { font-size: 19px; color: var(--grafit); max-width: 680px; margin-top: 16px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 4px; font-weight: 600;
       font-size: 15px; text-decoration: none; border: 1.5px solid var(--antracit); transition: background .15s, color .15s; }
.btn-dark { background: var(--antracit); color: var(--calc); }
.btn-dark:hover { background: #2a2825; }
.btn-ghost:hover { background: var(--antracit); color: var(--calc); }
section { padding: 96px 0; }

/* grid lines, like tracing paper */
.paper { background-color: var(--calc);
         background-image: linear-gradient(rgba(59,56,52,.045) 1px, transparent 1px),
                           linear-gradient(90deg, rgba(59,56,52,.045) 1px, transparent 1px);
         background-size: 32px 32px; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(240, 241, 238, .94); backdrop-filter: blur(8px);
       border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.top .logo img { height: 58px; width: auto; margin-left: -8px; }
.nav { display: flex; gap: 26px; align-items: center; font-size: 15px; }
.nav a { text-decoration: none; }
.nav a:not(.btn):hover { color: var(--urban); }
.nav .btn { padding: 10px 18px; }
@media (max-width: 860px) { .nav a:not(.btn) { display: none; } }

/* hero */
.hero { padding: 110px 0 100px; border-bottom: 1px solid var(--line); }
.hero h1 { font-size: clamp(46px, 6.4vw, 82px); max-width: 900px; }
.hero .lead { font-size: 20px; }
.hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.hero .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 72px; border-top: 1px solid var(--antracit); }
.fact { padding: 20px 20px 0 0; }
.fact b { display: block; font-family: var(--title); font-weight: 400; font-size: 52px; line-height: 1; }
.fact span { font-size: 14.5px; color: var(--grafit); display: block; margin-top: 8px; max-width: 220px; }
@media (max-width: 760px) { .hero .facts { grid-template-columns: 1fr 1fr; row-gap: 26px; } }

/* services */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 52px; }
.service { background: var(--white); border: 1px solid var(--line); border-top: 5px solid var(--c); padding: 36px 34px; }
.service .head { display: flex; align-items: center; gap: 16px; }
.service .head img { height: 64px; width: auto; }
.service h3 { font-size: 38px; }
.service .claim { font-family: var(--title); font-size: 22px; color: var(--c); margin-top: 14px; }
.service ul { list-style: none; margin-top: 18px; }
.service li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 16px; }
.service li::before { content: "—"; color: var(--c); margin-right: 10px; }
.foc { --c: var(--foc); }
.urban { --c: var(--urban); }
.also { margin-top: 28px; background: var(--white); border: 1px solid var(--line); padding: 26px 34px;
        display: flex; flex-wrap: wrap; gap: 10px 36px; align-items: baseline; }
.also h3 { font-size: 28px; }
.also p { color: var(--grafit); }
@media (max-width: 860px) { .services { grid-template-columns: 1fr; } }

/* process */
.dark { background: var(--antracit); color: var(--calc); }
.dark .eyebrow, .dark .lead { color: #BDBAB3; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 56px; counter-reset: s; }
.step { border-left: 1px solid rgba(240,241,238,.25); padding: 0 22px 8px; }
.step:first-child { border-left: 0; padding-left: 0; }
.step .n { font-family: var(--mono); font-size: 13px; color: #BDBAB3; }
.step h3 { font-size: 25px; margin-top: 10px; }
.step p { font-size: 15px; color: #CFCCC5; margin-top: 8px; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr; gap: 26px; }
  .step { border-left: 0; border-top: 1px solid rgba(240,241,238,.25); padding: 18px 0 0; } }

/* project types */
.types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 52px; }
.type { background: var(--white); padding: 28px 26px; }
.type .code { font-family: var(--mono); font-size: 12.5px; color: var(--c, var(--grafit)); letter-spacing: .04em; }
.type h3 { font-size: 26px; margin-top: 8px; }
.type p { font-size: 15px; color: var(--grafit); margin-top: 6px; }
@media (max-width: 860px) { .types { grid-template-columns: 1fr; } }
.areas { margin-top: 30px; font-size: 15.5px; color: var(--grafit); }
.areas b { color: var(--antracit); font-weight: 600; }

/* why */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 44px; }
.why h3 { font-size: 28px; }
.why p { color: var(--grafit); margin-top: 8px; }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; } }

/* about */
.about .wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start; }
.about p { margin-top: 16px; }
.about .sig { font-family: var(--title); font-size: 26px; margin-top: 26px; }
.about .sig span { display: block; font-family: var(--text); font-size: 14px; color: var(--grafit); }
@media (max-width: 860px) { .about .wrap { grid-template-columns: 1fr; gap: 20px; } }

/* contact */
.contact .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; }
.contact dl { margin-top: 30px; }
.contact dt { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #BDBAB3; margin-top: 20px; }
.contact dd { font-size: 19px; margin-top: 4px; }
.contact dd a { text-decoration: none; border-bottom: 1px solid rgba(240,241,238,.4); }
.docs { background: rgba(240,241,238,.06); border: 1px solid rgba(240,241,238,.2); padding: 30px; }
.docs h3 { font-size: 26px; }
.docs ul { list-style: none; margin-top: 14px; }
.docs li { padding: 9px 0; border-top: 1px solid rgba(240,241,238,.15); font-size: 15.5px; color: #DAD7D0; }
.docs li::before { content: "□"; margin-right: 10px; color: #BDBAB3; }
.docs .btn { margin-top: 22px; border-color: var(--calc); color: var(--calc); }
.docs .btn:hover { background: var(--calc); color: var(--antracit); }
@media (max-width: 860px) { .contact .wrap { grid-template-columns: 1fr; } }

/* footer */
footer { background: #2c2a27; color: #BDBAB3; padding: 44px 0 36px; font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
footer img { height: 52px; width: auto; margin-left: -8px; }
footer .legal { font-family: var(--mono); font-size: 12.5px; line-height: 1.8; }
footer a { text-decoration: none; }
footer a:hover { color: var(--calc); }

.page { max-width: 760px; margin: 0 auto; padding: 80px 24px; }
.page h1 { font-size: 52px; }
.page h2 { font-size: 28px; margin-top: 36px; }
.page p, .page li { color: var(--grafit); margin-top: 12px; }
.page ul { padding-left: 20px; }

@media (max-width: 560px) { .wrap { padding: 0 16px; } section { padding: 68px 0; } .hero { padding: 72px 0 64px; }
  .top .logo img { height: 48px; } .service, .also { padding: 26px 22px; } }