/* /company/: why Hyde Park exists, what it does, where, and the years in films.
   Every section opens with the site's section head (site/sec.html.j2); years are quiet group heads (.i-group). */

.co { padding-bottom: clamp(80px, 12vw, 180px); }

/* ——— Opening ——— */
.co-open { display: grid; gap: clamp(20px, 2.4vw, 36px); padding-top: calc(var(--i-top) + clamp(28px, 7vw, 120px)); padding-bottom: clamp(40px, 5vw, 80px); }
.co-open__quote { max-width: 15em; font-size: clamp(40px, 6.4vw, 120px); line-height: .95; text-indent: max(-.36em, calc(6px - var(--g))); }
.co-open__still { margin: 0; aspect-ratio: 2.39; overflow: hidden; background: #111; }
.co-open__still picture, .co-open__still img { width: 100%; height: 100%; object-fit: cover; }

/* ——— The crossing: four places on one line ——— */
.co-cross { padding-top: clamp(100px, 14vw, 220px); }
.co-cross__list { position: relative; display: grid; gap: clamp(56px, 8vw, 120px); padding-left: clamp(40px, 9vw, 160px); }
.co-cross__line { position: absolute; left: clamp(8px, 2vw, 32px); top: .5em; bottom: .5em; width: 1px; background: var(--i-line); }
.co-cross__line span { position: absolute; inset: 0; background: var(--i-fg); transform-origin: 50% 0; transform: scaleY(var(--cross, 1)); }
.co-step { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px var(--i-g); align-items: baseline; }
.co-step__dot {
  position: absolute; left: calc(clamp(8px, 2vw, 32px) - clamp(40px, 9vw, 160px) - 4px); top: .62em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--bg, #070707); border: 1px solid var(--i-fg);
}
.co-step__text { max-width: 28em; color: var(--i-fg-2); text-wrap: pretty; font-size: clamp(17px, 1.3vw, 20px); }

/* ——— What we do ——— */
.co-work { padding-top: clamp(120px, 16vw, 260px); }

/* ——— Who we work with: the homepage's wall (.wall in site.css), in the company's story ——— */
.co-partners { padding-top: clamp(120px, 16vw, 260px); }
.co-work__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap, 20px); }
.co-verb { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; }
.co-verb__rule { background: var(--i-fg); }
.co-verb__name { padding-top: 6px; font-weight: 560; }
.co-verb__text { max-width: 24em; text-wrap: pretty; }
.co-verb__more { justify-self: start; }

/* ——— Two cities ——— */
.co-cities { padding-top: clamp(120px, 16vw, 260px); }
.co-cities__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--i-g); }
.co-city { display: grid; gap: 14px; align-content: start; padding-right: 8%; }
.co-city__time { min-height: 1.3em; }
.co-city__name { font-size: clamp(54px, 7vw, 132px); white-space: nowrap; }
.co-city__co { margin-top: 4px; }
.co-city__text { max-width: 30em; }
.co-city__people { display: grid; gap: 14px; margin-top: 18px; }
.co-person { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; }
.co-person__pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.co-person__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.1) brightness(.92); transition: transform 1s var(--i-ease); }
.co-person:hover .co-person__pic img { transform: scale(1.06); }
.co-person__text { display: grid; gap: 4px; }
.co-person__text b { font-weight: 560; font-size: 19px; letter-spacing: -.015em; }
.co-cities__also { margin-top: clamp(40px, 5vw, 72px); max-width: 44em; }

/* ——— In numbers ——— */
.co-ledger { padding-top: clamp(120px, 16vw, 260px); }
.co-ledger__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--i-g); align-items: end; }
.co-ledger__theirs { display: grid; gap: 22px; }
.co-figure { display: grid; gap: 6px; }
.co-figure b { font-weight: 620; }
.co-ledger__ours ul { margin-top: 12px; }
.co-count {
  display: grid; grid-template-columns: clamp(64px, 6.4vw, 116px) minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--i-line); font-size: 17px;
}
.co-count b { font-weight: 600; }
.co-count i { color: var(--i-fg-3); transition: transform .5s var(--i-ease), color .3s; }
.co-count:hover i { transform: translateX(5px); color: var(--i-fg); }

