/* =====================================================================
 * Version 4 layer (14 October 2026), trimmed to what version 5 uses:
 * hero kicker and buttons, the early-planning facts, the proof heading,
 * the first-meeting steps and the wider spacing between sections.
 * ===================================================================== */

.a3-hero__kicker {
	font-size: 15px;
	font-weight: 500;
	color: rgba(244, 242, 236, .86);
	margin-bottom: 18px;
}

.a3 .a3-hero h1 { font-size: clamp(42px, 6.2vw, 88px); line-height: 1; max-width: 17ch; }

.a3-hero::after {
	background:
		linear-gradient(180deg, rgba(14, 46, 39, .5) 0%, rgba(14, 46, 39, 0) 22%, rgba(14, 46, 39, .1) 46%, rgba(14, 46, 39, .9) 100%),
		linear-gradient(90deg, rgba(14, 46, 39, .7) 0%, rgba(14, 46, 39, .35) 40%, rgba(14, 46, 39, 0) 68%);
}

.a3-hero__line { max-width: 42ch; }

.a3-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(26px, 3vw, 38px); }
.a3-hero__ctas .a3-btn { margin-top: 0; }

.a3 .a3-btn--ghost {
	background: transparent;
	color: var(--g-light);
	box-shadow: inset 0 0 0 1.5px rgba(244, 242, 236, .7);
}

/* ------------------------------------------------- why plan early */

.a4-why { padding-block: var(--g-band); }
.a4-why .a3-h2 { max-width: 18ch; }

.a4-truths { display: grid; grid-template-columns: 1fr; gap: 40px; margin: clamp(40px, 5vw, 64px) 0 clamp(28px, 3vw, 40px); }

@media (min-width: 900px) {
	.a4-truths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); }
}

.a4-truth { padding-top: 22px; border-top: 2px solid var(--g-deep); }
.a4-truth__s { font-family: var(--g-serif); font-size: clamp(23px, 2.1vw, 29px); line-height: 1.25; color: var(--g-ink); }
.a4-truth__n { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--g-soft); }

.a3 .a3-link--on-dark { color: var(--g-light); margin-top: 36px; }
.a3 .a3-link--on-dark:hover { color: var(--g-gold); }

/* -------------------------------------------------------------- proof */

.a3 .a4-eyebrowless { font-family: var(--g-serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--g-gold); margin-bottom: 26px; }

/* ------------------------------------------------- your first meeting */

.a4-steps { list-style: none; counter-reset: a4s; margin: clamp(40px, 5vw, 64px) 0 clamp(36px, 4vw, 52px); padding: 0; display: grid; grid-template-columns: 1fr; gap: 36px; }

@media (min-width: 900px) {
	.a4-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); }
}

.a4-steps li { counter-increment: a4s; padding-top: 22px; border-top: 1px solid rgba(193, 165, 91, .55); }
.a4-steps li::before { content: counter(a4s); display: block; font-family: var(--g-serif); font-size: 44px; line-height: 1; color: var(--g-gold); margin-bottom: 18px; }
.a3 .a4-steps h3 { font-family: var(--g-serif); font-weight: 400; font-size: clamp(25px, 2.2vw, 30px); line-height: 1.15; color: var(--g-light); }
.a4-steps p { margin-top: 10px; font-size: 16.5px; line-height: 1.65; color: var(--g-on); max-width: 36ch; }

.a4-meet .a3-close__line { margin-top: clamp(80px, 10vw, 140px); }

/* More air between the sections of the page. */
.a3 { --g-band: clamp(96px, 12vw, 168px); }

@media (max-width: 699px) {
	.a3 { --g-band: 84px; }
}