/* ============================================================
   Wealth Planner Singapore — LinkedIn landing page
   Palette derived from the existing site:
     gold  #D4AF37   sea green #2E8B57   deep green #103D19
   ============================================================ */

/* ---- 1. Tokens ------------------------------------------- */
:root{
  /* Greens */
  --ink:        #071A11;
  --green-950:  #0B2417;
  --green-900:  #103D19;
  --green-800:  #14472A;
  --green-700:  #1B5E3A;
  --green-600:  #2E8B57;
  --green-200:  #B9D8C6;
  --green-100:  #E7F1EA;

  /* Gold */
  --gold:       #D4AF37;
  --gold-300:   #E8C866;
  --gold-600:   #A8862A;
  --gold-wash:  #FAF3DF;

  /* Neutrals */
  --cream:      #FBF9F3;
  --paper:      #FFFFFF;
  --text:       #14201A;
  --text-soft:  #4C5C53;
  --muted:      #6E7D74;
  --line:       #E4E2D9;
  --line-dark:  rgba(255,255,255,.14);

  /* Type */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 128px);
  --radius: 3px;
  --radius-lg: 6px;
  --wa-bar: 52px;   /* height of the mobile WhatsApp bar; the review CTA sits on top of it */

  --shadow-sm: 0 1px 2px rgba(11,36,23,.06), 0 2px 8px rgba(11,36,23,.04);
  --shadow-md: 0 2px 4px rgba(11,36,23,.05), 0 12px 32px rgba(11,36,23,.08);
  --shadow-lg: 0 24px 64px rgba(7,26,17,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- 2. Reset -------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
[hidden]{ display:none !important; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:600; line-height:1.12; letter-spacing:-.015em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
table{ border-collapse:collapse; width:100%; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--green-950);
  padding:12px 20px; font-weight:600;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ---- 3. Layout primitives -------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:800px; }

.section{ padding-block:var(--section-y); }
.section--tint{ background:var(--paper); border-block:1px solid var(--line); }
.section--dark{ background:var(--green-950); color:#E9EFEA; }
.section__head{ max-width:62ch; margin-bottom:clamp(36px,5vw,64px); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__lede{ margin-top:16px; font-size:1.05rem; color:var(--text-soft); }
.section--dark .section__lede,
.calc-section .section__lede,
.section--form .section__lede{ color:rgba(233,239,234,.72); }

.grid-2{
  display:grid;
  grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);
  align-items:start;
}
@media (max-width:820px){ .grid-2{ grid-template-columns:1fr; gap:24px; } }

/* ---- 4. Type helpers ------------------------------------- */
.eyebrow{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--gold); margin-bottom:24px;
}
.kicker{
  display:flex; align-items:center; gap:12px;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--muted); margin:0 0 8px;
}
.kicker__num{
  font-family:var(--serif); font-size:.8rem; letter-spacing:0;
  color:var(--gold-600); padding-right:12px; border-right:1px solid var(--line);
}
.kicker--light{ color:rgba(233,239,234,.6); justify-content:inherit; }
.section__head--center .kicker{ justify-content:center; }
.kicker--light .kicker__num{ color:var(--gold); border-color:var(--line-dark); }

