/*
 * Project types (Projects hub body). Figma desktop/projects/1 2069:41662:
 * grey top area 2069:41664 (#fafafa, header + title block 64 under the nav,
 * 32 bottom padding); text/hero 720 wide centred, left-aligned (header/2XL +
 * body/M grey, 8 gap); 32 to the model (house 665x500, high street 750x500
 * on /2); 32 to the segmented control (356 wide); 32 to the tag/medium pills
 * (16 apart); 32 to the cards (311x290, 16 apart, row clipped by the
 * column); 16 to the pagination (right).
 * Mobile 2412:64268: band 209 (title 16 under the nav, 20 bottom), header/L
 * + body/XS; model 200 high, no hotspots; segmented full width; pills scroll
 * sideways; cards 350x311 stacked 16 apart, no pagination.
 *
 * Hotspot (Ellipse 381, 2534:48149): 24px primary dot with a green ring and a
 * soft shadow; drawn in CSS so it can show its pressed state.
 *
 * Side panel: desktop/projects/3 2411:63148, mobile/projects/2 2075:44450
 * (measurements in project_types.js).
 */

/* ---------- title band ---------- */
.project-types__band {
	padding: calc(var(--header-h) + 64px) 0 32px;
	background: var(--c-bg-grey);
}

.project-types__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
}

.project-types__title { font: var(--f-header-2xl); color: var(--c-text-dark); }
.project-types__text { font: var(--f-body-m); color: var(--c-text-grey); }

.project-types__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ---------- model + hotspots ---------- */
.project-types__models {
	--model-h: 500px;
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 32px;
}

.project-types__model {
	position: relative;
	width: min(100%, calc(var(--model-h) * var(--ratio, 1.33)));
	aspect-ratio: var(--ratio, 1.33);
}

.project-types__model[hidden] { display: none; }

.project-types__model-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.project-types__hotspot {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: 24px;
	height: 24px;
	border: 3px solid var(--c-secondary);
	border-radius: 50%;
	background: var(--c-primary);
	box-shadow: 2px 4px 6px rgba(9, 3, 19, .25);
	transform: translate(-50%, -50%);
	transition: transform .15s ease, box-shadow .15s ease;
}

/* Bigger touch target than the dot. */
.project-types__hotspot::before {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
}

.project-types__hotspot:hover,
.project-types__hotspot:focus-visible { transform: translate(-50%, -50%) scale(1.2); }

.project-types__hotspot[aria-pressed="true"] {
	box-shadow: 0 0 0 6px rgba(75, 11, 221, .2), 2px 4px 6px rgba(9, 3, 19, .25);
}

.project-types__hotspot-label {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	padding: 6px 10px;
	border-radius: var(--r-xs);
	background: var(--c-text-dark);
	color: var(--c-text-white);
	font: var(--f-subtitle-s);
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-50%) scale(calc(1 / 1.2));
	transition: opacity .15s ease;
	pointer-events: none;
}

.project-types__hotspot:hover .project-types__hotspot-label,
.project-types__hotspot:focus-visible .project-types__hotspot-label { opacity: 1; }

/* ---------- segmented control + pills ---------- */
.project-types__segmented { margin-top: 32px; }

.project-types__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	max-width: 100%;
	margin-top: 32px;
}

.project-types__pill-check { display: none; }
.project-types__pills .pill.is-selected .project-types__pill-check { display: inline-block; }

/* ---------- cards ---------- */
.project-types__slider {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-self: stretch;
	min-width: 0;
	margin-top: 32px;
}

.project-types__track { margin: 0; }
.project-types__item { display: flex; }
.project-types__item[hidden] { display: none; }

.type-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 311px;
	min-height: 290px;
	overflow: hidden;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-m);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
}

.type-card__image {
	display: block;
	height: 180px;
	margin: -1px -1px 0;
	overflow: hidden;
	border-radius: var(--r-m) var(--r-m) 0 0;
	background: var(--c-bg-purple);
}

.type-card__image img { transition: transform .3s ease; }
.type-card:hover .type-card__image img { transform: scale(1.04); }

.type-card__icon {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	margin: -61px 0 0 18px;
	border-radius: var(--r-m);
	background: var(--c-bg-purple);
	position: relative;
}

.type-card__icon img { width: 64px; height: 64px; }

.type-card__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 16px 18px 20px;
}

.type-card__title { font: var(--f-header-xs); }

.type-card__more {
	--icon-size: 12px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--c-primary);
	font: var(--f-subtitle-l);
}

.type-card:hover .type-card__more { text-decoration: underline; text-underline-offset: 2px; }

.project-types__arrows {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
}

