/**
 * Finewerk About Us Hero
 *
 * Scoped, BEM-style styles for the three-zone About hero (about-hero.png):
 * full-height portrait | heading + lead + body + CTA | download card.
 * All custom properties are namespaced with --fw-abh- to avoid collisions;
 * Elementor style controls override them per instance.
 *
 * Card surface
 * ------------
 * The download card carries the site-wide `fw-bg-gradient`
 * utilities in the markup — the Hero Banner treatment — and this file paints
 * no gradient or grain of its own. The decorative card image sits at z-index
 * 0 (above the surface and its grain layer at z-index -1), and the card text
 * at z-index 1, so the text always reads above the image.
 *
 * The cutout
 * ----------
 * The reference's curved bottom-right cutout is carved with a CSS mask on
 * the card element, because the surface is a gradient + grain that no
 * solid-color overlay could imitate. The mask is the UNION (default mask
 * compositing) of six layers — plain rectangles for the body (above the
 * notch) and the left tab (beside it), plus three radius-sized radial pieces:
 * two convex corners where those edges end, and one concave fillet where the
 * tab's right edge meets the raised bottom edge. Everything is derived from
 * three custom properties (notch width/height/curve radius, all Elementor
 * controls), so the shape holds at any card size and breakpoint, and the
 * masked-away region is genuinely transparent — no overflow, no fake
 * page-colored patches. The chip + label that sit inside the notch are
 * SIBLINGS of the masked card (inside it they would be masked away too).
 */

/* ------------------------------------------------------------------
 * 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-about-hero {
	font-family: var(--fw-font-body);
}

.finewerk-about-hero :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-about-hero :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-about-hero {
	--fw-abh-min-height: 640px;
	--fw-abh-gap: 56px;
	--fw-abh-media-w: 26%;
	--fw-abh-aside-w: 24%;
	--fw-abh-media-x: 50%;
	--fw-abh-media-y: 30%;
	--fw-abh-card-radius: 24px;
	--fw-abh-notch-w: 210px;
	--fw-abh-notch-h: 64px;
	--fw-abh-notch-r: 24px;
	--fw-abh-chip: 48px;
	--fw-abh-cta-chip: 44px;
	display: grid;
	grid-template-columns: minmax(0, var(--fw-abh-media-w)) minmax(0, 1fr) minmax(0, var(--fw-abh-aside-w));
	grid-template-areas: "media content aside";
	gap: var(--fw-abh-gap);
	align-items: stretch;
	width: 100%;
	min-height: var(--fw-abh-min-height);
}

/* ---------- Left: full-height portrait ---------- */

/* The image is an absolute cover layer, so the column's height (the grid
   row) is the image's height: it always uses the full available height. */
.finewerk-about-hero__media {
	grid-area: media;
	position: relative;
	min-width: 0;
	min-height: 320px;
	overflow: hidden;
	border-radius: 12px;
}

.finewerk-about-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--fw-abh-media-x, 50%) var(--fw-abh-media-y, 30%);
}

/* ---------- Middle: content column ---------- */

.finewerk-about-hero__content {
	grid-area: content;
	min-width: 0;
}

.finewerk-about-hero__heading {
	margin: 0 0 44px;
	font-family: var(--fw-font-title);
	font-size: clamp(40px, 5vw, 80px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: #101014;
}

.finewerk-about-hero__lead {
	margin: 0 0 30px;
	font-size: 19px;
	line-height: 1.65;
	color: #1f1f26;
}

.finewerk-about-hero__body {
	font-size: 16px;
	line-height: 1.6;
	color: #8c8c95;
}

.finewerk-about-hero__body p {
	margin: 0 0 24px;
}

.finewerk-about-hero__body p:last-child {
	margin-bottom: 0;
}

.finewerk-about-hero__body strong {
	font-weight: 600;
	color: #52525b;
}

/* ---------- Middle CTA button ---------- */

.finewerk-about-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 44px;
	padding: 8px 26px 8px 8px;
	background-color: #ffffff;
	border: 1px solid #e6e6ee;
	border-radius: 999px;
	color: #101014;
	text-decoration: none;
	transition: box-shadow 0.25s ease;
}

