/**
 * Fenix — styles for: team, FAQ, gallery, text reviews, prices, contacts map.
 * Kept in a separate file so the compiled main.min.css build stays untouched.
 */

:root {
	--fx-accent: #D7162D;
	--fx-accent-gradient: linear-gradient(90deg, #D31027 0%, #EA384D 100%);
	--fx-text: #000;
	--fx-text-muted: #4B4B4B;
	--fx-surface: #fff;
	--fx-surface-alt: #f3f3f3;
	--fx-radius: 1.5rem;
	--fx-duration: .25s;
}

/* The theme's own section rhythm (10rem top+bottom, every section) stacks
   into a lot of dead space once there are this many sections on one page.
   Fluid it down instead of a flat cut, so it still opens up on very wide
   screens but never balloons past 7rem. */
.fx-section {
	padding: clamp(4rem, 3rem + 5vw, 7rem) 0;
}

/* ---------- Gallery heading ---------- */
.gallery .fx-title {
	position: relative;
	margin-bottom: 4.4rem;
	padding-bottom: 1.6rem;
}

.gallery .fx-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 5rem;
	height: .4rem;
	border-radius: 10rem;
	background: var(--fx-accent-gradient);
}

/* The doctor photo (.fx-form__img) and this text column both come from the
   original theme, sized independently per breakpoint. Above ~1390px the
   photo's own breakpoint ladder stops shrinking and sits at its single
   largest fixed size for every wider viewport too, so the clearance this
   text column needs isn't a narrow window — it has to hold from ~1390px
   all the way up. Fluid up to that point, then flat once it does.
   Scoped to >=992px: below that the theme's own ladder already switches
   .fx-form__img to position:static (image stacks above the text instead
   of bleeding beside it), so there's nothing left to clear — applying the
   padding there just eats into the text column for no reason. */
/* Both rules below share one fluid formula (31.25vw + fixed rem), tuned so
   .fx-form__img lands at exactly 52rem at a 1440px viewport (the approved
   size/position) while shrinking toward 992px and capping before it grows
   past that 52rem on ultra-wide screens. The content's padding-left tracks
   the same slope, offset so it always clears the image's right edge
   (max-width - the image's -4rem left pull) plus a small gap — at a fixed
   92rem/52rem pairing this cleared fine at 1440px but the image overran the
   text at ~992-1200px, since neither value scaled with viewport width. */
@media (min-width: 992px) {
	.fx-form--appeal .fx-form__content,
	.fx-form--сommunication .fx-form__content,
	.fx-form--help .fx-form__content {
		padding-left: clamp(36rem, 31.25vw + 5rem, 50rem);
		margin-left: 0;
		max-width: 100%;
	}
}

/* Theme default sits the photo at left:-8rem — it bleeds out past the
   card's own rounded left edge onto the page background instead of sitting
   inside it. Flush with the card's edge instead. The image is also taller
   than the card at this width, so the theme's negative bottom offset lets
   it dangle past both the top AND bottom edges. Pin the bottom flush with
   the card instead — the remaining overflow at the top reads as an
   intentional "photo breaks out of the card" bleed instead of a stray gap
   at the bottom. */
@media (min-width: 992px) {
	.fx-form--appeal .fx-form__img,
	.fx-form--сommunication .fx-form__img,
	.fx-form--help .fx-form__img {
		max-width: clamp(38rem, 31.25vw + 7rem, 52rem);
		left: -4rem;
		bottom: 0;
	}
}

/* The theme ships its own contacts-page-only override —
   .сommunication--contacts .fx-form .fx-form__img at >=1350px (3 classes) —
   left over from before this photo existed there. It outranks the rule
   above (2 classes) by specificity regardless of source order, so on
   /contacts/ the photo silently reverted to the theme's old size/position
   instead of the approved one. Match its specificity so this file's later
   source order actually wins there too. */
@media (min-width: 992px) {
	.сommunication--contacts .fx-form .fx-form__img {
		max-width: clamp(38rem, 31.25vw + 7rem, 52rem);
		left: -4rem;
		bottom: 0;
	}
}

