/* Contact — styles
   Generated by the page composer — do not edit.
   Concatenated in load order:
     css/contact/sections/_base.css
     css/contact/sections/_trail.css
     css/contact/sections/zoom-seam.css
     css/contact/sections/checklist.css
     css/contact/sections/overlap-hero.css
     css/contact/pages/_seams.css
     css/contact/pages/_contact-hero.css
*/

/* ===== css/contact/sections/_base.css ===== */
/* Contact section library — shared base (round 2).
   Ships on every round-2 contact page before the section files. Every rule is scoped
   under html.contact-v2, the root class every round-2 page carries on <html>. */

html.contact-v2 {
	/* the vertical rhythm between body sections: sections pad themselves with this */
	--cs-row: clamp(96px, 11vw, 176px);
	--cs-row-small: clamp(56px, 6vw, 96px);
	--cs-green: #3ecf8e;
	--cs-red: #410908;
	--cs-grey: #999999;
	--cs-grey-2: #8a8a8a;
	--cs-grey-3: #767676;
	--cs-plate: #2b2b2b;
	--cs-prose: #bdbdbd;
}

/* the template's contact page adds 60px under the content; sections own their spacing */
html.contact-v2 #main-content { padding-bottom: 0; }

/* full-bleed sections (a band, a marquee) need the column's clip off */
html.contact-v2 #main-page-content { overflow: visible; }

/* screen-reader-only text */
html.contact-v2 .cs-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* a body section's root; it pads itself vertically and keeps the column's horizontal edges */
html.contact-v2 .cs-section {
	position: relative;
	padding: var(--cs-row) 0;
}
html.contact-v2 .cs-section.cs-section-flush { padding: 0; }

/* full-bleed helper: a block as wide as the viewport inside the padded column */
html.contact-v2 .cs-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* the site's focus ring, on every control a section authors */
html.contact-v2 .cs-section :is(a, button, input, select, textarea, [tabindex]):focus-visible,
html.contact-v2 #hero :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* A one-line cursor label (S.bindCursorLabel called with a single string).
   The template's #ball p is `position: static` and #ball p.first adds `padding-top: 22px`
   to sit under a second line — so `top: 50%` alone did nothing and a single-line label
   rendered 11px low. It needs the positioned box and the padding reset as well. Every
   section that takes a one-line label depends on this, since bindCursorLabel always emits
   `class="first cs-ball-single"`. */
html.contact-v2 #ball p.cs-ball-single {
	position: relative;
	padding-top: 0;
	top: 50%;
	transform: translateY(-50%);
}

/* the harness hero used when a body section is captured alone (build-contact-page.mjs --section) */
html.contact-v2 .cs-harness-hero #hero-caption {
	height: auto;
	min-height: 0;
	/* Side padding matters now that captions are uncapped above: with `padding: 150px 0`
	   the harness label started at x=0 and was clipped by the viewport edge. Matches the
	   template's own column padding at each breakpoint. */
	padding: 150px 60px 24px;
}
@media only screen and (min-width: 1467px) {
	html.contact-v2 .cs-harness-hero #hero-caption { padding-left: 80px; padding-right: 80px; }
}
@media only screen and (max-width: 1024px) {
	html.contact-v2 .cs-harness-hero #hero-caption { padding-left: 40px; padding-right: 40px; }
}
@media only screen and (max-width: 767px) {
	html.contact-v2 .cs-harness-hero #hero-caption { padding-left: 30px; padding-right: 30px; }
}
@media only screen and (max-width: 479px) {
	html.contact-v2 .cs-harness-hero #hero-caption { padding-left: 20px; padding-right: 20px; }
}
html.contact-v2 .cs-harness-hero .hero-title {
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0.04em;
	color: #767676;
	margin: 0;
}

/* optional shared type roles, so composed pages read as one site:
   a section heading and a prose block. Sections whose idea IS the type set their own. */
/* The section heading. Capped on purpose.

   The template sizes only two things in viewport units — `.hero-title` and
   `.next-hero-title`, both 5vw — and every other size in content.css is fixed px,
   stepped down by max-width breakpoints. Nothing there grows above 1467.

   This library put viewport units into the *body*, which means a heading keeps
   growing while the prose beside it (18px), the vertical rhythm (`--cs-row` caps at
   176px around a 1600px viewport) and the measure (`.cs-prose` max-width: 720px) all
   stand still. The composition does not scale up on a large screen, it distorts:
   heading-to-prose went from 2.2x at 1440 to 3.2x at 2560.

   `min()` rather than a smaller size, so nothing at or below 1440 moves — the cap is
   the value this already had at 1440, which is the width every review was done at. */
html.contact-v2 .cs-h2 {
	font-family: 'basis_grotesque_promedium', sans-serif;
	font-size: min(calc(1rem + 1.6vw), 39px);
	line-height: 1.1;
	font-weight: normal;
	color: #fff;
	margin: 0 0 0.6em;
}
html.contact-v2 .cs-prose {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	color: var(--cs-prose);
	max-width: 720px;
	margin: 0;
}
html.contact-v2 .cs-prose + .cs-prose { margin-top: 1em; }
@media (max-width: 767px) {
	html.contact-v2 .cs-h2 { font-size: calc(1rem + 3.2vw); }
	html.contact-v2 .cs-prose { font-size: 15px; line-height: 24px; }
}

/* One column edge, at every width.
   The template caps and centres `.content-max-width` at 1320px, but `#main-page-content`
   carries `max-width: none` on an id selector (css/content.css 501), which outranks the
   class — so the body column never caps while a hero caption using the same class does.
   Below 1466px the two happen to coincide (a 1320 box centred in 1440 lands on the same
   60px the padding gives), which is why it is invisible in the audits; at 1920 the caption
   sits 300px right of every body section under it.
   Neutralising the cap on our own hero captions makes hero and body share one left edge at
   every width. It is NOT a no-op: for a caption using .content-max-width it moves the caption's
   text from 120px to 60px at 1440 (the box goes 60->0 and keeps its 60px padding), which is the
   intended correction. It IS a no-op at 390 (the cap never binds there) and for any caption
   using .content-full-width, which never capped. Corrected after extract 02 measured it. */
