/**
 * LTC Components — buttons, links, the three card families, testimonial,
 * forms, Momentum Line graphic device, dividers.
 *
 * All classes are namespaced ltc-. Depends on custom properties defined
 * in ltc-tokens.css and the base rules in ltc-base.css.
 */

/* =========================================================
   Buttons
   ========================================================= */

.ltc-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ltc-space-2);
	min-height: 54px;
	padding: 0 var(--ltc-space-6);
	border-radius: var(--ltc-radius-button);
	font-family: var(--ltc-font-sans);
	font-size: var(--ltc-type-nav);
	font-weight: var(--ltc-weight-subhead);
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform var(--ltc-duration-fast) var(--ltc-ease),
		background-color var(--ltc-duration-fast) var(--ltc-ease),
		border-color var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-btn__arrow {
	display: inline-flex;
	transition: transform var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-btn:hover .ltc-btn__arrow,
.ltc-btn:focus-visible .ltc-btn__arrow {
	transform: translateX(4px);
}

.ltc-btn:hover,
.ltc-btn:focus-visible {
	transform: translateY(-2px);
}

/* Primary — dark ink on light sections */
.ltc-btn--primary {
	background: var(--ltc-ink-950);
	color: var(--ltc-white);
}

.ltc-btn--primary:hover {
	background: var(--ltc-ink-900);
}

/* Primary — teal on dark sections (teal-700 chosen for AA contrast with white text) */
.ltc-btn--primary-on-dark {
	background: var(--ltc-teal-700);
	color: var(--ltc-white);
}

.ltc-btn--primary-on-dark:hover {
	background: var(--ltc-teal-600);
}

/* Secondary — outline */
.ltc-btn--secondary {
	background: transparent;
	color: var(--ltc-ink-900);
	border-color: var(--ltc-ink-700);
}

.ltc-btn--secondary:hover {
	background: var(--ltc-paper-100);
}

.ltc-section--dark .ltc-btn--secondary {
	color: var(--ltc-white);
	border-color: rgba(247, 245, 240, 0.6);
}

.ltc-section--dark .ltc-btn--secondary:hover {
	background: rgba(247, 245, 240, 0.08);
}

/* =========================================================
   Text links
   ========================================================= */

.ltc-link {
	display: inline-flex;
	align-items: center;
	gap: var(--ltc-space-2);
	color: var(--ltc-ink-900);
	font-weight: var(--ltc-weight-subhead);
	text-decoration-line: underline;
	text-decoration-color: var(--ltc-stone-200);
	text-underline-offset: 4px;
	transition: text-decoration-color var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-link:hover,
.ltc-link:focus-visible {
	text-decoration-color: var(--ltc-teal-600);
}

.ltc-link__arrow {
	transition: transform var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-link:hover .ltc-link__arrow {
	transform: translateX(3px);
}

.ltc-section--dark .ltc-link {
	color: var(--ltc-white);
	text-decoration-color: rgba(247, 245, 240, 0.35);
}

/* =========================================================
   Card family 1 — Programme card
   Flat bordered card, corner arrow, no icon.
   ========================================================= */

.ltc-card-programme {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--ltc-space-7);
	padding: var(--ltc-space-6);
	min-height: 280px;
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-card);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ltc-duration) var(--ltc-ease),
		box-shadow var(--ltc-duration) var(--ltc-ease),
		transform var(--ltc-duration) var(--ltc-ease);
}

.ltc-card-programme:hover,
.ltc-card-programme:focus-visible {
	border-color: var(--ltc-teal-500);
	box-shadow: var(--ltc-shadow-elevated);
	transform: translateY(-2px);
}

.ltc-card-programme__marker {
	font-size: var(--ltc-type-eyebrow);
	font-weight: var(--ltc-weight-label);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	color: var(--ltc-teal-700);
}

.ltc-card-programme__name {
	margin-top: var(--ltc-space-3);
	font-size: var(--ltc-type-h4);
	font-weight: var(--ltc-weight-heading);
	line-height: var(--ltc-leading-h4);
	color: var(--ltc-ink-950);
}