/* doc-1.png / doc-2.png are cut out with a real alpha channel (no baked-in
   white background) and sit on top of .fx-wrap, which is also white — the
   white coat has nothing to contrast against and reads as missing. filter:
   drop-shadow (unlike box-shadow) follows the PNG's own alpha silhouette,
   so it draws a shadow around the doctor's actual outline instead of a flat
   rectangle, separating the photo from the card. */
.fx-form__img {
	filter: drop-shadow(0 1.2rem 2.4rem rgba(0, 0, 0, .16)) drop-shadow(0 0.2rem 0.6rem rgba(0, 0, 0, .12));
}

/* .fx-form__form has its own theme-default 50rem cap — fine when it sits
   next to the paragraph copy above it, but once the content column got
   pushed right (above) the paragraphs still wrap at the column's full
   width while the input/button row stays stuck at 50rem, leaving a wide
   dead strip to its right. Let the row fill the same width as the copy
   above it. */
.fx-form--appeal .fx-form__form,
.fx-form--сommunication .fx-form__form,
.fx-form--help .fx-form__form {
	width: 100%;
	max-width: 100%;
}

/* Hide slick nav (dots/arrows) when there's nothing to actually scroll to —
   a lone dot or a permanently-disabled arrow pair is just clutter. */
.slick-dots:has(> li:only-child) {
	display: none;
}

.team-carousel__list:has(.team-carousel__arrow--prev.slick-disabled):has(.team-carousel__arrow--next.slick-disabled) .team-carousel__arrow {
	display: none;
}

/* ---------- Reviews column labels ---------- */
.reviews__col-label {
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--fx-text-muted);
	margin: 0 0 1.2rem;
}

/* ---------- Director appeal (standalone section) ---------- */
.director-appeal .fx-title--center {
	margin-bottom: 4rem;
}

.director-appeal__grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr .8fr;
	gap: 2.4rem;
	align-items: stretch;
}

/* -- media: video with name/role burned into the frame, matching the
      team-carousel/reviews photo treatment (aspect 3/4, rounded, shadow) -- */
.director-appeal__media {
	aspect-ratio: 3 / 4;
	border-radius: var(--fx-radius);
	overflow: hidden;
	position: relative;
	box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .08);
}

.director-appeal__media a {
	display: block;
	height: 100%;
	position: relative;
}

.director-appeal__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.director-appeal__media svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 9.6rem;
	height: 9.6rem;
	transition: transform var(--fx-duration) ease;
}

.director-appeal__media a:hover svg {
	transform: translate(-50%, -50%) scale(1.08);
}

.director-appeal__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 4rem 1.8rem 1.8rem;
	background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	color: #fff;
	font-family: mtr, sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.3;
}

/* -- perks: elevated surface card, same shadow language as .team__card —
      numbered index (CSS counter) instead of generic plus-icon squares -- */
.director-appeal__perks {
	background: var(--fx-surface);
	border-radius: var(--fx-radius);
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, .06);
	padding: 3rem 3rem 2.6rem;
}

.director-appeal__perks-title {
	font-family: mtr, sans-serif;
	font-weight: 700;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--fx-text);
	margin: 0 0 2.2rem;
}

.director-appeal__perks-list {
	list-style: none;
	counter-reset: perk;
	margin: 0;
	padding: 0;
}

.director-appeal__perks-list li {
	counter-increment: perk;
	display: flex;
	align-items: baseline;
	gap: 1.8rem;
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--fx-surface-alt);
}

.director-appeal__perks-list li:first-child {
	padding-top: 0;
}

