/* =============================================================================
   Beacon House Advisors — website stylesheet
   Colour comes from colors.css, which every page links BEFORE this file.
   This file holds no palette and no colour literals. Use the kit's names, and
   its semantic aliases wherever a colour must flip by ground.
   Anything that paints its own dark ground carries class="bha-reversed"; the
   semantic tokens (--text-display, --text-body, --text-secondary,
   --text-secondary-small, --border-hairline, --interactive-hover,
   --interactive-current, --focus-ring) resolve correctly only inside it.
   ========================================================================== */

:root {
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1140px;
  --prose: 720px;
  --pad: clamp(20px, 5vw, 48px);
  --section-y: clamp(52px, 7vw, 88px);

  /* Sticky header: content height + the 4px Claret bottom rule. */
  --claret-rule: 4px;
  --header-h: 118px;
  --logo-h: 68px;
  --logo-ar: 7.211;   /* full reversed lockup is 1024x142 */
}
@media (max-width: 900px) { :root { --header-h: 86px; --logo-h: 46px; } }
/* At <=640px the header swaps to the condensed reversed lockup (1024x102):
   the full lockup's tagline would set below ~11px (manifest rule). */
@media (max-width: 640px) { :root { --header-h: 72px; --logo-h: 30px; --logo-ar: 10.039; } }

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--claret-rule));
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text-body);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--text-display);
  font-weight: 600;
  line-height: 1.16;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); font-weight: 600; }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.15em; }
a { color: var(--gold-ink); text-decoration-color: var(--brass-gold); text-underline-offset: 0.15em; }
a:hover { color: var(--ink-navy); }

/* Links on a dark ground: Parchment, gold-light on hover (both flip with scope). */
.bha-reversed a:not(.btn) { color: var(--text-body); text-decoration-color: var(--interactive-current); }
.bha-reversed a:not(.btn):hover { color: var(--interactive-hover); }

strong { font-weight: 600; color: var(--ink-navy); }
.bha-reversed strong { color: var(--text-display); }
em { font-style: italic; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: 0.5em; }

hr {
  border: 0;
  height: 1px;
  background: var(--border-hairline);
  margin: var(--section-y) 0;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface-sunken);
  color: var(--text-body);
  padding: 12px 18px;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---- Layout helpers --------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
section { padding: var(--section-y) 0; }

/* Eyebrows are Gold ink, never Brass Gold: Brass Gold is not set as text below
   headline scale (3.24:1 on Parchment); Gold ink is 5.26:1. On a dark ground
   the eyebrow takes the reversed secondary text colour. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.9rem;
}
.bha-reversed .eyebrow { color: var(--text-secondary); }

.lede {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--text-body);
}

/* The one pull-quote style. Claret is reserved for the 4px page brackets, so
   the quote rule is --border-strong; --text-display lets it render on navy. */
.pull {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.4;
  color: var(--text-display);
  border-left: 2px solid var(--border-strong);
  padding-left: 1.1rem;
  margin: 2rem 0;
}

.pull--plain { border: 0; padding: 0; margin: 0 auto; }
.pull--cta { max-width: 24ch; margin-bottom: 1.4rem; }

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.85em 1.4em;
  border-radius: 3px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Light ground: Ink Navy fill, Parchment text. */
.btn--primary { background: var(--ink-navy); color: var(--parchment); }
.btn--primary:hover { background: var(--navy-hover); color: var(--parchment); }
.btn--primary:active { background: var(--navy-press); }
.btn--ghost { background: transparent; color: var(--ink-navy); border-color: var(--harbor-navy); }
.btn--ghost:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: var(--parchment); }
.btn--ghost:active { background: var(--navy-press); border-color: var(--navy-press); }
/* Dark ground (inside .bha-reversed): Parchment fill, Ink Navy text. */
.btn--onDark { background: var(--parchment); color: var(--ink-navy); }
.btn--onDark:hover { background: var(--interactive-hover); color: var(--ink-navy); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }

/* ---- Header / nav -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--page);
  border-bottom: var(--claret-rule) solid var(--claret);
}
.site-header__inner {
  max-width: 1420px;   /* wider than --container: the 68px lockup (490px) and the nav (~833px) need ~1420px */
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 32px);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Logo sizes by height (--logo-h), then shrinks to fit beside the nav; its
   width is --logo-h x the lockup's aspect ratio (--logo-ar). */
.brand-link { display: block; flex: 0 1 calc(var(--logo-h) * var(--logo-ar)); min-width: 0; line-height: 0; }
.brand-link picture { display: block; }
.brand-link img { width: 100%; height: auto; }
@media (max-width: 640px) {
  .site-header__inner { gap: 16px; }
  .brand-link { min-width: 180px; }   /* condensed lockup minimum width */
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-body);
  cursor: pointer;
}
.nav-toggle:hover { color: var(--interactive-hover); }

.primary-nav { flex: none; height: 100%; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; align-items: center; gap: 18px; }
.primary-nav li { margin: 0; }
.primary-nav a:not(.btn),
.has-sub > button {
  display: block;
  line-height: 1.4;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-body);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 6px 0;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.site-header .primary-nav a:hover,
.site-header .primary-nav a:focus-visible,
.has-sub > button:hover,
.has-sub > button:focus-visible,
.has-sub:hover > button,
.has-sub:focus-within > button { color: var(--interactive-hover); border-bottom-color: var(--brass-gold); }
.site-header .primary-nav a[aria-current="page"],
.has-sub > button[aria-current="page"] { color: var(--interactive-current); border-bottom-color: var(--brass-gold); }

.has-sub { position: relative; align-self: stretch; display: flex; align-items: center; }
.has-sub > button::after { content: " \25BE"; font-size: 0.7em; vertical-align: middle; }
/* Section labels (Risk Protections, Planning Strategies) wrap onto two lines
   on desktop, centred against the single-line items; the menu keeps one line. */
.has-sub > button { text-align: center; }

/* Section dropdown panels (Risk Protections, Planning Strategies): painted dark (carry .bha-reversed in the markup). */
.subnav {
  position: absolute;
  top: calc(100% + var(--claret-rule));
  left: 50%;
  transform: translateX(-50%);
  min-width: 22rem;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-top: 2px solid var(--brass-gold);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 16px 36px -16px color-mix(in oklab, var(--ink-navy) 35%, transparent);
  padding: 0.5rem;
  display: none;
}
/* Bridges the Claret rule so the pointer can travel from button to panel. */
.subnav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * (var(--claret-rule) + 2px));
  height: calc(var(--claret-rule) + 2px);
}
.has-sub:hover .subnav,
.has-sub:focus-within .subnav,
.subnav.is-open { display: block; }
.subnav ul { flex-direction: column; align-items: stretch; gap: 0; height: auto; }
.primary-nav .subnav a:not(.btn) {
  display: block;
  padding: 0.6em 0.8em;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  border-bottom: 0;
  border-radius: 3px;
}
.site-header .subnav a:hover { background: var(--surface-sunken); border-bottom: 0; }
.site-header .subnav a[aria-current="page"] { border-bottom: 0; }

/* Contact: the dark-ground button. */
.primary-nav .nav-cta { margin-left: 6px; }
.primary-nav .nav-cta a.btn {
  padding: 0.75em 1.25em;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: var(--parchment);
  color: var(--ink-navy);
}
.site-header .primary-nav .nav-cta a.btn:hover { background: var(--interactive-hover); color: var(--ink-navy); border-bottom-color: transparent; }

/* At 1270px and below the nav (two dropdown sections + five items, ~833px)
   no longer leaves the lockup room to stay at or above 46px high (full-lockup
   tagline legible), so the disclosure menu takes over. */