.h2{ font-size:clamp(1.9rem,3.6vw,2.75rem); }
.h2--light{ color:#F3F7F4; }
.statement{
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  margin-bottom:.7em; letter-spacing:-.02em;
}
.prose{ max-width:62ch; font-size:1.06rem; color:var(--text-soft); }
.prose em{ color:var(--text); font-style:italic; }

/* Placeholder tokens the client must replace */
.ph{
  color:var(--gold-600);
  border-bottom:1px dotted currentColor;
  font-style:normal;
}
.section--dark .ph,.calc-section .ph,.hero .ph,.section--form .ph{ color:var(--gold-300); }

/* ---- 5. Buttons ------------------------------------------ */
.btn{
  --btn-bg:var(--gold); --btn-fg:var(--green-950); --btn-bd:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:var(--radius);
  padding:13px 24px; font-size:.95rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(212,175,55,.28); }
.btn:active{ transform:translateY(0); }
.btn--gold:hover{ background:var(--gold-300); border-color:var(--gold-300); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:#EAF1EC; --btn-bd:rgba(255,255,255,.28);
}
.btn--ghost:hover{ background:rgba(255,255,255,.07); box-shadow:none; }
.btn--sm{ padding:9px 16px; font-size:.85rem; }
.btn--lg{ padding:16px 30px; font-size:1rem; }
.btn--block{ display:flex; width:100%; }
/* long CTA labels need to wrap rather than overflow narrow viewports */
.btn--wrap{ white-space:normal; text-align:center; line-height:1.3; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:600; color:var(--green-700);
  text-decoration:none; border-bottom:1px solid var(--green-200);
  padding-bottom:2px; transition:border-color .2s var(--ease);
}
.link-arrow::after{ content:"→"; transition:transform .2s var(--ease); }
.link-arrow:hover{ border-color:var(--green-600); }
.link-arrow:hover::after{ transform:translateX(3px); }

/* ---- 6. Regulatory bar + header -------------------------- */
.regbar{
  background:var(--ink); color:rgba(233,239,234,.62);
  font-size:.74rem; letter-spacing:.04em;
}
.regbar__inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:36px; }
.regbar p{ margin:0; }
.regbar__contact{ text-decoration:none; color:var(--gold-300); font-weight:500; white-space:nowrap; }
.regbar__contact:hover{ color:var(--gold); }
@media (max-width:600px){
  .regbar{ font-size:.66rem; }
  .regbar__inner{ min-height:32px; }
  .regbar__licence{ line-height:1.4; }
}

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,249,243,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
.site-header__inner{ display:flex; align-items:center; gap:32px; min-height:68px; }

.brand{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
/* The lockup carries its own wordmark, so height drives it and width follows
   the intrinsic ratio from the img attributes — no reflow as it loads. */
.brand img{ display:block; height:38px; width:auto; }
@media (max-width:400px){ .brand img{ height:31px; } }

.site-nav{ display:flex; gap:26px; margin-left:auto; }
.site-nav a{
  font-size:.88rem; font-weight:500; color:var(--text-soft);
  text-decoration:none; padding:6px 0; position:relative;
  transition:color .2s var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .24s var(--ease);
}
.site-nav a:hover{ color:var(--green-900); }
.site-nav a:hover::after{ transform:scaleX(1); }
@media (max-width:1000px){ .site-nav{ display:none; } }
@media (max-width:1000px){ .site-header__inner .btn{ margin-left:auto; } }
@media (max-width:520px){ .site-header__inner .btn{ display:none; } }

/* ---- 7. Hero --------------------------------------------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(46,139,87,.30) 0%, transparent 58%),
    linear-gradient(168deg, var(--green-900) 0%, var(--green-950) 46%, var(--ink) 100%);
  color:#E9EFEA;
  padding-block:clamp(56px,8vw,104px) clamp(64px,9vw,112px);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 60% at 30% 40%, #000 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(80% 60% at 30% 40%, #000 0%, transparent 80%);
}
.hero__glow{
  position:absolute; z-index:-1; width:620px; height:620px; right:-160px; top:-220px;
  background:radial-gradient(circle, rgba(212,175,55,.16) 0%, transparent 65%);
  pointer-events:none;
}
.hero__inner{
  display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);
  gap:clamp(32px,4.5vw,64px); align-items:center;
}
@media (max-width:960px){ .hero__inner{ grid-template-columns:1fr; } }

.hero__title{
  font-size:clamp(1.68rem,4.3vw,3.3rem);
  letter-spacing:-.025em; line-height:1.1; color:#FFF;
  margin-bottom:26px;
}
.hero__title .hl{ color:var(--gold); }
.hero__lede{
  max-width:56ch; font-size:clamp(1.02rem,1.6vw,1.15rem);
  color:rgba(233,239,234,.80); margin-bottom:34px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:16px; }
@media (max-width:520px){
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
}
.hero__note{
  max-width:56ch; margin:0 0 40px; font-size:.84rem; line-height:1.55;
  color:rgba(233,239,234,.55);
}

.advisor-chip{
  display:flex; align-items:center; gap:14px;
  padding-top:26px; border-top:1px solid var(--line-dark);
  max-width:60ch;
}
.advisor-chip__img{
  width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  object-fit:cover; border:1px solid rgba(212,175,55,.45);
}
.advisor-chip__text{ margin:0; font-size:.86rem; line-height:1.5; color:rgba(233,239,234,.78); }
.advisor-chip__text strong{ color:#FFF; }
.advisor-chip__meta{ color:rgba(233,239,234,.55); font-size:.8rem; }

/* Hero data card */
.gapcard{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  overflow:hidden;
}
.gapcard__head{ padding:22px 26px 18px; border-bottom:1px solid rgba(255,255,255,.09); }
.gapcard__label{
  margin:0 0 4px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--gold);
}
.gapcard__sub{ margin:0; font-size:.84rem; color:rgba(233,239,234,.62); }
.gapcard__body{ padding:26px; display:grid; gap:26px; }

