/* =====================================================================
 * Version 5 (15 October 2026): the page sells a diagnosis. The visitor
 * names their moment in life, sees the blind spot that comes with it,
 * and is invited to a named service, the Protection Review.
 *
 * Soft, Apple-like finish (CTO, 15 October): radii follow the size of the
 * thing, pills for actions, 28px for large surfaces, 14 to 20px inside.
 * Sections that hold one thing are centred and use the full width.
 * ===================================================================== */

.a3 { --r-lg: 28px; --r-md: 20px; --r-sm: 14px; }

/* ---------------------------------------------------------------- actions */

.a3 .a3-btn {
	border-radius: 999px;
	min-height: 52px;
	padding: 0 28px;
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: 0;
	box-shadow: 0 1px 2px rgba(14, 46, 39, .14);
	transition: background-color .2s ease, color .2s ease, box-shadow .25s var(--g-ease), transform .25s var(--g-ease);
}
.a3 .a3-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(14, 46, 39, .45); }
.a3 .a3-btn:active { transform: scale(.98); }
.a3 .a3-btn:focus-visible { outline-offset: 3px; }

.a3 .a3-btn--ghost {
	background: rgba(244, 242, 236, .14);
	color: var(--g-light);
	box-shadow: inset 0 0 0 1px rgba(244, 242, 236, .28);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}
.a3 .a3-btn--ghost:hover { background: rgba(244, 242, 236, .22); color: var(--g-light); box-shadow: inset 0 0 0 1px rgba(244, 242, 236, .4); }

.a3 .a3-link {
	padding: 12px 22px;
	border-bottom: 0;
	border-radius: 999px;
	background: rgba(14, 46, 39, .06);
	color: var(--g-deep);
	transition: background-color .2s ease;
}
.a3 .a3-link:hover { background: rgba(14, 46, 39, .1); color: var(--g-deep); }
.a3 .a3-link--on-dark { background: rgba(244, 242, 236, .1); color: var(--g-light); }
.a3 .a3-link--on-dark:hover { background: rgba(244, 242, 236, .16); color: var(--g-light); }

/* ------------------------------------------------- which of these is you */

.a5-moment { padding-block: var(--g-band); }
.a5-moment__intro { margin-top: 20px; font-family: var(--g-serif); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.45; color: var(--g-on); max-width: 40ch; }

.a5-pick { margin-top: clamp(44px, 5.4vw, 72px); display: grid; grid-template-columns: 1fr; gap: 40px; }

@media (min-width: 960px) {
	.a5-pick { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
}

.a5-pick__list { display: none; }
.a5-pick.is-live .a5-pick__list { display: grid; gap: 4px; }

.a3 .a5-pick__tab {
	display: block;
	width: 100%;
	appearance: none;
	margin: 0;
	padding: 15px 20px;
	border: 0;
	border-radius: var(--r-sm);
	background: none;
	box-shadow: none;
	text-align: left;
	cursor: pointer;
	font-family: var(--g-serif);
	font-size: clamp(21px, 1.9vw, 26px);
	line-height: 1.25;
	color: var(--g-on-quiet);
	transition: color .2s ease, background-color .2s ease;
	white-space: normal;
	min-width: 0;
}
.a5-pick > * { min-width: 0; }
.a3 .a5-pick__tab:hover, .a3 .a5-pick__tab:focus { background: rgba(244, 242, 236, .05); color: var(--g-light); }
.a3 .a5-pick__tab[aria-selected="true"] { background: rgba(244, 242, 236, .1); color: var(--g-light); }
.a3 .a5-pick__tab:focus-visible { outline: 2px solid var(--g-gold); outline-offset: 2px; }

/* Without the script every blind spot is shown in turn. */
.a5-pick__panel + .a5-pick__panel { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--g-rule-dark); }
.a5-pick.is-live .a5-pick__panel + .a5-pick__panel { margin-top: 0; padding-top: 0; border-top: 0; }
.a5-pick.is-live .a5-pick__panel[hidden], .a5-pick__empty[hidden] { display: none; }
.a5-pick__empty { display: none; }
.a5-pick.is-live .a5-pick__empty:not([hidden]) { display: block; }

.a5-pick.is-live .a5-pick__panels {
	padding: clamp(28px, 3.6vw, 52px);
	border-radius: var(--r-lg);
	background: linear-gradient(160deg, rgba(244, 242, 236, .08), rgba(244, 242, 236, .03));
	border: 1px solid rgba(244, 242, 236, .1);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
}

.a5-pick__panel:focus-visible { outline: 2px solid var(--g-gold); outline-offset: 12px; }

