/* Okafor & Lindqvist — page compositions built from the Quillo DNA (tokens only). Load after quillo.css. */

/* Header: long two-name wordmark */
.site-head .logo, .menu .logo { font-size: 24px; letter-spacing: -.3px; }
.site-head__in { grid-template-columns: auto 1fr auto; gap: 32px; }
.site-head .nav-links { justify-self: center; }

/* ── Hero (hero-d recomposed) ── */
.ol-hero { padding-block: 72px 0; }
.ol-hero__title { font-size: 88px; line-height: 1.04; letter-spacing: -.02em; max-width: 12em; margin-top: 28px; }
.ol-hero__band { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 300px); gap: var(--gap); margin-top: 64px; height: 460px; }
.ol-hero__photo { aspect-ratio: auto; height: 100%; }
.ol-hero__photo img { object-position: 50% 60%; }
.ol-hero__side { border-radius: var(--r); overflow: hidden; height: 100%; }
.ol-hero__side img { width: 100%; height: 100%; object-fit: cover; }
.ol-hero__card .t-stat { font-size: 56px; line-height: 1.05; }

/* ── Who we help [new]: two doors ── */
.ol-paths { background: var(--surface); margin-top: 112px; }
.ol-paths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: var(--head-to-content); }
.ol-path { display: flex; flex-direction: column; background: var(--bg); border-radius: var(--r); overflow: hidden; }
.ol-path__photo { aspect-ratio: 624 / 400; overflow: hidden; }
.ol-path__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ol-path:hover .ol-path__photo img { transform: scale(1.04); }
.ol-path__body { padding: 32px 32px 24px; display: flex; flex-direction: column; gap: 12px; }
.ol-path__for { color: var(--text-2); }
.ol-codes { margin-top: 20px; border-bottom: 1px solid var(--line); }
.ol-codes li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.ol-code { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--text); }
.ol-code__what { color: var(--text-2); }

/* ── Partners [new]: head column + two staggered portraits ── */
.ol-partners { background: var(--surface-2); }
.ol-partners__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 360px) minmax(0, 360px); justify-content: space-between; gap: 24px; align-items: start; }
.ol-partners__side { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; align-self: stretch; }
.ol-partners__note { color: var(--text-2); max-width: 26em; }
.ol-partner { border-radius: var(--r); overflow: hidden; background: var(--surface); }
.ol-partner figure { aspect-ratio: 4 / 5; overflow: hidden; }
.ol-partner img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ol-partner:hover img { transform: scale(1.03); }
.ol-partner--b { margin-top: 120px; }
.ol-partner__meta { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 4px; }
.ol-partner__meta .t-small { color: var(--text-2); }
.ol-partner__lang { color: var(--text-2); margin-top: 12px; }

/* ── Client story [new]: dark inset card ── */
.ol-story { padding-bottom: var(--section); }
.ol-story__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 84px; background: var(--dark); border-radius: var(--r-lg); padding: 24px 24px 24px 84px; color: var(--on-dark); }
.ol-story__photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 440 / 500; }
.ol-story__photo img { width: 100%; height: 100%; object-fit: cover; }
.ol-story__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 32px; padding-block: 60px; }
.ol-story__quote { display: flex; flex-direction: column; gap: 20px; }
.ol-story__quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.25; letter-spacing: -.01em; color: var(--on-dark); text-wrap: balance; max-width: 22em; }
.ol-story__quote figcaption { font-size: 14px; color: var(--on-dark-2); }
.ol-story__facts { display: flex; gap: 56px; border-top: 1px solid var(--line-dark); padding-top: 24px; width: 100%; }
.ol-story__facts .t-stat { color: var(--on-dark); }
.ol-story__facts .t-small { color: var(--on-dark-2); }

/* ── Contact (cta-c recomposed with a city photo) ── */
.ol-contact { padding-top: 0; }
.ol-contact__panel { grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 420px); gap: 56px; padding: 24px 24px 24px 24px; align-items: stretch; }
.ol-contact__photo { border-radius: var(--r); overflow: hidden; min-height: 460px; }
.ol-contact__photo img { width: 100%; height: 100%; object-fit: cover; }
.ol-contact .vr-cta-c__left { padding-block: 40px; }
.ol-contact .vr-cta-c__form { align-self: center; }

/* ── Footer B: long name fits the width ── */
.ol-foot__mark { font-size: clamp(30px, 8.6vw, 124px); white-space: nowrap; letter-spacing: -.03em; transform: translateY(18%); }

@media (max-width: 1360px) {
  .ol-partners__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px) minmax(0, 300px); }
}
@media (max-width: 1100px) {
  .ol-hero__title { font-size: 68px; }
  .ol-hero__band { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); height: auto; }
  .ol-hero__card { grid-column: 1 / -1; order: 3; }
  .ol-hero__photo, .ol-hero__side { height: 380px; }
  .ol-paths { margin-top: 112px; }
  .ol-partners__grid { grid-template-columns: 1fr 1fr; }
  .ol-partners__side { grid-column: 1 / -1; }
  .ol-partner--b { margin-top: 64px; }
  .ol-story__card { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 48px; padding-left: 48px; }
  .ol-contact__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ol-contact__photo { display: none; }
}
@media (max-width: 900px) {
  .site-head__in { grid-template-columns: 1fr auto; }
  .ol-story__card { grid-template-columns: 1fr; padding: 20px; gap: 8px; }
  .ol-story__photo { aspect-ratio: 4 / 3; order: -1; }
  .ol-story__body { padding: 24px 12px 20px; }
  .ol-contact__panel { grid-template-columns: 1fr; padding: 48px 32px 32px; }
}
@media (max-width: 640px) {
  .site-head .logo, .menu .logo { font-size: 20px; }
  .ol-hero { padding-top: 32px; }
  .ol-hero__title { font-size: 44px; letter-spacing: -.015em; }
  .ol-hero__band { grid-template-columns: 1fr; margin-top: 40px; }
  .ol-hero__photo { height: 260px; }
  .ol-hero__side { display: none; }
  .ol-hero__card { order: 0; }
  .ol-hero__card .t-stat { font-size: 44px; }
  .ol-paths { margin-top: 88px; }
  .ol-paths__grid { grid-template-columns: 1fr; }
  .ol-path__body { padding: 24px 20px 16px; }
  .ol-codes li { grid-template-columns: 84px 1fr; gap: 12px; }
  .ol-partners__grid { grid-template-columns: 1fr; }
  .ol-partner--b { margin-top: 0; }
  .ol-story__quote blockquote { font-size: 26px; }
  .ol-story__facts { gap: 32px; }
  .ol-contact__panel { padding: 40px 20px 20px; }
}

.about__team .avatars { flex: none; }
.ol-story__facts .t-stat { white-space: nowrap; }
.ol-path .t-h4 { text-wrap: balance; }