/* ==== BUTTONS ==== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);

	min-height: 52px;
	padding: 0 var(--s-5);

	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;

	background: transparent;
	border: 1px solid var(--c-tobacco);
	border-radius: 999px;
	color: var(--c-text);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
	background: #b8794a1f;
	border-color: var(--c-text);
	color: var(--c-text);
}

.btn-s {
	min-height: 44px;
	padding: 0 var(--s-4);

	font-size: 0.9rem;
}

.act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3) var(--s-5);
}

.tel {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;

	min-height: 52px;

	line-height: 1.2;
	text-decoration: none;
}

.tel small {
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;

	color: var(--c-muted);
}

.tel b {
	font-family: "Parkinsans", "Parkinsans Fallback", Arial, sans-serif;
	font-size: 1.15rem;
}

.chps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);

	list-style: none;
}

.chp {
	display: inline-flex;
	align-items: center;

	padding: var(--s-1) var(--s-3);

	font-size: 0.85rem;

	border: 1px solid var(--c-line);
	border-radius: 999px;
	color: var(--c-muted);
}

/* ==== PASSE-PARTOUT ==== */
.mat {
	padding: var(--s-3);

	background: var(--c-mat);
	border: 1px solid var(--c-line);
	box-shadow: 0 10px 28px -12px #000000b3;
	color: var(--c-bg-2);
}

.mat img {
	width: 100%;
	max-height: clamp(260px, 56vh, 560px);

	object-fit: cover;
	outline: 1px solid #1a1c201f;
}

.mat figcaption {
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);

	padding-top: var(--s-3);

	font-size: 0.8rem;
	line-height: 1.35;
}

.mat .fig {
	color: var(--c-tobacco-2);
}

.mat-w {
	max-width: 560px;
	margin-top: var(--s-5);
}

/* ==== HERO ==== */
.hr {
	padding-top: var(--s-6);
	padding-bottom: var(--s-7);
}

.hr-g {
	display: grid;
	gap: var(--s-6);
}

.hr h1 {
	max-width: 14ch;
	margin-bottom: var(--s-4);

	font-size: clamp(2.5rem, 1.1rem + 4.6vw, 4.5rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.025em;
}

.hr .lead {
	margin-bottom: var(--s-5);
}

.hr-m {
	order: 2;

	display: grid;
	align-content: start;
}

.hr-m div {
	display: grid;
	gap: 2px;

	padding: var(--s-3) 0;

	border-top: 1px solid var(--c-line);
}

.hr-m dt {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;

	color: var(--c-muted);
}

.hr-m dd {
	font-family: "Parkinsans", "Parkinsans Fallback", Arial, sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
}

.strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 76%;
	gap: var(--s-4);

	margin-top: var(--s-6);
	padding-bottom: calc(var(--s-lift) + var(--s-2));
	overflow-x: auto;

	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--c-tobacco) transparent;
}

.strip li {
	min-width: 0;

	scroll-snap-align: start;
}

.strip img {
	aspect-ratio: 4 / 3;
}

/* ==== ANATOMY MAP ==== */
.am-g {
	display: grid;
	gap: var(--s-6);
}

.am-m {
	width: 100%;
	max-width: 620px;
}

.am-f {
	position: relative;
}

.am-f img {
	max-height: none;
}

.am-p {
	position: absolute;

	width: 44px;
	height: 44px;

	font-size: 0.85rem;
	font-weight: 700;

	background: var(--c-bg);
	border: 1px solid var(--c-tobacco);
	border-radius: 50%;
	box-shadow: 0 0 0 5px #1a1c2040;
	color: var(--c-text);
	cursor: pointer;
	translate: -50% -50%;
}

.am-p[aria-pressed="true"] {
	background: var(--c-tobacco);
	color: var(--c-bg);
}

.am-l {
	display: grid;

	list-style: none;
	border-top: 1px solid var(--c-line);
}