/* ——— The years ——— */
.co-years { padding-top: clamp(120px, 16vw, 260px); }
.co-year {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 12px var(--i-g);
  padding: clamp(18px, 2vw, 30px) 0; border-top: 1px solid var(--i-line);
}
.co-year__n { color: var(--i-fg); position: sticky; top: calc(var(--i-top) + 8px); align-self: start; }
/* Years with only films sit quieter, so the years that changed the company read first. */
.co-year.is-quiet { padding: 12px 0; align-items: baseline; }
.co-year.is-quiet .co-year__n { color: var(--i-fg-3); position: static; }
.co-year.is-quiet .co-year__films { font-size: 14px; }
.co-year__body { display: grid; gap: 12px; }
.co-year__event { font-size: clamp(19px, 1.65vw, 26px); line-height: 1.3; letter-spacing: -.015em; max-width: 34em; text-wrap: pretty; }
.co-year__src { white-space: nowrap; margin-left: .4em; vertical-align: .15em; }
.co-year__films { display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--i-fg-2); font-size: 15px; }
.co-film { white-space: nowrap; transition: color .3s, opacity .3s; }
.co-film + .co-film::before { content: ""; display: inline-block; width: 1.2em; height: 1px; margin: 0 .7em; vertical-align: middle; background: var(--line-2, rgb(239 237 232 / .28)); }
.co-film:hover { color: var(--i-fg); }
.co-years__list.is-pointing .co-film:not(:hover) { opacity: .55; }

/* ——— On stage ——— */
.co-honours { padding-top: clamp(120px, 16vw, 260px); }
.co-honour {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) minmax(0, 1fr); gap: 12px var(--i-g); align-items: baseline;
  padding: clamp(16px, 1.8vw, 26px) 0; border-top: 1px solid var(--i-line); transition: opacity .4s;
}
.co-honour__title { font-weight: 560; transition: transform .7s var(--i-ease); }
.co-honour__text { color: var(--i-fg-2); text-wrap: pretty; }
.co-honour__meta { justify-self: end; }
.co-honours__list.is-pointing .co-honour:not(:hover) { opacity: .35; }
.co-honour:hover .co-honour__title { transform: translateX(.15em); }

/* ——— Next generation ——— */
.co-give { padding-top: clamp(120px, 16vw, 260px); }
.co-give__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap, 20px); }
.co-give__item { display: grid; gap: 12px; align-content: start; padding-right: 12%; }

/* ——— Onward ——— */
.co-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap, 20px); padding-top: clamp(120px, 16vw, 260px); }
.co-next__link { position: relative; display: grid; gap: 10px; padding: 26px 0; border-top: 1px solid var(--i-fg); }
.co-next__link i { position: absolute; right: 0; top: 30px; font-size: clamp(24px, 2.6vw, 44px); transition: transform .6s var(--i-ease); }
.co-next__link:hover i { transform: translateX(8px); }

@media (max-width: 1000px) {
  .co-work__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
@media (max-width: 760px) {
  .co-step, .co-cities__grid, .co-ledger__grid, .co-year, .co-honour, .co-give__list, .co-next { grid-template-columns: 1fr; }
  .co-open__quote { text-indent: max(-.3em, calc(6px - var(--g))); }
  .co-open__still { aspect-ratio: 16 / 10; }
  .co-cross__list { padding-left: 34px; }
  .co-cross__line { left: 6px; }
  .co-step__dot { left: -32px; }
  .co-work__list { grid-template-columns: 1fr; }
  .co-cities__grid { row-gap: 72px; }
  .co-year__n { position: static; }
  .co-honour__meta { justify-self: start; }
  .co-give__list { row-gap: 40px; }
}