@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  --ink: #333333;
  --muted: #777773;
  --paper: #ffffff;
  --line: #d7d7d4;
  --radius: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.site-frame {
  width: 100%;
  margin: 0 auto;
  background: var(--paper);
  min-height: 100vh;
}

.section-shell,
.site-header {
  width: calc(100% - 96px);
  margin: 0 auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 19px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.wordmark {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.04em;
}

nav { display: flex; gap: 27px; text-transform: lowercase; }
nav a, .text-link { transition: opacity 180ms ease; }
nav a:hover, .text-link:hover { opacity: .55; }

.hero { min-height: 650px; padding: 32px 0 54px; display: flex; flex-direction: column; justify-content: space-between; }

.hero-topline { display: flex; justify-content: center; }

.hero-role { text-align: center; line-height: 1.25; }

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
}

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 { text-transform: lowercase; }

h1 {
  max-width: 820px;
  margin: 100px 0 60px;
  font-size: clamp(52px, 7.2vw, 94px);
  font-weight: 500;
  letter-spacing: -.085em;
  line-height: .94;
}

h1 em, h2 em { color: inherit; font-style: normal; }

.hero-bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; }
.hero-intro { max-width: 470px; margin: 0; font-size: 18px; letter-spacing: -.035em; line-height: 1.32; }
.text-link { display: inline-flex; gap: 10px; align-items: center; font-size: 11px; font-weight: 600; }
.text-link span { color: inherit; font-size: 16px; }

.work { padding: 64px 0 110px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; margin-bottom: 45px; }
h2 { max-width: 780px; margin-bottom: 0; font-size: clamp(34px, 4.6vw, 62px); font-weight: 500; letter-spacing: -.075em; line-height: .98; }
.heading-link { margin-top: 24px; }
.work-grid { display: grid; grid-template-columns: 1.2fr .8fr 1.1fr; gap: 20px; align-items: start; }
.case:nth-child(2) { margin-top: 70px; }
.case-art { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1.12; overflow: hidden; border-radius: var(--radius); }
.case-art::after { position: absolute; inset: 0; content: ''; opacity: .18; background: linear-gradient(120deg, transparent 35%, #fff 36%, transparent 43%, transparent 66%, #fff 67%, transparent 74%); mix-blend-mode: screen; }
.case-art span { position: relative; z-index: 1; font-size: clamp(25px, 3.6vw, 54px); font-weight: 600; letter-spacing: -.09em; line-height: .82; text-align: center; }
.art-porsche { color: #f4f3ee; background: radial-gradient(circle at 30% 32%, #6f7780 0 2%, transparent 3%), linear-gradient(145deg, #0f1112 5%, #3a4148 45%, #141617 100%); }
.art-porsche span { color: #f4f3ee; transform: rotate(-7deg); }
.art-wartsila { color: #333333; background: radial-gradient(circle at 68% 30%, #d6d6d3 0 4%, transparent 5%), linear-gradient(165deg, #a9a9a6, #e1e1df 48%, #777773); }
.art-wartsila span { font-size: clamp(23px, 3vw, 42px); }
.art-pitches { color: #171716; background: radial-gradient(ellipse at 42% 45%, #f0f0eb 0 8%, transparent 9%), linear-gradient(140deg, #c9c8bd, #ebe9e1 54%, #9fa5a1); }
.art-pitches span { font-size: clamp(25px, 3.2vw, 48px); }
.case-meta { display: flex; justify-content: space-between; gap: 20px; padding-top: 12px; }
.case-meta h3 { margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: -.03em; }
.case-meta p { margin: 0; color: var(--muted); font-size: 12px; }
.case-number { color: var(--muted); font-size: 10px; }

.about { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; padding: 88px 0 120px; border-top: 1px solid var(--line); }
.about .section-heading { display: block; margin: 0; }
.about .section-heading h2 { margin-top: 52px; font-size: clamp(32px, 4vw, 54px); }
.about-copy { max-width: 650px; padding-top: 148px; }
.about-copy p { max-width: 590px; margin-bottom: 24px; font-size: 17px; letter-spacing: -.03em; line-height: 1.4; }

.contact { padding: 88px 0 80px; border-top: 1px solid var(--line); }
.contact h2 { margin: 62px 0 48px; max-width: 800px; }
.contact-link { display: inline-flex; gap: 18px; align-items: center; padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.05em; }
.contact-link span { color: inherit; }
.contact-form { max-width: 650px; margin-top: 64px; }
.form-row { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; padding: 15px 0; border-top: 1px solid var(--line); }
.form-row label { padding-top: 3px; color: var(--muted); font-size: 10px; }
.form-row input, .form-row textarea { width: 100%; padding: 8px 10px; color: var(--ink); background: #fff3a6; border: 0; border-radius: 0; outline: 0; font: inherit; font-size: 14px; resize: vertical; }
.form-row input:focus, .form-row textarea:focus { box-shadow: 0 1px 0 var(--ink); }
.contact-form button { display: inline-flex; gap: 12px; align-items: center; margin-top: 18px; padding: 0 0 5px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.contact-form button span { font-size: 16px; }
.contact-details { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 86px; color: var(--muted); font-size: 10px; }
.contact-details a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0 27px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; text-transform: lowercase; }

@media (max-width: 700px) {
  .site-frame { width: 100%; min-height: 100vh; }
  .section-shell, .site-header { width: min(100% - 36px, 1180px); }
  .site-header { padding: 18px 0; }
  .wordmark { font-size: 12px; }
  nav { gap: 14px; font-size: 10px; }
  .hero { min-height: 570px; padding: 28px 0 42px; }
  .hero-topline { align-items: start; }
  h1 { margin: 90px 0 48px; font-size: clamp(50px, 16vw, 84px); }
  .hero-bottom, .section-heading, .about { display: block; }
  .hero-intro { margin-bottom: 28px; font-size: 17px; }
  .section-heading { margin-bottom: 42px; }
  .section-heading h2 { margin-top: 26px; }
  .work-grid { display: block; }
  .case, .case:nth-child(2) { margin: 0 0 54px; }
  .case-art { aspect-ratio: 1 / 1.05; }
  .about { padding: 70px 0 90px; }
  .about .section-heading h2 { margin: 26px 0 44px; }
  .about-copy { padding-top: 0; }
  .about-copy p { font-size: 17px; }
  .contact { padding: 70px 0 62px; }
  .contact h2 { margin: 48px 0 44px; }
  .contact-link { font-size: 21px; }
  .contact-form { margin-top: 52px; }
  .form-row { display: block; }
  .form-row label { display: block; margin-bottom: 9px; }
  .contact-details { margin-top: 80px; flex-direction: column; gap: 10px; }
  .site-footer { display: block; }
  .site-footer span { display: block; margin-bottom: 8px; }
}