/* ==========================================================================
   Home V2 — our own styles (page-template/page-home-v2.php)
   Loaded after css/main.css and css/home-v2-webflow.css, only on Home V2.

   1. Hero — "defining moments" (.emo.moments)
   2. Buttons — the theme's .l-btn in Home V2 colourways
   3. Section fixes for the ported Webflow sections (Proof, Shapes, Recognition,
      Work, Insights / Field Notes form, Final CTA)
   4. Page-level (header steps aside during Shapes)
   ========================================================================== */


/* ==========================================================================
   1. Hero — "defining moments"
   Design: Figma "hero-section" frames (1440 × 1134 under the header) and the
   mobile frames (390 wide). JS: momentsHero() in js/home-v2.js.
   ========================================================================== */

.section--moments {
	/* Measured and overwritten by home-v2.js; these are no-JS fallbacks. */
	--moments-header: 4.875rem;  /* bottom edge of the fixed header */
	--moments-offset: 2.875rem;  /* part of the header that overlaps <main> */
	--moments-pad-b: 1.5rem;     /* space under the cards */
	/* --moments-tail (JS): card bottom → hero bottom, so the line starts at the cards */

	position: relative;
	padding-top: var(--moments-offset);
	background-color: #FFFCF5;
	color: #1A1A1A;
}

@media screen and (min-width: 500px) {
	.section--moments {
		--moments-header: 5.375rem;
		--moments-offset: 5.375rem;
		--moments-pad-b: 2.375rem; /* 38px, as in the design */
	}
}

.emo.moments {
	position: relative;
}

/* ---------- Pin block: one screen under the header, content centred ----------
   It is a size container, so the type and the cards can size themselves from
   the space that is really available (cq units). */

.emo.moments .moments__pin {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: max(calc(100vh - var(--moments-header)), 34rem);
	height: max(calc(100svh - var(--moments-header)), 34rem); /* svh: stable while the phone address bar moves */
	container-type: size;
}

/* ---------- Intro: eyebrow, heading, text, buttons ---------- */

.emo.moments .moments__intro {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 1.25rem;
}

.emo.moments .moments__eyebrow {
	margin: 0 0 0.75rem;
	font-family: "Basel Grotesk";
	font-size: 0.6875rem;
	font-weight: 400;
	line-height: 1.25;
	text-transform: uppercase;
}

.emo.moments .moments__heading {
	max-width: 13.5em; /* keeps the design's line breaks at every font size */
	margin: 0 0 0.75rem;
	font-family: "Tobias";
	font-size: 1.875rem;
	font-weight: 300;
	line-height: 1.16;
	letter-spacing: 0;
}

.emo.moments .moments__text {
	max-width: 27.4em;
	margin: 0 0 1rem;
	font-family: "Basel Grotesk";
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.45;
}

.emo.moments .moments__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

@media screen and (min-width: 600px) {
	.emo.moments .moments__intro { padding-top: 2rem; }
	.emo.moments .moments__eyebrow { margin-bottom: 1rem; font-size: 0.8125rem; }
	.emo.moments .moments__heading { margin-bottom: 1rem; font-size: 2.75rem; }
	.emo.moments .moments__text { margin-bottom: 1.5rem; font-size: 1.0625rem; }
	.emo.moments .moments__actions { gap: 0.75rem 1rem; }
}

/* Buttons: the theme's .l-btn (with its circle-fill hover) in Home V2 colourways. */
.emo.moments .l-btn {
	padding: 0.5625rem 1.125rem;
	font-family: "Basel Grotesk"; /* Regular */
	font-size: 0.9375rem;
	line-height: 1.5rem;
	font-weight: 400;
	border: 1px solid #1A1A1A;
	border-radius: 3.75rem;
	transition: color 0.3s ease-in;
}

@media screen and (min-width: 600px) {
	.emo.moments .l-btn {
		min-width: 12.5625rem; /* 201px (Figma) */
		padding: 0.6875rem 1.4375rem; /* 48px tall with a 1px border */
		font-size: 1.125rem;
		text-align: center;
	}
}

