/* Rebond / contact — Figma 1:1526, 1284x700 */

.contact {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 700px;
  /* 128 between the column and the footer, on every page — a property of Body,
     not of any one page. Measured across the frames: home 4074.5 -> 4202.5,
     About 4755 -> 4883, mobile About 6108.8 -> 6236.8.

     The last section's own trailing padding is cancelled just below, or it
     adds to this and the gap reads larger here than everywhere else. */
  margin-top: 128px;
  overflow: hidden;
}

/* Portrait 488x621 centred at the top — Figma I115:3064;115:3030.
   The exported asset already faces right and carries its own progressive blur
   and alpha, so it is not mirrored and needs no filter of its own. */
.contact-portrait {
  position: absolute;
  /* 16, not 0, to match `.page-hero-sticky`'s padding-top. This portrait is the
     hero of the page the footer opens, and the two have to be the same picture
     in the same box or the difference shows up as a jump in the middle of the
     transition between them. Both are 488 x 621, both centred on the page's own
     axis; this offset and the mask below were the only two things left apart. */
  top: var(--space-16);
  left: 50%;
  transform: translateX(-50%);
  width: 488px;
  height: 621px;
  object-fit: cover;
  object-position: center;
  /* Every one of these exports runs 80-95% opaque right off its left, right
     and bottom edges — measured, not guessed — so a 488-wide image drops three
     hard boundaries onto the page. In Figma the Blur layer's 50px backdrop
     blur smears them; we do not use backdrop-filter (see LOG.md), so they are
     dissolved on the image itself. Same feathering the home hero clip uses. */
  /* 92%, matching `.page-portrait` exactly — it was 82 here. The extra tenth it
     reveals falls entirely inside the blur below, which starts at 343 of this
     621, so the footer at rest is unchanged; what it buys is that the picture
     ends at the same place in both, and stops resettling on the way over. */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0, #000 92%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 9%, #000 91%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 0, #000 92%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 9%, #000 91%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
}

/* Blur — Figma I115:3064;1:1530: transparent to grey-background/90 over the
   bottom 357px */
.contact-blur {
  /* The progressive blur is baked into the portrait; this is the Figma's linear
     fill only. Full width so it never shows a vertical edge on a wide screen. */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 357px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--grey-background-0) 0%,
    var(--grey-background-90) 100%
  );
}


.contact-content {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 574px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 40px var(--space-16);
  border-radius: 8px;
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.contact-headtitle {
  margin: 0;
  height: 20px;
  display: flex;
  align-items: center;
  font-weight: var(--weight-regular);
  font-size: 14px;
  line-height: 18px;
  color: var(--headtitle-ink);
}

.contact-lead {
  margin: 0;
  width: 542px;
  max-width: 100%;
  font-family: var(--font-headings);
  font-weight: var(--weight-book);
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  color: var(--text-project-primary);
  /* No white halo. The Figma puts a 34 blur behind this text — a 17px CSS
     radius — and it is deliberately not carried over: removed on the headlines
     first, then everywhere, because it reads as a smudge on a screen where in
     Figma it reads as separation. Whatever a text needs to sit on, it gets
     from what is behind it, not from a glow around each letter. */
}

.contact-actions {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

/* Button — Figma 115:3116 (black) and 115:3133 (white). Both are H4 in the
   headings family, 6/12 padding, radius 6, and size to their own label: the
   black one no longer carries the fixed 80px width the old symbol had. */
.btn-small {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-6);
  font-family: var(--font-headings);
  font-weight: var(--weight-book);
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  white-space: nowrap;
}

.btn-small--dark {
  background: var(--surface-button-primary-black);
  color: var(--primary-white);
}

.btn-small--light {
  background: var(--surface-button-primary-white);
  color: var(--greyscale-700);
}

.contact-footer {
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
  width: 100%;
  font-family: var(--font-body);
  font-weight: var(--weight-book);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.14px;
  white-space: nowrap;
}

.contact-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* LinkButton — Figma 98:1864: action blue with a dashed rule underneath,
   not an underlined link */
.contact-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dashed var(--text-secondary);
  color: var(--border-action);
  text-decoration: none;
}

.contact-credit { margin: 0; color: var(--text-tertiary); }

/* The 393 layout lives in mobile.css, which loads last. */