/* capital.css — Additive styles for the Venture & Capital Markets Practice
   surface (/capital/*). Reuses every token and primitive from shared.css and
   practice.css. The only divergences from the consumer side are:
     1. A longer practice-group eyebrow (firm name + practice designation)
     2. A parent-PLLC disclosure line below the page header
     3. A breadcrumb that surfaces the parent firm
     4. An audience-tile and service-tile component reused across landings
     5. A team-strip component that presents both partners with parity
   No new colors. No new fonts. No new sizing tokens. Same buttons, takeaways,
   FAQ accordions, and CTA blocks as the rest of the site. */

/* ── Practice-group eyebrow ──────────────────────────────────────────────────
   Renders above page titles. Two-line treatment on narrow viewports so the
   firm name never breaks awkwardly. Same DM Mono / gold treatment used by
   .pa-eyebrow and .gl-eyebrow elsewhere; the only distinction is the longer
   label and the soft mid-dot separator. */
.cap-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:.55rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-d,#8b6914);
  margin-bottom:16px;
  display:block;
  line-height:1.6;
}
.cap-eyebrow__firm{color:var(--gold-d,#8b6914)}
.cap-eyebrow__sep{display:inline-block;margin:0 .5em;color:rgba(139,105,20,.55)}
.cap-eyebrow__group{color:var(--gold-d,#8b6914)}
@media(max-width:600px){
  .cap-eyebrow{font-size:.5rem}
  .cap-eyebrow__sep{display:block;height:0;margin:2px 0;visibility:hidden}
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────────
   Sits below the practice-group eyebrow on interior pages. Surfaces the parent
   firm at every page level so the operator audience always sees the PLLC name.
   Visual register matches existing in-page mono labels. */
.cap-crumb{
  font-family:'DM Mono',monospace;
  font-size:.6rem;
  letter-spacing:.08em;
  color:var(--text3,#6b7280);
  margin:18px 0 8px;
  line-height:1.6;
}
.cap-crumb a{color:var(--text2,#374151)}
.cap-crumb a:hover{color:var(--gold,#9e7b1e)}
.cap-crumb__sep{display:inline-block;margin:0 .4em;color:rgba(107,114,128,.5)}

/* ── Parent-PLLC disclosure line ─────────────────────────────────────────────
   Appears once on every Capital page, immediately below the hero. Establishes
   that there is no separate legal entity. Italic, restrained, balanced. The
   text-wrap: balance declaration distributes the words evenly across lines so
   the centered disclosure reads as a clean, deliberate block instead of a
   long top line followed by a short trailing line. */
.cap-disclosure{
  font-size:.82rem;
  font-style:italic;
  color:var(--text3,#6b7280);
  line-height:1.75;
  max-width:720px;
  margin:24px auto 0;
  padding:18px 24px;
  border-top:1px solid rgba(158,123,30,.18);
  border-bottom:1px solid rgba(158,123,30,.18);
  text-align:center;
  text-wrap:balance;
  word-spacing:.02em;
}
.cap-disclosure strong{
  color:var(--text2,#374151);
  font-style:normal;
  font-weight:500;
  letter-spacing:.005em;
}
@media(max-width:600px){
  .cap-disclosure{font-size:.78rem;line-height:1.7;padding:14px 18px}
}

/* ── Hero positioning text ───────────────────────────────────────────────────
   Lead paragraph below the H1. Slightly larger and lighter than body. Mirrors
   the .pa-meta / .gl-meta treatment. text-wrap:balance evens the line breaks
   so the lede doesn't end on a one-word orphan. */
.cap-lede{
  font-size:1.05rem;
  font-weight:300;
  line-height:1.85;
  color:var(--text2,#374151);
  max-width:640px;
  margin:0 auto;
  text-wrap:balance;
}

/* ── Typographic refinement across Capital pages ────────────────────────────
   Modern CSS text-wrapping: "balance" for short blocks (headings, ledes),
   "pretty" for longer body paragraphs (avoids one-word orphans on the last
   line). Both gracefully degrade to default text wrapping on browsers that
   don't support them. Scoped via the body classes that capital.css governs
   so the consumer side is untouched. */
.pa-header h1,
.cap-section__title,
.cap-section__sub,
.cap-svc__title,
.cap-svc__desc,
.cap-tile__title,
.cap-featured__title,
.cap-team__name,
.cap-team__focus{text-wrap:balance}
.gl-body p,
.pa-body p,
.cap-svc__desc,
.cap-tile__desc{text-wrap:pretty}

/* Preserve baseline rhythm on subsection h3s in long guides */
.gl-body h3,
.pa-body h3{margin-top:28px}

/* ── CTA-section heading on Capital pages ───────────────────────────────────
   The shared .cta-section h2 in practice.css inherits the body sans-serif
   (Outfit), which on Capital pages reads as a different typographic family
   than every other heading (Playfair Display serif). Switching to Playfair
   here so the dark-navy CTA card sits inside the same heading vocabulary
   as the rest of the Capital surface. */
.cta-section h2{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  letter-spacing:.005em;
}
.cta-section h2 em{font-style:italic;color:#d4aa42}

/* ── Tile grid — used for audience tiles, service tiles, guide tiles ────────
   Three-up on desktop, single-column on mobile. The card itself reuses the
   same border / shadow / hover treatment as practice-area cards on the
   homepage, so a returning visitor recognizes the component. */
.cap-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:32px 0;
}
.cap-tiles--two{grid-template-columns:repeat(2,1fr)}
.cap-tiles--four{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){
  .cap-tiles,
  .cap-tiles--two,
  .cap-tiles--four{grid-template-columns:1fr;gap:14px}
}

.cap-tile{
  display:block;
  background:#fff;
  border:1px solid var(--border,#e5e7eb);
  border-radius:var(--r2,12px);
  padding:24px 22px;
  transition:box-shadow .25s,transform .25s,border-color .25s;
  text-decoration:none;
  color:inherit;
}
.cap-tile:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transform:translateY(-2px);
  border-color:rgba(158,123,30,.3);
}
.cap-tile__eyebrow{
  font-family:'DM Mono',monospace;
  font-size:.55rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold-d,#8b6914);
  display:block;
  margin-bottom:8px;
}
.cap-tile__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--navy,#1d2a40);
  line-height:1.3;
  margin-bottom:8px;
  display:block;
}
.cap-tile__desc{
  font-size:.85rem;
  font-weight:300;
  color:var(--text3,#6b7280);
  line-height:1.65;
  display:block;
}
.cap-tile__more{
  font-family:'DM Mono',monospace;
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-d,#8b6914);
  margin-top:12px;
  display:inline-block;
}

/* ── Service catalog rows — used on /capital/services ───────────────────────
   Sectioned list of services grouped by practice category. Each section gets
   a heading row, a short description, and a tight bulleted list. Same
   typography as .pa-body but laid out as discrete cards for scannability. */
.cap-svc{
  background:#fff;
  border:1px solid var(--border,#e5e7eb);
  border-radius:var(--r2,12px);
  padding:28px 28px 24px;
  margin:0 0 16px;
}
.cap-svc__eyebrow{
  font-family:'DM Mono',monospace;
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-d,#8b6914);
  margin-bottom:10px;
  display:block;
}
.cap-svc__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.15rem;
  font-weight:700;
  color:var(--navy,#1d2a40);
  line-height:1.3;
  margin-bottom:10px;
}
.cap-svc__desc{
  font-size:.92rem;
  font-weight:300;
  color:var(--text2,#374151);
  line-height:1.75;
  margin-bottom:14px;
}
.cap-svc__list{
  list-style:disc;
  margin:0 0 0 22px;
}
.cap-svc__list li{
  font-size:.9rem;
  font-weight:300;
  color:var(--text2,#374151);
  line-height:1.8;
  margin-bottom:6px;
}
.cap-svc__list li:last-child{margin-bottom:0}
@media(max-width:600px){
  .cap-svc{padding:20px 18px}
  .cap-svc__title{font-size:1.05rem}
}

/* ── Team strip — both partners with parity ─────────────────────────────────
   Used on the landing page and on /capital/team/. Two equally weighted columns
   on desktop, stacked on mobile. Both partner cards use the same dimensions,
   the same image treatment, and the same byline structure. */
.cap-team{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:24px 0 8px;
}
@media(max-width:700px){.cap-team{grid-template-columns:1fr;gap:14px}}

.cap-team__card{
  display:block;
  background:#fff;
  border:1px solid var(--border,#e5e7eb);
  border-radius:var(--r2,12px);
  padding:24px 22px;
  text-decoration:none;
  color:inherit;
  transition:box-shadow .25s,transform .25s,border-color .25s;
}
.cap-team__card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transform:translateY(-2px);
  border-color:rgba(158,123,30,.3);
}
.cap-team__name{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.1rem;
  font-weight:700;
  color:var(--navy,#1d2a40);
  margin-bottom:4px;
  line-height:1.3;
}
.cap-team__role{
  font-family:'DM Mono',monospace;
  font-size:.58rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-d,#8b6914);
  display:block;
  margin-bottom:12px;
}
.cap-team__focus{
  font-size:.88rem;
  font-weight:300;
  color:var(--text2,#374151);
  line-height:1.7;
  margin-bottom:12px;
}
.cap-team__more{
  font-family:'DM Mono',monospace;
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-d,#8b6914);
}

/* ── Section heading helper — used to break up landing-page content ─────────
   Title + short subtitle row centered above tile grids. Matches the visual
   weight of the homepage section headings. */
.cap-section{margin:clamp(40px,6vw,64px) 0 0}
.cap-section__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.3rem,3vw,1.7rem);
  font-weight:700;
  color:var(--navy,#1d2a40);
  text-align:center;
  margin-bottom:8px;
  line-height:1.3;
}
.cap-section__title em{font-style:italic;color:var(--gold-d,#8b6914)}
.cap-section__sub{
  font-size:.92rem;
  font-weight:300;
  color:var(--text3,#6b7280);
  text-align:center;
  max-width:580px;
  margin:0 auto;
  line-height:1.7;
}

/* ── Engagement-inquiry form — distinct from consumer "Free Consultation" ──
   Visual structure mirrors the practice-page subscribe form, but the field
   set is broader (stage, instrument, jurisdiction, urgency) and the CTA reads
   "Submit Inquiry" rather than the consumer-side "Subscribe". */
.cap-form{
  background:#fff;
  border:1px solid var(--border,#e5e7eb);
  border-radius:var(--r2,12px);
  padding:clamp(28px,4vw,40px);
  margin:24px 0;
}
.cap-form__row{margin-bottom:16px}
.cap-form__row:last-of-type{margin-bottom:24px}
.cap-form__label{
  display:block;
  font-family:'DM Mono',monospace;
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text3,#6b7280);
  margin-bottom:6px;
}
.cap-form__input,
.cap-form__select,
.cap-form__textarea{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--border,#e5e7eb);
  border-radius:var(--r,6px);
  background:#fff;
  color:var(--navy,#1d2a40);
  font-family:'Outfit',sans-serif;
  font-size:.92rem;
  font-weight:300;
  min-height:48px;
}
.cap-form__textarea{min-height:120px;resize:vertical;line-height:1.6}
.cap-form__input:focus,
.cap-form__select:focus,
.cap-form__textarea:focus{
  outline:3px solid var(--gold,#9e7b1e);
  outline-offset:1px;
  border-color:var(--gold,#9e7b1e);
}
.cap-form__row--two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.cap-form__row--two{grid-template-columns:1fr;gap:0}.cap-form__row--two .cap-form__row{margin-bottom:16px}}
.cap-form__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 32px;
  background:var(--gold,#9e7b1e);
  color:#000;
  font-family:'DM Mono',monospace;
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  border:none;
  border-radius:var(--r,6px);
  cursor:pointer;
  min-height:48px;
  transition:background .2s;
}
.cap-form__submit:hover{background:var(--gold-h,#d4aa42)}
.cap-form__note{
  font-size:.7rem;
  color:var(--text3,#6b7280);
  margin-top:10px;
  font-style:italic;
}

/* ── Featured-guide highlight — used on the landing to surface the venture
       guide. Reuses the .quick-answer aesthetic. */
.cap-featured{
  background:linear-gradient(135deg,#f8f5f0 0%,#fafaf8 100%);
  border-left:4px solid var(--gold,#9e7b1e);
  border-radius:var(--r2,12px);
  padding:24px 26px;
  margin:24px 0;
}
.cap-featured__eyebrow{
  font-family:'DM Mono',monospace;
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-d,#8b6914);
  margin-bottom:10px;
  display:block;
}
.cap-featured__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.15rem;
  font-weight:700;
  color:var(--navy,#1d2a40);
  margin-bottom:8px;
  line-height:1.3;
}
.cap-featured__desc{
  font-size:.92rem;
  font-weight:300;
  color:var(--text2,#374151);
  line-height:1.7;
  margin-bottom:14px;
}
.cap-featured__cta{
  font-family:'DM Mono',monospace;
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-d,#8b6914);
  text-decoration:none;
}
.cap-featured__cta:hover{color:var(--gold,#9e7b1e)}

/* ── Capital Table of Contents ──────────────────────────────────────────────
   A more refined alternative to the generic .page-toc in practice.css.
   Uses CSS counter() with decimal-leading-zero numerals set in DM Mono so
   every entry's number column has identical glyph width, plus a real CSS
   grid (not column-count) so column 1 and column 2 reach the same height.
   Each row has equal vertical padding and a soft separator. Stacks to a
   single column on mobile. */
.cap-toc{
  background:#fff;
  border:1px solid var(--border,#e5e7eb);
  border-radius:12px;
  padding:clamp(20px,3vw,28px) clamp(20px,3vw,32px);
  margin:0 0 clamp(32px,5vw,48px);
}
.cap-toc__label{
  font-family:'DM Mono',monospace;
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-d,#8b6914);
  margin:0 0 16px;
  display:block;
  font-weight:500;
}
.cap-toc__list{
  list-style:none;
  padding:0;
  margin:0;
  counter-reset:cap-toc;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:36px;
  row-gap:0;
}
.cap-toc__list li{
  counter-increment:cap-toc;
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:10px 0;
  border-top:1px solid rgba(229,231,235,.7);
  break-inside:avoid;
}
.cap-toc__list li:first-child,
.cap-toc__list li:nth-child(2){border-top:none}
.cap-toc__list li::before{
  content:counter(cap-toc,decimal-leading-zero);
  font-family:'DM Mono',monospace;
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--gold-d,#8b6914);
  flex-shrink:0;
  min-width:26px;
}
.cap-toc__list a{
  color:var(--navy,#1d2a40);
  font-size:.92rem;
  line-height:1.45;
  flex:1;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.cap-toc__list a:hover{
  color:var(--gold-d,#8b6914);
  border-bottom-color:rgba(139,105,20,.4);
}
@media(max-width:680px){
  .cap-toc__list{grid-template-columns:1fr;column-gap:0}
  .cap-toc__list li:nth-child(2){border-top:1px solid rgba(229,231,235,.7)}
}

/* ── Team photos ────────────────────────────────────────────────────────────
   Round portrait treatment used on the team strip (.cap-team__photo, smaller)
   and the individual bio pages (.bio-photo, larger). Consolidated here so the
   styling is identical across pages and any future change is one place. */
.cap-team__photo,
.bio-photo{
  display:block;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--border,#e5e7eb);
  box-shadow:0 2px 8px rgba(29,42,64,.06);
  background:#fff;
}
.cap-team__photo{width:120px;height:120px;margin:0 auto 16px}
.bio-photo{width:160px;height:160px;margin:0 auto 20px}

/* ── Bio meta row (dual-bio link) ──────────────────────────────────────────
   The "Consumer-side bio" cross-link is small and discreet but should be
   visibly interactive on hover. */
.bio-meta a{transition:color .2s,border-bottom-color .2s;border-bottom:1px solid transparent}
.bio-meta a:hover{color:var(--gold,#9e7b1e);border-bottom-color:rgba(158,123,30,.4)}

/* ── TOC anchor offsets ─────────────────────────────────────────────────────
   When a TOC link jumps to an in-page heading, the heading should not slide
   under the sticky nav. scroll-margin-top creates a visual buffer so the
   target heading lands cleanly below the nav on click. */
.gl-body h2[id],.pa-body h2[id]{scroll-margin-top:80px}
.cap-svc[id]{scroll-margin-top:80px}
.pa-faq details{scroll-margin-top:80px}

/* ── FAQ accordion focus polish ─────────────────────────────────────────────
   The .pa-faq summary already has hover states from practice.css; this adds
   a subtle keyboard-focus ring matching the rest of the site. */
.pa-faq summary:focus-visible{outline:3px solid var(--gold,#9e7b1e);outline-offset:2px;border-radius:6px}
.pa-faq details[open] summary{color:var(--gold-d,#8b6914)}

/* (.cap-xlink moved to practice.css so consumer-side practice pages can
    render the cross-link without including this Capital stylesheet.)

    The Capital nav uses /images/rr_logo_gold_full.png — the firm's full
    wordmark (RAUSA <scales> RUSSO with "Rausa Russo Law, PLLC" subtitle)
    without any practice designation. Practice context is established
    through the .cap-eyebrow on each page, the .cap-crumb breadcrumb, the
    .cap-disclosure line, and the footer practice-group label, not by
    burning a designation into the logo.

    On Capital pages the wordmark is rendered white in both the header and
    footer, regardless of which color the source asset ships in. The CSS
    filter below converts any logo (currently the gold PNG) to pure white
    against the dark navy nav and footer surfaces. The Capital nav also
    gets a hair more vertical padding than the consumer nav so the
    smaller wordmark has room to breathe. */
.pa-nav__logo[src*="gold_full"]{height:48px;max-width:none;width:auto;filter:brightness(0) invert(1)}
.footer-logo-img[src*="gold_full"]{filter:brightness(0) invert(1)}
body:has(.pa-nav__logo[src*="gold_full"]) .pa-nav{padding:20px 0}
@media(max-width:600px){
  .pa-nav__logo[src*="gold_full"]{height:36px}
  body:has(.pa-nav__logo[src*="gold_full"]) .pa-nav{padding:14px 0}
}

/* ── Print ──────────────────────────────────────────────────────────────────
   Capital pages print as documents, not as marketing. Hide nav, CTA, form,
   sticky CTA. Keep the disclosure line — it's the parent-firm identification. */
@media print{
  .pa-nav,
  .cap-form,
  .sticky-cta,
  #geo-disclaimers,
  .skip-link{display:none!important}
  .cap-disclosure{border-color:#000;color:#000}
  .cap-tile,
  .cap-svc,
  .cap-team__card{break-inside:avoid;border-color:#999}
}