.director-appeal__perks-list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.director-appeal__perks-list li::before {
	content: counter(perk, decimal-leading-zero);
	flex: none;
	width: 4rem;
	font-family: mtr, sans-serif;
	font-weight: 900;
	font-size: 2.4rem;
	line-height: 1;
	background: var(--fx-accent-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.director-appeal__perks-list p {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.5;
	color: var(--fx-text-muted);
}

.director-appeal__perks-list strong {
	color: var(--fx-text);
}

/* -- cta: a white "phone screen" inside a red-tinted frame — the device-
      mockup shape (notch + centered logo) from the client's reference, but
      kept on the site's own light-surface palette so red stays an accent
      (button, phone number) instead of a full-bleed fill. -- */
.director-appeal__cta {
	position: relative;
	overflow: hidden;
	background: var(--fx-surface);
	border-radius: 2.4rem;
	border: .3rem solid var(--fx-surface-alt);
	padding: 3rem 2.8rem 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	box-shadow: 0 1.5rem 4rem rgba(215, 22, 45, .14);
}

.director-appeal__cta-notch {
	position: absolute;
	top: 1.4rem;
	left: 50%;
	transform: translateX(-50%);
	width: 6rem;
	height: .5rem;
	border-radius: 1rem;
	background: var(--fx-surface-alt);
}

.director-appeal__cta-logo {
	width: 14rem;
	height: auto;
	margin: 1.6rem 0 2.8rem;
}

.director-appeal__cta-title {
	font-family: mtr, sans-serif;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.3;
	color: var(--fx-text);
	margin: 0 0 1rem;
}

.director-appeal__cta-text {
	font-size: 1.4rem;
	line-height: 1.5;
	color: var(--fx-text-muted);
	margin: 0 0 2.6rem;
}

.director-appeal__cta-button {
	min-width: 0;
	width: 100%;
	height: 5.2rem;
	line-height: 5.2rem;
	padding: 0 2rem;
	margin-bottom: 2rem;
}

.director-appeal__cta-or {
	font-size: 1.3rem;
	color: var(--fx-text-muted);
	margin: 0 0 .6rem;
}

.director-appeal__cta-phone {
	display: inline-block;
	font-family: mtr, sans-serif;
	font-weight: 900;
	font-size: 2.6rem;
	color: var(--fx-accent);
}

@media (max-width: 991px) {
	.director-appeal__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"media perks"
			"cta   cta";
		row-gap: 2.4rem;
	}

	.director-appeal__media { grid-area: media; }
	.director-appeal__perks { grid-area: perks; }
	.director-appeal__cta { grid-area: cta; }
}

@media (max-width: 575px) {
	.director-appeal__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"media"
			"perks"
			"cta";
	}
}

/* -- video lightboxes (inline <video>, opened via data-fancybox) get
      fancybox's default white 24px-padded ".fancybox-content" box, since
      fancybox only strips that for its own "video" slide type (youtube/
      vimeo/html5-url), not inline content. Strip it here so the video
      fills its frame instead of floating in a white letterboxed card. -- */
/* -- the sticky header (.header__holder, z-index 10001) sits inside its own
      stacking context and bleeds through the fancybox dark overlay on some
      viewports even though the overlay's z-index (99993) is nominally
      higher — visible on mobile as undimmed header text over the modal.
      Force it behind whenever any fancybox lightbox is open. -- */
html.fancybox-enabled .header__holder {
	z-index: 1;
}

.fancybox-content:has(video) {
	padding: 0;
	background: #000;
	border-radius: var(--fx-radius);
	overflow: hidden;
}

/* Removing the default content padding above put the close button flush
   against the video's own corner (and off the edge of small screens).
   Float it as an inset circle instead, clear of both. */
.fancybox-slide:has(video) .fancybox-close-small {
	top: 1.2rem;
	right: 1.2rem;
}

.fancybox-slide:has(video) .fancybox-close-small::after {
	background: rgba(255, 255, 255, .92);
	color: #000;
	box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .35);
}

.fancybox-slide:has(video) .fancybox-close-small:hover::after {
	background: #fff;
}

/* -- lead modal (fancybox inline), reuses the site's existing CF7 form -- */
.lead-modal {
	width: 46rem;
	max-width: 90vw;
	padding: 1rem;
}