@media (max-width: 1270px) {
  .nav-toggle { display: inline-block; }
  .primary-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: auto;
    background: var(--page);
    border-bottom: 1px solid var(--border-hairline);
    padding: 0.6rem var(--pad) 1.4rem;
    max-height: calc(100vh - var(--header-h) - var(--claret-rule));
    overflow-y: auto;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; height: auto; }
  .primary-nav > ul > li { border-bottom: 1px solid var(--border-hairline); }
  .primary-nav a:not(.btn), .has-sub > button { padding: 0.85em 0; width: 100%; text-align: left; }
  .has-sub { display: block; align-self: auto; }
  .has-sub > button::after { float: right; }
  .lbl-br { display: none; }
  .subnav {
    position: static;
    transform: none;
    display: block;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0.6rem 0.8rem;
    min-width: 0;
  }
  .subnav::before { display: none; }
  .primary-nav .subnav a:not(.btn) { padding: 0.55em 0; }
  .primary-nav > ul > li.nav-cta { margin: 0.9rem 0 0; border-bottom: 0; }
  .nav-cta .btn { width: 100%; justify-content: center; }
}

/* ---- Hero --------------------------------------------------------- */
.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.hero h1 { max-width: 16ch; }
.hero .lede { max-width: 52ch; margin-top: 1rem; }

.page-head { padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--border-hairline); }
.page-head h1 { max-width: 20ch; }
.page-head .lede { max-width: 60ch; margin-top: 1rem; }

/* ---- Cards / grids ----------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  padding: 1.6rem 1.5rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { border-color: var(--brass-gold); transform: translateY(-2px); }
.card h3 { margin-bottom: 0.35em; }
.card p { font-size: 0.98rem; margin-bottom: 0; }
.card__more {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-ink);
}
a.card:hover .card__more { color: var(--ink-navy); }

.feature-list { list-style: none; padding: 0; margin: 2rem 0 0; }
.feature-list li { padding: 1.3rem 0; border-top: 1px solid var(--border-hairline); margin: 0; }
.feature-list li:last-child { border-bottom: 1px solid var(--border-hairline); }
.feature-list h3 { margin-bottom: 0.2em; }
.feature-list p { margin-bottom: 0; font-size: 1rem; }

/* numbered process steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 2.4rem 0 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 2rem 3.6rem;
  margin: 0;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold-ink);
  border: 1px solid var(--brass-gold);
  border-radius: 50%;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 2.7rem;
  bottom: 0.4rem;
  width: 1px;
  background: var(--border-hairline);
}
.steps h3 { margin-bottom: 0.25em; }
.steps p { margin-bottom: 0; }

/* ---- Panels ----------------------------------------------------- */
.panel {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--brass-gold);
  border-radius: 4px;
  padding: 1.6rem 1.7rem;
}
.panel--pine { border-left-color: var(--pine); }
.panel h3 { margin-top: 0; }
.panel :last-child { margin-bottom: 0; }

/* ---- Notes (cross-links and asides, set apart from body copy) -------- */
.note {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--border-strong);
  border-radius: 4px;
  padding: 0.9rem 1.2rem;
  font-size: 0.95rem;
  margin: 1.4rem 0 0;
}
.note strong { color: var(--text-display); }
.section-tight { padding: clamp(28px, 4vw, 44px) 0; }
.section-tight .note { margin: 0; }

/* Dark band: carries .bha-reversed in the markup, which supplies the ground
   and the text colours. */
.band {
  background: var(--page);
  color: var(--text-body);
}
.band--parchment {
  background: var(--surface);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

/* ---- Photographs ------------------------------------------------- */
/* Same border and radius as .portrait; 16:9 by default. On the dark Home band
   the border resolves through the reversed-scope token (the band carries
   .bha-reversed), so no colour is set here. */
.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
}
.photo--square { aspect-ratio: 1 / 1; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 21 / 9; }

/* real portrait photo */
.portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border-hairline);
}

/* ---- Two-column split -------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1.1fr 0.9fr; }
  .split--textRight { grid-template-columns: 0.9fr 1.1fr; }
}

/* ---- Insight / article ------------------------------------ */
.article-meta { font-size: 0.9rem; color: var(--text-secondary-small); margin-bottom: 1.5rem; }
.article-body { max-width: var(--prose); }
.article-body h2 { margin-top: 2em; }
.article-body h3 { margin-top: 1.6em; }

