/**
 * LTC Home — front-page-specific composition.
 *
 * Most homepage sections (hero, logo rail, programme explorer) reuse
 * component primitives already defined in ltc-components.css /
 * ltc-credibility.css untouched. This file adds only what those
 * primitives don't already cover: the positioning-statement layout,
 * and the front page's section-order spacing.
 */

/* Hero: the shared .ltc-hero primitive (ltc-components.css) sets
   min-height: 88vh, sized for the old dual-overlapping-frame visual.
   The v2 hero composition (single documentary frame + caption) is
   naturally shorter, so that fixed viewport-height minimum was
   forcing ~150px of empty space below the content — confirmed via
   direct measurement (content 636px tall inside a forced 792px-tall
   section at 900px viewport height). Content-driven height instead. */
.ltc-hero {
	min-height: 0;
	padding-block: var(--ltc-space-10) var(--ltc-space-9);
}

/* =========================================================
   Positioning / About v2 — image-anchored narrative. The real
   isometric illustration fills the space that a short statement left
   empty in the earlier two-column-text version; statement, copy and
   proof are now one unified narrative column instead of split across
   two cramped ones.
   ========================================================= */

.ltc-positioning__grid--v2 {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--ltc-space-9);
	/* align-items: start (previous fix) anchored the image at the top
	   but left a large dead area of bare page background below it,
	   since the text column is naturally much taller — confirmed live
	   (image card ~350px vs text column ~730px+ in the same row).
	   Stretch instead: the framed card now fills the full row height,
	   with the image centred inside it, so the space reads as a
	   deliberate surface rather than empty background. */
	align-items: stretch;
}

.ltc-positioning__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ltc-paper-100);
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-image);
	padding: var(--ltc-space-5);
}

/* Real intrinsic size is 1024x683 — 480px display width is well
   inside safe scaling (under half native resolution, no upscaling),
   and fills noticeably more of the card than the previous 340px cap,
   which left the image occupying only ~1/3 of the stretched card's
   height with empty padding above and below. */
.ltc-positioning__visual img {
	width: 100%;
	max-width: 480px;
	height: auto;
	object-fit: contain;
}

.ltc-positioning__copy {
	margin-top: var(--ltc-space-5);
	max-width: 62ch;
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body-lg);
	line-height: var(--ltc-leading-body-lg);
}

.ltc-positioning__proof-row {
	/* Equal-width three-up row, not flex-wrap — flex-wrap with
	   content-based item widths let "Startups -> enterprise" and
	   "On-site & virtual" claim two-per-row at several container
	   widths, stranding the third fact alone on its own row. A fixed
	   3-column grid keeps all three aligned with consistent top rules
	   regardless of label length. */
	margin-top: var(--ltc-space-7);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ltc-space-7);
}

.ltc-positioning__proof-item {
	padding-top: var(--ltc-space-3);
	border-top: 2px solid var(--ltc-teal-500);
}

.ltc-positioning__proof-value {
	font-size: 1.25rem;
	font-weight: var(--ltc-weight-numeral);
	color: var(--ltc-ink-950);
}

.ltc-positioning__proof-label {
	margin-top: var(--ltc-space-1);
	font-size: 13px;
	color: var(--ltc-text-muted);
}

/* Hero headline: tightened from the Gate 0 token's 96px ceiling to the
   redesign brief's explicit 64-78px desktop guidance (and a slightly
   wider content column) so the real, longer H1 copy wraps to about
   four lines at 1440px instead of five. */
.ltc-hero .ltc-hero__headline {
	font-size: clamp(3.5rem, 5vw, 4.875rem);
}

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

/* =========================================================
   Hero visual v2 — a single documentary evidence frame with a real
   caption plate and a small verified-proof corner badge, replacing
   the earlier dual-overlapping-frame + decorative teal squiggle
   composition (rejected as "a rounded photo with a turquoise line").
   ========================================================= */