.lead-modal__title {
	font-family: mtr, sans-serif;
	font-weight: 700;
	font-size: 2rem;
	color: var(--fx-text);
	margin: 0 0 .6rem;
}

.lead-modal__text {
	font-size: 1.4rem;
	color: var(--fx-text-muted);
	margin: 0 0 2rem;
}

/* ---------- Team ---------- */
.team__card {
	background: var(--fx-surface);
	border-radius: var(--fx-radius);
	overflow: hidden;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, .06);
	margin-bottom: 4rem;
	transition: transform var(--fx-duration) ease, box-shadow var(--fx-duration) ease;
}

.team__card:hover {
	transform: translateY(-0.4rem);
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .1);
}

.team__card-photo {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	position: relative;
	background: var(--fx-surface-alt);
}

.team__card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.team__card-body {
	padding: 2rem 2.4rem 2.6rem;
}

.team__card-name {
	font-family: mtr, sans-serif;
	font-weight: 700;
	font-size: 1.8rem;
	margin: 0 0 .4rem;
	color: var(--fx-text);
}

.team__card-role {
	color: var(--fx-accent);
	font-size: 1.4rem;
	font-weight: 600;
	margin: 0 0 .8rem;
}

.team__card-bio {
	color: var(--fx-text-muted);
	font-size: 1.4rem;
	line-height: 1.5;
	margin: 0;
}

.team__card-play {
	position: absolute;
	inset: 0;
	display: block;
}

.team__card-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	background: var(--fx-accent-gradient);
	transform: translate(-50%, -50%);
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .25);
}

.team__card-play-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 55%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 1rem 0 1rem 1.6rem;
	border-color: transparent transparent transparent #fff;
}

/* ---------- FAQ ---------- */
.faq__accordion {
	max-width: 90rem;
	margin: 0 auto;
}

.faq__item {
	border-bottom: 1px solid #eee;
}

.faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 2.2rem 0;
	background: none;
	border: 0;
	text-align: left;
	font-family: mtr, sans-serif;
	font-weight: 600;
	font-size: 1.7rem;
	color: var(--fx-text);
	cursor: pointer;
}

.faq__question-icon {
	position: relative;
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	transition: transform var(--fx-duration) ease;
}

.faq__question-icon::before,
.faq__question-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--fx-accent);
	transform: translate(-50%, -50%);
}

.faq__question-icon::before {
	width: 100%;
	height: 2px;
}

.faq__question-icon::after {
	width: 2px;
	height: 100%;
	transition: opacity var(--fx-duration) ease;
}

.faq__question[aria-expanded="true"] .faq__question-icon {
	transform: rotate(180deg);
}

.faq__question[aria-expanded="true"] .faq__question-icon::after {
	opacity: 0;
}

.faq__answer p {
	padding: 0 0 2.2rem;
	margin: 0;
	color: var(--fx-text-muted);
	line-height: 1.6;
}

/* ---------- Gallery ---------- */
/* A uniform 4-up grid of identical square crops is the flattest possible
   read of a facility tour — every photo given equal weight regardless of
   what it shows. A repeating bento rhythm (one tile doubled in both
   directions, one doubled in width, four plain) gives a couple of photos
   room to breathe without needing per-image metadata from the CMS — the
   pattern just repeats every 6 items via :nth-child, so it still looks
   intentional whether the gallery has 6 photos or 30. Kept to a plain
   uniform square grid below desktop, where big spans get cramped. */
.gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.6rem;
}

.gallery__item {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--fx-radius);
	overflow: hidden;
	cursor: zoom-in;
}

.gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.gallery__item:hover img {
	transform: scale(1.06);
}

/* The bento pattern below (first tile 2x2, every 6n+4 tile wide) was tuned
   for a handful of curated demo images with matching orientations. With the
   client's real facility photos — a mix of portrait rooms and landscape
   exteriors of varying counts — the same span rules produced odd, unbalanced
   rows (one tile ballooning across the full width while its row-mates
   shrink). A uniform grid reads as "a gallery of photos" regardless of how
   many photos or what orientation they come in — safer default for
   real, uncurated content. */
