/* =====================================================================
   Contact — a terminal page, not a narrative one.
   One full-height split: details left (aligned to the site grid), image
   bleeding to the right edge. Then a dark "Cooperation" closing band.
   No page-head, no banner: the information must be there on arrival.
   ===================================================================== */

.ct-hero {
  /* left edge of the content matches the .container inner edge */
  --ct-gutter: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100svh - var(--header-h));
}

/* ---- Left: the details ------------------------------------------- */
.ct-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem) var(--ct-gutter);
}

/* Same scale as .page-head__heading on every other page: h1 weight 400 */
.ct-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.ct-lead {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  max-width: 44ch;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Label / value rows. Same grammar as the Entry key facts: alignment carries
   the list, no rules anywhere. The label is the muted one, the value is the
   information the visitor came for, so it reads at full body size. */
.ct-details {
  margin: clamp(3rem, 6vw, 4.25rem) 0 0;
  display: grid;
  gap: clamp(1.4rem, 2.6vw, 1.9rem);
}
.ct-detail {
  display: grid;
  grid-template-columns: clamp(6rem, 11vw, 8.5rem) 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.ct-detail dt {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}
.ct-detail dd {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-ink);
}
.ct-address { margin: 0; font-style: normal; }

/* House text link: underline draws in on hover, colour stays put */
.ct-link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  font-weight: 400;
  color: var(--color-ink);
  text-decoration: none;
}
.ct-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.ct-link:hover::after,
.ct-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ---- Right: full-bleed visual ------------------------------------ */
.ct-hero__media {
  position: relative;
  overflow: hidden;
  background: var(--color-surface, #f3f3ef);
}
.ct-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ct-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 10, 0.22);
  pointer-events: none;
}

/* ---- Closing band: Cooperation ----------------------------------- */
.ct-coop { background: var(--color-footer); color: #fff; }
.ct-coop__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: #fff;
}
.ct-coop__lead {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 58ch;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.6;
  color: #ffffff;
}
.ct-coop__cta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

@media (prefers-reduced-motion: reduce) {
  .ct-link::after { transition: none; }
}

/* ---- Responsive -------------------------------------------------- */
@media (max-width: 860px) {
  .ct-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ct-hero__content {
    padding: clamp(3rem, 8vw, 4.5rem) var(--container-pad);
  }
  .ct-hero__media { order: 2; aspect-ratio: 3 / 2; }
}

/* On a phone the label column plus an unbreakable email address is wider than
   the screen, which makes the whole page scroll sideways. The label moves above
   its value so the value gets the full width. */
@media (max-width: 560px) {
  .ct-detail {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  /* last resort on very narrow screens: let the address break rather than push */
  .ct-link,
  .ct-address { overflow-wrap: anywhere; }
}