:root {
  /* Shared canvas tone: this also matches the supplied case-study artboards. */
  --page-background: #f3edef;
  --ink: #171717;
  --content-width: 1096px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--page-background); }

body {
  margin: 0;
  background: var(--page-background);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

img { display: block; max-width: 100%; }

.snapshot {
  position: relative;
  width: 100%;
  background: var(--page-background);
}

.snapshot > img {
  width: 100%;
  height: auto;
}

.home {
  overflow: hidden;
  aspect-ratio: 1444 / 850;
}

.hero-nav {
  position: absolute;
  top: 4.4%;
  left: 72%;
  display: grid;
  grid-template-columns: 70px 80px 110px;
  column-gap: 40px;
}

.hero-nav a {
  display: block;
  color: transparent;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  user-select: none;
}

.hero-nav a:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.work-section {
  width: 100%;
  padding: clamp(72px, 10vw, 144px) 24px clamp(28px, 2.5vw, 36px);
  background: var(--page-background);
}

.work-grid {
  width: min(100%, var(--content-width));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.2vw, 46px) clamp(18px, 2.4vw, 34px);
}

.work-grid article {
  aspect-ratio: 531 / 200;
  overflow: hidden;
  border: 1px solid #2e2e2e;
  background: #ece7e7;
}

.work-grid a { display: block; width: 100%; height: 100%; }

.work-grid a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.work-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 260ms ease;
}

.work-grid article:hover img,
.work-grid article:focus-within img {
  transform: scale(1.045);
}

.about-section {
  width: 100%;
  padding: 144px 24px 48px;
  background: var(--page-background);
}

.about-inner,
.contact-inner {
  width: min(100%, 778px);
  margin: 0 auto;
}

.about-section h1 { margin-bottom: 30px; }

.about-copy {
  font-size: 17px;
  line-height: 1.31;
}

.about-copy p { margin: 0 0 31px; }

.about-statement {
  margin: 48px 0 36px;
  font-size: 25px;
  line-height: 1.2;
}

.about-footer {
  display: flex;
  gap: 48px;
  padding-top: 30px;
  border-top: 1px solid #8a8383;
  font-size: 14px;
}

.about-footer a { color: var(--ink); text-decoration: none; }
.phone-link { display: inline-flex; align-items: center; gap: 7px; }
.phone-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.contact-section {
  width: 100%;
  min-height: 900px;
  padding: 64px 24px 120px;
  background: var(--page-background);
}

.eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 1;
}

.short-rule { width: 25px; height: 2px; margin-bottom: 28px; background: #777; }

h1 {
  margin: 0 0 52px;
  font-size: clamp(42px, 4.25vw, 61px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

form { display: grid; gap: 26px; }

label { display: grid; gap: 10px; font-size: 14px; }

input, textarea {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #7e7a7a;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: 18px/1.35 Arial, Helvetica, sans-serif;
  resize: vertical;
}

input:focus, textarea:focus { border-bottom-color: var(--ink); }

button {
  justify-self: start;
  margin-top: 12px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 400 20px/1 Arial, Helvetica, sans-serif;
}

.email {
  display: inline-block;
  margin-top: 76px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}

@media (max-width: 800px) {
  .hero-nav { transform: scale(.5); transform-origin: top left; }
  .work-grid { grid-template-columns: 1fr; }
  .contact-section { min-height: auto; padding-top: 88px; }
  .about-section { padding-top: 88px; }
  .about-inner, .contact-inner { width: min(100%, 640px); }
  h1 { letter-spacing: -0.04em; }
}