:root {
  --bg: #f2f2f3;
  --text: #1d1f20;
  --accent: #5980a6;
  --accent-700: #416180;
  --divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --muted: color-mix(in srgb, var(--text) 70%, transparent);
  --heading: "Barlow Condensed", system-ui, sans-serif;
  --body: "Barlow", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 15px/1.55 var(--body); text-wrap: pretty;
  min-height: 100vh; display: flex; flex-direction: column;
}

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

main {
  flex: 1; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: clamp(48px, 9vh, 112px) clamp(20px, 5vw, 72px) clamp(48px, 8vh, 96px);
  display: grid; gap: clamp(56px, 9vh, 96px); align-content: center;
}

.hero, .intro, .details { display: grid; }
.hero { gap: 48px; }
.intro { gap: 24px; max-width: 760px; }
.details { gap: 12px; }

.blueprint { position: relative; border: 1px solid var(--divider); }
.logo { justify-self: start; padding: clamp(24px, 4vw, 48px) clamp(28px, 5vw, 64px); }
.logo img { width: clamp(220px, 42vw, 480px); height: auto; }

.corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--text) 55%, transparent); }
.corner::before, .corner::after { content: ""; position: absolute; background: currentColor; }
.corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.tl { top: -6px; left: -6px; }
.tr { top: -6px; right: -6px; }
.bl { bottom: -6px; left: -6px; }
.br { bottom: -6px; right: -6px; }

h1 {
  margin: 0; font: 600 clamp(44px, 6.4vw, 84px)/1.02 var(--heading);
  letter-spacing: 0.01em; text-transform: uppercase;
}
h1 span { display: block; }
h1 span + span { color: var(--accent); }

.intro p { margin: 0; max-width: 56ch; font-size: 17px; color: color-mix(in srgb, var(--text) 78%, transparent); }

.details h2 {
  margin: 0; font: 600 13px/1.55 var(--body);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-700);
}

.grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cell {
  padding: 24px; display: grid; gap: 10px; align-content: start; margin: 0 -1px -1px 0;
  border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
}
.cell dt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cell dd { margin: 0; font-size: 15px; }
address { font-style: normal; }
.cell .big {
  font: 600 22px/1.2 var(--heading); letter-spacing: 0.02em; text-transform: uppercase;
}
.cell .cin { font-size: clamp(16px, 1.8vw, 22px); font-variant-numeric: tabular-nums; white-space: nowrap; }

footer { border-top: 1px solid var(--divider); }
footer div {
  max-width: 1200px; margin: 0 auto; padding: 20px clamp(20px, 5vw, 72px);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  font-size: 13px; color: var(--muted);
}
footer span + span { font-variant-numeric: tabular-nums; }