.am-l li {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--s-3);

	padding: var(--s-3) var(--s-3) var(--s-3) 0;

	border-bottom: 1px solid var(--c-line);
	border-left: 2px solid transparent;
	transition: background-color 0.2s ease, padding 0.2s ease;
}

.am-l li.open {
	padding-left: var(--s-3);

	background: var(--c-bg-2);
	border-left-color: var(--c-tobacco);
}

.am-l .fig {
	font-size: 1.3rem;
}

.am-l p {
	font-size: 0.95rem;

	color: var(--c-muted);
}

/* ==== PLAYBILL ==== */
.pb {
	border-top: 1px solid var(--c-line);
}

.pb-r {
	border-bottom: 1px solid var(--c-line);
}

.pb-r summary {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	gap: var(--s-1) var(--s-4);

	min-height: 92px;
	padding: var(--s-4) 0;

	list-style: none;
	cursor: pointer;
}

.pb-r summary::-webkit-details-marker {
	display: none;
}

.pb-n {
	font-size: 1.3rem;
}

.pb-t {
	font-family: "Parkinsans", "Parkinsans Fallback", Arial, sans-serif;
	font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
	font-weight: 800;
	line-height: 1.1;
}

.pb-s {
	grid-column: 2;

	font-size: 0.92rem;

	color: var(--c-muted);
}

.pb-i {
	grid-column: 3;
	grid-row: 1;

	display: grid;
	place-items: center;

	width: 44px;
	height: 44px;

	font-size: 1.4rem;

	border: 1px solid var(--c-line);
	border-radius: 50%;
	transition: rotate 0.25s ease;
}

.pb-r[open] .pb-i {
	border-color: var(--c-tobacco);
	rotate: 45deg;
}

.pb-c {
	display: grid;
	gap: var(--s-5);

	padding-bottom: var(--s-6);
}

.sp {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.sp dt,
.sp dd {
	padding: var(--s-2) 0;

	border-top: 1px solid var(--c-line);
}

.sp dt {
	padding-right: var(--s-3);

	font-size: 0.85rem;

	color: var(--c-muted);
}

.mono {
	display: grid;
	place-items: center;

	min-height: 220px;
	padding: var(--s-5);

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(3rem, 2rem + 4vw, 5rem);
	font-style: italic;
	letter-spacing: 0.12em;

	background: var(--c-bg);
	border: 1px solid var(--c-line);
	color: var(--c-tobacco);
}

/* ==== FABRICS ==== */
.fab {
	display: grid;
	gap: var(--s-5);

	list-style: none;
}

.crd {
	padding: var(--s-5);

	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: 10px;
	box-shadow: 0 10px 28px -12px #000000b3;
}

.crd h3 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);

	margin-bottom: var(--s-3);
}

.crd h3 .fig {
	font-size: 0.95rem;
	font-weight: 400;
}

.crd > p {
	margin-bottom: var(--s-3);

	font-size: 0.95rem;

	color: var(--c-muted);
}

.nt {
	max-width: 70ch;
	margin-top: calc(var(--s-lift) + var(--s-4));

	font-size: 0.9rem;

	color: var(--c-muted);
}

/* ==== STEPS ==== */
.stp {
	display: grid;
	gap: var(--s-4);

	list-style: none;
}

.stp li {
	display: grid;
	align-content: start;
	gap: var(--s-2);

	padding: var(--s-5) var(--s-4);

	border: 1px solid var(--c-line);
}

.stp .fig {
	font-size: 2.8rem;
	line-height: 1;
}

.stp p {
	color: var(--c-muted);
}

/* ==== CTA ==== */
.cta {
	display: grid;
	gap: var(--s-5);

	padding: var(--s-6) var(--s-5);

	border: 1px solid var(--c-tobacco-2);
	box-shadow: 0 10px 28px -12px #000000b3;
}

.cta-p {
	font-family: "Parkinsans", "Parkinsans Fallback", Arial, sans-serif;
	font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem);
	font-weight: 800;
	line-height: 1.05;
}