@media (max-width: 991px) {
	.gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
	.gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

.gallery__item--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	background: var(--fx-surface-alt);
	border: 1px dashed #cfcfcf;
}

.gallery__item-icon {
	width: 3.2rem;
	height: 3.2rem;
	border: 2px solid #b8b8b8;
	border-radius: .4rem;
	position: relative;
}

.gallery__item-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.4rem;
	height: 1.4rem;
	border: 2px solid #b8b8b8;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.gallery__item-label {
	font-size: 1.2rem;
	color: var(--fx-text-muted);
}

.team__card-photo-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #ececec 25%, #e2e2e2 25%, #e2e2e2 50%, #ececec 50%, #ececec 75%, #e2e2e2 75%, #e2e2e2 100%);
	background-size: 2.4rem 2.4rem;
}

/* ---------- Text reviews ---------- */
.reviews__text-list {
	margin-top: 4rem;
}

.reviews__text-item {
	background: var(--fx-surface-alt);
	border-radius: var(--fx-radius);
	padding: 2.4rem;
	margin-bottom: 2rem;
	height: calc(100% - 2rem);
}

.reviews__text-item-text {
	font-size: 1.5rem;
	line-height: 1.6;
	color: var(--fx-text);
	margin: 0 0 1.6rem;
}

.reviews__text-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1rem;
	font-size: 1.3rem;
	color: var(--fx-text-muted);
}

.reviews__text-item-name {
	font-weight: 700;
	color: var(--fx-text);
}

/* Two-up slider (slidesToShow:2), same proportions as .reviews__list next to it,
   so the portrait 9:16 client videos crop cleanly instead of being forced into
   the old single full-width slide (landscape-ish box fighting a tall image). */
.reviews__videos {
	margin-left: -.5rem;
	margin-right: -.5rem;
}

.reviews__videos-item {
	aspect-ratio: 3 / 4;
	padding: 0 .5rem;
}

.reviews__videos-item img {
	height: 100%;
	object-fit: cover;
}

.reviews__videos .slick-dots {
	position: static;
	display: flex;
	justify-content: center;
	gap: .6rem;
	margin-top: 1.6rem;
	padding: 0;
	list-style: none;
}

.reviews__videos .slick-dots li {
	flex: none;
}

.reviews__videos .slick-dots li button {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	font-size: 0;
	border: 0;
	padding: 0;
	background: var(--fx-surface-alt);
	transition: background var(--fx-duration) ease, transform var(--fx-duration) ease;
}

.reviews__videos .slick-dots li.slick-active button {
	background: var(--fx-accent-gradient);
	transform: scale(1.2);
}

.reviews__list-item {
	aspect-ratio: 3 / 4;
}

.reviews__list-item img {
	height: 100%;
	object-fit: cover;
}

.reviews__videos-name {
	font-size: 1.3rem;
	color: var(--fx-text-muted);
	margin: 1rem 0 0;
	text-align: center;
}

/* ---------- Services (image + title + price, one elevated card) ---------- */
.services__card {
	display: block;
	background: var(--fx-surface);
	border-radius: var(--fx-radius);
	overflow: hidden;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, .06);
	margin-bottom: 4rem;
	transition: transform var(--fx-duration) ease, box-shadow var(--fx-duration) ease;
}

.services__card:hover,
.services__card:focus-visible {
	transform: translateY(-.4rem);
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .1);
	text-decoration: none;
}

.services__card-image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.services__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.services__card:hover .services__card-image img {
	transform: scale(1.05);
}

.services__card-tags {
	position: absolute;
	left: 1.6rem;
	bottom: 1.6rem;
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
}

.services__card-tag {
	padding: .5rem 1.2rem;
	border-radius: 10rem;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--fx-text);
}

.services__card-body {
	padding: 2.2rem 2.4rem 2.4rem;
}

.services__card-title {
	font-family: mtr, sans-serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.25;
	color: var(--fx-text);
	margin: 0 0 .8rem;
}

