/* About page (Sept 27, 2026, second Astra pass). Loaded on about.html only, after page-kit.css,
   and every rule is scoped to body.about-refined.
   Joseph's direction: match the other interior pages, Miami in the shaped hero, his portrait in a
   separate founder section below. So the page opens on the shared page-kit hero (styled by
   page-kit.css; only the button arrow is adjusted here), then:
     .ab-founder  sand band: the whole biography in one text column beside a 4:5 portrait that
                  stays in view while the text scrolls past it
     .ab-quals    cream band: credentials and education, then affiliations, as two ledger rows
                  (a heading on the left, fine-ruled entries on the right)
     .ab-life     sand band: Outside of work with Leo, then the short close
   The navy "Talk with Joseph." banner follows as on every page. The older .ap- profile rules
   that lived here were retired with this rebuild. */

.about-refined{
  --ab-ink:#0c1a2d;
  --ab-soft:#4a5568;
  --ab-gold:#d7b486;
  --ab-gold-text:#7d5f33;
  --ab-rule:#e0d7c6;
  --ab-rule-strong:#d8ceba;
  --ab-portrait-bg:#e3dac9;
}

/* ---- Hero: the shared kit hero. "Meet Joseph" jumps down the page, so its arrow points down ---- */
.page-kit.about-refined .pk-btn.ab-jump:hover svg{transform:translateY(3px)}
.about-refined .about-hero .pk-hero-media img{object-position:50% 50%}
/* land the founder band just under the fixed header (html has scroll-padding-top:92px) */
.about-refined #meet-joseph{scroll-margin-top:-18px}

/* ---- Shared type inside the About bands ---- */
.one-ground.page-kit.about-refined main .ab-founder h2,
.one-ground.page-kit.about-refined main .ab-quals h2,
.one-ground.page-kit.about-refined main .ab-life h2{font-family:"Editor's Note","Lora",Georgia,serif;font-weight:300;
  letter-spacing:-.02em;color:var(--ab-ink);margin:0;text-align:left;text-wrap:balance}
.one-ground.page-kit.about-refined main .ab-founder p,
.one-ground.page-kit.about-refined main .ab-life p{margin:0;font-size:18px;line-height:1.75;color:var(--ab-soft)}
.one-ground.page-kit.about-refined main .ab-founder p+p,
.one-ground.page-kit.about-refined main .ab-life-copy p+p{margin-top:20px}
.about-refined main section p a{color:var(--ab-ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;text-decoration-color:var(--ab-gold);transition:text-decoration-color .2s ease,color .2s ease}
.about-refined main section p a:hover{text-decoration-color:var(--ab-ink)}
.about-refined main section a:focus-visible{outline:2px solid var(--ab-gold-text);outline-offset:3px;border-radius:2px}

/* ---- Founder: the whole biography in one text column on the left, the portrait on the right.
   Every paragraph starts on the same edge as the hero copy and the section headings (Joseph, Sept 27:
   the text "starts off in line with itself and then pushes off to the left"), and all five share one
   width (Joseph, same evening: the fourth and fifth "running over the picture" looked awkward). The
   heading sits level with the top of the photo, and the photo stays in view beside the text as the
   reader scrolls, so the column beside the longer story is never empty. ---- */
.about-refined .ab-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,444px);
  grid-template-rows:auto auto 1fr;grid-template-areas:"head portrait" "copy portrait" "story portrait";
  column-gap:clamp(48px,6.4vw,92px);align-items:start}
.about-refined .ab-intro-head{grid-area:head}
.one-ground.page-kit.about-refined main .ab-intro-head h2{font-size:clamp(40px,3.7vw,54px);line-height:1.04;
  margin-top:-.14em}/* Editor's Note sits low in its line box; this puts the cap line on the photo's top edge */
.one-ground.page-kit.about-refined main .ab-intro-head p.ab-role{margin:16px 0 0;font:500 13.5px/1.5 "General Sans",Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ab-gold-text)}
.about-refined .ab-nw{white-space:nowrap}
.about-refined .ab-portrait{grid-area:portrait;margin:0;position:sticky;top:112px}
.about-refined .ab-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:16px;background:var(--ab-portrait-bg)}
.about-refined .ab-intro-copy{grid-area:copy;margin-top:34px;max-width:34em}

/* the rest of the story continues in the same column, at the same paragraph spacing */
.about-refined .ab-story{grid-area:story;max-width:34em;margin:20px 0 0}
.about-refined .ab-story strong{font-weight:600;color:var(--ab-ink)}

/* ---- Credentials and affiliations: two ledger rows on the cream band ---- */
.about-refined .ab-ledger{padding:0;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  column-gap:clamp(40px,6.4vw,96px);align-items:start}
.about-refined .ab-ledger+.ab-ledger{margin-top:96px}
.one-ground.page-kit.about-refined main .ab-ledger>h2{position:relative;padding-top:28px;
  font-size:clamp(30px,2.5vw,38px);line-height:1.12}
.about-refined .ab-ledger>h2::before{content:"";position:absolute;left:0;top:0;width:36px;height:2px;background:var(--ab-gold)}
.about-refined .ab-ledger-body{min-width:0;max-width:708px}
.one-ground.page-kit.about-refined main .ab-ledger-body p{margin:0}

/* the four qualifications: term, then who grants it, on fine rules */
.about-refined .ab-creds{list-style:none;margin:0;padding:0;border-top:1px solid var(--ab-rule-strong)}
.about-refined .ab-creds li{margin:0;padding:19px 0 18px;border-bottom:1px solid var(--ab-rule)}
.about-refined .ab-creds li:last-child{border-bottom:0;padding-bottom:0}
.about-refined .ab-term{display:block;font-family:"General Sans",Arial,sans-serif;font-size:18px;font-weight:500;
  line-height:1.4;color:var(--ab-ink)}
/* keeps "…certification, granted by CFP Board" whole for screen readers without showing the comma */
.about-refined .ab-comma{font-size:0}
.about-refined .ab-issuer{display:block;margin-top:3px;font-size:16px;line-height:1.55;color:var(--ab-soft)}
.about-refined .ab-issuer::first-letter{text-transform:uppercase}

/* the two credential explanations */
.about-refined .ab-notes{margin-top:34px;border-top:1px solid var(--ab-rule-strong)}
.about-refined .ab-note{border-bottom:1px solid var(--ab-rule-strong)}
.about-refined .ab-note>summary{list-style:none;display:flex;align-items:center;gap:16px;min-height:60px;
  padding:14px 0;cursor:pointer;font-family:"General Sans",Arial,sans-serif;font-size:16px;font-weight:500;
  line-height:1.4;color:var(--ab-ink);transition:color .2s ease}
.about-refined .ab-note>summary::-webkit-details-marker{display:none}
.about-refined .ab-note>summary::after{content:"";flex:none;width:8px;height:8px;margin:0 4px 4px auto;
  border:solid var(--ab-gold-text);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .25s ease}
.about-refined .ab-note[open]>summary::after{margin-bottom:-4px;transform:rotate(-135deg)}
.about-refined .ab-note>summary:hover{color:var(--ab-gold-text)}
.about-refined .ab-note>summary:focus-visible{outline:2px solid var(--ab-gold-text);outline-offset:4px;border-radius:2px}
.about-refined .ab-mark{flex:none;width:auto;height:22px}
.about-refined .ab-note-body{padding:0 0 22px}
.one-ground.page-kit.about-refined main .ab-note-body p{font-size:16px;line-height:1.7;color:var(--ab-soft)}
.about-refined .ab-note[open] .ab-note-body{animation:ab-open .28s ease both}
@keyframes ab-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.one-ground.page-kit.about-refined main p.ab-verify{margin-top:20px;font-size:14.5px;line-height:1.6;color:var(--ab-soft)}
.about-refined main p.ab-verify a{color:var(--ab-gold-text);text-decoration-color:currentColor}
.about-refined main p.ab-verify a:hover{color:var(--ab-ink)}

/* affiliations: logo, name, sentence; marks balanced by eye rather than forced into one box */
.about-refined .ab-orgs{list-style:none;margin:0;padding:0;border-top:1px solid var(--ab-rule-strong)}
.about-refined .ab-org{display:grid;grid-template-columns:128px minmax(0,1fr);column-gap:32px;row-gap:4px;
  align-items:center;margin:0;padding:26px 0;border-bottom:1px solid var(--ab-rule)}
.about-refined .ab-org-logo{grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;
  width:128px;border-radius:6px;line-height:0}
.about-refined .ab-org-logo img{display:block;width:auto;max-width:100%;height:auto;transition:opacity .2s ease}
.about-refined .ab-org-napfa img{width:124px}
.about-refined .ab-org-fpa img{height:60px;border-radius:8px}
.about-refined .ab-org-xypn img{height:56px}
.about-refined .ab-org-logo:hover img{opacity:.85}
.about-refined .ab-org-logo:focus-visible{outline:2px solid var(--ab-gold-text);outline-offset:6px}
.one-ground.page-kit.about-refined main .ab-org h3{grid-column:2;align-self:end;margin:0;font-family:"General Sans",Arial,sans-serif;
  font-size:17.5px;font-weight:600;line-height:1.35;letter-spacing:0;color:var(--ab-ink)}
.one-ground.page-kit.about-refined main .ab-org p{grid-column:2;align-self:start;font-size:16.5px;line-height:1.65;color:var(--ab-soft)}
.one-ground.page-kit.about-refined main p.ab-affil-note{margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--ab-soft)}

/* ---- Outside of work: Leo supports the paragraph; he is not a second portrait ---- */
.about-refined .ab-life-grid{max-width:880px;margin:0;display:grid;grid-template-columns:minmax(0,1fr) 240px;
  column-gap:72px;align-items:center}
.one-ground.page-kit.about-refined main .ab-life-copy h2{font-size:clamp(34px,3vw,44px);line-height:1.08;margin-bottom:22px}
.about-refined .ab-leo{margin:0}
.about-refined .ab-leo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px}
.about-refined .ab-leo figcaption{margin-top:12px;font-family:"General Sans",Arial,sans-serif;font-size:13.5px;
  line-height:1.5;color:var(--ab-soft)}
.about-refined .ab-close{max-width:880px;margin:80px 0 0;padding-top:40px;border-top:1px solid var(--ab-rule-strong)}
.one-ground.page-kit.about-refined main .ab-close p{color:var(--ab-ink)}
.one-ground.page-kit.about-refined main .ab-close p.ab-next{margin-top:10px;font-size:16px;line-height:1.6;color:var(--ab-soft)}

/* ---- One gentle entrance for the blocks below the first screen (added by script, so without
   it nothing is hidden) ---- */
.about-refined .ab-wait{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.about-refined .ab-wait.ab-in,.about-refined .ab-wait:focus-within{opacity:1;transform:none}

/* ---- Narrower screens ---- */
@media (max-width:1100px){
  .about-refined .ab-intro{grid-template-columns:minmax(0,1fr) minmax(0,40%);column-gap:48px}
  .about-refined .ab-ledger{grid-template-columns:minmax(0,240px) minmax(0,1fr);column-gap:48px}
}
/* tablets: the heading runs across the top, then the introduction beside the portrait */
@media (max-width:900px){
  .about-refined .ab-intro{grid-template-columns:minmax(0,1fr) minmax(0,42%);grid-template-rows:auto auto 1fr;
    grid-template-areas:"head head" "copy portrait" "story portrait";column-gap:36px}
  .one-ground.page-kit.about-refined main .ab-intro-head h2{margin-top:0}
  .about-refined .ab-portrait{margin-top:32px}
  .about-refined .ab-intro-copy{margin-top:32px}
  .about-refined .ab-story{margin-top:20px}
  .about-refined .ab-ledger{grid-template-columns:minmax(0,1fr)}
  .one-ground.page-kit.about-refined main .ab-ledger>h2{margin-bottom:30px}
  .about-refined .ab-ledger+.ab-ledger{margin-top:80px}
  .about-refined .ab-life-grid{grid-template-columns:minmax(0,1fr) 200px;column-gap:44px}
}
/* below 860px the kit's hero copy sits 22px in; the About bands match it exactly */
@media (max-width:860px){
  body.page-kit.one-ground.about-refined main>section.pk-band>.wrap{padding:0 22px}
}
/* phones: heading, portrait, introduction, then the story, all in one column */
@media (max-width:760px){
  .about-refined .ab-intro{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "portrait" "copy" "story"}
  .about-refined .ab-portrait{position:static}
  .one-ground.page-kit.about-refined main .ab-intro-head h2{font-size:clamp(36px,9.6vw,42px)}
  .about-refined .ab-portrait{margin-top:28px}
  .about-refined .ab-intro-copy{margin-top:30px;max-width:none}
  .one-ground.page-kit.about-refined main .ab-founder p,
  .one-ground.page-kit.about-refined main .ab-life p{font-size:17px;line-height:1.72}
  .one-ground.page-kit.about-refined main .ab-founder p+p,
  .one-ground.page-kit.about-refined main .ab-life-copy p+p{margin-top:18px}
  .about-refined .ab-story{margin-top:18px;max-width:none}
  .one-ground.page-kit.about-refined main .ab-ledger>h2{font-size:clamp(30px,8vw,34px)}
  .about-refined .ab-ledger+.ab-ledger{margin-top:64px}
  .about-refined .ab-term{font-size:17px}
  .about-refined .ab-issuer{font-size:15.5px}
  .about-refined .ab-life-grid{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .about-refined .ab-leo{width:200px}
  .about-refined .ab-close{margin-top:56px;padding-top:32px}
  .one-ground.page-kit.about-refined main .ab-close p{font-size:17px}
}
@media (max-width:600px){
  /* affiliations: a small logo and name header, then the sentence at full width */
  .about-refined .ab-org{grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:12px;padding:24px 0}
  .about-refined .ab-org-logo{grid-row:1;width:auto;justify-content:flex-start}
  .about-refined .ab-org-napfa img{width:100px}
  .about-refined .ab-org-fpa img{height:46px}
  .about-refined .ab-org-xypn img{height:44px}
  .one-ground.page-kit.about-refined main .ab-org h3{grid-column:2;grid-row:1;align-self:center}
  .one-ground.page-kit.about-refined main .ab-org p{grid-column:1 / -1;grid-row:2}
}
/* the smallest phones: the decorative credential marks give their width to the label */
@media (max-width:360px){
  .about-refined .ab-mark{display:none}
}
@media (prefers-reduced-motion:reduce){
  .about-refined .ab-wait{opacity:1;transform:none;transition:none}
  .about-refined .ab-note[open] .ab-note-body{animation:none}
  .about-refined .ab-note>summary::after,.about-refined .ab-note>summary,.about-refined main section p a,
  .about-refined .ab-org-logo img{transition:none}
  .page-kit.about-refined .pk-btn.ab-jump:hover svg{transform:none}
}
@media print{
  .about-refined .ab-wait{opacity:1;transform:none}
  .about-refined .ab-portrait{position:static}
}