.ltc-card-programme__outcome {
	margin-top: var(--ltc-space-3);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

.ltc-card-programme__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.ltc-card-programme__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--ltc-stone-200);
	color: var(--ltc-ink-950);
	transition: transform var(--ltc-duration-fast) var(--ltc-ease),
		border-color var(--ltc-duration-fast) var(--ltc-ease),
		background-color var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-card-programme:hover .ltc-card-programme__arrow {
	transform: translate(3px, -3px);
	border-color: var(--ltc-teal-500);
	background: var(--ltc-teal-100);
}

/* =========================================================
   Card family 2 — Proof card
   Left "spine" rule + numeral. Not a clickable/hover surface.
   ========================================================= */

.ltc-card-proof {
	position: relative;
	padding: var(--ltc-space-6) var(--ltc-space-6) var(--ltc-space-6) var(--ltc-space-7);
	background: var(--ltc-paper-100);
	border-radius: var(--ltc-radius-card);
}

.ltc-card-proof::before {
	content: '';
	position: absolute;
	top: var(--ltc-space-5);
	bottom: var(--ltc-space-5);
	left: var(--ltc-space-5);
	width: 3px;
	background: var(--ltc-teal-500);
	border-radius: var(--ltc-radius-pill);
}

.ltc-card-proof__fact {
	font-size: clamp(2rem, 3vw, 2.75rem);
	font-weight: var(--ltc-weight-numeral);
	color: var(--ltc-ink-950);
	line-height: 1.05;
}