html.contact-v2 #hero-caption.content-max-width,
html.contact-v2 #hero-caption.content-full-width {
	max-width: none;
}


/* ===== css/contact/sections/_trail.css ===== */
/* ==========================================================================
   Contact section library — trail family, shared base (tl)

   Eight map-lab variants draw the same two countries and the same journey
   between them, and differ only in how they arrange it. Everything that makes
   them one drawing — the hairline weights, the marker, the readout type — lives
   here; each variant's own stylesheet holds nothing but its composition.

   Geometry contract: `.tl-plot` and its svg's viewBox share one aspect ratio, so a
   marker positioned in per-cent over the plot lands exactly on its user-space
   coordinate. Both numbers come from one place — the variant's own `view` — and
   scripts/build-map-lab.mjs writes the viewBox and `--tl-ratio` from it in the same
   breath. Never set `--tl-ratio` in a variant stylesheet: that is how the two drift.
   ========================================================================== */

html.contact-v2 .tl-map {
	position: relative;
}

html.contact-v2 .tl-plot {
	position: relative;
}

/* the drawing's own box: the svg and the markers on it, at the variant's ratio */
html.contact-v2 .tl-canvas {
	position: relative;
	aspect-ratio: var(--tl-ratio, 600 / 540);
	overflow: visible;
}

/* the readouts: over the drawing on a wide screen, stacked under it on a phone */
html.contact-v2 .tl-overlays {
	position: absolute;
	inset: 0;
}

html.contact-v2 .tl-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ---------- the drawn line, at four weights and one colour ---------------- */

html.contact-v2 .tl-svg path,
html.contact-v2 .tl-svg circle,
html.contact-v2 .tl-svg rect,
html.contact-v2 .tl-svg line {
	vector-effect: non-scaling-stroke;
}

/* a country: one unbroken hairline, no fill, the same 1.5px at every size */
html.contact-v2 .tl-shape {
	fill: none;
	stroke: #fff;
	stroke-width: 1.5px;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* a country that is context rather than subject */
html.contact-v2 .tl-shape-ghost {
	stroke: rgba(255, 255, 255, 0.26);
	stroke-width: 1px;
}

/* the journey: the only dashed line in the drawing, so nothing else may dash */
html.contact-v2 .tl-trail {
	fill: none;
	stroke: rgba(255, 255, 255, 0.75);
	stroke-width: 1.25px;
	stroke-linecap: round;
}

/* structure: leaders, plumb lines, the rules a readout hangs under */
html.contact-v2 .tl-hair {
	fill: none;
	stroke: rgba(255, 255, 255, 0.32);
	stroke-width: 1px;
}

/* a frame: an inset box, a plate border, a postmark ring */
html.contact-v2 .tl-frame {
	fill: none;
	stroke: rgba(255, 255, 255, 0.22);
	stroke-width: 1px;
}

/* No type goes inside the svg. An <svg> font-size is measured in user units, so a
   label that reads at 1440 collapses to about four pixels once the same viewBox is
   squeezed into a 330px column — and unlike stroke width there is no
   vector-effect to opt out with. Notes are HTML, anchored on the drawing by
   .tl-at like the readouts, and keep their size at every width. */

/* ---------- the marker: a zero-size anchor on the point ------------------- */

html.contact-v2 .tl-marker {
	position: absolute;
	width: 0;
	height: 0;
}

html.contact-v2 .tl-marker i {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	border-radius: 50%;
}

html.contact-v2 .tl-dot {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	background: #fff;
}

html.contact-v2 .tl-ring {
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

/* the origin reads as the place left behind: no fill, no ring */
html.contact-v2 .tl-marker-origin .tl-dot {
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.7);
}

/* a label riding beside a marker, when a variant names its points on the map */
html.contact-v2 .tl-marker b {
	position: absolute;
	left: 14px;
	top: -9px;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	line-height: 18px;
	font-weight: 400;
	white-space: nowrap;
	color: var(--cs-prose);
}

html.contact-v2 .tl-marker-left b {
	left: auto;
	right: 14px;
}

/* ---------- the readout: what the point is, where it is, what time it is --- */

html.contact-v2 .tl-readout p {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	white-space: nowrap;
}

html.contact-v2 .tl-place {
	font-size: 13px;
	line-height: 22px;
	font-weight: 400;
	color: var(--cs-prose);
}

html.contact-v2 .tl-coords,
html.contact-v2 .tl-now {
	font-family: 'basis_grotesque_promedium', sans-serif;
	color: #fff;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

html.contact-v2 .tl-coords {
	font-size: 22px;
	line-height: 32px;
	letter-spacing: 0.005em;
}

html.contact-v2 .tl-coords span {
	margin-left: 0.7em;
}

html.contact-v2 .tl-now {
	font-size: 20px;
	line-height: 30px;
}

html.contact-v2 .tl-now span {
	margin-left: 0.6em;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: var(--cs-grey-3);
}

/* the readout for a place that is not where he is: same shapes, quieter */
html.contact-v2 .tl-readout-muted .tl-coords,
html.contact-v2 .tl-readout-muted .tl-now {
	color: var(--cs-prose);
}

html.contact-v2 .tl-readout-muted .tl-coords {
	font-size: 18px;
	line-height: 28px;
}

/* ---------- the camera versions: names inside countries, then a push in ---

   A version that moves a camera animates the svg's **viewBox**, not a transform
   on a group. A scale transform is a compositing hint — Chrome rasterises the
   subtree once and scales the bitmap, so the zoom goes soft while it moves and
   only snaps back when it stops. Changing the viewBox is a layout change, so the
   geometry is redrawn at device resolution every frame. Hairlines keep their
   weight either way, because vector-effect measures stroke in screen pixels.

   The drawing must then be cropped — `.tl-clip` — or the enlarged countries paint
   over the caption and the page around them.
   ------------------------------------------------------------------------- */

html.contact-v2 .tl-clip,
html.contact-v2 .tl-clip .tl-svg {
	overflow: hidden;
}

/* A country's name, set the way an atlas sets one: small, light, tracked wide
   open, and quiet enough to sit under the coastline rather than compete with it.
   The display face at a display size read as a title dropped on top of a map; a
   country label is a label. This is the one place type belongs in the svg — it is
   meant to scale with the land it names and to be carried out of frame by the
   same camera, which HTML over the top could not do. */
html.contact-v2 .tl-name {
	fill: rgba(255, 255, 255, 0.42);
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	letter-spacing: 0.3em;
}

/* the same name cut as outline type, for the version where the letters are the
   composition rather than a label on it — that one keeps the display face */
html.contact-v2 .tl-name-outline {
	fill: none;
	stroke: rgba(255, 255, 255, 0.46);
	stroke-width: 1.25px;
	font-family: 'basis_grotesque_promedium', sans-serif;
	letter-spacing: 0.02em;
}

/* Andorra, named once the camera has found it. HTML rather than svg: at the
   scale the camera ends on, an svg label would be set at a fraction of a user
   unit, where Chrome's text metrics stop being reliable. */
html.contact-v2 .tl-here {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	letter-spacing: 0.26em;
	/* tracking adds a space after the last letter, which widens the box and drags a
	   centred word half a letter-space left of the point it is anchored on */
	margin-right: -0.26em;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.72);
}

/* a note on the drawing: a distance, a caption under a scale bar */
html.contact-v2 .tl-note {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0.02em;
	color: var(--cs-prose);
	white-space: nowrap;
}

html.contact-v2 .tl-note-figure {
	display: block;
	font-family: 'basis_grotesque_promedium', sans-serif;
	font-size: 16px;
	line-height: 26px;
	color: #fff;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* a hairline rule a readout hangs under, drawn in CSS where the svg cannot reach */
html.contact-v2 .tl-rule {
	border-top: 1px solid rgba(255, 255, 255, 0.32);
}

/* ---------- the hero shell every variant shares --------------------------

   The base owns *how* the drawing is placed; a variant owns only *how big* it is,
   declared as custom properties on its hero:

       html.contact-v2 #hero.xx-hero { --tl-w: calc(74vh * 600 / 540); --tl-max: 56vw; }

   This is not decoration. Each variant's stylesheet loads after this file, so a
   variant that set `width` on .tl-map directly would out-order the mobile stack
   below and keep its desktop size at 390. Declaring a value instead of restating
   a rule keeps the cascade in one place.
   ------------------------------------------------------------------------- */

html.contact-v2 #hero.tl-hero .tl-map {
	position: absolute;
	top: var(--tl-top, 50%);
	right: var(--tl-inset, 4vw);
	transform: translateY(var(--tl-shift, -50%));
	width: var(--tl-w, 70vh);
	max-width: var(--tl-max, 56vw);
	z-index: 1;
}

html.contact-v2 #hero.tl-hero #hero-caption {
	height: 100vh;
	padding-top: 140px;
	padding-bottom: 120px;
	z-index: 2;
	pointer-events: none;
}