.ltc-hero__visual {
	height: auto;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ltc-hero__visual .ltc-image-frame {
	position: static;
	width: 100%;
}

.ltc-hero__visual .ltc-image-frame--primary {
	aspect-ratio: 4 / 3.1;
}

.ltc-hero__frame-wrap {
	position: relative;
}

.ltc-hero__badge {
	/* Single-line proof chip — was a two-line stat box ("12 yrs" over
	   a small caption); with the age claim removed this is now one
	   fact, so the box is sized and weighted for one confident line
	   rather than left as an emptied stat shell. */
	position: absolute;
	z-index: 5;
	top: var(--ltc-space-4);
	left: var(--ltc-space-4);
	display: flex;
	align-items: center;
	gap: var(--ltc-space-2);
	background: var(--ltc-paper-50);
	color: var(--ltc-ink-950);
	padding: var(--ltc-space-3) var(--ltc-space-4);
	border-radius: var(--ltc-radius-button);
	box-shadow: var(--ltc-shadow-elevated);
	line-height: 1.2;
}

.ltc-hero__badge::before {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ltc-teal-500);
}

.ltc-hero__badge-label {
	font-size: 13px;
	font-weight: var(--ltc-weight-label);
	letter-spacing: 0.01em;
	color: var(--ltc-ink-950);
	white-space: nowrap;
}

.ltc-hero__caption {
	margin-top: var(--ltc-space-4);
	padding-left: var(--ltc-space-4);
	border-left: 2px solid var(--ltc-teal-500);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: rgba(247, 245, 240, 0.6);
}

/* =========================================================
   Credibility — one bordered evidence panel: a dense 5-item stat
   ticker (not spaced-out columns) directly joined to the full logo
   rail inside the same frame, so proof and clients read as a single
   system rather than two stacked, separate elements.
   ========================================================= */

.ltc-credibility__statement {
	max-width: 40ch;
	margin-bottom: var(--ltc-space-7);
}

.ltc-credibility__panel {
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-card);
	overflow: hidden;
}

.ltc-credibility__ticker {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.ltc-credibility__ticker-item {
	padding: var(--ltc-space-6) var(--ltc-space-5);
	border-right: 1px solid var(--ltc-stone-200);
	border-bottom: 1px solid var(--ltc-stone-200);
}

.ltc-credibility__ticker-item:last-child {
	border-right: none;
}

.ltc-credibility__ticker-value {
	font-weight: var(--ltc-weight-numeral);
	color: var(--ltc-ink-950);
	line-height: 1.1;
}

/* Two of the four facts are short numerals ("2014", "15k+") and read
   best at display size; the other two are descriptive phrases
   ("Custom-built", "On-site, virtual, hybrid") that wrapped to 2-3
   heavy lines at the same size, making the row look unbalanced even
   though the cells themselves stayed equal height. Phrases get a
   smaller, still-confident size instead of matching the numeral
   scale line for line. */
.ltc-credibility__ticker-value--numeral {
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

.ltc-credibility__ticker-value--text {
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	line-height: 1.25;
}

.ltc-credibility__ticker-label {
	margin-top: var(--ltc-space-2);
	font-size: 13px;
	color: var(--ltc-text-muted);
}

.ltc-credibility__logos {
	padding: var(--ltc-space-6) var(--ltc-space-6) var(--ltc-space-5);
	background: var(--ltc-paper-100);
}

.ltc-credibility__logos-heading {
	font-size: var(--ltc-type-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	color: var(--ltc-text-muted);
	font-weight: var(--ltc-weight-label);
}

.ltc-credibility__logos .ltc-logo-rail {
	padding-block: var(--ltc-space-5) 0;
}

/* Problem-first navigation now reuses .ltc-explorer/.ltc-explorer__anchor/
   .ltc-explorer__support directly (see ltc-components.css) — the "not
   sure what the problem is called" diagnostic path is the dominant
   anchor tile, the six buyer-problem groupings are the supporting
   stepped index. No section-specific classes needed here any more. */

/* =========================================================
   Capability Explorer — a compact 3x3 visual grid, not the earlier
   full-width typographic index (the row list read as a directory/
   table rather than an editorial catalogue).

   Sizing is content-driven, not forced: rows are NOT pinned to a
   shared height across the whole grid (no grid-auto-rows: 1fr) — only
   the default CSS Grid behaviour applies, so each ROW stretches its
   own cards to match the tallest card IN THAT ROW, and nothing forces
   all nine cards to match the single tallest card on the page. That
   forced-uniform version measured 394.9px per card / 1761px total
   section height; this version is content-sized instead (see the
   before/after measurements in the redesign report).

   No permanently "featured" card and no permanent amber accent — the
   static resting state is calm and identical across all nine cards
   (teal-100 top rule); amber appears only as a hover/focus accent,
   never as a resting-state or background colour.
   ========================================================= */

.ltc-programme-index__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ltc-space-6);
	flex-wrap: wrap;
}

.ltc-programme-index__intro {
	margin-top: var(--ltc-space-4);
	max-width: 56ch;
	color: var(--ltc-text-muted);
}

.ltc-capability-grid {
	margin: var(--ltc-space-8) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ltc-space-5);
}