.ltc-card-proof__fact-label {
	margin-top: var(--ltc-space-1);
	font-size: var(--ltc-type-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	color: var(--ltc-text-muted);
}

.ltc-card-proof__statement {
	margin-top: var(--ltc-space-5);
	padding-top: var(--ltc-space-5);
	border-top: 1px solid var(--ltc-stone-200);
	font-size: var(--ltc-type-body);
	color: var(--ltc-ink-900);
	line-height: var(--ltc-leading-body);
}

.ltc-card-proof__engagement {
	margin-top: var(--ltc-space-3);
	font-size: var(--ltc-type-eyebrow);
	color: var(--ltc-text-muted);
}

/* =========================================================
   Card family 3 — Insight card
   Image-led, no card border, editorial.
   ========================================================= */

.ltc-card-insight {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ltc-card-insight__frame {
	overflow: hidden;
	border-radius: var(--ltc-radius-image);
	aspect-ratio: 4 / 3;
	background: var(--ltc-stone-200);
}

.ltc-card-insight__frame img,
.ltc-card-insight__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-card-insight:hover .ltc-card-insight__frame img,
.ltc-card-insight:hover .ltc-card-insight__placeholder,
.ltc-card-insight:focus-visible .ltc-card-insight__frame img,
.ltc-card-insight:focus-visible .ltc-card-insight__placeholder {
	transform: scale(1.02);
}

.ltc-card-insight__meta {
	display: flex;
	gap: var(--ltc-space-3);
	align-items: center;
	margin-top: var(--ltc-space-4);
	font-size: var(--ltc-type-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	color: var(--ltc-teal-700);
}

.ltc-card-insight__meta span:not(:last-child)::after {
	content: '\2014';
	margin-left: var(--ltc-space-3);
	color: var(--ltc-stone-200);
}

.ltc-card-insight__title {
	margin-top: var(--ltc-space-3);
	font-size: var(--ltc-type-h4);
	font-weight: var(--ltc-weight-heading);
	line-height: var(--ltc-leading-h4);
	color: var(--ltc-ink-950);
	transition: color var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-card-insight:hover .ltc-card-insight__title,
.ltc-card-insight:focus-visible .ltc-card-insight__title {
	color: var(--ltc-teal-700);
}

.ltc-card-insight__excerpt {
	margin-top: var(--ltc-space-2);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

.ltc-card-insight__read {
	margin-top: var(--ltc-space-3);
}

/* =========================================================
   Featured testimonial — full-width editorial composition,
   not a card. The quotation mark is an oversized background
   device, not a small icon.
   ========================================================= */

.ltc-testimonial {
	position: relative;
	padding-block: var(--ltc-space-10);
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--ltc-space-9);
	align-items: start;
}

.ltc-testimonial__mark {
	position: absolute;
	top: calc(var(--ltc-space-10) * -0.28);
	left: calc(var(--ltc-space-7) * -1);
	color: var(--ltc-teal-500);
	opacity: 0.28;
	line-height: 1;
	pointer-events: none;
	z-index: 0;
}

.ltc-testimonial__mark svg {
	width: clamp(120px, 12vw, 200px);
	height: auto;
}

/* The mark enters "at low intensity": its revealed state is the same
   0.28 static opacity above, not the generic .ltc-reveal 1 — it stays
   a quiet background glyph, never becomes a fully opaque element. */
.js .ltc-testimonial__mark.ltc-reveal.is-inview {
	opacity: 0.28;
}

.ltc-testimonial__body {
	position: relative;
	z-index: 1;
	max-width: var(--ltc-article-width);
}

/* Lead sentence: the dominant display quotation. */
.ltc-testimonial__quote {
	font-family: var(--ltc-font-sans);
	font-weight: var(--ltc-weight-heading);
	font-size: clamp(1.625rem, 2.7vw, 2.5rem);
	line-height: 1.26;
	letter-spacing: -0.02em;
	color: var(--ltc-ink-950);
}

.ltc-section--dark .ltc-testimonial__quote {
	color: var(--ltc-white);
}

/* Continuation: exact genuine wording, smaller but still prominent —
   never omitted, never paraphrased. */
.ltc-testimonial__quote-continue {
	margin-top: var(--ltc-space-5);
	font-family: var(--ltc-font-sans);
	font-weight: var(--ltc-weight-subhead);
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	line-height: 1.5;
	color: var(--ltc-text-muted);
	max-width: var(--ltc-text-container);
}

.ltc-section--dark .ltc-testimonial__quote-continue {
	color: rgba(247, 245, 240, 0.68);
}

/* Right-hand column: attribution + verified context, so the
   composition reads as complete rather than left-heavy. */
.ltc-testimonial__side {
	position: relative;
	z-index: 1;
	padding-top: var(--ltc-space-2);
}

.ltc-testimonial__name {
	display: block;
	font-weight: var(--ltc-weight-heading);
	font-size: var(--ltc-type-h4);
	color: var(--ltc-ink-950);
}

.ltc-section--dark .ltc-testimonial__name {
	color: var(--ltc-white);
}

.ltc-testimonial__role {
	margin-top: var(--ltc-space-1);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
}

.ltc-testimonial__rating {
	margin-top: var(--ltc-space-4);
	color: var(--ltc-teal-600);
	letter-spacing: 0.15em;
	font-size: 1.1rem;
}

.ltc-section--dark .ltc-testimonial__rating {
	color: var(--ltc-teal-500);
}

.ltc-testimonial__side-rule {
	margin: var(--ltc-space-6) 0;
	max-width: 64px;
	border-top-width: 2px;
	border-top-color: var(--ltc-teal-500);
}

.ltc-testimonial__verified {
	font-size: var(--ltc-type-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	line-height: 1.7;
	color: var(--ltc-teal-500);
}

.ltc-section--light .ltc-testimonial__verified,
.ltc-section--paper .ltc-testimonial__verified {
	color: var(--ltc-teal-700);
}

/* =========================================================
   Proof strip — verified facts only, no quotation reuse.
   ========================================================= */

.ltc-proof-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ltc-space-7);
}

.ltc-proof-strip__item {
	padding-top: var(--ltc-space-5);
	border-top: 2px solid var(--ltc-teal-500);
}

.ltc-proof-strip__value {
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	font-weight: var(--ltc-weight-numeral);
	color: var(--ltc-ink-950);
}

.ltc-section--dark .ltc-proof-strip__value {
	color: var(--ltc-white);
}

.ltc-proof-strip__label {
	margin-top: var(--ltc-space-2);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

/* =========================================================
   Hero — immersive, asymmetric, one composition.
   ========================================================= */

.ltc-hero {
	position: relative;
	overflow: hidden;
	background: var(--ltc-ink-950);
	color: var(--ltc-white);
	min-height: 88vh;
	display: flex;
	align-items: center;
}

.ltc-hero__bg-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(247, 245, 240, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(247, 245, 240, 0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 70% 40%, #000 40%, transparent 90%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 40%, #000 40%, transparent 90%);
}

.ltc-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--ltc-space-9);
	align-items: center;
	width: 100%;
}

.ltc-hero__content {
	max-width: 640px;
}

.ltc-hero .ltc-hero__headline {
	margin-top: var(--ltc-space-5);
	font-size: var(--ltc-type-hero);
	line-height: var(--ltc-leading-hero);
	letter-spacing: var(--ltc-tracking-display);
	font-weight: var(--ltc-weight-heading);
	color: var(--ltc-white);
}

.ltc-hero__lede {
	margin-top: var(--ltc-space-6);
	max-width: 46ch;
	font-size: var(--ltc-type-body-lg);
	line-height: var(--ltc-leading-body-lg);
	color: rgba(247, 245, 240, 0.78);
}

.ltc-hero__ctas {
	margin-top: var(--ltc-space-7);
	display: flex;
	gap: var(--ltc-space-4);
	flex-wrap: wrap;
}

.ltc-hero__trust {
	/* Individually controlled items, not one fragile text string — a
	   fixed 46ch max-width on the old single-string version was
	   forcing "Custom-built · On-site · Virtual · Across India" to
	   wrap awkwardly even where the hero column had plenty of room.
	   Each item is now atomic (white-space: nowrap) so wrapping, if it
	   happens at narrow widths, only ever occurs between whole items. */
	margin-top: var(--ltc-space-8);
	padding-top: var(--ltc-space-5);
	border-top: 1px solid rgba(247, 245, 240, 0.16);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	padding-left: 0;
}

.ltc-hero__trust li {
	font-size: var(--ltc-type-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	color: rgba(247, 245, 240, 0.7);
	white-space: nowrap;
}

.ltc-hero__trust li:not(:last-child)::after {
	content: '\00b7';
	display: inline-block;
	margin: 0 var(--ltc-space-3);
	color: rgba(247, 245, 240, 0.35);
}

.ltc-hero__visual {
	position: relative;
	height: clamp(360px, 46vw, 560px);
}

.ltc-hero__visual .ltc-image-frame {
	position: absolute;
}

.ltc-hero__visual .ltc-image-frame--primary {
	top: 0;
	right: 0;
	width: 72%;
	aspect-ratio: 4 / 5;
}

.ltc-hero__visual .ltc-image-frame--secondary {
	bottom: 0;
	left: 0;
	width: 46%;
	aspect-ratio: 1 / 1;
	box-shadow: var(--ltc-shadow-elevated);
}

.ltc-hero__visual .ltc-momentum-line {
	position: absolute;
	left: -8%;
	bottom: 18%;
	width: 60%;
	z-index: 2;
}

/* =========================================================
   Editorial statement — a single oversized paper-section
   line, distinct from the standard H2 pattern.
   ========================================================= */

.ltc-editorial-statement {
	font-family: var(--ltc-font-sans);
	font-weight: var(--ltc-weight-heading);
	font-size: clamp(2.25rem, 4.4vw, 3.75rem);
	line-height: 1.12;
	letter-spacing: var(--ltc-tracking-h2);
	color: var(--ltc-ink-950);
	max-width: 20ch;
}

/* =========================================================
   Programme explorer — one anchor + varied supporting cards.
   ========================================================= */

.ltc-explorer {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--ltc-grid-gap);
}

.ltc-explorer__anchor {
	/* Narrower than the original 7/12 span: the six supporting problem
	   paths now form a compact 2x3 grid (see .ltc-explorer__support-list
	   below) instead of one long stacked column, so this panel no
	   longer needs to match a much taller sibling — it can stay close
	   to its own content height instead of stretching into a mostly
	   empty box (confirmed live: the old 7/5 split + single-column
	   support list left this panel 400px+ taller than its content). */
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	/* Not space-between: with the support grid now driving row height
	   (align-items: stretch on .ltc-explorer), space-between would
	   concentrate 100+px of leftover height into one visible gap
	   between the paragraph and the CTA. Top-aligned flow keeps the
	   copy and CTA grouped together; any leftover height reads as
	   ordinary bottom padding instead. */
	padding: var(--ltc-space-8);
	background: var(--ltc-ink-950);
	color: var(--ltc-white);
	border-radius: var(--ltc-radius-card);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform var(--ltc-duration) var(--ltc-ease);
}

.ltc-explorer__anchor:hover,
.ltc-explorer__anchor:focus-visible {
	transform: translateY(-2px);
}

.ltc-explorer__anchor-arrow {
	display: inline-block;
	transition: transform var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-explorer__anchor:hover .ltc-explorer__anchor-arrow,
.ltc-explorer__anchor:focus-visible .ltc-explorer__anchor-arrow {
	transform: translateX(4px);
}

.ltc-explorer__anchor-texture {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(135deg, rgba(0, 183, 190, 0.22), transparent 55%);
}

.ltc-explorer__anchor-top {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ltc-explorer__anchor-category {
	font-size: var(--ltc-type-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	color: var(--ltc-teal-500);
}

.ltc-explorer__anchor .ltc-explorer__anchor-title {
	position: relative;
	z-index: 1;
	margin-top: var(--ltc-space-6);
	font-size: clamp(2rem, 3vw, 2.75rem);
	font-weight: var(--ltc-weight-heading);
	line-height: 1.08;
	max-width: 14ch;
	color: var(--ltc-white);
}

.ltc-explorer__anchor-outcome {
	position: relative;
	z-index: 1;
	margin-top: var(--ltc-space-4);
	max-width: 38ch;
	color: rgba(247, 245, 240, 0.86);
	font-size: var(--ltc-type-body-lg);
	line-height: var(--ltc-leading-body-lg);
}

.ltc-explorer__anchor-footer {
	position: relative;
	z-index: 1;
	margin-top: var(--ltc-space-7);
	display: flex;
	align-items: center;
	gap: var(--ltc-space-3);
	color: var(--ltc-white);
	font-weight: var(--ltc-weight-subhead);
}

.ltc-explorer__support-list {
	/* Compact 2-column x 3-row grid — was a single stacked column of
	   six full-width cards, which made this the tallest element in the
	   section and (via grid default align-items: stretch) forced the
	   anchor panel to stretch to match, creating the large empty area
	   inside it. A 2x3 grid roughly halves the total height. */
	grid-column: span 7;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ltc-grid-gap);
}

.ltc-explorer__support {
	/* Block layout with the arrow pinned to the corner via absolute
	   positioning, not a flex row with the arrow as a sibling — in the
	   narrower 2-column grid, the arrow's own box plus its flex gap
	   was taking ~50px away from the text column on every card, which
	   pushed titles like "Sales and customer performance" onto a
	   second line they didn't need. Freeing that width lets more
	   titles fit on one line, which is most of why these cards were
	   running 260-320px tall. */
	position: relative;
	display: block;
	padding: var(--ltc-space-5) var(--ltc-space-7) var(--ltc-space-5) var(--ltc-space-5);
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
	border-top: 3px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-card);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ltc-duration-fast) var(--ltc-ease),
		transform var(--ltc-duration-fast) var(--ltc-ease),
		background-color var(--ltc-duration-fast) var(--ltc-ease);
}

/* Restrained variation so the three/two supporting cards read as a
   considered set rather than identical recoloured boxes: alternating
   tone plus a top rule that only turns teal on the "primary" alternate. */
.ltc-explorer__support-list .ltc-explorer__support:nth-child(even),
.ltc-grid > .ltc-explorer__support:nth-child(even) {
	background: var(--ltc-paper-50);
}

.ltc-explorer__support-list .ltc-explorer__support:nth-child(odd),
.ltc-grid > .ltc-explorer__support:nth-child(odd) {
	border-top-color: var(--ltc-teal-100);
}

.ltc-explorer__support:hover,
.ltc-explorer__support:focus-visible {
	border-color: var(--ltc-teal-500);
	border-top-color: var(--ltc-teal-500);
	transform: translateX(2px);
}

.ltc-explorer__support-index {
	font-size: var(--ltc-type-eyebrow);
	color: var(--ltc-teal-700);
	font-weight: var(--ltc-weight-label);
}

.ltc-explorer__support-title {
	margin-top: var(--ltc-space-1);
	font-size: var(--ltc-type-h4);
	font-weight: var(--ltc-weight-heading);
	color: var(--ltc-ink-950);
}

.ltc-explorer__support-outcome {
	margin-top: var(--ltc-space-1);
	color: var(--ltc-text-muted);
	font-size: 13px;
	line-height: 1.4;
}

.ltc-explorer__support-arrow {
	position: absolute;
	top: var(--ltc-space-5);
	right: var(--ltc-space-5);
	color: var(--ltc-ink-950);
	transition: transform var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-explorer__support:hover .ltc-explorer__support-arrow,
.ltc-explorer__support:focus-visible .ltc-explorer__support-arrow {
	transform: translate(3px, -3px);
}

/* =========================================================
   Momentum steps — the four-stage "How LTC works" device.
   Desktop: horizontal, connected by a drawn path. Mobile:
   vertical journey via ltc-responsive.css.
   ========================================================= */

.ltc-momentum-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ltc-space-6);
}

.ltc-momentum-steps__connector {
	position: absolute;
	top: 23px;
	left: 0;
	width: 100%;
	height: 32px;
	z-index: 0;
}

.ltc-momentum-steps__item {
	position: relative;
	z-index: 1;
}

.ltc-momentum-steps__node {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ltc-paper-50);
	border: 2px solid var(--ltc-teal-500);
	color: var(--ltc-ink-950);
	font-weight: var(--ltc-weight-heading);
	font-size: var(--ltc-type-nav);
}

.ltc-section--dark .ltc-momentum-steps__node {
	background: var(--ltc-ink-950);
	color: var(--ltc-white);
}

.ltc-momentum-steps__title {
	margin-top: var(--ltc-space-4);
	font-size: var(--ltc-type-h4);
	font-weight: var(--ltc-weight-heading);
	color: var(--ltc-ink-950);
}

.ltc-section--dark .ltc-momentum-steps__title {
	color: var(--ltc-white);
}

.ltc-momentum-steps__desc {
	margin-top: var(--ltc-space-2);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
	max-width: 26ch;
}

.ltc-section--dark .ltc-momentum-steps__desc {
	color: rgba(247, 245, 240, 0.65);
}

/* =========================================================
   Image system — layered editorial placeholders with a
   simulated grain texture, captions and teal annotation.
   No external image requests: grain is an inline SVG data URI.
   ========================================================= */

.ltc-image-frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--ltc-radius-image);
	background: linear-gradient(155deg, var(--ltc-ink-700) 0%, var(--ltc-ink-950) 100%);
}

