/* ============================================================
   BRIGHT WEALTH — "Your Story, Carefully Planned" storybook theme
   Shared styles for About / Services / Insights / Contact
   ============================================================ */
:root {
  --ink-deep: #17152c;
  --ink: #242047;
  --ink-soft: #302a5c;
  --paper: #ffffff;
  --paper-dim: rgba(255,255,255, 0.80);
  --paper-faint: rgba(255,255,255, 0.74);
  --glow: #c72f63;
  --glow-soft: #ec779e;
  --serif: "Newsreader", Georgia, serif;
  --grot: "DM Sans", "Segoe UI", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ink-deep); color: var(--paper); font-family: var(--grot); line-height: 1.7; overflow-x: hidden; }
::selection { background: var(--glow); color: var(--paper); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1080px, 88%); margin: 0 auto; }

/* ---------- Top bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4vw;
  background: linear-gradient(to bottom, rgba(23,21,44,0.92), rgba(23,21,44,0));
  backdrop-filter: blur(2px);
}
.bar .wordmark { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.bar .wordmark span { color: var(--glow); }
.bar-right { display: flex; align-items: center; gap: 26px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.bar-right a { color: var(--paper-dim); transition: color 0.2s; }
.bar-right a:hover, .bar-right a.here { color: var(--paper); }
.bar-cta { border: 1px solid var(--glow); color: var(--paper) !important; border-radius: 999px; padding: 9px 22px; transition: all 0.25s; }
.bar-cta:hover { background: var(--glow); }
.menu-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,0.24); color: var(--paper); border-radius: 8px; padding: 6px 11px; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.menu-toggle:hover { border-color: var(--glow); }
:focus-visible { outline: 3px solid var(--glow-soft); outline-offset: 3px; }
@media (max-width: 760px) {
  .menu-toggle { display: block; }
  .bar-right {
    position: absolute; top: calc(100% - 4px); right: 4vw;
    flex-direction: column; align-items: flex-start; gap: 16px;
    background: #242047; border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px; padding: 20px 24px; min-width: 210px;
    box-shadow: 0 18px 40px rgba(23,21,44,0.72); display: none;
  }
  .bar-right.open { display: flex; }
  .bar-cta { width: 100%; text-align: center; }
}

/* ---------- Page prologue (hero) ---------- */
.page-prologue {
  min-height: 62vh; display: grid; place-items: center; text-align: center;
  padding: 150px 6vw 70px; position: relative;
  background:
    linear-gradient(180deg, rgba(23,21,44,0.76), rgba(23,21,44,0.9)),
    radial-gradient(ellipse 700px 460px at 72% 12%, rgba(199,47,99,0.13), transparent 60%),
    radial-gradient(ellipse 560px 560px at 12% 90%, rgba(48,42,92,0.6), transparent 65%);
}
.page-prologue .kicker { font-size: 0.75rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--glow-soft); margin-bottom: 26px; }
.page-prologue h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 6.4vw, 5rem); line-height: 1.08; max-width: 18ch; margin: 0 auto; }
.page-prologue h1 em { font-style: italic; font-weight: 500; color: var(--glow-soft); }
.page-prologue .sub { margin: 28px auto 0; max-width: 54ch; color: var(--paper-dim); font-size: 1.04rem; }

/* ---------- Section scaffolding ---------- */
.story-section { padding: 12vh 6vw; position: relative; }
.head-kicker { font-size: 0.75rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--glow-soft); margin-bottom: 18px; }
.story-section h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 3.8vw, 3rem); line-height: 1.14; margin-bottom: 18px; }
.story-section h2 em { font-style: italic; color: var(--glow-soft); }
.story-section .intro { color: var(--paper-dim); max-width: 58ch; }
.hairline { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 0 6vw; }