.emo.moments .l-btn--dark { color: #FFFCF5; background-color: #1A1A1A; }
.emo.moments .l-btn--outline { color: #1A1A1A; background-color: transparent; }
.emo.moments .l-btn--dark::after { background-color: #FFFCF5; }
.emo.moments .l-btn--outline::after { background-color: #1A1A1A; }
.emo.moments .l-btn:hover { text-decoration: none; border-color: #1A1A1A; }
.emo.moments .l-btn--dark:hover { color: #1A1A1A; }
.emo.moments .l-btn--outline:hover { color: #FFFCF5; }
.emo.moments .l-btn:hover::after { transform: translate(-50%, -50%) scale(11); }
.emo.moments .l-btn:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 3px; }

/* ---------- Cards ----------
   Each card is one SVG artwork (312 × 390 since the Oct 15 exports). All four are
   the same size: 315 design px wide in the 1440 row, so sizes are "design px × --u".
   The last card in ACF is the front card of the stack (ACF allows up to 4). */

.emo.moments .moments__cards {
	margin: 0;
	padding: 0;
	list-style: none;
}

.emo.moments .moments__card {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	aspect-ratio: 312 / 390;
	width: calc(315 * var(--u));
	will-change: transform;
}

.emo.moments .moments__card::before { display: none; } /* no bullets from global li styles */


.emo.moments .moments__card-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* Depth veil for stacked cards: fills exactly the inside of the card's outline, so the
   outline keeps its full strength (corners included) and only the fill fades. Opaque, so
   cards never show through each other. The outline differs per artwork file, so hero.php
   reads it from each SVG into these variables (emotive_home_v2_card_outline()); the
   defaults are a 1.2px line with a 14px corner. */
.emo.moments .moments__veil {
	position: absolute;
	inset: var(--card-line-y, 0.3077%) var(--card-line-x, 0.3846%);
	border-radius: var(--card-inner-rx, 4.1344%) / var(--card-inner-ry, 3.3024%);
	background-color: #FFFCF5;
	opacity: 0;
	pointer-events: none;
}

/* ---------- Stage: phones (< 500px) ----------
   Fills the rest of the pin block. Cards are stacked; the CSS shows the finished
   stack (no-JS), the JS builds it card by card on scroll. The
   stage clips its bottom edge, so cards rise into view from it. */

.emo.moments .moments__stage {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* Room between the buttons and the cards. */
	--stage-pt: 1.25rem;
	padding: var(--stage-pt) 1rem var(--moments-pad-b);
	container-type: size;
	overflow: hidden;
	overflow: clip;
	/* Never taller than the cards need; the cards may grow to 1.5 design px on big phones
	   and tablets, so the hero fills the screen instead of leaving space above and below. */
	max-height: calc(min((100cqw - 2rem) / 349.5, 1.5px) * 393.75 + var(--stage-pt) + var(--moments-pad-b));
}

.emo.moments .moments__cards {
	/* 1 design px: front card + three steps must fit the width and the height. */
	--u: min(calc(100cqw / 349.5), calc((100cqh - 4px) / 393.75), 1.5px);
	--step: calc(11.5 * var(--u));

	position: relative;
	flex: 0 0 auto;
	width: calc(315 * var(--u) + 3 * var(--step));
	height: calc(393.75 * var(--u));
}

.emo.moments .moments__stage .moments__card {
	position: absolute;
	bottom: 0;
	left: 0;
}

/* Offsets use `left` (not transform) so GSAP's transforms never fight them. */
.emo.moments .moments__stage .moments__card:nth-last-child(1) { left: calc(3 * var(--step)); }
.emo.moments .moments__stage .moments__card:nth-last-child(2) { left: calc(2 * var(--step)); }
.emo.moments .moments__stage .moments__card:nth-last-child(3) { left: var(--step); }

/* Stacked depth (Figma): back cards at 45% / 30% / 15%, front card 100%. */
.emo.moments .moments__stage .moments__card:nth-last-child(2) .moments__veil { opacity: 0.55; }
.emo.moments .moments__stage .moments__card:nth-last-child(3) .moments__veil { opacity: 0.7; }
.emo.moments .moments__stage .moments__card:nth-last-child(4) .moments__veil { opacity: 0.85; }

/* ---------- 500px and up (tablets, desktop): pinned row that converges ----------
   Type keeps the design sizes, softened on shorter screens. The cards take the
   space that is left, up to their design size; on taller (or zoomed-out) screens
   the whole composition is centred instead of opening a gap above the cards. */

@media screen and (min-width: 500px) {

	.emo.moments .moments__pin {
		height: max(calc(100vh - var(--moments-header)), 43rem);
	}

	.emo.moments .moments__intro {
		/* 1 design px vertically (1134 = design frame height), and a softer unit
		   for type so it shrinks less than the spacing. */
		--vu: clamp(0.55px, calc(100cqh / 1134), 1.1px);
		--tu: calc(0.45 * var(--vu) + 0.55px);

		padding-top: 0; /* review: more room for the cards (was 82 design px) */
	}

	.emo.moments .moments__eyebrow {
		margin-bottom: calc(26 * var(--vu));
		font-size: min(1.125rem, 2.8cqw); /* 18px; smaller on narrow tablets */
	}

	.emo.moments .moments__heading {
		margin-bottom: calc(22 * var(--vu));
		font-size: min(4.125rem, 7.4cqw); /* 66px; follows the width below ~890px */
	}

	.emo.moments .moments__text {
		margin-bottom: calc(42 * var(--vu));
		font-size: min(1.25rem, 3.2cqw); /* 20px */
	}

	.emo.moments .moments__actions {
		gap: 1rem;
	}

	.emo.moments .moments__stage {
		/* Never taller than the cards need at their largest (395px card + 108px gap
		   above it), so extra height goes around the composition. */
		max-height: calc(min(100cqw, 90rem) / 1437.5 * 393.75 + 3.5rem + var(--moments-pad-b));
		padding: 3.5rem 0 var(--moments-pad-b); /* 56px between the button and the cards (Figma: 3-4rem) */
	}

	.emo.moments .moments__cards {
		/* 1 design px: fits the 1437px-wide row (4 × 315 cards + 24.5 gaps + 52px
		   sides) and the 395px-tall cards (plus 24px air above them). */
		--u: min(calc(min(100cqw, 90rem) / 1437.5), calc(100cqh / 393.75));

		display: flex;
		align-items: flex-end;
		gap: calc(24.5 * var(--u));
		width: auto;
		height: auto;
	}

	.emo.moments .moments__stage .moments__card,
	.emo.moments .moments__stage .moments__card:nth-last-child(n) {
		position: relative;
		left: auto;
		bottom: auto;
	}

	.emo.moments .moments__stage .moments__card:nth-last-child(n) .moments__veil {
		opacity: 0; /* depth is animated in by the converge timeline */
	}
}

/* ---------- Statement: line, square and text ---------- */

.emo.moments .moments__statement {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--moments-tail, var(--moments-pad-b))); /* line starts at the card bottom */
	padding-bottom: 5rem;
	text-align: center;
}

.emo.moments .moments__line {
	display: block;
	width: 2px;
	height: 6.5rem;
	margin: 0 auto;
	background-color: #1A1A1A;
	transform-origin: 50% 0;
}

.emo.moments .moments__dot {
	display: block;
	width: 0.625rem;
	height: 0.625rem;
	margin: 0 auto 1.75rem;
	border-radius: 0.125rem;
	background-color: #1A1A1A;
}

.emo.moments .moments__statement-text {
	max-width: 38.5rem;
	margin: 0 auto;
	font-family: "Tobias";
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.3125;
}

@media screen and (min-width: 500px) {
	.emo.moments .moments__line { height: 11.0625rem; } /* 177px */
	.emo.moments .moments__dot { margin-bottom: 2rem; }
	.emo.moments .moments__statement { padding-bottom: 6.5rem; }
	.emo.moments .moments__statement-text { font-size: 2rem; }
}

/* ---------- Animation helpers (JS) ---------- */

/* Pre-animation state. Only applies once home-v2.js has run (.hv2-js on <html>),
   so without JS everything is simply visible. */
.hv2-js .emo.moments.is-pre .moments__eyebrow,
.hv2-js .emo.moments.is-pre .moments__heading,
.hv2-js .emo.moments.is-pre .moments__text,
.hv2-js .emo.moments.is-pre .moments__actions,
.hv2-js .emo.moments.is-pre .moments__card {
	opacity: 0;
}

/* Masked line reveal (SplitText lines inside an overflow wrapper). The padding
   keeps descenders from being clipped. */
.emo.moments .moments__mask {
	overflow: hidden;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}


/* Statement under the line: Basel Grotesk Regular, 24px / 30px (Figma). */
.emo.moments .moments__statement-text {
	max-width: 41.875rem; /* 670px text box in Figma */
	font-family: "Basel Grotesk";
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.25em; /* 30px at 24px */
}

@media screen and (min-width: 500px) {
	.emo.moments .moments__statement-text { font-size: 1.5rem; }
}


/* ==========================================================================
   2. Buttons — the theme's .l-btn in Home V2 colourways
   The hover itself (a circle that fades in and grows from the centre) is the
   theme's .l-btn from css/main.css. The Webflow buttons keep their size from the
   export; only the colours are set here, mirroring the theme's own colourways:
   .emo.whitepaper-cta a.l-btn (fills cream) and .cta-wrap a.l-btn (fills dark).
   ========================================================================== */

.hv2-wf .button.l-btn {
	font-size: inherit;
	line-height: inherit;
	text-align: center;
	border-width: 1px; /* colour comes from the colourway below */
	border-style: solid;
	transition: color 0.3s ease-in, border-color 0.3s ease-in;
}

.hv2-wf .button.l-btn:hover::after {
	transform: translate(-50%, -50%) scale(11); /* as .emo.cards--white .l-btn: covers wider buttons */
}

/* Dark button on light sections: fills cream. */
.hv2-wf .l-btn--dark { color: #FFFCF5; background-color: #1A1A1A; border-color: #1A1A1A; }
.hv2-wf .l-btn--dark::after { background-color: #FFFCF5; }
.hv2-wf .l-btn--dark:hover { color: #1A1A1A; background-color: #1A1A1A; border-color: #1A1A1A; }

/* Light button on the dark CTA: fills dark. */
.hv2-wf .l-btn--light { color: #1A1A1A; background-color: #FFFCF5; border-color: #FFFCF5; }
.hv2-wf .l-btn--light::after { background-color: #1A1A1A; }
.hv2-wf .l-btn--light:hover { color: #FFFCF5; background-color: #FFFCF5; border-color: #FFFCF5; }

/* Outline button on the dark CTA: fills cream. */
.hv2-wf .l-btn--outline-light { color: #FFFCF5; background-color: transparent; border-color: #FFFCF5; }
.hv2-wf .l-btn--outline-light::after { background-color: #FFFCF5; }
.hv2-wf .l-btn--outline-light:hover { color: #1A1A1A; background-color: transparent; border-color: #FFFCF5; }

.hv2-wf .button.l-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }


/* ==========================================================================
   3. Section fixes for the ported Webflow sections
   Side margins: Proof, Work, Insights and the CTA now use the theme's .container
   (same margins as the live site), so nothing is needed here for that.
   ========================================================================== */

/* ---------- Shared ---------- */

/* Stat headings and Recognition step titles are h3s: keep their designed look. */
.hv2-wf h3:where(.proof_card-para) {
	font-family: inherit;
	font-weight: inherit;
}

.hv2-wf h3:where(.heading-style-h4) {
	line-height: 1.3;
}

/* Insight cards are links here (divs in the export). */
.hv2-wf a.home_insights-left-card {
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease;
}

.hv2-wf a.home_insights-left-card:hover {
	transform: translateY(-4px);
}

/* ---------- The Proof ---------- */

/* Testimonial cards that link to their case study. */
.hv2-wf a.hv2-card-link {
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease;
}

.hv2-wf a.hv2-card-link:hover {
	transform: translateY(-4px);
}

/* Dark testimonial card: smaller quote gap on tablet (review). */
@media screen and (min-width: 768px) and (max-width: 991px) {
	.hv2-wf .home_proof-btm-card-text { margin-bottom: calc(3 * var(--wf-rem)); }
}

/* Logo strip. proof.php prints the list twice: the copy is hidden while the strip is
   static, and used for the loop when it scrolls. It scrolls on mobile, and at every
   breakpoint once there are more than 5 logos (.is-marquee). */
.hv2-wf .home_proof-marquee .marquee_list.is-clone { display: none; }

@keyframes hv2-proof-marquee { to { transform: translateX(-50%); } }

.hv2-wf .home_proof-marquee.is-marquee .marquee { overflow: hidden; }
.hv2-wf .home_proof-marquee.is-marquee .marquee_track {
	display: flex;
	width: max-content;
	animation: hv2-proof-marquee 22s linear infinite;
}
.hv2-wf .home_proof-marquee.is-marquee .marquee_list,
.hv2-wf .home_proof-marquee.is-marquee .marquee_list.is-clone {
	display: flex;
	flex: none;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	width: auto;
	margin: 0;
	gap: calc(3 * var(--wf-rem));
	padding-right: calc(3 * var(--wf-rem)); /* same as the gap, so the loop doesn't jump */
}
.hv2-wf .home_proof-marquee.is-marquee .marquee_item { flex: none; }

@media screen and (max-width: 767px) {
	.hv2-wf .home_proof-marquee .marquee { overflow: hidden; }
	.hv2-wf .home_proof-marquee .marquee_track {
		display: flex;
		width: max-content;
		animation: hv2-proof-marquee 18s linear infinite;
	}
	.hv2-wf .home_proof-marquee .marquee_list,
	.hv2-wf .home_proof-marquee .marquee_list.is-clone {
		display: flex;
		flex: none;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		width: auto;
		margin: 0;
		gap: calc(2 * var(--wf-rem));
		padding-right: calc(2 * var(--wf-rem));
	}
	.hv2-wf .home_proof-marquee .marquee_item { flex: none; }
}

/* ---------- Shapes of Misrecognition ---------- */

/* Each shape's label + title is one h3; keep the shape's own type. */
.hv2-wf h3.shape-heading {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

.hv2-wf .shape-heading .shape-label,
.hv2-wf .shape-heading .shape-title {
	display: block;
}

/* "Misrecognition often takes one of four shapes:" — faded in/out by initShapeStack(). */
.hv2-wf .shape-subhead {
	position: absolute;
	left: 50%;
	top: 16%;
	z-index: 5;
	width: min(90%, calc(30 * var(--wf-rem)));
	text-wrap: balance;
	font-family: var(--_typography---font-styles--heading, "Tobias");
	font-size: calc(2.25 * var(--wf-rem));
	font-weight: 300;
	line-height: 1.2;
	text-align: center;
	color: #FFFCF5;
	opacity: 0;
	transform: translateX(-50%);
	pointer-events: none;
}

@media screen and (max-width: 767px) {
	.hv2-wf .shape-subhead {
		top: 8%;
		font-size: calc(1.5 * var(--wf-rem));
	}
}

/* ---------- Recognition Readiness ---------- */

/* Inactive tiles: look like the artwork at 30% opacity on the cream (Figma), but stay solid,
   so the tiles never show through each other (toggled by recognitionStack()). */
.hv2-wf .precedent_image-block {
	transition: filter 0.6s ease;
}

.hv2-wf .precedent_image-block.is-inactive {
	filter: grayscale(1) contrast(0.18) brightness(1.654) sepia(0.09); /* #1A1A1A → #BAB8B3, white → cream */
}

/* The export nudged the last tile 1rem to the left; the artwork is already centred. */
.hv2-wf .precedent_stack-block:last-child {
	left: 0;
}

/* Label under the diagram once the eyebrow above has scrolled away
   (recognitionCaption()). Drawn from data-label, so the text isn't duplicated. */
@media screen and (min-width: 768px) {
	.hv2-wf .precedent_stack-wrapper::after {
		content: attr(data-label);
		display: block;
		margin-top: calc(2.5 * var(--wf-rem));
		font-size: calc(0.875 * var(--wf-rem));
		line-height: 1.3;
		letter-spacing: 0.02em;
		text-align: center;
		text-transform: uppercase;
		visibility: hidden;
	}

	.hv2-wf .precedent_stack-wrapper.is-captioned::after {
		visibility: visible;
	}
}

/* ---------- Work ---------- */

/* Card hover (as on the live Agiloft page): a layer behind the card fades in and grows
   to 1.05, so it ends up slightly bigger than the card. It uses ::after because the
   theme's link underline already owns a::before on every link. */
.hv2-wf .work_mid-card {
	position: relative;
	isolation: isolate;
	overflow: visible;
}

.hv2-wf .work_mid-card:hover {
	background-color: transparent;
}

.hv2-wf .work_mid-card::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: calc(0.5 * var(--wf-rem));
	background-color: #F9F3E7; /* same as the logo tiles' hover */
	opacity: 0;
	transform: scale(1);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.hv2-wf .work_mid-card:hover::after {
	opacity: 1;
	transform: scale(1.05);
}

.hv2-wf .work_mid-card-img-wrap {
	overflow: hidden; /* keeps the image zoom inside the card */
}

/* ---------- Insights: Field Notes card ---------- */

.hv2-wf .home_insights-btm-right.hv2-fieldnotes {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	background-color: #1A1A1A;
	border: 1px solid #1A1A1A;
	border-radius: calc(1 * var(--wf-rem)); /* 16px */
}

.hv2-wf .hv2-fieldnotes__body {
	padding: calc(2.0875 * var(--wf-rem)) calc(2 * var(--wf-rem)) calc(2.1375 * var(--wf-rem)); /* 42px to the top of the title, 32 sides, 40 under "Subscribe" */
	color: #FFFCF5;
}

/* Oct 19 design: "Field Notes" title with a rule under it (the logo strip is gone). In Figma
   this header is a little wider than the form: the rule runs 26.5px from the card edges
   (the fields 32px) and the text starts 28.5px in, so the text above the form fits three lines. */
.hv2-wf .hv2-fieldnotes__title {
	margin: 0 calc(-0.34375 * var(--wf-rem)); /* 5.5px wider each side */
	padding-left: calc(0.125 * var(--wf-rem)); /* text 2px in from the rule */
	padding-bottom: calc(0.6625 * var(--wf-rem)); /* rule 52px under the top of the capitals */
	border-bottom: 1px solid #FFFCF5;
	font-family: var(--_typography---font-styles--heading, "Tobias");
	font-size: calc(2.75 * var(--wf-rem)); /* Tobias Regular 44 */
	font-weight: 400;
	line-height: 1.1;
}

/* Text above the form: Tobias 24 / 32, bold words ("Opt in") in Basel Grotesk Bold. */
.hv2-wf .hv2-fieldnotes__heading {
	margin: calc(0.625 * var(--wf-rem)) calc(-0.34375 * var(--wf-rem)) calc(3 * var(--wf-rem)) calc(-0.21875 * var(--wf-rem)); /* 10px under the rule, 48px to the form; 491px wide, as in Figma */
	font-family: var(--_typography---font-styles--heading, "Tobias");
	font-size: calc(1.5 * var(--wf-rem));
	font-weight: 400;
	line-height: calc(2 * var(--wf-rem));
}

.hv2-wf .hv2-fieldnotes__heading:first-child { margin-top: 0; }

.hv2-wf .hv2-fieldnotes__heading strong,
.hv2-wf .hv2-fieldnotes__heading b {
	font-family: "Basel Grotesk", Arial, sans-serif;
	font-weight: 700;
}

/* HubSpot form (raw HTML mode: every field sits directly inside <form>).
   Same look as the theme footer form: underlined fields and "Subscribe →". */
.hv2-wf .hv2-hs-form .hs-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: calc(1.125 * var(--wf-rem)); /* 18px */
	margin: 0;
	color: #FFFCF5;
}

.hv2-wf .hv2-hs-form .hs-form > * { grid-column: 1 / -1; }
.hv2-wf .hv2-hs-form .hs-form > .hs_firstname,
.hv2-wf .hv2-hs-form .hs-form > .hs_lastname { grid-column: auto; }

.hv2-wf .hv2-hs-form .hs-form-field {
	margin-bottom: calc(1.75 * var(--wf-rem)); /* 28px between the rows */
}

.hv2-wf .hv2-hs-form .hs-form-field > label:not(.hs-form-booleancheckbox-display),
.hv2-wf .hv2-hs-form .hs-form-field > legend.hs-field-desc:empty {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.hv2-wf .hv2-hs-form .hs-form-field .input { margin: 0 !important; }

.hv2-wf .hv2-hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]),
.hv2-wf .hv2-hs-form select.hs-input,
.hv2-wf .hv2-hs-form textarea.hs-input {
	display: block;
	width: 100% !important;
	margin: 0;
	padding: calc(0.9375 * var(--wf-rem)) 0 calc(0.5 * var(--wf-rem)); /* 48px tall field, text 8px above the line */
	font-family: "Basel Grotesk", Arial, sans-serif; /* typed text: Regular, 23px / 24px */
	font-size: calc(1.4375 * var(--wf-rem));
	font-weight: 400;
	line-height: calc(1.5 * var(--wf-rem));
	letter-spacing: 0.02em; /* 0.46px */
	color: #FFFCF5;
	-webkit-text-fill-color: #FFFCF5;
	caret-color: #FFFCF5;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #FFFCF5;
	border-radius: 0;
	box-shadow: none;
	outline: none;
}

.hv2-wf .hv2-hs-form input.hs-input::placeholder,
.hv2-wf .hv2-hs-form textarea.hs-input::placeholder {
	font-family: "Basel Grotesk", Arial, sans-serif; /* placeholder stays 16px */
	font-size: calc(1 * var(--wf-rem));
	letter-spacing: 0.02em; /* 0.32px */
	color: rgba(255, 252, 245, 0.5);
	-webkit-text-fill-color: rgba(255, 252, 245, 0.5);
	opacity: 1;
}

.hv2-wf .hv2-hs-form input.hs-input:focus,
.hv2-wf .hv2-hs-form textarea.hs-input:focus {
	border-bottom-color: #FFFCF5;
}

/* Browser autofill: the browser fills the field light blue (its own !important background),
   so the cream text vanished. An inset shadow in the card colour paints over that fill (the
   underline is a border, so it stays), and the text stays cream. Both form cards are #1A1A1A.
   The :not()s match the field rule above, so this one wins. */
.hv2-wf .hv2-hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill,
.hv2-wf .hv2-hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:hover,
.hv2-wf .hv2-hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:focus {
	-webkit-text-fill-color: #FFFCF5;
	caret-color: #FFFCF5;
	-webkit-box-shadow: 0 0 0 100vmax #1A1A1A inset;
	box-shadow: 0 0 0 100vmax #1A1A1A inset;
	filter: none; /* older Firefox tints autofilled fields with a filter */
}

/* Consent text and checkbox */
.hv2-wf .hv2-hs-form .legal-consent-container,
.hv2-wf .hv2-hs-form .hs-richtext,
.hv2-wf .hv2-hs-form .hs-form-booleancheckbox-display {
	color: #A1A1A1;
	font-size: calc(0.875 * var(--wf-rem)); /* 14px */
	line-height: 1.2;
}

.hv2-wf .hv2-hs-form .legal-consent-container { margin-top: calc(0.25 * var(--wf-rem)); } /* 32px under the email field */

.hv2-wf .hv2-hs-form .legal-consent-container p { margin: 0 0 calc(0.5 * var(--wf-rem)); }
/* "Privacy Policy": Medium and underlined (linked by site-updates.js if HubSpot's text has no link). */
.hv2-wf .hv2-hs-form .legal-consent-container a,
.hv2-wf .hv2-hs-form .legal-consent-container .hv2-privacy-link { color: inherit; font-weight: 500; text-decoration: underline; }

/* The Webflow styles indent every li by 8px; the checkbox and messages line up with the fields. */
.hv2-wf .hv2-hs-form ul.inputs-list,
.hv2-wf .hv2-hs-form ul.inputs-list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hv2-wf .hv2-hs-form .hs-form-booleancheckbox-display,
.hv2-wf .hv2-hs-form .hs-form-checkbox-display {
	display: flex;
	gap: calc(0.75 * var(--wf-rem));
	align-items: flex-start;
	margin: 0;
	cursor: pointer;
}

.hv2-wf .hv2-hs-form .hs-form-booleancheckbox-display > span {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

.hv2-wf .hv2-hs-form input[type="checkbox"].hs-input {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: calc(1.25 * var(--wf-rem)); /* 20px */
	height: calc(1.25 * var(--wf-rem));
	margin: 0 !important;
	border: 1px solid #A1A1A1;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.09) center / 70% 70% no-repeat;
	cursor: pointer;
}

.hv2-wf .hv2-hs-form input[type="checkbox"].hs-input:checked {
	border-color: #FFFCF5;
	background-color: #FFFCF5;
	background-image: url("../images/home-v2/check.svg"); /* tick for the checked box */
}

.hv2-wf .hv2-hs-form input[type="checkbox"].hs-input:focus-visible {
	outline: 2px solid #FFFCF5;
	outline-offset: 2px;
}

/* Errors (same red as the theme footer form) */
.hv2-wf .hv2-hs-form .hs-error-msgs {
	margin: calc(0.375 * var(--wf-rem)) 0 0;
	padding: 0;
	list-style: none;
}

.hv2-wf .hv2-hs-form .hs-error-msg,
.hv2-wf .hv2-hs-form .hs-main-font-element {
	color: #E46A71;
	font-size: calc(0.75 * var(--wf-rem));
}

/* "Subscribe →": the theme footer's submit (text + arrow image that nudges on hover). */
.hv2-wf .hv2-hs-form .hs_submit {
	position: relative;
	margin-top: calc(1.6375 * var(--wf-rem)); /* 32px from the consent text to the top of "Subscribe" (Figma measures to the letters) */
	text-align: right;
}

.hv2-wf .hv2-hs-form .hs_submit::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 1.5rem;
	height: 1.5rem;
	background-image: url("../images/arrow-right-white-footer.svg");
	background-size: contain;
	background-repeat: no-repeat;
	transform: translateY(-50%);
	transition: all 0.3s ease-in-out;
	pointer-events: none;
}

.hv2-wf .hv2-hs-form .hs_submit:hover::after {
	right: 0.125rem;
}

.hv2-wf .hv2-hs-form .hs-button {
	margin: 0;
	padding: 0 2.25rem 0 0;
	font-family: "Basel Grotesk";
	font-size: calc(1.125 * var(--wf-rem)); /* 18px */
	line-height: 1.5rem;
	color: #FFFCF5;
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.hv2-wf .hv2-hs-form .submitted-message {
	color: #FFFCF5;
	font-size: calc(1 * var(--wf-rem));
}

@media screen and (max-width: 479px) {
	.hv2-wf .hv2-hs-form .hs-form > .hs_firstname,
	.hv2-wf .hv2-hs-form .hs-form > .hs_lastname { grid-column: 1 / -1; }
	.hv2-wf .hv2-fieldnotes__body{padding:calc(1.5 * var(--wf-rem)) calc(1.5 * var(--wf-rem)) calc(1.5 * var(--wf-rem))}
}

/* ---------- Final CTA ---------- */

.hv2-wf .section_home-cta {
	padding-top: calc(7.5 * var(--wf-rem));
	padding-bottom: 0;
	background-color: #1A1A1A;
	color: #FFFCF5;
}

.hv2-wf .section_home-cta .top-label {
	margin-bottom: calc(1.5 * var(--wf-rem));
	color: #FFFCF5;
}

/* Text and stairs inset from the base line, which runs the full container width. */
.hv2-wf .home_cta-wrap {
	align-items: flex-end;
	justify-content: space-between;
	gap: calc(3 * var(--wf-rem));
	padding: 0 calc(4.6875 * var(--wf-rem));
	border-bottom: 1px solid #FFFCF5;
}

.hv2-wf .home_cta-left {
	padding-bottom: calc(6.25 * var(--wf-rem));
}

.hv2-wf .home_cta-title {
	margin-bottom: calc(2.5 * var(--wf-rem));
	color: #FFFCF5;
	line-height: 1.1;
}

/* Both buttons the same width. */
.hv2-wf .home_cta-btn-wrap .l-btn {
	min-width: calc(17.25 * var(--wf-rem));
}

/* Stairs: one inline SVG on the base line, its steps risen in by ctaStairs(). */
.hv2-wf .hv2-stairs {
	position: relative;
	flex: none;
	width: calc(27.375 * var(--wf-rem)); /* 438px at 1440 */
	max-width: 100%;
}

.hv2-wf .hv2-stairs__svg {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 767px) {
	.hv2-wf .home_cta-wrap {
		flex-direction: column;
		align-items: flex-start;
		padding: 0;
	}
	.hv2-wf .home_cta-left { padding-bottom: 0; }
	.hv2-wf .hv2-stairs {
		width: 70%;
		margin: 0 auto;
	}
	.hv2-wf .home_cta-btn-wrap { flex-direction: column; align-items: stretch; }
	.hv2-wf .home_cta-btn-wrap .l-btn { min-width: 0; width: 100%; }
	.hv2-wf .home_proof-btm-card-text { margin-bottom: calc(3 * var(--wf-rem)); }
}


/* ==========================================================================
   4. Page-level: the fixed header steps aside during the Shapes section.
   home-v2.js toggles the theme's own body.header-hide class (main.css: opacity 0,
   no clicks); this adds a slide and a fade so it doesn't just blink.
   ========================================================================== */

.page-template-page-home-v2 header.header {
	transition: opacity 0.35s ease;
}

.page-template-page-home-v2 .emo.header .header__main,
.page-template-page-home-v2 .emo.header::after {
	transition: translate 0.35s ease;
}

.page-template-page-home-v2.header-hide .emo.header .header__main,
.page-template-page-home-v2.header-hide .emo.header::after {
	translate: 0 calc(-100% - 3rem); /* extra room for the admin bar offset */
}


/* ==========================================================================
   Review fixes (Oct 7)
   ========================================================================== */

/* Recognition: the right-hand text (Coherence Guide) starts where its title starts,
   i.e. after the pointer, instead of hugging the right edge. */
@media screen and (min-width: 1101px) {
	.hv2-wf .precedent_text-block:where(.w-variant-d200934c-5f9b-8716-89ba-d93fe0477218) {
		margin-left: calc(7.5 * var(--wf-rem)); /* pointer width */
	}
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
	.hv2-wf .precedent_text-block:where(.w-variant-d200934c-5f9b-8716-89ba-d93fe0477218) {
		margin-left: calc(4.5 * var(--wf-rem)); /* pointer width at this size */
	}
}


/* Fallback for the footer ticker (the PHP filter in inc/custom-functions/home-v2.php
   normally stops it being output at all on this page). */
.page-template-page-home-v2 .emo.marquee__holder {
	display: none;
}

/* ==========================================================================
   Review fixes (Oct 8)
   ========================================================================== */

/* Shapes: the scroll stops when the animation does (initShapeStack(): T.end 0.58,
   MOBILE.end 0.72), so the same scroll per step but no dead scroll at the end. */
.hv2-wf .shape_stack-scroller { height: 225vh; } /* T.end 0.25: 125vh of pinned scroll (Oct 19: was 300vh / 0.40) */

@media screen and (max-width: 767px) {
	.hv2-wf .shape_stack-scroller { height: 388vh; } /* was 500vh */
}


/* Proof bento: 24px (1.5rem) between every card, as on the live homepage. The right
   column no longer spreads its two columns apart (justify space-between); they share
   the width instead. */
.hv2-wf .home_proof-btm { grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; margin-bottom: 1.5rem; }
.hv2-wf .home_proof-btm-left,
.hv2-wf .home_proof-btm-right-wrap,
.hv2-wf .home_proof-btm-block-1 { grid-row-gap: 1.5rem; }
.hv2-wf .home_proof-btm-right { grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; justify-content: flex-start; }

@media screen and (min-width: 768px) {
	/* the two small cards keep their design width; the tall card takes the rest */
	.hv2-wf .home_proof-btm-right > .home_proof-btm-block-1 { flex: 0 1 calc(24.4375 * var(--wf-rem)); }
	.hv2-wf .home_proof-btm-right > .proof_btm-card-last { flex: 1 1 0; max-width: none; }
}

/* Insights: the cards column takes the free width, so the gap before the Field Notes card
   is the 48px from Figma instead of whatever space-between leaves (was ~88px at 1440). */
@media screen and (min-width: 992px) {
	.hv2-wf .home_insights-btm { justify-content: flex-start; grid-column-gap: calc(2.5 * var(--wf-rem)); }
	.hv2-wf .home_insights-left { flex: 1 1 0; max-width: none; }
	.hv2-wf .home_insights-btm-right.hv2-fieldnotes { flex: 0 0 calc(34.25 * var(--wf-rem)); }
}

/* Field Notes form: the consent row doesn't add its own bottom space, so the gap to
   "Subscribe →" is the ~32px from Figma (was ~64px). */
.hv2-wf .hv2-hs-form .legal-consent-container .hs-form-field { margin-bottom: 0; }
.hv2-wf .hv2-hs-form .hs_submit { margin-top: calc(2 * var(--wf-rem)); }

/* Hero, phones from 400px: a little more room between the buttons and the cards. */
@media screen and (min-width: 400px) and (max-width: 499px) {
	.emo.moments .moments__stage { --stage-pt: 2rem; }
}

/* Shapes, mobile: the subhead is moved under the intro text (initShapeStack()). */
.hv2-wf .shape-subhead.is-inline {
	position: static;
	width: auto;
	margin: calc(1 * var(--wf-rem)) auto 0;
	font-size: calc(1.25 * var(--wf-rem));
	opacity: 1;
	transform: none;
}

/* Recognition, mobile: step text closer to the tiles (was ~110px away at 390 wide). */
@media screen and (max-width: 767px) {
	.hv2-wf .precedent_stack-wrapper { --stack-h: calc(31.5 * var(--wf-rem)); } /* was 35 */
	.hv2-wf .precedent_details-block { padding-top: calc(2 * var(--wf-rem)); } /* was 6 */
	.hv2-wf .precedent_details-block{max-height:3rem}
}




/* ==========================================================================
   Oct 2026 design update
   ========================================================================== */

/* ---------- Eyebrows: title case + underline, a touch larger, everywhere ----------
   Type the eyebrow text in title case in ACF ("Brand Strategy and Design for B2B Tech + AI");
   it is no longer forced to capitals. */
.emo.moments .moments__eyebrow,
.hv2-wf .top-label {
	text-transform: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.emo.moments .moments__eyebrow { font-size: 0.9375rem; }
.hv2-wf .top-label { font-size: calc(1.125 * var(--wf-rem)); } /* 18px */

@media screen and (min-width: 500px) {
	.emo.moments .moments__eyebrow { font-size: min(1.125rem, 2.8cqw); } /* 18px */
}

@media screen and (max-width: 767px) {
	.hv2-wf .top-label { font-size: calc(1 * var(--wf-rem)); }
}

/* The Recognition label repeated under the diagram: same size, but it's a caption,
   not an eyebrow, so no underline. */
@media screen and (min-width: 768px) {
	.hv2-wf .precedent_stack-wrapper::after {
		font-size: calc(1.0625 * var(--wf-rem));
		letter-spacing: 0;
		text-transform: none;
	}
}

/* ---------- Shapes (desktop): title block at the top of the stage ----------
   initShapeStack() moves the section title and the subhead into .shape-stage-head, so
   they stay on screen while the shapes rise and fill, then fade as the closing text comes. */
.hv2-wf .shape-stage-head {
	position: absolute;
	left: 50%;
	top: 13%;
	z-index: 6;
	width: min(92%, calc(64 * var(--wf-rem)));
	text-align: center;
	transform: translateX(-50%);
	pointer-events: none;
}

.hv2-wf .shape-stage-head .section_details {
	position: static;
	padding: 0;
}

.hv2-wf .shape-stage-head .section_details-heading-wrap {
	max-width: calc(60 * var(--wf-rem)) !important; /* two lines, breaking after "you," as in Figma */
	margin-bottom: 0;
}

.hv2-wf .shape-stage-head .shape-subhead {
	position: static;
	width: auto;
	margin: calc(1.5 * var(--wf-rem)) auto 0;
	font-family: var(--_typography---font-styles--body, "Basel Grotesk");
	font-size: calc(1.6875 * var(--wf-rem)); /* Regular 27px / 150% ("Home page Latest" Figma) */
	font-weight: 400;
	line-height: 1.5;
	transform: none;
}

/* ---------- Field Notes form: states (Figma "Form states & style") ---------- */

/* Error: red underline. An empty field shows a short "Required" at its end (Figma); any
   other message (e.g. a wrongly formatted email) goes under the line, so it never covers
   what was typed, however long. */
.hv2-wf .hv2-hs-form .hs-form-field { position: relative; }

.hv2-wf .hv2-hs-form input.hs-input.invalid:not([type="checkbox"]):not([type="radio"]),
.hv2-wf .hv2-hs-form input.hs-input.error:not([type="checkbox"]):not([type="radio"]) {
	border-bottom-color: #C8383F;
}

.hv2-wf .hv2-hs-form input.hs-input.invalid:placeholder-shown,
.hv2-wf .hv2-hs-form input.hs-input.error:placeholder-shown {
	padding-right: calc(5 * var(--wf-rem)); /* room for "Required" */
}

.hv2-wf .hv2-hs-form .hs-form-field > .hs-error-msgs {
	margin: calc(0.25 * var(--wf-rem)) 0 0;
	pointer-events: none;
}

.hv2-wf .hv2-hs-form .hs-form-field:has(input:placeholder-shown) > .hs-error-msgs {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
}

.hv2-wf .hv2-hs-form .hs-error-msg,
.hv2-wf .hv2-hs-form .hs-error-msg.hs-main-font-element {
	display: block;
	color: #C8383F;
	font-size: calc(0.8125 * var(--wf-rem));
	line-height: calc(1.5 * var(--wf-rem)); /* same line as the field text */
}

/* HubSpot's "Please complete this required field." becomes "Required" while the field is empty
   (a wrongly formatted email still shows HubSpot's own message). */
.hv2-wf .hv2-hs-form .hs-form-field:has(input:placeholder-shown) > .hs-error-msgs .hs-error-msg,
.hv2-wf .hv2-hs-form .hs-fieldtype-booleancheckbox .hs-error-msg {
	font-size: 0;
}

.hv2-wf .hv2-hs-form .hs-form-field:has(input:placeholder-shown) > .hs-error-msgs .hs-error-msg::after,
.hv2-wf .hv2-hs-form .hs-fieldtype-booleancheckbox .hs-error-msg::after {
	content: "Required";
	font-size: calc(0.8125 * var(--wf-rem));
}

/* The consent checkbox's message goes under it, in line with the text. */
.hv2-wf .hv2-hs-form .hs-fieldtype-booleancheckbox > .hs-error-msgs {
	margin-top: calc(0.5 * var(--wf-rem));
	padding-left: calc(1.9375 * var(--wf-rem));
}

/* Confirmation (Oct 19 design): after HubSpot confirms the sign-up, the form makes way for
   the thank-you text (ACF) and a "Read more field notes" link; the title and the text above
   the form stay. Without thank-you text in ACF, HubSpot's own message is shown in the same style. */
.hv2-wf .hv2-fieldnotes__thanks {
	display: none;
	padding-top: calc(1.0625 * var(--wf-rem)); /* 17px */
}
.hv2-wf .hv2-fieldnotes.has-thanks:has(.submitted-message) .hv2-hs-form { display: none; }
.hv2-wf .hv2-fieldnotes.has-thanks:has(.submitted-message) .hv2-fieldnotes__thanks { display: block; }
.hv2-wf .hv2-fieldnotes__thanks-title,
.hv2-wf .hv2-hs-form .submitted-message p:first-child {
	margin: 0 0 calc(3.625 * var(--wf-rem)); /* 58px */
	font-family: var(--_typography---font-styles--heading, "Tobias");
	font-size: calc(2.75 * var(--wf-rem)); /* Tobias Regular 44 */
	font-weight: 400;
	line-height: 1.3;
	color: #FFFCF5;
}
.hv2-wf .hv2-fieldnotes__thanks-text,
.hv2-wf .hv2-hs-form .submitted-message p:not(:first-child) {
	margin: 0;
	font-family: var(--_typography---font-styles--heading, "Tobias");
	font-size: calc(1.75 * var(--wf-rem)); /* Tobias Regular 28 / 38 */
	font-weight: 400;
	line-height: calc(2.375 * var(--wf-rem));
	color: #FFFCF5;
}
.hv2-wf .hv2-fieldnotes__thanks-more {
	margin: calc(3.625 * var(--wf-rem)) 0 0; /* 58px */
	text-align: right;
}
/* "Read more field notes →": same text and arrow as "Subscribe →". */
.hv2-wf .hv2-fieldnotes__thanks-link {
	position: relative;
	display: inline-block;
	padding-right: 2.25rem;
	font-family: "Basel Grotesk", Arial, sans-serif;
	font-size: calc(1.125 * var(--wf-rem)); /* 18 / 24 */
	line-height: 1.5rem;
	color: #FFFCF5;
	text-decoration: none;
}
.hv2-wf .hv2-fieldnotes__thanks-link::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 1.5rem;
	height: 1.5rem;
	background: url("../images/arrow-right-white-footer.svg") center / contain no-repeat;
	transform: translateY(-50%);
	transition: right 0.3s ease-in-out;
}
.hv2-wf .hv2-fieldnotes__thanks-link:hover::after,
.hv2-wf .hv2-fieldnotes__thanks-link:focus-visible::after { right: 0.125rem; }

/* Hero intro text: one sentence per line on desktop (press Enter between the sentences
   in the Description field; the line break is kept). */
@media screen and (min-width: 500px) {
	.emo.moments .moments__text { max-width: 52em; }
}

/* Proof quotes: the opening quote mark hangs into the margin, so the first letter lines
   up with the rest of the quote (proof.php wraps the mark in .hv2-hang). */
.hv2-wf .hv2-hang {
	margin-left: -0.4em; /* the width of “ in Tobias */
}

/* Shapes: the outline decorations are gone in the new design. */
.hv2-wf .shape-stage .decor { display: none; }

/* Shapes: the outline -> solid change follows the scroll (--fill, set by initShapeStack()),
   in step with the subhead, so there is no timed transition on top (the export used 0.9s). */
.hv2-wf .section_shape-stack { --fill-dur: 0s; }
.hv2-wf .shape-content { transition-delay: 0s; }

/* Shapes text on desktop at the Figma sizes (18 / 60 / 16px at the 1440 x 1024 frame),
   scaled with the layout (--k). fitText() still shrinks it (--fit) if a shape ever overflows. */
.hv2-wf .shape-stage[data-mode="desktop"] .shape-label {
	font-size: calc(max(14px, 18px * var(--k)) * var(--fit)); /* never below 14px */
	line-height: 1.2;
}

.hv2-wf .shape-stage[data-mode="desktop"] .shape-title {
	font-size: calc(52px * var(--k) * var(--fit)); /* Atul: 52px (Figma frame had 60) */
	line-height: 1.15;
}

.hv2-wf .shape-stage[data-mode="desktop"] .shape-text {
	font-size: calc(max(14px, 16px * var(--k)) * var(--fit)); /* never below 14px */
	line-height: 1.3;
}


/* ==========================================================================
   Oct 15 client feedback
   ========================================================================== */

/* Hero text is antialiased like the Webflow sections (it looked heavier than Figma). */
.emo.moments {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Section titles: 56px / 62px (the logo bar text is also an h2, so it is left out). */
@media screen and (min-width: 768px) {
	.hv2-wf .home_proof-top-title,
	.hv2-wf .section_details-heading,
	.hv2-wf .home_work-title,
	.hv2-wf .home_cta-title {
		font-size: calc(3.5 * var(--wf-rem));
		line-height: calc(3.875 * var(--wf-rem));
	}
}
.recognition_wrap .section_details-heading{max-width:36rem}

/* Bento: names 18px; names and job titles both at "normal" line height (Figma). */
.hv2-wf .card_list-item-title,
.hv2-wf .home_proof-btm-card-title { font-size: calc(1.125 * var(--wf-rem)); }

.hv2-wf .card_list-item-title,
.hv2-wf .card_list-item-text,
.hv2-wf .home_proof-btm-card-title,
.hv2-wf .home_proof-btm-card-tag { line-height: normal; }

/* Black logo bar text: 30px line height. */
.hv2-wf .home_proof-marquee-text { line-height: calc(1.875 * var(--wf-rem)); }

/* Recognition steps: 24px line height; the bold lead in Medium, not Bold. */
.hv2-wf .precedent_text-block,
.hv2-wf .precedent_text-block p { line-height: calc(1.5 * var(--wf-rem)); }

.hv2-wf .precedent_text-block strong,
.hv2-wf .precedent_text-block b {
	font-family: "Basel Grotesk", Arial, sans-serif;
	font-weight: 500;
}

/* Recognition text above the button: 711px wide, 20px / 150%, 48px to the button. */
.hv2-wf .recognition_subtext-wrap {
	max-width: calc(44.4375 * var(--wf-rem));
	gap: calc(3 * var(--wf-rem));
}

.hv2-wf .recognition_subtext-wrap .text-size-large {
	font-size: calc(1.25 * var(--wf-rem));
	line-height: 1.5;
}