.ltc-capability-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--ltc-space-5);
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
	border-top: 3px solid var(--ltc-teal-100);
	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),
		box-shadow var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-capability-card__link:hover,
.ltc-capability-card__link:focus-visible {
	/* Amber is the hover/focus accent only — no card carries it at
	   rest. Motion pass adds a restrained lift + soft shadow to match
	   the rest of the site's hover language, still deliberately
	   modest: no scale, no dramatic elevation. */
	border-color: var(--ltc-amber);
	border-top-color: var(--ltc-amber);
	transform: translateY(calc(-1 * var(--ltc-hover-lift)));
	box-shadow: 0 10px 24px -18px rgba(17, 24, 39, 0.35);
}

.ltc-capability-card__link:hover {
	/* Mouse hover only — the site-wide :focus-visible outline
	   (ltc-base.css, "never suppressed") must remain intact for
	   keyboard focus; this rule must not match focus-visible too. */
	outline: none;
}

.ltc-capability-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ltc-capability-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--ltc-teal-100);
	color: var(--ltc-teal-700);
	transition: color var(--ltc-duration-fast) var(--ltc-ease),
		transform var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-capability-card__icon svg {
	width: 25px;
	height: 25px;
}

.ltc-capability-card__link:hover .ltc-capability-card__icon,
.ltc-capability-card__link:focus-visible .ltc-capability-card__icon {
	color: var(--ltc-amber);
	transform: scale(1.06);
}

.ltc-capability-card__number {
	font-size: 11px;
	color: var(--ltc-text-muted);
	font-weight: var(--ltc-weight-label);
	letter-spacing: var(--ltc-tracking-eyebrow);
	opacity: 0.7;
}

.ltc-capability-card__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-capability-card__description {
	margin-top: var(--ltc-space-2);
	color: var(--ltc-text-muted);
	font-size: 14px;
	line-height: var(--ltc-leading-body);
}

.ltc-capability-card__footer {
	/* No divider rule and a smaller top gap than the old count+arrow
	   row — a compact action line directly under the copy, not a
	   detached footer block. */
	margin-top: var(--ltc-space-4);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ltc-space-3);
}

.ltc-capability-card__count {
	/* Subdued metadata — never the dominant message on the card. */
	font-size: 12px;
	color: var(--ltc-text-muted);
	white-space: nowrap;
}

.ltc-capability-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ltc-space-2);
	font-size: 14px;
	font-weight: var(--ltc-weight-subhead);
	color: var(--ltc-ink-950);
}

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

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

/* =========================================================
   Methodology — native five-stage process, built directly in HTML/CSS/
   SVG (the real diagram, attachment 235, is verified source material
   only — no longer displayed as a raster image). Desktop/tablet: a
   compact horizontal band (five nodes connected left-to-right by small
   arrow connectors) with one explicit "loops back to stage 1" return
   indicator beneath it. Replaces an earlier full-circle version
   (620px, mostly-empty centre, spanning more than one screen —
   confirmed live and rejected). Mobile: .ltc-cycle-mobile, a vertical
   sequence with the same return indicator at the end (see
   ltc-responsive.css for the breakpoint swap). No duplicate legend
   anywhere — the node labels are the only copy of the five stages.
   ========================================================= */