.services__card-desc {
	font-size: 1.4rem;
	line-height: 1.55;
	color: var(--fx-text-muted);
	margin: 0 0 2rem;
}

.services__card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--fx-surface-alt);
}

.services__card-price {
	font-family: mtr, sans-serif;
	font-weight: 700;
	font-size: 1.7rem;
	color: var(--fx-accent);
}

.services__card-cta {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--fx-text-muted);
	white-space: nowrap;
	transition: color var(--fx-duration) ease, gap var(--fx-duration) ease;
}

.services__card-cta::after {
	content: '→';
	transition: transform var(--fx-duration) ease;
}

.services__card:hover .services__card-cta {
	color: var(--fx-accent);
}

.services__card:hover .services__card-cta::after {
	transform: translateX(.3rem);
}

/* ---------- Team carousel (dedicated Slick instance, .team-carousel__list) ---------- */
.team-carousel .fx-title { margin-bottom: 3rem; }

.team-carousel__list {
	position: relative;
	margin: 0 -1rem;
}

.team-carousel__item {
	padding: 0 1rem;
}

.team-carousel__card {
	background: var(--fx-surface);
	border-radius: var(--fx-radius);
	overflow: hidden;
	box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .08);
	transition: transform var(--fx-duration) ease, box-shadow var(--fx-duration) ease;
}

.team-carousel__card:hover {
	transform: translateY(-0.4rem);
	box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .14);
}

.team-carousel__photo {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	position: relative;
	background: var(--fx-surface-alt);
}

.team-carousel__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.team-carousel__body {
	padding: 1.8rem 2rem 2.2rem;
}

.team-carousel__name {
	font-family: mtr, sans-serif;
	font-weight: 700;
	font-size: 1.6rem;
	margin: 0 0 .3rem;
	color: var(--fx-text);
}

.team-carousel__role {
	color: var(--fx-accent);
	font-size: 1.3rem;
	font-weight: 600;
	margin: 0;
}

/* Branded circular arrows (same red-gradient FAB look as the phone/scroll-top buttons) */
.team-carousel__arrow {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	width: 4.6rem;
	height: 4.6rem;
	border-radius: 50%;
	background: var(--fx-accent-gradient);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1rem 2.4rem rgba(215, 22, 45, .3);
	cursor: pointer;
	z-index: 2;
	transition: transform var(--fx-duration) ease, box-shadow var(--fx-duration) ease, opacity var(--fx-duration) ease;
}

.team-carousel__arrow:hover {
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 1.4rem 3rem rgba(215, 22, 45, .42);
}

/* main.css's generic .slick-arrow::before (icomoon glyph, same icon both
   directions) leaks onto any element Slick tags with .slick-arrow - kill it
   so only our own SVG chevron shows. */
.team-carousel__arrow::before {
	content: none;
}

.team-carousel__arrow svg {
	width: 1.7rem;
	height: 1.7rem;
	fill: none;
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.team-carousel__arrow--prev { left: .5rem; }
.team-carousel__arrow--next { right: .5rem; }

.team-carousel__arrow.slick-disabled {
	opacity: .35;
	pointer-events: none;
	box-shadow: none;
}

.team-carousel .slick-dots {
	position: static;
	display: flex;
	justify-content: center;
	gap: .6rem;
	margin-top: 3rem;
	padding: 0;
	list-style: none;
}

.team-carousel .slick-dots li {
	flex: none;
}

.team-carousel .slick-dots li button {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	font-size: 0;
	border: 0;
	padding: 0;
	background: var(--fx-surface-alt);
	transition: background var(--fx-duration) ease, transform var(--fx-duration) ease;
}

.team-carousel .slick-dots li.slick-active button {
	background: var(--fx-accent-gradient);
	transform: scale(1.2);
}

@media (max-width: 575px) {
	.team-carousel__arrow { display: none; }
}

/* ---------- Certificates carousel — same recipe as .team-carousel above,
   scans instead of portraits so the crop is taller/looser (contain, not
   cover) and there's no name/role block, just an optional caption. ---------- */
.certificates-carousel .fx-title { margin-bottom: 3rem; }

.certificates-carousel__list {
	position: relative;
	margin: 0 -1rem;
}

.certificates-carousel__item {
	padding: 0 1rem;
}

.certificates-carousel__card {
	background: var(--fx-surface);
	border-radius: var(--fx-radius);
	overflow: hidden;
	box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .08);
	transition: transform var(--fx-duration) ease, box-shadow var(--fx-duration) ease;
}