/* ---------- Chapter blocks (services detail) ---------- */
.chapter-block { padding: 11vh 0; border-bottom: 1px solid rgba(255,255,255,0.08); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 6vw; align-items: start; }
.chapter-block:last-of-type { border-bottom: none; }
.cb-meta .cb-no { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(3.6rem, 8vw, 6.4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.28); }
.cb-meta .cb-age { font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--glow-soft); margin-top: 16px; }
.cb-meta .cb-quote { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.25rem; color: var(--paper-dim); margin-top: 22px; max-width: 24ch; line-height: 1.45; }
.cb-body h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.14; margin-bottom: 16px; }
.cb-body > p { color: var(--paper-dim); max-width: 58ch; margin-bottom: 26px; }
.moments { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid rgba(255,255,255,0.12); }
.moment { padding: 13px 22px; display: flex; gap: 16px; align-items: baseline; transition: background 0.25s, transform 0.25s; border-radius: 0 10px 10px 0; }
.moment:hover { background: rgba(199,47,99,0.08); transform: translateX(4px); }
.moment .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--glow); flex: none; transform: translateY(-2px); box-shadow: 0 0 8px rgba(199,47,99,0.8); }
.moment b { font-weight: 700; font-size: 0.94rem; }
.moment span { color: var(--paper-faint); font-size: 0.87rem; }
.ch-cta { display: inline-block; margin-top: 28px; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--glow-soft); border-bottom: 1px solid var(--glow); padding-bottom: 5px; transition: all 0.25s; }
.ch-cta:hover { color: var(--paper); letter-spacing: 0.28em; }
.smallprint { font-size: 0.8rem; color: var(--paper-faint); margin-top: 20px; max-width: 54ch; line-height: 1.6; }
@media (max-width: 860px) { .chapter-block { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- Cards (insights / people) ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 50px; }
.tile { padding: 38px 32px; border-top: 1px solid rgba(255,255,255,0.12); transition: background 0.3s; display: flex; flex-direction: column; }
.tile:hover { background: rgba(255,255,255,0.03); }
a.tile { text-decoration: none; color: inherit; }
a.tile:hover h3 { color: var(--glow-soft); }
.tile .t-kicker { font-size: 0.75rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--glow-soft); margin-bottom: 16px; }
.tile h3 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.3; margin-bottom: 12px; }
.tile p { color: var(--paper-faint); font-size: 0.9rem; flex: 1; }
.tile .t-foot { margin-top: 22px; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-faint); }
.tile:hover .t-foot { color: var(--glow-soft); }
@media (max-width: 860px) { .tile-grid { grid-template-columns: 1fr; } }

/* ---------- Vows (values) ---------- */
.vows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 50px; }
.vow { padding: 34px 28px; border-top: 1px solid rgba(255,255,255,0.12); }
.vow .v-no { font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--glow-soft); }
.vow h3 { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; margin: 14px 0 10px; }
.vow p { color: var(--paper-faint); font-size: 0.88rem; }
@media (max-width: 860px) { .vows { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vows { grid-template-columns: 1fr; } }

/* ---------- Authors (team) ---------- */
.authors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 50px; }
.author { padding: 40px 32px; border-top: 1px solid rgba(255,255,255,0.12); text-align: left; transition: background 0.3s; }
.author:hover { background: rgba(255,255,255,0.03); }
.author .initials {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(199,47,99,0.5); color: var(--glow-soft);
  font-family: var(--serif); font-style: italic; font-size: 1.6rem; margin-bottom: 22px;
}
.author h3 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.author .role { font-size: 0.75rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--glow-soft); margin: 8px 0 14px; }
.author p { color: var(--paper-faint); font-size: 0.9rem; }
.author p + p { margin-top: 12px; }
.author h3 .quals { display: block; font-family: var(--grot); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--paper-faint); margin-top: 5px; }
@media (max-width: 860px) { .authors { grid-template-columns: 1fr; } }

