/* ==========================================================================
   Automora Stack Cards (automora-stack-cards)
   Sticky stacking cards: "Service folder" and "Case study" styles.
   Controls write CSS variables on .am-sc; the per-style defaults live here.
   ========================================================================== */

:where(.e-con, .e-con-inner) > .elementor-widget-automora-stack-cards { width: 100%; }

.am-sc {
	--am-sc-pos: sticky;
	--am-sc-top: 120px;
	--am-sc-peek: 64px;
	--am-sc-gap: 24px;
	--am-sc-cols: 1;
	--am-sc-bg: var(--am-w-card, #180F0F);
	--am-sc-line: #353131;
	--am-sc-bw: 2px;
	--am-sc-radius: 30px;
	--am-sc-tab-w: 231px;
	--am-sc-tab-h: 64px;
	--am-sc-img-h: 293px;
	--am-sc-img-radius: 0px;
	--am-sc-media-w: 39%;
	--am-sc-content-gap: 47px;
	--am-sc-tt-gap: 10px;
	--am-sc-content-w: none;
	--am-sc-body-pad: 87px 40px 41px;
	width: 100%;
}

.am-sc__list {
	display: grid;
	grid-template-columns: repeat(var(--am-sc-cols), minmax(0, 1fr));
	gap: var(--am-sc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.am-sc__item {
	position: var(--am-sc-pos);
	top: calc(var(--am-sc-top) + var(--am-sc-i, 0) * var(--am-sc-peek));
	z-index: calc(var(--am-sc-i, 0) + 1);
	min-width: 0;
	margin: 0;
	padding: 0;
}
.admin-bar .am-sc__item { top: calc(var(--am-sc-top) + 32px + var(--am-sc-i, 0) * var(--am-sc-peek)); }
@media (max-width: 782px) {
	.admin-bar .am-sc__item { top: calc(var(--am-sc-top) + var(--am-sc-i, 0) * var(--am-sc-peek)); }
}

/* Sticky off inside the editor so every card can be clicked and edited. */
.elementor-editor-active .am-sc__item { position: relative; top: auto; }

.am-sc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	isolation: isolate;
	color: var(--am-w-text, #F9F9F9);
	transform-origin: 50% 0;
}

/* ---------- Shared pieces ---------- */
.am-sc__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--am-w-body, "Inter", sans-serif);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.04em;
	color: #F44506;
	white-space: nowrap;
}
.am-sc__label-icon { display: inline-flex; flex: none; width: 20px; height: 20px; }
.am-sc__label-icon img, .am-sc__label-icon svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.am-sc__label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.am-sc__media {
	position: relative;
	overflow: hidden;
	isolation: isolate; /* tint blends with the photo only */
	border-radius: var(--am-sc-img-radius);
	background: #120707;
}
.am-sc__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .8s var(--am-w-ease, ease);
}
.am-sc__tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.am-sc__media-link { position: absolute; inset: 0; z-index: 2; display: block; }

.am-sc__arrow {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(23px);
	backdrop-filter: blur(23px);
	color: #F9F9F9;
	transform: translate(-50%, -50%);
	transition: transform .5s var(--am-w-ease, ease), opacity .4s var(--am-w-ease, ease), background-color .4s;
	pointer-events: none;
}
.am-sc__arrow svg { width: 30px; height: auto; }
.am-sc--arrow-hover .am-sc__arrow { opacity: 0; transform: translate(-50%, -50%) scale(.7); }

.am-sc__body { position: relative; z-index: 1; display: flex; gap: 16px; min-width: 0; }
.am-sc__chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 45px;
	border-radius: 40px;
	background: #F44506;
	box-shadow: 0 9px 34px rgba(244, 42, 6, .5);
}
.am-sc__chip img, .am-sc__chip svg { width: 24px; height: 24px; object-fit: contain; }