.ltc-cycle {
	margin-top: var(--ltc-space-8);
}

.ltc-cycle__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ltc-space-2);
}

.ltc-cycle__node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ltc-space-3);
	text-align: center;
	width: 150px;
	flex: 0 0 auto;
}

.ltc-cycle__number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ltc-ink-950);
	border: 2px solid var(--ltc-teal-500);
	color: var(--ltc-white);
	font-weight: var(--ltc-weight-heading);
	font-size: 15px;
}

.ltc-cycle__title {
	font-size: 14px;
	font-weight: var(--ltc-weight-subhead);
	color: var(--ltc-white);
	line-height: 1.35;
}

.ltc-cycle__connector {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 18px;
	min-width: 24px;
}

.ltc-cycle__connector svg {
	width: 100%;
	height: 10px;
	opacity: 0.7;
}

.ltc-cycle__return {
	/* Contrast raised from a 0.65-opacity fill / 0.28-opacity dashed
	   border, which measured ~7.5:1 against the dark surface in
	   isolation (already passing WCAG) but still read as "too dim" in
	   context — a faint dashed outline next to the saturated teal
	   connectors above made the whole pill easy to lose. Solid border,
	   higher text opacity and a slightly larger size keep this a
	   secondary element (not a bright primary CTA) while making it
	   immediately legible. */
	margin: var(--ltc-space-6) auto 0;
	max-width: 460px;
	padding: var(--ltc-space-3) var(--ltc-space-5);
	border: 1px solid rgba(247, 245, 240, 0.4);
	border-radius: var(--ltc-radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ltc-space-3);
	color: rgba(247, 245, 240, 0.88);
	font-size: 14px;
	text-align: center;
}

.ltc-cycle__return-arrow {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--ltc-teal-500);
}

/* ---- Mobile vertical sequence (hidden on desktop/tablet — see
   ltc-responsive.css for the swap) ---- */

.ltc-cycle-mobile {
	display: none;
}

/* =========================================================
   How We Deliver — distinct light-neutral section, separate from the
   dark methodology cycle above. Six verified delivery principles as
   clean cards with prominent teal line icons (inline SVG
   reproductions of the live site's own Feather Icons — see
   delivery.php).
   ========================================================= */

.ltc-delivery-grid {
	margin-top: var(--ltc-space-8);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ltc-space-5);
}

.ltc-delivery-card {
	padding: var(--ltc-space-6);
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-card);
	box-shadow: 0 2px 10px rgba(7, 20, 22, 0.04);
	transition: border-color var(--ltc-duration-fast) var(--ltc-ease),
		box-shadow var(--ltc-duration-fast) var(--ltc-ease),
		transform var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-delivery-card:hover,
.ltc-delivery-card:focus-within {
	border-color: var(--ltc-teal-200);
	box-shadow: 0 10px 24px -16px rgba(7, 20, 22, 0.18);
	transform: translateY(calc(-1 * var(--ltc-hover-lift)));
}

.ltc-delivery-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--ltc-teal-100);
	color: var(--ltc-teal-700);
	transition: background var(--ltc-duration-fast) var(--ltc-ease),
		color var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-delivery-card:hover .ltc-delivery-card__icon,
.ltc-delivery-card:focus-within .ltc-delivery-card__icon {
	background: var(--ltc-teal-700);
	color: var(--ltc-white);
}

.ltc-delivery-card__icon svg {
	width: 26px;
	height: 26px;
}

.ltc-delivery-card__title {
	margin-top: var(--ltc-space-5);
	font-size: var(--ltc-type-h4);
	font-weight: var(--ltc-weight-heading);
	color: var(--ltc-ink-950);
}

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

/* =========================================================
   Facilitator + testimonial proof sequence — credibility intro with a
   real documentary photo, a divider, then the full testimonial as the
   closing evidentiary moment. Replaces two separate generic-template
   sections.
   ========================================================= */

.ltc-proof-sequence__intro {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--ltc-space-9);
	align-items: center;
}