.bar__head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
.bar__name{ font-size:.86rem; color:rgba(233,239,234,.78); }
.bar__val{ font-family:var(--serif); font-size:1.12rem; font-weight:600; color:#FFF; font-variant-numeric:tabular-nums; }
.bar__track{ height:7px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; }
.bar__fill{
  height:100%; width:0; border-radius:99px;
  transition:width 1.1s var(--ease);
}
.bar__fill--muted{ background:linear-gradient(90deg, var(--green-600), var(--green-700)); }
.bar__fill--solid{ background:linear-gradient(90deg, var(--gold), var(--gold-600)); }
.bar__note{ margin:8px 0 0; font-size:.76rem; color:rgba(233,239,234,.48); }

.gapcard__foot{
  padding:20px 26px 24px;
  background:rgba(212,175,55,.09);
  border-top:1px solid rgba(212,175,55,.22);
}
.gapcard__gaplabel{
  margin:0 0 2px; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:rgba(233,239,234,.62);
}
.gapcard__gapval{
  margin:0; font-family:var(--serif); font-size:clamp(1.9rem,3.4vw,2.4rem);
  font-weight:700; color:var(--gold); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}

/* ---- 8. Carriers ----------------------------------------- */
.carriers{ background:var(--paper); border-bottom:1px solid var(--line); padding-block:30px; }
.carriers__label{
  margin:0 0 18px; text-align:center; font-size:.72rem; letter-spacing:.15em;
  text-transform:uppercase; font-weight:600; color:var(--muted);
}
.carriers__list{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(20px,4vw,52px); align-items:center;
}
.carriers__list li{
  font-family:var(--serif); font-size:1.05rem; font-weight:600;
  color:var(--green-900); opacity:.42; letter-spacing:.01em;
  transition:opacity .2s var(--ease);
}
.carriers__list li:hover{ opacity:.8; }

/* ---- 9. Moments ------------------------------------------ */
.moments{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid var(--line);
}
.moment{
  padding:32px 28px 34px; border-bottom:1px solid var(--line);
  border-right:1px solid var(--line); position:relative;
}
.moment:last-child{ border-right:none; }
.moment::before{
  content:""; position:absolute; top:-1px; left:0; width:34px; height:2px;
  background:var(--gold);
}
.moment__num{
  margin:0 0 14px; font-family:var(--serif); font-size:.9rem;
  font-style:italic; color:var(--gold-600); letter-spacing:.06em;
}
.moment__title{ font-size:1.22rem; margin-bottom:10px; }
.moment p{ font-size:.94rem; color:var(--text-soft); margin:0; }
@media (max-width:760px){ .moment{ border-right:none; } }

/* ---- 10. Calculator -------------------------------------- */
.calc-section{
  background:
    radial-gradient(100% 80% at 20% 0%, rgba(46,139,87,.22) 0%, transparent 60%),
    linear-gradient(160deg, var(--green-950), var(--ink));
  color:#E9EFEA;
}
.calc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(24px,4vw,48px); align-items:start;
}
@media (max-width:900px){ .calc{ grid-template-columns:1fr; } }

