/* ====================================================================
   CLIENT FIRST — Minimal editorial
   ==================================================================== */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('assets/fonts/HelveticaNeueLight.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('assets/fonts/HelveticaNeueRoman.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('assets/fonts/HelveticaNeueItalic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('assets/fonts/HelveticaNeueMedium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- TOKENS ---------- */
:root {
  --bg:    #F2EFE7;
  --ink:   #1A1A18;
  --mute:  #7A7770;
  --line:  rgba(26, 26, 24, 0.12);

  --sans:  'Helvetica Neue', system-ui, sans-serif;

  --ease:  cubic-bezier(0.22, 1, 0.36, 1);

  --pad-x: clamp(24px, 5vw, 64px);
  --col:   min(640px, 100%);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em, i { font-style: italic; }
::selection { background: var(--ink); color: var(--bg); }

/* ---------- TOP NAV ---------- */
.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 22px var(--pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  font-weight: 400;
  background: var(--bg);
}
.brand {
  justify-self: start;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.top-logos {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 36px);
}
.top-logos img {
  height: 14px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0.7;
  transition: opacity 0.4s var(--ease);
}
.top-logos img:hover { opacity: 1; }
.loc {
  justify-self: end;
  color: var(--mute);
  font-size: 13px;
}
@media (max-width: 820px) {
  .top { grid-template-columns: 1fr 1fr; gap: 16px; }
  .top-logos { display: none; }
}

/* ---------- MAIN ---------- */
main {
  padding: clamp(140px, 22vh, 240px) var(--pad-x) clamp(120px, 18vh, 200px);
  max-width: 920px;
  margin: 0 auto;
}

/* ---------- INTRO ---------- */
.intro {
  margin-bottom: clamp(120px, 18vh, 200px);
}
.kicker {
  font-size: 13px;
  color: var(--mute);
  margin-bottom: 40px;
}
.lead {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.018em;
  max-width: var(--col);
  margin-bottom: 36px;
}
.sub {
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mute);
  max-width: var(--col);
}

/* ---------- BLOCK ---------- */
.block {
  margin-bottom: clamp(100px, 14vh, 160px);
}
.block:last-of-type { margin-bottom: 0; }

.label {
  font-size: 13px;
  color: var(--mute);
  margin-bottom: 28px;
}
.body {
  font-size: 17px;
  line-height: 1.55;
  max-width: var(--col);
}
.body + .body {
  margin-top: 24px;
}

/* ---------- STATS ---------- */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 48px;
}
.stats li {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stat-num {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(44px, 5.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  font-size: 0.58em;
  font-weight: 300;
  margin-left: 0.04em;
  letter-spacing: -0.02em;
}
.stat-lbl {
  font-size: 14px;
  color: var(--mute);
  line-height: 1.45;
  max-width: 240px;
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- DEAL ---------- */
.deal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 56px;
}
.deal-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.deal-side {
  font-size: 13px;
  color: var(--mute);
  font-style: italic;
}
.deal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.deal-list li {
  font-size: 17px;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .deal-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- AGENCIES LIST ---------- */
.agencies li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
}
.ag-main {
  transition: color 0.3s var(--ease);
}
.ag-main:hover { color: var(--mute); }
.ag-name {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.ag-year {
  font-weight: 400;
  font-size: 13px;
  color: var(--mute);
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  vertical-align: baseline;
}
.ag-tag {
  font-style: italic;
  font-weight: 300;
  color: var(--mute);
  font-size: 16px;
}
.ag-owner {
  font-size: 14px;
  color: var(--mute);
  position: relative;
  width: max-content;
  transition: color 0.3s var(--ease);
}
.ag-owner::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.ag-owner:hover {
  color: var(--ink);
}
.ag-owner:hover::after {
  transform: scaleX(1);
}
.ag-owner-empty {
  pointer-events: none;
}
.ag-owner-empty::after { display: none; }
.ag-arrow {
  font-size: 17px;
  color: var(--mute);
  justify-self: end;
  transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}
.ag-arrow:hover {
  transform: translate(4px, -4px);
  color: var(--ink);
}
@media (max-width: 820px) {
  .agencies li {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    row-gap: 4px;
  }
  .ag-main { grid-column: 1 / 2; grid-row: 1 / 2; }
  .ag-tag { grid-column: 1 / 2; grid-row: 2 / 3; }
  .ag-owner { grid-column: 1 / 2; grid-row: 3 / 4; margin-top: 4px; }
  .ag-arrow { grid-column: 2 / 3; grid-row: 1 / 4; align-self: center; }
}

/* ---------- CONTACT ---------- */
.contact-block .body { max-width: var(--col); }
.email {
  border-bottom: 1px solid var(--ink);
  transition: opacity 0.3s var(--ease);
}
.email:hover { opacity: 0.55; }

/* ---------- FOOTER ---------- */
.foot {
  padding: 24px var(--pad-x);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--mute);
}

/* ---------- FADE-IN ---------- */
[data-fade] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-fade].is-in {
  opacity: 1;
  transform: none;
}