:root {
  --paper: #f7f6f2;
  --ink: #101010;
  --red: #e1271c;
  --line: #1e1e1e;
  --display: "Archivo Narrow", "Helvetica Neue Condensed", Arial Narrow, sans-serif;
  --body: "Inter", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.5; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
.skip-link { position: fixed; left: 10px; top: -60px; z-index: 10; background: var(--red); color: var(--paper); padding: 9px 12px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 10px; }

.topbar { min-height: 48px; border-top: 5px solid var(--ink); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; padding: 0 3.2vw; font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.topbar__brand { grid-column: span 4; text-decoration: none; }
.topbar__meta { grid-column: 9 / -1; text-align: right; white-space: nowrap; }
.topbar__meta a { text-decoration: none; }

.hero { min-height: 605px; display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.hero__number { grid-column: 1 / span 4; font-family: var(--display); font-size: clamp(230px, 33vw, 500px); font-weight: 700; line-height: .75; letter-spacing: -.08em; align-self: end; color: var(--red); padding: 0 0 20px 2.2vw; }
.hero__main { grid-column: 5 / span 6; align-self: center; padding: 70px 3vw 52px; border-left: 1px solid var(--line); }
.eyebrow, .section-label { font-size: 10px; letter-spacing: .13em; font-weight: 700; margin: 0 0 20px; }
h1, h2, h3 { font-family: var(--display); margin: 0; font-weight: 700; letter-spacing: -.025em; }
h1 { font-size: clamp(52px, 7.4vw, 116px); line-height: .83; max-width: 700px; }
.hero__dek { max-width: 490px; font-size: 16px; line-height: 1.55; margin: 31px 0; }
.button { display: inline-block; border: 1px solid var(--red); background: var(--red); color: var(--paper); padding: 13px 17px 12px; font-family: var(--body); font-weight: 700; font-size: 11px; letter-spacing: .09em; text-decoration: none; cursor: pointer; border-radius: 0; }
.button:hover, .button:focus { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hero__aside { grid-column: 11 / -1; border-left: 1px solid var(--line); padding: 20px 1.5vw; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--display); }
.hero__aside span { color: var(--red); font-size: 18px; font-weight: 700; }
.hero__aside p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.05; }

.services { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1px solid var(--line); }
.services > * { min-height: 274px; padding: 21px 1.8vw; border-right: 1px solid var(--line); }
.services > :last-child { border-right: 0; }
.services .section-label { grid-column: span 2; margin: 0; }
.service { grid-column: span 2.5; display: flex; flex-direction: column; }
.service h2 { font-size: 41px; line-height: .84; }
.service p { font-size: 13px; margin: auto 0 14px; }
.service span { border-top: 1px solid var(--line); padding-top: 9px; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.facts div { padding: 24px 3.2vw 23px; min-height: 135px; border-right: 1px solid var(--line); display: flex; align-items: flex-end; gap: 19px; }
.facts div:last-child { border: 0; }
.facts strong { color: var(--red); font-family: var(--display); font-size: 68px; line-height: .7; }
.facts span { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: .95; }

.method { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1px solid var(--line); }
.method__intro { grid-column: 2 / span 5; padding: 86px 4vw 84px 0; }
.method h2, .contact h2 { font-size: clamp(48px, 6vw, 88px); line-height: .85; margin-bottom: 38px; }
.method__intro > p:not(.section-label) { max-width: 515px; font-size: 15px; margin: 0 0 20px; }
.method__steps { grid-column: 8 / span 4; margin: 0; padding: 77px 0 55px; list-style: none; }
.method__steps li { border-top: 1px solid var(--line); display: grid; grid-template-columns: 70px 1fr; padding: 16px 0 18px; }
.method__steps li:last-child { border-bottom: 1px solid var(--line); }
.method__steps span { font-family: var(--display); font-size: 27px; font-weight: 700; color: var(--red); line-height: 1; }
.method__steps h3 { font-size: 24px; line-height: 1; }
.method__steps p { margin: 7px 0 0; font-size: 12px; }

.testimonial { padding: 76px 16.6vw 80px; border-bottom: 1px solid var(--line); }
.testimonial blockquote { border-left: 8px solid var(--red); padding: 4px 0 4px 28px; margin: 27px 0 21px; max-width: 850px; font-family: var(--display); font-size: clamp(31px, 4vw, 60px); line-height: .98; font-weight: 700; }
.testimonial__source { margin: 0 0 0 36px; font-size: 10px; font-weight: 700; letter-spacing: .1em; }

.contact { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1px solid var(--line); }
.contact__heading { grid-column: 2 / span 5; padding: 75px 2vw 78px 0; }
.contact__details { grid-column: 7 / span 2; padding: 76px 1.6vw 30px 0; font-size: 12px; }
.contact__details p { margin: 0 0 23px; }
.contact__details strong { display: inline-block; font-size: 10px; letter-spacing: .1em; margin-bottom: 4px; }
.contact__form { grid-column: 9 / span 3; padding: 76px 0 60px; }
.contact__form label { display: block; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 13px; font-size: 9px; letter-spacing: .1em; font-weight: 700; }
.contact__form input, .contact__form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 7px 0; font: inherit; font-size: 13px; color: var(--ink); border-radius: 0; }
.contact__form textarea { resize: vertical; min-height: 58px; }
.contact__form input:focus, .contact__form textarea:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.contact__form .button { margin-top: 20px; }
.form-status { font-size: 11px; font-weight: 600; margin: 12px 0 0; min-height: 18px; }

.footer { display: grid; grid-template-columns: 1fr auto auto; gap: 30px; padding: 18px 3.2vw; font-size: 10px; letter-spacing: .1em; font-weight: 700; }
.footer nav { display: flex; gap: 20px; }
.footer a { text-decoration: none; }

.privacy { min-height: calc(100vh - 145px); display: grid; grid-template-columns: repeat(12, 1fr); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.privacy__number { grid-column: 1 / span 4; color: var(--red); font: 700 clamp(220px, 31vw, 470px)/.75 var(--display); letter-spacing: -.08em; align-self: start; padding: 48px 0 0 2.2vw; }
.privacy__content { grid-column: 5 / span 6; border-left: 1px solid var(--line); padding: 76px 3vw; }
.privacy h1 { margin-bottom: 39px; }
.privacy h2 { font-size: 30px; line-height: 1; margin: 34px 0 9px; }
.privacy__content > p { max-width: 640px; }
.privacy__back { margin-top: 42px; }

@media (max-width: 800px) {
  .topbar { padding: 0 16px; grid-template-columns: 1fr 1fr; }
  .topbar__brand, .topbar__meta { grid-column: auto; }
  .topbar__meta { font-size: 9px; }
  .hero { min-height: 560px; grid-template-columns: repeat(6, 1fr); }
  .hero__number { grid-column: 1 / span 3; font-size: 60vw; padding-left: 10px; padding-bottom: 13px; }
  .hero__main { grid-column: 3 / -1; padding: 55px 17px 35px; z-index: 1; }
  .hero__aside { display: none; }
  h1 { font-size: clamp(48px, 14.4vw, 80px); }
  .hero__dek { font-size: 14px; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .services > * { min-height: 220px; }
  .services .section-label { grid-column: 1 / -1; min-height: auto; border-bottom: 1px solid var(--line); padding: 15px 17px; }
  .service { grid-column: auto; padding: 18px 17px; }
  .service:nth-child(3) { border-right: 0; }
  .service:nth-child(4) { border-top: 1px solid var(--line); }
  .service:nth-child(5) { border-top: 1px solid var(--line); border-right: 0; }
  .facts { grid-template-columns: 1fr; }
  .facts div { min-height: 100px; padding: 17px; border-right: 0; border-bottom: 1px solid var(--line); }
  .facts div:last-child { border-bottom: 0; }
  .method { display: block; }
  .method__intro { padding: 57px 17px 38px; }
  .method__steps { padding: 0 17px 55px; }
  .testimonial { padding: 55px 17px; }
  .testimonial blockquote { padding-left: 18px; border-left-width: 6px; }
  .testimonial__source { margin-left: 24px; }
  .contact { display: block; padding: 0 17px; }
  .contact__heading { padding: 56px 0 33px; }
  .contact__details { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }
  .contact__form { padding: 20px 0 53px; }
  .footer { grid-template-columns: 1fr; gap: 12px; padding: 18px 17px; }
  .footer nav { gap: 15px; flex-wrap: wrap; }
  .privacy { grid-template-columns: repeat(6, 1fr); }
  .privacy__number { grid-column: 1 / span 3; font-size: 60vw; padding: 30px 0 0 10px; }
  .privacy__content { grid-column: 2 / -1; padding: 58px 17px; z-index: 1; }
}

@media (max-width: 390px) {
  .topbar__meta { font-size: 8px; letter-spacing: .07em; }
  .contact__details { grid-template-columns: 1fr; }
}
