/* Service page template (S16): hero with its drawing, kinds, steps, why us, questions, other services. */

.shero {
	position: relative;
	overflow: clip;
	padding-block: calc(var(--hdr-h) + var(--sp-32)) var(--sp-64);
	background:
		radial-gradient(55% 60% at 78% 30%, color-mix(in srgb, var(--pa) 30%, transparent), transparent 70%),
		var(--bg);
}

.shero::before {
	content: "";
	position: absolute;
	inset: 0 var(--rail);
	border-inline: var(--hairline) solid var(--ln);
	pointer-events: none;
}

.shero-g {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--margin);
	align-items: center;
}

.shero-t {
	display: grid;
	gap: 22px;
	justify-items: start;
	min-inline-size: 0;
}

.shero-t .d2 {
	font-size: clamp(36px, 5vw, 80px);
}

.shero-t .lead {
	max-inline-size: 40ch;
	color: var(--fg2);
}

.shero-id {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	color: var(--fg2);
}

.shero .tag {
	border-color: var(--pa);
	color: var(--pt);
}

.shero-art {
	display: grid;
	gap: 14px;
	justify-items: center;
	margin: 0;
	min-inline-size: 0;
}

.shero-art .art {
	block-size: clamp(240px, 30vw, 420px);
}

.shero-art figcaption {
	min-block-size: 2.6em;
	text-align: center;
	color: var(--fg2);
	font-size: var(--fs-s);
}

.shero-art .nd {
	cursor: pointer;
	outline: none;
}

.shero-art .nd:hover rect,
.shero-art .nd:focus-visible rect {
	stroke: var(--pt);
	stroke-width: 2.4;
}

.shero-art .nd:focus-visible rect {
	stroke: var(--focus);
}

/* sections */
.skinds,
.ssteps,
.swhy,
.sfaq,
.sother,
.rqs {
	padding-block: var(--sec);
}

.kinds {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: clamp(32px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--hairline) solid var(--ln-s);
}

.kinds li {
	display: grid;
	align-content: start;
	gap: 12px;
	min-block-size: 220px;
	padding: clamp(20px, 2.2vw, 34px);
	border-inline-start: var(--hairline) solid var(--ln-s);
	border-block-end: var(--hairline) solid var(--ln-s);
}

.kinds li:nth-child(3n) {
	border-inline-end: var(--hairline) solid var(--ln-s);
}

.kinds i,
.fsteps i {
	color: var(--hi);
	font-style: normal;
}

.kinds h3,
.fsteps h3 {
	font-size: clamp(20px, 1.9vw, 30px);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 1.1;
}

.kinds h3 strong,
.fsteps h3 strong {
	font-weight: 800;
}

.kinds p,
.fsteps p {
	max-inline-size: 34ch;
	color: var(--fg2);
	font-size: 15px;
}

.fsteps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: clamp(32px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
	border-block: var(--hairline) solid var(--ln-s);
}

.fsteps li {
	position: relative;
	display: grid;
	align-content: start;
	gap: 12px;
	min-block-size: 260px;
	padding: clamp(18px, 1.6vw, 26px);
	border-inline-start: var(--hairline) solid var(--ln-s);
}

.fsteps li:last-child {
	border-inline-end: var(--hairline) solid var(--ln-s);
}

/* questions */
.fq {
	margin-block-start: clamp(28px, 4vw, 52px);
	border-block-start: var(--hairline) solid var(--ln-s);
}

.fq h3 {
	font-size: inherit;
	font-weight: inherit;
}

.fq button {
	inline-size: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 22px 0;
	background: none;
	border: 0;
	border-block-end: var(--hairline) solid var(--ln-s);
	color: inherit;
	cursor: pointer;
	text-align: start;
	font: inherit;
	font-size: clamp(18px, 1.7vw, 26px);
	font-weight: 300;
	letter-spacing: -0.02em;
	transition: color 0.3s;
}

.fq button:hover {
	color: var(--highlight);
}

.fq .pm2 {
	flex: none;
	position: relative;
	inline-size: 22px;
	block-size: 22px;
}

.fq .pm2::before,
.fq .pm2::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 10px;
	block-size: 2px;
	background: currentcolor;
	transition: transform 0.5s var(--ease);
}

.fq .pm2::after {
	transform: rotate(90deg);
}

.fq button[aria-expanded="true"] .pm2::after {
	transform: rotate(0);
}

.fq .fa > div {
	overflow: hidden;
}

.fq .fa p {
	max-inline-size: 62ch;
	padding-block: 4px 24px;
	color: var(--fg2);
}

.fq[data-ready] .fa {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.6s var(--ease);
}

.fq[data-ready] h3:has(button[aria-expanded="true"]) + .fa {
	grid-template-rows: 1fr;
}

.rm .fq .fa,
.rm .fq .pm2::before,
.rm .fq .pm2::after {
	transition: none;
}

/* other services */
.others {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	margin: clamp(32px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--hairline) solid var(--ln-s);
}

.others a {
	display: flex;
	align-items: center;
	gap: 14px;
	min-block-size: 64px;
	padding: 14px 18px;
	border-block-end: var(--hairline) solid var(--ln-s);
	border-inline-start: var(--hairline) solid var(--ln-s);
	transition: color 0.3s, border-color 0.3s;
}

.others a:hover,
.others a:focus-visible {
	color: var(--pt);
	border-inline-start-color: var(--pt);
}

.others a span {
	flex: 1;
}

.others a b {
	color: var(--fg2);
	font-weight: 500;
}

.others .arr {
	inline-size: 18px;
	block-size: 18px;
}

html[dir="rtl"] .others .arr {
	transform: scaleX(-1);
}

@media (max-width: 1000px) {
	.shero-g {
		grid-template-columns: 1fr;
	}

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

	.kinds li:nth-child(3n) {
		border-inline-end: 0;
	}

	.kinds li:nth-child(2n) {
		border-inline-end: var(--hairline) solid var(--ln-s);
	}

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

	.fsteps li {
		min-block-size: 0;
		border-inline-end: var(--hairline) solid var(--ln-s);
	}

	.fsteps li + li {
		border-block-start: var(--hairline) solid var(--ln-s);
	}
}

@media (max-width: 600px) {
	.kinds {
		grid-template-columns: 1fr;
	}

	.kinds li:nth-child(n) {
		min-block-size: 0;
		border-inline-end: var(--hairline) solid var(--ln-s);
	}
}