/* 16Wealth foundation. Change shared values here, not in page styles. */
:root {
 --green: #006c44; /* most frequent green in sampled logo numeral; textured source */
 --brand-green-rgb: 0 108 68;
 --ink: #202124; --muted: #63666d; --line: #e1e5e5; --paper: #f7f9f8;
 --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
 --spring: linear(0,.24,.5,.71,.86,.96,1.015,1.027,1.02,1.008,1);
 --surface-white: #fafbf9; --silver-atmosphere: #e8ecee;
 --green-mist: #edf3ef;
 --green-wash: #f3f6f3;
 --green-hover: #e5eee8;
 --glass-background: #ffffff;
 --glass-shadow: none;
 --glass-shadow-hover: none;
 --glass-reflection: none;
 --glass-backdrop: none;
 --nav-backdrop: none;
 --page-atmosphere: #fafbf9;
 --surface-section: #eef0f1;
 --motion-release-ms: 420; --motion-spring-amplitude: .018; --motion-spring-damping: 8; --motion-spring-frequency: 11; --motion-sample-step: .025;
 font-family:var(--font-system); color:var(--ink); background:var(--surface-white); font-synthesis:none;
 --neutral-1: #d9dddf;
 --neutral-2: #ffffff;
 --neutral-3: #ffffff;
 --neutral-4: #eeeeef;
 --neutral-5: #ffffff;
 --neutral-6: #f0f2f3;
 --neutral-7: #fff;
 --neutral-8: #d9dddf;
 --neutral-9: #50535a;
 --neutral-10: #e7e9eb;
 --neutral-11: #d9dddf;
 --neutral-12: #ffffff;
 --neutral-13: #f4f5f6;
 --neutral-14: #d9dddf;
 --neutral-15: #fafbfc;
 --neutral-16: #d9dce0;
 --neutral-17: #41434a;
 --neutral-18: #b5b7bc;
 --neutral-19: #9b9ea5;
 --type-heading-1: clamp(44px,5.6vw,76px); /* font-size */
 --leading-1: 1.1; /* line-height */
 --tracking-1: -.045em; /* letter-spacing */
 --weight-heading: 600; /* font-weight */
 --space-bottom-1: 28px; /* margin-bottom */
 --type-heading-2: clamp(32px,3.6vw,50px); /* font-size */
 --leading-2: 1.13; /* line-height */
 --tracking-2: -.045em; /* letter-spacing */
 --type-heading-3: 25px; /* font-size */
 --leading-3: 1.25; /* line-height */
 --tracking-3: -.025em; /* letter-spacing */
 --type-body: 18px; /* font-size */
 --leading-4: 1.65; /* line-height */
 --type-lead: 22px; /* font-size */
 --leading-5: 1.5; /* line-height */
 --type-caption: 13px; /* font-size */
 --tracking-4: .12em; /* letter-spacing */
 --space-bottom-2: 24px; /* margin-bottom */
 --radius-glass: 28px; /* border-radius */
 --transition-1: transform 420ms var(--spring); /* transition */
 --transition-2: opacity 250ms; /* transition */
 --gap-1: 24px; /* gap */
 --inset-1: 17px 26px; /* padding */
 --control-height-1: 52px; /* min-height */
 --type-7: 16px; /* font-size */
 --weight-2: 550; /* font-weight */
 --radius-capsule: 999px; /* border-radius */
 --inset-2: 13px 21px; /* padding */
 --type-8: 14px; /* font-size */
 --control-height-2: 46px; /* min-height */
 --inset-3: 13px 20px; /* padding */
 --type-9: 15px; /* font-size */
 --radius-3: 50%; /* border-radius */
 --type-10: 26px; /* font-size */
 --inset-4: 0 5%; /* padding */
 --gap-2: 25px; /* gap */
 --radius-4: 7px; /* border-radius */
 --gap-3: 12px; /* gap */
 --inset-5: 7px; /* padding */
 --gap-4: 2px; /* gap */
 --inset-6: 12px 15px; /* padding */
 --transition-3: transform 350ms var(--spring); /* transition */
 --control-height-3: 44px; /* min-height */
 --control-height-4: calc(100svh - 154px); /* min-height */
 --inset-7: clamp(40px,7vh,85px) 5% 40px; /* padding */
 --type-11: clamp(44px,5.8vw,78px); /* font-size */
 --type-12: 19px; /* font-size */
 --gap-5: 16px; /* gap */
 --inset-8: 25px 30px; /* padding */
 --control-height-5: 80px; /* min-height */
 --type-13: 21px; /* font-size */
 --leading-6: 1.4; /* line-height */
 --gap-6: 20px; /* gap */
 --type-14: 23px; /* font-size */
 --type-15: 20px; /* font-size */
 --inset-9: 18px 5%; /* padding */
 --type-16: 12px; /* font-size */
 --inset-10: 70px 7% 36px; /* padding */
 --type-17: clamp(46px,5.8vw,80px); /* font-size */
 --gap-7: 35px; /* gap */
 --space-top-1: 45px; /* margin-top */
 --space-top-2: 65px; /* margin-top */
 --tracking-5: .1em; /* letter-spacing */
 --inset-11: 80px 7%; /* padding */
 --gap-8: 8%; /* gap */
 --type-18: 29px; /* font-size */
 --leading-7: 1.35; /* line-height */
 --weight-3: 500; /* font-weight */
 --type-19: 17px; /* font-size */
 --gap-9: 40px; /* gap */
 --space-bottom-3: 40px; /* margin-bottom */
 --gap-10: 32px; /* gap */
 --inset-12: 28px 0; /* padding */
 --control-height-6: 65px; /* min-height */
 --inset-13: 85px 6%; /* padding */
 --type-20: clamp(40px,5vw,66px); /* font-size */
 --radius-5: 32px; /* border-radius */
 --inset-14: 65px 7% 45px; /* padding */
 --inset-15: 40px 7% 60px; /* padding */
 --inset-16: 25px 0; /* padding */
 --leading-8: 1.7; /* line-height */
 --type-21: 34px; /* font-size */
 --space-top-3: 36px; /* margin-top */
 --space-top-4: 25px; /* margin-top */
 --inset-17: 35px 7% 80px; /* padding */
 --control-height-7: 65vh; /* min-height */
 --inset-18: 12px 20px; /* padding */
 --space-bottom-4: 55px; /* margin-bottom */
 --gap-11: 7%; /* gap */
 --space-top-5: 15px; /* margin-top */
 --inset-19: 30px 6% 65px; /* padding */
 --space-bottom-5: 20px; /* margin-bottom */
 --type-22: 46px; /* font-size */
 --space-bottom-6: 38px; /* margin-bottom */
 --transition-4: width 500ms var(--spring); /* transition */
 --inset-20: 21px 24px; /* padding */
 --space-bottom-7: 14px; /* margin-bottom */
 --radius-6: 24px; /* border-radius */
 --space-top-6: 28px; /* margin-top */
 --inset-21: 65px 6%; /* padding */
 --type-23: clamp(44px,5vw,64px); /* font-size */
 --inset-22: 19px 0; /* padding */
 --inset-23: 24px 28px; /* padding */
 --radius-7: 26px; /* border-radius */
 --space-bottom-8: 16px; /* margin-bottom */
 --animation-1: arrive 350ms ease; /* animation */
 --gap-12: 9%; /* gap */
 --type-24: 38px; /* font-size */
 --inset-24: 17px 20px; /* padding */
 --space-top-7: 10px; /* margin-top */
 --radius-8: 20px; /* border-radius */
 --weight-4: 400; /* font-weight */
 --control-height-8: 54px; /* min-height */
 --inset-25: 18px 22px; /* padding */
 --radius-9: 22px; /* border-radius */
 --inset-26: 38px; /* padding */
 --radius-10: 36px; /* border-radius */
 --type-25: clamp(35px,4vw,58px); /* font-size */
 --space-top-8: 22px; /* margin-top */
 --inset-27: 55px 40px 40px; /* padding */
 --animation-2: arrive 400ms var(--spring); /* animation */
 --type-26: 40px; /* font-size */
 --inset-28: 45px 6% 30px; /* padding */
 --gap-13: 30px; /* gap */
 --gap-14: 20px 28px; /* gap */
 --space-top-9: 30px; /* margin-top */
 --inset-29: 15px; /* padding */
 --animation-3: arrive 450ms var(--spring); /* animation */
 --radius-11: 30px; /* border-radius */
 --inset-30: 11px 13px; /* padding */
 --inset-31: 0 6%; /* padding */
 --gap-15: 7px; /* gap */
 --gap-16: 8px; /* gap */
 --inset-32: 5px; /* padding */
 --radius-12: 27px; /* border-radius */
 --inset-33: 10px 12px; /* padding */
 --inset-34: 48px 6% 30px; /* padding */
 --control-height-9: calc(100svh - 135px); /* min-height */
 --type-27: 46px; /* font-size */
 --space-top-10: 35px; /* margin-top */
 --gap-17: 15px; /* gap */
 --control-height-10: 76px; /* min-height */
 --type-28: 11px; /* font-size */
 --space-bottom-9: 26px; /* margin-bottom */
 --space-top-11: 40px; /* margin-top */
 --inset-35: 50px 6%; /* padding */
 --gap-18: 18px; /* gap */
 --gap-19: 10px; /* gap */
 --inset-36: 25px 6%; /* padding */
 --inset-37: 60px 6%; /* padding */
 --inset-38: 40px 6% 25px; /* padding */
 --type-29: 42px; /* font-size */
 --inset-39: 25px 6% 55px; /* padding */
 --space-bottom-10: 35px; /* margin-bottom */
 --type-30: 37px; /* font-size */
 --inset-40: 19px 21px; /* padding */
 --inset-41: 45px 6%; /* padding */
 --inset-42: 28px; /* padding */
 --inset-43: 22px; /* padding */
 --gap-20: 15px 22px; /* gap */
 --leading-9: 1.6; /* line-height */
 --inset-44: 50px 28px 30px; /* padding */
 --inset-45: 10px; /* padding */
 --type-31: 43px; /* font-size */
 --animation-4: none!important; /* animation */
 --transition-5: none!important; /* transition */
 --pearl-heading-secondary: #5b6064;
 --surface-silver-edge: #d9dddf;
 --atmosphere-calm: #f7f8f6;
 --atmosphere-structured: #f2f4f5;
 --atmosphere-editorial: #fafbf9;
 --glass-primary: #e5eee8;
 --glass-selection-shadow: none;
 --arrow-transition: transform 360ms var(--spring);
 --logo-shadow: none;
 --hero-text-width: 100%;

 --overlay-background: rgba(255,255,255,.78);
 --overlay-scrim: rgba(32,33,36,.18);
 --overlay-backdrop: blur(12px);
 --overlay-scrim-backdrop: blur(3px);
 --divider-space: 28px auto 0;
}
/* Breakpoints: compact <=380px, phone <=760px, tablet <=1100px.
   Native CSS custom properties cannot be used in media conditions. */