html.contact-v2 #hero.tl-hero #hero-caption .inner {
	vertical-align: bottom;
}

/* The caption is transparent to the pointer so the drawing behind it stays
   reachable; anything clickable inside has to opt back in. `.hero-arrow` is a
   <div>, not a link or a button, so listing only a/button left the template's
   scroll-down control dead — it looked bound (js/common.js does bind it) and simply
   never received the click. */
html.contact-v2 #hero.tl-hero #hero-caption a,
html.contact-v2 #hero.tl-hero #hero-caption button,
html.contact-v2 #hero.tl-hero #hero-caption .hero-arrow {
	pointer-events: auto;
}

/* The template's scroll-down arrow. It belongs to a page that has something below
   the hero; the map-lab pages are one section each, so it is off unless the page
   opts in. `.contact-tight` is carried by every real contact page in round 3. */
html.contact-v2 #hero.tl-hero .hero-arrow {
	display: none;
}

html.contact-tight #hero.tl-hero .hero-arrow {
	display: flex;
}

/* the site's availability light, in front of the month */
html.contact-v2 #hero.tl-hero .hero-subtitle strong {
	font-weight: inherit;
}

html.contact-v2 #hero.tl-hero .tl-avail {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cs-green);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
	margin: 0 10px 0 0;
	vertical-align: 1px;
}

/* ==========================================================================
   The dashed journey

   A path that draws itself does it by tweening stroke-dashoffset, so a path
   that is *already* dashed cannot also draw — offsetting a repeating pattern
   makes it travel, not appear. A variant therefore chooses: a solid trail that
   draws (data-draw), or a dashed one that arrives (data-fade + this class).
   Under non-scaling-stroke the pattern is measured in screen pixels, so it
   stays the same dash at every size without any help from the module.
   ========================================================================== */

html.contact-v2 .tl-trail-dashed {
	stroke-dasharray: 5px 6px;
}

/* ==========================================================================
   Placing things on the drawing

   A readout, a label or a rule that belongs to a point on the map is anchored
   the way a marker is — in per-cent of the plot, from the same projection that
   drew the point. `.tl-at` is that anchor; the modifier says which corner of
   the block sits on it. No variant stylesheet should contain a map coordinate.
   ========================================================================== */

html.contact-v2 .tl-at {
	position: absolute;
	z-index: 2;
}