.calc__inputs{ display:grid; gap:30px; }
.field label{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:.9rem; font-weight:500; color:rgba(233,239,234,.82); margin-bottom:6px;
}
.field__hint{ font-size:.76rem; color:rgba(233,239,234,.42); font-weight:400; }
.field__out{
  display:block; font-family:var(--serif); font-size:1.6rem; font-weight:600;
  color:#FFF; letter-spacing:-.02em; margin-bottom:12px; font-variant-numeric:tabular-nums;
}

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:22px; background:transparent; cursor:pointer; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:99px;
  background:linear-gradient(90deg, var(--gold) var(--pct,50%), rgba(255,255,255,.14) var(--pct,50%));
}
input[type=range]::-moz-range-track{ height:4px; border-radius:99px; background:rgba(255,255,255,.14); }
input[type=range]::-moz-range-progress{ height:4px; border-radius:99px; background:var(--gold); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-8px; border-radius:50%;
  background:#FFF; border:4px solid var(--gold);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  transition:transform .15s var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:#FFF; border:4px solid var(--gold); box-shadow:0 2px 8px rgba(0,0,0,.35);
}
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.12); }

.calc__result{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(212,175,55,.28);
  border-radius:var(--radius-lg);
  padding:30px 28px;
  box-shadow:var(--shadow-lg);
}
.calc__resultLabel{
  margin:0 0 6px; font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:rgba(233,239,234,.62);
}
.calc__resultValue{
  margin:0 0 24px; font-family:var(--serif);
  font-size:clamp(2.3rem,5vw,3.1rem); font-weight:700;
  color:var(--gold); letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.calc__breakdown{ border-top:1px solid rgba(255,255,255,.12); margin-bottom:24px; }
.calc__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07);
  font-size:.88rem; color:rgba(233,239,234,.72);
}
.calc__row b{ font-weight:600; color:#FFF; font-variant-numeric:tabular-nums; }
.calc__row--loss b{ color:#E9A6A6; }
.calc__row--total{ border-bottom:none; }
.calc__row--total b{ color:var(--gold-300); }
.calc__disclaimer{ margin:14px 0 0; font-size:.76rem; line-height:1.5; color:rgba(233,239,234,.45); }

/* ---- 11. Options list ------------------------------------ */
.options{ margin-top:36px; border-top:1px solid var(--line); }
.options__item{
  display:grid; grid-template-columns:minmax(0,270px) minmax(0,1fr);
  gap:8px 28px; padding:18px 0; border-bottom:1px solid var(--line);
}
.options dt{ font-family:var(--serif); font-size:1.02rem; font-weight:600; color:var(--text); }
.options dd{ font-size:.94rem; color:var(--text-soft); }
@media (max-width:700px){ .options__item{ grid-template-columns:1fr; gap:4px; } }

/* ---- 12. Deliverables ------------------------------------ */
.deliverables{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(20px,3vw,36px); margin-bottom:48px;
}
.deliverables li{
  padding:28px 26px 30px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-lg);
}
.deliverables__num{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin-bottom:18px;
  border:1px solid rgba(212,175,55,.5); border-radius:50%;
  font-family:var(--serif); font-weight:600; color:var(--gold); font-size:.95rem;
}
.deliverables h3{ font-size:1.12rem; margin-bottom:9px; color:#F3F7F4; }
.deliverables p{ margin:0; font-size:.92rem; color:rgba(233,239,234,.66); }
.offer__promise{
  max-width:64ch; margin-inline:auto; text-align:center;
  font-family:var(--serif); font-size:clamp(1.05rem,1.9vw,1.28rem);
  line-height:1.5; color:rgba(233,239,234,.82);
  padding-top:34px; border-top:1px solid var(--line-dark);
}
.offer__promise strong{ color:var(--gold-300); font-weight:600; }

/* ---- 13. Case notes -------------------------------------- */
.cases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,3vw,32px); }
.case{
  background:var(--cream); border:1px solid var(--line);
  border-top:2px solid var(--gold); border-radius:var(--radius);
  padding:30px 28px 32px;
}
.case__head{ margin-bottom:20px; }
.case__who{ font-size:1.2rem; margin-bottom:4px; }
.case__meta{ margin:0; font-size:.84rem; color:var(--muted); }
.case__data{ border-top:1px solid var(--line); margin-bottom:20px; }
.case__data > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.case__data dt{ font-size:.86rem; color:var(--text-soft); }
.case__data dd{ font-family:var(--serif); font-weight:600; font-size:1rem; font-variant-numeric:tabular-nums; }
.case__data--flag{ background:var(--gold-wash); margin-inline:-10px; padding-inline:10px !important; border-bottom:none !important; }
.case__data--flag dt{ font-weight:600; color:var(--text); }
.case__data--flag dd{ color:var(--gold-600); font-size:1.1rem; }
.case__note{ margin:0; font-size:.94rem; color:var(--text-soft); }