/* Personalisation: purposeful, discrete pastel fills belong to artwork only. */
:root {
 --art-green: #dcebe2;
 --art-blue: #e5edf3;
 --art-lavender: #eeeaf3;
 --art-silver: #e7ebec;
 --art-depth: #d9dfe0;
 --art-label-size: 12px;
 --art-label-tracking: .06em;
 --identity-inset: 20px 5%;
 --identity-gap: 8px;
 --identity-text-size: 13px;
 --identity-leading: 1.45;
 --identity-mobile-inset: 16px 6%;
 --entry-inset: clamp(18px,4dvh,38px) 6%;
 --entry-title: clamp(34px,5.8vw,78px);
 --entry-gap: clamp(12px,2dvh,22px);
 --entry-control-inset: 17px 24px;
 --entry-control-height: 64px;
 --entry-title-space: 12px;
 --entry-choices-space: 24px;
 --entry-existing-space: 24px;
 --entry-client-size: 20px;
 --entry-client-compact-size: 18px;
 --entry-mobile-title: clamp(32px,8vw,46px);
 --personal-grid-gap: 28px;
 --personal-hero-inset: 45px 7% 40px;
 --personal-hero-title: clamp(42px,5.2vw,74px);
 --personal-hero-mobile-inset: 30px 6% 36px;
 --art-card-inset: 12px;
 --challenge-inset: 28px;
 --small-reading-size: 15px;
 --learning-inset: 24px 0;
 --head-art-inset: 20px;
 --heading-keyword: var(--green);
}
:root{--entry-compact-inset:11px 18px;--entry-landscape-inset:12px 5%;--entry-short-title:27px;--entry-landscape-title:36px;--entry-compact-gap:8px}
/* Client-focused refinement reuses the existing palette and motion. */
:root {
 --identity-gap: 4px;
 --brand-tagline-size: 15px;
 --brand-tagline-weight: 550;
 --brand-tagline-leading: 1.4;
 --brand-regulatory-size: 12px;
 --brand-regulatory-leading: 1.45;
 --brand-block-gap: 7px;
 --client-process-gap: 28px;
 --client-heading-width: 1000px;
 --client-process-inset: 28px;
 --client-hero-inset: 55px 7% 55px;
 --client-hero-mobile-inset: 32px 6% 40px;
 --client-help-weight: 500;
 --client-entry-compact-inset: 8px 6%;
}
:root{--brand-mark-width:172px;--chain-node:84px;--chain-axis:42px;--chain-axis-negative:-42px;--chain-link:24px;--chain-link-offset:30px;--chain-row-inset:0 0 36px;--chain-number-size:28px}
/* Homepage-only artwork addition. */
:root{--home-art-gold:#f1e9d4;--home-copy-space:16px}
/* Contact-only layout; existing colours and translucent overlay material. */
:root{--contact-inset:clamp(24px,4vw,54px);--contact-hero-inset:42px 6% 32px;--contact-content-inset:0 6% 40px;--contact-section-inset:64px 0;--contact-mobile-section-inset:40px 0;--contact-hero-size:clamp(36px,5vw,68px);--contact-phone-size:clamp(28px,3.5vw,46px);--contact-sticky-inset:8px 12px;--contact-dialog-inset:58px 30px 24px;--contact-dialog-mobile-inset:54px 22px max(22px,env(safe-area-inset-bottom));--contact-mobile-reserve:96px}

/* Homepage visual v2: scoped type and header identity measurements. */
:root{
 --home-v2-title:clamp(36px,3.75vw,60px);
 --home-v2-title-mobile:clamp(34px,8.7vw,48px);
 --home-v2-title-leading:1.08;
 --home-v2-hero-inset:44px 5% 52px;
 --home-v2-mobile-inset:24px 5% 32px;
 --home-v2-actions-gap:12px;
 --home-v2-stage-size:26px;
 --home-v2-stage-body:19px;
 --home-v2-stage-leading:1.6;
 --home-v2-stage-inset:0 0 36px;
 --home-v2-brand-gap:16px;
 --home-v2-brand-size:18px;
 --home-v2-brand-small:12px;
 --home-v2-brand-arn:11px;
 --home-v2-brand-leading:1.4;
 --home-v2-brand-mobile-gap:10px;
 --home-v2-brand-mobile-size:14px;
 --home-v2-brand-mobile-small:11px;
 --home-v2-brand-mobile-arn:10.5px;
 --home-v2-symbol-space:0 0 18px;
}
:root{--home-v2-cta-mobile-inset:14px 12px;--home-v2-cta-mobile-gap:8px;--home-v2-brand-tablet-size:16px}

/* Intention journey v2: explicit neutral-glass cards and red popup variation. */
:root{
 --intention-title:clamp(36px,4.5vw,64px);
 --intention-form-title:clamp(32px,3.5vw,46px);
 --intention-choice-size:clamp(21px,2vw,26px);
 --intention-entry-inset:32px 6% 24px;
 --intention-card-inset:28px;
 --intention-form-inset:36px 6% 56px;
 --intention-control-inset:20px;
 --intention-header-inset:20px 5%;
 --intention-mobile-header-inset:16px;
 --intention-small-title:13px;
 --intention-popup-inset:40px;
 --intention-popup-mobile-inset:28px 22px;
 --intention-popup-title:clamp(28px,3vw,40px);
 --intention-popup-shadow:0 16px 48px #20212412;
 --intention-red-glass:rgba(255,239,239,.9);
 --intention-red-edge:#d8aaaa;
 --intention-red-ink:#7e2929;
 --intention-popup-animation:intention-popup-enter 180ms ease-out;
}

:root{--intention-close-size:44px;--intention-popup-exit:intention-popup-leave 140ms ease-in;}

/* Calculator and mobile usability refinement — 22 October 2026. */
:root{--planner-primary-size:clamp(1.8rem,3.4vw,3rem);--planner-metric-size:clamp(1.1rem,2vw,1.45rem);--planner-inset:24px;--planner-control-inset:10px 12px;--planner-grid-gap:24px;--planner-tab-inset:12px 16px;--planner-legend-size:12px;--mobile-nav-label:11.5px;--mobile-nav-leading:1.25;--mobile-header-inset:12px;--mobile-brand-gap:8px;--mobile-login-inset:9px 11px;--mobile-nav-inset:6px;--mobile-nav-item-inset:7px 3px;--mobile-nav-gap:4px;--mobile-tagline-size:12px;--mobile-reg-size:11.5px;--disclaimer-size:13px;--compact-reading-leading:1.55;--chart-label-size:12px;}
:root{--mobile-small-nav-inset:4px 2px;--mobile-small-nav-gap:2px;--mobile-small-nav-leading:1.15}
:root{--chart-mobile-label-size:22px}
/* Calculator routes and neutral glass disclosures. */
:root{--calculator-card-inset:24px;--calculator-info-size:14px;--calculator-info-inset:4px;--calculator-menu-inset:12px;--calculator-menu-link-inset:12px 16px;--calculator-tooltip-inset:16px;--calculator-menu-enter:calculator-menu-enter 160ms ease-out;--header-tagline-size:22px;--header-tagline-tablet-size:17px}

:root{--document-reading:1.65;--story-section-inset:clamp(36px,6vw,88px) clamp(20px,6vw,90px);--story-heading:clamp(2rem,4vw,3.8rem);--story-title:clamp(2.6rem,5vw,5.4rem);--social-symbol-size:22px;--story-green-soft:#d1e5d9;}

.calculator-menu{--overlay-background:rgba(255,255,255,.96);}
:root{--story-heading-leading:1.08;}
:root{--bw-section-inset:clamp(28px,5vw,72px) clamp(18px,5vw,80px);--bw-title-size:clamp(2.7rem,5vw,5rem);--bw-heading-size:clamp(1.8rem,3vw,2.8rem);--bw-chart-text:17px;--bw-leading:1.6;}
:root{--life-section-inset:clamp(28px,5vw,72px) clamp(18px,5vw,80px);--life-stat-size:clamp(3rem,7vw,6rem);}

/* Homepage cinematic hero: neutral translucent material, approved existing palette. */
:root{--hero-cinema-phone-outer:0 0 32px;--hero-cinema-inset:36px 2.6%;--hero-panel-inset:clamp(28px,2.6vw,44px);--hero-cinema-title:clamp(38px,3.55vw,60px);--hero-cinema-body:clamp(18px,1.18vw,20px);--hero-cinema-leading:1.45;--hero-panel-radius:32px;--hero-cinema-mobile-inset:24px 5% 32px;--hero-cinema-tablet-inset:28px 4%;--hero-cinema-button-inset:16px 24px;--hero-cinema-header-inset:20px 4.2%;}
/* Approved five-page refinement measurements. Palette and shared materials are reused. */
:root{--learn-mistakes-size:20px;--learn-thought-size:clamp(24px,2.2vw,34px);--goals-title-size:clamp(42px,6vw,86px);--goals-card-title:clamp(26px,2.4vw,34px);--portfolio-highlight-size:clamp(24px,2.7vw,38px);--portfolio-row-inset:24px 0;--goal-card-inset:clamp(22px,3vw,36px);--sip-step-inset:18px 10px;--sip-step-heading:clamp(16px,1.7vw,24px);}