.a3 .a5-pick__name { font-family: var(--g-serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; color: var(--g-light); margin-bottom: 18px; }
.a3 .a5-pick.is-live .a5-pick__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.a5-pick__miss { font-family: var(--g-serif); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--g-gold); }

.a5-pick__s {
	margin-top: 16px;
	font-family: var(--g-serif);
	font-size: clamp(32px, 3.4vw, 48px);
	line-height: 1.12;
	letter-spacing: -.012em;
	color: var(--g-light);
	max-width: 22ch;
	text-wrap: balance;
}

.a5-pick__b { margin-top: 26px; font-size: 18px; line-height: 1.7; color: var(--g-on); max-width: 52ch; }

.a5-pick__check {
	margin-top: 28px;
	padding: 16px 20px;
	border-radius: var(--r-sm);
	background: rgba(193, 165, 91, .12);
	font-size: 16px;
	line-height: 1.6;
	color: var(--g-light);
	max-width: 52ch;
}

.a5-pick__panel .a3-btn { margin-top: 26px; }

.a5-pick__empty p:first-child { font-family: var(--g-serif); font-size: clamp(30px, 3vw, 42px); line-height: 1.15; color: var(--g-on-quiet); max-width: 16ch; }
.a5-pick__empty-s { margin-top: 16px; font-size: 15px; color: var(--g-on-quiet); }

@media (prefers-reduced-motion: no-preference) {
	.a5-pick__panel.is-entering > * { animation: a3-rise .35s var(--g-ease) both; }
	.a5-pick__panel.is-entering > :nth-child(3) { animation-delay: .03s; }
	.a5-pick__panel.is-entering > :nth-child(4) { animation-delay: .06s; }
	.a5-pick__panel.is-entering > :nth-child(n+5) { animation-delay: .09s; }
}

/* ------------------------------------------------- the protection review */

.a5-review { padding-block: var(--g-band); }

.a5-review__grid { display: grid; grid-template-columns: 1fr; gap: 64px; }

@media (min-width: 960px) {
	.a5-review__grid { grid-template-columns: 6fr 5fr; gap: clamp(56px, 7vw, 112px); align-items: center; }
}

.a5-review__lead { margin-top: 22px; font-family: var(--g-serif); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.35; color: var(--g-ink); max-width: 36ch; }
.a5-review__body { margin-top: 22px; font-size: 18px; line-height: 1.7; color: var(--g-soft); max-width: 46ch; }
.a5-review__terms { margin-top: 30px; font-size: 16px; font-weight: 500; color: var(--g-ink); }

.a3 .a5-btn--dark { margin-top: 18px; background: var(--g-deep); color: var(--g-light); }
.a3 .a5-btn--dark:hover { background: var(--g-mid); }
.a3 .a5-btn--dark:focus-visible { outline: 2px solid var(--g-deep); }

/* The plan: a sheet of paper, the one tangible thing on the page. */
.a5-map { margin: 0; }

.a5-map__paper {
	position: relative;
	padding: clamp(30px, 3.4vw, 46px);
	background: #FDFCF8;
	border: 1px solid rgba(14, 46, 39, .1);
	border-radius: var(--r-md);
	box-shadow: 0 1px 2px rgba(14, 46, 39, .06), 0 40px 70px -30px rgba(14, 46, 39, .35);
}

.a5-map__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--g-deep); }
.a5-map__brand { font-family: var(--g-serif); font-size: 15px; letter-spacing: .24em; color: var(--g-deep); }
.a5-map__for { font-size: 12.5px; color: var(--g-soft); }

.a5-map__title { margin-top: 26px; font-family: var(--g-serif); font-size: clamp(34px, 3.2vw, 44px); line-height: 1; color: var(--g-deep); }

.a5-map__row { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 20px 0; border-bottom: 1px solid rgba(14, 46, 39, .12); }
.a5-map__row:first-of-type { margin-top: 18px; }
.a5-map__k { font-size: 13.5px; font-weight: 600; color: var(--g-deep); }
.a5-map__v { display: grid; gap: 9px; }
.a5-map__v i { display: block; width: var(--w); height: 7px; border-radius: 999px; background: rgba(14, 46, 39, .12); }
.a5-map__v i.g { background: rgba(193, 165, 91, .55); }

.a5-map figcaption { margin-top: 30px; font-size: 14px; line-height: 1.5; color: var(--g-soft); max-width: 40ch; }

/* ------------------------------------------------------- the three events
   All three shown, one after another, each with its three moments side by
   side, everything centred. */