.project-types__arrow,
.type-panel__arrow {
	--icon-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-border-dark);
	border-radius: var(--r-xs);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
	transition: background-color .15s ease, color .15s ease;
}

.project-types__arrow:hover,
.type-panel__arrow:hover { background: var(--c-border-dark); color: var(--c-text-white); }

.project-types__arrow[aria-disabled="true"],
.type-panel__arrow[aria-disabled="true"] {
	border-color: var(--c-border-light);
	color: var(--c-border-light);
	pointer-events: none;
}

/* ================= Side panel ================= */
.has-type-panel { overflow: hidden; }

/* The dialog covers the viewport; the sheet is the white part, the rest is
   the dimmed area (a click there closes it). */
.type-panel {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.type-panel::backdrop {
	background: rgba(9, 3, 19, .5);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.type-panel__sheet {
	position: relative;
	width: min(960px, 100%);
	height: 100%;
	padding-bottom: 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--c-bg-white);
	color: var(--c-text-dark);
}

.type-panel[open] .type-panel__sheet { animation: type-panel-in .25s ease-out; }

@keyframes type-panel-in {
	from { transform: translateX(-40px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

/* Close button stays reachable while the sheet scrolls (0-high sticky bar). */
.type-panel__bar {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	justify-content: flex-end;
	height: 0;
	padding-right: 32px;
}

.type-panel__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: 32px;
	border-radius: var(--r-m);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
	box-shadow: 0 2px 8px rgba(9, 3, 19, .08);
	transition: background-color .15s ease, color .15s ease;
}

.type-panel__close:hover { background: var(--c-border-dark); color: var(--c-text-white); }

/* ---------- photo + icon tile ---------- */
.type-panel__media {
	position: relative;
	height: 608px; /* photo 556 + the tile's 52 below it */
}

.type-panel__photo {
	height: 556px;
	overflow: hidden;
	background: var(--c-bg-purple);
}

.type-panel__icon {
	position: absolute;
	top: 428px;
	left: 110px;
	display: grid;
	place-items: center;
	width: 180px;
	height: 180px;
	border-radius: var(--r-m);
	background: var(--c-bg-purple);
}

.type-panel__icon img { width: 144px; height: 144px; }

/* ---------- title, text, stats, button ---------- */
.type-panel__top,
.type-panel__projects,
.type-panel__extra {
	padding-inline: 110px;
}

.type-panel__top {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 32px;
}

.type-panel__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.type-panel__title { font: var(--f-header-l); color: var(--c-text-dark); }

.type-panel__desc { font: var(--f-body-s); color: var(--c-text-dark); }
.type-panel__desc > * + * { margin-top: 16px; }

.type-panel__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.type-panel__stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border-radius: var(--r-m);
	background: var(--c-bg-grey);
}

.type-panel__figure {
	display: flex;
	align-items: center;
	gap: 6px;
	font: var(--f-header-xl);
	color: var(--c-text-dark);
}

.type-panel__stat-icon { --icon-size: 40px; color: var(--c-secondary); }

.type-panel__stat-label { font: var(--f-subtitle-l); color: var(--c-text-dark); }

.type-panel__more {
	align-self: center;
	min-width: 284px;
}

/* ---------- projects ---------- */
.type-panel__projects {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 120px;
}

.type-panel__projects-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.type-panel__projects-title { font: var(--f-header-l); color: var(--c-text-dark); }
.type-panel__see-all { flex: none; font: var(--f-subtitle-l); }

.type-panel__slider { min-width: 0; }
.type-panel__track { margin: 0; }
.type-panel__item { display: flex; }
.type-panel .project-card { width: 266px; }

.type-panel__nav,
.type-panel__see-more { display: none; }

/* ---------- small cost calculator card (as .service-overview__calc) ---------- */
.type-panel__extra {
	display: flex;
	flex-direction: column;
	gap: 120px;
	margin-top: 120px;
}

.type-panel__calc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 32px 20px;
	overflow: hidden;
	border-radius: var(--r-l);
	background-color: #ede7fc;
	background-image:
		repeating-linear-gradient(45deg, #e1d5ff 0 1px, transparent 1px 29px),
		repeating-linear-gradient(-45deg, #e1d5ff 0 1px, transparent 1px 29px);
}

.type-panel__calc > .tag .icon { --icon-size: 12px; }

.type-panel__calc-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.type-panel__calc-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.type-panel__calc-title { font: var(--f-header-l); color: var(--c-text-dark); }
.type-panel__calc-text { font: var(--f-body-xs); color: var(--c-text-grey); }

.type-panel__calc-ask {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.type-panel__calc-question { font: var(--f-header-s); color: var(--c-text-dark); }

.type-panel__calc-buttons {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.type-panel__calc-btn { min-height: 63px; }

.type-panel__calc-full { display: none; }

/* ---------- banner (banner/default "medium", 740x177) ---------- */
.type-panel__banner .container { max-width: none; padding-inline: 0; }
.type-panel__banner .banner__box { padding: 32px 20px; }
.type-panel__banner .banner__content { flex-wrap: nowrap; gap: 24px; }
.type-panel__banner .banner__text { max-width: 372px; }
.type-panel__banner .banner__title { font: var(--f-header-l); }
.type-panel__banner .banner__desc { font: var(--f-body-m); }

@media (max-width: 767px) {
	.project-types__band { padding: calc(var(--header-h) + 16px) 0 20px; }
	.project-types__title { font: var(--f-header-l); }
	.project-types__text { font: var(--f-body-xs); }

	.project-types__models { --model-h: 200px; margin-top: 30px; }
	.project-types__hotspot { display: none; }

	.project-types__segmented { align-self: stretch; margin-top: 30px; }

	.project-types__pills {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 10px;
		align-self: stretch;
		max-width: none;
		margin: 24px calc(-1 * var(--gutter)) 0;
		padding-inline: var(--gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.project-types__pills::-webkit-scrollbar { display: none; }
	.project-types__pills .pill { flex: none; }

	.project-types__slider { margin-top: 25px; }

	.project-types__track {
		flex-direction: column;
		overflow: visible;
		scroll-snap-type: none;
	}

	.project-types__arrows { display: none; }

	.type-card { width: 100%; min-height: 311px; }
	.type-card__image { height: 203px; }
	.type-card__text { padding: 16px 18px 21px; }
	.type-card__title { font: var(--f-header-2xs); }

	/* ---------- panel: full screen (2075:44450) ---------- */
	.type-panel::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
	.type-panel__sheet { width: 100%; padding-bottom: 64px; }
	.type-panel__bar { padding-right: 20px; }
	.type-panel__close { margin-top: 20px; box-shadow: none; }

	.type-panel__media { height: 246px; }
	.type-panel__photo { height: 226px; }
	.type-panel__icon { top: 166px; left: 20px; width: 80px; height: 80px; }
	.type-panel__icon img { width: 64px; height: 64px; }

	.type-panel__top,
	.type-panel__extra { padding-inline: 0; }

	.type-panel__top { gap: 16px; margin-top: 24px; padding-inline: var(--gutter); }
	.type-panel__stats { grid-template-columns: minmax(0, 1fr); }
	.type-panel__stat { min-height: 100px; }
	.type-panel__figure { font: var(--f-header-m); }
	.type-panel__stat-icon { --icon-size: 31px; }
	.type-panel__more { min-width: 0; }

	.type-panel__projects { align-items: center; margin-top: 94px; padding-inline: 0; }
	.type-panel__projects-head { align-self: stretch; padding-inline: var(--gutter); }
	.type-panel__see-all { display: none; }
	.type-panel__slider { display: flex; flex-direction: column; gap: 24px; align-self: stretch; }
	.type-panel__track { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
	.type-panel .project-card { width: 231px; }

	.type-panel__nav {
		display: flex;
		align-items: center;
		gap: 16px;
		padding-inline: var(--gutter);
	}

	.type-panel__counter { font: var(--f-subtitle-m); color: var(--c-text-dark); white-space: nowrap; }

	.type-panel__progress {
		position: relative;
		flex: 1;
		height: 1px;
		background: var(--c-border-light);
	}

	.type-panel__progress::after {
		content: "";
		position: absolute;
		inset: -1px auto -1px 0;
		width: calc(var(--progress, 0) * 100%);
		border-radius: 2px;
		background: var(--c-dark-purple);
		transition: width .2s ease;
	}

	.type-panel__arrows { display: flex; gap: 16px; }
	.type-panel__see-more { display: inline-flex; }

	.type-panel__extra { gap: 94px; margin-top: 94px; }
	.type-panel__calc { display: none; }
	.type-panel__calc-full { display: block; }
	.type-panel__banner .container { padding-inline: var(--gutter); }
	.type-panel__banner .banner__box { padding: 32px 20px; }
	.type-panel__banner .banner__content { flex-wrap: wrap; }
	.type-panel__banner .banner__text { max-width: none; }
	.type-panel__banner .banner__desc { font: var(--f-body-xs); }
}

@media (prefers-reduced-motion: reduce) {
	.type-panel[open] .type-panel__sheet { animation: none; }
}