/* ===========================================================================
   Your IA, LLC
   ---------------------------------------------------------------------------
   Concept: two paths, one standard.

   The firm serves two people who never meet — the client seeking a plan and
   the advisor seeking independence — and the old site tried to speak to both
   at once from the same hero, so it read as neither. Here the split is the
   structure: the home page opens two doors, the nav carries both tracks, and
   everything below the fork is written for exactly one reader.

   What holds the two halves together is the fiduciary standard, so the design
   argues for it: a serif for the things the firm commits to, a plain sans for
   everything operational, generous rules and open space instead of stock
   photography. A registered adviser should look like it keeps records, not
   like it runs ads.

   Palette is Your IA's own green on warm paper. One accent, used sparingly
   enough that it still means something when it appears.
   =========================================================================== */

:root {
  /* --- Your IA brand ---------------------------------------------------- */
  --green:    #0F6F59;   /* the mark's green — the single accent */
  --green-d:  #0A5343;   /* one step down: pressed states, deep grounds */
  --green-xd: #06342A;   /* the dark ground the footer and heroes sit on */
  --green-l:  #178C70;   /* one step up: hover */
  --green-w:  #E8F1EE;   /* washed, for tints that must not shout */

  --ink:    #0E1A17;   /* near-black, warmed toward the green */
  --slate:  #4C5A56;   /* body copy */
  --muted:  #77837F;   /* captions, meta, disabled */

  --paper:   #FFFFFF;
  --paper-2: #F6F8F7;  /* the off-white band */
  --rule:      #E0E6E3;
  --rule-dark: rgba(255,255,255,.14);

  /* Your IA has no licensed brand face — the Base44 site ran on the browser's
     default sans. These are chosen, not inherited: a transitional serif for
     what the firm commits to, and Inter for everything that is interface.
     Swap the first name in each stack if a licensed family is ever bought. */
  --display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 4vw, 52px);
  --maxw:   1240px;
  --band:   clamp(64px, 6.5vw, 108px);
  --hdr:    92px;
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding-top: var(--hdr);           /* the header is fixed */
  background: var(--paper);
  color: var(--slate);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,video,svg,iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1,h2,h3,h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.018em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.4vw, 74px); letter-spacing: -.028em; }
h2 { font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.022em; }
h3 { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; }
h4 { font-size: 17px; font-family: var(--body); font-weight: 600; letter-spacing: -.005em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }
/* --ink is a near-black, so emphasis inherited it straight onto the dark
   grounds and disappeared. The footer's conflict-of-interest sentence is the
   one that matters — emphasis there is doing regulatory work, not decorative
   work, and it has to be the most readable thing in the paragraph. Every dark
   container is named, so this cannot regress the next time one is added. */
