/**
 * Finewerk Portfolio Comparison
 *
 * Scoped, BEM-style styles for a static (non-interactive) "why work with us"
 * comparison composition made of:
 *   - a pill-bordered subtitle above a large serif main title (both centred);
 *   - ONE rounded container split into two equal halves ("Others" left, "Us"
 *     right), each half carrying a very faint green wash and a straight inner
 *     seam (only the outer corners are rounded, via overflow:hidden on the
 *     container);
 *   - inside each half, a heading and a list of rows, every row being a check
 *     icon + a bold item title + a muted two-line description.
 *
 * The two halves use two DELIBERATELY different check styles that share one
 * brand colour (#2D504C):
 *   - Others: a bare checkmark stroke with NO container background;
 *   - Us:     a white checkmark inside a filled circular container.
 *
 * All custom properties are namespaced with --fw-pc-. There are deliberately no
 * hover, focus, transition, cursor or link styles — the component is purely
 * visual. On narrow screens the two halves stack (Others first, then Us) with
 * no horizontal overflow.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Hubot Sans for headings/titles/stat numbers, Archivo for everything
 * else. Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so an explicit Elementor Typography
 * control (which Elementor writes at element-id specificity) always
 * overrides it. No !important anywhere.
 * ---------------------------------------------------------------- */

.finewerk-portfolio-comparison {
	font-family: var(--fw-font-body);
}

.finewerk-portfolio-comparison :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-title);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.finewerk-portfolio-comparison :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-portfolio-comparison {
	--fw-pc-max: 1240px;
	--fw-pc-col-gap: 0px;
	--fw-pc-row-gap: 0px;
	--fw-pc-us-inset: 5px;
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.finewerk-portfolio-comparison *,
.finewerk-portfolio-comparison *::before,
.finewerk-portfolio-comparison *::after {
	box-sizing: border-box;
}

.finewerk-portfolio-comparison__inner {
	max-width: var(--fw-pc-max, 1240px);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* ---------- Header: pill subtitle + serif main title ---------- */

.finewerk-portfolio-comparison__header {
	text-align: center;
	margin-bottom: 64px;
}

.finewerk-portfolio-comparison__subtitle {
	display: inline-block;
	margin: 0 0 32px;
	padding: 8px 18px;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: #1e1e1e;
	background-color: #ffffff;
	border: 1px solid #e4e4e4;
	border-radius: 999px;
}

.finewerk-portfolio-comparison__title {
	margin: 0;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	font-family: var(--fw-font-title);
	font-size: clamp(2.25rem, 4.6vw, 3.75rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: #141414;
	overflow-wrap: anywhere;
}

/* ---------- Comparison: one rounded container, two equal halves ---------- */

.finewerk-portfolio-comparison__compare {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	column-gap: var(--fw-pc-col-gap, 0px);
	row-gap: var(--fw-pc-row-gap, 0px);
	/* One uniform green field for the whole element, spanning behind both
	   sides. The Others content sits directly on it; the Us panel is a white
	   card inset over it (see below). */
	background: #eaf4dd;
	border-radius: 32px;
	width: 100%;
}

.finewerk-portfolio-comparison__group {
	flex: 1 1 0;
	min-width: 0;
	padding: 48px;
}

/* Others: no background of its own — the green container shows through. */
.finewerk-portfolio-comparison__group--others {
	background: transparent;
}

/* Us: a white rounded panel inset a few px inside the container, so the green
   field stays visible as a frame around it. */
.finewerk-portfolio-comparison__group--us {
	margin: var(--fw-pc-us-inset, 5px);
	background: #ffffff;
	border-radius: 20px;
}

.finewerk-portfolio-comparison__group-heading {
	display: block;
	margin: 0 0 40px;
	font-family: var(--fw-font-title);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	color: #141414;
	text-align: left;
	overflow-wrap: anywhere;
}

/* ---------- Rows ---------- */

.finewerk-portfolio-comparison__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 34px;
}

.finewerk-portfolio-comparison__item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 0;
}

/* Shared check container. Both variants centre their SVG; only the container
   chrome and the SVG colour/size differ between Others and Us. */
.finewerk-portfolio-comparison__check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	margin-top: 1px;
}

.finewerk-portfolio-comparison__check-icon {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Others check: bare stroke, no container background/border. */
.finewerk-portfolio-comparison__check--others {
	width: 24px;
	height: 24px;
	color: #2d504c;
	background-color: transparent;
	border: 0 solid transparent;
	border-radius: 0;
}

.finewerk-portfolio-comparison__check--others .finewerk-portfolio-comparison__check-icon {
	width: 20px;
	height: 20px;
	stroke-width: 2.25;
}

/* Us check: white checkmark inside a filled green circle. */
.finewerk-portfolio-comparison__check--us {
	width: 26px;
	height: 26px;
	color: #ffffff;
	background-color: #2d504c;
	border: 0 solid transparent;
	border-radius: 50%;
}

.finewerk-portfolio-comparison__check--us .finewerk-portfolio-comparison__check-icon {
	width: 14px;
	height: 14px;
	stroke-width: 2.6;
}

.finewerk-portfolio-comparison__text {
	min-width: 0;
}

.finewerk-portfolio-comparison__item-title {
	display: block;
	margin: 0 0 8px;
	font-family: var(--fw-font-title);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
	color: #141414;
	overflow-wrap: anywhere;
}

.finewerk-portfolio-comparison__item-desc {
	display: block;
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.55;
	color: #636363;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet: tighten the group padding but keep the two halves side by side. */
@media (max-width: 1024px) {
	.finewerk-portfolio-comparison__group {
		padding: 36px;
	}

	.finewerk-portfolio-comparison__header {
		margin-bottom: 48px;
	}
}

/* Mobile: stack the two halves (Others first, then Us). The container keeps its
   rounded outer corners; each half spans the full width. No horizontal overflow. */
@media (max-width: 767px) {
	.finewerk-portfolio-comparison__compare {
		flex-direction: column;
	}

	.finewerk-portfolio-comparison__group {
		flex-basis: auto;
		width: 100%;
		padding: 32px 24px;
	}

	.finewerk-portfolio-comparison__group-heading {
		margin-bottom: 28px;
	}

	.finewerk-portfolio-comparison__title {
		max-width: 100%;
	}
}