/* ============================================================
   Shared pages, Services + About
   Built in Direction A ("The Private Bank") style. These pages
   load direction-a.css (palette + primitives) and then this file
   for page-specific components. Edit copy in the HTML; palette
   lives in direction-a.css.
   ============================================================ */

/* -------------------- Page hero (interior) -------------------- */
.dir-a .page-hero { padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.dir-a .page-hero .eyebrow { display: inline-block; margin-bottom: 1.4rem; }
.dir-a .page-hero h1 { max-width: 18ch; margin-bottom: 1.4rem; }
.dir-a .page-hero p { max-width: 54ch; color: var(--charcoal-60); font-size: var(--step-lead); line-height: 1.5; }

/* -------------------- Services detail list -------------------- */
.dir-a .svc-detail { padding: var(--section-y) 0; }
.dir-a .svc-item {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2.4rem, 5vw, 3.6rem) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.dir-a .svc-item:first-child { border-top: 1px solid var(--line); }
.dir-a .svc-item__num { font-family: var(--font-serif); font-size: 1.4rem; color: var(--brass-deep); }
.dir-a .svc-item h2 { font-size: var(--step-h3); margin-bottom: 1rem; }
.dir-a .svc-item__lead { color: var(--charcoal); margin-bottom: 1.2rem; max-width: 60ch; }
.dir-a .svc-item ul { display: grid; gap: 0.6rem; max-width: 60ch; }
.dir-a .svc-item li { position: relative; padding-left: 1.4rem; color: var(--charcoal-60); font-size: 0.98rem; }
.dir-a .svc-item li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 1px; background: var(--brass); }
@media (max-width: 620px) { .dir-a .svc-item { grid-template-columns: 1fr; gap: 0.8rem; } }

/* -------------------- About layout -------------------- */
.dir-a .about-lead { padding: var(--section-y) 0; }
.dir-a .about-lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.dir-a .about-lead__grid p + p { margin-top: 1.3rem; }
.dir-a .about-lead__grid p { color: var(--charcoal-60); }
.dir-a .about-lead__grid p:first-of-type { color: var(--charcoal); font-size: var(--step-lead); line-height: 1.5; }

/* Portrait placeholder (swap per images/README.md, about-portrait). */
.dir-a .portrait {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(80% 60% at 70% 20%, rgba(171,138,85,0.16), transparent 60%),
    linear-gradient(160deg, var(--forest-soft), var(--forest));
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.dir-a .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* Founder / credential rows */
.dir-a .about-facts { background: var(--ivory-deep); padding: var(--section-y) 0; }
.dir-a .fact-row { display: grid; grid-template-columns: 16rem 1fr; gap: clamp(1rem, 4vw, 3rem); padding: 1.8rem 0; border-top: 1px solid var(--line); }
.dir-a .fact-row:last-child { border-bottom: 1px solid var(--line); }
.dir-a .fact-row dt { font-family: var(--font-serif); color: var(--forest); font-size: 1.1rem; }
.dir-a .fact-row dd { margin: 0; color: var(--charcoal-60); max-width: 60ch; }
@media (max-width: 620px) { .dir-a .fact-row { grid-template-columns: 1fr; gap: 0.5rem; } }

/* Simple CTA band reused on interior pages */
.dir-a .cta-band { background: var(--forest); color: var(--ivory); padding: clamp(4rem, 8vw, 6.5rem) 0; text-align: center; }
.dir-a .cta-band h2 { color: var(--ivory); max-width: 20ch; margin: 0 auto 1.2rem; }
.dir-a .cta-band p { color: rgba(246,243,236,0.72); max-width: 46ch; margin: 0 auto 2rem; }
.dir-a .cta-band .tagline { font-family: var(--font-serif); font-style: italic; color: var(--brass); font-size: 1.4rem; margin-bottom: 1.6rem; }