/* the leader svg: the drawing's grid, none of the drawing's movement */
html.contact-v2 .tl-lead {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

html.contact-v2 .tl-at-tr { transform: translateX(-100%); }
html.contact-v2 .tl-at-bl { transform: translateY(-100%); }
html.contact-v2 .tl-at-br { transform: translate(-100%, -100%); }
html.contact-v2 .tl-at-tc { transform: translateX(-50%); }
html.contact-v2 .tl-at-bc { transform: translate(-50%, -100%); }
html.contact-v2 .tl-at-cc { transform: translate(-50%, -50%); }

/* ---------- breakpoints — the template's own ----------------------------- */

@media only screen and (max-width: 1466px) {
	html.contact-v2 #hero.tl-hero .tl-map {
		right: var(--tl-inset-narrow, 3vw);
	}
}

@media only screen and (max-width: 1024px) {
	/* every variant stacks the same way: the drawing, then the caption under it */
	html.contact-v2 #hero.tl-hero #hero-styles {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 100vh;
		padding: 130px 0 70px;
		box-sizing: border-box;
	}

	html.contact-v2 #hero.tl-hero .tl-map {
		position: static;
		transform: none;
		width: auto;
		max-width: none;
		margin: 0 40px 44px;
	}

	/* the readouts leave the drawing and become a list under it, in the order the
	   variant wrote them — which is the order the entrance reveals them in */
	html.contact-v2 .tl-overlays {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-top: 24px;
	}

	html.contact-v2 .tl-at {
		position: static;
		transform: none;
		text-align: left;
	}

	/* nothing to lead to: below 1024 the readouts leave the drawing entirely */
	html.contact-v2 .tl-lead {
		display: none;
	}

	/* only the vertical padding goes: content-max-width still owns the
	   horizontal padding that keeps the title off the screen edge */
	html.contact-v2 #hero.tl-hero #hero-caption {
		height: auto;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* the caption is in the flow here, so the template's absolutely placed arrow
	   (bottom: 60px, left: 80px) would land on top of the title. It joins the flow
	   with it instead. */
	html.contact-tight #hero.tl-hero .hero-arrow {
		position: static;
		margin: 26px 0 0;
	}
}

@media only screen and (max-width: 767px) {
	html.contact-v2 .tl-coords {
		font-size: 16px;
		line-height: 24px;
	}

	html.contact-v2 .tl-readout-muted .tl-coords {
		font-size: 14px;
		line-height: 22px;
	}

	html.contact-v2 .tl-now {
		font-size: 15px;
		line-height: 23px;
	}

	html.contact-v2 .tl-place {
		font-size: 11px;
		line-height: 18px;
	}

	html.contact-v2 .tl-now span,
	html.contact-v2 .tl-marker b {
		font-size: 11px;
	}

	html.contact-v2 #hero.tl-hero .tl-map {
		margin: 0 30px 36px;
	}
}

@media only screen and (max-width: 479px) {
	html.contact-v2 #hero.tl-hero .tl-map {
		margin: 0 20px 32px;
	}

	html.contact-v2 #hero.tl-hero .hero-title {
		font-size: 11vw;
		line-height: 12vw;
	}
}


/* ===== css/contact/sections/zoom-seam.css ===== */
/* ==========================================================================
   Contact section library — zoom-seam (zm), map lab

   Composition only. The drawn-line language, the marker, the readout type, the hero
   shell and the mobile stack are in _trail.css; this file declares how big the
   drawing is and nothing about how it is placed. No map coordinate belongs here —
   points are anchored by .tl-at from the projection that drew them.
   ========================================================================== */

html.contact-v2 #hero.zm-hero {
	--tl-w: calc(72vh * 620 / 760);
	--tl-max: 56vw;
}

/* the shared border, brighter than anything else in the frame: it is the subject,
   not structure, so it takes the one weight above a country's own hairline */
html.contact-v2 .zm-seam {
	stroke: #fff;
	stroke-width: 2px;
}

html.contact-v2 .zm-readout {
	text-align: right;
}

html.contact-v2 .zm-readout .tl-coords span {
	margin-left: 0.5em;
}

@media only screen and (max-width: 1024px) {
	/* the readouts unstack onto the column's left edge below 1024 */
	html.contact-v2 .zm-readout {
		text-align: left;
	}
}


/* ===== css/contact/sections/checklist.css ===== */
/* Contact section library — checklist (prefix ck, body).
   Statements about the client's project, each a real checkbox behind a drawn 24px
   box; the line under them answers as they tick. Every rule is scoped under
   html.contact-v2 and the ck- prefix; the pills are css/home.css's .sz-cta-pair. */

/* ---------- heading and list */

html.contact-v2 .ck-title { margin-bottom: clamp(24px, 3vw, 44px); }

/* The hover band is inset 16px around the text, so the list is pulled 16px left to put the
   box back on the column line. Only the LEFT margin is negative: a negative right margin
   makes the box wider than the column and shows up as horizontal overflow at 390. The cap
   is the longest statement plus its inset — a left-aligned max-width, never a centred one
   (#main-page-content carries max-width:none, so a centred cap would leave the page's line). */
html.contact-v2 .ck-list {
	list-style: none;
	max-width: 1056px;
	margin: 0 0 0 -16px;
	padding: 0;
}

html.contact-v2 .ck-row {
	margin: 0;
	padding: 0;
	color: inherit;
}

/* the whole row is the label: 44px+ tall, tinted on hover, the text and the box follow :checked */
html.contact-v2 .ck-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	min-height: 44px;
	margin: 0;
	padding: 13px 16px;
	border-radius: 6px;
	color: var(--cs-prose);
	cursor: pointer;
	transition: background-color 0.3s ease-out;
}
html.contact-v2 .ck-item:hover { background-color: rgba(255, 255, 255, 0.06); }

html.contact-v2 .ck-text {
	display: block;
	font-family: 'basis_grotesque_promedium', sans-serif;
	font-weight: normal;
	font-size: 26px;
	line-height: 34px;
	color: inherit;
	transition: color 0.3s ease-out;
}

