:root {
  --paper: #F6F4EF;
  --ink: #0D2233;
  --navy: #113E5D;
  --navy-deep: #0B2A40;
  --muted: #56677A;
  --line: #E2DED5;
  --amber: #F9A90C;
  --mint: #9FD9C0;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* vertical rhythm shrinks on short screens so the page stays one screen tall */
  --gap: clamp(16px, 3.4vh, 36px);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; }
h1, h2 {
  font: 400 clamp(38px, 6.4vh, 56px)/1.02 var(--serif); letter-spacing: -.01em;
  margin: 0 0 calc(var(--gap) * .6);
}
p { margin: 0; }

/* Two columns sharing one set of rows (header, space, content, space, footer),
   so the intro and the contact text start on the same line.
   Content is capped at 1280px (split 1.3 : 1) and centered; the outer tracks are
   gutters, and the contact panel runs into the right one so the navy reaches the edge. */
.page {
  display: grid;
  grid-template-columns: 1fr min(56.52%, 723px) min(43.48%, 557px) 1fr;
  grid-template-rows: auto minmax(var(--gap), 1fr) auto minmax(var(--gap), 1fr) auto;
  min-height: 100vh; min-height: 100dvh;
}
/* trim the space above the capitals so both titles line up on their cap height */
h1, h2 { text-box: trim-start cap alphabetic; }

/* ---------- Left: what we do ---------- */
.intro {
  grid-column: 2; grid-row: 1 / 5;
  display: grid; grid-template-rows: subgrid;
  padding: clamp(20px, 4vh, 40px) clamp(24px, 5vw, 72px) 0;
}
.top { grid-row: 1; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: clamp(14px, 2.2vh, 20px); text-decoration: none; }
.brand img { width: auto; height: clamp(58px, 10vh, 84px); }
.brand span { font: 600 clamp(32px, 5.6vh, 44px)/1 var(--sans); letter-spacing: .03em; color: var(--navy); }
.to-contact { display: none; }

.intro main { grid-row: 3; max-width: 640px; }
h1 em { display: block; font-style: italic; color: var(--navy); }
.lead { font-size: clamp(16px, 2.4vh, 19px); color: var(--muted); max-width: 31em; }

.points {
  list-style: none; margin: var(--gap) 0 0; padding: calc(var(--gap) * .8) 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font: 400 13px/1.4 var(--mono); color: var(--ink);
}
.points li { display: flex; align-items: center; gap: 10px; }
.points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }

.fine {
  grid-column: 2; grid-row: 5;
  padding: 0 clamp(24px, 5vw, 72px) clamp(20px, 4vh, 40px);
  font: 400 12px/1.4 var(--mono); color: var(--muted);
}

/* ---------- Right: contact ---------- */
.contact {
  grid-column: 3 / 5; grid-row: 1 / -1;
  display: grid; grid-template-rows: subgrid;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-deep); color: #fff;
  padding: clamp(20px, 4vh, 40px) clamp(24px, 4vw, 56px);
}
/* the logo, drawn huge and rising from the bottom-right; text stays on the navy part */
.contact .bg-mark {
  position: absolute; z-index: -1;
  height: 82%; width: auto;
  bottom: -12%; right: -14%;
}
.contact-inner { grid-row: 3; }
.contact h2 em { color: var(--amber); }

/* The address is never written in the HTML: "@" comes from CSS, and the
   mailto link is assembled only when a person hovers, focuses or taps it. */
.email {
  display: inline-block;
  font: 400 clamp(28px, 4.6vh, 38px)/1.1 var(--serif); color: #fff; text-decoration: none;
  border-bottom: 2px solid var(--amber); padding-bottom: 4px;
  transition: color .2s;
}
.email:hover { color: var(--amber); }
.email .at::before { content: "\0040"; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 4px; }

/* ---------- Mobile: stack, and let the page scroll ---------- */
@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .intro { grid-column: auto; grid-row: auto; display: block; padding: 20px 20px 40px; }
  .intro main { padding: 40px 0 0; }
  h1, h2 { font-size: clamp(38px, 11vw, 48px); }
  .brand img { height: 70px; }
  .brand span { font-size: 36px; }
  .to-contact {
    display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
    background: var(--navy); color: #fff; text-decoration: none; font-size: 14px; font-weight: 500;
  }
  .contact { grid-column: auto; grid-row: auto; display: flex; flex-direction: column; padding: 40px 20px 0; }
  .fine { grid-column: auto; grid-row: auto; padding: 20px; }
  /* on phones the mark sits below the text instead of behind it */
  .contact .bg-mark { order: 1; position: relative; bottom: auto; right: auto; height: 220px; margin: 24px -44px -66px auto; }
}