.finewerk-about-hero__cta:hover {
	box-shadow: 0 10px 24px rgba(16, 19, 25, 0.1);
}

.finewerk-about-hero__cta:focus-visible {
	outline: 2px solid #0f3d3a;
	outline-offset: 3px;
}

.finewerk-about-hero__cta-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--fw-abh-cta-chip);
	height: var(--fw-abh-cta-chip);
	border-radius: 12px;
	background-color: #c8f8a9;
	color: #0f3d3a;
	font-size: calc(var(--fw-abh-cta-chip) * 0.4);
	line-height: 1;
}

.finewerk-about-hero__cta-chip svg {
	width: 40%;
	height: 40%;
	fill: currentColor;
}

.finewerk-about-hero__cta-label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

/* ---------- Right: download card ---------- */

/* Tight wrapper: exactly as tall as the card, so the absolutely placed
   chip + label align to the card's cutout, not to the column. */
.finewerk-about-hero__aside {
	grid-area: aside;
	position: relative;
	align-self: start;
	min-width: 0;
}

.finewerk-about-hero__card {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 470px;
	padding: 34px;
	border-radius: var(--fw-abh-card-radius);
	color: #ffffff;
	/* No background here: the card wears `fw-bg-gradient` in the markup and
	   that utility owns the surface (gradient + grain). Duplicating the
	   gradient locally would outrank the utility on load order and pin the
	   card to a stale copy of the brand colours. */

	/* The cutout mask (see the file header for the construction). */
	-webkit-mask-image:
		linear-gradient(#000 0 0),
		linear-gradient(#000 0 0),
		radial-gradient(circle var(--fw-abh-notch-r) at 0 0, #000 calc(var(--fw-abh-notch-r) - 0.5px), transparent var(--fw-abh-notch-r)),
		linear-gradient(#000 0 0),
		linear-gradient(#000 0 0),
		radial-gradient(circle var(--fw-abh-notch-r) at 0 0, #000 calc(var(--fw-abh-notch-r) - 0.5px), transparent var(--fw-abh-notch-r)),
		radial-gradient(circle var(--fw-abh-notch-r) at 100% 100%, transparent calc(var(--fw-abh-notch-r) - 0.5px), #000 var(--fw-abh-notch-r));
	-webkit-mask-size:
		100% calc(100% - var(--fw-abh-notch-h) - var(--fw-abh-notch-r)),
		calc(100% - var(--fw-abh-notch-r)) calc(100% - var(--fw-abh-notch-h)),
		var(--fw-abh-notch-r) var(--fw-abh-notch-r),
		calc(100% - var(--fw-abh-notch-w) - var(--fw-abh-notch-r)) 100%,
		calc(100% - var(--fw-abh-notch-w)) calc(100% - var(--fw-abh-notch-r)),
		var(--fw-abh-notch-r) var(--fw-abh-notch-r),
		var(--fw-abh-notch-r) var(--fw-abh-notch-r);
	-webkit-mask-position:
		0 0,
		0 0,
		100% calc(100% - var(--fw-abh-notch-h)),
		0 0,
		0 0,
		calc(100% - var(--fw-abh-notch-w)) 100%,
		calc(100% - var(--fw-abh-notch-w) + var(--fw-abh-notch-r)) calc(100% - var(--fw-abh-notch-h) + var(--fw-abh-notch-r));
	-webkit-mask-repeat: no-repeat;
	mask-image:
		linear-gradient(#000 0 0),
		linear-gradient(#000 0 0),
		radial-gradient(circle var(--fw-abh-notch-r) at 0 0, #000 calc(var(--fw-abh-notch-r) - 0.5px), transparent var(--fw-abh-notch-r)),
		linear-gradient(#000 0 0),
		linear-gradient(#000 0 0),
		radial-gradient(circle var(--fw-abh-notch-r) at 0 0, #000 calc(var(--fw-abh-notch-r) - 0.5px), transparent var(--fw-abh-notch-r)),
		radial-gradient(circle var(--fw-abh-notch-r) at 100% 100%, transparent calc(var(--fw-abh-notch-r) - 0.5px), #000 var(--fw-abh-notch-r));
	mask-size:
		100% calc(100% - var(--fw-abh-notch-h) - var(--fw-abh-notch-r)),
		calc(100% - var(--fw-abh-notch-r)) calc(100% - var(--fw-abh-notch-h)),
		var(--fw-abh-notch-r) var(--fw-abh-notch-r),
		calc(100% - var(--fw-abh-notch-w) - var(--fw-abh-notch-r)) 100%,
		calc(100% - var(--fw-abh-notch-w)) calc(100% - var(--fw-abh-notch-r)),
		var(--fw-abh-notch-r) var(--fw-abh-notch-r),
		var(--fw-abh-notch-r) var(--fw-abh-notch-r);
	mask-position:
		0 0,
		0 0,
		100% calc(100% - var(--fw-abh-notch-h)),
		0 0,
		0 0,
		calc(100% - var(--fw-abh-notch-w)) 100%,
		calc(100% - var(--fw-abh-notch-w) + var(--fw-abh-notch-r)) calc(100% - var(--fw-abh-notch-h) + var(--fw-abh-notch-r));
	mask-repeat: no-repeat;
}

/* Decorative image: above the surface (and its z:-1 grain layer), below the
   text. Sized and placed by the Elementor "Card Image" controls. */
.finewerk-about-hero__card-image {
	position: absolute;
	z-index: 0;
	top: 26%;
	right: -18px;
	width: 84%;
	max-width: 420px;
	height: auto;
	object-fit: contain;
	pointer-events: none;
}

.finewerk-about-hero__card-eyebrow {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #ffffff;
}

.finewerk-about-hero__card-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-right: 10px;
	border-radius: 999px;
	background-color: #c8f8a9;
}

.finewerk-about-hero__card-title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--fw-font-title);
	font-size: clamp(26px, 2.2vw, 34px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #ffffff;
	/* Never runs under the decorative image's densest zone unreadably: the
	   title keeps its own solid stacking layer above the image. */
	overflow-wrap: anywhere;
}

/* ---------- Chip + label inside the cutout ---------- */

.finewerk-about-hero__card-cta {
	position: absolute;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 14px;
	width: var(--fw-abh-notch-w);
	height: var(--fw-abh-notch-h);
	padding-left: 18px;
	color: inherit;
	text-decoration: none;
}

.finewerk-about-hero__card-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--fw-abh-chip);
	height: var(--fw-abh-chip);
	max-height: 100%;
	border-radius: 14px;
	background-color: #0f3d3a;
	color: #ffffff;
	transition: transform 0.25s ease;
}

.finewerk-about-hero__card-cta:hover .finewerk-about-hero__card-chip {
	transform: translateX(3px);
}

.finewerk-about-hero__card-cta:focus-visible {
	outline: 2px solid #0f3d3a;
	outline-offset: 3px;
	border-radius: 8px;
}

.finewerk-about-hero__card-chip svg {
	width: 38%;
	height: 38%;
}

.finewerk-about-hero__card-cta-label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #101014;
	white-space: nowrap;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.finewerk-about-hero__cta,
	.finewerk-about-hero__card-chip {
		transition: none;
	}

	.finewerk-about-hero__card-cta:hover .finewerk-about-hero__card-chip {
		transform: none;
	}
}

/* ---------- Responsive ---------- */

/* Tablet: portrait + content side by side, the card full-width below. */
@media (max-width: 1024px) {
	.finewerk-about-hero {
		--fw-abh-gap: 36px;
		grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
		grid-template-areas:
			"media content"
			"aside aside";
	}

	.finewerk-about-hero__card {
		min-height: 360px;
	}
}

/* Mobile: one column; the portrait keeps a fixed, filled height. */
@media (max-width: 767px) {
	.finewerk-about-hero {
		--fw-abh-gap: 28px;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"content"
			"aside";
		min-height: 0;
	}

	.finewerk-about-hero__media {
		min-height: 0;
		height: 380px;
	}

	.finewerk-about-hero__heading {
		margin-bottom: 28px;
	}

	.finewerk-about-hero__cta {
		margin-top: 32px;
	}

	.finewerk-about-hero__card {
		min-height: 320px;
	}
}