/* One requirement, two ways of meeting it. Both statements sit inside a single
   label, so there is one checkbox and one count — ticking is "either of these is
   true", not "both". The divider is a block so the two claims stack; it is styled
   down to a label rather than sized like the statements it joins. */
html.contact-v2 .ck-claim {
	display: block;
}

html.contact-v2 .ck-alt {
	display: block;
	margin: 2px 0;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cs-grey-3);
}

/* ---------- the box and the tick */

html.contact-v2 .ck-box {
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-top: 5px;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
	transition: box-shadow 0.3s ease-out;
}
html.contact-v2 .ck-mark {
	display: block;
	width: 24px;
	height: 24px;
	overflow: visible;
}
/* the tick is one stroke of length 18 (pathLength); at rest it is fully offset, on check it draws */
html.contact-v2 .ck-tick {
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 18;
	stroke-dashoffset: 18;
	transition: stroke-dashoffset 0.12s ease-in;
}

html.contact-v2 .ck-input:checked + .ck-box { box-shadow: inset 0 0 0 1px #fff; }
html.contact-v2 .ck-input:checked + .ck-box .ck-tick {
	stroke-dashoffset: 0;
	/* a tick should feel like a click, not a flourish: fast enough to read as a
	   response to the pointer rather than an animation played at it */
	transition: stroke-dashoffset 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
html.contact-v2 .ck-input:checked ~ .ck-text { color: #fff; }

/* the input is visually hidden (cs-sr); the ring goes on the box it draws */
html.contact-v2 .ck-input:focus-visible + .ck-box {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* ---------- the answer line and the pills */

/* The answer and the pills stack at the list's left edge. Side by side does not work here:
   #main-page-content carries max-width:none on an id selector, so the column never caps and
   `space-between` strands the pills at the far right; and pinning them beside a sentence that
   is 445px at "3 of 5" and 140px at "5 of 5" either opens a 300px void or drags the pills
   sideways on every tick. Stacked, the group reads as one unit in all seven states. */
html.contact-v2 .ck-foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	margin-top: clamp(32px, 3.8vw, 56px);
}

html.contact-v2 .ck-line {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 0.3em;
	max-width: 720px;
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	color: #fff;
}

/* a roll slot: the current text sits in flow, the next one rolls in behind the clip (checklist.js) */
html.contact-v2 .ck-roll {
	position: relative;
	display: block;
	overflow: hidden;
	vertical-align: top;
}
html.contact-v2 .ck-roll-item { display: block; }
html.contact-v2 .ck-roll-item.ck-roll-out {
	position: absolute;
	top: 0;
	left: 0;
}
html.contact-v2 .ck-count { white-space: nowrap; }
html.contact-v2 .ck-count.ck-count-empty { display: none; }

/* the pills sit on the list's left edge; the row's own 16px inset is not theirs */
html.contact-v2 .ck-foot .sz-cta-pair { flex: 0 0 auto; }

/* The copy control. A text link rather than a third pill: two pills read as two
   equal asks, and the address is not an ask — it is the thing you take away. The
   element-agnostic `.sz-textlink` in css/home.css already strips the button chrome
   and gives it a 44px hit box, the hover underline and an icon slot on the right,
   so all this adds is the case (an address keeps its own, the hover label keeps the
   pills' uppercase) and the pinned state while it is on the clipboard. */
html.contact-v2 .ck-copy .sz-swap > span {
	text-transform: none;
}

html.contact-v2 .ck-copy .sz-swap > span::before {
	text-transform: uppercase;
}

html.contact-v2 .ck-copy.is-copied .sz-swap > span {
	transform: translateY(-100%);
}

/* the pills and the link share one row; the phone still needs the valve */
html.contact-v2 .ck-foot .sz-cta-pair { flex-wrap: wrap; }

/* at 5 of 5 the mail pill's label rolls to its data-hover ("Write me") without a hover */
html.contact-v2 .ck-root .sz-pill.ck-rolled .sz-swap > span { transform: translateY(-100%); }

/* ---------- breakpoints */

@media (max-width: 1024px) {
	html.contact-v2 .ck-text { font-size: 22px; line-height: 30px; }
	html.contact-v2 .ck-box { margin-top: 3px; }
}

@media (max-width: 767px) {
	html.contact-v2 .ck-list { margin: 0 0 0 -12px; }
	html.contact-v2 .ck-item { gap: 14px; padding: 11px 12px; }
	html.contact-v2 .ck-text { font-size: 16px; line-height: 24px; }
	html.contact-v2 .ck-box { margin-top: 0; }
	html.contact-v2 .ck-foot { gap: 20px; margin-top: 28px; }
	html.contact-v2 .ck-line { font-size: 15px; line-height: 24px; }
}

/* The caret, shown only while the retraction is being typed. It is drawn on the
   roll item rather than added to the DOM so it cannot be read out or copied, and
   it steps rather than fades — a caret that eases is a caret nobody believes. */
html.contact-v2 .ck-answer.ck-typing .ck-roll-item::after {
	content: "";
	display: inline-block;
	width: 0.07em;
	height: 1em;
	margin-left: 0.1em;
	vertical-align: -0.13em;
	background: currentColor;
	animation: ck-caret 1s steps(1, end) infinite;
}

@keyframes ck-caret {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	html.contact-v2 .ck-answer.ck-typing .ck-roll-item::after { display: none; }
}


/* ===== css/contact/sections/overlap-hero.css ===== */
/* ==========================================================================
   Contact section library — overlap-hero (prefix oh, placement both)

   The instrument: two live clocks and a 24-hour band in the visitor's local
   hours, with Remy's working day laid over theirs and the shared hours in
   green. Geometry (segment left/width, the now-line, the probe) is computed by
   js/contact/sections/overlap-hero.js; this file owns the look.

   One sheet, two fragments. Everything the instrument itself needs is written
   against .oh-instrument, so the hero (hero.html: instrument + the ask row,
   filled to the first screen) and the body variant (section.html: the
   instrument alone under a heading, padded by .cs-section) share it; the few
   hero-only rules are scoped to #hero.oh-hero.

   Extracted from css/contact/overlap.css (.contact-overlap, prefix ov-).
   ========================================================================== */

/* ---------- the hero box: the template's text hero, filled to the first screen with the
   instrument anchored to its bottom, so the ask is the last thing on the fold and the
   next row starts exactly under it */

html.contact-v2 #hero.oh-hero #hero-caption {
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	padding-top: 160px;
	padding-bottom: 90px;
}

html.contact-v2 #hero.oh-hero #hero-caption .inner {
	display: block;
	width: 100%;
}

html.contact-v2 .oh-instrument {
	position: relative;
	width: 100%;
	color: #fff;
}

/* the body variant's heading; .cs-h2 carries the face and the size */
html.contact-v2 .oh-heading {
	margin-bottom: 44px;
}

/* Everything the entrance tweens in starts hidden here, not in JS: the page paints the
   moment #main becomes visible, a few frames before the timeline's first tick. */
html.contact-v2 .oh-reveal {
	opacity: 0;
}

/* ---------- clocks */

html.contact-v2 .oh-clocks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
	align-items: end;
}