.ltc-image-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.5;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
	pointer-events: none;
}

.ltc-image-frame--warm {
	background: linear-gradient(155deg, var(--ltc-teal-700) 0%, var(--ltc-ink-900) 100%);
}

.ltc-image-frame--paper {
	background: linear-gradient(155deg, var(--ltc-stone-200) 0%, var(--ltc-paper-100) 100%);
}

/* Photo variant — a real <img> fills the frame; the grain overlay and
   gradient background still work underneath as a subtle texture/
   loading colour, so a frame can move from placeholder to real
   photography with no markup change beyond adding the <img>. */
.ltc-image-frame--photo img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ltc-image-frame__caption {
	position: absolute;
	left: var(--ltc-space-4);
	bottom: var(--ltc-space-4);
	z-index: 2;
	padding: var(--ltc-space-2) var(--ltc-space-3);
	background: rgba(7, 20, 22, 0.55);
	backdrop-filter: none;
	color: var(--ltc-white);
	font-size: 12px;
	line-height: 1.5;
	border-radius: 6px;
	max-width: calc(100% - var(--ltc-space-7));
}

.ltc-image-frame--paper .ltc-image-frame__caption {
	background: rgba(255, 255, 255, 0.85);
	color: var(--ltc-ink-950);
}

/* Preview-only direction label (bracketed in markup, e.g. "[Focal]") —
   deliberately understated so it reads as an annotation about the
   future photograph, never as production UI chrome. */