/* ---------- Fees ledger ---------- */
.ledger { margin-top: 50px; border-top: 1px solid rgba(255,255,255,0.12); }
.ledger-row { display: grid; grid-template-columns: 90px 1fr 1.4fr; gap: 30px; padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,0.08); align-items: baseline; }
.ledger-row .l-no { font-family: var(--serif); font-style: italic; font-size: 1.8rem; color: var(--glow-soft); }
.ledger-row h3 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.ledger-row p { color: var(--paper-faint); font-size: 0.92rem; }
@media (max-width: 760px) { .ledger-row { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.1); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 26px 0; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--paper);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-q .chev { transition: transform 0.3s; color: var(--glow-soft); font-size: 1.4rem; flex: none; font-family: var(--grot); }
.faq-item.open .chev { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-a p { padding: 0 0 26px; color: var(--paper-dim); font-size: 0.95rem; max-width: 68ch; }

/* ---------- Forms ---------- */
.story-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 50px; }
.story-form .full { grid-column: 1 / -1; }
.f-field label { display: block; font-size: 0.75rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 10px; }
.f-field input, .f-field textarea, .f-field select {
  width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px; padding: 15px 18px; color: var(--paper); font-family: var(--grot); font-size: 0.95rem;
  transition: border-color 0.2s;
}
.f-field select option { color: var(--ink-deep); }
.f-field input:focus, .f-field textarea:focus, .f-field select:focus { outline: none; border-color: var(--glow); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.8rem; color: var(--paper-faint); }
.consent input { margin-top: 5px; accent-color: var(--glow); }
.btn-glow {
  background: var(--glow); color: var(--paper); border: none; border-radius: 999px;
  padding: 16px 36px; font-family: var(--grot); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: all 0.25s;
  display: inline-block;
}
.btn-glow:hover { background: var(--glow-soft); color: var(--ink-deep); transform: translateY(-2px); }
.btn-ghost { border: 1px solid rgba(255,255,255,0.3); color: var(--paper); border-radius: 999px; padding: 15px 34px; display: inline-block; font-size: 0.95rem; transition: all 0.25s; }
.btn-ghost:hover { border-color: var(--glow); color: var(--glow-soft); }

/* ---------- Epilogue CTA ---------- */
.epilogue-cta {
  text-align: center; padding: 14vh 6vw;
  background: radial-gradient(ellipse 720px 500px at 50% 100%, rgba(199,47,99,0.12), transparent 65%);
}
.epilogue-cta h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.1; max-width: 20ch; margin: 0 auto 22px; }
.epilogue-cta h2 em { font-style: italic; color: var(--glow-soft); }
.epilogue-cta p { color: var(--paper-dim); max-width: 50ch; margin: 0 auto 38px; }

/* ---------- Footer ---------- */
.foot { padding: 60px 6vw 40px; border-top: 1px solid rgba(255,255,255,0.1); }
.foot .cols { max-width: 1080px; margin: 0 auto 40px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot .wordmark { font-family: var(--serif); font-size: 1.2rem; }
.foot .wordmark span { color: var(--glow); }
.foot .cols p, .foot .cols a { font-size: 0.85rem; color: var(--paper-faint); }
.foot .cols a:hover { color: var(--paper); }
.foot nav { display: flex; flex-direction: column; gap: 8px; }
.reg { max-width: 1080px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 28px; font-size: 0.78rem; line-height: 1.7; color: rgba(255,255,255,0.55); }
.reg p { margin-bottom: 10px; }
.reg a { text-decoration: underline; }

/* ---------- Reveal ---------- */
.fade { opacity: 0; transform: translateY(30px); transition: opacity 0.9s ease, transform 0.9s ease; }
.fade.in { opacity: 1; transform: none; }

/* ---------- Logo ---------- */
.bar .wordmark { display: inline-flex; align-items: center; }
.logo-img { height: 40px; width: auto; display: block; border-radius: 7px; }
.foot .logo-img { height: 50px; }

/* ---------- Added imagery (brand-matched vector art) ---------- */
.page-prologue { overflow: hidden; }
.page-prologue > div { position: relative; z-index: 1; }
.author .initials { position: relative; }
.author .initials img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- Support functions (no names, no photos) ---------- */
.support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 40px; }
.support { padding: 30px 26px; border-top: 1px solid rgba(255,255,255,0.12); transition: background 0.3s; }
.support:hover { background: rgba(255,255,255,0.03); }
.support h4 { font-family: var(--serif); font-weight: 600; font-size: 1.06rem; margin-bottom: 10px; color: var(--paper); }
.support h4::before { content: ""; display: block; width: 26px; height: 2px; background: var(--glow); margin-bottom: 14px; }
.support p { color: var(--paper-faint); font-size: 0.88rem; }
@media (max-width: 900px) { .support-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .support-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .authors[style] { grid-template-columns: 1fr !important; } }

/* ---------- Network partner logos ---------- */
.network-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; margin-top: 44px; }
.network-logos img { height: 66px; width: auto; opacity: 0.9; transition: opacity 0.25s; }
.network-logos a:hover img { opacity: 1; }
@media (max-width: 560px) { .network-logos { gap: 28px; justify-content: center; } .network-logos img { height: 52px; } }