/* ---- 14. Adviser ----------------------------------------- */
.adviser{
  display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(28px,5vw,64px); align-items:center;
}
@media (max-width:840px){ .adviser{ grid-template-columns:1fr; } }
.adviser__figure{ margin:0; position:relative; }
.adviser__figure::after{
  content:""; position:absolute; inset:14px -14px -14px 14px; z-index:-1;
  border:1px solid var(--gold); border-radius:var(--radius);
}
.adviser__figure img{ border-radius:var(--radius); width:100%; box-shadow:var(--shadow-md); }
.adviser__role{ margin:8px 0 22px; font-size:.95rem; color:var(--muted); }
.adviser__bio{
  margin:0 0 26px; padding-left:22px; border-left:2px solid var(--gold);
  font-family:var(--serif); font-size:1.12rem; line-height:1.6; color:var(--text-soft);
}
.adviser__bio p{ margin:0; }
.adviser__bio p + p{ margin-top:14px; }
.adviser__specialisms-label{
  margin:0 0 10px; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.adviser__specialisms{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px;
}
.adviser__specialisms li{
  padding:6px 13px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); font-size:.86rem; color:var(--text-soft);
}
.adviser__creds{
  display:flex; flex-wrap:wrap; gap:1px;
  background:var(--line); border:1px solid var(--line);
  margin-bottom:26px;
}
.adviser__creds > div{ flex:1 1 160px; background:var(--cream); padding:14px 16px; }
.adviser__creds dt{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.adviser__creds dd{ font-family:var(--serif); font-size:1.15rem; font-weight:600; }

/* ---- 15. Premium illustrations --------------------------- */
.pcards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(20px,3vw,32px);
}
.pcard{
  background:var(--cream); border:1px solid var(--line);
  border-top:2px solid var(--gold); border-radius:var(--radius);
  padding:30px 28px 32px;
}
.pcard__profile{ font-size:1.2rem; margin-bottom:4px; }
.pcard__cover{ margin:0 0 24px; font-size:.86rem; color:var(--muted); }
.pcard__price{
  margin:0 0 12px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.pcard__amt{
  font-family:var(--serif); font-weight:700; font-size:clamp(2.1rem,4vw,2.6rem);
  line-height:1; color:var(--green-700); font-variant-numeric:tabular-nums;
}
.pcard__per{ font-size:.95rem; color:var(--muted); }
.pcard__basis{ margin:0; font-size:.92rem; color:var(--text-soft); }
.cost-notes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px; margin-top:28px; font-size:.9rem; color:var(--text-soft);
}
.cost-notes strong{ color:var(--text); }