html.contact-v2 .oh-clock {
	min-width: 0;
}

/* the label over a clock. In the hero it is also the template's .hero-subtitle
   caption-timeline (the spans the curtain rises, and the section's caption hook), whose
   top margin is for a subtitle under a title and whose overflow clip would swallow the
   44px hit area of the zone trigger inside it; in the body variant the type is all here,
   because .hero-subtitle span is left at opacity 0 outside #hero-caption. */
html.contact-v2 .oh-clock-label {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 10px;
	overflow: visible;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #fff;
}

/* the visitor's label is the control that opens the zone select: a text link with the
   site's underline draw and a chevron, 44px tall without moving the line */
html.contact-v2 .oh-zone-trigger {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	margin: -12px 0;
	padding: 12px 0;
	border: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	text-align: left;
	cursor: pointer;
}

html.contact-v2 .oh-zone-trigger > span[data-oh-label] {
	display: inline-block;
	position: relative;
	padding-right: 20px;
}

html.contact-v2 .oh-zone-trigger > span[data-oh-label]::after {
	content: "\f107";
	font: var(--fa-font-solid);
	font-size: 12px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

html.contact-v2 .oh-zone-trigger > span[data-oh-label]::before {
	content: "";
	position: absolute;
	left: 0;
	right: 20px;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

html.contact-v2 .oh-zone-trigger:hover > span[data-oh-label]::before,
html.contact-v2 .oh-zone-trigger:focus-visible > span[data-oh-label]::before {
	transform: scaleX(1);
	transform-origin: left;
}

html.contact-v2 .oh-zone-trigger:hover > span[data-oh-label]::after {
	transform: translateY(-50%) translateY(2px);
}

html.contact-v2 .oh-time {
	display: block;
	margin: 0;
	padding: 0;
	font-family: 'basis_grotesque_promedium', sans-serif;
	font-weight: 500;
	font-size: min(6.4vw, 94px);
	line-height: 1;
	letter-spacing: -0.01em;
	color: #fff;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

html.contact-v2 .oh-time time {
	display: inline-block;
}

html.contact-v2 .oh-colon {
	display: inline-block;
}

html.contact-v2 .oh-colon.is-blinking {
	animation: oh-blink 1s steps(1, end) infinite;
}

/* dims rather than vanishes: a still of the page should never read as a missing colon */
@keyframes oh-blink {
	50% { opacity: 0.25; }
}

/* ---------- the band */

html.contact-v2 .oh-band-wrap {
	position: relative;
	margin-top: 64px;
}

/* the probe readout sits in the gap above the axis, following the pointer */
html.contact-v2 .oh-readout {
	position: absolute;
	left: 0;
	top: -34px;
	margin: 0;
	height: 22px;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 22px;
	color: #fff;
	white-space: nowrap;
	text-transform: none;
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity 0.2s ease-out;
	pointer-events: none;
}

html.contact-v2 .oh-band-wrap.is-probing .oh-readout {
	opacity: 1;
}

html.contact-v2 .oh-axis {
	position: relative;
	height: 27px;
}

html.contact-v2 .oh-axis-hour {
	position: absolute;
	top: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 17px;
	color: var(--cs-grey-2);
	white-space: nowrap;
	transform: translateX(-50%);
}

html.contact-v2 .oh-axis-hour[data-edge="start"] {
	transform: none;
}

html.contact-v2 .oh-axis-hour[data-edge="end"] {
	transform: translateX(-100%);
}

html.contact-v2 .oh-axis-tick {
	position: absolute;
	bottom: 0;
	width: 1px;
	height: 6px;
	background: rgba(255, 255, 255, 0.22);
}

html.contact-v2 .oh-axis-line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.14);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* height comes from the rows, so the same-zone state can fold two of them away */
html.contact-v2 .oh-band {
	position: relative;
	padding: 12px 0 10px;
	touch-action: pan-y;
	cursor: crosshair;
}

html.contact-v2 .oh-row {
	position: relative;
	height: 14px;
}

html.contact-v2 .oh-row + .oh-row {
	margin-top: 7px;
}

/* same zone: both days are the same hours, one bar says so */
html.contact-v2 .oh-band.is-same .oh-row[data-oh-row="you"],
html.contact-v2 .oh-band.is-same .oh-row[data-oh-row="me"] {
	display: none;
}

html.contact-v2 .oh-seg {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 14px;
	box-sizing: border-box;
	border-radius: 7px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

html.contact-v2 .oh-seg[hidden] {
	display: none;
}

html.contact-v2 .oh-seg-you {
	background: rgba(255, 255, 255, 0.6);
	color: #171717;
}

html.contact-v2 .oh-seg-me {
	background: rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.92);
}

html.contact-v2 .oh-seg-overlap {
	background: var(--cs-green);
	color: #171717;
}

html.contact-v2 .oh-seg-label {
	font-family: 'basis_grotesque_promedium', sans-serif;
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0 8px;
	white-space: nowrap;
	transition: opacity 0.2s ease-out;
}

html.contact-v2 .oh-seg.is-narrow .oh-seg-label,
html.contact-v2 .oh-seg-label:empty {
	opacity: 0;
}

/* now: a hairline through the band with a dot on the axis */
html.contact-v2 .oh-now {
	position: absolute;
	top: -3px;
	bottom: 0;
	left: 0;
	width: 1px;
	background: #fff;
	transform-origin: 50% 100%;
	pointer-events: none;
}

html.contact-v2 .oh-now::before {
	content: "";
	position: absolute;
	top: 0;
	left: -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
}

html.contact-v2 .oh-probe {
	position: absolute;
	top: -3px;
	bottom: 0;
	left: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.5);
	opacity: 0;
	transition: opacity 0.2s ease-out;
	pointer-events: none;
}

html.contact-v2 .oh-band-wrap.is-probing .oh-probe {
	opacity: 1;
}

/* ---------- the sentence and the zone select */

html.contact-v2 .oh-verdict {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: 44px;
}

html.contact-v2 .oh-sentence {
	margin: 0;
	max-width: 640px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 22px;
	line-height: 34px;
	color: #f2f2f2;
	text-transform: none;
}

/* the row is a <label>: the select needs no id, so the two fragments can ship together */
html.contact-v2 .oh-zone {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
	min-height: 44px;
	margin: 0;
}

html.contact-v2 .oh-zone-label {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: var(--cs-grey-2);
	text-transform: none;
	cursor: pointer;
	white-space: nowrap;
}

html.contact-v2 .oh-zone-select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* html, body, #main are user-select: none; a control needs its text back */
html.contact-v2 .oh-zone-select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 0;
	margin: 0;
	height: 44px;
	padding: 0 26px 0 0;
	max-width: 240px;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 22px;
	color: #fff;
	text-overflow: ellipsis;
	cursor: pointer;
	-webkit-user-select: text;
	user-select: text;
	transition: border-color 0.3s ease-out;
}