/* ==== REVEAL ==== */
.rv-on .rv {
	opacity: 0;

	translate: 0 18px;
	transition: opacity 0.6s ease, translate 0.6s ease;
}

.rv-on .rv.shown {
	opacity: 1;

	translate: 0 0;
}

/* ==== SERVICE PAGE ==== */
.tw {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-5);

	padding-bottom: var(--s-7);
}

.toc {
	padding-top: var(--s-5);
}

.toc ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);

	list-style: none;
}

.toc a {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);

	min-height: 44px;
	padding: 0 var(--s-4);

	font-size: 0.92rem;
	text-decoration: none;

	border: 1px solid var(--c-line);
	border-radius: 999px;
}

.ts {
	padding-top: var(--s-6);
	padding-bottom: var(--s-4);

	border-top: 1px solid var(--c-line);
}

.ts:first-child {
	border-top: 0;
}

.ts h2 {
	margin-bottom: var(--s-3);
}

.ts > p {
	max-width: 66ch;
	margin-bottom: var(--s-5);

	color: var(--c-muted);
}

.mds {
	display: grid;
	gap: 0 var(--s-5);

	list-style: none;
}

.mds li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: var(--s-2);

	padding: var(--s-2) 0;

	border-top: 1px solid var(--c-line);
}

.tbl {
	overflow-x: auto;

	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	scrollbar-width: thin;
	scrollbar-color: var(--c-tobacco) transparent;
}

.tbl table {
	width: 100%;
	min-width: 600px;

	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;

	border-collapse: collapse;
}

.tbl caption {
	padding: var(--s-3) var(--s-4);

	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-align: left;
	text-transform: uppercase;

	color: var(--c-muted);
}

.tbl th,
.tbl td {
	padding: var(--s-3) var(--s-4);

	text-align: left;
	vertical-align: top;

	border-top: 1px solid var(--c-line);
}

.tbl thead th {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;

	color: var(--c-muted);
}

.gr {
	display: grid;
	gap: var(--s-4);

	list-style: none;
}

.prc {
	display: block;

	margin-bottom: var(--s-2);

	font-family: "Parkinsans", "Parkinsans Fallback", Arial, sans-serif;
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1;
}

/* ==== STUDIO ==== */
.es-g {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: var(--s-6);
}

.es-g h2 {
	margin-bottom: var(--s-4);
}

.es-c {
	margin-top: var(--s-5);
}

/* ==== LEGAL ==== */
.lgl {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-4);

	padding-top: var(--s-6);
	padding-bottom: var(--s-7);

	list-style: none;
}

.cl {
	padding: var(--s-5);

	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: 10px;
}

.cl h2 {
	display: flex;
	align-items: baseline;
	gap: var(--s-3);

	margin-bottom: var(--s-3);

	font-size: 1.3rem;
	line-height: 1.25;
}

.cl ul {
	display: grid;
	gap: var(--s-1);

	margin-top: var(--s-3);
	padding-left: var(--s-4);
}

.cl-w {
	background: var(--c-tint);
	border-color: var(--c-tobacco-2);
}

/* ==== CONTACT ==== */
.ct {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6);

	padding-top: var(--s-6);
	padding-bottom: var(--s-7);
}

.frm {
	padding: var(--s-5);

	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: 10px;
	box-shadow: 0 10px 28px -12px #000000b3;
}

.frm h2 {
	margin-bottom: var(--s-4);

	font-size: 1.6rem;
}

.fld {
	display: grid;
	gap: 6px;

	margin-bottom: var(--s-4);
}

.fld label {
	font-size: 0.92rem;
	font-weight: 600;
}

.fld input {
	min-height: 52px;
	padding: 0 var(--s-4);

	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: 6px;
}

.fld input:focus-visible {
	border-color: var(--c-tobacco);
}