/* ---------- Sticky mobile call-to-action ---------- */
.mobile-cta { display: none; }
@media (max-width: 620px) {
  .mobile-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; text-align: center; background: var(--glow); color: var(--paper); padding: 15px; border-radius: 999px; font-family: var(--grot); font-weight: 700; font-size: 0.95rem; box-shadow: 0 10px 30px rgba(199,47,99,0.45); }
  .foot { padding-bottom: 96px; }
}

/* ---------- Page hero images (WebP with JPEG fallback) ---------- */
.page-prologue.is-short { min-height: 44vh; }
.bg-hero-about { background: linear-gradient(180deg, rgba(23,21,44,0.58), rgba(23,21,44,0.74)), url('images/hero-about.jpg') center 45% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-about { background: linear-gradient(180deg, rgba(23,21,44,0.58), rgba(23,21,44,0.74)), image-set(url('images/hero-about.webp') type('image/webp'), url('images/hero-about.jpg') type('image/jpeg')) center 45% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-services { background: linear-gradient(180deg, rgba(23,21,44,0.58), rgba(23,21,44,0.74)), url('images/hero-services.jpg') center 28% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-services { background: linear-gradient(180deg, rgba(23,21,44,0.58), rgba(23,21,44,0.74)), image-set(url('images/hero-services.webp') type('image/webp'), url('images/hero-services.jpg') type('image/jpeg')) center 28% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-contact { background: linear-gradient(180deg, rgba(23,21,44,0.28), rgba(23,21,44,0.42)), url('images/hero-contact.jpg') right center / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-contact { background: linear-gradient(180deg, rgba(23,21,44,0.28), rgba(23,21,44,0.42)), image-set(url('images/hero-contact.webp') type('image/webp'), url('images/hero-contact.jpg') type('image/jpeg')) right center / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-insights { background: linear-gradient(180deg, rgba(23,21,44,0.58), rgba(23,21,44,0.74)), url('images/hero-insights.jpg') center 50% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-insights { background: linear-gradient(180deg, rgba(23,21,44,0.58), rgba(23,21,44,0.74)), image-set(url('images/hero-insights.webp') type('image/webp'), url('images/hero-insights.jpg') type('image/jpeg')) center 50% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-privacy { background: linear-gradient(180deg, rgba(23,21,44,0.58), rgba(23,21,44,0.74)), url('images/hero-privacy.jpg') center 42% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-privacy { background: linear-gradient(180deg, rgba(23,21,44,0.58), rgba(23,21,44,0.74)), image-set(url('images/hero-privacy.webp') type('image/webp'), url('images/hero-privacy.jpg') type('image/jpeg')) center 42% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-calculators { background: linear-gradient(180deg, rgba(23,21,44,0.58), rgba(23,21,44,0.74)), url('images/hero-calculators.jpg') center 50% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-calculators { background: linear-gradient(180deg, rgba(23,21,44,0.58), rgba(23,21,44,0.74)), image-set(url('images/hero-calculators.webp') type('image/webp'), url('images/hero-calculators.jpg') type('image/jpeg')) center 50% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
/* Couple looking out over the mountains — the long view, which is what the
   step-by-step retirement page is about. The photo is already dark (mean 120,
   tonal range 46), so the overlay is lighter than elsewhere and the scene
   still reads. White headline text measures 11.3:1 against it. */
.bg-hero-retirement { background: linear-gradient(180deg, rgba(23,21,44,0.45), rgba(23,21,44,0.64)), url('images/bg-markets.jpg') center 45% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }
.bg-hero-retirement { background: linear-gradient(180deg, rgba(23,21,44,0.45), rgba(23,21,44,0.64)), image-set(url('images/bg-markets.webp') type('image/webp'), url('images/bg-markets.jpg') type('image/jpeg')) center 45% / cover no-repeat, url('bg-skyline.svg') center bottom / 100% auto no-repeat, linear-gradient(160deg, #242047, #17152c); }

/* ---------- 'What happens next' list ---------- */
.next-list { display: grid; gap: 12px; margin-top: 34px; }
.next-list .n { display: flex; gap: 12px; align-items: flex-start; font-size: 0.94rem; color: var(--paper-dim); }
.next-list .tick { color: var(--glow-soft); font-weight: 700; flex: none; }

/* ---------- Adviser profile detail ---------- */
.author .tenure { font-size: 0.8rem; color: var(--glow-soft); margin: -6px 0 16px; letter-spacing: 0.02em; }
.author .cred { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); }
.author .cred-label { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 10px; }
.author .cred ul { list-style: none; margin: 0; padding: 0; }
.author .cred li { font-size: 0.86rem; color: var(--paper-dim); padding-left: 14px; position: relative; margin-bottom: 5px; }
.author .cred li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--glow); }
.author .tags { display: flex; flex-wrap: wrap; gap: 7px; }
.author .tags span { font-size: 0.76rem; color: var(--paper-dim); background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 12px; }

/* ---------- Article pages ---------- */
.article-body { max-width: 68ch; margin: 0 auto; }
.article-body > p { color: var(--paper-dim); font-size: 1.02rem; margin-bottom: 20px; }
.article-body h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  margin: 44px 0 14px; line-height: 1.25; }
.article-body ul { margin: 0 0 20px; padding-left: 20px; }
.article-body li { color: var(--paper-dim); font-size: 1rem; margin-bottom: 9px; }
.article-body strong { color: var(--paper); }
.article-lede { font-size: 1.12rem !important; color: var(--paper) !important; line-height: 1.65; margin-bottom: 30px !important; }
.keypoints { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px; padding: 26px 30px; margin: 34px 0; }
.keypoints .kp-title { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--glow-soft); margin-bottom: 14px; }
.keypoints ul { margin: 0; padding-left: 18px; }
.keypoints li { font-size: 0.94rem; margin-bottom: 8px; }
.article-note { border-left: 2px solid var(--glow); padding: 4px 0 4px 18px; margin: 38px 0 0;
  font-size: 0.82rem; color: var(--paper-faint); line-height: 1.7; }
.ask-box { text-align: center; background: rgba(199,47,99,0.09); border: 1px solid rgba(199,47,99,0.35);
  border-radius: 18px; padding: 40px 34px; margin: 50px auto 0; max-width: 68ch; }
.ask-box h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem,2.6vw,1.7rem); margin-bottom: 10px; }
.ask-box p { color: var(--paper-dim); font-size: 0.96rem; margin-bottom: 24px; }
.back-link { display: inline-block; margin-bottom: 28px; font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper-faint); }
.back-link:hover { color: var(--glow-soft); }

/* ---------- Location map (click to load) ---------- */
.map-box { margin-top: 38px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14);
  height: clamp(300px, 46vh, 460px); background: linear-gradient(160deg, #242047, #17152c); }
.map-holder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 34px 30px; gap: 14px; }
.map-pin { width: 54px; height: 54px; color: var(--glow-soft); opacity: 0.9; }
.map-addr { font-family: var(--serif); font-size: 1.05rem; color: var(--paper); max-width: 30ch; }
.map-note { font-size: 0.75rem; color: var(--paper-faint); max-width: 46ch; line-height: 1.6; margin-top: 6px; }
.map-note a { color: var(--glow-soft); text-decoration: underline; }
.btn-ghost-alt { display: inline-block; border: 1px solid rgba(255,255,255,0.3); color: var(--paper);
  border-radius: 999px; padding: 15px 30px; font-weight: 700; font-size: 0.95rem; transition: all 0.25s; }
.btn-ghost-alt:hover { border-color: var(--glow); background: rgba(199,47,99,0.1); }

/* Skip link — lets keyboard and screen-reader users jump past the nav */
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px;
  background: #ffffff; color: #17152c; font-weight: 700; border-radius: 0; }
.skip-link:focus { top: 16px; }

/* ---------- Specialism flag + cross-link (retirement) ---------- */
.cb-flag { display:inline-block; margin-top:6px; font-family:var(--grot); font-size:0.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#a92452; border:1px solid rgba(169,36,82,.4); border-radius:99px; padding:3px 10px; }
.spec-link { margin:-6px 0 18px; font-family:var(--grot); font-size:0.92rem; font-weight:500; }
.spec-link a { color:#a92452; text-decoration:none; border-bottom:1px solid rgba(169,36,82,.35); padding-bottom:1px; }
.spec-link a:hover, .spec-link a:focus { border-bottom-color:#a92452; }