html.contact-v2 .oh-zone-select:hover {
	border-bottom-color: rgba(255, 255, 255, 0.75);
}

html.contact-v2 .oh-zone-select option,
html.contact-v2 .oh-zone-select optgroup {
	color: #fff;
	background: #171717;
}

html.contact-v2 .oh-zone-select-wrap i {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: #fff;
	pointer-events: none;
}

/* ---------- the ask: pills, address, availability (hero fragment only) */

html.contact-v2 .oh-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 28px;
	margin-top: 48px;
}

/* the address is the thing you will type, so it keeps its case; the site's uppercase
   is for display sizes and labels */
html.contact-v2 .oh-copy {
	color: #fff;
	text-transform: none;
}

html.contact-v2 .oh-copy i {
	font-size: 13px;
	transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

html.contact-v2 .oh-copy:hover i {
	transform: none;
}

html.contact-v2 .oh-copy.is-copied i {
	transform: scale(0.9);
}

html.contact-v2 .oh-availability {
	display: inline-flex;
	align-items: center;
	margin: 0 0 0 auto;
	padding: 0;
	font-family: 'basis_grotesque_promedium', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 22px;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

html.contact-v2 .oh-availability .sz-dot {
	margin: 0 10px 0 0;
}

/* ---------- keyboard focus (the base ring covers controls inside #hero and .cs-section;
   this keeps the select's ring where the base's :is() list is outranked) */

html.contact-v2 .oh-zone-trigger:focus-visible,
html.contact-v2 .oh-zone-select:focus-visible,
html.contact-v2 .oh-copy:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* ---------- breakpoints: the template's own */

@media only screen and (max-width: 1466px) {
	html.contact-v2 .oh-time {
		font-size: 6.8vw;
	}
}

@media only screen and (max-width: 1024px) {
	html.contact-v2 #hero.oh-hero #hero-caption {
		padding-top: 150px;
		padding-bottom: 70px;
	}

	html.contact-v2 .oh-time {
		font-size: 8vw;
	}

	html.contact-v2 .oh-verdict {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media only screen and (max-width: 767px) {
	html.contact-v2 #hero.oh-hero #hero-caption {
		padding-top: 140px;
		padding-bottom: 60px;
	}

	html.contact-v2 .oh-clocks {
		grid-template-columns: 1fr;
		gap: 28px 0;
	}

	html.contact-v2 .oh-time {
		font-size: min(16vw, 84px);
	}

	html.contact-v2 .oh-band-wrap {
		margin-top: 48px;
	}

	html.contact-v2 .oh-sentence {
		font-size: 19px;
		line-height: 30px;
	}

	html.contact-v2 .oh-actions {
		gap: 14px 22px;
		margin-top: 36px;
	}

	html.contact-v2 .oh-availability {
		margin-left: 0;
		flex-basis: 100%;
	}

	html.contact-v2 .oh-heading {
		margin-bottom: 32px;
	}
}

@media only screen and (max-width: 479px) {
	html.contact-v2 .oh-zone {
		flex-wrap: wrap;
		gap: 4px 14px;
	}

	html.contact-v2 .oh-zone-select {
		max-width: 100%;
	}
}


/* ===== css/contact/pages/_seams.css ===== */
/* ==========================================================================
   Contact lab — shared page rhythm (round 3)

   `.cs-section` pads `--cs-row` top *and* bottom, so every adjacency between two
   body sections costs twice that — about 316px at 1440. Round 2 deliberately left
   that un-hoisted and tuned each page's seams by hand, which is right when eight
   pages have eight different compositions. Round 3's five pages are variations on
   one composition, so the rhythm is settled once here and each page's own
   stylesheet is left for the seams that are genuinely its own.

   Every seam halves to `--cs-row-small` (~172px at 1440), except the first
   section's top: that one is answering a 100vh hero and needs the full measure.
   The last section's bottom stays halved too — the template's page-nav block
   brings its own generous space, and the full measure on top of it left ~330px of
   nothing between the last line and "ABOUT ME". A flush section
   (`.cs-section-flush`, the full-bleed band) is exempt by its own rule in
   _base.css and must stay that way.

   Applies to any page carrying the `contact-tight` root class.
   ========================================================================== */

/* ---------- the column ------------------------------------------------------

   The template caps and centres `.content-max-width` at 1320px — but
   `#main-page-content` carries `max-width: none` on an *id* selector
   (css/content.css 501), which outranks the class, so the body column never caps.
   Below 1466 that is invisible: a 1320 box centred in 1440 lands on the same 60px
   the padding already gives. At 1920 it is not invisible at all — the sections run
   from 80px while a centred hero sits in the middle of the screen, and the page
   reads as though its content fell to the left.

   `_base.css` answers this for the lab by uncapping the hero caption so hero and
   body share one left edge. A real contact page with a centred hero needs the
   opposite: give the body back the column the template intended.

   The page-nav block is capped with it. It is `.content-full-width` in the template
   and stays at 80px on every other page, so this is a deliberate difference — but a
   page whose sections sit in a centred column and whose sign-off runs to the far
   left reads as two pages, and the sign-off is the weaker claim.
   ------------------------------------------------------------------------- */

html.contact-tight #main-page-content.content-max-width,
html.contact-tight #page-nav .page-nav-caption {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- the rhythm ---------------------------------------------------- */

html.contact-tight #main-page-content > .cs-section:not(.cs-section-flush) {
	padding-top: var(--cs-row-small);
	padding-bottom: var(--cs-row-small);
}

html.contact-tight #main-page-content > .cs-section:not(.cs-section-flush):first-child {
	padding-top: var(--cs-row);
}