.dark strong, .ftr strong, .hero strong, .phead strong,
.claim strong, .cred strong { color: #fff; }

.wrap  { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.band  { padding: var(--band) 0; }
.band--tight { padding: clamp(44px,4.5vw,72px) 0; }
.tint  { background: var(--paper-2); }
.dark  { background: var(--green-xd); color: rgba(255,255,255,.72); }
.dark h1,.dark h2,.dark h3,.dark h4 { color: #fff; }
.lede  { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.6; color: var(--slate); max-width: 62ch; }
.dark .lede, .hero .lede, .phead .lede { color: rgba(255,255,255,.76); }

/* --- Eyebrow: the small label above a section heading --------------------- */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  font: 600 11.5px/1 var(--body);
  letter-spacing: .15em; text-transform: uppercase; color: var(--green);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--green); flex: none; }
.dark .eyebrow, .hero .eyebrow, .phead .eyebrow { color: #7FD3BC; }
.dark .eyebrow::before, .hero .eyebrow::before, .phead .eyebrow::before { background: #7FD3BC; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border: 1.5px solid transparent; border-radius: 2px;
  font: 600 15px/1 var(--body); letter-spacing: .005em; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn--g     { background: var(--green); color: #fff; border-color: var(--green); }
.btn--g:hover  { background: var(--green-d); border-color: var(--green-d); }
.btn--line  { color: var(--ink); border-color: var(--rule); background: var(--paper); }
.btn--line:hover { border-color: var(--ink); }
.btn--linew { color: #fff; border-color: rgba(255,255,255,.38); }
.btn--linew:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--sm    { padding: 11px 18px; font-size: 14px; }
.btn__arrow { transition: transform .18s; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --- Header --------------------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 90; height: var(--hdr);
  display: flex; align-items: center;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
/* The header runs edge to edge rather than sitting inside the content
   measure. Held to 1240px it read as marooned in the middle of a wide screen
   — at 2400px the logo and the nav were bunched into the centre third with
   empty white either side.

   The gutter grows with the viewport but is capped at 72px, so on a very wide
   monitor the logo and the nav stay related to each other instead of drifting
   to opposite coasts.

   This does put the logo further left than the hero headline below it, since
   the content keeps its measure. That is a deliberate full-bleed nav over
   contained content, not a mistake — but it is the reason the two do not
   line up, so don't "fix" it by accident. */
.hdr .wrap { display: flex; align-items: center; gap: 28px; max-width: none;
             padding-left: clamp(20px, 3vw, 72px); padding-right: clamp(20px, 3vw, 72px); }
.hdr__logo img { width: 210px; height: auto; }
/* The nav fills the space between the logo and the right edge. The links
   group sits immediately after the logo; the actions group is pushed to the
   far right by its own auto margin. Pushing the whole nav right instead would
   leave a long dead run after the logo and bunch everything into one corner. */
.nav { flex: 1; margin-left: 12px; display: flex; align-items: center; gap: 0; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav a { font: 500 15px/1 var(--body); color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--green); }
.nav a[aria-current="page"] { border-bottom-color: var(--green); color: var(--green); }
/* .nav a is more specific than .btn, so the header CTA needs its own hand. */
.nav a.btn { padding: 11px 18px; border: 1.5px solid var(--green); border-radius: 2px; color: #fff; }
.nav a.btn:hover { color: #fff; }
.nav a.btn--line { color: var(--ink); border-color: var(--rule); }
.nav a.btn--line:hover { color: var(--ink); border-color: var(--ink); }

.burger { display: none; margin-left: auto; width: 44px; height: 44px; padding: 11px; background: none; border: 0; cursor: pointer; }
.burger i { display: block; height: 2px; background: var(--ink); margin: 4px 0; transition: transform .22s, opacity .22s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Home hero ------------------------------------------------------------ */
.hero { position: relative; background: var(--green-xd); color: rgba(255,255,255,.74); overflow: hidden; }
/* The mark is two ascending forms; echoed here as light, off-axis rules so the
   ground is not flat without resorting to a stock photograph. */
.hero::after {
  content: ""; position: absolute; right: -6%; top: -18%; width: 52%; height: 150%;
  background:
    linear-gradient(107deg, transparent 47.6%, rgba(255,255,255,.055) 47.6% 50.2%, transparent 50.2%),
    linear-gradient(107deg, transparent 63%, rgba(255,255,255,.035) 63% 67%, transparent 67%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; padding-top: clamp(64px,7vw,116px); padding-bottom: clamp(56px,6vw,96px); }
.hero h1 { color: #fff; max-width: 17ch; }
.hero h1 em { font-style: normal; color: #6ECFB6; }
.hero .lede { margin-top: 22px; }

/* --- The two doors -------------------------------------------------------- */
.doors { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: -1px; }
.door {
  background: var(--paper); padding: clamp(30px,3vw,46px) clamp(26px,2.6vw,42px) clamp(28px,2.8vw,42px);
  display: flex; flex-direction: column; transition: background-color .2s;
}
.door:hover { background: var(--paper-2); }
.door__n { font: 600 11.5px/1 var(--body); letter-spacing: .15em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.door h2 { font-size: clamp(26px,2.5vw,36px); margin-bottom: 12px; }
.door p  { margin-bottom: 22px; }
.door ul { margin: 0 0 26px; }
.door li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--rule); font-size: 15.5px; }
.door li::before { content: ""; position: absolute; left: 1px; top: 16px; width: 7px; height: 7px; border: 1.5px solid var(--green); border-left: 0; border-bottom: 0; transform: rotate(45deg); }
.door .btn { margin-top: auto; align-self: flex-start; }

/* --- Section head --------------------------------------------------------- */
.head { max-width: 62ch; margin-bottom: clamp(34px,3.4vw,54px); }
.head--split { display: grid; grid-template-columns: 1fr .82fr; gap: 20px 56px; align-items: end; max-width: none; }
.head--split .lede { margin: 0; }

/* --- Card grid (services, features, benefits) ----------------------------- */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cards--2 { grid-template-columns: repeat(2,1fr); }
.cards--4 { grid-template-columns: repeat(4,1fr); }
.card { background: var(--paper); padding: 32px 28px 34px; }
.tint .card { background: var(--paper-2); }
.card h3 { margin-bottom: 10px; }
.card p  { font-size: 15.5px; }
.card ul { margin-top: 18px; }
.card li { position: relative; padding: 7px 0 7px 20px; font-size: 15px; color: var(--slate); border-top: 1px solid var(--rule); }
.card li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; background: var(--green-w); border-left: 2px solid var(--green); }

/* --- Three-up standing claims (Fiduciary / Tailored / Transparent) -------- */
.claims { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
.claim { background: var(--green-xd); padding: 34px 30px 36px; }
.claim dt { font-family: var(--display); font-size: clamp(24px,2.2vw,32px); font-weight: 600; color: #fff; letter-spacing: -.02em; margin-bottom: 8px; }
.claim dd { margin: 0; font-size: 15.5px; color: rgba(255,255,255,.7); }

/* --- Numbered process ----------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); counter-reset: step; }
.steps--4 { grid-template-columns: repeat(4,1fr); }
.step { background: var(--paper); padding: 30px 26px 34px; counter-increment: step; }
.tint .step { background: var(--paper-2); }
.step::before {
  content: counter(step,decimal-leading-zero);
  display: block; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--green);
  font: 600 13px/1 var(--body); letter-spacing: .12em; color: var(--green);
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p  { font-size: 15.5px; }

/* --- Rule list: a plain checklist that still looks like a record ---------- */
.rulelist { border-top: 2px solid var(--ink); }
.dark .rulelist { border-top-color: rgba(255,255,255,.5); }
.rulelist li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 16px; color: var(--ink); }
.dark .rulelist li { border-bottom-color: var(--rule-dark); color: rgba(255,255,255,.84); }
.rulelist li::before { content: ""; flex: none; width: 9px; height: 5px; margin-top: 8px; border: 2px solid var(--green); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.dark .rulelist li::before { border-color: #6ECFB6; }

/* --- Split: copy beside a panel ------------------------------------------- */
.split { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(32px,4vw,64px); align-items: center; }
.panel { background: var(--paper); border: 1px solid var(--rule); padding: clamp(26px,2.6vw,40px); }
.dark .panel { background: rgba(255,255,255,.04); border-color: var(--rule-dark); }

/* --- Closer band ---------------------------------------------------------- */
.closer { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.closer h2 { max-width: 20ch; }
.closer .btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Page header (interior pages) ----------------------------------------- */
.phead { background: var(--green-xd); color: rgba(255,255,255,.72); position: relative; overflow: hidden; }
.phead::after {
  content: ""; position: absolute; right: -4%; top: -30%; width: 40%; height: 170%;
  background: linear-gradient(107deg, transparent 48%, rgba(255,255,255,.05) 48% 51%, transparent 51%);
}
.phead .wrap { position: relative; z-index: 1; padding-top: clamp(48px,5vw,84px); padding-bottom: clamp(44px,4.6vw,76px); }
.phead h1 { color: #fff; max-width: 18ch; }
.phead .lede { margin-top: 18px; }
.phead .btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* --- Documents (disclosures) ---------------------------------------------- */
.docs { border-top: 2px solid var(--ink); }
.doc { display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.doc h3 { font-size: 21px; margin-bottom: 6px; }
.doc p  { font-size: 15.5px; margin: 0; max-width: 64ch; }
.doc__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font: 600 11.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.doc__type { padding: 4px 7px; background: var(--green-w); color: var(--green-d); border-radius: 2px; letter-spacing: .1em; }

/* --- Contact -------------------------------------------------------------- */
.withform { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px,4vw,64px); align-items: start; }
.facts { border-top: 2px solid var(--ink); margin-bottom: 34px; }
.fact { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.fact dt { font: 600 11.5px/1.5 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fact dd { margin: 0; color: var(--ink); }
.fact a:hover { color: var(--green); }

.form { background: var(--paper); border: 1px solid var(--rule); padding: clamp(24px,2.6vw,38px); }
.tint .form { background: var(--paper); }
.form__row { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; font: 600 13px/1 var(--body); letter-spacing: .01em; color: var(--ink); }
.field .req { color: var(--green); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 13px; border: 1px solid var(--rule); border-radius: 2px;
  font: 400 16px/1.4 var(--body); color: var(--ink); background: var(--paper);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(15,111,89,.14);
}
.form .btn { width: 100%; margin-top: 6px; }
.form__note { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
/* Netlify's spam honeypot — a real field to a bot, nothing to a person. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --- Prose (policy pages) ------------------------------------------------- */
.prose { max-width: 70ch; font-size: 17px; line-height: 1.72; }
.prose h2 { font-size: clamp(23px,2vw,30px); margin: 42px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.1em; }
.prose li { position: relative; padding: 5px 0 5px 20px; }
.prose li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; background: var(--green); }
.prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.prose__meta { margin-bottom: 30px; font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* --- Regulatory strip: the numbers an adviser must always show ------------ */
.reg { display: flex; flex-wrap: wrap; gap: 10px 40px; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
.reg div { font-size: 15px; }
.reg dt { display: inline; font: 600 11.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.reg dd { display: inline; margin: 0; color: var(--ink); font-weight: 600; }

/* --- Footer --------------------------------------------------------------- */
.ftr { background: var(--green-xd); color: rgba(255,255,255,.62); padding: clamp(48px,5vw,72px) 0 0; font-size: 15px; }
.ftr__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 36px; padding-bottom: 44px; }
/* A true reversed lockup now, so no filter and no opacity fudge: the mark
   carries the mint this design uses on dark grounds, the wordmark is white. */
.ftr__logo img { width: 215px; height: auto; margin-bottom: 18px; }
.ftr h4 { color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 15px; }
.ftr li { padding: 5px 0; }
.ftr a:hover { color: #fff; }
.ftr__aog { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule-dark); font-size: 13.5px; color: rgba(255,255,255,.5); }
.ftr__aog a { color: rgba(255,255,255,.78); text-decoration: underline; text-underline-offset: 3px; }
.ftr__bar { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; padding: 20px 0; border-top: 1px solid var(--rule-dark); font-size: 13.5px; }
.ftr__bar nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px 22px; }
.ftr__legal { padding: 24px 0 40px; border-top: 1px solid var(--rule-dark); font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.46); }
.ftr__legal p { max-width: 96ch; }

/* --- Focus ---------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 1px; }
.dark :focus-visible, .hero :focus-visible, .ftr :focus-visible, .phead :focus-visible { outline-color: #6ECFB6; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 11px 18px; background: var(--green); color: #fff;
  font: 600 14px/1 var(--body); border-radius: 2px; transition: top .18s;
}
.skip:focus { top: 12px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .cards--4 { grid-template-columns: repeat(2,1fr); }
  .steps--4 { grid-template-columns: repeat(2,1fr); }
  .ftr__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  :root { --hdr: 76px; }
  .hdr__logo img { width: 172px; }
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--hdr) 0 auto; flex: none; margin-left: 0;
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 12px var(--gutter) 26px; background: var(--paper);
    border-bottom: 1px solid var(--rule); transform: translateY(-140%); transition: transform .26s;
    max-height: calc(100vh - var(--hdr)); overflow-y: auto;
  }
  /* The two groups stack in the drawer; the horizontal split only makes sense
     when there is a width to split. */
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__actions { flex-direction: column; align-items: stretch; gap: 10px;
                  margin-left: 0; margin-top: 18px; }
  .nav[data-open="true"] { transform: none; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
  .nav a[aria-current="page"] { border-bottom-color: var(--rule); }
  .nav a.btn, .nav a.btn--line { margin-top: 0; justify-content: center; border-bottom-width: 1.5px; }
  .doors, .cards, .cards--2, .cards--4, .claims, .steps, .steps--4 { grid-template-columns: 1fr; }
  .split, .withform, .head--split { grid-template-columns: 1fr; }
  .head--split .lede { max-width: 62ch; }
  .closer { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .doc { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .fact { grid-template-columns: 1fr; gap: 4px; }
  .ftr__top { grid-template-columns: 1fr; gap: 30px; }
  .ftr__bar nav { margin-left: 0; }
  .reg { gap: 10px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══ Home hero with photography ═════════════════════════════════════════
   The photo is declared here rather than as an <img> so the page degrades
   honestly: until a licensed image lands in /assets/photos/, the green ground
   below shows through and the hero still reads. Drop the file in and it
   appears — no markup change.

   The scrim is not decoration. Stock photography has no contrast contract
   with our type, so the heading sits on a guaranteed dark gradient rather
   than on whatever the image happens to be doing at that corner. */
.hero--photo { min-height: clamp(460px, 62vh, 680px); display: flex; align-items: center; }
/* No background-image here on purpose. build.py emits one inline only when
   the file actually exists in /assets/photos/, so an unfilled slot costs a
   failed request on every single page load rather than nothing. */
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: 62% center;
}
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(94deg, rgba(6,52,42,.94) 0%, rgba(6,52,42,.86) 38%, rgba(6,52,42,.42) 68%, rgba(6,52,42,.24) 100%),
    linear-gradient(0deg, rgba(6,52,42,.5) 0%, transparent 42%);
}
.hero--photo .wrap { z-index: 2; }
.hero--photo .hero__copy { max-width: 42rem; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; }
.hero__call { font-size: 15.5px; color: rgba(255,255,255,.72); }
.hero__call a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.4); }
.hero__call a:hover { border-bottom-color: #fff; }
/* On a phone the image is behind a nearly opaque scrim anyway, so it is not
   worth the bytes. */
@media (max-width: 720px) {
  .hero__media { display: none; }
  .hero--photo::before { background: none; }
}

/* ═══ Audience paths: three light cards, LPL's pattern ════════════════════
   Deliberately light. These route a visitor who already knows what they came
   for; they are not the page's argument, and a family reading top to bottom
   should be able to slide straight past them into the copy below. */
.paths { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.path { background: var(--paper); padding: 30px 28px 32px; display: flex; flex-direction: column; transition: background-color .2s; }
.path:hover { background: var(--paper-2); }
.path h3 { font-size: 21px; margin-bottom: 9px; }
.path p { font-size: 15.5px; margin-bottom: 20px; }
.path__go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
            font: 600 14.5px/1 var(--body); color: var(--green);
            padding-bottom: 5px; border-bottom: 2px solid var(--green-w); transition: border-color .18s; }
.path:hover .path__go { border-bottom-color: var(--green); }
.path__go span { transition: transform .18s; }
.path:hover .path__go span { transform: translateX(3px); }

/* ═══ Credentials ════════════════════════════════════════════════════════
   Where Fisher puts AUM and client counts, we put the things that are true
   and checkable. A registered adviser's numbers are examinable, so nothing
   goes here that did not come from the firm verbatim. */
.creds { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
.cred { background: var(--green-xd); padding: 30px 26px 32px; }
.cred dt { font-family: var(--display); font-size: clamp(20px,1.7vw,25px); font-weight: 600; color: #fff; letter-spacing: -.018em; line-height: 1.15; margin-bottom: 9px; }
.cred dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.66); }

/* ═══ Advisor band: the one place recruiting appears on a client page ═════ */
.advisorband { background: var(--paper-2); border-top: 1px solid var(--rule); }
.advisorband .split { align-items: center; }
.advisorband .eyebrow { color: var(--green); }

@media (max-width: 960px) {
  .paths { grid-template-columns: 1fr; }
  .creds { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .creds { grid-template-columns: 1fr; }
}

/* ═══ Interior page header with photography ══════════════════════════════
   Same contract as the home hero: the image is a background, so a missing
   file leaves the green ground and the page still reads. Shorter than the
   home hero on purpose — an interior page's job is to get out of the way. */
.phead--photo { min-height: clamp(320px, 42vh, 440px); display: flex; align-items: center; }
.phead__media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: 68% center;
}
.phead--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(94deg, rgba(6,52,42,.95) 0%, rgba(6,52,42,.87) 40%, rgba(6,52,42,.46) 72%, rgba(6,52,42,.26) 100%);
}
.phead--photo .wrap { z-index: 2; }
.phead--photo h1, .phead--photo .lede { max-width: 38rem; }
@media (max-width: 720px) {
  .phead__media { display: none; }
  .phead--photo::before { background: none; }
}

/* ═══ Disclosure band ════════════════════════════════════════════════════
   Rule 206(4)-1(a)(4) asks for "fair and balanced" treatment of material
   risks alongside the benefits. Six-point grey fine print is neither, so
   this is set at readable size on its own ground, immediately after the copy
   it qualifies. It is quieter than body text and louder than a footnote,
   which is the honest place for it. */
.disclosure { background: var(--paper-2); border-top: 1px solid var(--rule); }
.disclosure__h { font-size: clamp(17px,1.3vw,19px); font-family: var(--body); font-weight: 600;
                 letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
                 padding-bottom: 14px; margin-bottom: 22px; border-bottom: 2px solid var(--ink); }
.disclosure__body { column-count: 2; column-gap: 46px; font-size: 14.5px; line-height: 1.62; color: var(--slate); }
.disclosure__body p { margin: 0 0 1em; break-inside: avoid; }
.disclosure__body strong { color: var(--ink); }
.disclosure__body a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .disclosure__body { column-count: 1; } }

/* ═══ Returning-visitor hint ═════════════════════════════════════════════
   A slim bar under the header, shown only to someone who has already chosen
   a section, and only on the home page. It is inserted during parse rather
   than after load, so it occupies its space before the first paint instead
   of pushing the hero down in front of the reader. */
.hint { background: var(--green-w); border-bottom: 1px solid var(--rule); }
.hint .wrap { display: flex; align-items: center; gap: 10px 20px; padding-top: 11px; padding-bottom: 11px; }
.hint p { margin: 0; font-size: 14.5px; color: var(--green-d); }
.hint__go { display: inline-flex; align-items: center; gap: 7px;
            font: 600 14.5px/1 var(--body); color: var(--green-d);
            padding-bottom: 3px; border-bottom: 2px solid rgba(15,111,89,.3); transition: border-color .18s; }
.hint__go:hover { border-bottom-color: var(--green-d); }
.hint__go span { transition: transform .18s; }
.hint__go:hover span { transform: translateX(3px); }
.hint__x { margin-left: auto; width: 30px; height: 30px; flex: none;
           background: none; border: 0; border-radius: 2px; cursor: pointer;
           font-size: 21px; line-height: 1; color: var(--green-d); opacity: .6;
           transition: opacity .15s, background-color .15s; }
.hint__x:hover { opacity: 1; background: rgba(15,111,89,.09); }
@media (max-width: 560px) {
  .hint .wrap { flex-wrap: wrap; gap: 6px 16px; }
  .hint__x { margin-left: auto; }
}