/* ---- 16. FAQ --------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  transition:color .2s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; flex:0 0 auto; font-family:var(--sans); font-size:1.4rem;
  font-weight:400; color:var(--gold-600); line-height:1;
  transition:transform .25s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item summary:hover{ color:var(--green-700); }
.faq__body{ padding-bottom:24px; max-width:64ch; font-size:.98rem; color:var(--text-soft); }

/* ---- 17. Form -------------------------------------------- */
.section--form{
  background:
    radial-gradient(90% 70% at 80% 0%, rgba(46,139,87,.22) 0%, transparent 60%),
    linear-gradient(180deg, var(--green-950), var(--ink));
  color:#E9EFEA;
}
.form{ display:grid; gap:20px; }
.form__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.form__field{ display:flex; flex-direction:column; gap:7px; }
.form__field label{ font-size:.85rem; font-weight:500; color:rgba(233,239,234,.80); }
.form__field input,.form__field select{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  padding:13px 14px; color:#FFF; font-size:.97rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
  appearance:none; -webkit-appearance:none;
}
.form__field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4AF37' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.form__field select option{ background:var(--green-950); color:#FFF; }
.form__field input::placeholder{ color:rgba(233,239,234,.35); }
.form__field input:focus,.form__field select:focus{
  outline:none; border-color:var(--gold); background:rgba(255,255,255,.09);
}
.form__field.is-invalid input,.form__field.is-invalid select{ border-color:#E9A6A6; }
.form__error{ margin:0; font-size:.78rem; color:#E9A6A6; min-height:0; }
.form__error:empty{ display:none; }

.consent{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.83rem; line-height:1.55; color:rgba(233,239,234,.68);
  cursor:pointer; margin-top:4px;
}
.consent input{
  flex:0 0 auto; width:18px; height:18px; margin-top:2px;
  accent-color:var(--gold); cursor:pointer;
}
/* Honeypot. Off-screen rather than display:none, and aria-hidden plus tabindex=-1
   in the markup, so no reader or screen reader ever meets it while a form-filling
   bot still finds it in the DOM. */
.form__hp{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

/* Turnstile. A fixed 300x65 Cloudflare iframe that cannot be restyled, so the
   only decisions here are where it sits and what happens on a viewport narrower
   than it is. data-theme="dark" in the markup keeps it from being a white slab
   on the dark green. Usually it resolves without the reader touching it. */
.form__captcha{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.form__captcha .cf-turnstile{ line-height:0; min-height:65px; }
@media (max-width:359px){
  /* 300px plus two 20px gutters overflows a 320px phone. A transform does not
     change layout size, so scaling alone would leave the element measuring 300px
     -- still wider than its container, therefore start-aligned rather than
     centred, and reserving dead space beneath itself. The explicit box is 300 and
     65 at .92, anchored top left so the scaled widget lands exactly on it. */
  .form__captcha .cf-turnstile{
    transform:scale(.92); transform-origin:top left;
    width:276px; height:60px; min-height:0;
  }
}

.form__foot{ margin:0; text-align:center; font-size:.78rem; color:rgba(233,239,234,.48); }
/* Was the in-place success block; now the thank-you page's card. The form itself
   no longer has a success state — it redirects, so that the conversion can fire
   on an ordinary page view. */
.form__success{
  background:rgba(212,175,55,.12); border:1px solid rgba(212,175,55,.35);
  border-radius:var(--radius-lg); padding:26px 24px; text-align:center;
}
.form__success h3{ font-size:1.3rem; color:var(--gold-300); margin-bottom:8px; }
.form__success p{ margin:0; font-size:.94rem; color:rgba(233,239,234,.78); }
.form__success a{ color:var(--gold-300); }

/* Failure state. Deliberately not styled as an alarm — it is an apology and a
   working alternative, on a page whose whole contact story is WhatsApp. */
.form__error{
  background:rgba(233,239,234,.06); border:1px solid rgba(233,239,234,.22);
  border-radius:var(--radius-lg); padding:22px 24px; margin-top:18px;
}
.form__error h3{ font-size:1.1rem; color:#F1F6F2; margin-bottom:8px; }
.form__error p{ margin:0; font-size:.94rem; color:rgba(233,239,234,.78); }
.form__error a{ color:var(--gold-300); }

/* ---- 17b. Thank-you page --------------------------------- */
/* Its own page now, so that the conversion can fire on an ordinary page view
   rather than a custom event. It reuses section 17's dark form palette and the
   .form__success card, so there is one place to change the look of both. */
.ty .section--form{ min-height:70vh; display:flex; align-items:center; }
.ty-next{ margin-top:clamp(36px,6vw,64px); }
.ty-next .h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); margin-bottom:24px; }

.ty-steps{ display:grid; gap:18px; counter-reset:step; }
.ty-steps li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  font-size:.98rem; line-height:1.6; color:rgba(233,239,234,.78);
}
.ty-steps__n{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(212,175,55,.45); color:var(--gold-300);
  font-family:var(--serif); font-size:.82rem; line-height:1;
}
.ty-urgent{
  margin-top:28px; padding-top:22px; border-top:1px solid var(--line-dark);
  font-size:.94rem; color:rgba(233,239,234,.72);
}
.ty-urgent a{ color:var(--gold-300); }
.ty-back{ margin-top:24px; }

/* ---- 18. Footer ------------------------------------------ */
.site-footer{ background:var(--ink); color:rgba(233,239,234,.55); padding-block:52px 40px; font-size:.85rem; }
.site-footer__top{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:24px; padding-bottom:28px; border-bottom:1px solid var(--line-dark);
}
.site-footer__contact{ margin:0; text-align:right; line-height:1.9; }
.site-footer__contact a{ color:var(--gold-300); text-decoration:none; }
.site-footer__contact a:hover{ text-decoration:underline; }
@media (max-width:600px){ .site-footer__contact{ text-align:left; } }
.site-footer__legal{ padding-top:26px; display:grid; gap:14px; max-width:92ch; }
.site-footer__legal p{ margin:0; font-size:.79rem; line-height:1.65; color:rgba(233,239,234,.42); }
.site-footer__legal strong{ color:rgba(233,239,234,.7); }
.site-footer__mas{
  font-weight:600; letter-spacing:.02em;
  color:rgba(233,239,234,.62) !important; text-transform:uppercase; font-size:.72rem !important;
}
.site-footer__meta{ padding-top:12px; border-top:1px solid var(--line-dark); }
.site-footer__meta a{ color:rgba(233,239,234,.6); }

/* ---- 19. Mobile sticky CTA ------------------------------- */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:rgba(7,26,17,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(212,175,55,.28);
  transform:translateY(110%); transition:transform .3s var(--ease);
  display:none;
}
.mobile-cta.is-visible{ transform:translateY(0); }
@media (max-width:640px){
  .mobile-cta{
    display:block;
    bottom:calc(var(--wa-bar) + env(safe-area-inset-bottom));
    padding:12px var(--gutter);
  }
  body{ padding-bottom:calc(122px + env(safe-area-inset-bottom)); }
}

/* ---- 19b. WhatsApp button -------------------------------- */
.wa-fab{
  position:fixed; right:24px; bottom:24px; z-index:91;
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#FFF; text-decoration:none;
  box-shadow:0 6px 20px rgba(7,26,17,.28);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-fab:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(7,26,17,.34); }
.wa-fab:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.wa-fab__icon{ flex:0 0 auto; }
/* The label is for the mobile bar; on the desktop circle the icon stands alone. */
.wa-fab__label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:640px){
  /* Full-width bar at the foot of the viewport, with the review CTA stacked
     directly above it. Both are gated on the same scroll state so they arrive
     together rather than one at a time. */
  .wa-fab{
    right:0; left:0; bottom:0; width:auto; height:auto; border-radius:0;
    min-height:var(--wa-bar);
    padding:0 var(--gutter) env(safe-area-inset-bottom);
    box-shadow:none;
    font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.01em;
    transform:translateY(100%); transition:transform .3s var(--ease);
  }
  .wa-fab.is-visible,
  .wa-fab.is-visible:hover{ transform:translateY(0); }
  .wa-fab__label{
    position:static; width:auto; height:auto; padding:0; margin:0;
    overflow:visible; clip:auto; border:0;
  }
}
@media (prefers-reduced-motion: reduce){
  .wa-fab{ transition:none; }
  .wa-fab:hover{ transform:none; }
}

/* ---- 20. Reveal on scroll -------------------------------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }