/* ==========================================================================
   Developing Financial — design system matched to the live brand
   One serif typeface throughout. Monochromatic blue. Flat, editorial, no shadows.
   ========================================================================== */

:root {
  --navy:        #172936;
  --blue:        #1470af;
  --blue-dark:   #0e5686;
  --ice:         #eaf1f6;
  --ink:         #111111;
  --muted:       #45525c;
  --line:        rgba(23,41,54,.14);
  --bg:          #ffffff;
  --radius:      6px;
  --maxw:        1120px;
  --font:        "Spectral", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 18px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.2;
  font-weight: 300;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--blue); font-weight: 400; }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 600; color: var(--blue); }
p { margin: 0 0 1.2em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px; }
.eyebrow {
  font-family: var(--font);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  color: var(--blue);
  margin: 0 0 .7em;
}
.section { padding: 96px 0; }
.section.tight { padding: 60px 0; }
.section.ice { background: var(--ice); }
.section.navy { background: var(--navy); color: #cfe0ec; }
.section.navy h1, .section.navy h2, .section.navy h3 { color: #fff; }
.section.navy .eyebrow { color: #7fb3d9; }
.center { text-align: center; }
.lead { font-size: 1.25rem; color: var(--ink); }
.divider { border: none; border-top: 1px solid var(--line); margin: 0 0 2.2em; }
.center .divider { margin-left: auto; margin-right: auto; width: 100%; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 500;
  font-size: 1.02rem;
  padding: 15px 28px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  text-align: center;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-outline { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,.5); color:#fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--ice); }

/* Header --------------------------------------------------------------------*/
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 82px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 46px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 1rem; font-weight: 400; color: var(--ink); }
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-cta .btn { padding: 11px 20px; font-size: .95rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--ink); margin: 5px 0; }

/* Hero ---------------------------------------------------------------------*/
.hero { position: relative; color: #fff; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(30,50,64,.55) 0%, rgba(60,80,94,.60) 100%); }
.hero-inner { position: relative; z-index: 1; padding: 140px 0 120px; max-width: 780px; margin: 0 auto; text-align: center; }
.hero h1 { color: #fff; margin-bottom: .4em; font-weight: 300; }
.hero .sub { font-family: var(--font); font-size: clamp(1.15rem,2.2vw,1.5rem); color: #fff; font-weight: 400; margin-bottom: 1.3em; }
.hero p.lead { color: #eef4f8; }

/* Generic page hero ----------------------------------------------------------*/
.page-hero { background: var(--navy); color:#cfe0ec; padding: 92px 0 76px; }
.page-hero h1 { color:#fff; font-weight: 300; }
.page-hero p { color:#cfe0ec; max-width: 660px; }

/* Two-column editorial layout -------------------------------------------------*/
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.split img { border-radius: var(--radius); }
.split.center-align { align-items: center; }
.split.reverse .split-media { order: 2; }
.split ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.split li { margin-bottom: .5em; }

/* Plain columns (replaces card grid) -----------------------------------------*/
.cols { display: grid; gap: 48px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.col h3 { margin-bottom: .5em; }
.col ul { padding-left: 1.15em; margin: 0; }
.col li { margin-bottom: .5em; }

/* Fee / stat panels — flat, no shadow -----------------------------------------*/
.panel { border-top: 2px solid var(--blue); padding-top: 24px; }
.panel .num { font-family: var(--font); font-size: 2.1rem; color: var(--blue); font-weight: 300; display:block; margin-bottom:.2em; }

/* As seen in / press list -----------------------------------------------------*/
.press-group { margin-bottom: 56px; }
.press-group:last-of-type { margin-bottom: 0; }
.press-group > h2 {
  font-size: 1.5rem; font-weight: 500; color: var(--ink); margin: 0 0 6px;
}
.press-group .group-note { color: var(--muted); font-size:.95rem; margin: 0 0 22px; }
.press-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.press-list li {
  padding: 16px 0; border-bottom: 1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline; gap: 4px 10px;
}
.press-list li:first-child { border-top: 1px solid var(--line); }
.press-list a {
  font-family: var(--font); font-size: 1.1rem; color: var(--ink); font-weight: 500;
  text-decoration:none; flex: 1 1 auto;
}
.press-list a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.press-list .outlet { color: var(--muted); font-style: italic; font-size:.97rem; flex:none; }
/* Podcast row with multiple platform links */
.press-list li.podcast { display:block; }
.press-list li.podcast .show { font-size:1.1rem; font-weight:500; color: var(--ink); display:block; margin-bottom:10px; }
.platforms { display:flex; flex-wrap:wrap; gap:8px; }
.platforms a {
  font-size:.88rem; font-weight:400; color: var(--blue); border:1px solid var(--line);
  border-radius: 100px; padding: 4px 13px; flex:none; transition: all .15s ease;
}
.platforms a:hover { border-color: var(--blue); background: var(--ice); text-decoration:none; }
.logos { display:flex; flex-wrap:wrap; gap: 40px; align-items:center; justify-content:center; margin-top: 48px; }
.logos img { height: 54px; width:auto; }
@media (max-width: 640px){
  .press-list li { display:block; }
  .press-list .outlet { display:block; margin-top:3px; }
}

/* Blog -----------------------------------------------------------------------*/
.post-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 40px 32px; }
.post-card { border-top: 1px solid var(--line); padding-top: 20px; display:flex; flex-direction:column; }
/* .thumb is an <a>, and inline boxes ignore aspect-ratio and overflow. Without
   display:block the 16/10 crop never applied: thumbnails rendered at their full
   natural height (358px instead of 208px) and overflowed onto the row below,
   colliding with the previous row's titles. */
.post-card .thumb { display:block; aspect-ratio: 16/10; overflow:hidden; margin-bottom: 16px; background: var(--ice); }
.post-card .thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.tag { display:inline-block; font-style: italic; font-size:.92rem; color: var(--blue); margin-bottom:.5em; }
.post-card h3 { font-size: 1.25rem; margin-bottom:.4em; font-weight: 500; color: var(--ink); }
.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--blue); }
/* Pin the date to the bottom of the card so dates align across a row even when
   titles wrap to different numbers of lines. */
.post-card .meta { color: var(--muted); font-style: italic; font-size:.95rem; margin-top:auto; padding-top:.6em; }

/* Chips ------------------------------------------------------------------------*/
.chips { display:flex; flex-wrap:wrap; gap: 10px; justify-content:center; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-size: .96rem; color: var(--navy); }

/* Stat band ----------------------------------------------------------------------*/
.stats { display:grid; grid-template-columns: repeat(3,1fr); gap: 32px; text-align:center; }
.stat .big { font-family: var(--font); font-size: clamp(1.9rem,3.4vw,2.4rem); color: #fff; font-weight: 300; }
.stat .label { color:#a9c3d3; font-size: 1rem; margin-top:.4em; font-style: italic; }

/* CTA band — full-bleed, matching the live navy section, not a floating card -----*/
.cta-band { text-align:center; }
.cta-band h2 { color:#fff; }
.cta-band p { color:#cfe0ec; max-width: 620px; margin: 0 auto 1.7em; }

/* Prose ------------------------------------------------------------------------*/
.prose { font-size: 1.12rem; }
.prose h2 { margin-top: 1.5em; font-size: 1.7rem; }
.prose h3 { margin-top: 1.3em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .55em; }
.prose blockquote { margin: 0 0 1.6em; padding: 18px 26px; border-left: 2px solid var(--blue); background: var(--ice); font-style: italic; color: var(--navy); }
.prose img { border-radius: var(--radius); margin: 1.6em 0; }

/* Disclosures / footer ----------------------------------------------------------*/
.disclosures { background: var(--ice); }
.disclosures p { font-size: .88rem; color: var(--muted); font-style: italic; margin: 0 auto .9em; }
.site-footer { background: var(--navy); color:#a9c3d3; padding: 60px 0 36px; font-size: .98rem; }
.site-footer h4, .site-footer .footer-head { color:#fff; font-family: var(--font); font-style: italic; font-weight: 400; font-size: 1rem; margin: 0 0 1em; letter-spacing: 0; }
.site-footer a { color:#a9c3d3; }
.site-footer a:hover { color: #fff; }
.footer-grid { display:grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:.65em; }
.footer-brand img { height: 44px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.15); padding-top: 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.9rem; color:#7d97a8; }

/* Utilities ----------------------------------------------------------------------*/
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.btn-row { display:flex; flex-wrap:wrap; gap:16px; }
.btn-row.center, .center .btn-row, .center > .btn-row { justify-content:center; }
.cta-band .btn-row, .hero .btn-row { justify-content:center; }

/* Responsive -----------------------------------------------------------------------*/
@media (max-width: 900px) {
  .cols-3, .post-grid, .stats { grid-template-columns: repeat(2,1fr); }
  .split, .cols-2 { grid-template-columns: 1fr; gap: 36px; }
  .split.reverse .split-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-links, .nav-cta .btn-outline { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 82px; left: 0; right: 0;
    background:#fff; border-bottom:1px solid var(--line); padding: 16px 28px 22px;
  }
  .nav.open .nav-links a { padding: 10px 0; border-bottom:1px solid var(--line); }
  .section { padding: 64px 0; }
  .cols-3, .post-grid, .stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}


/* Interactive planning topics (Solutions) ------------------------------------*/
.topics { display:flex; flex-direction:column; gap:10px; max-width: 880px; margin:0 auto; }
.topic { border:1px solid var(--line); border-radius: var(--radius); background:#fff; transition: border-color .18s ease, box-shadow .18s ease; }
.topic:hover { border-color: rgba(20,112,175,.5); }
.topic.open { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.topic-btn {
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family: var(--font); font-size: 1.1rem; font-weight: 500; color: var(--navy);
  padding: 18px 22px; display:flex; align-items:center; gap:16px; line-height:1.3;
  border-radius: var(--radius);
}
.topic-btn:hover, .topic.open .topic-btn { color: var(--blue); }
.topic-btn:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.topic-btn .t-name { flex:1 1 auto; }
.topic-btn .t-count {
  flex:none; font-size:.8rem; letter-spacing:.02em; color: var(--muted);
  background: var(--ice); border-radius: 100px; padding: 4px 11px; white-space:nowrap;
}
.topic-btn .chev {
  flex:none; width:11px; height:11px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform: rotate(45deg);
  transition: transform .2s ease; margin-top:-4px; opacity:.75;
}
.topic.open .topic-btn .chev { transform: rotate(-135deg); margin-top:3px; }
.topic-body { display:none; padding: 0 22px 22px; }
.topic.open .topic-body { display:block; }
.topic-body ul {
  list-style:none; margin:0; padding:16px 0 0; border-top:1px solid var(--line);
  columns: 2; column-gap: 36px;
}
.topic-body li {
  font-size:.97rem; color: var(--muted); padding: 5px 0 5px 17px; position:relative;
  line-height:1.5; break-inside: avoid; -webkit-column-break-inside: avoid;
}
.topic-body li::before { content:""; position:absolute; left:2px; top:13px; width:5px; height:5px; border-radius:50%; background: var(--blue); }
@media (max-width: 720px){
  .topic-body ul { columns:1; }
  .topic-btn { font-size:1.02rem; padding:16px 18px; gap:12px; }
  .topic-btn .t-count { display:none; }
  .topic-body { padding: 0 18px 18px; }
}


.sched-alt {
  text-align:center; margin: 22px auto 0; max-width: 620px;
  color: var(--muted); font-size: .98rem; line-height:1.6;
}
.sched-alt a { color: var(--blue); }

/* Family block (About) --------------------------------------------------------*/
.family { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.family li {
  display:grid; grid-template-columns: 34px auto 1fr; align-items:center; gap:0 14px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.family li:first-child { border-top:1px solid var(--line); }
.family svg { width:24px; height:24px; fill:none; stroke:var(--blue); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.family .paw ellipse, .family .paw path { fill: var(--blue); stroke: none; }
.family .fam-name { font-size:1.12rem; font-weight:500; color:var(--ink); }
.family .fam-rel  { font-size:.95rem; color:var(--muted); font-style:italic; text-align:right; }
@media (max-width:640px){
  .family li { grid-template-columns:30px 1fr; }
  .family .fam-rel { grid-column:2; text-align:left; margin-top:2px; }
}

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Accessibility ---------------------------------------------------------------*/
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 var(--radius) 0;
  font-size:1rem; text-decoration:none;
}
.skip-link:focus { left:0; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline:2px solid var(--blue); outline-offset:2px; border-radius:2px;
}
.navy a:focus-visible, .cta-band a:focus-visible, .site-footer a:focus-visible {
  outline-color:#fff;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* Fact grid (About) -----------------------------------------------------------*/
.facts { display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.fact { text-align:center; }
.fact svg { width:34px; height:34px; margin:0 auto 12px; display:block; stroke: var(--blue); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.fact .fact-num { font-size: 1.5rem; color: var(--navy); font-weight:500; line-height:1.2; margin-bottom:.15em; }
.fact p { font-size: .98rem; color: var(--muted); margin:0; line-height:1.5; }

/* Scheduler embed --------------------------------------------------------------*/
.scheduler { border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background:#fff; }
.scheduler iframe { display:block; width:100%; min-height: 800px; border:0; }

@media (max-width: 900px) {
  .topics { grid-template-columns: repeat(2,1fr); }
  .facts { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .topics { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2,1fr); gap:22px; }
}


/* Pricing tiers (Fees) ---------------------------------------------------------*/
.tiers { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; align-items:start; }
.tier { border:1px solid var(--line); border-radius: var(--radius); background:#fff; padding: 34px 28px 30px; display:flex; flex-direction:column; height:100%; }
.tier.featured { border:2px solid var(--blue); position:relative; }
.tier .flag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--blue); color:#fff; font-size:.82rem; letter-spacing:.04em; padding:4px 16px; border-radius:999px; white-space:nowrap; }
.tier h3 { color: var(--navy); font-size:1.35rem; font-weight:500; margin-bottom:.35em; }
.tier .blurb { color: var(--muted); font-size:1rem; margin-bottom:1.3em; }
.tier .price { font-size: 2.5rem; color: var(--blue); font-weight:300; line-height:1.1; margin-bottom:.1em; }
.tier .price-note { font-size:.95rem; color: var(--muted); font-style:italic; margin-bottom:1.4em; }
.tier ul { list-style:none; margin:0 0 1.6em; padding:0; border-top:1px solid var(--line); padding-top:18px; }
.tier li { font-size:.99rem; color:var(--ink); padding:6px 0 6px 26px; position:relative; line-height:1.55; }
.tier li::before { content:""; position:absolute; left:2px; top:13px; width:11px; height:6px; border-left:1.5px solid var(--blue); border-bottom:1.5px solid var(--blue); transform:rotate(-45deg); }
.tier .tier-cta { margin-top:auto; }
.tier .tier-cta .btn { width:100%; }
.bonus { background: var(--ice); border-radius: var(--radius); padding:16px 18px; font-size:.96rem; color:var(--navy); margin-bottom:1.6em; }
.bonus strong { color: var(--blue); }
@media (max-width: 900px){ .tiers { grid-template-columns:1fr; } .tier.featured{ order:-1; } }

/* Dated note at the top of an older post whose facts have since changed.
   Deliberately quieter than .prose blockquote so it reads as editorial
   metadata rather than part of the essay. */
.editor-note {
  margin: 0 0 2em;
  padding: 14px 20px;
  border-left: 2px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #f6f8fa;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
  font-style: normal;
}
.editor-note strong { color: var(--navy); font-weight: 600; }