.am-sc__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--am-sc-content-gap);
	min-width: 0;
	max-width: var(--am-sc-content-w);
}
.am-sc__heading.am-sc__heading { display: flex; flex-direction: column; gap: var(--am-sc-tt-gap); width: 100%; }
.am-sc__title.am-sc__title {
	margin: 0;
	font-family: var(--am-w-head, "Archivo", sans-serif);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.05em;
	color: #F9F9F9;
	font-variation-settings: "wdth" 100;
}
.am-sc__title a { color: inherit; text-decoration: none; transition: color .3s; }
.am-sc__title a:focus-visible { outline: 2px solid var(--am-w-orange, #FD430B); outline-offset: 3px; border-radius: 4px; }
.am-sc__text {
	margin: 0;
	font-family: var(--am-w-head, "Archivo", sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: #605E5E;
}

.am-sc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.am-sc__tag {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .05);
	font-family: var(--am-w-body, "Inter", sans-serif);
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
	color: #F9F9F9;
	white-space: nowrap;
}
.am-sc__actions { display: flex; }
.am-sc__button.am-button--light { --am-btn-fg: var(--am-w-card, #180F0F); }

/* ---------- Style 1: Service folder ---------- */
.am-sc--folder .am-sc__card { min-height: 0; }
.am-sc__shape { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.am-sc__shape-body {
	position: absolute;
	top: var(--am-sc-tab-h);
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--am-sc-bg);
	border: var(--am-sc-bw) solid var(--am-sc-line);
	border-radius: 0 var(--am-sc-radius) var(--am-sc-radius) var(--am-sc-radius);
}
.am-sc__shape-tab {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--am-sc-tab-w);
	height: calc(var(--am-sc-tab-h) + var(--am-sc-bw));
	background: var(--am-sc-bg);
	border-style: solid;
	border-color: var(--am-sc-line);
	border-width: var(--am-sc-bw) 0 0 var(--am-sc-bw);
	border-radius: var(--am-sc-radius) 0 0 0;
}
.am-sc__shape-curve {
	position: absolute;
	top: 0;
	left: calc(var(--am-sc-tab-w) - 1px);
	width: 66px;
	height: calc(var(--am-sc-tab-h) + var(--am-sc-bw));
	overflow: visible;
}
.am-sc__shape-fill { fill: var(--am-sc-bg); }
.am-sc__shape-line { fill: none; stroke: var(--am-sc-line); stroke-width: var(--am-sc-bw); vector-effect: non-scaling-stroke; }

.am-sc--folder .am-sc__label {
	min-height: var(--am-sc-tab-h);
	max-width: calc(var(--am-sc-tab-w) + 40px);
	padding: 26px 20px 4px 50px;
	box-sizing: border-box;
}
.am-sc--folder .am-sc__media { flex: none; height: var(--am-sc-img-h); margin: 19px 20px 0; }
.am-sc--folder .am-sc__label + .am-sc__media { margin-top: 19px; }
.am-sc--folder .am-sc__card > .am-sc__media:first-of-type { margin-top: calc(var(--am-sc-tab-h) + 19px); }
.am-sc--folder .am-sc__body { flex: 1 1 auto; padding: var(--am-sc-body-pad); }
.am-sc--folder .am-sc__body:first-child,
.am-sc--folder .am-sc__shape + .am-sc__body { padding-top: calc(var(--am-sc-tab-h) + 30px); }

/* ---------- Style 2: Case study ---------- */
.am-sc--case {
	--am-sc-line: #251616;
	--am-sc-bw: 1px;
	--am-sc-img-h: 399px;
	--am-sc-img-radius: 20px;
	--am-sc-pad: 14px;
	--am-sc-content-gap: 44px;
	--am-sc-tt-gap: 6px;
	--am-sc-content-w: 488px;
	--am-sc-body-pad: 68px 48px 40px 15%;
}
.am-sc--case .am-sc__card {
	overflow: hidden;
	padding: var(--am-sc-pad);
	background: var(--am-sc-bg);
	border: var(--am-sc-bw) solid var(--am-sc-line);
	border-radius: var(--am-sc-radius);
	transition: border-color .45s var(--am-w-ease, ease), box-shadow .45s var(--am-w-ease, ease);
}
.am-sc--case .am-sc__title.am-sc__title { font-size: clamp(28px, 2.78vw, 40px); font-weight: 400; line-height: 1.2; letter-spacing: -0.05em; text-transform: capitalize; }
.am-sc--case .am-sc__text { max-width: 300px; color: #F9F9F9; letter-spacing: 0; }
.am-sc--case .am-sc__label--inline { font-size: 16px; letter-spacing: -0.02em; white-space: normal; }
.am-sc--case .am-sc__label--inline .am-sc__label-icon { width: 16px; height: 16px; }
.am-sc--case .am-sc__body { flex-direction: column; align-items: flex-start; }

/* Image left, text right (Home 1 case studies). */
.am-sc--case-left .am-sc__card { flex-direction: row; align-items: stretch; }
.am-sc--case-left .am-sc__media { flex: 0 0 var(--am-sc-media-w); min-height: var(--am-sc-img-h); }
.am-sc--case-left .am-sc__body { flex: 1 1 auto; padding: var(--am-sc-body-pad); }

/* Text | image | tags (Case Studies page rows). */
.am-sc--case-center { --am-sc-body-pad: 0 0 0 33px; --am-sc-content-gap: 26px; --am-sc-content-w: 301px; }
.am-sc--case-center .am-sc__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--am-sc-media-w) minmax(0, 1fr);
	align-items: center;
	column-gap: 31px;
}
.am-sc--case-center .am-sc__media { grid-column: 2; grid-row: 1; align-self: stretch; min-height: var(--am-sc-img-h); }
.am-sc--case-center .am-sc__body { grid-column: 1; grid-row: 1; padding: var(--am-sc-body-pad); gap: 26px; }
.am-sc--case-center .am-sc__aside { grid-column: 3; grid-row: 1; padding: 0 22px 0 14px; }
.am-sc--case-center .am-sc__title.am-sc__title { line-height: 1.1; }
.am-sc--case-center .am-sc__text { max-width: 280px; }
.am-sc--case-center .am-sc__tags { max-width: 298px; row-gap: 10px; }
.am-sc--case-center .am-sc__tag { font-family: var(--am-w-head, "Archivo", sans-serif); }

/* Image top, text below (Home 2 case cards). */
.am-sc--case-top { --am-sc-body-pad: 34px 26px 26px; --am-sc-content-w: none; }
.am-sc--case-top .am-sc__media { flex: none; height: var(--am-sc-img-h); }
.am-sc--case-top .am-sc__body { flex: 1 1 auto; padding: var(--am-sc-body-pad); }
.am-sc--case-top .am-sc__tags { max-width: 488px; }

/* ---------- Hover ---------- */
@media (hover: hover) {
	.am-sc--zoom .am-sc__card:hover .am-sc__media img { transform: scale(1.05); }
	.am-sc--arrow-hover .am-sc__card:hover .am-sc__arrow { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	.am-sc__card:hover .am-sc__arrow { background-color: rgba(255, 255, 255, .2); }
	.am-sc--case .am-sc__card:hover { border-color: #402C2C; }
}
/* Touch screens have no hover: show the arrow. */
@media (hover: none) {
	.am-sc--arrow-hover .am-sc__arrow { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.am-sc__card:focus-within .am-sc__arrow { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.am-sc--case { --am-sc-body-pad: 40px 32px 32px 40px; }
	.am-sc--case-center { --am-sc-body-pad: 0 0 0 20px; }
	.am-sc--case-center .am-sc__card { column-gap: 20px; }
	.am-sc--case-center .am-sc__aside { padding: 0 16px 0 0; }
	.am-sc--case-top { --am-sc-body-pad: 28px 20px 20px; }
	.am-sc__tag { font-size: 16px; line-height: 24px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.am-sc { --am-sc-tab-w: 190px; --am-sc-tab-h: 52px; --am-sc-img-h: 200px; --am-sc-body-pad: 32px 20px 24px; --am-sc-content-gap: 28px; }
	.am-sc--folder .am-sc__label { padding: 18px 16px 4px 26px; font-size: 18px; gap: 8px; }
	.am-sc--folder .am-sc__label-icon { width: 16px; height: 16px; }
	.am-sc--folder .am-sc__media { margin: 14px 12px 0; }
	.am-sc--folder .am-sc__body { gap: 14px; }
	.am-sc--folder .am-sc__chip { display: none; }
	.am-sc__title.am-sc__title { font-size: 24px; }
	.am-sc__text { font-size: 14px; }
	.am-sc__actions, .am-sc__actions .am-button { width: 100%; }

	.am-sc--case { --am-sc-img-h: 240px; --am-sc-pad: 10px; --am-sc-radius: 24px; --am-sc-body-pad: 24px 10px 14px; --am-sc-content-gap: 24px; --am-sc-content-w: none; }
	.am-sc--case .am-sc__card,
	.am-sc--case-left .am-sc__card { display: flex; flex-direction: column; }
	.am-sc--case .am-sc__media { flex: none; width: 100%; height: var(--am-sc-img-h); min-height: 0; }
	.am-sc--case .am-sc__body { padding: var(--am-sc-body-pad); }
	.am-sc--case-center .am-sc__aside { padding: 0 10px 14px; }
	.am-sc--case .am-sc__title.am-sc__title { font-size: 28px; white-space: normal; }
	.am-sc--case .am-sc__tag { min-height: 32px; font-size: 14px; line-height: 20px; white-space: normal; }
	.am-sc__arrow { width: 64px; height: 64px; }
	.am-sc__arrow svg { width: 22px; }
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
	.am-sc__media img, .am-sc__arrow, .am-sc--case .am-sc__card { transition: none !important; }
}