/* /contact/: two offices, each on its own clock, with the people who lead it. */

.ct { min-height: 100vh; padding-bottom: clamp(80px, 10vw, 160px); }

.ct-head {
  display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, 30em); align-items: end;
  gap: 24px var(--i-g);
  padding: calc(var(--i-top) + clamp(24px, 6vw, 96px)) var(--i-g) clamp(48px, 7vw, 120px);
}
.ct-title {
  font-size: clamp(76px, 15.5vw, 260px); font-weight: 620; letter-spacing: -.055em; line-height: .84;
  margin-left: -.04em;
}
.ct-lede { color: var(--i-fg-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; text-wrap: pretty; padding-bottom: .4em; }
.ct-gap { color: var(--i-fg); }

/* ——— The offices ——— */
/* Each office opens with the site's section head: the city, then the company that lives there. */
.ct-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-office {
  position: relative; display: grid; gap: 14px; align-content: start;
  padding: clamp(24px, 3vw, 48px) var(--i-g) clamp(48px, 6vw, 96px);
  isolation: isolate; overflow: hidden;
}
/* Under the London office, the park in hairlines. Its paths fly together as it scrolls in; the water takes London's light. */
.ct-park { margin-top: clamp(28px, 4vw, 64px); }
.ct-park__map { display: block; width: 100%; height: auto; overflow: visible; --u: 4; }
.ct-park__net path { stroke: rgb(239 237 232 / .34); stroke-width: calc(var(--u) * .9px); }
.ct-park__edge { stroke: rgb(239 237 232 / .62); stroke-width: calc(var(--u) * 1.3px); }
.ct-park__water { fill: color-mix(in srgb, var(--sky, #7f9bd6) 30%, #8fa6cf); fill-opacity: .3; transition: fill 2s var(--i-ease); }
.ct-park.is-drawn .ct-park__net path { transition: stroke .6s; }
.ct-park:hover .ct-park__net path { stroke: rgb(239 237 232 / .5); }
.ct-park__cap { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; }
/* The light over each office follows its hour: blue before dawn, warm by day, amber at dusk. */
.ct-office__sky {
  position: absolute; inset: 0 0 auto; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 70% at 30% 0%, var(--sky, transparent), transparent 72%);
  opacity: .2; transition: background 2s var(--i-ease);
  /* Soft on every side, so the two lights meet without a seam now that no rule frames them. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 55%, transparent), linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 55%, transparent), linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}

.ct-clock { display: grid; gap: 10px; }
.ct-clock__time {
  font-size: clamp(56px, 7.2vw, 132px); font-weight: 560; letter-spacing: -.045em; line-height: .86;
  font-variant-numeric: normal; min-height: .86em;
}
.ct-clock__meta { order: -1; }

.ct-office__rule { position: relative; display: block; margin: 8px 0 clamp(20px, 3vw, 44px); }
.ct-office__rule span {
  position: absolute; inset: 0; background: var(--i-fg-2); transform-origin: 0 50%;
  transform: scaleX(var(--minute, 0)); transition: transform 1s linear;
}

.ct-sec { margin-bottom: var(--sp-4); }
.ct-sec .sec__lede { color: var(--i-fg); }
.ct-role { max-width: 26em; }
.ct-address { display: grid; font-style: normal; font-size: 19px; line-height: 1.45; letter-spacing: -.01em; margin-top: 18px; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 0 28px; }
.ct-phone .fg-3 { margin-right: .3em; }

.ct-people { display: grid; gap: 14px; margin-top: clamp(24px, 3vw, 44px); }
.ct-person { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; }
.ct-person__pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.ct-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); }
.ct-person:hover .ct-person__pic img { transform: scale(1.06); }
.ct-person__text { display: grid; gap: 4px; }
.ct-person__text b { font-weight: 560; font-size: 19px; letter-spacing: -.015em; }

/* ——— Onward ——— */
.ct-more {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--i-g);
  padding: clamp(40px, 5vw, 80px) var(--i-g) 0; border-top: 1px solid var(--i-line);
}
.ct-more__item { display: grid; gap: 6px; justify-items: start; max-width: 34em; }
.ct-also { display: grid; gap: 8px; padding: clamp(48px, 6vw, 96px) var(--i-g) 0; font-variant-numeric: normal; }

@media (max-width: 1000px) {
  .ct-head { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ct-offices { grid-template-columns: 1fr; }
  .ct-more { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-office__rule span, .ct-office__sky { transition: none; }
}