.chk {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: var(--s-3);

	margin-bottom: var(--s-4);

	font-size: 0.92rem;

	color: var(--c-muted);
}

.chk input {
	width: 22px;
	height: 22px;
	margin: 2px 0 0;

	accent-color: var(--c-tobacco);
}

.hp {
	position: absolute;
	left: -9999px;

	width: 1px;
	height: 1px;
	overflow: hidden;
}

.msg {
	margin-top: var(--s-3);
	padding-left: var(--s-3);

	font-size: 0.92rem;

	border-left: 2px solid var(--c-tobacco);
}

.msg:empty {
	display: none;
}

.rq {
	display: grid;
	align-content: start;
	gap: var(--s-5);
}

.rq .cl-w {
	order: -1;
}

.big {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(5rem, 3rem + 8vw, 9rem);
	font-style: italic;
	line-height: 1;

	color: var(--c-tobacco);
}

/* ==== COOKIE PILL ==== */
.cc-pill {
	position: fixed;
	right: var(--s-3);
	bottom: var(--s-3);
	left: var(--s-3);
	z-index: 85;

	display: grid;
	gap: var(--s-3);

	padding: var(--s-4);

	font-size: 0.88rem;
	line-height: 1.45;

	background: var(--c-bg-2);
	border: 1px solid var(--c-tobacco-2);
	border-radius: 18px;
	box-shadow: 0 10px 28px -12px #000000b3;
}

.cc-pill[hidden] {
	display: none;
}

.cc-b {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

/* ==== WIDE ==== */
@media (min-width: 600px) {
	.mds {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 720px) {
	.strip {
		grid-auto-columns: 46%;
	}

	.fab,
	.gr {
		grid-template-columns: 1fr 1fr;
	}

	.stp {
		grid-template-columns: 1fr 1fr;
	}

	.cc-pill {
		left: auto;

		max-width: 460px;
	}
}

@media (min-width: 1000px) {
	.hr-g {
		grid-template-columns: 3fr 9fr;
	}

	.hr-m {
		order: 0;

		padding-top: var(--s-7);
	}

	.hr-c {
		padding-left: var(--s-6);
	}

	.strip {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));

		overflow: visible;
	}

	.strip li:nth-child(even) {
		margin-top: var(--s-5);
	}

	.am-g {
		grid-template-columns: 7fr 5fr;
		align-items: center;
	}

	.pb-c {
		grid-template-columns: 5fr 7fr;
		align-items: start;
	}

	.fab {
		grid-template-columns: repeat(3, minmax(0, 1fr));

		padding-bottom: calc(var(--s-step) * 2);
	}

	.fab li:nth-child(3n + 2) {
		translate: 0 var(--s-step);
	}

	.fab li:nth-child(3n) {
		translate: 0 calc(var(--s-step) * 2);
	}

	.stp {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.stp li:nth-child(odd) {
		margin-top: var(--s-6);
	}

	.cta {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;

		padding: var(--s-7) var(--s-6);
	}

	.tw {
		grid-template-columns: 250px minmax(0, 1fr);
		gap: var(--s-7);
	}

	.toc {
		position: sticky;
		top: calc(var(--s-bar) + var(--s-5));

		align-self: start;
	}

	.toc ol {
		display: grid;
		gap: 0;

		border-top: 1px solid var(--c-line);
	}

	.toc a {
		display: flex;

		padding: 0;

		border: 0;
		border-bottom: 1px solid var(--c-line);
		border-radius: 0;
	}

	.gr-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lgl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.es-g {
		grid-template-columns: 6fr 5fr;
	}

	.es-r {
		grid-template-columns: 5fr 6fr;
	}

	.cl-w {
		grid-column: 1 / -1;
	}

	.ct {
		grid-template-columns: 7fr 5fr;
		align-items: start;
		gap: var(--s-7);
	}

	.rq .cl-w {
		order: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.btn,
	.am-l li,
	.pb-i,
	.rv-on .rv {
		transition: none;
	}
}