/* =========================================================================
   Contact — desktop: Figma "CONTACT" (1171:381, 1728); mobile: 1261:1137 (440). Black page
   (header white until it docks: body.has-dark-top). No footer (Figma ends at the map:
   131 below it on desktop, 44 on mobile).
   Desktop: title x64 y334 96/96 300 676w; image x741 y335 987×705 to the right edge. A full-width
     line at y1139, then New enquiries (title x64 y1240 32/45 +2%; items x739, label #8E8E8E +
     value white, both 32/45, 144 apart); a right-column line at y1724, then Spy on us (y1823;
     links 85 apart); Clients from around the world (y2229 56/64 300 456w); map x63 y2518 1600×788.
   Mobile: title y233 48/52; image y398 400×561; section titles 36/40 300 +2%; items label 20/28 +
     value 24/30, 109 apart; lines above Spy on us (y1464) and Clients (y1763); map y1944 399×197.
   ========================================================================= */

.contact { background: var(--black); color: var(--white); padding-bottom: calc(44 * var(--u)); }
.contact a { color: inherit; }

/* Hero */
.contact-hero { padding-top: calc(233 * var(--u)); }
.contact-hero__title { font-weight: 300; font-size: calc(48 * var(--u)); line-height: calc(52 / 48); }
.contact-hero__media { margin: calc(61 * var(--u)) 0 0; }
.contact-hero__media img,
.contact-hero__media video { display: block; width: 100%; height: calc(561 * var(--u)); object-fit: cover; }

/* Section titles */
.contact-block__title,
.contact-world__title { font-weight: 300; font-size: calc(36 * var(--u)); line-height: calc(40 / 36); letter-spacing: 0.02em; }

/* New enquiries */
.contact-block--enquiries { margin-top: calc(60 * var(--u)); }
.contact-list { margin: calc(41 * var(--u)) 0 0; }
.contact-list__item + .contact-list__item { margin-top: calc(24 * var(--u)); }
.contact-list__label { font-size: calc(20 * var(--u)); line-height: calc(28 / 20); color: #8e8e8e; }
.contact-list__value { height: calc(55 * var(--u)); margin: calc(2 * var(--u)) 0 0; font-size: calc(24 * var(--u)); line-height: calc(30 / 24); }

/* Spy on us — mobile: a line above it */
.contact-block--social { margin-top: calc(61 * var(--u)); }
.contact-block--social::before { content: ""; display: block; height: 1px; margin-bottom: calc(39 * var(--u)); background: rgb(255 255 255 / 0.4); }
.contact-social { margin-top: calc(40 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(30 / 24); }
.contact-social li + li { margin-top: calc(24 * var(--u)); }

/* Clients from around the world — mobile: a line above it */
.contact-world { margin-top: calc(41 * var(--u)); }
.contact-world::before { content: ""; display: block; height: 1px; margin-bottom: calc(39 * var(--u)); background: rgb(255 255 255 / 0.4); }
.contact-world__title { max-width: calc(302 * var(--u)); }
/* The map image includes Figma's drop shadow around the 1600×788 map (9 / 4.5 px at 1×, left/top):
   offset so the map itself lands on Figma's box, and the shadow below hangs out of it (the page ends
   131 / 44 under the map, not under its shadow). */
.contact-world__map { display: flow-root; margin-top: calc(61 * var(--u)); } /* flow-root: the image's negative margin stays inside */
.contact-world__map img { display: block; width: calc(403.7 * var(--u)); max-width: none; height: auto; margin: calc(-1.1 * var(--u)) 0 calc(-3.1 * var(--u)) calc(-2.2 * var(--u)); }

@media (min-width: 1200px) {
	.contact { padding-bottom: calc(131 * var(--u)); }

	.contact-hero { display: grid; grid-template-columns: calc(677 * var(--u)) 1fr; align-items: start; padding: calc(334 * var(--u)) 0 0 var(--gutter); }
	.contact-hero__title { max-width: calc(676 * var(--u)); font-size: calc(96 * var(--u)); line-height: 1; }
	.contact-hero__media { margin-top: calc(1 * var(--u)); }
	.contact-hero__media img,
.contact-hero__media video { height: calc(705 * var(--u)); }

	.contact-block { display: grid; grid-template-columns: calc(675 * var(--u)) 1fr; align-items: start; }
	.contact-block__title { margin-left: 0; font-weight: 400; font-size: calc(32 * var(--u)); line-height: calc(45 / 32); }

	/* full-width line at y1139, 101 above the section */
	.contact-block--enquiries { margin-top: calc(99 * var(--u)); padding-top: calc(100 * var(--u)); background: linear-gradient(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.4)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
	.contact-list { margin-top: 0; }
	.contact-list__item + .contact-list__item { margin-top: calc(42 * var(--u)); }
	.contact-list__label,
	.contact-list__value { font-size: calc(32 * var(--u)); line-height: calc(45 / 32); letter-spacing: 0.02em; }
	.contact-list__value { height: calc(55 * var(--u)); margin-top: calc(2 * var(--u)); }

	/* right-column line at y1724 (94 below the last item), section 99 below it */
	.contact-block--social { margin-top: calc(94 * var(--u)); grid-template-rows: auto auto; }
	.contact-block--social::before { grid-column: 2; grid-row: 1; margin-bottom: calc(99 * var(--u)); }
	.contact-block--social .contact-block__title { grid-column: 1; grid-row: 2; }
	.contact-social { grid-column: 2; grid-row: 2; margin-top: calc(1 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(45 / 32); letter-spacing: 0.02em; }
	.contact-social li + li { margin-top: calc(40 * var(--u)); }

	.contact-world { margin-top: calc(190 * var(--u)); }
	.contact-world::before { display: none; }
	.contact-world__title { max-width: calc(456 * var(--u)); font-size: calc(56 * var(--u)); line-height: calc(64 / 56); letter-spacing: 0; }
	.contact-world__map { margin-top: calc(161 * var(--u)); }
	.contact-world__map img { width: calc(1618.5 * var(--u)); margin: calc(-4.5 * var(--u)) 0 calc(-14.4 * var(--u)) calc(-10 * var(--u)); }
}

/* An uploaded map (Site Content): no design-shadow offsets, full width, the design's 2:1 box; any other
   shape is shown whole inside it (contain — a map shouldn't be cut). */
.contact-world__map.is-custom img,
.contact-world__map.is-custom video { width: 100% !important; height: auto; aspect-ratio: 2 / 1; object-fit: contain; margin: 0 !important; }