.insight-list { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 0; }
.insight-list li { border-top: 1px solid var(--border-hairline); padding: 1.8rem 0; margin: 0; }
.insight-list li:last-child { border-bottom: 1px solid var(--border-hairline); }
.insight-list h3 { margin-bottom: 0.3em; }
.insight-list h3 a { text-decoration: none; color: var(--text-display); }
.insight-list h3 a:hover { color: var(--gold-ink); }
.insight-list p { margin-bottom: 0.4em; font-size: 1rem; }
.insight-list .article-meta { margin-bottom: 0.6rem; }

/* ---- Definition rows ------------------------------------- */
.dl-rows { border-top: 1px solid var(--border-hairline); margin: 1.6rem 0 0; }
.dl-rows > div { display: grid; gap: 0.2rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--border-hairline); }
@media (min-width: 700px) { .dl-rows > div { grid-template-columns: 200px 1fr; } }
.dl-rows dt { font-weight: 600; color: var(--ink-navy); }
.dl-rows dd { margin: 0; }

/* ---- Page-bottom Claret rule + footer ------------------------ */
/* Second and last Claret rule on a view: the header's bottom edge is the first. */
.page-rule { height: var(--claret-rule); background: var(--claret); border: 0; margin: 0; }

.site-footer {
  background: var(--page);
  color: var(--text-secondary);
  padding: 44px 0 56px;
  font-size: 14px;
  line-height: 1.7;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-top { margin-bottom: 28px; }
.footer-top img { width: min(462px, 100%); height: auto; }   /* 46px high at full width */
.site-footer__tag { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--text-reversed-display); margin: 10px 0 0; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.6rem; }
.footer-legal {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border-hairline);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.footer-legal p { margin-bottom: 0.7em; }

/* ---- Utilities ------------------------------------------- */
.center { text-align: center; }
.measure { max-width: var(--prose); }
.stack-lg > * + * { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.muted { color: var(--text-secondary); font-size: 1rem; }
.callout {
  background: var(--claret-wash);
  border: 1px solid var(--border-hairline);
  border-left: 4px solid var(--border-strong);
  border-radius: 4px;
  padding: 1.1rem 1.3rem;
  font-size: 0.95rem;
  color: var(--text-body);
  margin-bottom: 2rem;
}
.callout strong { color: var(--claret); }

/* ---- Diagram frame (approach, life insurance design) --------------- */
/* Matches the photo treatment: 16:9, hairline border, 4px radius. */
.diagram-frame {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  background: var(--surface-card);
  overflow: hidden;
}

/* ===== Diagram classes — appended verbatim from diagrams/diagram.css (Work Order 04) ===== */
/* ---- Inline diagrams (approach, life insurance design) ------------
   Colours come only from kit tokens. The SVGs are inlined in the page so
   they inherit the page's fonts and tokens. */
.dg { display: block; width: 100%; height: auto; }
.dg-panel { fill: var(--surface-card); stroke: var(--border-hairline); stroke-width: 2; }
.dg-title { fill: var(--text-display); font-family: var(--serif); font-weight: 700; font-size: 27px; }
.dg-title--memo { font-size: 32px; }
.dg-node { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.dg-node--policy { fill: var(--ink-navy); stroke: var(--ink-navy); }
.dg-label { fill: var(--text-body); font-family: var(--sans); font-weight: 500; font-size: 23px; }
.dg-label--inv { fill: var(--parchment); }
.dg-arrow { stroke: var(--border-strong); stroke-width: 3; }
.dg-arrowhead { fill: var(--border-strong); }
.dg-arrowlabel { fill: var(--text-secondary-small); font-family: var(--sans); font-size: 20px; font-style: italic; }
.dg-sheet { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.dg-sheet-shadow { fill: var(--border-hairline); }
.dg-sheet-bar { fill: var(--harbor-navy); }
.dg-rule { stroke: var(--border-hairline); stroke-width: 3; }
.dg-head { fill: var(--text-display); font-family: var(--sans); font-weight: 600; font-size: 22px; }
.dg-bar { fill: var(--border-hairline); }