.ltc-image-frame__annotation {
	position: absolute;
	top: var(--ltc-space-4);
	right: var(--ltc-space-4);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	color: rgba(0, 183, 190, 0.75);
	font-size: 10px;
	font-weight: var(--ltc-weight-label);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.ltc-image-frame__annotation::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ltc-image-group {
	position: relative;
}

.ltc-image-group__primary {
	width: 82%;
}

.ltc-image-group__secondary {
	position: absolute;
	right: 0;
	bottom: calc(var(--ltc-space-7) * -1);
	width: 42%;
	box-shadow: var(--ltc-shadow-elevated);
}

.ltc-image-group__detail {
	position: absolute;
	left: calc(var(--ltc-space-6) * -1);
	top: 55%;
	width: 30%;
	box-shadow: var(--ltc-shadow-elevated);
	border: 4px solid var(--ltc-paper-50);
}

/* =========================================================
   Forms
   ========================================================= */

.ltc-field {
	display: flex;
	flex-direction: column;
	gap: var(--ltc-space-2);
	margin-bottom: var(--ltc-space-5);
}

.ltc-field__label {
	font-size: var(--ltc-type-nav);
	font-weight: var(--ltc-weight-label);
	color: var(--ltc-ink-900);
}

.ltc-field__hint {
	font-size: var(--ltc-type-eyebrow);
	color: var(--ltc-text-muted);
}

.ltc-input,
.ltc-textarea,
.ltc-select {
	width: 100%;
	min-height: 54px;
	padding: 0 var(--ltc-space-4);
	font-family: var(--ltc-font-sans);
	font-size: 16px; /* prevents iOS zoom, satisfies 16px minimum body text on mobile forms */
	color: var(--ltc-ink-950);
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-button);
	transition: border-color var(--ltc-duration-fast) var(--ltc-ease),
		box-shadow var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-textarea {
	min-height: 140px;
	padding-block: var(--ltc-space-3);
	resize: vertical;
}

.ltc-input:focus-visible,
.ltc-textarea:focus-visible,
.ltc-select:focus-visible {
	outline: none;
	border-color: var(--ltc-teal-600);
	box-shadow: 0 0 0 3px var(--ltc-teal-100);
}

.ltc-field--error .ltc-input,
.ltc-field--error .ltc-textarea,
.ltc-field--error .ltc-select {
	border-color: var(--ltc-error);
}

.ltc-field--success .ltc-input,
.ltc-field--success .ltc-textarea,
.ltc-field--success .ltc-select {
	border-color: var(--ltc-success);
}

.ltc-field__message {
	display: flex;
	align-items: center;
	gap: var(--ltc-space-2);
	font-size: var(--ltc-type-eyebrow);
}

.ltc-field__message--error {
	color: var(--ltc-error);
}

.ltc-field__message--success {
	color: var(--ltc-success);
}

/* =========================================================
   Dividers / editorial rules
   ========================================================= */

.ltc-rule {
	border: none;
	border-top: 1px solid var(--ltc-stone-200);
	margin: 0;
}

.ltc-section--dark .ltc-rule {
	border-top-color: rgba(247, 245, 240, 0.14);
}

/* Momentum Line graphic device and the .ltc-reveal scroll-reveal
   primitive both moved to ltc-motion.css (with the rest of the
   homepage motion-pass rules, including the reduced-motion overrides
   for both) so every entrance-animation rule lives in one place. */

/* =========================================================
   Contact Form 7 — reCAPTCHA widget width/height fix
   ========================================================= */

/* CORRECTED 2026-08-09 — the first version of this fix (2026-08-08)
   was verified as insufficient against the real staging markup and is
   replaced here with a hardened version, after reading the ACTUAL
   plugin responsible rather than assuming Contact Form 7 core's own
   [recaptcha] behaviour.
   Root cause, precisely: the live "Recaptcha" field's [recaptcha] tag
   is NOT rendered by Contact Form 7 core at all — this CF7 version's
   own recaptcha module registers that tag as a pure no-op
   ('__return_empty_string', see wpcf7_recaptcha_add_form_tag_recaptcha()
   in contact-form-7/modules/recaptcha/recaptcha.php). The actual
   visible v2 checkbox widget is rendered by a SEPARATE, real plugin —
   wpcf7-recaptcha (site-source/wp-content/plugins/wpcf7-recaptcha/
   recaptcha-v2.php) — which is not part of this local wp-pilot's
   minimal plugin set, so its exact markup could not be observed
   rendering live here; it was instead confirmed by reading that
   plugin's PHP source directly (iqfix_wpcf7_recaptcha_form_tag_handler()
   and wpcf7-recaptcha-controls.js's recaptchaCallback(), which calls
   grecaptcha.render() on the target element). The real, confirmed
   markup is:
     <span class="wpcf7-form-control-wrap recaptcha" data-name="recaptcha">
       <span class="wpcf7-form-control wpcf7-recaptcha g-recaptcha" data-sitekey="...">
         <!-- grecaptcha.render() injects Google's fixed ~304x78px div+iframe here -->
       </span>
     </span>
   — wrapped inside this form's own hand-authored <label>Recaptcha
   [recaptcha]</label>. Blocksy's generic responsive-embed reset
   (`embed, iframe, object, video { max-width: 100% }`, static/sass/
   frontend/2-basics/reset.scss, confirmed in both the SASS source and
   the compiled bundle — no more specific or higher-precedence rule
   exists anywhere in Blocksy or any of the other 20 production plugins'
   CSS, all checked directly) compresses that fixed-size widget below
   its natural rendering size whenever its container is narrower than
   the widget's own design width. Unlike a genuinely responsive element,
   the widget's internal layout does not reflow when the box is forced
   smaller by CSS — it visually squashes/overlaps the checkbox, logo and
   Privacy/Terms text instead, exactly the reported symptom.
   The previous version of this fix targeted the correct rule but not
   forcefully enough for the real, deployed cascade order on staging —
   this version is deliberately more forceful: !important on every
   declaration (justified here specifically because this overrides one
   single, extremely low-specificity, framework-level reset rule on a
   third-party embedded widget this theme does not otherwise style —
   not a general pattern used elsewhere in this codebase), explicit
   min-width/min-height floors (a spec-guaranteed mechanism — a
   min-width always wins over width/max-width in the browser's used-
   value calculation, regardless of which rule "wins" the normal
   cascade), and coverage at every real nesting level confirmed above,
   using ONLY Google's/the plugin's own stable, real class names —
   nothing invented, nothing reaching inside the iframe's own document. */
.wpcf7 .wpcf7-form-control-wrap.recaptcha,
.wpcf7 .wpcf7-recaptcha,
.wpcf7 .g-recaptcha {
	display: block !important;
	max-width: none !important;
	min-width: 304px;
	max-height: none !important;
	min-height: 78px;
	overflow-x: auto !important;
	overflow-y: hidden !important;
}

.wpcf7 .wpcf7-form-control-wrap.recaptcha > div,
.wpcf7 .wpcf7-recaptcha > div,
.wpcf7 .g-recaptcha > div {
	max-width: none !important;
	min-width: 304px;
}

.wpcf7 .wpcf7-form-control-wrap.recaptcha iframe,
.wpcf7 .wpcf7-recaptcha iframe,
.wpcf7 .g-recaptcha iframe {
	max-width: none !important;
	max-height: none !important;
}