.certificates-carousel__card:hover {
	transform: translateY(-0.4rem);
	box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .14);
}

.certificates-carousel__card a {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	position: relative;
	background: var(--fx-surface-alt);
}

.certificates-carousel__card img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.certificates-carousel__label {
	padding: 1.2rem 1.6rem 1.6rem;
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--fx-text-muted);
	text-align: center;
}

.certificates-carousel__arrow {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	width: 4.6rem;
	height: 4.6rem;
	border-radius: 50%;
	background: var(--fx-accent-gradient);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1rem 2.4rem rgba(215, 22, 45, .3);
	cursor: pointer;
	z-index: 2;
	transition: transform var(--fx-duration) ease, box-shadow var(--fx-duration) ease, opacity var(--fx-duration) ease;
}

.certificates-carousel__arrow:hover {
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 1.4rem 3rem rgba(215, 22, 45, .42);
}

.certificates-carousel__arrow::before {
	content: none;
}

.certificates-carousel__arrow svg {
	width: 1.7rem;
	height: 1.7rem;
	fill: none;
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.certificates-carousel__arrow--prev { left: .5rem; }
.certificates-carousel__arrow--next { right: .5rem; }

.certificates-carousel__arrow.slick-disabled {
	opacity: .35;
	pointer-events: none;
	box-shadow: none;
}

.certificates-carousel .slick-dots {
	position: static;
	display: flex;
	justify-content: center;
	gap: .6rem;
	margin-top: 3rem;
	padding: 0;
	list-style: none;
}

.certificates-carousel .slick-dots li {
	flex: none;
}

.certificates-carousel .slick-dots li button {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	font-size: 0;
	border: 0;
	padding: 0;
	background: var(--fx-surface-alt);
	transition: background var(--fx-duration) ease, transform var(--fx-duration) ease;
}

.certificates-carousel .slick-dots li.slick-active button {
	background: var(--fx-accent-gradient);
	transform: scale(1.2);
}

@media (max-width: 575px) {
	.certificates-carousel__arrow { display: none; }
}

/* ---------- Contacts map ---------- */
.contacts__map {
	margin-top: 3rem;
	border-radius: var(--fx-radius);
	overflow: hidden;
	line-height: 0;
}

.contacts__map iframe {
	display: block;
	width: 100%;
}

.contacts__map-caption {
	display: flex;
	align-items: center;
	gap: .8rem;
	line-height: 1.4;
	padding: 1.6rem 2rem;
	background: var(--fx-surface-alt);
	font-size: 1.5rem;
}

.contacts__map-caption .lt-ico-location {
	color: var(--fx-accent);
	font-size: 1.8rem;
	flex-shrink: 0;
}

.contacts__map-caption a {
	color: var(--fx-text);
}

.contacts__map-caption a:hover {
	color: var(--fx-accent);
}

/* ---------- Phone group (two numbers stacked) ---------- */
/* main.css stacks the 2nd phone number with position:absolute + width:103%
   relative to the .group container. That container used to have enough
   room, but the new "Графік роботи" column added this session (item 8)
   takes space out of the same row, so .group can collapse to a few px and
   the absolute-positioned number wraps character-by-character. Force a
   simple, robust stacked-column layout instead of relying on that hack. */
.contacts__item--group .group {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.contacts__item--group .group a,
.contacts__item--group .group a:last-child {
	position: static !important;
	width: auto !important;
	white-space: nowrap;
}