.ltc-proof-sequence__frame {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ltc-radius-image);
}

.ltc-proof-sequence__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ltc-proof-sequence__divider {
	/* Was space-10 (96px) top and bottom — confirmed a 192px dead gap
	   at the facilitator-to-testimonial transition. Tightened so the
	   rule reads as a deliberate section break, not empty space. */
	margin: var(--ltc-space-6) 0;
	border-top: 1px solid var(--ltc-stone-200);
}

/* The shared .ltc-testimonial primitive is a 2-column grid (quote +
   a 300px attribution column). The quote is long (3 paragraphs) and
   the attribution is short (name/role/stars) — confirmed live that
   even with align-items:center, the short column still left a large
   dead area under the stars because the row height is driven entirely
   by the quote. Restructured to a single column instead: attribution
   sits directly below the quote as a compact horizontal line, so
   there is no second column height to mismatch against. */
.ltc-proof-sequence__testimonial .ltc-testimonial {
	/* max-width added: the single-column restructure fixed the dead
	   space UNDER the attribution, but left the quote sitting in a
	   full-width row while its own text stayed capped at the 760px
	   article-width token — confirmed live, ~520px of blank space to
	   the right of the paragraphs at 1440px. Capping the whole block
	   (not just the text) keeps quote + attribution content-width and
	   left-aligned, matching the facilitator column above it, instead
	   of floating in an oversized row. */
	/* gap: 0 overrides the shared primitive's 80px column gap (var(
	   --space-9)) — that gap was meant to separate the quote column
	   from a 300px attribution column in the base two-column layout.
	   Collapsed to a single column here, that same 80px became a row
	   gap stacking on top of .ltc-testimonial__side's own margin/
	   padding below, adding up to ~118px between the quote and the
	   attribution instead of the intended ~28px. */
	padding-block: var(--ltc-space-4) 0;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: 920px;
}

.ltc-proof-sequence__testimonial .ltc-testimonial__quote,
.ltc-proof-sequence__testimonial .ltc-testimonial__quote-continue {
	max-width: none;
}

.ltc-proof-sequence__testimonial .ltc-testimonial__side {
	/* Tightened again: 32px+24px, then 24px+16px — now 16px+12px
	   (28px total) to sit inside the ~24-36px "one compact group"
	   target between the last quote paragraph and the attribution. */
	margin-top: var(--ltc-space-3);
	padding-top: var(--ltc-space-3);
	border-top: 1px solid var(--ltc-stone-200);
	display: flex;
	align-items: center;
	gap: var(--ltc-space-4);
}

.ltc-proof-sequence__testimonial .ltc-testimonial__side-rule {
	display: none;
}

.ltc-proof-sequence__testimonial .ltc-testimonial__rating {
	margin-top: 0;
}

/* =========================================================
   Facilitators checklist
   ========================================================= */

.ltc-facilitator-checklist {
	margin: var(--ltc-space-5) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ltc-space-3);
	font-size: var(--ltc-type-body-lg);
	font-weight: var(--ltc-weight-subhead);
}

.ltc-facilitator-checklist li {
	display: flex;
	align-items: center;
	gap: var(--ltc-space-3);
}

.ltc-facilitator-checklist li span[aria-hidden] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ltc-teal-100);
	color: var(--ltc-teal-700);
	font-size: 14px;
	flex: 0 0 auto;
}

/* =========================================================
   FAQ — three grouped columns (buying / delivery / fit), each a
   native details/summary accordion, instead of one long
   undifferentiated stack.
   ========================================================= */

.ltc-faq-columns {
	margin-top: var(--ltc-space-8);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ltc-space-7);
	/* stretch (not start): the divider below needs each column's own
	   box to reach the full row height (driven by the tallest column)
	   for the border-right to actually connect them visually. */
	align-items: stretch;
}

/* The three groups genuinely have different question counts (3/4/2) —
   confirmed live that this left a large blank area below the shorter
   columns. A vertical divider between columns makes the height
   difference read as three intentionally separate groups rather than
   an unfinished layout. */