.a5 .a3-events { text-align: center; }
.a5 .a3-events .a3-h2, .a5 .a3-events__intro, .a5 .a3-panel__q { margin-inline: auto; }
.a5 .a3-events .a3-panel { margin-top: clamp(64px, 7vw, 96px); }
.a5 .a3-events .a3-panel + .a3-panel { padding-top: clamp(64px, 7vw, 96px); }
.a5 .a3-moments { text-align: center; }
.a5 .a3-moments svg { margin-inline: auto; }
.a5 .a3-moments p { margin-inline: auto; }

@media (min-width: 700px) {
	.a5 .a3-moments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
}

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

.a4-truth { padding: 28px; border-top: 0; border-radius: var(--r-md); background: #FBFAF6; box-shadow: 0 1px 2px rgba(14, 46, 39, .05); }

/* ------------------------------------------------------------ figures */

.a3-scale__track, .a3-scale__fill { border-radius: 999px; }
.a3-scale__end { border-radius: 2px; }
.a3-ticks__row i { border-radius: 2px; }

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

.a5-close { text-align: center; }
.a5-close .a3-h2, .a5-close .a3-close__line { margin-inline: auto; }
.a5-close .a3-close__line { color: var(--g-light); font-weight: 400; }
.a5-close.a4-meet .a3-close__line { margin-top: clamp(64px, 8vw, 112px); }
.a5-close .a4-steps { text-align: left; gap: 16px; }
.a5-close .a4-steps li { padding: 28px; border-top: 0; border-radius: var(--r-md); background: rgba(244, 242, 236, .06); border: 1px solid rgba(244, 242, 236, .08); }
.a5-close .a4-steps li::before {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--g-gold);
	color: var(--g-deep);
	font-family: var(--g-sans);
	font-size: 16px;
	font-weight: 600;
}

/* ----------------------------------------------------- other services */

.a3-more__list { border-top: 0; display: grid; gap: 8px; }
.a3-more__list a { padding: 26px 28px; border-bottom: 0; border-radius: var(--r-md); background: #FBFAF6; transition: background-color .2s ease, box-shadow .25s var(--g-ease); }
.a3 .a3-more__list a:hover { box-shadow: 0 16px 32px -20px rgba(14, 46, 39, .35); }
.a3 .a3-more__list a:hover strong { text-decoration: none; }

/* ------------------------------------------------------------- phones */

@media (max-width: 699px) {
	.a3 .a5-pick__tab { padding-block: 14px; }
	.a5-pick.is-live .a5-pick__panels { padding: 26px 22px; border-radius: 22px; }
	.a5 .a3-moments { text-align: left; }
	.a5 .a3-moments svg { margin-inline: 0; }
	.a5 .a3-moments p { margin-inline: 0; }
	.a3-more__list a { padding: 22px; }
}

/* ------------------------------------------------- sourced figures (22 Oct 2026)
   One plain sentence each, the number set in gold serif, the source quietly below. */

.a5-fact { margin: 22px auto 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--g-on); }
.a5-fact__n { font-family: var(--g-serif); font-size: 26px; line-height: 1.2; color: var(--g-gold); }
.a5-fact__src, .a5-pick__fact span, .a5-trust__src { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--g-on-quiet); }

.a5-pick__fact { margin-top: 22px; padding-left: 16px; border-left: 2px solid rgba(193, 165, 91, .6); font-size: 16px; line-height: 1.6; color: var(--g-on); max-width: 52ch; }
.a5-pick__fact strong { font-family: var(--g-serif); font-weight: 400; font-size: 22px; color: var(--g-gold); }

.a5-trust { display: grid; grid-template-columns: 1fr; gap: 22px 48px; margin-top: clamp(40px, 5vw, 64px); max-width: 980px; }
.a5-trust p { margin: 0; padding-left: 16px; border-left: 2px solid rgba(193, 165, 91, .6); font-size: 17px; line-height: 1.6; color: var(--g-on); }
.a5-trust__n { font-family: var(--g-serif); font-size: 26px; line-height: 1.2; color: var(--g-gold); }
.a5-trust p.a5-trust__src { grid-column: 1 / -1; padding-left: 0; border-left: 0; margin-top: -6px; font-size: 12.5px; line-height: 1.45; color: var(--g-on-quiet); }

@media (min-width: 760px) {
	.a5-trust { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 699px) {
	.a5-fact { text-align: left; margin-left: 0; }
}

/* Sources under the Why plan early truths: same small size as every other source on the page. */
.a4-truth__n.a4-truth__src { font-size: 12.5px; line-height: 1.45; }