/* Crummock project maps. Palette: ink #171918, charcoal #202321, orange #EF5A24, paper #FAF9F5.
 * Square corners, no shadows (the one round thing is the project photo on the home page panels).
 * Archivo for display, Manrope for text (both self-hosted by crummock-fonts.php). */

.cm-root {
	--cm-ink: #171918;
	--cm-char: #202321;
	--cm-orange: #EF5A24;
	--cm-eyebrow: #FFBD9F;
	--cm-text: #D9DCD7;
	--cm-muted: #A9ADA8;
	--cm-line: rgba(255, 255, 255, 0.16);
	--cm-top: 116px;
	background: var(--cm-ink);
	color: var(--cm-text);
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	border-radius: 0;
	box-shadow: none;
}
.cm-root *, .cm-popup * { border-radius: 0; box-shadow: none; }

.cm-root .cm-eyebrow,
.cm-root .cm-service,
.cm-popup .cm-service {
	margin: 0 0 10px;
	font: 800 12px/1.3 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cm-eyebrow);
}
.cm-root h2 {
	margin: 0;
	font: 700 clamp(2rem, 3.6vw, 3rem)/1.08 'Archivo', sans-serif;
	color: #fff;
}
.cm-root .cm-name {
	margin: 0 0 14px;
	font: 700 clamp(1.4rem, 2vw, 1.75rem)/1.15 'Archivo', sans-serif;
	color: #fff;
}
.cm-root .cm-loc { margin: 0 0 12px; color: #fff; font-weight: 600; }
.cm-root .cm-meta { margin: 0 0 14px; display: grid; gap: 8px; }
.cm-root .cm-meta div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cm-root .cm-meta dt {
	margin: 0; min-width: 76px;
	font: 800 11px/1.8 'Manrope', sans-serif;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--cm-muted);
}
.cm-root .cm-meta dd { margin: 0; color: #fff; font-weight: 600; }
.cm-root .cm-desc { margin: 0; color: var(--cm-text); }
.cm-root .cm-link,
.cm-popup .cm-link {
	display: inline-block; margin-top: 16px;
	font: 700 14px/1.2 'Archivo', sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
	color: #fff; text-decoration: underline; text-decoration-color: var(--cm-orange); text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.cm-root .cm-btn {
	display: inline-block; padding: 18px 30px;
	background: var(--cm-orange); color: var(--cm-ink);
	font: 700 15px/1.2 'Archivo', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
	border: 2px solid var(--cm-orange);
}
.cm-root .cm-btn:hover, .cm-root .cm-btn:focus-visible { background: #fff; border-color: #fff; color: var(--cm-ink); }

/* The sea colour, so nothing flashes dark before the tiles arrive. */
.cm-map { background: #BCCDD6; width: 100%; }
.cm-nogl .cm-map { display: none; }

/* ---------- Home: scrollytelling. Map fixed on the left half, project panels scroll on the right. ---------- */
/* Desktop: the map takes about 60 percent and the story panel about 40. The card sits one gutter in from the map and one gutter
 * in from the right edge of the screen: equal gaps on both sides at every width (--cm-gl, up to 80px). The map width comes from
 * --cm-panel, which still allows for the old page-edge gutter (--cm-gr) so the map does not change. --cm-measure keeps the text
 * line length where it has always been, so a wider card does not lengthen the lines. */
.cm-scrolly {
	--cm-gr: max(32px, calc((100vw - 1280px) / 2));
	--cm-gl: min(80px, var(--cm-gr));
	--cm-panel: max(40vw, calc(416px + var(--cm-gl) + var(--cm-gr)));
	--cm-measure: calc(max(40vw - var(--cm-gl) - var(--cm-gr), 416px) - 71px);
	display: grid; grid-template-columns: minmax(0, 1fr) var(--cm-panel); width: 100%;
}
.cm-scrolly__map {
	grid-column: 1; grid-row: 1;
	position: sticky; top: var(--cm-top); align-self: start;
	height: calc(100vh - var(--cm-top)); height: calc(100svh - var(--cm-top));
	background: #BCCDD6;
}
.cm-scrolly .cm-map { height: 100%; }
.cm-scrolly__blocks {
	grid-column: 2; grid-row: 1;
	padding-left: var(--cm-gl);
	padding-right: var(--cm-gl);
}
.cm-intro { padding: clamp(72px, 9vw, 130px) 0 clamp(8px, 2vw, 24px); }
.cm-intro h2 { max-width: 14em; }

/* One tall panel per project. The current one is fully bright; the others are faded. */
.cm-block { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 24px 0; }
.cm-block .cm-card {
	width: 100%; padding: 32px; opacity: 0.3;
	background: var(--cm-char);
	border: 1px solid var(--cm-line); border-left: 6px solid var(--cm-line);
}
.cm-block.is-active .cm-card { opacity: 1; border-left-color: var(--cm-orange); }
.cm-root img.cm-photo { display: block; width: 112px; height: 112px; margin: 0 0 20px; border-radius: 50%; object-fit: cover; }
.cm-end { padding: 24px 0 clamp(72px, 9vw, 130px); }
.cm-nogl.cm-scrolly { display: block; }
.cm-nogl .cm-scrolly__map { display: none; }
.cm-nogl .cm-block { min-height: 0; }
.cm-nogl .cm-block .cm-card { opacity: 1; }
html:not(.js) .cm-scrolly__map { display: none; }

@media (prefers-reduced-motion: no-preference) {
	.cm-block .cm-card { transition: opacity 0.35s ease, border-left-color 0.35s ease; }
}

@media (max-width: 980px) {
	.cm-root { --cm-top: 104px; }
	/* Phones: the map sits above the panels and stays put while they scroll under it. */
	.cm-scrolly { display: block; }
	.cm-scrolly__map {
		position: sticky; top: var(--cm-top); z-index: 2;
		height: 42vh; height: 42svh; min-height: 240px;
		border-bottom: 2px solid var(--cm-orange);
	}
	.cm-scrolly__blocks { padding: 0 16px; position: relative; z-index: 1; }
	/* The overview stays on screen while the heading is read, before the first project takes over. */
	.cm-intro { padding: 40px 0 40vh; padding-bottom: 40svh; }
	.cm-block { min-height: 62vh; min-height: 62svh; }
	.cm-block .cm-card { padding: 22px; }
	.cm-root img.cm-photo { width: 88px; height: 88px; margin-bottom: 16px; }
	.cm-end { padding: 16px 0 64px; }
}

/* ---------- Projects page: full map ---------- */
.cm-all { width: 100%; }
.cm-all .cm-map { height: min(72vh, 760px); min-height: 440px; }
.cm-list { padding: 24px; border-top: 2px solid var(--cm-orange); }
.cm-list summary {
	cursor: pointer; padding: 14px 0;
	font: 700 15px/1.2 'Archivo', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
}
/* The theme styles list items with bullets; these cards are not a bulleted list. */
.cm-root .cm-list ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-root .cm-list li { list-style: none; margin: 0; padding: 24px; background: var(--cm-char); border: 1px solid var(--cm-line); }
.cm-root .cm-list li::marker { content: none; }
.cm-root .cm-list li::before, .cm-root .cm-list li::after { content: none; display: none; }
.cm-list .cm-name { font-size: 1.25rem; }
.cm-list .cm-show {
	display: block; margin-top: 16px; padding: 10px 16px;
	background: transparent; color: #fff; cursor: pointer;
	font: 700 13px/1.2 'Archivo', sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
	border: 2px solid var(--cm-orange);
}
.cm-list .cm-show:hover { background: var(--cm-orange); color: var(--cm-ink); }
@media (max-width: 980px) { .cm-root .cm-list ul { grid-template-columns: 1fr; } .cm-list { padding: 16px; } .cm-all .cm-map { height: 62vh; min-height: 360px; } }

/* ---------- MapLibre parts, restyled ---------- */
.cm-popup .maplibregl-popup-content {
	background: var(--cm-char, #202321); color: #D9DCD7;
	padding: 20px 22px 20px 20px; min-width: 220px; max-width: 320px;
	border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0; box-shadow: none;
	font-family: 'Manrope', sans-serif; font-size: 15px; line-height: 1.5;
}
.cm-popup .maplibregl-popup-tip { display: none; }
.cm-popup .maplibregl-popup-close-button { color: #fff; font-size: 22px; padding: 4px 10px; border-radius: 0; }
.cm-popup .maplibregl-popup-close-button:hover { background: #EF5A24; color: #171918; }
.cm-popup .cm-pop__photo { display: block; width: 100%; max-width: 280px; height: auto; margin: -2px 0 14px; border-radius: 0; }
.cm-pop .cm-name { margin: 0 0 6px; font: 700 18px/1.2 'Archivo', sans-serif; color: #fff; }
.cm-pop .cm-pop__meta { margin: 0 0 8px; font-weight: 600; color: #fff; }
.cm-pop .cm-desc { margin: 0; }
.cm-pop .cm-pop__approx { margin: 10px 0 0; font-size: 13px; color: #A9ADA8; }
.cm-pop .cm-service { margin-bottom: 6px; padding-right: 20px; }

.maplibregl-ctrl-group { background: #202321; border-radius: 0; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.2); }
.maplibregl-ctrl-group button { border-radius: 0; background-color: transparent; }
.maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255, 255, 255, 0.2); }
.maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1); }
.maplibregl-scroll-zoom-blocker, .maplibregl-touch-pan-blocker { font-family: 'Manrope', sans-serif; border-radius: 0; }

/* MapLibre's own stylesheet loads after this one at equal specificity, so its attribution colours would win. The
 * .cm-map prefix settles it: a dark credits bar with light text. The credits are required, so they stay. */
.cm-map .maplibregl-ctrl.maplibregl-ctrl-attrib,
.cm-map .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(23, 25, 24, 0.85); color: #B9BDB8; border-radius: 0; }
.cm-map .maplibregl-ctrl-attrib a { color: #B9BDB8; }
.cm-map .maplibregl-ctrl-attrib-button { background-color: transparent; border-radius: 0; filter: invert(1); }
.cm-map .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button { background-color: transparent; }


/* ---------- Service filters (Projects page) ---------- */
.cm-filters { padding: 20px 24px 0; }
.cm-filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cm-root .cm-filters li { list-style: none; margin: 0; padding: 0; }
.cm-root .cm-filters li::marker { content: none; }
.cm-filter {
	display: inline-block; padding: 12px 18px;
	background: transparent; color: #fff; text-decoration: none; white-space: nowrap;
	font: 700 14px/1.2 'Archivo', sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
	border: 2px solid var(--cm-orange); border-radius: 0;
}
.cm-filter:hover { background: rgba(239, 90, 36, 0.18); color: #fff; }
.cm-filter:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* The current filter is solid orange with a marker, so it is clear without relying on colour alone. */
.cm-filter.is-current, .cm-filter[aria-current="true"] { background: var(--cm-orange); color: var(--cm-ink); box-shadow: inset 0 -4px 0 var(--cm-ink); }
.cm-filter.is-current::before { content: "\2713\00a0"; content: "\2713\00a0" / ""; }
.cm-filter-status { margin: 0; padding: 14px 24px 16px; color: var(--cm-text); font-size: 15px; }
.cm-list li[hidden] { display: none; }
@media (max-width: 767px) {
	/* One row that scrolls sideways, so the buttons do not push the map down. */
	.cm-filters { padding: 16px 0 0; }
	.cm-filters ul { flex-wrap: nowrap; overflow-x: auto; padding: 2px 16px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
	.cm-filters li { flex: 0 0 auto; scroll-snap-align: start; }
	.cm-filter { padding: 11px 14px; font-size: 13px; }
	.cm-filter-status { padding: 4px 16px 12px; font-size: 14px; }
}

/* ---------- A map on a service page ---------- */
.cm-svc { width: 100%; }
.cm-svc__inner { width: min(1280px, calc(100vw - 64px)); margin: 0 auto; padding: clamp(56px, 7vw, 100px) 0; }
.cm-svc h2 { margin: 0 0 28px; }
.cm-svc .cm-map { height: min(56vh, 480px); min-height: 340px; }
.cm-svc .cm-list { padding: 20px 0 0; border-top: 0; }
.cm-svc__link { margin: 22px 0 0; }
.cm-svc__link .cm-link { margin-top: 0; font-size: 16px; }
@media (max-width: 767px) {
	.cm-svc__inner { width: calc(100vw - 32px); padding: 48px 0 56px; }
	.cm-svc .cm-map { height: 56vh; min-height: 300px; }
}

/* ---------- Home: the project count on the opening view ---------- */
.cm-count {
	position: absolute; left: 0; bottom: 0; z-index: 3; margin: 0;
	max-width: calc(100% - 56px); padding: 10px 16px 11px;
	background: var(--cm-ink); color: #fff; border-top: 2px solid var(--cm-orange);
	font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.35;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.cm-count { transition: opacity 0.35s ease, visibility 0s linear 0s; }
	.cm-started .cm-count { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
}
@media (max-width: 980px) {
	.cm-count { font-size: 13px; padding: 8px 12px 9px; }
}

/* ---------- The Crummock office marker: dark badge, logo C in white, square, no shadow ---------- */
.cm-office { display: block; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; line-height: 0; }
.cm-office img { display: block; width: 32px; height: 32px; border-radius: 0; box-shadow: none; }
.cm-scrolly .cm-office { pointer-events: none; cursor: default; }
.cm-office:focus-visible { outline: 3px solid var(--cm-orange); outline-offset: 2px; }
.cm-pop--office address { font-style: normal; }
.cm-pop--office .cm-desc a { color: #fff; text-decoration: underline; text-decoration-color: var(--cm-orange); text-underline-offset: 3px; }

/* Desktop only (the phone block above makes the layout a single column): hold the text to its old line length. */
@media (min-width: 981px) {
	.cm-block .cm-card > * { max-width: var(--cm-measure); }
}

/* Phone: the opening count bar runs the full width of the map and the map credits sit inside it at the right,
 * as one dark bar. The credits are required, so the button stays visible, above the bar, and keyboard focusable.
 * The bar is pointer-events:none, so a tap on the button reaches the control. Home map only (.cm-scrolly). */
@media (max-width: 767px) {
	.cm-count { right: 0; max-width: none; box-sizing: border-box; height: 48px; display: flex; align-items: center; padding: 0 56px 0 16px; }
	.cm-scrolly .cm-map .maplibregl-ctrl-bottom-right { z-index: 4; }
	.cm-scrolly .cm-map .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { margin: 0; box-sizing: border-box; min-height: 48px; background: var(--cm-ink); border-top: 2px solid var(--cm-orange); }
	.cm-scrolly .cm-map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { width: 48px; height: 48px; }
	.cm-scrolly .cm-map .maplibregl-ctrl-attrib-button { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 24px 24px; }
	.cm-scrolly .cm-map .maplibregl-ctrl-attrib-button:focus-visible { outline: 3px solid var(--cm-orange); outline-offset: -6px; box-shadow: none !important; }
	.cm-started .cm-scrolly .cm-map .maplibregl-ctrl-attrib, .cm-scrolly.cm-started .cm-map .maplibregl-ctrl-attrib { border-top-color: transparent; }
}

/* Project list cards: the CLIENT / LOCATION label sat 3.5px above its value, because the label (11px, line-height 1.8) and the
 * value were stretched in a flex row instead of sharing a baseline. They now align on the baseline. */
.cm-root .cm-meta div { align-items: baseline; }
/* When the list is scrolled to (the summary, or any link or focus that targets the list), leave room for the fixed header
 * (116px on desktop, 104px on phone and tablet) so the list heading is not hidden under it. */
.cm-root .cm-list, .cm-root .cm-list summary { scroll-margin-top: 132px; }

/* Contact page: the one-pin map (data-cm="point"). The office badge is the pin. */
.cm-point .cm-map { height: min(56vh, 420px); min-height: 300px; }