/* ===== css/contact/pages/_contact-hero.css ===== */
/* ==========================================================================
   Contact lab — the shared contact hero (round 3)

   The template's own contact hero (contact.html) is a short band: the title
   centred near the top, one line under it, and the round scroll-down button at
   the band's foot. The map-lab hero is the opposite — caption hung bottom-left,
   drawing beside it — which is right for a page whose subject is the drawing and
   wrong for a page whose subject is "write to me".

   So every round-3 page takes the template's arrangement: caption top and centred,
   arrow at the foot, and the drawing centred behind and below the type rather than
   beside it. The sizes still come from the section's own custom properties; only
   the placement is overridden.

   Applies to any page carrying the `contact-tight` root class.
   ========================================================================== */

html.contact-tight #hero.tl-hero #hero-caption {
	padding-top: 150px;
	padding-bottom: 0;
}

/* the template's caption is bottom-aligned for a full-height hero; here the title
   is the first thing on the page, as it is on contact.html */
html.contact-tight #hero.tl-hero #hero-caption .inner {
	vertical-align: top;
}

/* the arrow keeps the template's placement — the foot of the band, centred by
   `.text-align-center .hero-arrow` in content.css */
html.contact-tight #hero.tl-hero .hero-arrow {
	bottom: 40px;
}

/* ---------- the drawing: centred, low, behind the type --------------------- */

html.contact-tight #hero.tl-hero {
	--tl-w: calc(60vh * 620 / 760);
}

html.contact-tight #hero.tl-hero .tl-map {
	top: 60%;
	left: 50%;
	right: auto;
	transform: translate(-50%, -50%);
}

@media only screen and (max-width: 1466px) {
	html.contact-tight #hero.tl-hero .tl-map {
		top: 61%;
	}
}

@media only screen and (max-width: 1024px) {
	/* the hero stacks below 1024. The caption is the second child, so the column is
	   reversed to keep the title first — the same reading order as the wide layout. */
	html.contact-tight #hero.tl-hero #hero-styles {
		flex-direction: column-reverse;
		justify-content: flex-start;
		padding-top: 120px;
	}

	/* Capped, not full-column. At 390 the cap never binds and nothing changes, but
	   between 768 and 1024 a full-width drawing is most of the screen: the map box is
	   620:760, so at 754px wide it stands 924px tall with Andorra floating in the
	   middle of it and the hero becomes a page of its own. */
	html.contact-tight #hero.tl-hero .tl-map {
		top: auto;
		left: auto;
		transform: none;
		width: auto;
		max-width: 420px;
		margin: 40px auto 0;
	}

	html.contact-tight #hero.tl-hero #hero-caption {
		padding-top: 0;
	}

	/* the caption is centred, so the legend under the drawing is too — left-aligning
	   it put the coordinates against the screen edge while the title sat in the middle */
	html.contact-tight #hero.tl-hero .tl-overlays {
		align-items: center;
	}

	/* `.zm-readout` sets its own `text-align: left` in this band, and a child's own
	   alignment beats an ancestor's, so centring the wrapper alone left the lines
	   ranged left inside a centred block. */
	html.contact-tight #hero.tl-hero .tl-at,
	html.contact-tight #hero.tl-hero .zm-readout {
		text-align: center;
	}

	/* The arrow goes. It is a scroll affordance for a full-height band, and the stack
	   puts the caption first and the drawing under it — so an arrow inside the caption
	   lands in the *middle* of the hero, pointing at the map rather than at the page.
	   The about lab reached this first; this is the contact page catching up. */
	html.contact-tight #hero.tl-hero .hero-arrow {
		display: none;
	}
}

@media only screen and (max-width: 767px) {
	html.contact-tight #hero.tl-hero .tl-map {
		margin: 34px 30px 0;
	}
}