.ltc-faq-column:not(:last-child) {
	padding-right: var(--ltc-space-7);
	border-right: 1px solid var(--ltc-stone-200);
}

.ltc-faq-column__heading {
	font-size: var(--ltc-type-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	color: var(--ltc-teal-700);
	font-weight: var(--ltc-weight-label);
	padding-bottom: var(--ltc-space-3);
	border-bottom: 2px solid var(--ltc-teal-500);
}

.ltc-faq-list {
	margin-top: var(--ltc-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--ltc-space-3);
}

.ltc-faq-item {
	padding: var(--ltc-space-4) var(--ltc-space-5);
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-card);
}

.ltc-faq-item__question {
	cursor: pointer;
	font-weight: var(--ltc-weight-subhead);
	font-size: 15px;
	line-height: 1.4;
	color: var(--ltc-ink-950);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ltc-space-3);
}

.ltc-faq-item__question::-webkit-details-marker {
	display: none;
}

.ltc-faq-item__question::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ltc-teal-600);
	transition: transform var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-faq-item[open] .ltc-faq-item__question::after {
	transform: rotate(45deg);
}

.ltc-faq-item__answer {
	margin-top: var(--ltc-space-4);
	padding-top: var(--ltc-space-4);
	border-top: 1px solid var(--ltc-stone-200);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
	display: flex;
	flex-direction: column;
	gap: var(--ltc-space-3);
}

/* =========================================================
   Final CTA — the closing band centres on the buyer's action, not on
   the programme count (LTC's identity is customised interventions,
   not a fixed catalogue size). The oversized background "63" numeral
   this section used to carry has been removed for the same reason.
   ========================================================= */

.ltc-final-cta {
	position: relative;
	overflow: hidden;
}

/* =========================================================
   Resources & Insights — Campus To Corporate as its own bordered
   module, clearly separated from the blog-insight grid below.
   ========================================================= */

.ltc-campus-module {
	/* Compact horizontal card, not a large near-empty box: the real
	   book cover (attachment 2106, "C2C Book Cover V4" — a genuine
	   LTC-produced cover, found in the audited uploads library) now
	   anchors the left edge, so padding could drop substantially
	   without the module reading as cramped. */
	padding: var(--ltc-space-5) var(--ltc-space-6);
	max-width: 820px;
	background: var(--ltc-paper-100);
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-card);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ltc-space-6);
	flex-wrap: wrap;
}

.ltc-campus-module__main {
	display: flex;
	align-items: center;
	gap: var(--ltc-space-5);
}

.ltc-campus-module__cover {
	display: block;
	flex: 0 0 auto;
	width: 64px;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(7, 20, 22, 0.14);
}

.ltc-campus-module__cover img {
	display: block;
	width: 100%;
	height: auto;
}

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

.ltc-campus-module .ltc-h3 {
	margin-top: var(--ltc-space-2);
	max-width: 36ch;
}

.ltc-campus-module__tags {
	margin-top: var(--ltc-space-3);
	display: flex;
	gap: var(--ltc-space-2);
	flex-wrap: wrap;
}

.ltc-campus-module__tag {
	padding: 4px var(--ltc-space-3);
	border-radius: var(--ltc-radius-pill);
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
	font-size: 12px;
	color: var(--ltc-text-muted);
}

.ltc-campus-module__links {
	display: flex;
	align-items: center;
	gap: var(--ltc-space-5);
	flex-wrap: wrap;
}

.ltc-resources__intro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ltc-space-6);
	flex-wrap: wrap;
}

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

/* Uniform duotone treatment so the 3 stylistically-mismatched legacy
   images (one real photo, two differently-styled illustrations) read
   as an intentional, consistent editorial choice rather than an
   accidental mix. */
.ltc-card-insight__frame--duotone img {
	filter: grayscale(0.3) contrast(1.05) saturate(0.85);
}

.ltc-card-insight__frame--duotone::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(155deg, rgba(0, 101, 105, 0.16), transparent 60%);
	pointer-events: none;
}

.ltc-card-insight__frame--duotone {
	position: relative;
}